bruce-cesium 7.5.8 → 7.6.0

package/dist/lib/rendering/texture-value-labels.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextureValueLabels = void 0;
 const Cesium = require("cesium");
 const texture_frame_series_animator_1 = require("./texture-frame-series-animator");
+const entity_label_1 = require("./render-managers/common/entity-label");
 /**
  * Prints a value texture's own numbers over the cells they belong to.
  */
@@ -14,13 +15,15 @@ var TextureValueLabels;
     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;
@@ -34,7 +37,8 @@ var TextureValueLabels;
     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
@@ -128,11 +132,25 @@ var TextureValueLabels;
             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 || {};
@@ -142,6 +160,9 @@ var TextureValueLabels;
             this.sourceMap = texture_frame_series_animator_1.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";
@@ -151,12 +172,31 @@ var TextureValueLabels;
                 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) {
@@ -164,11 +204,17 @@ var TextureValueLabels;
         }
         /**
          * 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.
@@ -178,21 +224,28 @@ var TextureValueLabels;
             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;
@@ -200,67 +253,296 @@ var TextureValueLabels;
                 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;
+                    }
+                    const text = this.labelLines(found.reading, parts).join("\n");
+                    if (!text) {
                         continue;
                     }
-                    this.drawLabel(point, found.reading, parts, this.cellOutline(found.col, found.row, cols, rows));
+                    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 entity_label_1.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.
@@ -288,44 +570,25 @@ var TextureValueLabels;
             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.
@@ -347,33 +610,11 @@ var TextureValueLabels;
             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;
@@ -402,7 +643,7 @@ var TextureValueLabels;
                 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.
@@ -463,32 +704,30 @@ var TextureValueLabels;
                 // 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;
+                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;
                         }
-                        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;
                     }
                 }
+                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;
             if (drewCoarse) {
@@ -505,7 +744,7 @@ var TextureValueLabels;
                 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);
         }
         /*
@@ -525,7 +764,7 @@ var TextureValueLabels;
             };
         }
         /*
-         * 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) {
@@ -538,60 +777,20 @@ var TextureValueLabels;
             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.
+         * What a label says about one reading, a line at a time.
          */
-        widestLabel(parts) {
-            const sample = [];
-            if (parts.indexOf("value") >= 0) {
-                sample.push(valueLine("-000.00", LabelUnits(this.metadata)));
-            }
-            const range = [];
-            const showsRange = !texture_frame_series_animator_1.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.
-         */
-        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 = [];
@@ -610,32 +809,7 @@ var TextureValueLabels;
             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.
@@ -662,11 +836,24 @@ var TextureValueLabels;
             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;
+            }
+            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 = texture_frame_series_animator_1.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;
             }
-            const at = (row * cols + col) * 4 + 3;
-            return this.painted[at] > 0;
+            return true;
         }
         // Decodes one cell, skipping anything the texture marks as having no data.
         readAt(col, row, cols) {
@@ -682,6 +869,16 @@ var TextureValueLabels;
                 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);
         }
@@ -710,15 +907,102 @@ var TextureValueLabels;
                 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.