bruce-cesium 7.5.8 → 7.5.9

package/dist/bruce-cesium.umd.js

@@ -7295,7 +7295,8 @@
                 this.groupId = groupId;
                 this.additionalTexts = this.options.text != null ? [] : null;
                 this.photo = null;
-                this.createLabel();
+                // A label given its position keeps it, or the rebuild goes looking for the entity's own.
+                this.createLabel(this.prePositioned ? this._pos3d : undefined);
             }
             /**
              * Creates cesium entity for the label if one does not exist.
@@ -13789,7 +13790,9 @@
                     entityId: params.entityId,
                     menuItemId: params.menuItemId,
                     position: params.position ? { ...params.position } : undefined,
-                    createIfMissing: params.createIfMissing !== false
+                    createIfMissing: params.createIfMissing !== false,
+                    text: params.text,
+                    pos3d: params.pos3d ? Cesium.Cartesian3.clone(params.pos3d) : undefined
                 };
                 const doc = this.viewer.container.ownerDocument;
                 // Only a label following the cursor should go when the cursor leaves the canvas.
@@ -13805,6 +13808,13 @@
                 this.SyncLabelHover();
                 this.viewer.scene.requestRender();
             }
+            /*
+             * Which Entity holds the label hover, if any, so a caller can leave another's hover alone.
+             */
+            GetLabelHoverTarget() {
+                const hover = this.labelHover;
+                return hover ? { entityId: hover.entityId, menuItemId: hover.menuItemId } : undefined;
+            }
             /*
              * Whether the label hover is on this Entity, with or without a cursor position.
              */
