layerchart 2.0.0-next.6 → 2.0.0-next.60

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

@@ -11,14 +11,19 @@ export type MonthPathPropsWithoutHTML = {
      * - array - sets [width, height].
      */
     cellSize: number | [number, number];
+    /**
+     * The start date of the calendar (used to calculate week offsets).
+     */
+    startOfRange: Date;
     /**
      * A bindable reference to the underlying `<path>` element.
      *
      * @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 & PathPropsWithoutHTML>;
+import { type PathPropsWithoutHTML } from './Path.svelte';
+declare const MonthPath: import("svelte").Component<MonthPathProps, {}, "pathRef">;
 type MonthPath = ReturnType<typeof MonthPath>;
 export default MonthPath;

package/dist/components/MotionPath.svelte

@@ -100,7 +100,7 @@
     {fill}
     {rotate}
     bind:this={ref}
-    {...extractLayerProps(restProps, 'motion-path')}
+    {...extractLayerProps(restProps, 'lc-motion-path')}
   >
     <mpath href="#{pathId}" />
   </animateMotion>

package/dist/components/Path.svelte

@@ -0,0 +1,381 @@
+<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 { SVGAttributes } from 'svelte/elements';
+
+  import {
+    createControlledMotion,
+    createMotion,
+    extractTweenConfig,
+    type MotionProp,
+    type ResolvedMotion,
+  } from '../utils/motion.svelte.js';
+
+  export type PathPropsWithoutHTML = {
+    /**
+     * Pass `<path d={...} />` explicitly instead of calculating
+     * from data / context
+     */
+    pathData?: string | undefined | null;
+
+    /**
+     * 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];
+
+    /**
+     * 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.
+     *
+     * 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.
+     *
+     * @bindable
+     */
+    pathRef?: SVGPathElement;
+
+    motion?: MotionProp;
+  } & CommonStyleProps;
+
+  export type PathProps = PathPropsWithoutHTML &
+    Without<SVGAttributes<SVGPathElement>, PathPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { draw as _drawTransition } from 'svelte/transition';
+  import { cubicInOut } from 'svelte/easing';
+  import { merge } from '@layerstack/utils';
+
+  import { interpolatePath } from 'd3-interpolate-path';
+  import { cls } from '@layerstack/tailwind';
+
+  import Group from './Group.svelte';
+  import { flattenPathData } from '../utils/path.js';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
+  import { getLayerContext } from '../contexts/layer.js';
+  import MarkerWrapper from './MarkerWrapper.svelte';
+  import { getChartContext } from '../contexts/chart.js';
+  import { createKey } from '../utils/key.svelte.js';
+  import { createId } from '../utils/createId.js';
+
+  const ctx = getChartContext();
+
+  const uid = $props.id();
+
+  let {
+    pathData,
+    x,
+    y,
+    motion,
+    draw,
+    fill,
+    stroke,
+    strokeOpacity,
+    strokeWidth,
+    fillOpacity,
+    class: className,
+    marker,
+    markerStart: markerStartProp,
+    markerMid: markerMidProp,
+    markerEnd: markerEndProp,
+    startContent,
+    endContent,
+    opacity,
+    pathRef: pathRefProp = $bindable(),
+    onclick,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    onpointerdown,
+    onpointerover,
+    onpointerout,
+    ontouchmove,
+    ...restProps
+  }: PathProps = $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) : '');
+
+  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]));
+    }
+  }
+
+  const d = $derived.by(() => {
+    return pathData;
+  });
+
+  const tweenedState = createMotion(defaultPathData(), () => d, tweenedOptions);
+
+  const drawTransition = $derived(draw ? _drawTransition : () => ({}));
+
+  let key = $state(Symbol());
+
+  const layerCtx = getLayerContext();
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    renderPathData(
+      ctx,
+      tweenedState.current,
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, opacity },
+            classes: cls('lc-path', className),
+            style: restProps.style as string | undefined,
+          }
+    );
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
+
+  if (layerCtx === 'canvas') {
+    ctx.registerComponent({
+      name: 'Path',
+      kind: 'mark',
+      canvasRender: {
+        render,
+        events: {
+          get click() {
+            return onclick;
+          },
+          get pointerenter() {
+            return onpointerenter;
+          },
+          get pointermove() {
+            return onpointermove;
+          },
+          get pointerleave() {
+            return onpointerleave;
+          },
+          get pointerdown() {
+            return onpointerdown;
+          },
+          get pointerover() {
+            return onpointerover;
+          },
+          get pointerout() {
+            return onpointerout;
+          },
+          get touchmove() {
+            return ontouchmove;
+          },
+        },
+        deps: () => [
+          fillKey!.current,
+          fillOpacity,
+          strokeKey!.current,
+          strokeOpacity,
+          strokeWidth,
+          opacity,
+          className,
+          tweenedState.current,
+          restProps.style,
+        ],
+      },
+    });
+  }
+
+  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) return;
+
+    // Wait for DOM to update before querying path geometry
+    tick().then(() => {
+      if (!pathRef) return;
+      const totalLength = pathRef.getTotalLength();
+      if (!totalLength) return;
+
+      startPoint = pathRef.getPointAtLength(0);
+      endPoint.target = pathRef.getPointAtLength(totalLength);
+    });
+  });
+
+  $effect(() => {
+    if (!draw) return;
+    // Anytime the path data changes, redraw
+    [pathData /*, data, ctx.data*/];
+    key = Symbol();
+  });
+</script>
+
+{#if layerCtx === 'svg'}
+  {#key key}
+    <path
+      d={tweenedState.current}
+      {...restProps}
+      {onclick}
+      {onpointerenter}
+      {onpointermove}
+      {onpointerleave}
+      {onpointerdown}
+      {onpointerover}
+      {onpointerout}
+      {ontouchmove}
+      class={cls('lc-path', className)}
+      {fill}
+      fill-opacity={fillOpacity}
+      {stroke}
+      stroke-opacity={strokeOpacity}
+      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-path-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-path-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-path)) {
+      /* Use transparent to enable pointer events */
+      --fill-color: transparent;
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-path, svg.lc-path):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-path, svg.lc-path):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-path):not([background-color])) {
+      background-color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-path):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

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

