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

3
  // :class="{'overflow-hidden': mobileTempCell.show && cachedNewCell && !mobileTempCell.button}",
4
  div.cell-grid-container(
5
  :class="{'overflow-hidden': activeHandler}",
6
  style="overflow-y: hidden; scroll-behavior: smooth;")
7
    q-modal(v-model="modal", minimized, content-css="background-color: #eee; border-radius: .75rem;")
8
      grid-editor-editing-cells-mobile
9 10 11
      //
        q-btn.absolute-top-right.q-ma-sm.bg-dark(@click="handleModal()", round, size="sm", flat)
          q-icon(name="clear")
12

13 14 15 16 17 18
    // this needs to stay for adding cells on mobile for whatever reason (strangest bug ever...)
    // FIXME: find the problem and fix it
    .mobile-only.fixed-top-left.q-caption.z-max.hidden
      .bg-red {{ cachedNewCell }}
      .bg-green {{ mobileTempCell }}

19
    q-window-resize-observable(@resize="updateGridDimensions")
Anton's avatar
Intial  
Anton committed
20

christianrhansen's avatar
christianrhansen committed
21
    // ------------------------------------------------------------------------------------------------- new cell header
22 23
    #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
24
        q-item-main
25
          strong New {{ newCellType }}
26

27
        q-item-side
28 29 30 31 32
          q-btn.text-white(
          @click="event => {addMobileCell(event)}", round, flat,
          style="background-color: rgba(0, 0, 0, 0);")
            q-icon(name="check")

33 34
          q-btn.text-white.q-px-md.q-mr-md.on-right(@click="clearHandler('cached cell')", flat,
            style="border-radius: .5rem; width: 42px; border: 1px solid rgba(255, 255, 255, .3);")
christianrhansen's avatar
christianrhansen committed
35
            q-icon(name="clear")
36

37 38
    // -------------------------------------------------------------------------------------------- selected cell header
    #selected-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': showEditingCells}")
39
      q-item.q-pl-md.q-pr-none.q-py-none.full-height(v-if="!modal")
40
        q-item-main
41
          strong {{ selectedCell.type }}
42

43
        q-item-side
44
          q-btn.text-white.q-px-sm(@click="event => {handleCellInfoTouch(event, selectedCell.annotation)}", flat)
45 46
            q-icon(name="edit")

47
          q-btn.text-white.q-px-sm.on-right.on-left(@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}",
48
          flat)
49
            q-icon(name="delete")
50

51
          q-btn.text-white.q-px-md.q-mr-md.on-right(@click="clearHandler('cell')", flat,
52 53 54
          style="border-radius: .5rem; width: 42px; border: 1px solid rgba(255, 255, 255, .3);")
            q-icon(name="clear")

55
    // ------------------------------------------------------------------------------------------------------------ grid
56
      @click="event => {addMobileCell(event)}",
57
    div.cell-grid.relative-position(
58
    v-touch-pan="panGrid",
59 60 61 62 63 64
    @dragenter="handleGridDragOver",
    @dragover="handleGridDragOver",
    @dragleave="handleGridDragEnd",
    @drop="handleGridDrop",
    @contextmenu="handleGridContextMenu",
    :style="gridStyle")
Anton's avatar
Intial  
Anton committed
65

66 67
      // context menu grid (desktop only)
      q-context-menu.desktop-only(ref="gridmenu")
