141 lines
4.6 KiB
TypeScript
141 lines
4.6 KiB
TypeScript
import type { Asset } from '../core/model/Asset';
|
||
import { findAsset } from '../core/model/Project';
|
||
import { Button, Label, Spacer, VStack, type Widget } from '../ui';
|
||
import type { EditorState } from './state';
|
||
import { TabHeader } from './TabHeader';
|
||
|
||
/**
|
||
* The canvas each tab wraps: the header's Fit button and the tab's own plumbing need this much.
|
||
* A canvas without `fit` belongs to a tab whose Fit frames something else (see `AssetTabEditor.fit`).
|
||
* `saveView`/`restoreView` carry zoom and scroll across a switch to another document and back.
|
||
*/
|
||
export interface TabCanvas {
|
||
readonly currentAssetId: string;
|
||
show(assetId: string): void;
|
||
fit?(): void;
|
||
saveView?(): unknown;
|
||
restoreView?(view: unknown): void;
|
||
}
|
||
|
||
export interface AssetTabOptions {
|
||
/** Width reserved for the right-hand readout; a stack measures the label once, while empty. */
|
||
infoWidth: number;
|
||
}
|
||
|
||
/**
|
||
* The Behavior, State machine, Texture, Container … tabs. One editor per kind serves every open
|
||
* document of that kind (#171): the tab row tells it which one to show, and it keeps each one's
|
||
* view for when it comes back. A subclass must call `mount()`: header and canvas depend on each
|
||
* other, so the base cannot build them.
|
||
*/
|
||
export abstract class AssetTabEditor<
|
||
A extends Asset,
|
||
C extends TabCanvas & Widget = TabCanvas & Widget,
|
||
> extends VStack {
|
||
readonly fitButton: Button;
|
||
protected readonly info: Label;
|
||
/** Assigned by `mount`. Public because the check hooks and the play loop reach for it. */
|
||
canvas!: C;
|
||
private readonly views = new Map<string, unknown>();
|
||
|
||
constructor(
|
||
protected readonly state: EditorState,
|
||
options: AssetTabOptions,
|
||
) {
|
||
super();
|
||
this.fitButton = new Button('Fit', { onClick: () => this.fit() });
|
||
this.info = new Label('', { style: 'small', align: 'right' });
|
||
this.info.minWidth = options.infoWidth;
|
||
}
|
||
|
||
/** Builds the header (with `strip` below it) around `canvas` and wires the state events. */
|
||
protected mount(canvas: C, extras: readonly Widget[] = [], strip?: Widget): void {
|
||
this.canvas = canvas;
|
||
const header = new TabHeader();
|
||
for (const widget of extras) header.add(widget);
|
||
header.add(this.fitButton);
|
||
header.add(new Spacer(), 1);
|
||
header.add(this.info);
|
||
|
||
this.add(header);
|
||
if (strip) this.add(strip);
|
||
this.add(this.body(canvas), 1);
|
||
|
||
this.state.on('project', () => this.refresh());
|
||
this.state.on('load', () => {
|
||
this.views.clear();
|
||
this.canvas.show('');
|
||
this.refresh();
|
||
});
|
||
this.refresh();
|
||
}
|
||
|
||
/** The asset currently shown, `''` for none – the check scripts read this. */
|
||
get currentAssetId(): string {
|
||
return this.canvas.currentAssetId;
|
||
}
|
||
|
||
/** The right-hand readout as shown – the check scripts read this. */
|
||
get shownInfo(): string {
|
||
return this.info.text;
|
||
}
|
||
|
||
/** Shows a document, with the view it had when it was last on screen. */
|
||
showAsset(assetId: string): void {
|
||
const from = this.canvas.currentAssetId;
|
||
if (from !== assetId) {
|
||
if (from) this.views.set(from, this.saveView());
|
||
this.canvas.show(assetId);
|
||
const view = this.views.get(assetId);
|
||
if (view !== undefined) this.restoreView(view);
|
||
}
|
||
this.refresh();
|
||
}
|
||
|
||
/** A closed tab: opened again, the document starts from a fitted view. */
|
||
forgetView(assetId: string): void {
|
||
this.views.delete(assetId);
|
||
}
|
||
|
||
/** The selection's id for this kind of asset, `''` when the selection is about something else. */
|
||
abstract selectedId(): string;
|
||
|
||
abstract isMine(asset: Asset): asset is A;
|
||
|
||
/** The right-hand readout; `null` is the empty state. */
|
||
protected abstract infoText(asset: A | null): string;
|
||
|
||
/** What fills the tab below the header. Override to put something beside the canvas. */
|
||
protected body(canvas: C): Widget {
|
||
return canvas;
|
||
}
|
||
|
||
/** What the header's Fit button frames. Override when the tab has more than one view. */
|
||
protected fit(): void {
|
||
this.canvas.fit?.();
|
||
}
|
||
|
||
/** The view to come back to; override when the tab has more than one. */
|
||
protected saveView(): unknown {
|
||
return this.canvas.saveView?.();
|
||
}
|
||
|
||
protected restoreView(view: unknown): void {
|
||
this.canvas.restoreView?.(view);
|
||
}
|
||
|
||
/** Enable/disable whatever `extras` the subclass passed to `mount`. */
|
||
protected syncExtras(_asset: A | null): void {}
|
||
|
||
protected asset(): A | null {
|
||
const asset = findAsset(this.state.project, this.canvas.currentAssetId);
|
||
return asset && this.isMine(asset) ? asset : null;
|
||
}
|
||
|
||
protected refresh(): void {
|
||
const asset = this.asset();
|
||
this.info.setText(asset ? this.infoText(asset) : '');
|
||
this.syncExtras(asset);
|
||
}
|
||
}
|