layerchart 2.0.0-next.1 → 2.0.0-next.3

package/dist/components/RadialGradient.svelte

@@ -1,91 +1,163 @@
-<script lang="ts">
-  import { onDestroy } from 'svelte';
-  import { uniqueId } from '@layerstack/utils';
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  export type RadialGradientPropsWithoutHTML = {
+    /**
+     * Unique id for radialGradient
+     */
+    id?: string;
+
+    /**
+     * Array array of strings (colors), will equally distributed from 0-100%.
+     * If array of tuples, will use first value as the offset, and second as color
+     *
+     * @default ['var(--tw-gradient-from)', 'var(--tw-gradient-to)']
+     */
+    stops?: string[] | [string | number, string][];
+
+    /**
+     * The x coordinate of the center of the gradient
+     * @default '50%'
+     */
+    cx?: string;
+
+    /**
+     * The y coordinate of the center of the gradient
+     * @default '50%'
+     */
+    cy?: string;
+
+    /**
+     * The x coordinate of the focal point of the gradient
+     * @default cx
+     */
+    fx?: string;
+
+    /**
+     * The y coordinate of the focal point of the gradient
+     * @default cy
+     */
+    fy?: string;
+
+    /**
+     * The radius of the gradient
+     */
+    r?: string;
+
+    // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
+    // fr = '0%';
+
+    /**
+     * Indicates how the gradient behaves if it starts or ends inside the bounds
+     * of the shape containing the gradient
+     *
+     * @default 'pad'
+     */
+    spreadMethod?: 'pad' | 'reflect' | 'repeat';
+
+    /**
+     * Transform attribute for the gradient
+     */
+    transform?: string | null;
+
+    /**
+     * Define the coordinate system for attributes (i.e. gradientUnits)
+     *
+     * @default 'objectBoundingBox'
+     */
+    units?: 'objectBoundingBox' | 'userSpaceOnUse';
+
+    children?: Snippet<[{ id: string; gradient: string }]>;
+
+    /**
+     * Render as a child of the gradient and will opt out of the default stops
+     * being rendered.
+     */
+    stopsContent?: Snippet;
+  };
+
+  export type RadialGradientProps = RadialGradientPropsWithoutHTML &
+    Without<SVGAttributes<SVGRadialGradientElement>, RadialGradientPropsWithoutHTML>;
+</script>
 
+<script lang="ts">
   import { getRenderContext } from './Chart.svelte';
-  import { chartContext } from './ChartContext.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
   import { getComputedStyles } from '../utils/canvas.js';
   import { parsePercent } from '../utils/math.js';
+  import { getChartContext } from './Chart.svelte';
+  import { createId } from '../utils/createId.js';
+  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { cls } from '@layerstack/tailwind';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('radialGradient-', uid),
+    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
+    cx = '50%',
+    cy = '50%',
+    fx = cx,
+    fy = cy,
+    r = '50%',
+    spreadMethod = 'pad',
+    transform = undefined,
+    units = 'objectBoundingBox',
+    children,
+    stopsContent,
+    class: className,
+    ...restProps
+  }: RadialGradientProps = $props();
 
-  /** Unique id for linearGradient */
-  export let id: string = uniqueId('radialGradient-');
-
-  /** Array array of strings (colors), will equally distributed from 0-100%.  If array of tuples, will use first value as the offset, and second as color */
-  export let stops: string[] | [string | number, string][] = [
-    'var(--tw-gradient-from)',
-    'var(--tw-gradient-to)',
-  ];
-
-  export let cx = '50%';
-  export let cy = '50%';
-  export let fx = cx;
-  export let fy = cy;
-  export let r = '50%';
   // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
   // export let fr = '0%';
 
-  /** Indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient */
-  export let spreadMethod: 'pad' | 'reflect' | 'repeat' = 'pad';
-
-  export let transform: string | null | undefined = undefined;
-
-  /** Define the coordinate system for attributes (i.e. gradientUnits) */
-  export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
-
-  const { width, height, padding } = chartContext();
+  const ctx = getChartContext();
 
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
+  const renderCtx = getRenderContext();
 
-  let canvasGradient: CanvasGradient;
+  let canvasGradient = $state<CanvasGradient>();
 