Anton's avatar
Intial  
Anton committed
68 69
        q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
          q-item(
70 71 72 73 74
          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
75 76 77

      template(v-if="!resizingGrid")

78
        template(v-for="(annotation, index) in annotations")
christianrhansen's avatar
christianrhansen committed
79 80

          //----- cell
81
          // v-touch-hold="event => {cellHold(event, annotation)}",
Anton's avatar
Intial  
Anton committed
82
          .cell-item(
83 84 85 86 87 88 89 90 91 92
          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}`")

93
            //--------------------------------------------------------------------------------------- edit-/close-button
94
            // TODO: find a more elegant solution
95
            //-------------------------------------------------------------------------------------------------- desktop
96
            .desktop-only
Mathias Bär's avatar
Mathias Bär committed
97
              q-btn.edit-button.absolute-top-right(
98 99 100 101 102
              @click.prevent="event => {handleCellEditClick(event, annotation)}",
              :class="getAnnotationClasses(annotation._uuid, 'editing')",
              style="top: 8px; right: 8px;",
              :icon="annotationUIStates[annotation._uuid].editing ? 'close' : 'edit'", flat, round, size="md"
              )
103
            //--------------------------------------------------------------------------------------------------- mobile
104
            .mobile-only
105 106 107
              .edit-button.absolute.fit.bg-transparent(
              v-touch-hold="event => {handleCellInfoTouch(event, annotation)}",
              @click.prevent="event => {touchMobileCell(event, annotation)}")
108

109 110 111 112 113 114
                //
                  q-btn.absolute-top-right.text-dark.q-pa-none.q-mr-xs(
                  v-if="showEditingCells",
                  @click.prevent="event => {handleCellInfoTouch(event, annotation)}",
                  flat, round, size="sm", style="margin-top: 2px;")
                    q-icon(name="edit", size="20px")
christianrhansen's avatar
christianrhansen committed
115

116 117 118 119 120
              //----- invisible edit-modal handler
              //
                q-btn.absolute-top-left.bg-blue(
                @click.prevent="event => {handleCellInfoTouch(event, annotation)}", flat, style="opacity: 0") bla
                // @click.prevent="handleModal()", flat, style="opacity: 0") bla
121

122
            //----- selecting cells disabled because it has no use currently
123 124 125 126 127 128 129 130
            // switch with cell component below to re-enable it
            //cell(
              @click.native.prevent="event => {handleCellClick(event, annotation)}", :annotation="annotation", :preview="true")
            cell(
            :annotation="annotation",
            :preview="true"
            )

christianrhansen's avatar
christianrhansen committed
131
            //----- resize-handler (desktop only)
132
            .desktop-only.cell-item-resize-handle(
133 134 135 136
            draggable="true",
            @dragstart="event => {handleCellResizerDragStart(event, annotation)}",
            @dragend="event => {handleCellResizerDragEnd(event, annotation)}",
            @dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
137
              q-icon.q-ma-xs(name="network cell")
138

139 140 141
            //----- context menu for cells (desktop only)
            // TODO: needs revision
            q-context-menu.desktop-only
142 143 144 145 146 147 148
              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
149

150
        //----- temporary cell when pulling a new cell into grid (desktop)
151
        template(v-for="(tmpCell, index) in tmpObjects")
152
          .cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
Anton's avatar
Intial  
Anton committed
153 154
            cell(:cell="tmpCell")

christianrhansen's avatar
christianrhansen committed
155
        //-------------------------------------------------------------------------------------- temporary cell (mobile)
156
        template(v-if="mobileTempCell.show && cachedNewCell")
157

158 159 160
          .cell-item.cell-item-tmp-mobile.row.justify-center.items-center(
          ref="_mobileTempCell",
          :style="mobileTempCellStyle(mobileTempCell)")
161

christianrhansen's avatar
christianrhansen committed
162
            cell.absolute-top-left.q-ma-sm(:cell="cachedNewCell", :temp="true")
163

164 165 166 167 168
            //
              q-btn.text-white(v-if="mobileTempCell.button",
              @click="event => {addMobileCell(event)}", round, flat, size="lg",
              style="background-color: rgba(0, 0, 0, 0);")
                q-icon(name="check")
169

170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
        //------------------------------------------------------------------------------------------------- move handler
        //----- (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")

        //----------------------------------------------------------------------------------------------- resize handler
        //----- (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;")
208

christianrhansen's avatar
christianrhansen committed
209
      // ---------------------------------------------------------------------------------------------------------------
Anton's avatar
Intial  
Anton committed
210
      template(v-else)
211
        .cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
Anton's avatar
Intial  
Anton committed
212
          div.cell-item-resize-handle(
213 214 215 216 217
          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
218

Mathias Bär's avatar
Mathias Bär committed
219
      //template(v-if="!isMobile")
220 221 222 223 224
        .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
225
      //template(v-if="isMobile")
Mathias Bär's avatar
Mathias Bär committed
226 227 228 229 230
        .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
231

232
    // ------------------------------------------------------------------------------------------ edit box (mobile only)
233

234
    q-page-sticky.edit-box.q-mx-md.q-mb-md.transition-bottom.backdrop-filter.shadow-6.overflow-hidden.hidden(
christianrhansen's avatar
christianrhansen committed
235
    v-if="isMobile",
236
    :class="[{'show-full' : carousel.visibility && showEditingCells}, {'show-minimized' : showEditingCells}]",
237
    style="border-radius: .5rem;",
238
    position="bottom-right")
christianrhansen's avatar
christianrhansen committed
239

240
      //------------------------- buttons
241 242
      // .row.text-dark(style="background-color: rgba(0, 0, 0, .2);")
      .row.text-dark(style="background-color: rgba(255, 150, 150, .3);")
243 244 245

        //----- delete cell
        .col
christianrhansen's avatar
christianrhansen committed
246
          q-btn.q-py-none.q-pl-sm.q-ml-xs(
247
            @click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}", flat, no-ripple)
christianrhansen's avatar
christianrhansen committed
248
            q-icon(name="delete")
christianrhansen's avatar
christianrhansen committed
249

250 251
        //----- toggle edit-box
        .col.text-right
christianrhansen's avatar
christianrhansen committed
252
          q-btn.q-py-none.q-pr-sm.q-mr-xs(@click="carouselVisibility()", flat, no-ripple)
christianrhansen's avatar
christianrhansen committed
253 254
            q-icon(v-if="carousel.visibility", name="keyboard_arrow_down")
            q-icon(v-else, name="keyboard_arrow_up")
255

christianrhansen's avatar
christianrhansen committed
256
      //q-item-separator.q-ma-none
257 258 259 260 261 262

      //------------------------- carousel
      q-carousel.q-py-sm.carousel.transition-opacity(ref="carousel", v-model="slide",
      infinite, @input="getCarouselIcon(index)", style="width: 180px;")

        //----- move
christianrhansen's avatar
christianrhansen committed
263 264
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
265 266 267 268 269 270 271 272 273 274 275 276 277 278 279
          .text-center
            q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 0, -1)", round, flat, size="md")
              q-icon.rotate-90(name="keyboard_backspace")
          .text-center
            q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, -1, 0)", round, flat, size="md")
              q-icon(name="keyboard_backspace")
            q-btn.invisible.text-dark(round, flat, size="md")
              q-icon.flip-vertical(name="photo_size_select_small")
            q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 1, 0)", round, flat, size="md")
              q-icon.rotate-180(name="keyboard_backspace")
          .text-center
            q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 0, 1)", round, flat, size="md")
              q-icon.rotate-270(name="keyboard_backspace")

        //----- resize
christianrhansen's avatar
christianrhansen committed
280 281
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
282 283 284 285 286 287 288 289 290 291 292 293 294
          .text-center
            q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, -1)", round, flat, size="md")
              q-icon(name="remove")
          .text-center
            q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, -1, 0)", round, flat, size="md")
              q-icon(name="remove")
            q-btn.invisible.text-dark(round, flat, size="md")
              q-icon.rotate-45(name="zoom_out_map")
            q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 1, 0)", round, flat, size="md")
              q-icon(name="add")
          .text-center
            q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat, size="md")
              q-icon(name="add")
Anton's avatar
Intial  
Anton committed
295 296 297 298
</template>

<script>
  import Cell from './Cell'
299 300
  import { userHasFeature } from 'mbjs-quasar/src/lib'
  import { mapGetters } from 'vuex'
301
  import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
302
  import CellHandlerMobile from './CellHandlerMobile'
Anton's avatar
Intial  
Anton committed
303 304 305 306 307 308

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

  export default {
    components: {
309
      Cell,
310 311
      GridEditorEditingCellsMobile,
      CellHandlerMobile
Anton's avatar
Intial  
Anton committed
312
    },
313
    props: ['gridUuid', 'tabsAreOpen'],
Anton's avatar
Intial  
Anton committed
314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338
    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,
339
        annotations: undefined,
340
        tmpObjects: [],
341
        annotationUIStates: {},
Anton's avatar
Anton committed
342
        gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 },
Anton's avatar
Intial  
Anton committed
343
        contextMenuClickPosition: {},
344
        resizingGrid: false,
christianrhansen's avatar
christianrhansen committed
345
        mobileSelectedCell: undefined,
346
        touch: {position: {top: undefined, left: undefined}},
347
        isMobile: this.$q.platform.is.mobile,
348 349 350 351 352 353 354 355 356 357 358 359
        mobileTempCell: {
          x: 0,
          y: 0,
          ox: 0,
          oy: 0,
          width: 1,
          height: 1,
          left: 0,
          show: false,
          onGrid: false,
          button: false
        },
360
        slide: undefined,
361
        modal: false,
362
        carousel: {visibility: false, icon: 'open_with', slide: 0},
christianrhansen's avatar
christianrhansen committed
363
        // cursor: {x: undefined, y: undefined},
364
        cellHandler: {
365
          size: {width: 40, height: 40},
366
          move: {x: 20, y: undefined, gridPosition: {row: undefined, column: undefined}, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined, dataLeft: undefined},
367
          resize: {x: undefined, y: undefined, gridPosition: {row: undefined, column: undefined}, pushed: false, pos: undefined}
368
        },
369
        tempHandler: {
christianrhansen's avatar
christianrhansen committed
370 371
          move: {left: undefined, intersectingMainHandler: false, side: undefined},
          resize: {left: undefined, intersectingMainHandler: false, side: undefined}
372
        },
373
        activeHandler: false,
374
        selectedCell: {type: undefined, annotation: undefined}
Anton's avatar
Intial  
Anton committed
375 376
      }
    },
377 378
    computed: {
      ...mapGetters({
christianrhansen's avatar
christianrhansen committed
379
        cachedNewCell: 'mosys/getNewCell',
380
        user: 'auth/getUserState',
381
        // isMobile: 'globalSettings/getIsMobile',
Mathias Bär's avatar
Mathias Bär committed
382
        // editingCells: 'mosys/getEditingCells'
383
        showEditingCells: 'mosys/getShowEditingCells',
384 385
        scrollPositionCache: 'mosys/getScrollPositionCache',
        editMode: 'mosys/getEditMode'
386
      }),
387 388 389 390 391 392
      newCellType () {
        if (this.cachedNewCell) {
          let type = this.cachedNewCell.component
          return type.substr(4, type.length - 4)
        }
      },
393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414
      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
415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430
      },
      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>")`
        }
