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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      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

397
      */
398
      let observer = new IntersectionObserver(this.observerCallback)
399 400
      observer.observe(this.$refs.move)
      // observer.observe(this.$refs._mobileTempCell)
401
      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 448
      // observerCallback (entries, observer) {
      observerCallback (entries) {
449 450
        let target = entries[0]
        let scrollLeft = this.$el.scrollLeft
451

452
        if (!target.isIntersecting) {
453
          this.handlerNewCellTemp.visibility = true
454
          if (scrollLeft < this.handlerNewCell.move.x) {
455
            this.handlerNewCellTemp.left = window.innerWidth - 40
456
          }
457

458
          if (scrollLeft > this.handlerNewCell.move.x) {
459
            this.handlerNewCellTemp.left = 0
460
          }
461
        }
462
        else {
463
          this.handlerNewCellTemp.visibility = false
464
        }
465
      },
christianrhansen's avatar
christianrhansen committed
466
      handleMoveCell (obj) {
467
        this.handlerNewCellTemp.left = -100
christianrhansen's avatar
christianrhansen committed
468 469
        this.handlerNewCell.move.x = obj.position.left
        this.handlerNewCell.move.y = obj.position.top
470

christianrhansen's avatar
christianrhansen committed
471 472 473 474 475
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
christianrhansen's avatar
christianrhansen committed
476
          this.handlerNewCell.move.pushed = true
christianrhansen's avatar
christianrhansen committed
477
        }
478

christianrhansen's avatar
christianrhansen committed
479 480 481
        this.mobileTempCell.x = res.x
        this.mobileTempCell.y = res.y

482 483 484
        this.mobileTempCell.ox = res.ox
        this.mobileTempCell.oy = res.oy

christianrhansen's avatar
christianrhansen committed
485 486
        this.handlerNewCell.move.x = res.ox
        this.handlerNewCell.move.y = res.oy
487

christianrhansen's avatar
christianrhansen committed
488 489 490
        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
491
          this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
christianrhansen's avatar
christianrhansen committed
492 493 494 495
          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
496 497 498

          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
499 500
        }
      },
christianrhansen's avatar
christianrhansen committed
501
      handleResizeCell (obj) {
christianrhansen's avatar
christianrhansen committed
502
        // this.cursor = {x: obj.position.left, y: obj.position.top}
503 504 505 506
        // 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

507 508 509 510 511 512
        // ---> panGrid
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
513
          this.handlerNewCell.resize.pushed = true
514 515 516 517 518
        }

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

519 520 521
        this.handlerNewCell.resize.x = res.ox
        this.handlerNewCell.resize.y = res.oy

522 523 524
        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
525
          this.handlerNewCell.resize.pushed = false
526 527
          // this.addMobileCell(obj)
          // this.mobileTempCell.show = false
528 529
          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
530 531
        }
      },
532 533 534 535
      clearCachedCell () {
        this.$store.commit('mosys/cacheNewCell', undefined)
        this.clearTempCell()
      },
536 537 538 539
      handleCellInfoTouch (event, annotation) {
        this.touchMobileCell(event, annotation)
        this.handleModal()
      },
540 541 542 543
      getCarouselIcon (val) {
        console.log(val)
      },
      carouselVisibility () {
544 545 546 547
        console.log(this.carousel.slide)
        if (this.$refs.carousel) {
          this.$refs.carousel.goToSlide(this.carousel.slide)
        }
548 549
        this.carousel.visibility = !this.carousel.visibility
      },
550 551 552
      handleModal () {
        this.modal = !this.modal
      },
553
      clearTempCell () {
554
        this.mobileTempCell = {x: undefined, y: undefined, width: undefined, height: undefined, onGrid: false, button: false}
555
      },
556
      panGrid (obj) {
557
        if (this.cachedNewCell && !this.mobileTempCell.onGrid) {
558
          // console.log('hhhhhhhhhhhhhhhhh', obj)
559 560 561 562
          let res = this.getGridPositionForEvent(obj)

          if (obj.isFirst) {
            this.mobileTempCell.show = true
563
            this.mobileTempCell.button = false
564 565 566 567 568 569 570 571
            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) {
572
            this.mobileTempCell.onGrid = true
573
            this.mobileTempCell.button = true
574 575
            // this.addMobileCell(obj)
            // this.mobileTempCell.show = false
christianrhansen's avatar
christianrhansen committed
576 577
            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
578 579 580

            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
581
          }
582
        }
583
      },
