@datamoc/mw_games 0.7.6 → 0.7.8

package/dist/two-d/ui/TabbedList.js

@@ -0,0 +1,221 @@
+import { Signal } from '../../core/Signal.js';
+/**
+ * The model behind a tabbed, searchable, paged list - an inventory, journal, shop or codex -
+ * kept apart from how it is drawn, the same split `SelectionModel` already draws for plain
+ * lists. The caller supplies the tabs and the rows per tab (any type it likes, so no item
+ * taxonomy is assumed), plus optionally how a row labels, filters and disables itself; this
+ * owns the tab choice, the query, the selection, the page and the detail/close state.
+ *
+ * The page is derived from the selection rather than tracked beside it: a selection index
+ * into the filtered rows decides which page is visible, so the two can never disagree and
+ * `nextPage` is just a selection move of one page. `move` skips disabled rows.
+ *
+ * Rendering is the caller's: read `pageRows` and `selectedIndex` each frame, or listen to
+ * `onChange`.
+ *
+ * @example
+ * ```ts
+ * import { TabbedList } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const items = [
+ *   { name: 'Sword', kind: 'weapon' },
+ *   { name: 'Bread', kind: 'food' },
+ *   { name: 'Shield', kind: 'armor' },
+ * ];
+ *
+ * const list = new TabbedList<(typeof items)[number]>({
+ *   tabs: [{ id: 'all', label: 'All' }, { id: 'weapon', label: 'Weapons' }],
+ *   rowsFor: (tab) => (tab === 'all' ? items : items.filter((item) => item.kind === tab)),
+ *   label: (item) => item.name,
+ *   pageSize: 2,
+ * });
+ *
+ * console.log(list.selected?.name); // 'Sword'
+ * list.setQuery('sh'); // filter down to Shield; selection and page reset
+ * console.log(list.rows.length, list.page); // 1 0
+ * list.openDetail(); // true, with the current row
+ * ```
+ */
+export class TabbedList {
+    constructor(options) {
+        /** fires whenever the tab, query, selection, page or detail state changes */
+        this.onChange = new Signal();
+        this.currentTabIndex = 0;
+        this.currentQuery = '';
+        this.rows_ = [];
+        this.currentSelectedIndex = 0;
+        this.detail = false;
+        if (options.tabs.length === 0)
+            throw new Error('TabbedList needs at least one tab');
+        this.tabList = [...options.tabs];
+        this.rowsFor = options.rowsFor;
+        this.pageSize = Math.max(0, Math.floor(options.pageSize ?? 0));
+        this.labelOf = options.label ?? ((row) => String(row));
+        this.filterOf =
+            options.filter ??
+                ((row, query) => (query === '' ? true : this.labelOf(row).toLowerCase().includes(query.toLowerCase())));
+        this.disabledOf = options.disabled ?? (() => false);
+        this.recompute();
+    }
+    /** every tab, in display order, for a tab strip to draw */
+    get tabs() {
+        return this.tabList;
+    }
+    /** the currently open tab */
+    get tab() {
+        return this.tabList[this.currentTabIndex];
+    }
+    get query() {
+        return this.currentQuery;
+    }
+    /** the filtered rows of the current tab, across every page */
+    get rows() {
+        return this.rows_;
+    }
+    /** how many pages `rows` fills; always at least 1, so an empty list is one empty page */
+    get pageCount() {
+        if (this.pageSize <= 0)
+            return 1;
+        return Math.max(1, Math.ceil(this.rows_.length / this.pageSize));
+    }
+    /** the page the selection is on, derived from it rather than tracked next to it */
+    get page() {
+        if (this.pageSize <= 0)
+            return 0;
+        return Math.floor(this.currentSelectedIndex / this.pageSize);
+    }
+    /** the rows the current page shows */
+    get pageRows() {
+        if (this.pageSize <= 0)
+            return this.rows_;
+        const start = this.page * this.pageSize;
+        return this.rows_.slice(start, start + this.pageSize);
+    }
+    /** the selection's index into `rows` (not into `pageRows`) */
+    get selectedIndex() {
+        return this.currentSelectedIndex;
+    }
+    get selected() {
+        return this.rows_[this.currentSelectedIndex] ?? null;
+    }
+    /** whether the detail view has been opened for the current selection */
+    get detailOpen() {
+        return this.detail;
+    }
+    /** opens `id`'s tab; a disabled tab or an unknown id is ignored */
+    selectTab(id) {
+        const index = this.tabList.findIndex((tab) => tab.id === id);
+        if (index === -1 || this.tabList[index].disabled)
+            return;
+        if (index === this.currentTabIndex)
+            return;
+        this.currentTabIndex = index;
+        this.recompute();
+        this.emit();
+    }
+    /** moves to the next enabled tab, `delta` steps on (wrapping); skips disabled tabs */
+    nextTab(delta = 1) {
+        if (delta === 0)
+            return;
+        const step = delta > 0 ? 1 : -1;
+        let index = this.currentTabIndex;
+        for (let moved = 0; moved < Math.abs(delta); moved++) {
+            do {
+                index = (index + step + this.tabList.length) % this.tabList.length;
+            } while (this.tabList[index].disabled && index !== this.currentTabIndex);
+        }
+        if (index === this.currentTabIndex)
+            return;
+        this.currentTabIndex = index;
+        this.recompute();
+        this.emit();
+    }
+    /** replaces the query; the selection and page reset to the first row that survives it */
+    setQuery(query) {
+        if (query === this.currentQuery)
+            return;
+        this.currentQuery = query;
+        this.recompute();
+        this.emit();
+    }
+    /** moves the selection `delta` rows, skipping disabled ones and clamping at both ends */
+    move(delta) {
+        if (delta === 0 || this.rows_.length === 0)
+            return;
+        const step = delta > 0 ? 1 : -1;
+        let index = this.currentSelectedIndex;
+        for (let moved = 0; moved < Math.abs(delta); moved++) {
+            let candidate = index;
+            do {
+                candidate += step;
+            } while (candidate >= 0 && candidate < this.rows_.length && this.disabledOf(this.rows_[candidate]));
+            if (candidate < 0 || candidate >= this.rows_.length)
+                break;
+            index = candidate;
+        }
+        if (index === this.currentSelectedIndex)
+            return;
+        this.currentSelectedIndex = index;
+        this.emit();
+    }
+    /** jumps to a page by number, clamped; the selection moves to its first selectable row */
+    setPage(page) {
+        const target = Math.max(0, Math.min(this.pageCount - 1, Math.floor(page)));
+        if (this.pageSize <= 0)
+            return;
+        const first = this.firstSelectableOnPage(target);
+        if (first === this.currentSelectedIndex)
+            return;
+        this.currentSelectedIndex = first;
+        this.emit();
+    }
+    /** moves `delta` pages; the selection lands on the target page's first selectable row */
+    nextPage(delta) {
+        this.setPage(this.page + delta);
+    }
+    /** opens the detail view for the current selection; false when there is nothing to open */
+    openDetail() {
+        if (this.selected === null || this.disabledOf(this.selected))
+            return false;
+        if (!this.detail) {
+            this.detail = true;
+            this.emit();
+        }
+        return true;
+    }
+    closeDetail() {
+        if (!this.detail)
+            return;
+        this.detail = false;
+        this.emit();
+    }
+    /** the first row on `page` that is not disabled, or its first row when all are */
+    firstSelectableOnPage(page) {
+        const start = page * this.pageSize;
+        const end = Math.min(this.rows_.length, start + this.pageSize);
+        for (let i = start; i < end; i++) {
+            if (!this.disabledOf(this.rows_[i]))
+                return i;
+        }
+        return Math.min(start, Math.max(0, this.rows_.length - 1));
+    }
+    firstSelectable(from) {
+        for (let i = from; i < this.rows_.length; i++) {
+            if (!this.disabledOf(this.rows_[i]))
+                return i;
+        }
+        return 0;
+    }
+    /** rebuilds the visible rows and parks the selection on the first selectable one */
+    recompute() {
+        const all = this.rowsFor(this.tab.id);
+        const filtered = all.filter((row) => this.filterOf(row, this.currentQuery));
+        this.rows_ = filtered;
+        this.currentSelectedIndex = filtered.length === 0 ? 0 : this.firstSelectable(0);
+        this.detail = false;
+    }
+    emit() {
+        this.onChange.dispatch();
+    }
+}
+//# sourceMappingURL=TabbedList.js.map

