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

package/dist/components/LinearGradient.svelte

@@ -1,55 +1,129 @@
-<script lang="ts">
-  import { onDestroy } from 'svelte';
-  import { uniqueId } from '@layerstack/utils';
+<script lang="ts" module>
+  import { asAny, type Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  export type LinearGradientPropsWithoutHTML = {
+    /**
+     * Unique id for linearGradient
+     */
+    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][];
+
+    /**
+     * Apply color stops top-to-bottom (true) or left-to-right (false)
+     *
+     * @default false
+     */
+    vertical?: boolean;
+
+    /**
+     * @default '0%'
+     */
+    x1?: string;
+
+    /**
+     * @default '0%'
+     */
+    y1?: string;
+
+    /**
+     * @default vertical ? '0%' : '100%'
+     */
+    x2?: string;
+    /**
+     * @default vertical ? '100%' : '0%'
+     */
+    y2?: string;
+
+    /**
+     * Rotate the gradient by a given angle in degrees
+     */
+    rotate?: number;
+
+    /**
+     * Define the coordinate system for attributes (i.e. gradientUnits)
+     *
+     * @default 'objectBoundingBox'
+     */
+    units?: 'objectBoundingBox' | 'userSpaceOnUse';
+
+    /**
+     * A bindable reference to the underlying `<linearGradient>` element
+     *
+     * @bindable
+     */
+    ref?: SVGLinearGradientElement;
+
+    /**
+     * Render as a child of the gradient and will opt out of the default stops
+     * being rendered.
+     */
+    stopsContent?: Snippet;
+
+    children?: Snippet<[{ id: string; gradient: string }]>;
+  };
+
+  export type LinearGradientProps = LinearGradientPropsWithoutHTML &
+    Without<SVGAttributes<SVGLinearGradientElement>, LinearGradientPropsWithoutHTML>;
+</script>
 
-  import { getRenderContext } from './Chart.svelte';
-  import { chartContext } from './ChartContext.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
+<script lang="ts">
+  import { getChartContext, getRenderContext } from './Chart.svelte';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
   import { createLinearGradient, getComputedStyles } from '../utils/canvas.js';
   import { parsePercent } from '../utils/math.js';
+  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('linearGradient-', uid),
+    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
+    vertical = false,
+    x1 = '0%',
+    y1 = '0%',
+    x2 = vertical ? '0%' : '100%',
+    y2 = vertical ? '100%' : '0%',
+    rotate,
+    units = 'objectBoundingBox',
+    ref: refProp = $bindable(),
+    class: className,
+    stopsContent,
+    children,
+    ...restProps
+  }: LinearGradientProps = $props();
+
+  let ref = $state<SVGLinearGradientElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
-  /** Unique id for linearGradient */
-  export let id: string = uniqueId('linearGradient-');
-
-  /** 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)',
-  ];
-
-  /** Apply color stops top-to-bottom (true) or left-to-right (false) */
-  export let vertical = false;
-  export let x1 = '0%';
-  export let y1 = '0%';
-  export let x2 = vertical ? '0%' : '100%';
-  export let y2 = vertical ? '100%' : '0%';
-
-  export let rotate: number | undefined = undefined;
-
-  /** Define the coordinate system for attributes (i.e. gradientUnits) */
-  export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
-
-  let className: string | undefined = undefined;
-  export { className as class };
-
-  const { width, height, padding } = chartContext();
-
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
+  const ctx = getChartContext();
+  const renderCtx = getRenderContext();
 
-  let canvasGradient: CanvasGradient;
+  let canvasGradient = $state<CanvasGradient>();
 
