bruce-cesium 6.9.6 → 6.9.8

package/dist/bruce-cesium.umd.js

@@ -9661,13 +9661,14 @@
                 // Type IDs that we'll allow to be rendered when receiving Entities.
                 // This might be exactly the Menu Item Type ID because of local data sources.
                 this.allowedTypeIDs = [];
-                const { viewer, apiGetter, monitor, item, register: visualsManager, sharedGetters } = params;
+                const { viewer, apiGetter, monitor, item, register: visualsManager, sharedGetters, onSeriesDiscovered } = params;
                 this.viewer = viewer;
                 this.sharedGetters = sharedGetters;
                 this.monitor = monitor;
                 this.apiGetter = apiGetter;
                 this.item = item;
                 this.visualsManager = visualsManager;
+                this.onSeriesDiscovered = onSeriesDiscovered;
                 this.useGeojson = item.renderAsGeojson == true;
                 if (item.enableClustering) {
                     this.clustering = new PointClustering(this.visualsManager, this.item.id);
@@ -10636,6 +10637,7 @@
                     apiGetter: this.apiGetter,
                     entities: entities,
                     menuItemId: this.item.id,
+                    onSeriesDiscovered: this.onSeriesDiscovered,
                     visualRegister: this.visualsManager,
                     zoomControl: this.zoomControl,
                     entitiesHistoric: entitiesHistoric,
@@ -22197,6 +22199,46 @@
                 }
                 return this.onUpdate;
             }
+            get OnSeriesUpdated() {
+                if (!this.onSeriesUpdated) {
+                    this.onSeriesUpdated = new BModels.BruceEvent();
+                }
+                return this.onSeriesUpdated;
+            }
+            /**
+             * Currently known series segments for a menu item (empty array if none discovered yet).
+             */
+            GetSeriesSegments(itemId) {
+                return this.seriesSegments.get(itemId) || [];
+            }
+            /**
+             * @param itemId
+             * @param segment
+             */
+            RecordSeriesSegment(itemId, segment) {
+                const existing = this.seriesSegments.get(itemId) || [];
+                const idx = existing.findIndex((s) => s.key === segment.key);
+                if (idx !== -1) {
+                    const current = existing[idx];
+                    if (current.min.getTime() === segment.min.getTime() && current.max.getTime() === segment.max.getTime() && current.label === segment.label) {
+                        return; // No-op.
+                    }
+                    existing[idx] = segment;
+                }
+                else {
+                    existing.push(segment);
+                }
+                this.seriesSegments.set(itemId, existing);
+                this.OnSeriesUpdated.Trigger({ itemId, segments: existing });
+            }
+            /**
+             * Clears any series segments recorded for a menu item, eg when it's disabled/removed.
+             */
+            ClearSeriesSegments(itemId) {
+                if (this.seriesSegments.delete(itemId)) {
+                    this.OnSeriesUpdated.Trigger({ itemId, segments: [] });
+                }
+            }
             get Monitor() {
                 return this.sharedMonitor;
             }
@@ -22204,6 +22246,9 @@
                 this.items = [];
                 this.pendingHandoffPool = [];
                 this.onUpdate = null;
+                // Segments discovered so far per menu item ID.
+                this.seriesSegments = new Map();
+                this.onSeriesUpdated = null;
                 let { viewer, visualsRegister, getters } = params;
                 this.viewer = viewer;
                 if (!getters) {
@@ -22429,7 +22474,8 @@
                                 apiGetter: params.apiGetter,
                                 monitor: this.sharedMonitor,
                                 item: params.item,
-                                sharedGetters: this.sharedGetters
+                                sharedGetters: this.sharedGetters,
+                                onSeriesDiscovered: (segment) => this.RecordSeriesSegment(rItem.id, segment)
                             });
                             break;
                         case BModels.MenuItem.EType.EntitiesLoaded:
@@ -22655,6 +22701,7 @@
                         }
                     }
                     this.items = this.items.filter(x => x.id !== id);
+                    this.ClearSeriesSegments(item.id);
                     (_b = this.onUpdate) === null || _b === void 0 ? void 0 : _b.Trigger({ isEnabling: false, itemId: item.id });
                 }
             }
