render-tag 0.1.6 → 0.1.8

package/lib/path/glyph-layout.js

@@ -0,0 +1,155 @@
+/**
+ * Pure layout: walks styled segments and lays each grapheme along a path.
+ * No canvas rendering happens here — that's the caller's job. Reusable
+ * for hit-testing, debugging, alternate renderers (SVG, GPU).
+ */
+import { applyFont } from '../layout.js';
+import { stringToArray } from './grapheme.js';
+/**
+ * Flatten a styled tree into a flat sequence of styled text segments.
+ * Walks in document order; concatenates text under nested inline elements.
+ * Each `#text` node contributes one segment with its resolved style.
+ */
+export function flattenSegments(root) {
+    const out = [];
+    function walk(node, inheritedRtl) {
+        const rtl = node.style.direction === 'rtl' || inheritedRtl;
+        if (node.tagName === '#text' && node.textContent) {
+            out.push({ text: node.textContent, style: node.style, rtl });
+            return;
+        }
+        for (const child of node.children)
+            walk(child, rtl);
+    }
+    walk(root, false);
+    return out;
+}
+/**
+ * Lay out graphemes along a path. Pure: does not call ctx.fillText.
+ *
+ * Algorithm:
+ *  1. Per segment, split into graphemes and measure each via ctx.measureText.
+ *     RTL segments have their grapheme order reversed before walking the path
+ *     (so a left-to-right path walk produces correct visual order).
+ *  2. Compute total natural width.
+ *  3. Pick a starting offset along the path based on `align`.
+ *  4. For each grapheme:
+ *       p0 = path.getPointAtLength(offset)
+ *       p1 = path.getPointAtLength(offset + width)
+ *       rotation = atan2(p1.y - p0.y, p1.x - p0.x)
+ *     A trailing kerning slack (sum-of-glyph-widths > whole-string width)
+ *     can push the last glyph 1–2px past pathLength; clamp the end point
+ *     to pathLength in that narrow case to avoid dropping the last glyph.
+ *  5. If a glyph would extend past the path entirely, stop emitting.
+ */
+export function layoutGlyphsOnPath(input) {
+    const { segments, path, ctx, align } = input;
+    // 1. Pre-measure all graphemes, segment-by-segment.
+    // Caller's ctx state is mutated here (font, fontKerning, letterSpacing).
+    // The outer drawTextOnPath/drawTextOnPathLayout calls ctx.save before this
+    // and ctx.restore after, so the leak doesn't reach the caller.
+    const preGlyphs = [];
+    let measuredWholeWidth = 0;
+    let maxLineHeight = 0;
+    for (const seg of segments) {
+        if (!seg.text)
+            continue;
+        const graphemes = stringToArray(seg.text);
+        if (graphemes.length === 0)
+            continue;
+        if (seg.rtl)
+            graphemes.reverse();
+        applyFont(ctx, seg.style);
+        // Always assign — when the current segment's letterSpacing is 0/unset,
+        // we still need to reset the previous segment's value.
+        ctx.letterSpacing = `${seg.style.letterSpacing || 0}px`;
+        // Track ribbon thickness: CSS line-height in px when set, else font size.
+        const lh = seg.style.lineHeight > 0 ? seg.style.lineHeight : seg.style.fontSize;
+        if (lh > maxLineHeight)
+            maxLineHeight = lh;
+        // Per-glyph width via measureText (browsers honor letterSpacing here).
+        for (const g of graphemes) {
+            const m = ctx.measureText(g);
+            preGlyphs.push({
+                char: g,
+                width: m.width,
+                style: seg.style,
+                // Only ASCII space (U+0020) is justify-eligible. \n/\t/  and
+                // other Unicode whitespace must NOT expand — that would break
+                // no-break-space contract and treat <br>-synthesized newlines as
+                // expansible spaces.
+                isSpace: g === ' ',
+            });
+        }
+        // Whole-segment width — kerning makes this < sum of per-glyph widths.
+        measuredWholeWidth += ctx.measureText(seg.text).width;
+    }
+    // 2. Sum natural width (sum of glyph widths + letterSpacing per glyph).
+    let textWidth = 0;
+    for (const g of preGlyphs) {
+        textWidth += g.width + (g.style.letterSpacing || 0);
+    }
+    // Trim the last letterSpacing — it shouldn't trail.
+    if (preGlyphs.length > 0) {
+        textWidth -= preGlyphs[preGlyphs.length - 1].style.letterSpacing || 0;
+    }
+    // Kerning slack: how much the per-glyph sum can exceed the measured
+    // whole-string width. When the path is sized to match the visual text,
+    // we use this to allow up to N px of overshoot at the path's tail end.
+    const kerningSlack = Math.max(0, textWidth - measuredWholeWidth);
+    // 3. Starting offset + per-space extra (justify).
+    const pathLength = path.length;
+    let startOffset = 0;
+    let extraPerSpace = 0;
+    if (align === 'center') {
+        startOffset = Math.max(0, (pathLength - textWidth) / 2);
+    }
+    else if (align === 'right') {
+        startOffset = Math.max(0, pathLength - textWidth);
+    }
+    else if (align === 'justify') {
+        const spaceCount = preGlyphs.filter(g => g.isSpace).length;
+        if (spaceCount > 0 && pathLength > textWidth) {
+            extraPerSpace = (pathLength - textWidth) / spaceCount;
+        }
+    }
+    // 4. Walk the path.
+    const glyphs = [];
+    let offset = startOffset;
+    for (let i = 0; i < preGlyphs.length; i++) {
+        const g = preGlyphs[i];
+        const effectiveWidth = g.width + (g.isSpace ? extraPerSpace : 0);
+        const p0 = path.getPointAtLength(offset);
+        if (!p0)
+            break;
+        let endLen = offset + effectiveWidth;
+        let p1;
+        if (endLen > pathLength) {
+            // Clamp to pathLength only if the overshoot is within the kerning slack —
+            // matches konva's behavior to keep the last glyph from getting dropped.
+            if (endLen - pathLength <= kerningSlack + 0.5) {
+                p1 = path.getPointAtLength(pathLength);
+            }
+            else {
+                break;
+            }
+        }
+        else {
+            p1 = path.getPointAtLength(endLen);
+        }
+        if (!p1)
+            break;
+        const rotation = Math.atan2(p1.y - p0.y, p1.x - p0.x);
+        glyphs.push({
+            char: g.char,
+            x: p0.x,
+            y: p0.y,
+            rotation,
+            width: g.width,
+            style: g.style,
+        });
+        offset = endLen + (g.style.letterSpacing || 0);
+    }
+    return { glyphs, textWidth, pathLength, lineHeight: maxLineHeight };
+}
+//# sourceMappingURL=glyph-layout.js.map

