GridEditor.vue 45.7 KB
Newer Older
Anton's avatar
Intial  
Anton committed
1 2
<template lang="pug">

3
  div.cell-grid-container(
4
  :class="{'overflow-hidden': activeHandler}",
5
  style="overflow-y: hidden; scroll-behavior: smooth;")
christianrhansen's avatar
christianrhansen committed
6

christianrhansen's avatar
christianrhansen committed
7 8 9
    q-window-resize-observable(@resize="updateGridDimensions")

    //----- modal for existing cell editing
christianrhansen's avatar
christianrhansen committed
10
    q-modal(v-model="modal", minimized, content-css="background-color: #eee; border-radius: .5rem;")
11
      grid-editor-editing-cells-mobile
12

13
    // -----------------------------------------------------------------------------------------------------------------
christianrhansen's avatar
christianrhansen committed
14
    // ----------------------------------------------------------------------------------------------- "new cell"-header
15 16
    #new-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}")
      q-item.q-pl-md.q-pr-xs.q-py-none.full-height
17
        q-item-main
18
          strong New {{ newCellType }}
19

christianrhansen's avatar
christianrhansen committed
20 21
        q-item-side.text-white
          q-btn(@click="event => {addMobileCell(event)}", round, flat)
22 23
            q-icon(name="check")

christianrhansen's avatar
christianrhansen committed
24
          q-btn.clear-button.q-px-md.q-mr-md.on-right(@click="clearHandler('cached cell')", flat)
christianrhansen's avatar
christianrhansen committed
25
            q-icon(name="clear")
26

christianrhansen's avatar
christianrhansen committed
27
    // ------------------------------------------------------------------------------------------ "selected cell"-header
28
    #selected-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': showEditingCells}")
29
      q-item.q-pl-md.q-pr-none.q-py-none.full-height(v-if="!modal")
30
        q-item-main
31
          strong {{ selectedCell.type }}
32

christianrhansen's avatar
christianrhansen committed
33 34
        q-item-side.text-white
          q-btn.q-px-sm(@click="event => {handleCellEdit(event, selectedCell.annotation)}", flat)
35 36
            q-icon(name="edit")

christianrhansen's avatar
christianrhansen committed
37
          q-btn.q-px-sm.on-right.on-left(
38
          @click="event => {handleCellContextMenuDelete(event, selectedCell.annotation)}", flat)
39
            q-icon(name="delete")
40

christianrhansen's avatar
christianrhansen committed
41
          q-btn.clear-button.q-px-md.q-mr-md.on-right(@click="clearHandler('cell')", flat)
42 43
            q-icon(name="clear")

44
    // -----------------------------------------------------------------------------------------------------------------
45
    // ------------------------------------------------------------------------------------------------------------ grid
46
    div.cell-grid.relative-position(
47
    v-touch-pan="panGrid",
48 49 50 51 52 53
    @dragenter="handleGridDragOver",
    @dragover="handleGridDragOver",
    @dragleave="handleGridDragEnd",
    @drop="handleGridDrop",
    @contextmenu="handleGridContextMenu",
    :style="gridStyle")
Anton's avatar
Intial  
Anton committed
54

55
      //----------------------------------------------------------------------------------- context menu: grid (desktop)
56
      q-context-menu.desktop-only(ref="gridmenu")
Anton's avatar
Intial  
Anton committed
57 58
        q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
          q-item(
59 60 61 62 63
          v-for="action in gridContextMenuActions",
          :key="action.label",
          v-close-overlay,
          @click.native="event => {action.handler(event)}")
            q-item-main(:label="action.label")
Anton's avatar
Intial  
Anton committed
64 65 66

      template(v-if="!resizingGrid")

christianrhansen's avatar
christianrhansen committed
67 68
        //--------------------------------------------------------------------------------------------------------------
        //--------------------------------------------------------------------------------------------------------- cell
69
        template(v-for="(annotation, index) in annotations")
70
          // v-touch-hold="event => {cellCopy(event, annotation)}",
Anton's avatar
Intial  
Anton committed
71
          .cell-item(
72 73 74 75 76 77 78 79 80 81
          v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
          draggable="true",
          @click.prevent="event => {handleCellTouch(event, annotation)}",
          @dragstart="event => {handleCellDragStart(event, annotation)}",
          @dragend="event => {handleCellDragEnd(event, annotation)}",
          @contextmenu="handleCellContextMenu",
          :style="getAnnotationStyle(annotation)",
          :class="getAnnotationClasses(annotation._uuid, 'cell-item')",
          :key="`cell-${index}`")

82
            //------------------------------------------------------------------------------------ edit-button (desktop)
83
            .desktop-only
Mathias Bär's avatar
Mathias Bär committed
84
              q-btn.edit-button.absolute-top-right(
85 86 87
              @click.prevent="event => {handleCellEditClick(event, annotation)}",
              :class="getAnnotationClasses(annotation._uuid, 'editing')",
              style="top: 8px; right: 8px;",
christianrhansen's avatar
christianrhansen committed
88 89
              :icon="annotationUIStates[annotation._uuid].editing ? 'close' : 'edit'", flat, round, size="md")

90
            //------------------------------------------------------------------------------------- select cell (mobile)
91
            .mobile-only
92
              .edit-button.absolute.fit.bg-transparent(
93
              v-touch-hold="event => {handleCellEdit(event, annotation)}",
94
              @click.prevent="event => {touchMobileCell(event, annotation)}")
95

96
            //--------------------------------------------------------------------------------------------- cell content
97
            //----- selecting cells disabled because it has no use currently
98 99 100 101 102
            // switch with cell component below to re-enable it
            //cell(
              @click.native.prevent="event => {handleCellClick(event, annotation)}", :annotation="annotation", :preview="true")
            cell(
            :annotation="annotation",
christianrhansen's avatar
christianrhansen committed
103
            :preview="true")
104

105 106
            //-------------------------------------------------------------------------------------------------- desktop
            //------------------------------------------------------------------------------------------- resize-handler