package/dist/two-d/ui/TabbedList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabbedList.js","sourceRoot":"","sources":["../../../src/two-d/ui/TabbedList.ts"],"names":[],"mappings":"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"}

package/dist/two-d/ui/TextModel.d.ts

@@ -0,0 +1,65 @@
+export interface TextModelOptions {
+    value?: string;
+    /** the most characters the field will hold; unlimited when omitted */
+    maxLength?: number;
+    /** a password-style field: `maskedValue` replaces every character with a dot */
+    mask?: boolean;
+    /** the character `maskedValue` repeats; a bullet when omitted */
+    maskCharacter?: string;
+}
+/**
+ * The editing state behind a text field, with no renderer attached - the counterpart to
+ * `core.Input`'s `onText`, which supplies the characters: the DOM gives a key, this decides
+ * where it goes, and a game draws `value` (or `maskedValue`) with the caret it reports.
+ *
+ * The caret is an index into `value`; a selection is the caret plus an anchor, so every edit
+ * replaces the selection when there is one and inserts at the caret when there is not, which is
+ * the behaviour a plain `<input>` has and a title screen's name entry expects.
+ *
+ * @example
+ * ```ts
+ * import { TextModel } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const name = new TextModel({ maxLength: 8, value: 'Hero' });
+ * name.selectAll();
+ * name.insert('Ash');
+ * console.log(name.value); // 'Ash'
+ * ```
+ */
+export declare class TextModel {
+    private text;
+    private caretIndex;
+    private anchor;
+    private readonly maxLength?;
+    private readonly mask;
+    private readonly maskCharacter;
+    constructor(options?: TextModelOptions);
+    get value(): string;
+    /** what to draw for a password field: every character replaced by the mask */
+    get maskedValue(): string;
+    get length(): number;
+    get caret(): number;
+    get selectionStart(): number;
+    get selectionEnd(): number;
+    get hasSelection(): boolean;
+    get selectedText(): string;
+    /** replaces everything; the caret goes to the end and a new string is never longer than `maxLength` */
+    setValue(value: string): void;
+    setCaret(index: number, extend?: boolean): void;
+    /** inserts at the caret, replacing the selection, as a keystroke from `onText` does */
+    insert(text: string): void;
+    /** the backspace key: removes the selection, or the character before the caret */
+    backspace(): void;
+    /** the delete key: removes the selection, or the character after the caret */
+    deleteForward(): void;
+    /** arrow keys: moves the caret, extending the selection when the shift key is held */
+    moveCaret(delta: number, extend?: boolean): void;
+    moveToStart(extend?: boolean): void;
+    moveToEnd(extend?: boolean): void;
+    selectAll(): void;
+    clearSelection(): void;
+    /** replaces the selection (or inserts at the caret) and leaves the caret after the new text */
+    replaceSelection(text: string): void;
+    private limit;
+}
+//# sourceMappingURL=TextModel.d.ts.map

