@cr8rcho/alkahest 0.1.11 → 0.1.13

package/dist/assets/dashboard.html

@@ -64,6 +64,8 @@
       #theme-toggle svg, #fit-btn svg { width: 16px; height: 16px; }
       [data-theme="dark"] #theme-toggle .i-sun { display: block; } [data-theme="dark"] #theme-toggle .i-moon { display: none; }
       [data-theme="light"] #theme-toggle .i-sun { display: none; } [data-theme="light"] #theme-toggle .i-moon { display: block; }
+      /* Fit + toggle are a tight pair (8px), set apart from the rest of the toolbar by its 16px gap. */
+      .toolbar-actions { display: inline-flex; align-items: center; gap: 8px; }
       .brand { font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
       .brand .sub { color: var(--muted); font-weight: 400; margin-left: 6px; }
       .counts { color: var(--muted); white-space: nowrap; }
@@ -165,8 +167,10 @@
         <span><span class="edge" style="border-top-style: dotted; border-color: var(--edge)"></span>Contains</span>
         <span><span class="edge" style="border-top-style: dashed; border-color: var(--edge)"></span>Call</span>
       </div>
-      <button class="theme-toggle" id="fit-btn" aria-label="Fit to view" title="Fit to view"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg></button>
-      <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme" title="Toggle theme"><svg class="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg><svg class="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></button>
+      <div class="toolbar-actions">
+        <button class="theme-toggle" id="fit-btn" aria-label="Fit to view" title="Fit to view"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg></button>
+        <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme" title="Toggle theme"><svg class="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg><svg class="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></button>
+      </div>
     </header>
     <main>
       <svg id="graph">
@@ -602,18 +606,54 @@
       const DRAG_THRESHOLD = 4;
       let down = null; // {node|null, x, y, moved, pointerId}
 
+      // Active pointers for multi-touch. Two pointers down → pinch-to-zoom.
+      const pointers = new Map(); // pointerId -> {x, y}
+      let pinch = null;           // { dist, midX, midY } for the running gesture
+
+      function startPinch() {
+        const pts = [...pointers.values()];
+        const dx = pts[0].x - pts[1].x, dy = pts[0].y - pts[1].y;
+        const rect = svg.getBoundingClientRect();
+        pinch = {
+          dist: Math.hypot(dx, dy) || 1,
+          midX: (pts[0].x + pts[1].x) / 2 - rect.left,
+          midY: (pts[0].y + pts[1].y) / 2 - rect.top,
+        };
+        // a pinch is purely a zoom — abandon any in-progress tap / pan / node drag
+        dragging = null; panStart = null; down = null;
+      }
+
       function onNodeDown(ev, n) {
         ev.stopPropagation();
-        down = { node: n, x: ev.clientX, y: ev.clientY, moved: false, pointerId: ev.pointerId };
+        pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
         svg.setPointerCapture(ev.pointerId);
+        if (pointers.size === 2) { startPinch(); return; }
+        down = { node: n, x: ev.clientX, y: ev.clientY, moved: false, pointerId: ev.pointerId };
       }
       svg.addEventListener("pointerdown", (ev) => {
+        pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
+        svg.setPointerCapture(ev.pointerId);
+        if (pointers.size === 2) { startPinch(); return; }
         if (down) return; // already started on a node
         down = { node: null, x: ev.clientX, y: ev.clientY, moved: false, pointerId: ev.pointerId };
         panStart = { x: ev.clientX - tx, y: ev.clientY - ty };
-        svg.setPointerCapture(ev.pointerId);
       });
       svg.addEventListener("pointermove", (ev) => {
+        if (pointers.has(ev.pointerId)) pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
+        if (pinch && pointers.size >= 2) {
+          const pts = [...pointers.values()];
+          const dx = pts[0].x - pts[1].x, dy = pts[0].y - pts[1].y;
+          const dist = Math.hypot(dx, dy) || 1;
+          const rect = svg.getBoundingClientRect();
+          const mx = (pts[0].x + pts[1].x) / 2 - rect.left, my = (pts[0].y + pts[1].y) / 2 - rect.top;
+          // pan by how far the two-finger midpoint moved, then zoom around that midpoint
+          tx += mx - pinch.midX; ty += my - pinch.midY;
+          const nk = Math.min(4, Math.max(0.2, k * (dist / pinch.dist)));
+          tx = mx - (mx - tx) * (nk / k); ty = my - (my - ty) * (nk / k); k = nk;
+          pinch.dist = dist; pinch.midX = mx; pinch.midY = my;
+          applyTransform();
+          return;
+        }
         if (!down) return;
         if (!down.moved && Math.hypot(ev.clientX - down.x, ev.clientY - down.y) > DRAG_THRESHOLD) {
           down.moved = true;
@@ -623,8 +663,21 @@
         if (dragging) { const w = toWorld(ev.clientX, ev.clientY); dragging.x = w.x; dragging.y = w.y; dragging.vx = 0; dragging.vy = 0; } // free 2D since it's force-based
         else if (panStart) { tx = ev.clientX - panStart.x; ty = ev.clientY - panStart.y; applyTransform(); }
       });
-      svg.addEventListener("pointerup", () => {
-        if (down && !down.moved) {       // didn't move = tap
+      function onPointerUp(ev) {
+        pointers.delete(ev.pointerId);
+        if (pinch) {
+          if (pointers.size < 2) {
+            pinch = null;
+            if (pointers.size === 1) {
+              // one finger left after a pinch → resume panning from there (no jump)
+              const [id, p] = [...pointers.entries()][0];
+              down = { node: null, x: p.x, y: p.y, moved: true, pointerId: id };
+              panStart = { x: p.x - tx, y: p.y - ty };
+            }
+          }
+          return; // a pinch gesture never counts as a tap
+        }
+        if (ev.type !== "pointercancel" && down && !down.moved) { // didn't move = tap
           if (down.node) select(down.node);
           else clearSelection();
         } else if (dragging) {
@@ -632,7 +685,9 @@
           alpha = 0.06;
         }
         dragging = null; panStart = null; down = null;
-      });
+      }
+      svg.addEventListener("pointerup", onPointerUp);
+      svg.addEventListener("pointercancel", onPointerUp);
       svg.addEventListener("wheel", (ev) => {
         ev.preventDefault();
         const rect = svg.getBoundingClientRect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cr8rcho/alkahest",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "publishConfig": {
     "access": "public"
   },