GridEditor.vue 49 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
        template(v-if="mobileTempCell.show && cachedNewCell")
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
          cell-handler-mobile.absolute(
149
          v-if="!handlerNewCell.resize.pushed",
150 151 152
          @onIntersectionChange="intersectionChanged",
          :element="'move'",
          v-touch-pan="handleMoveCell",
christianrhansen's avatar
christianrhansen committed
153
          :style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}",
154
          :class="[{'pushed': !handlerNewCell.move.pushed}]")
christianrhansen's avatar
christianrhansen committed
155 156
            q-icon.self-center.rotate-180(name="open_with", size="22px")

157
          //----- (temp)
158
          //----- (when main move handler is outside of viewport)
159
          cell-handler-mobile.temp.fixed(
160
          v-touch-pan="handleMoveCell",
161
          :class="[(!mobileTempCell.onGrid || tempHandler.move.visibility || handlerNewCell.resize.pushed || handlerNewCell.move.pushed ? 'hide': 'show'), (tempHandler.move.side === 'left' ? 'left-side' : 'right-side')]",
162
          :style="{top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
163 164
            q-icon.self-center.rotate-180(name="open_with", size="22px")

165 166
          //--------------------------------------------------------------------------------------------- resize handler
          //----- (main)
167
            v-if="mobileTempCell.onGrid && !handlerNewCell.move.pushed",
168
          cell-handler-mobile.absolute(
169
          v-if="!handlerNewCell.move.pushed",
170 171 172
          @onIntersectionChange="intersectionChanged",
          :element="'resize'",
          v-touch-pan="handleResizeCell",
173 174
          :style="{left: handlerNewCell.resize.x - 20 + 'px', top: handlerNewCell.resize.y - 20 + 'px'}",
          :class="{'pushed': !handlerNewCell.resize.pushed}")
175
            q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
176

177 178
          //----- (temp)
          //----- (when main resize handler is outside of viewport)
179
          cell-handler-mobile.temp.fixed(
180
          v-touch-pan="handleResizeCell",
181
          :class="[(!mobileTempCell.onGrid || tempHandler.resize.visibility || handlerNewCell.move.pushed || handlerNewCell.resize.pushed ? 'hide': 'show'), (tempHandler.resize.side === 'left' ? 'left-side' : 'right-side')]",
182
          :style="{top: handlerNewCell.resize.y + 59 - 20 + 'px'}",)
183 184
            q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")

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

Mathias Bär's avatar
Mathias Bär committed
195
      //template(v-if="!isMobile")
196 197 198 199 200
        .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
201
      //template(v-if="isMobile")
Mathias Bär's avatar
Mathias Bär committed
202 203 204 205 206
        .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
207

christianrhansen's avatar
christianrhansen committed
208
    // ------------------------------------------------------------------------------------------ edit box (mobile only)
209

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

216
      //------------------------- buttons
217 218
      // .row.text-dark(style="background-color: rgba(0, 0, 0, .2);")
      .row.text-dark(style="background-color: rgba(255, 150, 150, .3);")
219 220 221

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

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

christianrhansen's avatar
christianrhansen committed
232
      //q-item-separator.q-ma-none
233 234 235 236 237 238

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

<script>
  import Cell from './Cell'
275 276
  import { userHasFeature } from 'mbjs-quasar/src/lib'
  import { mapGetters } from 'vuex'
277
  import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
278
  import CellHandlerMobile from './CellHandlerMobile'
Anton's avatar
Intial  
Anton committed
279 280 281 282 283 284

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

  export default {
    components: {
285
      Cell,
286 287
      GridEditorEditingCellsMobile,
      CellHandlerMobile
Anton's avatar
Intial  
Anton committed
288
    },
289
    props: ['gridUuid', 'tabsAreOpen'],
Anton's avatar
Intial  
Anton committed
290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314
    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,
315
        annotations: undefined,
316
        tmpObjects: [],
317
        annotationUIStates: {},
Anton's avatar
Anton committed
318
        gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 },
Anton's avatar
Intial  
Anton committed
319
        contextMenuClickPosition: {},
320
        resizingGrid: false,
christianrhansen's avatar
christianrhansen committed
321
        mobileSelectedCell: undefined,
322
        touch: {position: {top: undefined, left: undefined}},
323
        isMobile: this.$q.platform.is.mobile,
324 325 326 327 328 329 330 331 332 333 334 335
        mobileTempCell: {
          x: 0,
          y: 0,
          ox: 0,
          oy: 0,
          width: 1,
          height: 1,
          left: 0,
          show: false,
          onGrid: false,
          button: false
        },
336
        slide: undefined,
337
        modal: false,
338
        carousel: {visibility: false, icon: 'open_with', slide: 0},
christianrhansen's avatar
christianrhansen committed
339
        // cursor: {x: undefined, y: undefined},
christianrhansen's avatar
christianrhansen committed
340
        handlerNewCell: {
341
          size: {width: 40, height: 40},
342
          move: {x: 20, y: undefined, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined, dataLeft: undefined},
christianrhansen's avatar
christianrhansen committed
343
          resize: {x: undefined, y: undefined, pushed: false, pos: undefined}
344
        },
345
        handlerNewCellTemp: {visibility: true, left: 0},
346
        tempHandler: {
347 348
          move: {left: undefined, visibility: false, side: undefined, intersectingMainHandler: undefined},
          resize: {left: undefined, visibility: false, side: undefined, intersectingMainHandler: undefined}
349
        }
Anton's avatar
Intial  
Anton committed
350 351
      }
    },