584
      async cellHold (event, annotation) {
585 586
        this.$store.commit('mosys/setEditingCells', '')

587
        this.$q.notify({
588
          message: 'Copied.',
589
          color: 'dark',
590 591
          textColor: 'white',
          position: 'bottom-right'
592 593 594 595 596 597 598 599 600 601
        })

        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
602 603
      moveCachedCell (obj) {
        this.touch.position = {top: obj.position.top, left: obj.position.left}
604 605 606 607 608 609 610 611 612
        /*
        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
613
      },
614 615
      addMobileCell (event) {
        // console.log('addMobileCell()', event, annotation)
christianrhansen's avatar
christianrhansen committed
616
        if (this.cachedNewCell) {
617
          this.handleGridDrop(event)
christianrhansen's avatar
christianrhansen committed
618
          this.$store.commit('mosys/cacheNewCell', undefined)
619 620
          this.$q.notify({
            message: 'Cell was added.',
621 622 623
            color: 'dark',
            position: 'center',
            timeout: 50
624
          })
christianrhansen's avatar
christianrhansen committed
625 626
        }
      },
627 628 629 630 631 632 633 634 635 636
      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
637
      handleCellTouch (event, annotation) {
638 639 640 641
        if (!this.cachedNewCell) {
          console.log(event, annotation)
          this.mobileSelectedCell = annotation
        }
christianrhansen's avatar
christianrhansen committed
642
      },
643
      async mobileCellMove (annotation, _x, _y) {
644 645
        this.$el.scrollLeft = this.$el.scrollLeft + (this.gridDimensions.full.cell.width * _x)

646 647
        let
          parsed = annotation.target.selector.parse(),
648
          sliced = parsed.xywh.slice(0, 4),
649
          x = sliced[0],
650 651 652 653 654 655 656 657 658 659 660 661 662 663 664
          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

665 666 667 668 669 670 671 672
        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 }
          }
        }])
      },
673
      async mobileCellResize (annotation, _w, _h) {
674 675 676
        let
          parsed = annotation.target.selector.parse(),
          [x, y, w, h] = parsed.xywh
677 678 679 680 681 682 683 684 685 686 687 688

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

689 690 691 692 693 694 695 696
        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)
      },
697 698 699 700
      //
      // DATA
      //

Anton's avatar
Intial  
Anton committed
701 702 703
      async fetchData () {
        if (this.gridUuid) {
          this.grid = await this.$store.dispatch('maps/get', this.gridUuid)
704 705 706 707 708 709 710 711
          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
712
          this.updateGridDimensions()
713 714 715 716 717 718
          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
719 720
        }
      },
721 722 723
      async updateGridMetadataStore () {
        await this.$store.dispatch('maps/patch', [this.grid.id, { config: this.grid.config }])
        this.updateGridDimensions()
Anton's avatar
Intial  
Anton committed
724
      },
725 726 727 728 729
      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
730 731
          // return _this.cells.find(c => c._uuid === k)
          return _this.annotations.find(c => c._uuid === k)
732 733
        })
        this.$store.commit('mosys/setSelectedCells', selectedCells)
Anton's avatar
Intial  
Anton committed
734
      },
Mathias Bär's avatar
Mathias Bär committed
735 736 737 738 739 740 741 742
      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)
        })
743 744 745 746 747 748 749
        /*
        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
750 751
        this.$store.commit('mosys/setEditingCells', editingCells)
      },
752 753 754 755 756
      updateAnnotationUIStates () {
        let newAnnotationUIStates = {}
        this.annotations.forEach(a => {
          newAnnotationUIStates[a._uuid] = {
            selected: false,
Mathias Bär's avatar
Mathias Bär committed
757
            editing: false,
758
            beingResized: false,
Mathias Bär's avatar
Mathias Bär committed
759
            beginDragged: false,
760
            annotation: a
Anton's avatar
Intial  
Anton committed
761
          }
762 763
        })
        this.annotationUIStates = newAnnotationUIStates
Anton's avatar
Intial  
Anton committed
764
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
765
        this.updateEditingCells()
766
      },
767 768 769 770 771

      //
      // GRID DRAG & DROP HANDLERS
      //

772
      async handleGridDragOver (event) {
Anton's avatar
Intial  
Anton committed
773 774 775
        let _this = this
        if (this.resizingGrid) {
          const position = this.getGridPositionForEvent(event)
776 777
          this.grid.config.ratio = position.ox / (position.oy * 1.0)
          await this.updateGridMetadataStore()
Anton's avatar
Intial  
Anton committed
778 779
        }
        else {
780 781
          let annotation = this.annotations.filter(annotation => {
            if (!_this.annotationUIStates[annotation._uuid]) return false
Mathias Bär's avatar
Mathias Bär committed
782
            return _this.annotationUIStates[annotation._uuid].beingDragged ||
783
              _this.annotationUIStates[annotation._uuid].beingResized
Anton's avatar
Intial  
Anton committed
784 785
          }).shift()
          let offset, position
786 787 788 789
          if (!annotation) {
            annotation = {
              target: this.grid.get2DArea([1, 1], [1, 1])
            }
Anton's avatar
Intial  
Anton committed
790 791 792
            position = this.getGridPositionForEvent(event)
          }
          else {
793
            offset = this.annotationUIStates[annotation._uuid].draggingOffset
Anton's avatar
Intial  
Anton committed
794 795
            position = this.getGridPositionForEvent(event, offset)
          }
796 797
          if (!this.tmpObjects.length) this.tmpObjects.push(annotation)
          const parsed = annotation.target.selector.parse()
Anton's avatar
Intial  
Anton committed
798
          if (event.dataTransfer.types.includes('text/plain')) {
799 800
            parsed.xywh[0] = position.x
            parsed.xywh[1] = position.y
Anton's avatar
Intial  
Anton committed
801 802 803
            event.preventDefault()
          }
          else {
804 805
            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
806
          }
807
          annotation.target.selector.value = parsed
Anton's avatar
Intial  
Anton committed
808 809 810
        }
      },
      handleGridDragEnd () {
811
        this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
812
      },
813
      async handleGridDrop (event) {
814 815 816 817 818
        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)
819 820
        if (dropData) {
          dropData = JSON.parse(dropData)
821
          let annotation = this.annotations.find(a => a.id === dropData.id)
822 823 824 825 826
          const { x, y } = this.getGridPositionForEvent(
            event,
            annotation ? this.annotationUIStates[annotation._uuid].draggingOffset : undefined
          )
          if (annotation) {
827 828 829
            const
              parsed = annotation.target.selector.parse(),
              target = this.grid.get2DArea([x, y], parsed.xywh.slice(2))
830 831 832 833 834 835
            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
836 837
          }
          else {
838 839
            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])
840 841 842 843 844 845 846 847 848 849 850
            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
                }
              },
851 852
              // target: this.grid.get2DArea([x, y], [1, 1])
              target: test
853
            })
854
            this.annotations.push(annotation)
Anton's avatar
Anton committed
855
            this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
856
          }
857

858
          this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
859 860
          event.preventDefault()
        }
861
        this.clearTempCell()
Anton's avatar
Intial  
Anton committed
862
      },
863 864 865 866

      //
      // CELL DRAG & DROP HANDLERS
      //
Mathias Bär's avatar
Mathias Bär committed
867 868 869
      handleCellEditClick (event, cell) {
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
870
        this.$root.$emit('mosys_saveScrollPosition')
Mathias Bär's avatar
Mathias Bär committed
871
      },
872 873 874 875 876
      handleCellClick (event, cell) {
        this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
        this.updateSelectedCells()
      },
      handleCellDragStart (event, annotation) {
christianrhansen's avatar
christianrhansen committed
877
        console.log('§§§§§§§§', annotation)
878 879 880 881 882 883 884 885 886 887 888 889
        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
890
          }
891
          this.tmpObjects.push(annotation)
892 893 894
        }
      },
      handleCellDragEnd (event, annotation) {
895 896 897
        if (!this.mobile) {
          this.annotationUIStates[annotation._uuid].beingDragged = false
        }
898 899 900 901
      },
      async handleCellContextMenuDelete (event, annotation) {
        this.annotationUIStates[annotation._uuid].selected = false
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
902
        this.updateEditingCells()
903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945
        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
946 947
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
      },
948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964
      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
965
        }
966 967 968 969 970 971 972 973 974
        catch (e) { /* dialog canceled */ }
      },

      //
      // GRID CONTEXT MENU
      //

      handleGridContextMenu (event) {
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
Anton's avatar
Intial  
Anton committed
975 976 977
      },
      async handleGridContextMenuInsertColumnLeft () {
        let position = this.contextMenuClickPosition
978 979 980 981 982 983 984 985
        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
986 987
          }
        }
