layerchart 2.0.0-next.1 → 2.0.0-next.3

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

@@ -1,64 +1,113 @@
-import { SvelteComponentTyped } from "svelte";
-type ComponentRender = {
+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;
+    /**
+     * Show the hit canvas for debugging purposes.
+     *
+     * @default false
+     */
+    debug?: boolean;
+    children?: Snippet<[
+        {
+            ref: HTMLCanvasElement;
+            canvasContext: CanvasRenderingContext2D | undefined;
+        }
+    ]>;
+};
+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?: (e: MouseEvent) => void;
-        dblclick?: (e: MouseEvent) => void;
-        pointerenter?: (e: PointerEvent) => void;
-        pointerover?: (e: PointerEvent) => void;
-        pointermove?: (e: PointerEvent) => void;
-        pointerleave?: (e: PointerEvent) => void;
-        pointerout?: (e: PointerEvent) => void;
-        pointerdown?: (e: PointerEvent) => void;
-        touchmove?: (e: TouchEvent) => void;
+        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 CanvasContext = {
-    /** Register component to render.  Returns method to unregister on component destory */
-    register(component: ComponentRender): () => void;
+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 const canvasContextKey: unique symbol;
-export declare function getCanvasContext(): CanvasContext;
+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';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        element?: HTMLCanvasElement | undefined;
-        context?: CanvasRenderingContext2D | undefined;
-        willReadFrequently?: boolean | undefined;
-        zIndex?: undefined;
-        pointerEvents?: boolean | undefined | undefined;
-        fallback?: string | undefined;
-        label?: string | undefined | undefined;
-        labelledBy?: string | undefined | undefined;
-        describedBy?: string | undefined | undefined;
-        center?: boolean | "x" | "y" | undefined;
-        ignoreTransform?: boolean | undefined;
-        debug?: boolean | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        pointerenter: PointerEvent;
-        pointermove: PointerEvent;
-        pointerleave: PointerEvent;
-        touchmove: TouchEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        fallback: {};
-        default: {
-            element: HTMLCanvasElement | undefined;
-            context: CanvasRenderingContext2D;
-        };
-    };
-};
-export type CanvasProps = typeof __propDef.props;
-export type CanvasEvents = typeof __propDef.events;
-export type CanvasSlots = typeof __propDef.slots;
-export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEvents, CanvasSlots> {
-}
-export {};
+import type { HTMLCanvasAttributes, MouseEventHandler, PointerEventHandler, TouchEventHandler } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+declare const Canvas: import("svelte").Component<CanvasProps, {}, "ref" | "canvasContext">;
+type Canvas = ReturnType<typeof Canvas>;
+export default Canvas;

package/dist/components/layout/Html.svelte

@@ -1,74 +1,114 @@
-<script lang="ts">
-  import { cls } from '@layerstack/tailwind';
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Without } from '../../utils/types.js';
+  import type { Snippet } from 'svelte';
 
-  import { setRenderContext } from '../Chart.svelte';
-  import { chartContext } from '../ChartContext.svelte';
-  import { transformContext } from '../TransformContext.svelte';
+  type HTMLPropsWithoutHTML = {
+    /**
+     * A reference to the layer's outermost `<div>` tag.
+     *
+     * @bindable
+     */
+    ref?: HTMLElement;
 
-  /** The layer's outermost `<div>` tag. Useful for bindings. */
-  export let element: HTMLDivElement | undefined = undefined;
+    /**
+     * The layer's z-index.
+     */
+    zIndex?: number;
 
-  /** The layer's z-index. */
-  export let zIndex = undefined;
+    /**
+     * Set this to `false` to set `pointer-events: none;` on the entire layer.
+     */
+    pointerEvents?: boolean;
 
-  /** Set this to `false` to set `pointer-events: none;` on the entire layer. */
-  export let pointerEvents: boolean | undefined = undefined;
+    /**
+     * A string passed to the `aria-role` on the `<div>` tag.
+     * This is `undefined` by default but will be set by default to `'figure'`
+     * if `label`, `labelledby` or `describedby` is set. That default will be overridden by whatever is passed in.
+     */
+    role?: string;
 
-  /** A string passed to the `aria-role` on the `<div>` tag. This is `undefined` by default but will be set by default to `'figure'` if `label`, `labelledby` or `describedby` is set. That default will be overridden by whatever is passed in. */
-  export let role: string | undefined = undefined;
+    /**
+     * Translate children to center (useful for radial layouts)
+     */
+    center?: boolean | 'x' | 'y';
 
-  /** A string passed to the `aria-label` property on the `<div>` tag. */
-  export let label: string | undefined = undefined;
+    /**
+     * Ignore TransformContext.  Useful to add static elements such as legends.
+     */
+    ignoreTransform?: boolean;
 
-  /** A string passed to the `aria-labelledby property` on the `<div>` tag. */
-  export let labelledBy: string | undefined = undefined;
+    children?: Snippet<[{ ref: HTMLElement }]>;
+  };
+
+  export type HTMLProps = HTMLPropsWithoutHTML &
+    Without<HTMLAttributes<HTMLElement>, HTMLPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { getTransformContext } from '../TransformContext.svelte';
 