431 432
      }
    },
Anton's avatar
Intial  
Anton committed
433 434
    async mounted () {
      await this.fetchData()
435
      this.resetScrollPosition()
436 437 438
    },
    beforeDestroy () {
      this.observer.disconnect()
Anton's avatar
Intial  
Anton committed
439 440
    },
    watch: {
441
      'cellHandler.move.gridPosition': {
442 443 444 445
        handler: function (obj) {
          if (this.showEditingCells) {
            this.mobileCellMove(this.mobileSelectedCell, obj.column, obj.row)
          }
446 447 448
        },
        deep: true
      },
449 450 451
      'cellHandler.resize.gridPosition': {
        handler: function (obj) {
          if (this.showEditingCells) {
452 453 454
            let w = obj.column - this.cellHandler.move.gridPosition.column + 1
            let h = obj.row - this.cellHandler.move.gridPosition.row + 1
            this.mobileCellResize(this.mobileSelectedCell, w, h)
455 456 457 458
          }
        },
        deep: true
      },
459 460 461 462 463 464 465 466 467 468
      slide (val) {
        let icon
        switch (val) {
        case 0:
          icon = 'open_with'
          break
        case 1:
          icon = 'photo_size_select_small'
          break
        case 2:
469
          icon = 'more_horiz'
470 471 472 473 474
          break
        default:
          icon = 'open_with'
          break
        }
475 476 477
        // this.carousel.slide = val
        // this.carousel.icon = icon
        this.carousel = {slide: val, icon: icon, visibility: this.carousel.visibility}
478
      },
Anton's avatar
Anton committed
479
      annotations () {
480
        this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
481 482 483 484 485 486
      },
      gridMetadata () {
        this.updateGridDimensions()
      },
      async gridUuid () {
        await this.fetchData()
Mathias Bär's avatar
Mathias Bär committed
487 488
      },
      showEditingCells (val) {
489
        // console.log('show editing cells', val)
Mathias Bär's avatar
Mathias Bär committed
490 491 492
        if (val === false) {
          this.updateAnnotationUIStates()
        }
493 494 495
      },
      tabsAreOpen () {
        this.resetScrollPosition()
Anton's avatar
Intial  
Anton committed
496 497 498
      }
    },
    methods: {
499 500 501 502 503 504 505 506
      clearHandler (target) {
        switch (target) {
        case 'cell':
          Object.keys(this.annotationUIStates).filter((k) => {
            this.annotationUIStates[k].editing = false
          })
          this.$store.commit('mosys/setEditingCells', '')
          break
507 508
        case 'cached cell':
          this.$store.commit('mosys/cacheNewCell', undefined)
509 510 511 512
          this.clearHandler('temp cell')
          break
        case 'temp cell':
          this.mobileTempCell = {x: undefined, y: undefined, width: undefined, height: undefined, onGrid: false, button: false}
513
          break
514 515
        }
      },
516
      intersectionChanged (obj) {
christianrhansen's avatar
christianrhansen committed
517 518
        let _offsetLeft = Math.sign(obj.offsetLeft)

519
        // -------------------- move
520
        if (obj.element === 'move') {
christianrhansen's avatar
christianrhansen committed
521
          this.tempHandler.move.intersectingMainHandler = obj.intersecting
522

christianrhansen's avatar
christianrhansen committed
523
          // behind left side
christianrhansen's avatar
christianrhansen committed
524
          if (_offsetLeft < 0) {
525
            this.tempHandler.move.side = 'left'
526
          }
527
          // intersecting
christianrhansen's avatar
christianrhansen committed
528
          else if (isNaN(_offsetLeft)) {
christianrhansen's avatar
christianrhansen committed
529
            if (this.tempHandler.move.intersectingMainHandler && this.tempHandler.move.side === 'right') this.tempHandler.resize.intersectingMainHandler = false
530
          }
christianrhansen's avatar
christianrhansen committed
531
          // behind right side
christianrhansen's avatar
christianrhansen committed
532
          else if (_offsetLeft === 1) {
533
            this.tempHandler.move.side = 'right'
christianrhansen's avatar
christianrhansen committed
534
            this.tempHandler.resize.intersectingMainHandler = true
535
          }
536
        }
537

538
        // -------------------- resize
christianrhansen's avatar
christianrhansen committed
539
        else if (obj.element === 'resize') {
christianrhansen's avatar
christianrhansen committed
540
          this.tempHandler.resize.intersectingMainHandler = obj.intersecting
541

christianrhansen's avatar
christianrhansen committed
542
          // on left side
christianrhansen's avatar
christianrhansen committed
543
          if (_offsetLeft === -1) {
544
            this.tempHandler.resize.side = 'left'
545
          }
christianrhansen's avatar
christianrhansen committed
546
          /*
547
          // intersecting
christianrhansen's avatar
christianrhansen committed
548
          else if (isNaN(Math.sign(obj.offsetLeft))) {
549
          }
christianrhansen's avatar
christianrhansen committed
550
          */
christianrhansen's avatar
christianrhansen committed
551
          // on right side
christianrhansen's avatar
christianrhansen committed
552
          else if (_offsetLeft === 1) {
553
            this.tempHandler.resize.side = 'right'
554
          }
555 556
        }
      },
christianrhansen's avatar
christianrhansen committed
557
      handleMoveCell (obj) {
558 559
        this.cellHandler.move.x = obj.position.left
        this.cellHandler.move.y = obj.position.top
560

christianrhansen's avatar
christianrhansen committed
561 562
        let res = this.getGridPositionForEvent(obj)

563 564 565
        this.cellHandler.move.gridPosition.row = res.y
        this.cellHandler.move.gridPosition.column = res.x

christianrhansen's avatar
christianrhansen committed
566
        if (obj.isFirst) {
567
          this.activeHandler = true
christianrhansen's avatar
christianrhansen committed
568
          this.mobileTempCell.show = true
569
          // this.mobileTempCell.button = false
570
          this.cellHandler.move.pushed = true
christianrhansen's avatar
christianrhansen committed
571
        }
572

christianrhansen's avatar
christianrhansen committed
573 574 575
        this.mobileTempCell.x = res.x
        this.mobileTempCell.y = res.y

576 577 578
        this.mobileTempCell.ox = res.ox
        this.mobileTempCell.oy = res.oy

579 580
        this.cellHandler.move.x = res.ox
        this.cellHandler.move.y = res.oy
581

christianrhansen's avatar
christianrhansen committed
582
        if (obj.isFinal) {
583
          this.activeHandler = false
christianrhansen's avatar
christianrhansen committed
584
          this.mobileTempCell.onGrid = true
585
          // this.mobileTempCell.button = true
586
          this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
587 588 589 590
          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
591

592 593
          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
594 595
        }
      },
christianrhansen's avatar
christianrhansen committed
596
      handleResizeCell (obj) {
christianrhansen's avatar
christianrhansen committed
597
        // this.cursor = {x: obj.position.left, y: obj.position.top}
598 599 600
        // 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
601

602 603 604
        // ---> panGrid
        let res = this.getGridPositionForEvent(obj)

605 606 607
        this.cellHandler.resize.gridPosition.row = res.y
        this.cellHandler.resize.gridPosition.column = res.x

608
        if (obj.isFirst) {
609
          this.activeHandler = true
610
          this.mobileTempCell.show = true
611
          // this.mobileTempCell.button = false
612
          this.cellHandler.resize.pushed = true
613 614 615 616 617
        }

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

618 619
        this.cellHandler.resize.x = res.ox
        this.cellHandler.resize.y = res.oy
620

621
        if (obj.isFinal) {
622
          this.activeHandler = false
623
          this.mobileTempCell.onGrid = true
624
          // this.mobileTempCell.button = true
625
          this.cellHandler.resize.pushed = false
626 627
          // this.addMobileCell(obj)
          // this.mobileTempCell.show = false
628 629
          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
630 631
        }
      },
632
      handleCellInfoTouch (event, annotation) {
633
        console.log('handleCellInfoTouch', annotation)
634 635 636
        this.touchMobileCell(event, annotation)
        this.handleModal()
      },
637 638 639 640
      getCarouselIcon (val) {
        console.log(val)
      },
      carouselVisibility () {
641 642 643 644
        console.log(this.carousel.slide)
        if (this.$refs.carousel) {
          this.$refs.carousel.goToSlide(this.carousel.slide)
        }
645 646
        this.carousel.visibility = !this.carousel.visibility
      },
647 648 649
      handleModal () {
        this.modal = !this.modal
      },
650
      panGrid (obj) {
651
        if (this.cachedNewCell && !this.mobileTempCell.onGrid) {
652
          // console.log('hhhhhhhhhhhhhhhhh', obj)
653 654 655 656
          let res = this.getGridPositionForEvent(obj)

          if (obj.isFirst) {
            this.mobileTempCell.show = true
657
            // this.mobileTempCell.button = false
658 659 660 661 662 663 664 665
            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) {
666
            this.mobileTempCell.onGrid = true
667
            // this.mobileTempCell.button = true
668 669
            // this.addMobileCell(obj)
            // this.mobileTempCell.show = false
670 671
            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
672

673 674
            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
675
          }
676
        }
677
      },
678
      async cellHold (event, annotation) {
679 680
        this.$store.commit('mosys/setEditingCells', '')

681
        this.$q.notify({
682
          message: 'Copied.',
683
          color: 'dark',
684 685
          textColor: 'white',
          position: 'bottom-right'
686 687 688 689 690 691 692 693 694 695
        })

        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)
      },