package/lib/path/glyph-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyph-layout.js","sourceRoot":"","sources":["../../src/path/glyph-layout.ts"],"names":[],"mappings":"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"}

package/lib/path/grapheme.d.ts

@@ -0,0 +1,2 @@
+export declare function stringToArray(s: string): string[];
+//# sourceMappingURL=grapheme.d.ts.map

package/lib/path/grapheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grapheme.d.ts","sourceRoot":"","sources":["../../src/path/grapheme.ts"],"names":[],"mappings":"AAwBA,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAUjD"}

package/lib/path/grapheme.js

@@ -0,0 +1,39 @@
+/**
+ * Split a string into user-perceived characters (grapheme clusters).
+ * Uses Intl.Segmenter when available (handles ZWJ emoji sequences, regional
+ * indicators, combining marks). Falls back to a surrogate-pair-aware split
+ * for older environments.
+ *
+ * Equivalent in spirit to konva's stringToArray helper.
+ */
+let _segmenter;
+function getSegmenter() {
+    if (_segmenter !== undefined)
+        return _segmenter;
+    if (typeof Intl !== 'undefined' && typeof Intl.Segmenter === 'function') {
+        try {
+            _segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+        }
+        catch {
+            _segmenter = null;
+        }
+    }
+    else {
+        _segmenter = null;
+    }
+    return _segmenter;
+}
+export function stringToArray(s) {
+    if (!s)
+        return [];
+    const seg = getSegmenter();
+    if (seg) {
+        const out = [];
+        for (const piece of seg.segment(s))
+            out.push(piece.segment);
+        return out;
+    }
+    // Fallback: handle UTF-16 surrogate pairs but not full grapheme clusters.
+    return Array.from(s);
+}
+//# sourceMappingURL=grapheme.js.map