988
        this.grid.config.columns += 1
Anton's avatar
Intial  
Anton committed
989 990 991 992
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteColumn () {
        let position = this.contextMenuClickPosition
993 994 995 996 997 998 999 1000
        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
1001 1002
          }
        }
1003
        this.grid.config.columns -= 1
Anton's avatar
Intial  
Anton committed
1004 1005 1006 1007
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuInsertRowAbove () {
        let position = this.contextMenuClickPosition
1008 1009 1010 1011 1012 1013 1014 1015
        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
1016 1017
          }
        }
1018
        this.grid.config.rows += 1
Anton's avatar
Intial  
Anton committed
1019 1020 1021 1022
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteRow () {
        let position = this.contextMenuClickPosition
1023 1024 1025 1026 1027 1028 1029 1030
        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
1031 1032
          }
        }
1033
        this.grid.config.rows -= 1
Anton's avatar
Intial  
Anton committed
1034 1035
        await this.updateGridMetadataStore()
      },
1036 1037 1038 1039 1040

      //
      // NAVIGATION
      //

Anton's avatar
Intial  
Anton committed
1041
      handleGridButtonClickEdit () {
1042
        this.$store.commit('mosys/toggleSources')
Anton's avatar
Intial  
Anton committed
1043
      },
1044 1045 1046 1047 1048

      //
      // GRID HELPERS
      //

