GridEditor.vue 52 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
    // ------------------------------------------------------------------------------------------------- new cell header
21 22
    #new-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}")
      q-item.q-pl-md.q-pr-xs.q-py-none.full-height
23
        q-item-main
24
          strong New {{ newCellType }}
25
        q-item-side
26 27 28 29 30 31
          //
            q-btn.bg-transparent.text-white.on-right(@click.native="clearCachedCell()", round, flat)
              q-icon(name="clear")

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

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

41
          q-btn.text-white.q-px-sm(@click="event => {handleCellInfoTouch(event, selectedCell.annotation)}", flat)
42 43
            q-icon(name="edit")

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

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

52
          //
53
            q-btn.text-white.q-px-sm(@click="", flat)
54 55 56 57 58 59 60 61 62
              q-icon(name="edit")

            q-btn.bg-transparent.text-white.q-pl-sm.q-pr-md(@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}",
            flat)
              q-icon(name="delete")

            span(style="border-left: 1px solid #555;")
              q-btn.bg-transparent.text-white.q-px-sm(@click="", flat)
                q-icon(name="clear")
63

64
    // ------------------------------------------------------------------------------------------------------------ grid
65
      @click="event => {addMobileCell(event)}",
66
    div.cell-grid.relative-position(
67
    v-touch-pan="panGrid",
68 69 70 71 72 73
    @dragenter="handleGridDragOver",
    @dragover="handleGridDragOver",
    @dragleave="handleGridDragEnd",
    @drop="handleGridDrop",
    @contextmenu="handleGridContextMenu",
    :style="gridStyle")
Anton's avatar
Intial  
Anton committed
74

75 76
      // context menu grid (desktop only)
      q-context-menu.desktop-only(ref="gridmenu")
