drawnui-react 0.1.0-preview.2 → 0.1.0-preview.21

package/dist/controls/SkiaLabel.js

@@ -24,6 +24,8 @@ export class SkiaLabel extends SkiaControl {
     verticalTextAlignment = "Start";
     lineSpacing = 1;
     lineHeight = 1;
+    paragraphSpacing = 0;
+    characterSpacing = 1;
     textTransform = "None";
     padding = Thickness.Zero;
     /** Styled fragments; when not empty they replace `Text` (same precedence as C#). */
@@ -43,12 +45,17 @@ export class SkiaLabel extends SkiaControl {
         this[key] = v;
         this.Update();
     } }
+    /** A property that changes only the look (a color): no layout change, see UpdateDraw. */
+    SetLook(key, v) { if (this[key] !== v) {
+        this[key] = v;
+        this.UpdateDraw();
+    } }
     get Text() { return this.text; }
     set Text(v) { this.Set("text", v); }
     get FontSize() { return this.fontSize; }
     set FontSize(v) { this.Set("fontSize", v); }
     get TextColor() { return this.textColor; }
-    set TextColor(v) { this.Set("textColor", v); }
+    set TextColor(v) { this.SetLook("textColor", v); }
     get FontFamily() { return this.fontFamily; }
     set FontFamily(v) { this.Set("fontFamily", v); }
     /**
@@ -74,6 +81,18 @@ export class SkiaLabel extends SkiaControl {
     /** Multiplier applied to the natural line height (ascent + descent). */
     get LineHeight() { return this.lineHeight; }
     set LineHeight(v) { this.Set("lineHeight", v); }
+    /**
+     * Space above every paragraph after the first, in lines (C# ParagraphSpacing; 0 here as DrawnUi.Rust, C# 0.25). A
+     * paragraph starts after "\n"; U+2028 breaks the line inside a paragraph.
+     */
+    get ParagraphSpacing() { return this.paragraphSpacing; }
+    set ParagraphSpacing(v) { this.Set("paragraphSpacing", v); }
+    /**
+     * C# CharacterSpacing: 1 = the font's own spacing; every glyph is followed by (CharacterSpacing - 1) points more
+     * (less below 1), the line measures and wraps at the width it draws (C# 7cf1007c, DrawnUi.Rust label).
+     */
+    get CharacterSpacing() { return this.characterSpacing; }
+    set CharacterSpacing(v) { this.Set("characterSpacing", v); }
     get TextTransform() { return this.textTransform; }
     set TextTransform(v) { this.Set("textTransform", v); }
     get Padding() { return this.padding; }
