@unboxy/phaser-sdk 0.2.26 → 0.2.27

package/dist/editor/EditorBridge.js

@@ -4,7 +4,7 @@ import { parseColor, spawnEntity } from '../scene/spawnEntity.js';
 import { resolveRenderScript } from '../scene/renderScripts.js';
 import { getManifest } from '../scene/SceneLoader.js';
 import { EditorOverlayScene, EDITOR_OVERLAY_KEY } from './EditorOverlayScene.js';
-import { getEditorState, setEditorActive, setSelection, } from './EditorState.js';
+import { getEditorState, setEditorActive, setSelection, getSelection, } from './EditorState.js';
 /**
  * EditorBridge wires the host (home-ui) to the iframe's Phaser game during
  * Edit mode. Manages:
@@ -52,15 +52,18 @@ function handleMessage(game, msg) {
             break;
         case 'unboxy:editor:setSelection':
             setSelection(game, msg.entityIds[0] ?? null);
+            postSelectionRect(game);
             break;
         case 'unboxy:editor:panZoom':
             applyPanZoom(game, msg);
+            postSelectionRect(game);
             break;
         case 'unboxy:editor:createEntity':
             void createEntity(game, msg.entity, msg.manifestAsset);
             break;
         case 'unboxy:editor:deleteEntity':
             deleteEntity(game, msg.entityId);
+            postSelectionRect(game);
             break;
     }
 }
@@ -164,6 +167,121 @@ function postSceneSnapshot(game) {
     });
     game[SNAPSHOT_POSTED_FLAG] = sceneFile.id;
 }
+// --- Selection rect (slice 4) ---------------------------------------------
+//
+// Emit the selected entity's DOM screen rect to the host so it can anchor
+// the ✨ button + popover next to the entity. Coalesce multiple calls
+// inside one RAF tick — Inspector spam (per-keystroke transform edits)
+// would otherwise spam the postMessage channel.
+const RECT_RAF_FLAG = '__unboxyEditorSelectionRectRafScheduled';
+function postSelectionRect(game) {
+    const bag = game;
+    if (bag[RECT_RAF_FLAG])
+        return;
+    bag[RECT_RAF_FLAG] = true;
+    // requestAnimationFrame runs after Phaser's render → bounds reflect the
+    // freshly-applied transform. Guarantees one emit per frame max.
+    if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrame(() => {
+            bag[RECT_RAF_FLAG] = false;
+            doPostSelectionRect(game);
+        });
+    }
+    else {
+        bag[RECT_RAF_FLAG] = false;
+        doPostSelectionRect(game);
+    }
+}
+function doPostSelectionRect(game) {
+    const id = getSelection(game);
+    if (!id) {
+        postToHost({ type: 'unboxy:editor:selectionRect', entityId: null, rect: null });
+        return;
+    }
+    const registry = findRegistry(game);
+    const go = registry?.byId(id);
+    if (!go) {
+        postToHost({ type: 'unboxy:editor:selectionRect', entityId: id, rect: null });
+        return;
+    }
+    const rect = computeScreenRect(game, go);
+    postToHost({ type: 'unboxy:editor:selectionRect', entityId: id, rect });
+}
+/**
+ * Compute the entity's DOM screen rect — viewport pixels relative to the
+ * iframe's top-left. The host adds the iframe's bounding rect to translate
+ * into page coords.
+ *
+ * Path: world coords → camera transform → canvas pixels → iframe pixels.
+ * Phaser's Scale.FIT may letterbox/pillarbox the canvas inside the iframe,
+ * so we factor in the canvas's parent offset too.
+ */
+function computeScreenRect(game, go) {
+    // Pull world-coord bounds — same logic the editor uses for hit-test.
+    const hitW = go.getData('editorHitWidth');
+    const hitH = go.getData('editorHitHeight');
+    const positioned = go;
+    let worldRect;
+    if (typeof hitW === 'number' && typeof hitH === 'number') {
+        worldRect = {
+            x: positioned.x - hitW / 2,
+            y: positioned.y - hitH / 2,
+            width: hitW,
+            height: hitH,
+        };
+    }
+    else {
+        const withBounds = go;
+        if (typeof withBounds.getBounds !== 'function')
+            return null;
+        const r = withBounds.getBounds();
+        worldRect = { x: r.x, y: r.y, width: r.width, height: r.height };
+    }
+    // Find the world scene's camera — it carries scrollX/Y + zoom.
+    let cam = null;
+    for (const scene of game.scene.getScenes(false)) {
+        const key = scene.scene.key;
+        if (BOOT_SCENE_KEYS.has(key))
+            continue;
+        if (key === EDITOR_OVERLAY_KEY)
+            continue;
+        if (getEntityRegistry(scene)) {
+            cam = scene.cameras.main;
+            break;
+        }
+    }
+    if (!cam)
+        return null;
+    // World → canvas pixels (relative to canvas top-left, inside Phaser's
+    // logical canvas space — i.e. the game.config width/height, NOT the
+    // scaled visible pixels).
+    const canvasX = (worldRect.x - cam.scrollX) * cam.zoom;
+    const canvasY = (worldRect.y - cam.scrollY) * cam.zoom;
+    const canvasW = worldRect.width * cam.zoom;
+    const canvasH = worldRect.height * cam.zoom;
+    // Phaser FIT scale factor — the actual rendered canvas is scaled by this
+    // ratio inside the iframe, with letterbox/pillarbox margins centered.
+    const scaleManager = game.scale;
+    const renderScale = scaleManager.displayScale.x; // x and y are equal under FIT
+    // Canvas's offset inside the iframe (CSS pixels).
+    const canvas = game.canvas;
+    let offsetX = 0;
+    let offsetY = 0;
+    // Walk the offset chain — iframe canvas is usually centered under
+    // CENTER_BOTH, so its parent has padding. getBoundingClientRect on the
+    // canvas vs the iframe document root tells us the offset.
+    if (canvas && typeof canvas.getBoundingClientRect === 'function') {
+        const r = canvas.getBoundingClientRect();
+        offsetX = r.left;
+        offsetY = r.top;
+    }
+    return {
+        x: offsetX + canvasX * renderScale,
+        y: offsetY + canvasY * renderScale,
+        width: canvasW * renderScale,
+        height: canvasH * renderScale,
+    };
+}
 function readActiveManifest(game) {
     for (const scene of game.scene.getScenes(false)) {
         const cache = scene.cache.json;
@@ -285,6 +403,10 @@ function applyEdit(game, entityId, patch) {
     if (patch.properties !== undefined) {
         go.setData('entityProperties', patch.properties);
     }
+    // If this edit moved the selected entity, the host's ✨ button + popover
+    // anchor needs the new rect. Cheap RAF-coalesced.
+    if (getSelection(game) === entityId)
+        postSelectionRect(game);
 }
 /**
  * Re-render a code-rendered entity's visual when its params change.

package/dist/index.d.ts

@@ -26,7 +26,7 @@ export { setRenderScriptRegistry, getRenderScriptRegistry, resolveRenderScript,
 export type { RenderScriptModule } from './scene/renderScripts.js';
 export { setupEditorBridge } from './editor/EditorBridge.js';
 export { EditorOverlayScene, EDITOR_OVERLAY_KEY } from './editor/EditorOverlayScene.js';
-export type { EditorEntityPatch, EditorEnterMessage, EditorExitMessage, EditorGetSceneMessage, EditorApplyEditMessage, EditorSetSelectionMessage, EditorPanZoomMessage, EditorHostToSdkMessage, EditorSceneLoadedMessage, EditorSelectionPickedMessage, EditorDragEndMessage, EditorShortcutMessage, EditorCreateEntityMessage, EditorDeleteEntityMessage, EditorSdkToHostMessage, } from './protocol.js';
+export type { EditorEntityPatch, EditorEnterMessage, EditorExitMessage, EditorGetSceneMessage, EditorApplyEditMessage, EditorSetSelectionMessage, EditorPanZoomMessage, EditorHostToSdkMessage, EditorSceneLoadedMessage, EditorSelectionPickedMessage, EditorDragEndMessage, EditorShortcutMessage, EditorCreateEntityMessage, EditorDeleteEntityMessage, EditorSelectionRectMessage, EditorSdkToHostMessage, } from './protocol.js';
 export { SCHEMA_VERSION, } from './scene/types.js';
 export type { Manifest, SceneRef, HudRef, AssetRecord, AssetKind, SceneType, SceneFile, WorldScene, HudScene, WorldSceneConfig, CameraConfig, WorldEntity, WorldEntityKind, NonGroupWorldEntity, SpriteEntity, PrimitiveEntity, CodeRenderedEntity, GroupEntity, TilemapEntity, TriggerEntity, TriggerShape, WorldVisual, SpriteVisual, PrimitiveVisual, PrimitiveRectVisual, PrimitiveCircleVisual, CodeRenderedVisual, Transform, Anchor, AnchorSide, } from './scene/types.js';
 export { PROTOCOL_VERSION, type HelloMessage, type InitMessage, type RpcRequestMessage, type RpcResultOk, type RpcResultError, type HostToSdkMessage, type SdkToHostMessage, type RpcErrorPayload, type RpcMethod, type SavesGetParams, type SavesGetResult, type SavesSetParams, type SavesSetResult, type SavesDeleteParams, type SavesDeleteResult, type SavesListResult, type GameDataGetParams, type GameDataGetResult, type GameDataSetParams, type GameDataSetResult, type GameDataDeleteParams, type GameDataDeleteResult, type GameDataListResult, type RealtimeGetTokenParams, type RealtimeGetTokenResult, } from './protocol.js';

package/dist/protocol.d.ts

@@ -179,7 +179,31 @@ export interface EditorShortcutMessage {
     type: 'unboxy:editor:shortcut';
     action: 'undo' | 'redo' | 'save' | 'delete';
 }
-export type EditorSdkToHostMessage = EditorSceneLoadedMessage | EditorSelectionPickedMessage | EditorDragEndMessage | EditorShortcutMessage;
+/**
+ * The selected entity's DOM screen rect (slice 4 — popover anchoring).
+ *
+ * Emitted on selection change, drag-end, and pan/zoom — NOT per frame. The
+ * host uses this to anchor the floating ✨ button + InlineAIPopover next
+ * to the entity. Coords are relative to the iframe element (not the
+ * entity's world coords); the host adds the iframe's own bounding rect to
+ * land in viewport space. Sent with `null` when nothing is selected, so
+ * the host can hide the ✨ button.
+ *
+ * Slice 4 only handles single-select. Multi-select (slice 4.5) will pass
+ * the union bounding box.
+ */
+export interface EditorSelectionRectMessage {
+    type: 'unboxy:editor:selectionRect';
+    entityId: string | null;
+    /** null when nothing is selected. */
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+}
+export type EditorSdkToHostMessage = EditorSceneLoadedMessage | EditorSelectionPickedMessage | EditorDragEndMessage | EditorShortcutMessage | EditorSelectionRectMessage;
 export type RpcMethod = 'saves.get' | 'saves.set' | 'saves.delete' | 'saves.list' | 'gameData.get' | 'gameData.set' | 'gameData.delete' | 'gameData.list' | 'realtime.getToken';
 export interface SavesGetParams {
     key: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unboxy/phaser-sdk",
-  "version": "0.2.26",
+  "version": "0.2.27",
   "description": "Unboxy Phaser 3 SDK — game infrastructure for the Unboxy platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",