GridEditor.vue 48.9 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
          //----- move handler (top left)
christianrhansen's avatar
christianrhansen committed
146
          // :style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}")
147
          // :class="[handlerNewCell.move.inViewport ? 'absolute' : 'fixed', {'pushed': !handlerNewCell.move.pushed}]")
christianrhansen's avatar
christianrhansen committed
148
          .handler-new-cell.move.absolute.text-dark.justify-center.row.bg-white.shadow-6(
149
          v-if="mobileTempCell.onGrid && !handlerNewCell.resize.pushed",
christianrhansen's avatar
christianrhansen committed
150
          v-touch-pan="handleMoveCell", round, flat,
christianrhansen's avatar
christianrhansen committed
151
          :style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}",
152
          :class="[{'pushed': !handlerNewCell.move.pushed}]")
153
            //:style="setHandlerStyle()")
christianrhansen's avatar
christianrhansen committed
154 155 156
            // q-icon.self-center.rotate-180(name="signal_cellular_4_bar", size="12px", style="margin-top: 2px;")
            q-icon.self-center.rotate-180(name="open_with", size="22px")

157 158 159 160 161 162
          .handler-new-cell.fixed.text-dark.justify-center.row.bg-white.shadow-6(
          v-touch-pan="handleMoveCell",
          :class="{'dummyButtonHide': !dummyButton.visibility}",
          :style="{left: dummyButton.left + 'px', top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
            q-icon.self-center.rotate-180(name="open_with", size="22px")

christianrhansen's avatar
christianrhansen committed
163
          //----- resize handler (bottom right)
164
          .handler-new-cell.resize.absolute.text-dark.justify-center.row.bg-white.shadow-6(
165
          v-if="mobileTempCell.onGrid && !handlerNewCell.move.pushed",
christianrhansen's avatar
christianrhansen committed
166
          v-touch-pan="handleResizeCell", round, flat,
167 168
          :style="{left: handlerNewCell.resize.x - 20 + 'px', top: handlerNewCell.resize.y - 20 + 'px'}",
          :class="{'pushed': !handlerNewCell.resize.pushed}")
169
            q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
170

christianrhansen's avatar
christianrhansen committed
171
      // ---------------------------------------------------------------------------------------------------------------
Anton's avatar
Intial  
Anton committed
172
      template(v-else)
173
        .cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
Anton's avatar
Intial  
Anton committed
174
          div.cell-item-resize-handle(
175 176 177 178 179
          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
180

Mathias Bär's avatar
Mathias Bär committed
181
      //template(v-if="!isMobile")
182 183 184 185 186
        .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
187
      //template(v-if="isMobile")
Mathias Bär's avatar
Mathias Bär committed
188 189 190 191 192
        .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
193

christianrhansen's avatar
christianrhansen committed
194
    // ------------------------------------------------------------------------------------------ edit box (mobile only)
195

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

202
      //------------------------- buttons
203 204
      // .row.text-dark(style="background-color: rgba(0, 0, 0, .2);")
      .row.text-dark(style="background-color: rgba(255, 150, 150, .3);")
205 206 207

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

212 213
        //----- toggle edit-box
        .col.text-right
christianrhansen's avatar
christianrhansen committed
214
          q-btn.q-py-none.q-pr-sm.q-mr-xs(@click="carouselVisibility()", flat, no-ripple)
christianrhansen's avatar
christianrhansen committed
215 216
            q-icon(v-if="carousel.visibility", name="keyboard_arrow_down")
            q-icon(v-else, name="keyboard_arrow_up")
217

christianrhansen's avatar
christianrhansen committed
218
      //q-item-separator.q-ma-none
219 220 221 222 223 224

      //------------------------- 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
225 226
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
227 228 229 230 231 232 233 234 235 236 237 238 239 240 241
          .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
242 243
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
244 245 246 247 248 249 250 251 252 253 254 255 256
          .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
257 258 259 260
</template>

<script>
  import Cell from './Cell'
261 262
  import { userHasFeature } from 'mbjs-quasar/src/lib'
  import { mapGetters } from 'vuex'
263
  import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
Anton's avatar
Intial  
Anton committed
264 265 266 267 268 269

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

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

      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

398
      */
399 400 401
      let observer = new IntersectionObserver(this.observerCallback)
      observer.observe(this.$refs.move)
      this.observer = observer
402 403 404
    },
    beforeDestroy () {
      this.observer.disconnect()
Anton's avatar
Intial  
Anton committed
405 406
    },
    watch: {
407 408 409 410 411 412 413 414 415 416
      slide (val) {
        let icon
        switch (val) {
        case 0:
          icon = 'open_with'
          break
        case 1:
          icon = 'photo_size_select_small'
          break
        case 2:
417
          icon = 'more_horiz'
418 419 420 421 422
          break
        default:
          icon = 'open_with'
          break
        }
423 424 425
        // this.carousel.slide = val
        // this.carousel.icon = icon
        this.carousel = {slide: val, icon: icon, visibility: this.carousel.visibility}
426
      },
Anton's avatar
Anton committed
427
      annotations () {
428
        this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
429 430 431 432 433 434
      },
      gridMetadata () {
        this.updateGridDimensions()
      },
      async gridUuid () {
        await this.fetchData()
Mathias Bär's avatar
Mathias Bär committed
435 436
      },
      showEditingCells (val) {
437
        // console.log('show editing cells', val)
Mathias Bär's avatar
Mathias Bär committed
438 439 440
        if (val === false) {
          this.updateAnnotationUIStates()
        }
441 442 443
      },
      tabsAreOpen () {
        this.resetScrollPosition()
Anton's avatar
Intial  
Anton committed
444 445 446
      }
    },
    methods: {
447
      setHandlerStyle () {
christianrhansen's avatar
christianrhansen committed
448
        let _handlerNewCell = this.handlerNewCell
449

christianrhansen's avatar
christianrhansen committed
450
        if (_handlerNewCell.move.pos.includes('absolute')) {
451 452 453
          return {
            'position': 'absolute',
            'left': this.mobileTempCell.left + 'px',
christianrhansen's avatar
christianrhansen committed
454
            'top': this.handlerNewCell.move.y - 20 + 'px'
455 456 457 458
          }
        }
        else {
          let side
christianrhansen's avatar
christianrhansen committed
459
          if (_handlerNewCell.move.pos.includes('left')) side = '0px'
460 461 462 463
          else side = 'calc(100vw - 40px)'
          return {
            'position': 'fixed',
            'left': side,
christianrhansen's avatar
christianrhansen committed
464
            'top': this.handlerNewCell.move.y - 20 + 59 + 'px'
465 466 467
          }
        }
      },
468 469
      // observerCallback (entries, observer) {
      observerCallback (entries) {
470 471 472 473 474 475 476 477 478 479 480 481 482 483
        let btn = entries[0]
        console.log(btn)
        // if (!_tempCell.isIntersecting) {
        if (btn.boundingClientRect.x < this.handlerNewCell.size.width) {
          console.log('outside')
          // this.handlerNewCell.move.inViewport = false
          // this.handlerNewCell.move.x = 20
        }
        else {
          console.log('INSIDE')
          // this.handlerNewCell.move.inViewport = true
          // this.handlerNewCell.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
        }
        /*
484
        let entryX = entries[0].boundingClientRect.x
christianrhansen's avatar
christianrhansen committed
485 486
        let _handlerNewCell = this.handlerNewCell
        let _handlerNewCellHalf = _handlerNewCell.size.width / 2
487 488 489 490

        console.log(this.mobileTempCell.ox)

        // ----- left
christianrhansen's avatar
christianrhansen committed
491 492
        if (entryX < _handlerNewCellHalf) {
          _handlerNewCell.move.pos = 'fixed on-left-side'
493 494 495
        }

        // ----- middle
christianrhansen's avatar
christianrhansen committed
496 497 498 499
        // if (entryX >= 20 && entryX <= window.innerWidth - 20) this.handlerNewCell.move.x = entryX
        if (entryX >= _handlerNewCellHalf && entryX <= window.innerWidth - _handlerNewCell.size.width) {
          _handlerNewCell.move.x = this.mobileTempCell.left
          _handlerNewCell.move.pos = 'absolute'
500 501 502
        }

        // ----- right
christianrhansen's avatar
christianrhansen committed
503 504
        if (entryX > window.innerWidth - _handlerNewCell.size.width) {
          _handlerNewCell.move.pos = 'fixed on-right-side'
505
        }
506
        */
507
      },
christianrhansen's avatar
christianrhansen committed
508
      handleMoveCell (obj) {
509
        this.dummyButton.left = -100
christianrhansen's avatar
christianrhansen committed
510 511
        this.handlerNewCell.move.x = obj.position.left
        this.handlerNewCell.move.y = obj.position.top
512

christianrhansen's avatar
christianrhansen committed
513 514 515 516 517
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
christianrhansen's avatar
christianrhansen committed
518
          this.handlerNewCell.move.pushed = true
christianrhansen's avatar
christianrhansen committed
519
        }
520

christianrhansen's avatar
christianrhansen committed
521 522 523
        this.mobileTempCell.x = res.x
        this.mobileTempCell.y = res.y

524 525 526
        this.mobileTempCell.ox = res.ox
        this.mobileTempCell.oy = res.oy

christianrhansen's avatar
christianrhansen committed
527 528
        this.handlerNewCell.move.x = res.ox
        this.handlerNewCell.move.y = res.oy
529

christianrhansen's avatar
christianrhansen committed
530 531 532
        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
533
          this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
christianrhansen's avatar
christianrhansen committed
534 535 536 537
          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
538 539 540

          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
541 542
        }
      },
