layerchart 2.0.0-next.1 → 2.0.0-next.11

package/dist/components/GeoPath.svelte

@@ -1,5 +1,9 @@
-<script lang="ts">
-  import { onDestroy } from 'svelte';
+<script lang="ts" module>
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { Snippet } from 'svelte';
+  import type { PointerEventHandler, SVGAttributes } from 'svelte/elements';
+  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+  import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
   import {
     geoTransform as d3geoTransform,
     type GeoIdentityTransform,
@@ -7,124 +11,149 @@
     type GeoProjection,
     type GeoTransformPrototype,
   } from 'd3-geo';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
+
+  export type GeoPathPropsWithoutHTML = {
+    /**
+     * GeoJSON data to render
+     */
+    geojson?: GeoPermissibleObjects | null;
+
+    /**
+     * Tooltip context to setup pointer events to show tooltip for related data
+     */
+    tooltipContext?: TooltipContextValue | undefined;
+
+    /**
+     * Click event handler
+     */
+    onclick?:
+      | ((e: MouseEvent, geoPath: ReturnType<typeof geoCurvePath> | undefined) => void)
+      | undefined;
+
+    /**
+     * Curve of path drawn. Imported via d3-shape.
+     *
+     * @example
+     * import { curveCatmullRom } from 'd3-shape';
+     * <GeoPath curve={curveCatmullRom} />
+     *
+     * @default curveLinearClosed
+     */
+    curve?: CurveFactory | CurveFactoryLineOnly;
+
+    /**
+     * Apply geo transform to projection.
+     * Useful to draw straight lines with `geoMercator` projection.
+     *
+     * @see https://d3js.org/d3-geo/projection#geoTransform
+     * @see https://stackoverflow.com/a/56409480/191902
+     **/
+    geoTransform?: (projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype;
+
+    /**
+     * A reference to the underlying `<path>` element
+     * @bindable
+     */
+    ref?: SVGPathElement;
+
+    children?: Snippet<[{ geoPath: ReturnType<typeof geoCurvePath> | undefined }]>;
+  } & CommonStyleProps;
+
+  export type GeoPathProps = GeoPathPropsWithoutHTML &
+    Without<SVGAttributes<SVGPathElement>, GeoPathPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
   import { cls } from '@layerstack/tailwind';
   import { merge } from 'lodash-es';
 
   import { getRenderContext } from './Chart.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
-  import { geoContext } from './GeoContext.svelte';
-  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
-  import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
   import { geoCurvePath } from '../utils/geo.js';
-  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
-  import { objectId } from '@layerstack/utils/object';
-
-  export let geojson: GeoPermissibleObjects | null | undefined = undefined;
-
-  export let fill: string | undefined = undefined;
-  export let stroke: string | undefined = undefined;
-  export let strokeWidth: number | undefined = undefined;
-  export let opacity: number | undefined = undefined;
-
-  /**
-   * Tooltip context to setup pointer events to show tooltip for related data
-   */
-  export let tooltip: TooltipContextValue | undefined = undefined;
-
-  export let onclick:
-    | ((e: MouseEvent, geoPath: ReturnType<typeof geoCurvePath>) => void)
-    | undefined = undefined;
-  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointerdown: ((e: PointerEvent) => void) | undefined = undefined;
-  export let ontouchmove: ((e: TouchEvent) => void) | undefined = undefined;
-
-  /**
-   * Curve of path drawn. Imported via d3-shape.
-   *
-   * @example
-   * import { curveCatmullRom } from 'd3-shape';
-   * <GeoPath curve={curveCatmullRom} />
-   *
-   * @type {CurveFactory | CurveFactoryLineOnly | undefined}
-   */
-  export let curve: CurveFactory | CurveFactoryLineOnly = curveLinearClosed;
-
-  let className: string | undefined = undefined;
-  export { className as class };
-
-  const geo = geoContext();
-
-  /**
-   * Apply geo transform to projection.  Useful to draw straight lines with `geoMercator` projection.
-   * See: https://d3js.org/d3-geo/projection#geoTransform and https://stackoverflow.com/a/56409480/191902
-   **/
-  export let geoTransform:
-    | ((projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype)
-    | undefined = undefined;
-
-  $: _projection = geoTransform ? d3geoTransform(geoTransform($geo)) : $geo;
-
-  $: geoPath = geoCurvePath(_projection, curve);
-  $: {
-    // Recreate `geoPath()` if `geojson` data changes (fixes ghosting issue when rendering to canvas)
+  import { getGeoContext } from './GeoContext.svelte';
+  import { createKey } from '../utils/key.svelte.js';
+  import { layerClass } from '../utils/attributes.js';
+
+  let {
+    fill,
+    stroke,
+    strokeWidth,
+    opacity,
+    geoTransform,
+    geojson,
+    tooltipContext,
+    curve = curveLinearClosed,
+    onclick,
+    class: className,
+    ref: refProp = $bindable(),
+    children,
+    ...restProps
+  }: GeoPathProps = $props();
+
+  let ref = $state<SVGPathElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const geo = getGeoContext();
+
+  const projection = $derived(
+    geoTransform && geo.projection ? d3geoTransform(geoTransform(geo.projection)) : geo.projection
+  );
+
+  const geoPath = $derived.by(() => {
     geojson;
-    geoPath = geoCurvePath(_projection, curve);
-  }
+    if (!projection) return;
+    return geoCurvePath(projection, curve);
+  });
 
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
+  const renderCtx = getRenderContext();
 
   function render(
     ctx: CanvasRenderingContext2D,
     styleOverrides: ComputedStylesOptions | undefined
   ) {
-    if (geojson) {
-      const pathData = geoPath(geojson);
-      renderPathData(
-        ctx,
-        pathData,
-        styleOverrides
-          ? merge({ styles: { strokeWidth } }, styleOverrides)
-          : {
-              styles: { fill, stroke, strokeWidth, opacity },
-              classes: className,
-            }
-      );
-    }
+    if (!geojson) return;
+    const pathData = geoPath?.(geojson);
+    renderPathData(
+      ctx,
+      pathData,
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, stroke, strokeWidth, opacity },
+            classes: className,
+          }
+    );
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  $: fillKey = fill && typeof fill === 'object' ? objectId(fill) : fill;
-  $: strokeKey = stroke && typeof stroke === 'object' ? objectId(stroke) : stroke;
-
-  $: if (renderContext === 'canvas') {
-    // Redraw when geojson, projection, or class change
-    geojson && _projection && fillKey && strokeKey && strokeWidth && opacity && className;
-    canvasContext.invalidate();
-  }
+  const fillKey = createKey(() => fill);
+  const strokeKey = createKey(() => stroke);
 
   // Hide `geoPath` and `tooltip` reactivity
   function _onClick(e: MouseEvent) {
     onclick?.(e, geoPath);
   }
-  function _onPointerEnter(e: PointerEvent) {
-    onpointerenter?.(e);
-    tooltip?.show(e, geojson);
-  }
-  function _onPointerMove(e: PointerEvent) {
-    onpointermove?.(e);
-    tooltip?.show(e, geojson);
-  }
-  function _onPointerLeave(e: PointerEvent) {
-    onpointerleave?.(e);
-    tooltip?.hide();
-  }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
-  $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({
+  const _onPointerEnter: PointerEventHandler<SVGPathElement> = (e) => {
+    restProps.onpointerenter?.(e);
+    tooltipContext?.show(e, geojson);
+  };
+
+  const _onPointerMove: PointerEventHandler<SVGPathElement> = (e) => {
+    restProps.onpointermove?.(e);
+    tooltipContext?.show(e, geojson);
+  };
+
+  const _onPointerLeave: PointerEventHandler<SVGPathElement> = (e) => {
+    restProps.onpointerleave?.(e);
+    tooltipContext?.hide();
+  };
+
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
       name: 'GeoPath',
       render,
       events: {
@@ -132,36 +161,37 @@
         pointerenter: _onPointerEnter,
         pointermove: _onPointerMove,
         pointerleave: _onPointerLeave,
-        pointerdown: onpointerdown,
-        touchmove: ontouchmove,
+        pointerdown: restProps.onpointerdown,
+        touchmove: restProps.ontouchmove,
       },
+      deps: () => [
+        geojson,
+        projection,
+        fillKey.current,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        className,
+      ],
     });
   }
