@fundar/data-chart-telling 0.0.36 → 0.0.37

package/dist/layout/coordinates/zoom.svelte.js

@@ -2,30 +2,33 @@ import { select } from 'd3-selection';
 import { zoom as d3zoom, zoomIdentity } from 'd3-zoom';
 /**
  * Wires drag-pan + scroll-zoom onto a DOM node via d3-zoom, exposing the
- * resulting transform as reactive Svelte state. The caller applies it as an
- * SVG `<g transform="translate(x,y) scale(k)">` wrapper — cheap, since the
- * underlying `d3-geo` projection is computed once by svelteplot and never
- * recomputed per zoom tick.
+ * resulting transform as reactive Svelte state, applied by the caller as an
+ * SVG `<g transform="translate(x,y) scale(k)">` wrapper.
  *
- * Known v1 limitation: svelteplot's own `<Pointer>` hit-tests in the plot's
- * pre-zoom projected coordinate space, so hover/tooltip matching does not
- * compensate for an active pan/zoom transform — it still works, but targets
- * a shape's un-zoomed position rather than its currently-visible one.
+ * `panEnabled`/`zoomEnabled` gate drag-translate and wheel/pinch-scale
+ * independently, as separate `.filter()`s on the same underlying instance.
+ *
+ * Limitations: hover/tooltip hit-testing doesn't compensate for an active
+ * transform. Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled`
+ * (d3-zoom can't distinguish a pinch from a one-finger drag until underway).
  */
 export function createGeoZoom(args) {
     let transform = $state({ x: 0, y: 0, k: 1 });
     $effect(() => {
         const el = args.node();
-        if (!args.enabled() || !el)
+        if ((!args.panEnabled() && !args.zoomEnabled()) || !el)
             return;
         const cfg = args.config();
         const behavior = d3zoom()
             .scaleExtent([cfg?.min ?? 1, cfg?.max ?? 8])
             .filter((event) => {
-            if (args.disableDrag?.() && event.type !== 'wheel')
+            const isWheel = event.type === 'wheel';
+            if (isWheel)
+                return args.zoomEnabled();
+            if (!args.panEnabled() || args.disableDrag?.())
                 return false;
             // d3-zoom's own default filter, minus the part this replaces.
-            return (!event.ctrlKey || event.type === 'wheel') && !event.button;
+            return !event.ctrlKey && !event.button;
         })
             .on('zoom', (event) => {
             transform = { x: event.transform.x, y: event.transform.y, k: event.transform.k };
@@ -45,6 +48,6 @@ export function createGeoZoom(args) {
     return {
         get transform() {
             return transform;
-        },
+        }
     };
 }