layerchart 2.0.0-next.4 → 2.0.0-next.40

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;
@@ -132,7 +132,6 @@
   import { getChartContext } from './Chart.svelte';
   import { createKey } from '../utils/key.svelte.js';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const ctx = getChartContext();
 
@@ -159,14 +158,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);
@@ -274,7 +273,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-spline-path', className),
           }
     );
   }
@@ -331,8 +330,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 +342,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>
@@ -362,12 +361,7 @@
     <path
       d={tweenedState.current}
       {...restProps}
-      class={cls(
-        layerClass('spline-path'),
-        !fill && 'fill-none',
-        !stroke && 'stroke-surface-content',
-        className
-      )}
+      class={cls('lc-spline-path', className)}
       {fill}
       fill-opacity={fillOpacity}
       {stroke}
@@ -377,22 +371,59 @@
       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} />
     <MarkerWrapper id={markerEndId} marker={markerEnd} />
 
     {#if startContent && startPoint}
-      <Group x={startPoint.x} y={startPoint.y} class={layerClass('spline-g-start')}>
-        {@render startContent({ point: startPoint })}
+      <Group x={startPoint.x} y={startPoint.y} class="lc-spline-g-start">
+        {@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 })}
+      <Group x={endPoint.current.x} y={endPoint.current.y} class="lc-spline-g-end">
+        {@render endContent({
+          point: endPoint.current,
+          value: {
+            x: ctx.xScale?.invert?.(endPoint.current.x),
+            y: ctx.yScale?.invert?.(endPoint.current.y),
+          },
+        })}
       </Group>
     {/if}
   {/key}
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-spline-path)) {
+      --fill-color: none;
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-spline-path, svg.lc-spline-path):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-spline-path, svg.lc-spline-path):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-spline-path):not([background-color])) {
+      background-color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-spline-path):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

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
      */
@@ -174,24 +188,9 @@
   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';
 
