layerchart 0.95.0 → 0.97.0

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/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,7 +222,7 @@ 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"];

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

@@ -2,6 +2,7 @@
   import { onDestroy, tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
 
+  import { getRenderContext } from './Chart.svelte';
   import { chartContext } from './ChartContext.svelte';
   import { motionStore } from '../stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
@@ -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,23 @@
   >
     <slot />
   </g>
+{:else}
+  <div
+    style:transform
+    {...$$restProps}
+    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/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/AreaChart.svelte

@@ -83,6 +83,9 @@
   export let points: ComponentProps<Points> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
 
@@ -301,6 +304,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
         axis: 'x',

package/dist/components/charts/BarChart.svelte

@@ -93,6 +93,9 @@
   /** Padding between series items within bars when using 'seriesLayout="stack"' */
   export let stackPadding = 0;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
@@ -321,6 +324,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   let:x
   let:xScale
   let:y

package/dist/components/charts/LineChart.svelte

@@ -75,6 +75,9 @@
   export let points: ComponentProps<Points> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
 
@@ -232,6 +235,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
         axis: 'x',

package/dist/components/charts/PieChart.svelte

@@ -97,6 +97,9 @@
   /** Center chart.  Override and use `props.group` for more control */
   export let center = placement === 'center';
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   // TODO: Not usable with manual tooltip / arc path.  Use `onarcclick`?
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
@@ -181,6 +184,7 @@
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...$$restProps}
   tooltip={props.tooltip?.context}
+  bind:tooltipContext
   let:x
   let:xScale
   let:y

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/charts/ScatterChart.svelte

@@ -64,6 +64,9 @@
   export let legend: ComponentProps<Legend> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
@@ -191,6 +194,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
         axis: 'both',

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,16 @@
 </script>
 
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { cls } from '@layerstack/tailwind';
   import { Logger } 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 +92,6 @@
   let frameId: number | undefined;
 
   const { mode, scale, translate, dragging, moving } = transformContext();
-  const tooltip = tooltipContext();
 
   /**
    * HitCanvas
@@ -260,6 +258,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/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.95.0",
+  "version": "0.97.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.12",
     "@mdi/js": "^7.4.47",
@@ -39,10 +39,10 @@
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
     "autoprefixer": "^10.4.20",
-    "marked": "^15.0.6",
+    "marked": "^15.0.7",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.215.5",
-    "prettier": "^3.4.2",
+    "posthog-js": "^1.217.0",
+    "prettier": "^3.5.0",
     "prettier-plugin-svelte": "^3.3.3",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
@@ -50,10 +50,10 @@
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
-    "svelte": "5.19.4",
+    "svelte": "5.19.10",
     "svelte-check": "^4.1.4",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "^0.90.0",
+    "svelte-ux": "^0.90.1",
     "svelte2tsx": "^0.7.34",
     "tailwindcss": "^3.4.16",
     "topojson-client": "^3.1.0",
@@ -69,7 +69,7 @@
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@layerstack/svelte-actions": "^0.0.11",
-    "@layerstack/svelte-stores": "^0.0.9",
+    "@layerstack/svelte-stores": "^0.0.10",
     "@layerstack/tailwind": "^0.0.11",
     "@layerstack/utils": "^0.0.7",
     "d3-array": "^3.2.4",