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/AvaloniaView.cs b/src/Web/Avalonia.Web/AvaloniaView.cs
index 3a31679424..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();
@@ -136,6 +135,8 @@ namespace Avalonia.Web
DomHelper.ObserveSize(host, null, OnSizeChanged);
CanvasHelper.RequestAnimationFrame(_canvas, true);
+
+ InputHelper.FocusElement(_containerElement);
}
private static RawPointerPoint ExtractRawPointerFromJSArgs(JSObject args)
@@ -252,7 +253,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 && key.Length == 1)
+ {
+ handled = _topLevelImpl.RawTextEvent(key);
+ }
+
+ return handled;
}
private bool OnKeyUp(string code, string key, int modifier)
diff --git a/src/Web/Avalonia.Web/webapp/build.js b/src/Web/Avalonia.Web/webapp/build.js
index 6b6df4c300..81f863cac7 100644
--- a/src/Web/Avalonia.Web/webapp/build.js
+++ b/src/Web/Avalonia.Web/webapp/build.js
@@ -5,7 +5,7 @@ require("esbuild").build({
],
outdir: "../wwwroot",
bundle: true,
- minify: false,
+ minify: true,
format: "esm",
target: "es2016",
platform: "browser",
diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts
index 9ae9b3d2a8..47c501cbb7 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 {
@@ -210,23 +205,25 @@ 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();
+ SizeWatcher.lastMove = Date.now();
- const watcherElement = element as SizeWatcherElement;
- watcherElement.SizeWatcher = {
- callback
- };
+ callback(element.clientWidth, element.clientHeight);
- SizeWatcher.elements.set(elementId ?? element.id, element);
- SizeWatcher.observer.observe(element);
+ const handleResize = (args: UIEvent) => {
+ if (Date.now() - SizeWatcher.lastMove > 33) {
+ callback(element.clientWidth, element.clientHeight);
+ SizeWatcher.lastMove = Date.now();
+ }
+ };
- SizeWatcher.invoke(element);
+ window.addEventListener("resize", handleResize);
}
public static unobserve(elementId: string): void {
diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
index 2257d56a92..668212964c 100644
--- a/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
+++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
@@ -11,6 +11,7 @@ export class AvaloniaDOM {
host.tabIndex = 0;
host.oncontextmenu = function () { return false; };
host.style.overflow = "hidden";
+ host.style.touchAction = "none";
// Rendering target canvas
const canvas = document.createElement("canvas");
@@ -23,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";
@@ -33,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";
diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts
index 768414ccab..ddc1f54ae7 100644
--- a/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts
+++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/input.ts
@@ -159,7 +159,11 @@ 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) {