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

package/dist/components/ForceSimulation.svelte

@@ -1,39 +1,131 @@
-<script lang="ts">
-  import { forceSimulation, type Force } from 'd3-force';
-  import { chartContext } from './ChartContext.svelte';
-
-  const { data } = chartContext();
-
-  // MARK: Public Props
+<script lang="ts" module>
+  import { forceSimulation, type Force, type Simulation, type SimulationNodeDatum } from 'd3-force';
+  import type { Snippet } from 'svelte';
 
   type Forces = Record<string, Force<any, any>>;
-  export let forces: Forces;
-
-  export let alpha: number = 1;
-  export let alphaTarget: number = 0;
-  export let alphaDecay: number = 1 - Math.pow(0.001, 1 / 300);
-  export let alphaMin: number = 0.001;
-
-  export let velocityDecay = 0.4;
 
-  /** Stop simulation */
-  export let stopped = false;
-
-  let _static = false;
-  /** If true, will only update nodes after simulation has completed */
-  export { _static as static };
+  export type LinkPosition = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+  };
+
+  export type ForceSimulationProps = {
+    /**
+     * Force simulation parameters
+     */
+    forces: Forces;
+
+    /**
+     * An array of links to be used for position calculation.
+     */
+    links?: any[];
+
+    /**
+     * Current alpha value of the simulation
+     * @default 1
+     */
+    alpha?: number;
+
+    /**
+     * Target alpha value for the simulation
+     * @default 0
+     */
+    alphaTarget?: number;
+
+    /**
+     * Alpha decay rate per tick
+     * @default 1 - Math.pow(0.001, 1 / 300)
+     */
+    alphaDecay?: number;
+
+    /**
+     * Minimum alpha value at which simulation stops
+     * @default 0.01
+     */
+    alphaMin?: number;
+
+    /**
+     * Velocity decay factor applied to nodes each tick
+     * @default 0.4
+     */
+    velocityDecay?: number;
+
+    /**
+     * Stop simulation
+     * @default false
+     */
+    stopped?: boolean;
+
+    /**
+     * If true, will only update nodes after simulation has completed
+     * @default false
+     */
+    static?: boolean;
+
+    /**
+     * Clone nodes since simulation mutates original
+     * @default false
+     */
+    cloneNodes?: boolean;
+
+    /**
+     * Callback function triggered when simulation starts
+     */
+    onStart?: () => void;
+
+    /**
+     * Callback function triggered on each simulation tick
+     */
+    onTick?: (e: { alpha: number; alphaTarget: number }) => void;
+
+    /**
+     * Callback function triggered when simulation ends
+     */
+    onEnd?: () => void;
+
+    children?: Snippet<
+      [
+        {
+          nodes: any[];
+          simulation: Simulation<SimulationNodeDatum, undefined>;
+          linkPositions: LinkPosition[];
+        },
+      ]
+    >;
+  };
+</script>
 
-  /** Clone data since simulation mutates original */
-  export const cloneData: boolean = false;
+<script lang="ts">
+  import { getChartContext } from './Chart.svelte';
+  import { watch } from 'runed';
+
+  let {
+    forces,
+    links = [],
+    alpha = $bindable(1),
+    alphaTarget = 0,
+    alphaDecay = 1 - Math.pow(0.001, 1 / 300),
+    alphaMin = 0.001,
+    velocityDecay = 0.4,
+    stopped = false,
+    static: staticProp,
+    onStart: onStartProp = () => {},
+    onTick: onTickProp = () => {},
+    onEnd: onEndProp = () => {},
+    children,
+    cloneNodes = false,
+  }: ForceSimulationProps = $props();
+
+  const ctx = getChartContext();
 
-  export let onstart: (() => void) | undefined = undefined;
-  export let ontick: ((e: { alpha: number; alphaTarget: number }) => void) | undefined = undefined;
-  // export let onchange: | (() => void) | undefined = undefined;
-  export let onend: (() => void) | undefined = undefined;
+  // MARK: Public Props
 
   // MARK: Private Props
 
