@woosh/meep-engine 3.60.1 → 3.60.3

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

@@ -8,8 +8,11 @@ import View from "../../../View.js";
 import EmptyView from "../../EmptyView.js";
 import { GhostTrail } from "./GhostTrail.js";
 import { SEGMENT_TIERS_DEFAULT } from "./SEGMENT_TIERS_DEFAULT.js";
+import { segment_cell_extent } from "./segment_cell_extent.js";
 import { segment_cell_layout } from "./segment_cell_layout.js";
-import { segment_notch_place } from "./segment_notch_place.js";
+import { segment_frame_transform } from "./segment_frame_transform.js";
+import { segment_mask_apply, segment_mask_url } from "./segment_mask_url.js";
+import { segment_mask_width } from "./segment_mask_width.js";
 import { segment_tick_positions } from "./segment_tick_positions.js";
 
 /**
@@ -19,37 +22,35 @@ import { segment_tick_positions } from "./segment_tick_positions.js";
 const REBUILD_WIDTH_THRESHOLD_PX = 0.5;
 
 /**
- * Cell fills within this of a whole cell count as whole, so 7 of 30 rounds is 7 full cells and not 7 and a sliver
+ * A measured CSS scale this close to 1 is no scale at all, only the rounding in how the browser reports widths
  * @type {number}
  */
-const CELL_FILL_TOLERANCE = 1e-9;
-
-const CELL_STATE_EMPTY = 0;
-const CELL_STATE_PARTIAL = 1;
-const CELL_STATE_FILLED = 2;
-
-const CELL_STATE_CLASS = ['cell empty', 'cell partial', 'cell filled'];
+const UNSCALED_TOLERANCE = 2e-3;
 
 /**
- * @param {number} x
- * @returns {number}
+ * How often a linked bar checks that its notches or cells still sit on the screen's pixels, in milliseconds. A
+ * transform on an ancestor or on a containing iframe moves them without any event the bar hears.
+ * @type {number}
  */
