Update to latest Fonts and add APIs, tests and samples

Author: JimBobSquarePants

samples/DrawShapesWithImageSharp/Program.cs

@@ -789,7 +789,6 @@ private static void DrawTypographySheet()
             const string pathText = "Path text follows the curve while runs vary colour, weight, and decoration.";
             RichTextOptions pathOptions = new(pathFont)
             {
-                Path = textPath,
                 WrappingLength = textPath.ComputeLength(),
                 HorizontalAlignment = HorizontalAlignment.Left,
                 VerticalAlignment = VerticalAlignment.Bottom,
@@ -832,15 +831,15 @@ private static void DrawTypographySheet()
                 ]
             };
 
-            // Setting RichTextOptions.Path tells the layout to advance each glyph along the curve
+            // Passing a path to DrawText tells the renderer to advance each glyph along the curve
             // rather than along a straight baseline. WrappingLength = textPath.ComputeLength()
             // matches the wrap budget to the curve's arc length, so the text fills the path
             // without overflowing past its end. The guide path can be drawn as well as used as
             // a baseline — that is a design choice. Strokes, ribbons, dashed leaders, or a
             // decorative trail under the glyphs all work, and so does omitting the stroke and
             // rendering only the text. The two operations are independent.
             canvas.Draw(Pens.Solid(ruleColor, 1.5F), textPath);