-  function render(ctx: CanvasRenderingContext2D) {
+  function render(_ctx: CanvasRenderingContext2D) {
     // TODO: Set correct values: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient.  See also: LinearGradient
     // TODO: Memoize `createRadialGradient()` (see LinearGradient)
-    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, 0);
+    const gradient = _ctx.createRadialGradient(0, 0, 0, 0, 0, 0);
 
     // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
-    stops.forEach((stop, i) => {
+    for (let i = 0; i < stops.length; i++) {
+      const stop = stops[i];
       if (Array.isArray(stop)) {
-        const { fill } = getComputedStyles(ctx.canvas, {
+        const { fill } = getComputedStyles(_ctx.canvas, {
           styles: { fill: stop[1] },
-          classes: $$props.class,
+          classes: className,
         });
         gradient.addColorStop(parsePercent(stop[0]), fill);
       } else {
-        const { fill } = getComputedStyles(ctx.canvas, {
+        const { fill } = getComputedStyles(_ctx.canvas, {
           styles: { fill: stop },
-          classes: $$props.class,
+          classes: className,
         });
         gradient.addColorStop(i / (stops.length - 1), fill);
       }
-    });
+    }
 
     canvasGradient = gradient;
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
-  $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Gradient', render });
-  }
-
-  $: if (renderContext === 'canvas') {
-    // Redraw when props changes (TODO: styles, class, etc)
-    stops && cx && cy && fx && fy && $width && $height;
-    canvasContext.invalidate();
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
+      name: 'Gradient',
+      render,
+      deps: () => [stops, cx, cy, fx, fy, ctx.width, ctx.height],
+    });
   }
-
-  onDestroy(() => {
-    if (renderContext === 'canvas') {
-      canvasUnregister();
-    }
-  });
 </script>
 
-{#if renderContext === 'canvas'}
-  <slot {id} gradient={canvasGradient} />
-{:else if renderContext === 'svg'}
+{#if renderCtx === 'canvas'}
+  {@render children?.({ id, gradient: canvasGradient as any })}
+{:else if renderCtx === 'svg'}
   <defs>
     <radialGradient
       {id}
@@ -97,21 +169,22 @@
       {spreadMethod}
       gradientTransform={transform}
       gradientUnits={units}
-      {...$$restProps}
+      {...extractLayerProps({ ...restProps, class: className }, 'radial-gradient')}
     >
-      <slot name="stops">
-        {#if stops}
-          {#each stops as stop, i}
-            {#if Array.isArray(stop)}
-              <stop offset={stop[0]} stop-color={stop[1]} />
-            {:else}
-              <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
-            {/if}
-          {/each}
-        {/if}
-      </slot>
+      {#if stopsContent}
+        {@render stopsContent()}
+      {:else if stops}
+        {@const stopClass = cls(layerClass('radial-gradient-stop'), className)}
+        {#each stops as stop, i}
+          {#if Array.isArray(stop)}
+            <stop offset={stop[0]} stop-color={stop[1]} class={stopClass} />
+          {:else}
+            <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} class={stopClass} />
+          {/if}
+        {/each}
+      {/if}
     </radialGradient>
   </defs>
 
-  <slot {id} gradient="url(#{id})" />
+  {@render children?.({ id, gradient: `url(#${id})` })}
 {/if}

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

@@ -1,32 +1,70 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string | undefined;
-        stops?: string[] | [string | number, string][] | undefined;
-        cx?: string | undefined;
-        cy?: string | undefined;
-        fx?: string | undefined;
-        fy?: string | undefined;
-        r?: string | undefined;
-        spreadMethod?: "pad" | "reflect" | "repeat" | undefined;
-        transform?: string | null | undefined | undefined;
-        units?: "objectBoundingBox" | "userSpaceOnUse" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            id: string;
-            gradient: string;
-        };
-        stops: {};
-    };
+import type { Snippet } from 'svelte';
+import type { Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+export type RadialGradientPropsWithoutHTML = {
+    /**
+     * Unique id for radialGradient
+     */
+    id?: string;
+    /**
+     * Array array of strings (colors), will equally distributed from 0-100%.
+     * If array of tuples, will use first value as the offset, and second as color
+     *
+     * @default ['var(--tw-gradient-from)', 'var(--tw-gradient-to)']
+     */
+    stops?: string[] | [string | number, string][];
+    /**
+     * The x coordinate of the center of the gradient
+     * @default '50%'
+     */
+    cx?: string;
+    /**
+     * The y coordinate of the center of the gradient
+     * @default '50%'
+     */
+    cy?: string;
+    /**
+     * The x coordinate of the focal point of the gradient
+     * @default cx
+     */
+    fx?: string;
+    /**
+     * The y coordinate of the focal point of the gradient
+     * @default cy
+     */
+    fy?: string;
+    /**
+     * The radius of the gradient
+     */
+    r?: string;
+    /**
+     * Indicates how the gradient behaves if it starts or ends inside the bounds
+     * of the shape containing the gradient
+     *
+     * @default 'pad'
+     */
+    spreadMethod?: 'pad' | 'reflect' | 'repeat';
+    /**
+     * Transform attribute for the gradient
+     */
+    transform?: string | null;
+    /**
+     * Define the coordinate system for attributes (i.e. gradientUnits)
+     *
+     * @default 'objectBoundingBox'
+     */
+    units?: 'objectBoundingBox' | 'userSpaceOnUse';
+    children?: Snippet<[{
+        id: string;
+        gradient: string;
+    }]>;
+    /**
+     * Render as a child of the gradient and will opt out of the default stops
+     * being rendered.
+     */
+    stopsContent?: Snippet;
 };
-export type RadialGradientProps = typeof __propDef.props;
-export type RadialGradientEvents = typeof __propDef.events;
-export type RadialGradientSlots = typeof __propDef.slots;
-export default class RadialGradient extends SvelteComponentTyped<RadialGradientProps, RadialGradientEvents, RadialGradientSlots> {
-}
-export {};
+export type RadialGradientProps = RadialGradientPropsWithoutHTML & Without<SVGAttributes<SVGRadialGradientElement>, RadialGradientPropsWithoutHTML>;
+declare const RadialGradient: import("svelte").Component<RadialGradientProps, {}, "">;
+type RadialGradient = ReturnType<typeof RadialGradient>;
+export default RadialGradient;

package/dist/components/Rect.svelte

@@ -1,69 +1,95 @@
+<script lang="ts" module>
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { createMotion, parseMotionProp, type MotionProp } from '../utils/motion.svelte.js';
+  import { renderRect, type ComputedStylesOptions } from '../utils/canvas.js';
+
+  export type RectPropsWithoutHTML = {
+    /**
+     * @default 0
+     */
+    x?: number;
+
+    /**
+     * @default x
+     */
+    initialX?: number;
+
+    /**
+     * @default 0
+     */
+    y?: number;
+
+    /**
+     * @default y
+     */
+    initialY?: number;
+    width: number;
+    initialWidth?: number;
+    height: number;
+    initialHeight?: number;
+    /**
+     * Underlying `<rect>` tag when using <Svg>. Useful for bindings.
+     *
+     * @bindable
+     */
+    ref?: SVGRectElement;
+
+    motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+  } & CommonStyleProps;
+
+  export type RectProps = RectPropsWithoutHTML &
+    Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML>;
+</script>
+
 <script lang="ts">
-  import { onDestroy, tick } from 'svelte';
-  import type { ClassValue } from 'svelte/elements';
   import { cls } from '@layerstack/tailwind';
-  import { objectId } from '@layerstack/utils/object';
   import { merge } from 'lodash-es';
 
-  import {
-    motionStore,
-    resolveOptions,
-    type SpringOptions,
-    type TweenedOptions,
-  } from '../stores/motionStore.js';
   import { getRenderContext } from './Chart.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
-  import { renderRect, type ComputedStylesOptions } from '../utils/canvas.js';
-
-  /** Undlying `<rect>` tag when using <Svg>. Useful for bindings. */
-  export let element: SVGRectElement | undefined = undefined;
-
-  export let x = 0;
-  export let initialX = x;
-
-  export let y = 0;
-  export let initialY = y;
-
-  export let width: number;
-  export let initialWidth = width;
-
-  export let height: number;
-  export let initialHeight = height;
-
-  export let fill: string | undefined = undefined;
-  export let fillOpacity: number | undefined = undefined;
-  export let stroke: string | undefined = undefined;
-  export let strokeWidth: number | undefined = undefined;
-  export let opacity: number | undefined = undefined;
-
-  let className: ClassValue | undefined = undefined;
-  export { className as class };
-
-  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
-  export let ondblclick: ((e: MouseEvent) => void) | undefined = undefined;
-  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointerover: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointerout: ((e: PointerEvent) => void) | undefined = undefined;
-
-  export let spring: boolean | SpringOptions | { [prop: string]: SpringOptions } = undefined;
-  export let tweened: boolean | TweenedOptions | { [prop: string]: TweenedOptions } = undefined;
-
-  let tweened_x = motionStore(initialX, resolveOptions('x', { spring, tweened }));
-  let tweened_y = motionStore(initialY, resolveOptions('y', { spring, tweened }));
-  let tweened_width = motionStore(initialWidth, resolveOptions('width', { spring, tweened }));
-  let tweened_height = motionStore(initialHeight, resolveOptions('height', { spring, tweened }));
-
-  $: tick().then(() => {
-    tweened_x.set(x);
-    tweened_y.set(y);
-    tweened_width.set(width);
-    tweened_height.set(height);
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { createKey } from '../utils/key.svelte.js';
+  import { layerClass } from '../utils/attributes.js';
+
+  let {
+    height,
+    width,
+    x = 0,
+    y = 0,
+    initialX = x,
+    initialY = y,
+    fill,
+    fillOpacity,
+    stroke,
+    initialHeight = height,
+    initialWidth = width,
+    strokeWidth,
+    opacity,
+    ref: refProp = $bindable(),
+    motion,
+    class: className,
+    onclick,
+    ondblclick,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    onpointerover,
+    onpointerout,
+    ...restProps
+  }: RectProps = $props();
+
+  let ref = $state<SVGRectElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
   });
 
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
+  const motionX = createMotion(initialX, () => x, parseMotionProp(motion, 'x'));
+  const motionY = createMotion(initialY, () => y, parseMotionProp(motion, 'y'));
+  const motionWidth = createMotion(initialWidth, () => width, parseMotionProp(motion, 'width'));
+  const motionHeight = createMotion(initialHeight, () => height, parseMotionProp(motion, 'height'));
+
+  const renderCtx = getRenderContext();
 
   function render(
     ctx: CanvasRenderingContext2D,
@@ -71,7 +97,12 @@
   ) {
     renderRect(
       ctx,
-      { x: $tweened_x, y: $tweened_y, width: $tweened_width, height: $tweened_height },
+      {
+        x: motionX.current,
+        y: motionY.current,
+        width: motionWidth.current,
+        height: motionHeight.current,
+      },
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
@@ -82,26 +113,11 @@
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  $: fillKey = fill && typeof fill === 'object' ? objectId(fill) : fill;
-  $: strokeKey = stroke && typeof stroke === 'object' ? objectId(stroke) : stroke;
-
-  $: if (renderContext === 'canvas') {
-    // Redraw when props change
-    $tweened_x &&
-      $tweened_y &&
-      $tweened_width &&
-      $tweened_height &&
-      fillKey &&
-      strokeKey &&
-      strokeWidth &&
-      opacity &&
-      className;
-    canvasContext.invalidate();
-  }
+  const fillKey = createKey(() => fill);
+  const strokeKey = createKey(() => stroke);
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
-  $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
       name: 'Rect',
       render,
       events: {
@@ -113,38 +129,41 @@
         pointerover: onpointerover,
         pointerout: onpointerout,
       },
+      deps: () => [
+        motionX.current,
+        motionY.current,
+        motionWidth.current,
+        motionHeight.current,
+        fillKey.current,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        className,
+      ],
     });
   }
-
-  onDestroy(() => {
-    if (renderContext === 'canvas') {
-      canvasUnregister();
-    }
-  });
 </script>
 
-{#if renderContext === 'svg'}
-  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
+{#if renderCtx === 'svg'}
   <rect
-    x={$tweened_x}
-    y={$tweened_y}
-    width={$tweened_width}
-    height={$tweened_height}
+    x={motionX.current}
+    y={motionY.current}
+    width={motionWidth.current}
+    height={motionHeight.current}
     {fill}
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    class={cls(fill == null && 'fill-surface-content', className)}
-    {...$$restProps}
-    on:click={onclick}
-    on:dblclick={ondblclick}
-    on:pointerenter={onpointerenter}
-    on:pointerover={onpointerover}
-    on:pointermove={onpointermove}
-    on:pointerout={onpointerout}
-    on:pointerleave={onpointerleave}
-    bind:this={element}
+    class={cls(layerClass('rect'), fill == null && 'fill-surface-content', className)}
+    {...restProps}
+    {onclick}
+    {ondblclick}
+    {onpointerenter}
+    {onpointermove}
+    {onpointerleave}
+    {onpointerover}
+    {onpointerout}
+    bind:this={ref}
   />
 {/if}

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

@@ -0,0 +1,36 @@
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+import { type MotionProp } from '../utils/motion.svelte.js';
+export type RectPropsWithoutHTML = {
+    /**
+     * @default 0
+     */
+    x?: number;
+    /**
+     * @default x
+     */
+    initialX?: number;
+    /**
+     * @default 0
+     */
+    y?: number;
+    /**
+     * @default y
+     */
+    initialY?: number;
+    width: number;
+    initialWidth?: number;
+    height: number;
+    initialHeight?: number;
+    /**
+     * Underlying `<rect>` tag when using <Svg>. Useful for bindings.
+     *
+     * @bindable
+     */
+    ref?: SVGRectElement;
+    motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+} & CommonStyleProps;
+export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML>;
+declare const Rect: import("svelte").Component<RectProps, {}, "ref">;
+type Rect = ReturnType<typeof Rect>;
+export default Rect;