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

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

@@ -1,28 +1,41 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string | undefined;
-        useId?: string | undefined | undefined;
-        disabled?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        clip: {
-            id: string;
-        };
-        default: {
-            id: string;
-            url: string;
-            useId: string | undefined;
-        };
-    };
+import type { Without } from '../utils/types.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;
+    }]>;
+    /**
+     * 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 = typeof __propDef.props;
-export type ClipPathEvents = typeof __propDef.events;
-export type ClipPathSlots = typeof __propDef.slots;
-export default class ClipPath extends SvelteComponentTyped<ClipPathProps, ClipPathEvents, ClipPathSlots> {
-}
-export {};
+export type ClipPathProps = ClipPathPropsWithoutHTML & Without<SVGAttributes<SVGClipPathElement>, ClipPathPropsWithoutHTML>;
+declare const ClipPath: import("svelte").Component<ClipPathPropsWithoutHTML, {}, "">;
+type ClipPath = ReturnType<typeof ClipPath>;
+export default ClipPath;

package/dist/components/ColorRamp.svelte

@@ -1,21 +1,87 @@
+<script lang="ts" module>
+  import { extractLayerProps } from '../utils/attributes.js';
+  import type { Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  export type ColorRampPropsWithoutHTML = {
+    /**
+     * The interpolator function to use for the color ramp.
+     *
+     * @default (t: number) => `hsl(${t * 360}, 100%, 50%)`
+     */
+    interpolator?: (t: number) => string;
+
+    /**
+     * The number of steps in the color ramp.
+     *
+     * @default 10
+     */
+    steps?: number;
+
+    /**
+     * The height of the color ramp.
+     *
+     * @default '20px'
+     */
+    height?: string | number;
+
+    /**
+     * The width of the color ramp.
+     *
+     * @default '100%'
+     */
+    width?: string | number;
+
+    /**
+     * A bindable reference to the underlying `<image>` element.
+     *
+     * @bindable
+     */
+    ref?: SVGImageElement;
+  };
+
+  export type ColorRampProps = ColorRampPropsWithoutHTML &
+    Without<SVGAttributes<SVGImageElement>, ColorRampPropsWithoutHTML>;
+</script>
+
 <script lang="ts">
-  export let interpolator: (t: number) => string;
-  export let steps = 10;
-  export let height: string | number = '20px';
-  export let width: string | number = '100%';
+  let {
+    interpolator,
+    steps = 10,
+    height = '20px',
+    width = '100%',
+    ref: refProp = $bindable(),
+    ...restProps
+  }: ColorRampProps = $props();
+
+  let ref = $state<SVGImageElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  let href = $state('');
 
-  let href = '';
-  $: {
+  $effect(() => {
     const canvas = document.createElement('canvas');
     canvas.width = steps;
     canvas.height = 1;
     const context = canvas.getContext('2d')!;
     for (let i = 0; i < steps; ++i) {
-      context.fillStyle = interpolator(i / (steps - 1));
+      if (interpolator) {
+        context.fillStyle = interpolator(i / (steps - 1));
+      }
       context.fillRect(i, 0, 1, 1);
     }
     href = canvas.toDataURL();
-  }
+  });
 </script>
 
-<image {href} preserveAspectRatio="none" {height} {width} {...$$restProps} />
+<image
+  bind:this={ref}
+  {href}
+  preserveAspectRatio="none"
+  {height}
+  {width}
+  {...extractLayerProps(restProps, 'color-ramp')}
+/>

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

@@ -1,20 +1,38 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        interpolator: (t: number) => string;
-        steps?: number | undefined;
-        height?: string | number | undefined;
-        width?: string | number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+export type ColorRampPropsWithoutHTML = {
+    /**
+     * The interpolator function to use for the color ramp.
+     *
+     * @default (t: number) => `hsl(${t * 360}, 100%, 50%)`
+     */
+    interpolator?: (t: number) => string;
+    /**
+     * The number of steps in the color ramp.
+     *
+     * @default 10
+     */
+    steps?: number;
+    /**
+     * The height of the color ramp.
+     *
+     * @default '20px'
+     */
+    height?: string | number;
+    /**
+     * The width of the color ramp.
+     *
+     * @default '100%'
+     */
+    width?: string | number;
+    /**
+     * A bindable reference to the underlying `<image>` element.
+     *
+     * @bindable
+     */
+    ref?: SVGImageElement;
 };
