mobile: added dummy "move new cell"-button for testing

partials/GridEditor.vue

@@ -144,15 +144,22 @@
 
           //----- move handler (top left)
           // :style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}")
+          // :class="[handlerNewCell.move.inViewport ? 'absolute' : 'fixed', {'pushed': !handlerNewCell.move.pushed}]")
           .handler-new-cell.move.absolute.text-dark.justify-center.row.bg-white.shadow-6(
           v-if="mobileTempCell.onGrid && !handlerNewCell.resize.pushed",
           v-touch-pan="handleMoveCell", round, flat,
           :style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}",
-          :class="{'pushed': !handlerNewCell.move.pushed}")
+          :class="[{'pushed': !handlerNewCell.move.pushed}]")
             //:style="setHandlerStyle()")
             // q-icon.self-center.rotate-180(name="signal_cellular_4_bar", size="12px", style="margin-top: 2px;")
             q-icon.self-center.rotate-180(name="open_with", size="22px")
 
+          .handler-new-cell.fixed.text-dark.justify-center.row.bg-white.shadow-6(
+          v-touch-pan="handleMoveCell",
+          :class="{'dummyButtonHide': !dummyButton.visibility}",
+          :style="{left: dummyButton.left + 'px', top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
+            q-icon.self-center.rotate-180(name="open_with", size="22px")
+
           //----- resize handler (bottom right)
           .handler-new-cell.resize.absolute.text-dark.justify-center.row.bg-white.shadow-6(
           v-if="mobileTempCell.onGrid && !handlerNewCell.move.pushed",
@@ -316,9 +323,10 @@
         // cursor: {x: undefined, y: undefined},
         handlerNewCell: {
           size: {width: 40, height: 40},
-          move: {x: 20, y: undefined, pushed: false, pos: undefined},
+          move: {x: 20, y: undefined, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined},
           resize: {x: undefined, y: undefined, pushed: false, pos: undefined}
-        }
+        },
+        dummyButton: {visibility: true, left: 0}
       }
     },
     computed: {
@@ -387,10 +395,10 @@
       }
       options.threshold = th
 
-      let observer = new IntersectionObserver(this.observerCallback, options)
-      observer.observe(this.$refs._mobileTempCell)
-      this.observer = observer
       */
+      let observer = new IntersectionObserver(this.observerCallback)
+      observer.observe(this.$refs.move)
+      this.observer = observer
     },
     beforeDestroy () {
       this.observer.disconnect()
@@ -459,6 +467,20 @@
       },
       // observerCallback (entries, observer) {
       observerCallback (entries) {
+        let btn = entries[0]
+        console.log(btn)
+        // if (!_tempCell.isIntersecting) {
+        if (btn.boundingClientRect.x < this.handlerNewCell.size.width) {
+          console.log('outside')
+          // this.handlerNewCell.move.inViewport = false
+          // this.handlerNewCell.move.x = 20
+        }
+        else {
+          console.log('INSIDE')
+          // this.handlerNewCell.move.inViewport = true
+          // this.handlerNewCell.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
+        }
+        /*
         let entryX = entries[0].boundingClientRect.x
         let _handlerNewCell = this.handlerNewCell
         let _handlerNewCellHalf = _handlerNewCell.size.width / 2
@@ -481,8 +503,10 @@
         if (entryX > window.innerWidth - _handlerNewCell.size.width) {
           _handlerNewCell.move.pos = 'fixed on-right-side'
         }
+        */
       },
       handleMoveCell (obj) {
+        this.dummyButton.left = -100
         this.handlerNewCell.move.x = obj.position.left
         this.handlerNewCell.move.y = obj.position.top
 
@@ -1284,6 +1308,9 @@
   //************************************************** mobile: new cell
   handler-width = 40px
 
+  .dummyButtonHide
+    left -50px
+    /*opacity 0*/
   .handler-new-cell
     width handler-width
     height handler-width