107
            .desktop-only.cell-item-resize-handle(
108 109 110 111
            draggable="true",
            @dragstart="event => {handleCellResizerDragStart(event, annotation)}",
            @dragend="event => {handleCellResizerDragEnd(event, annotation)}",
            @dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
112
              q-icon.q-ma-xs(name="network cell")
113

114
            //-------------------------------------------------------------------------------------- context menu: cells
115 116
            // TODO: needs revision
            q-context-menu.desktop-only
117 118 119 120 121 122 123
              q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
                q-item(
                v-for="action in cellContextMenuActions",
                :key="action.label",
                v-close-overlay,
                @click.native="event => {action.handler(event, annotation)}")
                  q-item-main(:label="action.label")
Anton's avatar
Intial  
Anton committed
124

christianrhansen's avatar
christianrhansen committed
125 126
        //----------------------------------------------------------------------------------------------- temporary cell
        //------------------------------------------------------------------------------------------------------ desktop
127
        template(v-for="(tmpCell, index) in tmpObjects")
128
          .cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
Anton's avatar
Intial  
Anton committed
129 130
            cell(:cell="tmpCell")

christianrhansen's avatar
christianrhansen committed
131
        //------------------------------------------------------------------------------------------------------- mobile
132
        template(v-if="mobileTempCell.show && cachedNewCell")
133 134 135
          .cell-item.cell-item-tmp-mobile.row.justify-center.items-center(
          ref="_mobileTempCell",
          :style="mobileTempCellStyle(mobileTempCell)")
christianrhansen's avatar
christianrhansen committed
136
            cell.absolute-top-left.q-ma-sm(:cell="cachedNewCell", :temp="true")
137

christianrhansen's avatar
christianrhansen committed
138 139
        //------------------------------------------------------------------------------------------------------ handler
        //--------------------------------------------------------------------------------------------------------- move
140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
        //----- (main)
        cell-handler-mobile.main-handler.shadow-1(
        v-if="!cellHandler.resize.pushed",
        @onIntersectionChange="intersectionChanged",
        :element="'move'",
        v-touch-pan="handleMoveCell",
        :style="{left: cellHandler.move.x - 20 + 'px', top: cellHandler.move.y - 20 + 'px'}",
        :class="[{'pushed': !cellHandler.move.pushed}, {'hide': !mobileTempCell.onGrid && !showEditingCells}]")
          q-icon.rotate-180(name="open_with", size="22px")

        //----- (temp)
        //----- (when main move handler is outside of viewport)
        cell-handler-mobile.temp-handler.shadow-1(
        v-touch-pan="handleMoveCell",
        :doubleTap="{el: $el, type: 'scroll', oLeft: mobileTempCell.left}",
        :class="[(!mobileTempCell.onGrid || tempHandler.move.intersectingMainHandler || cellHandler.resize.pushed || cellHandler.move.pushed ? 'hide': 'show'), (tempHandler.move.side === 'left' ? 'left-side' : 'right-side')]",
        :style="{top: cellHandler.move.y + 59 - 20 + 'px'}",)
          q-icon.rotate-180(name="open_with", size="22px")

christianrhansen's avatar
christianrhansen committed
159
        //------------------------------------------------------------------------------------------------------- resize
160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176
        //----- (main)
        cell-handler-mobile.main-handler.shadow-1(
        v-if="!cellHandler.move.pushed",
        @onIntersectionChange="intersectionChanged",
        :element="'resize'",
        v-touch-pan="handleResizeCell",
        :style="{left: cellHandler.resize.x - 20 + 'px', top: cellHandler.resize.y - 20 + 'px'}",
        :class="[{'pushed': !cellHandler.resize.pushed}, {'hide': !mobileTempCell.onGrid && !showEditingCells}]")
          q-icon(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")

        //----- (temp)
        //----- (when main resize handler is outside of viewport)
        cell-handler-mobile.temp-handler.shadow-1(
        v-touch-pan="handleResizeCell",
        :class="[(!mobileTempCell.onGrid || tempHandler.resize.intersectingMainHandler || cellHandler.move.pushed || cellHandler.resize.pushed ? 'hide': 'show'), (tempHandler.resize.side === 'left' ? 'left-side' : 'right-side')]",
        :style="{top: cellHandler.resize.y + 59 - 20 + 'px'}",)
          q-icon(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
177

christianrhansen's avatar
christianrhansen committed
178
      // ---------------------------------------------------------------------------------------------------------------
Anton's avatar
Intial  
Anton committed
179
      template(v-else)
180
        .cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
Anton's avatar
Intial  
Anton committed
181
          div.cell-item-resize-handle(
182 183 184 185 186
          draggable="true",
          @dragstart="event => {handleGridResizerDragStart(event)}",
          @dragend="event => {handleGridResizerDragEnd(event)}",
          @dragexit="event => {handleGridResizerDragEnd(event)}")
            q-icon(name="network cell")
Anton's avatar
Intial  
Anton committed
187

Mathias Bär's avatar
Mathias Bär committed
188
      //template(v-if="!isMobile")
189 190 191 192 193
        .fixed-top-right(style="right:18px; top:68px", v-if="!$store.state.mosys.showSources")
          q-btn(round, color="primary", small, @click="handleGridButtonClickEdit", style="margin-right: 0.5em")
            q-icon(name="add")
          q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
            q-icon(name="remove red eye")
Mathias Bär's avatar
Mathias Bär committed
194
      //template(v-if="isMobile")
Mathias Bär's avatar
Mathias Bär committed
195 196 197 198 199
        .fixed-top-right.q-mt-sm(v-if="!$store.state.mosys.showSources", style="z-index: 10000; padding-top: 3px;")
          q-btn.q-mr-sm(round, color="primary", size="sm", @click="handleGridButtonClickEdit")
            q-icon(name="add")
          q-btn.q-mr-md(round, color="primary", size="sm", @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
            q-icon(name="remove red eye")
Anton's avatar
Intial  
Anton committed
200 201 202 203 204

</template>

<script>
  import Cell from './Cell'
205 206
  import { userHasFeature } from 'mbjs-quasar/src/lib'
  import { mapGetters } from 'vuex'
207
  import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
208
  import CellHandlerMobile from './CellHandlerMobile'
Anton's avatar
Intial  
Anton committed
209 210 211 212 213 214

  const nullImage = new Image()
  nullImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='

  export default {
    components: {
215
      Cell,
216 217
      GridEditorEditingCellsMobile,
      CellHandlerMobile
Anton's avatar
Intial  
Anton committed
218
    },
219
    props: ['gridUuid', 'tabsAreOpen'],
Anton's avatar
Intial  
Anton committed
220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244
    data () {
      return {
        gridContextMenuActions: {
          insert_column_left: {
            label: 'Insert Column Left',
            handler: this.handleGridContextMenuInsertColumnLeft
          },
          delete_column: {
            label: 'Delete Column',
            handler: this.handleGridContextMenuDeleteColumn
          },
          insert_row_above: {
            label: 'Insert Row Above',
            handler: this.handleGridContextMenuInsertRowAbove
          },
          delete_row: {
            label: 'Delete Row',
            handler: this.handleGridContextMenuDeleteRow
          },
          edit_grid_dimensions: {
            label: 'Change Grid',
            handler: () => { this.resizingGrid = !this.resizingGrid }
          }
        },
        grid: undefined,
245
        annotations: undefined,
246
        tmpObjects: [],
247
        annotationUIStates: {},
Anton's avatar
Anton committed
248
        gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 },
Anton's avatar
Intial  
Anton committed
249
        contextMenuClickPosition: {},
250
        resizingGrid: false,
251
        isMobile: this.$q.platform.is.mobile,
252 253 254 255 256 257 258 259 260 261 262 263
        mobileTempCell: {
          x: 0,
          y: 0,
          ox: 0,
          oy: 0,
          width: 1,
          height: 1,
          left: 0,
          show: false,
          onGrid: false,
          button: false
        },
264
        modal: false,
265
        cellHandler: {
266
          size: {width: 40, height: 40},
267
          move: {x: 20, y: undefined, gridPosition: {row: undefined, column: undefined}, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined, dataLeft: undefined},
268
          resize: {x: undefined, y: undefined, gridPosition: {row: undefined, column: undefined}, pushed: false, pos: undefined}
269
        },
270
        tempHandler: {
christianrhansen's avatar
christianrhansen committed
271 272
          move: {left: undefined, intersectingMainHandler: false, side: undefined},
          resize: {left: undefined, intersectingMainHandler: false, side: undefined}
273
        },
274
        activeHandler: false,
275
        selectedCell: {type: undefined, annotation: undefined}
Anton's avatar
Intial  
Anton committed
276 277
      }
    },
278 279
    computed: {
      ...mapGetters({
christianrhansen's avatar
christianrhansen committed
280
        cachedNewCell: 'mosys/getNewCell',
281
        user: 'auth/getUserState',
282
        // isMobile: 'globalSettings/getIsMobile',
Mathias Bär's avatar
Mathias Bär committed
283
        // editingCells: 'mosys/getEditingCells'
284
        showEditingCells: 'mosys/getShowEditingCells',
285 286
        scrollPositionCache: 'mosys/getScrollPositionCache',
        editMode: 'mosys/getEditMode'
287
      }),
288 289 290 291 292 293
      newCellType () {
        if (this.cachedNewCell) {
          let type = this.cachedNewCell.component
          return type.substr(4, type.length - 4)
        }
      },
294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315
      cellContextMenuActions () {
        const actions = {
          delete: {
            label: 'Delete',
            handler: this.handleCellContextMenuDelete
          },
          insert_column_left: {
            label: 'Insert Column Left',
            handler: this.handleGridContextMenuInsertColumnLeft
          },
          insert_row_above: {
            label: 'Insert Row Above',
            handler: this.handleGridContextMenuInsertRowAbove
          }
        }
        if (userHasFeature(this.user, 'cssediting')) {
          actions.edit_css_classname = {
            label: 'Edit CSS class name',
            handler: this.handleCellContextMenuEditCSS
          }
        }
        return actions
316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331
      },
      gridStyle () {
        if (!this.gridDimensions || !this.gridDimensions.full) return {}
        // TODO: fix mobile grid editor view
        const cell = this.gridDimensions.full.cell
        return {
          width: `${this.gridDimensions.full.width}px`,
          height: '100%',
          'grid-auto-columns': `${cell.width}px`,
          'grid-auto-rows': `${cell.height}px`,
          'background-image': `url("data:image/svg+xml;utf8,` +
            `<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><defs>` +
            `<pattern id='smallGrid' width='${cell.width}' height='${cell.height}' patternUnits='userSpaceOnUse'>` +
            `<path d='M ${cell.width} 0 L 0 0 0 ${cell.height}' fill='none' stroke='gray' stroke-width='0.5'/>` +
            `</pattern></defs><rect width='100%' height='100%' fill='url(%23smallGrid)' /></svg>")`
        }
332 333
      }
    },
Anton's avatar
Intial  
Anton committed
334 335
    async mounted () {
      await this.fetchData()
336
      this.resetScrollPosition()
337 338 339
    },
    beforeDestroy () {
      this.observer.disconnect()
Anton's avatar
Intial  
Anton committed
340 341
    },
    watch: {
342
      'cellHandler.move.gridPosition': {
343 344
        handler: function (obj) {
          if (this.showEditingCells) {
345
            this.mobileCellMove(this.selectedCell.annotation, obj.column, obj.row)
346
          }
347 348 349
        },
        deep: true
      },
350 351 352
      'cellHandler.resize.gridPosition': {
        handler: function (obj) {
          if (this.showEditingCells) {
353 354
            let w = obj.column - this.cellHandler.move.gridPosition.column + 1
            let h = obj.row - this.cellHandler.move.gridPosition.row + 1
355
            this.mobileCellResize(this.selectedCell.annotation, w, h)
356 357 358 359
          }
        },
        deep: true
      },
Anton's avatar
Anton committed
360
      annotations () {
361
        this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
362 363 364 365 366 367
      },
      gridMetadata () {
        this.updateGridDimensions()
      },
      async gridUuid () {
        await this.fetchData()
Mathias Bär's avatar
Mathias Bär committed
368 369
      },
      showEditingCells (val) {
370
        // console.log('show editing cells', val)
Mathias Bär's avatar
Mathias Bär committed
371 372 373
        if (val === false) {
          this.updateAnnotationUIStates()
        }
374 375 376
      },
      tabsAreOpen () {
        this.resetScrollPosition()
Anton's avatar
Intial  
Anton committed
377 378 379
      }
    },
    methods: {
380 381 382 383 384 385 386 387
      clearHandler (target) {
        switch (target) {
        case 'cell':
          Object.keys(this.annotationUIStates).filter((k) => {
            this.annotationUIStates[k].editing = false
          })
          this.$store.commit('mosys/setEditingCells', '')
          break
388 389
        case 'cached cell':
          this.$store.commit('mosys/cacheNewCell', undefined)
390 391 392
          this.clearHandler('temp cell')
          break
        case 'temp cell':
393
          this.mobileTempCell = {x: undefined, y: undefined, width: undefined, height: undefined, onGrid: false}
394
          break
395 396
        }
      },
397
      intersectionChanged (obj) {
christianrhansen's avatar
christianrhansen committed
398 399
        let _offsetLeft = Math.sign(obj.offsetLeft)

400
        // -------------------- move
401
        if (obj.element === 'move') {
christianrhansen's avatar
christianrhansen committed
402
          this.tempHandler.move.intersectingMainHandler = obj.intersecting
403

christianrhansen's avatar
christianrhansen committed
404
          // behind left side
christianrhansen's avatar
christianrhansen committed
405
          if (_offsetLeft < 0) {
406
            this.tempHandler.move.side = 'left'
407
          }
408
          // intersecting
christianrhansen's avatar
christianrhansen committed
409
          else if (isNaN(_offsetLeft)) {
christianrhansen's avatar
christianrhansen committed
410
            if (this.tempHandler.move.intersectingMainHandler && this.tempHandler.move.side === 'right') this.tempHandler.resize.intersectingMainHandler = false
411
          }
christianrhansen's avatar
christianrhansen committed
412
          // behind right side
christianrhansen's avatar
christianrhansen committed
413
          else if (_offsetLeft === 1) {
414
            this.tempHandler.move.side = 'right'
christianrhansen's avatar
christianrhansen committed
415
            this.tempHandler.resize.intersectingMainHandler = true
416
          }
417
        }
418

419
        // -------------------- resize
christianrhansen's avatar
christianrhansen committed
420
        else if (obj.element === 'resize') {
christianrhansen's avatar
christianrhansen committed
421
          this.tempHandler.resize.intersectingMainHandler = obj.intersecting
422

christianrhansen's avatar
christianrhansen committed
423
          // on left side
christianrhansen's avatar
christianrhansen committed
424
          if (_offsetLeft === -1) {
425
            this.tempHandler.resize.side = 'left'
426
          }
christianrhansen's avatar
christianrhansen committed
427
          /*
428
          // intersecting
christianrhansen's avatar
christianrhansen committed
429
          else if (isNaN(Math.sign(obj.offsetLeft))) {
430
          }
christianrhansen's avatar
christianrhansen committed
431
          */
christianrhansen's avatar
christianrhansen committed
432
          // on right side
christianrhansen's avatar
christianrhansen committed
433
          else if (_offsetLeft === 1) {
434
            this.tempHandler.resize.side = 'right'
435
          }
436 437
        }
      },
christianrhansen's avatar
christianrhansen committed
438
      handleMoveCell (obj) {
439 440
        this.cellHandler.move.x = obj.position.left
        this.cellHandler.move.y = obj.position.top
441

christianrhansen's avatar
christianrhansen committed
442 443
        let res = this.getGridPositionForEvent(obj)

444 445 446
        this.cellHandler.move.gridPosition.row = res.y
        this.cellHandler.move.gridPosition.column = res.x

christianrhansen's avatar
christianrhansen committed
447
        if (obj.isFirst) {
448
          this.activeHandler = true
christianrhansen's avatar
christianrhansen committed
449
          this.mobileTempCell.show = true
450
          this.cellHandler.move.pushed = true
christianrhansen's avatar
christianrhansen committed
451
        }
452

christianrhansen's avatar
christianrhansen committed
453 454 455
        this.mobileTempCell.x = res.x
        this.mobileTempCell.y = res.y

456 457 458
        this.mobileTempCell.ox = res.ox
        this.mobileTempCell.oy = res.oy

459 460
        this.cellHandler.move.x = res.ox
        this.cellHandler.move.y = res.oy
461

christianrhansen's avatar
christianrhansen committed
462
        if (obj.isFinal) {
463
          this.activeHandler = false
christianrhansen's avatar
christianrhansen committed
464
          this.mobileTempCell.onGrid = true
465
          this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
466 467 468 469
          this.cellHandler.move.pushed = false
          // this.cellHandler.move.y = this.gridDimensions.full.cell.height * (res.y - 1) + 8 + 59 + 20
          this.cellHandler.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
          this.cellHandler.move.y = this.gridDimensions.full.cell.height * (this.mobileTempCell.y - 1) + 8 + 20
470

471 472
          this.cellHandler.resize.x = this.gridDimensions.full.cell.width * (res.x + this.mobileTempCell.width - 1) - 8 - 20
          this.cellHandler.resize.y = this.gridDimensions.full.cell.height * (res.y + this.mobileTempCell.height - 1) - 8 - 20
christianrhansen's avatar
christianrhansen committed
473 474
        }
      },
christianrhansen's avatar
christianrhansen committed
475
      handleResizeCell (obj) {
christianrhansen's avatar
christianrhansen committed
476
        // this.cursor = {x: obj.position.left, y: obj.position.top}
477 478 479
        // this.cellHandler.resize = {x: obj.position.left, y: obj.position.top}
        this.cellHandler.resize.x = obj.position.left
        this.cellHandler.resize.y = obj.position.top
480

481 482 483
        // ---> panGrid
        let res = this.getGridPositionForEvent(obj)

484 485 486
        this.cellHandler.resize.gridPosition.row = res.y
        this.cellHandler.resize.gridPosition.column = res.x

487
        if (obj.isFirst) {
488
          this.activeHandler = true
489
          this.mobileTempCell.show = true
490
          this.cellHandler.resize.pushed = true
491 492 493 494 495
        }

        this.mobileTempCell.width = res.x - this.mobileTempCell.x + 1
        this.mobileTempCell.height = res.y - this.mobileTempCell.y + 1

496 497
        this.cellHandler.resize.x = res.ox
        this.cellHandler.resize.y = res.oy
498

499
        if (obj.isFinal) {
500
          this.activeHandler = false
501
          this.mobileTempCell.onGrid = true
502
          this.cellHandler.resize.pushed = false
503 504
          // this.addMobileCell(obj)
          // this.mobileTempCell.show = false
505 506
          this.cellHandler.resize.x = this.gridDimensions.full.cell.width * res.x - 8 - 20
          this.cellHandler.resize.y = this.gridDimensions.full.cell.height * res.y - 8 - 20
507 508
        }
      },
509 510
      handleCellEdit (event, annotation) {
        console.log('handleCellEdit', annotation)
511 512 513
        this.touchMobileCell(event, annotation)
        this.handleModal()
      },
514 515 516
      handleModal () {
        this.modal = !this.modal
      },
517
      panGrid (obj) {
518
        if (this.cachedNewCell && !this.mobileTempCell.onGrid) {
519
          // console.log('hhhhhhhhhhhhhhhhh', obj)
520 521 522 523 524 525 526 527 528 529 530 531
          let res = this.getGridPositionForEvent(obj)

          if (obj.isFirst) {
            this.mobileTempCell.show = true
            this.mobileTempCell.x = res.x
            this.mobileTempCell.y = res.y
          }

          this.mobileTempCell.width = res.x - this.mobileTempCell.x + 1
          this.mobileTempCell.height = res.y - this.mobileTempCell.y + 1

          if (obj.isFinal) {
532
            this.mobileTempCell.onGrid = true
533 534
            // this.addMobileCell(obj)
            // this.mobileTempCell.show = false
535 536
            this.cellHandler.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
            this.cellHandler.move.y = this.gridDimensions.full.cell.height * (this.mobileTempCell.y - 1) + 8 + 20
537

538 539
            this.cellHandler.resize.x = this.gridDimensions.full.cell.width * res.x - 8 - 20
            this.cellHandler.resize.y = this.gridDimensions.full.cell.height * res.y - 8 - 20
540
          }
541
        }
542
      },
543
      async cellCopy (event, annotation) {
544 545
        this.$store.commit('mosys/setEditingCells', '')

546
        this.$q.notify({
547
          message: 'Copied.',
548
          color: 'dark',
549 550
          textColor: 'white',
          position: 'bottom-right'
551 552 553 554 555 556 557 558 559 560
        })

        const _cell = await this.$store.dispatch('cells/get', annotation.body.source.id)
        const resourceCell = {
          data: { content: '' },
          config: {},
          component: _cell.component
        }
        this.$store.commit('mosys/cacheNewCell', resourceCell)
      },
561
      addMobileCell (event) {
christianrhansen's avatar
christianrhansen committed
562
        if (this.cachedNewCell) {
563
          this.handleGridDrop(event)
christianrhansen's avatar
christianrhansen committed
564
          this.$store.commit('mosys/cacheNewCell', undefined)
565 566
          this.$q.notify({
            message: 'Cell was added.',
567 568 569
            color: 'dark',
            position: 'center',
            timeout: 50
570
          })
christianrhansen's avatar
christianrhansen committed
571 572
        }
      },
573
      touchMobileCell (event, cell) {
574
        if (!this.mobileTempCell.onGrid && cell) {
575 576 577 578 579 580 581 582 583
          Object.keys(this.annotationUIStates).filter((k) => {
            if (k === cell._uuid && this.annotationUIStates[k].editing) console.log(k, cell._uuid)
            else this.annotationUIStates[k].editing = false
          })
          this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
          this.updateEditingCells()
          this.$root.$emit('mosys_saveScrollPosition')
          // this.handleCellEditClick(event, annotation)
        }
584
      },
christianrhansen's avatar
christianrhansen committed
585
      handleCellTouch (event, annotation) {
586
        console.log('handleCellTouch', annotation)
587
        if (!this.cachedNewCell) {
588 589 590 591 592 593 594 595 596 597 598 599 600 601
          let
            parsed = annotation.target.selector.parse(),
            sliced = parsed.xywh.slice(0, 4),
            x = sliced[0],
            y = sliced[1],
            w = sliced[2],
            h = sliced[3]

          this.cellHandler.move.x = this.gridDimensions.full.cell.width * (x - 1) + 8 + 20
          this.cellHandler.move.y = this.gridDimensions.full.cell.height * (y - 1) + 8 + 20

          this.cellHandler.resize.x = this.gridDimensions.full.cell.width * (x + w - 1) - 8 - 20
          this.cellHandler.resize.y = this.gridDimensions.full.cell.height * (y + h - 1) - 8 - 20

602
          this.selectedCell.annotation = annotation
603
          this.getCellType(annotation)
604
        }
christianrhansen's avatar
christianrhansen committed
605
      },
606 607 608 609 610
      async getCellType (annotation) {
        let cell = await this.$store.dispatch('cells/get', annotation.body.source.id)
        let cellType = cell.component
        this.selectedCell.type = cellType.substr(4, cellType.length - 4)
      },
611 612
      async mobileCellMove (annotation, x, y) {
        // this.$el.scrollLeft = this.$el.scrollLeft + (this.gridDimensions.full.cell.width * _x)
613

christianrhansen's avatar
christianrhansen committed
614
        let parsed = annotation.target.selector.parse()
615
        let target = this.grid.get2DArea([x, y], parsed.xywh.slice(2))
christianrhansen's avatar
christianrhansen committed
616

617 618 619 620 621 622 623
        annotation.target.selector.value = target.selector.value
        await this.$store.dispatch('annotations/patch', [annotation.id, {
          target: {
            selector: { value: target.selector.value }
          }
        }])
      },
624
      async mobileCellResize (annotation, _w, _h) {
625 626
        let
          parsed = annotation.target.selector.parse(),
christianrhansen's avatar
christianrhansen committed
627 628 629
          sliced = parsed.xywh.slice(0, 4),
          x = sliced[0],
          y = sliced[1]
630

631
        const value = { xywh: [x, y, _w, _h] }
632 633 634 635 636 637 638
        annotation.target.selector.value = value

        await this.$store.dispatch('annotations/patch', [annotation.id, { target: { selector: { value } } }])
      },
      setEditMode (mode) {
        this.$store.commit('mosys/setEditMode', mode)
      },
639 640 641 642
      //
      // DATA
      //

Anton's avatar
Intial  
Anton committed
643 644 645
      async fetchData () {
        if (this.gridUuid) {
          this.grid = await this.$store.dispatch('maps/get', this.gridUuid)
646 647 648 649 650 651 652 653
          if (!Object.keys(this.grid.config).length) {
            this.grid.config = {
              columns: 10,
              rows: 6,
              ratio: 16 / 9.0
            }
            await this.updateGridMetadataStore()
          }
Anton's avatar
Intial  
Anton committed
654
          this.updateGridDimensions()
655 656 657 658 659 660
          const { items } = await this.$store.dispatch('annotations/find', {
            'target.id': this.grid.id,
            'body.purpose': 'linking',
            'body.type': 'Cell'
          })
          this.annotations = items
Anton's avatar
Intial  
Anton committed
661 662
        }
      },
663 664 665
      async updateGridMetadataStore () {
        await this.$store.dispatch('maps/patch', [this.grid.id, { config: this.grid.config }])
        this.updateGridDimensions()
Anton's avatar
Intial  
Anton committed
666
      },
667 668 669 670 671
      updateSelectedCells () {
        const _this = this
        let selectedCells = Object.keys(this.annotationUIStates).filter(k => {
          return _this.annotationUIStates[k].selected
        }).map(k => {
Christian Hansen's avatar
Christian Hansen committed
672 673
          // return _this.cells.find(c => c._uuid === k)
          return _this.annotations.find(c => c._uuid === k)
674 675
        })
        this.$store.commit('mosys/setSelectedCells', selectedCells)
Anton's avatar
Intial  
Anton committed
676
      },
Mathias Bär's avatar
Mathias Bär committed
677 678 679 680 681 682 683 684
      updateEditingCells () {
        const _this = this
        let editingCells = Object.keys(this.annotationUIStates).filter(k => {
          return _this.annotationUIStates[k].editing
        }).map(k => {
          // return _this.cells.find(c => c._uuid === k)
          return _this.annotations.find(c => c._uuid === k)
        })
685 686 687 688 689 690 691
        /*
        console.log('this.annotationUIStates: ', this.annotationUIStates)
        console.log('editingCells: ', editingCells)
        if (this.isMobile) {
          console.log('MOBILE')
        }
        */
Mathias Bär's avatar
Mathias Bär committed
692 693
        this.$store.commit('mosys/setEditingCells', editingCells)
      },
694 695 696 697 698
      updateAnnotationUIStates () {
        let newAnnotationUIStates = {}
        this.annotations.forEach(a => {
          newAnnotationUIStates[a._uuid] = {
            selected: false,
Mathias Bär's avatar
Mathias Bär committed
699
            editing: false,
700
            beingResized: false,
Mathias Bär's avatar
Mathias Bär committed
701
            beginDragged: false,
702
            annotation: a
Anton's avatar
Intial  
Anton committed
703
          }
704 705
        })
        this.annotationUIStates = newAnnotationUIStates
Anton's avatar
Intial  
Anton committed
706
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
707
        this.updateEditingCells()
708
      },
709 710 711 712 713

      //
      // GRID DRAG & DROP HANDLERS
      //

714
      async handleGridDragOver (event) {
Anton's avatar
Intial  
Anton committed
715 716 717
        let _this = this
        if (this.resizingGrid) {
          const position = this.getGridPositionForEvent(event)
718 719
          this.grid.config.ratio = position.ox / (position.oy * 1.0)
          await this.updateGridMetadataStore()
Anton's avatar
Intial  
Anton committed
720 721
        }
        else {
722 723
          let annotation = this.annotations.filter(annotation => {
            if (!_this.annotationUIStates[annotation._uuid]) return false
Mathias Bär's avatar
Mathias Bär committed
724
            return _this.annotationUIStates[annotation._uuid].beingDragged ||
725
              _this.annotationUIStates[annotation._uuid].beingResized
Anton's avatar
Intial  
Anton committed
726 727
          }).shift()
          let offset, position
728 729 730 731
          if (!annotation) {
            annotation = {
              target: this.grid.get2DArea([1, 1], [1, 1])
            }
Anton's avatar
Intial  
Anton committed
732 733 734
            position = this.getGridPositionForEvent(event)
          }
          else {
735
            offset = this.annotationUIStates[annotation._uuid].draggingOffset
Anton's avatar
Intial  
Anton committed
736 737
            position = this.getGridPositionForEvent(event, offset)
          }
738 739
          if (!this.tmpObjects.length) this.tmpObjects.push(annotation)
          const parsed = annotation.target.selector.parse()
Anton's avatar
Intial  
Anton committed
740
          if (event.dataTransfer.types.includes('text/plain')) {
741 742
            parsed.xywh[0] = position.x
            parsed.xywh[1] = position.y
Anton's avatar
Intial  
Anton committed
743 744 745
            event.preventDefault()
          }
          else {
746 747
            parsed.xywh[2] = Math.max(1, 1 + position.x - parsed.xywh[0])
            parsed.xywh[3] = Math.max(1, 1 + position.y - parsed.xywh[1])
Anton's avatar
Intial  
Anton committed
748
          }
749
          annotation.target.selector.value = parsed
Anton's avatar
Intial  
Anton committed
750 751 752
        }
      },
      handleGridDragEnd () {
753
        this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
754
      },
755
      async handleGridDrop (event) {
756 757 758 759 760
        let dropData
        if (event.dataTransfer) dropData = event.dataTransfer.getData('text/plain')
        if (!dropData) dropData = JSON.stringify(this.cachedNewCell)
        // console.log('handleGridDrop - event', event)
        // console.log('handleGridDrop - dropData', dropData)
761 762
        if (dropData) {
          dropData = JSON.parse(dropData)
763
          let annotation = this.annotations.find(a => a.id === dropData.id)
764 765 766 767 768
          const { x, y } = this.getGridPositionForEvent(
            event,
            annotation ? this.annotationUIStates[annotation._uuid].draggingOffset : undefined
          )
          if (annotation) {
769 770 771
            const
              parsed = annotation.target.selector.parse(),
              target = this.grid.get2DArea([x, y], parsed.xywh.slice(2))
772 773 774 775 776 777
            annotation.target.selector.value = target.selector.value
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: {
                selector: { value: target.selector.value }
              }
            }])
Anton's avatar
Intial  
Anton committed
778 779
          }
          else {
780 781
            if (this.mobileTempCell.x) console.log('this.mobileTempCell', this.mobileTempCell)
            let test = this.grid.get2DArea([this.mobileTempCell.x, this.mobileTempCell.y], [this.mobileTempCell.width, this.mobileTempCell.height])
782 783 784 785 786 787 788 789 790 791 792
            const
              { data, config, component } = dropData,
              cell = await this.$store.dispatch('cells/post', { data, config, component })
            annotation = await this.$store.dispatch('annotations/post', {
              body: {
                type: 'Cell',
                purpose: 'linking',
                source: {
                  id: cell.id
                }
              },
793 794
              // target: this.grid.get2DArea([x, y], [1, 1])
              target: test
795
            })
796
            this.annotations.push(annotation)
Anton's avatar
Anton committed
797
            this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
798
          }
799

800
          this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
801 802
          event.preventDefault()
        }
803
        this.clearHandler('temp cell')
Anton's avatar
Intial  
Anton committed
804
      },
805 806 807 808

      //
      // CELL DRAG & DROP HANDLERS
      //
Mathias Bär's avatar
Mathias Bär committed
809 810 811
      handleCellEditClick (event, cell) {
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
812
        this.$root.$emit('mosys_saveScrollPosition')
Mathias Bär's avatar
Mathias Bär committed
813
      },
814
      /*
815 816 817 818
      handleCellClick (event, cell) {
        this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
        this.updateSelectedCells()
      },
819
      */
820
      handleCellDragStart (event, annotation) {
christianrhansen's avatar
christianrhansen committed
821
        console.log('§§§§§§§§', annotation)
822 823 824 825 826 827 828 829 830 831 832 833
        if (!this.isMobile) {
          if (!this.annotationUIStates[annotation._uuid].beingResized) {
            event.dataTransfer.setData('text/plain', JSON.stringify(annotation))
            event.dataTransfer.setDragImage(nullImage, 0, 0)
            let elContainerBoundingBox = this.$el.getBoundingClientRect()
            let elBoundingBox = event.target.getBoundingClientRect()
            let offset = {
              x: (event.clientX - elContainerBoundingBox.x) - (elBoundingBox.x - elContainerBoundingBox.x),
              y: (event.clientY - elContainerBoundingBox.y) - (elBoundingBox.y - elContainerBoundingBox.y)
            }
            this.annotationUIStates[annotation._uuid].draggingOffset = offset
            this.annotationUIStates[annotation._uuid].beingDragged = true
834
          }
835
          this.tmpObjects.push(annotation)
836 837 838
        }
      },
      handleCellDragEnd (event, annotation) {
839 840 841
        if (!this.mobile) {
          this.annotationUIStates[annotation._uuid].beingDragged = false
        }
842 843 844 845
      },
      async handleCellContextMenuDelete (event, annotation) {
        this.annotationUIStates[annotation._uuid].selected = false
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
846
        this.updateEditingCells()
847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889
        await this.$store.dispatch('cells/delete', annotation.body.source.id)
        await this.$store.dispatch('annotations/delete', annotation.id)
        this.annotations = this.annotations.filter(a => a.id !== annotation.id)
      },

      //
      // GRID RESIZE HANDLERS

      handleGridResizerDragStart (event) {
        event.dataTransfer.setDragImage(nullImage, 0, 0)
      },
      async handleGridResizerDragEnd () {
        await this.updateGridMetadataStore()
      },

      //
      // CELL RESIZE HANDLERS
      //

      handleCellResizerDragStart (event, annotation) {
        event.dataTransfer.setDragImage(nullImage, 0, 0)
        this.annotationUIStates[annotation._uuid].beingResized = true
        this.tmpObjects.push(annotation)
      },
      async handleCellResizerDragEnd (event, annotation) {
        let position = this.getGridPositionForEvent(event)
        let
          parsed = annotation.target.selector.parse(),
          [x, y, w, h] = parsed.xywh
        w = Math.max(1, 1 + position.x - x)
        h = Math.max(1, 1 + position.y - y)
        const value = { xywh: [x, y, w, h] }
        annotation.target.selector.value = value
        this.annotationUIStates[annotation._uuid].beingResized = false
        this.tmpObjects = []
        await this.$store.dispatch('annotations/patch', [annotation.id, { target: { selector: { value } } }])
      },

      //
      // CELL CONTEXT MENU
      //

      handleCellContextMenu (event) {
Anton's avatar
Intial  
Anton committed
890 891
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
      },
892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908
      async handleCellContextMenuEditCSS (event, annotation) {
        try {
          let styleClass = await this.$q.dialog({
            title: this.$t('forms.edit_css_class.title'),
            ok: this.$t('buttons.set_css_class'),
            cancel: this.$t('buttons.cancel'),
            prompt: {
              model: annotation.styleClass,
              type: 'text'
            }
          })
          if (styleClass) {
            if (!styleClass.length) styleClass = undefined
            else if (styleClass.indexOf('.') === 0) styleClass = styleClass.substr(1)
          }
          annotation.styleClass = styleClass
          this.$store.dispatch('annotations/patch', [annotation._uuid, { target: { styleClass: styleClass || null } }])
Anton's avatar
Intial  
Anton committed
909
        }
910 911 912 913 914 915 916 917 918
        catch (e) { /* dialog canceled */ }
      },

      //
      // GRID CONTEXT MENU
      //

      handleGridContextMenu (event) {
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
Anton's avatar
Intial  
Anton committed
919 920 921
      },
      async handleGridContextMenuInsertColumnLeft () {
        let position = this.contextMenuClickPosition
922 923 924 925 926 927 928 929
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[0] >= position.x) {
            parsed.xywh[0] += 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
930 931
          }
        }
932
        this.grid.config.columns += 1
Anton's avatar
Intial  
Anton committed
933 934 935 936
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteColumn () {
        let position = this.contextMenuClickPosition
937 938 939 940 941 942 943 944
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[0] > position.x) {
            parsed.xywh[0] -= 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
945 946
          }
        }