package/dist/two-d/ui/TextModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextModel.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/TextModel.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,SAAS;IACrB,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAS;IACpC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAU;IAC/B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAS;IAEvC,YAAY,OAAO,GAAE,gBAAqB,EAOzC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,8EAA8E;IAC9E,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,uGAAuG;IACvG,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAI5B;IAED,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,UAAQ,GAAG,IAAI,CAG5C;IAED,uFAAuF;IACvF,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAGzB;IAED,kFAAkF;IAClF,SAAS,IAAI,IAAI,CAQhB;IAED,8EAA8E;IAC9E,aAAa,IAAI,IAAI,CAQpB;IAED,sFAAsF;IACtF,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,UAAQ,GAAG,IAAI,CAE7C;IAED,WAAW,CAAC,MAAM,UAAQ,GAAG,IAAI,CAEhC;IAED,SAAS,CAAC,MAAM,UAAQ,GAAG,IAAI,CAE9B;IAED,SAAS,IAAI,IAAI,CAGhB;IAED,cAAc,IAAI,IAAI,CAErB;IAED,+FAA+F;IAC/F,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAWnC;IAED,OAAO,CAAC,KAAK;CAGb"}

package/dist/two-d/ui/TextModel.js

@@ -0,0 +1,126 @@
+/**
+ * The editing state behind a text field, with no renderer attached - the counterpart to
+ * `core.Input`'s `onText`, which supplies the characters: the DOM gives a key, this decides
+ * where it goes, and a game draws `value` (or `maskedValue`) with the caret it reports.
+ *
+ * The caret is an index into `value`; a selection is the caret plus an anchor, so every edit
+ * replaces the selection when there is one and inserts at the caret when there is not, which is
+ * the behaviour a plain `<input>` has and a title screen's name entry expects.
+ *
+ * @example
+ * ```ts
+ * import { TextModel } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const name = new TextModel({ maxLength: 8, value: 'Hero' });
+ * name.selectAll();
+ * name.insert('Ash');
+ * console.log(name.value); // 'Ash'
+ * ```
+ */
+export class TextModel {
+    constructor(options = {}) {
+        this.text = options.value ?? '';
+        this.maxLength = options.maxLength;
+        this.mask = options.mask ?? false;
+        this.maskCharacter = options.maskCharacter ?? '\u2022';
+        this.caretIndex = this.text.length;
+        this.anchor = this.caretIndex;
+    }
+    get value() {
+        return this.text;
+    }
+    /** what to draw for a password field: every character replaced by the mask */
+    get maskedValue() {
+        return this.mask ? this.maskCharacter.repeat(this.text.length) : this.text;
+    }
+    get length() {
+        return this.text.length;
+    }
+    get caret() {
+        return this.caretIndex;
+    }
+    get selectionStart() {
+        return Math.min(this.caretIndex, this.anchor);
+    }
+    get selectionEnd() {
+        return Math.max(this.caretIndex, this.anchor);
+    }
+    get hasSelection() {
+        return this.caretIndex !== this.anchor;
+    }
+    get selectedText() {
+        return this.text.slice(this.selectionStart, this.selectionEnd);
+    }
+    /** replaces everything; the caret goes to the end and a new string is never longer than `maxLength` */
+    setValue(value) {
+        this.text = this.limit(value);
+        this.caretIndex = this.text.length;
+        this.anchor = this.caretIndex;
+    }
+    setCaret(index, extend = false) {
+        this.caretIndex = Math.max(0, Math.min(this.text.length, index));
+        if (!extend)
+            this.anchor = this.caretIndex;
+    }
+    /** inserts at the caret, replacing the selection, as a keystroke from `onText` does */
+    insert(text) {
+        if (text.length === 0)
+            return;
+        this.replaceSelection(text);
+    }
+    /** the backspace key: removes the selection, or the character before the caret */
+    backspace() {
+        if (this.hasSelection) {
+            this.replaceSelection('');
+            return;
+        }
+        if (this.caretIndex === 0)
+            return;
+        this.text = this.text.slice(0, this.caretIndex - 1) + this.text.slice(this.caretIndex);
+        this.setCaret(this.caretIndex - 1);
+    }
+    /** the delete key: removes the selection, or the character after the caret */
+    deleteForward() {
+        if (this.hasSelection) {
+            this.replaceSelection('');
+            return;
+        }
+        if (this.caretIndex >= this.text.length)
+            return;
+        this.text = this.text.slice(0, this.caretIndex) + this.text.slice(this.caretIndex + 1);
+        this.setCaret(this.caretIndex);
+    }
+    /** arrow keys: moves the caret, extending the selection when the shift key is held */
+    moveCaret(delta, extend = false) {
+        this.setCaret(this.caretIndex + delta, extend);
+    }
+    moveToStart(extend = false) {
+        this.setCaret(0, extend);
+    }
+    moveToEnd(extend = false) {
+        this.setCaret(this.text.length, extend);
+    }
+    selectAll() {
+        this.anchor = 0;
+        this.caretIndex = this.text.length;
+    }
+    clearSelection() {
+        this.anchor = this.caretIndex;
+    }
+    /** replaces the selection (or inserts at the caret) and leaves the caret after the new text */
+    replaceSelection(text) {
+        const start = this.selectionStart;
+        const end = this.selectionEnd;
+        const base = this.text.slice(0, start) + this.text.slice(end);
+        //a paste into a field with little room left stops at the cap rather than being rejected whole
+        const inserted = this.maxLength !== undefined && base.length + text.length > this.maxLength
+            ? text.slice(0, Math.max(0, this.maxLength - base.length))
+            : text;
+        this.text = this.text.slice(0, start) + inserted + this.text.slice(end);
+        this.setCaret(start + inserted.length);
+    }
+    limit(value) {
+        return this.maxLength !== undefined && value.length > this.maxLength ? value.slice(0, this.maxLength) : value;
+    }
+}
+//# sourceMappingURL=TextModel.js.map