christianrhansen's avatar
christianrhansen committed
696 697
      moveCachedCell (obj) {
        this.touch.position = {top: obj.position.top, left: obj.position.left}
698 699 700 701 702 703 704 705 706
        /*
        if (obj.isFinal) {
          console.log(obj.isFinal)
          console.log(window.event)
          console.log(this.touch.position)
          console.log('--->->->', this.getGridPositionForEvent(event))
        }
        */
        // console.log('--->>>', this.getGridPositionForEvent(event))
christianrhansen's avatar
christianrhansen committed
707
      },
708
      addMobileCell (event) {
christianrhansen's avatar
christianrhansen committed
709
        if (this.cachedNewCell) {
710
          this.handleGridDrop(event)
christianrhansen's avatar
christianrhansen committed
711
          this.$store.commit('mosys/cacheNewCell', undefined)
712 713
          this.$q.notify({
            message: 'Cell was added.',
714 715 716
            color: 'dark',
            position: 'center',
            timeout: 50
717
          })
christianrhansen's avatar
christianrhansen committed
718 719
        }
      },
720
      touchMobileCell (event, cell) {
721
        if (!this.mobileTempCell.onGrid && cell) {
722 723 724 725 726 727 728 729 730
          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)
        }
731
      },
christianrhansen's avatar
christianrhansen committed
732
      handleCellTouch (event, annotation) {
733
        console.log('handleCellTouch', annotation)
734
        if (!this.cachedNewCell) {
735 736 737 738 739 740 741 742 743 744 745 746 747 748
          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

749
          this.mobileSelectedCell = annotation
750
          this.getCellType(annotation)
751
        }
christianrhansen's avatar
christianrhansen committed
752
      },