@@ -85,8 +104,14 @@ export class SkiaLabel extends SkiaControl {
     InsertSubView(index, control) {
         if (!(control instanceof TextSpan))
             throw new Error("DrawnUi: SkiaLabel children must be <TextSpan>");
+        const at = control.Parent === this ? this.Spans.indexOf(control) : -1; // already a span: a move, never a 2nd copy
+        if (at >= 0) {
+            this.Spans.splice(at, 1);
+            if (at < index)
+                index--;
+        }
         control.Parent = this;
-        this.Spans.splice(index, 0, control);
+        this.Spans.splice(Math.min(Math.max(0, index), this.Spans.length), 0, control);
         this.Update();
     }
     RemoveSubView(control) {
@@ -102,6 +127,8 @@ export class SkiaLabel extends SkiaControl {
     mainFonts;
     fontsCache = new Map();
     runCache = new Map();
+    /** CharacterSpacing in pixels at the measured scale: added after every glyph of a run (its Width includes them). */
+    glyphSpacing = 0;
     ResolveFonts(family, weight, italic, sizePx) {
         const key = `${family}|${this.fontFamilyFallback}|${weight}|${italic}|${sizePx}`;
         let f = this.fontsCache.get(key);
@@ -131,12 +158,24 @@ export class SkiaLabel extends SkiaControl {
         const weight = span.FontWeight > 0 ? span.FontWeight : span.IsBold ? 700 : this.fontWeight > 0 ? this.fontWeight : bold ? 700 : 0;
         return this.ResolveFonts(span.FontFamily ?? this.fontFamily, weight, italic, (span.FontSize ?? this.fontSize) * scale);
     }
-    static Advance(font, text) {
+    Advance(font, text) {
         let w = 0;
         for (const adv of font.getGlyphWidths(font.getGlyphIDs(text)))
-            w += adv;
+            w += adv + this.glyphSpacing;
         return w;
     }
+    static Ignorable = /[\u200B-\u200F\u2060-\u2064\uFE00-\uFE0F\u{E0000}-\u{E0FFF}]/u;
+    /**
+     * Default-ignorable code points (zero width space, joiners, direction marks, word joiners, variation selectors such
+     * as U+FE0F after an emoji, tags) that none of the fonts has draw nothing and take no room, never the missing-glyph
+     * box (DrawnUi.Rust label_ignorables; text is not shaped here, C# hides them by shaping).
+     */
+    static DropIgnorables(text, main, fallbacks) {
+        if (!SkiaLabel.Ignorable.test(text))
+            return text;
+        const has = (cp) => main.getGlyphIDs(cp)[0] !== 0 || fallbacks.some((f) => f.getGlyphIDs(cp)[0] !== 0);
+        return Array.from(text).filter((cp) => !SkiaLabel.Ignorable.test(cp) || has(cp)).join("");
+    }
     /**
      * Splits text into runs by glyph availability: the main font, or the first fallback that has a glyph where the
      * main font has glyph 0. Spaces always stay on the main font (fallback faces often carry very wide spaces).
@@ -150,8 +189,13 @@ export class SkiaLabel extends SkiaControl {
             const main = fonts.Main;
             const fbs = fonts.Fallbacks;
             cached = [];
+            text = SkiaLabel.DropIgnorables(text, main, fbs);
+            if (text.length === 0) {
+                this.runCache.set(cacheKey, cached);
+                return cached;
+            }
             if (fbs.length === 0) {
-                cached.push({ Text: text, Font: main, Width: SkiaLabel.Advance(main, text), Fonts: fonts });
+                cached.push({ Text: text, Font: main, Width: this.Advance(main, text), Fonts: fonts });
             }
             else {
                 const cps = Array.from(text);
@@ -170,13 +214,13 @@ export class SkiaLabel extends SkiaControl {
                     const f = fontFor(i);
                     if (f !== current) {
                         const t = cps.slice(start, i).join("");
-                        cached.push({ Text: t, Font: current, Width: SkiaLabel.Advance(current, t), Fonts: fonts });
+                        cached.push({ Text: t, Font: current, Width: this.Advance(current, t), Fonts: fonts });
                         start = i;
                         current = f;
                     }
                 }
                 const t = cps.slice(start).join("");
-                cached.push({ Text: t, Font: current, Width: SkiaLabel.Advance(current, t), Fonts: fonts });
+                cached.push({ Text: t, Font: current, Width: this.Advance(current, t), Fonts: fonts });
             }
             this.runCache.set(cacheKey, cached);
         }
@@ -184,6 +228,76 @@ export class SkiaLabel extends SkiaControl {
     }
     Width(runs) { let w = 0; for (const r of runs)
         w += r.Width; return w; }
+    /** A line never starts with these (closing punctuation, small kana, the long vowel mark): JIS X 4051 kinsoku (C#). */
+    static NoBreakBefore = "、。，．・：；？！゛゜ヽヾゝゞ々〻ー」』）〕］｝〉》】〗〙〟｠»’”‐゠–〜～ぁぃぅぇぉっゃゅょゎゕゖァィゥェォッャュョヮヵヶㇰㇱㇲㇳㇴㇵㇶㇷㇸㇹㇺㇻㇼㇽㇾㇿ｡｣､･ｰｧｨｩｪｫｬｭｮｯ)]},.!?:;%";
+    /** A line never ends with these (opening brackets and quotes). */
+    static NoBreakAfter = "「『（〔［｛〈《【〖〘〝｟«‘“｢([{";
+    /** Chinese / Japanese: ideographs, kana, CJK punctuation, full-width forms (C# IsCjkAt). Korean breaks at spaces only. */
+    static Cjk = /[\u3000-\u312F\u3190-\u33FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF\uFF00-\uFFEF\u{20000}-\u{3FFFF}]/u;
+    static CanBreakBetween(before, after) {
+        return (SkiaLabel.Cjk.test(before) || SkiaLabel.Cjk.test(after)) && !SkiaLabel.NoBreakBefore.includes(after) && !SkiaLabel.NoBreakAfter.includes(before);
+    }
+    /**
+     * C# CanBreakInsideWord: whether a line may break between text[index - 1] and text[index] (UTF-16 indexes) inside a
+     * space-free run: next to a Chinese or Japanese character, never before closing punctuation or small kana, never
+     * after an opening bracket, never inside a surrogate pair.
+     */
+    static CanBreakInsideWord(text, index) {
+        if (index <= 0 || index >= text.length)
+            return false;
+        const hi = (k) => { const c = text.charCodeAt(k); return c >= 0xD800 && c <= 0xDBFF; };
+        if (hi(index - 1))
+            return false; // inside a surrogate pair
+        const before = String.fromCodePoint(text.codePointAt(hi(index - 2) && index >= 2 ? index - 2 : index - 1));
+        const after = String.fromCodePoint(text.codePointAt(index));
+        return SkiaLabel.CanBreakBetween(before, after);
+    }
+    /**
+     * C# FitAtBreak: the last place inside the word where a Chinese / Japanese line may break and `prefix` plus the word
+     * up to there still fits; code points from the word's start, 0 = none.
+     */
+    FitCjk(word, prefix, maxWidth) {
+        if (!word.some((r) => SkiaLabel.Cjk.test(r.Text)))
+            return 0;
+        const sp = this.glyphSpacing;
+        let x = prefix, best = 0, before = "", k = 0;
+        for (const r of word) {
+            const cps = Array.from(r.Text), widths = r.Font.getGlyphWidths(r.Font.getGlyphIDs(r.Text, cps.length));
+            for (let i = 0; i < cps.length; i++) {
+                if (k > 0 && SkiaLabel.CanBreakBetween(before, cps[i])) {
+                    if (x - sp > maxWidth)
+                        return best;
+                    best = k;
+                }
+                x += widths[i] + sp;
+                before = cps[i];
+                k++;
+            }
+        }
+        return best;
+    }
+    /** The word cut after `count` code points: the head goes on a line, the rest follows. */
+    SplitWord(word, count) {
+        const head = [], rest = [];
+        let left = count;
+        for (const r of word) {
+            const cps = Array.from(r.Text);
+            if (left >= cps.length) {
+                head.push(r);
+                left -= cps.length;
+                continue;
+            }
+            if (left > 0) {
+                const a = cps.slice(0, left).join(""), b = cps.slice(left).join("");
+                head.push({ ...r, Text: a, Width: this.Advance(r.Font, a) });
+                rest.push({ ...r, Text: b, Width: this.Advance(r.Font, b) });
+                left = 0;
+                continue;
+            }
+            rest.push(r);
+        }
+        return [head, rest];
+    }
     Transform(text) {
         switch (this.textTransform) {
             case "Uppercase": return text.toUpperCase();
@@ -199,10 +313,16 @@ export class SkiaLabel extends SkiaControl {
     Tokenize(scale) {
         const paragraphs = [[]];
         const add = (text, fonts, span) => {
-            const parts = this.Transform(text).split("\n");
+            // "\n" starts a paragraph, U+2028 breaks the line inside one
+            const pieces = this.Transform(text).split(/(\n|\u2028)/);
+            const parts = pieces.filter((_, i) => i % 2 === 0), seps = pieces.filter((_, i) => i % 2 === 1);
             for (let p = 0; p < parts.length; p++) {
-                if (p > 0)
-                    paragraphs.push([]);
+                if (p > 0) {
+                    const next = [];
+                    if (seps[p - 1] === "\u2028")
+                        next.LineBreak = true;
+                    paragraphs.push(next);
+                }
                 const para = paragraphs[paragraphs.length - 1];
                 const words = parts[p].split(" ");
                 for (let w = 0; w < words.length; w++) {
@@ -248,13 +368,21 @@ export class SkiaLabel extends SkiaControl {
                 line.Descent = r.Fonts.Descent;
         }
     }
-    /** Word-wraps tokens into lines that fit maxWidth (Infinity = no wrap), applies MaxLines with a tail ellipsis. */
-    LayoutLines(maxWidth, scale) {
+    /**
+     * Word-wraps tokens into lines that fit maxWidth (Infinity = no wrap); keeps the lines that fit maxHeight (at least one)
+     * and MaxLines, the last kept one ending with a tail ellipsis (C# / DrawnUi.Rust: a label in a box too short for its
+     * text cuts it, not only MaxLines).
+     */
+    LayoutLines(maxWidth, scale, maxHeight = Infinity) {
         const wrap = this.lineBreakMode !== "NoWrap" && isFinite(maxWidth);
+        // run widths carry the gap after every glyph; the one after a line's last glyph is not drawn
+        const sp = this.glyphSpacing;
         const out = [];
         const empty = (fonts) => { const l = this.NewLine(); l.Ascent = fonts.Ascent; l.Descent = fonts.Descent; return l; };
         for (const para of this.Tokenize(scale)) {
             let line = this.NewLine();
+            if (out.length > 0 && !para.LineBreak)
+                line.Para = true;
             let lastFonts = this.mainFonts;
             for (let i = 0; i < para.length; i++) {
                 const tok = para[i];
@@ -265,46 +393,71 @@ export class SkiaLabel extends SkiaControl {
                     i++;
                     word = word.concat(this.Segment(para[i].Text, para[i].Fonts, para[i].Span));
                 }
-                const space = tok.SpaceBefore && line.Runs.length > 0 ? this.Segment(" ", tok.Fonts, tok.Span) : [];
-                const spaceW = this.Width(space), wordW = this.Width(word);
-                if (!wrap || line.Width + spaceW + wordW <= maxWidth || (line.Runs.length === 0 && wordW <= maxWidth)) {
-                    this.Append(line, space);
-                    this.Append(line, word);
-                    continue;
-                }
-                if (line.Runs.length > 0) {
-                    out.push(line);
-                    line = this.NewLine();
-                }
-                if (wordW <= maxWidth) {
-                    this.Append(line, word);
-                    continue;
-                }
-                // word longer than the line: break by code points
-                for (const r of word) {
-                    for (const ch of Array.from(r.Text)) {
-                        const run = this.Segment(ch, r.Fonts, r.Span);
-                        const chW = this.Width(run);
-                        if (line.Runs.length > 0 && line.Width + chW > maxWidth) {
-                            out.push(line);
-                            line = this.NewLine();
+                for (;;) {
+                    const space = tok.SpaceBefore && line.Runs.length > 0 ? this.Segment(" ", tok.Fonts, tok.Span) : [];
+                    const spaceW = this.Width(space), wordW = this.Width(word);
+                    if (!wrap || line.Width + spaceW + wordW - sp <= maxWidth || (line.Runs.length === 0 && wordW - sp <= maxWidth)) {
+                        this.Append(line, space);
+                        this.Append(line, word);
+                        break;
+                    }
+                    // Chinese / Japanese: the word fills the line up to its last break that fits (C# FitAtBreak)
+                    const k = this.FitCjk(word, line.Width + spaceW, maxWidth);
+                    if (k > 0) {
+                        const [head, rest] = this.SplitWord(word, k);
+                        this.Append(line, space);
+                        this.Append(line, head);
+                        out.push(line);
+                        line = this.NewLine();
+                        word = rest;
+                        continue;
+                    }
+                    if (line.Runs.length > 0) {
+                        out.push(line);
+                        line = this.NewLine();
+                        continue;
+                    }
+                    // word longer than the line: break by code points
+                    for (const r of word) {
+                        for (const ch of Array.from(r.Text)) {
+                            const run = this.Segment(ch, r.Fonts, r.Span);
+                            const chW = this.Width(run);
+                            if (line.Runs.length > 0 && line.Width + chW - sp > maxWidth) {
+                                out.push(line);
+                                line = this.NewLine();
+                            }
+                            this.Append(line, run);
                         }
-                        this.Append(line, run);
                     }
+                    break;
                 }
             }
             out.push(line.Runs.length > 0 ? line : empty(lastFonts));
         }
-        if (this.maxLines > 0 && out.length > this.maxLines) {
-            out.length = this.maxLines;
+        let kept = this.maxLines > 0 ? Math.min(out.length, this.maxLines) : out.length;
+        if (isFinite(maxHeight)) {
+            let used = 0, fit = 0;
+            for (let i = 0; i < out.length; i++) {
+                const lh = this.LineHeightPx(out[i]);
+                // the block height of the first i + 1 lines: spacing after every line but the last, paragraph space above
+                const total = used + lh + (i > 0 ? this.ParagraphSpace(out[i]) : 0);
+                if (total > maxHeight && fit > 0)
+                    break;
+                fit++;
+                used = total - lh + lh * this.lineSpacing;
+            }
+            kept = Math.min(kept, fit);
+        }
+        if (kept < out.length) {
+            out.length = kept;
             const truncates = this.lineBreakMode === "TailTruncation" || this.lineBreakMode === "HeadTruncation" || this.lineBreakMode === "MiddleTruncation";
             if (truncates) {
-                const last = out[this.maxLines - 1];
+                const last = out[kept - 1];
                 const tailRun = last.Runs[last.Runs.length - 1];
                 const fonts = tailRun ? tailRun.Fonts : this.mainFonts;
                 const ell = this.Segment("…", fonts, tailRun?.Span);
                 const ellW = this.Width(ell);
-                while (last.Runs.length > 0 && last.Width + ellW > maxWidth) {
+                while (last.Runs.length > 0 && last.Width + ellW - sp > maxWidth) {
                     const r = last.Runs[last.Runs.length - 1];
                     const cps = Array.from(r.Text);
                     cps.pop();
@@ -316,27 +469,39 @@ export class SkiaLabel extends SkiaControl {
                         continue;
                     }
                     r.Text = cps.join("");
-                    r.Width = SkiaLabel.Advance(r.Font, r.Text);
+                    r.Width = this.Advance(r.Font, r.Text);
                     last.Width += r.Width;
                 }
                 this.Append(last, ell);
             }
         }
+        if (sp !== 0)
+            for (const l of out)
+                if (l.Runs.length > 0)
+                    l.Width -= sp;
         return out;
     }
     LineHeightPx(line) { return (line.Ascent + line.Descent) * this.lineHeight; }
+    /** ParagraphSpacing above a line that starts a paragraph (after the first): that many of its lines, with their spacing. */
+    ParagraphSpace(line) { return line.Para && this.paragraphSpacing ? this.LineHeightPx(line) * this.lineSpacing * this.paragraphSpacing : 0; }
     BlockHeight() {
         let h = 0;
         for (let i = 0; i < this.lines.length; i++) {
             const lh = this.LineHeightPx(this.lines[i]);
-            h += i < this.lines.length - 1 ? lh * this.lineSpacing : lh;
+            h += (i < this.lines.length - 1 ? lh * this.lineSpacing : lh) + this.ParagraphSpace(this.lines[i]);
         }
         return h;
     }
-    MeasureAbsolute(widthConstraint, _heightConstraint, scale) {
+    MeasureAbsolute(widthConstraint, heightConstraint, scale) {
         this.mainFonts = this.ResolveMainFonts(scale);
+        const glyphSpacing = scale * (this.characterSpacing - 1);
+        if (glyphSpacing !== this.glyphSpacing) {
+            this.glyphSpacing = glyphSpacing;
+            this.runCache.clear();
+        }
         const px = this.padding.HorizontalThickness * scale, py = this.padding.VerticalThickness * scale;
-        this.lines = this.text || this.Spans.length > 0 ? this.LayoutLines(widthConstraint - px, scale) : [];
+        const extraH = this.EffectsExtra(scale).H;
+        this.lines = this.text || this.Spans.length > 0 ? this.LayoutLines(widthConstraint - px, scale, heightConstraint - py - extraH) : [];
         let width = 0;
         for (const l of this.lines)
             width = Math.max(width, l.Width);
@@ -367,6 +532,7 @@ export class SkiaLabel extends SkiaControl {
         y += extra.Stroke / 2;
         const out = [];
         for (const line of this.lines) {
+            y += this.ParagraphSpace(line);
             const lh = this.LineHeightPx(line);
             const lineW = line.Width + extra.W;
             let x = left;
@@ -419,7 +585,7 @@ export class SkiaLabel extends SkiaControl {
                 cps.forEach((cp, k) => {
                     const w = widths[k] ?? 0;
                     out.push({ Index: index, Length: cp.length, Line: li, Left: x, Top: g.y, Width: w, Height: g.h });
-                    x += w;
+                    x += w + this.glyphSpacing;
                     index += cp.length;
                 });
             }
@@ -501,9 +667,25 @@ export class SkiaLabel extends SkiaControl {
             return paint;
         };
         const canvas = ctx.Context.Canvas;
+        const sp = this.glyphSpacing;
+        // spaced text: every glyph placed with the gap after it (C# MeasureLineGlyphs positions)
+        const drawRun = (run, rx, ry, paint) => {
+            if (sp === 0) {
+                canvas.drawText(run.Text, rx, ry, paint, run.Font);
+                return;
+            }
+            const ids = run.Font.getGlyphIDs(run.Text), widths = run.Font.getGlyphWidths(ids);
+            const positions = new Float32Array(ids.length * 2);
+            for (let k = 0, gx = 0; k < ids.length; k++) {
+                positions[k * 2] = gx;
+                gx += widths[k] + sp;
+            }
+            canvas.drawGlyphs(ids, positions, rx, ry, run.Font, paint);
+        };
         const gradient = this.FillGradient;
         const textRect = new SKRect(left, top, right, bottom);
         for (const line of this.lines) {
+            y += this.ParagraphSpace(line);
             const lh = this.LineHeightPx(line);
             const lineW = line.Width + extra.W;
             let x = left;
@@ -519,22 +701,23 @@ export class SkiaLabel extends SkiaControl {
                 this.SetupGradient(strokePaint, this.StrokeGradient, gradientRect ?? new SKRect(x, y, x + line.Width, y + lh));
             for (const run of line.Runs) {
                 const span = run.Span;
+                const drawnW = run.Width - sp; // the gap after the run's last glyph is not part of it
                 if (span) {
-                    span.Rects.push(new SKRect(x - d.Left, y - d.Top, x + run.Width - d.Left, y + lh - d.Top));
+                    span.Rects.push(new SKRect(x - d.Left, y - d.Top, x + drawnW - d.Left, y + lh - d.Top));
                     if (span.BackgroundColor)
-                        canvas.drawRect(CK.LTRBRect(x, y, x + run.Width, y + lh), paintFor(span.BackgroundColor));
+                        canvas.drawRect(CK.LTRBRect(x, y, x + drawnW, y + lh), paintFor(span.BackgroundColor));
                 }
                 const color = span?.TextColor ?? this.textColor;
                 if (run.Text) {
                     // C# DrawText order: drop shadow, stroke, fill
                     if (shadowPaint)
-                        canvas.drawText(run.Text, x + shadowDx, baseline + shadowDy, shadowPaint, run.Font);
+                        drawRun(run, x + shadowDx, baseline + shadowDy, shadowPaint);
                     if (strokePaint)
-                        canvas.drawText(run.Text, x, baseline, strokePaint, run.Font);
+                        drawRun(run, x, baseline, strokePaint);
                     const paint = paintFor(color);
                     if (gradient && gradientRect)
                         this.SetupGradient(paint, gradient, gradientRect);
-                    canvas.drawText(run.Text, x, baseline, paint, run.Font);
+                    drawRun(run, x, baseline, paint);
                 }
                 if (span?.HasDecorations) {
                     // same geometry as C# DrawSpanDecorations; CanvasKit exposes no underline/strikeout/x-height metrics,
@@ -542,11 +725,11 @@ export class SkiaLabel extends SkiaControl {
                     if (span.Underline && span.UnderlineWidth !== 0) {
                         const w = span.UnderlineWidth > 0 ? span.UnderlineWidth * scale : -span.UnderlineWidth;
                         const yl = Math.round(baseline + scale);
-                        canvas.drawLine(x, yl, x + run.Width, yl, paintFor(color, w));
+                        canvas.drawLine(x, yl, x + drawnW, yl, paintFor(color, w));
                     }
                     if (span.Strikeout) {
                         const yl = Math.round(baseline - (run.Fonts.SizePx * 0.52) / 2);
-                        canvas.drawLine(x, yl, x + run.Width, yl, paintFor(span.StrikeoutColor, span.StrikeoutWidth * scale));
+                        canvas.drawLine(x, yl, x + drawnW, yl, paintFor(span.StrikeoutColor, span.StrikeoutWidth * scale));
                     }
                 }
                 x += run.Width;

package/dist/controls/SkiaLabelFps.d.ts

@@ -0,0 +1,16 @@
+import type { DrawingContext } from "../core/SkiaControl";
+import type { SKRect } from "../core/Types";
+import { SkiaLabel } from "./SkiaLabel";
+/**
+ * Mirrors DrawnUi SkiaLabelFps: a label showing the canvas FPS, drawn above its siblings, input-transparent, never
+ * re-laying out its parent. Divergence: C# sets Text on every draw, and each new value asks for another frame, so
+ * the counter keeps an idle canvas redrawing. Here the value changes only on frames that running animators already
+ * request (scroll inertia, transitions, Lottie, game loops): the counter never asks for a frame itself, and an idle
+ * canvas keeps the last value measured. Not ported: ForceRefresh, Format, MonoForDigits.
+ */
+export declare class SkiaLabelFps extends SkiaLabel {
+    constructor();
+    private arrangedIn?;
+    Arrange(destination: SKRect, widthRequest: number, heightRequest: number, scale: number): void;
+    Render(ctx: DrawingContext): void;
+}

package/dist/controls/SkiaLabelFps.js

@@ -0,0 +1,41 @@
+import { Aria } from "../core/Accessibility";
+import { SkiaLabel } from "./SkiaLabel";
+/**
+ * Mirrors DrawnUi SkiaLabelFps: a label showing the canvas FPS, drawn above its siblings, input-transparent, never
+ * re-laying out its parent. Divergence: C# sets Text on every draw, and each new value asks for another frame, so
+ * the counter keeps an idle canvas redrawing. Here the value changes only on frames that running animators already
+ * request (scroll inertia, transitions, Lottie, game loops): the counter never asks for a frame itself, and an idle
+ * canvas keeps the last value measured. Not ported: ForceRefresh, Format, MonoForDigits.
+ */
+export class SkiaLabelFps extends SkiaLabel {
+    constructor() {
+        super();
+        this.IsParentIndependent = true;
+        this.AccessibilityRole = Aria.RolePresentation;
+        this.Tag = "FPS";
+        this.Text = "FPS --";
+        this.MaxLines = 1;
+        this.BackgroundColor = "#000000";
+        this.TextColor = "#32CD32"; // LimeGreen
+        this.InputTransparent = true;
+        this.ZIndex = Number.MAX_SAFE_INTEGER;
+    }
+    arrangedIn;
+    Arrange(destination, widthRequest, heightRequest, scale) {
+        this.arrangedIn = destination;
+        super.Arrange(destination, widthRequest, heightRequest, scale);
+    }
+    Render(ctx) {
+        const view = this.Superview;
+        // the frame this asks for is requested anyway by the running animators
+        if (view && view.AnimatingControls.size > 0)
+            this.Text = `FPS ${view.FPS.toFixed(1).padStart(4, "0")}`;
+        // parent-independent: the parent does not re-lay out for it, so it re-measures itself here (as SkiaScroll does for its bars)
+        const d = this.arrangedIn;
+        if (this.NeedMeasure && d) {
+            this.Measure(d.Width, d.Height, ctx.Scale);
+            this.Arrange(d, this.WidthRequest, this.HeightRequest, ctx.Scale);
+        }
+        super.Render(ctx);
+    }
+}