Ping an asset from its inspector link instead of selecting it (#221)
game-maker / gate (push) Successful in 2m52s
game-maker / suite (push) Successful in 9m2s

A single click on an asset link used to select the asset. That swapped
the inspector over to the asset, so the object being edited was gone
and the second click of a double-click landed on a different row. A
click now pings the asset in the asset panel, like Unity does in its
Project window, and a double-click opens it.

- state.pingAsset(id) emits a new `ping` event. It runs no command and
  leaves the selection alone, like openAsset.
- ListView.ping(id) draws an accent overlay on the row. It stays full
  for 200 ms and is gone after 1 s, driven by onFrame. destroy cancels
  the animation.
- The asset panel expands the group, scrolls to the row and pings it.
- The capture listener and followedLink in the inspector are gone.
  The inspector is no longer rebuilt, so pressCount on the label is
  enough. followsPress and pressOf are no longer exported from ui/.
- The "Asset" and "Part of" rows of a scene object were a ghost button
  that selected the asset. They are now a link label with the same
  ping and open behaviour, next to a read-only field with the name.
- The link logic lives in linkLabel() in fieldFactory.ts. createFieldRow
  and the asset row share it.
- TextField gets a readOnly option: no focus, no caret, no hover.
- New hook __gm.assetPing(). inspectorLink also reports the field
  next to the label (value, readOnly).

Findings:
- Renaming an asset while its object was selected left the old name
  in the inspector. This was already the case with the old button.
  The refresh now updates the name.

Tests:
- ./check.sh: 151 files, 2228 tests, CHECK EXIT 0 (before 150 / 2226).
  New: tests/ui/list-ping.test.ts for pingAlpha and pingAsset.
- e2e 1-16,28 on the final build: ALL PASSED, 575 checks.
  28l-ii has 9 checks instead of 5.
- Counter-checks, each failing exactly at its check: ping also selects,
  no follow-up frame (alpha stays 0.55), inspector never opens, field
  takes focus, name not refreshed, label not a link.
- Check total 1345, calculated. CI last counted 1336 at fd6af84.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Opus 5.5 committed 2026-09-23 17:55:31 +02:00
1 parent 1aae97b335
commit 2cf72022eb
12 files changed
+282 -79

No files matched your search

+1 -1
View File
@@ -70,5 +70,5 @@ export {
rgbToHsv,
toHex,
} from './color';
export { followsPress, type Press, pressCount, pressOf } from './clicks';
export { pressCount } from './clicks';
export { drawSvg, tintSvg } from './svg';
+65 -2
View File
@@ -1,6 +1,7 @@
import { type FederatedPointerEvent, Graphics, Text } from 'pixi.js';
import { pressCount } from '../clicks';
import { centreY } from '../math';
import { cancelFrameWork, onFrame } from '../render';
import { Theme, textStyle } from '../Theme';
import { type Size, Widget } from '../Widget';
import { ListRow } from './ListRow';
@@ -32,6 +33,24 @@ export interface ListItem {
/** Pixels of travel before a press turns into a drag. */
const DRAG_THRESHOLD = 4;
/** How long a pinged row glows. */
export const PING_MS = 1000;
/** Opacity of the glow at its brightest. */
const PING_ALPHA = 0.55;
/**
* Opacity of a ping `elapsed` ms after it started: full for the first fifth, so the eye finds the
* row, then fading out to nothing at `PING_MS`.
*/
export function pingAlpha(elapsed: number): number {
const hold = PING_MS / 5;
if (elapsed < 0 || elapsed >= PING_MS) return 0;
if (elapsed <= hold) return PING_ALPHA;
return PING_ALPHA * (1 - (elapsed - hold) / (PING_MS - hold));
}
let instances = 0;
/** Modifier keys held while a row was clicked. */
export interface PickModifiers {
/** Ctrl or ⌘. */
@@ -86,13 +105,19 @@ export class ListView extends Widget {
emptyText = 'Nothing here yet';
private readonly emptyLabel = new Text({ text: '', style: textStyle('muted') });
private readonly dropMarker = new Graphics();
private readonly pingMarker = new Graphics();
private drag: DragState | null = null;
/** The row that glows after `ping`, and when it started. */
private pinged: { id: string; start: number } | null = null;
private readonly frameKey = `list-ping:${(instances += 1)}`;
constructor() {
super();
this.focusable = true;
this.dropMarker.eventMode = 'none';
this.addChild(this.emptyLabel, this.dropMarker);
this.pingMarker.eventMode = 'none';
this.pingMarker.visible = false;
this.addChild(this.emptyLabel, this.pingMarker, this.dropMarker);
this.on('pointerdown', (e: FederatedPointerEvent) => {
if (e.target === this) this.select(null);
});
@@ -114,7 +139,7 @@ export class ListView extends Widget {
this.addChild(row);
return row;
});
this.addChild(this.dropMarker); // keep the marker above the rows
this.addChild(this.pingMarker, this.dropMarker); // keep the markers above the rows
if (this.selectedId && !items.some((i) => i.id === this.selectedId)) this.selectedId = null;
if (this.contextId && !items.some((i) => i.id === this.contextId)) this.contextId = null;
this.layout();
@@ -141,6 +166,44 @@ export class ListView extends Widget {
this.redraw();
}
/**
* Lets a row light up and fade out without selecting it – "here it is" for something named
* elsewhere, like Unity's ping. The owner makes the row visible first.
*/
ping(id: string): void {
this.pinged = { id, start: performance.now() };
this.stepPing();
}
/** The row glowing right now and how brightly, or null (test hook). */
pingState(): { id: string; alpha: number } | null {
return this.pinged && this.pingMarker.visible
? { id: this.pinged.id, alpha: this.pingMarker.alpha }
: null;
}
/** One frame of the glow; it asks for the next one itself until it has faded. */
private stepPing(): void {
const ping = this.pinged;
const index = ping ? this.items.findIndex((i) => i.id === ping.id) : -1;
const alpha = ping && index >= 0 && !this.destroyed ? pingAlpha(performance.now() - ping.start) : 0;
this.pingMarker.clear();
this.pingMarker.visible = alpha > 0;
if (alpha <= 0) {
this.pinged = null;
return;
}
// Drawn every frame: a rebuild of the rows during the glow can move the row or change the width.
this.pingMarker.rect(0, index * this.rowHeight, this.w, this.rowHeight).fill(Theme.colors.accent);
this.pingMarker.alpha = alpha;
onFrame(this.frameKey, () => this.stepPing());
}
override destroy(options?: Parameters<Widget['destroy']>[0]): void {
cancelFrameWork(this.frameKey);
super.destroy(options);
}
/** Label colour of a row as `#rrggbb`; null when no such row is shown (test hook). */
rowColor(id: string): string | null {
return this.rows.find((r) => r.item.id === id)?.labelColor ?? null;
+8 -4
View File
@@ -21,6 +21,8 @@ export interface TextFieldOptions {
onSubmit?: (value: string) => void;
/** A password: drawn as bullets, and never on screen as itself. */
secret?: boolean;
/** Shows a value that is changed elsewhere: no focus, no caret, no hover. */
readOnly?: boolean;
}
/** What a masked field shows per character. */
@@ -48,6 +50,7 @@ export class TextField extends Widget implements TextEditTarget {
private dragSelecting = false;
placeholder: string;
private readonly secret: boolean;
readonly readOnly: boolean;
onInput?: (value: string) => void;
onChange?: (value: string) => void;
onSubmit?: (value: string) => void;
@@ -60,8 +63,9 @@ export class TextField extends Widget implements TextEditTarget {
this.onChange = options.onChange;
this.onSubmit = options.onSubmit;
this.secret = options.secret ?? false;
this.focusable = true;
this.cursor = 'text';
this.readOnly = options.readOnly ?? false;
this.focusable = !this.readOnly;
this.cursor = this.readOnly ? 'default' : 'text';
this.minHeight = Theme.controlHeight;
this.minWidth = options.width ?? 80;
this.textNode = new Text({ text: value, style: textStyle(options.style ?? 'body') });
@@ -102,7 +106,7 @@ export class TextField extends Widget implements TextEditTarget {
}
protected handlePointerDown(e: FederatedPointerEvent): void {
if (e.button !== 0) return;
if (e.button !== 0 || this.readOnly) return;
e.stopPropagation();
const index = this.indexAt(this.toLocal(e.global).x);
const presses = pressCount(e, this);
@@ -260,7 +264,7 @@ export class TextField extends Widget implements TextEditTarget {
const innerW = this.w - pad * 2;
this.bg.clear();
drawControlBox(this.bg, this.w, this.h, {
fill: this.hovered && !this.editing ? c.controlHover : c.control,
fill: this.hovered && !this.editing && !this.readOnly ? c.controlHover : c.control,
border: this.focused ? c.accent : c.border,
});
this.clipShape