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

package/dist/contexts/layer.js

@@ -0,0 +1,8 @@
+import { Context } from 'runed';
+const _LayerContext = new Context('LayerContext');
+export function getLayerContext() {
+    return _LayerContext.get();
+}
+export function setLayerContext(context) {
+    return _LayerContext.set(context);
+}

package/dist/contexts/settings.d.ts

@@ -0,0 +1,4 @@
+import { Settings, type SettingsOptions } from '../states/settings.svelte.js';
+/** Get the current settings context, or default if not set */
+export declare function getSettings(): Settings;
+export declare function setSettings(settings: SettingsOptions): Settings;

package/dist/contexts/settings.js

@@ -0,0 +1,10 @@
+import { Context } from 'runed';
+import { Settings, defaultSettings } from '../states/settings.svelte.js';
+const _SettingsContext = new Context('Settings');
+/** Get the current settings context, or default if not set */
+export function getSettings() {
+    return _SettingsContext.getOr(defaultSettings);
+}
+export function setSettings(settings) {
+    return _SettingsContext.set(new Settings(settings));
+}

package/dist/contexts/transform.d.ts

@@ -0,0 +1,96 @@
+import { type TransformMode, type TransformScrollMode } from '../states/transform.svelte.js';
+import type { MotionProp } from '../utils/motion.svelte.js';
+export type TransformContextValue = {
+    /**
+     * The current transform mode.
+     *
+     * - `canvas`: The transform is applied to the canvas element.
+     * - `domain`: The transform narrows/shifts the visible data domain.
+     * - `projection`: The transform updates the geo projection.
+     * - `none`: No transform is applied.
+     */
+    mode: TransformMode;
+    /**
+     * The current scale of the transform.
+     */
+    scale: number;
+    /**
+     * Set the scale of the transform
+     * @param value - the scale value to set
+     * @param options - motion options to apply to the transform (defaults to the motion options passed to the component)
+     */
+    setScale(value: number, options?: MotionProp): void;
+    /**
+     * The current translate of the transform.
+     */
+    translate: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Set the translate of the transform
+     * @param point - the point to translate to
+     * @param options - motion options to apply to the transform (defaults to the motion options passed to the component)
+     */
+    setTranslate(point: {
+        x: number;
+        y: number;
+    }, options?: MotionProp): void;
+    /**
+     * Whether the transform is currently being moved
+     */
+    moving: boolean;
+    /**
+     * Whether the transform is currently being dragged
+     */
+    dragging: boolean;
+    /**
+     * The scroll mode of the transform.
+     *
+     * - `scale`: Scrolling will zoom in/out the canvas.
+     * - `translate`: Scrolling will pan the canvas.
+     * - `none`: No scroll mode is applied.
+     */
+    scrollMode: TransformScrollMode;
+    /**
+     * Set the scroll mode of the transform
+     *
+     * @param mode - the scroll mode to set
+     */
+    setScrollMode(mode: TransformScrollMode): void;
+    /**
+     * Reset the transform to its initial state
+     */
+    reset(): void;
+    /**
+     * Zoom in the transform
+     */
+    zoomIn(): void;
+    /**
+     * Zoom out the transform
+     *
+     */
+    zoomOut(): void;
+    /**
+     * Translate the transform to the center of the canvas
+     */
+    translateCenter(): void;
+    /**
+     * Zoom to a specific point in the canvas
+     *
+     * @param center - The point (in chart coordinates) that should become the new
+     * center of the view after zooming.
+     *
+     * @param rect - A rectangular region (in chart coordinates) that the view should scale to fit.
+     * If omitted, the scale defaults to 1 (no zoom).
+     */
+    zoomTo(center: {
+        x: number;
+        y: number;
+    }, rect?: {
+        width: number;
+        height: number;
+    }): void;
+};
+export declare function getTransformContext(): import("../states/transform.svelte.js").TransformState | TransformContextValue;
+export declare function setTransformContext(transform: TransformContextValue): TransformContextValue;

package/dist/contexts/transform.js

