rootandClaude Opus 5
f16801aef3
- NumberField takes a decimals option (default 3); frame rects and the slice dialog use 0, matching their integer model. - Button truncates its label to the drawn width; Dropdown reserves the chevron slot. NodeView reuses the shared truncate(). - Setting scaleMode leaves the style's shared resource id in place, so the old GPU sampler stayed in use until a reload. Call style.update(). - Graph gets a header bar like the Texture tab: GraphEditor is now the frame, the former editor is GraphCanvas. A selection the tab does not concern no longer unloads the behavior. - New e2e step 14 guards text overflow across all widgets. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { Graphics } from 'pixi.js';
|
||
import { Theme } from '../Theme';
|
||
import type { Size } from '../Widget';
|
||
import { Button, type ButtonOptions } from './Button';
|
||
|
||
/** Space reserved at the right edge for the chevron. */
|
||
const CHEVRON_SLOT = 16;
|
||
|
||
/**
|
||
* A button that opens a menu: value flush left, chevron flush right. The chevron is drawn
|
||
* rather than written into the label, so the label stays the plain value – which keeps it
|
||
* readable, lets it be compared against the menu entries, and stays crisp at any size.
|
||
*/
|
||
export class Dropdown extends Button {
|
||
private readonly chevron = new Graphics();
|
||
|
||
constructor(label: string, options: ButtonOptions = {}) {
|
||
super(label, { ...options, align: 'left' });
|
||
this.addChild(this.chevron);
|
||
}
|
||
|
||
override measure(): Size {
|
||
const size = super.measure();
|
||
return { w: size.w + CHEVRON_SLOT, h: size.h };
|
||
}
|
||
|
||
/** The chevron's room is not the label's: a long value is shortened, not drawn under it. */
|
||
protected override labelSlot(): number {
|
||
return super.labelSlot() - CHEVRON_SLOT;
|
||
}
|
||
|
||
override redraw(): void {
|
||
super.redraw();
|
||
const x = this.w - CHEVRON_SLOT / 2 - Theme.padding / 2;
|
||
const y = this.h / 2;
|
||
this.chevron
|
||
.clear()
|
||
.moveTo(x - 4, y - 2)
|
||
.lineTo(x + 4, y - 2)
|
||
.lineTo(x, y + 3)
|
||
.fill(this.onAccent ? Theme.colors.accentText : Theme.colors.textMuted);
|
||
}
|
||
}
|