rootandClaude Opus 5
8f92a06c84
Split GraphCanvas (1076 -> 831 lines) into EdgeLayer and graphMenus; the port and marker menus were the same list and are now one function. Value specs of the inspector and the list tab share valueSpecs.ts, and the remaining copies (compound commands, type glyphs, typed asset lookup, name rule, play/editor world setup, marquee) are merged. Four copies had already drifted apart; merging them fixes: - "Disconnect N links" in the port menu is one undo step, not N - "+ Add collider" is hidden on a placed container instance, as in the hierarchy menu, instead of always failing - a bool property coerced from the text "false" becomes false - a port command on an unknown node type reports instead of crashing Comment-only edits leave the bundle byte-identical. README corrected in 35 places (step limit, jump-run clock, suite duration, 409 body, ...). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import { Container, Graphics, Text } from 'pixi.js';
|
||
import { Theme, textStyle } from './Theme';
|
||
import { ui } from './UIContext';
|
||
|
||
/** What is being dragged. `kind` lets a drop target ignore payloads it does not take. */
|
||
export interface DragPayload {
|
||
kind: string;
|
||
id: string;
|
||
}
|
||
|
||
/** Offset of the ghost from the pointer, so the cursor keeps a clear view of the drop point. */
|
||
const GHOST_OFFSET = 14;
|
||
|
||
interface Session {
|
||
payload: DragPayload;
|
||
ghost: Container;
|
||
move: () => void;
|
||
stop: () => void;
|
||
}
|
||
|
||
let session: Session | null = null;
|
||
const listeners = new Set<() => void>();
|
||
|
||
/**
|
||
* A drag that left its source widget; whoever is under the pointer reads `activeDrag()` on `pointerup`.
|
||
* The session ends via a stage listener, which fires last, so a drop target still sees the payload.
|
||
*/
|
||
export function startDrag(payload: DragPayload, label: string): void {
|
||
endDrag();
|
||
const { app, overlay } = ui();
|
||
const ghost = buildGhost(label);
|
||
overlay.addChild(ghost);
|
||
|
||
const move = (): void => {
|
||
const p = app.renderer.events.pointer.global;
|
||
ghost.position.set(p.x + GHOST_OFFSET, p.y + GHOST_OFFSET);
|
||
};
|
||
const stop = (): void => endDrag();
|
||
session = { payload, ghost, move, stop };
|
||
move();
|
||
|
||
app.stage.on('globalpointermove', move);
|
||
app.stage.on('pointerup', stop);
|
||
app.stage.on('pointerupoutside', stop);
|
||
notify();
|
||
}
|
||
|
||
export function activeDrag(): DragPayload | null {
|
||
return session?.payload ?? null;
|
||
}
|
||
|
||
export function endDrag(): void {
|
||
if (!session) return;
|
||
const { ghost, move, stop } = session;
|
||
session = null;
|
||
const { app } = ui();
|
||
app.stage.off('globalpointermove', move);
|
||
app.stage.off('pointerup', stop);
|
||
app.stage.off('pointerupoutside', stop);
|
||
ghost.destroy({ children: true });
|
||
notify();
|
||
}
|
||
|
||
/** Runs whenever a drag starts or ends – a hover preview uses it to clear itself. */
|
||
export function onDragChange(fn: () => void): void {
|
||
listeners.add(fn);
|
||
}
|
||
|
||
function notify(): void {
|
||
for (const fn of listeners) fn();
|
||
}
|
||
|
||
function buildGhost(label: string): Container {
|
||
const ghost = new Container();
|
||
ghost.eventMode = 'none';
|
||
ghost.alpha = 0.85;
|
||
const text = new Text({ text: label, style: textStyle('body') });
|
||
const box = new Graphics()
|
||
.roundRect(0, 0, text.width + 16, Theme.rowHeight, 4)
|
||
.fill(Theme.colors.panel)
|
||
.stroke({ width: 1, color: Theme.colors.accent });
|
||
text.position.set(8, (Theme.rowHeight - text.height) / 2);
|
||
ghost.addChild(box, text);
|
||
return ghost;
|
||
}
|