layerchart 2.0.0-next.3 → 2.0.0-next.31

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 })}

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

@@ -10,47 +10,47 @@ export type TreemapProps<T> = {
      *
      * @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>;
     children?: Snippet<[{
         nodes: HierarchyRectangularNode<T>[];
@@ -62,7 +62,7 @@ declare class __sveltets_Render<T> {
     props(): TreemapProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "selected";
+    bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/Voronoi.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" module>
   import type { Without } from '../utils/types.js';
-  import type { SVGAttributes } from 'svelte/elements';
 
   export type VoronoiPropsWithoutHTML = {
     /**
@@ -8,6 +7,9 @@
      */
     data?: any;
 
+    /** Radius to clip voronoi cells.  `0` or `undefined` to disables clipping */
+    r?: number;
+
     /**
      * Classes to apply to the root and path elements
      *
@@ -56,7 +58,7 @@
 <script lang="ts">
   import { min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
-  import type { GeoPermissibleObjects } from 'd3-geo';
+  import { type GeoPermissibleObjects } from 'd3-geo';
   // @ts-expect-error
   import { geoVoronoi } from 'd3-geo-voronoi';
   import { pointRadial } from 'd3-shape';
@@ -67,10 +69,13 @@
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { getGeoContext } from './GeoContext.svelte';
+  import CircleClipPath from './CircleClipPath.svelte';
+
   import { layerClass } from '../utils/attributes.js';
 
   let {
     data,
+    r,
     classes = {},
     onclick,
     onpointerenter,
@@ -109,53 +114,66 @@
   // Width and/or height can sometimes be negative (when loading data remotely and updately)
   const boundWidth = $derived(Math.max(ctx.width, 0));
   const boundHeight = $derived(Math.max(ctx.height, 0));
+
+  const disableClip = $derived(r === 0 || r == null || r === Infinity);
 </script>
 
 <Group {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
   {#if geo.projection}
     {@const polygons = geoVoronoi().polygons(points)}
     {#each polygons.features as feature}
-      <GeoPath
-        geojson={feature}
-        class={cls(
-          layerClass('voronoi-geo-path'),
-          'fill-transparent stroke-transparent',
-          classes.path
-        )}
-        onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
-        onpointerenter={(e) => onpointerenter?.(e, { data: feature.properties.site.data, feature })}
-        onpointermove={(e) => onpointermove?.(e, { data: feature.properties.site.data, feature })}
-        onpointerdown={(e) => onpointerdown?.(e, { data: feature.properties.site.data, feature })}
-        {onpointerleave}
-        ontouchmove={(e) => {
-          // Prevent touch to not interfere with pointer
-          e.preventDefault();
-        }}
-      />
-    {/each}
-  {:else}
-    {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
-    {#each points as point, i}
-      {@const pathData = voronoi.renderCell(i)}
-      <!-- Wait to render Spline until pathData is available to fix path artifacts from injected tweened points in Spline  -->
-      {#if pathData}
-        <Spline
-          {pathData}
+      {@const point = r ? geo.projection?.(feature.properties.sitecoordinates) : null}
+      <CircleClipPath
+        cx={point?.[0]}
+        cy={point?.[1]}
+        r={r ?? 0}
+        disabled={point == null || disableClip}
+      >
+        <GeoPath
+          geojson={feature}
           class={cls(
-            layerClass('voronoi-path'),
+            layerClass('voronoi-geo-path'),
             'fill-transparent stroke-transparent',
             classes.path
           )}
-          onclick={(e) => onclick?.(e, { data: point.data, point })}
-          onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
-          onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
+          onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
+          onpointerenter={(e) =>
+            onpointerenter?.(e, { data: feature.properties.site.data, feature })}
+          onpointermove={(e) => onpointermove?.(e, { data: feature.properties.site.data, feature })}
+          onpointerdown={(e) => onpointerdown?.(e, { data: feature.properties.site.data, feature })}
           {onpointerleave}
-          onpointerdown={(e) => onpointerdown?.(e, { data: point.data, point })}
           ontouchmove={(e) => {
             // Prevent touch to not interfere with pointer
             e.preventDefault();
           }}
         />
+      </CircleClipPath>
+    {/each}
+  {:else}
+    {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
+    {#each points as point, i}
+      {@const pathData = voronoi.renderCell(i)}
+      <!-- Wait to render Spline until pathData is available to fix path artifacts from injected tweened points in Spline  -->
+      {#if pathData}
+        <CircleClipPath cx={point[0]} cy={point[1]} r={r ?? 0} disabled={disableClip}>
+          <Spline
+            {pathData}
+            class={cls(
+              layerClass('voronoi-path'),
+              'fill-transparent stroke-transparent',
+              classes.path
+            )}
+            onclick={(e) => onclick?.(e, { data: point.data, point })}
+            onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
+            onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
+            {onpointerleave}
+            onpointerdown={(e) => onpointerdown?.(e, { data: point.data, point })}
+            ontouchmove={(e) => {
+              // Prevent touch to not interfere with pointer
+              e.preventDefault();
+            }}
+          />
+        </CircleClipPath>
       {/if}
     {/each}
   {/if}