Anton's avatar
Anton committed
1049
      getGridPositionForEvent (event, offset = { x: 0, y: 0 }) {
1050
        // console.log('###', event)
Anton's avatar
Anton committed
1051
        offset = { x: 0, y: 0 } // TODO: remove quick fix
1052 1053 1054 1055 1056 1057 1058

        let _clientX, _clientY

        if (event.clientX && event.clientY) {
          _clientX = event.clientX
          _clientY = event.clientY
        }
1059
        if (event.position) {
1060 1061 1062 1063
          _clientX = event.position.left
          _clientY = event.position.top
        }

Anton's avatar
Intial  
Anton committed
1064
        const elContainerBoundingBox = this.$el.getBoundingClientRect()
1065 1066 1067 1068
        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
1069 1070
        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
1071
        return { x: x, y: y, ox: ox, oy: oy }
Anton's avatar
Intial  
Anton committed
1072
      },
1073 1074 1075 1076
      updateGridDimensions (size) {
        if (!this.grid || !this.grid.config) return

        let elWidth = size ? size.width : this.$el.offsetWidth
1077
        // let elHeight = size ? size.height : this.$el.offsetHeight
1078
        let cellSizeRatio = this.grid.config.ratio
1079 1080
        // let gridHeight = elHeight
        let gridHeight = this.$el.offsetHeight
1081
        let cellHeight = gridHeight / this.grid.config.rows
Anton's avatar
Intial  
Anton committed
1082
        let cellWidth = elWidth / Math.round(elWidth / (cellHeight * cellSizeRatio))
1083
        console.log('cellWidth', cellWidth)
1084
        let gridWidth = cellWidth * this.grid.config.columns
Anton's avatar
Intial  
Anton committed
1085
        let cellsPerWidth = elWidth / cellWidth
1086
        let cellWidthMini = elWidth / this.grid.config.columns
Anton's avatar
Intial  
Anton committed
1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099
        let gridHeightMini = cellWidthMini / cellSizeRatio
        this.gridDimensions = {
          full: {
            width: gridWidth,
            height: gridHeight,
            cell: {
              width: cellWidth,
              height: cellHeight
            },
            cells_per_width: cellsPerWidth
          },
          mini: {
            width: elWidth,
1100
            height: gridHeightMini * this.grid.config.rows,
Anton's avatar
Intial  
Anton committed
1101 1102 1103 1104 1105 1106 1107
            cell: {
              width: cellWidthMini,
              height: gridHeightMini
            }
          }
        }
      },
1108 1109 1110
      mobileTempCellStyle (obj) {
        return {
          'grid-column-start': obj.x,
1111
          'grid-column-end': `span ${obj.width}`,
1112
          'grid-row-start': obj.y,
1113
          'grid-row-end': `span ${obj.height}`
1114 1115
        }
      },
1116 1117
      getAnnotationStyle (annotation) {
        const parsed = annotation.target.selector.parse()
Anton's avatar
Intial  
Anton committed
1118
        return {
1119 1120 1121 1122
          'grid-column-start': parsed.xywh[0],
          'grid-column-end': `span ${parsed.xywh[2]}`,
          'grid-row-start': parsed.xywh[1],
          'grid-row-end': `span ${parsed.xywh[3]}`
Anton's avatar
Intial  
Anton committed
1123
        }
Mathias Bär's avatar