drawnui-react 0.1.0-preview.1

package/dist/controls/SkiaImageTiles.js

@@ -0,0 +1,76 @@
+import { SKRect } from "../core/Types";
+import { SkiaImage } from "./SkiaImage";
+/**
+ * Mirrors DrawnUi SkiaImageTiles: the loaded source is drawn as a cached tile of `TileWidth` x `TileHeight` points
+ * (`TileAspect` inside the tile, default AspectCover) repeated over the box, shifted by `TileOffsetX` / `TileOffsetY`
+ * (points, wrap around — animate them for a scrolling background). Nothing is drawn until both tile sizes are set.
+ */
+export class SkiaImageTiles extends SkiaImage {
+    TileAspect = "AspectCover";
+    TileWidth = 0;
+    TileHeight = 0;
+    TileOffsetX = 0;
+    TileOffsetY = 0;
+    /** Cache of the tile image (C# default Image). */
+    TileCacheType = "Image";
+    /** Cached image used as the tile (C# Tile). */
+    Tile;
+    constructor() {
+        super();
+        this.IsClippedToBounds = true; // C# WillClipBounds
+    }
+    /** C# CreateTile: a SkiaImage sharing the decoded source, sized to one tile. */
+    CreateTile(width, height) {
+        const tile = new SkiaImage();
+        tile.Aspect = this.TileAspect;
+        tile.WidthRequest = width;
+        tile.HeightRequest = height;
+        tile.HorizontalOptions = "Fill";
+        tile.VerticalOptions = "Fill";
+        tile.UseCache = this.TileCacheType;
+        tile.Parent = this;
+        return tile;
+    }
+    tileKey = "";
+    /** C# SetupTiles: (re)creates the tile when the source or the tile geometry changed. */
+    SetupTiles() {
+        const image = this.LoadedSource;
+        const key = `${this.TileWidth}|${this.TileHeight}|${this.TileAspect}|${this.TileCacheType}`;
+        if (this.TileWidth > 0 && this.TileHeight > 0 && image) {
+            if (!this.Tile || this.tileKey !== key) {
+                this.Tile?.Dispose();
+                this.Tile = this.CreateTile(this.TileWidth, this.TileHeight);
+                this.tileKey = key;
+            }
+            if (this.Tile.ImageBitmap !== image)
+                this.Tile.ImageBitmap = image;
+        }
+    }
+    Paint(ctx) {
+        this.SetupTiles();
+        const tile = this.Tile;
+        if (!tile || !this.LoadedSource)
+            return;
+        const dest = ctx.Destination, scale = ctx.Scale;
+        const tw = Math.round(this.TileWidth * scale), th = Math.round(this.TileHeight * scale);
+        if (tw <= 0 || th <= 0)
+            return;
+        // C# DrawSource: offsets wrap inside one tile, the grid starts one tile before the box when shifted
+        const useOffsetX = -this.TileOffsetX % this.TileWidth, useOffsetY = -this.TileOffsetY % this.TileHeight;
+        const offsetX = useOffsetX > 0 ? Math.round(useOffsetX * scale) : tw + Math.round(useOffsetX * scale);
+        const offsetY = useOffsetY > 0 ? Math.round(useOffsetY * scale) : th + Math.round(useOffsetY * scale);
+        const tilesX = Math.ceil((dest.Width + offsetX) / tw), tilesY = Math.ceil((dest.Height + Math.abs(offsetY)) / th);
+        const startX = dest.Left - offsetX, startY = dest.Top - offsetY;
+        this.DisplayRect = dest;
+        for (let x = 0; x < tilesX; x++) {
+            for (let y = 0; y < tilesY; y++) {
+                const left = startX + x * tw, top = startY + y * th;
+                const r = new SKRect(left, top, left + tw, top + th);
+                tile.Measure(tw, th, scale);
+                tile.Arrange(r, tile.WidthRequest, tile.HeightRequest, scale);
+                tile.Render(ctx);
+            }
+        }
+    }
+    OnDisposing() { this.Tile?.Dispose(); this.Tile = undefined; super.OnDisposing(); }
+}

package/dist/controls/SkiaLabel.d.ts

