layerchart 2.0.0-next.16 → 2.0.0-next.17

package/dist/components/Arc.svelte

@@ -401,13 +401,13 @@
   <Spline
     pathData={trackArc()}
     stroke="none"
-    bind:splineRef={trackRef}
+    bind:pathRef={trackRef}
     {...extractLayerProps(track, 'arc-track')}
   />
 {/if}
 
 <Spline
-  bind:splineRef={ref}
+  bind:pathRef={ref}
   pathData={arc()}
   transform="translate({xOffset}, {yOffset})"
   {fill}

package/dist/components/Blur.svelte

@@ -14,9 +14,9 @@
 
     /**
      * The default children snippet which provides
-     * the id and url for the filter.
+     * the id for the filter.
      */
-    children?: Snippet<[{ id: string; url: string }]>;
+    children?: Snippet;
   };
 </script>
 
@@ -42,7 +42,9 @@
 
   {#if children}
     <g filter="url(#{id})" class={layerClass('blur-g')}>
-      {@render children({ id, url: `url(#${id})` })}
+      {@render children()}
     </g>
   {/if}
+{:else if children}
+  {@render children()}
 {/if}

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

@@ -11,12 +11,9 @@ export type BlurProps = {
     stdDeviation?: number;
     /**
      * The default children snippet which provides
-     * the id and url for the filter.
+     * the id for the filter.
      */
-    children?: Snippet<[{
-        id: string;
-        url: string;
-    }]>;
+    children?: Snippet;
 };
 import type { Snippet } from 'svelte';
 declare const Blur: import("svelte").Component<BlurProps, {}, "">;

package/dist/components/Connector.svelte

@@ -82,7 +82,7 @@
     type = 'rounded',
     radius = 20,
     curve = curveLinear,
-    splineRef = $bindable(),
+    pathRef = $bindable(),
     pathData: pathDataProp,
     marker,
     markerStart,
@@ -137,7 +137,7 @@
 
 <Spline
   pathData={motionPath.current}
-  bind:splineRef
+  bind:pathRef
   marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
   marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
   marker-end={markerEndId ? `url(#${markerEndId})` : undefined}

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

@@ -46,6 +46,6 @@ import { type CurveFactory } from 'd3-shape';
 import { type ConnectorCoords, type ConnectorSweep, type ConnectorType } from '../utils/connectorUtils.js';
 import { type SplineProps, type SplinePropsWithoutHTML } from './Spline.svelte';
 import type { Without } from '../utils/types.js';
-declare const Connector: import("svelte").Component<ConnectorProps, {}, "splineRef">;
+declare const Connector: import("svelte").Component<ConnectorProps, {}, "pathRef">;
 type Connector = ReturnType<typeof Connector>;
 export default Connector;

package/dist/components/Ellipse.svelte

@@ -0,0 +1,187 @@
+<script lang="ts" module>
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+
+  export type EllipsePropsWithoutHTML = {
+    /**
+     * The center x position of the ellipse.
+     *
+     * @default 0
+     */
+    cx?: number;
+
+    /**
+     * The initial center x position of the ellipse.
+     *
+     * @default cx
+     */
+    initialCx?: number;
+
+    /**
+     * The center y position of the ellipse.
+     *
+     * @default 0
+     */
+    cy?: number;
+
+    /**
+     * The initial center y position of the ellipse.
+     *
+     * @default cy
+     */
+    initialCy?: number;
+
+    /**
+     * The radius of the ellipse on the x-axis.
+     *
+     * @default 1
+     */
+    rx?: number;
+
+    /**
+     * The initial radius of the ellipse on the x-axis.
+     *
+     * @default rx
+     */
+    initialRx?: number;
+
+    /**
+     * The radius of the ellipse on the y-axis.
+     *
+     * @default 1
+     */
+    ry?: number;
+
+    /**
+     * The initial radius of the ellipse on the y-axis.
+     *
+     * @default ry
+     */
+    initialRy?: number;
+
+    /**
+     * A bindable reference to the `<ellipse>` element
+     *
+     * @bindable
+     */
+    ref?: SVGEllipseElement;
+
+    motion?: MotionProp;
+  } & CommonStyleProps;
+
+  export type EllipseProps = EllipsePropsWithoutHTML &
+    Without<SVGAttributes<Element>, EllipsePropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from 'lodash-es';
+
+  import { getRenderContext } from './Chart.svelte';
+  import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { renderEllipse, type ComputedStylesOptions } from '../utils/canvas.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { createKey } from '../utils/key.svelte.js';
+  import { layerClass } from '../utils/attributes.js';
+
+  let {
+    cx = 0,
+    initialCx: initialCxProp,
+    cy = 0,
+    initialCy: initialCyProp,
+    rx = 1,
+    initialRx: initialRxProp,
+    ry = 1,
+    initialRy: initialRyProp,
+    motion,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ref: refProp = $bindable(),
+    ...restProps
+  }: EllipseProps = $props();
+
+  let ref = $state<SVGEllipseElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const initialCx = initialCxProp ?? cx;
+  const initialCy = initialCyProp ?? cy;
+  const initialRx = initialRxProp ?? rx;
+  const initialRy = initialRyProp ?? ry;
+
+  const renderCtx = getRenderContext();
+
+  const motionCx = createMotion(initialCx, () => cx, motion);
+  const motionCy = createMotion(initialCy, () => cy, motion);
+  const motionRx = createMotion(initialRx, () => rx, motion);
+  const motionRy = createMotion(initialRy, () => ry, motion);
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    renderEllipse(
+      ctx,
+      { cx: motionCx.current, cy: motionCy.current, rx: motionRx.current, ry: motionRy.current },
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
+            classes: className,
+          }
+    );
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  const fillKey = createKey(() => fill);
+  const strokeKey = createKey(() => stroke);
+
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
+      name: 'Ellipse',
+      render,
+      events: {
+        click: restProps.onclick,
+        pointerdown: restProps.onpointerdown,
+        pointerenter: restProps.onpointerenter,
+        pointermove: restProps.onpointermove,
+        pointerleave: restProps.onpointerleave,
+      },
+      deps: () => [
+        motionCx.current,
+        motionCy.current,
+        motionRx.current,
+        motionRy.current,
+        fillKey.current,
+        fillOpacity,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        className,
+      ],
+    });
+  }
+</script>
+
+{#if renderCtx === 'svg'}
+  <ellipse
+    bind:this={ref}
+    cx={motionCx.current}
+    cy={motionCy.current}
+    rx={motionRx.current}
+    ry={motionRy.current}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {opacity}
+    class={cls(layerClass('ellipse'), fill == null && 'fill-surface-content', className)}
+    {...restProps}
+  />
+{/if}

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

@@ -0,0 +1,64 @@
+import type { CommonStyleProps, Without } from '../utils/types.js';
+export type EllipsePropsWithoutHTML = {
+    /**
+     * The center x position of the ellipse.
+     *
+     * @default 0
+     */
+    cx?: number;
+    /**
+     * The initial center x position of the ellipse.
+     *
+     * @default cx
+     */
+    initialCx?: number;
+    /**
+     * The center y position of the ellipse.
+     *
+     * @default 0
+     */
+    cy?: number;
+    /**
+     * The initial center y position of the ellipse.
+     *
+     * @default cy
+     */
+    initialCy?: number;
+    /**
+     * The radius of the ellipse on the x-axis.
+     *
+     * @default 1
+     */
+    rx?: number;
+    /**
+     * The initial radius of the ellipse on the x-axis.
+     *
+     * @default rx
+     */
+    initialRx?: number;
+    /**
+     * The radius of the ellipse on the y-axis.
+     *
+     * @default 1
+     */
+    ry?: number;
+    /**
+     * The initial radius of the ellipse on the y-axis.
+     *
+     * @default ry
+     */
+    initialRy?: number;
+    /**
+     * A bindable reference to the `<ellipse>` element
+     *
+     * @bindable
+     */
+    ref?: SVGEllipseElement;
+    motion?: MotionProp;
+} & CommonStyleProps;
+export type EllipseProps = EllipsePropsWithoutHTML & Without<SVGAttributes<Element>, EllipsePropsWithoutHTML>;
+import { type MotionProp } from '../utils/motion.svelte.js';
+import type { SVGAttributes } from 'svelte/elements';
+declare const Ellipse: import("svelte").Component<EllipseProps, {}, "ref">;
+type Ellipse = ReturnType<typeof Ellipse>;
+export default Ellipse;

package/dist/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<NodeDatum> | undefined,
+  > = {
+    alpha: number;
+    alphaTarget: number;
+    simulation: SimulationFor<NodeDatum, LinkDatum>;
+  };
+
+  export type OnTickEvent<
+    NodeDatum extends SimulationNodeDatum,
+    LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined,
+  > = {
+    alpha: number;
+    alphaTarget: number;
+    nodes: NodeDatumFor<NodeDatum>[];
+    links: LinkDatumFor<NodeDatum, LinkDatum>[];
+    simulation: SimulationFor<NodeDatum, LinkDatum>;
+  };
+
+  export type OnEndEvent<
+    NodeDatum extends SimulationNodeDatum,
+    LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined,
+  > = {
+    alpha: number;
+    alphaTarget: number;
+    simulation: SimulationFor<NodeDatum, LinkDatum>;
+  };
 
   /**
    * Default initial alpha value of the simulation.
@@ -52,11 +81,10 @@
    */
   export const DEFAULT_VELOCITY_DECAY: number = 0.4;
 
-  type NodeDatumFor<NodeDatum> = Prettify<NodeDatum & SimulationNodeDatum>;
+  type NodeDatumFor<NodeDatum> = NodeDatum & SimulationNodeDatum;
 
-  type LinkDatumFor<NodeDatum, LinkDatum> = Prettify<
-    LinkDatum & SimulationLinkDatum<NodeDatumFor<NodeDatum>>
-  >;
+  type LinkDatumFor<NodeDatum, LinkDatum> = LinkDatum &
+    SimulationLinkDatum<NodeDatumFor<NodeDatum>>;
 
   type SimulationFor<NodeDatum, LinkDatum> = Simulation<
     NodeDatumFor<NodeDatum>,
@@ -129,17 +157,17 @@
     /**
      * Callback function triggered when simulation starts
      */
-    onStart?: () => void;
+    onStart?: (e: OnStartEvent<NodeDatum, LinkDatum | undefined>) => void;
 
     /**
      * Callback function triggered on each simulation tick
      */
-    onTick?: (e: { alpha: number; alphaTarget: number }) => void;
+    onTick?: (e: OnTickEvent<NodeDatum, LinkDatum | undefined>) => void;
 
     /**
      * Callback function triggered when simulation ends
      */
-    onEnd?: () => void;
+    onEnd?: (e: OnEndEvent<NodeDatum, LinkDatum | undefined>) => void;
 
     children?: Snippet<
       [
@@ -160,7 +188,6 @@
     LinkDatum extends SimulationLinkDatum<NodeDatum> | 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<NodeDatum, LinkDatum> = $props();
@@ -258,12 +285,8 @@
       // 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();
-      }
+      // Then we attempt to resume the simulation:
+      runOrResumeSimulation();
     }
   );
 