-  /** A string passed to the `aria-describedby` property on the `<div>` tag. */
-  export let describedBy: string | undefined = undefined;
+  import { getChartContext, setRenderContext } from '../Chart.svelte';
+  import { layerClass } from '../../utils/attributes.js';
 
-  /**
-   * Translate children to center (useful for radial layouts)
-   */
-  export let center: boolean | 'x' | 'y' = false;
+  let {
+    ref: refProp = $bindable(),
+    zIndex = 0,
+    pointerEvents = true,
+    role,
+    'aria-label': label,
+    'aria-labelledby': labelledBy,
+    'aria-describedby': describedBy,
+    center = false,
+    ignoreTransform = false,
+    class: className,
+    children,
+    ...restProps
+  }: HTMLProps = $props();
 
-  /** Ignore TransformContext.  Useful to add static elements such as legends. */
-  export let ignoreTransform = false;
+  let ref = $state<HTMLElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
-  $: roleVal = role || (label || labelledBy || describedBy ? 'figure' : undefined);
+  const roleVal = $derived(role || (label || labelledBy || describedBy ? 'figure' : undefined));
 
-  const { width, height, padding } = chartContext();
-  const { mode, scale, translate } = transformContext();
+  const ctx = getChartContext();
+  const transformCtx = getTransformContext();
 
