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

package/dist/contexts/chart.d.ts

@@ -1,84 +1,6 @@
-import type { TimeInterval } from 'd3-time';
-import type { AxisKey, DataType, Extents, Nice, Padding, PaddingArray, XRangeWithScale, YRangeWithScale } from '../utils/types.js';
-import { type AnyScale, type DomainType } from '../utils/scales.svelte.js';
-import type { GeoContextValue } from './geo.js';
-import type { TooltipContextValue } from './tooltip.js';
-import type { TransformContextValue } from './transform.js';
-import type { BrushContextValue } from '../components/BrushContext.svelte';
-import type { PreservedChartConfig } from '../components/Chart.svelte';
-export type ChartContextValue<T = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = {
-    activeGetters: Record<AxisKey, (d: T) => any>;
-    width: number;
-    height: number;
-    percentRange: boolean;
-    aspectRatio: number;
-    containerRef: HTMLElement | undefined;
-    containerWidth: number;
-    containerHeight: number;
-    config: PreservedChartConfig<T, XScale, YScale>;
-    x: (d: T) => any;
-    y: (d: T) => any;
-    z: (d: T) => any;
-    r: (d: T) => any;
-    x1: (d: T) => any;
-    y1: (d: T) => any;
-    c: (d: T) => any;
-    data: DataType<T>;
-    xNice: Nice;
-    yNice: Nice;
-    zNice: Nice;
-    rNice: Nice;
-    xDomainSort: boolean;
-    yDomainSort: boolean;
-    zDomainSort: boolean;
-    rDomainSort: boolean;
-    xReverse: boolean;
-    yReverse: boolean;
-    zReverse: boolean;
-    rReverse: boolean;
-    xPadding: PaddingArray;
-    yPadding: PaddingArray;
-    zPadding: PaddingArray;
-    rPadding: PaddingArray;
-    padding: Padding;
-    flatData: T[];
-    extents: Extents;
-    xDomain: number[];
-    yDomain: number[];
-    zDomain: DomainType;
-    rDomain: DomainType;
-    cDomain: DomainType;
-    x1Domain: DomainType;
-    y1Domain: DomainType;
-    xRange: any[];
-    yRange: any[];
-    zRange: any[];
-    rRange: any[];
-    cRange: readonly string[] | string[] | undefined;
-    x1Range: XRangeWithScale<XScale> | undefined;
-    y1Range: YRangeWithScale<YScale> | undefined;
-    meta: Record<string, any>;
-    xScale: AnyScale;
-    yScale: AnyScale;
-    zScale: AnyScale;
-    rScale: AnyScale;
-    cScale: AnyScale | null;
-    x1Scale: AnyScale | null;
-    y1Scale: AnyScale | null;
-    yGet: (d: T) => any;
-    xGet: (d: T) => any;
-    zGet: (d: T) => any;
-    rGet: (d: T) => any;
-    cGet: (d: T) => any;
-    x1Get: (d: T) => any;
-    y1Get: (d: T) => any;
-    xInterval: TimeInterval | null;
-    yInterval: TimeInterval | null;
-    radial: boolean;
-    tooltip: TooltipContextValue<T>;
-    geo: GeoContextValue;
-    brush: BrushContextValue;
-    transform: TransformContextValue;
-};
-export declare function getChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): ChartContextValue<T, XScale, YScale>;
-export declare function setChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(context: ChartContextValue<T, XScale, YScale>): ChartContextValue<T, XScale, YScale>;
+import type { ChartState } from '../states/chart.svelte.js';
+import type { AnyScale } from '../utils/scales.svelte.js';
+export type { ChartState };
+export type { NodeKind, ComponentNode, RegisterComponentOptions } from '../states/chart.svelte.js';
+export declare function getChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): ChartState<T, XScale, YScale>;
+export declare function setChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(context: ChartState<T, XScale, YScale>): ChartState<T, XScale, YScale>;

package/dist/contexts/chart.js

@@ -1,8 +1,46 @@
 import { Context } from 'runed';
-import {} from '../utils/scales.svelte.js';
 const _ChartContext = new Context('ChartContext');