@@ -0,0 +1,72 @@
+import type { Snippet } from 'svelte';
+import type { MarkerOptions } from './MarkerWrapper.svelte';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+import { type MotionProp } from '../utils/motion.svelte.js';
+export type PathPropsWithoutHTML = {
+    /**
+     * Pass `<path d={...} />` explicitly instead of calculating
+     * from data / context
+     */
+    pathData?: string | undefined | null;
+    /**
+     * 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];
+    /**
+     * 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.
+     *
+     * 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.
+     *
+     * @bindable
+     */
+    pathRef?: SVGPathElement;
+    motion?: MotionProp;
+} & CommonStyleProps;
+export type PathProps = PathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, PathPropsWithoutHTML>;
+import { draw as _drawTransition } from 'svelte/transition';
+declare const Path: import("svelte").Component<PathProps, {}, "pathRef">;
+type Path = ReturnType<typeof Path>;
+export default Path;

package/dist/components/Pattern.svelte

@@ -95,7 +95,9 @@
     background?: string;
 
     /**
-     * Render as a child of the pattern
+     * Render as a child of the pattern.
+     *
+     * Note: only supported on the `<Svg>` layer.
      */
     patternContent?: Snippet;
 
@@ -125,10 +127,12 @@
 </script>
 
 <script lang="ts">
-  import { getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { getChartContext } from '../contexts/chart.js';
   import { createPattern } from '../utils/canvas.js';
 
+  const chartCtx = getChartContext();
+
   const uid = $props.id();
 
   let {
@@ -144,7 +148,7 @@
     ...restProps
   }: PatternProps = $props();
 
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   let canvasPattern = $state<CanvasPattern | null>(null);
 
@@ -154,7 +158,7 @@
     const lineDefs = Array.isArray(linesProp) ? linesProp : linesProp === true ? [{}] : [linesProp];
     for (const line of lineDefs) {
       // const spacing = Math.abs(line.spacing);
-      const stroke = line.color ?? 'var(--color-surface-content)';
+      const stroke = line.color ?? 'var(--color-surface-content, currentColor)';
       const strokeWidth = line.width ?? 1;
       const opacity = line.opacity ?? 1;
 
@@ -217,7 +221,7 @@
             cx: size / 4,
             cy: size / 4,
             r: circle.radius ?? 1,
-            fill: circle.color ?? 'var(--color-surface-content)',
+            fill: circle.color ?? 'var(--color-surface-content, currentColor)',
             opacity: circle.opacity ?? 1,
           },
           {
@@ -225,7 +229,7 @@
             cx: (size * 3) / 4,
             cy: (size * 3) / 4,
             r: circle.radius ?? 1,
-            fill: circle.color ?? 'var(--color-surface-content)',
+            fill: circle.color ?? 'var(--color-surface-content, currentColor)',
             opacity: circle.opacity ?? 1,
           }
         );
@@ -235,7 +239,7 @@
           cx: size / 2,
           cy: size / 2,
           r: circle.radius ?? 1,
-          fill: circle.color ?? 'var(--color-surface-content)',
+          fill: circle.color ?? 'var(--color-surface-content, currentColor)',
           opacity: circle.opacity ?? 1,
         });
       }
