layerchart 2.0.0-next.46 → 2.0.0-next.48

package/dist/components/Text.svelte

@@ -1,19 +1,39 @@
 <script lang="ts" module>
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { Without } from '../utils/types.js';
+  import type { DataDrivenStyleProps } from '../utils/dataProp.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
 
+  /**
+   * Check if a string looks like a CSS/SVG value (percentage, em, px, etc.)
+   * rather than a data property accessor.
+   */
+  function isCSSValue(value: string): boolean {
+    return /^[\d.]+(%|em|rem|px|pt|cm|mm|in)?$/.test(value);
+  }
+
+  /**
+   * Check if a Text prop value is a data-space prop.
+   * Functions are always data props.
+   * Strings are data props unless they look like CSS values (e.g. "50%", "1em").
+   */
+  export function isTextDataProp(value: any): boolean {
+    if (typeof value === 'function') return true;
+    if (typeof value === 'string' && !isCSSValue(value)) return true;
+    return false;
+  }
+
   export type TextPropsWithoutHTML = {
     /**
-     * text value
+     * Text value to render.
+     * - `number`: direct value
+     * - `string`: in data mode, treated as a data property name (e.g. `"label"` → `d.label`);
+     *   in pixel mode, used as literal text
+     * - `function(d)`: accessor called per data item to get the text value
+     *
      * @default 0
      */
-    value?: string | number;
-
-    /**
-     * The fill color of the text
-     */
-    fill?: string;
+    value?: string | number | ((d: any) => string | number);
 
     /**
      * Maximum width to occupy (approximate as words are not split)
@@ -21,28 +41,36 @@
     width?: number;
 
     /**
-     * x position of the text
+     * x position of the text.
+     * - `number`: pixel value (direct)
+     * - `string` (CSS value like "50%"): SVG position value
+     * - `string` (property name like "date"): data property, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
      *
      * @default 0
      */
-    x?: string | number;
+    x?: string | number | ((d: any) => any);
 
     /**
-     * Initial x position of the text
+     * Initial x position of the text (pixel mode only).
      *
      * @default x
      */
     initialX?: string | number;
 
     /**
-     * y position of the text
+     * y position of the text.
+     * - `number`: pixel value (direct)
+     * - `string` (CSS value like "50%"): SVG position value
+     * - `string` (property name like "value"): data property, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
      *
      * @default 0
      */
-    y?: string | number;
+    y?: string | number | ((d: any) => any);
 
     /**
-     * Initial y position of the text
+     * Initial y position of the text (pixel mode only).
      *
      * @default y
      */
@@ -134,6 +162,8 @@
      * @bindable
      */
     ref?: SVGTextElement;
+
+    /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
 
     /**
@@ -160,7 +190,20 @@
      * @default '0%'
      */
     startOffset?: string | number;
-  } & CommonStyleProps;
+
+    /**
+     * Data array to iterate over in data mode.
+     * Falls back to chart context data when not provided.
+     */
+    data?: any[];
+
+    /**
+     * Key function for keyed {#each} rendering in data mode.
+     *
+     * @default (d, i) => i
+     */
+    key?: (d: any, index: number) => any;
+  } & DataDrivenStyleProps;
 
   export type TextProps = TextPropsWithoutHTML &
     Without<SVGAttributes<SVGTextElement>, TextPropsWithoutHTML>;
@@ -179,13 +222,19 @@
 </script>
 
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { cls } from '@layerstack/tailwind';
   import { merge } from '@layerstack/utils';
 
   import { getLayerContext } from '../contexts/layer.js';
-  import { registerCanvasComponent } from './layers/Canvas.svelte';
+  import { getChartContext } from '../contexts/chart.js';
+  import { createDataMotionMap } from '../utils/motion.svelte.js';
   import { getStringWidth, truncateText, type TruncateTextOptions } from '../utils/string.js';
   import { getComputedStyles, renderText, type ComputedStylesOptions } from '../utils/canvas.js';