352 353
    computed: {
      ...mapGetters({
christianrhansen's avatar
christianrhansen committed
354
        cachedNewCell: 'mosys/getNewCell',
355
        user: 'auth/getUserState',
356
        // isMobile: 'globalSettings/getIsMobile',
Mathias Bär's avatar
Mathias Bär committed
357
        // editingCells: 'mosys/getEditingCells'
358
        showEditingCells: 'mosys/getShowEditingCells',
359 360
        scrollPositionCache: 'mosys/getScrollPositionCache',
        editMode: 'mosys/getEditMode'
361
      }),
362 363 364 365 366
      /*
      handlerPositionMove (val) {
        return val * 100
      },
      */
367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388
      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
389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404
      },
      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>")`
        }
405 406
      }
    },
Anton's avatar
Intial  
Anton committed
407 408
    async mounted () {
      await this.fetchData()
409
      this.resetScrollPosition()
410 411 412
    },
    beforeDestroy () {
      this.observer.disconnect()
Anton's avatar
Intial  
Anton committed
413 414
    },
    watch: {
415 416 417
      handlerPositionMove (val) {
        console.log('WATCG', val)
      },
418 419 420 421 422 423 424 425 426 427
      slide (val) {
        let icon
        switch (val) {
        case 0:
          icon = 'open_with'
          break
        case 1:
          icon = 'photo_size_select_small'
          break
        case 2:
428
          icon = 'more_horiz'
429 430 431 432 433
          break
        default:
          icon = 'open_with'
          break
        }
434 435 436
        // this.carousel.slide = val
        // this.carousel.icon = icon
        this.carousel = {slide: val, icon: icon, visibility: this.carousel.visibility}
437
      },
Anton's avatar
Anton committed
438
      annotations () {
439
        this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
440 441 442 443 444 445
      },
      gridMetadata () {
        this.updateGridDimensions()
      },
      async gridUuid () {
        await this.fetchData()
Mathias Bär's avatar
Mathias Bär committed
446 447
      },
      showEditingCells (val) {
448
        // console.log('show editing cells', val)
Mathias Bär's avatar
Mathias Bär committed
449 450 451
        if (val === false) {
          this.updateAnnotationUIStates()
        }
452 453 454
      },
      tabsAreOpen () {
        this.resetScrollPosition()
Anton's avatar
Intial  
Anton committed
455 456 457
      }
    },
    methods: {
458
      intersectionChanged (obj) {
459 460
        //
        // -------------------- move
461
        if (obj.element === 'move') {
462
          this.tempHandler.move.intersectingMainHandler = obj.intersecting
463
          this.tempHandler.move.visibility = obj.intersecting
464

christianrhansen's avatar
christianrhansen committed
465
          // behind left side
466
          if (Math.sign(obj.offsetLeft) < 0) {
467 468
            // this.tempHandler.move.left = 4
            this.tempHandler.move.side = 'left'
469
          }
christianrhansen's avatar
christianrhansen committed
470
          // visible
471
          else if (Math.sign(obj.offsetLeft) === 0) {
christianrhansen's avatar
christianrhansen committed
472
            this.tempHandler.resize.visibility = true
473
          }
christianrhansen's avatar
christianrhansen committed
474
          // behind right side
475
          else if (Math.sign(obj.offsetLeft) === 1) {
476 477
            // this.tempHandler.move.left = window.innerWidth - 40 - 4
            this.tempHandler.move.side = 'right'
478
          }
479
        }
480

481
        // -------------------- resize
482
        if (obj.element === 'resize') {
483
          this.tempHandler.resize.intersectingMainHandler = obj.intersecting
christianrhansen's avatar
christianrhansen committed
484
          this.tempHandler.resize.visibility = obj.intersecting
485

christianrhansen's avatar
christianrhansen committed
486 487
          // on left side
          if (Math.sign(obj.offsetLeft) === -1) {
488 489
            // this.tempHandler.resize.left = 4
            this.tempHandler.resize.side = 'left'
490
          }
christianrhansen's avatar
christianrhansen committed
491 492
          // visible
          else if (Math.sign(obj.offsetLeft) === 0) {
493
          }
christianrhansen's avatar
christianrhansen committed
494 495
          // on right side
          else if (Math.sign(obj.offsetLeft) === 1) {
496 497
            // this.tempHandler.resize.left = window.innerWidth - 40 - 4
            this.tempHandler.resize.side = 'right'
christianrhansen's avatar
christianrhansen committed
498
            // if (this.tempHandler.move.visibility === false) this.tempHandler.resize.visibility = true
499
          }
500 501
        }
      },
christianrhansen's avatar
christianrhansen committed
502
      handleMoveCell (obj) {
503
        this.handlerNewCellTemp.left = -100
christianrhansen's avatar
christianrhansen committed
504 505
        this.handlerNewCell.move.x = obj.position.left
        this.handlerNewCell.move.y = obj.position.top
506

christianrhansen's avatar
christianrhansen committed
507 508 509 510 511
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
christianrhansen's avatar
christianrhansen committed
512
          this.handlerNewCell.move.pushed = true
christianrhansen's avatar
christianrhansen committed
513
        }
514

christianrhansen's avatar
christianrhansen committed
515 516 517
        this.mobileTempCell.x = res.x
        this.mobileTempCell.y = res.y

518 519 520
        this.mobileTempCell.ox = res.ox
        this.mobileTempCell.oy = res.oy

christianrhansen's avatar
christianrhansen committed
521 522
        this.handlerNewCell.move.x = res.ox
        this.handlerNewCell.move.y = res.oy
523

christianrhansen's avatar
christianrhansen committed
524 525 526
        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
527
          this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
christianrhansen's avatar
christianrhansen committed
528 529 530 531
          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
532 533 534

          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
535 536
        }
      },