+/**
+ * Fallback context when used outside of a Chart component.
+ * Provides safe defaults to prevent runtime errors.
+ */
+const fallbackContext = {
+    registerMark: () => () => { },
+    registerComponent: (_options) => ({
+        id: Symbol('noop'),
+        kind: 'mark',
+        name: 'noop',
+        parent: null,
+        children: [],
+        insideCompositeMark: false,
+    }),
+    series: {
+        series: [],
+        visibleSeries: [],
+        highlightKey: null,
+        isVisible: () => true,
+        isHighlighted: () => false,
+        isDefaultSeries: true,
+        allSeriesData: [],
+        allSeriesColors: [],
+        selectedKeys: { isEmpty: () => true, isSelected: () => false },
+    },
+    tooltip: {
+        x: 0,
+        y: 0,
+        data: null,
+        series: [],
+        config: {},
+        isHoveringTooltipArea: false,
+        isHoveringTooltipContent: false,
+        mode: 'manual',
+        show: () => { },
+        hide: () => { },
+    },
+};
 export function getChartContext() {
-    return _ChartContext.getOr({});
+    // @ts-expect-error - Type variance is acceptable here
+    return _ChartContext.getOr(fallbackContext);
 }
 export function setChartContext(context) {
     // @ts-expect-error - shh

package/dist/contexts/componentTree.test.d.ts

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

package/dist/contexts/componentTree.test.js

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest';
+// Note: registerComponent requires Svelte context (setContext/getContext)
+// and is tested indirectly via chart state and component integration tests.
+// _removeComponentNode is private on ChartState and tested indirectly.
+/** Helper to create a minimal node without Svelte context */
+function makeNode(name, parent = null) {
+    const node = {
+        id: Symbol(name),
+        kind: 'mark',
+        name,
+        parent,
+        children: [],
+        insideCompositeMark: false,
+    };
+    if (parent) {
+        parent.children.push(node);
+    }
+    return node;
+}
+describe('componentTree', () => {
+    describe('tree structure', () => {
+        it('should build a multi-level tree', () => {
+            const root = makeNode('root');
+            const group = makeNode('group', root);
+            const leaf1 = makeNode('leaf1', group);
+            const leaf2 = makeNode('leaf2', group);
+            const sibling = makeNode('sibling', root);
+            expect(root.children).toHaveLength(2);
+            expect(root.children).toContain(group);
+            expect(root.children).toContain(sibling);
+            expect(group.children).toHaveLength(2);
+            expect(group.children).toContain(leaf1);
+            expect(group.children).toContain(leaf2);
+            expect(leaf1.parent).toBe(group);
+            expect(group.parent).toBe(root);
+        });
+        it('should clean up subtrees correctly', () => {
+            const root = makeNode('root');
+            const group = makeNode('group', root);
+            makeNode('leaf1', group);
+            makeNode('leaf2', group);
+            // Simulate _removeComponentNode (private on ChartState) — remove group from root
+            const idx = root.children.indexOf(group);
+            if (idx >= 0)
+                root.children.splice(idx, 1);
+            expect(root.children).toHaveLength(0);
+            // Group still has its children (for cleanup order - children destroy first)
+            expect(group.children).toHaveLength(2);
+        });
+    });
+    describe('insideCompositeMark', () => {
+        it('should be false for root-level nodes', () => {
+            const root = makeNode('root');
+            expect(root.insideCompositeMark).toBe(false);
+        });
+        it('should be true when parent is a composite-mark', () => {
+            const composite = makeNode('Area');
+            composite.kind = 'composite-mark';
+            const child = {
+                id: Symbol('child'),
+                kind: 'mark',
+                name: 'Spline',
+                parent: composite,
+                children: [],
+                insideCompositeMark: composite.kind === 'composite-mark',
+            };
+            expect(child.insideCompositeMark).toBe(true);
+        });
+        it('should be false when parent is a group (not composite-mark)', () => {
+            const group = makeNode('Group');
+            group.kind = 'group';
+            const child = {
+                id: Symbol('child'),
+                kind: 'mark',
+                name: 'Circle',
+                parent: group,
+                children: [],
+                insideCompositeMark: false, // group is not composite-mark
+            };
+            expect(child.insideCompositeMark).toBe(false);
+        });
+    });
+});

package/dist/contexts/geo.d.ts

@@ -1,6 +1,4 @@
-import { type GeoProjection } from 'd3-geo';
-export type GeoContextValue = {
-    projection: GeoProjection | undefined;
-};
-export declare function getGeoContext(): GeoContextValue;
-export declare function setGeoContext(geo: GeoContextValue): GeoContextValue;
+import type { GeoState, GeoStateProps } from '../states/geo.svelte.js';
+export type { GeoState, GeoStateProps };
+export declare function getGeoContext(): GeoState;
+export declare function setGeoContext(geo: GeoState): GeoState;

package/dist/contexts/geo.js

@@ -1,5 +1,4 @@
 import { Context } from 'runed';
-import {} from 'd3-geo';
 /**
  * Access or set the current GeoContext.
  */

package/dist/contexts/index.d.ts

@@ -3,4 +3,3 @@ export * from './geo.js';
 export * from './layer.js';
 export * from './legendPayload.js';
 export * from './settings.js';
-export * from './tooltip.js';

package/dist/contexts/index.js

@@ -3,4 +3,3 @@ export * from './geo.js';
 export * from './layer.js';
 export * from './legendPayload.js';
 export * from './settings.js';
-export * from './tooltip.js';

package/dist/contexts/transform.d.ts

@@ -5,7 +5,8 @@ export type TransformContextValue = {
      * The current transform mode.
      *
      * - `canvas`: The transform is applied to the canvas element.
-     * - `manual`: The transform is applied manually.
+     * - `domain`: The transform narrows/shifts the visible data domain.
+     * - `projection`: The transform updates the geo projection.
      * - `none`: No transform is applied.
      */
     mode: TransformMode;
@@ -91,5 +92,5 @@ export type TransformContextValue = {
         height: number;
     }): void;
 };
