mobile: created touch resize handler for new cells (unfinished)

partials/GridEditor.vue

@@ -165,7 +165,8 @@
     position="bottom-right")
 
       //------------------------- buttons
-      .row.text-dark(style="background-color: rgba(0, 0, 0, .2);")
+      // .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
@@ -218,7 +219,10 @@
           .text-center
             q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat, size="md")
               q-icon(name="add")
-
+      // --------------------------------------------------------------------------------------------------- test-button
+      div.test-button.fixed.q-pa-md.bg-dark.text-white(v-touch-pan="testButton", round, flat,
+      :style="{left: cursor.x - 20 + 'px', top: cursor.y - 20 + 'px'}")
+        q-icon.rotate-45(name="arrow_forward_ios")
 </template>
 
 <script>
@@ -273,7 +277,8 @@
         mobileTempCell: {x: 0, y: 0, width: 1, height: 1, show: false, onGrid: false, button: false},
         slide: undefined,
         modal: false,
-        carousel: {visibility: false, icon: 'open_with', slide: 0}
+        carousel: {visibility: false, icon: 'open_with', slide: 0},
+        cursor: {x: undefined, y: undefined}
       }
     },
     computed: {
@@ -371,6 +376,29 @@
       }
     },
     methods: {
+      testButton (obj) {
+        this.cursor = {x: obj.position.left, y: obj.position.top}
+
+        // ---> panGrid
+        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
+        }
+      },
       clearCachedCell () {
         this.$store.commit('mosys/cacheNewCell', undefined)
         this.clearTempCell()
@@ -1095,6 +1123,12 @@
   .transition-opacity
     transition opacity ease 350ms
 
+  .test-button
+    left 0
+    top 100px
+    width 40px
+    height 40px
+    border-radius 1000px
 </style>
 
 <style lang="stylus">