Anton's avatar
Intial  
Anton committed
77 78
        q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
          q-item(
79 80 81 82 83
          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
84 85 86

      template(v-if="!resizingGrid")

87
        template(v-for="(annotation, index) in annotations")
christianrhansen's avatar
christianrhansen committed
88 89

          //----- cell
90
          // v-touch-hold="event => {cellHold(event, annotation)}",
Anton's avatar
Intial  
Anton committed
91
          .cell-item(
92 93 94 95 96 97 98 99 100 101
          v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
          draggable="true",
          @click.prevent="event => {handleCellTouch(event, annotation)}",
          @dragstart="event => {handleCellDragStart(event, annotation)}",
          @dragend="event => {handleCellDragEnd(event, annotation)}",
          @contextmenu="handleCellContextMenu",
          :style="getAnnotationStyle(annotation)",
          :class="getAnnotationClasses(annotation._uuid, 'cell-item')",
          :key="`cell-${index}`")

102
            //--------------------------------------------------------------------------------------- edit-/close-button
103
            // TODO: find a more elegant solution
104
            //-------------------------------------------------------------------------------------------------- desktop
105
            .desktop-only
Mathias Bär's avatar
Mathias Bär committed
106
              q-btn.edit-button.absolute-top-right(
107 108 109 110 111
              @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"
              )
112
            //--------------------------------------------------------------------------------------------------- mobile
113
            .mobile-only
114 115 116
              .edit-button.absolute.fit.bg-transparent(
              v-touch-hold="event => {handleCellInfoTouch(event, annotation)}",
              @click.prevent="event => {touchMobileCell(event, annotation)}")
117

118 119 120 121 122 123
                //
                  q-btn.absolute-top-right.text-dark.q-pa-none.q-mr-xs(
                  v-if="showEditingCells",
                  @click.prevent="event => {handleCellInfoTouch(event, annotation)}",
                  flat, round, size="sm", style="margin-top: 2px;")
                    q-icon(name="edit", size="20px")
christianrhansen's avatar
christianrhansen committed
124

125 126 127 128 129
              //----- 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
130

131
            //----- selecting cells disabled because it has no use currently
132 133 134 135 136 137 138 139
            // 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
140
            //----- resize-handler (desktop only)
141
            .desktop-only.cell-item-resize-handle(
142 143 144 145
            draggable="true",
            @dragstart="event => {handleCellResizerDragStart(event, annotation)}",
            @dragend="event => {handleCellResizerDragEnd(event, annotation)}",
            @dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
146
              q-icon.q-ma-xs(name="network cell")
147

148 149 150
            //----- context menu for cells (desktop only)
            // TODO: needs revision
            q-context-menu.desktop-only
151 152 153 154 155 156 157
              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
158

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

christianrhansen's avatar
christianrhansen committed
164
        //-------------------------------------------------------------------------------------- temporary cell (mobile)
165
        template(v-if="mobileTempCell.show && cachedNewCell")
166

167 168 169
          .cell-item.cell-item-tmp-mobile.row.justify-center.items-center(
          ref="_mobileTempCell",
          :style="mobileTempCellStyle(mobileTempCell)")
170

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

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

178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215
        //------------------------------------------------------------------------------------------------- move handler
        //----- (main)
        cell-handler-mobile.main-handler.shadow-1(
        v-if="!cellHandler.resize.pushed",
        @onIntersectionChange="intersectionChanged",
        :element="'move'",
        v-touch-pan="handleMoveCell",
        :style="{left: cellHandler.move.x - 20 + 'px', top: cellHandler.move.y - 20 + 'px'}",
        :class="[{'pushed': !cellHandler.move.pushed}, {'hide': !mobileTempCell.onGrid && !showEditingCells}]")
          q-icon.rotate-180(name="open_with", size="22px")

        //----- (temp)
        //----- (when main move handler is outside of viewport)
        cell-handler-mobile.temp-handler.shadow-1(
        v-touch-pan="handleMoveCell",
        :doubleTap="{el: $el, type: 'scroll', oLeft: mobileTempCell.left}",
        :class="[(!mobileTempCell.onGrid || tempHandler.move.intersectingMainHandler || cellHandler.resize.pushed || cellHandler.move.pushed ? 'hide': 'show'), (tempHandler.move.side === 'left' ? 'left-side' : 'right-side')]",
        :style="{top: cellHandler.move.y + 59 - 20 + 'px'}",)
          q-icon.rotate-180(name="open_with", size="22px")

        //----------------------------------------------------------------------------------------------- resize handler
        //----- (main)
        cell-handler-mobile.main-handler.shadow-1(
        v-if="!cellHandler.move.pushed",
        @onIntersectionChange="intersectionChanged",
        :element="'resize'",
        v-touch-pan="handleResizeCell",
        :style="{left: cellHandler.resize.x - 20 + 'px', top: cellHandler.resize.y - 20 + 'px'}",
        :class="[{'pushed': !cellHandler.resize.pushed}, {'hide': !mobileTempCell.onGrid && !showEditingCells}]")
          q-icon(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")

        //----- (temp)
        //----- (when main resize handler is outside of viewport)
        cell-handler-mobile.temp-handler.shadow-1(
        v-touch-pan="handleResizeCell",
        :class="[(!mobileTempCell.onGrid || tempHandler.resize.intersectingMainHandler || cellHandler.move.pushed || cellHandler.resize.pushed ? 'hide': 'show'), (tempHandler.resize.side === 'left' ? 'left-side' : 'right-side')]",
        :style="{top: cellHandler.resize.y + 59 - 20 + 'px'}",)
          q-icon(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
216

christianrhansen's avatar
christianrhansen committed
217
      // ---------------------------------------------------------------------------------------------------------------
Anton's avatar
Intial  
Anton committed
218
      template(v-else)
219
        .cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
Anton's avatar
Intial  
Anton committed
220
          div.cell-item-resize-handle(
221 222 223 224 225
          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
226

Mathias Bär's avatar
Mathias Bär committed
227
      //template(v-if="!isMobile")
228 229 230 231 232
        .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
233
      //template(v-if="isMobile")
Mathias Bär's avatar
Mathias Bär committed
234 235 236 237 238
        .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
239

christianrhansen's avatar
christianrhansen committed
240
    // ------------------------------------------------------------------------------------------ edit box (mobile only)
241

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

248
      //------------------------- buttons
249 250
      // .row.text-dark(style="background-color: rgba(0, 0, 0, .2);")
      .row.text-dark(style="background-color: rgba(255, 150, 150, .3);")
251 252 253

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

258 259
        //----- toggle edit-box
        .col.text-right
christianrhansen's avatar
christianrhansen committed
260
          q-btn.q-py-none.q-pr-sm.q-mr-xs(@click="carouselVisibility()", flat, no-ripple)
christianrhansen's avatar
christianrhansen committed
261 262
            q-icon(v-if="carousel.visibility", name="keyboard_arrow_down")
            q-icon(v-else, name="keyboard_arrow_up")
263

christianrhansen's avatar
christianrhansen committed
264
      //q-item-separator.q-ma-none
265 266 267 268 269 270

      //------------------------- 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
271 272
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
273 274 275 276 277 278 279 280 281 282 283 284 285 286 287
          .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
288 289
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
290 291 292 293 294 295 296 297 298 299 300 301 302
          .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
303 304 305 306
</template>

<script>
  import Cell from './Cell'
307 308
  import { userHasFeature } from 'mbjs-quasar/src/lib'
  import { mapGetters } from 'vuex'
309
  import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
310
  import CellHandlerMobile from './CellHandlerMobile'
Anton's avatar
Intial  
Anton committed
311 312 313 314 315 316

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

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

505
        // -------------------- move
506
        if (obj.element === 'move') {
christianrhansen's avatar
christianrhansen committed
507
          this.tempHandler.move.intersectingMainHandler = obj.intersecting
508

christianrhansen's avatar
christianrhansen committed
509
          // behind left side
christianrhansen's avatar
christianrhansen committed
510
          if (_offsetLeft < 0) {
511
            this.tempHandler.move.side = 'left'
512
          }
513
          // intersecting
christianrhansen's avatar
christianrhansen committed
514
          else if (isNaN(_offsetLeft)) {
christianrhansen's avatar
christianrhansen committed
515
            if (this.tempHandler.move.intersectingMainHandler && this.tempHandler.move.side === 'right') this.tempHandler.resize.intersectingMainHandler = false
516
          }
christianrhansen's avatar
christianrhansen committed
517
          // behind right side
christianrhansen's avatar
christianrhansen committed
518
          else if (_offsetLeft === 1) {
519
            this.tempHandler.move.side = 'right'
christianrhansen's avatar
christianrhansen committed
520
            this.tempHandler.resize.intersectingMainHandler = true
521
          }
522
        }
523

524
        // -------------------- resize
christianrhansen's avatar
christianrhansen committed
525
        else if (obj.element === 'resize') {
christianrhansen's avatar
christianrhansen committed
526
          this.tempHandler.resize.intersectingMainHandler = obj.intersecting
527

christianrhansen's avatar
christianrhansen committed
528
          // on left side
christianrhansen's avatar
christianrhansen committed
529
          if (_offsetLeft === -1) {
530
            this.tempHandler.resize.side = 'left'
531
          }
christianrhansen's avatar
christianrhansen committed
532
          /*
533
          // intersecting
christianrhansen's avatar
christianrhansen committed
534
          else if (isNaN(Math.sign(obj.offsetLeft))) {
535
          }
christianrhansen's avatar
christianrhansen committed
536
          */
christianrhansen's avatar
christianrhansen committed
537
          // on right side
christianrhansen's avatar
christianrhansen committed
538
          else if (_offsetLeft === 1) {
539
            this.tempHandler.resize.side = 'right'
540
          }
541 542
        }
      },
christianrhansen's avatar
christianrhansen committed
543
      handleMoveCell (obj) {
544 545
        this.cellHandler.move.x = obj.position.left
        this.cellHandler.move.y = obj.position.top
546

christianrhansen's avatar
christianrhansen committed
547 548 549 550 551
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
552
          this.cellHandler.move.pushed = true
christianrhansen's avatar
christianrhansen committed
553
        }
554

christianrhansen's avatar
christianrhansen committed
555 556 557
        this.mobileTempCell.x = res.x
        this.mobileTempCell.y = res.y

558 559 560
        this.mobileTempCell.ox = res.ox
        this.mobileTempCell.oy = res.oy

561 562
        this.cellHandler.move.x = res.ox
        this.cellHandler.move.y = res.oy
563

christianrhansen's avatar
christianrhansen committed
564 565 566
        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
567
          this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
568 569 570 571
          this.cellHandler.move.pushed = false
          // this.cellHandler.move.y = this.gridDimensions.full.cell.height * (res.y - 1) + 8 + 59 + 20
          this.cellHandler.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
          this.cellHandler.move.y = this.gridDimensions.full.cell.height * (this.mobileTempCell.y - 1) + 8 + 20
572

573 574
          this.cellHandler.resize.x = this.gridDimensions.full.cell.width * (res.x + this.mobileTempCell.width - 1) - 8 - 20
          this.cellHandler.resize.y = this.gridDimensions.full.cell.height * (res.y + this.mobileTempCell.height - 1) - 8 - 20
christianrhansen's avatar
christianrhansen committed
575 576
        }
      },
christianrhansen's avatar
christianrhansen committed
577
      handleResizeCell (obj) {
christianrhansen's avatar
christianrhansen committed
578
        // this.cursor = {x: obj.position.left, y: obj.position.top}
579 580 581
        // this.cellHandler.resize = {x: obj.position.left, y: obj.position.top}
        this.cellHandler.resize.x = obj.position.left
        this.cellHandler.resize.y = obj.position.top
582

583 584 585 586 587 588
        // ---> panGrid
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
589
          this.cellHandler.resize.pushed = true
590 591 592 593 594
        }

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

595 596
        this.cellHandler.resize.x = res.ox
        this.cellHandler.resize.y = res.oy
597

598 599 600
        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
601
          this.cellHandler.resize.pushed = false
602 603
          // this.addMobileCell(obj)
          // this.mobileTempCell.show = false
604 605
          this.cellHandler.resize.x = this.gridDimensions.full.cell.width * res.x - 8 - 20
          this.cellHandler.resize.y = this.gridDimensions.full.cell.height * res.y - 8 - 20
606 607
        }
      },
