@volter/editor-game 0.5.67 → 0.5.68

package/src/host/authoring/pixi-creatable-kinds.ts

@@ -0,0 +1,62 @@
+/**
+ * The display objects a canvas world creates, as its create dialog lists them: Pixi's own class
+ * tree (every one of them is a Container) and a line on what each is, from Pixi's API reference.
+ */
+
+import type { CreatableKind } from '@volter/editor-project/adapter';
+
+export const PIXI_CREATABLE_KINDS: readonly CreatableKind[] = [
+  {
+    kind: 'container',
+    label: 'Container',
+    description: 'A general-purpose display object that holds children, and transforms and draws them together.',
+  },
+  {
+    kind: 'sprite',
+    label: 'Sprite',
+    extends: 'container',
+    description: 'Draws one texture: an image, or a frame of a spritesheet.',
+  },
+  {
+    kind: 'animatedSprite',
+    label: 'AnimatedSprite',
+    extends: 'sprite',
+    description: 'Plays a list of textures as frames at an animation speed.',
+  },
+  {
+    kind: 'tilingSprite',
+    label: 'TilingSprite',
+    extends: 'container',
+    description: 'Repeats one texture across its width and height, scrollable by its tile position.',
+  },
+  {
+    kind: 'nineSliceSprite',
+    label: 'NineSliceSprite',
+    extends: 'container',
+    description: 'Stretches a texture without stretching its corners: the nine-slice panel of a UI.',
+  },
+  {
+    kind: 'text',
+    label: 'Text',
+    extends: 'container',
+    description: 'Draws a string with a text style (font, size, fill, wrapping).',
+  },
+  {
+    kind: 'bitmapText',
+    label: 'BitmapText',
+    extends: 'container',
+    description: 'Draws a string from a bitmap font: fast to change every frame.',
+  },
+  {
+    kind: 'htmlText',
+    label: 'HTMLText',
+    extends: 'container',
+    description: 'Draws a string of HTML and CSS markup.',
+  },
+  {
+    kind: 'graphics',
+    label: 'Graphics',
+    extends: 'container',
+    description: 'Draws vector shapes (rectangles, circles, paths) from its draw callback.',
+  },
+];

package/src/host/authoring/pixi-source-write-target.ts

@@ -42,6 +42,7 @@ import {
   transform2DChanged,
 } from './pixi-transform-channels';
 import { createStructWritePipe, type StructOpOptions } from './struct-write-pipe';
