layerchart 2.0.0-next.1 → 2.0.0-next.3

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

@@ -1,25 +1,23 @@
-import { SvelteComponentTyped } from "svelte";
-import GeoPath from './GeoPath.svelte';
-import type { ComponentProps } from 'svelte';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        radius?: number | undefined;
-        center?: [number, number] | undefined;
-        precision?: number | undefined;
-        onclick?: ComponentProps<typeof GeoPath>["onclick"] | undefined;
-        onpointerenter?: ComponentProps<typeof GeoPath>["onpointerenter"] | undefined;
-        onpointermove?: ComponentProps<typeof GeoPath>["onpointermove"] | undefined;
-        onpointerleave?: ComponentProps<typeof GeoPath>["onpointerleave"] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import { type GeoPathProps } from './GeoPath.svelte';
+import type { Without } from '../utils/types.js';
+export type GeoCirclePropsWithoutHTML = {
+    /**
+     * The radius of the circle in degrees.
+     * @default 90
+     */
+    radius?: number;
+    /**
+     * The center point of the circle in degrees ([longitude, latitude]).
+     * @default [0, 0]
+     */
+    center?: [number, number];
+    /**
+     * The precision of the circle in degrees.
+     * @default 6
+     */
+    precision?: number;
 };
-export type GeoCircleProps = typeof __propDef.props;
-export type GeoCircleEvents = typeof __propDef.events;
-export type GeoCircleSlots = typeof __propDef.slots;
-export default class GeoCircle extends SvelteComponentTyped<GeoCircleProps, GeoCircleEvents, GeoCircleSlots> {
-}
-export {};
+export type GeoCircleProps = GeoCirclePropsWithoutHTML & Without<GeoPathProps, GeoCirclePropsWithoutHTML>;
+declare const GeoCircle: import("svelte").Component<GeoCircleProps, {}, "">;
+type GeoCircle = ReturnType<typeof GeoCircle>;
+export default GeoCircle;

package/dist/components/GeoContext.svelte