-export type ColorRampProps = typeof __propDef.props;
-export type ColorRampEvents = typeof __propDef.events;
-export type ColorRampSlots = typeof __propDef.slots;
-export default class ColorRamp extends SvelteComponentTyped<ColorRampProps, ColorRampEvents, ColorRampSlots> {
-}
-export {};
+export type ColorRampProps = ColorRampPropsWithoutHTML & Without<SVGAttributes<SVGImageElement>, ColorRampPropsWithoutHTML>;
+declare const ColorRamp: import("svelte").Component<ColorRampProps, {}, "ref">;
+type ColorRamp = ReturnType<typeof ColorRamp>;
+export default ColorRamp;

package/dist/components/ComputedStyles.svelte

@@ -1,16 +1,28 @@
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  export type ComputedStylesPropsWithoutHTML = {
+    class?: HTMLAttributes<HTMLElement>['class'];
+    children?: Snippet<[{ styles: CSSStyleDeclaration }]>;
+  };
+
+  export type ComputedStylesProps = ComputedStylesPropsWithoutHTML;
+</script>
+
 <script lang="ts">
   import { computedStyles } from '@layerstack/svelte-actions';
   import { cls } from '@layerstack/tailwind';
+  import { layerClass } from '../utils/attributes.js';
 
-  let className: string | undefined = undefined;
-  export { className as class };
+  let { class: className, children }: ComputedStylesProps = $props();
 
-  let styles: CSSStyleDeclaration;
+  let styles: CSSStyleDeclaration = $state({}) as CSSStyleDeclaration;
 </script>
 
 <div
-  class={cls('ComputedStyles hidden', className)}
+  class={cls(layerClass('computed-styles'), 'hidden', className)}
   use:computedStyles={(_styles) => (styles = _styles)}
 ></div>
 
-<slot {styles} />
+{@render children?.({ styles })}

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

@@ -1,20 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            styles: CSSStyleDeclaration;
-        };
-    };
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+export type ComputedStylesPropsWithoutHTML = {
+    class?: HTMLAttributes<HTMLElement>['class'];
+    children?: Snippet<[{
+        styles: CSSStyleDeclaration;
+    }]>;
 };
-export type ComputedStylesProps = typeof __propDef.props;
-export type ComputedStylesEvents = typeof __propDef.events;
-export type ComputedStylesSlots = typeof __propDef.slots;
-export default class ComputedStyles extends SvelteComponentTyped<ComputedStylesProps, ComputedStylesEvents, ComputedStylesSlots> {
-}
-export {};
+export type ComputedStylesProps = ComputedStylesPropsWithoutHTML;
+declare const ComputedStyles: import("svelte").Component<ComputedStylesPropsWithoutHTML, {}, "">;
+type ComputedStyles = ReturnType<typeof ComputedStyles>;
+export default ComputedStyles;

package/dist/components/Connector.svelte

