diff --git a/.changeset/proud-llamas-fold.md b/.changeset/proud-llamas-fold.md new file mode 100644 index 000000000..567e9e834 --- /dev/null +++ b/.changeset/proud-llamas-fold.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +feat(ForceSimulation): Refined `onstart`/`ontick`/`onend` events of `ForceSimulation` diff --git a/packages/layerchart/src/lib/components/ForceSimulation.svelte b/packages/layerchart/src/lib/components/ForceSimulation.svelte index 1787ef4d0..94f4fa495 100644 --- a/packages/layerchart/src/lib/components/ForceSimulation.svelte +++ b/packages/layerchart/src/lib/components/ForceSimulation.svelte @@ -18,12 +18,41 @@ links?: TLink[]; }; - export type LinkPosition = Prettify<{ + export type LinkPosition = { x1: number; y1: number; x2: number; y2: number; - }>; + }; + + export type OnStartEvent< + NodeDatum extends SimulationNodeDatum, + LinkDatum extends SimulationLinkDatum | undefined, + > = { + alpha: number; + alphaTarget: number; + simulation: SimulationFor; + }; + + export type OnTickEvent< + NodeDatum extends SimulationNodeDatum, + LinkDatum extends SimulationLinkDatum | undefined, + > = { + alpha: number; + alphaTarget: number; + nodes: NodeDatumFor[]; + links: LinkDatumFor[]; + simulation: SimulationFor; + }; + + export type OnEndEvent< + NodeDatum extends SimulationNodeDatum, + LinkDatum extends SimulationLinkDatum | undefined, + > = { + alpha: number; + alphaTarget: number; + simulation: SimulationFor; + }; /** * Default initial alpha value of the simulation. @@ -52,11 +81,10 @@ */ export const DEFAULT_VELOCITY_DECAY: number = 0.4; - type NodeDatumFor = Prettify; + type NodeDatumFor = NodeDatum & SimulationNodeDatum; - type LinkDatumFor = Prettify< - LinkDatum & SimulationLinkDatum> - >; + type LinkDatumFor = LinkDatum & + SimulationLinkDatum>; type SimulationFor = Simulation< NodeDatumFor, @@ -129,17 +157,17 @@ /** * Callback function triggered when simulation starts */ - onStart?: () => void; + onStart?: (e: OnStartEvent) => void; /** * Callback function triggered on each simulation tick */ - onTick?: (e: { alpha: number; alphaTarget: number }) => void; + onTick?: (e: OnTickEvent) => void; /** * Callback function triggered when simulation ends */ - onEnd?: () => void; + onEnd?: (e: OnEndEvent) => void; children?: Snippet< [ @@ -160,7 +188,6 @@ LinkDatum extends SimulationLinkDatum | undefined," > import { watch } from 'runed'; - import type { Prettify } from '@layerstack/utils'; let { forces, @@ -172,9 +199,9 @@ velocityDecay = DEFAULT_VELOCITY_DECAY, stopped = false, static: staticProp, - onStart: onStartProp = () => {}, - onTick: onTickProp = () => {}, - onEnd: onEndProp = () => {}, + onStart: onStartProp, + onTick: onTickProp, + onEnd: onEndProp, children, cloneNodes = false, }: ForceSimulationProps = $props(); @@ -431,7 +458,12 @@ } paused = false; - onStartProp(); + + onStartProp?.({ + alpha, + alphaTarget, + simulation, + }); } function onTick() { @@ -439,7 +471,13 @@ pullAlphaFromSimulation(); updateLinkPositions(); - onTickProp({ alpha, alphaTarget }); + onTickProp?.({ + alpha, + alphaTarget, + nodes: simulatedNodes, + links: simulatedLinks, + simulation, + }); } function onEnd() { @@ -449,7 +487,12 @@ } paused = true; - onEndProp(); + + onEndProp?.({ + alpha, + alphaTarget, + simulation, + }); } $effect(() => {