@@ -1,74 +1,113 @@
-<script lang="ts" context="module">
-  import { getContext, setContext } from 'svelte';
-  import { writable, type Writable } from 'svelte/store';
-  import {
-    type GeoIdentityTransform,
-    type GeoPermissibleObjects,
-    type GeoProjection,
-  } from 'd3-geo';
-
-  import { chartContext } from './ChartContext.svelte';
-  import { transformContext } from './TransformContext.svelte';
-
-  export const geoContextKey = Symbol();
-
-  export type GeoContext = Writable<GeoProjection /* | GeoIdentityTransform*/>;
-
-  export function geoContext() {
-    return getContext<GeoContext>(geoContextKey);
+<script lang="ts" module>
+  import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
+  import { getTransformContext } from './TransformContext.svelte';
+  import { Context } from 'runed';
+  import { getChartContext } from './Chart.svelte';
+  import type { Snippet } from 'svelte';
+
+  export type GeoContextValue = {
+    projection: GeoProjection | undefined;
+  };
+
+  /**
+   * Access or set the current GeoContext.
+   */
+  const _GeoContext = new Context<GeoContextValue>('GeoContext');
+
+  export function getGeoContext() {
+    return _GeoContext.getOr({ projection: undefined } as GeoContextValue);
   }
 
-  function setGeoContext(geo: GeoContext) {
-    setContext(geoContextKey, geo);
+  export function setGeoContext(geo: GeoContextValue) {
+    return _GeoContext.set(geo);
   }
+
+  export type GeoContextProps = {
+    /**
+     * A d3 projection function. Pass this in as an uncalled function, e.g.
+     * `projection={geoAlbersUsa}`.
+     */
+    projection?: () => GeoProjection;
+    fitGeojson?: GeoPermissibleObjects;
+    /**
+     * By default, the map fills to fit the $width and $height. If instead you want a
+     * fixed-aspect ratio, like for a server-side rendered map, set that here.
+     */
+    fixedAspectRatio?: number;
+    clipAngle?: number;
+    clipExtent?: [[number, number], [number, number]];
+    rotate?: {
+      /** Lambda (Center Meridian) */
+      yaw: number;
+      /** Phi */
+      pitch: number;
+      /** Gamma */
+      roll: number;
+    };
+    scale?: number;
+    translate?: [number, number];
+    center?: [number, number];
+    /**
+     * Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are
+     * mutually selected
+     */
+    applyTransform?: ('scale' | 'translate' | 'rotate')[];
+    reflectX?: boolean;
+    reflectY?: boolean;
+    /**
+     * Exposed to allow binding in Chart
+     *
+     * @bindable
+     */
+    geoContext?: GeoContextValue;
+
+    children: Snippet<[{ geoContext: GeoContextValue }]>;
+  };
 </script>
 
 <script lang="ts">
-  const { width, height } = chartContext();
-
-  /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
-  export let projection: (() => GeoProjection) /* | GeoIdentityTransform*/ | undefined = undefined;
-
-  export let fitGeojson: GeoPermissibleObjects | undefined = undefined;
-
-  /** By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
-  export let fixedAspectRatio: number | undefined = undefined;
-
-  export let clipAngle: number | undefined = undefined;
-  export let clipExtent: [[number, number], [number, number]] | undefined = undefined;
-  export let rotate:
-    | {
-        /** Lambda (Center Meridian) */
-        yaw: number;
-        /** Phi */
-        pitch: number;
-        /** Gamma */
-        roll: number;
-      }
-    | undefined = undefined;
-  export let scale: number | undefined = undefined;
-  export let translate: [number, number] | undefined = undefined;
-  export let center: [number, number] | undefined = undefined;
-
-  /** Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are mutually selected  */
-  export let applyTransform: ('scale' | 'translate' | 'rotate')[] = [];
-
-  export let reflectX: boolean | undefined = undefined;
-  export let reflectY: boolean | undefined = undefined;
-
-  /** Exposed to allow binding in Chart */
-  export let geo = writable(projection?.());
-  setGeoContext(geo);
-
-  const { scale: transformScale, translate: transformTranslate } = transformContext();
-
-  $: fitSizeRange = (fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]) as [
-    number,
-    number,
-  ];
-
-  $: if (projection) {
-    const _projection = projection();
+  let {
+    projection: projectionProp,
+    fitGeojson,
+    fixedAspectRatio,
+    clipAngle,
+    clipExtent,
+    rotate,
+    scale,
+    translate,
+    center,
+    applyTransform = [],
+    reflectX,
+    reflectY,
+    geoContext: geoContextProp = $bindable() as GeoContextValue,
+    children,
+  }: GeoContextProps = $props();
+
+  const ctx = getChartContext();
+  const transformCtx = getTransformContext();
+
+  let projection = $state<GeoProjection>();
+
+  const geoContext = {
+    get projection() {
+      return projection;
+    },
+    set projection(v: GeoProjection | undefined) {
+      projection = v;
+    },
+  };
+
+  geoContextProp = geoContext;
+
+  setGeoContext(geoContext);
+
+  const fitSizeRange = $derived(
+    fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [ctx.width, ctx.height]
+  ) as [number, number];
+
+  $effect.pre(() => {
+    if (!projectionProp) return;
+    const _projection = projectionProp();
 
     if (fitGeojson && 'fitSize' in _projection) {
       _projection.fitSize(fitSizeRange, fitGeojson);
@@ -80,7 +119,7 @@
       }
 
       if (applyTransform.includes('scale')) {
-        _projection.scale($transformScale);
+        _projection.scale(transformCtx.scale);
       }
     }
 
@@ -91,8 +130,8 @@
 
       if (applyTransform.includes('rotate')) {
         _projection.rotate([
-          $transformTranslate.x, // yaw
-          $transformTranslate.y, // pitch
+          transformCtx.translate.x, // yaw
+          transformCtx.translate.y, // pitch
           // TODO: `roll` from `transformContext`?
         ]);
       }
@@ -104,7 +143,7 @@
       }
 
       if (applyTransform.includes('translate')) {
-        _projection.translate([$transformTranslate.x, $transformTranslate.y]);
+        _projection.translate([transformCtx.translate.x, transformCtx.translate.y]);
       }
     }
 
