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

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

12 13 14 15 16 17
    // 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 }}

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

christianrhansen's avatar
christianrhansen committed
20 21
    // ------------------------------------------------------------------------------------------ cached new cell helper
    // q-page-sticky.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell", position="top-right")
christianrhansen's avatar
christianrhansen committed
22 23 24
    //
      .fixed-top-right.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell",
      // :style="{top: touch.position.top - 16 - 16 + 'px'}")
25
    // .fixed-top.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell")
christianrhansen's avatar
christianrhansen committed
26 27
    #cell-helper.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}")
      q-item.q-px-md.q-py-none.full-height
28
        q-item-main
29
          | Place new cell
30
        q-item-side
christianrhansen's avatar
christianrhansen committed
31 32 33 34
          //
            q-btn.bg-transparent.text-white.on-right(@click.native="clearTempCell()", round, flat,
            // :disabled="!mobileTempCell.onGrid")
              q-icon(name="undo")
35
          q-btn.bg-transparent.text-white.on-right(@click.native="clearCachedCell()", round, flat)
36
            q-icon(name="delete")
37 38

    // ------------------------------------------------------------------------------------------------------------ grid
39
      @click="event => {addMobileCell(event)}",
40
    div.cell-grid.relative-position(
41
    v-touch-pan="panGrid",
42 43 44 45 46 47
    @dragenter="handleGridDragOver",
    @dragover="handleGridDragOver",
    @dragleave="handleGridDragEnd",
    @drop="handleGridDrop",
    @contextmenu="handleGridContextMenu",
    :style="gridStyle")
Anton's avatar
Intial  
Anton committed
48

49 50
      // context menu grid (desktop only)
      q-context-menu.desktop-only(ref="gridmenu")
Anton's avatar
Intial  
Anton committed
51 52
        q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
          q-item(
53 54 55 56 57
          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
58 59 60

      template(v-if="!resizingGrid")

61
        template(v-for="(annotation, index) in annotations")
christianrhansen's avatar
christianrhansen committed
62 63

          //----- cell
64
          // v-touch-hold="event => {cellHold(event, annotation)}",
Anton's avatar
Intial  
Anton committed
65
          .cell-item(
66
          v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
67
          v-touch-hold="event => {handleCellInfoTouch(event, annotation)}",
68 69 70 71 72 73 74 75 76 77 78 79
          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}`")

            //----- edit-/close-button
            // TODO: find a more elegant solution
            .desktop-only
Mathias Bär's avatar
Mathias Bär committed
80
              q-btn.edit-button.absolute-top-right(
81 82 83 84 85 86 87 88
              @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"
              )
            .mobile-only
              q-btn.edit-button.absolute.fit.bg-transparent(
              @click.prevent="event => {touchMobileCell(event, annotation)}", flat)
christianrhansen's avatar
christianrhansen committed
89

90 91 92 93 94
              //----- 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
95

96
            //----- selecting cells disabled because it has no use currently
97 98 99 100 101 102 103 104
            // 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
105
            //----- resize-handler (desktop only)
106
            .desktop-only.cell-item-resize-handle(
107 108 109 110
            draggable="true",
            @dragstart="event => {handleCellResizerDragStart(event, annotation)}",
            @dragend="event => {handleCellResizerDragEnd(event, annotation)}",
            @dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
111
              q-icon.q-ma-xs(name="network cell")
112

113 114 115
            //----- context menu for cells (desktop only)
            // TODO: needs revision
            q-context-menu.desktop-only
116 117 118 119 120 121 122
              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
123

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

129
        //------------------------- temporary cell (mobile)
130 131
        // template(v-if="mobileTempCell.show && cachedNewCell")
        template
132

133
          //----- cell
134 135 136
          .cell-item.cell-item-tmp-mobile.row.justify-center.items-center(
          ref="_mobileTempCell",
          :style="mobileTempCellStyle(mobileTempCell)")
137

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

christianrhansen's avatar
christianrhansen committed
140
            q-btn.text-white(v-if="mobileTempCell.button",
141 142
            @click="event => {addMobileCell(event)}", round, flat, size="lg",
            style="background-color: rgba(0, 0, 0, 0);")
143
              q-icon(name="check")
144

145 146
          //----------------------------------------------------------------------------------------------- move handler
          //----- (main)
147
          // v-if="mobileTempCell.onGrid && !handlerNewCell.resize.pushed",
148 149 150 151 152 153 154
          // :data-left="getHandlerPosition('move')",
          // ref="move",
          // .handler-new-cell.move.absolute.text-dark.justify-center.row.bg-white.shadow-6(
          cell-handler-mobile.absolute(
          @onIntersectionChange="intersectionChanged",
          :element="'move'",
          v-touch-pan="handleMoveCell",
christianrhansen's avatar
christianrhansen committed
155
          :style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}",
156
          :class="[{'pushed': !handlerNewCell.move.pushed}]")
christianrhansen's avatar
christianrhansen committed
157 158
            q-icon.self-center.rotate-180(name="open_with", size="22px")

159
          //----- (temp)
160
          //----- (when main move handler is outside of viewport)
161
          .handler-new-cell.temp.fixed.text-dark.justify-center.row.bg-white.shadow-6(
162
          v-touch-pan="handleMoveCell",
163 164
          :class="[tempHandler.move.visibility ? 'temp-hide': 'temp-show']",
          :style="{left: tempHandler.move.left + 'px', top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
165 166
            q-icon.self-center.rotate-180(name="open_with", size="22px")

167 168
          //--------------------------------------------------------------------------------------------- resize handler
          //----- (main)
169
          // v-if="mobileTempCell.onGrid && !handlerNewCell.move.pushed",
170 171 172 173 174 175 176 177
          // .handler-new-cell.resize.absolute.text-dark.justify-center.row.bg-white.shadow-6(
          // v-intersection-observer="resize",
          // ref="resize",
          // :data-left="getHandlerPosition('resize')",
          cell-handler-mobile.absolute(
          @onIntersectionChange="intersectionChanged",
          :element="'resize'",
          v-touch-pan="handleResizeCell",
178 179
          :style="{left: handlerNewCell.resize.x - 20 + 'px', top: handlerNewCell.resize.y - 20 + 'px'}",
          :class="{'pushed': !handlerNewCell.resize.pushed}")
180
            q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
181

182 183 184 185
          //----- (temp)
          //----- (when main resize handler is outside of viewport)
          .handler-new-cell.temp.fixed.text-dark.justify-center.row.bg-white.shadow-6(
          v-touch-pan="handleResizeCell",
christianrhansen's avatar
christianrhansen committed
186
          :class="[tempHandler.resize.visibility ? 'temp-hide': 'temp-show']",
187 188 189
          :style="{left: tempHandler.resize.left + 'px', top: handlerNewCell.resize.y + 59 - 20 + 'px'}",)
            q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")

christianrhansen's avatar
christianrhansen committed
190
      // ---------------------------------------------------------------------------------------------------------------
Anton's avatar
Intial  
Anton committed
191
      template(v-else)
192
        .cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
Anton's avatar
Intial  
Anton committed
193
          div.cell-item-resize-handle(
194 195 196 197 198
          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
199

Mathias Bär's avatar
Mathias Bär committed
200
      //template(v-if="!isMobile")
201 202 203 204 205
        .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
206
      //template(v-if="isMobile")
Mathias Bär's avatar
Mathias Bär committed
207 208 209 210 211
        .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
212

christianrhansen's avatar
christianrhansen committed
213
    // ------------------------------------------------------------------------------------------ edit box (mobile only)
214

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

221
      //------------------------- buttons
222 223
      // .row.text-dark(style="background-color: rgba(0, 0, 0, .2);")
      .row.text-dark(style="background-color: rgba(255, 150, 150, .3);")
224 225 226

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

231 232
        //----- toggle edit-box
        .col.text-right
christianrhansen's avatar
christianrhansen committed
233
          q-btn.q-py-none.q-pr-sm.q-mr-xs(@click="carouselVisibility()", flat, no-ripple)
christianrhansen's avatar
christianrhansen committed
234 235
            q-icon(v-if="carousel.visibility", name="keyboard_arrow_down")
            q-icon(v-else, name="keyboard_arrow_up")
236

christianrhansen's avatar
christianrhansen committed
237
      //q-item-separator.q-ma-none
238 239 240 241 242 243

      //------------------------- 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
244 245
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
246 247 248 249 250 251 252 253 254 255 256 257 258 259 260
          .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
261 262
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
263 264 265 266 267 268 269 270 271 272 273 274 275
          .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
276 277 278 279
</template>

<script>
  import Cell from './Cell'
280 281
  import { userHasFeature } from 'mbjs-quasar/src/lib'
  import { mapGetters } from 'vuex'
282
  import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
283
  import CellHandlerMobile from './CellHandlerMobile'
Anton's avatar
Intial  
Anton committed
284 285 286 287 288 289

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

  export default {
    components: {
290
      Cell,
291 292
      GridEditorEditingCellsMobile,
      CellHandlerMobile
Anton's avatar
Intial  
Anton committed
293
    },
294
    props: ['gridUuid', 'tabsAreOpen'],
Anton's avatar
Intial  
Anton committed
295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319
    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,
320
        annotations: undefined,
321
        tmpObjects: [],
322
        annotationUIStates: {},
Anton's avatar
Anton committed
323
        gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 },
Anton's avatar
Intial  
Anton committed
324
        contextMenuClickPosition: {},
325
        resizingGrid: false,
christianrhansen's avatar
christianrhansen committed
326
        mobileSelectedCell: undefined,
327
        touch: {position: {top: undefined, left: undefined}},
328
        isMobile: this.$q.platform.is.mobile,
329 330 331 332 333 334 335 336 337 338 339 340
        mobileTempCell: {
          x: 0,
          y: 0,
          ox: 0,
          oy: 0,
          width: 1,
          height: 1,
          left: 0,
          show: false,
          onGrid: false,
          button: false
        },
341
        slide: undefined,
342
        modal: false,
343
        carousel: {visibility: false, icon: 'open_with', slide: 0},
christianrhansen's avatar
christianrhansen committed
344
        // cursor: {x: undefined, y: undefined},
christianrhansen's avatar
christianrhansen committed
345
        handlerNewCell: {
346
          size: {width: 40, height: 40},
347
          move: {x: 20, y: undefined, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined, dataLeft: undefined},
christianrhansen's avatar
christianrhansen committed
348
          resize: {x: undefined, y: undefined, pushed: false, pos: undefined}
349
        },
350
        handlerNewCellTemp: {visibility: true, left: 0},
351
        tempHandler: {
352 353
          move: {left: undefined, visibility: false, intersectingMainHandler: undefined},
          resize: {left: undefined, visibility: false, intersectingMainHandler: undefined}
354
        }
Anton's avatar
Intial  
Anton committed
355 356
      }
    },
357 358
    computed: {
      ...mapGetters({
christianrhansen's avatar
christianrhansen committed
359
        cachedNewCell: 'mosys/getNewCell',
360
        user: 'auth/getUserState',
361
        // isMobile: 'globalSettings/getIsMobile',
Mathias Bär's avatar
Mathias Bär committed
362
        // editingCells: 'mosys/getEditingCells'
363
        showEditingCells: 'mosys/getShowEditingCells',
364 365
        scrollPositionCache: 'mosys/getScrollPositionCache',
        editMode: 'mosys/getEditMode'
366
      }),
367 368 369 370 371
      /*
      handlerPositionMove (val) {
        return val * 100
      },
      */
372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393
      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
394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409
      },
      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>")`
        }
410 411
      }
    },
