layerchart 2.0.0-next.1 → 2.0.0-next.11

package/dist/components/Text.svelte

@@ -1,112 +1,311 @@
+<script lang="ts" module>
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
+
+  export type TextPropsWithoutHTML = {
+    /**
+     * text value
+     * @default 0
+     */
+    value?: string | number;
+
+    /**
+     * The fill color of the text
+     */
+    fill?: string;
+
+    /**
+     * Maximum width to occupy (approximate as words are not split)
+     */
+    width?: number;
+
+    /**
+     * x position of the text
+     *
+     * @default 0
+     */
+    x?: string | number;
+
+    /**
+     * Initial x position of the text
+     *
+     * @default x
+     */
+    initialX?: string | number;
+
+    /**
+     * y position of the text
+     *
+     * @default 0
+     */
+    y?: string | number;
+
+    /**
+     * Initial y position of the text
+     *
+     * @default y
+     */
+    initialY?: string | number;
+
+    /**
+     * dx offset of the text
+     *
+     * @default 0
+     */
+    dx?: string | number;
+
+    /**
+     * dy offset of the text
+     *
+     * @default 0
+     */
+    dy?: string | number;
+
+    /**
+     * Desired "line height" of the text, implemented as y offsets
+     *
+     * @default "1em"
+     */
+    lineHeight?: string;
+
+    /**
+     * Cap height of the text
+     * @default '0.71em'
+     */
+    capHeight?: string;
+
+    /**
+     * Whether to scale the fontSize to accommodate the specified width
+     *
+     * @default false
+     */
+
+    scaleToFit?: boolean;
+
+    /**
+     * Horizontal text anchor
+     *
+     * @default 'start'
+     */
+    textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+
+    /**
+     * Vertical text anchor
+     *
+     * @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
+     */
+    rotate?: number;
+
+    /**
+     * A bindable reference to the wrapping `<svg>` element.
+     *
+     * @bindable
+     */
+    svgRef?: SVGElement;
+
+    /**
+     * Props to pass to the wrapping `<svg>` element.
+     */
+    svgProps?: Omit<SVGAttributes<SVGElement>, 'children'>;
+
+    /**
+     * A bindable reference to the inner `<text>` element
+     *
+     * @bindable
+     */
+    ref?: SVGTextElement;
+    motion?: MotionProp;
+
+    /**
+     * Whether to enable text truncation
+     */
+    truncate?: boolean | TruncateTextOptions;
+
+    /**
+     * A unique identifier for the SVG path element.
+     * One is generated by default if not provided.
+     *
+     */
+    pathId?: string;
+
+    /**
+     * The path to render the text along.
+     */
+    path?: string | null;
+
+    /**
+     * Specify the offset for the start of the text along the path.
+     * Can be a percentage ('50%') or a length value.
+     *
+     * @default '0%'
+     */
+    startOffset?: string | number;
+  } & CommonStyleProps;
+
+  export type TextProps = TextPropsWithoutHTML &
+    Without<SVGAttributes<SVGTextElement>, TextPropsWithoutHTML>;
+
+  function getPathLength(pathRef: SVGPathElement | undefined) {
+    if (pathRef && typeof pathRef.getTotalLength === 'function') {
+      try {
+        return pathRef.getTotalLength();
+      } catch (e) {
+        console.error('Error getting path length:', e);
+        return 0;
+      }
+    }
+    return 0;
+  }
+</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 { getCanvasContext } from './layout/Canvas.svelte';
-  import { getStringWidth } from '../utils/string.js';
-  import { motionStore } from '../stores/motionStore.js';
-  import { renderText, type ComputedStylesOptions } from '../utils/canvas.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
-  */
-
-  /** text value */
-  export let value: string | number = 0;
-
-  /** Maximum width to occupy (approximate as words are not split) */
-  export let width: number | undefined = undefined;
-
-  /** x position of the text */
-  export let x: string | number = 0;
-  export let initialX = x;
-
-  /** y position of the text */
-  export let y: string | number = 0;
-  export let initialY = y;
-
-  /** dx offset of the text */
-  export let dx: string | number = 0;
-
-  /** dy offset of the text */
-  export let dy: string | number = 0;
-
-  /** Desired "line height" of the text, implemented as y offsets */
-  export let lineHeight = '1em';
-
-  /** Cap height of the text */
-  export let capHeight = '0.71em'; // Magic number from d3
-
-  /** Whether to scale the fontSize to accommodate the specified width  */
-  export let scaleToFit: boolean = false;
-
-  /** Horizontal text anchor */
-  export let textAnchor: 'start' | 'middle' | 'end' | 'inherit' = 'start';
-
-  /** Vertical text anchor */
-  export let verticalAnchor: 'start' | 'middle' | 'end' | 'inherit' = 'end'; // default SVG behavior
-
-  /** Rotational angle of the text */
-  export let rotate: number | undefined = 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;
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { getStringWidth, truncateText, type TruncateTextOptions } from '../utils/string.js';
+  import { getComputedStyles, renderText, type ComputedStylesOptions } from '../utils/canvas.js';
+
+  import { createKey } from '../utils/key.svelte.js';
+  import { layerClass } from '../utils/attributes.js';
+  import { degreesToRadians } from '../utils/math.js';
+  import { createId } from '../utils/createId.js';
+
+  const uid = $props.id();
+
+  let {
+    value,
+    x = 0,
+    initialX = x,
+    y = 0,
+    initialY = y,
+    dx = 0,
+    dy = 0,
+    lineHeight = '1em',
+    capHeight = '0.71em',
+    width,
+    scaleToFit = false,
+    textAnchor = 'start',
+    verticalAnchor = 'end',
+    dominantBaseline = 'auto',
+    rotate,
+    opacity = 1,
+    strokeWidth = 0,
+    stroke,
+    fill,
+    fillOpacity,
+    motion,
+    svgRef: svgRefProp = $bindable(),
+    ref: refProp = $bindable(),
+    class: className,
+    svgProps = {},
+    truncate = false,
+    path,
+    pathId = createId('text-path', uid),
+    startOffset = '0%',
+    transform: transformProp,
+    ...restProps
+  }: TextProps = $props();
+
+  const renderCtx = getRenderContext();
+
+  let ref = $state<SVGTextElement>();
+  let svgRef = $state<SVGElement>();
+  let pathRef = $state<SVGPathElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
-  let className: string | undefined = undefined;
-  export { className as class };
+  $effect.pre(() => {
+    svgRefProp = svgRef;
+  });
 