@@ -404,6 +427,13 @@
       return;
     }
 
+    if (simulation.alpha() < simulation.alphaMin()) {
+      // Only resume the simulation as long as `alpha`
+      // is above the cut-off threshold of `alphaMin`,
+      // otherwise our simulation will never terminate:
+      return;
+    }
+
     onStart();
     simulation.restart();
 
@@ -431,7 +461,12 @@
     }
 
     paused = false;
-    onStartProp();
+
+    onStartProp?.({
+      alpha,
+      alphaTarget,
+      simulation,
+    });
   }
 
   function onTick() {
@@ -439,7 +474,13 @@
     pullAlphaFromSimulation();
     updateLinkPositions();
 
-    onTickProp({ alpha, alphaTarget });
+    onTickProp?.({
+      alpha,
+      alphaTarget,
+      nodes: simulatedNodes,
+      links: simulatedLinks,
+      simulation,
+    });
   }
 
   function onEnd() {
@@ -449,7 +490,12 @@
     }
 
     paused = true;
-    onEndProp();
+
+    onEndProp?.({
+      alpha,
+      alphaTarget,
+      simulation,
+    });
   }
 
   $effect(() => {

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

@@ -5,12 +5,29 @@ export type Data<TNode = any, TLink = any> = {
     nodes: TNode[];
     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<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    simulation: SimulationFor<NodeDatum, LinkDatum>;
+};
+export type OnTickEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    nodes: NodeDatumFor<NodeDatum>[];
+    links: LinkDatumFor<NodeDatum, LinkDatum>[];
+    simulation: SimulationFor<NodeDatum, LinkDatum>;
+};
+export type OnEndEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    simulation: SimulationFor<NodeDatum, LinkDatum>;
+};
 /**
  * Default initial alpha value of the simulation.
  */