christianrhansen's avatar
christianrhansen committed
537
      handleResizeCell (obj) {
christianrhansen's avatar
christianrhansen committed
538
        // this.cursor = {x: obj.position.left, y: obj.position.top}
539 540 541 542
        // 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

543 544 545 546 547 548
        // ---> panGrid
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
549
          this.handlerNewCell.resize.pushed = true
550 551 552 553 554
        }

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

555 556 557
        this.handlerNewCell.resize.x = res.ox
        this.handlerNewCell.resize.y = res.oy

558 559 560
        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
561
          this.handlerNewCell.resize.pushed = false
562 563
          // this.addMobileCell(obj)
          // this.mobileTempCell.show = false
564 565
          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
566 567
        }
      },
568 569 570 571
      clearCachedCell () {
        this.$store.commit('mosys/cacheNewCell', undefined)
        this.clearTempCell()
      },
572 573 574 575
      handleCellInfoTouch (event, annotation) {
        this.touchMobileCell(event, annotation)
        this.handleModal()
      },
576 577 578 579
      getCarouselIcon (val) {
        console.log(val)
      },
      carouselVisibility () {
580 581 582 583
        console.log(this.carousel.slide)
        if (this.$refs.carousel) {
          this.$refs.carousel.goToSlide(this.carousel.slide)
        }
584 585
        this.carousel.visibility = !this.carousel.visibility
      },