@@ -0,0 +1,10 @@
+import { Context } from 'runed';
+import {} from '../components/TransformContext.svelte';
+import { createDefaultTransformState, } from '../states/transform.svelte.js';
+const _TransformContext = new Context('TransformContext');
+export function getTransformContext() {
+    return _TransformContext.getOr(createDefaultTransformState());
+}
+export function setTransformContext(transform) {
+    return _TransformContext.set(transform);
+}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/index.js';
+export * from './contexts/index.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './components/index.js';
+export * from './contexts/index.js';
 export * from './utils/index.js';

package/dist/server/ContextCapture.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { getChartContext } from '../contexts/chart.js';
+  import { getCanvasContext } from '../contexts/canvas.js';
+  import { setSSRCapture, type CaptureTarget } from './captureStore.js';
+
+  let {
+    capture,
+    onCapture,
+  }: {
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } = $props();
+
+  const chartState = getChartContext();
+  const canvasCtx = getCanvasContext();
+
+  const captured = {
+    chartState,
+    rootNode: canvasCtx.getRootNode?.(),
+  };
+
+  if (typeof window === 'undefined') {
+    if (capture) {
+      Object.assign(capture, captured);
+    }
+
+    setSSRCapture(captured);
+    onCapture?.(captured);
+  }
+</script>

package/dist/server/ContextCapture.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+};
+declare const ContextCapture: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextCapture = ReturnType<typeof ContextCapture>;
+export default ContextCapture;

package/dist/server/ServerChart.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Chart from '../components/Chart.svelte';
+  import type { ChartProps } from '../components/Chart.svelte';
+  import Canvas from '../components/layers/Canvas.svelte';
+  import type { CaptureTarget } from './captureStore.js';
+
+  let {
+    children,
+    capture,
+    onCapture,
+    ...chartProps
+  }: {
+    children?: Snippet;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } & Omit<ChartProps<any>, 'children'> = $props();
+</script>
+
+<Chart ssr={true} {...chartProps}>
+  <Canvas ssrCapture={capture} ssrCaptureCallback={onCapture}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </Canvas>
+</Chart>

package/dist/server/ServerChart.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ChartProps } from '../components/Chart.svelte';
+import type { CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    children?: Snippet;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+} & Omit<ChartProps<any>, 'children'>;
+declare const ServerChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type ServerChart = ReturnType<typeof ServerChart>;
+export default ServerChart;

package/dist/server/TestBarChart.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { scaleBand } from 'd3-scale';
+	import ServerChart from './ServerChart.svelte';
+	import type { CaptureTarget } from './captureStore.js';
+	import Bars from '../components/Bars.svelte';
+
+	let {
+		data,
+		width,
+		height,
+		capture,
+		onCapture
+	}: {
+		data: { category: string; value: number }[];
+		width: number;
+		height: number;
+		capture?: CaptureTarget;
+		onCapture?: (data: CaptureTarget) => void;
+	} = $props();
+</script>
+
+<ServerChart
+	{capture}
+	{onCapture}
+	{width}
+	{height}
+	{data}
+	x="category"
+	xScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
+	y="value"
+	yDomain={[0, null]}
+	padding={{ top: 20, right: 20, bottom: 30, left: 40 }}
+>
+	<Bars fill="rgb(59, 130, 246)" radius={4} />
+</ServerChart>

package/dist/server/TestBarChart.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    data: {
+        category: string;
+        value: number;
+    }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+};
+declare const TestBarChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type TestBarChart = ReturnType<typeof TestBarChart>;
+export default TestBarChart;

package/dist/server/TestLineChart.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import ServerChart from './ServerChart.svelte';
+	import type { CaptureTarget } from './captureStore.js';
+	import Area from '../components/Area.svelte';
+	import Spline from '../components/Spline.svelte';
+
+	let {
+		data,
+		width,
+		height,
+		capture,
+		onCapture
+	}: {
+		data: { date: number; value: number }[];
+		width: number;
+		height: number;
+		capture?: CaptureTarget;
+		onCapture?: (data: CaptureTarget) => void;
+	} = $props();
+</script>
+
+<ServerChart
+	{capture}
+	{onCapture}
+	{width}
+	{height}
+	{data}
+	x="date"
+	y="value"
+	yDomain={[0, null]}
+	padding={{ top: 20, right: 20, bottom: 20, left: 20 }}
+>
+	<Area fill="rgba(59, 130, 246, 0.15)" stroke="none" />
+	<Spline stroke="rgb(59, 130, 246)" strokeWidth={2} />
+</ServerChart>

