@simpludify/web 0.1.2 → 0.1.3

package/README.md

@@ -1,11 +1,11 @@
 # @simpludify/web
 
-Experimental v0.1.2 browser SDK for Simpludify, a code-first TypeScript 2D engine. APIs may change between 0.x releases. Includes Game, PixiJS rendering, browser input and Canvas/DOM UI adapters; re-exports the host-independent Core API. Core and PixiJS are installed as runtime dependencies, not bundled into this package.
+Experimental v0.1.3 browser SDK for Simpludify, a code-first TypeScript 2D engine. APIs may change between 0.x releases. Includes Game, PixiJS rendering, browser input and Canvas/DOM UI adapters; re-exports the host-independent Core API. Core and PixiJS are installed as runtime dependencies, not bundled into this package.
 
-Registry installation (check availability with `npm view @simpludify/web@0.1.2 version`):
+Registry installation (check availability with `npm view @simpludify/web@0.1.3 version`):
 
 ```sh
-npm install @simpludify/web@0.1.2
+npm install @simpludify/web@0.1.3
 npm install --save-dev vite typescript
 ```
 

package/dist/canvas-visual.d.ts

@@ -18,6 +18,7 @@ export declare class CanvasVisual implements CanvasPresentation {
     private dirty;
     private dead;
     private active;
+    private cacheResolution;
     private mirroredFocus;
     private readonly subscriptions;
     private syncs;
@@ -25,14 +26,17 @@ export declare class CanvasVisual implements CanvasPresentation {
         graphics(graphics: Graphics, context: number | undefined): void;
         text(text: Text, key: string | undefined): void;
         changedText(key: string): void;
+        cacheResolution(): number | undefined;
     });
     get diagnostics(): {
         nodes: number;
+        visibleNodes: number;
         buttons: number;
         syncs: number;
         textMetrics: number;
     };
     private measure;
+    private clearCache;
     beforeResolutionChange(): void;
     focus(node: CanvasNode): void;
     private native;

package/dist/index.js

@@ -1,6 +1,6 @@
 import "./style.css";
 import { ActionController, Aspect, Camera, CanvasButton as CanvasButton$1, CanvasUI, Engine, EngineError, FixedStepRunner, GeometryTilemapLayer, PointerRouting, Renderable, ReplayPlayer, Scene, ScenePointer, SceneState, Shape, TilemapLayer, Transform, canvasControlText, canvasHoverHighlight, canvasOpacity, canvasScrollbars, canvasSliderGeometry, cleanupAll, containsScreenPoint, createViewTransform, imageSize, intersectUI, isKeyCode, positive, screenPoint, screenToWorld, spriteFrameBounds, worldToScreen, wrapCanvasText } from "@simpludify/core";
-import { Application, CanvasTextMetrics, Container, Graphics, Rectangle, Sprite, Text, TextStyle, Texture } from "pixi.js";
+import { Application, CanvasTextMetrics, Container, Graphics, Rectangle, RendererType, Sprite, Text, TextStyle, Texture } from "pixi.js";
 export * from "@simpludify/core";
 // packages/web/src/canvas-node.ts
 /** Bridge owner cancellation to browser APIs such as fetch. */
