@simpludify/web 0.1.4 → 0.1.5

package/README.md

@@ -1,11 +1,11 @@
 # @simpludify/web
 
-Experimental v0.1.4 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.5 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.4 version`):
+Registry installation (check availability with `npm view @simpludify/web@0.1.5 version`):
 
 ```sh
-npm install @simpludify/web@0.1.4
+npm install @simpludify/web@0.1.5
 npm install --save-dev vite typescript
 ```
 

package/dist/game.d.ts

@@ -1,5 +1,5 @@
 import type { CanvasNode } from "@simpludify/core";
-import { type ActionBindings, ActionController, type ActionSet, type Actor, Aspect, Camera, CanvasUI, type CanvasUIOptions, Engine, type FixedStepOptions, type FrameDriver, type JsonValue, type LogicalResolution, type RendererPort, type ReplayControllers, ReplayPlayer, Scene, ScenePointer, type ScreenPoint, type TweenScheduler, type Viewport, type ViewTransform, type WorldPoint } from "@simpludify/core";
+import { type ActionBindings, ActionController, type ActionSet, type Actor, Aspect, Camera, CanvasUI, type CanvasUIOptions, Engine, type FixedStepOptions, type FrameDriver, type JsonValue, type LogicalResolution, type RendererPort, type ReplayControllers, ReplayPlayer, Scene, ScenePointer, type ScreenPoint, type TweenScheduler, type Viewport, type ViewTransform, VirtualInput, type WorldPoint } from "@simpludify/core";
 import { GamepadInput } from "./gamepads.js";
 import { Theme, type ThemeTokens, type UINode } from "./ui.js";
 export interface SceneContext {
@@ -11,6 +11,7 @@ export interface SceneContext {
     ui(...nodes: UINode[]): void;
     canvasUI(root: CanvasNode, options?: CanvasUIOptions): CanvasUI;
     readonly pointer: ScenePointer;
+    readonly virtualInput: VirtualInput;
     actions<A extends ActionSet>(actions: A, bindings?: ActionBindings<A>): ActionController<A>;
     onUpdate(callback: (seconds: number) => void): () => void;
     onActivate(callback: () => void): () => void;
@@ -43,6 +44,11 @@ export declare class Game<SceneId extends string = string> {
     private readonly keyboard;
     private readonly pointers;
     private readonly pointerChannels;
+    private readonly virtualInputs;
+    private virtualPresentation;
+    get virtualInput(): VirtualInput;
+    private virtualFor;
+    private prepareVirtual;
     private canvas;
     private canvasPresentation;
     private defaultCanvas;
@@ -58,6 +64,7 @@ export declare class Game<SceneId extends string = string> {
         deliveries: number;
         scrollDrags: number;
         controlDrags: number;
+        virtualDrags: number;
     };
     private channelFor;
     private readonly observer;

package/dist/index.d.ts

@@ -12,3 +12,4 @@ export { GamepadInput, GamepadSource } from "./gamepads.js";
 export { BrowserInput } from "./input.js";
 export { PixiRenderer } from "./renderer.js";
 export * from "./ui.js";
+export type { VirtualInputPresentation } from "./virtual-input-visual.js";

package/dist/index.js

@@ -1,5 +1,5 @@
 import "./style.css";
-import { ActionController, Aspect, Camera, CanvasButton as CanvasButton$1, CanvasUI, Engine, EngineError, EventBus, FixedStepRunner, GeometryTilemapLayer, Lifetime, PointerRouting, Renderable, ReplayPlayer, Scene, ScenePointer, SceneState, Shape, TilemapLayer, Transform, canvasControlText, canvasHoverHighlight, canvasOpacity, canvasScrollbars, canvasSliderGeometry, cleanupAll, containsScreenPoint, createViewTransform, defineEvent, imageSize, intersectUI, isKeyCode, positive, screenPoint, screenToWorld, spriteFrameBounds, worldToScreen, wrapCanvasText } from "@simpludify/core";
+import { ActionController, Aspect, Camera, CanvasButton as CanvasButton$1, CanvasUI, Engine, EngineError, EventBus, FixedStepRunner, GeometryTilemapLayer, Lifetime, PointerRouting, Renderable, ReplayPlayer, Scene, ScenePointer, SceneState, Shape, TilemapLayer, Transform, VirtualInput, canvasControlText, canvasHoverHighlight, canvasOpacity, canvasScrollbars, canvasSliderGeometry, cleanupAll, containsScreenPoint, createViewTransform, defineEvent, imageSize, intersectUI, isKeyCode, positive, screenPoint, screenToWorld, spriteFrameBounds, worldToScreen, wrapCanvasText } from "@simpludify/core";
 import { Application, CanvasTextMetrics, Container, Graphics, Rectangle, RendererType, Sprite, Text, TextStyle, Texture } from "pixi.js";
 export * from "@simpludify/core";
 // packages/web/src/canvas-node.ts
@@ -589,6 +589,9 @@ var BrowserPointer = class {
 		window.addEventListener("blur", (event) => {
 			if (event.target === window) this.release();
 		}, options);
+		host.addEventListener("focusout", (event) => this.guard(() => {
+			if (!(event.relatedTarget instanceof Node) || !host.contains(event.relatedTarget) || blocksGameKeyboard(event.relatedTarget)) this.routing.releaseVirtual();
+		}), options);
 		document.addEventListener("visibilitychange", () => {
 			if (document.hidden) this.release();
 		}, options);
@@ -1907,6 +1910,108 @@ var TilemapVisual = class {
 		], "Tilemap presentation cleanup failed");
 	}
 };
+// packages/web/src/virtual-input-visual.ts
+/** Screen-space presentation only. The existing BrowserPointer is the sole event adapter. */
+var VirtualInputVisual = class {
+	input;
+	release;
+	display = new Container();
+	entries = /* @__PURE__ */ new Map();
+	dead = false;
+	off;
+	constructor(input, release) {
+		this.input = input;
+		this.release = release;
+		this.display.eventMode = "none";
+		this.display.sortableChildren = true;
+		this.display.zIndex = .5;
+		this.off = input.onDispose(() => this.dispose());
+	}
+	get diagnostics() {
+		return {
+			controls: this.entries.size,
+			visible: [...this.entries.values()].filter((e) => e.graphics.visible).length
+		};
+	}
+	update() {
+		if (this.dead) return;
+		const live = new Set(this.input.controls);
+		for (const [control, entry] of this.entries) if (!live.has(control)) {
+			this.entries.delete(control);
+			this.release(entry.graphics);
+		}
+		this.display.visible = this.input.visible;
+		for (const control of live) {
+			let entry = this.entries.get(control);
+			if (!entry) {
+				entry = {
+					graphics: new Graphics(),
+					signature: ""
+				};
+				entry.graphics.zIndex = control.kind === "button" ? 1 : 0;
+				this.entries.set(control, entry);
+				this.display.addChild(entry.graphics);
+			}
+			entry.graphics.visible = control.visible;
+			if (!control.visible || !this.input.visible) continue;
+			const center = control.center, knob = control.knob, radius = control.radius;
+			const signature = JSON.stringify([
+				center,
+				knob,
+				radius,
+				control.color,
+				control.enabled,
+				this.input.enabled,
+				control.pressed,
+				control.kind
+			]);
+			if (signature === entry.signature) continue;
+			entry.signature = signature;
+			const g = entry.graphics;
+			g.clear();
+			g.alpha = control.enabled && this.input.enabled ? 1 : .35;
+			g.circle(center.x, center.y, radius).fill({
+				color: control.color,
+				alpha: .12
+			}).stroke({
+				color: control.color,
+				alpha: .75,
+				width: 2
+			});
+			if (control.kind === "stick") {
+				g.moveTo(center.x, center.y).lineTo(knob.x, knob.y).stroke({
+					color: control.color,
+					alpha: .5,
+					width: 3
+				});
+				g.circle(knob.x, knob.y, radius * .36).fill({
+					color: control.color,
+					alpha: control.pressed ? .85 : .45
+				});
+			} else {
+				if (control.pressed) g.circle(center.x, center.y, radius * .7).fill({
+					color: control.color,
+					alpha: .65
+				});
+				if (control.directional && control.pressed) g.moveTo(center.x, center.y).lineTo(knob.x, knob.y).stroke({
+					color: control.color,
+					width: 4
+				});
+			}
+		}
+	}
+	dispose() {
+		if (this.dead) return;
+		this.dead = true;
+		const entries = [...this.entries.values()];
+		this.entries.clear();
+		cleanupAll([
+			this.off,
+			...entries.map((e) => () => this.release(e.graphics)),
+			() => this.display.destroy({ children: true })
+		], "Virtual input presentation cleanup failed");
+	}
+};
 // packages/web/src/renderer.ts
 var PixiRenderer = class {
 	host;
@@ -1915,6 +2020,46 @@ var PixiRenderer = class {
 	app = new Application();
 	pendingUITextKeys = /* @__PURE__ */ new Set();
 	canvasPresentations = /* @__PURE__ */ new Set();
+	virtualPresentations = /* @__PURE__ */ new Set();
+	get virtualInputDiagnostics() {
+		let controls = 0, visible = 0;
+		for (const visual of this.virtualPresentations) {
+			controls += visual.diagnostics.controls;
+			visible += visual.diagnostics.visible;
+		}
+		return {
+			presentations: this.virtualPresentations.size,
+			controls,
+			visible
+		};
+	}
+	prepareVirtualInput(input) {
+		if (!this.ready || this.dead) throw new EngineError("RENDERER_NOT_READY", "Renderer is not available");
+		const visual = new VirtualInputVisual(input, (graphics) => {
+			const context = graphics.context.uid;
+			graphics.destroy({ context: true });
+			releaseUIGraphics(this.app.renderer, graphics, context);
+		});
+		this.virtualPresentations.add(visual);
+		const off = input.onDispose(() => {
+			this.virtualPresentations.delete(visual);
+		});
+		let disposed = false;
+		return {
+			update: () => {
+				if (disposed || input.disposed) return;
+				if (!visual.display.parent) this.app.stage.addChild(visual.display);
+				visual.update();
+			},
+			dispose: () => {
+				if (disposed) return;
+				disposed = true;
+				off();
+				this.virtualPresentations.delete(visual);
+				visual.dispose();
+			}
+		};
+	}
 	get canvasDiagnostics() {
 		let nodes = 0, visibleNodes = 0, buttons = 0, syncs = 0, textMetrics = 0;
 		for (const p of this.canvasPresentations) {
@@ -2508,6 +2653,10 @@ var PixiRenderer = class {
 		this.scenes.clear();
 		cleanupAll([
 			...scenes.map((scene) => scene.dispose),
+			...[...this.virtualPresentations].map((p) => () => {
+				this.virtualPresentations.delete(p);
+				p.dispose();
+			}),
 			...[...this.canvasPresentations].map((p) => () => {
 				this.canvasPresentations.delete(p);
 				p.dispose();
@@ -2765,6 +2914,37 @@ var Game = class {
 	keyboard;
 	pointers;
 	pointerChannels = /* @__PURE__ */ new WeakMap();
+	virtualInputs = /* @__PURE__ */ new WeakMap();
+	virtualPresentation;
+	get virtualInput() {
+		this.assertAlive();
+		return this.virtualFor(this.engine.scene);
+	}
+	virtualFor(scene) {
+		let input = this.virtualInputs.get(scene);
+		if (!input) {
+			input = new VirtualInput(this.channelFor(scene), this.engine.input);
+			this.virtualInputs.set(scene, input);
+			const owned = input;
+			input.onDispose(() => {
+				if (this.virtualInputs.get(scene) === owned) this.virtualInputs.delete(scene);
+				if (this.engine.scene === scene) {
+					this.virtualPresentation?.dispose();
+					this.virtualPresentation = void 0;
+				}
+			});
+		}
+		return input;
+	}
+	prepareVirtual(scene) {
+		const input = this.virtualInputs.get(scene);
+		if (!input || input.controls.length === 0) return;
+		const renderer = this.renderer;
+		if (!renderer.prepareVirtualInput) throw new EngineError("RENDERER_CAPABILITY", "Renderer does not support virtual input presentation");
+		const presentation = renderer.prepareVirtualInput(input);
+		input.onDispose(() => presentation.dispose());
+		return presentation;
+	}
 	canvas;
 	canvasPresentation;
 	defaultCanvas;
@@ -2885,7 +3065,7 @@ var Game = class {
 				world: this.screenToWorld(screen),
 				view: this.view
 			};
-		}, this.report, () => this.canvasPresentation?.update(this.width, this.height));
+		}, this.report, () => this.updateProjection());
 		document.addEventListener("visibilitychange", () => {
 			this.previousTime = void 0;
 			this.fixed?.reset();
@@ -3040,6 +3220,7 @@ var Game = class {
 			const scene = new Scene(id), nodes = [], controller = new AbortController();
 			let canvas;
 			const pointer = this.channelFor(scene);
+			const virtualFor = () => this.virtualFor(scene);
 			this.staging = scene;
 			scene.onDispose(() => controller.abort());
 			try {
@@ -3055,6 +3236,9 @@ var Game = class {
 					add: (actor) => scene.add(actor),
 					ui: (...items) => nodes.push(...items),
 					pointer,
+					get virtualInput() {
+						return virtualFor();
+					},
 					canvasUI: (root, options) => {
 						if (canvas) throw new EngineError("UI_OWNERSHIP", "A Scene has one Canvas UI root");
 						canvas = new CanvasUI(scene, root, options);
@@ -3093,6 +3277,7 @@ var Game = class {
 	async present(scene, nodes, canvas) {
 		let prepared, ui, committed = false;
 		let canvasPresentation;
+		let virtualPresentation;
 		try {
 			const preparing = this.renderer.prepare(scene);
 			preparing.then((value) => {
@@ -3113,6 +3298,7 @@ var Game = class {
 				canvasPresentation = renderer.prepareCanvasUI(canvas, this.pointers.routing);
 				scene.onDispose(() => canvasPresentation?.dispose());
 			}
+			virtualPresentation = this.prepareVirtual(scene);
 			scene.markReady();
 			this.errorBox.hidden = true;
 			try {
@@ -3123,18 +3309,20 @@ var Game = class {
 				this.report(error);
 			}
 			this.assertAlive();
-			const oldPrepared = this.prepared, oldUI = this.ui, oldCanvas = this.canvasPresentation;
+			const oldPrepared = this.prepared, oldUI = this.ui, oldCanvas = this.canvasPresentation, oldVirtual = this.virtualPresentation;
 			this.prepared = prepared;
 			this.ui = ui;
 			this.canvas = canvas;
 			this.canvasPresentation = canvasPresentation;
+			this.virtualPresentation = virtualPresentation;
 			this.pointers.routing.setScene(this.channelFor(scene), canvas);
 			committed = true;
 			this.element.append(ui.element);
 			for (const cleanup of [
 				() => oldPrepared?.dispose(),
 				() => oldUI?.dispose(),
-				() => oldCanvas?.dispose()
+				() => oldCanvas?.dispose(),
+				() => oldVirtual?.dispose()
 			]) try {
 				cleanup();
 			} catch (error) {
@@ -3150,7 +3338,8 @@ var Game = class {
 			if (!committed) for (const cleanup of [
 				() => prepared?.dispose(),
 				() => ui?.dispose(),
-				() => canvasPresentation?.dispose()
+				() => canvasPresentation?.dispose(),
+				() => virtualPresentation?.dispose()
 			]) try {
 				cleanup();
 			} catch (cleanupError) {
@@ -3262,6 +3451,7 @@ var Game = class {
 			width: this.width,
 			height: this.height
 		};
+		this.virtualInputs.get(this.engine.scene)?.refresh(viewport);
 		const previous = this.projection.viewport;
 		const c = this.camera;
 		if (!this.projectionDirty && previous.x === viewport.x && previous.y === viewport.y && previous.width === viewport.width && previous.height === viewport.height && this.cameraX === c.x && this.cameraY === c.y && this.cameraZoom === c.zoom) return;
@@ -3306,6 +3496,8 @@ var Game = class {
 	}
 	render() {
 		this.updateProjection();
+		this.virtualPresentation ??= this.prepareVirtual(this.engine.scene);
+		this.virtualPresentation?.update();
 		this.prepared?.render(this.projection);
 	}
 	tick = (time) => {
@@ -3319,12 +3511,14 @@ var Game = class {
 			} else {
 				const elapsed = this.previousTime === void 0 ? 0 : Math.max(0, (time - this.previousTime) / 1e3);
 				this.previousTime = time;
+				if (this.virtualInputs.has(this.engine.scene)) this.updateProjection();
 				if (this.playback) this.playback.advance(elapsed, this.options.fixedStep?.maxSteps ?? 8);
 				else if (this.fixed) this.fixed.advance(elapsed);
 				else this.engine.step(Math.min(this.maxDelta, elapsed));
 				if (!this.dead && !this.engine.scene.disposed) this.engine.scene.advancePresentation(Math.min(this.maxDelta, elapsed));
 				if (this.engine.paused) this.canvas?.stopMotion();
 				else this.canvas?.advance(elapsed);
+				this.virtualInputs.get(this.engine.scene)?.advance(Math.min(this.maxDelta, elapsed));
 				if (this.ratio !== (this.options.pixelRatio ?? Math.min(window.devicePixelRatio || 1, 2))) this.resize();
 				this.render();
 			}
@@ -3354,6 +3548,7 @@ var Game = class {
 			() => this.gamepads.dispose(),
 			() => this.keyboard.dispose(),
 			() => this.canvasPresentation?.dispose(),
+			() => this.virtualPresentation?.dispose(),
 			() => this.canvas?.dispose(),
 			() => this.observer.disconnect(),
 			() => this.ui?.dispose(),
@@ -3371,6 +3566,7 @@ var Game = class {
 		this.staging = void 0;
 		this.canvas = void 0;
 		this.canvasPresentation = void 0;
+		this.virtualPresentation = void 0;
 		this.defaultCanvas = void 0;
 		this.defaultUI.length = 0;
 		this.scenes.clear();