947
        this.grid.config.columns -= 1
Anton's avatar
Intial  
Anton committed
948 949 950 951
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuInsertRowAbove () {
        let position = this.contextMenuClickPosition
952 953 954 955 956 957 958 959
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[1] >= position.y) {
            parsed.xywh[1] += 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
960 961
          }
        }
962
        this.grid.config.rows += 1
Anton's avatar
Intial  
Anton committed
963 964 965 966
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteRow () {
        let position = this.contextMenuClickPosition
967 968 969 970 971 972 973 974
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[1] > position.y) {
            parsed.xywh[1] -= 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
975 976
          }
        }
977
        this.grid.config.rows -= 1
Anton's avatar
Intial  
Anton committed
978 979
        await this.updateGridMetadataStore()
      },
980 981 982 983 984

      //
      // NAVIGATION
      //

Anton's avatar
Intial  
Anton committed
985
      handleGridButtonClickEdit () {
986
        this.$store.commit('mosys/toggleSources')
Anton's avatar
Intial  
Anton committed
987
      },
988 989 990 991 992

      //
      // GRID HELPERS
      //

Anton's avatar
Anton committed
993
      getGridPositionForEvent (event, offset = { x: 0, y: 0 }) {
994
        // console.log('###', event)
Anton's avatar
Anton committed
995
        offset = { x: 0, y: 0 } // TODO: remove quick fix
996 997 998 999 1000 1001 1002

        let _clientX, _clientY

        if (event.clientX && event.clientY) {
          _clientX = event.clientX
          _clientY = event.clientY
        }
1003
        if (event.position) {
1004 1005 1006 1007
          _clientX = event.position.left
          _clientY = event.position.top
        }

Anton's avatar
Intial  
Anton committed
1008
        const elContainerBoundingBox = this.$el.getBoundingClientRect()
1009 1010 1011 1012
        const ox = _clientX + this.$el.scrollLeft - elContainerBoundingBox.x - offset.x
        const oy = _clientY + this.$el.scrollTop - elContainerBoundingBox.y - offset.y
        // const ox = event.clientX + this.$el.scrollLeft - elContainerBoundingBox.x - offset.x
        // const oy = event.clientY + this.$el.scrollTop - elContainerBoundingBox.y - offset.y
Anton's avatar
Intial  
Anton committed
1013 1014
        const x = Math.ceil(ox / this.gridDimensions.full.cell.width)
        const y = Math.ceil(oy / this.gridDimensions.full.cell.height)
Anton's avatar
Anton committed
1015
        return { x: x, y: y, ox: ox, oy: oy }
Anton's avatar
Intial  
Anton committed
1016
      },
