layerchart 2.0.0-next.46 → 2.0.0-next.48

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

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import Ellipse from './Ellipse.svelte';
+describe('Ellipse', () => {
+    describe('pixel mode', () => {
+        it('should render an ellipse with pixel values', async () => {
+            render(TestHarness, {
+                component: Ellipse,
+                componentProps: {
+                    cx: 50,
+                    cy: 50,
+                    rx: 30,
+                    ry: 20,
+                    fill: 'red',
+                },
+            });
+            const el = page.getByTestId(componentTestId);
+            await expect.element(el).toBeInTheDocument();
+            expect(el.element()?.getAttribute('cx')).toBe('50');
+            expect(el.element()?.getAttribute('cy')).toBe('50');
+            expect(el.element()?.getAttribute('rx')).toBe('30');
+            expect(el.element()?.getAttribute('ry')).toBe('20');
+        });
+    });
+    describe('data mode', () => {
+        const data = [
+            { date: new Date('2024-01-01'), value: 20 },
+            { date: new Date('2024-02-01'), value: 40 },
+            { date: new Date('2024-03-01'), value: 60 },
+        ];
+        it('should render one ellipse per data item with string accessors', async () => {
+            render(TestHarness, {
+                component: Ellipse,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    rx: 10,
+                    ry: 5,
+                },
+            });
+            const ellipses = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => ellipses.length).toBe(3);
+        });
+        it('should resolve data-driven fill through cScale', async () => {
+            const colorData = [
+                { date: new Date('2024-01-01'), value: 20, category: 'A' },
+                { date: new Date('2024-02-01'), value: 40, category: 'B' },
+                { date: new Date('2024-03-01'), value: 60, category: 'A' },
+            ];
+            render(TestHarness, {
+                component: Ellipse,
+                chartProps: {
+                    data: colorData,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                    c: 'category',
+                    cRange: ['steelblue', 'coral'],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    rx: 10,
+                    ry: 5,
+                    fill: 'category',
+                },
+            });
+            const ellipses = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => ellipses.length).toBe(3);
+            expect(ellipses[0].getAttribute('fill')).toBe('steelblue');
+            expect(ellipses[1].getAttribute('fill')).toBe('coral');
+            expect(ellipses[2].getAttribute('fill')).toBe('steelblue');
+        });
+        it('should pass literal CSS colors through unchanged in data mode', async () => {
+            render(TestHarness, {
+                component: Ellipse,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    cx: 'date',
+                    cy: 'value',
+                    rx: 10,
+                    ry: 5,
+                    fill: 'red',
+                },
+            });
+            const ellipses = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => ellipses.length).toBe(3);
+            expect(ellipses[0].getAttribute('fill')).toBe('red');
+            expect(ellipses[1].getAttribute('fill')).toBe('red');
+        });
+        it('should use explicit data prop over chart context data', async () => {
+            const explicitData = [{ date: new Date('2024-01-01'), value: 20 }];
+            render(TestHarness, {
+                component: Ellipse,
+                chartProps: {
+                    data,
+                    x: 'date',
+                    y: 'value',
+                    yDomain: [0, 100],
+                },
+                componentProps: {
+                    data: explicitData,
+                    cx: 'date',
+                    cy: 'value',
+                    rx: 10,
+                    ry: 5,
+                },
+            });
+            const ellipses = page.getByTestId(componentTestId).elements();
+            await expect.poll(() => ellipses.length).toBe(1);
+        });
+    });
+});

package/dist/components/GeoEdgeFade.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
   import type { Without } from '../utils/types.js';
-  import type { SVGAttributes } from 'svelte/elements';
 
   export type GeoEdgeFadePropsWithoutHTML = {
     link: { source: [number, number]; target: [number, number] };
@@ -40,13 +39,13 @@
     refProp = ref;
   });
 
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
 
   const fade = scaleLinear().domain([-0.1, 0]).range([0, 0.1]);
   const clamper = scaleLinear().domain([0, 1]).range([0, 1]).clamp(true);
 
   const center = $derived(
-    geoCtx.projection?.invert?.(geoCtx.projection?.translate()) ?? ([0, 0] as [number, number])
+    geo.projection?.invert?.(geo.projection?.translate()) ?? ([0, 0] as [number, number])
   );
   const source = $derived(link.source);
   const target = $derived(link.target);

package/dist/components/GeoPath.svelte

