layerchart 0.54.0 → 0.55.0

package/dist/components/ForceSimulation.svelte

@@ -1,206 +1,275 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { forceSimulation } from 'd3-force';
-import { chartContext } from './ChartContext.svelte';
-const { data } = chartContext();
-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;
-/** Stop simulation */
-export let stopped = false;
-let _static = false;
-/** If true, will only update nodes after simulation has completed */
-export { _static as static };
-/** 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
-$: {
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  import { forceSimulation, type Force } from 'd3-force';
+  import { chartContext } from './ChartContext.svelte';
+
+  const { data } = chartContext();
+
+  const dispatch = createEventDispatcher<{
+    start: null;
+    tick: { alpha: number; alphaTarget: number };
+    change: null;
+    end: null;
+  }>();
+
+  // MARK: Public Props
+
+  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 };
+
+  /** Clone data since simulation mutates original */
+  export const cloneData: boolean = false;
+
+  // MARK: Private Props
+
+  let nodes: any[] = [];
+
+  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: Forces = {};
+
+  let paused: boolean = true;
+
+  // MARK: Reactivity Effects
+
+  $: {
     // Any time the `stopped` prop gets toggled we
     // update the running state of the simulation:
+
     if (stopped) {
-        pauseDynamicSimulation();
-    }
-    else {
-        runOrResumeSimulation();
+      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);
+      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);
+    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()) {
-        runOrResumeSimulation();
+      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;
+      // 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(alphaValue)
-        .alphaTarget(alphaTarget)
-        .alphaMin(alphaMin)
-        .alphaDecay(alphaDecay)
-        .velocityDecay(velocityDecay);
+      .alpha(alphaValue)
+      .alphaTarget(alphaTarget)
+      .alphaMin(alphaMin)
+      .alphaDecay(alphaDecay)
+      .velocityDecay(velocityDecay);
+
     runOrResumeSimulation();
-}
-// MARK: Push State
-function pushAlphaToSimulation(alpha) {
+  }
+
+  // MARK: Push State
+
+  function pushAlphaToSimulation(alpha: number) {
     simulation.alpha(alpha);
-}
-function pushNodesToSimulation(nodes) {
+  }
+
+  function pushNodesToSimulation(nodes: any[]) {
     simulation.nodes(cloneData ? structuredClone(nodes) : nodes);
-}
-function pushForcesToSimulation(forces) {
+  }
+
+  function pushForcesToSimulation(forces: Forces) {
     // Evict obsolete forces:
     Object.keys(previousForces).forEach((name) => {
-        if (!(name in forces)) {
-            simulation.force(name, null);
-        }
+      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);
-        }
+      if (!(name in previousForces) || force !== previousForces[name]) {
+        simulation.force(name, force);
+      }
     });
+
     previousForces = forces;
-}
-// MARK: Pull State
-function pullNodesFromSimulation() {
+  }
+
+  // MARK: Pull State
+
+  function pullNodesFromSimulation() {
     nodes = simulation.nodes();
-}
-function pullAlphaFromSimulation() {
+  }
+
+  function pullAlphaFromSimulation() {
     alpha = simulation.alpha();
-}
-// MARK: Resume / Pause
-function runOrResumeSimulation() {
+  }
+
+  // MARK: Resume / Pause
+
+  function runOrResumeSimulation() {
     if (_static) {
-        runStaticSimulationToCompletion();
+      runStaticSimulationToCompletion();
+    } else {
+      resumeDynamicSimulation();
     }
-    else {
-        resumeDynamicSimulation();
-    }
-}
-function runStaticSimulationToCompletion() {
+  }
+
+  function runStaticSimulationToCompletion() {
     if (stopped) {
-        // If a simulation is marked as stopped, then it should not get started.
-        return;
+      // If a simulation is marked as stopped, then it should not get started.
+      return;
     }
+
     if (!_static) {
-        // Only static simulations are run to completion.
-        return;
+      // Only static simulations are run to completion.
+      return;
     }
+
     if (!paused) {
-        // Pause any possibly still running dynamic simulation:
-        pauseDynamicSimulation();
+      // Pause any possibly still running dynamic simulation:
+      pauseDynamicSimulation();
     }
-    const ticks = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
+
+    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();
+      simulation.tick();
     }
+
     pullNodesFromSimulation();
     pullAlphaFromSimulation();
+
     onEnd();
-}
-function resumeDynamicSimulation() {
+  }
+
+  function resumeDynamicSimulation() {
     if (!paused) {
-        // No need to restart an already running simulation.
-        return;
+      // 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 a simulation is marked as stopped, then it should not get resumed.
+      return;
     }
+
     if (_static) {
-        // Only dynamic simulations can be resumed.
-        return;
+      // 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() {
+  }
+
+  function pauseDynamicSimulation() {
     if (paused) {
-        // No need to pause an already paused simulation.
-        return;
+      // No need to pause an already paused simulation.
+      return;
     }
+
     simulation.stop();
     onEnd();
-}
-// MARK: Event Listeners
-function onStart() {
+  }
+
+  // MARK: Event Listeners
+
+  function onStart() {
     if (!paused) {
-        // Avoid double-emissions of `start` event due to race conditions.
-        return;
+      // Avoid double-emissions of `start` event due to race conditions.
+      return;
     }
+
     paused = false;
     dispatch('start');
-}
-function onTick() {
+  }
+
+  function onTick() {
     pullNodesFromSimulation();
     pullAlphaFromSimulation();
+
     dispatch('tick', {
-        alpha,
-        alphaTarget,
+      alpha,
+      alphaTarget,
     });
-}
-function onEnd() {
+  }
+
+  function onEnd() {
     if (paused) {
-        // Avoid double-emissions of `end` event due to race conditions.
-        return;
+      // Avoid double-emissions of `end` event due to race conditions.
+      return;
     }
+
     paused = true;
     dispatch('end');
-}
+  }
 </script>
 
 <slot {nodes} {simulation} />