-  function render(ctx: CanvasRenderingContext2D) {
+  function render(_ctx: CanvasRenderingContext2D) {
     // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
     const _stops = stops.map((stop, i) => {
       if (Array.isArray(stop)) {
-        const { fill } = getComputedStyles(ctx.canvas, {
+        const { fill } = getComputedStyles(_ctx.canvas, {
           styles: { fill: stop[1] },
           classes: className,
         });
         return { offset: parsePercent(stop[0]), color: fill };
       } else {
-        const { fill } = getComputedStyles(ctx.canvas, {
+        const { fill } = getComputedStyles(_ctx.canvas, {
           styles: { fill: stop },
           classes: className,
         });
@@ -57,41 +131,38 @@
       }
     });
 
-    // TODO: Use x1/y1/x2/y2 values (convert from pecentage strings)
+    // TODO: Use x1/y1/x2/y2 values (convert from percentage strings)
     const gradient = createLinearGradient(
-      ctx,
-      $padding.left,
-      $padding.top,
-      vertical ? $padding.left : $width - $padding.right,
-      vertical ? $height + $padding.bottom : $padding.top,
+      _ctx,
+      ctx.padding.left,
+      ctx.padding.top,
+      vertical ? ctx.padding.left : ctx.width - ctx.padding.right,
+      vertical ? ctx.height + ctx.padding.bottom : ctx.padding.top,
       _stops
     );
 
     canvasGradient = gradient;
   }
 
-  $: if (renderContext === 'canvas') {
-    x1 && y1 && x2 && y2 && stops && className;
-    canvasContext.invalidate();
-  }
-
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
-  $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Gradient', render });
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
+      name: 'Gradient',
+      render,
+      deps: () => [x1, y1, x2, y2, stops, className],
+    });
   }
-
-  onDestroy(() => {
-    if (renderContext === 'canvas') {
-      canvasUnregister();
-    }
-  });
 </script>
 
-{#if renderContext === 'canvas'}
-  <slot {id} gradient={canvasGradient} />
-{:else if renderContext === 'svg'}
+{#if renderCtx === 'canvas'}
+  <!--
+	TODO: we can probably pass the context to coerce this type so we don't need a bunch
+	of predicates to check if the gradient is a CanvasGradient or not...
+	-->
+  {@render children?.({ id, gradient: asAny(canvasGradient) })}
+{:else if renderCtx === 'svg'}
   <defs>
     <linearGradient
+      bind:this={ref}
       {id}
       {x1}
       {y1}
@@ -99,25 +170,29 @@
       {y2}
       gradientTransform={rotate ? `rotate(${rotate})` : ''}
       gradientUnits={units}
-      {...$$restProps}
+      {...extractLayerProps(restProps, 'linear-gradient')}
     >
-      <slot name="stops">
-        {#if stops}
-          {#each stops as stop, i}
-            {#if Array.isArray(stop)}
-              <stop offset={stop[0]} stop-color={stop[1]} class={className} />
-            {:else}
-              <stop
-                offset="{i * (100 / (stops.length - 1))}%"
-                stop-color={stop}
-                class={className}
-              />
-            {/if}
-          {/each}
-        {/if}
-      </slot>
+      {#if stopsContent}
+        {@render stopsContent?.()}
+      {:else if stops}
+        {#each stops as stop, i}
+          {#if Array.isArray(stop)}
+            <stop
+              offset={stop[0]}
+              stop-color={stop[1]}
+              class={cls(layerClass('linear-gradient-stop'), className)}
+            />
+          {:else}
+            <stop
+              offset="{i * (100 / (stops.length - 1))}%"
+              stop-color={stop}
+              class={cls(layerClass('linear-gradient-stop'), className)}
+            />
+          {/if}
+        {/each}
+      {/if}
     </linearGradient>
   </defs>
 
-  <slot {id} gradient="url(#{id})" />
+  {@render children?.({ id, gradient: `url(#${id})` })}
 {/if}

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

@@ -1,32 +1,67 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string | undefined;
-        stops?: string[] | [string | number, string][] | undefined;
-        vertical?: boolean | undefined;
-        x1?: string | undefined;
-        y1?: string | undefined;
-        x2?: string | undefined;
-        y2?: string | undefined;
-        rotate?: number | undefined | undefined;
-        units?: "objectBoundingBox" | "userSpaceOnUse" | undefined;
-        class?: string | undefined | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            id: string;
-            gradient: string;
-        };
-        stops: {};
-    };
+import { type Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+export type LinearGradientPropsWithoutHTML = {
+    /**
+     * Unique id for linearGradient
+     */
+    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][];
+    /**
+     * Apply color stops top-to-bottom (true) or left-to-right (false)
+     *
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * @default '0%'
+     */
+    x1?: string;
+    /**
+     * @default '0%'
+     */
+    y1?: string;
+    /**
+     * @default vertical ? '0%' : '100%'
+     */
+    x2?: string;
+    /**
+     * @default vertical ? '100%' : '0%'
+     */
+    y2?: string;
+    /**
+     * Rotate the gradient by a given angle in degrees
+     */
+    rotate?: number;
+    /**
+     * Define the coordinate system for attributes (i.e. gradientUnits)
+     *
+     * @default 'objectBoundingBox'
+     */
+    units?: 'objectBoundingBox' | 'userSpaceOnUse';
+    /**
+     * A bindable reference to the underlying `<linearGradient>` element
+     *
+     * @bindable
+     */
+    ref?: SVGLinearGradientElement;
+    /**
+     * Render as a child of the gradient and will opt out of the default stops
+     * being rendered.
+     */
+    stopsContent?: Snippet;
+    children?: Snippet<[{
+        id: string;
+        gradient: string;
+    }]>;
 };
-export type LinearGradientProps = typeof __propDef.props;
-export type LinearGradientEvents = typeof __propDef.events;
-export type LinearGradientSlots = typeof __propDef.slots;
-export default class LinearGradient extends SvelteComponentTyped<LinearGradientProps, LinearGradientEvents, LinearGradientSlots> {
-}
-export {};
+export type LinearGradientProps = LinearGradientPropsWithoutHTML & Without<SVGAttributes<SVGLinearGradientElement>, LinearGradientPropsWithoutHTML>;
+declare const LinearGradient: import("svelte").Component<LinearGradientProps, {}, "ref">;
+type LinearGradient = ReturnType<typeof LinearGradient>;
+export default LinearGradient;

package/dist/components/Link.svelte

@@ -1,6 +1,73 @@
+<script lang="ts" module>
+  import type { MarkerOptions } from './MarkerWrapper.svelte';
+  import type { Without } from '../utils/types.js';
+  import type { MotionNoneOption, MotionTweenOption } from '../utils/motion.svelte.js';
+  import { curveBumpX, curveBumpY, type CurveFactory } from 'd3-shape';
+
+  export type LinkPropsWithoutHTML = {
+    // Override what is used from context
+    data?: any;
+
+    /**
+     * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
+     *
+     * @default false
+     */
+    sankey?: boolean;
+    source?: (d: any) => any;
+    target?: (d: any) => any;
+
+    /**
+     * Convenient property to swap x/y accessor logic
+     */
+    orientation?: 'vertical' | 'horizontal';
+
+    x?: (d: any) => any;
+    y?: (d: any) => any;
+    curve?: CurveFactory;
+
+    /**
+     * 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;
+
+    /**
+     * Apply explicit coordinates to the line. Useful when dealing with
+     * force simulation links.
+     */
+    explicitCoords?: {
+      x1: number;
+      y1: number;
+      x2: number;
+      y2: number;
+    };
+
+    motion?: MotionTweenOption | MotionNoneOption;
+  };
+
+  export type LinkProps = LinkPropsWithoutHTML & Without<ConnectorProps, LinkPropsWithoutHTML>;
+
+  const FALLBACK_COORDS = { x: 0, y: 0 };
+</script>
+
 <script lang="ts">
   /*
-		TODO:
+TODO:
 		- [ ] Show path progressively show / animated in on load.  Also fix sliding in from left side (at last in from bottom)
     - [ ] Support link types
       - [ ] https://airbnb.io/visx/linktypes
@@ -13,109 +80,98 @@
     - [ ] Investigate: https://observablehq.com/@fil/sankey-link-paths
     - [ ] Use for annotations - https://github.com/techniq/layerchart/issues/11
 	*/
-  import type { ComponentProps } from 'svelte';
-  import type { tweened as tweenedStore } from 'svelte/motion';
-  import { link as d3Link, curveBumpX, curveBumpY } from 'd3-shape';
-  import { interpolatePath } from 'd3-interpolate-path';
-
-  import { motionStore } from '../stores/motionStore.js';
-  import { uniqueId } from '@layerstack/utils';
-
-  import Marker from './Marker.svelte';
-  import Spline from './Spline.svelte';
-
-  // Override what is used from context
-  export let data: any = undefined; // TODO: Update Type
-
-  /**
-   * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
-   */
-  export let sankey = false;
-  export let source = sankey ? (d: any) => [d.source.x1, d.y0] : (d: any) => d.source;
-  export let target = sankey ? (d: any) => [d.target.x0, d.y1] : (d: any) => d.target;
-
-  /** Convenient property to swap x/y accessor logic */
-  export let orientation: 'vertical' | 'horizontal' = sankey ? 'horizontal' : 'vertical';
-  export let x = (d: any) => (sankey ? d[0] : orientation === 'horizontal' ? d.y : d.x);
-  export let y = (d: any) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
-  export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
-
-  export let onclick: ((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;
-
-  /** Marker to attach to start, mid, and end points of path */
-  export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
-    undefined;
-  /** Marker to attach to start point of path */
-  export let markerStart: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
-    marker;
-  /** Marker to attach to all mid points of path */
-  export let markerMid: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
-    marker;
-  /** Marker to attach to end point of path */
-  export let markerEnd: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
-    marker;
-
-  $: markerStartId = markerStart || $$slots['markerStart'] ? uniqueId('marker-') : '';
-  $: markerMidId = markerMid || $$slots['markerMid'] ? uniqueId('marker-') : '';
-  $: markerEndId = markerEnd || $$slots['markerEnd'] ? uniqueId('marker-') : '';
-
-  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
-  const tweenedOptions = tweened
-    ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
-    : false;
-  $: tweened_d = motionStore('', { tweened: tweenedOptions });
-
-  $: {
-    orientation; // subscribe to orientation changes to update link
-    const link = d3Link(curve).source(source).target(target).x(x).y(y);
-    const d = link(data) ?? '';
-    tweened_d.set(d);
-  }
+  import Connector, { type ConnectorProps } from './Connector.svelte';
+  import { extractLayerProps } from '../utils/attributes.js';
+
+  let {
+    data,
+    sankey = false,
+    source: sourceProp,
+    target: targetProp,
+    orientation: orientationProp,
+    x: xProp,
+    y: yProp,
+    curve: curveProp,
+    explicitCoords,
+    type = 'd3',
+    sweep = 'none',
+    ...restProps
+  }: LinkProps = $props();
+
+  const sourceAccessor = $derived.by(() => {
+    if (sourceProp) return sourceProp;
+    if (sankey) return (d: any) => ({ node: d.source, y: d.y0, isSource: true });
+    return (d: any) => d.source;
+  });
+
+  const targetAccessor = $derived.by(() => {
+    if (targetProp) return targetProp;
+    if (sankey) return (d: any) => ({ node: d.target, y: d.y1, isSource: false });
+    return (d: any) => d.target;
+  });
+
+  const orientation = $derived.by(() => {
+    if (orientationProp) return orientationProp;
+    if (sankey) return 'horizontal';
+    return 'vertical';
+  });
+
+  const curve = $derived.by(() => {
+    if (curveProp) return curveProp;
+    if (orientation === 'horizontal') return curveBumpX;
+    return curveBumpY;
+  });
+
+  const xAccessor = $derived.by(() => {
+    if (xProp) return xProp;
+    if (sankey) return (d: any) => (d.isSource ? d.node.x1 : d.node.x0);
+    return (d: any) => (orientation === 'horizontal' ? d.y : d.x);
+  });
+
+  const yAccessor = $derived.by(() => {
+    if (yProp) return yProp;
+    if (sankey) return (d: any) => d.y;
+    return (d: any) => (orientation === 'horizontal' ? d.x : d.y);
+  });
+
+  const sourceCoords = $derived.by(() => {
+    if (explicitCoords) return { x: explicitCoords.x1, y: explicitCoords.y1 };
+    if (!data) return FALLBACK_COORDS;
+
+    try {
+      const sourceData = sourceAccessor(data);
+      if (sourceData == null) return FALLBACK_COORDS;
+      const xVal = xAccessor(sourceData);
+      const yVal = yAccessor(sourceData);
+      return { x: Number.isFinite(xVal) ? xVal : 0, y: Number.isFinite(yVal) ? yVal : 0 };
+    } catch (e) {
+      console.error('Error accessing source coordinates:', e, 'Data:', data);
+      return FALLBACK_COORDS;
+    }
+  });
+
+  const targetCoords = $derived.by(() => {
+    if (explicitCoords) return { x: explicitCoords.x2, y: explicitCoords.y2 };
+    if (!data) return FALLBACK_COORDS;
+
+    try {
+      const targetData = targetAccessor(data);
+      if (targetData == null) return FALLBACK_COORDS;
+      const xVal = xAccessor(targetData);
+      const yVal = yAccessor(targetData);
+      return { x: Number.isFinite(xVal) ? xVal : 0, y: Number.isFinite(yVal) ? yVal : 0 };
+    } catch (e) {
+      console.error('Error accessing target coordinates:', e, 'Data:', data);
+      return FALLBACK_COORDS;
+    }
+  });
 </script>
 
-<Spline
-  class="path-link"
-  pathData={$tweened_d}
-  fill="none"
-  marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
-  marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
-  marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-  {onclick}
-  {onpointerenter}
-  {onpointermove}
-  {onpointerleave}
-  {onpointerover}
-  {onpointerout}
-  {...$$restProps}
+<Connector
+  source={sourceCoords}
+  target={targetCoords}
+  {type}
+  {curve}
+  {sweep}
+  {...extractLayerProps(restProps, 'link')}
 />
-
-<slot name="markerStart" id={markerStartId}>
-  {#if markerStart}
-    <Marker
-      id={markerStartId}
-      type={typeof markerStart === 'string' ? markerStart : undefined}
-      {...typeof markerStart === 'object' ? markerStart : null}
-    />
-  {/if}
-</slot>
-
-<slot name="markerMid" id={markerMidId}>
-  <Marker
-    id={markerMidId}
-    type={typeof markerMid === 'string' ? markerMid : undefined}
-    {...typeof markerMid === 'object' ? markerMid : null}
-  />
-</slot>
-
-<slot name="markerEnd" id={markerEndId}>
-  <Marker
-    id={markerEndId}
-    type={typeof markerEnd === 'string' ? markerEnd : undefined}
-    {...typeof markerEnd === 'object' ? markerEnd : null}
-  />
-</slot>