@@ -247,25 +251,116 @@
     canvasPattern = pattern;
   }
 
-  if (renderCtx === 'canvas') {
-    registerCanvasComponent({
+  if (layerCtx === 'canvas') {
+    chartCtx.registerComponent({
       name: 'Pattern',
-      render,
-      deps: () => [width, height, shapes, background],
+      kind: 'group',
+      canvasRender: {
+        render,
+        deps: () => [width, height, shapes, background],
+      },
     });
   }
+
+  function withOpacity(color: string, opacity: number) {
+    return opacity === 1 ? color : `color-mix(in srgb, ${color} ${opacity * 100}%, transparent)`;
+  }
+
+  // Build a CSS `background` value from lines/circles/background.
+  // Uses repeating-linear-gradient for lines and radial-gradient for circles
+  // so CSS variables/classes resolve natively in the HTML layer.
+  function createCSSPattern(): string {
+    const layers: string[] = [];
+
+    if (linesProp) {
+      const lineDefs = Array.isArray(linesProp)
+        ? linesProp
+        : linesProp === true
+          ? [{}]
+          : [linesProp];
+      for (const line of lineDefs) {
+        const color = withOpacity(
+          line.color ?? 'var(--color-surface-content, currentColor)',
+          line.opacity ?? 1
+        );
+        const sw = line.width ?? 1;
+
+        let rotate = Math.round(line.rotate ?? 0) % 360;
+        if (rotate > 180) rotate = rotate - 360;
+        else if (rotate > 90) rotate = rotate - 180;
+        else if (rotate < -180) rotate = rotate + 360;
+        else if (rotate < -90) rotate = rotate + 180;
+
+        let angle: number;
+        let period: number;
+        if (rotate === 0) {
+          angle = 0;
+          period = height;
+        } else if (rotate === 90) {
+          angle = 90;
+          period = width;
+        } else if (rotate > 0) {
+          angle = 45;
+          period = (width * height) / Math.sqrt(width * width + height * height);
+        } else {
+          angle = 135;
+          period = (width * height) / Math.sqrt(width * width + height * height);
+        }
+
+        layers.push(
+          `repeating-linear-gradient(${angle}deg, ${color} 0 ${sw}px, transparent ${sw}px ${period}px)`
+        );
+      }
+    }
+
+    if (circlesProp) {
+      const circleDefs = Array.isArray(circlesProp)
+        ? circlesProp
+        : circlesProp === true
+          ? [{}]
+          : [circlesProp];
+      for (const circle of circleDefs) {
+        const color = withOpacity(
+          circle.color ?? 'var(--color-surface-content, currentColor)',
+          circle.opacity ?? 1
+        );
+        const r = circle.radius ?? 1;
+
+        if (circle.stagger) {
+          layers.push(
+            `radial-gradient(circle at 25% 25%, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`,
+            `radial-gradient(circle at 75% 75%, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`
+          );
+        } else {
+          layers.push(
+            `radial-gradient(circle at center, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`
+          );
+        }
+      }
+    }
+
+    // `background` may be either a plain color or an image value (e.g. `linear-gradient(...)`
+    // when used as `<Pattern background={gradient}>`). Images go in the image-layer list
+    // tiled at the pattern size (after shape layers so they paint underneath);
+    // colors go in the background-color slot.
+    const isImage = background != null && /gradient\(|url\(/i.test(background);
+    if (isImage) layers.push(`${background} 0 0 / ${width}px ${height}px`);
+
+    if (layers.length === 0) return background ?? 'transparent';
+    return !isImage && background ? `${layers.join(', ')}, ${background}` : layers.join(', ');
+  }
 </script>
 
-{#if renderCtx === 'canvas'}
+{#if layerCtx === 'canvas'}
   {@render children?.({ id, pattern: asAny(canvasPattern) })}
-{:else if renderCtx === 'svg'}
+{:else if layerCtx === 'svg'}
   <defs>
     <pattern
       {id}
       {width}
       {height}
       patternUnits="userSpaceOnUse"
-      {...extractLayerProps(restProps, 'pattern')}
+      {...extractLayerProps(restProps, 'lc-pattern')}
     >
       {#if patternContent}
         {@render patternContent?.()}
@@ -298,4 +393,6 @@
   </defs>
 
   {@render children?.({ id, pattern: `url(#${id})` })}
+{:else if layerCtx === 'html'}
+  {@render children?.({ id, pattern: createCSSPattern() })}
 {/if}

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

@@ -75,7 +75,9 @@ export type PatternPropsWithoutHTML = {
      */
     background?: string;
     /**
-     * Render as a child of the pattern
+     * Render as a child of the pattern.
+     *
+     * Note: only supported on the `<Svg>` layer.
      */
     patternContent?: Snippet;
     children?: Snippet<[{