Decouple ForceSimulation from ChartContext, by taking nodes and links via data prop (#526)

* Decouple `ForceSimulation` from `ChartContext`, by taking nodes and links via `data` prop

* Update "Force" examples

* Add changeset

* Remove unneeded Chart data

* Further simplify

---------

Co-authored-by: Sean Lynch <techniq35@gmail.com>

Author: regexident

.changeset/dark-pandas-start.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+Decoupled `ForceSimulation` from `ChartContext`, by taking nodes and links via `data` prop.

packages/layerchart/src/lib/components/ForceSimulation.svelte

@@ -4,6 +4,11 @@
 
   type Forces = Record<string, Force<any, any>>;
 
+  export type Data<TNode = any, TLink = any> = {
+    nodes: TNode[];
+    links?: TLink[];
+  };
+
   export type LinkPosition = {
     x1: number;
     y1: number;
@@ -18,9 +23,10 @@
     forces: Forces;
 
     /**
-     * An array of links to be used for position calculation.
+     * An object with arrays of nodes and links,
+     * to be used for position calculation.
      */
-    links?: any[];
+    data: Data;
 
     /**
      * Current alpha value of the simulation
@@ -98,12 +104,11 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext } from './Chart.svelte';
   import { watch } from 'runed';
 
   let {
     forces,
-    links = [],
+    data,
     alpha = $bindable(1),
     alphaTarget = 0,
     alphaDecay = 1 - Math.pow(0.001, 1 / 300),
@@ -118,13 +123,11 @@
     cloneNodes = false,
   }: ForceSimulationProps = $props();
 
-  const ctx = getChartContext();
-
   // MARK: Public Props
 
   // MARK: Private Props
 
-  let nodes: SimulationNodeDatum[] = $state([]);
+  let simulatedNodes: SimulationNodeDatum[] = $state([]);
   let linkPositions: LinkPosition[] = $state([]);
 
   const simulation = forceSimulation().stop();
@@ -166,11 +169,11 @@
   );
 
   watch.pre(
-    () => ctx.data,
+    () => data,
     () => {
-      // Any time the `data` store gets changed we
-      // pass them to the internal d3 simulation object:
-      pushNodesToSimulation(ctx.data as any[]);
+      // Any time the `nodes` prop, or the `data` store gets changed
+      // we pass them to the internal d3 simulation object:
+      pushNodesToSimulation(data.nodes);
       runOrResumeSimulation();
     }
   );
@@ -256,6 +259,8 @@
   }
 
   function updateLinkPositions() {
+    const links = data.links ?? [];
+
     // 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
@@ -270,7 +275,7 @@
   // MARK: Pull State
 
   function pullNodesFromSimulation() {
-    nodes = cloneNodes ? structuredClone(simulation.nodes()) : simulation.nodes();
+    simulatedNodes = cloneNodes ? structuredClone(simulation.nodes()) : simulation.nodes();
   }
 
   function pullAlphaFromSimulation() {
@@ -393,4 +398,4 @@
   });
 </script>
 
-{@render children?.({ nodes: nodes, simulation, linkPositions })}
+{@render children?.({ nodes: simulatedNodes, simulation, linkPositions })}

packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte

@@ -8,6 +8,8 @@
 
   let { data } = $props();
 
+  const nodes = data.usSenators;
+
   const genderColor = scaleOrdinal(['var(--color-info)', 'var(--color-warning)']);
 
   const xForce = forceX().strength(0.95);
@@ -35,6 +37,7 @@
               y: yForce.y(context.height / 2),
               collide: collideForce.radius(r),
             }}
+            data={{ nodes }}
             static
           >
             {#snippet children({ nodes })}

packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte

@@ -30,7 +30,7 @@
 
 <Preview data={randomData}>
   <div class="h-[600px] p-4 border rounded-sm overflow-hidden">
-    <Chart data={randomData}>
+    <Chart>
       {#snippet children({ context })}
         <Svg>
           <ForceSimulation
@@ -40,6 +40,7 @@
               collide: collideForce,
               charge: manyBodyForce.strength((d, i) => (i ? 0 : (-context.width * 2) / 3)),
             }}
+            data={{ nodes: randomData }}
             alphaTarget={0.3}
             velocityDecay={0.1}
           >

packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte

@@ -10,8 +10,8 @@
 
   let { data } = $props();
 
-  const nodes = $derived(data.miserables.nodes);
-  const links = $derived(data.miserables.links);
+  const nodes = data.miserables.nodes;
+  const links = data.miserables.links;
 
   const colorScale = scaleOrdinal(schemeCategory10);
 
@@ -30,7 +30,7 @@
 
 <Preview data={data.miserables}>
   <div class="h-[680px] p-4 border rounded-sm">
-    <Chart data={nodes}>
+    <Chart>
       <Svg center>
         <ForceSimulation
           forces={{
@@ -39,7 +39,7 @@
             x: xForce,
             y: yForce,
           }}
-          {links}
+          data={{ nodes, links }}
         >
           {#snippet children({ nodes, linkPositions })}
             {#each links as link, i (link.value + link.index)}

packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte

@@ -51,7 +51,7 @@
 
 <Preview data={nodes}>
   <div class="h-[600px] p-4 border rounded-sm overflow-hidden">
-    <Chart data={nodes}>
+    <Chart>
       {#snippet children({ context })}
         <Svg>
           <ForceSimulation
@@ -60,7 +60,7 @@
               charge: chargeForce,
               center: centerForce.x(context.width / 2).y(context.height / 2),
             }}
-            {links}
+            data={{ nodes, links }}
           >
             {#snippet children({ nodes, simulation, linkPositions })}
               {#each links as link, i}

packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte

@@ -11,8 +11,8 @@
 
   let { data } = $props();
 
-  const nodes = $derived(data.miserables.nodes);
-  const links = $derived(data.miserables.links);
+  const nodes = data.miserables.nodes;
+  const links = data.miserables.links;
 
   const colorScale = scaleOrdinal(schemeCategory10);
 
@@ -250,7 +250,7 @@
 </div>
 <Preview data={data.miserables}>
   <div class="h-[600px] p-4 border rounded-sm overflow-hidden">
-    <Chart data={nodes}>
+    <Chart>
       {#snippet children({ context })}
         <Svg>
           <ForceSimulation
@@ -269,7 +269,7 @@
             onStart={handleStart}
             onTick={handleTick}
             onEnd={handleEnd}
-            {links}
+            data={{ nodes, links }}
           >
             {#snippet children({ nodes, linkPositions })}
               {#each links as link, i}

packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte

@@ -64,6 +64,7 @@
               ),
               center: centerForce.x(context.width / 2).y(context.height / 2),
             }}
+            data={{ nodes: dots }}
             bind:alpha
           >
             {#snippet children({ nodes })}

packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte

@@ -24,10 +24,10 @@
 
 <Preview data={nodes}>
   <div class="h-[800px] p-4 border rounded-sm overflow-hidden">
-    <Chart data={nodes}>
+    <Chart>
       <Svg center>
         <ForceSimulation
-          {links}
+          data={{ nodes, links }}
           forces={{
             charge: chargeForce,
             link: linkForce,

packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte

@@ -90,13 +90,13 @@
 <Preview {data}>
   <div class="h-[500px] p-4 border rounded-sm overflow-hidden">
     <Chart
+      {data}
       x="x"
       xDomain={[0, 1]}
       xRange={[0, 1]}
       y="y"
       yDomain={[0, 1]}
       yRange={[0, 1]}
-      {data}
       {onResize}
     >
       {#snippet children({ context })}
@@ -111,6 +111,7 @@
               charge: manyBodyForce.strength((d, i) => (i ? 0 : (-context.width * 2) / 10)),
             }),
           }}
+          data={{ nodes: data }}
           alphaTarget={1}
           velocityDecay={0.2}
         >