@@ -13817,7 +13827,7 @@
                 return (hover === null || hover === void 0 ? void 0 : hover.entityId) === entityId && (hover.menuItemId == null || hover.menuItemId === menuItemId) ? hover.position : undefined;
             }
             SyncLabelHover() {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 const hover = this.labelHover;
                 if (!hover || this.disposed) {
                     return;
@@ -13849,12 +13859,24 @@
                     this.ReleaseHoverLabel(true);
                     return;
                 }
+                const hoverOptions = {
+                    presentation: "text",
+                    text: (_b = hover.text) !== null && _b !== void 0 ? _b : group === null || group === void 0 ? void 0 : group.options.text,
+                    selectOnClick: false
+                };
                 if (this.hoverLabel && !this.hoverLabel.Disposed) {
+                    // Rebuilds only when the text changed, as it does when the pointer crosses a cell.
+                    if (hover.pos3d && !Cesium.Cartesian3.equals(hover.pos3d, this.hoverLabel.pos3d)) {
+                        this.hoverLabel.pos3d = hover.pos3d;
+                    }
+                    if (hover.text != null) {
+                        this.hoverLabel.Configure(hoverOptions);
+                    }
                     this.hoverLabel.SetHoverVisible(true);
                     return;
                 }
                 // Query-only icon groups have coordinates but no registered scene visual to attach to.
-                if (!rego && group && [group.item.longitude, group.item.latitude, (_b = group.item.altitude) !== null && _b !== void 0 ? _b : 0].every(Number.isFinite)) {
+                if (!rego && group && [group.item.longitude, group.item.latitude, (_c = group.item.altitude) !== null && _c !== void 0 ? _c : 0].every(Number.isFinite)) {
                     rego = {
                         entityId: hover.entityId,
                         menuItemId: hover.menuItemId,
@@ -13876,15 +13898,12 @@
                     rego,
                     viewer: this.viewer,
                     visualRegister: this,
-                    api: (_c = this.ApiGetters) === null || _c === void 0 ? void 0 : _c.GetBruceApi(),
+                    api: (_d = this.ApiGetters) === null || _d === void 0 ? void 0 : _d.GetBruceApi(),
                     persistent: false,
                     transient: true,
                     hoverRingState: this.hoverRingState,
-                    options: {
-                        presentation: "text",
-                        text: group === null || group === void 0 ? void 0 : group.options.text,
-                        selectOnClick: false
-                    },
+                    pos3d: hover.pos3d,
+                    options: hoverOptions,
                     visible: () => {
                         var _a;
                         const current = this.GetState(hover);
@@ -46708,6 +46727,10 @@
         TextureFrameSeriesAnimator.AppearanceSignature = AppearanceSignature;
         const MAX_COMPOSITE_TEXELS = 2048;
         const VALUE_DILATE_PASSES = 2;
+        // Decoded frame bytes kept at once. A 2048 square composite is 16 MB, so a long series cannot all stay.
+        const MAX_CACHED_FRAME_BYTES = 256 * 1024 * 1024;
+        // Fetched bytes kept for decoding again, a small fraction of what they decode to.
+        const MAX_RAW_FRAME_BYTES = 96 * 1024 * 1024;
         /*
          * Rewrites a packed 16 bit value as the 8 bit grey the colour ramps index on.
          *
@@ -46728,19 +46751,33 @@
         /*
          * Bleeds covered values outward into uncovered texels, leaving alpha untouched.
          */
-        function dilateValues(value, width, height, passes, packed) {
+        function DilateValues(value, width, height, passes, packed) {
             const texels = width * height;
-            const filled = new Uint8Array(texels);
+            // 255 for a texel that had data to begin with, otherwise the 1 based pass that filled it, so a pass
+            // reads only texels filled before it and can work in place.
+            const stamp = new Uint8Array(texels);
             for (let p = 0; p < texels; p++) {
-                filled[p] = value[p * 4 + 3] !== 0 ? 1 : 0;
+                stamp[p] = value[p * 4 + 3] !== 0 ? 255 : 0;
             }
+            // Whether a texel or a horizontal neighbour had data, so empty space is skipped in three reads.
+            const across = new Uint8Array(texels);
             for (let pass = 0; pass < passes; pass++) {
-                const source = value.slice();
-                const wasFilled = filled.slice();
+                const current = pass + 1;
+                const had = (p) => stamp[p] !== 0 && stamp[p] !== current;
+                for (let y = 0; y < height; y++) {
+                    const row = y * width;
+                    for (let x = 0; x < width; x++) {
+                        const p = row + x;
+                        across[p] = (had(p) || (x > 0 && had(p - 1)) || (x + 1 < width && had(p + 1))) ? 1 : 0;
+                    }
+                }
                 for (let y = 0; y < height; y++) {
                     for (let x = 0; x < width; x++) {
                         const p = y * width + x;
-                        if (wasFilled[p]) {
+                        if (stamp[p] !== 0) {
+                            continue;
+                        }
+                        if (!across[p] && !(y > 0 && across[p - width]) && !(y + 1 < height && across[p + width])) {
                             continue;
                         }
                         let sum = 0;
@@ -46749,13 +46786,13 @@
                             for (let dx = -1; dx <= 1; dx++) {
                                 const nx = x + dx;
                                 const ny = y + dy;
-                                if (nx < 0 || ny < 0 || nx >= width || ny >= height || !wasFilled[ny * width + nx]) {
+                                if (nx < 0 || ny < 0 || nx >= width || ny >= height || !had(ny * width + nx)) {
                                     continue;
                                 }
                                 const at = (ny * width + nx) * 4;
                                 // Averaged as a value rather than per byte: averaging a packed low byte
                                 // on its own wraps at every 256th step and speckles the bled edge.
-                                sum += packed ? source[at] * 256 + source[at + 1] : source[at];
+                                sum += packed ? value[at] * 256 + value[at + 1] : value[at];
                                 hits++;
                             }
                         }
@@ -46771,18 +46808,25 @@
                                 value[p * 4 + 1] = v;
                                 value[p * 4 + 2] = v;
                             }
-                            filled[p] = 1;
+                            stamp[p] = current;
                         }
                     }
                 }
             }
         }
+        TextureFrameSeriesAnimator.DilateValues = DilateValues;
+        /*
+         * Bytes one cached frame holds, counting a buffer shared between colour and value once.
+         */
+        function frameBytes(pixels, value) {
+            return (pixels ? pixels.byteLength : 0) + (value && value !== pixels ? value.byteLength : 0);
+        }
         const DEFAULT_CROSSFADE_MS = 900;
         const DEFAULT_LOW_COLOR = { red: 255, green: 255, blue: 255, alpha: 0.12 };
         const DEFAULT_HIGH_COLOR = { red: 21, green: 96, blue: 196, alpha: 0.92 };
         class Animator {
             constructor(options) {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 this.removeOnTick = null;
                 this.removeCrossfadeTick = null;
                 this.disposed = false;
@@ -46813,6 +46857,15 @@
                 this.extremesLoad = null;
                 this.floorPixels = null;
                 this.ceilingPixels = null;
+                // How far through the fade from the previous value frame to the presented one, 1 when settled.
+                this.fadeMix = 1;
+                // Where the current fade started from, above zero when it took over from one still running.
+                this.fadeMixStart = 0;
+                // Version the value canvas was last written at, since in value only mode it is written on demand.
+                this.valueCanvasVersion = -1;
+                this.rawBytes = 0;
+                this.cachedBytes = 0;
+                this.lastFrameBytes = 0;
                 if (!options.entity.polygon) {
                     throw new Error("TextureFrameSeriesAnimator requires an entity with polygon graphics.");
                 }
@@ -46860,6 +46913,9 @@
                 this.maskBaseline = (_c = options.maskBaseline) !== null && _c !== void 0 ? _c : this.tiles.some((tile) => Boolean(tile.BaselineMask));
                 this.valueCanvas = this.produceValueCanvas ? document.createElement("canvas") : null;
                 this.driveMaterial = options.driveMaterial !== false;
+                this.valueOnly = this.produceValueCanvas && !this.driveMaterial;
+                this.rawCache = new Array(this.frames.length).fill(null);
+                this.cacheBudget = (_d = options.cacheBytes) !== null && _d !== void 0 ? _d : MAX_CACHED_FRAME_BYTES;
                 this.originalMaterial = options.entity.polygon.material;
                 this.imageProperty = new Cesium.CallbackProperty(() => this.pool[this.poolIdx], false);
                 if (this.driveMaterial) {
@@ -46925,7 +46981,40 @@
              * or null unless the instance was constructed with produceValueCanvas.
              */
             GetValueCanvas() {
-                return this.valueDims ? this.valueCanvas : null;
+                if (!this.valueDims) {
+                    return null;
+                }
+                if (this.valueOnly && this.valueCanvasVersion !== this.presentVersion && this.displayedValuePixels) {
+                    this.writeInto(this.valueCanvas, this.displayedValuePixels, this.valueDims);
+                    this.valueCanvasVersion = this.presentVersion;
+                }
+                return this.valueCanvas;
+            }
+            /**
+             * The presented frame's value pixels, or null before one. Shares the cached array, so never write to it.
+             */
+            GetValueRaster() {
+                if (!this.valueDims || !this.displayedValuePixels) {
+                    return null;
+                }
+                return { data: this.displayedValuePixels, width: this.valueDims.width, height: this.valueDims.height };
+            }
+            /**
+             * The two value frames being faded between and the mix, or null unless the material is not driven.
+             */
+            GetValueFade() {
+                if (!this.valueOnly || !this.valueDims || !this.displayedValuePixels) {
+                    return null;
+                }
+                const previous = this.fadeFromValuePixels;
+                const from = previous && previous.length === this.displayedValuePixels.length ? previous : null;
+                return {
+                    from,
+                    to: this.displayedValuePixels,
+                    width: this.valueDims.width,
+                    height: this.valueDims.height,
+                    mix: from ? this.fadeMix : 1
+                };
             }
             /**
              * Increments every time a frame is presented, so a consumer holding the value canvas can tell
@@ -46992,7 +47081,11 @@
                 if (this.currentFrameIndex < 0) {
                     return this.frameCache[0] ? -1 : 0;
                 }
-                for (let d = 0; d < n; d++) {
+                // Full once another frame will not fit, so a prefetch only displaces a frame further from the
+                // playhead than itself and never trades the two ends of the window back and forth.
+                const full = this.cachedBytes + this.lastFrameBytes > this.cacheBudget;
+                const reach = full ? this.farthestCachedDistance() : n;
+                for (let d = 0; d < Math.min(n, reach); d++) {
                     const forward = this.currentFrameIndex + d;
                     if (forward < n && !this.frameCache[forward]) {
                         return forward;
@@ -47004,6 +47097,68 @@
                 }
                 return -1;
             }
+            farthestCachedDistance() {
+                let farthest = 0;
+                for (let i = 0; i < this.frameCache.length; i++) {
+                    if (this.frameCache[i]) {
+                        farthest = Math.max(farthest, Math.abs(i - this.currentFrameIndex));
+                    }
+                }
+                return farthest;
+            }
+            /*
+             * Drops decoded frames furthest from the playhead until the cache fits its budget again.
+             */
+            evictDecoded(keep) {
+                // A tinted fade reads its target from the cache each tick, where a value fade holds the arrays.
+                const fading = !this.valueOnly && this.fadeStartMs !== null ? this.fadeToIndex : -1;
+                while (this.cachedBytes > this.cacheBudget) {
+                    let victim = -1;
+                    let distance = -1;
+                    for (let i = 0; i < this.frameCache.length; i++) {
+                        if (!this.frameCache[i] || i === keep || i === this.currentFrameIndex || i === fading) {
+                            continue;
+                        }
+                        const d = Math.abs(i - this.currentFrameIndex);
+                        if (d > distance) {
+                            distance = d;
+                            victim = i;
+                        }
+                    }
+                    if (victim < 0) {
+                        return;
+                    }
+                    this.cachedBytes -= frameBytes(this.frameCache[victim], this.valueCache[victim]);
+                    this.frameCache[victim] = null;
+                    this.valueCache[victim] = null;
+                }
+            }
+            /*
+             * Keeps a frame's fetched bytes unless they are large, as a tile major archive's are.
+             */
+            keepRaw(idx, buffer, base) {
+                if (buffer.byteLength > MAX_RAW_FRAME_BYTES / 16) {
+                    return;
+                }
+                this.rawCache[idx] = { buffer, base };
+                this.rawBytes += buffer.byteLength;
+                while (this.rawBytes > MAX_RAW_FRAME_BYTES) {
+                    let victim = -1;
+                    let distance = -1;
+                    for (let i = 0; i < this.rawCache.length; i++) {
+                        const d = Math.abs(i - this.currentFrameIndex);
+                        if (this.rawCache[i] && i !== idx && d > distance) {
+                            distance = d;
+                            victim = i;
+                        }
+                    }
+                    if (victim < 0) {
+                        return;
+                    }
+                    this.rawBytes -= this.rawCache[victim].buffer.byteLength;
+                    this.rawCache[victim] = null;
+                }
+            }
             pumpFetchQueue() {
                 if (this.disposed || this.inFlightIndex !== -1) {
                     return;
@@ -47047,10 +47202,18 @@
                     lo = Math.min(lo, at.ByteOffset);
                     hi = Math.max(hi, at.ByteOffset + at.ByteLength);
                 }
-                const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${lo}-${hi - 1}` } });
-                const buffer = await response.arrayBuffer();
-                if (this.disposed) {
-                    return;
+                let buffer;
+                const raw = this.rawCache[idx];
+                if (raw && raw.base === lo) {
+                    buffer = raw.buffer;
+                }
+                else {
+                    const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${lo}-${hi - 1}` } });
+                    buffer = await response.arrayBuffer();
+                    if (this.disposed) {
+                        return;
+                    }
+                    this.keepRaw(idx, buffer, lo);
                 }
                 // Awaited before decoding rather than applied later, so no frame is ever cached unmasked and
                 // then corrected once the mask lands.
@@ -47062,9 +47225,15 @@
                 if (this.disposed) {
                     return;
                 }
+                if (this.frameCache[idx]) {
+                    this.cachedBytes -= frameBytes(this.frameCache[idx], this.valueCache[idx]);
+                }
                 this.frameCache[idx] = decoded.pixels;
                 this.frameDims[idx] = { width: decoded.width, height: decoded.height };
                 this.valueCache[idx] = decoded.valuePixels || null;
+                this.lastFrameBytes = frameBytes(decoded.pixels, decoded.valuePixels || null);
+                this.cachedBytes += this.lastFrameBytes;
+                this.evictDecoded(idx);
                 if (this.shouldPresent(idx, isTarget)) {
                     this.beginCrossfadeTo(idx);
                 }
@@ -47134,6 +47303,13 @@
              */
             tint(imageData) {
                 const canvas = { width: imageData.width, height: imageData.height };
+                if (this.valueOnly) {
+                    // One array serves as both, since nothing will ever display the colour.
+                    const values = imageData.data;
+                    this.applyBaselineMask(values, undefined, canvas.width, canvas.height);
+                    DilateValues(values, canvas.width, canvas.height, VALUE_DILATE_PASSES, IsPackedValue(this.metadata));
+                    return { pixels: values, width: canvas.width, height: canvas.height, valuePixels: values };
+                }
                 // Copied before tinting: the ramp is a lerp between two colours, so the value cannot be
                 // recovered from the tinted pixels afterwards.
                 const valuePixels = this.produceValueCanvas ? new Uint8ClampedArray(imageData.data) : undefined;
@@ -47154,7 +47330,7 @@
                 }
                 this.applyBaselineMask(imageData.data, valuePixels, canvas.width, canvas.height);
                 if (valuePixels) {
-                    dilateValues(valuePixels, canvas.width, canvas.height, VALUE_DILATE_PASSES, IsPackedValue(this.metadata));
+                    DilateValues(valuePixels, canvas.width, canvas.height, VALUE_DILATE_PASSES, IsPackedValue(this.metadata));
                 }
                 return { pixels: imageData.data, width: canvas.width, height: canvas.height, valuePixels };
             }
@@ -47412,6 +47588,10 @@
                 }
             }
             beginCrossfadeTo(idx) {
+                if (this.valueOnly) {
+                    this.beginValueFadeTo(idx);
+                    return;
+                }
                 const to = this.frameCache[idx];
                 this.fadeFromValuePixels = this.displayedValuePixels === null && this.valueCache[idx]
                     ? new Uint8ClampedArray(this.valueCache[idx].length)
@@ -47421,12 +47601,53 @@
                 this.fadeToDims = this.frameDims[idx];
                 this.fadeStartMs = Now();
             }
+            /*
+             * Presents a value frame at once and leaves the fade to the consumer, which blends on the GPU.
+             */
+            beginValueFadeTo(idx) {
+                const to = this.valueCache[idx];
+                if (!to || to === this.displayedValuePixels) {
+                    return;
+                }
+                // A new target mid fade keeps whichever frame is mostly on screen and carries on from the current
+                // mix, so frames landing in quick succession do not jump the sheet back.
+                const midFade = this.fadeStartMs !== null && Boolean(this.fadeFromValuePixels);
+                if (midFade && this.fadeMix < 0.5) {
+                    this.fadeMixStart = this.fadeMix;
+                }
+                else {
+                    this.fadeFromValuePixels = this.displayedValuePixels;
+                    this.fadeMixStart = 0;
+                }
+                this.displayedValuePixels = to;
+                this.valueDims = this.frameDims[idx];
+                this.fadeToIndex = idx;
+                this.fadeMix = this.fadeFromValuePixels ? this.fadeMixStart : 1;
+                this.fadeStartMs = this.fadeFromValuePixels ? Now() : null;
+                this.presentVersion++;
+                this.requestRender();
+            }
+            requestRender() {
+                if (this.viewer && this.viewer.scene && this.viewer.scene.requestRenderMode) {
+                    this.viewer.scene.requestRender();
+                }
+            }
             tickCrossfade() {
                 if (this.disposed || this.fadeStartMs === null) {
                     return;
                 }
                 const t = Math.min(1, (Now() - this.fadeStartMs) / this.crossfadeMs);
                 const eased = easeInOutQuad(t);
+                if (this.valueOnly) {
+                    this.fadeMix = this.fadeMixStart + (1 - this.fadeMixStart) * eased;
+                    if (t >= 1) {
+                        this.fadeStartMs = null;
+                        this.fadeFromValuePixels = null;
+                        this.fadeMix = 1;
+                    }
+                    this.requestRender();
+                    return;
+                }
                 const from = this.fadeFromPixels;
                 const to = this.frameCache[this.fadeToIndex];
                 const n = Math.min(from.length, to.length);
@@ -47466,9 +47687,7 @@
                     this.valueDims = dims;
                 }
                 this.presentVersion++;
-                if (this.viewer && this.viewer.scene && this.viewer.scene.requestRenderMode) {
-                    this.viewer.scene.requestRender();
-                }
+                this.requestRender();
             }
         }
         TextureFrameSeriesAnimator.Animator = Animator;