package/lib/path/grapheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grapheme.js","sourceRoot":"","sources":["../../src/path/grapheme.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,IAAI,UAA6C,CAAC;AAElD,SAAS,YAAY;IACnB,IAAI,UAAU,KAAK,SAAS;QAAE,OAAO,UAAU,CAAC;IAChD,IAAI,OAAO,IAAI,KAAK,WAAW,IAAI,OAAO,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE,CAAC;QACxE,IAAI,CAAC;YACH,UAAU,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC,CAAC;QAC1E,CAAC;QAAC,MAAM,CAAC;YACP,UAAU,GAAG,IAAI,CAAC;QACpB,CAAC;IACH,CAAC;SAAM,CAAC;QACN,UAAU,GAAG,IAAI,CAAC;IACpB,CAAC;IACD,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,CAAS;IACrC,IAAI,CAAC,CAAC;QAAE,OAAO,EAAE,CAAC;IAClB,MAAM,GAAG,GAAG,YAAY,EAAE,CAAC;IAC3B,IAAI,GAAG,EAAE,CAAC;QACR,MAAM,GAAG,GAAa,EAAE,CAAC;QACzB,KAAK,MAAM,KAAK,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;YAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC5D,OAAO,GAAG,CAAC;IACb,CAAC;IACD,0EAA0E;IAC1E,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACvB,CAAC"}

package/lib/path/index.d.ts