-function snap_whole(x) {
-    const r = Math.round(x);
-
-    return Math.abs(x - r) <= CELL_FILL_TOLERANCE ? r : x;
-}
+const RECHECK_INTERVAL_MS = 250;
 
 /**
  * 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 (default): a continuous fill, with a notch at every multiple of each {@link SegmentTier}'s unit. Each
+ *   tier is one layer the width of the bar (`.notch.<class_name>`), which CSS paints — colour, height — and a mask
+ *   cuts to that tier's notches;
+ * - cells (`cells` given): `count` separate cells with exact, identical gaps, for counting rounds and the like. One
+ *   strip (`.cell-strip`, the empty cells' colour) holding a `.cell-ghost` and a `.cell-fill`, cut into cells by a
+ *   mask; the fill and ghost end on a cell's edge, or part way across one that is filling.
  *
- * 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.
+ * The masks are drawn in whole device pixels and the layers they cut placed so those pixels land on the screen's,
+ * at any pixel ratio and under a CSS scale: every notch of a tier is the same width and every gap the same, at
+ * 125% as at 100%. Colours, notch heights and the ghost are styled by `segmented-resource-bar.css` through
+ * `--segmented-bar-*` custom properties. Where masks cannot be drawn (no canvas, as under jsdom) the layers are
+ * placed but uncut.
  */
 export class SegmentedResourceBarView extends View {
     /**
@@ -162,6 +163,13 @@ export class SegmentedResourceBarView extends View {
         this.__frame_id = 0;
         this.__animate_ghost = this.__animate_ghost.bind(this);
 
+        /**
+         * The max moved since the fill was last drawn: the next fill resets the ghost rather than trailing a loss
+         * @type {boolean}
+         * @private
+         */
+        this.__max_moved = false;
+
         // what the layout was last built for, so it is rebuilt only when one of them moves
         this.__built_max = NaN;
         this.__built_width = NaN;
@@ -169,11 +177,41 @@ export class SegmentedResourceBarView extends View {
         this.__built_origin_phase = NaN;
 
         /**
-         * scratch for {@link segment_notch_place}
-         * @type {Float64Array}
+         * Cell mode: the cells as last laid out across {@link __el_strip}, or null before the bar has been measured
+         * @type {SegmentCellLayout|null}
+         * @private
+         */
+        this.__cell_layout = null;
+
+        /**
+         * Device pixels per CSS pixel the cells were laid out at
+         * @type {number}
+         * @private
+         */
+        this.__cell_ratio = 1;
+
+        /**
+         * scratch: [x, width, ...] device-pixel columns for a mask
+         * @type {number[]}
          * @private
          */
-        this.__place = new Float64Array(2);
+        this.__columns = [];
+
+        /**
+         * scratch for {@link segment_frame_transform}: [scale, offset]
+         * @type {number[]}
+         * @private
+         */
+        this.__frame = [1, 0];
+
+        /**
+         * The timer that re-checks the placement while linked; 0 when none
+         * @type {number}
+         * @private
+         */
+        this.__recheck_timer = 0;
+
+        this.__recheck = this.__recheck.bind(this);
 
         /**
          *
@@ -205,23 +243,20 @@ export class SegmentedResourceBarView extends View {
         this.__value_fills = [];
 
         /**
+         * Notch mode: one layer per tier, the whole bar wide, styled by the tier's class and masked to its notches
          * @type {HTMLElement[]}
          * @private
          */
-        this.__notch_elements = [];
+        this.__tier_layers = [];
 
         /**
-         * @type {HTMLElement[]}
+         * Cell mode: the strip the cells are cut from by a mask, and the ghost and fill drawn along it
+         * @type {HTMLElement|null}
          * @private
          */
-        this.__cell_elements = [];
-        this.__cell_fill_elements = [];
-        this.__cell_ghost_elements = [];
-        this.__cell_states = new Uint8Array(cells === null ? 0 : cells.count);
-
-        // what each cell's fill and ghost were last drawn at, so an animation frame writes only the cells that moved
-        this.__cell_fill_drawn = new Float64Array(cells === null ? 0 : cells.count);
-        this.__cell_ghost_drawn = new Float64Array(cells === null ? 0 : cells.count);
+        this.__el_strip = null;
+        this.__el_cell_ghost = null;
+        this.__el_cell_fill = null;
 
         if (cells === null) {
             this.el.appendChild(this.__el_ghost);
@@ -246,29 +281,35 @@ export class SegmentedResourceBarView extends View {
              */
             this.__el_layout = document.createElement('div');
             this.__el_layout.className = 'notches';
+
+            for (let i = 0; i < tiers.length; i++) {
+                const el_tier = document.createElement('div');
+                el_tier.className = `notch ${tiers[i].class_name}`;
+                el_tier.style.display = 'none';
+
+                this.__el_layout.appendChild(el_tier);
+                this.__tier_layers[i] = el_tier;
+            }
         } else {
             this.__el_layout = document.createElement('div');
             this.__el_layout.className = 'cells';
 
-            for (let i = 0; i < cells.count; i++) {
-                const el_cell = document.createElement('div');
-                el_cell.className = CELL_STATE_CLASS[CELL_STATE_EMPTY];
+            const el_strip = document.createElement('div');
+            el_strip.className = 'cell-strip';
 
-                const el_cell_ghost = document.createElement('div');
-                el_cell_ghost.className = 'cell-ghost';
+            const el_cell_ghost = document.createElement('div');
+            el_cell_ghost.className = 'cell-ghost';
 
-                const el_cell_fill = document.createElement('div');
-                el_cell_fill.className = 'cell-fill';
+            const el_cell_fill = document.createElement('div');
+            el_cell_fill.className = 'cell-fill';
 
-                el_cell.appendChild(el_cell_ghost);
-                el_cell.appendChild(el_cell_fill);
+            el_strip.appendChild(el_cell_ghost);
+            el_strip.appendChild(el_cell_fill);
+            this.__el_layout.appendChild(el_strip);
 
-                this.__el_layout.appendChild(el_cell);
-
-                this.__cell_elements[i] = el_cell;
-                this.__cell_ghost_elements[i] = el_cell_ghost;
-                this.__cell_fill_elements[i] = el_cell_fill;
-            }
+            this.__el_strip = el_strip;
+            this.__el_cell_ghost = el_cell_ghost;
+            this.__el_cell_fill = el_cell_fill;
         }
 
         this.el.appendChild(this.__el_layout);
@@ -347,6 +388,10 @@ export class SegmentedResourceBarView extends View {
         this.__sizeObserver.start();
         this.__watch_device_pixel_ratio();
         this.update();
+
+        if (typeof setInterval === 'function') {
+            this.__recheck_timer = setInterval(this.__recheck, RECHECK_INTERVAL_MS);
+        }
     }
 
     unlink() {
@@ -356,6 +401,11 @@ export class SegmentedResourceBarView extends View {
 
         this.__sizeObserver.stop();
 
+        if (this.__recheck_timer !== 0) {
+            clearInterval(this.__recheck_timer);
+            this.__recheck_timer = 0;
+        }
+
         if (this.__dpr_query !== null) {
             this.__dpr_query.removeEventListener('change', this.__handle_dpr_change);
             this.__dpr_query = null;
@@ -375,6 +425,9 @@ export class SegmentedResourceBarView extends View {
     }
 
     handleMaxChange() {
+        // the same amount out of a different max is a different share of the bar, and nothing was lost
+        this.__max_moved = true;
+
         this.updateSegments();
         this.updateFill();
     }
@@ -382,15 +435,24 @@ export class SegmentedResourceBarView extends View {
     /**
      * 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.
+     *
+     * Both are drawn as a mask in whole device pixels over a layer CSS paints (see {@link segment_mask_url}): a DOM
+     * box per notch or cell cannot be put on the device-pixel grid at a fractional pixel ratio, where Chrome paints
+     * a row of equal 1 px gaps as 1, 2, 1, 2... whatever positions it is given (measured at 125% and 150%).
      */
     updateSegments() {
         const el = this.__el_layout;
 
         /**
-         * width as laid out, before any transform on an ancestor
+         * width as laid out, before any transform on an ancestor. Not `offsetWidth`, which is rounded to a whole
+         * pixel and would read as a scale of its own (176 laid out against 175.84 drawn: 0.9991)
          * @type {number}
          */
-        const layout_width = el.offsetWidth;
+        let layout_width = typeof getComputedStyle === 'function' ? parseFloat(getComputedStyle(el).width) : NaN;
+
+        if (!(layout_width > 0)) {
+            layout_width = el.offsetWidth;
+        }
 
         if (!(layout_width > 0)) {
             // not laid out (detached, display:none); nothing to place against
@@ -401,13 +463,21 @@ export class SegmentedResourceBarView extends View {
 
         const dpr = typeof devicePixelRatio === 'number' && devicePixelRatio > 0 ? devicePixelRatio : 1;
 
-        // a CSS scale on an ancestor shows each CSS pixel of the bar as `scale` page pixels
-        const scale = rect.width / layout_width;
+        // how the iframes this bar sits in are drawn by the pages around them — invisible from in here
+        const frame = segment_frame_transform(el.ownerDocument.defaultView, this.__frame);
+        const frame_scale = frame[0];
+        const frame_offset = frame[1];
+
+        // a CSS scale on an ancestor shows each CSS pixel of the bar as `scale` page pixels. The computed width is
+        // serialised to a few decimals (175.844 for 175.84375), so an unscaled bar measures a hair off 1 — enough to
+        // put a width that should be whole in device pixels just past it — and is read as unscaled
+        const measured_scale = (rect.width > 0 ? rect.width / layout_width : 1) * frame_scale;
+        const scale = Math.abs(measured_scale - 1) < UNSCALED_TOLERANCE ? 1 : measured_scale;
 
         // device pixels per CSS pixel of the bar
         const ratio = dpr * scale;
 
-        const origin_device = rect.left * dpr;
+        const origin_device = (frame_offset + rect.left * frame_scale) * dpr;
         const origin_phase = origin_device - Math.round(origin_device);
 
         const max = this.__value_max.getValue();
@@ -426,85 +496,109 @@ export class SegmentedResourceBarView extends View {
         this.__built_ratio = ratio;
         this.__built_origin_phase = origin_phase;
 
-        // the bar's left edge in its own CSS pixels, such that left * ratio lands where the page puts it
-        const local_left = origin_device / ratio;
+        // the masked layer starts on a whole device pixel, and is a width whole in CSS and device pixels both
+        const shift_px = -origin_phase / ratio;
+        const width_device = segment_mask_width(layout_width - Math.max(0, shift_px), ratio);
 
         if (this.__cells === null) {
-            this.__place_notches(max, layout_width, local_left, ratio);
+            this.__place_notches(max, width_device, shift_px, ratio);
         } else {
-            this.__place_cells(layout_width, local_left, ratio);
+            this.__place_cells(width_device, shift_px, ratio);
         }
     }
 
+    /**
+     * @param {HTMLElement} el
+     * @param {number} width_device
+     * @param {number} shift_px
+     * @param {number} ratio
+     * @private
+     */
+    __place_layer(el, width_device, shift_px, ratio) {
+        const style = el.style;
+
+        style.left = `${shift_px}px`;
+        style.width = `${width_device / ratio}px`;
+    }
+
     /**
      * @param {number} max
-     * @param {number} width
-     * @param {number} left
+     * @param {number} width_device
+     * @param {number} shift_px
      * @param {number} ratio
      * @private
      */
-    __place_notches(max, width, left, ratio) {
+    __place_notches(max, width_device, shift_px, ratio) {
         const tiers = this.__tiers;
-        const ticks = segment_tick_positions(max, width, tiers);
+        const ticks = segment_tick_positions(max, width_device / ratio, tiers);
 
         const tick_count = ticks.length;
-        const elements = this.__notch_elements;
-        const container = this.__el_layout;
+        const columns = this.__columns;
+        const layers = this.__tier_layers;
 
-        while (elements.length < tick_count) {
-            const el = document.createElement('div');
+        // a notch is `width_px` CSS pixels wide, scaled by the whole part of the ratio, so it stays whole
+        const notch_scale = Math.max(1, Math.round(ratio));
 
-            container.appendChild(el);
-            elements.push(el);
-        }
+        for (let t = 0; t < tiers.length; t++) {
+            const notch_width = tiers[t].width_px * notch_scale;
 
-        while (elements.length > tick_count) {
-            container.removeChild(elements.pop());
-        }
+            let count = 0;
 
-        const place = this.__place;
+            for (let i = 0; i < tick_count; i++) {
+                const tick = ticks[i];
 
-        for (let i = 0; i < tick_count; i++) {
-            const tick = ticks[i];
-            const tier = tiers[tick.tier];
+                if (tick.tier !== t) {
+                    continue;
+                }
 
-            segment_notch_place(place, 0, tick.value / max, tier.width_px, left, width, ratio);
+                const centre = Math.round(tick.value / max * width_device);
+                const x = Math.min(Math.max(0, centre - Math.floor(notch_width / 2)), width_device - notch_width);
 
-            const el = elements[i];
+                columns[count * 2] = x;
+                columns[count * 2 + 1] = notch_width;
+                count++;
+            }
 
-            el.className = `notch ${tier.class_name}`;
+            const el = layers[t];
 
-            const style = el.style;
+            if (count === 0) {
+                el.style.display = 'none';
+                continue;
+            }
 
-            style.left = `${place[0]}px`;
-            style.width = `${place[1]}px`;
+            el.style.display = '';
+
+            this.__place_layer(el, width_device, shift_px, ratio);
+            segment_mask_apply(el, segment_mask_url(width_device, columns, count));
         }
     }
 
     /**
-     * @param {number} width
-     * @param {number} left
+     * @param {number} width_device
+     * @param {number} shift_px
      * @param {number} ratio
      * @private
      */
-    __place_cells(width, left, ratio) {
+    __place_cells(width_device, shift_px, ratio) {
         const cells = this.__cells;
 
-        const layout = segment_cell_layout(width, cells.count, cells.group, ratio);
-
-        const origin_device = left * ratio;
-        const origin_shift_device = Math.round(origin_device) - origin_device;
+        const layout = segment_cell_layout(width_device / ratio, cells.count, cells.group, ratio);
 
-        const cell_x = layout.cell_x_device;
-        const cell_width = layout.cell_width_device;
-        const elements = this.__cell_elements;
+        const columns = this.__columns;
 
         for (let i = 0; i < cells.count; i++) {
-            const style = elements[i].style;
-
-            style.left = `${(cell_x[i] + origin_shift_device) / ratio}px`;
-            style.width = `${cell_width[i] / ratio}px`;
+            columns[i * 2] = layout.cell_x_device[i];
+            columns[i * 2 + 1] = layout.cell_width_device[i];
         }
+
+        this.__cell_layout = layout;
+        this.__cell_ratio = ratio;
+
+        this.__place_layer(this.__el_strip, width_device, shift_px, ratio);
+        segment_mask_apply(this.__el_strip, segment_mask_url(width_device, columns, cells.count));
+
+        // the fill is drawn against the layout, which just moved
+        this.__draw(performance.now());
     }
 
     updateFill() {
@@ -547,7 +641,13 @@ export class SegmentedResourceBarView extends View {
 
         ghost.duration_min_ms = reduced_motion ? 0 : this.__ghost_duration_min_ms;
         ghost.duration_max_ms = reduced_motion ? 0 : this.__ghost_duration_max_ms;
-        ghost.set(total_fraction, now);
+
+        if (this.__max_moved) {
+            this.__max_moved = false;
+            ghost.reset(total_fraction);
+        } else {
+            ghost.set(total_fraction, now);
+        }
 
         this.__draw(now);
     }
@@ -579,32 +679,35 @@ export class SegmentedResourceBarView extends View {
      */
     __draw_cells(total_fraction, ghost_fraction) {
         const count = this.__cells.count;
+        const layout = this.__cell_layout;
 
-        const fill_cells = snap_whole(total_fraction * count);
-        const ghost_cells = snap_whole(ghost_fraction * count);
+        const fill = this.__el_cell_fill.style;
+        const ghost = this.__el_cell_ghost.style;
 
-        const states = this.__cell_states;
+        if (layout === null) {
+            // not measured yet: a share of the strip, until the cells are laid out
+            fill.width = `${total_fraction * 100}%`;
+            ghost.width = `${ghost_fraction * 100}%`;
 
-        for (let i = 0; i < count; i++) {
-            const fill = clamp01(fill_cells - i);
-            const ghost = clamp01(ghost_cells - i);
-
-            const state = fill >= 1 ? CELL_STATE_FILLED : (fill > 0 ? CELL_STATE_PARTIAL : CELL_STATE_EMPTY);
+            return;
+        }
 
-            if (states[i] !== state) {
-                states[i] = state;
-                this.__cell_elements[i].className = CELL_STATE_CLASS[state];
-            }
+        // to the edge of the last whole cell (or part way across the next), never into a gap
+        const ratio = this.__cell_ratio;
 
-            if (this.__cell_fill_drawn[i] !== fill) {
-                this.__cell_fill_drawn[i] = fill;
-                this.__cell_fill_elements[i].style.width = `${fill * 100}%`;
-            }
+        fill.width = `${segment_cell_extent(layout, total_fraction * count) / ratio}px`;
+        ghost.width = `${segment_cell_extent(layout, ghost_fraction * count) / ratio}px`;
+    }
 
-            if (this.__cell_ghost_drawn[i] !== ghost) {
-                this.__cell_ghost_drawn[i] = ghost;
-                this.__cell_ghost_elements[i].style.width = `${ghost * 100}%`;
-            }
+    /**
+     * Place again if anything moved that no event reports: an ancestor's transform, the transform of an iframe the
+     * bar sits in, a move by a fraction of a pixel. Cheap when nothing did — a computed width and a few rects —
+     * and {@link updateSegments} rebuilds only on a change.
+     * @private
+     */
+    __recheck() {
+        if (this.isLinked) {
+            this.updateSegments();
         }
     }
 

package/src/view/elements/progress/segmented/playground/main.js

@@ -138,9 +138,12 @@ document.getElementById('reload').addEventListener('click', () => {
 });
 
 /**
- * For a driver: every notch and cell edge in device pixels, and whether it is whole. Chrome keeps layout in
- * 1/64 CSS pixel steps, so an edge placed at 0.8 CSS px reads back as 0.796875; anything within one such step of
- * a whole device pixel paints on it.
+ * For a driver: every masked layer (a notch tier, a cell strip) and whether it starts on a whole device pixel and is
+ * a width whole in CSS and device pixels both, which is what lets its mask's columns paint where they were drawn.
+ * Chrome keeps layout in 1/64 CSS pixel steps, so anything within one such step of whole counts as whole.
+ *
+ * Necessary, not sufficient: boxes whose edges all read as whole still painted 1, 2, 1, 2 px gaps at 125% when each
+ * cell was its own box. Judge the look from the painted pixels of a screenshot.
  * @returns {{dpr:number, checked:number, worst:number, off_grid:string[]}}
  */
 globalThis.segmented_bar_pixel_report = function () {
@@ -152,19 +155,23 @@ globalThis.segmented_bar_pixel_report = function () {
     let checked = 0;
     let worst = 0;
 
-    for (const el of document.querySelectorAll('.notch, .cell')) {
-        const r = el.getBoundingClientRect();
+    const miss = v => Math.abs(v - Math.round(v));
+
+    for (const el of document.querySelectorAll('.notch, .cell-strip')) {
+        if (el.style.display === 'none') {
+            continue;
+        }
 
-        for (const [name, v] of [['left', r.left], ['right', r.right]]) {
-            const device = v * dpr;
+        const r = el.getBoundingClientRect();
 
-            const miss = Math.abs(device - Math.round(device));
+        for (const [name, v] of [['left (device)', r.left * dpr], ['width (device)', r.width * dpr], ['width (css)', r.width]]) {
+            const m = miss(v);
 
             checked++;
-            worst = Math.max(worst, miss);
+            worst = Math.max(worst, m);
 
-            if (miss > tolerance) {
-                off_grid.push(`${el.className} ${name} ${device.toFixed(4)}`);
+            if (m > tolerance) {
+                off_grid.push(`${el.className} ${name} ${v.toFixed(4)}`);
             }
         }
     }

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

@@ -0,0 +1,14 @@
+/**
+ * Where a fill of `cells` cells ends on a cell layout, in device pixels from its left edge: at the right edge of the
+ * last whole cell, or part way across the next one for a fraction of a cell. Never in a gap, so a fill drawn to it
+ * paints whole cells.
+ *
+ * @param {{cell_x_device: number[], cell_width_device: number[]}} layout from {@link segment_cell_layout}
+ * @param {number} cells how many cells are filled; fractional for one filling up, clamped to the layout
+ * @returns {number}
+ */
+export function segment_cell_extent(layout: {
+    cell_x_device: number[];
+    cell_width_device: number[];
+}, cells: number): number;
+//# sourceMappingURL=segment_cell_extent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segment_cell_extent.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/segment_cell_extent.js"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,4CAJW;IAAC,aAAa,EAAE,MAAM,EAAE,CAAC;IAAC,iBAAiB,EAAE,MAAM,EAAE,CAAA;CAAC,SACtD,MAAM,GACJ,MAAM,CA8BlB"}

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

@@ -0,0 +1,44 @@
+/**
+ * Cell counts within this of a whole one count as whole, so 7 of 30 rounds is 7 full cells and not 7 and a sliver
+ * @type {number}
+ */
+const WHOLE_TOLERANCE = 1e-9;
+
+/**
+ * Where a fill of `cells` cells ends on a cell layout, in device pixels from its left edge: at the right edge of the
+ * last whole cell, or part way across the next one for a fraction of a cell. Never in a gap, so a fill drawn to it
+ * paints whole cells.
+ *
+ * @param {{cell_x_device: number[], cell_width_device: number[]}} layout from {@link segment_cell_layout}
+ * @param {number} cells how many cells are filled; fractional for one filling up, clamped to the layout
+ * @returns {number}
+ */
+export function segment_cell_extent(layout, cells) {
+    const xs = layout.cell_x_device;
+    const widths = layout.cell_width_device;
+    const count = xs.length;
+
+    if (count === 0 || !(cells > 0)) {
+        return 0;
+    }
+
+    let c = cells;
+    const whole = Math.round(c);
+
+    if (Math.abs(c - whole) <= WHOLE_TOLERANCE) {
+        c = whole;
+    }
+
+    if (c >= count) {
+        return xs[count - 1] + widths[count - 1];
+    }
+
+    const k = Math.floor(c);
+    const part = c - k;
+
+    if (part > 0) {
+        return xs[k] + part * widths[k];
+    }
+
+    return xs[k - 1] + widths[k - 1];
+}

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

@@ -0,0 +1,15 @@
+/**
+ * How a point in a window's CSS pixels lands in the top-most window this one can see: `top = offset + local * scale`,
+ * through every same-origin iframe it sits in, each frame's own transform included.
+ *
+ * Nothing inside an iframe can see how the page around it draws it: an iframe the host scales to fit (a preview, a
+ * playground) reports `devicePixelRatio` and every rect as though unscaled, so something drawn for that pixel grid
+ * is painted on another. Walking out through `frameElement` is the one way to find out. A cross-origin frame stops
+ * the walk (its `frameElement` reads null, or throws), and is taken as unscaled from there out.
+ *
+ * @param {Window|null|undefined} win the window the element is in
+ * @param {number[]} result receives [scale, offset]
+ * @returns {number[]} result
+ */
+export function segment_frame_transform(win: Window | null | undefined, result: number[]): number[];
+//# sourceMappingURL=segment_frame_transform.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segment_frame_transform.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/segment_frame_transform.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,6CAJW,MAAM,GAAC,IAAI,GAAC,SAAS,UACrB,MAAM,EAAE,GACN,MAAM,EAAE,CAyDpB"}