layerchart 0.97.1 → 0.98.0

package/dist/components/Chart.svelte

@@ -423,7 +423,7 @@
         initialTranslate={initialTransform?.translate}
         initialScale={initialTransform?.scale}
         processTranslate={geo
-          ? (x, y, deltaX, deltaY, scale) => {
+          ? (x, y, deltaX, deltaY) => {
               if (geo.applyTransform?.includes('rotate')) {
                 // When applying transform to rotate, invert `y` values and reduce sensitivity based on projection scale
                 // see: https://observablehq.com/@benoldenburg/simple-globe and https://observablehq.com/@michael-keith/draggable-globe-in-d3
@@ -434,12 +434,9 @@
                   x: x + deltaX * (sensitivity / projectionScale),
                   y: y + deltaY * (sensitivity / projectionScale) * -1,
                 };
-              } else if (geo.applyTransform?.includes('translate')) {
-                // When applying to `translate`, use pointer values as is (with no `scale` adjustment)
-                return { x: x + deltaX, y: y + deltaY };
               } else {
                 // Apply default TransformContext.processTransform (passing `undefined` below appears to not work when checking for `geo?.applyTransform` exists)
-                return { x: x + deltaX / scale, y: y + deltaY / scale };
+                return { x: x + deltaX, y: y + deltaY };
               }
             }
           : undefined}

package/dist/components/Chart.svelte.d.ts

@@ -223,10 +223,9 @@ declare class __sveltets_Render<TData> {
         /** Props passed to TransformContext */
         transform?: Partial<{
             mode?: "none" | "canvas" | "manual";
-            translateOnScale?: boolean;
             spring?: boolean | Parameters<typeof import("../stores/motionStore").motionStore>[1]["spring"];
-            tweened?: boolean | Parameters<typeof import("../stores/motionStore").motionStore>[1] /** Override the default r range of `[1, 25]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `rReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */["tweened"];
-            processTranslate?: (x: number, y: number, deltaX: number, deltaY: number, scale: number) => {
+            tweened?: boolean | Parameters<typeof import("../stores/motionStore").motionStore>[1]["tweened"];
+            processTranslate?: (x: number, y: number, deltaX: number, deltaY: number) => {
                 x: number;
                 y: number;
             };

package/dist/components/TransformContext.svelte

@@ -61,22 +61,14 @@
   const { width, height } = chartContext();
 
   export let mode: TransformMode = 'none';
-  /** Translate towards point (ex. mouse cursor/center) while zooming in/out */
-  export let translateOnScale = false;
 
   export let spring: boolean | Parameters<typeof motionStore>[1]['spring'] = undefined;
   export let tweened: boolean | Parameters<typeof motionStore>[1]['tweened'] = undefined;
 
-  export let processTranslate = (
-    x: number,
-    y: number,
-    deltaX: number,
-    deltaY: number,
-    scale: number
-  ) => {
+  export let processTranslate = (x: number, y: number, deltaX: number, deltaY: number) => {
     return {
-      x: x + deltaX / scale,
-      y: y + deltaY / scale,
+      x: x + deltaX,
+      y: y + deltaY,
     };
   };
 
@@ -182,7 +174,7 @@
       e.currentTarget?.setPointerCapture(e.pointerId);
 
       setTranslate(
-        processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY, $scale),
+        processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY),
         // @ts-expect-error
         spring ? { hard: true } : tweened ? { duration: 0 } : undefined
       );
@@ -232,7 +224,7 @@
     } else if ($scrollMode === 'translate') {
       translate.update(
         (startTranslate) =>
-          processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY, $scale),
+          processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY),
         // @ts-expect-error
         spring ? { hard: true } : tweened ? { duration: 0 } : undefined
       );
@@ -251,18 +243,16 @@
     const newScale = $scale * value;
     setScale(newScale, options);
 