@@ -0,0 +1,149 @@
+<script lang="ts" module>
+  export type ConnectorPropsWithoutHTML = {
+    /**
+     * The coordinates of the start point of the connector.
+     * @default { x: 0, y: 0 }
+     */
+    source: ConnectorCoords;
+
+    /**
+     * The coordinates of the end point of the connector.
+     *
+     * @default { x: 100, y: 100 }
+     */
+    target: ConnectorCoords;
+
+    /**
+     * The sweep direction of the connector.
+     *
+     * @default 'horizontal-vertical'
+     */
+    sweep?: ConnectorSweep;
+
+    /**
+     * The type of the connector.
+     *
+     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
+     *
+     * @default 'rounded'
+     */
+    type?: ConnectorType;
+
+    /**
+     * The radius of the connector.
+     *
+     * Only used when type is `'beveled'` or `'rounded'`
+     *
+     * @default 20
+     */
+    radius?: number;
+
+    /**
+     * The D3 curve function to use for the connector.
+     *
+     * Only used when type is `'d3'`
+     *
+     * @default `d3.curveLinear`
+     */
+    curve?: CurveFactory;
+  } & SplinePropsWithoutHTML;
+
+  export type ConnectorProps = ConnectorPropsWithoutHTML &
+    Without<SplineProps, ConnectorPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { type CurveFactory, curveLinear } from 'd3-shape';
+  import {
+    getConnectorD3Path,
+    getConnectorPresetPath,
+    type ConnectorCoords,
+    type ConnectorSweep,
+    type ConnectorType,
+  } from '../utils/connectorUtils.js';
+  import Spline, { type SplineProps, type SplinePropsWithoutHTML } from './Spline.svelte';
+  import type { Without } from '../utils/types.js';
+  import { createId } from '../utils/createId.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import MarkerWrapper from './MarkerWrapper.svelte';
+  import {
+    createMotion,
+    extractTweenConfig,
+    type ResolvedMotion,
+  } from '../utils/motion.svelte.js';
+  import { interpolatePath } from 'd3-interpolate-path';
+
+  const uid = $props.id();
+
+  let {
+    source = { x: 0, y: 0 },
+    target = { x: 100, y: 100 },
+    sweep: sweepProp,
+    type = 'rounded',
+    radius = 20,
+    curve = curveLinear,
+    splineRef = $bindable(),
+    pathData: pathDataProp,
+    marker,
+    markerStart,
+    markerMid,
+    markerEnd,
+    motion,
+    ...restProps
+  }: ConnectorProps = $props();
+
+  const sweep = $derived.by(() => {
+    if (sweepProp) return sweepProp;
+    if (type === 'd3') return 'none';
+    return 'horizontal-vertical';
+  });
+
+  const markerStartId = $derived(markerStart || marker ? createId('marker-start', uid) : '');
+  const markerMidId = $derived(markerMid || marker ? createId('marker-mid', uid) : '');
+  const markerEndId = $derived(markerEnd || marker ? createId('marker-end', uid) : '');
+
+  const extractedTween = extractTweenConfig(motion);
+
+  const tweenOptions: ResolvedMotion | undefined = extractedTween
+    ? {
+        type: extractedTween.type,
+        options: {
+          interpolate: interpolatePath,
+          ...extractedTween.options,
+        },
+      }
+    : undefined;
+
+  const pathData = $derived.by(() => {
+    if (pathDataProp) return pathDataProp;
+    if (type === 'd3') {
+      return getConnectorD3Path({
+        source,
+        target,
+        sweep,
+        curve,
+      });
+    } else {
+      return getConnectorPresetPath({ source, target, sweep, type, radius });
+    }
+  });
+
+  const motionPath = createMotion(
+    '',
+    () => pathData,
+    tweenOptions ? tweenOptions : { type: 'none' }
+  );
+</script>
+
+<Spline
+  pathData={motionPath.current}
+  bind:splineRef
+  marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+  marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
+  marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+  {...extractLayerProps(restProps, 'connector')}
+  {...restProps}
+/>
+<MarkerWrapper id={markerStartId} marker={markerStart} />
+<MarkerWrapper id={markerMidId} marker={markerMid} />
+<MarkerWrapper id={markerEndId} marker={markerEnd} />

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

@@ -0,0 +1,51 @@
+export type ConnectorPropsWithoutHTML = {
+    /**
+     * The coordinates of the start point of the connector.
+     * @default { x: 0, y: 0 }
+     */
+    source: ConnectorCoords;
+    /**
+     * The coordinates of the end point of the connector.
+     *
+     * @default { x: 100, y: 100 }
+     */
+    target: ConnectorCoords;
+    /**
+     * The sweep direction of the connector.
+     *
+     * @default 'horizontal-vertical'
+     */
+    sweep?: ConnectorSweep;
+    /**
+     * The type of the connector.
+     *
+     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
+     *
+     * @default 'rounded'
+     */
+    type?: ConnectorType;
+    /**
+     * The radius of the connector.
+     *
+     * Only used when type is `'beveled'` or `'rounded'`
+     *
+     * @default 20
+     */
+    radius?: number;
+    /**
+     * The D3 curve function to use for the connector.
+     *
+     * Only used when type is `'d3'`
+     *
+     * @default `d3.curveLinear`
+     */
+    curve?: CurveFactory;
+} & SplinePropsWithoutHTML;
+export type ConnectorProps = ConnectorPropsWithoutHTML & Without<SplineProps, ConnectorPropsWithoutHTML>;
+import { type CurveFactory } from 'd3-shape';
+import { type ConnectorCoords, type ConnectorSweep, type ConnectorType } from '../utils/connectorUtils.js';
+import { type SplineProps, type SplinePropsWithoutHTML } from './Spline.svelte';
+import type { Without } from '../utils/types.js';
+declare const Connector: import("svelte").Component<ConnectorProps, {}, "splineRef">;
+type Connector = ReturnType<typeof Connector>;
+export default Connector;