GridEditor.vue

<template lang="pug">

  div.cell-grid-container(
  :class="{'overflow-hidden': activeHandler}",
  style="overflow-y: hidden; scroll-behavior: smooth;")

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

    //----- modal for existing cell editing
    q-modal(v-model="modal", minimized, content-css="background-color: #eee; border-radius: .5rem;")
      grid-editor-editing-cells-mobile

    // -----------------------------------------------------------------------------------------------------------------
    // ----------------------------------------------------------------------------------------------- "new cell"-header
    #new-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}")
      q-item.q-pl-md.q-pr-xs.q-py-none.full-height
        q-item-main
          strong New {{ newCellType }}

        q-item-side.text-white
          q-btn(@click="event => {addMobileCell(event)}", round, flat)
            q-icon(name="check")

          q-btn.clear-button.q-px-md.q-mr-md.on-right(@click="clearHandler('cached cell')", flat)
            q-icon(name="clear")

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

        q-item-side.text-white
          q-btn.q-px-sm(@click="event => {handleCellEdit(event, selectedCell.annotation)}", flat)
            q-icon(name="edit")

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

          q-btn.clear-button.q-px-md.q-mr-md.on-right(@click="clearHandler('cell')", flat)
            q-icon(name="clear")

    // -----------------------------------------------------------------------------------------------------------------
    // ------------------------------------------------------------------------------------------------------------ grid
    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)
      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")

        //--------------------------------------------------------------------------------------------------------------
        //--------------------------------------------------------------------------------------------------------- cell
        template(v-for="(annotation, index) in annotations")
          // v-touch-hold="event => {cellCopy(event, annotation)}",
          .cell-item(
          v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
          draggable="true",
          @click.prevent="event => {handleCellTouch(event, annotation)}",
          @dragstart="event => {handleCellDragStart(event, annotation)}",
          @dragend="event => {handleCellDragEnd(event, annotation)}",
          @contextmenu="handleCellContextMenu",
          :style="getAnnotationStyle(annotation)",
          :class="getAnnotationClasses(annotation._uuid, 'cell-item')",
          :key="`cell-${index}`")

            //------------------------------------------------------------------------------------ edit-button (desktop)
            .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")

            //------------------------------------------------------------------------------------- select cell (mobile)
            .mobile-only
              .edit-button.absolute.fit.bg-transparent(
              v-touch-hold="event => {handleCellEdit(event, annotation)}",
              @click.prevent="event => {touchMobileCell(event, annotation)}")

            //--------------------------------------------------------------------------------------------- cell content
            //----- 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")

            //-------------------------------------------------------------------------------------------------- desktop
            //------------------------------------------------------------------------------------------- resize-handler
            .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: cells
            // 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
        //------------------------------------------------------------------------------------------------------ desktop
        template(v-for="(tmpCell, index) in tmpObjects")
          .cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
            cell(:cell="tmpCell")

        //------------------------------------------------------------------------------------------------------- mobile
        template(v-if="mobileTempCell.show && cachedNewCell")
          .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")

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

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

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

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

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