-            canvas.DrawText(pathOptions, pathText, inkBrush, null);
+            canvas.DrawText(pathOptions, pathText, textPath, inkBrush, null);
         });
 
         static void DrawPanel(

samples/WebGPUExternalSurfaceDemo/MainForm.cs

@@ -2,9 +2,9 @@
 // Licensed under the Six Labors Split License.
 
 using SixLabors.ImageSharp.Drawing.Processing;
-using SixLabors.ImageSharp.PixelFormats;
 using WebGPUExternalSurfaceDemo.Controls;
 using WebGPUExternalSurfaceDemo.Scenes;
+using ImageSharpColor = SixLabors.ImageSharp.Color;
 
 namespace WebGPUExternalSurfaceDemo;
 
@@ -18,10 +18,21 @@ internal sealed class MainForm : Form
     private readonly WebGPURenderControl clockControl;
     private readonly WebGPURenderControl tigerControl;
     private readonly WebGPURenderControl applyControl;
+    private readonly WebGPURenderControl manualTextFlowControl;
+    private readonly WebGPURenderControl richTextControl;
     private readonly ClockScene clockScene;
     private readonly TigerViewerScene tigerScene;
     private readonly ApplyReadbackScene applyScene;
+    private readonly ManualTextFlowScene manualTextFlowScene;
+    private readonly RichTextEditorScene richTextScene;
     private readonly Label tigerStatusLabel;
+    private readonly CheckBox boldButton;
+    private readonly CheckBox italicButton;
+    private readonly CheckBox underlineButton;
+    private readonly CheckBox strikeoutButton;
+    private readonly ComboBox fontFamilyComboBox;
+    private readonly Label fontSizeLabel;
+    private readonly Label selectionStatusLabel;
 
     public MainForm()
     {
@@ -33,6 +44,8 @@ public MainForm()
         this.clockScene = new ClockScene();
         this.tigerScene = new TigerViewerScene();
         this.applyScene = new ApplyReadbackScene();
+        this.manualTextFlowScene = new ManualTextFlowScene();
+        this.richTextScene = new RichTextEditorScene();
 
         // Each tab gets its own render control and external surface. This mirrors real UI applications where
         // separate controls or panels own their own native drawable areas.
@@ -45,6 +58,12 @@ public MainForm()
         this.applyControl = new WebGPURenderControl { Dock = DockStyle.Fill };
         this.applyControl.PaintFrame += this.OnPaintApply;
 
+        this.manualTextFlowControl = new WebGPURenderControl { Dock = DockStyle.Fill };
+        this.manualTextFlowControl.PaintFrame += this.OnPaintManualTextFlow;
+
+        this.richTextControl = new WebGPURenderControl { Dock = DockStyle.Fill, TabStop = true };
+        this.richTextControl.PaintFrame += this.OnPaintRichText;
+
         // The Apply scene reacts to pointer movement so readback cost can be assessed interactively.
         this.applyControl.MouseDown += (_, e) =>
         {
@@ -75,6 +94,69 @@ public MainForm()
         };
         this.tigerControl.Controls.Add(this.tigerStatusLabel);
 
+        this.boldButton = this.CreateEditorToggleButton("B", () => this.richTextScene.ToggleBold());
+        this.italicButton = this.CreateEditorToggleButton("I", () => this.richTextScene.ToggleItalic());
+        this.underlineButton = this.CreateEditorToggleButton("U", () => this.richTextScene.ToggleUnderline());
+        this.strikeoutButton = this.CreateEditorToggleButton("S", () => this.richTextScene.ToggleStrikeout());
+        this.fontFamilyComboBox = new ComboBox
+        {
+            DropDownStyle = ComboBoxStyle.DropDownList,
+            Width = 240,
+            Margin = new Padding(0, 0, 8, 0),
+        };
+
+        foreach (string name in SixLabors.Fonts.SystemFonts.Collection.Families.Select(x => x.Name).Order())
+        {
+            this.fontFamilyComboBox.Items.Add(name);
+        }
+
+        this.fontFamilyComboBox.SelectedItem = this.richTextScene.FontFamilyName;
+        this.fontFamilyComboBox.SelectedIndexChanged += (_, _) =>
+        {
+            if (this.fontFamilyComboBox.SelectedItem is string name)
+            {
+                this.richTextScene.SetFontFamily(name);
+                this.richTextControl.Focus();
+                this.richTextControl.Invalidate();
+            }
+        };
+
+        this.selectionStatusLabel = new Label
+        {
+            AutoSize = true,
+            Margin = new Padding(10, 5, 0, 0),
+        };
+        this.fontSizeLabel = new Label
+        {
+            AutoSize = true,
+            Margin = new Padding(0, 5, 8, 0),
+        };
+
+        FlowLayoutPanel editorToolbar = new()
+        {
+            Dock = DockStyle.Top,
+            AutoSize = true,
+            Padding = new Padding(8),
+        };
+
+        editorToolbar.Controls.Add(this.fontFamilyComboBox);
+        editorToolbar.Controls.Add(this.boldButton);
+        editorToolbar.Controls.Add(this.italicButton);
+        editorToolbar.Controls.Add(this.underlineButton);
+        editorToolbar.Controls.Add(this.strikeoutButton);
+        editorToolbar.Controls.Add(this.CreateEditorButton("A-", () => this.richTextScene.ChangeFontSize(-2F)));
+        editorToolbar.Controls.Add(this.fontSizeLabel);
+        editorToolbar.Controls.Add(this.CreateEditorButton("A+", () => this.richTextScene.ChangeFontSize(2F)));
+        editorToolbar.Controls.Add(this.CreateEditorColorButton(Color.Black, ImageSharpColor.ParseHex("#17212B")));
+        editorToolbar.Controls.Add(this.CreateEditorColorButton(Color.RoyalBlue, ImageSharpColor.ParseHex("#145DA0")));
+        editorToolbar.Controls.Add(this.CreateEditorColorButton(Color.Firebrick, ImageSharpColor.ParseHex("#B33A3A")));
+        editorToolbar.Controls.Add(this.CreateEditorColorButton(Color.SeaGreen, ImageSharpColor.ParseHex("#2B7A4B")));
+        editorToolbar.Controls.Add(this.selectionStatusLabel);
+
+        Panel richTextPanel = new() { Dock = DockStyle.Fill };
+        richTextPanel.Controls.Add(this.richTextControl);
+        richTextPanel.Controls.Add(editorToolbar);
+
         // Mouse input stays in WinForms coordinates. The scene converts it into its own world transform.
         this.tigerControl.MouseDown += (_, e) =>
         {
@@ -99,6 +181,59 @@ public MainForm()
             this.tigerControl.Invalidate();
         };
 
+        // The manual text-flow scene keeps prepared text static and lets the mouse
+        // move only the obstacle that determines each per-line wrapping width.
+        this.manualTextFlowControl.MouseDown += (_, e) =>
+        {
+            this.manualTextFlowScene.OnMouseDown(e);
+            this.manualTextFlowControl.Invalidate();
+        };
+        this.manualTextFlowControl.MouseMove += (_, e) =>
+        {
+            this.manualTextFlowScene.OnMouseMove(e);
+            this.manualTextFlowControl.Invalidate();
+        };
+
+        this.richTextControl.MouseDown += (_, e) =>
+        {
+            this.richTextControl.Focus();
+            if (e.Button == MouseButtons.Left)
+            {
+                this.richTextControl.Capture = true;
+            }
+
+            this.richTextScene.OnMouseDown(e);
+            this.UpdateEditorToolbar();
+            this.richTextControl.Invalidate();
+        };
+
+        this.richTextControl.MouseMove += (_, e) =>
+        {
+            this.richTextScene.OnMouseMove(e);
+            this.UpdateEditorToolbar();
+            this.richTextControl.Invalidate();
+        };
+
+        this.richTextControl.MouseUp += (_, e) =>
+        {
+            this.richTextScene.OnMouseUp(e);
+            if (e.Button == MouseButtons.Left)
+            {
+                this.richTextControl.Capture = false;
+            }
+
+            this.UpdateEditorToolbar();
+            this.richTextControl.Invalidate();
+        };
+
+        this.richTextControl.PreviewKeyDown += (_, e) =>
+        {
+            e.IsInputKey = e.KeyCode is Keys.Left or Keys.Right or Keys.Up or Keys.Down or Keys.Home or Keys.End;
+        };
+
+        this.richTextControl.KeyDown += this.OnRichTextKeyDown;
+        this.richTextControl.KeyPress += this.OnRichTextKeyPress;
+
         TabControl tabs = new() { Dock = DockStyle.Fill };
 
         TabPage clockTab = new(this.clockScene.DisplayName);
@@ -113,7 +248,16 @@ public MainForm()
         applyTab.Controls.Add(this.applyControl);
         tabs.TabPages.Add(applyTab);
 
+        TabPage manualTextFlowTab = new(this.manualTextFlowScene.DisplayName);
+        manualTextFlowTab.Controls.Add(this.manualTextFlowControl);
+        tabs.TabPages.Add(manualTextFlowTab);
+
+        TabPage richTextTab = new(this.richTextScene.DisplayName);
+        richTextTab.Controls.Add(richTextPanel);
+        tabs.TabPages.Add(richTextTab);
+
         this.Controls.Add(tabs);
+        this.UpdateEditorToolbar();
     }
 
     private void OnPaintClock(DrawingCanvas canvas, TimeSpan delta)
@@ -127,4 +271,95 @@ private void OnPaintTiger(DrawingCanvas canvas, TimeSpan delta)
 
     private void OnPaintApply(DrawingCanvas canvas, TimeSpan delta)
         => this.applyScene.Paint(canvas, delta);
+
+    private void OnPaintManualTextFlow(DrawingCanvas canvas, TimeSpan delta)
+        => this.manualTextFlowScene.Paint(canvas, delta);
+
+    private void OnPaintRichText(DrawingCanvas canvas, TimeSpan delta)
+        => this.richTextScene.Paint(canvas, delta);
+
+    private void OnRichTextKeyDown(object? sender, KeyEventArgs e)
+    {
+        if (!this.richTextScene.OnKeyDown(e))
+        {
+            return;
+        }
+
+        e.SuppressKeyPress = true;
+        this.UpdateEditorToolbar();
+        this.richTextControl.Invalidate();
+    }
+
+    private void OnRichTextKeyPress(object? sender, KeyPressEventArgs e)
+    {
+        if (!this.richTextScene.OnKeyPress(e.KeyChar))
+        {
+            return;
+        }
+
+        e.Handled = true;
+        this.UpdateEditorToolbar();
+        this.richTextControl.Invalidate();
+    }
+
+    private CheckBox CreateEditorToggleButton(string text, Action action)
+    {
+        CheckBox button = new()
+        {
+            Appearance = Appearance.Button,
+            AutoSize = true,
+            Text = text,
+            Font = new Font(FontFamily.GenericSansSerif, 9F, FontStyle.Bold),
+            Margin = new Padding(0, 0, 6, 0),
+        };
+
+        button.Click += (_, _) => this.InvokeEditorCommand(action);
+        return button;
+    }
+
+    private Button CreateEditorButton(string text, Action action)
+    {
+        Button button = new()
+        {
+            AutoSize = true,
+            Text = text,
+            Margin = new Padding(0, 0, 6, 0),
+        };
+
+        button.Click += (_, _) => this.InvokeEditorCommand(action);
+        return button;
+    }
+
+    private Button CreateEditorColorButton(Color color, ImageSharpColor textColor)
+    {
+        Button button = new()
+        {
+            BackColor = color,
+            FlatStyle = FlatStyle.Flat,
+            Margin = new Padding(0, 1, 6, 0),
+            Size = new Size(28, 24),
+            UseVisualStyleBackColor = false,
+        };
+
+        button.Click += (_, _) => this.InvokeEditorCommand(() => this.richTextScene.SetFillColor(textColor));
+        return button;
+    }
+
+    private void InvokeEditorCommand(Action action)
+    {
+        action();
+        this.UpdateEditorToolbar();
+        this.richTextControl.Focus();
+        this.richTextControl.Invalidate();
+    }
+
+    private void UpdateEditorToolbar()
+    {
+        this.boldButton.Checked = this.richTextScene.IsBold;
+        this.italicButton.Checked = this.richTextScene.IsItalic;
+        this.underlineButton.Checked = this.richTextScene.IsUnderline;
+        this.strikeoutButton.Checked = this.richTextScene.IsStrikeout;
+        this.fontSizeLabel.Text = $"{this.richTextScene.CurrentFontSize:0.#} pt";
+        this.selectionStatusLabel.Text = $"Selected: {this.richTextScene.SelectionLength}";
+    }
 }

