rootandClaude Fable 5.1
5a46124454
Canvas-only 2D game editor/runtime built on PixiJS v8 + Vite + TypeScript. - core: asset model (Scene/Camera/Sprite), scene objects with sparse overrides, property schema + resolve, command stack (undo/redo), serialization and project store interface (16 unit tests) - ui: custom in-canvas widget toolkit (panels, fields, color picker, list/scroll, popup) with a hidden <input> keyboard bridge - editor: asset/hierarchy panels, schema-driven inspector, toolbar - viewport: box rendering, camera frame, selection gizmo, drag/zoom/pan - runtime: world/entity instantiation for play mode, input, camera follow - api: PHP JSON project store with revision counter (409 on conflict) - tools: CDP-based e2e smoke test Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import { CanvasTextMetrics, Text } from 'pixi.js';
|
|
import { Theme, textStyle, type TextStyleToken } from '../Theme';
|
|
import { type Size, Widget } from '../Widget';
|
|
|
|
export interface LabelOptions {
|
|
style?: TextStyleToken;
|
|
align?: 'left' | 'center' | 'right';
|
|
/** Horizontal padding inside the label bounds. */
|
|
padding?: number;
|
|
}
|
|
|
|
/** Single-line text that truncates with an ellipsis when narrower than its content. */
|
|
export class Label extends Widget {
|
|
private readonly textNode: Text;
|
|
private fullText: string;
|
|
private readonly align: NonNullable<LabelOptions['align']>;
|
|
private readonly padding: number;
|
|
|
|
constructor(text = '', options: LabelOptions = {}) {
|
|
super();
|
|
this.eventMode = 'none';
|
|
this.fullText = text;
|
|
this.align = options.align ?? 'left';
|
|
this.padding = options.padding ?? 0;
|
|
this.textNode = new Text({ text, style: textStyle(options.style ?? 'body') });
|
|
this.addChild(this.textNode);
|
|
this.minHeight = Theme.rowHeight;
|
|
}
|
|
|
|
get text(): string {
|
|
return this.fullText;
|
|
}
|
|
|
|
setText(text: string): void {
|
|
if (text === this.fullText) return;
|
|
this.fullText = text;
|
|
this.invalidate();
|
|
}
|
|
|
|
setStyle(token: TextStyleToken): void {
|
|
this.textNode.style = textStyle(token);
|
|
this.invalidate();
|
|
}
|
|
|
|
override measure(): Size {
|
|
const metrics = CanvasTextMetrics.measureText(this.fullText, this.textNode.style);
|
|
return { w: Math.max(this.minWidth, Math.ceil(metrics.width) + this.padding * 2), h: Math.max(this.minHeight, Math.ceil(metrics.height)) };
|
|
}
|
|
|
|
override redraw(): void {
|
|
const available = this.w - this.padding * 2;
|
|
this.textNode.text = truncate(this.fullText, this.textNode.style, available);
|
|
const tw = this.textNode.width;
|
|
let x = this.padding;
|
|
if (this.align === 'center') x = (this.w - tw) / 2;
|
|
else if (this.align === 'right') x = this.w - this.padding - tw;
|
|
this.textNode.position.set(Math.round(x), Math.round((this.h - this.textNode.height) / 2));
|
|
}
|
|
}
|
|
|
|
/** Cuts `text` to fit `maxWidth` in the given style, appending "…" when shortened. */
|
|
export function truncate(text: string, style: Text['style'], maxWidth: number): string {
|
|
if (maxWidth <= 0) return '';
|
|
if (CanvasTextMetrics.measureText(text, style).width <= maxWidth) return text;
|
|
let lo = 0;
|
|
let hi = text.length;
|
|
while (lo < hi) {
|
|
const mid = Math.ceil((lo + hi) / 2);
|
|
if (CanvasTextMetrics.measureText(text.slice(0, mid) + '…', style).width <= maxWidth) lo = mid;
|
|
else hi = mid - 1;
|
|
}
|
|
return lo === 0 ? '' : text.slice(0, lo) + '…';
|
|
}
|