package/dist/server/TestLineChart.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CaptureTarget } from './captureStore.js';
+type $$ComponentProps = {
+    data: {
+        date: number;
+        value: number;
+    }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+};
+declare const TestLineChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type TestLineChart = ReturnType<typeof TestLineChart>;
+export default TestLineChart;

package/dist/server/captureStore.d.ts

@@ -0,0 +1,8 @@
+import type { ChartState, ComponentNode } from '../states/chart.svelte.js';
+export type CaptureTarget = {
+    chartState?: ChartState;
+    rootNode?: ComponentNode;
+};
+export type SSRCapture = CaptureTarget | null;
+export declare function setSSRCapture(target: SSRCapture): void;
+export declare function getSSRCapture(): SSRCapture;

package/dist/server/captureStore.js

@@ -0,0 +1,18 @@
+const SSR_CAPTURE_KEY = Symbol.for('layerchart.ssr-capture');
+let _capture = null;
+function getGlobalCaptureStore() {
+    return globalThis;
+}
+export function setSSRCapture(target) {
+    _capture = target;
+    const globalStore = getGlobalCaptureStore();
+    if (target == null) {
+        delete globalStore[SSR_CAPTURE_KEY];
+    }
+    else {
+        globalStore[SSR_CAPTURE_KEY] = target;
+    }
+}
+export function getSSRCapture() {
+    return getGlobalCaptureStore()[SSR_CAPTURE_KEY] ?? _capture;
+}

package/dist/server/index.d.ts

