layerchart 2.0.0-next.3 → 2.0.0-next.30

package/dist/components/RadialGradient.svelte

@@ -102,6 +102,7 @@
     fx = cx,
     fy = cy,
     r = '50%',
+    // fr = '0%'; // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
     spreadMethod = 'pad',
     transform = undefined,
     units = 'objectBoundingBox',
@@ -111,9 +112,6 @@
     ...restProps
   }: RadialGradientProps = $props();
 
-  // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
-  // export let fr = '0%';
-
   const ctx = getChartContext();
 
   const renderCtx = getRenderContext();

package/dist/components/Spline.svelte

@@ -87,23 +87,23 @@
     /**
      * Add additional content at the start of the line.
      *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop.
      */
-    startContent?: Snippet<[{ point: DOMPoint }]>;
+    startContent?: Snippet<[{ point: DOMPoint; value: { x: number; y: number } }]>;
 
     /**
      * Add additional content at the end of the line.
      *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop.
      */
-    endContent?: Snippet<[{ point: DOMPoint }]>;
+    endContent?: Snippet<[{ point: DOMPoint; value: { x: number; y: number } }]>;
 
     /**
      * A reference to the `<path>` element.
      *
      * @bindable
      */
-    splineRef?: SVGPathElement;
+    pathRef?: SVGPathElement;
 
     motion?: MotionProp;
   } & CommonStyleProps;
@@ -159,14 +159,14 @@
     startContent,
     endContent,
     opacity,
-    splineRef: splineRefProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     ...restProps
   }: SplineProps = $props();
 
-  let splineRef = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
 
   $effect.pre(() => {
-    splineRefProp = splineRef;
+    pathRefProp = pathRef;
   });
 
   const markerStart = $derived(markerStartProp ?? marker);
@@ -331,8 +331,8 @@
           easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut,
           interpolate() {
             return (t: number) => {
-              const totalLength = splineRef?.getTotalLength() ?? 0;
-              const point = splineRef?.getPointAtLength(totalLength * t);
+              const totalLength = pathRef?.getTotalLength() ?? 0;
+              const point = pathRef?.getPointAtLength(totalLength * t);
               return point;
             };
           },
@@ -343,16 +343,16 @@
   $effect(() => {
     if (!startContent && !endContent) return;
     d;
-    if (!splineRef || !splineRef.getTotalLength()) return;
-    startPoint = splineRef.getPointAtLength(0);
-    const totalLength = splineRef.getTotalLength();
-    endPoint.target = splineRef.getPointAtLength(totalLength);
+    if (!pathRef || !pathRef.getTotalLength()) return;
+    startPoint = pathRef.getPointAtLength(0);
+    const totalLength = pathRef.getTotalLength();
+    endPoint.target = pathRef.getPointAtLength(totalLength);
   });
 
   $effect(() => {
     if (!draw) return;
-    [tweenedState.current];
     // Anytime the path data changes, redraw
+    [pathData, data, ctx.data];
     key = Symbol();
   });
 </script>
@@ -377,7 +377,7 @@
       marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
       marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
       in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
-      bind:this={splineRef}
+      bind:this={pathRef}
     />
     <MarkerWrapper id={markerStartId} marker={markerStart} />
     <MarkerWrapper id={markerMidId} marker={markerMid} />
