root
2218046738
Ein ausgeschaltetes Objekt zeichnet nichts, verschwand bisher aber auch aus der Auswahl - im Panel angeklickt blieb der Viewport leer, es gab kein Anzeichen, wo es liegt. Der Rahmen kommt jetzt, gedimmt auf 45 %, damit er sich nicht wie eine fehlgeschlagene Zeichnung liest. Ziehen bleibt aus: der Node ist weiterhin nicht interaktiv. Dazu __gm.gizmos() als Testhaken - Gizmos waren vorher gar nicht prüfbar. Es meldet das alpha, das wirklich in den Strich geht, kein daneben abgeleitetes Flag.
290 lines
14 KiB
TypeScript
290 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 } | 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];
|
||
return control instanceof Widget ? centreOf(control) : null;
|
||
};
|
||
/**
|
||
* 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),
|
||
};
|
||
}
|