layerchart 2.0.0-next.45 → 2.0.0-next.47

package/dist/components/layers/Canvas.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" module>
+  import type { ComponentNode } from '../../contexts/chart.js';
+
   export type CanvasPropsWithoutHTML = {
     /**
      * The `<canvas>` tag. Useful for bindings.
@@ -86,17 +88,6 @@
   export type CanvasProps = CanvasPropsWithoutHTML &
     Without<HTMLCanvasAttributes, CanvasPropsWithoutHTML>;
 
-  /**
-   * Handles the automatic registration of the component to the canvas context,
-   * with dependency tracking and cleanup on destroy.
-   */
-  export function registerCanvasComponent<T extends Element>(component: ComponentRender<T>) {
-    const canvasContext = getCanvasContext();
-
-    $effect.pre(() => {
-      return untrack(() => canvasContext.register(component));
-    });
-  }
 </script>
 
 <script lang="ts">
@@ -104,16 +95,14 @@
   import { Logger, localPoint } from '@layerstack/utils';
   import { MediaQueryPresets } from '@layerstack/svelte-state';
 
+  import { getChartContext } from '../../contexts/chart.js';
   import { setLayerContext } from '../../contexts/layer.js';
-  import { getTransformContext } from '../../contexts/transform.js';
   import { getPixelColor, scaleCanvas } from '../../utils/canvas.js';
   import { getColorStr, rgbColorGenerator } from '../../utils/color.js';
   import { useMutationObserver, watch } from 'runed';
   import type { HTMLCanvasAttributes, PointerEventHandler } from 'svelte/elements';
   import type { Without } from '../../utils/types.js';
-  import { getChartContext } from '../../contexts/chart.js';
   import {
-    getCanvasContext,
     setCanvasContext,
     type CanvasContextValue,
     type ComponentRender,
@@ -154,11 +143,11 @@
   });
 
   const ctx = getChartContext();
-  const transformCtx = getTransformContext();
 
   const logger = new Logger('Canvas');
 
-  let components = new Map<Symbol, ComponentRender<Element>>();
+  // Root node for the component tree — children register via ctx.registerComponent
+  const rootNode = ctx.registerComponent({ name: 'Canvas', kind: 'group' });
   let pendingInvalidation = false;
   let frameId: number | undefined;
 
@@ -169,46 +158,66 @@
   let hitCanvasContext = $state<CanvasRenderingContext2D>();
   let colorGenerator = rgbColorGenerator();
   let activeCanvas = $state(false);
-  let lastActiveComponent: ComponentRender | null | undefined = null;
+  let lastActiveNode: ComponentNode | null | undefined = null;
 
-  const componentByColor = new Map<string, ComponentRender>();
+  const nodeByColor = new Map<string, ComponentNode>();
 