586 587 588
      handleModal () {
        this.modal = !this.modal
      },
589
      clearTempCell () {
590
        this.mobileTempCell = {x: undefined, y: undefined, width: undefined, height: undefined, onGrid: false, button: false}
591
      },
592
      panGrid (obj) {
593
        if (this.cachedNewCell && !this.mobileTempCell.onGrid) {
594
          // console.log('hhhhhhhhhhhhhhhhh', obj)
595 596 597 598
          let res = this.getGridPositionForEvent(obj)

          if (obj.isFirst) {
            this.mobileTempCell.show = true
599
            this.mobileTempCell.button = false
600 601 602 603 604 605 606 607
            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) {
608
            this.mobileTempCell.onGrid = true
609
            this.mobileTempCell.button = true
610 611
            // this.addMobileCell(obj)
            // this.mobileTempCell.show = false
christianrhansen's avatar
christianrhansen committed
612 613
            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
614 615 616

            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
617
          }
618
        }
619
      },
620
      async cellHold (event, annotation) {
621 622
        this.$store.commit('mosys/setEditingCells', '')

623
        this.$q.notify({
624
          message: 'Copied.',
625
          color: 'dark',
626 627
          textColor: 'white',
          position: 'bottom-right'
628 629 630 631 632 633 634 635 636 637
        })

        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
638 639
      moveCachedCell (obj) {
        this.touch.position = {top: obj.position.top, left: obj.position.left}
640 641 642 643 644 645 646 647 648
        /*
        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
649
      },
650 651
      addMobileCell (event) {
        // console.log('addMobileCell()', event, annotation)
christianrhansen's avatar
christianrhansen committed
652
        if (this.cachedNewCell) {
653
          this.handleGridDrop(event)
christianrhansen's avatar
christianrhansen committed
654
          this.$store.commit('mosys/cacheNewCell', undefined)
655 656
          this.$q.notify({
            message: 'Cell was added.',
657 658 659
            color: 'dark',
            position: 'center',
            timeout: 50
660
          })
christianrhansen's avatar
christianrhansen committed
661 662
        }
      },
663 664 665 666 667 668 669 670 671 672
      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
673
      handleCellTouch (event, annotation) {
674 675 676 677
        if (!this.cachedNewCell) {
          console.log(event, annotation)
          this.mobileSelectedCell = annotation
        }
christianrhansen's avatar
christianrhansen committed
678
      },
679
      async mobileCellMove (annotation, _x, _y) {
680 681
        this.$el.scrollLeft = this.$el.scrollLeft + (this.gridDimensions.full.cell.width * _x)

682 683
        let
          parsed = annotation.target.selector.parse(),
684
          sliced = parsed.xywh.slice(0, 4),
685
          x = sliced[0],
686 687 688 689 690 691 692 693 694 695 696 697 698 699 700
          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

701 702 703 704 705 706 707 708
        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 }
          }
        }])
      },
709
      async mobileCellResize (annotation, _w, _h) {
710 711 712
        let
          parsed = annotation.target.selector.parse(),
          [x, y, w, h] = parsed.xywh
713 714 715 716 717 718 719 720 721 722 723 724

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

725 726 727 728 729 730 731 732
        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)
      },
733 734 735 736
      //
      // DATA
      //

Anton's avatar
Intial  
Anton committed
737 738 739
      async fetchData () {
        if (this.gridUuid) {
          this.grid = await this.$store.dispatch('maps/get', this.gridUuid)
740 741 742 743 744 745 746 747
          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
748
          this.updateGridDimensions()
749 750 751 752 753 754
          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
755 756
        }
      },
757 758 759
      async updateGridMetadataStore () {
        await this.$store.dispatch('maps/patch', [this.grid.id, { config: this.grid.config }])
        this.updateGridDimensions()
Anton's avatar
Intial  
Anton committed
760
      },
761 762 763 764 765
      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
766 767
          // return _this.cells.find(c => c._uuid === k)
          return _this.annotations.find(c => c._uuid === k)
768 769
        })
        this.$store.commit('mosys/setSelectedCells', selectedCells)
Anton's avatar
Intial  
Anton committed
770
      },
Mathias Bär's avatar
Mathias Bär committed
771 772 773 774 775 776 777 778
      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)
        })
779 780 781 782 783 784 785
        /*
        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
786 787
        this.$store.commit('mosys/setEditingCells', editingCells)
      },
788 789 790 791 792
      updateAnnotationUIStates () {
        let newAnnotationUIStates = {}
        this.annotations.forEach(a => {
          newAnnotationUIStates[a._uuid] = {
            selected: false,
Mathias Bär's avatar
Mathias Bär committed
793
            editing: false,
794
            beingResized: false,
Mathias Bär's avatar
Mathias Bär committed
795
            beginDragged: false,
796
            annotation: a
Anton's avatar
Intial  
Anton committed
797
          }
798 799
        })
        this.annotationUIStates = newAnnotationUIStates
Anton's avatar
Intial  
Anton committed
800
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
801
        this.updateEditingCells()
802
      },
803 804 805 806 807

      //
      // GRID DRAG & DROP HANDLERS
      //

808
      async handleGridDragOver (event) {
Anton's avatar
Intial  
Anton committed
809 810 811
        let _this = this
        if (this.resizingGrid) {
          const position = this.getGridPositionForEvent(event)
812 813
          this.grid.config.ratio = position.ox / (position.oy * 1.0)
          await this.updateGridMetadataStore()
Anton's avatar
Intial  
Anton committed
814 815
        }
        else {
816 817
          let annotation = this.annotations.filter(annotation => {
            if (!_this.annotationUIStates[annotation._uuid]) return false
Mathias Bär's avatar
Mathias Bär committed
818
            return _this.annotationUIStates[annotation._uuid].beingDragged ||
819
              _this.annotationUIStates[annotation._uuid].beingResized
Anton's avatar
Intial  
Anton committed
820 821
          }).shift()
          let offset, position
822 823 824 825
          if (!annotation) {
            annotation = {
              target: this.grid.get2DArea([1, 1], [1, 1])
            }
Anton's avatar
Intial  
Anton committed
826 827 828
            position = this.getGridPositionForEvent(event)
          }
          else {
829
            offset = this.annotationUIStates[annotation._uuid].draggingOffset
Anton's avatar
Intial  
Anton committed
830 831
            position = this.getGridPositionForEvent(event, offset)
          }
832 833
          if (!this.tmpObjects.length) this.tmpObjects.push(annotation)
          const parsed = annotation.target.selector.parse()
Anton's avatar
Intial  
Anton committed
834
          if (event.dataTransfer.types.includes('text/plain')) {
835 836
            parsed.xywh[0] = position.x
            parsed.xywh[1] = position.y
Anton's avatar
Intial  
Anton committed
837 838 839
            event.preventDefault()
          }
          else {
840 841
            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
842
          }
843
          annotation.target.selector.value = parsed
Anton's avatar
Intial  
Anton committed
844 845 846
        }
      },
      handleGridDragEnd () {
847
        this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
848
      },
849
      async handleGridDrop (event) {
850 851 852 853 854
        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)
855 856
        if (dropData) {
          dropData = JSON.parse(dropData)
857
          let annotation = this.annotations.find(a => a.id === dropData.id)
858 859 860 861 862
          const { x, y } = this.getGridPositionForEvent(
            event,
            annotation ? this.annotationUIStates[annotation._uuid].draggingOffset : undefined
          )
          if (annotation) {
863 864 865
            const
              parsed = annotation.target.selector.parse(),
              target = this.grid.get2DArea([x, y], parsed.xywh.slice(2))
866 867 868 869 870 871
            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
872 873
          }
          else {
874 875
            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])
876 877 878 879 880 881 882 883 884 885 886
            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
                }
              },
887 888
              // target: this.grid.get2DArea([x, y], [1, 1])
              target: test
889
            })
890
            this.annotations.push(annotation)
Anton's avatar
Anton committed
891
            this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
892
          }
893

894
          this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
895 896
          event.preventDefault()
        }
897
        this.clearTempCell()
Anton's avatar
Intial  
Anton committed
898
      },
899 900 901 902

      //
      // CELL DRAG & DROP HANDLERS
      //
Mathias Bär's avatar
Mathias Bär committed
903 904 905
      handleCellEditClick (event, cell) {
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
906
        this.$root.$emit('mosys_saveScrollPosition')
Mathias Bär's avatar
Mathias Bär committed
907
      },
908 909 910 911 912
      handleCellClick (event, cell) {
        this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
        this.updateSelectedCells()
      },
      handleCellDragStart (event, annotation) {
christianrhansen's avatar
christianrhansen committed
913
        console.log('§§§§§§§§', annotation)
914 915 916 917 918 919 920 921 922 923 924 925
        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
926
          }
927
          this.tmpObjects.push(annotation)
928 929 930
        }
      },
      handleCellDragEnd (event, annotation) {
931 932 933
        if (!this.mobile) {
          this.annotationUIStates[annotation._uuid].beingDragged = false
        }
934 935 936 937
      },
      async handleCellContextMenuDelete (event, annotation) {
        this.annotationUIStates[annotation._uuid].selected = false
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
938
        this.updateEditingCells()
939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981
        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
982 983
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
      },
984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000
      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
1001
        }
1002 1003 1004 1005 1006 1007 1008 1009 1010
        catch (e) { /* dialog canceled */ }
      },

      //
      // GRID CONTEXT MENU
      //

      handleGridContextMenu (event) {
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
Anton's avatar
Intial  
Anton committed
1011 1012 1013
      },
      async handleGridContextMenuInsertColumnLeft () {
        let position = this.contextMenuClickPosition
1014 1015 1016 1017 1018 1019 1020 1021
        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
1022 1023
          }
        }
