rootandClaude Opus 5
631cf54c72
buildStructBlock only covered structs, so a placed instance drew numbers,
text, bools and lists through createFieldRow on a 64 px name column while
its struct block sat on the asset's grid below it. variableRows.ts now
builds the row for every variable kind on both sides; the edit option
decides what the owner may change (asset: rename, x, item kind; instance:
revert and push). Label and Button take a fixed width so the mark column
no longer shifts names when a list shows its item-kind picker.
The two structFields calls that became dead with 9f48257 are gone. The
e2e steps locate the Enabled toggle through __gm.inspectorField instead
of clicking a fixed offset from its label.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
291 lines
14 KiB
TypeScript
291 lines
14 KiB
TypeScript
import { type Application, Color, type ColorSource, type Container, Rectangle, Text } from 'pixi.js';
|
||
import { resolveObjects } from '../core/model/instance';
|
||
import { findObjectHolder } from '../core/model/Project';
|
||
import { activeDrag, Button, ui, Widget } from '../ui';
|
||
import { textureLibrary } from '../viewport/TextureLibrary';
|
||
import type { CentreTab, Editor } from './Editor';
|
||
import { currentImagePicker } from './texture/ImagePicker';
|
||
import type { EditorState } from './state';
|
||
|
||
/**
|
||
* Installs `window.__gm`, which the check scripts in tools/ use to find widgets by their
|
||
* visible text and to read editor state.
|
||
*/
|
||
export function installDebugHook(app: Application, state: EditorState, editor: Editor): void {
|
||
const { viewport, gameView, graphEditor, textureEditor, containerEditor, hierarchy, assets, inspector } =
|
||
editor;
|
||
const centreOf = (widget: { getGlobalPosition(): { x: number; y: number }; w: number; h: number }) => {
|
||
const p = widget.getGlobalPosition();
|
||
return { x: p.x + widget.w / 2, y: p.y + widget.h / 2 };
|
||
};
|
||
/** Centre of the first (or, with `last`, the topmost/last-drawn) visible text equal to `text`. */
|
||
const locate = (text: string, last = false): { x: number; y: number } | null => {
|
||
let found: Text | null = null;
|
||
const walk = (node: Container): void => {
|
||
if ((found && !last) || !node.visible) return;
|
||
if (node instanceof Text && node.text === text) {
|
||
found = node;
|
||
return;
|
||
}
|
||
for (const child of node.children) walk(child);
|
||
};
|
||
walk(app.stage);
|
||
// TypeScript does not track the assignment inside `walk`, hence the disable and the cast.
|
||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||
if (!found) return null;
|
||
const node = found as Text;
|
||
const p = node.getGlobalPosition();
|
||
return { x: p.x + node.width / 2, y: p.y + node.height / 2 };
|
||
};
|
||
/** Fill colour of a visible text, as `#rrggbb` – what tells an override label from a plain one. */
|
||
const textColor = (text: string): string | null => {
|
||
let found: string | null = null;
|
||
const walk = (node: Container): void => {
|
||
if (found !== null || !node.visible) return;
|
||
if (node instanceof Text && node.text === text) {
|
||
found = new Color(node.style.fill as ColorSource).toHex();
|
||
return;
|
||
}
|
||
for (const child of node.children) walk(child);
|
||
};
|
||
walk(app.stage);
|
||
return found;
|
||
};
|
||
/**
|
||
* Centre of the control of an inspector row, addressed by its label. A row aligns its label to a
|
||
* *minimum* width, so a label wider than the column pushes its control right – which is why a
|
||
* fixed offset from the label's own text is the wrong way to click one.
|
||
*/
|
||
const fieldOf = (label: string): { x: number; y: number; left: number } | null => {
|
||
let found: Text | null = null;
|
||
const walk = (node: Container): void => {
|
||
if (found !== null || !node.visible) return;
|
||
if (node instanceof Text && node.text === label) {
|
||
found = node;
|
||
return;
|
||
}
|
||
for (const child of node.children) walk(child);
|
||
};
|
||
walk(app.stage);
|
||
// TypeScript does not track the assignment inside `walk`, hence the cast.
|
||
let owner: Container | null = (found as Text | null)?.parent ?? null;
|
||
while (owner && !(owner instanceof Widget)) owner = owner.parent;
|
||
const row = owner?.parent;
|
||
if (!row || !owner) return null;
|
||
const control = row.children[row.children.indexOf(owner) + 1];
|
||
if (!(control instanceof Widget)) return null;
|
||
return { ...centreOf(control), left: control.getGlobalPosition().x };
|
||
};
|
||
/**
|
||
* The visible text of the overlay layer, in drawing order – everything an open popup shows.
|
||
* Menus hide filtered-out entries, so this is also what a search box currently leaves.
|
||
*/
|
||
const overlayTexts = (): string[] => {
|
||
const out: string[] = [];
|
||
const walk = (node: Container): void => {
|
||
if (!node.visible) return;
|
||
if (node instanceof Text) {
|
||
if (node.text) out.push(node.text);
|
||
return;
|
||
}
|
||
for (const child of node.children) walk(child);
|
||
};
|
||
walk(ui().overlay);
|
||
return out;
|
||
};
|
||
/**
|
||
* Visible texts drawn wider than the widget that owns them. The owner's box is its declared
|
||
* `w`/`h`, not `getBounds()`: a Pixi container's bounds are the union of its children –
|
||
* including the overflowing text – so every overflow would measure as zero.
|
||
*/
|
||
const textOverflows = (all = false): { text: string; owner: string; over: number }[] => {
|
||
const out: { text: string; owner: string; over: number }[] = [];
|
||
const walk = (node: Container, owner: Widget | null, clipped: boolean): void => {
|
||
if (!node.visible) return;
|
||
const isWidget = node instanceof Widget;
|
||
const box = isWidget ? node : owner;
|
||
// A mask further up does not excuse a label spilling out of its own control, so the
|
||
// question restarts at every widget. `Boolean`, not `!== null`: Pixi's mask getter
|
||
// returns `undefined` when nothing masks.
|
||
const masked = (isWidget ? false : clipped) || Boolean(node.mask);
|
||
if (node instanceof Text) {
|
||
if (!box || !node.text || (masked && !all)) return;
|
||
const text = node.getBounds();
|
||
const origin = box.getGlobalPosition();
|
||
const over = Math.max(text.x + text.width - (origin.x + box.w), origin.x - text.x);
|
||
if (over > 1 || all) {
|
||
out.push({ text: node.text, owner: box.constructor.name, over: Math.round(over) });
|
||
}
|
||
return;
|
||
}
|
||
for (const child of node.children) walk(child, box, masked);
|
||
};
|
||
walk(app.stage, null, false);
|
||
return out;
|
||
};
|
||
/**
|
||
* The counterpart of `textOverflows`: buttons whose label was shortened away to nothing, which
|
||
* leaves a control that says nothing at all. An empty `Text` is invisible to the overflow walk.
|
||
*/
|
||
const labelsDropped = (): { text: string; owner: string; w: number }[] => {
|
||
const out: { text: string; owner: string; w: number }[] = [];
|
||
const walk = (node: Container): void => {
|
||
if (!node.visible) return;
|
||
if (node instanceof Button && node.text && !node.shownText) {
|
||
out.push({ text: node.text, owner: node.constructor.name, w: node.w });
|
||
}
|
||
for (const child of node.children) walk(child);
|
||
};
|
||
walk(app.stage);
|
||
return out;
|
||
};
|
||
/** Screen rectangle of the open popup (the backdrop is not a widget), or null when none is. */
|
||
const overlayRect = (): { x: number; y: number; w: number; h: number } | null => {
|
||
const popups = ui().overlay.children.filter((node): node is Widget => node instanceof Widget);
|
||
const popup = popups[popups.length - 1];
|
||
if (!popup) return null;
|
||
const p = popup.getGlobalPosition();
|
||
return { x: p.x, y: p.y, w: popup.w, h: popup.h };
|
||
};
|
||
/**
|
||
* A holder's objects the way the editor sees them: the content of placed containers is resolved
|
||
* from the template, so it is nowhere in `holder.objects` (see `model/instance.ts`).
|
||
*/
|
||
const objectsOf = (holderId: string) => {
|
||
const holder = findObjectHolder(state.project, holderId);
|
||
return holder ? resolveObjects(state.project, holder) : [];
|
||
};
|
||
(window as unknown as { __gm: unknown }).__gm = {
|
||
state,
|
||
objectsOf,
|
||
sceneObjects: () => (state.activeScene ? objectsOf(state.activeScene.id) : []),
|
||
locate,
|
||
inspectorField: fieldOf,
|
||
inspectorInfo: () => inspector.debugInfo(),
|
||
textColor,
|
||
overlayTexts,
|
||
overlayRect,
|
||
textOverflows,
|
||
labelsDropped,
|
||
viewportCenter: () => centreOf(viewport),
|
||
viewportInfo: () => viewport.debugInfo(),
|
||
/** Where a dragged asset would land in the Scene tab, and why not when it may not. */
|
||
dropPreview: () => viewport.dropInfo(),
|
||
/** An asset row by id – two assets can share a name with the container picker's label. */
|
||
/** The panel-to-view drag in flight, if any – a drop that never started looks like a refused one. */
|
||
dragPayload: () => activeDrag(),
|
||
assetRow: (id: string) => assets.rowGlobal(id),
|
||
assetRowColor: (id: string) => assets.rowColor(id),
|
||
gameInfo: () => gameView.debugInfo(),
|
||
/** Selection outlines in the Scene tab: a switched-off object is invisible but still framed. */
|
||
gizmos: () => viewport.gizmoInfo(),
|
||
layerOf: (id: string) => viewport.layerOf(id),
|
||
drawOrder: () => viewport.drawOrder(),
|
||
objectScreen: (id: string) => viewport.objectScreen(id),
|
||
objectRect: (id: string) => viewport.objectRect(id),
|
||
/** The same for the Game tab – through the camera, so what the player sees. */
|
||
gameScreen: (id: string) => gameView.objectScreen(id),
|
||
gameCenter: () => centreOf(gameView),
|
||
graph: {
|
||
current: () => graphEditor.currentAssetId,
|
||
portAt: (nodeId: string, port: string, isOutput: boolean) =>
|
||
graphEditor.canvas.portGlobal(nodeId, port, isOutput),
|
||
nodeAt: (nodeId: string) => graphEditor.canvas.nodeGlobal(nodeId),
|
||
nodeLabel: (nodeId: string) => graphEditor.canvas.nodeLabel(nodeId),
|
||
nodeProblem: (nodeId: string) => graphEditor.canvas.nodeProblem(nodeId),
|
||
nodeSettings: (nodeId: string) => graphEditor.canvas.nodeSettings(nodeId),
|
||
/** Drawn rectangles on screen: what "fit" has to keep inside `canvasRect`. */
|
||
nodeRect: (nodeId: string) => graphEditor.canvas.nodeRect(nodeId),
|
||
canvasRect: () => graphEditor.canvas.canvasRect(),
|
||
selected: () => state.selectedNodeIds,
|
||
dropTarget: () => graphEditor.canvas.pendingDropTarget(),
|
||
danglingEdge: () => graphEditor.canvas.danglingEdgeVisible(),
|
||
edgeDrawn: (edgeId: string) => graphEditor.canvas.edgeDrawn(edgeId),
|
||
foldMark: (edgeId: string, isOutput: boolean) => graphEditor.canvas.foldMarkGlobal(edgeId, isOutput),
|
||
foldMarks: () => graphEditor.canvas.foldMarksDrawn(),
|
||
// The canvas, not the whole tab: a centre measured through the header sits above the
|
||
// drawing area.
|
||
center: () => centreOf(graphEditor.canvas),
|
||
pickerWidth: () => graphEditor.pickerWidth,
|
||
snapping: () => graphEditor.canvas.snapEnabled,
|
||
},
|
||
/** The open image picker: what it offers, what is picked, and where a tile sits. */
|
||
imagePicker: () => currentImagePicker()?.debugInfo() ?? null,
|
||
imagePickerTile: (file: string) => currentImagePicker()?.tileGlobal(file) ?? null,
|
||
texture: {
|
||
current: () => textureEditor.currentAssetId,
|
||
pickerWidth: () => textureEditor.pickerWidth,
|
||
/** Where an image pixel of the shown sheet sits on screen (frames are dragged in image coordinates). */
|
||
pointAt: (x: number, y: number) => textureEditor.imageToScreen(x, y),
|
||
},
|
||
container: {
|
||
current: () => containerEditor.currentAssetId,
|
||
pickerWidth: () => containerEditor.pickerWidth,
|
||
center: () => centreOf(containerEditor),
|
||
rect: () => containerEditor.canvasRect(),
|
||
/** Where a template object is drawn, so a check can click or sample it. */
|
||
objectScreen: (id: string) => containerEditor.objectScreen(id),
|
||
dropPreview: () => containerEditor.dropInfo(),
|
||
},
|
||
list: {
|
||
info: () => editor.listEditor.debugInfo(),
|
||
/** Where an item's widget sits, so a check can click it – a number field has no findable text. */
|
||
fieldAt: (index: number, field = '') => editor.listEditor.fieldAt(index, field),
|
||
},
|
||
world: () => editor.worldSnapshot(),
|
||
playInfo: () => editor.playInfo(),
|
||
/** Behaviors running without Play (`Run in editor`), and how long they have been at it. */
|
||
editorRun: () => editor.editorRunInfo(),
|
||
/** Rows the hierarchy shows – collapsed subtrees are not in here. */
|
||
hierarchyOrder: () => hierarchy.rowOrder(),
|
||
hierarchyChevron: (id: string) => hierarchy.chevronPosition(id),
|
||
/** Centre of a hierarchy row, clear of the chevron – for clicks that must hit the row itself. */
|
||
hierarchyRow: (id: string) => hierarchy.rowPosition(id),
|
||
hierarchyRowColor: (id: string) => hierarchy.rowColor(id),
|
||
hierarchyExpandAll: () => hierarchy.expandAll(),
|
||
hierarchyCollapseAll: () => hierarchy.collapseAll(),
|
||
/** The colour actually on screen at a point, as `#rrggbb` – what was drawn, not what the model says. */
|
||
pixelAt: (x: number, y: number) => {
|
||
const { pixels } = app.renderer.extract.pixels({
|
||
target: app.stage,
|
||
frame: new Rectangle(x, y, 1, 1),
|
||
});
|
||
const hex = (value: number | undefined) => (value ?? 0).toString(16).padStart(2, '0');
|
||
return `#${hex(pixels[0])}${hex(pixels[1])}${hex(pixels[2])}`;
|
||
},
|
||
/**
|
||
* What the GPU was actually told about a picture's filter, next to what the model asked for.
|
||
* The two can disagree – that is the difference between a wrong value and a value that never
|
||
* reached the sampler – and only the driver can be asked for the second one.
|
||
*/
|
||
textureFilter: (file: string) => {
|
||
const texture = textureLibrary.peek(file);
|
||
if (!texture) return null;
|
||
const source = texture.source;
|
||
const renderer = app.renderer as unknown as {
|
||
gl?: WebGL2RenderingContext;
|
||
uid: number;
|
||
texture: { bindSource(source: unknown, location: number): void };
|
||
};
|
||
const gl = renderer.gl;
|
||
const uploaded = Boolean(
|
||
(source as unknown as { _gpuData: Record<number, unknown> })._gpuData[renderer.uid],
|
||
);
|
||
let magFilter = 0;
|
||
if (gl) {
|
||
// Through Pixi rather than a raw `bindTexture`, so its idea of what is bound stays true.
|
||
renderer.texture.bindSource(source, 0);
|
||
magFilter = gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER) as number;
|
||
}
|
||
return {
|
||
scaleMode: source.scaleMode,
|
||
gpu: magFilter === gl?.NEAREST ? 'nearest' : magFilter === gl?.LINEAR ? 'linear' : 'none',
|
||
uploaded,
|
||
};
|
||
},
|
||
fps: () => editor.fps,
|
||
tab: () => editor.tab,
|
||
showTab: (tab: CentreTab) => editor.showTab(tab),
|
||
};
|
||
}
|