christianrhansen's avatar
christianrhansen committed
543
      handleResizeCell (obj) {
christianrhansen's avatar
christianrhansen committed
544
        // this.cursor = {x: obj.position.left, y: obj.position.top}
545 546 547 548
        // 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

549 550 551 552 553 554
        // ---> panGrid
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
555
          this.handlerNewCell.resize.pushed = true
556 557 558 559 560
        }

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

561 562 563
        this.handlerNewCell.resize.x = res.ox
        this.handlerNewCell.resize.y = res.oy

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

          if (obj.isFirst) {
            this.mobileTempCell.show = true
605
            this.mobileTempCell.button = false
606 607 608 609 610 611 612 613
            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) {
614
            this.mobileTempCell.onGrid = true
615
            this.mobileTempCell.button = true
616 617
            // this.addMobileCell(obj)
            // this.mobileTempCell.show = false
christianrhansen's avatar
christianrhansen committed
618 619
            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
620 621 622

            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
623
          }
624
        }
625
      },
626
      async cellHold (event, annotation) {
627 628
        this.$store.commit('mosys/setEditingCells', '')

629
        this.$q.notify({
630
          message: 'Copied.',
631
          color: 'dark',
632 633
          textColor: 'white',
          position: 'bottom-right'
634 635 636 637 638 639 640 641 642 643
        })

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

688 689
        let
          parsed = annotation.target.selector.parse(),
690
          sliced = parsed.xywh.slice(0, 4),
691
          x = sliced[0],
692 693 694 695 696 697 698 699 700 701 702 703 704 705 706
          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

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

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

731 732 733 734 735 736 737 738
        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)
      },