-  function getPointerComponent(e: PointerEvent | MouseEvent | TouchEvent) {
+  function getPointerNode(e: PointerEvent | MouseEvent | TouchEvent) {
     const { x, y } = localPoint(e);
     const color = getPixelColor(hitCanvasContext!, x, y);
     const colorKey = getColorStr(color);
-    const component = componentByColor.get(colorKey);
-    logger.debug({ colorKey, component, componentByColor });
-    return component;
+    const node = nodeByColor.get(colorKey);
+    logger.debug({ colorKey, node, nodeByColor });
+    return node;
+  }
+
+  type EventName = keyof NonNullable<ComponentRender['events']>;
+
+  /**
+   * Walk up the component tree from a node and call the given event on any
+   * ancestor groups that have a handler for it, simulating DOM event bubbling.
+   */
+  function bubbleEvent(node: ComponentNode | null | undefined, eventName: EventName, e: Event) {
+    // Fire event on the hit node itself
+    (node?.canvasRender?.events?.[eventName] as ((e: Event) => void) | null | undefined)?.(e);
+    // Bubble up to ancestor groups
+    let ancestor = node?.parent;
+    while (ancestor) {
+      const handler = ancestor.kind === 'group'
+        ? ancestor.canvasRender?.events?.[eventName] as ((e: Event) => void) | null | undefined
+        : undefined;
+      handler?.(e);
+      ancestor = ancestor.parent;
+    }
   }
 
   const onPointerMove: PointerEventHandler<Element> = (e) => {
     activeCanvas = true;
-    const component = getPointerComponent(e);
+    const node = getPointerNode(e);
 
-    if (component != lastActiveComponent) {
+    if (node != lastActiveNode) {
       // TODO: Should `pointerleave`/`pointerout` and `pointerenter`/`pointerover` be handled differently?
-      if (lastActiveComponent) {
-        lastActiveComponent.events?.pointerleave?.(e);
-        lastActiveComponent.events?.pointerout?.(e);
+      if (lastActiveNode) {
+        bubbleEvent(lastActiveNode, 'pointerleave', e);
+        bubbleEvent(lastActiveNode, 'pointerout', e);
       }
 
-      component?.events?.pointerenter?.(e);
-      component?.events?.pointerover?.(e);
+      bubbleEvent(node, 'pointerenter', e);
+      bubbleEvent(node, 'pointerover', e);
     }
-    component?.events?.pointermove?.(e);
+    bubbleEvent(node, 'pointermove', e);
 
-    lastActiveComponent = component;
+    lastActiveNode = node;
   };
 
   const onPointerLeave: PointerEventHandler<Element> = (e) => {
     // Pointer outside of canvas
 
     // Call last active component `pointerleave` event in case it was not triggered by hit canvas (quickly exiting canvas element before `pointermove` is triggered)
-    lastActiveComponent?.events?.pointerleave?.(e);
-    lastActiveComponent?.events?.pointerout?.(e);
+    bubbleEvent(lastActiveNode, 'pointerleave', e);
+    bubbleEvent(lastActiveNode, 'pointerout', e);
 
-    lastActiveComponent = null;
+    lastActiveNode = null;
     activeCanvas = false;
   };
   /**
@@ -265,44 +274,20 @@
         y: center === 'y' || center === true ? ctx.height / 2 : 0,
       };
       context.translate(newTranslate.x, newTranslate.y);
-    } else if (transformCtx.mode === 'canvas' && !ignoreTransform) {
-      context.translate(transformCtx.translate.x, transformCtx.translate.y);
-      context.scale(transformCtx.scale, transformCtx.scale);
-    }
-
-    // separate components into those that retain state and those that don't
-    const retainStateComponents: ComponentRender[] = [];
-    const nonRetainStateComponents: ComponentRender[] = [];
-
-    for (const [_, c] of components) {
-      if (c.retainState) {
-        retainStateComponents.push(c);
-      } else {
-        nonRetainStateComponents.push(c);
-      }
+    } else if (ctx.transform.mode === 'canvas' && !ignoreTransform) {
+      context.translate(ctx.transform.translate.x, ctx.transform.translate.y);
+      context.scale(ctx.transform.scale, ctx.transform.scale);
     }
 
-    // render retainState components on main canvas first
-    for (const c of retainStateComponents) {
-      c.render(context);
-    }
-
-    // store the main canvas transform after retainState components
-    const mainTransformAfterRetain = context.getTransform();
-
-    // render non-retainState components on main canvas
-    for (const c of nonRetainStateComponents) {
-      context.save();
-      c.render(context);
-      context.restore();
-    }
+    // Recursively render the component tree with proper save/restore scoping
+    renderTree(context, rootNode);
 
     /*
      * Sync hit canvas with main canvas
      */
     if (hitCanvasContext) {
-      const inactiveMoving = !activeCanvas && transformCtx.moving;
-      if (disableHitCanvas || transformCtx.dragging || inactiveMoving) {
+      const inactiveMoving = !activeCanvas && ctx.transform.moving;
+      if (disableHitCanvas || ctx.transform.dragging || inactiveMoving) {
         // Skip rendering hit canvas
         hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
       } else {
@@ -310,75 +295,90 @@
         scaleCanvas(hitCanvasContext, ctx.containerWidth, ctx.containerHeight);
         hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
 
-        // reset and sync transform to the state after retainState components
-        hitCanvasContext.resetTransform();
-        hitCanvasContext.setTransform(mainTransformAfterRetain);
+        // sync transform with main canvas (padding, center, zoom already applied)
+        hitCanvasContext.setTransform(context.getTransform());
 
-        // reset color generator
+        // reset color generator and node map
         colorGenerator = rgbColorGenerator();
+        nodeByColor.clear();
 
-        // render retainState components on hit canvas (e.g., Group)
-        for (const c of retainStateComponents) {
-          const componentHasEvents =
-            c.events && Object.values(c.events).filter((d) => d).length > 0;
-
-          if (componentHasEvents) {
-            // since the transform was already applied via setTransform, skip rendering
-            // the retainState component's transform again; proceed to its children
-            continue;
-          }
-        }
-
-        // render non-retainState components on hit canvas
-        for (const c of nonRetainStateComponents) {
-          const componentHasEvents =
-            c.events && Object.values(c.events).filter((d) => d).length > 0;
-
-          if (componentHasEvents) {
-            const color = getColorStr(colorGenerator.next().value);
-            const styleOverrides = { styles: { fill: color, stroke: color, _fillOpacity: 0.1 } };
-
-            hitCanvasContext.save();
-            c.render(hitCanvasContext, styleOverrides);
-            hitCanvasContext.restore();
-
-            componentByColor.set(color, c);
-          }
-        }
+        // render hit canvas tree
+        renderHitTree(hitCanvasContext, rootNode);
       }
     }
 
     pendingInvalidation = false;
   }
 
+  /**
+   * Recursively render the component tree.
+   * Group nodes: save → render (translate/opacity) → recurse children → restore
+   * Leaf nodes: save → render → restore
+   */
+  function renderTree(canvasCtx: CanvasRenderingContext2D, node: ComponentNode) {
+    if (node.kind === 'group' && node.canvasRender) {
+      // Group: save state, apply transform, render children, restore
+      canvasCtx.save();
+      node.canvasRender.render(canvasCtx);
+      for (const child of node.children) {
+        renderTree(canvasCtx, child);
+      }
+      canvasCtx.restore();
+    } else if (node.canvasRender) {
+      // Leaf mark: save, render, restore
+      canvasCtx.save();
+      node.canvasRender.render(canvasCtx);
+      canvasCtx.restore();
+    } else {
+      // Non-rendering node (e.g. root, composite-mark): just recurse children
+      for (const child of node.children) {
+        renderTree(canvasCtx, child);
+      }
+    }
+  }
+
+  function nodeHasEvents(node: ComponentNode) {
+    return node.canvasRender?.events && Object.values(node.canvasRender.events).some((d) => d);
+  }
+
+  /**
+   * Recursively render the hit canvas tree for pointer event detection.
+   * Renders components that have event handlers (or whose ancestor group does), using unique colors.
+   */
+  function renderHitTree(hitCtx: CanvasRenderingContext2D, node: ComponentNode, ancestorHasEvents = false) {
+    if (node.kind === 'group' && node.canvasRender) {
+      const groupHasEvents = ancestorHasEvents || nodeHasEvents(node);
+      // Group: apply transform, recurse children (scoped by save/restore)
+      hitCtx.save();
+      node.canvasRender.render(hitCtx);
+      for (const child of node.children) {
+        renderHitTree(hitCtx, child, groupHasEvents);
+      }
+      hitCtx.restore();
+    } else if (node.canvasRender) {
+      if (nodeHasEvents(node) || ancestorHasEvents) {
+        const color = getColorStr(colorGenerator.next().value);
+        const styleOverrides = { styles: { fill: color, stroke: color, _fillOpacity: 0.1 } };
+
+        hitCtx.save();
+        node.canvasRender.render(hitCtx, styleOverrides);
+        hitCtx.restore();
+
+        nodeByColor.set(color, node);
+      }
+    } else {
+      // Non-rendering node: recurse children
+      for (const child of node.children) {
+        renderHitTree(hitCtx, child, ancestorHasEvents);
+      }
+    }
+  }
+
   function createCanvasContext(): CanvasContextValue {
-    function register<T extends Element>(component: ComponentRender<T>) {
-      const key = Symbol();
-      components.set(key, component as ComponentRender<Element>);
-      invalidate();
-
-      const cleanupRoot = $effect.root(() => {
-        if (component.deps) {
-          $effect.pre(() => {
-            component.deps?.(); // track deps
-            invalidate(); // invalidate when deps change.
-          });
-        }
-      });
-
-      $effect.pre(() => {
-        return cleanupRoot;
-      });
-
-      /**
-       * Removes the component from the registry and cleans up the invalidation
-       * effect
-       */
-      return () => {
-        components.delete(key);
-        cleanupRoot();
-        invalidate();
-      };
+    // Legacy register method — registration is now handled by the component tree
+    // via registerComponent. Keep for interface compatibility.
+    function register<T extends Element>(_component: ComponentRender<T>) {
+      return () => {};
     }
 
     function invalidate() {
@@ -393,7 +393,7 @@
   const canvasContext = createCanvasContext();
 
   $effect.pre(() => {
-    [ctx.height, ctx.width, ctx.containerHeight, ctx.containerWidth, transformCtx.dragging];
+    [ctx.height, ctx.width, ctx.containerHeight, ctx.containerWidth, ctx.transform.dragging];
     canvasContext.invalidate();
   });
 
@@ -407,18 +407,18 @@
   class={['lc-layout-canvas', className]}
   class:disablePointerEvents={pointerEvents === false}
   onclick={(e) => {
-    const component = getPointerComponent(e);
-    component?.events?.click?.(e);
+    const node = getPointerNode(e);
+    bubbleEvent(node, 'click', e);
     onclick?.(e);
   }}
   ondblclick={(e) => {
-    const component = getPointerComponent(e);
-    component?.events?.dblclick?.(e);
+    const node = getPointerNode(e);
+    bubbleEvent(node, 'dblclick', e);
     ondblclick?.(e);
   }}
   onpointerdown={(e) => {
-    const component = getPointerComponent(e);
-    component?.events?.pointerdown?.(e);
+    const node = getPointerNode(e);
+    bubbleEvent(node, 'pointerdown', e);
     onpointerdown?.(e);
   }}
   onpointerenter={(e) => {
@@ -435,12 +435,12 @@
   }}
   ontouchmove={(e) => {
     // Prevent touch from interfering with pointer if over data
-    if (lastActiveComponent) {
+    if (lastActiveNode) {
       e.preventDefault();
     }
 
-    const component = getPointerComponent(e);
-    component?.events?.touchmove?.(e);
+    const node = getPointerNode(e);
+    bubbleEvent(node, 'touchmove', e);
   }}
   {...restProps}
 >

package/dist/components/layers/Canvas.svelte.d.ts

@@ -75,15 +75,9 @@ export type CanvasPropsWithoutHTML = {
     ]>;
 };
 export type CanvasProps = CanvasPropsWithoutHTML & Without<HTMLCanvasAttributes, CanvasPropsWithoutHTML>;
-/**
- * Handles the automatic registration of the component to the canvas context,
- * with dependency tracking and cleanup on destroy.
- */
-export declare function registerCanvasComponent<T extends Element>(component: ComponentRender<T>): void;
 import { type Snippet } from 'svelte';
 import type { HTMLCanvasAttributes } from 'svelte/elements';
 import type { Without } from '../../utils/types.js';
-import { type ComponentRender } from '../../contexts/canvas.js';
 declare const Canvas: import("svelte").Component<CanvasProps, {}, "ref" | "canvasContext">;
 type Canvas = ReturnType<typeof Canvas>;
 export default Canvas;

package/dist/components/layers/Html.svelte

@@ -54,10 +54,8 @@
 </script>
 
 <script lang="ts">
-  import { getTransformContext } from '../../contexts/transform.js';
-
-  import { setLayerContext } from '../../contexts/layer.js';
   import { getChartContext } from '../../contexts/chart.js';
+  import { setLayerContext } from '../../contexts/layer.js';
 
   let {
     ref: refProp = $bindable(),
@@ -83,11 +81,10 @@
   const roleVal = $derived(role || (label || labelledBy || describedBy ? 'figure' : undefined));
 
   const ctx = getChartContext();
-  const transformCtx = getTransformContext();
 
   const transform = $derived.by(() => {
-    if (transformCtx.mode === 'canvas' && !ignoreTransform) {
-      return `translate(${transformCtx.translate.x}px,${transformCtx.translate.y}px) scale(${transformCtx.scale})`;
+    if (ctx.transform.mode === 'canvas' && !ignoreTransform) {
+      return `translate(${ctx.transform.translate.x}px,${ctx.transform.translate.y}px) scale(${ctx.transform.scale})`;
     } else if (center) {
       return `translate(${center === 'x' || center === true ? ctx.width / 2 : 0}px, ${center === 'y' || center === true ? ctx.height / 2 : 0}px)`;
     }

package/dist/components/layers/Svg.svelte

@@ -71,10 +71,8 @@
 </script>
 
 <script lang="ts">
-  import { getTransformContext } from '../../contexts/transform.js';
-
-  import { setLayerContext } from '../../contexts/layer.js';
   import { getChartContext } from '../../contexts/chart.js';
+  import { setLayerContext } from '../../contexts/layer.js';
 
   let {
     ref: refProp = $bindable(),
@@ -103,11 +101,10 @@
   });
 
   const ctx = getChartContext();
-  const transformCtx = getTransformContext();
 
   const transform = $derived.by(() => {
-    if (transformCtx.mode === 'canvas' && !ignoreTransform) {
-      return `translate(${transformCtx.translate.x},${transformCtx.translate.y}) scale(${transformCtx.scale})`;
+    if (ctx.transform.mode === 'canvas' && !ignoreTransform) {
+      return `translate(${ctx.transform.translate.x},${ctx.transform.translate.y}) scale(${ctx.transform.scale})`;
     } else if (center) {
       return `translate(${center === 'x' || center === true ? ctx.width / 2 : 0}, ${center === 'y' || center === true ? ctx.height / 2 : 0})`;
     }

package/dist/components/tests/BrushTestHarness.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Chart from '../Chart.svelte';
+  import type { ChartState } from '../../states/chart.svelte.js';
+
+  let {
+    chartProps = {},
+    oncontext,
+  }: {
+    chartProps?: Record<string, any>;
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+  } = $props();
+
+  let chartContext = $state<ChartState<any, any, any>>();
+
+  $effect(() => {
+    if (chartContext) {
+      oncontext?.(chartContext);
+    }
+  });
+
+  const mergedChartProps = $derived({
+    height: 200,
+    ...chartProps,
+  });
+</script>
+
+<Chart {...mergedChartProps} bind:context={chartContext} />

package/dist/components/tests/BrushTestHarness.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ChartState } from '../../states/chart.svelte.js';
+type $$ComponentProps = {
+    chartProps?: Record<string, any>;
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+};
+declare const BrushTestHarness: import("svelte").Component<$$ComponentProps, {}, "">;
+type BrushTestHarness = ReturnType<typeof BrushTestHarness>;
+export default BrushTestHarness;

package/dist/components/tests/TestHarness.svelte

@@ -6,6 +6,7 @@
 <script lang="ts">
   import type { Component as ComponentType } from 'svelte';
   import Chart from '../Chart.svelte';
+  import type { ChartState } from '../../states/chart.svelte.js';
   import Layer from '../layers/Layer.svelte';
 
   type ChildComponent = {
@@ -21,6 +22,7 @@
     component,
     componentProps = {},
     childComponents = [],
+    oncontext,
   }: {
     useChart?: boolean;
     chartProps?: Record<string, any>;
@@ -29,8 +31,17 @@
     component: ComponentType;
     componentProps?: Record<string, any>;
     childComponents?: ChildComponent[];
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
   } = $props();
 
+  let chartContext = $state<ChartState<any, any, any>>();
+
+  $effect(() => {
+    if (chartContext) {
+      oncontext?.(chartContext);
+    }
+  });
+
   const TestComponent = $derived(component);
 
   // Merge defaults with chartProps so chartProps can override defaults
@@ -66,7 +77,7 @@
 {/snippet}
 
 {#if useChart}
-  <Chart {...mergedChartProps} data-testid={chartTestId}>
+  <Chart {...mergedChartProps} bind:context={chartContext} data-testid={chartTestId}>
     <Layer center type={layer} {...layerProps}>
       {@render Component()}
     </Layer>

package/dist/components/tests/TestHarness.svelte.d.ts

@@ -1,6 +1,7 @@
 export declare const componentTestId = "test-lc-component";
 export declare const chartTestId = "test-lc-chart";
 import type { Component as ComponentType } from 'svelte';
+import type { ChartState } from '../../states/chart.svelte.js';
 type ChildComponent = {
     component: ComponentType;
     props?: Record<string, any> | ((snippetProps: any) => Record<string, any>);
@@ -13,6 +14,7 @@ type $$ComponentProps = {
     component: ComponentType;
     componentProps?: Record<string, any>;
     childComponents?: ChildComponent[];
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
 };
 declare const TestHarness: ComponentType<$$ComponentProps, {}, "">;
 type TestHarness = ReturnType<typeof TestHarness>;