608
      /*
609 610 611 612
      clearCachedCell () {
        this.$store.commit('mosys/cacheNewCell', undefined)
        this.clearTempCell()
      },
613
      */
614
      handleCellInfoTouch (event, annotation) {
615
        console.log('handleCellInfoTouch', annotation)
616 617 618
        this.touchMobileCell(event, annotation)
        this.handleModal()
      },
619 620 621 622
      getCarouselIcon (val) {
        console.log(val)
      },
      carouselVisibility () {
623 624 625 626
        console.log(this.carousel.slide)
        if (this.$refs.carousel) {
          this.$refs.carousel.goToSlide(this.carousel.slide)
        }
627 628
        this.carousel.visibility = !this.carousel.visibility
      },
629 630 631
      handleModal () {
        this.modal = !this.modal
      },
632
      clearTempCell () {
633
        this.mobileTempCell = {x: undefined, y: undefined, width: undefined, height: undefined, onGrid: false, button: false}
634
      },
635
      panGrid (obj) {
636
        if (this.cachedNewCell && !this.mobileTempCell.onGrid) {
637
          // console.log('hhhhhhhhhhhhhhhhh', obj)
638 639 640 641
          let res = this.getGridPositionForEvent(obj)

          if (obj.isFirst) {
            this.mobileTempCell.show = true
642
            this.mobileTempCell.button = false
643 644 645 646 647 648 649 650
            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) {
651
            this.mobileTempCell.onGrid = true
652
            this.mobileTempCell.button = true
653 654
            // this.addMobileCell(obj)
            // this.mobileTempCell.show = false
655 656
            this.cellHandler.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
            this.cellHandler.move.y = this.gridDimensions.full.cell.height * (this.mobileTempCell.y - 1) + 8 + 20
657

658 659
            this.cellHandler.resize.x = this.gridDimensions.full.cell.width * res.x - 8 - 20
            this.cellHandler.resize.y = this.gridDimensions.full.cell.height * res.y - 8 - 20
660
          }
661
        }
662
      },
