GridEditor.vue

<template lang="pug">

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

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

    q-window-resize-observable(@resize="updateGridDimensions")

    // ------------------------------------------------------------------------------------------ cached new cell helper
    // q-page-sticky.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell", position="top-right")
    //
      .fixed-top-right.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell",
      // :style="{top: touch.position.top - 16 - 16 + 'px'}")
    // .fixed-top.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell")
    #cell-helper.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}")
      q-item.q-px-md.q-py-none.full-height
        q-item-main
          | Place new cell
        q-item-side
          //
            q-btn.bg-transparent.text-white.on-right(@click.native="clearTempCell()", round, flat,
            // :disabled="!mobileTempCell.onGrid")
              q-icon(name="undo")
          q-btn.bg-transparent.text-white.on-right(@click.native="clearCachedCell()", round, flat)
            q-icon(name="delete")

    // ------------------------------------------------------------------------------------------------------------ grid
      @click="event => {addMobileCell(event)}",
    div.cell-grid.relative-position(
    v-touch-pan="panGrid",
    @dragenter="handleGridDragOver",
    @dragover="handleGridDragOver",
    @dragleave="handleGridDragEnd",
    @drop="handleGridDrop",
    @contextmenu="handleGridContextMenu",
    :style="gridStyle")

      // context menu grid (desktop only)
      q-context-menu.desktop-only(ref="gridmenu")
        q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
          q-item(
          v-for="action in gridContextMenuActions",
          :key="action.label",
          v-close-overlay,
          @click.native="event => {action.handler(event)}")
            q-item-main(:label="action.label")

      template(v-if="!resizingGrid")

        template(v-for="(annotation, index) in annotations")

          //----- cell
          // v-touch-hold="event => {cellHold(event, annotation)}",
          .cell-item(
          v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
          v-touch-hold="event => {handleCellInfoTouch(event, annotation)}",
          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
              q-btn.edit-button.absolute-top-right(
              @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)

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

            //----- selecting cells disabled because it has no use currently
            // 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"
            )

            //----- resize-handler (desktop only)
            .desktop-only.cell-item-resize-handle(
            draggable="true",
            @dragstart="event => {handleCellResizerDragStart(event, annotation)}",
            @dragend="event => {handleCellResizerDragEnd(event, annotation)}",
            @dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
              q-icon.q-ma-xs(name="network cell")

            //----- context menu for cells (desktop only)
            // TODO: needs revision
            q-context-menu.desktop-only
              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")

        //----- temporary cell when pulling a new cell into grid (desktop)
        template(v-for="(tmpCell, index) in tmpObjects")
          .cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
            cell(:cell="tmpCell")

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

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

            cell.absolute-top-left.q-ma-sm(:cell="cachedNewCell", :temp="true")

            q-btn.text-white(v-if="mobileTempCell.button",
            @click="event => {addMobileCell(event)}", round, flat, size="lg",
            style="background-color: rgba(0, 0, 0, 0);")
              q-icon(name="check")

          //----------------------------------------------------------------------------------------------- move handler
          //----- (main)
          cell-handler-mobile.main-handler.shadow-1(
          v-if="!handlerNewCell.resize.pushed",
          @onIntersectionChange="intersectionChanged",
          :element="'move'",
          v-touch-pan="handleMoveCell",
          :style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}",
          :class="[{'pushed': !handlerNewCell.move.pushed}, {'hide': !mobileTempCell.onGrid}]")
            q-icon.self-center.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 || handlerNewCell.resize.pushed || handlerNewCell.move.pushed ? 'hide': 'show'), (tempHandler.move.side === 'left' ? 'left-side' : 'right-side')]",
          :style="{top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
            q-icon.self-center.rotate-180(name="open_with", size="22px")

          //--------------------------------------------------------------------------------------------- resize handler
          //----- (main)
          cell-handler-mobile.main-handler.shadow-1(
          v-if="!handlerNewCell.move.pushed",
          @onIntersectionChange="intersectionChanged",
          :element="'resize'",
          v-touch-pan="handleResizeCell",
          :style="{left: handlerNewCell.resize.x - 20 + 'px', top: handlerNewCell.resize.y - 20 + 'px'}",
          :class="[{'pushed': !handlerNewCell.resize.pushed}, {'hide': !mobileTempCell.onGrid}]")
            q-icon.self-center(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 || handlerNewCell.move.pushed || handlerNewCell.resize.pushed ? 'hide': 'show'), (tempHandler.resize.side === 'left' ? 'left-side' : 'right-side')]",
          :style="{top: handlerNewCell.resize.y + 59 - 20 + 'px'}",)
            q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")

      // ---------------------------------------------------------------------------------------------------------------
      template(v-else)
        .cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
          div.cell-item-resize-handle(
          draggable="true",
          @dragstart="event => {handleGridResizerDragStart(event)}",
          @dragend="event => {handleGridResizerDragEnd(event)}",
          @dragexit="event => {handleGridResizerDragEnd(event)}")
            q-icon(name="network cell")

      //template(v-if="!isMobile")
        .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")
      //template(v-if="isMobile")
        .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")

    // ------------------------------------------------------------------------------------------ edit box (mobile only)

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

      //------------------------- buttons
      // .row.text-dark(style="background-color: rgba(0, 0, 0, .2);")
      .row.text-dark(style="background-color: rgba(255, 150, 150, .3);")

        //----- delete cell
        .col
          q-btn.q-py-none.q-pl-sm.q-ml-xs(
            @click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}", flat, no-ripple)
            q-icon(name="delete")

        //----- toggle edit-box
        .col.text-right
          q-btn.q-py-none.q-pr-sm.q-mr-xs(@click="carouselVisibility()", flat, no-ripple)
            q-icon(v-if="carousel.visibility", name="keyboard_arrow_down")
            q-icon(v-else, name="keyboard_arrow_up")

      //q-item-separator.q-ma-none

      //------------------------- carousel
      q-carousel.q-py-sm.carousel.transition-opacity(ref="carousel", v-model="slide",
      infinite, @input="getCarouselIcon(index)", style="width: 180px;")

        //----- move
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
          .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
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
          .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")