@@ -128,8 +167,10 @@
       _projection.clipExtent(clipExtent);
     }
 
-    geo.set(_projection);
-  }
+    geoContext.projection = _projection;
+  });
 </script>
 
-<slot projection={$geo} />
+{@render children({
+  geoContext,
+})}

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

@@ -1,44 +1,52 @@
-import { SvelteComponentTyped } from "svelte";
-import { type Writable } from 'svelte/store';
 import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
-export declare const geoContextKey: unique symbol;
-export type GeoContext = Writable<GeoProjection>;
-export declare function geoContext(): GeoContext;
-declare const __propDef: {
-    props: {
-        /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */ projection?: (() => GeoProjection) | undefined;
-        fitGeojson?: GeoPermissibleObjects | undefined;
-        /** By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */ fixedAspectRatio?: number | undefined;
-        clipAngle?: number | undefined;
-        clipExtent?: [[number, number], [number, number]] | undefined;
-        rotate?: {
-            /** Lambda (Center Meridian) */
-            yaw: number;
-            /** Phi */
-            pitch: number;
-            /** Gamma */
-            roll: number;
-        } | undefined;
-        scale?: number | undefined;
-        translate?: [number, number] | undefined;
-        center?: [number, number] | undefined;
-        /** Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are mutually selected  */ applyTransform?: ("scale" | "translate" | "rotate")[];
-        reflectX?: boolean | undefined;
-        reflectY?: boolean | undefined;
-        /** Exposed to allow binding in Chart */ geo?: Writable<GeoProjection>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            projection: GeoProjection;
-        };
+import type { Snippet } from 'svelte';
+export type GeoContextValue = {
+    projection: GeoProjection | undefined;
+};
+export declare function getGeoContext(): GeoContextValue;
+export declare function setGeoContext(geo: GeoContextValue): GeoContextValue;
+export type GeoContextProps = {
+    /**
+     * A d3 projection function. Pass this in as an uncalled function, e.g.
+     * `projection={geoAlbersUsa}`.
+     */
+    projection?: () => GeoProjection;
+    fitGeojson?: GeoPermissibleObjects;
+    /**
+     * By default, the map fills to fit the $width and $height. If instead you want a
+     * fixed-aspect ratio, like for a server-side rendered map, set that here.
+     */
+    fixedAspectRatio?: number;
+    clipAngle?: number;
+    clipExtent?: [[number, number], [number, number]];
+    rotate?: {
+        /** Lambda (Center Meridian) */
+        yaw: number;
+        /** Phi */
+        pitch: number;
+        /** Gamma */
+        roll: number;
     };
+    scale?: number;
+    translate?: [number, number];
+    center?: [number, number];
+    /**
+     * Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are
+     * mutually selected
+     */
+    applyTransform?: ('scale' | 'translate' | 'rotate')[];
+    reflectX?: boolean;
+    reflectY?: boolean;
+    /**
+     * Exposed to allow binding in Chart
+     *
+     * @bindable
+     */
+    geoContext?: GeoContextValue;
+    children: Snippet<[{
+        geoContext: GeoContextValue;
+    }]>;
 };
-export type GeoContextProps = typeof __propDef.props;
-export type GeoContextEvents = typeof __propDef.events;
-export type GeoContextSlots = typeof __propDef.slots;
-export default class GeoContext extends SvelteComponentTyped<GeoContextProps, GeoContextEvents, GeoContextSlots> {
-}
-export {};
+declare const GeoContext: import("svelte").Component<GeoContextProps, {}, "geoContext">;
+type GeoContext = ReturnType<typeof GeoContext>;
+export default GeoContext;

package/dist/components/GeoEdgeFade.svelte

@@ -1,25 +1,61 @@
+<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] };
+    /**
+     * A bindable reference to the underlying `<g>` element.
+     * @bindable
+     */
+    ref?: SVGGElement;
+
+    children?: Snippet;
+  };
+
+  export type GeoEdgeFadeProps = GeoEdgeFadePropsWithoutHTML &
+    Without<GroupProps, GeoEdgeFadePropsWithoutHTML>;
+</script>
+
 <script lang="ts">
   import { scaleLinear } from 'd3-scale';
   import { geoDistance } from 'd3-geo';
 