663
      async cellHold (event, annotation) {
664 665
        this.$store.commit('mosys/setEditingCells', '')

666
        this.$q.notify({
667
          message: 'Copied.',
668
          color: 'dark',
669 670
          textColor: 'white',
          position: 'bottom-right'
671 672 673 674 675 676 677 678 679 680
        })

        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
681 682
      moveCachedCell (obj) {
        this.touch.position = {top: obj.position.top, left: obj.position.left}
683 684 685 686 687 688 689 690 691
        /*
        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
692
      },
693 694
      addMobileCell (event) {
        // console.log('addMobileCell()', event, annotation)
christianrhansen's avatar
christianrhansen committed
695
        if (this.cachedNewCell) {
696
          this.handleGridDrop(event)
christianrhansen's avatar
christianrhansen committed
697
          this.$store.commit('mosys/cacheNewCell', undefined)
698 699
          this.$q.notify({
            message: 'Cell was added.',
700 701 702
            color: 'dark',
            position: 'center',
            timeout: 50
703
          })
christianrhansen's avatar
christianrhansen committed
704 705
        }
      },
706
      touchMobileCell (event, cell) {
707
        if (!this.mobileTempCell.onGrid && cell) {
708 709 710 711 712 713 714 715 716
          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)
        }
717
      },
christianrhansen's avatar
christianrhansen committed
718
      handleCellTouch (event, annotation) {
719
        console.log('handleCellTouch', annotation)
720
        if (!this.cachedNewCell) {
721 722 723 724 725 726 727 728 729 730 731 732 733 734
          let
            parsed = annotation.target.selector.parse(),
            sliced = parsed.xywh.slice(0, 4),
            x = sliced[0],
            y = sliced[1],
            w = sliced[2],
            h = sliced[3]

          this.cellHandler.move.x = this.gridDimensions.full.cell.width * (x - 1) + 8 + 20
          this.cellHandler.move.y = this.gridDimensions.full.cell.height * (y - 1) + 8 + 20

          this.cellHandler.resize.x = this.gridDimensions.full.cell.width * (x + w - 1) - 8 - 20
          this.cellHandler.resize.y = this.gridDimensions.full.cell.height * (y + h - 1) - 8 - 20

735
          this.mobileSelectedCell = annotation
736
          this.getCellType(annotation)
737
        }
christianrhansen's avatar
christianrhansen committed
738
      },
739 740 741 742 743
      async getCellType (annotation) {
        let cell = await this.$store.dispatch('cells/get', annotation.body.source.id)
        let cellType = cell.component
        this.selectedCell.type = cellType.substr(4, cellType.length - 4)
      },
744
      async mobileCellMove (annotation, _x, _y) {
745 746
        this.$el.scrollLeft = this.$el.scrollLeft + (this.gridDimensions.full.cell.width * _x)

747 748
        let
          parsed = annotation.target.selector.parse(),
749
          sliced = parsed.xywh.slice(0, 4),
750
          x = sliced[0],
751 752 753 754 755 756 757 758 759 760 761 762 763 764 765
          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

766 767 768 769 770 771 772 773
        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 }
          }
        }])
      },
774
      async mobileCellResize (annotation, _w, _h) {
775 776 777
        let
          parsed = annotation.target.selector.parse(),
          [x, y, w, h] = parsed.xywh
778 779 780 781 782 783 784 785 786 787 788 789

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

790 791 792 793 794 795 796 797
        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)
      },
798 799 800 801
      //
      // DATA
      //

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

      //
      // GRID DRAG & DROP HANDLERS
      //

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

959
          this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
960 961
          event.preventDefault()
        }
962
        this.clearTempCell()
Anton's avatar
Intial  
Anton committed
963
      },
964 965 966 967

      //
      // CELL DRAG & DROP HANDLERS
      //
Mathias Bär's avatar
Mathias Bär committed
968 969 970
      handleCellEditClick (event, cell) {
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
971
        this.$root.$emit('mosys_saveScrollPosition')
Mathias Bär's avatar
Mathias Bär committed
972
      },
973 974 975 976 977
      handleCellClick (event, cell) {
        this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
        this.updateSelectedCells()
      },
      handleCellDragStart (event, annotation) {
christianrhansen's avatar
christianrhansen committed
978
        console.log('§§§§§§§§', annotation)
979 980 981 982 983 984 985 986 987 988 989 990
        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
991
          }
992
          this.tmpObjects.push(annotation)
993 994 995
        }
      },
      handleCellDragEnd (event, annotation) {
996 997 998
        if (!this.mobile) {
          this.annotationUIStates[annotation._uuid].beingDragged = false
        }
999 1000 1001 1002
      },
      async handleCellContextMenuDelete (event, annotation) {
        this.annotationUIStates[annotation._uuid].selected = false
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
1003
        this.updateEditingCells()
1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046
        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
1047 1048
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
      },
1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065
      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
1066
        }
1067 1068 1069 1070 1071 1072 1073 1074 1075
        catch (e) { /* dialog canceled */ }
      },

      //
      // GRID CONTEXT MENU
      //

      handleGridContextMenu (event) {
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
Anton's avatar
Intial  
Anton committed
1076 1077 1078
      },
      async handleGridContextMenuInsertColumnLeft () {
        let position = this.contextMenuClickPosition
1079 1080 1081 1082 1083 1084 1085 1086
        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
1087 1088
          }
        }
1089
        this.grid.config.columns += 1
Anton's avatar
Intial  
Anton committed
1090 1091 1092 1093
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteColumn () {
        let position = this.contextMenuClickPosition
1094 1095 1096 1097 1098 1099 1100 1101
        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
1102 1103
          }
        }
1104
        this.grid.config.columns -= 1
Anton's avatar
Intial  
Anton committed
1105 1106 1107 1108
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuInsertRowAbove () {
        let position = this.contextMenuClickPosition