-  let nodes: any[] = [];
+  let nodes: SimulationNodeDatum[] = $state([]);
+  let linkPositions: LinkPosition[] = $state([]);
 
   const simulation = forceSimulation().stop();
 
@@ -45,57 +137,71 @@
 
   // MARK: Reactivity Effects
 
-  $: {
-    // Any time the `stopped` prop gets toggled we
-    // update the running state of the simulation:
+  watch.pre(
+    () => stopped,
+    () => {
+      // Any time the `stopped` prop gets toggled we
+      // update the running state of the simulation:
+      if (stopped) {
+        pauseDynamicSimulation();
+      } else {
+        runOrResumeSimulation();
+      }
+    }
+  );
+
+  watch.pre(
+    () => staticProp,
+    () => {
+      // Any time the `static` prop gets toggled we
+      // either attach or detach our internal event listeners:
+      if (staticProp) {
+        simulation.on('tick', null).on('end', null);
+      } else {
+        simulation.on('tick', onTick).on('end', onEnd);
+      }
 
-    if (stopped) {
-      pauseDynamicSimulation();
-    } else {
       runOrResumeSimulation();
     }
-  }
-
-  $: {
-    // Any time the `static` prop gets toggled we
-    // either attach or detach our internal event listeners:
-    if (_static) {
-      simulation.on('tick', null).on('end', null);
-    } else {
-      simulation.on('tick', onTick).on('end', onEnd);
+  );
+
+  watch.pre(
+    () => ctx.data,
+    () => {
+      // Any time the `data` store gets changed we
+      // pass them to the internal d3 simulation object:
+      pushNodesToSimulation(ctx.data as any[]);
+      runOrResumeSimulation();
     }
-
-    runOrResumeSimulation();
-  }
-
-  $: {
-    // Any time the `$data` store gets changed we
-    // pass them to the internal d3 simulation object:
-    pushNodesToSimulation($data as any[]);
-    runOrResumeSimulation();
-  }
-
-  $: {
-    // Any time the `forces` prop gets changed we
-    // pass them to the internal d3 simulation object:
-    pushForcesToSimulation(forces);
-    runOrResumeSimulation();
-  }
-
-  $: {
-    // Any time the `alpha` prop gets changed we
-    // pass it to the internal d3 simulation object:
-    pushAlphaToSimulation(alpha);
-
-    // Only resume the simulation as long as `alpha`
-    // is above the cut-off threshold of `alphaMin`,
-    // otherwise our simulation will never terminate:
-    if (simulation.alpha() >= simulation.alphaMin()) {
+  );
+
+  watch.pre(
+    () => forces,
+    () => {
+      // Any time the `forces` prop gets changed we
+      // pass them to the internal d3 simulation object:
+      pushForcesToSimulation(forces);
       runOrResumeSimulation();
     }
-  }
+  );
+
+  watch.pre(
+    () => alpha,
+    () => {
+      // Any time the `alpha` prop gets changed we
+      // pass it to the internal d3 simulation object:
+      pushAlphaToSimulation(alpha);
+
+      // Only resume the simulation as long as `alpha`
+      // is above the cut-off threshold of `alphaMin`,
+      // otherwise our simulation will never terminate:
+      if (simulation.alpha() >= simulation.alphaMin()) {
+        runOrResumeSimulation();
+      }
+    }
+  );
 
-  $: {
+  watch.pre([() => alphaTarget, () => alphaMin, () => alphaDecay, () => velocityDecay], () => {
     // Any time any of the the alpha props get changed we
     // pass them all to the internal d3 simulation object
     // (they are cheap, so passing them as a batch is fine!):
@@ -117,7 +223,7 @@
       .velocityDecay(velocityDecay);
 
     runOrResumeSimulation();
-  }
+  });
 
   // MARK: Push State
 
@@ -126,31 +232,45 @@
   }
 
   function pushNodesToSimulation(nodes: any[]) {
-    simulation.nodes(cloneData ? structuredClone(nodes) : nodes);
+    simulation.nodes(nodes);
   }
 
   function pushForcesToSimulation(forces: Forces) {
     // Evict obsolete forces:
-    Object.keys(previousForces).forEach((name) => {
+    const names = Object.keys(previousForces);
+    for (const name of names) {
       if (!(name in forces)) {
         simulation.force(name, null);
       }
-    });
+    }
+
+    const entries = Object.entries(forces);
 
-    // Add new or overwrite existing forces:
-    Object.entries(forces).forEach(([name, force]) => {
+    for (const [name, force] of entries) {
       if (!(name in previousForces) || force !== previousForces[name]) {
         simulation.force(name, force);
       }
-    });
+    }
 
     previousForces = forces;
   }
 
+  function updateLinkPositions() {
+    // Keeping the link positions in sync with the simulation
+    // so we don't need to recalculate _all_ link positions on each tick
+    // which bogs down the simulation
+    linkPositions = links.map((link: any) => ({
+      x1: link.source.x ?? 0,
+      y1: link.source.y ?? 0,
+      x2: link.target.x ?? 0,
+      y2: link.target.y ?? 0,
+    }));
+  }
+
   // MARK: Pull State
 
   function pullNodesFromSimulation() {
-    nodes = simulation.nodes();
+    nodes = cloneNodes ? structuredClone(simulation.nodes()) : simulation.nodes();
   }
 
   function pullAlphaFromSimulation() {
@@ -160,7 +280,7 @@
   // MARK: Resume / Pause
 
   function runOrResumeSimulation() {
-    if (_static) {
+    if (staticProp) {
       runStaticSimulationToCompletion();
     } else {
       resumeDynamicSimulation();
@@ -173,7 +293,7 @@
       return;
     }
 
-    if (!_static) {
+    if (!staticProp) {
       // Only static simulations are run to completion.
       return;
     }
@@ -212,7 +332,7 @@
       return;
     }
 
-    if (_static) {
+    if (staticProp) {
       // Only dynamic simulations can be resumed.
       return;
     }
@@ -244,17 +364,15 @@
     }
 
     paused = false;
-    onstart?.();
+    onStartProp();
   }
 
   function onTick() {
     pullNodesFromSimulation();
     pullAlphaFromSimulation();
+    updateLinkPositions();
 
-    ontick?.({
-      alpha,
-      alphaTarget,
-    });
+    onTickProp({ alpha, alphaTarget });
   }
 
   function onEnd() {
@@ -264,8 +382,15 @@
     }
 
     paused = true;
-    onend?.();
+    onEndProp();
   }
+
+  $effect(() => {
+    return () => {
+      simulation.stop();
+      simulation.on('tick', null).on('end', null);
+    };
+  });
 </script>
 
-<slot {nodes} {simulation} />
+{@render children?.({ nodes: nodes, simulation, linkPositions })}

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

@@ -1,37 +1,84 @@
-import { SvelteComponentTyped } from "svelte";
-import { type Force } from 'd3-force';
-declare const __propDef: {
-    props: {
-        forces: Record<string, Force<any, any>>;
-        alpha?: number;
-        alphaTarget?: number;
-        alphaDecay?: number;
-        alphaMin?: number;
-        velocityDecay?: number;
-        /** Stop simulation */ stopped?: boolean;
-        /** If true, will only update nodes after simulation has completed */ static?: boolean;
-        /** Clone data since simulation mutates original */ cloneData?: boolean;
-        onstart?: (() => void) | undefined;
-        ontick?: ((e: {
-            alpha: number;
-            alphaTarget: number;
-        }) => void) | undefined;
-        onend?: (() => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
+import { type Force, type Simulation, type SimulationNodeDatum } from 'd3-force';
+import type { Snippet } from 'svelte';
+type Forces = Record<string, Force<any, any>>;
+export type LinkPosition = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+export type ForceSimulationProps = {
+    /**
+     * Force simulation parameters
+     */
+    forces: Forces;
+    /**
+     * An array of links to be used for position calculation.
+     */
+    links?: any[];
+    /**
+     * Current alpha value of the simulation
+     * @default 1
+     */
+    alpha?: number;
+    /**
+     * Target alpha value for the simulation
+     * @default 0
+     */
+    alphaTarget?: number;
+    /**
+     * Alpha decay rate per tick
+     * @default 1 - Math.pow(0.001, 1 / 300)
+     */
+    alphaDecay?: number;
+    /**
+     * Minimum alpha value at which simulation stops
+     * @default 0.01
+     */
+    alphaMin?: number;
+    /**
+     * Velocity decay factor applied to nodes each tick
+     * @default 0.4
+     */
+    velocityDecay?: number;
+    /**
+     * Stop simulation
+     * @default false
+     */
+    stopped?: boolean;
+    /**
+     * If true, will only update nodes after simulation has completed
+     * @default false
+     */
+    static?: boolean;
+    /**
+     * Clone nodes since simulation mutates original
+     * @default false
+     */
+    cloneNodes?: boolean;
+    /**
+     * Callback function triggered when simulation starts
+     */
+    onStart?: () => void;
+    /**
+     * Callback function triggered on each simulation tick
+     */
+    onTick?: (e: {
+        alpha: number;
+        alphaTarget: number;
+    }) => void;
+    /**
+     * Callback function triggered when simulation ends
+     */
+    onEnd?: () => void;
+    children?: Snippet<[
+        {
             nodes: any[];
-            simulation: import("d3-force").Simulation<import("d3-force").SimulationNodeDatum, undefined>;
-        };
-    };
+            simulation: Simulation<SimulationNodeDatum, undefined>;
+            linkPositions: LinkPosition[];
+        }
+    ]>;
 };
-export type ForceSimulationProps = typeof __propDef.props;
-export type ForceSimulationEvents = typeof __propDef.events;
-export type ForceSimulationSlots = typeof __propDef.slots;
-export default class ForceSimulation extends SvelteComponentTyped<ForceSimulationProps, ForceSimulationEvents, ForceSimulationSlots> {
-    get cloneData(): NonNullable<boolean | undefined>;
-}
-export {};
+declare const ForceSimulation: import("svelte").Component<ForceSimulationProps, {}, "alpha">;
+type ForceSimulation = ReturnType<typeof ForceSimulation>;
+export default ForceSimulation;

package/dist/components/Frame.svelte

@@ -1,21 +1,41 @@
+<script lang="ts" module>
+  import type { Without } from '../utils/types.js';
+  import Rect, { type RectProps, type RectPropsWithoutHTML } from './Rect.svelte';
+
+  export type FramePropsWithoutHTML = RectPropsWithoutHTML & {
+    /**
+     * Whether to include padding area
+     *
+     * @default false
+     */
+    full?: boolean;
+  };
+
+  export type FrameProps = Omit<
+    FramePropsWithoutHTML & Without<RectProps, FramePropsWithoutHTML>,
+    'width' | 'height'
+  >;
+</script>
+
 <script lang="ts">
-  import { chartContext } from './ChartContext.svelte';
-  import Rect from './Rect.svelte';
+  import { getChartContext } from './Chart.svelte';
+  import { extractLayerProps } from '../utils/attributes.js';
 
-  const { width, height, padding } = chartContext();
+  let { ref: refProp = $bindable(), full = false, ...restProps }: FrameProps = $props();
 
-  /** Include padding area */
-  export let full = false;
+  let ref = $state<SVGRectElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
-  /** Access underlying `<rect>` element */
-  export let element: SVGRectElement | undefined = undefined;
+  const ctx = getChartContext();
 </script>
 
 <Rect
-  x={full && $padding?.left ? -$padding.left : 0}
-  y={full && $padding?.top ? -$padding.top : 0}
-  width={$width + (full ? ($padding?.left ?? 0) + ($padding?.right ?? 0) : 0)}
-  height={$height + (full ? ($padding?.top ?? 0) + ($padding?.bottom ?? 0) : 0)}
-  bind:element
-  {...$$restProps}
+  x={full && ctx.padding?.left ? -ctx.padding.left : 0}
+  y={full && ctx.padding?.top ? -ctx.padding.top : 0}
+  width={ctx.width + (full ? (ctx.padding?.left ?? 0) + (ctx.padding?.right ?? 0) : 0)}
+  height={ctx.height + (full ? (ctx.padding?.top ?? 0) + (ctx.padding?.bottom ?? 0) : 0)}
+  bind:ref
+  {...extractLayerProps(restProps, 'frame')}
 />

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

@@ -1,18 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        full?: boolean | undefined;
-        element?: SVGRectElement | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { Without } from '../utils/types.js';
+import { type RectProps, type RectPropsWithoutHTML } from './Rect.svelte';
+export type FramePropsWithoutHTML = RectPropsWithoutHTML & {
+    /**
+     * Whether to include padding area
+     *
+     * @default false
+     */
+    full?: boolean;
 };
-export type FrameProps = typeof __propDef.props;
-export type FrameEvents = typeof __propDef.events;
-export type FrameSlots = typeof __propDef.slots;
-export default class Frame extends SvelteComponentTyped<FrameProps, FrameEvents, FrameSlots> {
-}
-export {};
+export type FrameProps = Omit<FramePropsWithoutHTML & Without<RectProps, FramePropsWithoutHTML>, 'width' | 'height'>;
+declare const Frame: import("svelte").Component<FrameProps, {}, "ref">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/components/GeoCircle.svelte

@@ -1,24 +1,37 @@
-<script lang="ts">
-  import { geoCircle } from 'd3-geo';
+<script lang="ts" module>
+  import GeoPath, { 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;
 
-  import GeoPath from './GeoPath.svelte';
-  import type { ComponentProps } from 'svelte';
+    /**
+     * The center point of the circle in degrees ([longitude, latitude]).
+     * @default [0, 0]
+     */
+    center?: [number, number];
 
-  /** Radius in degrees.  Default: 90 */
-  export let radius = 90;
+    /**
+     * The precision of the circle in degrees.
+     * @default 6
+     */
+    precision?: number;
+  };
 
-  /** Center point of circle in degree ([longitude, latitude]).  Default [0, 0] */
-  export let center: [number, number] = [0, 0];
+  export type GeoCircleProps = GeoCirclePropsWithoutHTML &
+    Without<GeoPathProps, GeoCirclePropsWithoutHTML>;
+</script>
 
-  /** sets the circle precision to the specified angle in degrees */
-  export let precision = 6;
+<script lang="ts">
+  import { geoCircle } from 'd3-geo';
+  import { extractLayerProps } from '../utils/attributes.js';
 
-  export let onclick: ComponentProps<typeof GeoPath>['onclick'] = undefined;
-  export let onpointerenter: ComponentProps<typeof GeoPath>['onpointerenter'] = undefined;
-  export let onpointermove: ComponentProps<typeof GeoPath>['onpointermove'] = undefined;
-  export let onpointerleave: ComponentProps<typeof GeoPath>['onpointerleave'] = undefined;
+  let { radius = 90, center = [0, 0], precision = 6, ...restProps }: GeoCircleProps = $props();
 
-  $: geojson = geoCircle().radius(radius).center(center).precision(precision)();
+  const geojson = $derived(geoCircle().radius(radius).center(center).precision(precision)());
 </script>
 
-<GeoPath {geojson} {onclick} {onpointerenter} {onpointermove} {onpointerleave} {...$$restProps} />
+<GeoPath {geojson} {...extractLayerProps(restProps, 'geo-circle')} />