-  let transform = '';
-  $: if (mode === 'canvas' && !ignoreTransform) {
-    transform = `translate(${$translate.x}px,${$translate.y}px) scale(${$scale})`;
-  } else if (center) {
-    transform = `translate(${center === 'x' || center === true ? $width / 2 : 0}px, ${center === 'y' || center === true ? $height / 2 : 0}px)`;
-  }
+  const transform = $derived.by(() => {
+    if (transformCtx.mode === 'canvas' && !ignoreTransform) {
+      return `translate(${transformCtx.translate.x}px,${transformCtx.translate.y}px) scale(${transformCtx.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');
 </script>
 
 <div
-  bind:this={element}
+  bind:this={ref}
   class={cls(
-    'layercake-layout-html',
+    layerClass('layout-html'),
     'absolute top-0 left-0',
     pointerEvents === false && 'pointer-events-none',
-    $$props.class
+    className
   )}
   style:transform
   style:transform-origin="top left"
   style:z-index={zIndex}
   style:pointer-events={pointerEvents === false ? 'none' : null}
-  style:top="{$padding.top}px"
-  style:bottom="{$padding.bottom}px"
-  style:left="{$padding.left}px"
-  style:right="{$padding.right}px"
+  style:top="{ctx.padding.top}px"
+  style:bottom="{ctx.padding.bottom}px"
+  style:left="{ctx.padding.left}px"
+  style:right="{ctx.padding.right}px"
   role={roleVal}
   aria-label={label}
   aria-labelledby={labelledBy}
   aria-describedby={describedBy}
+  {...restProps}
 >
-  <slot {element}></slot>
+  {@render children?.({ ref })}
 </div>

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

@@ -1,29 +1,40 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        element?: HTMLDivElement | undefined;
-        zIndex?: undefined;
-        pointerEvents?: boolean | undefined | undefined;
-        role?: string | undefined | undefined;
-        label?: string | undefined | undefined;
-        labelledBy?: string | undefined | undefined;
-        describedBy?: string | undefined | undefined;
-        center?: boolean | "x" | "y" | undefined;
-        ignoreTransform?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            element: HTMLDivElement | undefined;
-        };
-    };
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type { Snippet } from 'svelte';
+type HTMLPropsWithoutHTML = {
+    /**
+     * A reference to the layer's outermost `<div>` tag.
+     *
+     * @bindable
+     */
+    ref?: HTMLElement;
+    /**
+     * The layer's z-index.
+     */
+    zIndex?: number;
+    /**
+     * Set this to `false` to set `pointer-events: none;` on the entire layer.
+     */
+    pointerEvents?: boolean;
+    /**
+     * A string passed to the `aria-role` on the `<div>` tag.
+     * This is `undefined` by default but will be set by default to `'figure'`
+     * if `label`, `labelledby` or `describedby` is set. That default will be overridden by whatever is passed in.
+     */
+    role?: string;
+    /**
+     * Translate children to center (useful for radial layouts)
+     */
+    center?: boolean | 'x' | 'y';
+    /**
+     * Ignore TransformContext.  Useful to add static elements such as legends.
+     */
+    ignoreTransform?: boolean;
+    children?: Snippet<[{
+        ref: HTMLElement;
+    }]>;
 };
-export type HtmlProps = typeof __propDef.props;
-export type HtmlEvents = typeof __propDef.events;
-export type HtmlSlots = typeof __propDef.slots;
-export default class Html extends SvelteComponentTyped<HtmlProps, HtmlEvents, HtmlSlots> {
-}
-export {};
+export type HTMLProps = HTMLPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, HTMLPropsWithoutHTML>;
+declare const Html: import("svelte").Component<HTMLProps, {}, "ref">;
+type Html = ReturnType<typeof Html>;
+export default Html;

package/dist/components/layout/Layer.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+  import type { ComponentProps } from 'svelte';
+
+  export type CanvasLayerProps = {
+    type: 'canvas';
+  } & Omit<ComponentProps<typeof Canvas>, 'type'>;
+
+  export type HtmlLayerProps = {
+    type: 'html';
+  } & Omit<ComponentProps<typeof Html>, 'type'>;
+
+  export type SvgLayerProps = {
+    type: 'svg';
+  } & Omit<ComponentProps<typeof Svg>, 'type'>;
+
+  export type LayerProps = CanvasLayerProps | HtmlLayerProps | SvgLayerProps;
+</script>
+
+<script lang="ts">
+  import Canvas from './Canvas.svelte';
+  import Html from './Html.svelte';
+  import Svg from './Svg.svelte';
+
+  let { type, children, ...restProps }: LayerProps = $props();
+</script>
+
+{#if type === 'canvas'}
+  <Canvas {...restProps as ComponentProps<typeof Canvas>}>
+    {@render children?.()}
+  </Canvas>
+{:else if type === 'svg'}
+  <Svg {...restProps as ComponentProps<typeof Svg>}>
+    {@render children?.()}
+  </Svg>
+{:else if type === 'html'}
+  <Html {...restProps as ComponentProps<typeof Html>}>
+    {@render children?.()}
+  </Html>
+{/if}

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'svelte';
+export type CanvasLayerProps = {
+    type: 'canvas';
+} & Omit<ComponentProps<typeof Canvas>, 'type'>;
+export type HtmlLayerProps = {
+    type: 'html';
+} & Omit<ComponentProps<typeof Html>, 'type'>;
+export type SvgLayerProps = {
+    type: 'svg';
+} & Omit<ComponentProps<typeof Svg>, 'type'>;
+export type LayerProps = CanvasLayerProps | HtmlLayerProps | SvgLayerProps;
+import Canvas from './Canvas.svelte';
+import Html from './Html.svelte';
+import Svg from './Svg.svelte';
+declare const Layer: import("svelte").Component<LayerProps, {}, "">;
+type Layer = ReturnType<typeof Layer>;
+export default Layer;