GridEditor.vue 45.7 KB
Newer Older
Anton's avatar
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
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

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

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

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")

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

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
Anton committed
54

55
      //----------------------------------------------------------------------------------- context menu: grid (desktop)
56
      q-context-menu.desktop-only(ref="gridmenu")
Anton's avatar
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
Anton committed
64 65 66

      template(v-if="!resizingGrid")

67 68
        //--------------------------------------------------------------------------------------------------------------
        //--------------------------------------------------------------------------------------------------------- cell
69
        template(v-for="(annotation, index) in annotations")
70
          // v-touch-hold="event => {cellCopy(event, annotation)}",
Anton's avatar
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
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;",
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",
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
Anton committed
124

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
Anton committed
129 130
            cell(:cell="tmpCell")

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)")
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

178
      // ---------------------------------------------------------------------------------------------------------------
Anton's avatar
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
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
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
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
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
Anton committed
218
    },
219
    props: ['gridUuid', 'tabsAreOpen'],
Anton's avatar
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
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
Anton committed
276 277
      }
    },
278 279
    computed: {
      ...mapGetters({
280
        cachedNewCell: 'mosys/getNewCell',
281
        user: 'auth/getUserState',
282
        // isMobile: 'globalSettings/getIsMobile',
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
Anton committed
334 335
    async mounted () {
      await this.fetchData()
336
      this.resetScrollPosition()
337 338 339
    },
    beforeDestroy () {
      this.observer.disconnect()
Anton's avatar
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
Anton committed
362 363 364 365 366 367
      },
      gridMetadata () {
        this.updateGridDimensions()
      },
      async gridUuid () {
        await this.fetchData()
368 369
      },
      showEditingCells (val) {
370
        // console.log('show editing cells', val)
371 372 373
        if (val === false) {
          this.updateAnnotationUIStates()
        }
374 375 376
      },
      tabsAreOpen () {
        this.resetScrollPosition()
Anton's avatar
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) {
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
405
          if (_offsetLeft < 0) {
406
            this.tempHandler.move.side = 'left'
407
          }
408
          // intersecting
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
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
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
424
          if (_offsetLeft === -1) {
425
            this.tempHandler.resize.side = 'left'
426
          }
427
          /*
428
          // intersecting
429
          else if (isNaN(Math.sign(obj.offsetLeft))) {
430
          }
431
          */
christianrhansen's avatar
christianrhansen committed
432
          // on right side
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

442 443
        let res = this.getGridPositionForEvent(obj)

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

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

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

462
        if (obj.isFinal) {
463
          this.activeHandler = false
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
473 474
        }
      },
christianrhansen's avatar
christianrhansen committed
475
      handleResizeCell (obj) {
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) {
562
        if (this.cachedNewCell) {
563
          this.handleGridDrop(event)
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
          })
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
      },
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
        }
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

614
        let parsed = annotation.target.selector.parse()
615
        let target = this.grid.get2DArea([x, y], parsed.xywh.slice(2))
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(),
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
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
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
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
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
Anton committed
676
      },
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')
        }
        */
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,
699
            editing: false,
700
            beingResized: false,
701
            beginDragged: false,
702
            annotation: a
Anton's avatar
Anton committed
703
          }
704 705
        })
        this.annotationUIStates = newAnnotationUIStates
Anton's avatar
Anton committed
706
        this.updateSelectedCells()
707
        this.updateEditingCells()
708
      },
709 710 711 712 713

      //
      // GRID DRAG & DROP HANDLERS
      //

714
      async handleGridDragOver (event) {
Anton's avatar
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
Anton committed
720 721
        }
        else {
722 723
          let annotation = this.annotations.filter(annotation => {
            if (!_this.annotationUIStates[annotation._uuid]) return false
724
            return _this.annotationUIStates[annotation._uuid].beingDragged ||
725
              _this.annotationUIStates[annotation._uuid].beingResized
Anton's avatar
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
Anton committed
732 733 734
            position = this.getGridPositionForEvent(event)
          }
          else {
735
            offset = this.annotationUIStates[annotation._uuid].draggingOffset
Anton's avatar
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
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
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
Anton committed
748
          }
749
          annotation.target.selector.value = parsed
Anton's avatar
Anton committed
750 751 752
        }
      },
      handleGridDragEnd () {
753
        this.tmpObjects = []
Anton's avatar
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
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
Anton committed
798
          }
799

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

      //
      // CELL DRAG & DROP HANDLERS
      //
809 810 811
      handleCellEditClick (event, cell) {
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
812
        this.$root.$emit('mosys_saveScrollPosition')
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) {
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()
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
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
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
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
Anton committed
930 931
          }
        }
932
        this.grid.config.columns += 1
Anton's avatar
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
Anton committed
945 946
          }
        }
947
        this.grid.config.columns -= 1
Anton's avatar
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
Anton committed
960 961
          }
        }
962
        this.grid.config.rows += 1
Anton's avatar
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
Anton committed
975 976
          }
        }
977
        this.grid.config.rows -= 1
Anton's avatar
Anton committed
978 979
        await this.updateGridMetadataStore()
      },
980 981 982 983 984

      //
      // NAVIGATION
      //

