Mobile tools

lee-b · Dec 7, 2020 · b6c3a9c · b6c3a9c
1 parent 489396a
commit b6c3a9c
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 4 deletions.
diff --git a/src/components/js/grid.js b/src/components/js/grid.js
@@ -79,7 +79,7 @@ export default class Grid {
         mc.on('panmove', event => {
             if (Utils.is_mobile) {
                 this.calc_offset()
-                this.propagate('mousemove', event)
+                this.propagate('mousemove', this.touch2mouse(event))
             }
             if (this.drug) {
                 this.mousedrag(
@@ -106,6 +106,7 @@ export default class Grid {
 
         mc.on('tap', event => {
             if (!Utils.is_mobile) return
+            this.sim_mousedown(event)
             clearInterval(this.fade_id)
             this.comp.$emit('cursor-changed', {})
             this.comp.$emit('cursor-changed', {
@@ -134,10 +135,12 @@ export default class Grid {
         })
 
         mc.on('press', event => {
+            if (!Utils.is_mobile) return
             clearInterval(this.fade_id)
             this.calc_offset()
             this.emit_cursor_coord(event, { mode: 'aim' })
             setTimeout(() => this.update())
+            this.sim_mousedown(event)
         })
 
         let add = addEventListener
@@ -175,6 +178,7 @@ export default class Grid {
     }
 
     mousedown(event) {
+        if (Utils.is_mobile) return
         this.propagate('mousedown', event)
         this.comp.$emit('cursor-locked', true)
         if (event.defaultPrevented) return
@@ -183,6 +187,30 @@ export default class Grid {
         })
     }
 
+    // Simulated mousedown (for mobile)
+    sim_mousedown(event) {
+        if (event.srcEvent.defaultPrevented) return
+        this.comp.$emit('custom-event', {
+            event: 'grid-mousedown',
+            args: [this.id, event]
+        })
+        this.propagate('mousemove', this.touch2mouse(event))
+        this.propagate('mousedown', this.touch2mouse(event))
+    }
+
+    // Convert touch to "mouse" event
+    touch2mouse(e) {
+        this.calc_offset()
+        return {
+            original: e.srcEvent,
+            layerX: e.center.x + this.offset_x,
+            layerY: e.center.y + this.offset_y,
+            preventDefault: function() {
+                this.original.preventDefault()
+            }
+        }
+    }
+
     click(event) {
         this.propagate('click', event)
     }

diff --git a/src/components/primitives/line.js b/src/components/primitives/line.js
@@ -2,6 +2,7 @@
 // Draws a line, adds corresponding collision f-n
 
 import Math2 from '../../stuff/math.js'
+import Utils from '../../stuff/utils.js'
 
 export default class Line {
 
@@ -10,6 +11,7 @@ export default class Line {
         this.ctx = ctx
         this.comp = overlay
         this.T = overlay.$props.config.TOOL_COLL
+        if (Utils.is_mobile) this.T *= 2
     }
 
     // p1[t, $], p2[t, $] (time-price coordinates)

diff --git a/src/components/primitives/pin.js b/src/components/primitives/pin.js
@@ -1,5 +1,7 @@
 // Semi-automatic pin object. For stretching things.
 
+import Utils from '../../stuff/utils.js'
+
 export default class Pin {
 
     // (Comp reference, a name in overlay settings,
@@ -8,6 +10,12 @@ export default class Pin {
 
         this.RADIUS = comp.$props.config.PIN_RADIUS || 5.5
         this.RADIUS_SQ = Math.pow(this.RADIUS + 7, 2)
+
+        if (Utils.is_mobile) {
+            this.RADIUS += 2
+            this.RADIUS_SQ *= 2.5
+        }
+
         this.COLOR_BACK = comp.$props.colors.back
         this.COLOR_BR = comp.$props.colors.text
 
@@ -133,7 +141,7 @@ export default class Pin {
     }
 
     mousedown(event, force = false) {
-        if (event.defaultPrevented && !force) return
+        if (Utils.default_prevented(event) && !force) return
         switch (this.state) {
             case 'tracking':
                 this.state = 'settled'

diff --git a/src/components/primitives/seg.js b/src/components/primitives/seg.js
@@ -2,6 +2,7 @@
 // Draws a segment, adds corresponding collision f-n
 
 import Math2 from '../../stuff/math.js'
+import Utils from '../../stuff/utils.js'
 
 export default class Seg {
 
@@ -10,6 +11,7 @@ export default class Seg {
         this.ctx = ctx
         this.comp = overlay
         this.T = overlay.$props.config.TOOL_COLL
+        if (Utils.is_mobile) this.T *= 2
     }
 
     // p1[t, $], p2[t, $] (time-price coordinates)

diff --git a/src/mixins/tool.js b/src/mixins/tool.js
@@ -2,14 +2,14 @@
 // Usuful stuff for creating tools. Include as mixin
 
 import Keys from '../stuff/keys.js'
+import Utils from '../stuff/utils.js'
 
 export default {
     methods: {
         init_tool() {
             // Collision functions (float, float) => bool,
             this.collisions = []
             this.pins = []
-
             this.mouse.on('mousemove', e => {
                 if (this.collisions.some(f => f(
                     this.mouse.x, this.mouse.y,
@@ -22,7 +22,7 @@ export default {
             })
 
             this.mouse.on('mousedown', e => {
-                if (e.defaultPrevented) return
+                if (Utils.default_prevented(e)) return
                 if (this.collisions.some(f => f(
                     this.mouse.x, this.mouse.y,
                 ))) {

diff --git a/src/stuff/utils.js b/src/stuff/utils.js
@@ -316,6 +316,13 @@ export default {
         return this.is_mobile ? 'explore' : 'default'
     },
 
+    default_prevented(event) {
+        if (event.original) {
+            return event.original.defaultPrevented
+        }
+        return event.defaultPrevented
+    },
+
     // WTF with modern web development
     is_mobile: (w => 'onorientationchange' in w &&
        (!!navigator.maxTouchPoints ||