layerchart 0.97.0 → 0.97.1

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.d.ts

@@ -225,7 +225,7 @@ declare class __sveltets_Render<TData> {
             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"];
+            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) => {
                 x: number;
                 y: number;
@@ -302,7 +302,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,6 +56,7 @@
 <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();
 
@@ -162,7 +163,7 @@
     ondragstart?.();
   }
 
-  function onPointerMove(e: PointerEvent) {
+  function onPointerMove(e: PointerEvent & { currentTarget: HTMLDivElement }) {
     if (!pointerDown) return;
 
     e.preventDefault(); // Stop text selection
@@ -178,7 +179,6 @@
 
     if ($dragging) {
       e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
-      // @ts-expect-error
       e.currentTarget?.setPointerCapture(e.pointerId);
 
       setTranslate(
@@ -281,13 +281,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/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);

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.97.1",
   "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,
-    };
-}