-  /*
-    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 +207,7 @@
     scaleToFit = false,
     textAnchor = 'start',
     verticalAnchor = 'end',
+    dominantBaseline = 'auto',
     rotate,
     opacity = 1,
     strokeWidth = 0,
@@ -227,6 +227,8 @@
     ...restProps
   }: TextProps = $props();
 
+  const renderCtx = getRenderContext();
+
   let ref = $state<SVGTextElement>();
   let svgRef = $state<SVGElement>();
   let pathRef = $state<SVGPathElement>();
@@ -260,49 +262,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 words = $derived(textValue ? textValue.split(/(?:(?!\u00A0+)\s+)/) : []);
+  const spaceWidth = $derived(getStringWidth('\u00A0', style) || 0);
 
-  const wordsWithWidth = $derived(
-    words.map((word) => ({
-      word,
-      width: getStringWidth(word, style) || 0,
-    }))
-  );
+  const wordsByLines = $derived.by(() => {
+    // Split by newlines to preserve explicit line breaks
+    const lines = textValue.split('\n');
 
-  const spaceWidth = $derived(getStringWidth('\u00A0', style) || 0);
+    return lines.flatMap((line) => {
+      // Split each line into words
+      const words = line.split(/(?:(?!\u00A0+)\s+)/);
 
-  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 +336,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'
@@ -411,7 +410,7 @@
             paintOrder: 'stroke',
             textAnchor,
           },
-          classes: cls(fill === undefined && 'fill-surface-content', className),
+          classes: cls('lc-text', className),
         };
 
     const computedStyles = getComputedStyles(ctx.canvas, styles);
@@ -473,13 +472,7 @@
 {#if renderCtx === 'svg'}
   <!-- `overflow: visible` allow contents to be shown outside element -->
   <!-- `paint-order: stroke` supports stroke outlining text  -->
-  <svg
-    x={dx}
-    y={dy}
-    {...svgProps}
-    class={cls(layerClass('text-svg'), 'overflow-visible [paint-order:stroke]', svgProps?.class)}
-    bind:this={svgRef}
-  >
+  <svg x={dx} y={dy} {...svgProps} class={['lc-text-svg', svgProps?.class]} bind:this={svgRef}>
     {#if path}
       <defs>
         {#key path}
@@ -496,13 +489,14 @@
         stroke-width={strokeWidth}
         {opacity}
         transform={transformProp}
-        class={cls(layerClass('text'), fill === undefined && 'fill-surface-content', className)}
+        class={['lc-text', className]}
       >
         <textPath
           style="text-anchor: {textAnchor};"
+          dominant-baseline={dominantBaseline}
           href="#{pathId}"
           {startOffset}
-          class={cls(layerClass('text-path'))}
+          class="lc-text-path"
         >
           {wordsByLines.map((line) => line.words.join(' ')).join()}
         </textPath>
@@ -514,19 +508,20 @@
         y={motionY.current}
         {transform}
         text-anchor={textAnchor}
+        dominant-baseline={dominantBaseline}
         {...restProps}
         {fill}
         fill-opacity={fillOpacity}
         {stroke}
         stroke-width={strokeWidth}
         {opacity}
-        class={cls(layerClass('text'), fill === undefined && 'fill-surface-content', className)}
+        class={['lc-text', className]}
       >
         {#each wordsByLines as line, index}
           <tspan
             x={motionX.current}
-            dy={index === 0 ? startDy : lineHeight}
-            class={layerClass('text-tspan')}
+            dy={index === 0 ? startDy : getPixelValue(lineHeight)}
+            class="lc-text-tspan"
           >
             {line.words.join(' ')}
           </tspan>
@@ -534,4 +529,57 @@
       </text>
     {/if}
   </svg>
+{:else if renderCtx === 'html'}
+  {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
+  {@const translateY =
+    verticalAnchor === 'middle' ? '-50%' : verticalAnchor === 'end' ? '-100%' : '0%'}
+  <!-- TODO: How best to handle dx/dy when adjusted for svg style issues? -->
+  <!-- style:line-height={lineHeight} -->
+  <!-- TODO: How to handle fill-/stroke- vs bg-/text-/border- colors? -->
+  <div
+    style:position="absolute"
+    style:left="{dx + motionX.current}px"
+    style:top="{dy + motionY.current}px"
+    style:transform="translate({translateX}, {translateY}) rotate({rotate ?? 0}deg)"
+    style:transform-origin="{verticalAnchor === 'middle'
+      ? 'center'
+      : verticalAnchor === 'end'
+        ? 'bottom'
+        : 'top'}
+    {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
+    class={['lc-text', className]}
+  >
+    {textValue}
+  </div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-text)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    :global(:where(.lc-text-svg)) {
+      overflow: visible;
+      paint-order: stroke;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-text, svg.lc-text):not([fill])) {
+      color: var(--fill-color);
+      fill: currentColor;
+    }
+    :global(:where(.lc-layout-svg .lc-text, svg.lc-text):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-text):not([background-color])) {
+      color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-text):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

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/TileImage.svelte

@@ -135,7 +135,7 @@
     y={(y + ty) * scale - 0.5}
     width={scale + 1}
     height={scale + 1}
-    {...extractLayerProps(restProps, 'tile-image-lower')}
+    {...extractLayerProps(restProps, 'lc-tile-image-lower')}
   />
   <image
     {href}
@@ -143,7 +143,7 @@
     y={(y + ty) * scale}
     width={scale}
     height={scale}
-    {...extractLayerProps(restProps, 'tile-image')}
+    {...extractLayerProps(restProps, 'lc-tile-image')}
   />
 {/key}
 {#if debug}
@@ -152,7 +152,7 @@
     y={(y + ty) * scale}
     width={scale}
     height={scale}
-    class="stroke-danger/50 fill-none"
+    class="lc-tile-image-debug-rect"
   />
   <Text
     x={(x + tx) * scale}
@@ -161,6 +161,21 @@
     dx={2}
     dy={-2}
     value="{x}-{y}-{z}"
-    class="text-[8px] fill-black/50"
+    class="lc-tile-image-debug-text"
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-tile-image-debug-rect)) {
+      fill: none;
+      stroke: var(--color-danger, red);
+    }
+
+    :global(:where(.lc-tile-image-debug-text)) {
+      --fill-color: var(--color-danger, red);
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+</style>

package/dist/components/TransformContext.svelte

@@ -216,8 +216,6 @@
   import type { Without } from '../utils/types.js';
   import { getChartContext } from './Chart.svelte';
   import type { Snippet } from 'svelte';
-  import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../utils/attributes.js';
   import {
     createControlledMotion,
     createMotionTracker,
@@ -519,9 +517,17 @@
   onpointerup={onPointerUp}
   ondblclick={onDoubleClick}
   onclickcapture={onClick}
-  class={cls(layerClass('transform-context'), 'h-full', className)}
+  class={['lc-transform-context', className]}
   bind:this={ref}
   {...restProps}
 >
   {@render children?.({ transformContext: transformContext })}
 </div>
+
+<style>
+  @layer base {
+    :where(.lc-transform-context) {
+      height: 100%;
+    }
+  }
+</style>