layerchart 2.0.0-next.43 → 2.0.0-next.45

package/dist/components/Rect.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" module>
-  import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
+  import type { Snippet } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
+  import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
   import { createMotion, parseMotionProp, type MotionProp } from '../utils/motion.svelte.js';
   import { renderRect, type ComputedStylesOptions } from '../utils/canvas.js';
 
@@ -36,6 +37,9 @@
     ref?: SVGRectElement;
 
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+
+    /** Children content to render.  Note: Only works for Html layers */
+    children?: Snippet;
   } & CommonStyleProps;
 
   export type RectProps = RectPropsWithoutHTML &
@@ -45,10 +49,10 @@
 
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { merge } from 'lodash-es';
+  import { merge } from '@layerstack/utils';
 
-  import { getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { registerCanvasComponent } from './layers/Canvas.svelte';
   import { createKey } from '../utils/key.svelte.js';
 
   let {
@@ -65,6 +69,8 @@
     initialWidth = width,
     strokeWidth,
     opacity,
+    rx: rxProp,
+    ry: ryProp,
     ref: refProp = $bindable(),
     motion,
     class: className,
@@ -75,9 +81,15 @@
     onpointerleave,
     onpointerover,
     onpointerout,
+    children,
     ...restProps
   }: RectProps = $props();
 
+  // Normalize rx/ry - if only one is provided, use it for both (SVG behavior)
+  // Coerce to number for canvas rendering (SVG allows string like "50%")
+  const rx = $derived(Number(rxProp ?? ryProp) || 0);
+  const ry = $derived(Number(ryProp ?? rxProp) || 0);
+
   let ref = $state<SVGRectElement>();
 
   $effect.pre(() => {
@@ -89,7 +101,7 @@
   const motionWidth = createMotion(initialWidth, () => width, parseMotionProp(motion, 'width'));
   const motionHeight = createMotion(initialHeight, () => height, parseMotionProp(motion, 'height'));
 
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   function render(
     ctx: CanvasRenderingContext2D,
@@ -102,12 +114,15 @@
         y: motionY.current,
         width: motionWidth.current,
         height: motionHeight.current,
+        rx,
+        ry,
       },
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: cls('lc-rect', className),
+            style: restProps.style as string | undefined,
           }
     );
   }
@@ -116,7 +131,7 @@
   const fillKey = createKey(() => fill);
   const strokeKey = createKey(() => stroke);
 
-  if (renderCtx === 'canvas') {
+  if (layerCtx === 'canvas') {
     registerCanvasComponent({
       name: 'Rect',
       render,
@@ -139,12 +154,15 @@
         strokeWidth,
         opacity,
         className,
+        restProps.style,
+        rx,
+        ry,
       ],
     });
   }
 </script>
 
