layerchart 0.41.6 → 0.42.0

package/dist/components/Chart.svelte

@@ -115,7 +115,7 @@ onMount(() => {
 >
   <!-- Apply `fitGeojson` using TransformContext instead of GeoContext if `applyTransform` is used -->
   {@const initialTransform =
-    geo?.applyTransform && geo?.fitGeojson && geo?.projection
+    geo?.applyTransform?.includes('translate') && geo?.fitGeojson && geo?.projection
       ? geoFitObjectTransform(geo.projection(), [width, height], geo.fitGeojson)
       : undefined}
 

package/dist/components/ForceSimulation.svelte

@@ -1,49 +1,205 @@
-<script>import { getContext } from 'svelte';
+<script>import { createEventDispatcher, getContext } from 'svelte';
 import { forceSimulation } from 'd3-force';
 const { data } = getContext('LayerCake');
+const dispatch = createEventDispatcher();
 export let forces;
 export let alpha = 1;
 export let alphaTarget = 0;
 export let alphaDecay = 1 - Math.pow(0.001, 1 / 300);
 export let alphaMin = 0.001;
 export let velocityDecay = 0.4;
-/** Clone data since simulation mutates original */
-export let cloneData = false;
+export let alphaResponse = undefined;
+export let stopped = false;
 let _static = false;
 /** If true, will only update nodes after simulation has completed */
 export { _static as static };
-let simulation = forceSimulation(cloneData ? structuredClone($data) : $data);
+/** Clone data since simulation mutates original */
+export const cloneData = false;
+// MARK: Private Props
+let nodes = [];
+const simulation = forceSimulation().stop();
+// d3.Simulation does not provide a `.forces()` getter, so we need to
+// keep track of previous forces ourselves, for diffing against `forces`.
+let previousForces = {};
+let paused = true;
+// MARK: Reactivity Effects
+$: {
+    // Any time the `stopped` prop gets toggled we
+    // update the running state of the simulation:
+    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);
+    }
+    runOrResumeSimulation();
+}
+$: {
+    // Any time the `$data` store gets changed we
+    // pass them to the internal d3 simulation object:
+    pushNodesToSimulation($data);
+    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()) {
+        runOrResumeSimulation();
+    }
+}
+$: {
+    // 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!):
+    // We read `simulation.alpha()` instead of `alpha` here, so
+    // Svelte does not trigger this block on any change to `alpha`:
+    let alphaValue = simulation.alpha();
+    if (alphaTarget > alphaValue && alphaValue < alphaMin) {
+        // Lift `alpha` from below `alphaMin` in order to give the simulation
+        // a chance to get revived if an `alphaTarget > alpha` is provided:
+        alphaValue = alphaMin;
+    }
     simulation
-        .alpha(alpha)
+        .alpha(alphaValue)
         .alphaTarget(alphaTarget)
         .alphaMin(alphaMin)
         .alphaDecay(alphaDecay)
-        .velocityDecay(velocityDecay)
-        .restart();
-    if (_static) {
-        // TODO: Not sure why it needs to be recreated when static
-        simulation = forceSimulation(cloneData ? structuredClone($data) : $data);
-        simulation.stop();
-        Object.entries(forces).forEach(([name, force]) => {
+        .velocityDecay(velocityDecay);
+    runOrResumeSimulation();
+}
+// MARK: Push State
+function pushAlphaToSimulation(alpha) {
+    simulation.alpha(alpha);
+}
+function pushNodesToSimulation(nodes) {
+    simulation.nodes(cloneData ? structuredClone(nodes) : nodes);
+}
+function pushForcesToSimulation(forces) {
+    // Evict obsolete forces:
+    Object.keys(previousForces).forEach((name) => {
+        if (!(name in forces)) {
+            simulation.force(name, null);
+        }
+    });
+    // Add new or overwrite existing forces:
+    Object.entries(forces).forEach(([name, force]) => {
+        if (!(name in previousForces) || force !== previousForces[name]) {
             simulation.force(name, force);
-        });
-        for (let i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
-            simulation.tick();
         }
-        nodes = simulation.nodes();
+    });
+    previousForces = forces;
+}
+// MARK: Pull State
+function pullNodesFromSimulation() {
+    nodes = simulation.nodes();
+}
+function pullAlphaFromSimulation() {
+    alpha = simulation.alpha();
+}
+// MARK: Resume / Pause
+function runOrResumeSimulation() {
+    if (_static) {
+        runStaticSimulationToCompletion();
     }
     else {
-        // When variables change, set forces and restart the simulation
-        Object.entries(forces).forEach(([name, force]) => {
-            simulation.force(name, force);
-        });
+        resumeDynamicSimulation();
     }
 }
-let nodes = [];
-simulation.on('tick', () => {
-    nodes = simulation.nodes();
-});
+function runStaticSimulationToCompletion() {
+    if (stopped) {
+        // If a simulation is marked as stopped, then it should not get started.
+        return;
+    }
+    if (!_static) {
+        // Only static simulations are run to completion.
+        return;
+    }
+    if (!paused) {
+        // Pause any possibly still running dynamic simulation:
+        pauseDynamicSimulation();
+    }
+    const ticks = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
+    pushAlphaToSimulation(1.0);
+    onStart();
+    for (let i = 0; i < ticks; ++i) {
+        simulation.tick();
+    }
+    pullNodesFromSimulation();
+    pullAlphaFromSimulation();
+    onEnd();
+}
+function resumeDynamicSimulation() {
+    if (!paused) {
+        // No need to restart an already running simulation.
+        return;
+    }
+    if (stopped) {
+        // If a simulation is marked as stopped, then it should not get resumed.
+        return;
+    }
+    if (_static) {
+        // Only dynamic simulations can be resumed.
+        return;
+    }
+    onStart();
+    simulation.restart();
+    // No need to call `onEnd();` for dynamic simulations
+    // as the simulation itself takes care of firing `on:end`,
+    // which then gets calls `onEnd();` for us.
+}
+function pauseDynamicSimulation() {
+    if (paused) {
+        // No need to pause an already paused simulation.
+        return;
+    }
+    simulation.stop();
+    onEnd();
+}
+// MARK: Event Listeners
+function onStart() {
+    if (!paused) {
+        // Avoid double-emissions of `start` event due to race conditions.
+        return;
+    }
+    paused = false;
+    dispatch('start');
+}
+function onTick() {
+    pullNodesFromSimulation();
+    pullAlphaFromSimulation();
+    dispatch('tick', {
+        alpha,
+        alphaTarget,
+    });
+}
+function onEnd() {
+    if (paused) {
+        // Avoid double-emissions of `end` event due to race conditions.
+        return;
+    }
+    paused = true;
+    dispatch('end');
+}
 </script>
 
 <slot {nodes} {simulation} />

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

@@ -8,10 +8,20 @@ declare const __propDef: {
         alphaDecay?: number;
         alphaMin?: number;
         velocityDecay?: number;
-        /** Clone data since simulation mutates original */ cloneData?: boolean;
+        alphaResponse?: ((alpha: number, alphaTarget: number) => number) | undefined;
+        stopped?: boolean;
         /** If true, will only update nodes after simulation has completed */ static?: boolean;
+        /** Clone data since simulation mutates original */ cloneData?: boolean;
     };
     events: {
+        start: CustomEvent<null>;
+        tick: CustomEvent<{
+            alpha: number;
+            alphaTarget: number;
+        }>;
+        change: CustomEvent<null>;
+        end: CustomEvent<null>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
@@ -25,5 +35,6 @@ 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 {};

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.41.6",
+  "version": "0.42.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",
@@ -85,9 +85,9 @@
     "date-fns": "^3.6.0",
     "layercake": "^8.3.0",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.139.6",
+    "posthog-js": "^1.140.1",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.69.1",
+    "svelte-ux": "^0.71.0",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {