layerchart 2.0.0-next.5 → 2.0.0-next.51

package/dist/components/index.js

@@ -18,16 +18,22 @@ export { default as Bars } from './Bars.svelte';
 export * from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
 export * from './Blur.svelte';
+export { default as BoxPlot } from './BoxPlot.svelte';
+export * from './BoxPlot.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export * from './Bounds.svelte';
 export { default as BrushContext } from './BrushContext.svelte';
 export * from './BrushContext.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export * from './Calendar.svelte';
-export { default as Canvas } from './layout/Canvas.svelte';
-export * from './layout/Canvas.svelte';
-export { default as Chart, getChartContext, getRenderContext } from './Chart.svelte';
+export { default as Cell } from './Cell.svelte';
+export * from './Cell.svelte';
+export { default as Canvas } from './layers/Canvas.svelte';
+export * from './layers/Canvas.svelte';
+export { default as Chart } from './Chart.svelte';
 export * from './Chart.svelte';
+export { default as Chord } from './Chord.svelte';
+export * from './Chord.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
 export * from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
@@ -40,22 +46,30 @@ export { default as ColorRamp } from './ColorRamp.svelte';
 export * from './ColorRamp.svelte';
 export { default as Connector } from './Connector.svelte';
 export * from './Connector.svelte';
+export { default as Contour } from './Contour.svelte';
+export * from './Contour.svelte';
 export { default as Dagre } from './Dagre.svelte';
 export * from './Dagre.svelte';
+export { default as Density } from './Density.svelte';
+export * from './Density.svelte';
+export { default as Ellipse } from './Ellipse.svelte';
+export * from './Ellipse.svelte';
 export { default as Frame } from './Frame.svelte';
 export * from './Frame.svelte';
 export { default as ForceSimulation } from './ForceSimulation.svelte';
 export * from './ForceSimulation.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export * from './GeoCircle.svelte';
-export { default as GeoContext, getGeoContext } from './GeoContext.svelte';
-export * from './GeoContext.svelte';
+export { default as GeoProjection } from './GeoProjection.svelte';
+export * from './GeoProjection.svelte';
 export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export * from './GeoEdgeFade.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export * from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
 export * from './GeoPoint.svelte';
+export { default as GeoRaster } from './GeoRaster.svelte';
+export * from './GeoRaster.svelte';
 export { default as GeoSpline } from './GeoSpline.svelte';
 export * from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
@@ -70,14 +84,16 @@ export { default as Group } from './Group.svelte';
 export * from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
 export * from './Highlight.svelte';
-export { default as Html } from './layout/Html.svelte';
-export * from './layout/Html.svelte';
+export { default as Html } from './layers/Html.svelte';
+export * from './layers/Html.svelte';
 export { default as Hull } from './Hull.svelte';
 export * from './Hull.svelte';
+export { default as Image } from './Image.svelte';
+export * from './Image.svelte';
 export { default as Labels } from './Labels.svelte';
 export * from './Labels.svelte';
-export { default as Layer } from './layout/Layer.svelte';
-export * from './layout/Layer.svelte';
+export { default as Layer } from './layers/Layer.svelte';
+export * from './layers/Layer.svelte';
 export { default as Legend } from './Legend.svelte';
 export * from './Legend.svelte';
 export { default as Line } from './Line.svelte';
@@ -90,10 +106,14 @@ export { default as Link } from './Link.svelte';
 export * from './Link.svelte';
 export { default as MotionPath } from './MotionPath.svelte';
 export * from './MotionPath.svelte';
+export { default as Month } from './Month.svelte';
+export * from './Month.svelte';
 export { default as Pack } from './Pack.svelte';
 export * from './Pack.svelte';
 export { default as Partition } from './Partition.svelte';
 export * from './Partition.svelte';
+export { default as Path } from './Path.svelte';
+export * from './Path.svelte';
 export { default as Pattern } from './Pattern.svelte';
 export * from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
@@ -102,20 +122,28 @@ export { default as Point } from './Point.svelte';
 export * from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export * from './Points.svelte';
+export { default as Polygon } from './Polygon.svelte';
+export * from './Polygon.svelte';
 export { default as RadialGradient } from './RadialGradient.svelte';
 export * from './RadialGradient.svelte';
+export { default as Raster } from './Raster.svelte';
+export * from './Raster.svelte';
 export { default as Rect } from './Rect.svelte';
 export * from './Rect.svelte';
+export { default as Ribbon } from './Ribbon.svelte';
+export * from './Ribbon.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';
 export * from './RectClipPath.svelte';
 export { default as Rule } from './Rule.svelte';
 export * from './Rule.svelte';
 export { default as Sankey } from './Sankey.svelte';
 export * from './Sankey.svelte';
-export { default as Svg } from './layout/Svg.svelte';
-export * from './layout/Svg.svelte';
+export { default as Svg } from './layers/Svg.svelte';
+export * from './layers/Svg.svelte';
 export { default as Text } from './Text.svelte';
 export * from './Text.svelte';
+export { default as Trail } from './Trail.svelte';
+export * from './Trail.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export * from './Threshold.svelte';
 export { default as TileImage } from './TileImage.svelte';
@@ -124,12 +152,15 @@ export * as Tooltip from './tooltip/index.js';
 export * from './tooltip/TooltipContext.svelte';
 export { default as TransformContext } from './TransformContext.svelte';
 export * from './TransformContext.svelte';
-// export { default as TransformControls } from './TransformControls.svelte'; // TODO: Restore once no longer using `svelet-ux` or `@mdi/js` (as they are dev dependencies)
 export { default as Tree } from './Tree.svelte';
 export * from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export * from './Treemap.svelte';
+export { default as Vector } from './Vector.svelte';
+export * from './Vector.svelte';
+export { default as Violin } from './Violin.svelte';
+export * from './Violin.svelte';
 export { default as Voronoi } from './Voronoi.svelte';
 export * from './Voronoi.svelte';
-export { default as WebGL } from './layout/WebGL.svelte';
-export * from './layout/WebGL.svelte';
+export { default as WebGL } from './layers/WebGL.svelte';
+export * from './layers/WebGL.svelte';

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>