@simpludify/web 0.1.6 → 0.1.7

package/README.md

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

package/dist/game.d.ts

@@ -89,7 +89,7 @@ export declare class Game<SceneId extends string = string> {
     private height;
     private ratio;
     private readonly scenes;
-    private readonly pendingScenes;
+    private pendingScene;
     private readonly defaultUI;
     private ui;
     private prepared;
@@ -127,7 +127,7 @@ export declare class Game<SceneId extends string = string> {
     scene(id: SceneId, setup: SceneSetup): this;
     private wait;
     run(initialScene?: SceneId): Promise<void>;
-    goTo(id: SceneId): Promise<void>;
+    changeScene(id: SceneId): Promise<void>;
     private navigate;
     private present;
     get viewport(): Viewport;

package/dist/geometry-tilemap-visual.d.ts

@@ -24,7 +24,7 @@ export declare class GeometryTilemapVisual {
     constructor(map: GeometryTilemap, released: () => void);
     private remove;
     private cell;
-    render(view: ViewTransform): void;
+    render(view: ViewTransform, enabled?: boolean): void;
     private bulk;
     dispose(): void;
 }

package/dist/index.js

@@ -703,6 +703,7 @@ var BrowserPointer = class {
 			}
 			this.flush();
 			const data = this.data(e);
+			if (!data) return this.release();
 			try {
 				host.setPointerCapture(e.pointerId);
 			} catch {}
@@ -720,7 +721,9 @@ var BrowserPointer = class {
 		host.addEventListener("wheel", (e) => this.guard(() => {
 			if (!this.surface(e.target)) return;
 			this.flush();
-			const { screen } = this.project(e);
+			const projected = this.project(e);
+			if (!projected) return;
+			const { screen } = projected;
 			const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? host.clientHeight : 1;
 			if (this.routing.scroll(screen.x, screen.y, e.deltaX * unit, e.deltaY * unit)) e.preventDefault();
 		}), {
@@ -730,19 +733,27 @@ var BrowserPointer = class {
 		window.addEventListener("pointermove", (e) => this.guard(() => {
 			if (!this.routing.owns(e.pointerId) && !this.surface(e.target)) {
 				if (e.pointerType === "mouse") this.releaseMouse(e.pointerId);
-				if (this.routing.hasHover(e.pointerId)) this.routing.leave(this.data(e));
+				if (this.routing.hasHover(e.pointerId)) {
+					const data = this.data(e);
+					if (data) this.routing.leave(data);
+					else this.release();
+				}
 				return;
 			}
 			this.flush();
+			const data = this.data(e);
+			if (!data) return this.release();
 			this.updateMouse(e);
-			this.routing.move(this.data(e));
+			this.routing.move(data);
 		}), options);
 		window.addEventListener("pointerup", (e) => this.guard(() => {
 			if (e.pointerType === "mouse") this.releaseMouse(e.pointerId);
 			if (this.routing.owns(e.pointerId)) {
 				e.preventDefault();
 				this.flush();
-				this.routing.up(this.data(e));
+				const data = this.data(e);
+				if (data) this.routing.up(data);
+				else this.release();
 			}
 		}), options);
 		window.addEventListener("pointercancel", (e) => this.guard(() => {
@@ -756,7 +767,11 @@ var BrowserPointer = class {
 			else this.blockedMouse.delete(e.pointerId);
 			this.routing.cancel(e.pointerId);
 		}), options);
-		host.addEventListener("pointerleave", (e) => this.guard(() => this.routing.leave(this.data(e))), options);
+		host.addEventListener("pointerleave", (e) => this.guard(() => {
+			const data = this.data(e);
+			if (data) this.routing.leave(data);
+			else this.release();
+		}), options);
 		window.addEventListener("blur", (event) => {
 			if (event.target === window) this.release();
 		}, options);
@@ -806,7 +821,9 @@ var BrowserPointer = class {
 		return target === this.host || target instanceof HTMLCanvasElement && target.parentElement === this.host;
 	}
 	data(e) {
-		const { screen, world, view } = this.project(e);
+		const projected = this.project(e);
+		if (!projected) return void 0;
+		const { screen, world, view } = projected;
 		return Object.freeze({
 			pointerId: e.pointerId,
 			pointerType: e.pointerType,
@@ -1274,6 +1291,7 @@ var CanvasVisual = class {
 			},
 			wheel: (event) => {
 				const rect = this.host.getBoundingClientRect();
+				if (rect.width <= 0 || rect.height <= 0) return;
 				const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? this.host.clientHeight : 1;
 				if (this.routing.scroll((event.clientX - rect.x) * this.host.clientWidth / rect.width, (event.clientY - rect.y) * this.host.clientHeight / rect.height, event.deltaX * unit, event.deltaY * unit)) event.preventDefault();
 			}
@@ -1747,11 +1765,11 @@ var GeometryTilemapVisual = class {
 		g.clear().poly(this.map.geometry.vertices(x, y).flatMap((p) => [p.x, p.y]), true).fill(color);
 		this.stats.updatedTiles++;
 	}
-	render(view) {
+	render(view, enabled = true) {
 		if (this.disposed) return;
 		const m = this.map;
 		this.display.position.set(m.x, m.y);
-		this.display.visible = m.visible && m.enabled;
+		this.display.visible = enabled && m.visible && m.enabled;
 		if (!this.display.visible) {
 			this.invalid = true;
 			this.bulk = true;
@@ -1986,7 +2004,7 @@ var TilemapVisual = class {
 	invalid = true;
 	off;
 	offDispose;
-	constructor(map, scene, acquire, changed, onError, released) {
+	constructor(map, isCurrent, acquire, changed, onError, released) {
 		this.map = map;
 		this.changed = changed;
 		this.onError = onError;
@@ -2004,7 +2022,7 @@ var TilemapVisual = class {
 		const controller = this.controller;
 		if (!controller) throw Error("Missing tilemap request controller");
 		acquire(map.sheet.url, controller.signal).then((lease) => {
-			if (this.disposed || map.disposed || map.scene !== scene) {
+			if (this.disposed || map.disposed || !isCurrent()) {
 				lease.release();
 				return;
 			}
@@ -2066,12 +2084,12 @@ var TilemapVisual = class {
 		sprite.height = this.map.tileHeight;
 		this.stats.updatedTiles++;
 	}
-	render(view) {
+	render(view, enabled = true) {
 		if (this.disposed) return;
 		this.sync();
 		const m = this.map;
 		this.display.position.set(m.x, m.y);
-		this.display.visible = m.visible && m.enabled;
+		this.display.visible = enabled && m.visible && m.enabled;
 		if (!this.display.visible) {
 			this.invalid = true;
 			return;
@@ -2471,6 +2489,7 @@ var PixiRenderer = class {
 		root.mask = mask;
 		const visuals = /* @__PURE__ */ new Map();
 		const tilemaps = /* @__PURE__ */ new Map();
+		const geometryTilemaps = /* @__PURE__ */ new Map();
 		const drawOrder = [];
 		let depthDirty = true;
 		let revision = -1, disposed = false, clipX = NaN, clipY = NaN, clipWidth = NaN, clipHeight = NaN, removeSceneCleanup;
@@ -2670,20 +2689,30 @@ var PixiRenderer = class {
 				entry.dispose();
 				visuals.delete(actor);
 			}
-			for (const [actor, entry] of tilemaps) if (actor.disposed || actor.scene !== scene || !(entry instanceof TilemapVisual ? actor.get(TilemapLayer.type) : actor.get(GeometryTilemapLayer.type)) || entry.disposed) {
-				entry.dispose();
-				if (entry instanceof TilemapVisual) this.tilemaps.delete(entry);
-				else this.geometryTilemaps.delete(entry);
-				tilemaps.delete(actor);
+			for (const [actor, entry] of tilemaps) {
+				const layer = actor.get(TilemapLayer.type);
+				if (actor.disposed || actor.scene !== scene || !layer || layer.disposed || layer.map !== entry.map || entry.disposed) {
+					entry.dispose();
+					this.tilemaps.delete(entry);
+					tilemaps.delete(actor);
+				}
+			}
+			for (const [actor, entry] of geometryTilemaps) {
+				const layer = actor.get(GeometryTilemapLayer.type);
+				if (actor.disposed || actor.scene !== scene || !layer || layer.disposed || layer.map !== entry.map || entry.disposed) {
+					entry.dispose();
+					this.geometryTilemaps.delete(entry);
+					geometryTilemaps.delete(actor);
+				}
 			}
 			let order = 0;
 			for (const actor of scene.actors) {
 				const layer = actor.get(TilemapLayer.type);
-				if (layer) {
+				if (layer && !layer.disposed && !layer.map.disposed) {
 					let tile = tilemaps.get(actor);
 					if (!tile) {
-						tile = new TilemapVisual(layer.map, scene, (url, signal) => this.acquireImage(url, signal), changed, this.onError, () => {
-							if (tile instanceof TilemapVisual) this.tilemaps.delete(tile);
+						tile = new TilemapVisual(layer.map, () => actor.scene === scene && actor.get(TilemapLayer.type)?.map === layer.map, (url, signal) => this.acquireImage(url, signal), changed, this.onError, () => {
+							if (tile) this.tilemaps.delete(tile);
 							depthDirty = true;
 						});
 						world.addChild(tile.display);
@@ -2693,8 +2722,8 @@ var PixiRenderer = class {
 					tile.order = order;
 				}
 				const geometryLayer = actor.get(GeometryTilemapLayer.type);
-				if (geometryLayer) {
-					let tile = tilemaps.get(actor);
+				if (geometryLayer && !geometryLayer.disposed && !geometryLayer.map.disposed) {
+					let tile = geometryTilemaps.get(actor);
 					if (!tile) {
 						const created = new GeometryTilemapVisual(geometryLayer.map, () => {
 							this.geometryTilemaps.delete(created);
@@ -2702,7 +2731,7 @@ var PixiRenderer = class {
 						});
 						tile = created;
 						world.addChild(tile.display);
-						tilemaps.set(actor, tile);
+						geometryTilemaps.set(actor, tile);
 						this.geometryTilemaps.add(created);
 					}
 					tile.order = order;
@@ -2722,7 +2751,7 @@ var PixiRenderer = class {
 		const sync = () => {
 			reconcile();
 			for (const entry of visuals.values()) update(entry);
-			for (const entry of tilemaps.values()) if (entry instanceof TilemapVisual) entry.sync();
+			for (const entry of tilemaps.values()) entry.sync();
 		};
 		const prepared = {
 			ready: async () => {
@@ -2735,7 +2764,6 @@ var PixiRenderer = class {
 						if (entry.controller) pending = true;
 					}
 					for (const entry of tilemaps.values()) {
-						if (!(entry instanceof TilemapVisual)) continue;
 						if (entry.error) throw entry.error;
 						if (entry.controller) pending = true;
 					}
@@ -2777,8 +2805,15 @@ var PixiRenderer = class {
 						entry.display.scale.set(scaleX, scaleY);
 					}
 				}
-				for (const entry of tilemaps.values()) {
-					entry.render(view);
+				for (const [actor, entry] of tilemaps) {
+					entry.render(view, actor.enabled && actor.get(TilemapLayer.type)?.enabled === true);
+					if (entry.depth !== entry.map.zIndex) {
+						entry.depth = entry.map.zIndex;
+						depthDirty = true;
+					}
+				}
+				for (const [actor, entry] of geometryTilemaps) {
+					entry.render(view, actor.enabled && actor.get(GeometryTilemapLayer.type)?.enabled === true);
 					if (entry.depth !== entry.map.zIndex) {
 						entry.depth = entry.map.zIndex;
 						depthDirty = true;
@@ -2796,6 +2831,11 @@ var PixiRenderer = class {
 						order: entry.order,
 						zIndex: entry.map.zIndex
 					});
+					for (const entry of geometryTilemaps.values()) drawOrder.push({
+						display: entry.display,
+						order: entry.order,
+						zIndex: entry.map.zIndex
+					});
 					drawOrder.sort((a, b) => a.zIndex - b.zIndex || a.order - b.order);
 					for (let i = 0; i < drawOrder.length; i++) {
 						const entry = drawOrder[i];
@@ -2820,10 +2860,14 @@ var PixiRenderer = class {
 					() => {
 						for (const entry of tilemaps.values()) {
 							entry.dispose();
-							if (entry instanceof TilemapVisual) this.tilemaps.delete(entry);
-							else this.geometryTilemaps.delete(entry);
+							this.tilemaps.delete(entry);
 						}
 						tilemaps.clear();
+						for (const entry of geometryTilemaps.values()) {
+							entry.dispose();
+							this.geometryTilemaps.delete(entry);
+						}
+						geometryTilemaps.clear();
 					},
 					() => root.destroy({
 						children: true,
@@ -3201,7 +3245,7 @@ var Game = class {
 	height = 450;
 	ratio = 1;
 	scenes = /* @__PURE__ */ new Map();
-	pendingScenes = /* @__PURE__ */ new Map();
+	pendingScene;
 	defaultUI = [];
 	ui;
 	prepared;
@@ -3278,7 +3322,7 @@ var Game = class {
 		});
 		this.pointers = new BrowserPointer(this.element, (event) => {
 			const rect = this.element.getBoundingClientRect();
-			if (rect.width <= 0 || rect.height <= 0) throw new EngineError("VIEWPORT_UNAVAILABLE", "Game has no visible bounds");
+			if (rect.width <= 0 || rect.height <= 0) return;
 			const screen = screenPoint((event.clientX - rect.left) * this.width / rect.width, (event.clientY - rect.top) * this.height / rect.height);
 			return {
 				screen,
@@ -3384,12 +3428,17 @@ var Game = class {
 	}
 	scene(id, setup) {
 		this.assertAlive();
+		if (typeof id !== "string" || !id.length) throw new EngineError("INVALID_VALUE", "Scene id must not be empty");
+		if (typeof setup !== "function") throw new EngineError("INVALID_VALUE", "Scene setup must be a function");
 		if (this.scenes.has(id)) throw new EngineError("DUPLICATE_SCENE", "Scene id is already registered", { sceneId: id });
 		this.scenes.set(id, setup);
 		return this;
 	}
 	wait(promise) {
-		if (this.dead) return Promise.reject(new EngineError("GAME_DISPOSED", "Game has been disposed"));
+		if (this.dead) {
+			promise.catch(() => {});
+			return Promise.reject(new EngineError("GAME_DISPOSED", "Game has been disposed"));
+		}
 		const signal = this.shutdown.signal;
 		return new Promise((resolve, reject) => {
 			const abort = () => {
@@ -3425,7 +3474,7 @@ var Game = class {
 		})();
 		return this.startPromise;
 	}
-	goTo(id) {
+	changeScene(id) {
 		if (this.dead) return Promise.reject(new EngineError("GAME_DISPOSED", "Game has been disposed"));
 		if (!this.ready) return Promise.reject(new EngineError("GAME_NOT_READY", "Await run before navigating"));
 		return this.navigate(id);
@@ -3433,8 +3482,7 @@ var Game = class {
 	navigate(id) {
 		const setup = this.scenes.get(id);
 		if (!setup) return Promise.reject(new EngineError("SCENE_NOT_FOUND", "Unknown scene", { sceneId: id }));
-		const existing = this.pendingScenes.get(id);
-		if (existing) return existing;
+		if (this.pendingScene?.id === id) return this.pendingScene.task;
 		const task = this.queue.then(async () => {
 			this.assertAlive();
 			const scene = new Scene(id), nodes = [], controller = new AbortController();
@@ -3476,7 +3524,9 @@ var Game = class {
 					onDispose: (callback) => scene.onDispose(callback)
 				})));
 				this.assertAlive();
-				await this.present(scene, nodes, canvas);
+				await this.present(scene, nodes, canvas, () => {
+					if (this.pendingScene?.task === task) this.pendingScene = void 0;
+				});
 			} catch (error) {
 				try {
 					scene.dispose();
@@ -3488,13 +3538,16 @@ var Game = class {
 				if (this.staging === scene) this.staging = void 0;
 			}
 		}).finally(() => {
-			if (this.pendingScenes.get(id) === task) this.pendingScenes.delete(id);
+			if (this.pendingScene?.task === task) this.pendingScene = void 0;
 		});
-		this.pendingScenes.set(id, task);
+		this.pendingScene = {
+			id,
+			task
+		};
 		this.queue = task.catch(() => {});
 		return task;
 	}
-	async present(scene, nodes, canvas) {
+	async present(scene, nodes, canvas, beforeActivate) {
 		let prepared, ui, committed = false;
 		let canvasPresentation;
 		let virtualPresentation;
@@ -3520,6 +3573,7 @@ var Game = class {
 			}
 			virtualPresentation = this.prepareVirtual(scene);
 			scene.markReady();
+			beforeActivate?.();
 			this.errorBox.hidden = true;
 			try {
 				if (this.playback && this.playbackScene !== scene) this.stopReplay();
@@ -3535,18 +3589,21 @@ var Game = class {
 			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(),
-				() => oldVirtual?.dispose()
-			]) try {
-				cleanup();
-			} catch (error) {
-				this.report(error);
+			try {
+				this.pointers.routing.setScene(this.channelFor(scene), canvas);
+				this.element.append(ui.element);
+			} finally {
+				for (const cleanup of [
+					() => oldPrepared?.dispose(),
+					() => oldUI?.dispose(),
+					() => oldCanvas?.dispose(),
+					() => oldVirtual?.dispose()
+				]) try {
+					cleanup();
+				} catch (error) {
+					this.report(error);
+				}
 			}
 			this.assertAlive();
 			this.previousTime = void 0;
@@ -3791,7 +3848,7 @@ var Game = class {
 		this.defaultCanvas = void 0;
 		this.defaultUI.length = 0;
 		this.scenes.clear();
-		this.pendingScenes.clear();
+		this.pendingScene = void 0;
 	}
 };
 function validFontFamily(value) {