@datamoc/mw_games 0.4.1 → 0.4.3

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

@@ -1,5 +1,6 @@
 import { Container, Graphics } from 'pixi.js';
 import { Label } from './Label.js';
+import { SelectionModel } from './SelectionModel.js';
 import { theme, themeChanged } from './theme.js';
 /**
  * A grid of icons, driven by the keyboard or the pointer.
@@ -13,17 +14,47 @@ import { theme, themeChanged } from './theme.js';
  * none of the drag-threshold and global-pointer-tracking fragility an actually-followed ghost
  * sprite would - and unlike a live drag, every step of it is a plain method call a test can
  * drive without simulating pointer events at all.
+ *
+ * @example
+ * ```ts
+ * import { IconGrid } from '@datamoc/mw_games/two-d/ui';
+ * import { Shape2D } from '@datamoc/mw_games/two-d/render';
+ *
+ * const potionIcon = new Shape2D().rect(0, 0, 16, 16).fill(0x66cc66);
+ * const swordIcon = new Shape2D().rect(0, 0, 16, 16).fill(0xcccccc);
+ *
+ * const bag = new IconGrid({
+ * 	width: 160,
+ * 	height: 80,
+ * 	columns: 4,
+ * 	items: [
+ * 		{ icon: potionIcon, quantity: 3 },
+ * 		{ icon: swordIcon },
+ * 	],
+ * 	onSelect: (item, index) => console.log('used', index, item.value),
+ * });
+ *
+ * bag.handleAction('right'); // moves the highlight to the sword
+ * bag.handleAction('confirm'); // fires onSelect for the highlighted cell
+ * ```
  */
 export class IconGrid extends Container {
+    /** a column's x, mirrored under `theme().direction === 'rtl'` so column 0 sits at the reading-start edge */
+    columnX(col) {
+        const rtl = theme().direction === 'rtl';
+        return (rtl ? this.columns - 1 - col : col) * this.cellSize;
+    }
     constructor(options) {
         super();
-        this.items = [];
+        this.selection = new SelectionModel({
+            onChange: () => this.refresh(),
+            onHighlight: (item, index) => this.onHighlight?.(item, index),
+        });
         this.cells = [];
         this.cellsLayer = new Container();
         this.highlight = new Graphics();
         this.pickupHighlight = new Graphics();
         this.mask_ = new Graphics();
-        this.index = 0;
         this.scrollRow = 0;
         /** the cell a first tap picked up, awaiting a second tap to swap with */
         this.pickedUp = null;
@@ -33,14 +64,19 @@ export class IconGrid extends Container {
          * Recolours quantity badges in place rather than through `setItems`: an item's `icon` is
          * a `Container` the caller owns, and `setItems`'s teardown destroys a cell's children on
          * the way out (see `swapCells`'s own doc comment) - routing a restyle through it would
-         * destroy the very icons still referenced by `this.items`.
+         * destroy the very icons still referenced by the selection's items.
          */
         this.themeListener = () => {
             const t = theme();
-            this.items.forEach((item, i) => {
+            const items = this.selection.items;
+            items.forEach((item, i) => {
+                const cell = this.cells[i];
+                if (!cell)
+                    return;
+                cell.x = this.columnX(i % this.columns);
                 if ((item.quantity ?? 1) <= 1)
                     return;
-                const badge = this.cells[i]?.children.find((child) => child instanceof Label);
+                const badge = cell.children.find((child) => child instanceof Label);
                 badge?.setColor(t.color.textHighlight);
             });
             this.refresh();
@@ -80,19 +116,18 @@ export class IconGrid extends Container {
         return Math.max(1, Math.floor(this.viewHeight / this.cellSize));
     }
     get rows() {
-        return Math.max(1, Math.ceil(this.items.length / this.columns));
+        return Math.max(1, Math.ceil(this.selection.length / this.columns));
     }
     get selectedIndex() {
-        return this.index;
+        return this.selection.selectedIndex;
     }
     get selected() {
-        return this.items[this.index] ?? null;
+        return this.selection.selected;
     }
     get length() {
-        return this.items.length;
+        return this.selection.length;
     }
     setItems(items) {
-        this.items = items;
         this.pickedUp = null;
         this.pressedIndex = null;
         for (const cell of this.cells)
@@ -104,7 +139,7 @@ export class IconGrid extends Container {
             const row = Math.floor(i / this.columns);
             const col = i % this.columns;
             const cell = new Container();
-            cell.x = col * this.cellSize;
+            cell.x = this.columnX(col);
             cell.y = row * this.cellSize;
             cell.eventMode = 'static';
             cell.cursor = item.disabled ? 'default' : 'pointer';
@@ -128,9 +163,7 @@ export class IconGrid extends Container {
             this.cells.push(cell);
             this.cellsLayer.addChild(cell);
         });
-        this.index = this.items.findIndex((item) => !item.disabled);
-        if (this.index === -1)
-            this.index = 0;
+        this.selection.reset(items);
         this.scrollRow = 0;
         this.refresh();
     }
@@ -139,7 +172,7 @@ export class IconGrid extends Container {
             return;
         this.pressedIndex = null;
         //still under the long-press threshold when released - a tap, not a quickslot
-        if (!this.items[index]?.disabled)
+        if (!this.selection.items[index]?.disabled)
             this.tapCell(index);
     }
     resize(width, height) {
@@ -161,16 +194,17 @@ export class IconGrid extends Container {
             return;
         const index = this.pressedIndex;
         this.pressedIndex = null; //fires once; releasing afterwards is not also a tap
-        const item = this.items[index];
+        const item = this.selection.items[index];
         if (item && !item.disabled)
             this.onQuickslot?.(item, index);
     }
     /** first tap on a cell picks it up; a second tap on another swaps the two */
     tapCell(index) {
-        if (index < 0 || index >= this.items.length)
+        const items = this.selection.items;
+        if (index < 0 || index >= items.length)
             return;
         if (this.pickedUp === null) {
-            if (this.items[index].disabled)
+            if (items[index].disabled)
                 return;
             this.pickedUp = index;
             this.refresh();
@@ -194,7 +228,8 @@ export class IconGrid extends Container {
      * badge survive together, wherever the swap sends them.
      */
     swapCells(a, b) {
-        [this.items[a], this.items[b]] = [this.items[b], this.items[a]];
+        const items = this.selection.items;
+        this.selection.swap(a, b);
         const cellA = this.cells[a];
         const cellB = this.cells[b];
         const childrenA = cellA.removeChildren();
@@ -203,8 +238,8 @@ export class IconGrid extends Container {
             cellA.addChild(child);
         for (const child of childrenA)
             cellB.addChild(child);
-        cellA.cursor = this.items[a].disabled ? 'default' : 'pointer';
-        cellB.cursor = this.items[b].disabled ? 'default' : 'pointer';
+        cellA.cursor = items[a].disabled ? 'default' : 'pointer';
+        cellB.cursor = items[b].disabled ? 'default' : 'pointer';
     }
     /** cancels a pending pick-up without swapping anything - what `cancel` should do */
     cancelPickup() {
@@ -218,39 +253,19 @@ export class IconGrid extends Container {
      * each; a caller wanting arrow-key navigation passes `(±1, 0)` or `(0, ±1)`.
      */
     move(dx, dy) {
-        if (this.items.length === 0)
-            return false;
-        const total = this.items.length;
         const rows = this.rows;
-        let row = Math.floor(this.index / this.columns);
-        let col = this.index % this.columns;
-        //at most one full pass over the grid, so an all-disabled grid terminates
-        for (let step = 0; step < rows * this.columns; step++) {
-            col = (col + dx + this.columns) % this.columns;
-            row = (row + dy + rows) % rows;
-            const next = row * this.columns + col;
-            if (next < total && !this.items[next].disabled) {
-                this.index = next;
-                this.refresh();
-                this.onHighlight?.(this.items[next], next);
-                return true;
-            }
-        }
-        return false;
+        const columns = this.columns;
+        return this.selection.step((from) => {
+            const row = (Math.floor(from / columns) + dy + rows) % rows;
+            const col = ((from % columns) + dx + columns) % columns;
+            return row * columns + col;
+        }, rows * columns);
     }
     select(index) {
-        if (index < 0 || index >= this.items.length || this.items[index].disabled)
-            return;
-        this.index = index;
-        this.refresh();
-        this.onHighlight?.(this.items[index], index);
+        this.selection.select(index);
     }
     confirm() {
-        const item = this.selected;
-        if (!item || item.disabled)
-            return false;
-        this.onSelect?.(item, this.index);
-        return true;
+        return this.selection.confirm(this.onSelect);
     }
     /** @returns true when the action was used */
     handleAction(action) {
@@ -260,9 +275,9 @@ export class IconGrid extends Container {
             case 'down':
                 return this.move(0, 1);
             case 'left':
-                return this.move(-1, 0);
+                return this.move(theme().direction === 'rtl' ? 1 : -1, 0);
             case 'right':
-                return this.move(1, 0);
+                return this.move(theme().direction === 'rtl' ? -1 : 1, 0);
             case 'confirm':
                 return this.confirm();
             case 'cancel':
@@ -277,13 +292,14 @@ export class IconGrid extends Container {
     /** the pixel rect a cell index occupies within `cellsLayer` */
     cellRect(index) {
         return {
-            x: (index % this.columns) * this.cellSize,
+            x: this.columnX(index % this.columns),
             y: Math.floor(index / this.columns) * this.cellSize,
         };
     }
     refresh() {
         const visible = this.visibleRows;
-        const selectedRow = Math.floor(this.index / this.columns);
+        const index = this.selection.selectedIndex;
+        const selectedRow = Math.floor(index / this.columns);
         if (selectedRow < this.scrollRow) {
             this.scrollRow = selectedRow;
         }
@@ -301,8 +317,8 @@ export class IconGrid extends Container {
                 .stroke({ color: t.color.textHighlight, width: 2 });
         }
         this.highlight.clear();
-        if (this.items.length > 0) {
-            const { x, y } = this.cellRect(this.index);
+        if (this.selection.length > 0) {
+            const { x, y } = this.cellRect(index);
             this.highlight.rect(x, y, this.cellSize, this.cellSize).fill({ color: t.color.selection });
         }
     }

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

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

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

@@ -1,12 +1,6 @@
 import { Text } from 'pixi.js';
-export interface LabelOptions {
-    text?: string;
-    color?: number;
-    size?: number;
-    /** wraps at this width in pixels; omit for a single unwrapped line */
-    wrapWidth?: number;
-    align?: 'left' | 'center' | 'right';
-    bold?: boolean;
+import { type ThemedTextOptions } from './themedText.ts';
+export interface LabelOptions extends ThemedTextOptions {
     /** Outline in texture pixels, useful for text over artwork. */
     stroke?: {
         color: number;
@@ -23,6 +17,16 @@ export interface LabelOptions {
  * repeating a style object. Pixi renders text to its own texture, so changing the string
  * costs a re-render: cheap enough for a label, wasteful for something updated every
  * frame, where a value that only changes on whole numbers should be guarded.
+ *
+ * @example
+ * ```ts
+ * import { Label } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const gold = new Label({ text: 'Gold: 0', color: 0xffe680 });
+ *
+ * gold.setText('Gold: 50'); // skips the re-render if the string is unchanged
+ * gold.setColor(0xff4444); // flash red on a loss, say
+ * ```
  */
 export declare class Label extends Text {
     private readonly opts;

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

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/Label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,SAAS,CAAC;AAG1C,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,qBAAa,KAAM,SAAQ,IAAI;IAC9B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAe;IACpC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiC;IAE/D,YAAY,OAAO,GAAE,YAAY,GAAG,MAAW,EAyB9C;IAED,6DAA6D;IAC7D,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAE5B;IAED,kEAAkE;IAClE,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAE3B;IAED;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAUN,OAAO,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAG/D;CACD"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/Label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAqC,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAE5F,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACtD,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,KAAM,SAAQ,IAAI;IAC9B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAe;IACpC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiC;IAE/D,YAAY,OAAO,GAAE,YAAY,GAAG,MAAW,EAyB9C;IAED,6DAA6D;IAC7D,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAE5B;IAED,kEAAkE;IAClE,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAE3B;IAED;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAUN,OAAO,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAG/D;CACD"}

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

@@ -1,5 +1,6 @@
 import { Text, TextStyle } from 'pixi.js';
 import { theme, themeChanged } from './theme.js';
+import { normalizeTextOptions, themedAlign } from './themedText.js';
 /**
  * A piece of text, styled from the theme.
  *
@@ -7,10 +8,20 @@ import { theme, themeChanged } from './theme.js';
  * repeating a style object. Pixi renders text to its own texture, so changing the string
  * costs a re-render: cheap enough for a label, wasteful for something updated every
  * frame, where a value that only changes on whole numbers should be guarded.
+ *
+ * @example
+ * ```ts
+ * import { Label } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const gold = new Label({ text: 'Gold: 0', color: 0xffe680 });
+ *
+ * gold.setText('Gold: 50'); // skips the re-render if the string is unchanged
+ * gold.setColor(0xff4444); // flash red on a loss, say
+ * ```
  */
 export class Label extends Text {
     constructor(options = {}) {
-        const opts = typeof options === 'string' ? { text: options } : options;
+        const opts = normalizeTextOptions(options);
         const t = theme();
         super({
             text: opts.text ?? '',
@@ -23,7 +34,7 @@ export class Label extends Text {
                 fontWeight: opts.bold ? 'bold' : 'normal',
                 fill: opts.color ?? t.color.text,
                 lineHeight: (opts.size ?? t.font.size) * t.font.lineHeight,
-                align: opts.align ?? (t.direction === 'rtl' ? 'right' : 'left'),
+                align: themedAlign(opts, t),
                 wordWrap: opts.wrapWidth !== undefined,
                 wordWrapWidth: opts.wrapWidth ?? 0,
                 //without this a long unbroken word overflows its window instead of wrapping
@@ -57,7 +68,7 @@ export class Label extends Text {
             this.style.lineHeight = t.font.size * t.font.lineHeight;
         }
         if (this.opts.align === undefined)
-            this.style.align = t.direction === 'rtl' ? 'right' : 'left';
+            this.style.align = themedAlign(this.opts, t);
     }
     destroy(options) {
         themeChanged.remove(this.themeListener);

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

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

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

@@ -30,9 +30,28 @@ export interface ListViewOptions {
  *
  * Rows that are `disabled` are skipped when moving, so holding a direction never lands on
  * something unusable.
+ *
+ * @example
+ * ```ts
+ * import { ListView } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const menu = new ListView({
+ * 	width: 160,
+ * 	height: 96,
+ * 	items: [
+ * 		{ text: 'Attack' },
+ * 		{ text: 'Item' },
+ * 		{ text: 'Flee', disabled: true },
+ * 	],
+ * 	onSelect: (item, index) => console.log('chose', item.text, index),
+ * });
+ *
+ * menu.handleAction('down'); // highlights "Item"
+ * menu.handleAction('confirm'); // fires onSelect for the highlighted row
+ * ```
  */
 export declare class ListView extends Container {
-    private items;
+    private readonly selection;
     private rows;
     private rowsLayer;
     private highlight;
@@ -41,7 +60,6 @@ export declare class ListView extends Container {
     private viewHeight;
     private rowHeight;
     private readonly explicitRowHeight;
-    private index;
     private scroll;
     private readonly themeListener;
     onSelect: ((item: ListItem, index: number) => void) | null;
@@ -51,8 +69,8 @@ export declare class ListView extends Container {
      * Recolours rows and the default row height from the new theme in place, rather than
      * through `setItems`: a row's optional `icon` is a `Container` the caller owns, and
      * `setItems`'s teardown destroys a row's children on the way out - routing a restyle
-     * through it would destroy the very icons still referenced by `this.items`, the same
-     * trap `IconGrid.swapCells`'s own doc comment describes for its cells.
+     * through it would destroy the very icons still referenced by the selection's items,
+     * the same trap `IconGrid.swapCells`'s own doc comment describes for its cells.
      */
     private restyle;
     destroy(options?: Parameters<Container['destroy']>[0]): void;

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

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/ListView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,WAAW,QAAQ;IACxB,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IAEb,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED;;;;;;;;;;GAUG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACtC,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,IAAI,CAAmB;IAE/B,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,KAAK,CAAkB;IAE/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAU;IAE5C,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,MAAM,CAAK;IAEnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAwB;IAEtD,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAE9D,YAAY,OAAO,EAAE,eAAe,EA6BnC;IAED;;;;;;OAMG;IACH,OAAO,CAAC,OAAO;IA0BN,OAAO,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAGpE;IAED,OAAO,CAAC,QAAQ;IAIhB,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAE9B;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAiDhC;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAK1C;IAED;;;;;OAKG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAe3B;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAK1B;IAED,OAAO,IAAI,OAAO,CAKjB;IAED,6CAA6C;IAC7C,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAWpC;IAED,OAAO,CAAC,OAAO;CAwBf"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/ListView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAIlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,WAAW,QAAQ;IACxB,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IAEb,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACtC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAGvB;IACH,OAAO,CAAC,IAAI,CAAmB;IAE/B,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,KAAK,CAAkB;IAE/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAU;IAE5C,OAAO,CAAC,MAAM,CAAK;IAEnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAwB;IAEtD,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAE9D,YAAY,OAAO,EAAE,eAAe,EA6BnC;IAED;;;;;;OAMG;IACH,OAAO,CAAC,OAAO;IA2BN,OAAO,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAGpE;IAED,OAAO,CAAC,QAAQ;IAIhB,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAE9B;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CA8ChC;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAK1C;IAED;;;;;OAKG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAK3B;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAE1B;IAED,OAAO,IAAI,OAAO,CAEjB;IAED,6CAA6C;IAC7C,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAWpC;IAED,OAAO,CAAC,OAAO;CA0Bf"}

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

@@ -1,5 +1,6 @@
 import { Container, Graphics } from 'pixi.js';
 import { Label } from './Label.js';
+import { SelectionModel } from './SelectionModel.js';
 import { theme, themeChanged } from './theme.js';
 /**
  * A scrolling list of rows, driven by the keyboard.
@@ -11,16 +12,37 @@ import { theme, themeChanged } from './theme.js';
  *
  * Rows that are `disabled` are skipped when moving, so holding a direction never lands on
  * something unusable.
+ *
+ * @example
+ * ```ts
+ * import { ListView } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const menu = new ListView({
+ * 	width: 160,
+ * 	height: 96,
+ * 	items: [
+ * 		{ text: 'Attack' },
+ * 		{ text: 'Item' },
+ * 		{ text: 'Flee', disabled: true },
+ * 	],
+ * 	onSelect: (item, index) => console.log('chose', item.text, index),
+ * });
+ *
+ * menu.handleAction('down'); // highlights "Item"
+ * menu.handleAction('confirm'); // fires onSelect for the highlighted row
+ * ```
  */
 export class ListView extends Container {
     constructor(options) {
         super();
-        this.items = [];
+        this.selection = new SelectionModel({
+            onChange: () => this.refresh(),
+            onHighlight: (item, index) => this.onHighlight?.(item, index),
+        });
         this.rows = [];
         this.rowsLayer = new Container();
         this.highlight = new Graphics();
         this.mask_ = new Graphics();
-        this.index = 0;
         this.scroll = 0;
         this.themeListener = () => this.restyle();
         const t = theme();
@@ -50,8 +72,8 @@ export class ListView extends Container {
      * Recolours rows and the default row height from the new theme in place, rather than
      * through `setItems`: a row's optional `icon` is a `Container` the caller owns, and
      * `setItems`'s teardown destroys a row's children on the way out - routing a restyle
-     * through it would destroy the very icons still referenced by `this.items`, the same
-     * trap `IconGrid.swapCells`'s own doc comment describes for its cells.
+     * through it would destroy the very icons still referenced by the selection's items,
+     * the same trap `IconGrid.swapCells`'s own doc comment describes for its cells.
      */
     restyle() {
         const t = theme();
@@ -59,9 +81,10 @@ export class ListView extends Container {
             this.rowHeight = Math.ceil(t.font.size * t.font.lineHeight) + t.spacing;
         }
         const rtl = t.direction === 'rtl';
+        const items = this.selection.items;
         this.rows.forEach((row, i) => {
             row.y = i * this.rowHeight;
-            const item = this.items[i];
+            const item = items[i];
             const label = row.children.find((child) => child instanceof Label);
             if (label) {
                 label.setColor(item.disabled ? t.color.textDim : t.color.text);
@@ -86,16 +109,15 @@ export class ListView extends Container {
         return Math.max(1, Math.floor(this.viewHeight / this.rowHeight));
     }
     get selectedIndex() {
-        return this.index;
+        return this.selection.selectedIndex;
     }
     get selected() {
-        return this.items[this.index] ?? null;
+        return this.selection.selected;
     }
     get length() {
-        return this.items.length;
+        return this.selection.length;
     }
     setItems(items) {
-        this.items = items;
         for (const row of this.rows)
             row.destroy({ children: true });
         this.rows = [];
@@ -134,9 +156,7 @@ export class ListView extends Container {
             this.rows.push(row);
             this.rowsLayer.addChild(row);
         });
-        this.index = this.items.findIndex((item) => !item.disabled);
-        if (this.index === -1)
-            this.index = 0;
+        this.selection.reset(items);
         this.scroll = 0;
         this.refresh();
     }
@@ -153,34 +173,13 @@ export class ListView extends Container {
      * nothing selectable to move to, so a caller can beep rather than doing nothing.
      */
     move(delta) {
-        if (this.items.length === 0)
-            return false;
-        let next = this.index;
-        //at most one full pass, so a list of entirely disabled rows terminates
-        for (let step = 0; step < this.items.length; step++) {
-            next = (next + delta + this.items.length) % this.items.length;
-            if (!this.items[next].disabled) {
-                this.index = next;
-                this.refresh();
-                this.onHighlight?.(this.items[next], next);
-                return true;
-            }
-        }
-        return false;
+        return this.selection.step((from, count) => (from + delta + count) % count, this.selection.length);
     }
     select(index) {
-        if (index < 0 || index >= this.items.length || this.items[index].disabled)
-            return;
-        this.index = index;
-        this.refresh();
-        this.onHighlight?.(this.items[index], index);
+        this.selection.select(index);
     }
     confirm() {
-        const item = this.selected;
-        if (!item || item.disabled)
-            return false;
-        this.onSelect?.(item, this.index);
-        return true;
+        return this.selection.confirm(this.onSelect);
     }
     /** @returns true when the action was used */
     handleAction(action) {
@@ -199,22 +198,24 @@ export class ListView extends Container {
         //scroll only as far as needed to bring the selection back into view, so the list
         //stays put while the highlight moves within it
         const visible = this.visibleRows;
-        if (this.index < this.scroll) {
-            this.scroll = this.index;
+        const index = this.selection.selectedIndex;
+        const length = this.selection.length;
+        if (index < this.scroll) {
+            this.scroll = index;
         }
-        else if (this.index >= this.scroll + visible) {
-            this.scroll = this.index - visible + 1;
+        else if (index >= this.scroll + visible) {
+            this.scroll = index - visible + 1;
         }
-        this.scroll = Math.max(0, Math.min(this.scroll, Math.max(0, this.items.length - visible)));
+        this.scroll = Math.max(0, Math.min(this.scroll, Math.max(0, length - visible)));
         this.rowsLayer.y = -this.scroll * this.rowHeight;
         const t = theme();
-        if (this.items.length === 0) {
+        if (length === 0) {
             this.highlight.clear();
             return;
         }
         this.highlight
             .clear()
-            .rect(0, (this.index - this.scroll) * this.rowHeight, this.viewWidth, this.rowHeight)
+            .rect(0, (index - this.scroll) * this.rowHeight, this.viewWidth, this.rowHeight)
             .fill({ color: t.color.selection });
     }
 }