@woosh/meep-engine 3.59.0 → 3.60.1

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

@@ -0,0 +1,280 @@
+import { assert } from "../../../../core/assert.js";
+import { clamp01 } from "../../../../core/math/clamp01.js";
+
+/**
+ * Floats per loss in {@link GhostTrail}'s store: [start, duration, low, amplitude]. A loss's trail is
+ * `low + amplitude * u²`, where u runs from 1 (held, and at the start of the ease) to 0 (the ease is over).
+ * @type {number}
+ */
+const LOSS_STRIDE = 4;
+
+/**
+ * A value that trails another one down: the "ghost" behind a bar's fill that shows how much was just lost.
+ *
+ * The knobs are the three Dota 2 exposes for its hero bars as console variables: a short hold after a drop
+ * (`dota_health_hurt_delay`) and a decay whose length sits between a floor and a ceiling
+ * (`dota_health_hurt_decay_time_min` / `_max`). The defaults, 0.1 s / 0.3 s / 0.8 s, are the values players'
+ * published configs list as Dota's own; Valve does not document them. Everything else here is this class's own
+ * choice, not known Dota behaviour: the decay's length growing linearly with the loss (the whole bar takes the
+ * ceiling), the ease-out curve, and how losses that overlap combine.
+ *
+ * Every drop is a loss with a trail of its own: it holds at the value from before the drop for {@link delay_ms},
+ * then eases down over a length sized by that loss alone. The trail shows the highest of the live losses' trails,
+ * and never less than the target. Because no loss looks at another, a drop is drawn the same whether the trail
+ * was at rest or still moving when it came: a damage tick that lands just before or just after the previous one
+ * has faded looks the same, where a single trail that re-plans has to pick one side of that line.
+ *
+ * Each loss eases toward the lowest the target has been since it happened, never toward the target itself, so a
+ * rise that stays under the trail (regeneration after a hit) cannot lift it. When a later drop lowers that floor,
+ * the rest of the loss's ease is rescaled toward the new floor from where it is, so it does not jump. The trail
+ * is continuous in time and never rises unless the target rises above it; when it does, the trail jumps to the
+ * target and every loss is forgotten.
+ *
+ * A target that is not a finite number is ignored: the trail carries on with what it had, so one bad value cannot
+ * leave it NaN, and its owner animating it forever, for every value after.
+ *
+ * Each loss's start and length are fixed when it happens, so changing the knobs never revives or reshapes a trail
+ * already under way.
+ *
+ * Time is passed in, in milliseconds on any monotonic clock, so the trail can be driven and checked without one.
+ */
+export class GhostTrail {
+    /**
+     * How long a loss's trail holds before it starts to ease down
+     * @type {number}
+     */
+    delay_ms = 100;
+
+    /**
+     * Length of the ease for the smallest loss; 0 with {@link duration_max_ms} 0 snaps once the hold ends
+     * @type {number}
+     */
+    duration_min_ms = 300;
+
+    /**
+     * Length of the ease for a loss of the whole bar (1); smaller losses take proportionally less, down to
+     * {@link duration_min_ms}
+     * @type {number}
+     */
+    duration_max_ms = 800;
+
+    /**
+     * The target, as last set
+     * @type {number}
+     * @private
+     */
+    __to = 0;
+
+    /**
+     * Live losses, {@link LOSS_STRIDE} floats each: when the ease starts (after the hold), the ease's length, the
+     * lowest the target has been since the loss, and how far above that the trail is while u is 1
+     * @type {Float64Array}
+     * @private
+     */
+    __losses = new Float64Array(LOSS_STRIDE * 8);
+
+    /**
+     * @type {number}
+     * @private
+     */
+    __loss_count = 0;
+
+    /**
+     * Length of the ease for a loss of `gap`, a fraction of the bar
+     * @param {number} gap
+     * @returns {number}
+     * @private
+     */
+    __duration_for(gap) {
+        const min = this.duration_min_ms;
+
+        return min + (this.duration_max_ms - min) * clamp01(gap);
+    }
+
+    /**
+     * How much of one loss's ease is left at `time_ms`: 1 while it holds, falling to 0 when the ease is over
+     * @param {number} index
+     * @param {number} time_ms
+     * @returns {number}
+     * @private
+     */
+    __loss_u(index, time_ms) {
+        const losses = this.__losses;
+        const offset = index * LOSS_STRIDE;
+
+        const elapsed = time_ms - losses[offset];
+        const duration = losses[offset + 1];
+
+        if (elapsed < 0) {
+            return 1;
+        }
+
+        if (elapsed >= duration) {
+            return 0;
+        }
+
+        return 1 - elapsed / duration;
+    }
+
+    /**
+     * Where one loss's trail is at `time_ms`; an ease-out, fastest at the start of the ease
+     * @param {number} index
+     * @param {number} time_ms
+     * @returns {number}
+     * @private
+     */
+    __loss_at(index, time_ms) {
+        const offset = index * LOSS_STRIDE;
+        const u = this.__loss_u(index, time_ms);
+
+        return this.__losses[offset + 2] + this.__losses[offset + 3] * u * u;
+    }
+
+    /**
+     * @param {number} start
+     * @param {number} duration
+     * @param {number} low
+     * @param {number} amplitude
+     * @private
+     */
+    __add_loss(start, duration, low, amplitude) {
+        const count = this.__loss_count;
+
+        if ((count + 1) * LOSS_STRIDE > this.__losses.length) {
+            const grown = new Float64Array(this.__losses.length * 2);
+
+            grown.set(this.__losses);
+
+            this.__losses = grown;
+        }
+
+        const losses = this.__losses;
+        const offset = count * LOSS_STRIDE;
+
+        losses[offset] = start;
+        losses[offset + 1] = duration;
+        losses[offset + 2] = low;
+        losses[offset + 3] = amplitude;
+
+        this.__loss_count = count + 1;
+    }
+
+    /**
+     * Tell the trail its target's new value.
+     * @param {number} target
+     * @param {number} time_ms
+     */
+    set(target, time_ms) {
+        // the knobs are public and may change between calls, so they are checked where they are read
+        assert.isFinite(this.delay_ms, 'delay_ms');
+        assert.greaterThanOrEqual(this.delay_ms, 0, 'delay_ms must not be negative');
+        assert.isFinite(this.duration_max_ms, 'duration_max_ms');
+        assert.greaterThanOrEqual(this.duration_min_ms, 0, 'duration_min_ms must not be negative');
+        assert.greaterThanOrEqual(this.duration_max_ms, this.duration_min_ms, 'duration_max_ms must not be under duration_min_ms');
+        assert.isFinite(time_ms, 'time_ms');
+
+        if (!Number.isFinite(target)) {
+            return;
+        }
+
+        if (target >= this.sample(time_ms)) {
+            // a rise to or above the trail: jump to it, and forget every loss
+            this.__to = target;
+            this.__loss_count = 0;
+
+            return;
+        }
+
+        // drop the losses whose ease is over (each rests at its low, which is never above the target); for the rest,
+        // if the target went under the low, lower it and rescale what is left of the ease so the trail is where it was
+        const losses = this.__losses;
+        const count = this.__loss_count;
+
+        let kept = 0;
+
+        for (let i = 0; i < count; i++) {
+            const offset = i * LOSS_STRIDE;
+
+            const u = this.__loss_u(i, time_ms);
+
+            if (u <= 0) {
+                continue;
+            }
+
+            let low = losses[offset + 2];
+            let amplitude = losses[offset + 3];
+
+            if (target < low) {
+                // where the trail is now, kept: low + amplitude * u² before and after. u > 0 here, and the
+                // product amplitude * u² stays at most the trail's height over the new low however small u is
+                const value = low + amplitude * u * u;
+
+                low = target;
+                amplitude = (value - low) / (u * u);
+            }
+
+            const kept_offset = kept * LOSS_STRIDE;
+
+            losses[kept_offset] = losses[offset];
+            losses[kept_offset + 1] = losses[offset + 1];
+            losses[kept_offset + 2] = low;
+            losses[kept_offset + 3] = amplitude;
+
+            kept++;
+        }
+
+        this.__loss_count = kept;
+
+        const before = this.__to;
+
+        if (target < before) {
+            this.__add_loss(time_ms + this.delay_ms, this.__duration_for(before - target), target, before - target);
+        }
+
+        this.__to = target;
+    }
+
+    /**
+     * Where the trail is at a given time: the highest of the live losses' trails, and never below the target.
+     * @param {number} time_ms
+     * @returns {number}
+     */
+    sample(time_ms) {
+        let value = this.__to;
+
+        const count = this.__loss_count;
+
+        for (let i = 0; i < count; i++) {
+            const v = this.__loss_at(i, time_ms);
+
+            if (v > value) {
+                value = v;
+            }
+        }
+
+        return value;
+    }
+
+    /**
+     * Whether the trail shows the target and will not move until {@link set} is called again
+     * @param {number} time_ms
+     * @returns {boolean}
+     */
+    is_settled(time_ms) {
+        const to = this.__to;
+        const losses = this.__losses;
+        const count = this.__loss_count;
+
+        for (let i = 0; i < count; i++) {
+            const offset = i * LOSS_STRIDE;
+
+            // a loss still easing and still above the target; one at or under it stays there, since its trail
+            // only falls and the target holds until the next set
+            if (time_ms < losses[offset] + losses[offset + 1] && this.__loss_at(i, time_ms) > to) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+}

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

@@ -1,5 +1,7 @@
 /**
- *
+ * @deprecated {@link SegmentedResourceBarView} no longer reads this: its canvas notches gave way to DOM notches
+ * styled by `segmented-resource-bar.css`, and this ladder's tiers changed meaning with the bar's max. Pass
+ * {@link SegmentTier}s as `tiers`, or rely on {@link SEGMENT_TIERS_DEFAULT}.
  * @type {SegmentDefinition[]}
  */
 export const RESOURCE_BAR_SEGMENTS: SegmentDefinition[];

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

@@ -1 +1 @@
-{"version":3,"file":"RESOURCE_BAR_SEGMENTS.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/RESOURCE_BAR_SEGMENTS.js"],"names":[],"mappings":"AAEA;;;GAGG;AACH,oCAFU,iBAAiB,EAAE,CAiL3B;kCArLgC,wBAAwB"}
+{"version":3,"file":"RESOURCE_BAR_SEGMENTS.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/RESOURCE_BAR_SEGMENTS.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,oCAFU,iBAAiB,EAAE,CAiL3B;kCAvLgC,wBAAwB"}

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

@@ -1,7 +1,9 @@
 import { SegmentDefinition } from "./SegmentDefinition.js";
 
 /**
- *
+ * @deprecated {@link SegmentedResourceBarView} no longer reads this: its canvas notches gave way to DOM notches
+ * styled by `segmented-resource-bar.css`, and this ladder's tiers changed meaning with the bar's max. Pass
+ * {@link SegmentTier}s as `tiers`, or rely on {@link SEGMENT_TIERS_DEFAULT}.
  * @type {SegmentDefinition[]}
  */
 export const RESOURCE_BAR_SEGMENTS = [

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

@@ -0,0 +1,11 @@
+/**
+ * Decade ladder a {@link SegmentedResourceBarView} uses when given no tiers: a short notch every 10, a full one
+ * every 100, a wide one every 1000. Each marks the same amount on every bar; the finer ones drop out on bars
+ * where they would crowd. The class names are styled by `segmented-resource-bar.css`, and a caller's own tiers
+ * may reuse them.
+ *
+ * @type {SegmentTier[]}
+ */
+export const SEGMENT_TIERS_DEFAULT: SegmentTier[];
+import { SegmentTier } from "./SegmentTier.js";
+//# sourceMappingURL=SEGMENT_TIERS_DEFAULT.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SEGMENT_TIERS_DEFAULT.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/SEGMENT_TIERS_DEFAULT.js"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,oCAFU,WAAW,EAAE,CAMrB;4BAd0B,kBAAkB"}

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

@@ -0,0 +1,15 @@
+import { SegmentTier } from "./SegmentTier.js";
+
+/**
+ * Decade ladder a {@link SegmentedResourceBarView} uses when given no tiers: a short notch every 10, a full one
+ * every 100, a wide one every 1000. Each marks the same amount on every bar; the finer ones drop out on bars
+ * where they would crowd. The class names are styled by `segmented-resource-bar.css`, and a caller's own tiers
+ * may reuse them.
+ *
+ * @type {SegmentTier[]}
+ */
+export const SEGMENT_TIERS_DEFAULT = [
+    SegmentTier.from(10, 'segment-tier-minor', 1, 4),
+    SegmentTier.from(100, 'segment-tier-major', 1, 3),
+    SegmentTier.from(1000, 'segment-tier-super', 2, 0),
+];

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

@@ -1,3 +1,6 @@
+/**
+ * @deprecated a canvas-drawn notch, which {@link SegmentedResourceBarView} no longer uses; see {@link SegmentTier}
+ */
 export class SegmentDefinition {
     /**
      * @return {SegmentDefinition}

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentDefinition.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/SegmentDefinition.js"],"names":[],"mappings":"AAAA;IAaI;;;;OAIG;IACH,mBAHW,MAAM,kCADL,iBAAiB,CAW5B;IAxBD,cAAU;IAEV;;;;;OAKG;IACH,UAJW,wBAAwB,KACxB,MAAM,UACN,MAAM,QAIhB;CAeJ"}
+{"version":3,"file":"SegmentDefinition.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/SegmentDefinition.js"],"names":[],"mappings":"AAAA;;GAEG;AACH;IAaI;;;;OAIG;IACH,mBAHW,MAAM,kCADL,iBAAiB,CAW5B;IAxBD,cAAU;IAEV;;;;;OAKG;IACH,UAJW,wBAAwB,KACxB,MAAM,UACN,MAAM,QAIhB;CAeJ"}

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

@@ -1,3 +1,6 @@
+/**
+ * @deprecated a canvas-drawn notch, which {@link SegmentedResourceBarView} no longer uses; see {@link SegmentTier}
+ */
 export class SegmentDefinition {
     value = 0;
 

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

@@ -0,0 +1,38 @@
+/**
+ * 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 {
+    /**
+     * @param {number} unit
+     * @param {string} class_name
+     * @param {number} width_px
+     * @param {number} min_spacing_px
+     * @returns {SegmentTier}
+     */
+    static from(unit: number, class_name: string, width_px: number, min_spacing_px: number): SegmentTier;
+    /**
+     * Amount between two notches of this tier, in the bar's own units (e.g. 100 hit points)
+     * @type {number}
+     */
+    unit: number;
+    /**
+     * CSS class every notch of this tier carries; the stylesheet owns its colour, height and highlight
+     * @type {string}
+     */
+    class_name: string;
+    /**
+     * 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: number;
+    /**
+     * Below this on-screen spacing between neighbouring notches, in CSS pixels, the tier is dropped
+     * @type {number}
+     */
+    min_spacing_px: number;
+}
+//# sourceMappingURL=SegmentTier.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentTier.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/SegmentTier.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH;IAyBI;;;;;;OAMG;IACH,kBANW,MAAM,cACN,MAAM,YACN,MAAM,kBACN,MAAM,GACJ,WAAW,CAWvB;IAxCD;;;OAGG;IACH,MAFU,MAAM,CAEP;IAET;;;OAGG;IACH,YAFU,MAAM,CAEA;IAEhB;;;OAGG;IACH,UAFU,MAAM,CAEH;IAEb;;;OAGG;IACH,gBAFU,MAAM,CAEG;CAmBtB"}

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,45 @@
+/**
+ * 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=100] how long the ghost holds after a drop; see {@link GhostTrail}
+     * @param {number} [options.ghost_duration_min_ms=300] how long the ghost takes to close the smallest loss
+     * @param {number} [options.ghost_duration_max_ms=800] how long it takes to close a loss of the whole bar; both
+     *  durations are 0 under prefers-reduced-motion, so the ghost holds, then snaps
      */
-    constructor({ values, max, classList }: {
+    constructor({ values, max, classList, tiers, cells, ghost_delay_ms, ghost_duration_min_ms, ghost_duration_max_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_min_ms?: number;
+        ghost_duration_max_ms?: number;
     });
     /**
      *
@@ -23,37 +53,160 @@ 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_min_ms;
+    /**
+     * @type {number}
+     * @private
+     */
+    private __ghost_duration_max_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;;;;;;;;;;;;OAYG;IACH;QAVgD,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,qBAAqB,GAAtC,MAAM;QACW,qBAAqB,GAAtC,MAAM;OAiRhB;IApPG;;;;OAIG;IACH,yBAA8B;IAE9B;;;;OAIG;IACH,oBAAsB;IAEtB;;;OAGG;IACH,gBAAoB;IAEpB;;;OAGG;IACH,gBAAoB;IAEpB;;;OAGG;IACH,gBAA+B;IAG/B;;;OAGG;IACH,gCAAoD;IAEpD;;;OAGG;IACH,gCAAoD;IAEpD;;;;OAIG;IACH,yBAAyB;IAEzB;;;OAGG;IACH,yBAAgH;IAEhH;;;;OAIG;IACH,oBAAuB;IAoe3B;;OAEG;IACH,4BASC;IA5eG,yBAA4B;IAC5B,mBAAmB;IAicvB;;OAEG;IACH,wBAQC;IAxcG,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,mBA2CC;IAED;;;;OAIG;IACH,eAaC;IAED;;;;OAIG;IACH,qBA6BC;IAeD;;;;OAIG;IACH,mCAUC;CAeJ;iBAvoBgB,kBAAkB;iBALlB,0CAA0C;qBAGtC,6BAA6B;oBAF9B,kCAAkC"}