+import { PIXI_CREATABLE_KINDS } from './pixi-creatable-kinds';
 import {
   clipboardOutcome,
   LIVE_ONLY_ACK,
@@ -102,6 +103,7 @@ const PANEL_OWNED_PROPS = new Set([
   'scale-y',
   'label',
   'visible',
+  'skew',
 ]);
 /** Props the drop snippet writes itself. */
 const DROP_SNIPPET_PROPS = new Set(['x', 'y', 'name', 'children']);
@@ -112,13 +114,14 @@ const CREATE_SNIPPETS: Readonly<Record<string, string>> = {
   sprite: '<pixiSprite label="Sprite" />',
   text: '<pixiText label="Text" text="Text" />',
   graphics: '<pixiGraphics label="Graphics" />',
+  animatedSprite: '<pixiAnimatedSprite label="AnimatedSprite" textures={[Texture.WHITE]} width={64} height={64} />',
+  tilingSprite: '<pixiTilingSprite label="TilingSprite" texture={Texture.WHITE} width={100} height={100} />',
+  nineSliceSprite: '<pixiNineSliceSprite label="NineSliceSprite" texture={Texture.WHITE} width={100} height={100} />',
+  bitmapText: '<pixiBitmapText label="BitmapText" text="BitmapText" />',
+  htmlText: '<pixiHTMLText label="HTMLText" text="HTMLText" />',
 };
-const CREATE_LABELS: Readonly<Record<string, string>> = {
-  container: 'Container',
-  sprite: 'Sprite',
-  text: 'Text',
-  graphics: 'Graphics',
-};
+/** A kind whose snippet names Pixi's `Texture`, which the file must then import. */
+const TEXTURE_SNIPPET_KINDS = new Set(['animatedSprite', 'tilingSprite', 'nineSliceSprite']);
 
 function isHiddenProp(name: string): boolean {
   return HIDDEN_PROPS.has(name) || /^on[A-Z]/.test(name) || name.startsWith('__vgai');
@@ -217,6 +220,10 @@ export function createSourceCanvasWriteTarget(
   const dynamicPaths = new Set<string>();
   /** Pre-gesture 2D poses, one per id currently under a drag. */
   const editStarts = new Map<string, Transform2DValue>();
+  const pendingOrigins = new Map<
+    string,
+    { kind: 'pivot' | 'anchor'; value: readonly [number, number]; before: readonly [number, number] }
+  >();
   let commitQueue = Promise.resolve();
 
   const oidOf = (id: string): string | null => {
@@ -464,10 +471,16 @@ export function createSourceCanvasWriteTarget(
     const channels = (['position', 'rotation', 'scale'] as const).filter((channel) =>
       transform2DChanged(channel, before, after),
     );
-    if (channels.length === 0) return false;
-
-    const revert = (channel: TransformChannel): void => {
-      if (channel === 'position') a2d.setTransform(id, { position: before.position });
+    // A moved origin (pivot or anchor) is written with the position that compensates it.
+    const origin = pendingOrigins.get(id);
+    pendingOrigins.delete(id);
+    if (channels.length === 0 && !origin) return false;
+
+    const revert = (channel: TransformChannel | 'origin'): void => {
+      if (channel === 'origin') {
+        const display = a2d.displayObject(id) as (Container & Record<string, unknown>) | null;
+        if (display && origin) display[origin.kind] = { x: origin.before[0], y: origin.before[1] };
+      } else if (channel === 'position') a2d.setTransform(id, { position: before.position });
       else if (channel === 'rotation') a2d.setTransform(id, { rotation: before.rotation });
       else a2d.setTransform(id, { scale: before.scale });
       notify();
@@ -495,7 +508,7 @@ export function createSourceCanvasWriteTarget(
     const instance = componentIdentityOf(id);
     const channelBlocked = (channel: TransformChannel): boolean =>
       componentOwnedChannel(id, channel, attrs, after);
-    const writes: Array<{ channel: TransformChannel; prop: string; value: string }> = [];
+    const writes: Array<{ channel: TransformChannel | 'origin'; prop: string; value: string }> = [];
     for (const channel of channels) {
       if (channelBlocked(channel)) {
         dynamicPaths.add(`${id}|${channel}`);
@@ -532,6 +545,16 @@ export function createSourceCanvasWriteTarget(
       }
       for (const write of plan.writes) writes.push({ channel, ...write });
     }
+    if (origin) {
+      if (instance && channelBlocked('position')) revert('origin');
+      else {
+        writes.push({
+          channel: 'origin',
+          prop: origin.kind,
+          value: `{ x: ${formatSourceNumber(origin.value[0])}, y: ${formatSourceNumber(origin.value[1])} }`,
+        });
+      }
+    }
     if (writes.length === 0) return false;
 
     let persisted = false;
@@ -543,7 +566,8 @@ export function createSourceCanvasWriteTarget(
           // must not need a trip to the text editor.
           addIfMissing: true,
           // `scale={1.5}` becomes `scale={{ x, y }}` when a gesture makes it non-uniform.
-          ...(write.prop === 'scale' ? { allowShapeUpgrade: true } : {}),
+          // The same for an origin authored as one number (`pivot={60}`).
+          ...(write.prop === 'scale' || write.channel === 'origin' ? { allowShapeUpgrade: true } : {}),
         });
         if (res.changed) {
           persisted = true;
@@ -595,6 +619,38 @@ export function createSourceCanvasWriteTarget(
 
   /** One prop edit. Answers whether a byte reached the entry TSX; every
    *  refusal has already named itself on the console before it returns. */
+  /** Godot's Node2D Skew, one axis in degrees: Pixi's `skew` point in radians, written whole. */
+  const writeSkew = async (id: string, axis: 'x' | 'y', degrees: number): Promise<boolean> => {
+    const display = a2d.displayObject(id);
+    const oid = oidOf(id);
+    if (!display || !oid || !backend?.writeProp || !Number.isFinite(degrees)) return false;
+    const before = { x: display.skew.x, y: display.skew.y };
+    const radians = (degrees * Math.PI) / 180;
+    const next = { x: axis === 'x' ? radians : before.x, y: axis === 'y' ? radians : before.y };
+    display.skew.set(next.x, next.y);
+    notify();
+    const res = await backend.writeProp(
+      oid,
+      'skew',
+      // Radians to six places, so a typed angle reads back as typed (four places lose 0.003°).
+      `{ x: ${String(Number(next.x.toFixed(6)))}, y: ${String(Number(next.y.toFixed(6)))} }`,
+      { addIfMissing: true, allowShapeUpgrade: true },
+    );
+    if (!res.changed && (res.dynamic || res.error)) {
+      display.skew.set(before.x, before.y);
+      notify();
+      // biome-ignore lint/suspicious/noConsole: a refused write must say why
+      console.warn(
+        `[canvas-source ${entryPath}] skew write refused for oid "${oid}": ` +
+          `${res.dynamic ? 'dynamic expression (guarded)' : res.error} — reverting.`,
+      );
+      return false;
+    }
+    await refreshSourceState();
+    notify();
+    return res.changed;
+  };
+
   const writeJsxProp = async (
     id: string,
     path: string,
@@ -1130,12 +1186,20 @@ export function createSourceCanvasWriteTarget(
     // The new element's oid is minted server-side on the remount, so the id
     // half is '' and the ack half is this creation's own piped write — handed
     // back rather than fired `void` (see `StructuralIdWrite`).
-    create: (kind, parentId) => {
-      const snippet = CREATE_SNIPPETS[kind];
+    create: (kind, parentId, at) => {
+      // `at` arrives in the new node's parent's own space (the adapter converts it).
+      const base = CREATE_SNIPPETS[kind];
+      const snippet =
+        base && at
+          ? base.replace(/\s*\/>$/, ` x={${formatSourceNumber(at.x)}} y={${formatSourceNumber(at.y)}} />`)
+          : base;
       // Nothing was attempted (the palette is empty in both cases), so there is
       // no write to ack.
       if (!snippet || !backend?.writeStruct) return { id: '', ack: undefined };
-      if (parentId) return { id: '', ack: structOp(parentId, 'create', { snippet }) };
+      const options = TEXTURE_SNIPPET_KINDS.has(kind)
+        ? { snippet, ensureImport: { name: 'Texture', module: 'pixi.js' } }
+        : { snippet };
+      if (parentId) return { id: '', ack: structOp(parentId, 'create', options) };
       const lastRoot = a2d.roots().at(-1);
       if (!lastRoot) {
         return {
@@ -1145,15 +1209,14 @@ export function createSourceCanvasWriteTarget(
           ),
         };
       }
-      return { id: '', ack: structOp(lastRoot.id, 'create-sibling', { snippet }) };
+      return { id: '', ack: structOp(lastRoot.id, 'create-sibling', options) };
     },
     creatableKinds: (parentId) => {
       if (!backend?.writeStruct) return [];
       if (parentId && !oidOf(parentId)) return [];
       if (!parentId && a2d.roots().length === 0) return [];
-      return Object.keys(CREATE_SNIPPETS).map((kind) => ({
-        kind,
-        label: CREATE_LABELS[kind] ?? kind,
+      return PIXI_CREATABLE_KINDS.filter((entry) => CREATE_SNIPPETS[entry.kind] !== undefined).map((entry) => ({
+        ...entry,
       }));
     },
     // Returns the promise (never `void structOp(…)`): `deleteSelection`
@@ -1469,6 +1532,21 @@ export function createSourceCanvasWriteTarget(
       if (!editStarts.has(id)) editStarts.set(id, read2D(id));
     },
 
+    /**
+     * Mid-gesture origin write — see {@link CanvasWriteTarget.writeOrigin}. The live object moves
+     * now; the `pivot`/`anchor` prop is written at `endTransformEdit`, in the same gesture as the
+     * position that compensates it.
+     */
+    writeOrigin(id: string, kind: 'pivot' | 'anchor', value: readonly [number, number]): void {
+      const display = a2d.displayObject(id) as (Container & Record<string, unknown>) | null;
+      const current = display?.[kind] as { x?: unknown; y?: unknown } | undefined;
+      if (!display || typeof current?.x !== 'number' || typeof current.y !== 'number') return;
+      const before = pendingOrigins.get(id)?.before ?? ([current.x, current.y] as const);
+      display[kind] = { x: value[0], y: value[1] };
+      pendingOrigins.set(id, { kind, value, before });
+      notify();
+    },
+
     writeTransform(id: string, next: Transform2DValue): void {
       // The live tree moves first so the paused frame follows the gesture; the
       // source write happens once, at the end.
@@ -1535,6 +1613,13 @@ export function createSourceCanvasWriteTarget(
         { path: 'visible', label: 'Visible', type: 'boolean', group: 'Visibility' },
       ];
       const attrs = attrsOf(id) ?? [];
+      // Godot's Node2D Skew, in its Transform group; a skew the source computes is shown, not edited.
+      const skewAttr = attrs.find((attr) => attr.name === 'skew');
+      const skewFixed = skewAttr ? !skewAttr.isLiteral : false;
+      props.push(
+        { path: 'skew.x', label: 'Skew X (deg)', type: 'number', group: 'Transform', readonly: skewFixed },
+        { path: 'skew.y', label: 'Skew Y (deg)', type: 'number', group: 'Transform', readonly: skewFixed },
+      );
       const declared = declaredPropsOf(id);
       const attrByName = new Map(attrs.map((attr) => [attr.name, attr]));
       const names = [
@@ -1573,6 +1658,9 @@ export function createSourceCanvasWriteTarget(
       if (echoed !== undefined) return echoed;
       if (path === 'name') return display.label ?? '';
       if (path === 'visible') return display.visible;
+      if (path === 'skew.x' || path === 'skew.y') {
+        return Number((((path === 'skew.x' ? display.skew.x : display.skew.y) * 180) / Math.PI).toFixed(4));
+      }
       if (!path.startsWith('jsx.')) return undefined;
       return propValue(attrsOf(id), declaredPropsOf(id), path.slice(4));
     },
@@ -1581,6 +1669,13 @@ export function createSourceCanvasWriteTarget(
     // edit, awaited. A path this target owns no prop for performed no write and
     // returns nothing.
     set(id: string, path: string, value: unknown): void | Promise<WriteAck> {
+      if (path === 'skew.x' || path === 'skew.y') {
+        return piped(
+          () => writeSkew(id, path === 'skew.x' ? 'x' : 'y', Number(value)),
+          undefined,
+          destinationOf(id),
+        );
+      }
       const prop =
         path === 'name'
           ? 'label'

package/src/host/components/PixiIsolationSceneContent.tsx

@@ -197,7 +197,7 @@ export function PixiIsolationSceneContent({
       }}
     >
       <CanvasSceneBackdrop view={view} documentId={documentId} />
-      {adapter ? <RootSelectionOverlay adapter={adapter} view={view} transformModeAware /> : null}
+      {adapter ? <RootSelectionOverlay adapter={adapter} view={view} transformModeAware presentationId={documentId} /> : null}
       <CanvasSceneControls
         active={active}
         {...(adapter ? { adapter } : {})}

package/src/host/roots/canvas-root.tsx

@@ -307,6 +307,18 @@ function canvasWorldAdapter(
           // the host only gates/advances it.
           mountedApp.ticker.update(elapsedMs);
         },
+        // Pixi's own hit test finds only interactive objects (`eventMode` static or dynamic), so a
+        // HUD claims its buttons and lets every other point fall through to the world beneath.
+        hitTest(x: number, y: number): boolean {
+          if (disposed) return false;
+          // Pixi points its boundary at the last rendered scene inside each of its own pointer
+          // handlers; a hit test asked from outside them does the same, or finds no root.
+          const boundary = mountedApp.renderer.events.rootBoundary;
+          const rendered = mountedApp.renderer.lastObjectRendered;
+          if (!rendered) return false;
+          boundary.rootTarget = rendered;
+          return boundary.hitTest(x, y) !== null;
+        },
         resize(width: number, height: number): void {
           if (disposed) return;
           // `autoDensity: true` makes Pixi re-stamp `canvas.style.width`/

package/src/host/served-bundle-runtime-modules.ts

@@ -172,6 +172,8 @@ export const BUNDLE_RUNTIME_MODULE_LOADERS: Record<string, () => Promise<unknown
   // against the same sweep.
   '@colyseus/sdk': () => import('@colyseus/sdk'), // template main.ts
   'react-dom': () => import('react-dom'), // template main.ts
+  'pixi.js': () => import('pixi.js'), // template main.ts (a `canvas` root)
+  '@pixi/react': () => import('@pixi/react'), // template main.ts (a `canvas` root)
   // ---- Editor-citizen modules PROJECT TOOL CONTRIBUTIONS import. A
   // contribution is project source rendered inside the editor's own panels,
   // so these must resolve to the editor's LIVE modules — a second copy of the

package/src/ingest/ingest-canvas-scene-document.tsx

@@ -148,7 +148,7 @@ export function IngestCanvasSceneContent({
       }}
     >
       <CanvasSceneBackdrop view={view} documentId={documentId} />
-      <RootSelectionOverlay adapter={adapter} view={view} transformModeAware />
+      <RootSelectionOverlay adapter={adapter} view={view} transformModeAware presentationId={documentId} />
       <SurfaceStateOverlay
         explanation={surfaceExplanation}
         testId="ingest-canvas-surface-status"