@@ -33,8 +50,8 @@ export declare const DEFAULT_ALPHA_MIN: number;
  * Default velocity decay factor applied to nodes each tick.
  */
 export declare const DEFAULT_VELOCITY_DECAY: number;
-type NodeDatumFor<NodeDatum> = Prettify<NodeDatum & SimulationNodeDatum>;
-type LinkDatumFor<NodeDatum, LinkDatum> = Prettify<LinkDatum & SimulationLinkDatum<NodeDatumFor<NodeDatum>>>;
+type NodeDatumFor<NodeDatum> = NodeDatum & SimulationNodeDatum;
+type LinkDatumFor<NodeDatum, LinkDatum> = LinkDatum & SimulationLinkDatum<NodeDatumFor<NodeDatum>>;
 type SimulationFor<NodeDatum, LinkDatum> = Simulation<NodeDatumFor<NodeDatum>, LinkDatumFor<NodeDatum, LinkDatum>>;
 export type ForceSimulationProps<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
     /**
@@ -89,18 +106,15 @@ export type ForceSimulationProps<NodeDatum extends SimulationNodeDatum, LinkDatu
     /**
      * Callback function triggered when simulation starts
      */
-    onStart?: () => void;
+    onStart?: (e: OnStartEvent<NodeDatum, LinkDatum | undefined>) => void;
     /**
      * Callback function triggered on each simulation tick
      */