-
-  onDestroy(() => {
-    if (renderContext === 'canvas') {
-      canvasUnregister();
-    }
-  });
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<slot {geoPath}>
-  {#if renderContext === 'svg'}
-    <path
-      {...$$restProps}
-      d={geojson ? geoPath(geojson) : ''}
-      {fill}
-      {stroke}
-      stroke-width={strokeWidth}
-      {opacity}
-      on:click={_onClick}
-      on:pointerenter={_onPointerEnter}
-      on:pointermove={_onPointerMove}
-      on:pointerleave={_onPointerLeave}
-      on:pointerdown={onpointerdown}
-      on:touchmove={ontouchmove}
-      class={cls(fill == null && 'fill-transparent', className)}
-    />
-  {/if}
-</slot>
+{#if children}
+  {@render children({ geoPath })}
+{:else if renderCtx === 'svg'}
+  <path
+    bind:this={ref}
+    {...restProps}
+    d={geojson ? geoPath?.(geojson) : ''}
+    {fill}
+    {stroke}
+    stroke-width={strokeWidth}
+    {opacity}
+    onclick={_onClick}
+    onpointerenter={_onPointerEnter}
+    onpointermove={_onPointerMove}
+    onpointerleave={_onPointerLeave}
+    class={cls(layerClass('geo-path'), fill == null && 'fill-transparent', className)}
+  />
+{/if}

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

@@ -1,39 +1,51 @@
-import { SvelteComponentTyped } from "svelte";
-import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection, type GeoTransformPrototype } from 'd3-geo';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
 import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection, type GeoTransformPrototype } from 'd3-geo';