</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
        },
        modal: false,
        // cursor: {x: undefined, y: undefined},
        cellHandler: {
          size: {width: 40, height: 40},
          move: {x: 20, y: undefined, gridPosition: {row: undefined, column: undefined}, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined, dataLeft: undefined},
          resize: {x: undefined, y: undefined, gridPosition: {row: undefined, column: undefined}, pushed: false, pos: undefined}
        },
        tempHandler: {
          move: {left: undefined, intersectingMainHandler: false, side: undefined},
          resize: {left: undefined, intersectingMainHandler: false, side: undefined}
        },
        activeHandler: false,
        selectedCell: {type: undefined, annotation: undefined}
      }
    },
    computed: {
      ...mapGetters({
        cachedNewCell: 'mosys/getNewCell',
        user: 'auth/getUserState',
        // isMobile: 'globalSettings/getIsMobile',
        // editingCells: 'mosys/getEditingCells'
        showEditingCells: 'mosys/getShowEditingCells',
        scrollPositionCache: 'mosys/getScrollPositionCache',
        editMode: 'mosys/getEditMode'
      }),
      newCellType () {
        if (this.cachedNewCell) {
          let type = this.cachedNewCell.component
          return type.substr(4, type.length - 4)
        }
      },
      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: {
      'cellHandler.move.gridPosition': {
        handler: function (obj) {
          if (this.showEditingCells) {
            this.mobileCellMove(this.mobileSelectedCell, obj.column, obj.row)
          }
        },
        deep: true
      },
      'cellHandler.resize.gridPosition': {
        handler: function (obj) {
          if (this.showEditingCells) {
            let w = obj.column - this.cellHandler.move.gridPosition.column + 1
            let h = obj.row - this.cellHandler.move.gridPosition.row + 1
            this.mobileCellResize(this.mobileSelectedCell, w, h)
          }
        },
        deep: true
      },
      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: {
      clearHandler (target) {
        switch (target) {
        case 'cell':
          Object.keys(this.annotationUIStates).filter((k) => {
            this.annotationUIStates[k].editing = false
          })
          this.$store.commit('mosys/setEditingCells', '')
          break
        case 'cached cell':
          this.$store.commit('mosys/cacheNewCell', undefined)
          this.clearHandler('temp cell')
          break
        case 'temp cell':
          this.mobileTempCell = {x: undefined, y: undefined, width: undefined, height: undefined, onGrid: false, button: false}
          break
        }
      },
      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.cellHandler.move.x = obj.position.left
        this.cellHandler.move.y = obj.position.top

        let res = this.getGridPositionForEvent(obj)

        this.cellHandler.move.gridPosition.row = res.y
        this.cellHandler.move.gridPosition.column = res.x

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

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

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

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

        if (obj.isFinal) {
          this.activeHandler = false
          this.mobileTempCell.onGrid = true
          // this.mobileTempCell.button = true
          this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
          this.cellHandler.move.pushed = false
          // this.cellHandler.move.y = this.gridDimensions.full.cell.height * (res.y - 1) + 8 + 59 + 20
          this.cellHandler.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
          this.cellHandler.move.y = this.gridDimensions.full.cell.height * (this.mobileTempCell.y - 1) + 8 + 20

          this.cellHandler.resize.x = this.gridDimensions.full.cell.width * (res.x + this.mobileTempCell.width - 1) - 8 - 20
          this.cellHandler.resize.y = this.gridDimensions.full.cell.height * (res.y + this.mobileTempCell.height - 1) - 8 - 20
        }
      },
      handleResizeCell (obj) {
        // this.cursor = {x: obj.position.left, y: obj.position.top}
        // this.cellHandler.resize = {x: obj.position.left, y: obj.position.top}
        this.cellHandler.resize.x = obj.position.left
        this.cellHandler.resize.y = obj.position.top

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

        this.cellHandler.resize.gridPosition.row = res.y
        this.cellHandler.resize.gridPosition.column = res.x

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

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

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

        if (obj.isFinal) {
          this.activeHandler = false
          this.mobileTempCell.onGrid = true
          // this.mobileTempCell.button = true
          this.cellHandler.resize.pushed = false
          // this.addMobileCell(obj)
          // this.mobileTempCell.show = false
          this.cellHandler.resize.x = this.gridDimensions.full.cell.width * res.x - 8 - 20
          this.cellHandler.resize.y = this.gridDimensions.full.cell.height * res.y - 8 - 20
        }
      },
      handleCellEdit (event, annotation) {
        console.log('handleCellEdit', annotation)
        this.touchMobileCell(event, annotation)
        this.handleModal()
      },
      handleModal () {
        this.modal = !this.modal
      },
      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.cellHandler.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
            this.cellHandler.move.y = this.gridDimensions.full.cell.height * (this.mobileTempCell.y - 1) + 8 + 20

            this.cellHandler.resize.x = this.gridDimensions.full.cell.width * res.x - 8 - 20
            this.cellHandler.resize.y = this.gridDimensions.full.cell.height * res.y - 8 - 20
          }
        }
      },
      async cellCopy (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) {
        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) {
        if (!this.mobileTempCell.onGrid && 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) {
        console.log('handleCellTouch', annotation)
        if (!this.cachedNewCell) {
          let
            parsed = annotation.target.selector.parse(),
            sliced = parsed.xywh.slice(0, 4),
            x = sliced[0],
            y = sliced[1],
            w = sliced[2],
            h = sliced[3]

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

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

          this.mobileSelectedCell = annotation
          this.getCellType(annotation)
        }
      },
      async getCellType (annotation) {
        let cell = await this.$store.dispatch('cells/get', annotation.body.source.id)
        let cellType = cell.component
        this.selectedCell.type = cellType.substr(4, cellType.length - 4)
      },
      // async mobileCellMove (annotation, _x, _y) {
      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(),
          sliced = parsed.xywh.slice(0, 4),
          x = sliced[0],
          y = sliced[1]

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