@@ -0,0 +1,137 @@
+import type { Component } from 'svelte';
+import type { ChartState } from '../states/chart.svelte.js';
+import type { ComponentNode } from '../states/chart.svelte.js';
+import type { CaptureTarget } from './captureStore.js';
+export { renderTree } from './renderTree.js';
+export { default as ServerChart } from './ServerChart.svelte';
+export { getSSRCapture, setSSRCapture, type CaptureTarget, type SSRCapture, } from './captureStore.js';
+export type CapturedChart = {
+    chartState: ChartState;
+    rootNode: ComponentNode;
+};
+export type CanvasRenderContext = Omit<CanvasRenderingContext2D, 'drawFocusIfNeeded' | 'canvas'> & {
+    canvas?: unknown;
+};
+export type CanvasFactory = (width: number, height: number) => {
+    getContext(type: '2d'): unknown;
+    toBuffer(mimeType: string, ...args: any[]): Buffer | Uint8Array;
+};
+export type RenderOptions = {
+    /** Pixel ratio for high-DPI output. @default 1 */
+    devicePixelRatio?: number;
+    /** Output format. @default 'png' */
+    format?: 'png' | 'jpeg';
+    /** JPEG quality (0-1). Only used when format is 'jpeg'. @default 0.92 */
+    quality?: number;
+    /**
+     * Background color to fill before rendering the chart.
+     * When omitted, PNG output is transparent.
+     * Set to `'white'` (or any CSS color) for an opaque background —
+     * recommended for JPEG which does not support transparency.
+     */
+    background?: string;
+    /**
+     * Canvas factory function.
+     *
+     * Example with \@napi-rs/canvas:
+     * ```ts
+     * import { createCanvas } from '\@napi-rs/canvas';
+     * createCanvas: (w, h) => createCanvas(w, h)
+     * ```
+     */
+    createCanvas: CanvasFactory;
+};
+export type RenderChartOptions = RenderOptions & {
+    /** Width of the output image in pixels. */
+    width: number;
+    /** Height of the output image in pixels. */
+    height: number;
+    /** Additional props to pass to the chart component. */
+    props?: Record<string, any>;
+};
+/**
+ * Create a capture callback for use with `render()` from `svelte/server`.
+ * Pass the returned `onCapture` as the `onCapture` prop to your chart component.
+ * After `render()` completes, call `getCapture()` to retrieve the chart state and
+ * component tree.
+ *
+ * @example
+ * ```ts
+ * import { render } from 'svelte/server';
+ * import { createCaptureCallback, renderCapturedChart } from '../index.js/server';
+ * import MyChart from './MyChart.svelte';
+ *
+ * const { onCapture, getCapture } = createCaptureCallback();
+ * const rendered = render(MyChart, { props: { data, width: 800, height: 400, onCapture } });
+ * rendered.body; // Force the SSR render to fully flush before reading capture state
+ * const capture = getCapture();
+ * ```
+ */
+export declare function createCaptureCallback(): {
+    onCapture: (data: CaptureTarget) => void;
+    getCapture: () => CaptureTarget | null;
+};
+/**
+ * Render a chart component to an image buffer in a single call.
+ *
+ * This is a convenience function that handles SSR rendering, capture, and
+ * canvas rendering in one step. The component should use `<ServerChart>`
+ * internally and accept `width`, `height`, and `capture` props.
+ *
+ * @example
+ * ```ts
+ * import { createCanvas, Path2D } from '\@napi-rs/canvas';
+ * import { renderChart } from '../index.js/server';
+ * import MyChart from './MyChart.svelte';
+ *
+ * // Register Path2D globally for canvas rendering
+ * if (typeof globalThis.Path2D === 'undefined') (globalThis as any).Path2D = Path2D;
+ *
+ * const buffer = renderChart(MyChart, {
+ *   width: 800,
+ *   height: 400,
+ *   props: { data: myData },
+ *   createCanvas: (w, h) => createCanvas(w, h),
+ * });
+ *
+ * // Use as a Response in a SvelteKit endpoint
+ * return new Response(buffer, {
+ *   headers: { 'Content-Type': 'image/png' }
+ * });
+ * ```
+ */
+export declare function renderChart(component: Component<any>, options: RenderChartOptions): Buffer | Uint8Array;
+/**
+ * Render a captured chart component tree to an image buffer.
+ * Call this after `render()` from `svelte/server` has been used to build
+ * the component tree with a capture callback.
+ *
+ * For most use cases, prefer {@link renderChart} which handles the full pipeline.
+ *
+ * @example
+ * ```ts
+ * import { render } from 'svelte/server';
+ * import { createCanvas, Path2D } from '\@napi-rs/canvas';
+ * import { createCaptureCallback, renderCapturedChart } from '../index.js/server';
+ * import MyChart from './MyChart.svelte';
+ *
+ * // Register canvas globals
+ * if (typeof globalThis.Path2D === 'undefined') (globalThis as any).Path2D = Path2D;
+ *
+ * // Build component tree via SSR render
+ * const { onCapture, getCapture } = createCaptureCallback();
+ * const rendered = render(MyChart, { props: { data, width: 800, height: 400, onCapture } });
+ * rendered.body; // Force the SSR render to fully flush before reading capture state
+ *
+ * // Render to image
+ * const buffer = renderCapturedChart(getCapture()!, {
+ *   width: 800,
+ *   height: 400,
+ *   createCanvas: (w, h) => createCanvas(w, h),
+ * });
+ * ```
+ */
+export declare function renderCapturedChart(capture: CapturedChart, options: RenderOptions & {
+    width: number;
+    height: number;
+}): Buffer | Uint8Array;

package/dist/server/index.js

