layerchart 0.97.0 → 0.98.0

package/dist/components/BrushContext.svelte

@@ -42,13 +42,12 @@
 
 <script lang="ts">
   import { extent, min, max } from 'd3-array';
-  import { clamp } from '@layerstack/utils';
+  import { clamp, localPoint } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
   import { Logger } from '@layerstack/utils';
 
   import { chartContext } from './ChartContext.svelte';
 
-  import { localPoint } from '../utils/event.js';
   import type { DomainType } from '../utils/scales.js';
   import { add } from '../utils/math.js';
   import type { HTMLAttributes } from 'svelte/elements';
@@ -143,7 +142,7 @@
       logger.debug('drag start');
       e.stopPropagation();
 
-      const startPoint = localPoint(rootEl, e);
+      const startPoint = localPoint(e, rootEl);
 
       if (
         startPoint &&
@@ -165,7 +164,7 @@
       onbrushstart({ xDomain, yDomain });
 
       const onPointerMove = (e: PointerEvent) => {
-        const currentPoint = localPoint(rootEl, e);
+        const currentPoint = localPoint(e, rootEl);
         fn(start, {
           x: $xScale.invert?.(currentPoint?.x ?? 0),
           y: $yScale.invert?.(currentPoint?.y ?? 0),
@@ -175,7 +174,7 @@
       };
 
       const onPointerUp = (e: PointerEvent) => {
-        const currentPoint = localPoint(rootEl, e);
+        const currentPoint = localPoint(e, rootEl);
         const xPointDelta = Math.abs((startPoint?.x ?? 0) - (currentPoint?.x ?? 0));
         const yPointDelta = Math.abs((startPoint?.y ?? 0) - (currentPoint?.y ?? 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]["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;
             };
@@ -302,7 +301,9 @@ declare class __sveltets_Render<TData> {
             }) => void;
             onbrushstart?: (detail: {
                 xDomain?: DomainType;
-                yDomain?: DomainType;
+                yDomain
+                /** Exposed via bind: to support `bind:brushContext` for external access (ex. `brushContext.xDomain) */
+                ?: DomainType;
             }) => void;
             onbrushend?: (detail: {
                 xDomain?: DomainType;

package/dist/components/Group.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { onDestroy, tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+  import { cls } from '@layerstack/tailwind';
 
   import { getRenderContext } from './Chart.svelte';
   import { chartContext } from './ChartContext.svelte';
   import { motionStore } from '../stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
-
   const { width, height } = chartContext();
 
   /**
@@ -116,6 +116,7 @@
   <div
     style:transform
     {...$$restProps}
+    class={cls('absolute', $$restProps.class)}
     on:click={onclick}
     on:dblclick={ondblclick}
     on:pointerenter={onpointerenter}

package/dist/components/TransformContext.svelte

@@ -56,26 +56,19 @@
 <script lang="ts">
   import { chartContext } from './ChartContext.svelte';
   import { motionStore, type MotionOptions, motionFinishHandler } from '../stores/motionStore.js';
+  import { localPoint } from '@layerstack/utils';
 
   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,
     };
   };
 
@@ -162,7 +155,7 @@
     ondragstart?.();
   }
 
-  function onPointerMove(e: PointerEvent) {
+  function onPointerMove(e: PointerEvent & { currentTarget: HTMLDivElement }) {
     if (!pointerDown) return;
 
     e.preventDefault(); // Stop text selection
@@ -178,11 +171,10 @@
 
     if ($dragging) {
       e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
-      // @ts-expect-error
       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();
@@ -281,13 +271,6 @@
     scaling.handle(scale.set(value, options));
   }
 
-  function localPoint(e: PointerEvent | MouseEvent | WheelEvent) {
-    return {
-      x: e.offsetX,
-      y: e.offsetY,
-    };
-  }
-
   $: center = { x: $width / 2, y: $height / 2 };
 
   $: viewportCenter = {

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

@@ -38,14 +38,13 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { cls } from '@layerstack/tailwind';
-  import { Logger } from '@layerstack/utils';
+  import { Logger, localPoint } from '@layerstack/utils';
 
   import { setRenderContext } from '../Chart.svelte';
   import { chartContext } from '../ChartContext.svelte';
   import { transformContext } from '../TransformContext.svelte';
   import { getPixelColor, scaleCanvas, type ComputedStylesOptions } from '../../utils/canvas.js';
   import { getColorStr, rgbColorGenerator } from '../../utils/color.js';
-  import { localPoint } from '../../utils/event.js';
   const { width, height, containerWidth, containerHeight, padding } = chartContext();
 
   /** The `<canvas>` tag. Useful for bindings. */
@@ -104,7 +103,7 @@
   const componentByColor = new Map<string, ComponentRender>();
 
   function getPointerComponent(e: PointerEvent | MouseEvent | TouchEvent) {
-    const { x, y } = localPoint(e.target as HTMLCanvasElement, e) ?? { x: 0, y: 0 };
+    const { x, y } = localPoint(e);
     const color = getPixelColor(hitCanvasContext!, x, y);
     const colorKey = getColorStr(color);
     const component = componentByColor.get(colorKey);
@@ -178,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/dist/components/tooltip/TooltipContext.svelte

@@ -47,7 +47,7 @@
   import { writable } from 'svelte/store';
   import { bisector, max, min } from 'd3-array';
   import { quadtree as d3Quadtree, type Quadtree } from 'd3-quadtree';
-  import { sortFunc } from '@layerstack/utils';
+  import { sortFunc, localPoint } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Svg from './../layout/Svg.svelte';
@@ -55,7 +55,6 @@
   import ChartClipPath from './../ChartClipPath.svelte';
   import Voronoi from './../Voronoi.svelte';
 
-  import { localPoint } from '../../utils/event.js';
   import { isScaleBand, scaleInvert } from '../../utils/scales.js';
   import { cartesianToPolar } from '../../utils/math.js';
   import { quadtreeRects } from '../../utils/quadtree.js';
@@ -189,7 +188,7 @@
     }
 
     const referenceNode = (e.target as Element).closest('.layercake-container')!;
-    const point = localPoint(referenceNode, e);
+    const point = localPoint(e, referenceNode);
     const pointerX = point?.x ?? 0;
     const pointerY = point?.y ?? 0;
 

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.97.0",
+  "version": "0.98.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.12",
     "@mdi/js": "^7.4.47",
@@ -41,7 +41,7 @@
     "autoprefixer": "^10.4.20",
     "marked": "^15.0.7",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.217.0",
+    "posthog-js": "^1.217.2",
     "prettier": "^3.5.0",
     "prettier-plugin-svelte": "^3.3.3",
     "prism-svelte": "^0.5.0",
@@ -50,7 +50,7 @@
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
-    "svelte": "5.19.10",
+    "svelte": "5.20.0",
     "svelte-check": "^4.1.4",
     "svelte-json-tree": "^2.2.0",
     "svelte-ux": "^0.90.1",
@@ -68,10 +68,10 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "^0.0.11",
-    "@layerstack/svelte-stores": "^0.0.10",
-    "@layerstack/tailwind": "^0.0.11",
-    "@layerstack/utils": "^0.0.7",
+    "@layerstack/svelte-actions": "^0.0.12",
+    "@layerstack/svelte-stores": "^0.0.11",
+    "@layerstack/tailwind": "^0.0.12",
+    "@layerstack/utils": "^0.1.0",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",

package/dist/utils/event.d.ts

@@ -1,4 +0,0 @@
-export declare function localPoint(node: Element, event: MouseEvent | TouchEvent | PointerEvent): {
-    x: number;
-    y: number;
-} | null;

package/dist/utils/event.js

@@ -1,44 +0,0 @@
-import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isTouchEvent, } from '@layerstack/utils';
-// See: https://github.com/airbnb/visx/blob/master/packages/visx-event/src/localPointGeneric.ts
-// TODO: Matches event.layerX/Y, but are deprecated (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/layerX).
-//       Similar and could be replaced by event.offsetX/Y (but not identical)
-export function localPoint(node, event) {
-    if (!node || !event)
-        return null;
-    const coords = getPointFromEvent(event);
-    // find top-most SVG
-    const svg = isSVGElement(node) ? node.ownerSVGElement : node;
-    const screenCTM = isSVGGraphicsElement(svg) ? svg.getScreenCTM() : null;
-    if (isSVGSVGElement(svg) && screenCTM) {
-        let point = svg.createSVGPoint();
-        point.x = coords.x;
-        point.y = coords.y;
-        point = point.matrixTransform(screenCTM.inverse());
-        return {
-            x: point.x,
-            y: point.y,
-        };
-    }
-    // fall back to bounding box
-    const rect = node.getBoundingClientRect();
-    return {
-        x: coords.x - rect.left - node.clientLeft,
-        y: coords.y - rect.top - node.clientTop,
-    };
-}
-function getPointFromEvent(event) {
-    if (!event)
-        return { x: 0, y: 0 };
-    if (isTouchEvent(event)) {
-        return event.changedTouches.length > 0
-            ? {
-                x: event.changedTouches[0].clientX,
-                y: event.changedTouches[0].clientY,
-            }
-            : { x: 0, y: 0 };
-    }
-    return {
-        x: event.clientX,
-        y: event.clientY,
-    };
-}