-  let wordsByLines: { words: string[]; width?: number }[] = [];
-  let wordsWithWidth: { word: string; width: number }[] = [];
-  let spaceWidth: number = 0;
+  let style = $state<CSSStyleDeclaration>(); // TODO: read from DOM?
 
-  let style: CSSStyleDeclaration | undefined = undefined; // TODO: read from DOM?
+  const resolvedWidth = $derived(path ? getPathLength(pathRef) : width);
 
-  $: words = value != null ? value.toString().split(/(?:(?!\u00A0+)\s+)/) : [];
+  const defaultTruncateOptions: TruncateTextOptions = $derived({
+    maxChars: undefined,
+    position: 'end',
+    maxWidth: resolvedWidth,
+  });
 
-  $: wordsWithWidth = words.map((word) => ({
-    word,
-    width: getStringWidth(word, style) || 0,
-  }));
+  const truncateConfig: TruncateTextOptions | boolean = $derived.by(() => {
+    if (typeof truncate === 'boolean') {
+      if (truncate) return defaultTruncateOptions;
+      return false;
+    }
+    return {
+      ...defaultTruncateOptions,
+      ...truncate,
+    };
+  });
 
-  $: spaceWidth = getStringWidth('\u00A0', style) || 0;
+  // Handle null and convert `\n` strings back to newline characters
+  const rawText = $derived(value != null ? value.toString().replace(/\\n/g, '\n') : '');
 