Anton's avatar
Intial  
Anton committed
412 413
    async mounted () {
      await this.fetchData()
414
      this.resetScrollPosition()
415 416 417 418 419

      // this.handlerNewCell.move.dataLeft = this.$refs.move.getAttribute('data-left')
      // console.log(this.handlerNewCell.move.dataLeft)
      // this.testMove = this.$refs.move.getAttribute('data-left')

420
      /*
421 422 423 424 425 426 427 428 429 430 431 432

      let options = {
        rootMargin: '0px',
        threshold: [0.2, 0.4, 0.6, 0.8, 1.0]
      }

      let th = []
      for (let i = 0; i <= 1.0; i += 0.01) {
        th.push(i)
      }
      options.threshold = th

433
      */
434
      /*
435
      let observer = new IntersectionObserver(this.observerCallback)
436 437
      observer.observe(this.$refs.move)
      // observer.observe(this.$refs._mobileTempCell)
438
      this.observer = observer
439
      */
440 441 442
    },
    beforeDestroy () {
      this.observer.disconnect()
Anton's avatar
Intial  
Anton committed
443 444
    },
    watch: {
445 446 447
      handlerPositionMove (val) {
        console.log('WATCG', val)
      },
448 449 450 451 452 453 454 455 456 457
      slide (val) {
        let icon
        switch (val) {
        case 0:
          icon = 'open_with'
          break
        case 1:
          icon = 'photo_size_select_small'
          break
        case 2:
458
          icon = 'more_horiz'
459 460 461 462 463
          break
        default:
          icon = 'open_with'
          break
        }
464 465 466
        // this.carousel.slide = val
        // this.carousel.icon = icon
        this.carousel = {slide: val, icon: icon, visibility: this.carousel.visibility}
467
      },
Anton's avatar
Anton committed
468
      annotations () {
469
        this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
470 471 472 473 474 475
      },
      gridMetadata () {
        this.updateGridDimensions()
      },
      async gridUuid () {
        await this.fetchData()
Mathias Bär's avatar
Mathias Bär committed
476 477
      },
      showEditingCells (val) {
478
        // console.log('show editing cells', val)
Mathias Bär's avatar
Mathias Bär committed
479 480 481
        if (val === false) {
          this.updateAnnotationUIStates()
        }
482 483 484
      },
      tabsAreOpen () {
        this.resetScrollPosition()
Anton's avatar
Intial  
Anton committed
485 486 487
      }
    },
    methods: {
488
      intersectionChanged (obj) {
489 490
        //
        // -------------------- move
491
        if (obj.element === 'move') {
492
          this.tempHandler.move.intersectingMainHandler = obj.intersecting
493
          this.tempHandler.move.visibility = obj.intersecting
494

christianrhansen's avatar
christianrhansen committed
495
          // behind left side
496
          if (Math.sign(obj.offsetLeft) < 0) {
christianrhansen's avatar
christianrhansen committed
497
            this.tempHandler.move.left = 4
498
          }
christianrhansen's avatar
christianrhansen committed
499
          // visible
500
          else if (Math.sign(obj.offsetLeft) === 0) {
christianrhansen's avatar
christianrhansen committed
501
            this.tempHandler.resize.visibility = true
502
          }
christianrhansen's avatar
christianrhansen committed
503
          // behind right side
504
          else if (Math.sign(obj.offsetLeft) === 1) {
christianrhansen's avatar
christianrhansen committed
505
            this.tempHandler.move.left = window.innerWidth - 40 - 4
506
          }
507
        }
508

509
        // -------------------- resize
510
        if (obj.element === 'resize') {
511
          this.tempHandler.resize.intersectingMainHandler = obj.intersecting
christianrhansen's avatar
christianrhansen committed
512
          this.tempHandler.resize.visibility = obj.intersecting
513

christianrhansen's avatar
christianrhansen committed
514 515 516
          // on left side
          if (Math.sign(obj.offsetLeft) === -1) {
            this.tempHandler.resize.left = 4
517
          }
christianrhansen's avatar
christianrhansen committed
518 519
          // visible
          else if (Math.sign(obj.offsetLeft) === 0) {
520
          }
christianrhansen's avatar
christianrhansen committed
521 522 523 524
          // on right side
          else if (Math.sign(obj.offsetLeft) === 1) {
            this.tempHandler.resize.left = window.innerWidth - 40 - 4
            // if (this.tempHandler.move.visibility === false) this.tempHandler.resize.visibility = true
525
          }
526 527 528
        }
      },
      /*
529 530
      getHandlerPosition (val) {
        if (val === 'move' && this.$refs.move) console.log('move', this.$refs.move.dataset.left)
531 532 533 534
        if (val === 'resize' && this.$refs.resize) {
          // console.log('resize', this.$refs.resize.dataset.left)
          console.log('bla', this.$refs.resize)
        }
535
      },
536 537
      */
      /*
538 539
      // observerCallback (entries, observer) {
      observerCallback (entries) {
540
        let target = entries[0]
541

542
        if (!target.isIntersecting) {
543
          this.handlerNewCellTemp.visibility = true
christianrhansen's avatar
christianrhansen committed
544
          if (Math.sign(target.boundingClientRect.left) === 1) {
545
            this.handlerNewCellTemp.left = window.innerWidth - 40
546
          }
christianrhansen's avatar
christianrhansen committed
547
          else {
548
            this.handlerNewCellTemp.left = 0
549
          }
550
        }
551
        else {
552
          this.handlerNewCellTemp.visibility = false
553
        }
554
      },
555
      */
christianrhansen's avatar
christianrhansen committed
556
      handleMoveCell (obj) {
557
        this.handlerNewCellTemp.left = -100
christianrhansen's avatar
christianrhansen committed
558 559
        this.handlerNewCell.move.x = obj.position.left
        this.handlerNewCell.move.y = obj.position.top
560

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

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
christianrhansen's avatar
christianrhansen committed
566
          this.handlerNewCell.move.pushed = true
christianrhansen's avatar
christianrhansen committed
567
        }
568

christianrhansen's avatar
christianrhansen committed
569 570 571
        this.mobileTempCell.x = res.x
        this.mobileTempCell.y = res.y

572 573 574
        this.mobileTempCell.ox = res.ox
        this.mobileTempCell.oy = res.oy

christianrhansen's avatar
christianrhansen committed
575 576
        this.handlerNewCell.move.x = res.ox
        this.handlerNewCell.move.y = res.oy
577

christianrhansen's avatar
christianrhansen committed
578 579 580
        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
581
          this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
christianrhansen's avatar
christianrhansen committed
582 583 584 585
          this.handlerNewCell.move.pushed = false
          // this.handlerNewCell.move.y = this.gridDimensions.full.cell.height * (res.y - 1) + 8 + 59 + 20
          this.handlerNewCell.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
          this.handlerNewCell.move.y = this.gridDimensions.full.cell.height * (this.mobileTempCell.y - 1) + 8 + 20
586 587 588

          this.handlerNewCell.resize.x = this.gridDimensions.full.cell.width * (res.x + this.mobileTempCell.width - 1) - 8 - 20
          this.handlerNewCell.resize.y = this.gridDimensions.full.cell.height * (res.y + this.mobileTempCell.height - 1) - 8 - 20
christianrhansen's avatar
christianrhansen committed
589 590
        }
      },