+  import { resolveDataProp, resolveColorProp, resolveGeoDataPair, resolveStyleProp } from '../utils/dataProp.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import { get } from '@layerstack/utils';
+  import { chartDataArray } from '../utils/common.js';
 
   import { createKey } from '../utils/key.svelte.js';
   import { degreesToRadians } from '../utils/math.js';
@@ -196,9 +245,9 @@
   let {
     value,
     x = 0,
-    initialX = x,
+    initialX,
     y = 0,
-    initialY = y,
+    initialY,
     dx = 0,
     dy = 0,
     lineHeight = '1em',
@@ -224,11 +273,83 @@
     pathId = createId('text-path', uid),
     startOffset = '0%',
     transform: transformProp,
+    data: dataProp,
+    key: keyFn = (_: any, i: number) => i,
     ...restProps
   }: TextProps = $props();
 
+  // Data mode detection
+  const dataMode = $derived(isTextDataProp(x) || isTextDataProp(y));
+
+  // Chart context
+  const chartCtx = getChartContext();
+  const geo = getGeoContext();
+
+  // Data to iterate over in data mode
+  const resolvedData: any[] = $derived(
+    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
+  );
+
+  // Resolve position for a data item
+  function resolveTextPosition(d: any) {
+    if (geo.projection) {
+      const [projX, projY] = resolveGeoDataPair(x as any, y as any, d, geo.projection);
+      return { x: projX, y: projY };
+    }
+    return {
+      x: resolveDataProp(x as any, d, chartCtx.xScale, 0),
+      y: resolveDataProp(y as any, d, chartCtx.yScale, 0),
+    };
+  }
+
+  // Resolve text value for a data item
+  function resolveTextValue(d: any): string {
+    if (typeof value === 'function') {
+      const v = value(d);
+      return v != null ? String(v) : '';
+    }
+    if (typeof value === 'string') {
+      const v = get(d, value);
+      return v != null ? String(v) : '';
+    }
+    return value != null ? String(value) : '';
+  }
+
+  // --- Data mode motion ---
+  const dataMotionMap = createDataMotionMap(motion);
+
+  $effect(() => {
+    if (!dataMode || !dataMotionMap) return;
+    const activeKeys = new Set<any>();
+    for (let i = 0; i < resolvedData.length; i++) {
+      const d = resolvedData[i];
+      const key = keyFn(d, i);
+      activeKeys.add(key);
+      const resolved = resolveTextPosition(d);
+      untrack(() => dataMotionMap.update(key, resolved));
+    }
+    untrack(() => dataMotionMap.cleanup(activeKeys));
+  });
+
+  // Single source of truth: resolved values with animated overlay
+  const resolvedItems = $derived.by(() => {
+    if (!dataMode) return [];
+    return resolvedData.map((d, i) => {
+      const key = keyFn(d, i);
+      const resolved = resolveTextPosition(d);
+      const animated = dataMotionMap?.get(key);
+      return {
+        d,
+        key,
+        x: animated?.x ?? resolved.x,
+        y: animated?.y ?? resolved.y,
+      };
+    });
+  });
+
   const layerCtx = getLayerContext();
 
+  // --- Pixel mode ---
   let ref = $state<SVGTextElement>();
   let svgRef = $state<SVGElement>();
   let pathRef = $state<SVGPathElement>();
@@ -243,6 +364,10 @@
 
   let style = $state<CSSStyleDeclaration>(); // TODO: read from DOM?
 
+  // Use defaults that work for both pixel and data modes
+  const _initialX: string | number = initialX ?? (typeof x === 'function' ? 0 : x);
+  const _initialY: string | number = initialY ?? (typeof y === 'function' ? 0 : y);
+
   const resolvedWidth = $derived(path ? getPathLength(pathRef) : width);
 
   const defaultTruncateOptions: TruncateTextOptions = $derived({
@@ -263,7 +388,9 @@
   });
 
   // Handle null and convert `\n` strings back to newline characters
-  const rawText = $derived(value != null ? value.toString().replace(/\\n/g, '\n') : '');
+  const rawText = $derived(
+    typeof value !== 'function' && value != null ? value.toString().replace(/\\n/g, '\n') : ''
+  );
 
   const textValue = $derived.by(() => {
     if (!truncateConfig) return rawText;
@@ -344,6 +471,17 @@
     }
   });
 