-    if (translateOnScale) {
-      // Translate towards point (ex. mouse cursor/center) while zooming in/out
-      const invertTransformPoint = {
-        x: (point.x - $translate.x) / currentScale,
-        y: (point.y - $translate.y) / currentScale,
-      };
-      const newTranslate = {
-        x: point.x - invertTransformPoint.x * newScale,
-        y: point.y - invertTransformPoint.y * newScale,
-      };
-      setTranslate(newTranslate, options);
-    }
+    // Translate towards point (ex. mouse cursor/center) while zooming in/out
+    const invertTransformPoint = {
+      x: (point.x - $translate.x) / currentScale,
+      y: (point.y - $translate.y) / currentScale,
+    };
+    const newTranslate = {
+      x: point.x - invertTransformPoint.x * newScale,
+      y: point.y - invertTransformPoint.y * newScale,
+    };
+    setTranslate(newTranslate, options);
   }
 
   const translating = motionFinishHandler();

package/dist/components/TransformContext.svelte.d.ts

@@ -37,10 +37,9 @@ import { motionStore, type MotionOptions } from '../stores/motionStore.js';
 declare const __propDef: {
     props: {
         mode?: TransformMode;
-        /** Translate towards point (ex. mouse cursor/center) while zooming in/out */ translateOnScale?: boolean;
         spring?: boolean | Parameters<typeof motionStore>[1]["spring"];
         tweened?: boolean | Parameters<typeof motionStore>[1]["tweened"];
-        processTranslate?: (x: number, y: number, deltaX: number, deltaY: number, scale: number) => {
+        processTranslate?: (x: number, y: number, deltaX: number, deltaY: number) => {
             x: number;
             y: number;
         };

package/dist/components/charts/PieChart.svelte.d.ts

@@ -151,10 +151,9 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         transform?: Partial<{
             mode?: "none" | "canvas" | "manual";
-            translateOnScale?: boolean;
             spring?: boolean | Parameters<typeof import("../../stores/motionStore").motionStore>[1]["spring"];
             tweened?: boolean | Parameters<typeof import("../../stores/motionStore").motionStore>[1]["tweened"];
-            processTranslate?: (x: number, y: number, deltaX: number, deltaY: number, scale: number) => {
+            processTranslate?: (x: number, y: number, deltaX: number, deltaY: number) => {
                 x: number;
                 y: number;
             };

package/dist/components/layout/Canvas.svelte

@@ -177,12 +177,7 @@
       };
       context.translate(newTranslate.x, newTranslate.y);
     } else if (mode === 'canvas') {
-      const center = { x: $width / 2, y: $height / 2 };
-      const newTranslate = {
-        x: $translate.x * $scale + center.x - center.x * $scale,
-        y: $translate.y * $scale + center.y - center.y * $scale,
-      };
-      context.translate(newTranslate.x, newTranslate.y);
+      context.translate($translate.x, $translate.y);
       context.scale($scale, $scale);
     }
 

package/dist/components/layout/Html.svelte

@@ -40,12 +40,7 @@
     ? `translate(${center === 'x' || center === true ? $width / 2 : 0}, ${center === 'y' || center === true ? $height / 2 : 0})`
     : '';
   $: if (mode === 'canvas') {
-    const center = { x: $width / 2, y: $height / 2 };
-    const newTranslate = {
-      x: $translate.x * $scale + center.x - center.x * $scale,
-      y: $translate.y * $scale + center.y - center.y * $scale,
-    };
-    transform = `translate(${newTranslate.x}px,${newTranslate.y}px) scale(${$scale})`;
+    transform = `translate(${$translate.x}px,${$translate.y}px) scale(${$scale})`;
   }
 
   setRenderContext('html');

package/dist/components/layout/Svg.svelte

@@ -44,12 +44,7 @@
     ? `translate(${center === 'x' || center === true ? $width / 2 : 0}, ${center === 'y' || center === true ? $height / 2 : 0})`
     : '';
   $: if (mode === 'canvas') {
-    const center = { x: $width / 2, y: $height / 2 };
-    const newTranslate = {
-      x: $translate.x * $scale + center.x - center.x * $scale,
-      y: $translate.y * $scale + center.y - center.y * $scale,
-    };
-    transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
+    transform = `translate(${$translate.x},${$translate.y}) scale(${$scale})`;
   }
 
   setRenderContext('svg');

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.97.1",
+  "version": "0.98.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.12",
     "@mdi/js": "^7.4.47",