@@ -47487,13 +47706,15 @@
         const MIN_VISIBLE_PIXELS = 60;
         const MAX_STRIDE = 512;
         const STRIDE_HYSTERESIS = 1.4;
-        const DEFAULT_MIN_SPACING_PIXELS = 78;
-        const DEFAULT_MAX_LABELS = 240;
-        const LABEL_RADIUS = 4;
-        const LABEL_FONT = "600 11px ui-monospace, SFMono-Regular, Menlo, monospace";
-        // Clear space either side of a label box, so neighbours read as separate.
-        const LABEL_GAP_PIXELS = 16;
-        const LABEL_ANCHOR_COLOR = "rgba(255,255,255,0.85)";
+        // Scene labels carry a leader and are wider than a value, so they want room and not many of them.
+        const DEFAULT_MIN_SPACING_PIXELS = 140;
+        const DEFAULT_MAX_LABELS = 60;
+        // How far past the edge of the view an anchor may sit before its label is dropped.
+        const LABEL_EDGE_MARGIN_PIXELS = 120;
+        // Distance discount for a label already up when the cap forces a choice.
+        const LABEL_KEEP_BIAS = 0.6;
+        // How long a label outlives its cell leaving the wanted set, so one back a frame later does not blink.
+        const LABEL_LINGER_MS = 300;
         // 8 rather than 5: below this a cell reads as texture rather than as a boundary, and it also
         // bounds the worst case, since a full screen of 8 px cells fits inside MAX_GRID_CELLS.
         const DEFAULT_MIN_GRID_CELL_PIXELS = 8;
@@ -47507,7 +47728,8 @@
         const TILE_OUTLINE_ALPHA = 0.45;
         // Cells per grid square at the coarsest. Beyond this a tile is outlined instead.
         const MAX_GRID_STRIDE = 256;
-        const LINE_HEIGHT = 13;
+        // Times the pointer's ground hit is moved onto the sheet's own height before reading a cell.
+        const HOVER_REFINE_STEPS = 3;
         /**
          * A clip outline from a projected ring, or null when the ring cannot be drawn.
          * @param projected one entry per ring vertex, null where the vertex has no window coordinate
@@ -47601,11 +47823,25 @@
                 this.sourceMap = null;
                 this.source = null;
                 this.painted = null;
+                this.paintedRamp = null;
                 this.floor = null;
                 this.ceiling = null;
                 this.disposed = false;
-                this.drawn = 0;
                 this.stride = 0;
+                this.cellLabels = new Map();
+                this.lingerTimer = null;
+                // What the last draw was made from, so a frame that changes none of it draws nothing.
+                this.drawnView = null;
+                this.drawnInputs = [];
+                this.scratchWorld = new Cesium.Cartesian3();
+                this.scratchWindow = new Cesium.Cartesian2();
+                this.scratchClip = new Cesium.Cartesian4();
+                // The camera's view and projection as one matrix, rebuilt per draw, or null outside 3D.
+                this.viewProjection = null;
+                this.viewProjectionScratch = new Cesium.Matrix4();
+                this.hovering = false;
+                this.hoverFrame = 0;
+                this.hoverAt = null;
                 this.viewer = options.viewer;
                 this.extent = options.extent;
                 this.settings = options.settings || {};
@@ -47615,6 +47851,9 @@
                 this.sourceMap = exports.TextureFrameSeriesAnimator.SourceMap(options.metadata);
                 this.tiles = options.tiles;
                 this.clipRing = options.clipRing;
+                this.heightAt = options.heightAt;
+                this.heightKey = options.heightKey;
+                this.hover = options.hover;
                 this.canvas = document.createElement("canvas");
                 this.canvas.style.position = "absolute";
                 this.canvas.style.inset = "0";
@@ -47624,12 +47863,31 @@
                     parent.appendChild(this.canvas);
                 }
                 this.ctx = this.canvas.getContext("2d");
+                this.onPointerMove = (event) => {
+                    const bounds = this.viewer.canvas.getBoundingClientRect();
+                    this.hoverAt = { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
+                    // At most once a frame, since a pointer reports far faster than anything is drawn.
+                    if (!this.hoverFrame) {
+                        this.hoverFrame = requestAnimationFrame(() => {
+                            this.hoverFrame = 0;
+                            this.updateHover();
+                        });
+                    }
+                };
+                this.onPointerLeave = () => {
+                    this.hoverAt = null;
+                    this.releaseHover();
+                };
+                if (this.hover && this.hover.register) {
+                    this.viewer.canvas.addEventListener("pointermove", this.onPointerMove, { passive: true });
+                    this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
+                }
             }
             SetExtent(extent) {
                 this.extent = extent;
             }
             /**
-             * The current frame's decoded values, as the animator's value canvas already provides them.
+             * The current frame's decoded values.
              * @param source value pixels, one texel per cell
              */
             SetSource(source) {
@@ -47637,11 +47895,17 @@
             }
             /**
              * The tinted pixels of the same frame, so the grid can skip cells the ramp painted nothing in.
-             * @param painted RGBA of the presented frame, or null to fall back to coverage alone
+             * @param painted RGBA of the presented frame, or null to fall back to the ramp or coverage alone
              */
             SetPainted(painted) {
                 this.painted = painted;
             }
+            /**
+             * The surface's 256 step RGBA ramp, for telling whether a cell was painted without a tinted frame.
+             */
+            SetPaintedRamp(ramp) {
+                this.paintedRamp = ramp;
+            }
             /**
              * The archive's per-cell extremes, when it publishes them. Without these a label can still
              * print the current reading, just not the range behind it.
@@ -47651,21 +47915,28 @@
                 this.ceiling = ceiling;
             }
             GetDrawnCount() {
-                return this.drawn;
+                return this.cellLabels.size;
             }
             Clear() {
                 this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-                this.drawn = 0;
+                this.drawnView = null;
             }
             Dispose() {
                 this.disposed = true;
+                this.clearCellLabels();
+                this.releaseHover();
+                if (this.hoverFrame) {
+                    cancelAnimationFrame(this.hoverFrame);
+                    this.hoverFrame = 0;
+                }
+                this.viewer.canvas.removeEventListener("pointermove", this.onPointerMove);
+                this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
                 if (this.canvas.parentElement) {
                     this.canvas.parentElement.removeChild(this.canvas);
                 }
             }
             /**
-             * Redraws every visible label. Cheap enough to call per rendered frame, because the cell
-             * count it considers is bounded by the view rather than by the texture.
+             * Redraws the grid and syncs the value labels, when anything they are drawn from has changed.
              */
             Render() {
                 var _a, _b, _c;
@@ -47673,67 +47944,296 @@
                     return;
                 }
                 const view = this.viewer.canvas;
+                const inputs = [this.source, this.painted, this.paintedRamp, this.floor, this.ceiling,
+                    view.clientWidth, view.clientHeight, this.heightKey ? this.heightKey() : null];
+                const camera = this.viewer.camera.viewMatrix;
+                if (this.drawnView &&
+                    Cesium.Matrix4.equals(this.drawnView, camera) &&
+                    inputs.every((input, i) => input === this.drawnInputs[i])) {
+                    return;
+                }
                 if (this.canvas.width !== view.clientWidth || this.canvas.height !== view.clientHeight) {
                     this.canvas.width = view.clientWidth;
                     this.canvas.height = view.clientHeight;
                 }
                 this.Clear();
+                this.drawnView = Cesium.Matrix4.clone(camera, this.drawnView || undefined);
+                this.drawnInputs = inputs;
+                const projection = this.viewer.camera.frustum.projectionMatrix;
+                this.viewProjection = this.viewer.scene.mode === Cesium.SceneMode.SCENE3D
+                    ? Cesium.Matrix4.multiply(projection, camera, this.viewProjectionScratch)
+                    : null;
                 const cols = this.source.width;
                 const rows = this.source.height;
                 const window = this.visibleTexels(cols, rows);
                 if (!window) {
+                    this.syncCellLabels([]);
                     return;
                 }
-                const midCol = (window.col0 + window.col1) / 2;
-                const midRow = (window.row0 + window.row1) / 2;
-                const a = this.project(this.lonAt(midCol, cols), this.latAt(midRow, rows));
-                const b = this.project(this.lonAt(midCol + 1, cols), this.latAt(midRow + 1, rows));
+                // Measured where the view is looking, since in an oblique view up close the middle of the visible
+                // texels sits out toward the horizon, where cells are a fraction of the size.
+                const focus = this.groundAtScreenCentre();
+                const at = focus ? this.texelAt(focus.lon, focus.lat) : null;
+                const focused = (Boolean(at) &&
+                    at.col >= window.col0 &&
+                    at.col <= window.col1 &&
+                    at.row >= window.row0 &&
+                    at.row <= window.row1);
+                const midCol = focused ? at.col : (window.col0 + window.col1) / 2;
+                const midRow = focused ? at.row : (window.row0 + window.row1) / 2;
+                const a = this.projectCell(midCol, midRow, cols, rows);
+                const b = this.projectCell(midCol + 1, midRow + 1, cols, rows);
                 if (!a || !b) {
+                    // Left as they are, since one frame where the focus will not project is not the data leaving.
                     return;
                 }
                 const cellPixels = Math.min(Math.abs(b.x - a.x), Math.abs(b.y - a.y));
                 // Ahead of the label threshold on purpose: a grid still reads at a cell size where a
                 // number no longer fits.
                 this.drawGrid(window, cols, rows, cellPixels);