@@ -385,13 +385,25 @@
 
     {#if startContent && startPoint}
       <Group x={startPoint.x} y={startPoint.y} class={layerClass('spline-g-start')}>
-        {@render startContent({ point: startPoint })}
+        {@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={layerClass('spline-g-end')}>
-        {@render endContent({ point: endPoint.current })}
+        {@render endContent({
+          point: endPoint.current,
+          value: {
+            x: ctx.xScale?.invert?.(endPoint.current.x),
+            y: ctx.yScale?.invert?.(endPoint.current.y),
+          },
+        })}
       </Group>
     {/if}
   {/key}

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

@@ -67,29 +67,37 @@ export type SplinePropsWithoutHTML = {
     /**
      * Add additional content at the start of the line.
      *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * 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 }` as a snippet prop.
+     * 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
      */
-    splineRef?: SVGPathElement;
+    pathRef?: SVGPathElement;
     motion?: MotionProp;
 } & CommonStyleProps;
 export type SplineProps = SplinePropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, SplinePropsWithoutHTML>;
 import { draw as _drawTransition } from 'svelte/transition';
-declare const Spline: import("svelte").Component<SplineProps, {}, "splineRef">;
+declare const Spline: import("svelte").Component<SplineProps, {}, "pathRef">;
 type Spline = ReturnType<typeof Spline>;
 export default Spline;

package/dist/components/Text.svelte

@@ -97,6 +97,20 @@
      */
     verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
 
+    /**
+     * The dominant baseline of the text.  Useful for aligning text to the baseline of the axis.
+     *
+     * @default 'auto'
+     */
+    dominantBaseline?:
+      | 'auto'
+      | 'text-before-edge'
+      | 'text-after-edge'
+      | 'middle'
+      | 'hanging'
+      | 'ideographic'
+      | 'mathematical';
+
     /**
      * Rotational angle of the text
      */
@@ -178,20 +192,6 @@
   import { degreesToRadians } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
 
-  /*
-    TODO:
-      - [ ] Handle styled text (use <slot /> to measure?)
-			- [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
-			  - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
-				- https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
-
-    Reference:
-    - https://bl.ocks.org/mbostock/7555321
-    - https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
-      - https://airbnb.io/visx/text
-      - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
-  */
-
   const uid = $props.id();
 
   let {
@@ -208,6 +208,7 @@
     scaleToFit = false,
     textAnchor = 'start',
     verticalAnchor = 'end',
+    dominantBaseline = 'auto',
     rotate,
     opacity = 1,
     strokeWidth = 0,
@@ -227,6 +228,8 @@
     ...restProps
   }: TextProps = $props();
 
+  const renderCtx = getRenderContext();
+
   let ref = $state<SVGTextElement>();
   let svgRef = $state<SVGElement>();
   let pathRef = $state<SVGPathElement>();
@@ -260,49 +263,56 @@
     };
   });
 
-  const rawText = $derived(value != null ? value.toString() : '');
+  // Handle null and convert `\n` strings back to newline characters
+  const rawText = $derived(value != null ? value.toString().replace(/\\n/g, '\n') : '');
 
   const textValue = $derived.by(() => {
     if (!truncateConfig) return rawText;
     return truncateText(rawText, truncateConfig);
   });
 
-  const renderCtx = getRenderContext();
+  const spaceWidth = $derived(getStringWidth('\u00A0', style) || 0);
 
