layerchart 2.0.0-next.1 → 2.0.0-next.2

package/dist/components/ChartClipPath.svelte

@@ -1,23 +1,45 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { Without } from '../utils/types.js';
+
+  export type ChartClipPathPropsWithoutHTML = {
+    /**
+     * Include padding area (ex. axis)
+     *
+     * @default false
+     */
+    full?: boolean;
+
+    /**
+     * Disable clipping (show all)
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    children?: Snippet;
+  };
+
+  export type ChartClipPathProps = ChartClipPathPropsWithoutHTML &
+    Without<Omit<RectClipPathProps, 'width' | 'height'>, ChartClipPathPropsWithoutHTML>;
+</script>
+
 <script lang="ts">
-  import { chartContext } from './ChartContext.svelte';
-  import RectClipPath from './RectClipPath.svelte';
+  import { getChartContext } from './Chart.svelte';
 
-  const { width, height, padding } = chartContext();
+  import RectClipPath, { type RectClipPathProps } from './RectClipPath.svelte';
+  import { extractLayerProps } from '../utils/attributes.js';
 
-  /** Include padding area (ex. axis) */
-  export let full = false;
+  let { full = false, disabled = false, ...restProps }: ChartClipPathProps = $props();
 
-  /** Disable clipping (show all) */
-  export let disabled: boolean = false;
+  const ctx = getChartContext();
 </script>
 
 <RectClipPath
-  x={full && $padding.left ? -$padding.left : 0}
-  y={full && $padding.top ? -$padding.top : 0}
-  width={$width + (full ? ($padding?.left ?? 0) + ($padding?.right ?? 0) : 0)}
-  height={$height + (full ? ($padding?.top ?? 0) + ($padding?.bottom ?? 0) : 0)}
+  x={full && ctx.padding.left ? -ctx.padding.left : 0}
+  y={full && ctx.padding.top ? -ctx.padding.top : 0}
   {disabled}
-  {...$$restProps}
->
-  <slot />
-</RectClipPath>
+  height={ctx.height + (full ? (ctx.padding?.top ?? 0) + (ctx.padding?.bottom ?? 0) : 0)}
+  width={ctx.width + (full ? (ctx.padding?.left ?? 0) + (ctx.padding?.right ?? 0) : 0)}
+  {...extractLayerProps(restProps, 'chart-clip-path')}
+/>

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

@@ -1,20 +1,22 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        full?: boolean | undefined;
-        disabled?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+import type { Without } from '../utils/types.js';
+export type ChartClipPathPropsWithoutHTML = {
+    /**
+     * Include padding area (ex. axis)
+     *
+     * @default false
+     */
+    full?: boolean;
+    /**
+     * Disable clipping (show all)
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    children?: Snippet;
 };
-export type ChartClipPathProps = typeof __propDef.props;
-export type ChartClipPathEvents = typeof __propDef.events;
-export type ChartClipPathSlots = typeof __propDef.slots;
-export default class ChartClipPath extends SvelteComponentTyped<ChartClipPathProps, ChartClipPathEvents, ChartClipPathSlots> {
-}
-export {};
+export type ChartClipPathProps = ChartClipPathPropsWithoutHTML & Without<Omit<RectClipPathProps, 'width' | 'height'>, ChartClipPathPropsWithoutHTML>;
+import { type RectClipPathProps } from './RectClipPath.svelte';
+declare const ChartClipPath: import("svelte").Component<ChartClipPathProps, {}, "">;
+type ChartClipPath = ReturnType<typeof ChartClipPath>;
+export default ChartClipPath;

package/dist/components/Circle.svelte

@@ -1,54 +1,108 @@
+<script lang="ts" module>
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+
+  export type CirclePropsWithoutHTML = {
+    /**
+     * The center x position of the circle.
+     *
+     * @default 0
+     */
+    cx?: number;
+
+    /**
+     * The initial center x position of the circle.
+     *
+     * @default cx
+     */
+    initialCx?: number;
+
+    /**
+     * The center y position of the circle.
+     *
+     * @default 0
+     */
+    cy?: number;
+
+    /**
+     * The initial center y position of the circle.
+     *
+     * @default cy
+     */
+    initialCy?: number;
+
+    /**
+     * The radius of the circle.
+     *
+     * @default 1
+     */
+    r?: number;
+
+    /**
+     * The initial radius of the circle.
+     *
+     * @default r
+     */
+    initialR?: number;
+
+    /**
+     * A bindable reference to the `<circle>` element
+     *
+     * @bindable
+     */
+    ref?: SVGCircleElement;
+
+    motion?: MotionProp;
+  } & CommonStyleProps;
+
+  export type CircleProps = CirclePropsWithoutHTML &
+    Without<SVGAttributes<Element>, CirclePropsWithoutHTML>;
+</script>
+
 <script lang="ts">
-  import { onDestroy, tick } from 'svelte';
-  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
-  import { objectId } from '@layerstack/utils/object';
   import { merge } from 'lodash-es';
 
   import { getRenderContext } from './Chart.svelte';
-  import { motionStore } from '../stores/motionStore.js';
-  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
   import { renderCircle, type ComputedStylesOptions } from '../utils/canvas.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { createKey } from '../utils/key.svelte.js';
+  import { layerClass } from '../utils/attributes.js';
+
+  let {
+    cx = 0,
+    initialCx: initialCxProp,
+    cy = 0,
+    initialCy: initialCyProp,
+    r = 1,
+    initialR: initialRProp,
+    motion,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    ref: refProp = $bindable(),
+    ...restProps
+  }: CircleProps = $props();
+
+  let ref = $state<SVGCircleElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
-  export let cx: number = 0;
-  export let initialCx = cx;
-
-  export let cy: number = 0;
-  export let initialCy = cy;
-
-  export let r: number = 1;
-  export let initialR = r;
-
-  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
-  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
-
-  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: string | undefined = undefined;
-  export { className as class };
-
-  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
-  export let onpointerdown: ((e: PointerEvent) => 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;
-
-  let tweened_cx = motionStore(initialCx, { spring, tweened });
-  let tweened_cy = motionStore(initialCy, { spring, tweened });
-  let tweened_r = motionStore(initialR, { spring, tweened });
+  const initialCx = initialCxProp ?? cx;
+  const initialCy = initialCyProp ?? cy;
+  const initialR = initialRProp ?? r;
 
-  $: tick().then(() => {
-    tweened_cx.set(cx);
-    tweened_cy.set(cy);
-    tweened_r.set(r);
-  });
+  const renderCtx = getRenderContext();
 
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
+  const motionCx = createMotion(initialCx, () => cx, motion);
+  const motionCy = createMotion(initialCy, () => cy, motion);
+  const motionR = createMotion(initialR, () => r, motion);
 
   function render(
     ctx: CanvasRenderingContext2D,
@@ -56,7 +110,7 @@
   ) {
     renderCircle(
       ctx,
-      { cx: $tweened_cx, cy: $tweened_cy, r: $tweened_r },
+      { cx: motionCx.current, cy: motionCy.current, r: motionR.current },
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
@@ -67,62 +121,47 @@
   }
 
   // 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 changes
-    $tweened_cx &&
-      $tweened_cy &&
-      $tweened_r &&
-      fillKey &&
-      fillOpacity &&
-      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: 'Circle',
       render,
       events: {
-        click: onclick,
-        pointerdown: onpointerdown,
-        pointerenter: onpointerenter,
-        pointermove: onpointermove,
-        pointerleave: onpointerleave,
+        click: restProps.onclick,
+        pointerdown: restProps.onpointerdown,
+        pointerenter: restProps.onpointerenter,
+        pointermove: restProps.onpointermove,
+        pointerleave: restProps.onpointerleave,
       },
+      deps: () => [
+        motionCx.current,
+        motionCy.current,
+        motionR.current,
+        fillKey.current,
+        fillOpacity,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        className,
+      ],
     });
   }
