mobile temp cell: working positioning

partials/GridEditor.vue

@@ -104,7 +104,6 @@
 
         //----- temporary cell (mobile)
         .cell-item.cell-item-tmp-mobile(:style="mobileTempCellStyle(mobileTempCell)")
-          | blabla
           // cell(:cell="tmpCell")
 
       // ---------------------------------------------------------------------------------------------------------------
@@ -329,10 +328,17 @@
     },
     methods: {
       panGrid (obj) {
+        console.log('hhhhhhhhhhhhhhhhh', obj)
         let res = this.getGridPositionForEvent(obj)
-        console.log(res)
-        this.mobileTempCell.x = res.x + 1
-        this.mobileTempCell.y = res.y + 1
+        // console.log('**********', res)
+        // this.mobileTempCell.x = res.x
+        // this.mobileTempCell.y = res.y
+        if (obj.isFirst) {
+          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
       },
       async cellHold (event, annotation) {
         this.$store.commit('mosys/setEditingCells', '')
@@ -771,7 +777,7 @@
           _clientX = event.clientX
           _clientY = event.clientY
         }
-        if (event.position.left && event.position.top) {
+        if (event.position) {
           _clientX = event.position.left
           _clientY = event.position.top
         }
@@ -823,9 +829,9 @@
         console.log(obj)
         return {
           'grid-column-start': obj.x,
-          'grid-column-end': obj.width,
+          'grid-column-end': `span ${obj.width}`,
           'grid-row-start': obj.y,
-          'grid-row-end': obj.height
+          'grid-row-end': `span ${obj.height}`
         }
       },
       getAnnotationStyle (annotation) {
@@ -939,5 +945,6 @@
       top 0px
 
   .cell-item-tmp-mobile
-    background-color rgba(0, 0, 255, .25)
+    background-color rgba(0, 0, 255, .15)
+    backdrop-filter blur(0px)
 </style>