zoom. n.line: Fix mobile pinch zoom

vezwork · May 30, 2024 · eea5f0a · eea5f0a
1 parent c735ae8
commit eea5f0a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/dist/demo/articles/exploring_spaces_3_and_a_half/dragging0.js b/dist/demo/articles/exploring_spaces_3_and_a_half/dragging0.js
@@ -56,16 +56,19 @@ let state = {
         this._pos = x;
     },
     render() {
-        // scale and negate pos so dragging is in the right direction and not too fast.
         const x = this._pos;
-        // NUM, ZOOM, LAYOUT CALC
-        const zoomBaseExponent = zoom / 3000;
-        const zz = BASE ** zoomBaseExponent;
+        // ARBITRARY PRECISION INDEPENDENT:
         const halfWidth = (svg.clientWidth * SVG_WIDTH_SCALE) / 2;
-        const thing = Math.floor(halfWidth / SPACING); // should be ceil
+        const thing = Math.ceil(halfWidth / SPACING);
+        // ARBITRARY PRECISION SIMPLE NUMBER
+        const zoomBaseExponent = zoom / 3000;
         const maxIterationsForHalfTicks = thing * 10 ** mod(-zoomBaseExponent, 1);
         const baseExponent = -Math.ceil(zoomBaseExponent);
+        // NUM, ZOOM, LAYOUT CALC
+        // EXP
+        const zz = BASE ** zoomBaseExponent;
         const numTickGap = BASE ** baseExponent;
+        // TRUNC
         // as you zoom in this uses more of x, as you zoom out it truncates
         const startInGapBase = Math.round(x / numTickGap);
         const startX = startInGapBase * numTickGap;

diff --git a/dist/demo/articles/exploring_spaces_3_and_a_half/makeDraggable.js b/dist/demo/articles/exploring_spaces_3_and_a_half/makeDraggable.js
@@ -43,7 +43,7 @@ export function makeDraggable(el, eventToCoordinates, onMove = ([x, y]) => { },
             const curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
             if (prevDiff > 0) {
                 const diff = curDiff - prevDiff;
-                onZoom(diff);
+                onZoom(diff * 10);
             }
             // Cache the distance for the next move event
             prevDiff = curDiff;

diff --git a/src/demo/articles/exploring_spaces_3_and_a_half/dragging0.ts b/src/demo/articles/exploring_spaces_3_and_a_half/dragging0.ts
@@ -64,20 +64,23 @@ let state = {
     this._pos = x;
   },
   render() {
-    // scale and negate pos so dragging is in the right direction and not too fast.
     const x = this._pos;
+    // ARBITRARY PRECISION INDEPENDENT:
+    const halfWidth = (svg.clientWidth * SVG_WIDTH_SCALE) / 2;
+    const thing = Math.ceil(halfWidth / SPACING);
 
-    // NUM, ZOOM, LAYOUT CALC
-
+    // ARBITRARY PRECISION SIMPLE NUMBER
     const zoomBaseExponent = zoom / 3000;
-    const zz = BASE ** zoomBaseExponent;
-
-    const halfWidth = (svg.clientWidth * SVG_WIDTH_SCALE) / 2;
-    const thing = Math.floor(halfWidth / SPACING); // should be ceil
     const maxIterationsForHalfTicks = thing * 10 ** mod(-zoomBaseExponent, 1);
-
     const baseExponent = -Math.ceil(zoomBaseExponent);
+
+    // NUM, ZOOM, LAYOUT CALC
+
+    // EXP
+    const zz = BASE ** zoomBaseExponent;
     const numTickGap = BASE ** baseExponent;
+
+    // TRUNC
     // as you zoom in this uses more of x, as you zoom out it truncates
     const startInGapBase = Math.round(x / numTickGap);
     const startX = startInGapBase * numTickGap;

diff --git a/src/demo/articles/exploring_spaces_3_and_a_half/makeDraggable.ts b/src/demo/articles/exploring_spaces_3_and_a_half/makeDraggable.ts
@@ -60,7 +60,7 @@ export function makeDraggable(
 
       if (prevDiff > 0) {
         const diff = curDiff - prevDiff;
-        onZoom(diff);
+        onZoom(diff * 10);
       }
 
       // Cache the distance for the next move event