-                if (cellPixels < ((_a = this.settings.minCellPixels) !== null && _a !== void 0 ? _a : DEFAULT_MIN_CELL_PIXELS)) {
+                // By area rather than the shorter side, which an oblique view foreshortens to a fraction of the other.
+                const across = this.projectCell(midCol + 1, midRow, cols, rows);
+                const down = this.projectCell(midCol, midRow + 1, cols, rows);
+                const cellSize = across && down
+                    ? Math.sqrt(Math.abs((across.x - a.x) * (down.y - a.y) - (across.y - a.y) * (down.x - a.x)))
+                    : cellPixels;
+                const visibleWidth = cellSize * (window.col1 - window.col0 + 1);
+                const visibleHeight = cellSize * (window.row1 - window.row0 + 1);
+                if (cellSize < ((_a = this.settings.minCellPixels) !== null && _a !== void 0 ? _a : DEFAULT_MIN_CELL_PIXELS) ||
+                    Math.max(visibleWidth, visibleHeight) < MIN_VISIBLE_PIXELS) {
+                    this.syncCellLabels([]);
                     return;
                 }
-                const visibleWidth = cellPixels * (window.col1 - window.col0 + 1);
-                const visibleHeight = cellPixels * (window.row1 - window.row0 + 1);
-                if (Math.max(visibleWidth, visibleHeight) < MIN_VISIBLE_PIXELS) {
-                    return;
-                }
-                const parts = this.settings.parts || ["value", "floor", "ceiling"];
-                this.ctx.font = LABEL_FONT;
-                this.ctx.textAlign = "center";
                 const maxLabels = (_b = this.settings.maxLabels) !== null && _b !== void 0 ? _b : DEFAULT_MAX_LABELS;
                 this.stride = ChooseLabelStride({
-                    cellPixels,
+                    cellPixels: cellSize,
                     visibleCols: window.col1 - window.col0 + 1,
                     visibleRows: window.row1 - window.row0 + 1,
                     maxLabels,
-                    // Measured, not assumed: the spacing that keeps labels apart is whatever the widest
-                    // one is, so changing what a label says cannot quietly start overlapping them.
-                    minSpacingPixels: Math.max((_c = this.settings.minSpacingPixels) !== null && _c !== void 0 ? _c : DEFAULT_MIN_SPACING_PIXELS, this.widestLabel(parts)),
+                    minSpacingPixels: (_c = this.settings.minSpacingPixels) !== null && _c !== void 0 ? _c : DEFAULT_MIN_SPACING_PIXELS,
                     held: this.stride
                 });
-                const stride = this.stride;
+                const parts = this.settings.parts || ["value", "floor", "ceiling"];
+                this.syncCellLabels(this.labelCells(window, cols, rows, this.stride, maxLabels, parts));
+            }
+            /*
+             * One labelled cell per lattice block, keyed by the block's origin so it survives frame and stride changes.
+             */
+            labelCells(window, cols, rows, stride, max, parts) {
+                const width = this.canvas.width;
+                const height = this.canvas.height;
                 const firstRow = Math.floor(window.row0 / stride) * stride;
                 const firstCol = Math.floor(window.col0 / stride) * stride;
-                for (let row = firstRow; row <= window.row1 && this.drawn < maxLabels; row += stride) {
-                    for (let col = firstCol; col <= window.col1 && this.drawn < maxLabels; col += stride) {
+                const candidates = [];
+                for (let row = firstRow; row <= window.row1; row += stride) {
+                    for (let col = firstCol; col <= window.col1; col += stride) {
                         const found = this.readNear(col, row, cols, rows, stride);
                         if (!found) {
                             continue;
                         }
-                        const point = this.project(this.lonAt(found.col, cols), this.latAt(found.row, rows));
-                        if (!point || point.x < 0 || point.y < 0
-                            || point.x > this.canvas.width || point.y > this.canvas.height) {
+                        const point = this.projectCell(found.col, found.row, cols, rows);
+                        // A margin past the edge, so a label does not drop the moment its anchor does.
+                        const margin = LABEL_EDGE_MARGIN_PIXELS;
+                        if (!point ||
+                            point.x < -margin ||
+                            point.y < -margin ||
+                            point.x > width + margin ||
+                            point.y > height + margin) {
                             continue;
                         }
-                        this.drawLabel(point, found.reading, parts, this.cellOutline(found.col, found.row, cols, rows));
+                        const text = this.labelLines(found.reading, parts).join("\n");
+                        if (!text) {
+                            continue;
+                        }
+                        const key = col + "," + row;
+                        const distance = Math.hypot(point.x - width / 2, point.y - height / 2);
+                        candidates.push({
+                            key,
+                            lon: this.lonAt(found.col, cols),
+                            lat: this.latAt(found.row, rows),
+                            text,
+                            // Labels already up outrank new ones, so the capped set does not shuffle as the view pans.
+                            rank: this.cellLabels.has(key) ? distance * LABEL_KEEP_BIAS : distance
+                        });
+                    }
+                }
+                if (candidates.length > max) {
+                    candidates.sort((x, y) => x.rank - y.rank);
+                    candidates.length = max;
+                }
+                return candidates;
+            }
+            /*
+             * Keeps one scene label per wanted cell, reusing those that are still wanted.
+             */
+            syncCellLabels(wanted) {
+                var _a;
+                const keep = new Set(wanted.map((w) => w.key));
+                const now = Date.now();
+                let lingering = false;
+                for (const [key, entry] of this.cellLabels) {
+                    if (keep.has(key)) {
+                        entry.missingSince = undefined;
+                        continue;
+                    }
+                    entry.missingSince = (_a = entry.missingSince) !== null && _a !== void 0 ? _a : now;
+                    if (now - entry.missingSince >= LABEL_LINGER_MS) {
+                        entry.label.Dispose();
+                        this.cellLabels.delete(key);
+                    }
+                    else {
+                        lingering = true;
+                    }
+                }
+                // A still camera draws nothing more, so a lingering label is given its own later look.
+                if (lingering && !this.lingerTimer) {
+                    this.lingerTimer = setTimeout(() => {
+                        this.lingerTimer = null;
+                        if (!this.disposed) {
+                            this.drawnView = null;
+                            this.viewer.scene.requestRender();
+                        }
+                    }, LABEL_LINGER_MS);
+                }
+                for (const want of wanted) {
+                    const pos3d = Cesium.Cartesian3.fromDegrees(want.lon, want.lat, this.surfaceHeight(want.lon, want.lat));
+                    const options = {
+                        presentation: "text",
+                        text: want.text,
+                        leader: true,
+                        selectOnClick: false
+                    };
+                    const existing = this.cellLabels.get(want.key);
+                    if (existing) {
+                        if (!Cesium.Cartesian3.equalsEpsilon(existing.label.pos3d, pos3d, 0, 0.01)) {
+                            existing.label.pos3d = pos3d;
+                        }
+                        if (existing.text !== want.text) {
+                            existing.label.Configure(options);
+                            existing.text = want.text;
+                        }
+                        continue;
+                    }
+                    const id = (this.hover ? this.hover.entityId : "texture-value") + "#cell:" + want.key;
+                    const label = new exports.EntityLabel.Label({
+                        rego: {
+                            entityId: id,
+                            menuItemId: this.hover ? this.hover.menuItemId : undefined,
+                            name: want.text,
+                            priority: 0,
+                            // No graphic, since a point or billboard visual pulls a label back to itself on rebuild.
+                            visual: new Cesium.Entity({ position: pos3d })
+                        },
+                        viewer: this.viewer,
+                        pos3d,
+                        options,
+                        persistent: true,
+                        visible: () => !this.disposed
+                    });
+                    this.cellLabels.set(want.key, { label, text: want.text });
+                }
+            }
+            clearCellLabels() {
+                if (this.lingerTimer) {
+                    clearTimeout(this.lingerTimer);
+                    this.lingerTimer = null;
+                }
+                for (const entry of this.cellLabels.values()) {
+                    entry.label.Dispose();
+                }
+                this.cellLabels.clear();
+            }
+            /*
+             * Shows the cell under the pointer through the register's hover label, unless something else holds it.
+             */
+            updateHover() {
+                const hover = this.hover;
+                if (this.disposed || !hover || !hover.register || !this.source || !this.hoverAt) {
+                    return;
+                }
+                const register = hover.register;
+                const target = register.GetLabelHoverTarget();
+                const ours = Boolean(target) && register.IsLabelHovered(hover.entityId, hover.menuItemId);
+                if (target && !ours) {
+                    this.hovering = false;
+                    return;
+                }
+                const under = this.readingUnder(this.hoverAt.x, this.hoverAt.y);
+                if (!under) {
+                    this.releaseHover();
+                    return;
+                }
+                register.SetLabelHover({
+                    entityId: hover.entityId,
+                    menuItemId: hover.menuItemId,
+                    position: { x: this.hoverAt.x, y: this.hoverAt.y },
+                    text: under.text,
+                    pos3d: under.pos3d
+                });
+                this.hovering = true;
+            }
+            releaseHover() {
+                const hover = this.hover;
+                if (!this.hovering || !hover || !hover.register) {
+                    return;
+                }
+                this.hovering = false;
+                if (hover.register.IsLabelHovered(hover.entityId, hover.menuItemId)) {
+                    hover.register.ClearLabelHover();
+                }
+            }
+            /*
+             * The text for the painted cell under a window position and its centre on the sheet, or null.
+             */
+            readingUnder(x, y) {
+                const at = this.cellUnder(x, y);
+                if (!at) {
+                    return null;
+                }
+                const cols = this.source.width;
+                const found = this.readAt(at.col, at.row, cols);
+                if (!found || !this.paintedAt(at.col, at.row, cols)) {
+                    return null;
+                }
+                const text = this.labelLines(found, this.settings.parts || ["value", "floor", "ceiling"]).join("\n");
+                if (!text) {
+                    return null;
+                }
+                const lon = this.lonAt(at.col, cols);
+                const lat = this.latAt(at.row, this.source.height);
+                return { text, pos3d: Cesium.Cartesian3.fromDegrees(lon, lat, this.surfaceHeight(lon, lat)) };
+            }
+            /*
+             * The cell under a window position, found on the sheet rather than on the ground beneath it.
+             */
+            cellUnder(x, y) {
+                const scene = this.viewer.scene;
+                const camera = this.viewer.camera;
+                const screen = new Cesium.Cartesian2(x, y);
+                const ray = camera.getPickRay(screen);
+                if (!ray) {
+                    return null;
+                }
+                let hit = (scene.globe && scene.globe.pick(ray, scene)) || camera.pickEllipsoid(screen);
+                if (!hit) {
+                    return null;
+                }
+                const radii = Cesium.Ellipsoid.WGS84.radii;
+                for (let i = 0; i < HOVER_REFINE_STEPS && this.heightAt; i++) {
+                    const carto = Cesium.Cartographic.fromCartesian(hit);
+                    const height = this.heightAt(Cesium.Math.toDegrees(carto.longitude), Cesium.Math.toDegrees(carto.latitude));
+                    if (height == null) {
+                        break;
                     }
+                    const inflated = new Cesium.Ellipsoid(radii.x + height, radii.y + height, radii.z + height);
+                    const interval = Cesium.IntersectionTests.rayEllipsoid(ray, inflated);
+                    if (!interval) {
+                        break;
+                    }
+                    hit = Cesium.Ray.getPoint(ray, interval.start);
                 }
+                const carto = Cesium.Cartographic.fromCartesian(hit);
+                return this.texelAt(Cesium.Math.toDegrees(carto.longitude), Cesium.Math.toDegrees(carto.latitude));
             }
             /*
              * Outlines each covered cell, from a projected lattice of its corners.
@@ -47761,44 +48261,25 @@
                 if (wide * high > MAX_GRID_CELLS) {
                     return;
                 }
-                const lattice = new Array((wide + 1) * (high + 1));
-                for (let r = 0; r <= high; r++) {
-                    for (let c = 0; c <= wide; c++) {
-                        // Corners sit half a texel out from the centres lonAt/latAt return.
-                        const lon = this.lonAt(window.col0 + c - 0.5, cols);
-                        const lat = this.latAt(window.row0 + r - 0.5, rows);
-                        lattice[r * (wide + 1) + c] = this.project(lon, lat);
-                    }
-                }
-                const path = new Path2D();
-                let drew = false;
+                const lattice = new Lattice(wide + 1, high + 1, (c, r) => {
+                    // Corners sit half a texel out from the centres lonAt/latAt return.
+                    const lon = this.lonAt(window.col0 + c - 0.5, cols);
+                    const lat = this.latAt(window.row0 + r - 0.5, rows);
+                    return this.projectInto(lon, lat);
+                });
+                const covered = new Uint8Array(wide * high);
                 for (let r = 0; r < high; r++) {
                     for (let c = 0; c < wide; c++) {
-                        if (!this.isCovered(window.col0 + c, window.row0 + r, cols)) {
-                            continue;
-                        }
-                        const tl = lattice[r * (wide + 1) + c];
-                        const tr = lattice[r * (wide + 1) + c + 1];
-                        const bl = lattice[(r + 1) * (wide + 1) + c];
-                        const br = lattice[(r + 1) * (wide + 1) + c + 1];
-                        if (!tl || !tr || !bl || !br) {
-                            continue;
-                        }
-                        path.moveTo(tl.x, tl.y);
-                        path.lineTo(tr.x, tr.y);
-                        path.lineTo(br.x, br.y);
-                        path.lineTo(bl.x, bl.y);
-                        path.closePath();
-                        drew = true;
+                        covered[r * wide + c] = this.isCovered(window.col0 + c, window.row0 + r, cols) ? 1 : 0;
                     }
                 }
-                if (!drew) {
+                const path = new Path2D();
+                if (!lattice.Trace(path, covered, wide, high)) {
                     return;
                 }
                 this.ctx.strokeStyle = color;
                 this.ctx.lineWidth = (_b = this.settings.gridWidthPixels) !== null && _b !== void 0 ? _b : DEFAULT_GRID_WIDTH_PIXELS;
                 this.ctx.stroke(path);
-                +" alpha" + this.ctx.globalAlpha;
             }
             /*
              * Restricts drawing to the polygon, so nothing is ruled over ground it does not cover.
@@ -47820,33 +48301,11 @@
                 path.closePath();
                 this.ctx.clip(path);
             }
-            /*
-             * The cell of whichever tile covers a point, as screen corners.
-             */
-            tileCellOutline(lon, lat) {
-                for (const tile of this.tiles) {
-                    if (lon < tile.West || lon > tile.East || lat < tile.South || lat > tile.North) {
-                        continue;
-                    }
-                    const c = (Math.min(tile.ResolutionX - 1, Math.max(0, Math.floor((lon - tile.West) / (tile.East - tile.West) * tile.ResolutionX))));
-                    const r = (Math.min(tile.ResolutionY - 1, Math.max(0, Math.floor((tile.North - lat) / (tile.North - tile.South) * tile.ResolutionY))));
-                    const w0 = tile.West + (c / tile.ResolutionX) * (tile.East - tile.West);
-                    const w1 = tile.West + ((c + 1) / tile.ResolutionX) * (tile.East - tile.West);
-                    const n0 = tile.North - (r / tile.ResolutionY) * (tile.North - tile.South);
-                    const n1 = tile.North - ((r + 1) / tile.ResolutionY) * (tile.North - tile.South);
-                    const corners = [
-                        this.project(w0, n0), this.project(w1, n0),
-                        this.project(w1, n1), this.project(w0, n1)
-                    ];
-                    return corners.every((q) => q) ? corners : null;
-                }
-                return null;
-            }
             /*
              * Outlines each tile's own cells, so cell size still shows where the mesh is refined.
              */
             drawTileGrid(color) {
-                var _a, _b, _c;
+                var _a, _b;
                 const view = this.viewer.camera.computeViewRectangle(Cesium.Ellipsoid.WGS84);
                 if (!view) {
                     return;
@@ -47875,7 +48334,7 @@
                     coarse.lineTo(tr.x, tr.y);
                     coarse.lineTo(br.x, br.y);
                     coarse.lineTo(bl.x, bl.y);
-                    coarse.closePath();
+                    coarse.lineTo(tl.x, tl.y);
                     drewCoarse = true;
                 };
                 // Planned for every visible tile BEFORE any is drawn.
@@ -47936,31 +48395,29 @@
                     // moves, and so each step up is a subset of the one below it.
                     const firstR = Math.floor(r0 / step) * step;
                     const firstC = Math.floor(c0 / step) * step;
-                    for (let r = firstR; r < r1; r += step) {
-                        const n0 = tile.North - (r / tile.ResolutionY) * (tile.North - tile.South);
-                        const n1 = tile.North
-                            - (Math.min(r + step, tile.ResolutionY) / tile.ResolutionY) * (tile.North - tile.South);
-                        for (let c = firstC; c < c1; c += step) {
-                            const w0 = tile.West + (c / tile.ResolutionX) * (tile.East - tile.West);
-                            const w1 = tile.West
-                                + (Math.min(c + step, tile.ResolutionX) / tile.ResolutionX) * (tile.East - tile.West);
-                            if (!this.coveredAt((w0 + w1) / 2, (n0 + n1) / 2)) {
-                                continue;
-                            }
-                            const tl = this.project(w0, n0);
-                            const tr = this.project(w1, n0);
-                            const br = this.project(w1, n1);
-                            const bl = this.project(w0, n1);
-                            if (!tl || !tr || !br || !bl) {
-                                continue;
-                            }
-                            path.moveTo(tl.x, tl.y);
-                            path.lineTo(tr.x, tr.y);
-                            path.lineTo(br.x, br.y);
-                            path.lineTo(bl.x, bl.y);
-                            path.closePath();
-                            drew = true;
-                        }
+                    const wide = Math.ceil((c1 - firstC) / step);
+                    const high = Math.ceil((r1 - firstR) / step);
+                    const lonOf = (c) => tile.West
+                        + (Math.min(firstC + c * step, tile.ResolutionX) / tile.ResolutionX) * (tile.East - tile.West);
+                    const latOf = (r) => tile.North
+                        - (Math.min(firstR + r * step, tile.ResolutionY) / tile.ResolutionY) * (tile.North - tile.South);
+                    const covered = new Uint8Array(wide * high);
+                    let any = false;
+                    for (let r = 0; r < high; r++) {
+                        for (let c = 0; c < wide; c++) {
+                            if (this.coveredAt((lonOf(c) + lonOf(c + 1)) / 2, (latOf(r) + latOf(r + 1)) / 2)) {
+                                covered[r * wide + c] = 1;
+                                any = true;
+                            }
+                        }
+                    }
+                    if (!any) {
+                        continue;
+                    }
+                    // Projected on demand, since a sparse raster leaves most corners belonging to no cell.
+                    const lattice = new Lattice(wide + 1, high + 1, (c, r) => this.projectInto(lonOf(c), latOf(r)));
+                    if (lattice.Trace(path, covered, wide, high)) {
+                        drew = true;
                     }
                 }
                 const gridWidth = (_b = this.settings.gridWidthPixels) !== null && _b !== void 0 ? _b : DEFAULT_GRID_WIDTH_PIXELS;
@@ -47978,7 +48435,7 @@
                     return;
                 }
                 this.ctx.strokeStyle = color;
-                this.ctx.lineWidth = (_c = this.settings.gridWidthPixels) !== null && _c !== void 0 ? _c : DEFAULT_GRID_WIDTH_PIXELS;
+                this.ctx.lineWidth = gridWidth;
                 this.ctx.stroke(path);
             }
             /*
@@ -47998,7 +48455,7 @@
                 };
             }
             /*
-             * Whether the composited raster holds data at a lon/lat.
+             * Whether the composited raster holds painted data at a lon/lat.
              */
             coveredAt(lon, lat) {
                 if (!this.source) {
@@ -48011,60 +48468,20 @@
                 if (col < 0 || row < 0 || col >= cols || row >= rows) {
                     return false;
                 }
-                const at = (row * cols + col) * 4 + 3;
                 // Painted, not merely covered: a dry cell holds a reading the ramp deliberately hides, and
                 // ruling a grid over it draws detail where the picture shows none.
-                if (this.painted && this.painted.length === cols * rows * 4) {
-                    return this.painted[at] > 0;
+                if (this.painted || this.paintedRamp) {
+                    return this.paintedAt(col, row, cols);
                 }
-                return this.source.data[at] >= 128;
+                return this.source.data[(row * cols + col) * 4 + 3] >= 128;
             }
             isCovered(col, row, cols) {
                 return Boolean(this.source && this.source.data[(row * cols + col) * 4 + 3] >= 128);
             }
             /*
-             * Width of the widest label this overlay could draw, in pixels.
-             */
-            widestLabel(parts) {
-                const sample = [];
-                if (parts.indexOf("value") >= 0) {
-                    sample.push(valueLine("-000.00", LabelUnits(this.metadata)));
-                }
-                const range = [];
-                const showsRange = !exports.TextureFrameSeriesAnimator.IsTransformed(this.metadata);
-                if (showsRange && parts.indexOf("floor") >= 0) {
-                    range.push("min: -000.00");
-                }
-                if (showsRange && parts.indexOf("ceiling") >= 0) {
-                    range.push("max: -000.00");
-                }
-                if (range.length) {
-                    sample.push(range.join(" - "));
-                }
-                if (!sample.length) {
-                    return 0;
-                }
-                const widest = Math.max(...sample.map((line) => this.ctx.measureText(line).width));
-                return widest + LABEL_GAP_PIXELS;
-            }
-            /*
-             * The four screen corners of one cell, or null if any of them will not project.
+             * What a label says about one reading, a line at a time.
              */
-            cellOutline(col, row, cols, rows) {
-                // On a pyramid the composited texel is not a cell. Outlining it would draw a second,
-                // uniform lattice over the tile grid, misaligned with it everywhere.
-                if (this.tiles && this.tiles.length) {
-                    return this.tileCellOutline(this.lonAt(col, cols), this.latAt(row, rows));
-                }
-                const corners = [
-                    this.project(this.lonAt(col - 0.5, cols), this.latAt(row - 0.5, rows)),
-                    this.project(this.lonAt(col + 0.5, cols), this.latAt(row - 0.5, rows)),
-                    this.project(this.lonAt(col + 0.5, cols), this.latAt(row + 0.5, rows)),
-                    this.project(this.lonAt(col - 0.5, cols), this.latAt(row + 0.5, rows))
-                ];
-                return corners.every((c) => c) ? corners : null;
-            }
-            drawLabel(point, reading, parts, outline) {
+            labelLines(reading, parts) {
                 var _a;
                 const dp = (_a = this.settings.decimals) !== null && _a !== void 0 ? _a : (Math.abs(reading.value) < 10 ? 2 : 1);
                 const lines = [];
@@ -48083,32 +48500,7 @@
                 if (range.length) {
                     lines.push(range.join(" - "));
                 }
-                if (!lines.length) {
-                    return;
-                }
-                if (outline) {
-                    this.ctx.strokeStyle = LABEL_ANCHOR_COLOR;
-                    this.ctx.lineWidth = 1.5;
-                    this.ctx.beginPath();
-                    this.ctx.moveTo(outline[0].x, outline[0].y);
-                    for (let i = 1; i < outline.length; i++) {
-                        this.ctx.lineTo(outline[i].x, outline[i].y);
-                    }
-                    this.ctx.closePath();
-                    this.ctx.stroke();
-                }
-                const width = Math.max(...lines.map((l) => this.ctx.measureText(l).width)) + 10;
-                const height = lines.length * LINE_HEIGHT + 6;
-                const top = point.y - height / 2;
-                this.ctx.fillStyle = "rgba(16,16,14,0.72)";
-                this.ctx.beginPath();
-                this.ctx.roundRect(point.x - width / 2, top, width, height, LABEL_RADIUS);
-                this.ctx.fill();
-                lines.forEach((line, i) => {
-                    this.ctx.fillStyle = i === 0 ? "#ffffff" : "#a8a89f";
-                    this.ctx.fillText(line, point.x, top + LINE_HEIGHT * (i + 1) - 1);
-                });
-                this.drawn++;
+                return lines;
             }
             /*
              * The first cell with a reading at or near a lattice point, searched within its own block.
@@ -48135,11 +48527,24 @@
                 return null;
             }
             paintedAt(col, row, cols) {
-                if (!this.painted) {
-                    return true;
+                const at = (row * cols + col) * 4;
+                if (this.painted && this.painted.length === this.source.data.length) {
+                    return this.painted[at + 3] > 0;
                 }
-                const at = (row * cols + col) * 4 + 3;
-                return this.painted[at] > 0;
+                if (this.paintedRamp) {
+                    const data = this.source.data;
+                    if (data[at + 3] === 0) {
+                        return false;
+                    }
+                    // The 8 bit grey the ramp is indexed on, which is what a tinted frame would have used.
+                    const grey = exports.TextureFrameSeriesAnimator.IsPackedValue(this.metadata)
+                        ? Math.round((data[at] * 256 + data[at + 1]) / 65535 * 255)
+                        : data[at];
+                    const steps = this.paintedRamp.length / 4;
+                    const index = Math.min(steps - 1, Math.round(grey / 255 * (steps - 1)));
+                    return this.paintedRamp[index * 4 + 3] > 0;
+                }
+                return true;
             }
             // Decodes one cell, skipping anything the texture marks as having no data.
             readAt(col, row, cols) {
@@ -48155,6 +48560,16 @@
                     sourceMap: this.sourceMap
                 });
             }
+            /*
+             * The texel holding a lon/lat, or null outside the raster.
+             */
+            texelAt(lon, lat) {
+                const cols = this.source.width;
+                const rows = this.source.height;
+                const col = Math.floor((lon - this.extent.West) / (this.extent.East - this.extent.West) * cols);
+                const row = Math.floor((this.extent.North - lat) / (this.extent.North - this.extent.South) * rows);
+                return col < 0 || row < 0 || col >= cols || row >= rows ? null : { col, row };
+            }
             lonAt(col, cols) {
                 return this.extent.West + ((col + 0.5) / cols) * (this.extent.East - this.extent.West);
             }
@@ -48183,15 +48598,102 @@
                     row1: Math.min(rows - 1, Math.ceil((this.extent.North - south) / spanLat * rows) + 1)
                 };
             }
+            // Metres the sheet sits at over a point, or the ellipsoid when nothing says otherwise.
+            surfaceHeight(lon, lat) {
+                const height = this.heightAt ? this.heightAt(lon, lat) : null;
+                return height == null || !isFinite(height) ? 0 : height;
+            }
+            projectCell(col, row, cols, rows) {
+                return this.project(this.lonAt(col, cols), this.latAt(row, rows));
+            }
+            // Projected at the sheet's own height, since up close the ellipsoid is metres from where it is drawn.
             project(lon, lat) {
-                const world = Cesium.Cartesian3.fromDegrees(lon, lat, 0);
+                return this.projectInto(lon, lat) ? { x: this.scratchWindow.x, y: this.scratchWindow.y } : null;
+            }
+            /*
+             * Projects into the shared scratch window position, returning whether it landed anywhere.
+             */
+            projectInto(lon, lat) {
+                const world = Cesium.Cartesian3.fromDegrees(lon, lat, this.surfaceHeight(lon, lat), Cesium.Ellipsoid.WGS84, this.scratchWorld);
+                // One matrix multiply in 3D, where the general path rederives the viewport and frustum per point.
+                if (this.viewProjection) {
+                    const clip = Cesium.Matrix4.multiplyByVector(this.viewProjection, Cesium.Cartesian4.fromElements(world.x, world.y, world.z, 1, this.scratchClip), this.scratchClip);
+                    if (!(clip.w > 0)) {
+                        return null;
+                    }
+                    const view = this.viewer.canvas;
+                    this.scratchWindow.x = (clip.x / clip.w * 0.5 + 0.5) * view.clientWidth;
+                    this.scratchWindow.y = (0.5 - clip.y / clip.w * 0.5) * view.clientHeight;
+                    return this.scratchWindow;
+                }
                 const transforms = Cesium.SceneTransforms;
                 // Renamed in newer Cesium, and this library runs on whatever the host app supplies.
                 const fn = transforms.worldToWindowCoordinates || transforms.wgs84ToWindowCoordinates;
-                return fn ? fn.call(transforms, this.viewer.scene, world) : null;
+                return fn ? fn.call(transforms, this.viewer.scene, world, this.scratchWindow) || null : null;
             }
         }
         TextureValueLabels.Labels = Labels;
+        /*
+         * A grid of window positions projected at most once each, and the cell edges traced through them.
+         */
+        class Lattice {
+            constructor(wide, high, projectAt) {
+                this.wide = wide;
+                this.projectAt = projectAt;
+                this.xs = new Float64Array(wide * high);
+                this.ys = new Float64Array(wide * high);
+                this.state = new Uint8Array(wide * high);
+            }
+            at(c, r) {
+                const i = r * this.wide + c;
+                if (this.state[i] === 0) {
+                    const p = this.projectAt(c, r);
+                    if (p) {
+                        this.xs[i] = p.x;
+                        this.ys[i] = p.y;
+                        this.state[i] = 1;
+                    }
+                    else {
+                        this.state[i] = 2;
+                    }
+                }
+                return this.state[i] === 1 ? i : -1;
+            }
+            edge(path, a, b) {
+                if (a < 0 || b < 0) {
+                    return false;
+                }
+                path.moveTo(this.xs[a], this.ys[a]);
+                path.lineTo(this.xs[b], this.ys[b]);
+                return true;
+            }
+            /*
+             * Adds each covered cell's edges to a path, a shared edge once, and says whether any were added.
+             */
+            Trace(path, covered, cellsWide, cellsHigh) {
+                let drew = false;
+                for (let r = 0; r < cellsHigh; r++) {
+                    for (let c = 0; c < cellsWide; c++) {
+                        if (!covered[r * cellsWide + c]) {
+                            continue;
+                        }
+                        const tl = this.at(c, r);
+                        const tr = this.at(c + 1, r);
+                        const bl = this.at(c, r + 1);
+                        if (!(r > 0 && covered[(r - 1) * cellsWide + c])) {
+                            drew = this.edge(path, tl, tr) || drew;
+                        }
+                        if (!(c > 0 && covered[r * cellsWide + c - 1])) {
+                            drew = this.edge(path, tl, bl) || drew;
+                        }
+                        const br = this.at(c + 1, r + 1);
+                        drew = this.edge(path, tr, br) || drew;
+                        drew = this.edge(path, bl, br) || drew;
+                    }
+                }
+                return drew;
+            }
+        }
         /*
          * The value line. Units go on it alone: repeating them on the range underneath doubles the widest
          * label to say nothing, and the two lines are plainly the same quantity.
@@ -48287,6 +48789,9 @@ in vec2 st;
 in float skirt;
 
 uniform sampler2D u_valueTexture;
+// The frame being faded away from, and how far the fade has got. The same texture at 1 when settled.
+uniform sampler2D u_valueTextureFrom;
+uniform float u_valueFade;
 uniform sampler2D u_groundTexture;
 uniform float u_valuePacked;
 uniform float u_valueMin;
@@ -48407,18 +48912,22 @@ float decodeValue(vec4 texel) {
 }
 
 void main() {
-    vec4 texel = texture(u_valueTexture, st);
+    vec4 texelTo = texture(u_valueTexture, st);
+    vec4 texelFrom = texture(u_valueTextureFrom, st);
     v_st = st;
+    // Decoded before mixing, since blending a packed pair byte by byte reads as some other value
+    // halfway through the fade.
+    float raw = mix(decodeValue(texelFrom), decodeValue(texelTo), u_valueFade);
+    float alpha = mix(texelFrom.a, texelTo.a, u_valueFade);
 
     // Inside a region the scene knows is water, a texel with no value still has to paint, or the
     // hole the region exists to close is still a hole.
     // The value it paints is the shallowest the ramp is not transparent at.
     float inMask = u_maskWeight * texture(u_maskTexture, st).a;
-    float hasData = step(u_coverageCutoffVertex, texel.a);
-    float raw = decodeValue(texel);
+    float hasData = step(u_coverageCutoffVertex, alpha);
     float filled = mix(u_maskFillValue, max(raw, u_maskFillValue), hasData);
     v_value = mix(raw, filled, inMask * u_maskFill);
-    v_coverage = max(texel.a, inMask * u_maskFill);
+    v_coverage = max(alpha, inMask * u_maskFill);
 
     // Exaggeration stretches the span above the archive's minimum rather than the height itself. On an
     // elevation the height is measured from the ellipsoid, tens of metres from any of the data, so
@@ -48461,6 +48970,8 @@ void main() {
 `;
         const FRAGMENT_SHADER_GLSL300 = `
 uniform sampler2D u_valueTexture;
+uniform sampler2D u_valueTextureFrom;
+uniform float u_valueFade;
 uniform sampler2D u_rampTexture;
 uniform float u_coverageCutoff;
 uniform vec2 u_texelSize;
@@ -48497,12 +49008,15 @@ in vec2 v_waveMetres;
  * Scaled per channel for the same reason the vertex shader's decode is: reassembling the pair reaches
  * 65535, which mediump does not have to represent, and this is the shader that may not get highp.
  */
-float valueAt(vec2 uv) {
-    vec4 texel = texture(u_valueTexture, uv);
+float decodeValue(vec4 texel) {
     float packed16 = texel.r * (255.0 * 256.0 / 65535.0) + texel.g * (255.0 / 65535.0);
     return mix(texel.r, packed16, u_valuePacked);
 }
 
+float valueAt(vec2 uv) {
+    return mix(decodeValue(texture(u_valueTextureFrom, uv)), decodeValue(texture(u_valueTexture, uv)), u_valueFade);
+}
+
 //#water
 /*
  * Slope of the ripple field at a point, in metres of rise per metre travelled.
@@ -48949,6 +49463,13 @@ void main() {
                 this.rampTexture = null;
                 this.texture = null;
                 this.textureDirty = true;
+                // Fed from a fading source: the frame being left, and which pixels each texture holds.
+                this.fade = null;
+                this.textureFrom = null;
+                this.uploadedTo = null;
+                this.uploadedFrom = null;
+                // Size of whichever value raster is bound, canvas or pixels.
+                this.sourceDims = null;
                 this.shaderProgram = null;
                 this.shaderProgramWater = false;
                 this.renderState = null;
@@ -49119,6 +49640,65 @@ void main() {
                     this.maskGroundTexture = null;
                 }
             }
+            /**
+             * Metres above the ellipsoid the sheet sits at over a point, or null unless a fading source is bound.
+             */
+            HeightAt(lon, lat) {
+                const pixels = this.fade ? this.fade.to : null;
+                const dims = this.sourceDims;
+                if (!pixels || !dims) {
+                    return null;
+                }
+                const fx = (lon - this.extent.West) / (this.extent.East - this.extent.West);
+                const fy = (this.extent.North - lat) / (this.extent.North - this.extent.South);
+                if (!(fx >= 0 && fx <= 1 && fy >= 0 && fy <= 1)) {
+                    return null;
+                }
+                const col = Math.min(dims.width - 1, Math.floor(fx * dims.width));
+                const row = Math.min(dims.height - 1, Math.floor(fy * dims.height));
+                const at = (row * dims.width + col) * 4;
+                const coverage = pixels[at + 3] / 255;
+                const normalised = this.packedValue
+                    ? (pixels[at] * 256 + pixels[at + 1]) / 65535
+                    : pixels[at] / 255;
+                const metres = this.valueMin + normalised * (this.valueMax - this.valueMin) * this.exaggeration;
+                const following = this.followGround && Boolean(this.groundPixels);
+                const ground = following ? this.groundAt(fx, fy) : 0;
+                return this.baseHeight + ground + metres * (following ? coverage : 1);
+            }
+            /**
+             * Changes whenever HeightAt would answer differently for the same frame.
+             */
+            GetPlacementKey() {
+                return [this.groundPixels ? 1 : 0, this.baseHeight, this.exaggeration, this.followGround ? 1 : 0].join("|");
+            }
+            /**
+             * The ramp the sheet is painted with, as 256 RGBA steps across the value range.
+             */
+            GetRampPixels() {
+                return this.rampPixels;
+            }
+            /*
+             * The packed ground raster read the way sampleGround reads it, bilinear between texel centres.
+             */
+            groundAt(u, v) {
+                const size = GROUND_SAMPLES_PER_SIDE;
+                const pixels = this.groundPixels;
+                const read = (x, y) => {
+                    const i = (Math.min(size - 1, Math.max(0, y)) * size + Math.min(size - 1, Math.max(0, x))) * 4;
+                    const packed = (pixels[i] << 16) + (pixels[i + 1] << 8) + pixels[i + 2];
+                    return GROUND_MIN_METRES + (packed / 16777215) * (GROUND_MAX_METRES - GROUND_MIN_METRES);
+                };
+                const x = u * size - 0.5;
+                const y = v * size - 0.5;
+                const x0 = Math.floor(x);
+                const y0 = Math.floor(y);
+                const fx = x - x0;
+                const fy = y - y0;
+                const top = read(x0, y0) + (read(x0 + 1, y0) - read(x0, y0)) * fx;
+                const bottom = read(x0, y0 + 1) + (read(x0 + 1, y0 + 1) - read(x0, y0 + 1)) * fx;
+                return top + (bottom - top) * fy;
+            }
             /**
              * Feeds the surface from an animated frame series.
              * Height and colour advance with the clock without the caller having to push each frame in.
@@ -49137,23 +49717,39 @@ void main() {
                     return;
                 }
                 const context = frameState.context;
-                if (this.valueSource) {
-                    const canvas = this.valueSource.GetValueCanvas();
-                    if (!canvas) {
-                        // No frame decoded yet, so there is nothing to displace against.
-                        return;
-                    }
-                    const version = this.valueSource.GetPresentVersion();
-                    if (canvas !== this.source || version !== this.lastPresentVersion) {
-                        this.source = canvas;
-                        this.lastPresentVersion = version;
-                        this.textureDirty = true;
+                const fade = this.valueSource && this.valueSource.GetValueFade
+                    ? this.valueSource.GetValueFade()
+                    : null;
+                if (fade) {
+                    this.fade = fade;
+                    this.sourceDims = { width: fade.width, height: fade.height };
+                }
+                else {
+                    this.fade = null;
+                    if (this.valueSource) {
+                        const canvas = this.valueSource.GetValueCanvas();
+                        if (!canvas) {
+                            // No frame decoded yet, so there is nothing to displace against.
+                            return;
+                        }
+                        const version = this.valueSource.GetPresentVersion();
+                        if (canvas !== this.source || version !== this.lastPresentVersion) {
+                            this.source = canvas;
+                            this.lastPresentVersion = version;
+                            this.textureDirty = true;
+                        }
                     }
+                    this.sourceDims = this.source ? { width: this.source.width, height: this.source.height } : null;
                 }
-                if (!this.source || !this.source.width || !this.source.height) {
+                if (!this.sourceDims || !this.sourceDims.width || !this.sourceDims.height) {
                     return;
                 }
-                this.syncTexture(context);
+                if (this.fade) {
+                    this.syncFadeTextures(context);
+                }
+                else {
+                    this.syncTexture(context);
+                }
                 this.syncRampTexture(context);
                 this.requestGround();
                 this.syncGroundTexture(context);
@@ -49201,6 +49797,10 @@ void main() {
                     this.texture.destroy();
                     this.texture = null;
                 }
+                if (this.textureFrom) {
+                    this.textureFrom.destroy();
+                    this.textureFrom = null;
+                }
                 if (this.rampTexture) {
                     this.rampTexture.destroy();
                     this.rampTexture = null;
@@ -49468,7 +50068,7 @@ void main() {
                 const southWest = Cesium.Cartesian3.fromDegrees(this.extent.West, this.extent.South, 0);
                 const southEast = Cesium.Cartesian3.fromDegrees(this.extent.East, this.extent.South, 0);
                 const width = Cesium.Cartesian3.distance(southWest, southEast);
-                return Math.max(1, width / Math.max(1, this.source ? this.source.width : 1));
+                return Math.max(1, width / Math.max(1, this.sourceDims ? this.sourceDims.width : 1));
             }
             syncRampTexture(context) {
                 if (this.rampTexture) {
@@ -49489,6 +50089,67 @@ void main() {
                     })
                 });
             }
+            valueSampler() {
+                // Nearest for a packed value, because filtering would blend the two bytes of the
+                // packing rather than the values they encode, the same trap sampleGround avoids.
+                const minification = this.packedValue
+                    ? Cesium.TextureMinificationFilter.NEAREST
+                    : Cesium.TextureMinificationFilter.LINEAR;
+                const magnification = this.packedValue
+                    ? Cesium.TextureMagnificationFilter.NEAREST
+                    : Cesium.TextureMagnificationFilter.LINEAR;
+                return new Cesium.Sampler({
+                    wrapS: Cesium.TextureWrap.CLAMP_TO_EDGE,
+                    wrapT: Cesium.TextureWrap.CLAMP_TO_EDGE,
+                    minificationFilter: minification,
+                    magnificationFilter: magnification
+                });
+            }
+            /*
+             * Uploads value pixels into a texture, reusing it when the size still fits.
+             */
+            uploadPixels(context, texture, pixels, width, height) {
+                const view = new Uint8Array(pixels.buffer, pixels.byteOffset, pixels.byteLength);
+                const source = { width, height, arrayBufferView: view };
+                if (texture && texture.width === width && texture.height === height) {
+                    texture.copyFrom({ source });
+                    return texture;
+                }
+                if (texture) {
+                    texture.destroy();
+                }
+                return new Cesium.Texture({
+                    context,
+                    width,
+                    height,
+                    pixelFormat: Cesium.PixelFormat.RGBA,
+                    pixelDatatype: Cesium.PixelDatatype.UNSIGNED_BYTE,
+                    source,
+                    // Row 0 is the archive's north edge, and has to stay at the top, as the canvas path does.
+                    flipY: false,
+                    sampler: this.valueSampler()
+                });
+            }
+            /*
+             * Keeps a texture each side of the fade, swapping them on a new frame so only that one is uploaded.
+             */
+            syncFadeTextures(context) {
+                const fade = this.fade;
+                if (fade.to !== this.uploadedTo) {
+                    if (fade.from && fade.from === this.uploadedTo && this.texture) {
+                        const previous = this.textureFrom;
+                        this.textureFrom = this.texture;
+                        this.uploadedFrom = this.uploadedTo;
+                        this.texture = previous;
+                    }
+                    this.texture = this.uploadPixels(context, this.texture, fade.to, fade.width, fade.height);
+                    this.uploadedTo = fade.to;
+                }
+                if (fade.from && fade.from !== this.uploadedFrom) {
+                    this.textureFrom = this.uploadPixels(context, this.textureFrom, fade.from, fade.width, fade.height);
+                    this.uploadedFrom = fade.from;
+                }
+            }
             syncTexture(context) {
                 const sizeChanged = this.texture
                     && (this.texture.width !== this.source.width || this.texture.height !== this.source.height);
@@ -49496,27 +50157,15 @@ void main() {
                     if (this.texture) {
                         this.texture.destroy();
                     }
-                    // Nearest for a packed value, because filtering would blend the two bytes of the
-                    // packing rather than the values they encode, the same trap sampleGround avoids.
-                    const minification = this.packedValue
-                        ? Cesium.TextureMinificationFilter.NEAREST
-                        : Cesium.TextureMinificationFilter.LINEAR;
-                    const magnification = this.packedValue
-                        ? Cesium.TextureMagnificationFilter.NEAREST
-                        : Cesium.TextureMagnificationFilter.LINEAR;
                     this.texture = new Cesium.Texture({
                         context,
                         source: this.source,
                         // Cesium flips canvas rows on upload by default, which would put the archive's
                         // row 0 (its north edge) at the south edge and mirror the whole surface.
                         flipY: false,
-                        sampler: new Cesium.Sampler({
-                            wrapS: Cesium.TextureWrap.CLAMP_TO_EDGE,
-                            wrapT: Cesium.TextureWrap.CLAMP_TO_EDGE,
-                            minificationFilter: minification,
-                            magnificationFilter: magnification
-                        })
+                        sampler: this.valueSampler()
                     });
+                    this.uploadedTo = null;
                     this.textureDirty = false;
                     return;
                 }
@@ -49579,7 +50228,7 @@ void main() {
              * carry, so the ladder is capped one step above the texel count rather than run to its top.
              */
             tierCeiling() {
-                const source = this.source;
+                const source = this.sourceDims;
                 if (!source || !source.width || !source.height) {
                     return TIERS[TIERS.length - 1];
                 }
@@ -49657,6 +50306,10 @@ void main() {
                         owner: this,
                         uniformMap: {
                             u_valueTexture: () => self.texture,
+                            u_valueTextureFrom: () => (self.fade && self.fade.from && self.textureFrom
+                                ? self.textureFrom
+                                : self.texture),
+                            u_valueFade: () => (self.fade && self.fade.from ? self.fade.mix : 1),
                             u_groundTexture: () => self.groundTexture,
                             u_valuePacked: () => (self.packedValue ? 1 : 0),
                             u_groundWeight: () => (self.followGround && self.groundPixels ? 1 : 0),
@@ -49694,7 +50347,7 @@ void main() {
                                 : 0,
                             u_coverageCutoff: () => COVERAGE_CUTOFF,
                             u_rampTexture: () => self.rampTexture,
-                            u_texelSize: () => new Cesium.Cartesian2(1 / self.source.width, 1 / self.source.height),
+                            u_texelSize: () => new Cesium.Cartesian2(1 / self.sourceDims.width, 1 / self.sourceDims.height),
                             u_waterOn: () => (self.water ? 1 : 0),
                             u_waterWavelength: () => (self.water && self.water.wavelength)
                                 || DEFAULT_WATER_WAVELENGTH_METRES,
@@ -50065,6 +50718,10 @@ void main() {
             syncTextureValueLabels({
                 cEntity,
                 viewer: params.viewer,
+                surface: drawsDisplacedSurface ? cEntity[DISPLACED_SURFACE_KEY] : null,
+                hover: params.visualRegister
+                    ? { register: params.visualRegister, entityId: String(entity.Bruce.ID), menuItemId: params.menuItemId }
+                    : undefined,
                 settings: overlaySettings(style, entity, params.tags),
                 extent: labelArchive
                     ? (drawsDisplacedSurface ? archiveExtent(labelArchive.metadata, posses) : drapeExtent)
@@ -50371,6 +51028,7 @@ void main() {
                         // rendered: null
                         rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c.get(entity.Bruce.ID),
                         menuItemId: params.menuItemId,
+                        visualRegister: params.visualRegister,
                         onSeriesDiscovered: params.onSeriesDiscovered
                     });
                 }
@@ -50808,8 +51466,8 @@ void main() {
      */
     const LABEL_GRID_COLOR = "rgba(255,255,255,0.55)";
     const LABEL_GRID_WIDTH_PIXELS = 1;
-    const LABEL_MIN_SPACING_PIXELS = 78;
-    const LABEL_MAX_LABELS = 240;
+    const LABEL_MIN_SPACING_PIXELS = 140;
+    const LABEL_MAX_LABELS = 60;
     function overlaySettings(style, entity, tags) {
         if (!wantsLabels(style)) {
             return undefined;
@@ -50829,6 +51487,7 @@ void main() {
      */
     function syncTextureValueLabels(params) {
         const { cEntity, viewer, settings, extent, animator, metadata } = params;
+        const surface = params.surface && !params.surface.isDestroyed() ? params.surface : null;
         const existing = cEntity[TEXTURE_VALUE_LABELS_KEY];
         // Offline has no extent to rebuild the overlay from, so an existing one is left running.
         if (params.offline && existing) {
@@ -50847,8 +51506,13 @@ void main() {
                 West: tile.West, East: tile.East, South: tile.South, North: tile.North,
                 ResolutionX: tile.ResolutionX, ResolutionY: tile.ResolutionY
             })),
-            clipRing: params.clipRing
+            clipRing: params.clipRing,
+            heightAt: surface ? (lon, lat) => surface.HeightAt(lon, lat) : undefined,
+            heightKey: surface ? () => surface.GetPlacementKey() : undefined,
+            hover: params.hover
         });
+        // A surface keeps no tinted frame, so whether a cell was painted is read off its ramp.
+        labels.SetPaintedRamp(surface ? surface.GetRampPixels() : null);
         let lastVersion = -1;
         let appliedFloor = null;
         let appliedCeiling = null;
@@ -50860,15 +51524,15 @@ void main() {
             if (animator.IsDisposed()) {
                 return;
             }
-            const canvas = animator.GetValueCanvas();
-            if (!canvas) {
-                return;
-            }
             const version = animator.GetPresentVersion();
             if (version !== lastVersion) {
+                // Read from the frame cache, since reading the value canvas back copies a whole frame.
+                const raster = animator.GetValueRaster();
+                if (!raster) {
+                    return;
+                }
                 lastVersion = version;
-                const ctx = canvas.getContext("2d");
-                labels.SetSource(ctx.getImageData(0, 0, canvas.width, canvas.height));
+                labels.SetSource(raster);
                 labels.SetPainted(animator.GetDisplayedPixels());
             }
             // Tracked by reference rather than latched on the first one to arrive: a tiled archive
@@ -52592,7 +53256,7 @@ void main() {
         StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
     })(exports.StyleUtils || (exports.StyleUtils = {}));
 
-    const VERSION = "7.5.8";
+    const VERSION = "7.5.9";
     /**
      * Updates the environment instance used by bruce-cesium to one specified.
      * This can be used to ensure that the instance a parent is referencing is shared between bruce-cesium, bruce-models, and the parent app.