mobile: add new cell works, but messy code and adds empty cells only atm

partials/GridEditor.vue

@@ -6,8 +6,9 @@
 
     // ------------------------------------------------------------------------------------------ cached new cell helper
     // q-page-sticky.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell", position="top-right")
-    .fixed.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell",
-    :style="{top: touch.position.top - 16 - 16 + 'px', left: touch.position.left - 16 - 16 + 'px'}")
+    // .fixed.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell",
+    // :style="{top: touch.position.top - 16 - 16 + 'px', left: touch.position.left - 16 - 16 + 'px'}")
+    .fixed.z-top(v-if="cachedNewCell")
       .bg-frosted-glass.text-dark.q-px-md.q-py-sm.q-ma-md.shadow-4(:style="{width: gridDimensions.full.cell.width + 'px', height: gridDimensions.full.cell.height + 'px'}")
         | {{ cachedNewCell.type }} Cell:
         br
@@ -314,16 +315,30 @@
     methods: {
       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))
       },
       test (event) {
-        console.log('--->>>', this.getGridPositionForEvent(event))
+        // console.log('--->>>', this.getGridPositionForEvent(event))
+        // console.log(event)
+        let resourceCell = this.cachedNewCell
+        console.log('event--------', event)
+        console.log('resourceCell --- ', resourceCell)
+        // event.dataTransfer.setData('text/plain', JSON.stringify(resourceCell))
         this.addMobileCell(event)
       },
       addMobileCell (event) {
         if (this.cachedNewCell) {
+          this.handleGridDrop(event)
           console.log('###--- ', this.getGridPositionForEvent(event))
           this.$store.commit('mosys/cacheNewCell', undefined)
-          this.handleGridDrop(event)
         }
       },
       touchMobileCell (event, cell) {
@@ -487,9 +502,11 @@
         this.tmpObjects = []
       },
       async handleGridDrop (event) {
-        let dropData = event.dataTransfer.getData('text/plain')
-        console.log('dropData', dropData)
-        // {"data":{"content":"vvvvvvsdscscdsc"},"config":{},"component":"CellText"}
+        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)
@@ -713,6 +730,7 @@
       //
 
       getGridPositionForEvent (event, offset = { x: 0, y: 0 }) {
+        // console.log('###', event)
         offset = { x: 0, y: 0 } // TODO: remove quick fix
         const elContainerBoundingBox = this.$el.getBoundingClientRect()
         const ox = event.clientX + this.$el.scrollLeft - elContainerBoundingBox.x - offset.x