From eb1c1971f1d92eb68d319cf4b3c032800f2d6600 Mon Sep 17 00:00:00 2001 From: Dan Walmsley Date: Sat, 22 Oct 2022 10:28:51 +0100 Subject: [PATCH 1/5] 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 2/5] 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 3/5] 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 4/5] 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 5/5] 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(); }