layerchart 2.0.0-next.3 → 2.0.0-next.31

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;

package/dist/components/RadialGradient.svelte

@@ -102,6 +102,7 @@
     fx = cx,
     fy = cy,
     r = '50%',
+    // fr = '0%'; // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
     spreadMethod = 'pad',
     transform = undefined,
     units = 'objectBoundingBox',
@@ -111,9 +112,6 @@
     ...restProps
   }: RadialGradientProps = $props();
 
-  // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
-  // export let fr = '0%';
-
   const ctx = getChartContext();
 
   const renderCtx = getRenderContext();

package/dist/components/Spline.svelte

@@ -87,23 +87,23 @@
     /**
      * Add additional content at the start of the line.
      *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop.
      */
-    startContent?: Snippet<[{ point: DOMPoint }]>;
+    startContent?: Snippet<[{ point: DOMPoint; value: { x: number; y: number } }]>;
 
     /**
      * Add additional content at the end of the line.
      *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop.
      */
-    endContent?: Snippet<[{ point: DOMPoint }]>;
+    endContent?: Snippet<[{ point: DOMPoint; value: { x: number; y: number } }]>;
 
     /**
      * A reference to the `<path>` element.
      *
      * @bindable
      */
-    splineRef?: SVGPathElement;
+    pathRef?: SVGPathElement;
 
     motion?: MotionProp;
   } & CommonStyleProps;
@@ -159,14 +159,14 @@
     startContent,
     endContent,
     opacity,
-    splineRef: splineRefProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     ...restProps
   }: SplineProps = $props();
 
-  let splineRef = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
 
   $effect.pre(() => {
-    splineRefProp = splineRef;
+    pathRefProp = pathRef;
   });
 
   const markerStart = $derived(markerStartProp ?? marker);
@@ -331,8 +331,8 @@
           easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut,
           interpolate() {
             return (t: number) => {
-              const totalLength = splineRef?.getTotalLength() ?? 0;
-              const point = splineRef?.getPointAtLength(totalLength * t);
+              const totalLength = pathRef?.getTotalLength() ?? 0;
+              const point = pathRef?.getPointAtLength(totalLength * t);
               return point;
             };
           },
@@ -343,16 +343,16 @@
   $effect(() => {
     if (!startContent && !endContent) return;
     d;
-    if (!splineRef || !splineRef.getTotalLength()) return;
-    startPoint = splineRef.getPointAtLength(0);
-    const totalLength = splineRef.getTotalLength();
-    endPoint.target = splineRef.getPointAtLength(totalLength);
+    if (!pathRef || !pathRef.getTotalLength()) return;
+    startPoint = pathRef.getPointAtLength(0);
+    const totalLength = pathRef.getTotalLength();
+    endPoint.target = pathRef.getPointAtLength(totalLength);
   });
 
   $effect(() => {
     if (!draw) return;
-    [tweenedState.current];
     // Anytime the path data changes, redraw
+    [pathData, data, ctx.data];
     key = Symbol();
   });
 </script>
@@ -377,7 +377,7 @@
       marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
       marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
       in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
-      bind:this={splineRef}
+      bind:this={pathRef}
     />
     <MarkerWrapper id={markerStartId} marker={markerStart} />
     <MarkerWrapper id={markerMidId} marker={markerMid} />
@@ -385,13 +385,25 @@
 
     {#if startContent && startPoint}
       <Group x={startPoint.x} y={startPoint.y} class={layerClass('spline-g-start')}>
-        {@render startContent({ point: startPoint })}
+        {@render startContent({
+          point: startPoint,
+          value: {
+            x: ctx.xScale?.invert?.(startPoint.x),
+            y: ctx.yScale?.invert?.(startPoint.y),
+          },
+        })}
       </Group>
     {/if}
 
     {#if endContent && endPoint.current}
       <Group x={endPoint.current.x} y={endPoint.current.y} class={layerClass('spline-g-end')}>
-        {@render endContent({ point: endPoint.current })}
+        {@render endContent({
+          point: endPoint.current,
+          value: {
+            x: ctx.xScale?.invert?.(endPoint.current.x),
+            y: ctx.yScale?.invert?.(endPoint.current.y),
+          },
+        })}
       </Group>
     {/if}
   {/key}

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

@@ -67,29 +67,37 @@ export type SplinePropsWithoutHTML = {
     /**
      * Add additional content at the start of the line.
      *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop.
      */
     startContent?: Snippet<[{
         point: DOMPoint;
+        value: {
+            x: number;
+            y: number;
+        };
     }]>;
     /**
      * Add additional content at the end of the line.
      *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop.
      */
     endContent?: Snippet<[{
         point: DOMPoint;
+        value: {
+            x: number;
+            y: number;
+        };
     }]>;
     /**
      * A reference to the `<path>` element.
      *
      * @bindable
      */
-    splineRef?: SVGPathElement;
+    pathRef?: SVGPathElement;
     motion?: MotionProp;
 } & CommonStyleProps;
 export type SplineProps = SplinePropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, SplinePropsWithoutHTML>;
 import { draw as _drawTransition } from 'svelte/transition';
-declare const Spline: import("svelte").Component<SplineProps, {}, "splineRef">;
+declare const Spline: import("svelte").Component<SplineProps, {}, "pathRef">;
 type Spline = ReturnType<typeof Spline>;
 export default Spline;