christianrhansen's avatar
christianrhansen committed
591
      handleResizeCell (obj) {
christianrhansen's avatar
christianrhansen committed
592
        // this.cursor = {x: obj.position.left, y: obj.position.top}
593 594 595 596
        // this.handlerNewCell.resize = {x: obj.position.left, y: obj.position.top}
        this.handlerNewCell.resize.x = obj.position.left
        this.handlerNewCell.resize.y = obj.position.top

597 598 599 600 601 602
        // ---> panGrid
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
603
          this.handlerNewCell.resize.pushed = true
604 605 606 607 608
        }

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

609 610 611
        this.handlerNewCell.resize.x = res.ox
        this.handlerNewCell.resize.y = res.oy

612 613 614
        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
615
          this.handlerNewCell.resize.pushed = false
616 617
          // this.addMobileCell(obj)
          // this.mobileTempCell.show = false
618 619
          this.handlerNewCell.resize.x = this.gridDimensions.full.cell.width * res.x - 8 - 20
          this.handlerNewCell.resize.y = this.gridDimensions.full.cell.height * res.y - 8 - 20
620 621
        }
      },
622 623 624 625
      clearCachedCell () {
        this.$store.commit('mosys/cacheNewCell', undefined)
        this.clearTempCell()
      },
626 627 628 629
      handleCellInfoTouch (event, annotation) {
        this.touchMobileCell(event, annotation)
        this.handleModal()
      },
