created via touch resizable temp mobile cell (not finished)

partials/GridEditor.vue

@@ -20,6 +20,7 @@
 
     // ------------------------------------------------------------------------------------------------------------ grid
     div.cell-grid(
+    v-touch-pan="panGrid",
     @click="event => {addMobileCell(event)}",
     @dragenter="handleGridDragOver",
     @dragover="handleGridDragOver",
@@ -101,6 +102,11 @@
           .cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
             cell(:cell="tmpCell")
 
+        //----- temporary cell (mobile)
+        .cell-item.cell-item-tmp-mobile(:style="mobileTempCellStyle(mobileTempCell)")
+          | blabla
+          // cell(:cell="tmpCell")
+
       // ---------------------------------------------------------------------------------------------------------------
       template(v-else)
         .cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
@@ -243,7 +249,8 @@
         resizingGrid: false,
         mobileSelectedCell: undefined,
         touch: {position: {top: undefined, left: undefined}},
-        isMobile: this.$q.platform.is.mobile
+        isMobile: this.$q.platform.is.mobile,
+        mobileTempCell: {x: 0, y: 0, width: 1, height: 1}
       }
     },
     computed: {
@@ -321,6 +328,12 @@
       }
     },
     methods: {
+      panGrid (obj) {
+        let res = this.getGridPositionForEvent(obj)
+        console.log(res)
+        this.mobileTempCell.x = res.x + 1
+        this.mobileTempCell.y = res.y + 1
+      },
       async cellHold (event, annotation) {
         this.$store.commit('mosys/setEditingCells', '')
 
@@ -751,9 +764,23 @@
       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.left && event.position.top) {
+          _clientX = event.position.left
+          _clientY = event.position.top
+        }
+
         const elContainerBoundingBox = this.$el.getBoundingClientRect()
-        const ox = event.clientX + this.$el.scrollLeft - elContainerBoundingBox.x - offset.x
-        const oy = event.clientY + this.$el.scrollTop - elContainerBoundingBox.y - offset.y
+        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)
         const y = Math.ceil(oy / this.gridDimensions.full.cell.height)
         return { x: x, y: y, ox: ox, oy: oy }
@@ -792,6 +819,15 @@
           }
         }
       },
+      mobileTempCellStyle (obj) {
+        console.log(obj)
+        return {
+          'grid-column-start': obj.x,
+          'grid-column-end': obj.width,
+          'grid-row-start': obj.y,
+          'grid-row-end': obj.height
+        }
+      },
       getAnnotationStyle (annotation) {
         const parsed = annotation.target.selector.parse()
         return {
@@ -901,4 +937,7 @@
     top -60px
     &.show
       top 0px
+
+  .cell-item-tmp-mobile
+    background-color rgba(0, 0, 255, .25)
 </style>