@woosh/meep-engine 3.58.0 → 3.60.0

package/src/view/elements/progress/segmented/SegmentTier.js

@@ -0,0 +1,50 @@
+/**
+ * One level of notch on a {@link SegmentedResourceBarView}.
+ *
+ * A tier has a fixed meaning: it marks every multiple of {@link unit} that no coarser tier marks, on every
+ * bar, whatever the bar's max. A tier is dropped when its notches would sit closer than
+ * {@link min_spacing_px} on screen, finest first.
+ */
+export class SegmentTier {
+    /**
+     * Amount between two notches of this tier, in the bar's own units (e.g. 100 hit points)
+     * @type {number}
+     */
+    unit = 1;
+
+    /**
+     * CSS class every notch of this tier carries; the stylesheet owns its colour, height and highlight
+     * @type {string}
+     */
+    class_name = '';
+
+    /**
+     * Notch width in CSS pixels, scaled by the whole part of the device pixel ratio so it stays whole device pixels
+     * @type {number}
+     */
+    width_px = 1;
+
+    /**
+     * Below this on-screen spacing between neighbouring notches, in CSS pixels, the tier is dropped
+     * @type {number}
+     */
+    min_spacing_px = 0;
+
+    /**
+     * @param {number} unit
+     * @param {string} class_name
+     * @param {number} width_px
+     * @param {number} min_spacing_px
+     * @returns {SegmentTier}
+     */
+    static from(unit, class_name, width_px, min_spacing_px) {
+        const r = new SegmentTier();
+
+        r.unit = unit;
+        r.class_name = class_name;
+        r.width_px = width_px;
+        r.min_spacing_px = min_spacing_px;
+
+        return r;
+    }
+}

package/src/view/elements/progress/segmented/SegmentedResourceBarView.d.ts