package/dist/two-d/ui/TextModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextModel.js","sourceRoot":"","sources":["../../../src/two-d/ui/TextModel.ts"],"names":[],"mappings":"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"}

package/dist/two-d/ui/TreeView.d.ts

@@ -0,0 +1,68 @@
+import { Signal } from '../../core/Signal.ts';
+export interface TreeNode<T = unknown> {
+    /** stable across rebuilds: the id expansion state is kept by */
+    id: string;
+    label: string;
+    children?: readonly TreeNode<T>[];
+    disabled?: boolean;
+    data?: T;
+}
+/** A tree node as the flattened view holds it: its depth and whether its children are showing. */
+export interface TreeRow<T> {
+    node: TreeNode<T>;
+    depth: number;
+    expanded: boolean;
+    hasChildren: boolean;
+}
+export interface TreeViewOptions<T> {
+    roots: readonly TreeNode<T>[];
+    /** ids expanded from the start; everything else starts collapsed */
+    expanded?: readonly string[];
+    /** rows the highlight skips, the way `ListView` skips a disabled item */
+    disabled?: (node: TreeNode<T>) => boolean;
+}
+/**
+ * A collapsible tree, flattened to the rows a game draws - a skill tree, a nested options menu,
+ * a directory of scenarios grouped by campaign.
+ *
+ * Renderer-free, like `TabbedList`. The visible rows are derived from the roots and the set of
+ * expanded ids every time they are asked for, rather than kept in a parallel list that could go
+ * stale. Two rules are worth naming: collapsing a branch that contains the highlight moves the
+ * highlight to the branch itself, and `move` only ever walks the rows actually on screen, so a
+ * collapsed child is unreachable without expanding it first.
+ *
+ * @example
+ * ```ts
+ * import { TreeView } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const tree = new TreeView({
+ *   roots: [{ id: 'a', label: 'A', children: [{ id: 'a1', label: 'A1' }] }],
+ * });
+ * tree.expand('a');
+ * console.log(tree.rows.map((row) => row.node.id)); // ['a', 'a1']
+ * ```
+ */
+export declare class TreeView<T = unknown> {
+    readonly onChange: Signal<void>;
+    private roots_;
+    private expanded;
+    private current;
+    private readonly disabledOf;
+    constructor(options: TreeViewOptions<T>);
+    get roots(): readonly TreeNode<T>[];
+    /** the rows on screen, in draw order: a collapsed node's children are absent */
+    get rows(): readonly TreeRow<T>[];
+    get selectedIndex(): number;
+    get selected(): TreeNode<T> | null;
+    isExpanded(id: string): boolean;
+    expand(id: string): void;
+    collapse(id: string): void;
+    toggle(id: string): void;
+    expandAll(): void;
+    collapseAll(): void;
+    select(index: number): void;
+    /** moves the highlight a visible row at a time, skipping disabled rows and stopping at the ends */
+    move(delta: number): void;
+    private firstEnabled;
+}
+//# sourceMappingURL=TreeView.d.ts.map