-{#if renderCtx === 'svg'}
+{#if layerCtx === 'svg'}
   <rect
     x={motionX.current}
     y={motionY.current}
@@ -155,6 +173,8 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
+    {rx}
+    {ry}
     class={cls('lc-rect', className)}
     {...restProps}
     {onclick}
@@ -166,7 +186,7 @@
     {onpointerout}
     bind:this={ref}
   />
-{:else if renderCtx === 'html'}
+{:else if layerCtx === 'html'}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
@@ -180,7 +200,7 @@
     style:border-width="{strokeWidth}px"
     style:border-style="solid"
     style:border-color={stroke}
-    style:border-radius="{restProps.rx}px"
+    style:border-radius="{rx}px"
     class={cls('lc-rect', className)}
     {...restProps as any}
     {onclick}
@@ -190,7 +210,9 @@
     {onpointerleave}
     {onpointerover}
     {onpointerout}
-  ></div>
+  >
+    {@render children?.()}
+  </div>
 {/if}
 
 <style>

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

@@ -1,5 +1,6 @@
-import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
+import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
+import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
 export type RectPropsWithoutHTML = {
     /**
@@ -29,6 +30,8 @@ export type RectPropsWithoutHTML = {
      */
     ref?: SVGRectElement;
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+    /** Children content to render.  Note: Only works for Html layers */
+    children?: Snippet;
 } & CommonStyleProps;
 export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML> & CommonEvents;
 declare const Rect: import("svelte").Component<RectProps, {}, "ref">;

package/dist/components/Rule.svelte

@@ -59,7 +59,7 @@
   import Circle from './Circle.svelte';
   import Group from './Group.svelte';
   import Line, { type LinePropsWithoutHTML } from './Line.svelte';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import { accessor, chartDataArray, type Accessor } from '../utils/common.js';
   import { isScaleBand, isScaleNumeric } from '../utils/scales.svelte.js';
 

package/dist/components/Sankey.svelte

@@ -89,7 +89,7 @@
     type SankeyGraph,
   } from 'd3-sankey';
 
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
 
   let {
     nodes: nodesProp = (d: any) => d.nodes,

package/dist/components/Spline.svelte

@@ -1,17 +1,8 @@
 <script lang="ts" module>
-  import type { Snippet } from 'svelte';
-  import type { MarkerOptions } from './MarkerWrapper.svelte';
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
 
-  import {
-    createControlledMotion,
-    createMotion,
-    extractTweenConfig,
-    type MotionProp,
-    type ResolvedMotion,
-  } from '../utils/motion.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
 
   export type SplinePropsWithoutHTML = {
@@ -20,12 +11,6 @@
      */
     data?: any;
 
-    /**
-     * Pass `<path d={...} />` explicitly instead of calculating
-     * from data / context
-     */
-    pathData?: string | undefined | null;
-
     /**
      * Override `x` accessor from Chart context
      */
@@ -36,26 +21,6 @@
      */
     y?: Accessor;
 
-    /**
-     * Whether to animate the drawing of the path over time.
-     * Pass either `true` or an object with transition options to
-     * enable the transition.
-     *
-     * Works best with `tweened` disabled.
-     */
-    draw?: boolean | Parameters<typeof _drawTransition>[1];
-
-    /**
-     * Curve of spline drawn. Imported via d3-shape.
-     *
-     * @example
-     * import { curveNatural } from 'd3-shape';
-     * <Spline curve={curveNatural} />
-     *
-     * @type {CurveFactory | CurveFactoryLineOnly | undefined}
-     */
-    curve?: CurveFactory | CurveFactoryLineOnly;
-
     /**
      * Function to determine if a point is defined
      *
@@ -65,48 +30,16 @@
     defined?: Parameters<Line<any>['defined']>[0];
 
     /**
-     * Marker to attach to both start and end points of the line
-     */
-    marker?: MarkerOptions;
-
-    /**
-     * Marker to attach to the middle point of the line
-     */
-    markerMid?: MarkerOptions;
-
-    /**
-     * Marker to attach to the start point of the line
-     */
-    markerStart?: MarkerOptions;
-
-    /**
-     * Marker to attach to the end point of the line
-     */
-    markerEnd?: MarkerOptions;
-
-    /**
-     * Add additional content at the start of the line.
+     * Curve of path drawn. Imported via d3-shape.
      *
-     * 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; value: { x: number; y: number } }` as a snippet prop.
-     */
-    endContent?: Snippet<[{ point: DOMPoint; value: { x: number; y: number } }]>;
-
-    /**
-     * A reference to the `<path>` element.
+     * @example
+     * import { curveNatural } from 'd3-shape';
+     * <Path curve={curveNatural} />
      *
-     * @bindable
+     * @type {CurveFactory | CurveFactoryLineOnly | undefined}
      */
-    pathRef?: SVGPathElement;
-
-    motion?: MotionProp;
-  } & CommonStyleProps;
+    curve?: CurveFactory | CurveFactoryLineOnly;
+  } & Omit<PathProps, 'x' | 'y'>;
 
   export type SplineProps = SplinePropsWithoutHTML &
     Without<SVGAttributes<SVGPathElement>, SplinePropsWithoutHTML>;
@@ -114,67 +47,17 @@
 
 <script lang="ts">
   import { draw as _drawTransition } from 'svelte/transition';
-  import { cubicInOut } from 'svelte/easing';
-  import { merge } from 'lodash-es';
 
   import { line as d3Line, lineRadial } from 'd3-shape';
-  import { interpolatePath } from 'd3-interpolate-path';
   import { max } from 'd3-array';
-  import { cls } from '@layerstack/tailwind';
 
-  import Group from './Group.svelte';
   import { isScaleBand } from '../utils/scales.svelte.js';
-  import { flattenPathData } from '../utils/path.js';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
-  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
-  import { getRenderContext } from './Chart.svelte';
-  import MarkerWrapper from './MarkerWrapper.svelte';
-  import { getChartContext } from './Chart.svelte';
-  import { createKey } from '../utils/key.svelte.js';
-  import { createId } from '../utils/createId.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import Path, { type PathProps } from './Path.svelte';
 
   const ctx = getChartContext();
 
-  const uid = $props.id();
-
-  let {
-    data,
-    pathData,
-    x,
-    y,
-    motion,
-    draw,
-    curve,
-    defined,
-    fill,
-    stroke,
-    strokeWidth,
-    fillOpacity,
-    class: className,
-    marker,
-    markerStart: markerStartProp,
-    markerMid: markerMidProp,
-    markerEnd: markerEndProp,
-    startContent,
-    endContent,
-    opacity,
-    pathRef: pathRefProp = $bindable(),
-    ...restProps
-  }: SplineProps = $props();
-
-  let pathRef = $state<SVGPathElement>();
-
-  $effect.pre(() => {
-    pathRefProp = pathRef;
-  });
-
-  const markerStart = $derived(markerStartProp ?? marker);
-  const markerMid = $derived(markerMidProp ?? marker);
-  const markerEnd = $derived(markerEndProp ?? marker);
-
-  const markerStartId = $derived(markerStart ? createId('marker-start', uid) : '');
-  const markerMidId = $derived(markerMid ? createId('marker-mid', uid) : '');
-  const markerEndId = $derived(markerEnd ? createId('marker-end', uid) : '');
+  let { data, x, y, defined, curve, ...restProps }: SplineProps = $props();
 
   function getScaleValue(
     data: any,
@@ -202,42 +85,6 @@
   const xOffset = $derived(isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0);
   const yOffset = $derived(isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0);
 
-  const extractedTween = extractTweenConfig(motion);
-
-  const tweenedOptions: ResolvedMotion | undefined = extractedTween
-    ? {
-        type: extractedTween.type,
-        options: { interpolate: interpolatePath, ...extractedTween.options },
-      }
-    : undefined;
-
-  /** Provide initial `0` horizontal baseline and initially hide/untrack scale changes so not reactive (only set on initial mount) */
-  function defaultPathData() {
-    if (!tweenedOptions) {
-      // If not tweened, return empty string (faster initial render)
-      return '';
-    } else if (pathData) {
-      // Flatten all `y` coordinates of pre-defined `pathData`
-      return flattenPathData(pathData, Math.min(ctx.yScale(0) ?? ctx.yRange[0], ctx.yRange[0]));
-    } else if (ctx.config.x) {
-      // Only use default line if `x` accessor is defined (cartesian chart)
-      const path = ctx.radial
-        ? lineRadial()
-            .angle((d) => ctx.xScale(xAccessor(d)) + 0) // Never apply xOffset (LineChart radar, BarChart radial, ...)?
-
-            .radius((d) => Math.min(ctx.yScale(0), ctx.yRange[0]))
-        : d3Line()
-            .x((d) => ctx.xScale(xAccessor(d)) + xOffset)
-            .y((d) => Math.min(ctx.yScale(0), ctx.yRange[0]));
-
-      path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
-
-      if (curve) path.curve(curve);
-
-      return path(data ?? ctx.data);
-    }
-  }
-
   const d = $derived.by(() => {
     const path = ctx.radial
       ? lineRadial()
@@ -251,179 +98,8 @@
     path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
     if (curve) path.curve(curve);
 
-    return pathData ?? path(data ?? ctx.data) ?? '';
-  });
-
-  const tweenedState = createMotion(defaultPathData(), () => d, tweenedOptions);
-
-  const drawTransition = $derived(draw ? _drawTransition : () => ({}));
-
-  let key = $state(Symbol());
-
-  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('lc-spline-path', 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: 'Spline',
-      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,
-      ],
-    });
-  }
-
-  let startPoint = $state<DOMPoint | undefined>();
-
-  const endPointDuration = $derived.by(() => {
-    if (
-      typeof draw === 'object' &&
-      draw.duration !== undefined &&
-      typeof draw.duration !== 'function'
-    ) {
-      return draw.duration;
-    }
-    return 800;
-  });
-
-  const endPoint = createControlledMotion<DOMPoint | undefined>(
-    undefined,
-    draw
-      ? {
-          type: 'tween',
-          duration: () => endPointDuration,
-          easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut,
-          interpolate() {
-            return (t: number) => {
-              const totalLength = pathRef?.getTotalLength() ?? 0;
-              const point = pathRef?.getPointAtLength(totalLength * t);
-              return point;
-            };
-          },
-        }
-      : { type: 'none' }
-  );
-
-  $effect(() => {
-    if (!startContent && !endContent) return;
-    d;
-    if (!pathRef || !pathRef.getTotalLength()) return;
-    startPoint = pathRef.getPointAtLength(0);
-    const totalLength = pathRef.getTotalLength();
-    endPoint.target = pathRef.getPointAtLength(totalLength);
-  });
-
-  $effect(() => {
-    if (!draw) return;
-    // Anytime the path data changes, redraw
-    [pathData, data, ctx.data];
-    key = Symbol();
+    return path(data ?? ctx.data) ?? '';
   });
 </script>
 