@@ -12,7 +12,6 @@
   import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 
   import type { CommonStyleProps, Without } from '../utils/types.js';
-  import type { TooltipContextValue } from '../contexts/tooltip.js';
   import type { PathProps } from './Path.svelte';
 
   export type GeoPathPropsWithoutHTML = {
@@ -22,9 +21,9 @@
     geojson?: GeoPermissibleObjects | null;
 
     /**
-     * Tooltip context to setup pointer events to show tooltip for related data
+     * Setup pointer events to show tooltip for related data
      */
-    tooltipContext?: TooltipContextValue | undefined;
+    tooltip?: boolean;
 
     /**
      * Click event handler
@@ -81,13 +80,14 @@
   import { cls } from '@layerstack/tailwind';
 
   import { geoCurvePath } from '../utils/geo.js';
+  import { getChartContext } from '../contexts/chart.js';
   import { getGeoContext } from '../contexts/geo.js';
   import Path from './Path.svelte';
 
   let {
     geoTransform,
     geojson,
-    tooltipContext,
+    tooltip,
     curve = curveLinearClosed,
     onclick,
     onpointerenter,
@@ -99,6 +99,7 @@
     ...restProps
   }: GeoPathProps = $props();
 
+  const ctx = getChartContext();
   const geo = getGeoContext();
 
   const projection = $derived(
@@ -115,7 +116,7 @@
     return geoCurvePath(projection, curve);
   });
 
-  const pathData = $derived(geojson ? geoPath?.(geojson) : '');
+  const pathData = $derived(geojson ? (geoPath?.(geojson) ?? '') : '');
 
   // Hide `geoPath` reactivity from onclick handler
   function _onClick(e: MouseEvent) {
@@ -124,17 +125,23 @@
 
   function _onPointerEnter(e: PointerEvent & { currentTarget: EventTarget & SVGPathElement }) {
     onpointerenter?.(e);
-    tooltipContext?.show(e, geojson);
+    if (tooltip) {
+      ctx?.tooltip.show(e, geojson);
+    }
   }
 
   function _onPointerMove(e: PointerEvent & { currentTarget: EventTarget & SVGPathElement }) {
     onpointermove?.(e);
-    tooltipContext?.show(e, geojson);
+    if (tooltip) {
+      ctx.tooltip.show(e, geojson);
+    }
   }
 
   function _onPointerLeave(e: PointerEvent & { currentTarget: EventTarget & SVGPathElement }) {
     onpointerleave?.(e);
-    tooltipContext?.hide();
+    if (tooltip) {
+      ctx.tooltip.hide();
+    }
   }
 </script>
 
@@ -145,9 +152,9 @@
     {pathData}
     {...restProps}
     onclick={_onClick}
-    onpointerenter={tooltipContext || onpointerenter ? _onPointerEnter : undefined}
-    onpointermove={tooltipContext || onpointermove ? _onPointerMove : undefined}
-    onpointerleave={tooltipContext || onpointerleave ? _onPointerLeave : undefined}
+    onpointerenter={tooltip || onpointerenter ? _onPointerEnter : undefined}
+    onpointermove={tooltip || onpointermove ? _onPointerMove : undefined}
+    onpointerleave={tooltip || onpointerleave ? _onPointerLeave : undefined}
     class={cls('lc-geo-path', className)}
     pathRef={refProp}
   />

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

@@ -3,7 +3,6 @@ import type { SVGAttributes } from 'svelte/elements';
 import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection, type GeoTransformPrototype } from 'd3-geo';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 import type { CommonStyleProps, Without } from '../utils/types.js';
-import type { TooltipContextValue } from '../contexts/tooltip.js';
 import type { PathProps } from './Path.svelte';
 export type GeoPathPropsWithoutHTML = {
     /**
@@ -11,9 +10,9 @@ export type GeoPathPropsWithoutHTML = {
      */
     geojson?: GeoPermissibleObjects | null;
     /**
-     * Tooltip context to setup pointer events to show tooltip for related data
+     * Setup pointer events to show tooltip for related data
      */
-    tooltipContext?: TooltipContextValue | undefined;
+    tooltip?: boolean;
     /**
      * Click event handler
      */

package/dist/components/GeoPoint.svelte

@@ -35,16 +35,26 @@
   import { getGeoContext } from '../contexts/geo.js';
   import { extractLayerProps } from '../utils/attributes.js';
 
-  let { lat, long, ref: refProp = $bindable(), children, ...restProps }: GeoPointProps = $props();
+  let {
+    lat,
+    long,
+    ref: refProp = $bindable(),
+    children,
+    opacity,
+    fillOpacity,
+    strokeWidth,
+    class: className,
+    ...restProps
+  }: GeoPointProps = $props();
 
   let ref = $state<Element>();
   $effect.pre(() => {
     refProp = ref;
   });
 
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
 
-  const points = $derived(geoCtx.projection?.([long, lat]) ?? [0, 0]);
+  const points = $derived(geo.projection?.([long, lat]) ?? [0, 0]);
   const x = $derived(points[0]);
   const y = $derived(points[1]);
 
@@ -53,11 +63,11 @@
 
 {#if layerCtx === 'svg'}
   {#if children}
-    <Group {x} {y} {...extractLayerProps(restProps, 'lc-geo-point-group')}>
+    <Group {x} {y} opacity={opacity as number} class={className as string} {...extractLayerProps(restProps, 'lc-geo-point-group')}>
       {@render children({ x, y })}
     </Group>
   {:else}
-    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'lc-geo-point')} />
+    <Circle cx={x} cy={y} {opacity} {fillOpacity} {strokeWidth} class={className} {...extractLayerProps(restProps, 'lc-geo-point')} />
   {/if}
 {/if}
 
@@ -68,6 +78,6 @@
     {@render children({ x, y })}
     <!-- </Group> -->
   {:else}
-    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'lc-geo-point')} />
+    <Circle cx={x} cy={y} {opacity} {fillOpacity} {strokeWidth} class={className} {...extractLayerProps(restProps, 'lc-geo-point')} />
   {/if}
 {/if}