@@ -0,0 +1,160 @@
+import { type DrawingContext, SkiaControl } from "../core/SkiaControl";
+import { type GestureEventProcessingInfo, type SkiaGesturesParameters } from "../core/Gestures";
+import { type Color, type DrawTextAlignment, type FontAttributes, type LineBreakMode, ScaledSize, type SkiaGradient, type TextAlignment, type TextTransform, Thickness } from "../core/Types";
+import { TextSpan } from "./TextSpan";
+/** One code point of the laid-out text: its UTF-16 index/length in Text and its box in pixels relative to DrawingRect. */
+export interface GlyphBox {
+    Index: number;
+    Length: number;
+    Line: number;
+    Left: number;
+    Top: number;
+    Width: number;
+    Height: number;
+}
+/** A laid-out line: first text index, box in pixels relative to DrawingRect. */
+export interface LineBox {
+    Line: number;
+    Start: number;
+    End: number;
+    Left: number;
+    Top: number;
+    Width: number;
+    Height: number;
+}
+/**
+ * Mirrors DrawnUi SkiaLabel: multi-line text with word wrapping, MaxLines + tail ellipsis, horizontal /
+ * vertical alignment, LineSpacing / LineHeight, weights and attributes resolved through the font registry,
+ * the opt-in per-codepoint FontFamilyFallback (symbols/emoji missing from the main face) and `Spans`
+ * (TextSpan children: per-fragment color/size/weight/italic/underline/strikeout/background/Tapped).
+ * Cached as Operations by default, like DrawnUi. Every text property invalidates like a bindable property.
+ */
+export declare class SkiaLabel extends SkiaControl {
+    private text;
+    private fontSize;
+    private textColor;
+    private fontFamily;
+    private fontFamilyFallback;
+    private fontWeight;
+    private fontAttributes;
+    private maxLines;
+    private lineBreakMode;
+    private horizontalTextAlignment;
+    private verticalTextAlignment;
+    private lineSpacing;
+    private lineHeight;
+    private textTransform;
+    private padding;
+    /** Styled fragments; when not empty they replace `Text` (same precedence as C#). */
+    readonly Spans: TextSpan[];
+    /** Set to `Aria.RoleText` to expose every label to screen readers (React extension; C# is opt-in per control). */
+    static DefaultAccessibilityRole?: string;
+    /** Like C# OnTextInternalChanged: the spoken label is the text (or the joined spans) unless AccessibilityLabel is set. */
+    protected DefaultAccessibilityLabel(): string | undefined;
+    constructor();
+    private Set;
+    get Text(): string;
+    set Text(v: string);
+    get FontSize(): number;
+    set FontSize(v: number);
+    get TextColor(): Color;
+    set TextColor(v: Color);
+    get FontFamily(): string;
+    set FontFamily(v: string);
+    /**
+     * Alias (or comma-separated chain of aliases) tried per codepoint when the main font has no glyph,
+     * e.g. "FontSymbols,FontSymbols2" from `AddSymbols()`. Same idea as C# FontFamilyFallback, extended to a chain.
+     */
+    get FontFamilyFallback(): string;
+    set FontFamilyFallback(v: string);
+    get FontWeight(): number;
+    set FontWeight(v: number);
+    get FontAttributes(): FontAttributes;
+    set FontAttributes(v: FontAttributes);
+    get MaxLines(): number;
+    set MaxLines(v: number);
+    get LineBreakMode(): LineBreakMode;
+    set LineBreakMode(v: LineBreakMode);
+    get HorizontalTextAlignment(): DrawTextAlignment;
+    set HorizontalTextAlignment(v: DrawTextAlignment);
+    get VerticalTextAlignment(): TextAlignment;
+    set VerticalTextAlignment(v: TextAlignment);
+    get LineSpacing(): number;
+    set LineSpacing(v: number);
+    /** Multiplier applied to the natural line height (ascent + descent). */
+    get LineHeight(): number;
+    set LineHeight(v: number);
+    get TextTransform(): TextTransform;
+    set TextTransform(v: TextTransform);
+    get Padding(): Thickness;
+    set Padding(v: Thickness);
+    /** Number of laid-out lines after the last measure. */
+    get LinesCount(): number;
+    AddSubView(control: SkiaControl | TextSpan): void;
+    InsertSubView(index: number, control: SkiaControl | TextSpan): void;
+    RemoveSubView(control: SkiaControl | TextSpan): void;
+    private lines;
+    private mainFonts?;
+    private readonly fontsCache;
+    private readonly runCache;
+    private ResolveFonts;
+    /** The label's own style, and the base every span inherits from. */
+    private ResolveMainFonts;
+    private ResolveSpanFonts;
+    private static Advance;
+    /**
+     * 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;
+    private Transform;
+    /**
+     * Paragraphs (split on "\n") of wrap tokens, built from Spans when present, else from Text.
+     * A fragment that does not start with a space glues to the previous word (no break opportunity is added).
+     */
+    private Tokenize;
+    private NewLine;
+    private Append;
+    /** Word-wraps tokens into lines that fit maxWidth (Infinity = no wrap), applies MaxLines with a tail ellipsis. */
+    private LayoutLines;
+    private LineHeightPx;
+    private BlockHeight;
+    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. */
+    KeepSpacesOnLineBreaks: boolean;
+    NeedsGlyphPositions: boolean;
+    /** Bumped on every measure: consumers cache GetGlyphBoxes() against it. */
+    LayoutVersion: number;
+    /** Height of the first laid-out line in pixels (C# MeasuredLineHeight); 0 before the first measure. */
+    get MeasuredLineHeight(): number;
+    /** Line origins relative to DrawingRect, same alignment math as Paint. */
+    private LineGeometry;
+    /** Lines as CSS text for the accessibility overlay (AccessibilityTextSelectable): font alias chain, weight and px size. */
+    GetAccessibilityTextLines(scale: number): import("../core/Accessibility").AccessibilityTextLine[];
+    /** Laid-out lines with their text index range (a wrapped-away space or line break sits between two lines). */
+    GetLineBoxes(): LineBox[];
+    /** Every code point of the laid-out text with its box (editor caret / selection / hit testing). */
+    GetGlyphBoxes(): GlyphBox[];
+    /** Outline around the glyphs, drawn under the fill (C# StrokeColor / StrokeWidth in points; Transparent = none). */
+    StrokeColor: Color;
+    StrokeWidth: number;
+    StrokeGradient?: SkiaGradient;
+    /** Drop shadow: a stroked copy of the text offset by DropShadowOffsetX/Y points (C# DropShadow*). */
+    DropShadowColor: Color;
+    DropShadowSize: number;
+    DropShadowOffsetX: number;
+    DropShadowOffsetY: number;
+    private HasStroke;
+    private HasDropShadow;
+    /** C# measurement: stroke adds StrokeWidth*2 on each axis, the shadow adds DropShadowSize + offset (pixels). */
+    private EffectsExtra;
+    /** C# SkiaLabel.SetupBackgroundPaint: no BackgroundColor = no background, the gradient goes on the glyphs. */
+    protected FillGradientPaintsBackground(): boolean;
+    protected Paint(ctx: DrawingContext): void;
+    ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
+    /** Return null to not consume the tap. */
+    protected OnSpanTapped(span: TextSpan, args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
+}