@@ -1,15 +1,42 @@
+/**
+ * Resource bar in the style of a MOBA health bar: the values fill it end to end, notches mark fixed amounts, and
+ * a ghost behind the fill trails a drop so the loss stays readable for a moment.
+ *
+ * Two modes:
+ * - notches (default): a continuous fill, with a notch at every multiple of each {@link SegmentTier}'s unit;
+ * - cells (`cells` given): `count` separate cells with exact, identical gaps, for counting rounds and the like.
+ *
+ * Notches and cells sit on whole device pixels at any pixel ratio and under a CSS scale. Colours, notch heights
+ * and the ghost are styled by `segmented-resource-bar.css` through `--segmented-bar-*` custom properties.
+ */
 export class SegmentedResourceBarView extends View {
     /**
      *
      * @param {Object} options
-     * @param {(Vector1|ObservedInteger)[]} options.values
+     * @param {(Vector1|ObservedInteger)[]} options.values stacked end to end, value 0 first; their total is clamped to max
      * @param {Vector1|ObservedInteger|ReactiveExpression} [options.max=1]
      * @param {string[]} [options.classList]
+     * @param {{unit:number, class_name:string, width_px:number, min_spacing_px:number}[]} [options.tiers] notch tiers, finest first; see {@link SegmentTier}
+     * @param {{count:number, group:number}|null} [options.cells] draw `count` cells instead of notches, in groups of `group` (0 for none)
+     * @param {number} [options.ghost_delay_ms=450] how long the ghost holds after a drop
+     * @param {number} [options.ghost_duration_ms=350] how long the ghost then takes to catch up; 0 under prefers-reduced-motion
      */
-    constructor({ values, max, classList }: {
+    constructor({ values, max, classList, tiers, cells, ghost_delay_ms, ghost_duration_ms }: {
         values: (Vector1 | ObservedInteger)[];
         max?: Vector1 | ObservedInteger | ReactiveExpression;
         classList?: string[];
+        tiers?: {
+            unit: number;
+            class_name: string;
+            width_px: number;
+            min_spacing_px: number;
+        }[];
+        cells?: {
+            count: number;
+            group: number;
+        } | null;
+        ghost_delay_ms?: number;
+        ghost_duration_ms?: number;
     });
     /**
      *
@@ -23,37 +50,155 @@ export class SegmentedResourceBarView extends View {
      * @private
      */
     private __value_max;
+    /**
+     * @type {{unit:number, class_name:string, width_px:number, min_spacing_px:number}[]}
+     * @private
+     */
+    private __tiers;
+    /**
+     * @type {{count:number, group:number}|null}
+     * @private
+     */
+    private __cells;
+    /**
+     * @type {GhostTrail}
+     * @private
+     */
+    private __ghost;
+    /**
+     * @type {number}
+     * @private
+     */
+    private __ghost_duration_ms;
+    /**
+     * Total fill as a fraction of max, as last drawn
+     * @type {number}
+     * @private
+     */
+    private __total_fraction;
+    /**
+     * @type {MediaQueryList|null}
+     * @private
+     */
+    private __reduced_motion;
+    /**
+     * Watches for the device pixel ratio moving off the one the layout was built for
+     * @type {MediaQueryList|null}
+     * @private
+     */
+    private __dpr_query;
+    /**
+     * @private
+     */
+    private __handle_dpr_change;
+    __frame_pending: boolean;
+    __frame_id: number;
+    /**
+     * @private
+     */
+    private __animate_ghost;
+    __built_max: number;
+    __built_width: number;
+    __built_ratio: number;
+    __built_origin_phase: number;
+    /**
+     * scratch for {@link segment_notch_place}
+     * @type {Float64Array}
+     * @private
+     */
+    private __place;
     /**
      *
      * @type {List<NumericInterval>}
      */
     highlights: List<NumericInterval>;
     el: HTMLDivElement;
-    __v__fill: EmptyView;
-    __value_fills: EmptyView[];
-    __v__ghost: EmptyView;
-    __v_segments: CanvasView;
+    /**
+     * @type {HTMLElement}
+     * @private
+     */
+    private __el_ghost;
+    /**
+     * @type {HTMLElement[]}
+     * @private
+     */
+    private __value_fills;
+    /**
+     * @type {HTMLElement[]}
+     * @private
+     */
+    private __notch_elements;
+    /**
+     * @type {HTMLElement[]}
+     * @private
+     */
+    private __cell_elements;
+    __cell_fill_elements: HTMLDivElement[];
+    __cell_ghost_elements: HTMLDivElement[];
+    __cell_states: Uint8Array;
+    __cell_fill_drawn: Float64Array;
+    __cell_ghost_drawn: Float64Array;
+    /**
+     * The notches' own box; what they are positioned in and what is measured to place them
+     * @type {HTMLElement}
+     * @private
+     */
+    private __el_layout;
     /**
      *
      * @type {ListView}
      */
     highlightViews: ListView;
     /**
-     * We need an observer in order to know when we need to resize the canvas element that holds marks
+     * Tells us when the bar's width moves, so the notches or cells can be placed again
      * @type {DomSizeObserver}
      * @private
      */
     private __sizeObserver;
     update(): void;
-    __updateSize(): void;
     handleMaxChange(): void;
+    /**
+     * Place the notches or cells again, if the max, the bar's width (by {@link REBUILD_WIDTH_THRESHOLD_PX} or more),
+     * its pixel ratio or the device-pixel phase of its left edge has moved since they were last placed.
+     */
     updateSegments(): void;
+    /**
+     * @param {number} max
+     * @param {number} width
+     * @param {number} left
+     * @param {number} ratio
+     * @private
+     */
+    private __place_notches;
+    /**
+     * @param {number} width
+     * @param {number} left
+     * @param {number} ratio
+     * @private
+     */
+    private __place_cells;
     updateFill(): void;
+    /**
+     * Draw the cells (in cell mode) and the ghost as they stand at `time_ms`, and keep animating until the ghost settles
+     * @param {number} time_ms
+     * @private
+     */
+    private __draw;
+    /**
+     * @param {number} total_fraction
+     * @param {number} ghost_fraction
+     * @private
+     */
+    private __draw_cells;
+    /**
+     * Arm a one-shot watch on the current device pixel ratio; it fires when the window moves to another screen or the
+     * page is zoomed, neither of which resizes the bar in CSS pixels
+     * @private
+     */
+    private __watch_device_pixel_ratio;
 }
 import View from "../../../View.js";
 import List from "../../../../core/collection/list/List.js";
-import EmptyView from "../../EmptyView.js";
-import { CanvasView } from "../../CanvasView.js";
 import ListView from "../../../common/ListView.js";
 import Vector1 from "../../../../core/geom/Vector1.js";
 //# sourceMappingURL=SegmentedResourceBarView.d.ts.map

package/src/view/elements/progress/segmented/SegmentedResourceBarView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedResourceBarView.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/SegmentedResourceBarView.js"],"names":[],"mappings":"AAWA;IACI;;;;;;OAMG;IACH;QAJgD,MAAM,EAA3C,CAAC,OAAO,kBAAgB,CAAC,EAAE;QAC0B,GAAG,GAAxD,OAAO,uCAAmC;QACvB,SAAS,GAA5B,MAAM,EAAE;OA6HlB;IAjHG;;;;OAIG;IACH,yBAA8B;IAE9B;;;;OAIG;IACH,oBAAsB;IAGtB;;;OAGG;IACH,YAFU,qBAAqB,CAEH;IAG5B,mBAAuC;IAQvC,qBAAiE;IAGjE,2BAAuB;IASvB,sBAAyD;IAIzD,yBAAoC;IAMpC;;;OAGG;IACH,gBAFU,QAAQ,CAsChB;IAWF;;;;OAIG;IACH,uBAA2C;IA6B/C,eAGC;IAED,qBAQC;IAED,wBAGC;IAED,uBAkGC;IAED,mBAyBC;CACJ;iBAlTgB,kBAAkB;iBALlB,0CAA0C;sBAOrC,oBAAoB;2BADf,qBAAqB;qBAH3B,6BAA6B;oBAF9B,kCAAkC"}
+{"version":3,"file":"SegmentedResourceBarView.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/SegmentedResourceBarView.js"],"names":[],"mappings":"AA0CA;;;;;;;;;;GAUG;AACH;IACI;;;;;;;;;;OAUG;IACH;QARgD,MAAM,EAA3C,CAAC,OAAO,kBAAgB,CAAC,EAAE;QAC0B,GAAG,GAAxD,OAAO,uCAAmC;QACvB,SAAS,GAA5B,MAAM,EAAE;QAC6E,KAAK,GAA1F;YAAC,IAAI,EAAC,MAAM,CAAC;YAAC,UAAU,EAAC,MAAM,CAAC;YAAC,QAAQ,EAAC,MAAM,CAAC;YAAC,cAAc,EAAC,MAAM,CAAA;SAAC,EAAE;QAC9B,KAAK,GAAjD;YAAC,KAAK,EAAC,MAAM,CAAC;YAAC,KAAK,EAAC,MAAM,CAAA;SAAC,GAAC,IAAI;QAChB,cAAc,GAA/B,MAAM;QACW,iBAAiB,GAAlC,MAAM;OAsQhB;IA9OG;;;;OAIG;IACH,yBAA8B;IAE9B;;;;OAIG;IACH,oBAAsB;IAEtB;;;OAGG;IACH,gBAAoB;IAEpB;;;OAGG;IACH,gBAAoB;IAEpB;;;OAGG;IACH,gBAA+B;IAG/B;;;OAGG;IACH,4BAA4C;IAE5C;;;;OAIG;IACH,yBAAyB;IAEzB;;;OAGG;IACH,yBAAgH;IAEhH;;;;OAIG;IACH,oBAAuB;IAie3B;;OAEG;IACH,4BASC;IAzeG,yBAA4B;IAC5B,mBAAmB;IA8bvB;;OAEG;IACH,wBAQC;IArcG,oBAAsB;IACtB,sBAAwB;IACxB,sBAAwB;IACxB,6BAA+B;IAE/B;;;;OAIG;IACH,gBAAkC;IAElC;;;OAGG;IACH,YAFU,qBAAqB,CAEH;IAG5B,mBAAuC;IASvC;;;OAGG;IACH,mBAA+C;IAG/C;;;OAGG;IACH,sBAAuB;IAEvB;;;OAGG;IACH,yBAA0B;IAE1B;;;OAGG;IACH,wBAAyB;IACzB,uCAA8B;IAC9B,wCAA+B;IAC/B,0BAAqE;IAGrE,gCAA2E;IAC3E,iCAA4E;IAkBxE;;;;OAIG;IACH,oBAAgD;IA8BpD;;;OAGG;IACH,gBAFU,QAAQ,CAsChB;IAWF;;;;OAIG;IACH,uBAA2C;IAuC/C,eAGC;IAED,wBAGC;IAED;;;OAGG;IACH,uBAmDC;IAED;;;;;;OAMG;IACH,wBAoCC;IAED;;;;;OAKG;IACH,sBAkBC;IAED,mBAwCC;IAED;;;;OAIG;IACH,eAaC;IAED;;;;OAIG;IACH,qBA6BC;IAeD;;;;OAIG;IACH,mCAUC;CAeJ;iBAxnBgB,kBAAkB;iBALlB,0CAA0C;qBAGtC,6BAA6B;oBAF9B,kCAAkC"}