753 754 755 756 757
      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)
      },
758 759 760
      // async mobileCellMove (annotation, _x, _y) {
      async mobileCellMove (annotation, x, y) {
        // this.$el.scrollLeft = this.$el.scrollLeft + (this.gridDimensions.full.cell.width * _x)
761

762
        let
763 764
          parsed = annotation.target.selector.parse()
          /*
765
          sliced = parsed.xywh.slice(0, 4),
766
          x = sliced[0],
767 768 769
          y = sliced[1],
          w = sliced[2],
          h = sliced[3]
770
          */
771

772
        /*
773 774 775 776 777 778 779
        // ----- x
        if (_x === -1) if (x > 1) x += _x
        if (_x === 1 && x < this.grid.config.columns - w + 1) x += _x

        // ----- y
        if (_y === -1) if (y > 1) y += _y
        if (_y === 1 && y < this.grid.config.rows - h + 1) y += _y
780
        */
781 782 783 784

        // x += _x
        // y += _y

785 786 787 788 789 790 791 792
        let target = this.grid.get2DArea([x, y], parsed.xywh.slice(2))
        annotation.target.selector.value = target.selector.value
        await this.$store.dispatch('annotations/patch', [annotation.id, {
          target: {
            selector: { value: target.selector.value }
          }
        }])
      },