-    onTick?: (e: {
-        alpha: number;
-        alphaTarget: number;
-    }) => void;
+    onTick?: (e: OnTickEvent<NodeDatum, LinkDatum | undefined>) => void;
     /**
      * Callback function triggered when simulation ends
      */
-    onEnd?: () => void;
+    onEnd?: (e: OnEndEvent<NodeDatum, LinkDatum | undefined>) => void;
     children?: Snippet<[
         {
             nodes: NodeDatumFor<NodeDatum>[];
@@ -110,7 +124,6 @@ export type ForceSimulationProps<NodeDatum extends SimulationNodeDatum, LinkDatu
         }
     ]>;
 };
-import type { Prettify } from '@layerstack/utils';
 declare class __sveltets_Render<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> {
     props(): ForceSimulationProps<NodeDatum, LinkDatum>;
     events(): {};

package/dist/components/GeoPath.svelte

@@ -157,10 +157,11 @@
       name: 'GeoPath',
       render,
       events: {
-        click: _onClick,
-        pointerenter: _onPointerEnter,
-        pointermove: _onPointerMove,
-        pointerleave: _onPointerLeave,
+        // Only register events if they are defined (so they are not registered with hit canvas unnecessarily)
+        click: onclick ? _onClick : undefined,
+        pointerenter: restProps.onpointerenter || tooltipContext ? _onPointerEnter : undefined,
+        pointermove: restProps.onpointermove || tooltipContext ? _onPointerMove : undefined,
+        pointerleave: restProps.onpointerleave || tooltipContext ? _onPointerLeave : undefined,
         pointerdown: restProps.onpointerdown,
         touchmove: restProps.ontouchmove,
       },

package/dist/components/GeoPoint.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
-  import Circle, { type CircleProps, type CirclePropsWithoutHTML } from './Circle.svelte';
+  import Circle, { type CircleProps } from './Circle.svelte';
   import type { Without } from '../utils/types.js';
 
   export type GeoPointPropsWithoutHTML = {

package/dist/components/GeoSpline.svelte

@@ -42,13 +42,13 @@
     link,
     loft = 1.0,
     curve = curveNatural,
-    splineRef: splineRefProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     ...restProps
   }: GeoSplineProps = $props();
 
-  let splineRef = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
   $effect.pre(() => {
-    splineRefProp = splineRef;
+    pathRefProp = pathRef;
   });
 
   const geoCtx = getGeoContext();
@@ -76,7 +76,7 @@
 </script>
 
 <Spline
-  bind:splineRef
+  bind:pathRef
   data={[source, middle, target]}
   x={(d) => d[0]}
   y={(d) => d[1]}

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

@@ -27,6 +27,6 @@ export type GeoSplinePropsWithoutHTML = {
     curve?: CurveFactory | CurveFactoryLineOnly;
 };
 export type GeoSplineProps = GeoSplinePropsWithoutHTML & Without<SplineProps, GeoSplinePropsWithoutHTML>;
-declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "splineRef">;
+declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "pathRef">;
 type GeoSpline = ReturnType<typeof GeoSpline>;
 export default GeoSpline;

package/dist/components/MonthPath.svelte

@@ -20,11 +20,13 @@
      *
      * @bindable
      */
-    ref?: SVGPathElement;
+    pathRef?: SVGPathElement;
   };
 
   export type MonthPathProps = MonthPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML>;
+    // we omit the spline props to avoid conflicts with attribute names since we are
+    // passing them through to `<Spline />`
+    Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & SplinePropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -32,18 +34,19 @@
   import { endOfMonth } from 'date-fns';
   import { cls } from '@layerstack/tailwind';
   import { layerClass } from '../utils/attributes.js';
+  import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
 
   let {
     date,
     cellSize: cellSizeProp,
-    ref: refProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     class: className,
     ...restProps
   }: MonthPathProps = $props();
 
-  let ref = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
   $effect.pre(() => {
-    refProp = ref;
+    pathRefProp = pathRef;
   });
 
   const cellSize = $derived(
@@ -68,9 +71,9 @@
   `);
 </script>
 
-<path
-  bind:this={ref}
-  d={pathData}
+<Spline
+  bind:pathRef
+  {pathData}
   fill="none"
   class={cls(layerClass('month-path'), 'stroke-surface-content/20', className)}
   {...restProps}