1024
        this.grid.config.columns += 1
Anton's avatar
Intial  
Anton committed
1025 1026 1027 1028
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteColumn () {
        let position = this.contextMenuClickPosition
1029 1030 1031 1032 1033 1034 1035 1036
        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
1037 1038
          }
        }
1039
        this.grid.config.columns -= 1
Anton's avatar
Intial  
Anton committed
1040 1041 1042 1043
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuInsertRowAbove () {
        let position = this.contextMenuClickPosition
1044 1045 1046 1047 1048 1049 1050 1051
        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
1052 1053
          }
        }
1054
        this.grid.config.rows += 1
Anton's avatar
Intial  
Anton committed
1055 1056 1057 1058
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteRow () {
        let position = this.contextMenuClickPosition
1059 1060 1061 1062 1063 1064 1065 1066
        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
1067 1068
          }
        }
1069
        this.grid.config.rows -= 1
Anton's avatar
Intial  
Anton committed
1070 1071
        await this.updateGridMetadataStore()
      },
1072 1073 1074 1075 1076

      //
      // NAVIGATION
      //

Anton's avatar
Intial  
Anton committed
1077
      handleGridButtonClickEdit () {
1078
        this.$store.commit('mosys/toggleSources')
Anton's avatar
Intial  
Anton committed
1079
      },
1080 1081 1082 1083 1084

      //
      // GRID HELPERS
      //

Anton's avatar
Anton committed
1085
      getGridPositionForEvent (event, offset = { x: 0, y: 0 }) {
1086
        // console.log('###', event)
Anton's avatar
Anton committed
1087
        offset = { x: 0, y: 0 } // TODO: remove quick fix
1088 1089 1090 1091 1092 1093 1094

        let _clientX, _clientY

        if (event.clientX && event.clientY) {
          _clientX = event.clientX
          _clientY = event.clientY
        }
1095
        if (event.position) {
1096 1097 1098 1099
          _clientX = event.position.left
          _clientY = event.position.top
        }

Anton's avatar
Intial  
Anton committed
1100
        const elContainerBoundingBox = this.$el.getBoundingClientRect()
1101