+  // startDy for data mode (single line per item)
+  const dataModeStartDy = $derived.by(() => {
+    if (verticalAnchor === 'start') {
+      return getPixelValue(lineHeight);
+    } else if (verticalAnchor === 'middle') {
+      return getPixelValue(capHeight) / 2;
+    } else {
+      return -getPixelValue(capHeight) / 2;
+    }
+  });
+
   const scaleTransform = $derived.by(() => {
     if (
       scaleToFit &&
@@ -375,82 +513,141 @@
     );
   }
 
-  const motionX = createMotion(initialX, () => x, motion);
-  const motionY = createMotion(initialY, () => y, motion);
+  const motionX = createMotion(
+    _initialX,
+    () => (typeof x === 'number' || typeof x === 'string' ? x : 0),
+    motion
+  );
+  const motionY = createMotion(
+    _initialY,
+    () => (typeof y === 'number' || typeof y === 'string' ? y : 0),
+    motion
+  );
 
   function render(
     ctx: CanvasRenderingContext2D,
     styleOverrides: ComputedStylesOptions | undefined
   ) {
-    const effectiveLineHeight = getPixelValue(lineHeight);
-    const baseY = getPixelValue(motionY.current) + getPixelValue(dy) + getPixelValue(startDy);
-    const baseX = getPixelValue(motionX.current) + getPixelValue(dx);
+    function getTextStyles(
+      itemFill?: string | undefined,
+      itemStroke?: string | undefined,
+      itemFillOpacity?: number | undefined,
+      itemStrokeWidth?: number | undefined,
+      itemOpacity?: number | undefined,
+      itemClass?: string | undefined
+    ) {
+      return styleOverrides
+        ? merge({ styles: { strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined) } }, styleOverrides)
+        : {
+            styles: {
+              fill: itemFill ?? fill,
+              fillOpacity: itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
+              stroke: itemStroke ?? stroke,
+              strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+              opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
+              paintOrder: 'stroke',
+              // Only include textAnchor in constantStyles when explicitly non-default,
+              // so that CSS class-based text-anchor (e.g. [text-anchor:middle]) can take effect
+              ...(textAnchor !== 'start' ? { textAnchor } : {}),
+            },
+            classes: cls('lc-text', itemClass ?? (typeof className === 'string' ? className : undefined)),
+            style: restProps.style as string | undefined,
+          };
+    }
 
-    ctx.save();
+    if (dataMode) {
+      const baseStyles = getTextStyles();
+      const computedStyles = getComputedStyles(ctx.canvas, baseStyles);
+      ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`;
+      const textAlign =
+        textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
+      ctx.textAlign = textAlign;
+
+      for (const item of resolvedItems) {
+        const text = resolveTextValue(item.d);
+        const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale);
+        const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale);
+        const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d);
+        const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d);
+        const resolvedOpacity = resolveStyleProp(opacity, item.d);
+        const resolvedClass = resolveStyleProp(className, item.d);
+        const itemStyles = getTextStyles(resolvedFill, resolvedStroke, resolvedFillOpacity, resolvedStrokeWidth, resolvedOpacity, resolvedClass);
+        ctx.save();
+        if (rotate !== undefined) {
+          const radians = degreesToRadians(rotate);
+          ctx.translate(item.x, item.y);
+          ctx.rotate(radians);
+          ctx.translate(-item.x, -item.y);
+        }
+        renderText(
+          ctx,
+          text,
+          { x: item.x + getPixelValue(dx), y: item.y + getPixelValue(dy) + dataModeStartDy },
+          itemStyles
+        );
+        ctx.restore();
+      }
+    } else {
+      const styles = getTextStyles();
+      const effectiveLineHeight = getPixelValue(lineHeight);
+      const baseY = getPixelValue(motionY.current) + getPixelValue(dy) + getPixelValue(startDy);
+      const baseX = getPixelValue(motionX.current) + getPixelValue(dx);
 
-    if (rotate !== undefined) {
-      const centerX = getPixelValue(x);
-      const centerY = getPixelValue(y);
-      const radians = degreesToRadians(rotate);
+      ctx.save();
 
-      ctx.translate(centerX, centerY);
-      ctx.rotate(radians);
-      ctx.translate(-centerX, -centerY);
-    }
+      if (rotate !== undefined) {
+        const centerX = getPixelValue(typeof x === 'function' ? 0 : x);
+        const centerY = getPixelValue(typeof y === 'function' ? 0 : y);
+        const radians = degreesToRadians(rotate);
 
-    const styles = styleOverrides
-      ? merge({ styles: { strokeWidth } }, styleOverrides)
-      : {
-          styles: {
-            fill,
-            fillOpacity,
-            stroke,
-            strokeWidth,
-            opacity,
-            paintOrder: 'stroke',
-            textAnchor,
-          },
-          classes: cls('lc-text', 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,
-        text,
-        {
-          x: xPos,
-          y: yPos,
-        },
-        styles
-      );
-    }
+        ctx.translate(centerX, centerY);
+        ctx.rotate(radians);
+        ctx.translate(-centerX, -centerY);
+      }
+
+      const computedStyles = getComputedStyles(ctx.canvas, styles);
 
-    ctx.restore();
+      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(' ');
+
+        const xPos = baseX;
+        const yPos = baseY + index * effectiveLineHeight;
+
+        renderText(ctx, text, { x: xPos, y: yPos }, styles);
+      }
+
+      ctx.restore();
+    }
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
   const fillKey = createKey(() => fill);
   const strokeKey = createKey(() => stroke);
 
-  if (layerCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'Text',
+  chartCtx.registerComponent({
+    name: 'Text',
+    kind: 'mark',
+    markInfo: () => {
+      if (!dataMode) return {};
+      return {
+        data: dataProp,
+        x: typeof x === 'string' ? x : undefined,
+        y: typeof y === 'string' ? y : undefined,
+        color: typeof fill === 'string' ? fill : undefined,
+      };
+    },
+    canvasRender: layerCtx === 'canvas' ? {
       render,
       deps: () => [
+        dataMode,
+        dataMode ? resolvedItems : null,
         value,
         motionX.current,
         motionY.current,
@@ -465,94 +662,155 @@
         textAnchor,
         verticalAnchor,
       ],
-    });
-  }
+    } : undefined,
+  });
 </script>
 
 {#if layerCtx === 'svg'}
-  <!-- `overflow: visible` allow contents to be shown outside element -->
-  <!-- `paint-order: stroke` supports stroke outlining text  -->
-  <svg x={dx} y={dy} {...svgProps} class={['lc-text-svg', 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={['lc-text', className]}
-      >
-        <textPath
-          style="text-anchor: {textAnchor};"
+  {#if dataMode}
+    {#each resolvedItems as item (item.key)}
+      {@const text = resolveTextValue(item.d)}
+      {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
+      {@const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale)}
+      {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d)}
+      {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
+      {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
+      {@const resolvedClass = resolveStyleProp(className, item.d)}
+      {@const dataRotateTransform = rotate ? `rotate(${rotate}, ${item.x}, ${item.y})` : ''}
+      <svg x={dx} y={dy} {...svgProps} class={['lc-text-svg', svgProps?.class]}>
+        <text
+          x={item.x}
+          y={item.y}
+          transform={transformProp ?? dataRotateTransform}
+          text-anchor={textAnchor}
           dominant-baseline={dominantBaseline}
-          href="#{pathId}"
-          {startOffset}
-          class="lc-text-path"
+          {...restProps}
+          fill={resolvedFill}
+          fill-opacity={resolvedFillOpacity}
+          stroke={resolvedStroke}
+          stroke-width={resolvedStrokeWidth}
+          opacity={resolvedOpacity}
+          class={['lc-text', resolvedClass]}
         >
-          {wordsByLines.map((line) => line.words.join(' ')).join()}
-        </textPath>
-      </text>
-    {:else if isValidXOrY(x) && isValidXOrY(y)}
-      <text
-        bind:this={ref}
-        x={motionX.current}
-        y={motionY.current}
-        {transform}
-        text-anchor={textAnchor}
-        dominant-baseline={dominantBaseline}
-        {...restProps}
-        {fill}
-        fill-opacity={fillOpacity}
-        {stroke}
-        stroke-width={strokeWidth}
-        {opacity}
-        class={['lc-text', className]}
-      >
-        {#each wordsByLines as line, index}
           <tspan
-            x={motionX.current}
-            dy={index === 0 ? startDy : getPixelValue(lineHeight)}
+            x={item.x}
+            dy={dataModeStartDy}
             class="lc-text-tspan"
           >
-            {line.words.join(' ')}
+            {text}
           </tspan>
-        {/each}
-      </text>
-    {/if}
-  </svg>
+        </text>
+      </svg>
+    {/each}
+  {:else}
+    <!-- `overflow: visible` allow contents to be shown outside element -->
+    <!-- `paint-order: stroke` supports stroke outlining text  -->
+    <svg x={dx} y={dy} {...svgProps} class={['lc-text-svg', 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 as string}
+          fill-opacity={fillOpacity as number}
+          stroke={stroke as string}
+          stroke-width={strokeWidth as number}
+          opacity={opacity as number}
+          transform={transformProp}
+          class={['lc-text', className as string]}
+        >
+          <textPath
+            style="text-anchor: {textAnchor};"
+            dominant-baseline={dominantBaseline}
+            href="#{pathId}"
+            {startOffset}
+            class="lc-text-path"
+          >
+            {wordsByLines.map((line) => line.words.join(' ')).join()}
+          </textPath>
+        </text>
+      {:else if isValidXOrY(typeof x === 'function' ? undefined : x) && isValidXOrY(typeof y === 'function' ? undefined : y)}
+        <text
+          bind:this={ref}
+          x={motionX.current}
+          y={motionY.current}
+          {transform}
+          text-anchor={textAnchor}
+          dominant-baseline={dominantBaseline}
+          {...restProps}
+          fill={fill as string}
+          fill-opacity={fillOpacity as number}
+          stroke={stroke as string}
+          stroke-width={strokeWidth as number}
+          opacity={opacity as number}
+          class={['lc-text', className as string]}
+        >
+          {#each wordsByLines as line, index}
+            <tspan
+              x={motionX.current}
+              dy={index === 0 ? startDy : getPixelValue(lineHeight)}
+              class="lc-text-tspan"
+            >
+              {line.words.join(' ')}
+            </tspan>
+          {/each}
+        </text>
+      {/if}
+    </svg>
+  {/if}
 {:else if layerCtx === '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'}"
-    style:white-space="pre-wrap"
-    style:line-height={lineHeight}
-    class={['lc-text', className]}
-  >
-    {textValue}
-  </div>
+  {#if dataMode}
+    {#each resolvedItems as item (item.key)}
+      {@const text = resolveTextValue(item.d)}
+      {@const resolvedClass = resolveStyleProp(className, item.d)}
+      {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
+      {@const translateY =
+        verticalAnchor === 'middle' ? '-50%' : verticalAnchor === 'end' ? '-100%' : '0%'}
+      <div
+        style:position="absolute"
+        style:left="{getPixelValue(dx) + item.x}px"
+        style:top="{getPixelValue(dy) + item.y}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'}"
+        style:white-space="pre-wrap"
+        style:line-height={lineHeight}
+        class={['lc-text', resolvedClass]}
+      >
+        {text}
+      </div>
+    {/each}
+  {:else}
+    {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
+    {@const translateY =
+      verticalAnchor === 'middle' ? '-50%' : verticalAnchor === 'end' ? '-100%' : '0%'}
+    <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'}"
+      style:white-space="pre-wrap"
+      style:line-height={lineHeight}
+      class={['lc-text', className as string]}
+    >
+      {textValue}
+    </div>
+  {/if}
 {/if}
 
 <style>