@@ -0,0 +1,96 @@
+/**
+ * render-tag/path — draw rich text along an SVG path on a 2D canvas.
+ *
+ * Reuses render-tag's HTML+CSS pipeline (parseHTML, resolveStylesFromCSS) and
+ * font primitives (applyFont) so styled spans, fonts, and colors come straight
+ * from the input HTML — no separate option surface.
+ *
+ *   import { drawTextOnPath } from 'render-tag/path';
+ *   drawTextOnPath({
+ *     html: '<b>Hello</b> <span style="color:red">world</span>',
+ *     path: 'M0,50 Q200,0 400,50',
+ *     ctx,
+ *     align: 'center',
+ *   });
+ *
+ * For finer control, mirror the main API's split:
+ *   const result = layoutTextOnPath({ html, path, align });
+ *   drawTextOnPathLayout({ layout: result, ctx });
+ * Use the split when you want to inspect / hit-test glyphs before drawing,
+ * or render the same layout onto multiple targets.
+ *
+ * Out of scope for the first cut: text-shadow, gradient/background-clip text,
+ * text-decoration (underline/line-through), per-glyph kerning callbacks.
+ * Mixed-script BiDi shaping is not supported (matches the konva limit) — pure
+ * RTL strings render correctly via CSS `direction: rtl` or the `dir` attribute.
+ */
+import { type PathLike } from './svg-path.js';
+import { type AlignMode, type GlyphPlacement } from './glyph-layout.js';
+export type { PathLike, GlyphPlacement, AlignMode };
+export interface LayoutTextOnPathConfig {
+    /** Rich-text HTML (same dialect as render-tag's main API). */
+    html: string;
+    /** SVG path 'd' attribute string, or a PathLike implementation. */
+    path: string | PathLike;
+    /** Alignment of text along the path (default 'left'). */
+    align?: AlignMode;
+    /**
+     * Optional measurement context. If omitted, an offscreen canvas is created.
+     * Pass one to share font measurement caches with other render-tag calls.
+     */
+    ctx?: CanvasRenderingContext2D;
+}
+export interface TextOnPathLayout {
+    /** Per-glyph placement records (origin point, rotation, style). */
+    glyphs: GlyphPlacement[];
+    /** Sum of per-glyph advances (the natural width of the rendered text). */
+    textWidth: number;
+    /** Total arc length of the path. */
+    pathLength: number;
+    /**
+     * Max line height across all segments (CSS line-height in px when set,
+     * else the segment's font size). Use as the thickness for a background
+     * ribbon polygon around curved text.
+     */
+    lineHeight: number;
+}
+export interface DrawTextOnPathLayoutConfig {
+    /** Result from layoutTextOnPath(). */
+    layout: TextOnPathLayout;
+    /** Destination 2D context. The transform is saved/restored per glyph. */
+    ctx: CanvasRenderingContext2D;
+}
+export interface DrawTextOnPathConfig {
+    /** Rich-text HTML (same dialect as render-tag's main API). */
+    html: string;
+    /** SVG path 'd' attribute string, or a PathLike implementation. */
+    path: string | PathLike;
+    /** Destination 2D context. */
+    ctx: CanvasRenderingContext2D;
+    /** Alignment of text along the path (default 'left'). */
+    align?: AlignMode;
+}
+export type DrawTextOnPathResult = TextOnPathLayout;
+/**
+ * Compute glyph placements for rich text along a path, without drawing.
+ * Useful for inspection, hit-testing, or rendering the same layout multiple times.
+ * The HTML's CSS resolves against an infinite-width container, so wrapping
+ * does not happen — all text flows along the path as one logical line.
+ *
+ * The caller's ctx (when passed) has its `font`, `fontKerning`, and
+ * `letterSpacing` state saved+restored around the measurement work; nothing
+ * leaks to the caller.
+ */
+export declare function layoutTextOnPath(config: LayoutTextOnPathConfig): TextOnPathLayout;
+/**
+ * Draw a pre-computed layout onto a canvas context.
+ * Each glyph is rendered with its own style; ctx state is saved/restored
+ * around the whole batch so the caller's state is preserved.
+ */
+export declare function drawTextOnPathLayout(config: DrawTextOnPathLayoutConfig): void;
+/**
+ * Convenience: compute layout and draw in a single call.
+ * Equivalent to `drawTextOnPathLayout({ layout: layoutTextOnPath(...), ctx })`.
+ */
+export declare function drawTextOnPath(config: DrawTextOnPathConfig): DrawTextOnPathResult;
+//# sourceMappingURL=index.d.ts.map

package/lib/path/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/path/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAMH,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC;AAEpD,MAAM,WAAW,sBAAsB;IACrC,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,GAAG,CAAC,EAAE,wBAAwB,CAAC;CAChC;AAED,MAAM,WAAW,gBAAgB;IAC/B,mEAAmE;IACnE,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,0EAA0E;IAC1E,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,sCAAsC;IACtC,MAAM,EAAE,gBAAgB,CAAC;IACzB,yEAAyE;IACzE,GAAG,EAAE,wBAAwB,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB;IACnC,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,8BAA8B;IAC9B,GAAG,EAAE,wBAAwB,CAAC;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,CAAC;AAEpD;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,sBAAsB,GAAG,gBAAgB,CAmBjF;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,0BAA0B,GAAG,IAAI,CAQ7E;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,oBAAoB,GAAG,oBAAoB,CAWjF"}

package/lib/path/index.js