-  const words = $derived(textValue ? textValue.split(/(?:(?!\u00A0+)\s+)/) : []);
+  const wordsByLines = $derived.by(() => {
+    // Split by newlines to preserve explicit line breaks
+    const lines = textValue.split('\n');
 
-  const wordsWithWidth = $derived(
-    words.map((word) => ({
-      word,
-      width: getStringWidth(word, style) || 0,
-    }))
-  );
+    return lines.flatMap((line) => {
+      // Split each line into words
+      const words = line.split(/(?:(?!\u00A0+)\s+)/);
 
-  const spaceWidth = $derived(getStringWidth('\u00A0', style) || 0);
-
-  const wordsByLines = $derived(
-    wordsWithWidth.reduce((result: { words: string[]; width?: number }[], item) => {
-      const currentLine = result[result.length - 1];
-
-      if (
-        currentLine &&
-        (width == null || scaleToFit || (currentLine.width || 0) + item.width + spaceWidth < width)
-      ) {
-        // Word can be added to an existing line
-        currentLine.words.push(item.word);
-        currentLine.width = currentLine.width || 0;
-        currentLine.width += item.width + spaceWidth;
+      if (width == null) {
+        // No width specified, only use explicit line breaks (if used)
+        return [{ words }];
       } else {
-        // Add first word to line or word is too long to scaleToFit on existing line
-        const newLine = { words: [item.word], width: item.width };
-        result.push(newLine);
+        // Handle word wrapping within each line
+        return words.reduce((result: { words: string[]; width?: number }[], item) => {
+          const currentLine = result[result.length - 1];
+          const itemWidth = getStringWidth(item, style) || 0;
+
+          if (
+            currentLine &&
+            (width == null ||
+              scaleToFit ||
+              (currentLine.width || 0) + itemWidth + spaceWidth < width)
+          ) {
+            // Word can be added to an existing line
+            currentLine.words.push(item);
+            currentLine.width = currentLine.width || 0;
+            currentLine.width += itemWidth + spaceWidth;
+          } else {
+            // Add first word to line or word is too long to scaleToFit on existing line
+            const newLine = { words: [item], width: itemWidth };
+            result.push(newLine);
+          }
+
+          return result;
+        }, []);
       }
+    });
+  });
 
-      return result;
-    }, [])
-  );
-
-  const lines = $derived(wordsByLines.length);
+  const lineCount = $derived(wordsByLines.length);
 
   /**
    * Convert css value to pixel value (ex. 0.71em => 11.36)
@@ -327,28 +337,18 @@
 
   const startDy = $derived.by(() => {
     if (verticalAnchor === 'start') {
-      return getPixelValue(capHeight);
-    } else if (verticalAnchor === 'middle') {
-      return ((lines - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
-    } else {
-      return (lines - 1) * -getPixelValue(lineHeight);
-    }
-  });
-
-  const pathStartDy = $derived.by(() => {
-    if (verticalAnchor === 'start') {
-      return getPixelValue(capHeight);
+      return getPixelValue(lineHeight);
     } else if (verticalAnchor === 'middle') {
-      return (0 / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
+      return ((lineCount - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
     } else {
-      return 0 * -getPixelValue(lineHeight);
+      return (lineCount - 1) * -getPixelValue(lineHeight) - getPixelValue(capHeight) / 2;
     }
   });
 
   const scaleTransform = $derived.by(() => {
     if (
       scaleToFit &&
-      lines > 0 &&
+      lineCount > 0 &&
       typeof x == 'number' &&
       typeof y == 'number' &&
       typeof width == 'number'
@@ -500,6 +500,7 @@
       >
         <textPath
           style="text-anchor: {textAnchor};"
+          dominant-baseline={dominantBaseline}
           href="#{pathId}"
           {startOffset}
           class={cls(layerClass('text-path'))}
@@ -514,6 +515,7 @@
         y={motionY.current}
         {transform}
         text-anchor={textAnchor}
+        dominant-baseline={dominantBaseline}
         {...restProps}
         {fill}
         fill-opacity={fillOpacity}
@@ -525,7 +527,7 @@
         {#each wordsByLines as line, index}
           <tspan
             x={motionX.current}
-            dy={index === 0 ? startDy : lineHeight}
+            dy={index === 0 ? startDy : getPixelValue(lineHeight)}
             class={layerClass('text-tspan')}
           >
             {line.words.join(' ')}

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

@@ -80,6 +80,12 @@ export type TextPropsWithoutHTML = {
      * @default 'end'
      */
     verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+    /**
+     * The dominant baseline of the text.  Useful for aligning text to the baseline of the axis.
+     *
+     * @default 'auto'
+     */
+    dominantBaseline?: 'auto' | 'text-before-edge' | 'text-after-edge' | 'middle' | 'hanging' | 'ideographic' | 'mathematical';
     /**
      * Rotational angle of the text
      */

package/dist/components/TransformControls.svelte

@@ -34,18 +34,14 @@
   import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
 
-  // TODO: maybe we include the icons as I think importing them like this
-  // will bog down the dev server
-  import {
-    mdiArrowULeftTop,
-    mdiMagnifyPlusOutline,
-    mdiMagnifyMinusOutline,
-    mdiImageFilterCenterFocus,
-    mdiChevronDown,
-    mdiResize,
-    mdiArrowExpandAll,
-    mdiCancel,
-  } from '@mdi/js';
+  import LucideFocus from '~icons/lucide/focus';
+  import LucideChevronDown from '~icons/lucide/chevron-down';
+  import LucideCircleOff from '~icons/lucide/circle-off';
+  import LucideImageUpscale from '~icons/lucide/image-upscale';
+  import LucideMove from '~icons/lucide/move';
+  import LucideUndo2 from '~icons/lucide/undo-2';
+  import LucideZoomIn from '~icons/lucide/zoom-in';
+  import LucideZoomOut from '~icons/lucide/zoom-out';
 
   import { getTransformContext } from './TransformContext.svelte';
   import type { Without } from '../utils/types.js';
@@ -113,7 +109,7 @@
   {#if show.includes('zoomIn')}
     <Tooltip title="Zoom in">
       <Button
-        icon={mdiMagnifyPlusOutline}
+        icon={LucideZoomIn}
         on:click={() => transform.zoomIn()}
         {size}
         class="text-surface-content p-2"
@@ -124,7 +120,7 @@
   {#if show.includes('zoomOut')}
     <Tooltip title="Zoom out">
       <Button
-        icon={mdiMagnifyMinusOutline}
+        icon={LucideZoomOut}
         on:click={() => transform.zoomOut()}
         {size}
         class="text-surface-content p-2"
@@ -135,7 +131,7 @@
   {#if show.includes('center')}
     <Tooltip title="Center">
       <Button
-        icon={mdiImageFilterCenterFocus}
+        icon={LucideFocus}
         on:click={() => transform.translateCenter()}
         {size}
         class="text-surface-content p-2"
@@ -146,7 +142,7 @@
   {#if show.includes('reset')}
     <Tooltip title="Reset">
       <Button
-        icon={mdiArrowULeftTop}
+        icon={LucideUndo2}
         on:click={() => transform.reset()}
         {size}
         class="text-surface-content p-2"
@@ -159,9 +155,9 @@
       <MenuButton
         iconOnly
         options={[
-          { label: 'None', value: 'none', icon: mdiCancel },
-          { label: 'Zoom', value: 'scale', icon: mdiResize },
-          { label: 'Move', value: 'translate', icon: mdiArrowExpandAll },
+          { label: 'None', value: 'none', icon: LucideCircleOff },
+          { label: 'Zoom', value: 'scale', icon: LucideImageUpscale },
+          { label: 'Move', value: 'translate', icon: LucideMove },
         ]}
         menuProps={{ placement: menuPlacementByOrientationAndPlacement[orientation][placement] }}
         menuIcon={null}
@@ -171,7 +167,7 @@
         class="text-surface-content"
       >
         <svelte:fragment slot="selection" let:value>
-          <Icon data={value?.icon ?? mdiChevronDown} />
+          <Icon data={value?.icon ?? LucideChevronDown} />
         </svelte:fragment>
       </MenuButton>
     </Tooltip>

package/dist/components/Treemap.svelte

@@ -18,53 +18,53 @@
      *
      * @default 0
      */
-    padding?: number;
+    padding?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The inner padding between nodes.
      *
      * @default 0
      */
-    paddingInner?: number;
+    paddingInner?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The outer padding between nodes.
      *
      * @default 0
      */
-    paddingOuter?: number;
+    paddingOuter?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The top padding between nodes.
      *
      * @default 0
      */
-    paddingTop?: number;
+    paddingTop?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The bottom padding between nodes.
      *
      * @default 0
      */
-    paddingBottom?: number;
+    paddingBottom?: number | ((node: HierarchyRectangularNode<T>) => number);
     /**
      * The left padding between nodes.
      *
      */
-    paddingLeft?: number;
+    paddingLeft?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The right padding between nodes.
      *
      */
-    paddingRight?: number;
+    paddingRight?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
-     * The selected node.
+     * Modify tiling function for approapriate aspect ratio when treemap is zoomed in
      *
-     * @default null
+     * @default false
      */
-    selected?: HierarchyRectangularNode<T> | null;
+    maintainAspectRatio?: boolean;
 
     hierarchy?: HierarchyNode<T>;
 
@@ -99,7 +99,7 @@
     paddingBottom = 0,
     paddingLeft,
     paddingRight,
-    selected = $bindable(null),
+    maintainAspectRatio = false,
     children,
   }: TreemapProps<T> = $props();
 
@@ -121,45 +121,82 @@
                 : tile
   );
 
-  const treemap = $derived.by(() => {
+  const treemapData = $derived.by(() => {
     const _treemap = d3treemap<T>()
       .size([ctx.width, ctx.height])
-      .tile(aspectTile(tileFunc, ctx.width, ctx.height));
+      .tile(maintainAspectRatio ? aspectTile(tileFunc, ctx.width, ctx.height) : tileFunc);
 
     if (padding) {
-      _treemap.padding(padding);
+      // Make Typescript happy to pick the correct overload
+      // TODO: Better way to do this?
+      if (typeof padding === 'number') {
+        _treemap.padding(padding);
+      } else {
+        _treemap.padding(padding);
+      }
     }
 
     if (paddingInner) {
-      _treemap.paddingInner(paddingInner);
+      if (typeof paddingInner === 'number') {
+        _treemap.paddingInner(typeof paddingInner === 'number' ? paddingInner : paddingInner);
+      } else {
+        _treemap.paddingInner(paddingInner);
+      }
     }
 
     if (paddingOuter) {
-      _treemap.paddingOuter(paddingOuter);
+      if (typeof paddingOuter === 'number') {
+        _treemap.paddingOuter(paddingOuter);
+      } else {
+        _treemap.paddingOuter(paddingOuter);
+      }
     }
 
     if (paddingTop) {
-      _treemap.paddingTop(paddingTop);
+      if (typeof paddingTop === 'number') {
+        _treemap.paddingTop(paddingTop);
+      } else {
+        _treemap.paddingTop(paddingTop);
+      }
     }
 
     if (paddingBottom) {
-      _treemap.paddingBottom(paddingBottom);
+      if (typeof paddingBottom === 'number') {
+        _treemap.paddingBottom(paddingBottom);
+      } else {
+        _treemap.paddingBottom(paddingBottom);
+      }
     }
 
     if (paddingLeft) {
-      _treemap.paddingLeft(paddingLeft);
+      if (typeof paddingLeft === 'number') {
+        _treemap.paddingLeft(paddingLeft);
+      } else {
+        _treemap.paddingLeft(paddingLeft);
+      }
     }
     if (paddingRight) {
-      _treemap.paddingRight(paddingRight);
+      if (typeof paddingRight === 'number') {
+        _treemap.paddingRight(paddingRight);
+      } else {
+        _treemap.paddingRight(paddingRight);
+      }
     }
-    return _treemap;
-  });
 
-  const treemapData = $derived(hierarchy ? treemap(hierarchy) : null);
+    if (hierarchy) {
+      const h = hierarchy.copy();
+      const treemapData = _treemap(h);
+      return {
+        links: treemapData.links(),
+        nodes: treemapData.descendants(),
+      };
+    }
 
-  $effect.pre(() => {
-    selected = treemapData;
+    return {
+      links: [],
+      nodes: [],
+    };
   });
 </script>
 
-{@render children?.({ nodes: treemapData ? treemapData.descendants() : [] })}
+{@render children?.({ nodes: treemapData.nodes })}