samples/WebGPUExternalSurfaceDemo/README.md

@@ -23,11 +23,13 @@ Requirements:
 - a WebGPU-capable desktop backend such as D3D12 or Vulkan
 - adapter support for the storage-capable BGRA format selected by the sample
 
-When the sample starts you should see a WinForms window with three tabs:
+When the sample starts you should see a WinForms window with five tabs:
 
 - `Clock`: a continuously-rendered animated clock scene
 - `Tiger`: an interactive SVG tiger viewer with pan and zoom
 - `Apply`: a reactive external-surface readback scene using `DrawingCanvas.Apply(...)`; move the mouse to move the edge-detect and blur regions, and use the mouse wheel to resize them
+- `Manual Text Flow`: prepared text is laid out one line at a time around a circular obstacle that follows mouse movement
+- `Rich Text Editor`: a small editor surface that exercises text selection, caret movement, hit testing, font changes, and inline styling
 
 ## Why This Sample Matters
 
@@ -114,6 +116,8 @@ The scenes are deliberately ordinary canvas code:
 - [ClockScene.cs](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/Scenes/ClockScene.cs): animated vector clock
 - [TigerViewerScene.cs](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/Scenes/TigerViewerScene.cs): pan and zoom SVG tiger viewer
 - [ApplyReadbackScene.cs](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/Scenes/ApplyReadbackScene.cs): `Apply(...)` scene that reads the external surface back into CPU processing
+- [ManualTextFlowScene.cs](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/Scenes/ManualTextFlowScene.cs): interactive manual text flow using prepared line layout enumeration
+- [RichTextEditorScene.cs](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/Scenes/RichTextEditorScene.cs): custom rich text editor built from Fonts hit testing, caret, selection, and run APIs
 
 Each scene receives:
 
@@ -127,4 +131,6 @@ Each scene receives:
 - [ClockScene.cs](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/Scenes/ClockScene.cs): clock scene
 - [TigerViewerScene.cs](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/Scenes/TigerViewerScene.cs): tiger viewer scene
 - [ApplyReadbackScene.cs](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/Scenes/ApplyReadbackScene.cs): apply readback scene
+- [ManualTextFlowScene.cs](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/Scenes/ManualTextFlowScene.cs): manual text-flow scene
+- [RichTextEditorScene.cs](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/Scenes/RichTextEditorScene.cs): rich text editor scene
 - [WebGPUExternalSurfaceDemo.csproj](d:/GitHub/SixLabors/ImageSharp.Drawing/samples/WebGPUExternalSurfaceDemo/WebGPUExternalSurfaceDemo.csproj): sample project file