@@ -0,0 +1,145 @@
+/**
+ * render-tag/path — draw rich text along an SVG path on a 2D canvas.
+ *
+ * Reuses render-tag's HTML+CSS pipeline (parseHTML, resolveStylesFromCSS) and
+ * font primitives (applyFont) so styled spans, fonts, and colors come straight
+ * from the input HTML — no separate option surface.
+ *
+ *   import { drawTextOnPath } from 'render-tag/path';
+ *   drawTextOnPath({
+ *     html: '<b>Hello</b> <span style="color:red">world</span>',
+ *     path: 'M0,50 Q200,0 400,50',
+ *     ctx,
+ *     align: 'center',
+ *   });
+ *
+ * For finer control, mirror the main API's split:
+ *   const result = layoutTextOnPath({ html, path, align });
+ *   drawTextOnPathLayout({ layout: result, ctx });
+ * Use the split when you want to inspect / hit-test glyphs before drawing,
+ * or render the same layout onto multiple targets.
+ *
+ * Out of scope for the first cut: text-shadow, gradient/background-clip text,
+ * text-decoration (underline/line-through), per-glyph kerning callbacks.
+ * Mixed-script BiDi shaping is not supported (matches the konva limit) — pure
+ * RTL strings render correctly via CSS `direction: rtl` or the `dir` attribute.
+ */
+import { parseHTML } from '../parse.js';
+import { resolveStylesFromCSS } from '../css-resolver.js';
+import { applyFont } from '../layout.js';
+import { pathFromString } from './svg-path.js';
+import { flattenSegments, layoutGlyphsOnPath, } from './glyph-layout.js';
+/**
+ * Compute glyph placements for rich text along a path, without drawing.
+ * Useful for inspection, hit-testing, or rendering the same layout multiple times.
+ * The HTML's CSS resolves against an infinite-width container, so wrapping
+ * does not happen — all text flows along the path as one logical line.
+ *
+ * The caller's ctx (when passed) has its `font`, `fontKerning`, and
+ * `letterSpacing` state saved+restored around the measurement work; nothing
+ * leaks to the caller.
+ */
+export function layoutTextOnPath(config) {
+    const { html, align = 'left' } = config;
+    const path = typeof config.path === 'string' ? pathFromString(config.path) : config.path;
+    // Use the caller's ctx for measurement if given; otherwise spin up our own.
+    const measureCtx = config.ctx ?? createMeasureCtx();
+    const ownsCtx = config.ctx === undefined;
+    const { fragment, css } = parseHTML(html);
+    const { tree, cleanup } = resolveStylesFromCSS(fragment, css, Number.MAX_SAFE_INTEGER);
+    if (!ownsCtx)
+        measureCtx.save();
+    try {
+        const segments = flattenSegments(tree);
+        return layoutGlyphsOnPath({ segments, path, ctx: measureCtx, align });
+    }
+    finally {
+        if (!ownsCtx)
+            measureCtx.restore();
+        cleanup();
+    }
+}
+/**
+ * Draw a pre-computed layout onto a canvas context.
+ * Each glyph is rendered with its own style; ctx state is saved/restored
+ * around the whole batch so the caller's state is preserved.
+ */
+export function drawTextOnPathLayout(config) {
+    const { layout, ctx } = config;
+    ctx.save();
+    try {
+        for (const g of layout.glyphs)
+            drawGlyph(ctx, g);
+    }
+    finally {
+        ctx.restore();
+    }
+}
+/**
+ * Convenience: compute layout and draw in a single call.
+ * Equivalent to `drawTextOnPathLayout({ layout: layoutTextOnPath(...), ctx })`.
+ */
+export function drawTextOnPath(config) {
+    // Save/restore is handled inside layoutTextOnPath + drawTextOnPathLayout,
+    // so the caller's ctx state survives both stages even when sharing one ctx.
+    const layout = layoutTextOnPath({
+        html: config.html,
+        path: config.path,
+        align: config.align,
+        ctx: config.ctx,
+    });
+    drawTextOnPathLayout({ layout, ctx: config.ctx });
+    return layout;
+}
+function createMeasureCtx() {
+    const canvas = typeof OffscreenCanvas !== 'undefined'
+        ? new OffscreenCanvas(1, 1)
+        : document.createElement('canvas');
+    return canvas.getContext('2d');
+}
+/** Draw a single grapheme at its origin with the given rotation. */
+function drawGlyph(ctx, g) {
+    const { style } = g;
+    ctx.save();
+    ctx.translate(g.x, g.y);
+    ctx.rotate(g.rotation);
+    applyFont(ctx, style);
+    ctx.textBaseline = 'alphabetic';
+    // letterSpacing isn't applied per single glyph — it's already baked into
+    // the glyph offset advance in glyph-layout.
+    const fill = effectiveFill(style);
+    const isStroked = style.webkitTextStrokeWidth > 0;
+    const isFillTransparent = fill === 'transparent';
+    const paintStrokeFirst = /paint-order:\s*stroke/i.test(style.paintOrder || '') ||
+        /^stroke/i.test((style.paintOrder || '').trim());
+    const drawFill = () => {
+        if (isFillTransparent && isStroked)
+            return;
+        ctx.fillStyle = fill;
+        ctx.fillText(g.char, 0, 0);
+    };
+    const drawStroke = () => {
+        if (!isStroked)
+            return;
+        ctx.lineJoin = 'round';
+        ctx.lineWidth = style.webkitTextStrokeWidth;
+        ctx.strokeStyle = style.webkitTextStrokeColor || style.color;
+        ctx.strokeText(g.char, 0, 0);
+    };
+    if (paintStrokeFirst) {
+        drawStroke();
+        drawFill();
+    }
+    else {
+        drawFill();
+        drawStroke();
+    }
+    ctx.restore();
+}
+function effectiveFill(style) {
+    if (style.webkitTextFillColor && style.webkitTextFillColor !== 'transparent') {
+        return style.webkitTextFillColor;
+    }
+    return style.color;
+}
+//# sourceMappingURL=index.js.map