@@ -36618,6 +36665,312 @@
         return heightRef;
     }
 
+    /**
+     * Remaps a (assumed grayscale, server-rendered black-to-white) image's pixels into a gradient between minColor/maxColor,
+     * preserving source alpha blended with the mask's own alpha.
+     * @param imageData
+     * @param minColor
+     * @param maxColor
+     */
+    function ApplyGrayscaleColorMask(imageData, minColor, maxColor) {
+        const data = imageData.data;
+        for (let i = 0; i < data.length; i += 4) {
+            // The texture is rendered black-to-white server-side, so any channel carries the value.
+            const t = data[i] / 255;
+            data[i] = Math.round(minColor.red + (maxColor.red - minColor.red) * t);
+            data[i + 1] = Math.round(minColor.green + (maxColor.green - minColor.green) * t);
+            data[i + 2] = Math.round(minColor.blue + (maxColor.blue - minColor.blue) * t);
+            // Preserve source transparency (eg unrasterized pixels) blended with the mask's own alpha.
+            const srcAlpha = data[i + 3] / 255;
+            const maskAlpha = minColor.alpha + (maxColor.alpha - minColor.alpha) * t;
+            data[i + 3] = Math.round(srcAlpha * maskAlpha * 255);
+        }
+    }
+    function loadImage(src) {
+        return new Promise((res, rej) => {
+            const image = new Image();
+            image.onload = () => res(image);
+            image.onerror = (e) => rej(e);
+            image.src = src;
+        });
+    }
+
+    var TextureFrameSeriesAnimator;
+    (function (TextureFrameSeriesAnimator) {
+        /**
+         * Detects whether a ClientFile's `Data.generation` metadata describes a frame archive rather than a single static image,
+         * so a caller can decide whether to construct an Animator or fall back to the existing static-texture path.
+         * @param data ClientFile.Data (the `IFile.Data` field), as returned by ClientFile.Get().
+         */
+        function IsFrameArchiveMetadata(data) {
+            return Boolean(data && data.generation && Array.isArray(data.generation.Frames) && data.generation.Frames.length > 0);
+        }
+        TextureFrameSeriesAnimator.IsFrameArchiveMetadata = IsFrameArchiveMetadata;
+        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;
+                this.removeOnTick = null;
+                this.removeCrossfadeTick = null;
+                this.disposed = false;
+                this.currentFrameIndex = -1;
+                // Single-in-flight fetch queue: only one Range GET outstanding at a time, and the NEXT one
+                // is chosen right before sending, this is what makes reprioritizing mid-scrub take effect
+                // immediately instead of draining a backlog of stale requests first.
+                this.inFlightIndex = -1;
+                this.pendingIndex = -1;
+                this.displayedPixels = null;
+                this.fadeFromPixels = null;
+                this.fadeToIndex = -1;
+                this.fadeToDims = null;
+                this.fadeStartMs = null;
+                // Two-canvas pool: Cesium compares image references each frame, so alternating between
+                // pool[0]/pool[1] gives a new object reference whenever we actually present a new frame,
+                // forcing Cesium to re-upload the texture only when something changed.
+                this.pool = [document.createElement("canvas"), document.createElement("canvas")];
+                this.poolIdx = 0;
+                if (!options.entity.polygon) {
+                    throw new Error("TextureFrameSeriesAnimator requires an entity with polygon graphics.");
+                }
+                if (!options.frames || options.frames.length === 0) {
+                    throw new Error("TextureFrameSeriesAnimator requires at least one frame.");
+                }
+                this.viewer = options.viewer;
+                this.entity = options.entity;
+                this.archiveUrl = options.archiveUrl;
+                this.frames = options.frames;
+                this.crossfadeMs = (_a = options.crossfadeMs) !== null && _a !== void 0 ? _a : DEFAULT_CROSSFADE_MS;
+                const mask = options.textureColorMask;
+                this.lowColor = (mask && BModels.Color.ColorFromStr(mask.minColor)) || DEFAULT_LOW_COLOR;
+                this.highColor = (mask && BModels.Color.ColorFromStr(mask.maxColor)) || DEFAULT_HIGH_COLOR;
+                this.frameDates = this.frames.map((f) => Cesium.JulianDate.fromIso8601(f.Timestamp));
+                this.frameCache = new Array(this.frames.length).fill(null);
+                this.frameDims = new Array(this.frames.length).fill(null);
+                this.originalMaterial = options.entity.polygon.material;
+                this.imageProperty = new Cesium.CallbackProperty(() => this.pool[this.poolIdx], false);
+                options.entity.polygon.material = new Cesium.ImageMaterialProperty({ image: this.imageProperty, transparent: true });
+                this.removeCrossfadeTick = this.viewer.scene.postUpdate.addEventListener(() => this.tickCrossfade());
+                this.removeOnTick = this.viewer.clock.onTick.addEventListener((clock) => this.onClockTick(clock.currentTime));
+                this.onClockTick(this.viewer.clock.currentTime);
+            }
+            /**
+             * Explicit teardown: stops driving the entity's material, abandons any in-flight/pending fetch (results are simply ignored when they land),
+             * and restores whatever material the entity had before construction. Never called automatically.
+             */
+            Dispose() {
+                if (this.disposed) {
+                    return;
+                }
+                this.disposed = true;
+                if (this.removeOnTick) {
+                    this.removeOnTick();
+                    this.removeOnTick = null;
+                }
+                if (this.removeCrossfadeTick) {
+                    this.removeCrossfadeTick();
+                    this.removeCrossfadeTick = null;
+                }
+                if (this.entity && this.entity.polygon) {
+                    this.entity.polygon.material = this.originalMaterial;
+                }
+            }
+            IsDisposed() {
+                return this.disposed;
+            }
+            /**
+             * The archive URL this instance was constructed with,
+             * lets a caller re-rendering the same entity tell whether an existing instance is already correct, without reaching into private state.
+             */
+            GetArchiveUrl() {
+                return this.archiveUrl;
+            }
+            onClockTick(currentTime) {
+                if (this.disposed) {
+                    return;
+                }
+                this.swapToFrame(this.findFrameIndex(currentTime));
+            }
+            // Binary-search the frame whose timestamp is <= currentTime.
+            findFrameIndex(currentTime) {
+                const dates = this.frameDates;
+                let lo = 0;
+                let hi = dates.length - 1;
+                if (Cesium.JulianDate.lessThanOrEquals(currentTime, dates[0])) {
+                    return 0;
+                }
+                if (Cesium.JulianDate.greaterThanOrEquals(currentTime, dates[hi])) {
+                    return hi;
+                }
+                while (lo < hi) {
+                    const mid = (lo + hi + 1) >> 1;
+                    if (Cesium.JulianDate.lessThanOrEquals(dates[mid], currentTime)) {
+                        lo = mid;
+                    }
+                    else {
+                        hi = mid - 1;
+                    }
+                }
+                return lo;
+            }
+            // Called with the discrete target frame (never a fractional/interpolated index).
+            // Scrubbing rapidly just retargets what's fetched next.
+            swapToFrame(idx) {
+                if (idx === this.currentFrameIndex) {
+                    return;
+                }
+                this.currentFrameIndex = idx;
+                if (this.frameCache[idx]) {
+                    this.beginCrossfadeTo(idx);
+                    return;
+                }
+                this.ensureFrame(idx);
+            }
+            ensureFrame(idx) {
+                if (this.frameCache[idx]) {
+                    return;
+                }
+                if (this.inFlightIndex === idx) {
+                    return;
+                }
+                this.pendingIndex = idx;
+                this.pumpFetchQueue();
+            }
+            // Nearest still-uncached frame to wherever the viewer CURRENTLY is.
+            nearestUncachedFrame() {
+                const n = this.frameCache.length;
+                if (this.currentFrameIndex < 0) {
+                    return this.frameCache[0] ? -1 : 0;
+                }
+                for (let d = 0; d < n; d++) {
+                    const forward = this.currentFrameIndex + d;
+                    if (forward < n && !this.frameCache[forward]) {
+                        return forward;
+                    }
+                    const backward = this.currentFrameIndex - d;
+                    if (backward >= 0 && !this.frameCache[backward]) {
+                        return backward;
+                    }
+                }
+                return -1;
+            }
+            pumpFetchQueue() {
+                if (this.disposed || this.inFlightIndex !== -1) {
+                    return;
+                }
+                let next = -1;
+                if (this.pendingIndex !== -1) {
+                    next = this.pendingIndex;
+                    this.pendingIndex = -1;
+                }
+                else {
+                    next = this.nearestUncachedFrame();
+                }
+                if (next === -1) {
+                    return;
+                }
+                this.inFlightIndex = next;
+                this.fetchAndTint(next)
+                    .catch(() => {
+                    // Eating it.
+                })
+                    .finally(() => {
+                    this.inFlightIndex = -1;
+                    if (!this.disposed) {
+                        this.pumpFetchQueue();
+                    }
+                });
+            }
+            async fetchAndTint(idx) {
+                const entry = this.frames[idx];
+                const start = entry.ByteOffset;
+                const end = entry.ByteOffset + entry.ByteLength - 1;
+                const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${start}-${end}` } });
+                const buffer = await response.arrayBuffer();
+                if (this.disposed) {
+                    return;
+                }
+                const decoded = await this.decodeAndTint(buffer);
+                if (this.disposed) {
+                    return;
+                }
+                this.frameCache[idx] = decoded.pixels;
+                this.frameDims[idx] = { width: decoded.width, height: decoded.height };
+                if (idx === this.currentFrameIndex) {
+                    this.beginCrossfadeTo(idx);
+                }
+            }
+            /**
+             * Decodes one frame's raw PNG bytes (as returned by a Range GET) and applies the grayscale color mask.
+             */
+            async decodeAndTint(buffer) {
+                const blob = new Blob([buffer], { type: "image/png" });
+                const objectUrl = URL.createObjectURL(blob);
+                let image;
+                try {
+                    image = await loadImage(objectUrl);
+                }
+                finally {
+                    URL.revokeObjectURL(objectUrl);
+                }
+                const canvas = document.createElement("canvas");
+                canvas.width = image.width;
+                canvas.height = image.height;
+                const ctx = canvas.getContext("2d");
+                ctx.drawImage(image, 0, 0);
+                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                ApplyGrayscaleColorMask(imageData, this.lowColor, this.highColor);
+                return { pixels: imageData.data, width: canvas.width, height: canvas.height };
+            }
+            beginCrossfadeTo(idx) {
+                const to = this.frameCache[idx];
+                this.fadeFromPixels = this.displayedPixels === null ? new Uint8ClampedArray(to.length) : this.displayedPixels;
+                this.fadeToIndex = idx;
+                this.fadeToDims = this.frameDims[idx];
+                this.fadeStartMs = Now();
+            }
+            tickCrossfade() {
+                if (this.disposed || this.fadeStartMs === null) {
+                    return;
+                }
+                const t = Math.min(1, (Now() - this.fadeStartMs) / this.crossfadeMs);
+                const eased = easeInOutQuad(t);
+                const from = this.fadeFromPixels;
+                const to = this.frameCache[this.fadeToIndex];
+                const n = Math.min(from.length, to.length);
+                const blended = new Uint8ClampedArray(to.length);
+                for (let i = 0; i < n; i++) {
+                    blended[i] = from[i] + (to[i] - from[i]) * eased;
+                }
+                this.presentPixels(blended, this.fadeToDims);
+                if (t >= 1) {
+                    this.fadeStartMs = null;
+                    this.fadeFromPixels = null;
+                }
+            }
+            presentPixels(pixels, dims) {
+                this.poolIdx = 1 - this.poolIdx;
+                const target = this.pool[this.poolIdx];
+                target.width = dims.width;
+                target.height = dims.height;
+                const ctx = target.getContext("2d");
+                const imgData = ctx.createImageData(dims.width, dims.height);
+                imgData.data.set(pixels);
+                ctx.putImageData(imgData, 0, 0);
+                this.displayedPixels = pixels;
+            }
+        }
+        TextureFrameSeriesAnimator.Animator = Animator;
+        function easeInOutQuad(t) {
+            return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+        }
+        function Now() {
+            return typeof performance !== "undefined" ? performance.now() : Date.now();
+        }
+    })(TextureFrameSeriesAnimator || (TextureFrameSeriesAnimator = {}));
+
+    const TEXTURE_FRAME_SERIES_ANIMATOR_KEY = "TextureFrameSeriesAnimator.Animator";
     (function (EntityRenderEnginePolygon) {
         async function Render(params) {
             var _a, _b;
@@ -36636,6 +36989,7 @@
             const cFillColor = bFillColor ? ColorToCColor(bFillColor) : Cesium.Color.fromCssColorString("rgba(139, 195, 74, 0.8)");
             let textureDataUri = null;
             let textureTraceEffective = null;
+            let frameArchive = null;
             if (fillType === BModels.Style.EPolygonFillType.Texture) {
                 const resolved = await resolveTexturedFill({
                     api: params.api,
@@ -36645,11 +36999,14 @@
                 });
                 textureDataUri = resolved.dataUri;
                 textureTraceEffective = resolved.effective;
+                frameArchive = resolved.frameArchive || null;
             }
-            const hasFill = fillType === BModels.Style.EPolygonFillType.Texture ? Boolean(textureDataUri) : cFillColor.alpha > 0;
+            const hasFill = fillType === BModels.Style.EPolygonFillType.Texture ? Boolean(textureDataUri || frameArchive) : cFillColor.alpha > 0;
             const fillMaterial = textureDataUri
                 ? new Cesium.ImageMaterialProperty({ image: textureDataUri, transparent: true })
-                : cFillColor;
+                : frameArchive
+                    ? Cesium.Color.WHITE.withAlpha(0)
+                    : cFillColor;
             const lineColorTrace = style.lineColor ? BModels.Calculator.TraceGetColor(style.lineColor, entity, params.tags) : { value: null, effective: null };
             const bLineColor = lineColorTrace.value;
             const cLineColor = bLineColor ? ColorToCColor(bLineColor) : Cesium.Color.fromCssColorString("rgba(80, 80, 80, 0.8)");
@@ -36819,6 +37176,13 @@
                 }
                 cEntity.show = true;
             }
+            syncTextureFrameArchive(cEntity, frameArchive, params.viewer, style.textureColorMask);
+            if (frameArchive && params.onSeriesDiscovered) {
+                const segment = frameArchiveToSeriesSegment(frameArchive, params.entity);
+                if (segment) {
+                    params.onSeriesDiscovered(segment);
+                }
+            }
             if (hasOutline) {
                 let borderHeight = undefined;
                 if (heightRef != Cesium.HeightReference.CLAMP_TO_GROUND) {
@@ -37027,7 +37391,9 @@
                     // Temporarily disabling re-using graphics for polygons as they have some bugs, and
                     // they don't support any animation yet.
                     // rendered: null
-                    rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c.get(entity.Bruce.ID)
+                    rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c.get(entity.Bruce.ID),
+                    menuItemId: params.menuItemId,
+                    onSeriesDiscovered: params.onSeriesDiscovered
                 });
                 if (cEntity) {
                     const name = await getName$3(api, entity);
@@ -37143,11 +37509,86 @@
     // same polygon (or multiple polygons sharing a texture) don't refetch/reprocess the same image.
     const _textureCache = new BModels.LRUCache(50);
     /**
-     * Returns if a resolved texture value looks like a URL rather than a client file ID.
+     * Reconciles cEntity's TextureFrameSeriesAnimator.Animator (if any) against this render's resolved texture.
+     * Called once cEntity is fully created/updated and definitely has a `polygon` graphics.
+     * @param cEntity
+     * @param frameArchive
+     * @param viewer
+     * @param textureColorMask
+     */
+    function syncTextureFrameArchive(cEntity, frameArchive, viewer, textureColorMask) {
+        const existing = cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY];
+        if (frameArchive && existing && !existing.IsDisposed() && existing.GetArchiveUrl() === frameArchive.url) {
+            return;
+        }
+        if (existing && !existing.IsDisposed()) {
+            existing.Dispose();
+            cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY] = null;
+        }
+        if (frameArchive) {
+            const animator = new TextureFrameSeriesAnimator.Animator({
+                viewer,
+                entity: cEntity,
+                archiveUrl: frameArchive.url,
+                frames: frameArchive.metadata.Frames,
+                textureColorMask
+            });
+            cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY] = animator;
+        }
+    }
+    /**
+     * Derives a min/max/label time-range segment from a resolved frame archive's Frames metadata,
+     * for reporting up to whoever owns the menu item this entity belongs to (see IParams.onSeriesDiscovered).
+     * @param frameArchive
+     * @param entity
+     */
+    function frameArchiveToSeriesSegment(frameArchive, entity) {
+        var _a;
+        const timestamps = frameArchive.metadata.Frames
+            .map((f) => new Date(f.Timestamp))
+            .filter((d) => !isNaN(d.getTime()));
+        if (!timestamps.length) {
+            return null;
+        }
+        return {
+            key: frameArchive.url,
+            min: new Date(Math.min(...timestamps.map((d) => d.getTime()))),
+            max: new Date(Math.max(...timestamps.map((d) => d.getTime()))),
+            label: ((_a = entity === null || entity === void 0 ? void 0 : entity.Bruce) === null || _a === void 0 ? void 0 : _a.Name) || undefined
+        };
+    }
+    /**
+     * Returns if a value looks like a URL rather than a bare client file ID.
      * @param value
      */
-    function looksLikeTextureUrl(value) {
-        return /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(value) || value.startsWith("//") || value.startsWith("data:");
+    function looksLikeUrl(value) {
+        return /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(value) || value.startsWith("//");
+    }
+    /**
+     * Extracts a client file ID from a resolved polygon "texture" value, which is either a bare
+     * file ID or a URL. Follows the "/file/<id>" route path regardless of domain,
+     * eg: "https://host/file/AGPWMAQR6F5ZVDJXZVRODGLCJE.png" or "https://host/RV:1/file/AGPWMAQR6F5ZVDJXZVRODGLCJE?cc=1".
+     * @param raw
+     */
+    function extractClientFileIdFromTextureValue(raw) {
+        if (!raw || typeof raw !== "string") {
+            return null;
+        }
+        if (!looksLikeUrl(raw)) {
+            return raw;
+        }
+        try {
+            const withoutQuery = raw.split("?")[0];
+            const match = withoutQuery.match(/\/file\/([^\/]+)/);
+            if (!match) {
+                return null;
+            }
+            return match[1].split(".")[0];
+        }
+        catch (e) {
+            console.warn("Failed to parse client file ID from texture URL:", e, raw);
+            return null;
+        }
     }
     /**
      * Resolves a polygon style's texture field and if a color ask is needed it tints the resulting image.
@@ -37167,13 +37608,21 @@
             return { dataUri: null, effective: textureTrace.effective };
         }
         let url = raw;
-        if (!looksLikeTextureUrl(raw)) {
-            await api.Loading;
-            url = BModels.ClientFile.GetUrl({
-                api,
-                fileId: raw,
-                viaCdn: true
-            });
+        if (!raw.startsWith("data:")) {
+            const clientFileId = extractClientFileIdFromTextureValue(raw);
+            if (clientFileId) {
+                await api.Loading;
+                const { clientFile } = await BModels.ClientFile.Get({ api, fileId: clientFileId });
+                url = clientFile.URL;
+                const clientFileData = clientFile.Data;
+                if (TextureFrameSeriesAnimator.IsFrameArchiveMetadata(clientFileData)) {
+                    return {
+                        dataUri: null,
+                        effective: textureTrace.effective,
+                        frameArchive: { url, metadata: clientFileData.generation }
+                    };
+                }
+            }
         }
         const mask = style.textureColorMask;
         const cacheKey = "texture-" + url + "-" + (mask ? mask.type + "-" + mask.minColor + "-" + mask.maxColor : "none");
@@ -37210,30 +37659,11 @@
             const minColor = BModels.Color.ColorFromStr(mask.minColor) || { red: 0, green: 0, blue: 0, alpha: 1 };
             const maxColor = BModels.Color.ColorFromStr(mask.maxColor) || { red: 255, green: 255, blue: 255, alpha: 1 };
             const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-            const data = imageData.data;
-            for (let i = 0; i < data.length; i += 4) {
-                // The texture is rendered black-to-white server-side, so any channel carries the value.
-                const t = data[i] / 255;
-                data[i] = Math.round(minColor.red + (maxColor.red - minColor.red) * t);
-                data[i + 1] = Math.round(minColor.green + (maxColor.green - minColor.green) * t);
-                data[i + 2] = Math.round(minColor.blue + (maxColor.blue - minColor.blue) * t);
-                // Preserve source transparency (eg unrasterized pixels) blended with the mask's own alpha.
-                const srcAlpha = data[i + 3] / 255;
-                const maskAlpha = minColor.alpha + (maxColor.alpha - minColor.alpha) * t;
-                data[i + 3] = Math.round(srcAlpha * maskAlpha * 255);
-            }
+            ApplyGrayscaleColorMask(imageData, minColor, maxColor);
             context.putImageData(imageData, 0, 0);
         }
         return canvas.toDataURL("image/png");
     }
-    function loadImage(src) {
-        return new Promise((res, rej) => {
-            const image = new Image();
-            image.onload = () => res(image);
-            image.onerror = (e) => rej(e);
-            image.src = src;
-        });
-    }
     /**
      * Compares two color materials.
      * Returns if they are equal.
@@ -37447,11 +37877,19 @@
         return heightRef;
     }
 
-    /**
-     * Returns if the outline metadata is different.
-     * @param rego
-     * @param entity
+    /*
+     * Returns if the style applied to a rego differs from the one the zoom item now wants.
      */
+    function isStyleChanged(rego, zoomItem) {
+        var _a;
+        if (!rego) {
+            return false;
+        }
+        // Normalize the same way cEntity.styleId is set when rendering (see RenderGroup callers).
+        const newStyleId = (zoomItem === null || zoomItem === void 0 ? void 0 : zoomItem.StyleID) == -1 ? -1 : (+(zoomItem === null || zoomItem === void 0 ? void 0 : zoomItem.StyleID) || null);
+        const oldStyleId = (_a = rego.styleId) !== null && _a !== void 0 ? _a : null;
+        return newStyleId != oldStyleId;
+    }
     function isOutlineChanged$1(rego, entity) {
         var _a, _b, _c, _d, _e, _f;
         if (((_a = rego.outline) === null || _a === void 0 ? void 0 : _a.length) != ((_c = (_b = entity.Bruce) === null || _b === void 0 ? void 0 : _b.Outline) === null || _c === void 0 ? void 0 : _c.length)) {
@@ -37558,6 +37996,7 @@
                 entities: [],
                 zoomItems: {},
                 menuItemId: params.menuItemId,
+                onSeriesDiscovered: params.onSeriesDiscovered,
                 visualRegister: params.visualRegister
             };
             const updated = new Map();
@@ -37634,6 +38073,7 @@
                     if (!params.force &&
                         newRenderId == oldRenderId &&
                         !(existingRego === null || existingRego === void 0 ? void 0 : existingRego.stale) &&
+                        !isStyleChanged(existingRego, zoomItem) &&
                         !isOutlineChanged$1(existingRego, entity)) {
                         // No sorting category needed. Already rendered the way we want.
                         cEntities.set(id, existingRego.visual);
@@ -38519,7 +38959,7 @@
         StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
     })(exports.StyleUtils || (exports.StyleUtils = {}));
 
-    const VERSION = "6.9.6";
+    const VERSION = "6.9.8";
     /**
      * 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.
@@ -38539,6 +38979,7 @@
     exports.VERSION = VERSION;
     exports.setENVIRONMENT = setENVIRONMENT;
     exports.getENVIRONMENT = getENVIRONMENT;
+    exports.isStyleChanged = isStyleChanged;
     exports.isOutlineChanged = isOutlineChanged$1;
     exports.CesiumParabola = CesiumParabola;
     exports.createTileset = createTileset;