630 631 632 633
      getCarouselIcon (val) {
        console.log(val)
      },
      carouselVisibility () {
634 635 636 637
        console.log(this.carousel.slide)
        if (this.$refs.carousel) {
          this.$refs.carousel.goToSlide(this.carousel.slide)
        }
638 639
        this.carousel.visibility = !this.carousel.visibility
      },
640 641 642
      handleModal () {
        this.modal = !this.modal
      },
643
      clearTempCell () {
644
        this.mobileTempCell = {x: undefined, y: undefined, width: undefined, height: undefined, onGrid: false, button: false}
645
      },
646
      panGrid (obj) {
647
        if (this.cachedNewCell && !this.mobileTempCell.onGrid) {
648
          // console.log('hhhhhhhhhhhhhhhhh', obj)
649 650 651 652
          let res = this.getGridPositionForEvent(obj)

          if (obj.isFirst) {
            this.mobileTempCell.show = true
653
            this.mobileTempCell.button = false
654 655 656 657 658 659 660 661
            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) {
662
            this.mobileTempCell.onGrid = true
663
            this.mobileTempCell.button = true
664 665
            // this.addMobileCell(obj)
            // this.mobileTempCell.show = false
christianrhansen's avatar
christianrhansen committed
666 667
            this.handlerNewCell.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
            this.handlerNewCell.move.y = this.gridDimensions.full.cell.height * (this.mobileTempCell.y - 1) + 8 + 20
668 669 670

            this.handlerNewCell.resize.x = this.gridDimensions.full.cell.width * res.x - 8 - 20
            this.handlerNewCell.resize.y = this.gridDimensions.full.cell.height * res.y - 8 - 20
671
          }
672
        }
673
      },