package/lib/path/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/path/index.ts"],"names":[],"mappings":"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"}

package/lib/path/svg-path.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Minimal SVG path 'd' attribute parser + arc-length tabulation.
+ * Supports: M m L l H h V v C c S s Q q T t A a Z z.
+ *
+ * Curves are sampled uniformly in parameter space and the cumulative
+ * arc-length is tabulated. `getPointAtLength` binary-searches that table
+ * and lerps between adjacent samples. Accuracy is "good enough for visual
+ * rendering" — not for hit-testing or precise length math.
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface PathLike {
+    length: number;
+    /** Returns the (x, y) on the path at arc length `t`, or null if `t` is out of range. */
+    getPointAtLength(t: number): Point | null;
+}
+type Seg = {
+    type: 'L';
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+} | {
+    type: 'C';
+    x0: number;
+    y0: number;
+    c1x: number;
+    c1y: number;
+    c2x: number;
+    c2y: number;
+    x1: number;
+    y1: number;
+} | {
+    type: 'Q';
+    x0: number;
+    y0: number;
+    cx: number;
+    cy: number;
+    x1: number;
+    y1: number;
+} | {
+    type: 'A';
+    x0: number;
+    y0: number;
+    rx: number;
+    ry: number;
+    xAxisRotation: number;
+    largeArc: boolean;
+    sweep: boolean;
+    x1: number;
+    y1: number;
+};
+/**
+ * Parse path data into an array of normalized absolute-coordinate segments.
+ * Drops moveTo commands (they don't draw); inserts a closing line for Z.
+ */
+export declare function parsePathData(d: string): Seg[];
+/**
+ * Build a PathLike interface from normalized segments.
+ * Tabulates cumulative arc-length per segment for O(log N) length-to-point lookup.
+ */
+export declare function buildPathLike(segs: Seg[]): PathLike;
+/** Convenience: parse a path string and build a PathLike in one call. */
+export declare function pathFromString(d: string): PathLike;
+export {};
+//# sourceMappingURL=svg-path.d.ts.map

package/lib/path/svg-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-path.d.ts","sourceRoot":"","sources":["../../src/path/svg-path.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;CAC3C;AAED,KAAK,GAAG,GACJ;IAAE,IAAI,EAAE,GAAG,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC7D;IACE,IAAI,EAAE,GAAG,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IACzB,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;CACxB,GACD;IACE,IAAI,EAAE,GAAG,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;CACxB,GACD;IACE,IAAI,EAAE,GAAG,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;CACxB,CAAC;AAiCN;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE,CAuK9C;AAqGD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,QAAQ,CAgFnD;AAED,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,GAAG,QAAQ,CAElD"}