793
      async mobileCellResize (annotation, _w, _h) {
794 795 796
        let
          parsed = annotation.target.selector.parse(),
          [x, y, w, h] = parsed.xywh
797 798
        console.log('mobileCellResize', w, h)
        /*
799 800 801 802 803 804 805
        // ----- w
        if (_w === -1) if (w > 1) w += _w
        if (_w === 1 && x < this.grid.config.columns - w + 1) w += _w

        // ----- h
        if (_h === -1) if (h > 1) h += _h
        if (_h === 1 && y < this.grid.config.rows - h + 1) h += _h
806
        */
807 808 809 810

        // w += _w
        // h += _h

811
        const value = { xywh: [x, y, _w, _h] }
812 813 814 815 816 817 818
        annotation.target.selector.value = value

        await this.$store.dispatch('annotations/patch', [annotation.id, { target: { selector: { value } } }])
      },
      setEditMode (mode) {
        this.$store.commit('mosys/setEditMode', mode)
      },
819 820 821 822
      //
      // DATA
      //

Anton's avatar
Intial  
Anton committed
823 824 825
      async fetchData () {
        if (this.gridUuid) {
          this.grid = await this.$store.dispatch('maps/get', this.gridUuid)
826 827 828 829 830 831 832 833
          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
834
          this.updateGridDimensions()
835 836 837 838 839 840
          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
841 842
        }
      },