@@ -527,6 +527,7 @@ var CanvasVisual = class {
 	dirty = true;
 	dead = false;
 	active = false;
+	cacheResolution;
 	mirroredFocus;
 	subscriptions = [];
 	syncs = 0;
@@ -581,6 +582,7 @@ var CanvasVisual = class {
 	get diagnostics() {
 		return {
 			nodes: this.entries.size,
+			visibleNodes: [...this.entries.values()].filter((e) => e.display.visible).length,
 			buttons: [...this.entries.values()].filter((e) => e.button).length,
 			syncs: this.syncs,
 			textMetrics: this.metrics.size
@@ -624,7 +626,14 @@ var CanvasVisual = class {
 		cache.values.set(width, result);
 		return result;
 	};
+	clearCache() {
+		if (this.cacheResolution === void 0) return;
+		this.display.cacheAsTexture(false);
+		this.cacheResolution = void 0;
+	}
 	beforeResolutionChange() {
+		this.clearCache();
+		this.dirty = true;
 		for (const entry of this.entries.values()) if (entry.text && !entry.text.destroyed) this.resources.changedText(entry.text.styleKey);
 	}
 	focus(node) {
@@ -753,6 +762,7 @@ var CanvasVisual = class {
 		const visited = /* @__PURE__ */ new Set(), buttons = [];
 		const paint = [];
 		let order = 0;
+		let scrollVisible = false;
 		let restoreNativeFocus;
 		this.ui.walk((node, parentClip) => {
 			const measuredText = node.kind === "panel" ? void 0 : this.measure(node, Math.max(0, node.bounds.width - node.style.padding * 2));
@@ -777,6 +787,19 @@ var CanvasVisual = class {
 						entry.button = entry.native.element;
 					} else entry.button = this.button(node);
 					this.element.append(entry.button);
+				} else if (node.kind === "label") {
+					entry.label = document.createElement("span");
+					entry.label.className = "s-canvas-label";
+					const semantics = node.labelSemantics;
+					if (semantics?.role) {
+						entry.label.setAttribute("role", semantics.role);
+						if (semantics.role === "heading") entry.label.setAttribute("aria-level", String(semantics.level));
+						else {
+							entry.label.setAttribute("aria-live", semantics.role === "alert" ? "assertive" : "polite");
+							entry.label.setAttribute("aria-atomic", "true");
+						}
+					}
+					this.element.append(entry.label);
 				}
 				if (node.kind !== "panel") {
 					entry.text = new Text({ text: node.text });
@@ -802,7 +825,14 @@ var CanvasVisual = class {
 				} : {}
 			});
 			if (entry.button) buttons.push(entry.button);
+			if (entry.label) {
+				buttons.push(entry.label);
+				if (entry.label.textContent !== node.text) entry.label.textContent = node.text;
+				entry.label.setAttribute("aria-hidden", String(canvasOpacity(node) === 0));
+			}
 			const b = node.bounds, s = node.style;
+			const scrollBox = intersectUI(b, clip);
+			if (node.style.scroll && scrollBox.width > 0 && scrollBox.height > 0 && canvasOpacity(node) > 0) scrollVisible = true;
 			let enabled = !node.busy;
 			for (let p = node; p; p = p.parent) enabled &&= p.enabled;
 			const signature = JSON.stringify([
@@ -823,9 +853,12 @@ var CanvasVisual = class {
 			if (entry.signature === signature) return;
 			entry.signature = signature;
 			entry.display.position.set(b.x, b.y);
+			const paintBox = intersectUI(b, clip);
+			const visible = paintBox.width > 0 && paintBox.height > 0 && canvasOpacity(node) > 0;
+			entry.display.visible = visible;
 			const clipped = clip.x !== 0 || clip.y !== 0 || clip.width !== width / this.ui.scale || clip.height !== height / this.ui.scale;
 			entry.display.mask = clipped ? entry.mask : null;
-			entry.mask.renderable = clipped;
+			entry.mask.renderable = clipped && visible;
 			const maskSignature = JSON.stringify([
 				clipped,
 				clip.x,
@@ -927,7 +960,8 @@ var CanvasVisual = class {
 			const display = entry.scrollbar;
 			if (!display) return;
 			this.display.setChildIndex(display, order++);
-			display.visible = bars.length > 0;
+			const viewport = intersectUI(node.bounds, clip);
+			display.visible = bars.length > 0 && viewport.width > 0 && viewport.height > 0 && canvasOpacity(node) > 0;
 			display.mask = entry.display.mask;
 			const signature = JSON.stringify([
 				node.style.color,
@@ -982,6 +1016,14 @@ var CanvasVisual = class {
 		const button = focused ? this.entries.get(focused)?.button : void 0;
 		if ((focused !== this.mirroredFocus || focused === restoreNativeFocus) && button && !button.disabled && document.activeElement !== button) button.focus({ preventScroll: true });
 		this.mirroredFocus = this.ui.focusedNode;
+		const ratio = this.resources.cacheResolution();
+		const cache = scrollVisible && ratio !== void 0 && Math.max(width, height) * ratio <= 4096 ? ratio * this.ui.scale : void 0;
+		if (cache !== this.cacheResolution) {
+			this.clearCache();
+			this.cacheResolution = cache;
+			if (cache !== void 0) this.display.cacheAsTexture({ resolution: cache });
+		}
+		if (cache !== void 0) this.display.updateCacheTexture();
 	}
 	releaseEntry(entry) {
 		const backgroundContext = entry.background.context?.uid, maskContext = entry.mask.context?.uid;
@@ -991,6 +1033,7 @@ var CanvasVisual = class {
 			() => entry.abort.abort(),
 			() => entry.native?.dispose(),
 			() => entry.button?.remove(),
+			() => entry.label?.remove(),
 			() => entry.background.destroy({ context: true }),
 			() => entry.scrollbar?.destroy({ context: true }),
 			() => entry.text?.destroy({ style: true }),
@@ -1015,6 +1058,7 @@ var CanvasVisual = class {
 		cleanupAll([
 			...this.subscriptions.splice(0),
 			...entries.map((e) => () => this.releaseEntry(e)),
+			() => this.clearCache(),
 			() => this.display.destroy({ children: true }),
 			() => this.element.remove()
 		], "Canvas visual cleanup failed");
@@ -1462,10 +1506,11 @@ var PixiRenderer = class {
 	pendingUITextKeys = /* @__PURE__ */ new Set();
 	canvasPresentations = /* @__PURE__ */ new Set();
 	get canvasDiagnostics() {
-		let nodes = 0, buttons = 0, syncs = 0, textMetrics = 0;
+		let nodes = 0, visibleNodes = 0, buttons = 0, syncs = 0, textMetrics = 0;
 		for (const p of this.canvasPresentations) {
 			const d = p.diagnostics;
 			nodes += d.nodes;
+			visibleNodes += d.visibleNodes;
 			buttons += d.buttons;
 			syncs += d.syncs;
 			textMetrics += d.textMetrics;
@@ -1473,6 +1518,7 @@ var PixiRenderer = class {
 		return {
 			presentations: this.canvasPresentations.size,
 			nodes,
+			visibleNodes,
 			buttons,
 			syncs,
 			textMetrics
@@ -1483,7 +1529,8 @@ var PixiRenderer = class {
 		const visual = new CanvasVisual(ui, this.host, routing, {
 			graphics: (graphics, context) => releaseUIGraphics(this.app.renderer, graphics, context),
 			text: (text, key) => releaseUIText(this.app.renderer, text, key),
-			changedText: (key) => this.pendingUITextKeys.add(key)
+			changedText: (key) => this.pendingUITextKeys.add(key),
+			cacheResolution: () => this.app.renderer.type === RendererType.WEBGL ? this.app.renderer.resolution : void 0
 		});
 		this.canvasPresentations.add(visual);
 		let disposed = false;