674
      async cellHold (event, annotation) {
675 676
        this.$store.commit('mosys/setEditingCells', '')

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

        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
692 693
      moveCachedCell (obj) {
        this.touch.position = {top: obj.position.top, left: obj.position.left}
694 695 696 697 698 699 700 701 702
        /*
        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
703
      },
704 705
      addMobileCell (event) {
        // console.log('addMobileCell()', event, annotation)
christianrhansen's avatar
christianrhansen committed
706
        if (this.cachedNewCell) {
707
          this.handleGridDrop(event)
christianrhansen's avatar
christianrhansen committed
708
          this.$store.commit('mosys/cacheNewCell', undefined)
709 710
          this.$q.notify({
            message: 'Cell was added.',
711 712 713
            color: 'dark',
            position: 'center',
            timeout: 50
714
          })
christianrhansen's avatar
christianrhansen committed
715 716
        }
      },
717 718 719 720 721 722 723 724 725 726
      touchMobileCell (event, cell) {
        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)
      },
christianrhansen's avatar
christianrhansen committed
727
      handleCellTouch (event, annotation) {
728 729 730 731
        if (!this.cachedNewCell) {
          console.log(event, annotation)
          this.mobileSelectedCell = annotation
        }
christianrhansen's avatar
christianrhansen committed
732
      },
733
      async mobileCellMove (annotation, _x, _y) {
734 735
        this.$el.scrollLeft = this.$el.scrollLeft + (this.gridDimensions.full.cell.width * _x)

736 737
        let
          parsed = annotation.target.selector.parse(),
738
          sliced = parsed.xywh.slice(0, 4),
739
          x = sliced[0],
740 741 742 743 744 745 746 747 748 749 750 751 752 753 754
          y = sliced[1],
          w = sliced[2],
          h = sliced[3]

        // ----- 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

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

755 756 757 758 759 760 761 762
        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 }
          }
        }])
      },
763
      async mobileCellResize (annotation, _w, _h) {
764 765 766
        let
          parsed = annotation.target.selector.parse(),
          [x, y, w, h] = parsed.xywh
767 768 769 770 771 772 773 774 775 776 777 778

        // ----- 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

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

779 780 781 782 783 784 785 786
        const value = { xywh: [x, y, w, h] }
        annotation.target.selector.value = value

        await this.$store.dispatch('annotations/patch', [annotation.id, { target: { selector: { value } } }])
      },
      setEditMode (mode) {
        this.$store.commit('mosys/setEditMode', mode)
      },
787 788 789 790
      //
      // DATA
      //

Anton's avatar
Intial  
Anton committed
791 792 793
      async fetchData () {
        if (this.gridUuid) {
          this.grid = await this.$store.dispatch('maps/get', this.gridUuid)
794 795 796 797 798 799 800 801
          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
802
          this.updateGridDimensions()
803 804 805 806 807 808
          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
809 810
        }
      },
811 812 813
      async updateGridMetadataStore () {
        await this.$store.dispatch('maps/patch', [this.grid.id, { config: this.grid.config }])
        this.updateGridDimensions()
Anton's avatar
Intial  
Anton committed
814
      },
815 816 817 818 819
      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
820 821
          // return _this.cells.find(c => c._uuid === k)
          return _this.annotations.find(c => c._uuid === k)
822 823
        })
        this.$store.commit('mosys/setSelectedCells', selectedCells)
Anton's avatar
Intial  
Anton committed
824
      },
Mathias Bär's avatar
Mathias Bär committed
825 826 827 828 829 830 831 832
      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)
        })
833 834 835 836 837 838 839
        /*
        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
840 841
        this.$store.commit('mosys/setEditingCells', editingCells)
      },
842 843 844 845 846
      updateAnnotationUIStates () {
        let newAnnotationUIStates = {}
        this.annotations.forEach(a => {
          newAnnotationUIStates[a._uuid] = {
            selected: false,
Mathias Bär's avatar
Mathias Bär committed
847
            editing: false,
848
            beingResized: false,
Mathias Bär's avatar
Mathias Bär committed
849
            beginDragged: false,
850
            annotation: a
Anton's avatar
Intial  
Anton committed
851
          }
852 853
        })
        this.annotationUIStates = newAnnotationUIStates
Anton's avatar
Intial  
Anton committed
854
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
855
        this.updateEditingCells()
856
      },
857 858 859 860 861

      //
      // GRID DRAG & DROP HANDLERS
      //

862
      async handleGridDragOver (event) {
Anton's avatar
Intial  
Anton committed
863 864 865
        let _this = this
        if (this.resizingGrid) {
          const position = this.getGridPositionForEvent(event)
866 867
          this.grid.config.ratio = position.ox / (position.oy * 1.0)
          await this.updateGridMetadataStore()
Anton's avatar
Intial  
Anton committed
868 869
        }
        else {
870 871
          let annotation = this.annotations.filter(annotation => {
            if (!_this.annotationUIStates[annotation._uuid]) return false
Mathias Bär's avatar
Mathias Bär committed
872
            return _this.annotationUIStates[annotation._uuid].beingDragged ||
873
              _this.annotationUIStates[annotation._uuid].beingResized
Anton's avatar
Intial  
Anton committed
874 875
          }).shift()
          let offset, position
876 877 878 879
          if (!annotation) {
            annotation = {
              target: this.grid.get2DArea([1, 1], [1, 1])
            }
Anton's avatar
Intial  
Anton committed
880 881 882
            position = this.getGridPositionForEvent(event)
          }
          else {
883
            offset = this.annotationUIStates[annotation._uuid].draggingOffset
Anton's avatar
Intial  
Anton committed
884 885
            position = this.getGridPositionForEvent(event, offset)
          }
886 887
          if (!this.tmpObjects.length) this.tmpObjects.push(annotation)
          const parsed = annotation.target.selector.parse()
Anton's avatar
Intial  
Anton committed
888
          if (event.dataTransfer.types.includes('text/plain')) {
889 890
            parsed.xywh[0] = position.x
            parsed.xywh[1] = position.y
Anton's avatar
Intial  
Anton committed
891 892 893
            event.preventDefault()
          }
          else {
894 895
            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
896
          }
897
          annotation.target.selector.value = parsed
Anton's avatar
Intial  
Anton committed
898 899 900
        }
      },
      handleGridDragEnd () {
901
        this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
902
      },
903
      async handleGridDrop (event) {
904 905 906 907 908
        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)
909 910
        if (dropData) {
          dropData = JSON.parse(dropData)
911
          let annotation = this.annotations.find(a => a.id === dropData.id)
912 913 914 915 916
          const { x, y } = this.getGridPositionForEvent(
            event,
            annotation ? this.annotationUIStates[annotation._uuid].draggingOffset : undefined
          )
          if (annotation) {
917 918 919
            const
              parsed = annotation.target.selector.parse(),
              target = this.grid.get2DArea([x, y], parsed.xywh.slice(2))
920 921 922 923 924 925
            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
926 927
          }
          else {
928 929
            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])
930 931 932 933 934 935 936 937 938 939 940
            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
                }
              },
941 942
              // target: this.grid.get2DArea([x, y], [1, 1])
              target: test
943
            })
944
            this.annotations.push(annotation)
Anton's avatar
Anton committed
945
            this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
946
          }
947

948
          this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
949 950
          event.preventDefault()
        }
951
        this.clearTempCell()
Anton's avatar
Intial  
Anton committed
952
      },
953 954 955 956

      //
      // CELL DRAG & DROP HANDLERS
      //
Mathias Bär's avatar
Mathias Bär committed
957 958 959
      handleCellEditClick (event, cell) {
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
960
        this.$root.$emit('mosys_saveScrollPosition')
Mathias Bär's avatar
Mathias Bär committed
961
      },
962 963 964 965 966
      handleCellClick (event, cell) {
        this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
        this.updateSelectedCells()
      },
      handleCellDragStart (event, annotation) {
christianrhansen's avatar
christianrhansen committed
967
        console.log('§§§§§§§§', annotation)
968 969 970 971 972 973 974 975 976 977 978 979
        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
980
          }
981
          this.tmpObjects.push(annotation)
982 983 984
        }
      },
      handleCellDragEnd (event, annotation) {
985 986 987
        if (!this.mobile) {
          this.annotationUIStates[annotation._uuid].beingDragged = false
        }
988 989 990 991
      },
      async handleCellContextMenuDelete (event, annotation) {
        this.annotationUIStates[annotation._uuid].selected = false
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
992
        this.updateEditingCells()
993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035
        await this.$store.dispatch('cells/delete', annotation.body.source.id)
        await this.$store.dispatch('annotations/delete', annotation.id)
        this.annotations = this.annotations.filter(a => a.id !== annotation.id)
      },

      //
      // GRID RESIZE HANDLERS

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

      //
      // CELL RESIZE HANDLERS
      //

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

      //
      // CELL CONTEXT MENU
      //

      handleCellContextMenu (event) {
Anton's avatar
Intial  
Anton committed
1036 1037
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
      },
1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054
      async handleCellContextMenuEditCSS (event, annotation) {
        try {
          let styleClass = await this.$q.dialog({
            title: this.$t('forms.edit_css_class.title'),
            ok: this.$t('buttons.set_css_class'),
            cancel: this.$t('buttons.cancel'),
            prompt: {
              model: annotation.styleClass,
              type: 'text'
            }
          })
          if (styleClass) {
            if (!styleClass.length) styleClass = undefined
            else if (styleClass.indexOf('.') === 0) styleClass = styleClass.substr(1)
          }
          annotation.styleClass = styleClass
          this.$store.dispatch('annotations/patch', [annotation._uuid, { target: { styleClass: styleClass || null } }])
Anton's avatar
Intial  
Anton committed
1055
        }
1056 1057 1058 1059 1060 1061 1062 1063 1064
        catch (e) { /* dialog canceled */ }
      },

      //
      // GRID CONTEXT MENU
      //

      handleGridContextMenu (event) {
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
Anton's avatar
Intial  
Anton committed
1065 1066 1067
      },
      async handleGridContextMenuInsertColumnLeft () {
        let position = this.contextMenuClickPosition
1068 1069 1070 1071 1072 1073 1074 1075
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[0] >= position.x) {
            parsed.xywh[0] += 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
1076 1077
          }
        }
1078
        this.grid.config.columns += 1
Anton's avatar
Intial  
Anton committed
1079 1080 1081 1082
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteColumn () {
        let position = this.contextMenuClickPosition
1083 1084 1085 1086 1087 1088 1089 1090
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[0] > position.x) {
            parsed.xywh[0] -= 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
1091 1092
          }
        }
1093
        this.grid.config.columns -= 1
Anton's avatar
Intial  
Anton committed
1094 1095 1096 1097
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuInsertRowAbove () {
        let position = this.contextMenuClickPosition
1098 1099 1100 1101 1102 1103 1104 1105
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[1] >= position.y) {
            parsed.xywh[1] += 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
1106 1107
          }