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

package/dist/controls/SkiaEditor.js

@@ -1,6 +1,5 @@
 import { SKPoint } from "../core/Gestures";
 import { Super } from "../core/Super";
-import { SkiaValueAnimator } from "../core/Animators";
 import { ResolveControlStyle } from "../core/ControlStyle";
 import { KeyboardManager } from "../core/KeyboardManager";
 import { TextInputProxy } from "../core/TextInputProxy";
@@ -67,13 +66,19 @@ export class SkiaEditor extends SkiaShape {
     placeholder = new SkiaLabel();
     scrollX = 0;
     scrollY = 0;
-    blink = new SkiaValueAnimator(this);
+    /** The caret blinks on a timer, asleep between blinks: no frame runs while it waits (DrawnUi.Rust editor_rules). */
+    blinkTimer = 0;
     caretVisible = true;
     subscribed = false;
     stubSelectionStop = -1;
     selectionMovingEdge = -1;
     onKeyDown = (key, e) => this.OnKeyDown(key, e);
-    onKeyChar = (ch, e) => { e.preventDefault(); this.StubTypeText(ch); };
+    onKeyChar = (ch, e) => {
+        if (KeyboardManager.IsOwnedByElement(e) || KeyboardManager.IsInputMethodKey(e))
+            return; // a page control or the IME owns it
+        e.preventDefault();
+        this.StubTypeText(ch);
+    };
     selectionAnchor = -1;
     dragSelecting = false;
     styleApplied = {};
@@ -93,15 +98,6 @@ export class SkiaEditor extends SkiaShape {
         this.placeholder.IsVisible = false;
         this.AddSubView(this.placeholder);
         this.AddSubView(this.Label);
-        this.blink.mMinValue = 0;
-        this.blink.mMaxValue = 1;
-        this.blink.Speed = 1000;
-        this.blink.Repeat = -1;
-        this.blink.OnUpdated = (v) => { const visible = v < 0.5; if (visible !== this.caretVisible) {
-            this.caretVisible = visible;
-            this.InvalidateCache();
-            this.RepaintComposition();
-        } };
         this.ApplyControlStyleVisuals();
         this.UpdateLabel();
     }
@@ -192,9 +188,22 @@ export class SkiaEditor extends SkiaShape {
         this.selectionLength = l;
         this.OnCursorMoved();
     }
+    /** Shows the caret for a full half second, then blinks every 500 ms. */
+    StartBlink() {
+        this.StopBlink();
+        this.caretVisible = true;
+        this.blinkTimer = window.setInterval(() => { this.caretVisible = !this.caretVisible; this.InvalidateCache(); this.RepaintComposition(); }, 500);
+    }
+    StopBlink() { if (this.blinkTimer) {
+        clearInterval(this.blinkTimer);
+        this.blinkTimer = 0;
+    } }
     OnCursorMoved() {
         this.ScrollToCaret();
-        this.caretVisible = true;
+        if (this.isFocused)
+            this.StartBlink();
+        else
+            this.caretVisible = true;
         TextInputProxy.Sync(this);
         this.CursorMoved?.(this);
         this.InvalidateCache();
@@ -210,8 +219,7 @@ export class SkiaEditor extends SkiaShape {
                 SkiaEditor.Focused.IsFocused = false;
             SkiaEditor.Focused = this;
             this.SetFocusNative(true);
-            this.caretVisible = true;
-            this.blink.Start();
+            this.StartBlink();
         }
         else {
             if (SkiaEditor.Focused === this)
@@ -220,7 +228,7 @@ export class SkiaEditor extends SkiaShape {
             this.dragSelecting = false;
             this.stubSelectionStop = -1;
             this.selectionMovingEdge = -1;
-            this.blink.Stop();
+            this.StopBlink();
             this.SetFocusNative(false);
         }
         this.FocusChanged?.(this, v);
@@ -305,6 +313,14 @@ export class SkiaEditor extends SkiaShape {
     MeasureAbsolute(w, h, scale) {
         const px = this.Padding.HorizontalThickness * scale, py = this.Padding.VerticalThickness * scale;
         const innerW = isFinite(w) ? Math.max(0, w - px) : Infinity;
+        // Single-line: the label is Start-aligned and measures to its content, so Center / End alignment had nothing to
+        // align in. Give it the field as a MINIMUM: short text centers in the field, longer text still grows past it and
+        // scrolls (C# 2e334ddd).
+        const minWidth = !this.IsMultiline && this.horizontalTextAlignment !== "Start" && isFinite(innerW) && innerW > 0 ? innerW / scale : -1;
+        if (this.Label.MinimumWidthRequest !== minWidth) {
+            this.Label.MinimumWidthRequest = minWidth;
+            this.Label.NeedMeasure = true;
+        }
         const labelSize = this.Label.Measure(this.IsMultiline ? innerW : Infinity, Infinity, scale);
         if (this.placeholder.IsVisible)
             this.placeholder.Measure(innerW, Infinity, scale);
@@ -500,7 +516,15 @@ export class SkiaEditor extends SkiaShape {
         }
         return this;
     }
-    OnAccessibilityActivated() { this.IsFocused = true; }
+    /** A text field is a Tab stop by default, like a native text box, with no Tapped handler needed. */
+    DefaultAccessibilityCanInteract() { return true; }
+    /** Keyboard navigation reached the field (Tab) or left it: take the caret and the input sink like a native text box, or release them. */
+    OnAccessibilityFocused(focused) { this.IsFocused = focused; }
+    /** Enter / Space on the field while it has no caret start editing; while editing they are text. */
+    OnAccessibilityActivated() { if (!this.IsFocused)
+        this.OnAccessibilityFocused(true); }
+    /** While editing, arrows, Home / End and PageUp / PageDown belong to the text: they never move a surrounding group. */
+    OnAccessibilityKey(_key) { return this.IsFocused; }
     DefaultAccessibilityLabel() { return this.text || this.placeholderText || undefined; }
     // ---- editing API (C# names) ----
     Submit() {
@@ -580,6 +604,10 @@ export class SkiaEditor extends SkiaShape {
     OnKeyDown(key, e) {
         const shift = KeyboardManager.IsShiftPressed, ctrl = KeyboardManager.IsControlPressed, alt = KeyboardManager.IsAltPressed;
         const handled = () => e.preventDefault();
+        // keys of another element (a page field or button, an overlay node) and of the input method are not the editor's:
+        // a composition keeps its arrows, Escape and Backspace (C# 845b26e9, GitHub #231)
+        if (KeyboardManager.IsInputMethodKey(e) || (KeyboardManager.IsOwnedByElement(e) && !TextInputProxy.IsProxyTarget(e.target)))
+            return;
         // with the hidden textarea focused these keys become input / clipboard events there and are applied from those
         if (TextInputProxy.IsActive(this) && TextInputProxy.IsProxyTarget(e.target) && (key === "Backspace" || key === "Delete" || key === "Enter" || key === "NumpadEnter" || (ctrl && (key === "KeyC" || key === "KeyX" || key === "KeyV"))))
             return;
@@ -794,8 +822,7 @@ export class SkiaEditor extends SkiaShape {
         return out;
     }
     OnDisposing() {
-        this.blink.Stop();
-        this.blink.Dispose();
+        this.StopBlink();
         if (SkiaEditor.Focused === this)
             SkiaEditor.Focused = undefined;
         this.SetFocusNative(false);

package/dist/controls/SkiaGif.d.ts

@@ -14,6 +14,8 @@ export declare class GifAnimation {
     private positionsMs;
     /** Negative = the last frame. */
     SeekFrame(frame: number): void;
+    /** Start (ms) of the frame after the one at `msTime`; DurationMs after the last one. */
+    NextFrameStartMs(msTime: number): number;
     GetFrameNumber(msTime: number): number;
     /** Decodes every frame of an encoded GIF (CanvasKit AnimatedImage). */
     LoadFromBytes(bytes: ArrayBuffer): void;
@@ -37,6 +39,7 @@ export declare class SkiaGif extends AnimatedFramesRenderer {
     set Source(v: string);
     Start(delayMs?: number): void;
     protected OnAnimatorUpdated(value: number): void;
+    protected NextChangeMs(value: number): number | undefined;
     /** Seeks by time in ms (the animator range is 0..DurationMs). */
     protected OnAnimatorSeeking(time: number): void;
     protected OnAnimatorInitializing(): void;

package/dist/controls/SkiaGif.js

@@ -21,6 +21,13 @@ export class GifAnimation {
         if (frame >= 0 && frame <= this.TotalFrames - 1)
             this.Frame = this.Frames[frame];
     }
+    /** Start (ms) of the frame after the one at `msTime`; DurationMs after the last one. */
+    NextFrameStartMs(msTime) {
+        for (let i = 0; i < this.positionsMs.length; i++)
+            if (msTime < this.positionsMs[i])
+                return this.positionsMs[i];
+        return this.DurationMs;
+    }
     GetFrameNumber(msTime) {
         if (this.positionsMs.length === 0 || this.DurationMs <= 0)
             return 0;
@@ -87,7 +94,9 @@ export class SkiaGif extends AnimatedFramesRenderer {
     loadGeneration = 0;
     constructor() {
         super();
-        this.UseCache = "ImageDoubleBuffered";
+        // C# ImageDoubleBuffered pays off where a thread bakes the bitmap; on the web it is one offscreen pass per frame
+        // change, so the web engines draw a GIF frame with no cache (drawnui-cross rule 3)
+        this.UseCache = "None";
     }
     get Source() { return this.source; }
     set Source(v) { if (this.source !== v) {
@@ -97,6 +106,7 @@ export class SkiaGif extends AnimatedFramesRenderer {
     Start(delayMs = 0) { if ((this.Animation?.TotalFrames ?? 0) > 0)
         super.Start(delayMs); }
     OnAnimatorUpdated(value) { this.Seek(value); }
+    NextChangeMs(value) { return this.Animation && this.Animation.DurationMs > 0 ? this.Animation.NextFrameStartMs(value) : undefined; }
     /** Seeks by time in ms (the animator range is 0..DurationMs). */
     OnAnimatorSeeking(time) {
         const a = this.Animation;
@@ -158,7 +168,7 @@ export class SkiaGif extends AnimatedFramesRenderer {
     async LoadSource(source) {
         if (!source)
             return undefined;
-        const r = await fetch(source);
+        const r = await fetch(Super.ResolveAssetUrl(source));
         if (!r.ok)
             throw new Error(`${r.status} ${source}`);
         const animation = new GifAnimation();

package/dist/controls/SkiaImage.js

@@ -164,20 +164,25 @@ export class SkiaImage extends SkiaControl {
     MeasureAbsolute(widthConstraint, heightConstraint, scale) {
         const img = this.LoadedSource;
         let w = widthConstraint, h = heightConstraint;
-        if (img) {
-            const aspect = img.width() / img.height();
-            if (!isFinite(w) && isFinite(h))
-                w = h * aspect;
-            else if (!isFinite(h) && isFinite(w))
-                h = w / aspect;
+        // nothing loaded: the box it is offered (C# OnMeasuring), an unbounded side 0
+        if (!img) {
+            this.AspectScale = { X: 0, Y: 0 };
+            return ScaledSize.FromPixels(isFinite(w) ? w : 0, isFinite(h) ? h : 0, scale);
         }
-        if (!isFinite(w) || !isFinite(h)) {
+        const iw = img.width(), ih = img.height();
+        if (!isFinite(w) && isFinite(h))
+            w = h * iw / ih;
+        else if (!isFinite(h) && isFinite(w))
+            h = w * ih / iw;
+        if (!isFinite(w) || !isFinite(h) || iw <= 0 || ih <= 0) {
             this.AspectScale = { X: 0, Y: 0 };
             return ScaledSize.FromPixels(0, 0, scale);
         }
-        if (img)
-            this.AspectScale = SkiaImage.RescaleAspect(img.width(), img.height(), SKRect.Create(0, 0, w, h), this.Aspect);
-        return ScaledSize.FromPixels(w, h, scale);
+        // C# OnMeasuring / DrawnUi.Rust: an auto-sized side is the bitmap's pixels scaled by the aspect for this box, never
+        // more than the box (a Fill or requested side still takes its box in Measure)
+        const s = SkiaImage.RescaleAspect(iw, ih, SKRect.Create(0, 0, w, h), this.Aspect);
+        this.AspectScale = s;
+        return ScaledSize.FromPixels(Math.min(iw * s.X, w), Math.min(ih * s.Y, h), scale);
     }
     Paint(ctx) {
         const img = this.LoadedSource;

package/dist/controls/SkiaLabel.d.ts

@@ -43,6 +43,8 @@ export declare class SkiaLabel extends SkiaControl {
     private verticalTextAlignment;
     private lineSpacing;
     private lineHeight;
+    private paragraphSpacing;
+    private characterSpacing;
     private textTransform;
     private padding;
     /** Styled fragments; when not empty they replace `Text` (same precedence as C#). */
@@ -53,6 +55,8 @@ export declare class SkiaLabel extends SkiaControl {
     protected DefaultAccessibilityLabel(): string | undefined;
     constructor();
     private Set;
+    /** A property that changes only the look (a color): no layout change, see UpdateDraw. */
+    private SetLook;
     get Text(): string;
     set Text(v: string);
     get FontSize(): number;
@@ -84,6 +88,18 @@ export declare class SkiaLabel extends SkiaControl {
     /** Multiplier applied to the natural line height (ascent + descent). */
     get LineHeight(): number;
     set LineHeight(v: number);
+    /**
+     * 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(): number;
+    set ParagraphSpacing(v: number);
+    /**
+     * 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(): number;
+    set CharacterSpacing(v: number);
     get TextTransform(): TextTransform;
     set TextTransform(v: TextTransform);
     get Padding(): Thickness;
@@ -97,17 +113,46 @@ export declare class SkiaLabel extends SkiaControl {
     private mainFonts?;
     private readonly fontsCache;
     private readonly runCache;
+    /** CharacterSpacing in pixels at the measured scale: added after every glyph of a run (its Width includes them). */
+    private glyphSpacing;
     private ResolveFonts;
     /** The label's own style, and the base every span inherits from. */
     private ResolveMainFonts;
     private ResolveSpanFonts;
-    private static Advance;
+    private Advance;
+    private static readonly Ignorable;
+    /**
+     * 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).
+     */
+    private static DropIgnorables;
     /**
      * 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).
      */
     private Segment;
     private Width;
+    /** A line never starts with these (closing punctuation, small kana, the long vowel mark): JIS X 4051 kinsoku (C#). */
+    private static readonly NoBreakBefore;
+    /** A line never ends with these (opening brackets and quotes). */
+    private static readonly NoBreakAfter;
+    /** Chinese / Japanese: ideographs, kana, CJK punctuation, full-width forms (C# IsCjkAt). Korean breaks at spaces only. */
+    private static readonly Cjk;
+    private static CanBreakBetween;
+    /**
+     * 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: string, index: number): boolean;
+    /**
+     * 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.
+     */
+    private FitCjk;
+    /** The word cut after `count` code points: the head goes on a line, the rest follows. */
+    private SplitWord;
     private Transform;
     /**
      * Paragraphs (split on "\n") of wrap tokens, built from Spans when present, else from Text.
@@ -116,11 +161,17 @@ export declare class SkiaLabel extends SkiaControl {
     private Tokenize;
     private NewLine;
     private Append;
-    /** Word-wraps tokens into lines that fit maxWidth (Infinity = no wrap), applies MaxLines with a tail ellipsis. */
+    /**
+     * 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).
+     */
     private LayoutLines;
     private LineHeightPx;
+    /** ParagraphSpacing above a line that starts a paragraph (after the first): that many of its lines, with their spacing. */
+    private ParagraphSpace;
     private BlockHeight;
-    protected MeasureAbsolute(widthConstraint: number, _heightConstraint: number, scale: number): ScaledSize;
+    protected MeasureAbsolute(widthConstraint: number, heightConstraint: number, scale: number): ScaledSize;
     /** C# GradientByLines: FillGradient spans each line's bounds (default) instead of the whole text block. */
     GradientByLines: boolean;
     /** C# KeepSpacesOnLineBreaks / NeedsGlyphPositions: accepted; glyph boxes are always available through GetGlyphBoxes. */