843 844 845
      async updateGridMetadataStore () {
        await this.$store.dispatch('maps/patch', [this.grid.id, { config: this.grid.config }])
        this.updateGridDimensions()
Anton's avatar
Intial  
Anton committed
846
      },
847 848 849 850 851
      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
852 853
          // return _this.cells.find(c => c._uuid === k)
          return _this.annotations.find(c => c._uuid === k)
854 855
        })
        this.$store.commit('mosys/setSelectedCells', selectedCells)
Anton's avatar
Intial  
Anton committed
856
      },
Mathias Bär's avatar
Mathias Bär committed
857 858 859 860 861 862 863 864
      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)
        })
865 866 867 868 869 870 871
        /*
        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
872 873
        this.$store.commit('mosys/setEditingCells', editingCells)
      },
874 875 876 877 878
      updateAnnotationUIStates () {
        let newAnnotationUIStates = {}
        this.annotations.forEach(a => {
          newAnnotationUIStates[a._uuid] = {
            selected: false,
Mathias Bär's avatar
Mathias Bär committed
879
            editing: false,
880
            beingResized: false,
Mathias Bär's avatar
Mathias Bär committed
881
            beginDragged: false,
882
            annotation: a
Anton's avatar
Intial  
Anton committed
883
          }
884 885
        })
        this.annotationUIStates = newAnnotationUIStates
Anton's avatar
Intial  
Anton committed
886
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
887
        this.updateEditingCells()
888
      },
889 890 891 892 893

      //
      // GRID DRAG & DROP HANDLERS
      //

894
      async handleGridDragOver (event) {
Anton's avatar
Intial  
Anton committed
895 896 897
        let _this = this
        if (this.resizingGrid) {
          const position = this.getGridPositionForEvent(event)
898 899
          this.grid.config.ratio = position.ox / (position.oy * 1.0)
          await this.updateGridMetadataStore()
Anton's avatar
Intial  
Anton committed
900 901
        }
        else {
902 903
          let annotation = this.annotations.filter(annotation => {
            if (!_this.annotationUIStates[annotation._uuid]) return false
Mathias Bär's avatar
Mathias Bär committed
904
            return _this.annotationUIStates[annotation._uuid].beingDragged ||
905
              _this.annotationUIStates[annotation._uuid].beingResized
Anton's avatar
Intial  
Anton committed
906 907
          }).shift()
          let offset, position
908 909 910 911
          if (!annotation) {
            annotation = {
              target: this.grid.get2DArea([1, 1], [1, 1])
            }
Anton's avatar
Intial  
Anton committed
912 913 914
            position = this.getGridPositionForEvent(event)
          }
          else {
915
            offset = this.annotationUIStates[annotation._uuid].draggingOffset
Anton's avatar
Intial  
Anton committed
916 917
            position = this.getGridPositionForEvent(event, offset)
          }
918 919
          if (!this.tmpObjects.length) this.tmpObjects.push(annotation)
          const parsed = annotation.target.selector.parse()
Anton's avatar
Intial  
Anton committed
920
          if (event.dataTransfer.types.includes('text/plain')) {
921 922
            parsed.xywh[0] = position.x
            parsed.xywh[1] = position.y
Anton's avatar
Intial  
Anton committed
923 924 925
            event.preventDefault()
          }
          else {
926 927
            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
928
          }
929
          annotation.target.selector.value = parsed
Anton's avatar
Intial  
Anton committed
930 931 932
        }
      },
      handleGridDragEnd () {
933
        this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
934
      },
935
      async handleGridDrop (event) {
936 937 938 939 940
        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)
941 942
        if (dropData) {
          dropData = JSON.parse(dropData)
943
          let annotation = this.annotations.find(a => a.id === dropData.id)
944 945 946 947 948
          const { x, y } = this.getGridPositionForEvent(
            event,
            annotation ? this.annotationUIStates[annotation._uuid].draggingOffset : undefined
          )
          if (annotation) {
949 950 951
            const
              parsed = annotation.target.selector.parse(),
              target = this.grid.get2DArea([x, y], parsed.xywh.slice(2))
952 953 954 955 956 957
            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
958 959
          }
          else {
960 961
            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])
962 963 964 965 966 967 968 969 970 971 972
            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
                }
              },
973 974
              // target: this.grid.get2DArea([x, y], [1, 1])
              target: test
975
            })
976
            this.annotations.push(annotation)
Anton's avatar
Anton committed
977
            this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
978
          }
979

980
          this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
981 982
          event.preventDefault()
        }
983
        this.clearHandler('temp cell')
Anton's avatar
Intial  
Anton committed
984
      },
985 986 987 988

      //
      // CELL DRAG & DROP HANDLERS
      //
Mathias Bär's avatar
Mathias Bär committed
989 990 991
      handleCellEditClick (event, cell) {
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
992
        this.$root.$emit('mosys_saveScrollPosition')
Mathias Bär's avatar
Mathias Bär committed
993
      },
994 995 996 997 998
      handleCellClick (event, cell) {
        this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
        this.updateSelectedCells()
      },
      handleCellDragStart (event, annotation) {
christianrhansen's avatar
christianrhansen committed
999
        console.log('§§§§§§§§', annotation)
1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011
        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
1012
          }
1013
          this.tmpObjects.push(annotation)
1014 1015 1016
        }
      },
      handleCellDragEnd (event, annotation) {
1017 1018 1019
        if (!this.mobile) {
          this.annotationUIStates[annotation._uuid].beingDragged = false
        }
1020 1021 1022 1023
      },
      async handleCellContextMenuDelete (event, annotation) {
        this.annotationUIStates[annotation._uuid].selected = false
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
1024
        this.updateEditingCells()
1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067
        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) {