-export declare function getTransformContext(): TransformContextValue;
+export declare function getTransformContext(): import("../states/transform.svelte.js").TransformState | TransformContextValue;
 export declare function setTransformContext(transform: TransformContextValue): TransformContextValue;

package/dist/contexts/transform.js

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

package/dist/states/__fixtures__/ComponentNodeLifecycleChild.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { getChartContext } from '../../contexts/chart.js';
+
+  const ctx = getChartContext();
+
+  ctx.registerComponent({
+    name: 'ComponentNodeLifecycleChild',
+    kind: 'mark',
+    markInfo: () => ({ y: 'value' }),
+  });
+</script>
+
+<div data-testid="component-node-lifecycle-child"></div>

package/dist/states/__fixtures__/ComponentNodeLifecycleChild.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ComponentNodeLifecycleChild: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ComponentNodeLifecycleChild = InstanceType<typeof ComponentNodeLifecycleChild>;
+export default ComponentNodeLifecycleChild;

package/dist/states/__fixtures__/ComponentNodeLifecycleHarness.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import Chart from '../../components/Chart.svelte';
+  import Layer from '../../components/layers/Layer.svelte';
+  import type { ChartState, ComponentNode } from '../chart.svelte.js';
+
+  import ComponentNodeLifecycleChild from './ComponentNodeLifecycleChild.svelte';
+  import ComponentNodeLifecycleParent from './ComponentNodeLifecycleParent.svelte';
+
+  let {
+    oncontext,
+    onparentnode,
+  }: {
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+    onparentnode?: (node: ComponentNode) => void;
+  } = $props();
+
+  let chartContext = $state<ChartState<any, any, any>>();
+  let showChild = $state(true);
+
+  $effect(() => {
+    if (chartContext) {
+      oncontext?.(chartContext);
+    }
+  });
+
+  function toggleChild() {
+    showChild = !showChild;
+  }
+</script>
+
+<button type="button" data-testid="toggle-child" onclick={toggleChild}>toggle</button>
+
+<Chart
+  data={[{ date: '2024-01', value: 10 }]}
+  x="date"
+  y="value"
+  width={300}
+  height={300}
+  bind:context={chartContext}
+>
+  <Layer type="html">
+    <ComponentNodeLifecycleParent {onparentnode}>
+      {#if showChild}
+        <ComponentNodeLifecycleChild />
+      {/if}
+    </ComponentNodeLifecycleParent>
+  </Layer>
+</Chart>

package/dist/states/__fixtures__/ComponentNodeLifecycleHarness.svelte.d.ts

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

package/dist/states/__fixtures__/ComponentNodeLifecycleParent.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  import { getChartContext } from '../../contexts/chart.js';
+  import type { ComponentNode } from '../chart.svelte.js';
+
+  let {
+    onparentnode,
+    children,
+  }: {
+    onparentnode?: (node: ComponentNode) => void;
+    children?: Snippet;
+  } = $props();
+
+  const ctx = getChartContext();
+  const node = ctx.registerComponent({
+    name: 'ComponentNodeLifecycleParent',
+    kind: 'group',
+  });
+
+  $effect(() => {
+    onparentnode?.(node);
+  });
+</script>
+
+{@render children?.()}

package/dist/states/__fixtures__/ComponentNodeLifecycleParent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { ComponentNode } from '../chart.svelte.js';
+type $$ComponentProps = {
+    onparentnode?: (node: ComponentNode) => void;
+    children?: Snippet;
+};
+declare const ComponentNodeLifecycleParent: import("svelte").Component<$$ComponentProps, {}, "">;
+type ComponentNodeLifecycleParent = ReturnType<typeof ComponentNodeLifecycleParent>;
+export default ComponentNodeLifecycleParent;

package/dist/states/brush.svelte.d.ts

@@ -0,0 +1,90 @@
+export type BrushDomainType = Array<number | Date | null>;
+export type BrushRange = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * Minimal interface for the chart context that BrushState depends on.
+ * Narrowed from ChartState to only what brush needs, enabling easier testing.
+ */
+export type BrushChartContext = {
+    xScale: (v: any) => number;
+    yScale: (v: any) => number;
+    baseXScale: {
+        domain: () => any[];
+    };
+    baseYScale: {
+        domain: () => any[];
+    };
+    width: number;
+    height: number;
+};
+export declare class BrushState {
+    ctx: BrushChartContext | null;
+    x: BrushDomainType;
+    y: BrushDomainType;
+    active: boolean | undefined;
+    axis: "both" | "x" | "y";
+    handleSize: number;
+    constructor(ctx: typeof this.ctx, options?: {
+        x?: BrushDomainType;
+        y?: BrushDomainType;
+        active?: boolean;
+        axis?: 'x' | 'y' | 'both';
+    });
+    /** The domain extent bounds from the base (unzoomed) scales */
+    get xDomainMin(): any;
+    get xDomainMax(): any;
+    get yDomainMin(): any;
+    get yDomainMax(): any;
+    get range(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /** Reset brush to cleared state */
+    reset(): void;
+    /** Select the full domain extent */
+    selectAll(): void;
+    /** Programmatically set the brush selection. Like d3's `brush.move()`. */
+    move(selection: {
+        x?: BrushDomainType | null;
+        y?: BrushDomainType | null;
+    }): void;
+    /** Set brush to a new range, clamped to domain bounds */
+    setRange(startValue: {
+        x: number;
+        y: number;
+    }, currentValue: {
+        x: number;
+        y: number;
+    }): void;
+    /** Move the entire brush range by a delta, clamped to domain bounds */
+    moveRange(start: {
+        x: [number, number];
+        y: [number, number];
+        value: {
+            x: number;
+            y: number;
+        };
+    }, currentValue: {
+        x: number;
+        y: number;
+    }): void;
+    /** Adjust a single edge of the brush, clamped to domain bounds. Handles inversion if dragged past opposite edge. */
+    adjustEdge(edge: 'top' | 'bottom' | 'left' | 'right', start: {
+        x: [number, number];
+        y: [number, number];
+    }, currentValue: {
+        x: number;
+        y: number;
+    }): void;
+    /**
+     * Sync external domain values into brush state.
+     * Only writes when values actually differ to avoid reactive loops.
+     */
+    syncFromExternal(externalX: BrushDomainType | null | undefined, externalY: BrushDomainType | null | undefined): void;
+}