layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/layers/Canvas.svelte

@@ -0,0 +1,502 @@
+<script lang="ts" module>
+  import type { ComponentNode } from '../../contexts/chart.js';
+  import type { ChartState } from '../../states/chart.svelte.js';
+
+  type SSRCaptureTarget = {
+    chartState?: ChartState<any, any, any>;
+    rootNode?: ComponentNode;
+  };
+
+  export type CanvasPropsWithoutHTML = {
+    /**
+     * The `<canvas>` tag. Useful for bindings.
+     *
+     * @bindable
+     */
+    ref?: HTMLCanvasElement;
+
+    /**
+     * The `<canvas>`'s 2d context. Useful for bindings.
+     *
+     * @bindable
+     */
+    canvasContext?: CanvasRenderingContext2D;
+
+    /**
+     * Force the use of a software (instead of hardware accelerated) 2D canvas, which can
+     * save memory when calling getImageData() frequently.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently
+     *
+     * @default false
+     */
+    willReadFrequently?: boolean;
+
+    /**
+     * The `z-index` style to apply to the layer.
+     *
+     * @default 0
+     */
+    zIndex?: number;
+
+    /**
+     *
+     * Whether pointer events should be enabled on the canvas.
+     *
+     * - `false`: `pointer-events: none;` will be set on the entire layer.
+     * - `true`: pointer events will operate normally.
+     *
+     * @default true
+     */
+    pointerEvents?: boolean;
+
+    /**
+     * The content to display if canvas is not supported or cannot be rendered.
+     * This can either be a string or a snippet with custom markup.
+     */
+    fallback?: string | Snippet;
+
+    /**
+     * Translate children to center of the canvas (useful for radial layouts).
+     *
+     * @default false
+     */
+    center?: boolean | 'x' | 'y';
+
+    /**
+     * Ignore TransformContext.
+     *
+     * Useful to add static elements such as legends.
+     *
+     * @default false
+     */
+    ignoreTransform?: boolean;
+
+    /**
+     * Disable the hit canvas (useful when animations are playing)
+     *
+     * @default false
+     */
+    disableHitCanvas?: boolean;
+
+    /**
+     * Show the hit canvas for debugging purposes.
+     *
+     * @default false
+     */
+    debug?: boolean;
+
+    /** @internal Server-side capture target used by layerchart/server. */
+    ssrCapture?: SSRCaptureTarget;
+
+    /** @internal Server-side capture callback used by layerchart/server. */
+    ssrCaptureCallback?: (data: SSRCaptureTarget) => void;
+
+    children?: Snippet<
+      [{ ref: HTMLCanvasElement; canvasContext: CanvasRenderingContext2D | undefined }]
+    >;
+  };
+
+  export type CanvasProps = CanvasPropsWithoutHTML &
+    Without<HTMLCanvasAttributes, CanvasPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { onMount, untrack, type Snippet } from 'svelte';
+  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 { 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 {
+    setCanvasContext,
+    type CanvasContextValue,
+    type ComponentRender,
+  } from '../../contexts/canvas.js';
+  import { renderTree } from '../../server/renderTree.js';
+
+  let {
+    ref: refProp = $bindable(),
+    canvasContext: canvasContextProp = $bindable(),
+    ssrCapture,
+    ssrCaptureCallback,
+    willReadFrequently = false,
+    debug = false,
+    zIndex = 0,
+    pointerEvents = true,
+    fallback,
+    center = false,
+    ignoreTransform = false,
+    disableHitCanvas = false,
+    class: className,
+    children,
+    onclick,
+    ondblclick,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    onpointerdown,
+    ontouchmove,
+    ...restProps
+  }: CanvasProps = $props();
+
+  let ref = $state<HTMLCanvasElement>();
+  let context = $state<CanvasRenderingContext2D>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  $effect.pre(() => {
+    canvasContextProp = context;
+  });
+
+  const ctx = getChartContext();
+
+  const logger = new Logger('Canvas');
+
+  // 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;
+
+  /**
+   * HitCanvas
+   */
+  let hitCanvasElement = $state<HTMLCanvasElement>();
+  let hitCanvasContext = $state<CanvasRenderingContext2D>();
+  let colorGenerator = rgbColorGenerator();
+  let activeCanvas = $state(false);
+  let lastActiveNode: ComponentNode | null | undefined = null;
+
+  const nodeByColor = new Map<string, ComponentNode>();
+
+  function getPointerNode(e: PointerEvent | MouseEvent | TouchEvent) {
+    const { x, y } = localPoint(e);
+    const color = getPixelColor(hitCanvasContext!, x, y);
+    const colorKey = getColorStr(color);
+    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 node = getPointerNode(e);
+
+    if (node != lastActiveNode) {
+      // TODO: Should `pointerleave`/`pointerout` and `pointerenter`/`pointerover` be handled differently?
+      if (lastActiveNode) {
+        bubbleEvent(lastActiveNode, 'pointerleave', e);
+        bubbleEvent(lastActiveNode, 'pointerout', e);
+      }
+
+      bubbleEvent(node, 'pointerenter', e);
+      bubbleEvent(node, 'pointerover', e);
+    }
+    bubbleEvent(node, 'pointermove', e);
+
+    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)
+    bubbleEvent(lastActiveNode, 'pointerleave', e);
+    bubbleEvent(lastActiveNode, 'pointerout', e);
+
+    lastActiveNode = null;
+    activeCanvas = false;
+  };
+  /**
+   * end HitCanvas
+   */
+
+  // Invalidate/redraw if color scheme changes, either via browser `prefers-color-scheme` (including emulation) or by changing `<html class="dark">` or `<html data-theme="...">`
+  if (typeof window !== 'undefined') {
+    const { dark } = new MediaQueryPresets();
+    watch(
+      () => dark.current,
+      () => {
+        canvasContext.invalidate();
+      }
+    );
+    useMutationObserver(
+      () => document.documentElement,
+      () => canvasContext.invalidate(),
+      {
+        attributes: true,
+        attributeFilter: ['class', 'data-theme'],
+      }
+    );
+  }
+
+  onMount(() => {
+    context = ref?.getContext('2d', { willReadFrequently }) as CanvasRenderingContext2D;
+
+    hitCanvasContext = hitCanvasElement?.getContext('2d', {
+      willReadFrequently: false, // Explicitly set to `false` to resolve pixel artifacts between fill and stroke with the same color (issue #372)
+    }) as CanvasRenderingContext2D;
+
+    return () => {
+      if (frameId) {
+        cancelAnimationFrame(frameId);
+      }
+    };
+  });
+
+  function update() {
+    if (!context) return;
+
+    // scale main canvas
+    scaleCanvas(context, ctx.containerWidth, ctx.containerHeight);
+    context.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
+
+    // apply padding translation
+    context.translate(ctx.padding.left ?? 0, ctx.padding.top ?? 0);
+
+    let newTranslate: undefined | { x: number; y: number };
+
+    // apply centering or transform
+    if (center) {
+      newTranslate = {
+        x: center === 'x' || center === true ? ctx.width / 2 : 0,
+        y: center === 'y' || center === true ? ctx.height / 2 : 0,
+      };
+      context.translate(newTranslate.x, newTranslate.y);
+    } 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);
+    }
+
+    // Recursively render the component tree with proper save/restore scoping
+    renderTree(context, rootNode);
+
+    /*
+     * Sync hit canvas with main canvas
+     */
+    if (hitCanvasContext) {
+      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 {
+        // scale hit canvas to match main canvas
+        scaleCanvas(hitCanvasContext, ctx.containerWidth, ctx.containerHeight);
+        hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
+
+        // sync transform with main canvas (padding, center, zoom already applied)
+        hitCanvasContext.setTransform(context.getTransform());
+
+        // reset color generator and node map
+        colorGenerator = rgbColorGenerator();
+        nodeByColor.clear();
+
+        // render hit canvas tree
+        renderHitTree(hitCanvasContext, rootNode);
+      }
+    }
+
+    pendingInvalidation = false;
+  }
+
+  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 {
+    // 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() {
+      if (pendingInvalidation) return;
+      if (typeof requestAnimationFrame === 'undefined') return;
+      pendingInvalidation = true;
+      frameId = requestAnimationFrame(update);
+    }
+
+    function getRootNode() {
+      return rootNode;
+    }
+
+    return { register, invalidate, getRootNode };
+  }
+
+  function captureSSR() {
+    if (typeof window !== 'undefined') return '';
+    if (!ssrCapture && !ssrCaptureCallback) return '';
+
+    const captured: SSRCaptureTarget = {
+      chartState: ctx,
+      rootNode,
+    };
+
+    if (ssrCapture) {
+      Object.assign(ssrCapture, captured);
+    }
+
+    ssrCaptureCallback?.(captured);
+    return '';
+  }
+
+  const canvasContext = createCanvasContext();
+
+  $effect.pre(() => {
+    [ctx.height, ctx.width, ctx.containerHeight, ctx.containerWidth, ctx.transform.dragging];
+    canvasContext.invalidate();
+  });
+
+  setCanvasContext(canvasContext);
+  setLayerContext('canvas');
+</script>
+
+<canvas
+  bind:this={ref}
+  style:z-index={zIndex}
+  class={['lc-layout-canvas', className]}
+  class:disablePointerEvents={pointerEvents === false}
+  onclick={(e) => {
+    const node = getPointerNode(e);
+    bubbleEvent(node, 'click', e);
+    onclick?.(e);
+  }}
+  ondblclick={(e) => {
+    const node = getPointerNode(e);
+    bubbleEvent(node, 'dblclick', e);
+    ondblclick?.(e);
+  }}
+  onpointerdown={(e) => {
+    const node = getPointerNode(e);
+    bubbleEvent(node, 'pointerdown', e);
+    onpointerdown?.(e);
+  }}
+  onpointerenter={(e) => {
+    onpointerenter?.(e);
+    onPointerMove(e);
+  }}
+  onpointermove={(e) => {
+    onpointermove?.(e);
+    onPointerMove(e);
+  }}
+  onpointerleave={(e) => {
+    onpointerleave?.(e);
+    onPointerLeave(e);
+  }}
+  ontouchmove={(e) => {
+    // Prevent touch from interfering with pointer if over data
+    if (lastActiveNode) {
+      e.preventDefault();
+    }
+
+    const node = getPointerNode(e);
+    bubbleEvent(node, 'touchmove', e);
+  }}
+  {...restProps}
+>
+  {#if fallback}
+    {#if typeof fallback === 'function'}
+      {@render fallback()}
+    {:else}
+      {fallback}
+    {/if}
+  {/if}
+</canvas>
+
+<!-- Hit canvas used for hidden context -->
+<canvas bind:this={hitCanvasElement} class="lc-hit-canvas" class:debug></canvas>
+
+{@render children?.({ ref, canvasContext: context })}
+{captureSSR()}
+
+<style>
+  @layer base {
+    :where(.lc-layout-canvas) {
+      position: absolute;
+      inset: 0;
+
+      &.disablePointerEvents {
+        pointer-events: none;
+      }
+    }
+
+    :where(.lc-hit-canvas) {
+      position: absolute;
+      inset: 0;
+      pointer-events: none; /* events handled by main canvas */
+      image-rendering: pixelated; /* https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering */
+
+      opacity: 0;
+      &.debug {
+        border: 1px solid var(--color-danger, red);
+        opacity: 1;
+      }
+    }
+  }
+</style>

package/dist/components/{layout → layers}/Canvas.svelte.d.ts

@@ -1,3 +1,9 @@
+import type { ComponentNode } from '../../contexts/chart.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+type SSRCaptureTarget = {
+    chartState?: ChartState<any, any, any>;
+    rootNode?: ComponentNode;
+};
 export type CanvasPropsWithoutHTML = {
     /**
      * The `<canvas>` tag. Useful for bindings.
@@ -55,12 +61,22 @@ export type CanvasPropsWithoutHTML = {
      * @default false
      */
     ignoreTransform?: boolean;
+    /**
+     * Disable the hit canvas (useful when animations are playing)
+     *
+     * @default false
+     */
+    disableHitCanvas?: boolean;
     /**
      * Show the hit canvas for debugging purposes.
      *
      * @default false
      */
     debug?: boolean;
+    /** @internal Server-side capture target used by layerchart/server. */
+    ssrCapture?: SSRCaptureTarget;
+    /** @internal Server-side capture callback used by layerchart/server. */
+    ssrCaptureCallback?: (data: SSRCaptureTarget) => void;
     children?: Snippet<[
         {
             ref: HTMLCanvasElement;
@@ -69,44 +85,8 @@ export type CanvasPropsWithoutHTML = {
     ]>;
 };
 export type CanvasProps = CanvasPropsWithoutHTML & Without<HTMLCanvasAttributes, CanvasPropsWithoutHTML>;
-type ComponentRender<T extends Element = Element> = {
-    name: string;
-    render: (ctx: CanvasRenderingContext2D, styleOverrides?: ComputedStylesOptions) => any;
-    retainState?: boolean;
-    events?: {
-        click?: MouseEventHandler<T> | null;
-        dblclick?: MouseEventHandler<T> | null;
-        pointerenter?: PointerEventHandler<T> | null;
-        pointerover?: PointerEventHandler<T> | null;
-        pointermove?: PointerEventHandler<T> | null;
-        pointerleave?: PointerEventHandler<T> | null;
-        pointerout?: PointerEventHandler<T> | null;
-        pointerdown?: PointerEventHandler<T> | null;
-        touchmove?: TouchEventHandler<T> | null;
-    };
-    /**
-     * Optional dependencies to track and invalidate the canvas context when they change.
-     */
-    deps?: () => any[];
-};
-export type CanvasContextValue = {
-    /**
-     * Register component to render.
-     *
-     * Returns method to unregister on component destroy
-     */
-    register<T extends Element>(component: ComponentRender<T>): () => void;
-    invalidate(): void;
-};
-export declare function getCanvasContext(): CanvasContextValue;
-/**
- * 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 ComputedStylesOptions } from '../../utils/canvas.js';
-import type { HTMLCanvasAttributes, MouseEventHandler, PointerEventHandler, TouchEventHandler } from 'svelte/elements';
+import type { HTMLCanvasAttributes } from 'svelte/elements';
 import type { Without } from '../../utils/types.js';
 declare const Canvas: import("svelte").Component<CanvasProps, {}, "ref" | "canvasContext">;
 type Canvas = ReturnType<typeof Canvas>;

package/dist/components/{layout → layers}/Html.svelte

@@ -38,6 +38,14 @@
      */
     ignoreTransform?: boolean;
 
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the layer.
+     *
+     * @default false
+     */
+    clip?: boolean;
+
     children?: Snippet<[{ ref: HTMLElement }]>;
   };
 
@@ -46,11 +54,8 @@
 </script>
 
 <script lang="ts">
-  import { cls } from '@layerstack/tailwind';
-  import { getTransformContext } from '../TransformContext.svelte';
-
-  import { getChartContext, setRenderContext } from '../Chart.svelte';
-  import { layerClass } from '../../utils/attributes.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { setLayerContext } from '../../contexts/layer.js';
 
   let {
     ref: refProp = $bindable(),
@@ -62,6 +67,7 @@
     'aria-describedby': describedBy,
     center = false,
     ignoreTransform = false,
+    clip = false,
     class: className,
     children,
     ...restProps
@@ -75,31 +81,26 @@
   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)`;
     }
   });
 
-  setRenderContext('html');
+  setLayerContext('html');
 </script>
 
 <div
   bind:this={ref}
-  class={cls(
-    layerClass('layout-html'),
-    'absolute top-0 left-0',
-    pointerEvents === false && 'pointer-events-none',
-    className
-  )}
+  class={['lc-layout-html', className]}
+  class:disablePointerEvents={pointerEvents === false}
+  class:clip
   style:transform
   style:transform-origin="top left"
   style:z-index={zIndex}
-  style:pointer-events={pointerEvents === false ? 'none' : null}
   style:top="{ctx.padding.top}px"
   style:bottom="{ctx.padding.bottom}px"
   style:left="{ctx.padding.left}px"
@@ -112,3 +113,20 @@
 >
   {@render children?.({ ref })}
 </div>
+
+<style>
+  @layer base {
+    :where(.lc-layout-html) {
+      position: absolute;
+      inset: 0;
+
+      &.disablePointerEvents {
+        pointer-events: none;
+      }
+
+      &.clip {
+        overflow: hidden;
+      }
+    }
+  }
+</style>

package/dist/components/{layout → layers}/Html.svelte.d.ts

@@ -30,6 +30,13 @@ type HTMLPropsWithoutHTML = {
      * Ignore TransformContext.  Useful to add static elements such as legends.
      */
     ignoreTransform?: boolean;
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the layer.
+     *
+     * @default false
+     */
+    clip?: boolean;
     children?: Snippet<[{
         ref: HTMLElement;
     }]>;