Anton's avatar
Anton committed
985
      handleGridButtonClickEdit () {
986
        this.$store.commit('mosys/toggleSources')
Anton's avatar
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
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
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
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
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
Anton committed
1029
        let cellsPerWidth = elWidth / cellWidth
1030
        let cellWidthMini = elWidth / this.grid.config.columns
Anton's avatar
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
Anton committed
1045 1046 1047 1048 1049 1050 1051
            cell: {
              width: cellWidthMini,
              height: gridHeightMini
            }
          }
        }
      },
1052 1053 1054
      mobileTempCellStyle (obj) {
        return {
          'grid-column-start': obj.x,
1055
          'grid-column-end': `span ${obj.width}`,
1056
          'grid-row-start': obj.y,
1057
          'grid-row-end': `span ${obj.height}`
1058 1059
        }
      },
1060 1061
      getAnnotationStyle (annotation) {
        const parsed = annotation.target.selector.parse()
Anton's avatar
Anton committed
1062
        return {
1063 1064 1065 1066
          'grid-column-start': parsed.xywh[0],
          'grid-column-end': `span ${parsed.xywh[2]}`,
          'grid-row-start': parsed.xywh[1],
          'grid-row-end': `span ${parsed.xywh[3]}`
Anton's avatar
Anton committed
1067
        }
1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080
      },
      getAnnotationClasses (uuid, which) {
        if (which === 'editing') {
          if (this.annotationUIStates[uuid].editing) {
            return 'bg-primary text-white'
          }
          else {
            return 'bg-grey'
          }
        }
        if (which === 'cell-item') {
          return {
            selected: this.annotationUIStates[uuid] ? this.annotationUIStates[uuid].selected : false,
1081 1082
            editing: this.annotationUIStates[uuid] ? this.annotationUIStates[uuid].editing : false,
            hover: !this.isMobile
1083 1084 1085
          }
        }
        else return {}
1086 1087 1088 1089
      },
      resetScrollPosition () {
        console.log('reset', this.scrollPositionCache, this.$el.scrollLeft)
        this.$el.scrollLeft = this.scrollPositionCache
Anton's avatar
Anton committed
1090 1091 1092 1093 1094 1095
      }
    }
  }
</script>

<style scoped lang="stylus">
1096
  @import '~variables'
1097 1098
  border-radius-cell = .5rem
  border-radius-handler = border-radius-cell / 1.75
1099

1100
  .clear-button
1101
    border-radius border-radius-cell
1102 1103 1104
    width 42px
    border 1px solid rgba(255, 255, 255, .3)

Anton's avatar
Anton committed
1105 1106 1107 1108 1109
  .cell-grid
    display grid
    background-color #eee

  .cell-item
1110
    border-radius border-radius-cell
Anton's avatar
Anton committed
1111 1112

    &
1113
      background-color rgba(200, 200, 200, .75)
1114
      border 1px solid rgba(0, 0, 0, .2)
Anton's avatar
Anton committed
1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125
      margin 1px
      box-sizing border-box
      position relative
      overflow: hidden
      grid-column-start: 1
      grid-column-end: span 1
      grid-row-start: 1
      grid-row-end: span 1

    &:hover

1126 1127 1128 1129
      .edit-button
        display: block

    &.editing
1130
      background rgba(255, 150, 150, .8)
1131
      border 1px solid rgba(255,110,110,1)
1132 1133 1134 1135

      .edit-button
        display: block

Anton's avatar
Anton committed
1136 1137 1138
    &.selected
      background-color lightpink

1139 1140
    &.hover
      &:hover
1141
        background-color rgba(160, 200, 255, .8)
1142

1143 1144 1145
    .edit-button
      display: none

Anton's avatar
Anton committed
1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158
    .cell-item-inner
      width 100%
      height 100%

    .cell-item-resize-handle
      color rgba(0,0,0,0.2)
      position absolute
      right 0
      bottom 0

      &:hover
        color black

1159 1160 1161 1162 1163 1164 1165 1166
  .backdrop-filter
    backdrop-filter blur(6px)
    background-color rgba(255, 255, 255, .3)

  #edit-content-mobile
    width calc(100vw - 32px)
    max-height calc(calc(100vh - 60px - 16px - 16px) / 2)
    overflow-y scroll
1167

1168 1169
  #new-cell-header
  #selected-cell-header
1170 1171 1172 1173
    height 59px
    top -60px
    &.show
      top 0px
1174 1175

  .cell-item-tmp-mobile
1176
    background-color rgba(115, 170, 255, .75)
1177
    border 1px solid rgba(110, 150, 255, 1)
1178 1179 1180

  .edit-cell-button
    border 0px solid #333
christianrhansen's avatar
christianrhansen committed
1181
    background-color rgba(0, 0, 0, 0)
christianrhansen's avatar
christianrhansen committed
1182
    color $grey-8
1183

1184
  //************************************************** mobile: new cell
1185
  handler-width = 40px
1186
  gap = 0px
1187

christianrhansen's avatar
christianrhansen committed
1188 1189
  .main-handler
    position absolute
1190
    border-radius border-radius-handler
1191 1192 1193 1194
    &.hide
      width 0!important
      overflow hidden

christianrhansen's avatar
christianrhansen committed
1195
  .handler-new-cell
1196

1197 1198 1199
    &.pushed
      transition top ease 200ms, left ease 200ms