package/dist/two-d/ui/TreeView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/TreeView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,WAAW,QAAQ,CAAC,CAAC,GAAG,OAAO;IACpC,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,CAAC,CAAC;CACT;AAED,kGAAkG;AAClG,MAAM,WAAW,OAAO,CAAC,CAAC;IACzB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IACjC,KAAK,EAAE,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,QAAQ,CAAC,CAAC,GAAG,OAAO;IAChC,QAAQ,CAAC,QAAQ,eAAsB;IAEvC,OAAO,CAAC,MAAM,CAAyB;IACvC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiC;IAE5D,YAAY,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAKtC;IAED,IAAI,KAAK,IAAI,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,CAElC;IAED,gFAAgF;IAChF,IAAI,IAAI,IAAI,SAAS,OAAO,CAAC,CAAC,CAAC,EAAE,CAYhC;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAEjC;IAED,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAE9B;IAED,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAIvB;IAED,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAWzB;IAED,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAGvB;IAED,SAAS,IAAI,IAAI,CAWhB;IAED,WAAW,IAAI,IAAI,CAIlB;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAK1B;IAED,mGAAmG;IACnG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAaxB;IAED,OAAO,CAAC,YAAY;CAIpB"}

package/dist/two-d/ui/TreeView.js

@@ -0,0 +1,133 @@
+import { Signal } from '../../core/Signal.js';
+/**
+ * A collapsible tree, flattened to the rows a game draws - a skill tree, a nested options menu,
+ * a directory of scenarios grouped by campaign.
+ *
+ * Renderer-free, like `TabbedList`. The visible rows are derived from the roots and the set of
+ * expanded ids every time they are asked for, rather than kept in a parallel list that could go
+ * stale. Two rules are worth naming: collapsing a branch that contains the highlight moves the
+ * highlight to the branch itself, and `move` only ever walks the rows actually on screen, so a
+ * collapsed child is unreachable without expanding it first.
+ *
+ * @example
+ * ```ts
+ * import { TreeView } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const tree = new TreeView({
+ *   roots: [{ id: 'a', label: 'A', children: [{ id: 'a1', label: 'A1' }] }],
+ * });
+ * tree.expand('a');
+ * console.log(tree.rows.map((row) => row.node.id)); // ['a', 'a1']
+ * ```
+ */
+export class TreeView {
+    constructor(options) {
+        this.onChange = new Signal();
+        this.expanded = new Set();
+        this.current = 0;
+        this.roots_ = options.roots;
+        for (const id of options.expanded ?? [])
+            this.expanded.add(id);
+        this.disabledOf = options.disabled ?? (() => false);
+        this.current = this.firstEnabled();
+    }
+    get roots() {
+        return this.roots_;
+    }
+    /** the rows on screen, in draw order: a collapsed node's children are absent */
+    get rows() {
+        const rows = [];
+        const walk = (nodes, depth) => {
+            for (const node of nodes) {
+                const hasChildren = (node.children?.length ?? 0) > 0;
+                const isExpanded = hasChildren && this.expanded.has(node.id);
+                rows.push({ node, depth, expanded: isExpanded, hasChildren });
+                if (isExpanded)
+                    walk(node.children, depth + 1);
+            }
+        };
+        walk(this.roots_, 0);
+        return rows;
+    }
+    get selectedIndex() {
+        return this.current;
+    }
+    get selected() {
+        return this.rows[this.current]?.node ?? null;
+    }
+    isExpanded(id) {
+        return this.expanded.has(id);
+    }
+    expand(id) {
+        if (this.expanded.has(id))
+            return;
+        this.expanded.add(id);
+        this.onChange.dispatch();
+    }
+    collapse(id) {
+        if (!this.expanded.has(id))
+            return;
+        //read the selection before closing, or a child index can already point past the shorter list
+        const selectedId = this.rows[this.current]?.node.id;
+        this.expanded.delete(id);
+        //if the highlight was inside the branch that just closed, land it on the branch itself
+        if (selectedId !== undefined && !this.rows.some((row) => row.node.id === selectedId)) {
+            const index = this.rows.findIndex((row) => row.node.id === id);
+            if (index >= 0)
+                this.current = index;
+        }
+        this.onChange.dispatch();
+    }
+    toggle(id) {
+        if (this.expanded.has(id))
+            this.collapse(id);
+        else
+            this.expand(id);
+    }
+    expandAll() {
+        const walk = (nodes) => {
+            for (const node of nodes) {
+                if (node.children?.length) {
+                    this.expanded.add(node.id);
+                    walk(node.children);
+                }
+            }
+        };
+        walk(this.roots_);
+        this.onChange.dispatch();
+    }
+    collapseAll() {
+        this.expanded.clear();
+        this.select(0);
+        this.onChange.dispatch();
+    }
+    select(index) {
+        const row = this.rows[index];
+        if (!row || this.disabledOf(row.node))
+            return;
+        this.current = index;
+        this.onChange.dispatch();
+    }
+    /** moves the highlight a visible row at a time, skipping disabled rows and stopping at the ends */
+    move(delta) {
+        const count = this.rows.length;
+        if (count === 0)
+            return;
+        let index = this.current;
+        for (let tried = 0; tried < count; tried++) {
+            index += delta;
+            if (index < 0 || index >= count)
+                return;
+            if (!this.disabledOf(this.rows[index].node)) {
+                this.current = index;
+                this.onChange.dispatch();
+                return;
+            }
+        }
+    }
+    firstEnabled() {
+        const index = this.rows.findIndex((row) => !this.disabledOf(row.node));
+        return index === -1 ? 0 : index;
+    }
+}
+//# sourceMappingURL=TreeView.js.map

package/dist/two-d/ui/TreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","sourceRoot":"","sources":["../../../src/two-d/ui/TreeView.ts"],"names":[],"mappings":"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"}