package/dist/components/Frame.svelte

@@ -1,9 +1,13 @@
-<script>import { chartContext } from './ChartContext.svelte';
-const { width, height, padding } = chartContext();
-/** Include padding area */
-export let full = false;
-/** Access underlying `<rect>` element */
-export let rectEl = undefined;
+<script lang="ts">
+  import { chartContext } from './ChartContext.svelte';
+
+  const { width, height, padding } = chartContext();
+
+  /** Include padding area */
+  export let full = false;
+
+  /** Access underlying `<rect>` element */
+  export let rectEl: SVGRectElement | undefined = undefined;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

package/dist/components/GeoCircle.svelte

@@ -1,12 +1,18 @@
-<script>import { geoCircle } from 'd3-geo';
-import GeoPath from './GeoPath.svelte';
-/** Radius in degrees.  Default: 90 */
-export let radius = 90;
-/** Center point of circle in degree ([longitude, latitude]).  Default [0, 0] */
-export let center = [0, 0];
-/** sets the circle precision to the specified angle in degrees */
-export let precision = 6;
-$: geojson = geoCircle().radius(radius).center(center).precision(precision)();
+<script lang="ts">
+  import { geoCircle } from 'd3-geo';
+
+  import GeoPath from './GeoPath.svelte';
+
+  /** Radius in degrees.  Default: 90 */
+  export let radius = 90;
+
+  /** Center point of circle in degree ([longitude, latitude]).  Default [0, 0] */
+  export let center: [number, number] = [0, 0];
+
+  /** sets the circle precision to the specified angle in degrees */
+  export let precision = 6;
+
+  $: geojson = geoCircle().radius(radius).center(center).precision(precision)();
 </script>
 
 <GeoPath {geojson} {...$$restProps} on:pointermove on:pointerleave on:click />

package/dist/components/GeoContext.svelte

@@ -1,88 +1,135 @@
-<script context="module">import { getContext, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import {} from 'd3-geo';
-import { chartContext } from './ChartContext.svelte';
-import { transformContext } from './TransformContext.svelte';
-export const geoContextKey = Symbol();
-export function geoContext() {
-    return getContext(geoContextKey);
-}
-function setGeoContext(geo) {
+<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);
+  }
+
+  function setGeoContext(geo: GeoContext) {
     setContext(geoContextKey, geo);
-}
+  }
 </script>
 
-<script>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 = undefined;
-export let fitGeojson = 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 = undefined;
-export let clipAngle = undefined;
-export let clipExtent = undefined;
-export let rotate = undefined;
-export let scale = undefined;
-export let translate = undefined;
-export let center = undefined;
-/** Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are mutually selected  */
-export let applyTransform = [];
-export let reflectX = undefined;
-export let reflectY = 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]);
-$: if (projection) {
+<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();
+
     if (fitGeojson && 'fitSize' in _projection) {
-        _projection.fitSize(fitSizeRange, fitGeojson);
+      _projection.fitSize(fitSizeRange, fitGeojson);
     }
+
     if ('scale' in _projection) {
-        if (scale) {
-            _projection.scale(scale);
-        }
-        if (applyTransform.includes('scale')) {
-            _projection.scale($transformScale);
-        }
+      if (scale) {
+        _projection.scale(scale);
+      }
+
+      if (applyTransform.includes('scale')) {
+        _projection.scale($transformScale);
+      }
     }
+
     if ('rotate' in _projection) {
-        if (rotate) {
-            _projection.rotate([rotate.yaw, rotate.pitch, rotate.roll]);
-        }
-        if (applyTransform.includes('rotate')) {
-            _projection.rotate([
-                $transformTranslate.x, // yaw
-                $transformTranslate.y, // pitch
-                // TODO: `roll` from `transformContext`?
-            ]);
-        }
+      if (rotate) {
+        _projection.rotate([rotate.yaw, rotate.pitch, rotate.roll]);
+      }
+
+      if (applyTransform.includes('rotate')) {
+        _projection.rotate([
+          $transformTranslate.x, // yaw
+          $transformTranslate.y, // pitch
+          // TODO: `roll` from `transformContext`?
+        ]);
+      }
     }
+
     if ('translate' in _projection) {
-        if (translate) {
-            _projection.translate(translate);
-        }
-        if (applyTransform.includes('translate')) {
-            _projection.translate([$transformTranslate.x, $transformTranslate.y]);
-        }
+      if (translate) {
+        _projection.translate(translate);
+      }
+
+      if (applyTransform.includes('translate')) {
+        _projection.translate([$transformTranslate.x, $transformTranslate.y]);
+      }
     }
+
     if (center && 'center' in _projection) {
-        _projection.center(center);
+      _projection.center(center);
     }
+
     if (reflectX) {
-        _projection.reflectX(reflectX);
+      _projection.reflectX(reflectX);
     }
+
     if (reflectY) {
-        _projection.reflectY(reflectY);
+      _projection.reflectY(reflectY);
     }
+
     if (clipAngle && 'clipAngle' in _projection) {
-        _projection.clipAngle(clipAngle);
+      _projection.clipAngle(clipAngle);
     }
+
     if (clipExtent && 'clipExtent' in _projection) {
-        _projection.clipExtent(clipExtent);
+      _projection.clipExtent(clipExtent);
     }
+
     geo.set(_projection);
-}
+  }
 </script>
 
 <slot projection={$geo} />