739 740 741 742
      //
      // DATA
      //

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

      //
      // GRID DRAG & DROP HANDLERS
      //

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

900
          this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
901 902
          event.preventDefault()
        }
903
        this.clearTempCell()
Anton's avatar
Intial  
Anton committed
904
      },
905 906 907 908

      //
      // CELL DRAG & DROP HANDLERS
      //
Mathias Bär's avatar
Mathias Bär committed
909 910 911
      handleCellEditClick (event, cell) {
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
912
        this.$root.$emit('mosys_saveScrollPosition')
Mathias Bär's avatar
Mathias Bär committed
913
      },
914 915 916 917 918
      handleCellClick (event, cell) {
        this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
        this.updateSelectedCells()
      },
      handleCellDragStart (event, annotation) {
christianrhansen's avatar
christianrhansen committed
919
        console.log('§§§§§§§§', annotation)
920 921 922 923 924 925 926 927 928 929 930 931
        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
932
          }
933
          this.tmpObjects.push(annotation)
934 935 936
        }
      },
      handleCellDragEnd (event, annotation) {
937 938 939
        if (!this.mobile) {
          this.annotationUIStates[annotation._uuid].beingDragged = false
        }
940 941 942 943
      },
      async handleCellContextMenuDelete (event, annotation) {
        this.annotationUIStates[annotation._uuid].selected = false
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
944
        this.updateEditingCells()
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 982 983 984 985 986 987
        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
988 989
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
      },
990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006
      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
1007
        }
1008 1009 1010 1011 1012 1013 1014 1015 1016
        catch (e) { /* dialog canceled */ }
      },

      //
      // GRID CONTEXT MENU
      //

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

      //
      // NAVIGATION
      //

Anton's avatar
Intial  
Anton committed
1083
      handleGridButtonClickEdit () {
1084
        this.$store.commit('mosys/toggleSources')
Anton's avatar
Intial  
Anton committed
1085
      },
1086 1087 1088 1089 1090

      //
      // GRID HELPERS
      //

Anton's avatar
Anton committed
1091
      getGridPositionForEvent (event, offset = { x: 0, y: 0 }) {
1092
        // console.log('###', event)
Anton's avatar
Anton committed
1093
        offset = { x: 0, y: 0 } // TODO: remove quick fix
1094 1095 1096 1097 1098 1099 1100

        let _clientX, _clientY

        if (event.clientX && event.clientY) {
          _clientX = event.clientX
          _clientY = event.clientY
        }
1101
        if (event.position) {
1102 1103 1104 1105
          _clientX = event.position.left
          _clientY = event.position.top
        }

Anton's avatar
Intial  
Anton committed
1106
        const elContainerBoundingBox = this.$el.getBoundingClientRect()
1107 1108 1109 1110
        const ox = _clientX + this.$el.scrollLeft - elContainerBoundingBox.x - offset.x
        const oy = _clientY + this.$el.scrollTop - elContainerBoundingBox.y - offset.y
        // const ox = event.clientX + this.$el.scrollLeft - elContainerBoundingBox.x - offset.x
        // const oy = event.clientY + this.$el.scrollTop - elContainerBoundingBox.y - offset.y
Anton's avatar
Intial  
Anton committed
1111 1112
        const x = Math.ceil(ox / this.gridDimensions.full.cell.width)
        const y = Math.ceil(oy / this.gridDimensions.full.cell.height)
Anton's avatar
Anton committed
1113
        return { x: x, y: y, ox: ox, oy: oy }
Anton's avatar
Intial  
Anton committed
1114
      },
1115 1116 1117 1118
      updateGridDimensions (size) {
        if (!this.grid || !this.grid.config) return

        let elWidth = size ? size.width : this.$el.offsetWidth
1119
        // let elHeight = size ? size.height : this.$el.offsetHeight
1120
        let cellSizeRatio = this.grid.config.ratio
1121 1122
        // let gridHeight = elHeight
        let gridHeight = this.$el.offsetHeight
1123
        let cellHeight = gridHeight / this.grid.config.rows
Anton's avatar
Intial  
Anton committed
1124
        let cellWidth = elWidth / Math.round(elWidth / (cellHeight * cellSizeRatio))
1125
        console.log('cellWidth', cellWidth)
1126
        let gridWidth = cellWidth * this.grid.config.columns
Anton's avatar
Intial  
Anton committed
1127
        let cellsPerWidth = elWidth / cellWidth
1128
        let cellWidthMini = elWidth / this.grid.config.columns
Anton's avatar
Intial  
Anton committed
1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141
        let gridHeightMini = cellWidthMini / cellSizeRatio
        this.gridDimensions = {
          full: {
            width: gridWidth,
            height: gridHeight,
            cell: {
              width: cellWidth,
              height: cellHeight
            },
            cells_per_width: cellsPerWidth
          },
          mini: {
            width: elWidth,
1142
            height: gridHeightMini * this.grid.config.rows,
Anton's avatar
Intial  
Anton committed
1143 1144 1145 1146 1147 1148 1149
            cell: {
              width: cellWidthMini,
              height: gridHeightMini
            }
          }
        }
      },
1150 1151 1152
      mobileTempCellStyle (obj) {
        return {
          'grid-column-start': obj.x,