+export type GeoPathPropsWithoutHTML = {
+    /**
+     * GeoJSON data to render
+     */
+    geojson?: GeoPermissibleObjects | null;
+    /**
+     * Tooltip context to setup pointer events to show tooltip for related data
+     */
+    tooltipContext?: TooltipContextValue | undefined;
+    /**
+     * Click event handler
+     */
+    onclick?: ((e: MouseEvent, geoPath: ReturnType<typeof geoCurvePath> | undefined) => void) | undefined;
+    /**
+     * Curve of path drawn. Imported via d3-shape.
+     *
+     * @example
+     * import { curveCatmullRom } from 'd3-shape';
+     * <GeoPath curve={curveCatmullRom} />
+     *
+     * @default curveLinearClosed
+     */
+    curve?: CurveFactory | CurveFactoryLineOnly;
+    /**
+     * Apply geo transform to projection.
+     * Useful to draw straight lines with `geoMercator` projection.
+     *
+     * @see https://d3js.org/d3-geo/projection#geoTransform
+     * @see https://stackoverflow.com/a/56409480/191902
+     **/
+    geoTransform?: (projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype;
+    /**
+     * A reference to the underlying `<path>` element
+     * @bindable
+     */
+    ref?: SVGPathElement;
+    children?: Snippet<[{
+        geoPath: ReturnType<typeof geoCurvePath> | undefined;
+    }]>;
+} & CommonStyleProps;
+export type GeoPathProps = GeoPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, GeoPathPropsWithoutHTML>;
 import { geoCurvePath } from '../utils/geo.js';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        geojson?: GeoPermissibleObjects | null | undefined;
-        fill?: string | undefined | undefined;
-        stroke?: string | undefined | undefined;
-        strokeWidth?: number | undefined | undefined;
-        opacity?: number | undefined | undefined;
-        tooltip?: TooltipContextValue | undefined;
-        onclick?: ((e: MouseEvent, geoPath: ReturnType<typeof geoCurvePath>) => void) | undefined | undefined;
-        onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;
-        onpointermove?: ((e: PointerEvent) => void) | undefined | undefined;
-        onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
-        onpointerdown?: ((e: PointerEvent) => void) | undefined | undefined;
-        ontouchmove?: ((e: TouchEvent) => void) | undefined | undefined;
-        curve?: (CurveFactory | CurveFactoryLineOnly) | undefined;
-        class?: string | undefined | undefined;
-        geoTransform?: ((projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype) | undefined | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            geoPath: import("d3-geo").GeoPath<unknown, GeoPermissibleObjects>;
-        };
-    };
-};
-export type GeoPathProps = typeof __propDef.props;
-export type GeoPathEvents = typeof __propDef.events;
-export type GeoPathSlots = typeof __propDef.slots;
-export default class GeoPath extends SvelteComponentTyped<GeoPathProps, GeoPathEvents, GeoPathSlots> {
-}
-export {};
+declare const GeoPath: import("svelte").Component<GeoPathProps, {}, "ref">;
+type GeoPath = ReturnType<typeof GeoPath>;
+export default GeoPath;

