From f271654d64885ffae707bf00e7b787a1ec39c62a Mon Sep 17 00:00:00 2001 From: Giuseppe Lippolis Date: Wed, 19 Oct 2022 09:49:06 +0200 Subject: [PATCH 01/10] fix: CS8350 --- src/Avalonia.Base/Media/PathMarkupParser.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Avalonia.Base/Media/PathMarkupParser.cs b/src/Avalonia.Base/Media/PathMarkupParser.cs index 30c5206125..cf12bf5126 100644 --- a/src/Avalonia.Base/Media/PathMarkupParser.cs +++ b/src/Avalonia.Base/Media/PathMarkupParser.cs @@ -188,7 +188,7 @@ namespace Avalonia.Media _isOpen = true; } - private void SetFillRule(ref ReadOnlySpan span) + private void SetFillRule(scoped ref ReadOnlySpan span) { ThrowIfDisposed(); @@ -452,7 +452,7 @@ namespace Avalonia.Media return !span.IsEmpty && (span[0] == ',' || span[0] == '-' || span[0] == '.' || char.IsDigit(span[0])); } - private static bool ReadArgument(ref ReadOnlySpan remaining, out ReadOnlySpan argument) + private static bool ReadArgument(scoped ref ReadOnlySpan remaining, out ReadOnlySpan argument) { remaining = SkipWhitespace(remaining); if (remaining.IsEmpty) From 9cbe262117e30a056177ebf80a87bc3c11d87d80 Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Fri, 21 Oct 2022 22:05:43 +0100 Subject: [PATCH 02/10] fix copypasta --- src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts index 783710bb3e..668212964c 100644 --- a/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts +++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts @@ -24,7 +24,7 @@ export class AvaloniaDOM { // Native controls host const nativeHost = document.createElement("div"); - canvas.id = `nativeHost${randomIdPart}`; + nativeHost.id = `nativeHost${randomIdPart}`; nativeHost.classList.add("avalonia-native-host"); nativeHost.style.left = "0px"; nativeHost.style.top = "0px"; @@ -34,7 +34,7 @@ export class AvaloniaDOM { // IME const inputElement = document.createElement("input"); - canvas.id = `input${randomIdPart}`; + inputElement.id = `inputElement${randomIdPart}`; inputElement.classList.add("avalonia-input-element"); inputElement.autocapitalize = "none"; inputElement.type = "text"; From 31cef0b54ffd22d3e565aa55d4e7e006e019e8d8 Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Fri, 21 Oct 2022 22:10:24 +0100 Subject: [PATCH 03/10] basic non-ime text input. --- src/Web/Avalonia.Web/AvaloniaView.cs | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/Web/Avalonia.Web/AvaloniaView.cs b/src/Web/Avalonia.Web/AvaloniaView.cs index 12d31258b5..9d7a629836 100644 --- a/src/Web/Avalonia.Web/AvaloniaView.cs +++ b/src/Web/Avalonia.Web/AvaloniaView.cs @@ -254,7 +254,14 @@ namespace Avalonia.Web private bool OnKeyDown (string code, string key, int modifier) { - return _topLevelImpl.RawKeyboardEvent(RawKeyEventType.KeyDown, code, key, (RawInputModifiers)modifier); + var handled = _topLevelImpl.RawKeyboardEvent(RawKeyEventType.KeyDown, code, key, (RawInputModifiers)modifier); + + if (!handled) + { + handled = _topLevelImpl.RawTextEvent(key); + } + + return handled; } private bool OnKeyUp(string code, string key, int modifier) From e5b745694ac22c7129c28b12a29b216770a1dafd Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Fri, 21 Oct 2022 22:23:05 +0100 Subject: [PATCH 04/10] filter modifier text input events. --- src/Web/Avalonia.Web/AvaloniaView.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Web/Avalonia.Web/AvaloniaView.cs b/src/Web/Avalonia.Web/AvaloniaView.cs index 9d7a629836..296e411fa8 100644 --- a/src/Web/Avalonia.Web/AvaloniaView.cs +++ b/src/Web/Avalonia.Web/AvaloniaView.cs @@ -256,7 +256,7 @@ namespace Avalonia.Web { var handled = _topLevelImpl.RawKeyboardEvent(RawKeyEventType.KeyDown, code, key, (RawInputModifiers)modifier); - if (!handled) + if (!handled && key.Length == 1) { handled = _topLevelImpl.RawTextEvent(key); } From 1d19c37a37aa106c14002cbb88af701625f6fb34 Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Sat, 22 Oct 2022 09:43:51 +0100 Subject: [PATCH 05/10] wasm prevent touch flashing android. --- src/Web/Avalonia.Web/AvaloniaView.cs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Web/Avalonia.Web/AvaloniaView.cs b/src/Web/Avalonia.Web/AvaloniaView.cs index 296e411fa8..098b06a0a2 100644 --- a/src/Web/Avalonia.Web/AvaloniaView.cs +++ b/src/Web/Avalonia.Web/AvaloniaView.cs @@ -77,8 +77,7 @@ namespace Avalonia.Web _topLevelImpl.SetCssCursor = (cursor) => { - InputHelper.SetCursor(_containerElement, cursor); // macOS - InputHelper.SetCursor(_canvas, cursor); // windows + InputHelper.SetCursor(_containerElement, cursor); }; _topLevel.Prepare(); From eb1c1971f1d92eb68d319cf4b3c032800f2d6600 Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Sat, 22 Oct 2022 10:28:51 +0100 Subject: [PATCH 06/10] remove cursor style when we want normal cursor. --- src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts index 768414ccab..8198e09738 100644 --- a/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts +++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts @@ -159,7 +159,12 @@ export class InputHelper { } public static setCursor(inputElement: HTMLInputElement, kind: string) { - inputElement.style.cursor = kind; + if(kind == "pointer"){ + inputElement.style.removeProperty("cursor"); + } + else { + inputElement.style.cursor = kind; + } } public static setBounds(inputElement: HTMLInputElement, x: number, y: number, caretWidth: number, caretHeight: number, caret: number) { From 116146e847ad8b3506de58ff6469a17b1ae729b9 Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Sat, 22 Oct 2022 12:23:57 +0100 Subject: [PATCH 07/10] smooth resizing wasm. --- .../ControlCatalog.Web/ControlCatalog.Web.csproj | 5 ++--- samples/ControlCatalog.Web/Roots.xml | 1 + .../webapp/modules/avalonia/canvas.ts | 16 ++++++++-------- .../webapp/modules/avalonia/input.ts | 5 ++--- 4 files changed, 13 insertions(+), 14 deletions(-) diff --git a/samples/ControlCatalog.Web/ControlCatalog.Web.csproj b/samples/ControlCatalog.Web/ControlCatalog.Web.csproj index 0ddec3444b..06a5466619 100644 --- a/samples/ControlCatalog.Web/ControlCatalog.Web.csproj +++ b/samples/ControlCatalog.Web/ControlCatalog.Web.csproj @@ -16,9 +16,8 @@ full true true - true - -O3 - -O3 + -O2 + -O2 diff --git a/samples/ControlCatalog.Web/Roots.xml b/samples/ControlCatalog.Web/Roots.xml index 3c13098159..b07fd86fa2 100644 --- a/samples/ControlCatalog.Web/Roots.xml +++ b/samples/ControlCatalog.Web/Roots.xml @@ -3,4 +3,5 @@ + diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts index 9ae9b3d2a8..8f3539b4f8 100644 --- a/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts +++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts @@ -210,23 +210,23 @@ interface SizeWatcherInstance { export class SizeWatcher { static observer: ResizeObserver; static elements: Map; + private static lastMove: number; public static observe(element: HTMLElement, elementId: string | undefined, callback: (width: number, height: number) => void): void { if (!element || !callback) { return; } - SizeWatcher.init(); + callback(element.clientWidth, element.clientHeight); - const watcherElement = element as SizeWatcherElement; - watcherElement.SizeWatcher = { - callback + const handleResize = (args: UIEvent) => { + if (Date.now() - this.lastMove > 33) { + callback(element.clientWidth, element.clientHeight); + SizeWatcher.lastMove = Date.now(); + } }; - SizeWatcher.elements.set(elementId ?? element.id, element); - SizeWatcher.observer.observe(element); - - SizeWatcher.invoke(element); + window.addEventListener("resize", handleResize); } public static unobserve(elementId: string): void { diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts index 8198e09738..ddc1f54ae7 100644 --- a/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts +++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts @@ -159,10 +159,9 @@ export class InputHelper { } public static setCursor(inputElement: HTMLInputElement, kind: string) { - if(kind == "pointer"){ + if (kind === "pointer") { inputElement.style.removeProperty("cursor"); - } - else { + } else { inputElement.style.cursor = kind; } } From 38717dafbbccc958089d532794819cb2517b019c Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Sat, 22 Oct 2022 12:52:02 +0100 Subject: [PATCH 08/10] smooth resizing attempt 2. --- src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts index 8f3539b4f8..010c9cfacc 100644 --- a/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts +++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts @@ -217,10 +217,12 @@ export class SizeWatcher { return; } + SizeWatcher.lastMove = Date.now(); + callback(element.clientWidth, element.clientHeight); const handleResize = (args: UIEvent) => { - if (Date.now() - this.lastMove > 33) { + if (Date.now() - SizeWatcher.lastMove > 40) { callback(element.clientWidth, element.clientHeight); SizeWatcher.lastMove = Date.now(); } From f5d3f9b2d332a5a68b316779493085ec4b064f80 Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Sat, 22 Oct 2022 13:40:40 +0100 Subject: [PATCH 09/10] we dont handle gl makecurrent. --- .../webapp/modules/avalonia/canvas.ts | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts index 010c9cfacc..62f62fe46f 100644 --- a/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts +++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts @@ -106,12 +106,6 @@ export class Canvas { // add the draw to the next frame this.renderLoopRequest = window.requestAnimationFrame(() => { - if (this.glInfo) { - const GL = (globalThis as any).AvaloniaGL; - // make current - GL.makeContextCurrent(this.glInfo.context); - } - if (this.htmlCanvas.width !== this.newWidth) { this.htmlCanvas.width = this.newWidth ?? 0; } @@ -131,6 +125,11 @@ export class Canvas { } public setCanvasSize(width: number, height: number): void { + if (this.renderLoopRequest !== 0) { + window.cancelAnimationFrame(this.renderLoopRequest); + this.renderLoopRequest = 0; + } + this.newWidth = width; this.newHeight = height; @@ -142,11 +141,7 @@ export class Canvas { this.htmlCanvas.height = this.newHeight; } - if (this.glInfo) { - const GL = (globalThis as any).AvaloniaGL; - // make current - GL.makeContextCurrent(this.glInfo.context); - } + this.requestAnimationFrame(); } public static setCanvasSize(element: HTMLCanvasElement, width: number, height: number): void { From cd8358303e2d9cf4edde7ca9999ad82a4c72d474 Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Sat, 22 Oct 2022 14:26:03 +0100 Subject: [PATCH 10/10] 30fps resize. --- src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts index 62f62fe46f..47c501cbb7 100644 --- a/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts +++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts @@ -217,7 +217,7 @@ export class SizeWatcher { callback(element.clientWidth, element.clientHeight); const handleResize = (args: UIEvent) => { - if (Date.now() - SizeWatcher.lastMove > 40) { + if (Date.now() - SizeWatcher.lastMove > 33) { callback(element.clientWidth, element.clientHeight); SizeWatcher.lastMove = Date.now(); }