-  $: wordsByLines = wordsWithWidth.reduce((result: typeof wordsByLines, item) => {
-    const currentLine = result[result.length - 1];
+  const textValue = $derived.by(() => {
+    if (!truncateConfig) return rawText;
+    return truncateText(rawText, truncateConfig);
+  });
 
-    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;
-    } 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);
-    }
+  const spaceWidth = $derived(getStringWidth('\u00A0', style) || 0);
+
+  const wordsByLines = $derived.by(() => {
+    // Split by newlines to preserve explicit line breaks
+    const lines = textValue.split('\n');
+
+    return lines.flatMap((line) => {
+      // Split each line into words
+      const words = line.split(/(?:(?!\u00A0+)\s+)/);
+
+      // 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;
-  }, []);
-  $: lines = wordsByLines.length;
+  const lineCount = $derived(wordsByLines.length);
 
   /**
    * Convert css value to pixel value (ex. 0.71em => 11.36)
@@ -114,14 +313,11 @@
   function getPixelValue(cssValue: number | string) {
     // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
 
-    if (typeof cssValue === 'number') {
-      return cssValue;
-    }
+    if (typeof cssValue === 'number') return cssValue;
 
-    // @ts-expect-error
-    const [match, value, units] = cssValue.match(/([\d.]+)(\D+)/);
-    const number = Number(value);
-    switch (units) {
+    const result = cssValue.match(/([\d.]+)(\D+)/);
+    const number = Number(result?.[1]);
+    switch (result?.[2]) {
       case 'px':
         return number;
       case 'em':
@@ -132,35 +328,47 @@
     }
   }
 
-  let startDy = 0;
-  $: if (verticalAnchor === 'start') {
-    startDy = getPixelValue(capHeight);
-  } else if (verticalAnchor === 'middle') {
-    startDy = ((lines - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
-  } else {
-    startDy = (lines - 1) * -getPixelValue(lineHeight);
-  }
+  const startDy = $derived.by(() => {
+    if (verticalAnchor === 'start') {
+      return getPixelValue(capHeight);
+    } else if (verticalAnchor === 'middle') {
+      return ((lineCount - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
+    } else {
+      return (lineCount - 1) * -getPixelValue(lineHeight);
+    }
+  });
 
-  let scaleTransform = '';
-  $: if (
-    scaleToFit &&
-    lines > 0 &&
-    typeof x == 'number' &&
-    typeof y == 'number' &&
-    typeof width == 'number'
-  ) {
-    const lineWidth = wordsByLines[0].width || 1;
-    const sx = width / lineWidth;
-    const sy = sx;
-    const originX = x - sx * x;
-    const originY = y - sy * y;
-    scaleTransform = `matrix(${sx}, 0, 0, ${sy}, ${originX}, ${originY})`;
-  } else {
-    scaleTransform = '';
-  }
-  $: rotateTransform = rotate ? `rotate(${rotate}, ${x}, ${y})` : '';
+  const pathStartDy = $derived.by(() => {
+    if (verticalAnchor === 'start') {
+      return getPixelValue(capHeight);
+    } else if (verticalAnchor === 'middle') {
+      return (0 / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
+    } else {
+      return 0 * -getPixelValue(lineHeight);
+    }
+  });
+
+  const scaleTransform = $derived.by(() => {
+    if (
+      scaleToFit &&
+      lineCount > 0 &&
+      typeof x == 'number' &&
+      typeof y == 'number' &&
+      typeof width == 'number'
+    ) {
+      const lineWidth = wordsByLines[0].width || 1;
+      const sx = width / lineWidth;
+      const sy = sx;
+      const originX = x - sx * x;
+      const originY = y - sy * y;
+      return `matrix(${sx}, 0, 0, ${sy}, ${originX}, ${originY})`;
+    } else {
+      return '';
+    }
+  });
 
-  $: transform = `${scaleTransform} ${rotateTransform}`;
+  const rotateTransform = $derived(rotate ? `rotate(${rotate}, ${x}, ${y})` : '');
+  const transform = $derived(transformProp ?? `${scaleTransform} ${rotateTransform}`);
 
   function isValidXOrY(xOrY: string | number | undefined) {
     return (
@@ -171,102 +379,160 @@
     );
   }
 
-  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
-  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
-
-  let tweened_x = motionStore(initialX, { spring, tweened });
-  let tweened_y = motionStore(initialY, { spring, tweened });
-
-  $: tick().then(() => {
-    tweened_x.set(x);
-    tweened_y.set(y);
-  });
-
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
+  const motionX = createMotion(initialX, () => x, motion);
+  const motionY = createMotion(initialY, () => y, motion);
 
   function render(
     ctx: CanvasRenderingContext2D,
     styleOverrides: ComputedStylesOptions | undefined
   ) {
-    wordsByLines.forEach((line, index) => {
+    const effectiveLineHeight = getPixelValue(lineHeight);
+    const baseY = getPixelValue(motionY.current) + getPixelValue(dy) + getPixelValue(startDy);
+    const baseX = getPixelValue(motionX.current) + getPixelValue(dx);
+
+    ctx.save();
+
+    if (rotate !== undefined) {
+      const centerX = getPixelValue(x);
+      const centerY = getPixelValue(y);
+      const radians = degreesToRadians(rotate);
+
+      ctx.translate(centerX, centerY);
+      ctx.rotate(radians);
+      ctx.translate(-centerX, -centerY);
+    }
+
+    const styles = styleOverrides
+      ? merge({ styles: { strokeWidth } }, styleOverrides)
+      : {
+          styles: {
+            fill,
+            fillOpacity,
+            stroke,
+            strokeWidth,
+            opacity,
+            paintOrder: 'stroke',
+            textAnchor,
+          },
+          classes: cls(fill === undefined && 'fill-surface-content', className),
+        };
+
+    const computedStyles = getComputedStyles(ctx.canvas, styles);
+
+    ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`;
+
+    const textAlign = textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
+    ctx.textAlign = textAlign;
+
+    for (let index = 0; index < wordsByLines.length; index++) {
+      const line = wordsByLines[index];
+      const text = line.words.join(' ');
+
+      // no need to manually adjust x for textAnchor since ctx.textAlign handles it
+      const xPos = baseX;
+      const yPos = baseY + index * effectiveLineHeight;
+
       renderText(
         ctx,
-        line.words.join(' '),
+        text,
         {
-          x: getPixelValue($tweened_x) + getPixelValue(dx),
-          y:
-            getPixelValue($tweened_y) +
-            getPixelValue(dy) +
-            (index === 0 ? startDy : getPixelValue(lineHeight)),
+          x: xPos,
+          y: yPos,
         },
-        styleOverrides
-          ? merge({ styles: { strokeWidth } }, styleOverrides)
-          : {
-              styles: {
-                fill,
-                fillOpacity,
-                stroke,
-                strokeWidth,
-                opacity,
-                paintOrder: 'stroke',
-                textAnchor,
-              },
-              classes: cls(fill === undefined && 'fill-surface-content', className),
-            }
+        styles
       );
-    });
-  }
+    }
 
-  // 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 change
-    value &&
-      $tweened_x &&
-      $tweened_y &&
-      fillKey &&
-      strokeKey &&
-      strokeWidth &&
-      opacity &&
-      className;
-    canvasContext.invalidate();
+    ctx.restore();
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
-  $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Text', render });
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  const fillKey = createKey(() => fill);
+  const strokeKey = createKey(() => stroke);
+
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
+      name: 'Text',
+      render,
+      deps: () => [
+        value,
+        motionX.current,
+        motionY.current,
+        fillKey.current,
+        strokeKey.current,
+        strokeWidth,
+        opacity,
+        className,
+        truncateConfig,
+        rotate,
+        lineHeight,
+        textAnchor,
+        verticalAnchor,
+      ],
+    });
   }
-
-  onDestroy(() => {
-    if (renderContext === 'canvas') {
-      canvasUnregister();
-    }
-  });
 </script>
 
-{#if renderContext === 'svg'}
+{#if renderCtx === 'svg'}
   <!-- `overflow: visible` allow contents to be shown outside element -->
   <!-- `paint-order: stroke` supports stroke outlining text  -->
-  <svg x={dx} y={dy} class="overflow-visible [paint-order:stroke]">
-    {#if isValidXOrY(x) && isValidXOrY(y)}
+  <svg
+    x={dx}
+    y={dy}
+    {...svgProps}
+    class={cls(layerClass('text-svg'), 'overflow-visible [paint-order:stroke]', svgProps?.class)}
+    bind:this={svgRef}
+  >
+    {#if path}
+      <defs>
+        {#key path}
+          <path bind:this={pathRef} id={pathId} d={path} />
+        {/key}
+      </defs>
+      <text
+        bind:this={ref}
+        {dy}
+        {...restProps}
+        {fill}
+        fill-opacity={fillOpacity}
+        {stroke}
+        stroke-width={strokeWidth}
+        {opacity}
+        transform={transformProp}
+        class={cls(layerClass('text'), fill === undefined && 'fill-surface-content', className)}
+      >
+        <textPath
+          style="text-anchor: {textAnchor};"
+          dominant-baseline={dominantBaseline}
+          href="#{pathId}"
+          {startOffset}
+          class={cls(layerClass('text-path'))}
+        >
+          {wordsByLines.map((line) => line.words.join(' ')).join()}
+        </textPath>
+      </text>
+    {:else if isValidXOrY(x) && isValidXOrY(y)}
       <text
-        x={$tweened_x}
-        y={$tweened_y}
+        bind:this={ref}
+        x={motionX.current}
+        y={motionY.current}
         {transform}
         text-anchor={textAnchor}
-        {...$$restProps}
+        dominant-baseline={dominantBaseline}
+        {...restProps}
         {fill}
         fill-opacity={fillOpacity}
         {stroke}
         stroke-width={strokeWidth}
         {opacity}
-        class={cls(fill === undefined && 'fill-surface-content', className)}
+        class={cls(layerClass('text'), fill === undefined && 'fill-surface-content', className)}
       >
         {#each wordsByLines as line, index}
-          <tspan x={$tweened_x} dy={index === 0 ? startDy : lineHeight}>
+          <tspan
+            x={motionX.current}
+            dy={index === 0 ? startDy : lineHeight}
+            class={layerClass('text-tspan')}
+          >
             {line.words.join(' ')}
           </tspan>
         {/each}