-  import { geoContext } from './GeoContext.svelte';
+  import { getGeoContext } from './GeoContext.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
+  import { extractLayerProps } from '../utils/attributes.js';
+
+  let {
+    link,
+    ref: refProp = $bindable(),
+    children,
+    opacity: opacityProp,
+    ...restProps
+  }: GeoEdgeFadeProps = $props();
+
+  let ref = $state<SVGGElement>();
 
-  export let link: { source: [number, number]; target: [number, number] };
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
-  const geo = geoContext();
+  const geoCtx = getGeoContext();
 
   const fade = scaleLinear().domain([-0.1, 0]).range([0, 0.1]);
   const clamper = scaleLinear().domain([0, 1]).range([0, 1]).clamp(true);
 
-  $: center = $geo.invert?.($geo.translate()) ?? ([0, 0] as [number, number]);
-  $: source = link.source;
-  $: target = link.target;
-  $: startDistance = 1.57 - geoDistance(source, center);
-  $: endDistance = 1.57 - geoDistance(target, center);
-  $: distance = startDistance < endDistance ? startDistance : endDistance;
-  $: opacity = clamper(fade(distance));
+  const center = $derived(
+    geoCtx.projection?.invert?.(geoCtx.projection?.translate()) ?? ([0, 0] as [number, number])
+  );
+  const source = $derived(link.source);
+  const target = $derived(link.target);
+  const startDistance = $derived(1.57 - geoDistance(source, center));
+  const endDistance = $derived(1.57 - geoDistance(target, center));
+  const distance = $derived(startDistance < endDistance ? startDistance : endDistance);
+  const opacity = $derived(opacityProp ?? clamper(fade(distance)));
 </script>
 
-<g {opacity}>
-  <slot />
-</g>
+<Group {opacity} bind:ref {...extractLayerProps(restProps, 'geo-edge-fade')}>
+  {@render children?.()}
+</Group>

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

@@ -1,21 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        link: {
-            source: [number, number];
-            target: [number, number];
-        };
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
+import type { Snippet } from 'svelte';
+import type { Without } from '../utils/types.js';
+export type GeoEdgeFadePropsWithoutHTML = {
+    link: {
+        source: [number, number];
+        target: [number, number];
     };
+    /**
+     * A bindable reference to the underlying `<g>` element.
+     * @bindable
+     */
+    ref?: SVGGElement;
+    children?: Snippet;
 };
-export type GeoEdgeFadeProps = typeof __propDef.props;
-export type GeoEdgeFadeEvents = typeof __propDef.events;
-export type GeoEdgeFadeSlots = typeof __propDef.slots;
-export default class GeoEdgeFade extends SvelteComponentTyped<GeoEdgeFadeProps, GeoEdgeFadeEvents, GeoEdgeFadeSlots> {
-}
-export {};
+export type GeoEdgeFadeProps = GeoEdgeFadePropsWithoutHTML & Without<GroupProps, GeoEdgeFadePropsWithoutHTML>;
+import { type GroupProps } from './Group.svelte';
+declare const GeoEdgeFade: import("svelte").Component<GeoEdgeFadeProps, {}, "ref">;
+type GeoEdgeFade = ReturnType<typeof GeoEdgeFade>;
+export default GeoEdgeFade;