layerchart 2.0.0-next.15 → 2.0.0-next.17

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

@@ -1,24 +1,63 @@
 import { type Force, type Simulation, type SimulationLinkDatum, type SimulationNodeDatum } from 'd3-force';
 import type { Snippet } from 'svelte';
-type Forces = Record<string, Force<any, any>>;
+export type Forces<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = Record<string, Force<NodeDatum, LinkDatum>>;
 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;
-}>;
-type NodeDatumFor<NodeDatum> = Prettify<NodeDatum & SimulationNodeDatum>;
-type LinkDatumFor<NodeDatum, LinkDatum> = Prettify<LinkDatum & SimulationLinkDatum<NodeDatumFor<NodeDatum>>>;
+};
+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.
+ */
+export declare const DEFAULT_ALPHA: number;
+/**
+ * Default target alpha value for the simulation.
+ */
+export declare const DEFAULT_ALPHA_TARGET: number;
+/**
+ * Default alpha decay rate per tick.
+ *
+ * Formula: `1 - Math.pow(0.001, 1 / 300)`.
+ */
+export declare const DEFAULT_ALPHA_DECAY: number;
+/**
+ * Default minimum alpha value at which simulation stops.
+ */
+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> = NodeDatum & SimulationNodeDatum;
+type LinkDatumFor<NodeDatum, LinkDatum> = LinkDatum & SimulationLinkDatum<NodeDatumFor<NodeDatum>>;
 type SimulationFor<NodeDatum, LinkDatum> = Simulation<NodeDatumFor<NodeDatum>, LinkDatumFor<NodeDatum, LinkDatum>>;
-export type ForceSimulationProps<NodeDatum, LinkDatum> = {
+export type ForceSimulationProps<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
     /**
      * Force simulation parameters
      */
-    forces: Forces;
+    forces: Forces<NodeDatum, LinkDatum>;
     /**
      * An object with arrays of nodes and links,
      * to be used for position calculation.
@@ -26,27 +65,27 @@ export type ForceSimulationProps<NodeDatum, LinkDatum> = {
     data: Data<NodeDatum, LinkDatum>;
     /**
      * Current alpha value of the simulation
-     * @default 1
+     * @default DEFAULT_ALPHA
      */
     alpha?: number;
     /**
      * Target alpha value for the simulation
-     * @default 0
+     * @default DEFAULT_ALPHA_TARGET
      */
     alphaTarget?: number;
     /**
      * Alpha decay rate per tick
-     * @default 1 - Math.pow(0.001, 1 / 300)
+     * @default DEFAULT_ALPHA_DECAY
      */
     alphaDecay?: number;
     /**
      * Minimum alpha value at which simulation stops
-     * @default 0.01
+     * @default DEFAULT_ALPHA_MIN
      */
     alphaMin?: number;
     /**
      * Velocity decay factor applied to nodes each tick
-     * @default 0.4
+     * @default DEFAULT_VELOCITY_DECAY
      */
     velocityDecay?: number;
     /**
@@ -67,18 +106,15 @@ export type ForceSimulationProps<NodeDatum, LinkDatum> = {
     /**
      * 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>[];
@@ -88,8 +124,7 @@ export type ForceSimulationProps<NodeDatum, LinkDatum> = {
         }
     ]>;
 };
-import type { Prettify } from '@layerstack/utils';
-declare class __sveltets_Render<NodeDatum, LinkDatum = undefined> {
+declare class __sveltets_Render<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> {
     props(): ForceSimulationProps<NodeDatum, LinkDatum>;
     events(): {};
     slots(): {};
@@ -97,12 +132,12 @@ declare class __sveltets_Render<NodeDatum, LinkDatum = undefined> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <NodeDatum, LinkDatum = undefined>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['events']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['slots']>> & {
+    new <NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['events']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['bindings']>;
     } & ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
-    <NodeDatum, LinkDatum = undefined>(internal: unknown, props: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']> & {}): ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
+    <NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined>(internal: unknown, props: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']> & {}): ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ForceSimulation: $$IsomorphicComponent;
-type ForceSimulation<NodeDatum, LinkDatum = undefined> = InstanceType<typeof ForceSimulation<NodeDatum, LinkDatum>>;
+type ForceSimulation<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = InstanceType<typeof ForceSimulation<NodeDatum, LinkDatum>>;
 export default ForceSimulation;

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}

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

@@ -16,9 +16,10 @@ export type MonthPathPropsWithoutHTML = {
      *
      * @bindable
      */
-    ref?: SVGPathElement;
+    pathRef?: SVGPathElement;
 };