package/dist/components/GeoPoint.svelte

@@ -1,42 +1,74 @@
-<script lang="ts">
-  import { onDestroy } from 'svelte';
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import Circle, { type CircleProps, type CirclePropsWithoutHTML } from './Circle.svelte';
+  import type { Without } from '../utils/types.js';
+
+  export type GeoPointPropsWithoutHTML = {
+    /**
+     * Latitude of the point.
+     */
+    lat: number;
+
+    /**
+     * Longitude of the point.
+     */
+    long: number;
+
+    /**
+     * A bindable reference to the underlying element, which
+     * can be a `<circle>` or `<g>` element.
+     */
+    ref?: Element;
+
+    children?: Snippet<[{ x: number; y: number }]>;
+  };
 
-  import { geoContext } from './GeoContext.svelte';
-  import Circle from './Circle.svelte';
+  export type GeoPointProps = Omit<
+    GeoPointPropsWithoutHTML & Without<CircleProps, GeoPointPropsWithoutHTML>,
+    'x' | 'y'
+  >;
+</script>
+
+<script lang="ts">
   import Group from './Group.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
   import { getRenderContext } from './Chart.svelte';
+  import { getGeoContext } from './GeoContext.svelte';
+  import { extractLayerProps } from '../utils/attributes.js';
+
+  let { lat, long, ref: refProp = $bindable(), children, ...restProps }: GeoPointProps = $props();
 
-  /** Latitude */
-  export let lat: number;
-  /** Longitude */
-  export let long: number;
+  let ref = $state<Element>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
-  const geo = geoContext();
+  const geoCtx = getGeoContext();
 
-  $: [x, y] = $geo([long, lat]) ?? [0, 0];
+  const points = $derived(geoCtx.projection?.([long, lat]) ?? [0, 0]);
+  const x = $derived(points[0]);
+  const y = $derived(points[1]);
 
   const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
 </script>
 
 {#if renderContext === 'svg'}
-  {#if $$slots.default}
-    <Group {x} {y} {...$$restProps}>
-      <slot {x} {y} />
+  {#if children}
+    <Group {x} {y} {...extractLayerProps(restProps, 'geo-point-group')}>
+      {@render children({ x, y })}
     </Group>
   {:else}
-    <Circle cx={x} cy={y} {...$$restProps} />
+    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'geo-point')} />
   {/if}
 {/if}
 
 {#if renderContext === 'canvas'}
-  {#if $$slots.default}
-    <!-- TODO: Handle Canvas translation.  Conslidate with svg use case above -->
+  {#if children}
+    <!-- TODO: Handle Canvas translation. Consolidate with svg use case above -->
     <!-- <Group {x} {y} {...$$restProps}> -->
-    <slot {x} {y} />
+    {@render children({ x, y })}
     <!-- </Group> -->
   {:else}
-    <Circle cx={x} cy={y} {...$$restProps} />
+    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'geo-point')} />
   {/if}
 {/if}

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

@@ -1,23 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        lat: number;
-        long: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            x: any;
-            y: any;
-        };
-    };
+import type { Snippet } from 'svelte';
+import { type CircleProps } from './Circle.svelte';
+import type { Without } from '../utils/types.js';
+export type GeoPointPropsWithoutHTML = {
+    /**
+     * Latitude of the point.
+     */
+    lat: number;
+    /**
+     * Longitude of the point.
+     */
+    long: number;
+    /**
+     * A bindable reference to the underlying element, which
+     * can be a `<circle>` or `<g>` element.
+     */
+    ref?: Element;
+    children?: Snippet<[{
+        x: number;
+        y: number;
+    }]>;
 };