-{#if renderCtx === 'svg'}
-  {#key key}
-    <path
-      d={tweenedState.current}
-      {...restProps}
-      class={cls('lc-spline-path', className)}
-      {fill}
-      fill-opacity={fillOpacity}
-      {stroke}
-      stroke-width={strokeWidth}
-      {opacity}
-      marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
-      marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
-      marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-      in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
-      bind:this={pathRef}
-    />
-    <MarkerWrapper id={markerStartId} marker={markerStart} />
-    <MarkerWrapper id={markerMidId} marker={markerMid} />
-    <MarkerWrapper id={markerEndId} marker={markerEnd} />
-
-    {#if startContent && startPoint}
-      <Group x={startPoint.x} y={startPoint.y} class="lc-spline-g-start">
-        {@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="lc-spline-g-end">
-        {@render endContent({
-          point: endPoint.current,
-          value: {
-            x: ctx.xScale?.invert?.(endPoint.current.x),
-            y: ctx.yScale?.invert?.(endPoint.current.y),
-          },
-        })}
-      </Group>
-    {/if}
-  {/key}
-{/if}
-
-<style>
-  @layer base {
-    :global(:where(.lc-spline-path)) {
-      --fill-color: none;
-      --stroke-color: var(--color-surface-content, currentColor);
-    }
-
-    /* Svg | Canvas layers */
-    :global(:where(.lc-layout-svg .lc-spline-path, svg.lc-spline-path):not([fill])) {
-      fill: var(--fill-color);
-    }
-    :global(:where(.lc-layout-svg .lc-spline-path, svg.lc-spline-path):not([stroke])) {
-      stroke: var(--stroke-color);
-    }
-
-    /* Html layers */
-    :global(:where(.lc-layout-html .lc-spline-path):not([background-color])) {
-      background-color: var(--fill-color);
-    }
-    :global(:where(.lc-layout-html .lc-spline-path):not([border-color])) {
-      border-color: var(--stroke-color);
-    }
-  }
-</style>
+<Path pathData={d} {...restProps} />

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

@@ -1,20 +1,12 @@
-import type { Snippet } from 'svelte';
-import type { MarkerOptions } from './MarkerWrapper.svelte';
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
 import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
-import { type MotionProp } from '../utils/motion.svelte.js';
 import { type Accessor } from '../utils/common.js';
 export type SplinePropsWithoutHTML = {
     /**
      * Override data instead of using context
      */
     data?: any;
-    /**
-     * Pass `<path d={...} />` explicitly instead of calculating
-     * from data / context
-     */
-    pathData?: string | undefined | null;
     /**
      * Override `x` accessor from Chart context
      */
@@ -23,24 +15,6 @@ export type SplinePropsWithoutHTML = {
      * Override `y` accessor from Chart context
      */
     y?: Accessor;
-    /**
-     * Whether to animate the drawing of the path over time.
-     * Pass either `true` or an object with transition options to
-     * enable the transition.
-     *
-     * Works best with `tweened` disabled.
-     */
-    draw?: boolean | Parameters<typeof _drawTransition>[1];
-    /**
-     * Curve of spline drawn. Imported via d3-shape.
-     *
-     * @example
-     * import { curveNatural } from 'd3-shape';
-     * <Spline curve={curveNatural} />
-     *
-     * @type {CurveFactory | CurveFactoryLineOnly | undefined}
-     */
-    curve?: CurveFactory | CurveFactoryLineOnly;
     /**
      * Function to determine if a point is defined
      *
@@ -49,55 +23,18 @@ export type SplinePropsWithoutHTML = {
      */
     defined?: Parameters<Line<any>['defined']>[0];
     /**
-     * Marker to attach to both start and end points of the line
-     */
-    marker?: MarkerOptions;
-    /**
-     * Marker to attach to the middle point of the line
-     */
-    markerMid?: MarkerOptions;
-    /**
-     * Marker to attach to the start point of the line
-     */
-    markerStart?: MarkerOptions;
-    /**
-     * Marker to attach to the end point of the line
-     */
-    markerEnd?: MarkerOptions;
-    /**
-     * Add additional content at the start of the line.
+     * Curve of path drawn. Imported via d3-shape.
      *
-     * 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; value: { x: number; y: number } }` as a snippet prop.
-     */
-    endContent?: Snippet<[{
-        point: DOMPoint;
-        value: {
-            x: number;
-            y: number;
-        };
-    }]>;
-    /**
-     * A reference to the `<path>` element.
+     * @example
+     * import { curveNatural } from 'd3-shape';
+     * <Path curve={curveNatural} />
      *
-     * @bindable
+     * @type {CurveFactory | CurveFactoryLineOnly | undefined}
      */
-    pathRef?: SVGPathElement;
-    motion?: MotionProp;
-} & CommonStyleProps;
+    curve?: CurveFactory | CurveFactoryLineOnly;
+} & Omit<PathProps, 'x' | 'y'>;
 export type SplineProps = SplinePropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, SplinePropsWithoutHTML>;
-import { draw as _drawTransition } from 'svelte/transition';
-declare const Spline: import("svelte").Component<SplineProps, {}, "pathRef">;
+import { type PathProps } from './Path.svelte';
+declare const Spline: import("svelte").Component<SplineProps, {}, "">;
 type Spline = ReturnType<typeof Spline>;
 export default Spline;