1017 1018 1019 1020
      updateGridDimensions (size) {
        if (!this.grid || !this.grid.config) return

        let elWidth = size ? size.width : this.$el.offsetWidth
1021
        // let elHeight = size ? size.height : this.$el.offsetHeight
1022
        let cellSizeRatio = this.grid.config.ratio
1023 1024
        // let gridHeight = elHeight
        let gridHeight = this.$el.offsetHeight
1025
        let cellHeight = gridHeight / this.grid.config.rows
Anton's avatar
Intial  
Anton committed
1026
        let cellWidth = elWidth / Math.round(elWidth / (cellHeight * cellSizeRatio))
1027
        console.log('cellWidth', cellWidth)
1028
        let gridWidth = cellWidth * this.grid.config.columns
Anton's avatar
Intial  
Anton committed
1029
        let cellsPerWidth = elWidth / cellWidth
1030
        let cellWidthMini = elWidth / this.grid.config.columns
Anton's avatar
Intial  
Anton committed
1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043
        let gridHeightMini = cellWidthMini / cellSizeRatio
        this.gridDimensions = {
          full: {
            width: gridWidth,
            height: gridHeight,
            cell: {
              width: cellWidth,
              height: cellHeight
            },
            cells_per_width: cellsPerWidth
          },
          mini: {
            width: elWidth,
1044
            height: gridHeightMini * this.grid.config.rows,
Anton's avatar