layerchart 0.96.0 → 0.97.1

package/dist/components/Arc.svelte

@@ -27,6 +27,7 @@
 
   import { objectId } from '@layerstack/utils/object';
 
+  import { getRenderContext } from './Chart.svelte';
   import { chartContext } from './ChartContext.svelte';
   import { motionStore } from '../stores/motionStore.js';
   import { degreesToRadians } from '../utils/math.js';
@@ -199,8 +200,8 @@
    */
   export let data: any = undefined;
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   function render(
     ctx: CanvasRenderingContext2D,

package/dist/components/Area.svelte

@@ -12,13 +12,13 @@
 
   import { motionStore } from '../stores/motionStore.js';
 
+  import { getRenderContext } from './Chart.svelte';
   import { chartContext } from './ChartContext.svelte';
   import Spline from './Spline.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
-
   const {
     data: contextData,
     xScale,
@@ -143,8 +143,8 @@
     tweened_d.set(d ?? '');
   }
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   function render(
     ctx: CanvasRenderingContext2D,

package/dist/components/Bar.svelte

@@ -5,11 +5,12 @@
   import Rect from './Rect.svelte';
   import Spline from './Spline.svelte';
 
+  import { getRenderContext } from './Chart.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
   import { createDimensionGetter, type Insets } from '../utils/rect.js';
   import { isScaleBand } from '../utils/scales.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { greatestAbs } from '@layerstack/utils';
-  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const { x: xContext, y: yContext, xScale } = chartContext();
 
@@ -113,8 +114,8 @@
     .split('\n')
     .join('');
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 </script>
 
 {#if _rounded === 'all' || _rounded === 'none' || radius === 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

@@ -1,3 +1,21 @@
+<script lang="ts" context="module">
+  import { getContext, setContext } from 'svelte';
+
+  export const renderContextKey = Symbol();
+
+  type RenderContext = 'canvas' | 'svg' | 'html';
+
+  /** Get render context.  Useful to conditionally render components based on the render context. */
+  export function getRenderContext() {
+    return getContext<RenderContext>(renderContextKey);
+  }
+
+  /** Set by Canavs, Html, or Svg render/layout component */
+  export function setRenderContext(context: RenderContext) {
+    setContext(renderContextKey, context);
+  }
+</script>
+
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
   import { LayerCake } from 'layercake';

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

@@ -1,4 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+export declare const renderContextKey: unique symbol;
+type RenderContext = 'canvas' | 'svg' | 'html';
+/** Get render context.  Useful to conditionally render components based on the render context. */
+export declare function getRenderContext(): RenderContext;
+/** Set by Canavs, Html, or Svg render/layout component */
+export declare function setRenderContext(context: RenderContext): void;
 import type { HierarchyNode } from 'd3-hierarchy';
 import type { SankeyGraph } from 'd3-sankey';
 import TransformContext from './TransformContext.svelte';
@@ -216,10 +222,10 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         /** Props passed to TransformContext */
         transform?: Partial<{
-            mode?: "canvas" | "manual" | "none";
+            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;
@@ -296,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/Circle.svelte

@@ -5,6 +5,7 @@
   import { objectId } from '@layerstack/utils/object';
   import { merge } from 'lodash-es';
 
+  import { getRenderContext } from './Chart.svelte';
   import { motionStore } from '../stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
   import { renderCircle, type ComputedStylesOptions } from '../utils/canvas.js';
@@ -45,8 +46,8 @@
     tweened_r.set(r);
   });
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   function render(
     ctx: CanvasRenderingContext2D,

package/dist/components/GeoPath.svelte

@@ -10,12 +10,13 @@
   import { cls } from '@layerstack/tailwind';
   import { merge } from 'lodash-es';
 
+  import { getRenderContext } from './Chart.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
   import { geoContext } from './GeoContext.svelte';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
   import { geoCurvePath } from '../utils/geo.js';
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
-  import { getCanvasContext } from './layout/Canvas.svelte';
   import { objectId } from '@layerstack/utils/object';
 
   export let geojson: GeoPermissibleObjects | null | undefined = undefined;
@@ -71,8 +72,8 @@
     geoPath = geoCurvePath(_projection, curve);
   }
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   function render(
     ctx: CanvasRenderingContext2D,

package/dist/components/GeoPoint.svelte

@@ -5,6 +5,7 @@
   import Circle from './Circle.svelte';
   import Group from './Group.svelte';
   import { getCanvasContext } from './layout/Canvas.svelte';
+  import { getRenderContext } from './Chart.svelte';
 
   /** Latitude */
   export let lat: number;
@@ -15,8 +16,8 @@
 
   $: [x, y] = $geo([long, lat]) ?? [0, 0];
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 </script>
 
 {#if renderContext === 'svg'}

package/dist/components/GeoTile.svelte

@@ -3,11 +3,12 @@
   // @ts-expect-error
   import { tile as d3Tile } from 'd3-tile';
 
+  import { getRenderContext } from './Chart.svelte';
   import { chartContext } from './ChartContext.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
   import { geoContext } from './GeoContext.svelte';
   import Group from './Group.svelte';
   import TileImage from './TileImage.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
 
   export let url: (x: number, y: number, z: number) => string;
   export let zoomDelta = 0;
@@ -33,8 +34,8 @@
     scale,
   } = tiles);
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   function render(ctx: CanvasRenderingContext2D) {
     tiles.forEach(([x, y, z]: number[]) => {

package/dist/components/Group.svelte

@@ -1,11 +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();
 
   /**
@@ -50,11 +51,11 @@
 
   let transform: string | undefined = undefined;
   $: if (center || x != null || y != null) {
-    transform = `translate(${$tweened_x ?? 0}, ${$tweened_y ?? 0})`;
+    transform = `translate(${$tweened_x ?? 0}px, ${$tweened_y ?? 0}px)`;
   }
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   function render(ctx: CanvasRenderingContext2D) {
     ctx.translate($tweened_x ?? 0, $tweened_y ?? 0);
@@ -92,9 +93,9 @@
 {#if renderContext === 'canvas'}
   <slot />
 {:else if renderContext === 'svg'}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- TODO: Find out why `<svelte:element this={renderContext === 'html' ? 'div' : 'g'}>` doesn't work for the SVG use case -->
   <g
-    {transform}
+    style:transform
     {...$$restProps}
     on:click={onclick}
     on:dblclick={ondblclick}
@@ -111,4 +112,24 @@
   >
     <slot />
   </g>
+{:else}
+  <div
+    style:transform
+    {...$$restProps}
+    class={cls('absolute', $$restProps.class)}
+    on:click={onclick}
+    on:dblclick={ondblclick}
+    on:pointerenter={onpointerenter}
+    on:pointermove={onpointermove}
+    on:pointerleave={onpointerleave}
+    on:pointerdown={onpointerdown}
+    on:touchmove={(e) => {
+      if (preventTouchMove) {
+        // Prevent touch to not interfer with pointer
+        e.preventDefault();
+      }
+    }}
+  >
+    <slot />
+  </div>
 {/if}

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

@@ -12,7 +12,7 @@ declare const __propDef: {
         tickValues?: any[] | undefined | undefined;
         tickFontSize?: number | undefined;
         tickLength?: number | undefined;
-        placement?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("bottom" | "left" | "right" | "top" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         onclick?: ((e: MouseEvent, detail: any) => any) | undefined | undefined;
         onpointerenter?: ((e: MouseEvent, detail: any) => any) | undefined | undefined;

package/dist/components/Line.svelte

@@ -11,6 +11,7 @@
   import Marker from './Marker.svelte';
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
+  import { getRenderContext } from './Chart.svelte';
 
   export let x1: number;
   export let initialX1 = x1;
@@ -64,8 +65,8 @@
     tweened_y2.set(y2);
   });
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   function render(
     ctx: CanvasRenderingContext2D,

package/dist/components/LinearGradient.svelte

@@ -2,6 +2,7 @@
   import { onDestroy } from 'svelte';
   import { uniqueId } from '@layerstack/utils';
 
+  import { getRenderContext } from './Chart.svelte';
   import { chartContext } from './ChartContext.svelte';
   import { getCanvasContext } from './layout/Canvas.svelte';
   import { createLinearGradient, getComputedStyles } from '../utils/canvas.js';
@@ -30,8 +31,8 @@
 
   const { width, height, padding } = chartContext();
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   let canvasGradient: CanvasGradient;
 

package/dist/components/RadialGradient.svelte

@@ -2,6 +2,7 @@
   import { onDestroy } from 'svelte';
   import { uniqueId } from '@layerstack/utils';
 
+  import { getRenderContext } from './Chart.svelte';
   import { chartContext } from './ChartContext.svelte';
   import { getCanvasContext } from './layout/Canvas.svelte';
   import { getComputedStyles } from '../utils/canvas.js';
@@ -34,8 +35,8 @@
 
   const { width, height, padding } = chartContext();
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   let canvasGradient: CanvasGradient;
 

package/dist/components/Rect.svelte

@@ -11,6 +11,7 @@
     type SpringOptions,
     type TweenedOptions,
   } from '../stores/motionStore.js';
+  import { getRenderContext } from './Chart.svelte';
   import { getCanvasContext } from './layout/Canvas.svelte';
   import { renderRect, type ComputedStylesOptions } from '../utils/canvas.js';
 
@@ -60,8 +61,8 @@
     tweened_height.set(height);
   });
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   function render(
     ctx: CanvasRenderingContext2D,

package/dist/components/Spline.svelte

@@ -25,6 +25,7 @@
   import { flattenPathData } from '../utils/path.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
+  import { getRenderContext } from './Chart.svelte';
 
   const {
     data: contextData,
@@ -174,8 +175,8 @@
     key = Symbol();
   }
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   function render(
     ctx: CanvasRenderingContext2D,

package/dist/components/Text.svelte

@@ -5,9 +5,10 @@
   import { objectId } from '@layerstack/utils/object';
   import { merge } from 'lodash-es';
 
+  import { getRenderContext } from './Chart.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
   import { getStringWidth } from '../utils/string.js';
   import { motionStore } from '../stores/motionStore.js';
-  import { getCanvasContext } from './layout/Canvas.svelte';
   import { renderText, type ComputedStylesOptions } from '../utils/canvas.js';
 
   /*
@@ -180,8 +181,8 @@
     tweened_y.set(y);
   });
 
+  const renderContext = getRenderContext();
   const canvasContext = getCanvasContext();
-  const renderContext = canvasContext ? 'canvas' : 'svg';
 
   function render(
     ctx: CanvasRenderingContext2D,

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/TransformControls.svelte.d.ts

@@ -2,10 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("bottom" | "left" | "right" | "top" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         size?: import("svelte-ux").ButtonSize | undefined;
-        show?: ("reset" | "scrollMode" | "zoomIn" | "zoomOut" | "center")[] | undefined;
+        show?: ("center" | "reset" | "scrollMode" | "zoomIn" | "zoomOut")[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -150,7 +150,7 @@ declare class __sveltets_Render<TData> {
             mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
         }> | undefined;
         transform?: Partial<{
-            mode?: "canvas" | "manual" | "none";
+            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"];
@@ -267,7 +267,7 @@ declare class __sveltets_Render<TData> {
             tickValues?: any[] | undefined | undefined;
             tickFontSize?: number | undefined;
             tickLength?: number | undefined;
-            placement?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            placement?: ("bottom" | "left" | "right" | "top" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: "horizontal" | "vertical" | undefined;
             onclick?: ((e: MouseEvent, detail: any) => any) | undefined | undefined;
             onpointerenter?: ((e: MouseEvent, detail: any) => any) | undefined | undefined;
@@ -287,7 +287,7 @@ declare class __sveltets_Render<TData> {
         outerRadius?: number | undefined;
         padAngle?: number;
         center?: boolean;
-        placement?: "center" | "left" | "right";
+        placement?: "left" | "right" | "center";
         profile?: boolean;
         debug?: boolean;
         props?: {
@@ -317,7 +317,7 @@ declare class __sveltets_Render<TData> {
             props?: Partial<ComponentProps<Arc>>;
         }[] | undefined;
         value?: Accessor<TData>;
-        renderContext?: "canvas" | "svg";
+        renderContext?: "svg" | "canvas";
         onarcclick?: ((e: MouseEvent, detail: {
             data: any;
             series: {

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-export { Html, WebGL } from 'layercake';
+export { WebGL } from 'layercake';
 export * from './charts/index.js';
 export { default as Arc } from './Arc.svelte';
 export { default as Area } from './Area.svelte';
@@ -31,6 +31,7 @@ export { default as Graticule } from './Graticule.svelte';
 export { default as Grid } from './Grid.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
+export { default as Html } from './layout/Html.svelte';
 export { default as Hull } from './Hull.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';

package/dist/components/index.js

@@ -1,5 +1,5 @@
 // Re-export for easy access (Svg and Canvas are provided by LayerChart)
-export { Html, WebGL } from 'layercake';
+export { WebGL } from 'layercake';
 export * from './charts/index.js';
 export { default as Arc } from './Arc.svelte';
 export { default as Area } from './Area.svelte';
@@ -32,6 +32,7 @@ export { default as Graticule } from './Graticule.svelte';
 export { default as Grid } from './Grid.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
+export { default as Html } from './layout/Html.svelte';
 export { default as Hull } from './Hull.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';

package/dist/components/layout/Canvas.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-  import { getContext, onDestroy, setContext } from 'svelte';
+  import { getContext, setContext } from 'svelte';
 
   type ComponentRender = {
     name: string;
@@ -36,17 +36,15 @@
 </script>
 
 <script lang="ts">
-  import { onMount } from 'svelte';
+  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';
-  import { tooltipContext } from '../tooltip/TooltipContext.svelte';
-
   const { width, height, containerWidth, containerHeight, padding } = chartContext();
 
   /** The `<canvas>` tag. Useful for bindings. */
@@ -93,7 +91,6 @@
   let frameId: number | undefined;
 
   const { mode, scale, translate, dragging, moving } = transformContext();
-  const tooltip = tooltipContext();
 
   /**
    * HitCanvas
@@ -106,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);
@@ -260,6 +257,7 @@
   }
 
   setCanvasContext(canvasContext);
+  setRenderContext('canvas');
 </script>
 
 <canvas

package/dist/components/layout/Html.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
+
+  import { setRenderContext } from '../Chart.svelte';
   import { chartContext } from '../ChartContext.svelte';
+  import { transformContext } from '../TransformContext.svelte';
 
   /** The layer's outermost `<div>` tag. Useful for bindings. */
   export let element: HTMLDivElement | undefined = undefined;
@@ -23,9 +26,29 @@
   /** A string passed to the `aria-describedby` property on the `<div>` tag. */
   export let describedBy: string | undefined = undefined;
 
-  const { padding } = chartContext();
+  /**
+   * Translate children to center (useful for radial layouts)
+   */
+  export let center: boolean | 'x' | 'y' = false;
 
   $: roleVal = role || (label || labelledBy || describedBy ? 'figure' : undefined);
+
+  const { width, height, padding } = chartContext();
+  const { mode, scale, translate } = transformContext();
+
+  $: transform = center
+    ? `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})`;
+  }
+
+  setRenderContext('html');
 </script>
 
 <div
@@ -36,6 +59,8 @@
     pointerEvents === false && 'pointer-events-none',
     $$props.class
   )}
+  style:transform
+  style:transform-origin="top left"
   style:z-index={zIndex}
   style:pointer-events={pointerEvents === false ? 'none' : null}
   style:top="{$padding.top}px"

package/dist/components/layout/Html.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         label?: string | undefined | undefined;
         labelledBy?: string | undefined | undefined;
         describedBy?: string | undefined | undefined;
+        center?: boolean | "x" | "y" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/layout/Svg.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
 
+  import { setRenderContext } from '../Chart.svelte';
   import { chartContext } from '../ChartContext.svelte';
   import { transformContext } from '../TransformContext.svelte';
 
@@ -37,7 +38,6 @@
   export let center: boolean | 'x' | 'y' = false;
 
   const { containerWidth, containerHeight, width, height, padding } = chartContext();
-
   const { mode, scale, translate } = transformContext();
 
   $: transform = center
@@ -51,6 +51,8 @@
     };
     transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
   }
+
+  setRenderContext('svg');
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         y?: "pointer" | "data" | number | undefined;
         xOffset?: number | undefined;
         yOffset?: number | undefined;
-        anchor?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        anchor?: ("bottom" | "left" | "right" | "top" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         contained?: "container" | "window" | false | undefined;
         variant?: "default" | "invert" | "none" | undefined;
         motion?: boolean | undefined;

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