-
-  onDestroy(() => {
-    if (renderContext === 'canvas') {
-      canvasUnregister();
-    }
-  });
 </script>
 
-{#if renderContext === 'svg'}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
+{#if renderCtx === 'svg'}
   <circle
-    cx={$tweened_cx}
-    cy={$tweened_cy}
-    r={$tweened_r}
+    bind:this={ref}
+    cx={motionCx.current}
+    cy={motionCy.current}
+    r={motionR.current}
     {fill}
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    class={cls(fill == null && 'fill-surface-content', className)}
-    {...$$restProps}
-    on:click={onclick}
-    on:pointerdown={onpointerdown}
-    on:pointerenter={onpointerenter}
-    on:pointermove={onpointermove}
-    on:pointerleave={onpointerleave}
+    class={cls(layerClass('circle'), fill == null && 'fill-surface-content', className)}
+    {...restProps}
   />
 {/if}

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

@@ -0,0 +1,52 @@
+import type { CommonStyleProps, Without } from '../utils/types.js';
+export type CirclePropsWithoutHTML = {
+    /**
+     * The center x position of the circle.
+     *
+     * @default 0
+     */
+    cx?: number;
+    /**
+     * The initial center x position of the circle.
+     *
+     * @default cx
+     */
+    initialCx?: number;
+    /**
+     * The center y position of the circle.
+     *
+     * @default 0
+     */
+    cy?: number;
+    /**
+     * The initial center y position of the circle.
+     *
+     * @default cy
+     */
+    initialCy?: number;
+    /**
+     * The radius of the circle.
+     *
+     * @default 1
+     */
+    r?: number;
+    /**
+     * The initial radius of the circle.
+     *
+     * @default r
+     */
+    initialR?: number;
+    /**
+     * A bindable reference to the `<circle>` element
+     *
+     * @bindable
+     */
+    ref?: SVGCircleElement;
+    motion?: MotionProp;
+} & CommonStyleProps;
+export type CircleProps = CirclePropsWithoutHTML & Without<SVGAttributes<Element>, CirclePropsWithoutHTML>;
+import { type MotionProp } from '../utils/motion.svelte.js';
+import type { SVGAttributes } from 'svelte/elements';
+declare const Circle: import("svelte").Component<CircleProps, {}, "ref">;
+type Circle = ReturnType<typeof Circle>;
+export default Circle;

package/dist/components/CircleClipPath.svelte

@@ -1,25 +1,85 @@
-<script lang="ts">
-  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+<script lang="ts" module>
+  import type { MotionProp } from '../utils/motion.svelte.js';
+  import ClipPath, { type ClipPathPropsWithoutHTML } from './ClipPath.svelte';
+
+  export type CircleClipPathPropsWithoutHTML = {
+    /**
+     * A unique id for the clipPath.
+     */
+    id?: string;
+
+    /**
+     * The center x position of the circle.
+     *
+     * @default 0
+     */
+    cx?: number;
+
+    /**
+     * The center y position of the circle.
+     *
+     * @default 0
+     */
+    cy?: number;
+
+    /**
+     * The radius of the circle.
+     *
+     * @required
+     */
+    r: number;
+
+    /**
+     * Whether to disable clipping (show all).
+     *
+     * @default false
+     */
+    disabled?: boolean;
 
-  import { uniqueId } from '@layerstack/utils';
+    /**
+     * A bindable reference to the underlying `<circle>` element'
+     *
+     * @bindable
+     */
+    ref?: SVGCircleElement;
 
-  import ClipPath from './ClipPath.svelte';
+    /**
+     * The children snippet to render content inside the clipPath.
+     */
+    children?: ClipPathPropsWithoutHTML['children'];
+
+    motion?: MotionProp;
+  };
+</script>
+
+<script lang="ts">
   import Circle from './Circle.svelte';
+  import { createId } from '../utils/createId.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+
+  const uid = $props.id();
 
-  /** Unique id for clipPath */
-  export let id: string = uniqueId('clipPath-');
+  let {
+    id = createId('clipPath-', uid),
+    cx = 0,
+    cy = 0,
+    r,
+    motion,
+    disabled = false,
+    ref: refProp = $bindable(),
+    children,
+    ...restProps
+  }: CircleClipPathPropsWithoutHTML = $props();
 
-  export let cx: number = 0;
-  export let cy: number = 0;
-  export let r: number;
-  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
-  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+  let ref = $state<SVGCircleElement>();
 
-  /** Disable clipping (show all) */
-  export let disabled: boolean = false;
+  $effect.pre(() => {
+    refProp = ref;
+  });
 </script>
 
-<ClipPath {id} {disabled} let:url>
-  <Circle slot="clip" {cx} {cy} {r} {spring} {tweened} {...$$restProps} />
-  <slot {id} {url} />
+<ClipPath {id} {disabled} {children}>
+  {#snippet clip()}
+    <Circle {cx} {cy} {r} {motion} {...extractLayerProps(restProps, 'clip-path-circle')} bind:ref />
+  {/snippet}
 </ClipPath>

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

@@ -0,0 +1,46 @@
+import type { MotionProp } from '../utils/motion.svelte.js';
+import { type ClipPathPropsWithoutHTML } from './ClipPath.svelte';
+export type CircleClipPathPropsWithoutHTML = {
+    /**
+     * A unique id for the clipPath.
+     */
+    id?: string;
+    /**
+     * The center x position of the circle.
+     *
+     * @default 0
+     */
+    cx?: number;
+    /**
+     * The center y position of the circle.
+     *
+     * @default 0
+     */
+    cy?: number;
+    /**
+     * The radius of the circle.
+     *
+     * @required
+     */
+    r: number;
+    /**
+     * Whether to disable clipping (show all).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * A bindable reference to the underlying `<circle>` element'
+     *
+     * @bindable
+     */
+    ref?: SVGCircleElement;
+    /**
+     * The children snippet to render content inside the clipPath.
+     */
+    children?: ClipPathPropsWithoutHTML['children'];
+    motion?: MotionProp;
+};
+declare const CircleClipPath: import("svelte").Component<CircleClipPathPropsWithoutHTML, {}, "ref">;
+type CircleClipPath = ReturnType<typeof CircleClipPath>;
+export default CircleClipPath;

package/dist/components/ClipPath.svelte

@@ -1,19 +1,65 @@
-<script lang="ts">
-  import { uniqueId } from '@layerstack/utils';
+<script lang="ts" module>
+  import { createId } from '../utils/createId.js';
+  import type { Without } from '../utils/types.js';
+  import { layerClass } from '../utils/attributes.js';
+  import type { Snippet } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  export type ClipPathPropsWithoutHTML = {
+    /**
+     * A unique id for the clipPath.
+     *
+     */
+    id?: string;
+
+    /**
+     * Use existing path or shape (by id) for clipPath
+     *
+     */
+    useId?: string;
+
+    /**
+     * Whether to disable clipping (show all).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * A snippet to insert content into the clipPath.
+     * Provides the id for the clipPath as a snippet prop.
+     */
+    clip?: Snippet<[{ id: string }]>;
 
-  /** Unique id for clipPath */
-  export let id: string = uniqueId('clipPath-');
+    /**
+     * Children to render in the `<g>` element that links to the clipPath (if not disabled).
+     * Provides the id, url, and useId for the clipPath as snippet props.
+     */
+    children?: Snippet<[{ id: string; url: string; useId?: string }]>;
+  };
+
+  export type ClipPathProps = ClipPathPropsWithoutHTML &
+    Without<SVGAttributes<SVGClipPathElement>, ClipPathPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  const uid = $props.id();
 
-  /** Use existing path or shape (by id) for clipPath */
-  export let useId: string | undefined = undefined;
+  let {
+    id = createId('clipPath-', uid),
+    useId,
+    disabled = false,
+    children,
+    clip,
+    ...restProps
+  }: ClipPathPropsWithoutHTML = $props();
 
-  /** Disable clipping (show all) */
-  export let disabled: boolean = false;
+  const url = $derived(`url(#${id})`);
 </script>
 
 <defs>
-  <clipPath {id} {...$$restProps}>
-    <slot name="clip" {id} />
+  <clipPath {id} {...restProps}>
+    {@render clip?.({ id })}
 
     {#if useId}
       <use href="#{useId}" />
@@ -21,13 +67,12 @@
   </clipPath>
 </defs>
 
-{#if $$slots.default}
+{#if children}
   {#if disabled}
-    <slot />
+    {@render children({ id, url, useId })}
   {:else}
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <g style:clip-path="url(#{id})">
-      <slot {id} url="url(#{id})" {useId} />
+    <g style:clip-path={url} class={layerClass('clip-path-g')}>
+      {@render children({ id, url, useId })}
     </g>
   {/if}
 {/if}