-export type GeoPointProps = typeof __propDef.props;
-export type GeoPointEvents = typeof __propDef.events;
-export type GeoPointSlots = typeof __propDef.slots;
-export default class GeoPoint extends SvelteComponentTyped<GeoPointProps, GeoPointEvents, GeoPointSlots> {
-}
-export {};
+export type GeoPointProps = Omit<GeoPointPropsWithoutHTML & Without<CircleProps, GeoPointPropsWithoutHTML>, 'x' | 'y'>;
+declare const GeoPoint: import("svelte").Component<GeoPointProps, {}, "ref">;
+type GeoPoint = ReturnType<typeof GeoPoint>;
+export default GeoPoint;

package/dist/components/GeoSpline.svelte

@@ -1,36 +1,85 @@
-<script lang="ts">
+<script lang="ts" module>
+  import Spline, { type SplineProps } from './Spline.svelte';
   import { curveNatural, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
-  import { geoOrthographic, geoInterpolate } from 'd3-geo';
+  import type { Without } from '../utils/types.js';
+
+  export type GeoSplinePropsWithoutHTML = {
+    /**
+     * Link between two points on the globe.
+     */
+    link: { source: [number, number]; target: [number, number] };
+
+    /**
+     * The amount of loft to apply to the middle of the curve.
+     *
+     * @default 1.0
+     */
+    loft?: number;
+
+    /**
+     * Curve of spline drawn. Imported via d3-shape.
+     *
+     * @example
+     * import { curveNatural } from 'd3-shape';
+     * <GeoSpline curve={curveNatural} />
+     *
+     * @default curveNatural
+     */
+    curve?: CurveFactory | CurveFactoryLineOnly;
+  };
 
-  import { geoContext } from './GeoContext.svelte';
-  import Spline from './Spline.svelte';
+  export type GeoSplineProps = GeoSplinePropsWithoutHTML &
+    Without<SplineProps, GeoSplinePropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { geoOrthographic, geoInterpolate } from 'd3-geo';
 
-  export let link: { source: [number, number]; target: [number, number] };
+  import { getGeoContext } from './GeoContext.svelte';
+  import { extractLayerProps } from '../utils/attributes.js';
 
-  /** Amount of loft to apply to the midle of the curve */
-  export let loft = 1.0;
+  let {
+    link,
+    loft = 1.0,
+    curve = curveNatural,
+    splineRef: splineRefProp = $bindable(),
+    ...restProps
+  }: GeoSplineProps = $props();
 
-  /**
-   * Curve of spline drawn. Imported via d3-shape.
-   *
-   * @example
-   * import { curveNatural } from 'd3-shape';
-   * <GeoSpline curve={curveNatrual} />
-   *
-   * @type {CurveFactory | CurveFactoryLineOnly | undefined}
-   */
-  export let curve: CurveFactory | CurveFactoryLineOnly | undefined = curveNatural;
+  let splineRef = $state<SVGPathElement>();
+  $effect.pre(() => {
+    splineRefProp = splineRef;
+  });
 
-  const geo = geoContext();
+  const geoCtx = getGeoContext();
 
-  $: loftedProjection = geoOrthographic()
-    .translate($geo.translate())
-    .rotate($geo.rotate())
-    .scale($geo.scale() * loft);
+  const loftedProjection = $derived(
+    geoCtx.projection
+      ? geoOrthographic()
+          .translate(geoCtx.projection.translate())
+          .rotate(geoCtx.projection.rotate())
+          .scale(geoCtx.projection.scale() * loft)
+      : undefined
+  );
 
-  $: source = $geo(link.source);
-  $: target = $geo(link.target);
-  $: middle = loftedProjection(geoInterpolate(link.source, link.target)(0.5));
+  const source = $derived(geoCtx.projection ? geoCtx.projection(link.source) : [0, 0]) as [
+    number,
+    number,
+  ];
+  const target = $derived(geoCtx.projection ? geoCtx.projection(link.target) : [0, 0]) as [
+    number,
+    number,
+  ];
+  const middle = $derived(
+    geoCtx.projection ? loftedProjection!(geoInterpolate(link.source, link.target)(0.5)) : [0, 0]
+  ) as [number, number];
 </script>
 
-<Spline data={[source, middle, target]} x={(d) => d[0]} y={(d) => d[1]} {curve} {...$$restProps} />
+<Spline
+  bind:splineRef
+  data={[source, middle, target]}
+  x={(d) => d[0]}
+  y={(d) => d[1]}
+  {curve}
+  {...extractLayerProps(restProps, 'geo-spline')}
+/>