package/dist/components/GeoProjection.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import { GeoState, type GeoStateProps } from '../states/geo.svelte.js';
+
+  export type GeoProjectionProps = GeoStateProps & {
+    children: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import { setGeoContext } from '../contexts/geo.js';
+  import { getChartContext } from '../contexts/chart.js';
+
+  let { children, ...props }: GeoProjectionProps = $props();
+
+  const ctx = getChartContext();
+
+  // Create GeoState instance
+  const geoState = new GeoState(() => props);
+
+  // Sync chart dimensions to geo state
+  $effect(() => {
+    geoState.chartWidth = ctx.width;
+    geoState.chartHeight = ctx.height;
+  });
+
+  setGeoContext(geoState);
+</script>
+
+{@render children()}

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { type GeoStateProps } from '../states/geo.svelte.js';
+export type GeoProjectionProps = GeoStateProps & {
+    children: Snippet;
+};
+declare const GeoProjection: import("svelte").Component<GeoProjectionProps, {}, "">;
+type GeoProjection = ReturnType<typeof GeoProjection>;
+export default GeoProjection;

package/dist/components/GeoSpline.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import Spline, { type SplineProps } from './Spline.svelte';
   import { curveNatural, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
   import type { Without } from '../utils/types.js';
+  import type { PathProps } from './Path.svelte';
 
   export type GeoSplinePropsWithoutHTML = {
     /**
@@ -29,45 +29,53 @@
   };
 
   export type GeoSplineProps = GeoSplinePropsWithoutHTML &
-    Without<SplineProps, GeoSplinePropsWithoutHTML>;
+    Without<PathProps, GeoSplinePropsWithoutHTML>;
 </script>
 
 <script lang="ts">
   import { geoOrthographic, geoInterpolate } from 'd3-geo';
+  import { line as d3Line } from 'd3-shape';
 
   import { getGeoContext } from '../contexts/geo.js';
   import { extractLayerProps } from '../utils/attributes.js';
+  import Path from './Path.svelte';
 
   let { link, loft = 1.0, curve = curveNatural, ...restProps }: GeoSplineProps = $props();
 
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
 
   const loftedProjection = $derived(
-    geoCtx.projection
+    geo.projection
       ? geoOrthographic()
-          .translate(geoCtx.projection.translate())
-          .rotate(geoCtx.projection.rotate())
-          .scale(geoCtx.projection.scale() * loft)
+          .translate(geo.projection.translate())
+          .rotate(geo.projection.rotate())
+          .scale(geo.projection.scale() * loft)
       : undefined
   );
 
-  const source = $derived(geoCtx.projection ? geoCtx.projection(link.source) : [0, 0]) as [
+  const source = $derived(geo.projection ? geo.projection(link.source) : [0, 0]) as [
     number,
     number,
   ];
-  const target = $derived(geoCtx.projection ? geoCtx.projection(link.target) : [0, 0]) as [
+  const target = $derived(geo.projection ? geo.projection(link.target) : [0, 0]) as [
     number,
     number,
   ];
   const middle = $derived(
-    geoCtx.projection ? loftedProjection!(geoInterpolate(link.source, link.target)(0.5)) : [0, 0]
+    geo.projection ? loftedProjection!(geoInterpolate(link.source, link.target)(0.5)) : [0, 0]
   ) as [number, number];
+
+  // Build SVG path directly since coordinates are already projected to screen space.
+  // Using Spline would double-project via its geo mode.
+  const d = $derived(
+    d3Line<[number, number]>()
+      .x((d) => d[0])
+      .y((d) => d[1])
+      .curve(curve)([source, middle, target]) ?? ''
+  );
 </script>
 
-<Spline
-  data={[source, middle, target]}
-  x={(d) => d[0]}
-  y={(d) => d[1]}
-  {curve}
+<Path
+  pathData={d}
   {...extractLayerProps(restProps, 'lc-geo-spline')}
 />

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

@@ -1,6 +1,6 @@
-import { type SplineProps } from './Spline.svelte';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 import type { Without } from '../utils/types.js';
+import type { PathProps } from './Path.svelte';
 export type GeoSplinePropsWithoutHTML = {
     /**
      * Link between two points on the globe.
@@ -26,7 +26,7 @@ export type GeoSplinePropsWithoutHTML = {
      */
     curve?: CurveFactory | CurveFactoryLineOnly;
 };
-export type GeoSplineProps = GeoSplinePropsWithoutHTML & Without<SplineProps, GeoSplinePropsWithoutHTML>;
+export type GeoSplineProps = GeoSplinePropsWithoutHTML & Without<PathProps, GeoSplinePropsWithoutHTML>;
 declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "">;
 type GeoSpline = ReturnType<typeof GeoSpline>;
 export default GeoSpline;

package/dist/components/GeoTile.svelte

@@ -45,11 +45,10 @@
   import { tile as d3Tile } from 'd3-tile';
 
   import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
   import { getLayerContext } from '../contexts/layer.js';
-  import { registerCanvasComponent } from './layers/Canvas.svelte';
   import Group from './Group.svelte';
   import TileImage from './TileImage.svelte';
-  import { getGeoContext } from '../contexts/geo.js';
   import { extractLayerProps } from '../utils/attributes.js';
 
   let {
@@ -63,17 +62,17 @@
   }: GeoTilePropsWithoutHTML = $props();
 
   const ctx = getChartContext();
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
   const layerCtx = getLayerContext();
 
-  const center = $derived(geoCtx.projection?.([0, 0]) ?? [0, 0]);
+  const center = $derived(geo.projection?.([0, 0]) ?? [0, 0]);
 
   const tiles = $derived(
     d3Tile()
       .size([ctx.containerWidth, ctx.containerHeight])
       .translate([center[0] + ctx.padding.left, center[1] + ctx.padding.top])
       // TODO: is this fine to add the 0 as a default?
-      .scale(geoCtx.projection ? geoCtx.projection.scale() * 2 * Math.PI : undefined)
+      .scale(geo.projection ? geo.projection.scale() * 2 * Math.PI : undefined)
       .tileSize(tileSize)
       .zoomDelta(zoomDelta)()
   );
@@ -92,11 +91,10 @@
   }
 
   if (layerCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'GeoTile',
+    ctx.registerComponent({ name: 'GeoTile', kind: 'mark', canvasRender: {
       render,
       deps: () => [tiles],
-    });
+    } });
   }
 </script>
 

package/dist/components/GeoVisible.svelte

@@ -15,9 +15,9 @@
   import { getGeoContext } from '../contexts/geo.js';
 
   let { lat, long, children }: GeoVisibleProps = $props();
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
 </script>
 
-{#if geoCtx.projection && isVisible(geoCtx.projection)([long, lat])}
+{#if geo.projection && isVisible(geo.projection)([long, lat])}
   {@render children?.()}
 {/if}

package/dist/components/Grid.svelte

@@ -103,6 +103,9 @@
 
   const ctx = getChartContext();
 
+  // Mark as composite so child Splines (radial grid) don't register
+  ctx.registerComponent({ name: 'Grid', kind: 'composite-mark' });
+
   let {
     x = false,
     y = false,