</template>

<script>
  import Cell from './Cell'
  import { userHasFeature } from 'mbjs-quasar/src/lib'
  import { mapGetters } from 'vuex'
  import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
  import CellHandlerMobile from './CellHandlerMobile'

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

  export default {
    components: {
      Cell,
      GridEditorEditingCellsMobile,
      CellHandlerMobile
    },
    props: ['gridUuid', 'tabsAreOpen'],
    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,
        annotations: undefined,
        tmpObjects: [],
        annotationUIStates: {},
        gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 },
        contextMenuClickPosition: {},
        resizingGrid: false,
        mobileSelectedCell: undefined,
        touch: {position: {top: undefined, left: undefined}},
        isMobile: this.$q.platform.is.mobile,
        mobileTempCell: {
          x: 0,
          y: 0,
          ox: 0,
          oy: 0,
          width: 1,
          height: 1,
          left: 0,
          show: false,
          onGrid: false,
          button: false
        },
        slide: undefined,
        modal: false,
        carousel: {visibility: false, icon: 'open_with', slide: 0},
        // cursor: {x: undefined, y: undefined},
        handlerNewCell: {
          size: {width: 40, height: 40},
          move: {x: 20, y: undefined, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined, dataLeft: undefined},
          resize: {x: undefined, y: undefined, pushed: false, pos: undefined}
        },
        handlerNewCellTemp: {visibility: true, left: 0},
        tempHandler: {
          move: {left: undefined, intersectingMainHandler: false, side: undefined},
          resize: {left: undefined, intersectingMainHandler: false, side: undefined}
        }
      }
    },
    computed: {
      ...mapGetters({
        cachedNewCell: 'mosys/getNewCell',
        user: 'auth/getUserState',
        // isMobile: 'globalSettings/getIsMobile',
        // editingCells: 'mosys/getEditingCells'
        showEditingCells: 'mosys/getShowEditingCells',
        scrollPositionCache: 'mosys/getScrollPositionCache',
        editMode: 'mosys/getEditMode'
      }),
      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
      },
      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>")`
        }
      }
    },
    async mounted () {
      await this.fetchData()
      this.resetScrollPosition()
    },
    beforeDestroy () {
      this.observer.disconnect()
    },
    watch: {
      slide (val) {
        let icon
        switch (val) {
        case 0:
          icon = 'open_with'
          break
        case 1:
          icon = 'photo_size_select_small'
          break
        case 2:
          icon = 'more_horiz'
          break
        default:
          icon = 'open_with'
          break
        }
        // this.carousel.slide = val
        // this.carousel.icon = icon
        this.carousel = {slide: val, icon: icon, visibility: this.carousel.visibility}
      },
      annotations () {
        this.updateAnnotationUIStates()
      },
      gridMetadata () {
        this.updateGridDimensions()
      },
      async gridUuid () {
        await this.fetchData()
      },
      showEditingCells (val) {
        // console.log('show editing cells', val)
        if (val === false) {
          this.updateAnnotationUIStates()
        }
      },
      tabsAreOpen () {
        this.resetScrollPosition()
      }
    },
    methods: {
      intersectionChanged (obj) {
        let _offsetLeft = Math.sign(obj.offsetLeft)

        // -------------------- move
        if (obj.element === 'move') {
          this.tempHandler.move.intersectingMainHandler = obj.intersecting

          // behind left side
          if (_offsetLeft < 0) {
            this.tempHandler.move.side = 'left'
          }
          // intersecting
          else if (isNaN(_offsetLeft)) {
            if (this.tempHandler.move.intersectingMainHandler && this.tempHandler.move.side === 'right') this.tempHandler.resize.intersectingMainHandler = false
          }
          // behind right side
          else if (_offsetLeft === 1) {
            this.tempHandler.move.side = 'right'
            this.tempHandler.resize.intersectingMainHandler = true
          }
        }

        // -------------------- resize
        else if (obj.element === 'resize') {
          this.tempHandler.resize.intersectingMainHandler = obj.intersecting

          // on left side
          if (_offsetLeft === -1) {
            this.tempHandler.resize.side = 'left'
          }
          /*
          // intersecting
          else if (isNaN(Math.sign(obj.offsetLeft))) {
          }
          */
          // on right side
          else if (_offsetLeft === 1) {
            this.tempHandler.resize.side = 'right'
          }
        }
      },
      handleMoveCell (obj) {
        this.handlerNewCellTemp.left = -100
        this.handlerNewCell.move.x = obj.position.left
        this.handlerNewCell.move.y = obj.position.top

        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
          this.handlerNewCell.move.pushed = true
        }

        this.mobileTempCell.x = res.x
        this.mobileTempCell.y = res.y

        this.mobileTempCell.ox = res.ox
        this.mobileTempCell.oy = res.oy

        this.handlerNewCell.move.x = res.ox
        this.handlerNewCell.move.y = res.oy

        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
          this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
          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

          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
        }
      },
      handleResizeCell (obj) {
        // this.cursor = {x: obj.position.left, y: obj.position.top}
        // 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

        // ---> panGrid
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
          this.handlerNewCell.resize.pushed = true
        }

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

        this.handlerNewCell.resize.x = res.ox
        this.handlerNewCell.resize.y = res.oy

        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
          this.handlerNewCell.resize.pushed = false
          // this.addMobileCell(obj)
          // this.mobileTempCell.show = false
          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
        }
      },
      clearCachedCell () {
        this.$store.commit('mosys/cacheNewCell', undefined)
        this.clearTempCell()
      },
      handleCellInfoTouch (event, annotation) {
        this.touchMobileCell(event, annotation)
        this.handleModal()
      },
      getCarouselIcon (val) {
        console.log(val)
      },
      carouselVisibility () {
        console.log(this.carousel.slide)
        if (this.$refs.carousel) {
          this.$refs.carousel.goToSlide(this.carousel.slide)
        }
        this.carousel.visibility = !this.carousel.visibility
      },
      handleModal () {
        this.modal = !this.modal
      },
      clearTempCell () {
        this.mobileTempCell = {x: undefined, y: undefined, width: undefined, height: undefined, onGrid: false, button: false}
      },
      panGrid (obj) {
        if (this.cachedNewCell && !this.mobileTempCell.onGrid) {
          // console.log('hhhhhhhhhhhhhhhhh', obj)
          let res = this.getGridPositionForEvent(obj)

          if (obj.isFirst) {
            this.mobileTempCell.show = true
            this.mobileTempCell.button = false
            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) {
            this.mobileTempCell.onGrid = true
            this.mobileTempCell.button = true
            // this.addMobileCell(obj)
            // this.mobileTempCell.show = false
            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

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

        this.$q.notify({
          message: 'Copied.',
          color: 'dark',
          textColor: 'white',
          position: 'bottom-right'
        })

        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)
      },
      moveCachedCell (obj) {
        this.touch.position = {top: obj.position.top, left: obj.position.left}
        /*
        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))
      },
      addMobileCell (event) {
        // console.log('addMobileCell()', event, annotation)
        if (this.cachedNewCell) {
          this.handleGridDrop(event)
          this.$store.commit('mosys/cacheNewCell', undefined)
          this.$q.notify({
            message: 'Cell was added.',
            color: 'dark',
            position: 'center',
            timeout: 50
          })
        }
      },
      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)
      },
      handleCellTouch (event, annotation) {
        if (!this.cachedNewCell) {
          console.log(event, annotation)
          this.mobileSelectedCell = annotation
        }
      },
      async mobileCellMove (annotation, _x, _y) {
        this.$el.scrollLeft = this.$el.scrollLeft + (this.gridDimensions.full.cell.width * _x)

        let
          parsed = annotation.target.selector.parse(),
          sliced = parsed.xywh.slice(0, 4),
          x = sliced[0],
          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

        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 }
          }
        }])
      },
      async mobileCellResize (annotation, _w, _h) {
        let
          parsed = annotation.target.selector.parse(),
          [x, y, w, h] = parsed.xywh

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

        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)
      },
      //
      // DATA
      //

      async fetchData () {
        if (this.gridUuid) {
          this.grid = await this.$store.dispatch('maps/get', this.gridUuid)
          if (!Object.keys(this.grid.config).length) {
            this.grid.config = {
              columns: 10,
              rows: 6,
              ratio: 16 / 9.0
            }
            await this.updateGridMetadataStore()
          }
          this.updateGridDimensions()
          const { items } = await this.$store.dispatch('annotations/find', {
            'target.id': this.grid.id,
            'body.purpose': 'linking',
            'body.type': 'Cell'
          })
          this.annotations = items
        }
      },
      async updateGridMetadataStore () {
        await this.$store.dispatch('maps/patch', [this.grid.id, { config: this.grid.config }])
        this.updateGridDimensions()
      },
      updateSelectedCells () {
        const _this = this
        let selectedCells = Object.keys(this.annotationUIStates).filter(k => {
          return _this.annotationUIStates[k].selected
        }).map(k => {
          // return _this.cells.find(c => c._uuid === k)
          return _this.annotations.find(c => c._uuid === k)
        })
        this.$store.commit('mosys/setSelectedCells', selectedCells)
      },
      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)
        })
        /*
        console.log('this.annotationUIStates: ', this.annotationUIStates)
        console.log('editingCells: ', editingCells)
        if (this.isMobile) {
          console.log('MOBILE')
        }
        */
        this.$store.commit('mosys/setEditingCells', editingCells)
      },
      updateAnnotationUIStates () {
        let newAnnotationUIStates = {}
        this.annotations.forEach(a => {
          newAnnotationUIStates[a._uuid] = {
            selected: false,
            editing: false,
            beingResized: false,
            beginDragged: false,
            annotation: a
          }
        })
        this.annotationUIStates = newAnnotationUIStates
        this.updateSelectedCells()
        this.updateEditingCells()
      },

      //
      // GRID DRAG & DROP HANDLERS
      //

      async handleGridDragOver (event) {
        let _this = this
        if (this.resizingGrid) {
          const position = this.getGridPositionForEvent(event)
          this.grid.config.ratio = position.ox / (position.oy * 1.0)
          await this.updateGridMetadataStore()
        }
        else {
          let annotation = this.annotations.filter(annotation => {
            if (!_this.annotationUIStates[annotation._uuid]) return false
            return _this.annotationUIStates[annotation._uuid].beingDragged ||
              _this.annotationUIStates[annotation._uuid].beingResized
          }).shift()
          let offset, position
          if (!annotation) {
            annotation = {
              target: this.grid.get2DArea([1, 1], [1, 1])
            }
            position = this.getGridPositionForEvent(event)
          }
          else {
            offset = this.annotationUIStates[annotation._uuid].draggingOffset
            position = this.getGridPositionForEvent(event, offset)
          }
          if (!this.tmpObjects.length) this.tmpObjects.push(annotation)
          const parsed = annotation.target.selector.parse()
          if (event.dataTransfer.types.includes('text/plain')) {
            parsed.xywh[0] = position.x
            parsed.xywh[1] = position.y
            event.preventDefault()
          }
          else {
            parsed.xywh[2] = Math.max(1, 1 + position.x - parsed.xywh[0])
            parsed.xywh[3] = Math.max(1, 1 + position.y - parsed.xywh[1])
          }
          annotation.target.selector.value = parsed
        }
      },
      handleGridDragEnd () {
        this.tmpObjects = []
      },
      async handleGridDrop (event) {
        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)
        if (dropData) {
          dropData = JSON.parse(dropData)
          let annotation = this.annotations.find(a => a.id === dropData.id)
          const { x, y } = this.getGridPositionForEvent(
            event,
            annotation ? this.annotationUIStates[annotation._uuid].draggingOffset : undefined
          )
          if (annotation) {
            const
              parsed = annotation.target.selector.parse(),
              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 }
              }
            }])
          }
          else {
            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])
            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
                }
              },
              // target: this.grid.get2DArea([x, y], [1, 1])
              target: test
            })
            this.annotations.push(annotation)
            this.updateAnnotationUIStates()
          }

          this.tmpObjects = []
          event.preventDefault()
        }
        this.clearTempCell()
      },

      //
      // CELL DRAG & DROP HANDLERS
      //
      handleCellEditClick (event, cell) {
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
        this.$root.$emit('mosys_saveScrollPosition')
      },
      handleCellClick (event, cell) {
        this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
        this.updateSelectedCells()
      },
      handleCellDragStart (event, annotation) {
        console.log('§§§§§§§§', annotation)
        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
          }
          this.tmpObjects.push(annotation)
        }
      },
      handleCellDragEnd (event, annotation) {
        if (!this.mobile) {
          this.annotationUIStates[annotation._uuid].beingDragged = false
        }
      },
      async handleCellContextMenuDelete (event, annotation) {
        this.annotationUIStates[annotation._uuid].selected = false
        this.updateSelectedCells()
        this.updateEditingCells()
        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) {
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
      },
      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 } }])
        }
        catch (e) { /* dialog canceled */ }
      },

      //
      // GRID CONTEXT MENU
      //

      handleGridContextMenu (event) {
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
      },
      async handleGridContextMenuInsertColumnLeft () {
        let position = this.contextMenuClickPosition
        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 } }
            }])
          }
        }
        this.grid.config.columns += 1
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteColumn () {
        let position = this.contextMenuClickPosition
        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 } }
            }])
          }
        }
        this.grid.config.columns -= 1
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuInsertRowAbove () {
        let position = this.contextMenuClickPosition
        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 } }
            }])
          }
        }
        this.grid.config.rows += 1
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteRow () {
        let position = this.contextMenuClickPosition
        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 } }
            }])
          }
        }
        this.grid.config.rows -= 1
        await this.updateGridMetadataStore()
      },

      //
      // NAVIGATION
      //

      handleGridButtonClickEdit () {
        this.$store.commit('mosys/toggleSources')
      },

      //
      // GRID HELPERS
      //

      getGridPositionForEvent (event, offset = { x: 0, y: 0 }) {
        // console.log('###', event)
        offset = { x: 0, y: 0 } // TODO: remove quick fix

        let _clientX, _clientY

        if (event.clientX && event.clientY) {
          _clientX = event.clientX
          _clientY = event.clientY
        }
        if (event.position) {
          _clientX = event.position.left
          _clientY = event.position.top
        }

        const elContainerBoundingBox = this.$el.getBoundingClientRect()
        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
        const x = Math.ceil(ox / this.gridDimensions.full.cell.width)