@@ -0,0 +1,141 @@
+import { render } from 'svelte/server';
+import { renderTree } from './renderTree.js';
+export { renderTree } from './renderTree.js';
+export { default as ServerChart } from './ServerChart.svelte';
+export { getSSRCapture, setSSRCapture, } from './captureStore.js';
+/**
+ * Create a capture callback for use with `render()` from `svelte/server`.
+ * Pass the returned `onCapture` as the `onCapture` prop to your chart component.
+ * After `render()` completes, call `getCapture()` to retrieve the chart state and
+ * component tree.
+ *
+ * @example
+ * ```ts
+ * import { render } from 'svelte/server';
+ * import { createCaptureCallback, renderCapturedChart } from '../index.js/server';
+ * import MyChart from './MyChart.svelte';
+ *
+ * const { onCapture, getCapture } = createCaptureCallback();
+ * const rendered = render(MyChart, { props: { data, width: 800, height: 400, onCapture } });
+ * rendered.body; // Force the SSR render to fully flush before reading capture state
+ * const capture = getCapture();
+ * ```
+ */
+export function createCaptureCallback() {
+    let captured = null;
+    return {
+        onCapture: (data) => {
+            captured = data;
+        },
+        getCapture: () => captured,
+    };
+}
+/**
+ * Render a chart component to an image buffer in a single call.
+ *
+ * This is a convenience function that handles SSR rendering, capture, and
+ * canvas rendering in one step. The component should use `<ServerChart>`
+ * internally and accept `width`, `height`, and `capture` props.
+ *
+ * @example
+ * ```ts
+ * import { createCanvas, Path2D } from '\@napi-rs/canvas';
+ * import { renderChart } from '../index.js/server';
+ * import MyChart from './MyChart.svelte';
+ *
+ * // Register Path2D globally for canvas rendering
+ * if (typeof globalThis.Path2D === 'undefined') (globalThis as any).Path2D = Path2D;
+ *
+ * const buffer = renderChart(MyChart, {
+ *   width: 800,
+ *   height: 400,
+ *   props: { data: myData },
+ *   createCanvas: (w, h) => createCanvas(w, h),
+ * });
+ *
+ * // Use as a Response in a SvelteKit endpoint
+ * return new Response(buffer, {
+ *   headers: { 'Content-Type': 'image/png' }
+ * });
+ * ```
+ */
+export function renderChart(component, options) {
+    const { width, height, props = {}, ...renderOptions } = options;
+    const captureTarget = {};
+    // SSR render to build the component tree and capture chart state
+    const rendered = render(component, {
+        props: { ...props, width, height, capture: captureTarget }
+    });
+    // Force the SSR render to fully flush
+    void rendered.body;
+    if (!captureTarget.chartState || !captureTarget.rootNode) {
+        throw new Error('Failed to capture chart state. Ensure the component uses <ServerChart> with a `capture` prop.');
+    }
+    return renderCapturedChart(captureTarget, {
+        width,
+        height,
+        ...renderOptions,
+    });
+}
+/**
+ * Render a captured chart component tree to an image buffer.
+ * Call this after `render()` from `svelte/server` has been used to build
+ * the component tree with a capture callback.
+ *
+ * For most use cases, prefer {@link renderChart} which handles the full pipeline.
+ *
+ * @example
+ * ```ts
+ * import { render } from 'svelte/server';
+ * import { createCanvas, Path2D } from '\@napi-rs/canvas';
+ * import { createCaptureCallback, renderCapturedChart } from '../index.js/server';
+ * import MyChart from './MyChart.svelte';
+ *
+ * // Register canvas globals
+ * if (typeof globalThis.Path2D === 'undefined') (globalThis as any).Path2D = Path2D;
+ *
+ * // Build component tree via SSR render
+ * const { onCapture, getCapture } = createCaptureCallback();
+ * const rendered = render(MyChart, { props: { data, width: 800, height: 400, onCapture } });
+ * rendered.body; // Force the SSR render to fully flush before reading capture state
+ *
+ * // Render to image
+ * const buffer = renderCapturedChart(getCapture()!, {
+ *   width: 800,
+ *   height: 400,
+ *   createCanvas: (w, h) => createCanvas(w, h),
+ * });
+ * ```
+ */
+export function renderCapturedChart(capture, options) {
+    const { width, height, devicePixelRatio = 1, format = 'png', quality = 0.92, background, createCanvas, } = options;
+    // Create canvas
+    const canvasWidth = Math.round(width * devicePixelRatio);
+    const canvasHeight = Math.round(height * devicePixelRatio);
+    const canvas = createCanvas(canvasWidth, canvasHeight);
+    const ctx = canvas.getContext('2d');
+    // Fill background (canvas is transparent by default)
+    if (background) {
+        ctx.fillStyle = background;
+        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    }
+    // Apply DPI scaling
+    if (devicePixelRatio !== 1) {
+        ctx.scale(devicePixelRatio, devicePixelRatio);
+    }
+    // Apply padding translation (mirrors what Canvas.svelte's update() does)
+    if (capture.chartState) {
+        const padding = capture.chartState.padding;
+        if (padding) {
+            ctx.translate(padding.left ?? 0, padding.top ?? 0);
+        }
+    }
+    // Render the component tree onto the canvas
+    renderTree(ctx, capture.rootNode);
+    // Export to buffer
+    const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png';
+    if (format === 'jpeg') {
+        return canvas.toBuffer(mimeType, quality);
+    }
+    return canvas.toBuffer(mimeType);
+}

package/dist/server/renderChart.ssr.test.d.ts

@@ -0,0 +1 @@
+export {};