-export type MonthPathProps = MonthPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML>;
-declare const MonthPath: import("svelte").Component<MonthPathProps, {}, "ref">;
+export type MonthPathProps = MonthPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, MonthPathPropsWithoutHTML & SplinePropsWithoutHTML>;
+import { type SplinePropsWithoutHTML } from './Spline.svelte';
+declare const MonthPath: import("svelte").Component<MonthPathProps, {}, "pathRef">;
 type MonthPath = ReturnType<typeof MonthPath>;
 export default MonthPath;

package/dist/components/Polygon.svelte

@@ -0,0 +1,285 @@
+<script lang="ts" module>
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+
+  export type PolygonPropsWithoutHTML = {
+    /**
+     * The center x position of the polygon.
+     *
+     * @default 0
+     */
+    cx?: number;
+
+    /**
+     * The initial center x position of the polygon.
+     *
+     * @default cx
+     */
+    initialCx?: number;
+
+    /**
+     * The center y position of the polygon.
+     *
+     * @default 0
+     */
+    cy?: number;
+
+    /**
+     * The initial center y position of the polygon.
+     *
+     * @default cy
+     */
+    initialCy?: number;
+
+    /**
+     * The radius of the polygon.
+     *
+     * @default 1
+     */
+    r?: number;
+
+    /**
+     * The initial radius of the polygon.
+     *
+     * @default r
+     */
+    initialR?: number;
+
+    /**
+     * The number of points or explicit points to create the polygon.
+     *
+     * @default 4
+     */
+    points?: number | { x: number; y: number }[];
+
+    /**
+     * The radius of the curve for rounded corners.
+     *
+     * @default 0
+     */
+    cornerRadius?: number;
+
+    /**
+     * The rotation of the polygon.
+     *
+     * @default 0
+     */
+    rotate?: number;
+
+    /**
+     * The percent to inset the odd points of the star (<1 inset, >1 outset)
+     *
+     * @default 0
+     */
+    inset?: number;
+
+    /**
+     * The horizontal stretch factor of the polygon.
+     *
+     * @default 1
+     */
+    scaleX?: number;
+
+    /**
+     * The vertical stretch factor of the polygon.
+     *
+     * @default 1
+     */
+    scaleY?: number;
+
+    /**
+     * The skew angle in degrees along the X axis.
+     *
+     * @default 0
+     */
+    skewX?: number;
+
+    /**
+     * The skew angle in degrees along the Y axis.
+     *
+     * @default 0
+     */
+    skewY?: number;
+
+    /**
+     * The tilt factor for x-coordinates.
+     *
+     * @default 1
+     */
+    tiltX?: number;
+
+    /**
+     * The tilt factor for y-coordinates.
+     *
+     * @default 1
+     */
+    tiltY?: number;
+
+    /**
+     * A bindable reference to the `<path>` element
+     *
+     * @bindable
+     */
+    ref?: SVGPathElement;
+
+    motion?: MotionProp;
+  } & CommonStyleProps;
+
+  export type PolygonProps = PolygonPropsWithoutHTML &
+    Without<SVGAttributes<Element>, PolygonPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from 'lodash-es';
+  import { interpolatePath } from 'd3-interpolate-path';
+
+  import { getRenderContext } from './Chart.svelte';
+  import {
+    createMotion,
+    extractTweenConfig,
+    type MotionProp,
+    type ResolvedMotion,
+  } from '../utils/motion.svelte.js';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
+  import { createKey } from '../utils/key.svelte.js';
+  import { layerClass } from '../utils/attributes.js';
+  import { polygon } from '../utils/shape.js';
+  import { roundedPolygonPath } from '../utils/path.js';
+
+  let {
+    cx = 0,
+    initialCx: initialCxProp,
+    cy = 0,
+    initialCy: initialCyProp,
+    r = 1,
+    initialR: initialRProp,
+    points = 4,
+    cornerRadius = 0,
+    rotate = 0,
+    inset = 0,
+    scaleX = 1,
+    scaleY = 1,
+    skewX = 0,
+    skewY = 0,
+    tiltX = 0,
+    tiltY = 0,
+    motion,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ref: refProp = $bindable(),
+    ...restProps
+  }: PolygonProps = $props();
+
+  let ref = $state<SVGPathElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const initialCx = initialCxProp ?? cx;
+  const initialCy = initialCyProp ?? cy;
+  const initialR = initialRProp ?? r;
+
+  const motionCx = createMotion(initialCx, () => cx, motion);
+  const motionCy = createMotion(initialCy, () => cy, motion);
+  const motionR = createMotion(initialR, () => r, motion);
+
+  let polygonPoints = $derived(
+    typeof points === 'number'
+      ? polygon({
+          cx: motionCx.current,
+          cy: motionCy.current,
+          count: points,
+          radius: motionR.current,
+          rotate,
+          inset,
+          scaleX,
+          scaleY,
+          skewX,
+          skewY,
+          tiltX,
+          tiltY,
+        })
+      : points
+  );
+  let d = $derived(roundedPolygonPath(polygonPoints, cornerRadius));
+
+  const extractedTween = extractTweenConfig(motion);
+
+  const tweenedOptions: ResolvedMotion | undefined = extractedTween
+    ? {
+        type: extractedTween.type,
+        options: { interpolate: interpolatePath, ...extractedTween.options },
+      }
+    : undefined;
+
+  const tweenedState = createMotion(null, () => d, tweenedOptions);
+
+  const renderCtx = getRenderContext();
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    renderPathData(
+      ctx,
+      tweenedState.current,
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
+            classes: cls(layerClass('polygon'), fill == null && 'fill-surface-content', 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: 'Polygon',
+      render,
+      events: {
+        click: restProps.onclick,
+        pointerenter: restProps.onpointerenter,
+        pointermove: restProps.onpointermove,
+        pointerleave: restProps.onpointerleave,
+        pointerdown: restProps.onpointerdown,
+        pointerover: restProps.onpointerover,
+        pointerout: restProps.onpointerout,
+        touchmove: restProps.ontouchmove,
+      },
+      deps: () => [
+        fillKey.current,
+        fillOpacity,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        className,
+        tweenedState.current,
+      ],
+    });
+  }
+</script>
+
+{#if renderCtx === 'svg'}
+  <path
+    d={tweenedState.current}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {opacity}
+    class={cls(layerClass('polygon'), fill == null && 'fill-surface-content', className)}
+    {...restProps}
+    bind:this={ref}
+  />
+{/if}

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

@@ -0,0 +1,115 @@
+import type { CommonStyleProps, Without } from '../utils/types.js';
+export type PolygonPropsWithoutHTML = {
+    /**
+     * The center x position of the polygon.
+     *
+     * @default 0
+     */
+    cx?: number;
+    /**
+     * The initial center x position of the polygon.
+     *
+     * @default cx
+     */
+    initialCx?: number;
+    /**
+     * The center y position of the polygon.
+     *
+     * @default 0
+     */
+    cy?: number;
+    /**
+     * The initial center y position of the polygon.
+     *
+     * @default cy
+     */
+    initialCy?: number;
+    /**
+     * The radius of the polygon.
+     *
+     * @default 1
+     */
+    r?: number;
+    /**
+     * The initial radius of the polygon.
+     *
+     * @default r
+     */
+    initialR?: number;
+    /**
+     * The number of points or explicit points to create the polygon.
+     *
+     * @default 4
+     */
+    points?: number | {
+        x: number;
+        y: number;
+    }[];
+    /**
+     * The radius of the curve for rounded corners.
+     *
+     * @default 0
+     */
+    cornerRadius?: number;
+    /**
+     * The rotation of the polygon.
+     *
+     * @default 0
+     */
+    rotate?: number;
+    /**
+     * The percent to inset the odd points of the star (<1 inset, >1 outset)
+     *
+     * @default 0
+     */
+    inset?: number;
+    /**
+     * The horizontal stretch factor of the polygon.
+     *
+     * @default 1
+     */
+    scaleX?: number;
+    /**
+     * The vertical stretch factor of the polygon.
+     *
+     * @default 1
+     */
+    scaleY?: number;
+    /**
+     * The skew angle in degrees along the X axis.
+     *
+     * @default 0
+     */
+    skewX?: number;
+    /**
+     * The skew angle in degrees along the Y axis.
+     *
+     * @default 0
+     */
+    skewY?: number;
+    /**
+     * The tilt factor for x-coordinates.
+     *
+     * @default 1
+     */
+    tiltX?: number;
+    /**
+     * The tilt factor for y-coordinates.
+     *
+     * @default 1
+     */
+    tiltY?: number;
+    /**
+     * A bindable reference to the `<path>` element
+     *
+     * @bindable
+     */
+    ref?: SVGPathElement;
+    motion?: MotionProp;
+} & CommonStyleProps;
+export type PolygonProps = PolygonPropsWithoutHTML & Without<SVGAttributes<Element>, PolygonPropsWithoutHTML>;
+import type { SVGAttributes } from 'svelte/elements';
+import { type MotionProp } from '../utils/motion.svelte.js';
+declare const Polygon: import("svelte").Component<PolygonProps, {}, "ref">;
+type Polygon = ReturnType<typeof Polygon>;
+export default Polygon;