layerchart 2.0.0-next.6 → 2.0.0-next.61

package/dist/components/TransformContext.svelte.test.js

@@ -0,0 +1,174 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { tick } from 'svelte';
+import TransformTestHarness from './tests/TransformTestHarness.svelte';
+import { geoMercator, geoOrthographic } from 'd3-geo';
+describe('TransformContext', () => {
+    describe('reactive prop syncing', () => {
+        it('should sync processTranslate when projection changes from flat to globe', async () => {
+            let chartContext;
+            const chartProps = $state({
+                height: 300,
+                geo: {
+                    projection: geoMercator,
+                    fitGeojson: { type: 'Sphere' },
+                },
+                transform: {
+                    mode: 'projection',
+                },
+            });
+            render(TransformTestHarness, {
+                chartProps,
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // Mercator is a flat projection — processTranslate should be undefined
+            expect(chartContext.transform.processTranslate).toBeUndefined();
+            // Switch to orthographic (globe)
+            chartProps.geo = {
+                projection: geoOrthographic,
+                fitGeojson: { type: 'Sphere' },
+            };
+            await tick();
+            // Orthographic is a globe — processTranslate should now be a function
+            await vi.waitFor(() => {
+                expect(chartContext.transform.processTranslate).toBeTypeOf('function');
+            });
+        });
+        it('should sync processTranslate when projection changes from globe to flat', async () => {
+            let chartContext;
+            const chartProps = $state({
+                height: 300,
+                geo: {
+                    projection: geoOrthographic,
+                    fitGeojson: { type: 'Sphere' },
+                },
+                transform: {
+                    mode: 'projection',
+                },
+            });
+            render(TransformTestHarness, {
+                chartProps,
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // Orthographic is a globe — processTranslate should be a function
+            // (TransformContext is lazy-loaded, so wait for it to resolve)
+            await vi.waitFor(() => {
+                expect(chartContext.transform.processTranslate).toBeTypeOf('function');
+            });
+            // Switch to Mercator (flat)
+            chartProps.geo = {
+                projection: geoMercator,
+                fitGeojson: { type: 'Sphere' },
+            };
+            await tick();
+            // Mercator is flat — processTranslate should be undefined
+            await vi.waitFor(() => {
+                expect(chartContext.transform.processTranslate).toBeUndefined();
+            });
+        });
+        it('should enable scale for globe projections so scroll zoom works', async () => {
+            let chartContext;
+            render(TransformTestHarness, {
+                chartProps: {
+                    height: 300,
+                    geo: {
+                        projection: geoOrthographic,
+                        fitGeojson: { type: 'Sphere' },
+                    },
+                    transform: {
+                        mode: 'projection',
+                        scrollMode: 'scale',
+                    },
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // TransformContext is lazy-loaded, so wait for fitSize to apply
+            await vi.waitFor(() => expect(chartContext.transform.scale).toBeGreaterThan(1));
+            const initialScale = chartContext.transform.scale;
+            // Simulate zoom in
+            chartContext.transform.setScale(initialScale * 2, { instant: true });
+            await tick();
+            await vi.waitFor(() => {
+                expect(chartContext.transform.scale).toBeCloseTo(initialScale * 2, 0);
+            });
+            // Verify the projection scale also updated (transformApply.scale = true for globes)
+            expect(chartContext.geo.projection?.scale()).toBeCloseTo(initialScale * 2, 0);
+        });
+        it('should interpret scaleExtent as relative multipliers in projection mode', async () => {
+            let chartContext;
+            render(TransformTestHarness, {
+                chartProps: {
+                    height: 300,
+                    geo: {
+                        projection: geoMercator,
+                        fitGeojson: { type: 'Sphere' },
+                    },
+                    transform: {
+                        mode: 'projection',
+                        scrollMode: 'scale',
+                        scaleExtent: [0.5, 2],
+                    },
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // TransformContext is lazy-loaded, so wait for fitSize to apply
+            await vi.waitFor(() => expect(chartContext.transform.scale).toBeGreaterThan(10));
+            const initialScale = chartContext.transform.scale;
+            // Try to zoom way beyond 2x — should be clamped to 2x initial
+            chartContext.transform.setScale(initialScale * 5, { instant: true });
+            await tick();
+            await vi.waitFor(() => {
+                // Should be clamped to ~2x the initial scale
+                expect(chartContext.transform.scale).toBeCloseTo(initialScale * 2, 0);
+            });
+            // Try to zoom below 0.5x — should be clamped to 0.5x initial
+            chartContext.transform.setScale(initialScale * 0.1, { instant: true });
+            await tick();
+            await vi.waitFor(() => {
+                expect(chartContext.transform.scale).toBeCloseTo(initialScale * 0.5, 0);
+            });
+        });
+        it('should sync disablePointer reactively', async () => {
+            let chartContext;
+            const chartProps = $state({
+                height: 300,
+                transform: {
+                    mode: 'canvas',
+                    disablePointer: false,
+                },
+            });
+            render(TransformTestHarness, {
+                chartProps,
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // TransformContext is lazy-loaded, so wait for it to resolve
+            await vi.waitFor(() => {
+                expect(chartContext.transform.disablePointer).toBe(false);
+            });
+            // Enable disablePointer
+            chartProps.transform = {
+                mode: 'canvas',
+                disablePointer: true,
+            };
+            await tick();
+            await vi.waitFor(() => {
+                expect(chartContext.transform.disablePointer).toBe(true);
+            });
+        });
+    });
+});

package/dist/components/Vector/Vector.base.svelte

@@ -0,0 +1,264 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { VectorProps } from './Vector.shared.svelte.js';
+
+  export type VectorBaseLayerComponents = {
+    Path: Component<any>;
+  };
+
+  export type VectorBaseProps = VectorProps & VectorBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { createMotion, createDataMotionMap } from '../../utils/motion.svelte.js';
+  import {
+    hasAnyDataProp,
+    resolveDataProp,
+    extractRawDataValue,
+    resolveGeoDataPair,
+    resolveStyleProp,
+    resolveColorProp,
+  } from '../../utils/dataProp.js';
+  import { chartDataArray } from '../../utils/common.js';
+  import { cls } from '@layerstack/tailwind';
+  import {
+    vectorArrowPath,
+    vectorArrowFilledPath,
+    vectorSpikePath,
+    transformVectorPath,
+  } from '../../utils/path.js';
+
+  let {
+    Path,
+    x = 0,
+    initialX: initialXProp,
+    y = 0,
+    initialY: initialYProp,
+    length: lengthProp = 12,
+    initialLength: initialLengthProp,
+    rotate: rotateProp = 0,
+    shape = 'arrow',
+    anchor,
+    width,
+    children,
+    data: dataProp,
+    key: keyFn = (_: any, i: number) => i,
+    motion,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ...restProps
+  }: VectorBaseProps = $props();
+
+  const isFilled = $derived(shape === 'spike' || shape === 'arrow-filled');
+  const resolvedAnchor = $derived(anchor ?? (isFilled ? 'start' : 'middle'));
+
+  const dataMode = $derived(hasAnyDataProp(x, y, lengthProp, rotateProp));
+
+  const hasPerItemStyles = $derived(
+    typeof fill === 'function' ||
+      typeof stroke === 'function' ||
+      typeof fillOpacity === 'function' ||
+      typeof strokeWidth === 'function' ||
+      typeof opacity === 'function' ||
+      typeof className === 'function'
+  );
+
+  const chartCtx = getChartContext();
+  const geo = getGeoContext();
+
+  const resolvedData: any[] = $derived(
+    dataMode ? dataProp ?? chartDataArray(chartCtx.data) : []
+  );
+
+  function resolveVector(d: any) {
+    let resolvedX: number, resolvedY: number;
+    if (geo.projection) {
+      [resolvedX, resolvedY] = resolveGeoDataPair(x, y, d, geo.projection);
+    } else {
+      resolvedX = resolveDataProp(x, d, chartCtx.xScale, 0);
+      resolvedY = resolveDataProp(y, d, chartCtx.yScale, 0);
+    }
+    return {
+      x: resolvedX,
+      y: resolvedY,
+      length: resolveDataProp(
+        lengthProp,
+        d,
+        chartCtx.rScale,
+        typeof lengthProp === 'number' ? lengthProp : 12
+      ),
+      rotate:
+        typeof rotateProp === 'number' ? rotateProp : extractRawDataValue(rotateProp, d) ?? 0,
+    };
+  }
+
+  const dataMotionMap = createDataMotionMap(motion);
+
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveVector(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
+
+  const resolvedItems = $derived.by(() => {
+    if (!dataMode) return [];
+    return resolvedData.map((d, i) => {
+      const key = keyFn(d, i);
+      const resolved = resolveVector(d);
+      const animated = dataMotionMap?.get(key);
+      return {
+        d,
+        key,
+        x: animated?.x ?? resolved.x,
+        y: animated?.y ?? resolved.y,
+        length: animated?.length ?? resolved.length,
+        rotate: resolved.rotate,
+      };
+    });
+  });
+
+  function getAnchorOffset(len: number) {
+    switch (resolvedAnchor) {
+      case 'start':
+        return 0;
+      case 'end':
+        return len;
+      case 'middle':
+      default:
+        return len / 2;
+    }
+  }
+
+  function getLocalPathData(len: number) {
+    const w = width ?? len * 0.25;
+    if (shape === 'spike') {
+      return vectorSpikePath({ length: len, anchor: resolvedAnchor, width: w });
+    }
+    if (shape === 'arrow-filled') {
+      return vectorArrowFilledPath({ length: len, anchor: resolvedAnchor, width: w });
+    }
+    return vectorArrowPath({ length: len, anchor: resolvedAnchor, width: w });
+  }
+
+  function getAbsolutePathData(itemX: number, itemY: number, len: number, rot: number) {
+    return transformVectorPath(getLocalPathData(len), itemX, itemY, rot);
+  }
+
+  const combinedPathData = $derived.by(() => {
+    if (dataMode) {
+      return resolvedItems
+        .map((item) => getAbsolutePathData(item.x, item.y, item.length, item.rotate))
+        .join('');
+    }
+    return null;
+  });
+
+  const initialX = initialXProp ?? (typeof x === 'number' ? x : 0);
+  const initialY = initialYProp ?? (typeof y === 'number' ? y : 0);
+  const initialLength = initialLengthProp ?? (typeof lengthProp === 'number' ? lengthProp : 12);
+
+  const motionX = createMotion(initialX, () => (typeof x === 'number' ? x : 0), motion);
+  const motionY = createMotion(initialY, () => (typeof y === 'number' ? y : 0), motion);
+  const motionLength = createMotion(
+    initialLength,
+    () => (typeof lengthProp === 'number' ? lengthProp : 12),
+    motion
+  );
+
+  const pixelRotate = $derived(typeof rotateProp === 'number' ? rotateProp : 0);
+
+  const pixelPathData = $derived(
+    getAbsolutePathData(motionX.current, motionY.current, motionLength.current, pixelRotate)
+  );
+</script>
+
+{#if children}
+  {#if dataMode}
+    {#each resolvedItems as item (item.key)}
+      {@const offset = getAnchorOffset(item.length)}
+      {@const resolvedClass = resolveStyleProp(className, item.d)}
+      <g transform="translate({item.x},{item.y}) rotate({item.rotate})" class={resolvedClass}>
+        <g transform="translate(0,{offset})">
+          {@render children({ length: item.length, d: item.d })}
+        </g>
+      </g>
+    {/each}
+  {:else}
+    {@const offset = getAnchorOffset(motionLength.current)}
+    <g transform="translate({motionX.current},{motionY.current}) rotate({pixelRotate})">
+      <g transform="translate(0,{offset})">
+        {@render children({ length: motionLength.current })}
+      </g>
+    </g>
+  {/if}
+{:else if dataMode && hasPerItemStyles}
+  {#each resolvedItems as item (item.key)}
+    {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
+    {@const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale)}
+    {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d)}
+    {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
+    {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
+    {@const resolvedClass = resolveStyleProp(className, item.d)}
+    <Path
+      pathData={getAbsolutePathData(item.x, item.y, item.length, item.rotate)}
+      fill={resolvedFill}
+      fillOpacity={resolvedFillOpacity}
+      stroke={resolvedStroke}
+      strokeWidth={resolvedStrokeWidth}
+      opacity={resolvedOpacity}
+      class={cls('lc-vector', isFilled ? 'lc-vector-filled' : 'lc-vector-stroked', resolvedClass)}
+    />
+  {/each}
+{:else}
+  <Path
+    pathData={dataMode ? combinedPathData : pixelPathData}
+    fill={fill as string}
+    fillOpacity={fillOpacity as number}
+    stroke={stroke as string}
+    strokeWidth={strokeWidth as number}
+    opacity={opacity as number}
+    class="lc-vector {isFilled ? 'lc-vector-filled' : 'lc-vector-stroked'} {typeof className ===
+    'string'
+      ? className
+      : ''}"
+  />
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-vector)) {
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    :global(:where(.lc-layout-svg .lc-vector-stroked, svg.lc-vector-stroked):not([stroke])) {
+      stroke: var(--color-surface-content, currentColor);
+    }
+    :global(:where(.lc-layout-svg .lc-vector-stroked, svg.lc-vector-stroked):not([fill])) {
+      fill: none;
+    }
+
+    :global(:where(.lc-layout-svg .lc-vector-filled, svg.lc-vector-filled):not([fill])) {
+      fill: var(--color-surface-content, currentColor);
+    }
+    :global(:where(.lc-layout-svg .lc-vector-filled, svg.lc-vector-filled):not([stroke])) {
+      stroke: none;
+    }
+  }
+</style>

package/dist/components/Vector/Vector.base.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { VectorProps } from './Vector.shared.svelte.js';
+export type VectorBaseLayerComponents = {
+    Path: Component<any>;
+};
+export type VectorBaseProps = VectorProps & VectorBaseLayerComponents;
+declare const Vector: Component<VectorBaseProps, {}, "">;
+type Vector = ReturnType<typeof Vector>;
+export default Vector;

package/dist/components/Vector/Vector.canvas.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { VectorProps, VectorPropsWithoutHTML, VectorShape } from './Vector.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import VectorBase from './Vector.base.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+  import type { VectorProps } from './Vector.shared.svelte.js';
+
+  let props: VectorProps = $props();
+</script>
+
+<VectorBase {Path} {...props} />

package/dist/components/Vector/Vector.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { VectorProps, VectorPropsWithoutHTML, VectorShape } from './Vector.shared.svelte.js';
+import type { VectorProps } from './Vector.shared.svelte.js';
+declare const Vector: import("svelte").Component<VectorProps, {}, "">;
+type Vector = ReturnType<typeof Vector>;
+export default Vector;

package/dist/components/Vector/Vector.shared.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type { DataProp, DataDrivenStyleProps } from '../../utils/dataProp.js';
+import type { VectorAnchor } from '../../utils/path.js';
+import type { MotionProp } from '../../utils/motion.svelte.js';
+export type VectorShape = 'arrow' | 'arrow-filled' | 'spike';
+export type VectorPropsWithoutHTML = {
+    /** @default 0 */
+    x?: DataProp;
+    /** @default x */
+    initialX?: number;
+    /** @default 0 */
+    y?: DataProp;
+    /** @default y */
+    initialY?: number;
+    /** @default 12 */
+    length?: DataProp;
+    /** @default length */
+    initialLength?: number;
+    /** @default 0 */
+    rotate?: DataProp;
+    /** @default 'arrow' */
+    shape?: VectorShape;
+    anchor?: VectorAnchor;
+    /** Width of the vector shape in pixels. */
+    width?: number;
+    data?: any[];
+    /** @default (d, i) => i */
+    key?: (d: any, index: number) => any;
+    motion?: MotionProp;
+    children?: Snippet<[{
+        length: number;
+        d?: any;
+    }]>;
+} & DataDrivenStyleProps;
+export type VectorProps = VectorPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, VectorPropsWithoutHTML>;

package/dist/components/Vector/Vector.shared.svelte.js

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

package/dist/components/Vector/Vector.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { VectorProps, VectorPropsWithoutHTML, VectorShape } from './Vector.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import VectorSvg from './Vector.svg.svelte';
+  import VectorCanvas from './Vector.canvas.svelte';
+  import type { VectorProps } from './Vector.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: VectorProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <VectorSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <VectorCanvas {...props} />
+{/if}

package/dist/components/Vector/Vector.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { VectorProps, VectorPropsWithoutHTML, VectorShape } from './Vector.shared.svelte.js';
+import type { VectorProps } from './Vector.shared.svelte.js';
+declare const Vector: import("svelte").Component<VectorProps, {}, "">;
+type Vector = ReturnType<typeof Vector>;
+export default Vector;

package/dist/components/Vector/Vector.svg.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { VectorProps, VectorPropsWithoutHTML, VectorShape } from './Vector.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import VectorBase from './Vector.base.svelte';
+  import Path from '../Path/Path.svg.svelte';
+  import type { VectorProps } from './Vector.shared.svelte.js';
+
+  let props: VectorProps = $props();
+</script>
+
+<VectorBase {Path} {...props} />

package/dist/components/Vector/Vector.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { VectorProps, VectorPropsWithoutHTML, VectorShape } from './Vector.shared.svelte.js';
+import type { VectorProps } from './Vector.shared.svelte.js';
+declare const Vector: import("svelte").Component<VectorProps, {}, "">;
+type Vector = ReturnType<typeof Vector>;
+export default Vector;