bruce-cesium 3.7.3 → 3.7.5

package/dist/bruce-cesium.umd.js

@@ -899,6 +899,282 @@
         DrawingUtils.RaisePos3d = RaisePos3d;
     })(exports.DrawingUtils || (exports.DrawingUtils = {}));
 
+    function getColor(viewer, obj) {
+        var value = null;
+        if (obj === null || obj === void 0 ? void 0 : obj.getValue) {
+            var date = viewer.scene.lastRenderTime;
+            if (!date) {
+                date = viewer.clock.currentTime;
+            }
+            value = obj.getValue(date);
+        }
+        else {
+            value = obj;
+        }
+        if (value && value instanceof Cesium.ColorMaterialProperty) {
+            value = value.color;
+        }
+        return value;
+    }
+    function getNumber(viewer, obj) {
+        var value = null;
+        if (obj === null || obj === void 0 ? void 0 : obj.getValue) {
+            var date = viewer.scene.lastRenderTime;
+            if (!date) {
+                date = viewer.clock.currentTime;
+            }
+            value = obj.getValue(date);
+        }
+        else {
+            value = obj;
+        }
+        return value;
+    }
+    /**
+     * Returns if a given visual is alive and in the scene.
+     * @param viewer
+     * @param visual
+     * @returns
+     */
+    function isFeatureAlive(viewer, feature) {
+        if (!(viewer === null || viewer === void 0 ? void 0 : viewer.scene) || viewer.isDestroyed()) {
+            return false;
+        }
+        var cTileset = feature === null || feature === void 0 ? void 0 : feature.tileset;
+        if (!cTileset) {
+            return false;
+        }
+        if (cTileset.isDestroyed() || !viewer.scene.primitives.contains(cTileset)) {
+            return false;
+        }
+        return true;
+    }
+    var _lastMark = 0;
+    var generateMark = function () {
+        _lastMark += 1;
+        return _lastMark;
+    };
+    function setMark(color, mark) {
+        color["NEXTSPACE_PROPERTY_MARK"] = mark;
+    }
+    function assertColorMark(mark, color) {
+        return color["NEXTSPACE_PROPERTY_MARK"] == mark;
+    }
+    var CesiumAnimatedProperty;
+    (function (CesiumAnimatedProperty) {
+        /**
+         * Example:
+         * ```
+         * const myEntity = null; // Get an Entity from somewhere.
+         *
+         * const animateColor = new AnimateColor({
+         *     viewer: viewer,
+         *     color: Cesium.Color.RED,
+         *     startColor: myEntity.model.color,
+         *     type: "LINEAR",
+         *     durationMs: 1000
+         * });
+         *
+         * myEntity.model.color = new Cesium.CallbackProperty(() => {
+         *     return animateColor.GetValue();
+         * }, false);
+         * ```
+         */
+        var AnimateColor = /** @class */ (function () {
+            function AnimateColor(params) {
+                var _a;
+                this.viewer = params.viewer;
+                this.color = params.color;
+                this.durationMs = params.durationMs;
+                this.startColor = getColor(this.viewer, params.startColor);
+                if ((_a = this.startColor) === null || _a === void 0 ? void 0 : _a.clone) {
+                    this.startColor = this.startColor.clone();
+                }
+                if (!this.startColor) {
+                    this.startColor = Cesium.Color.WHITE.clone();
+                    console.warn("No start color provided. Using WHITE as start color. Animation may not work as expected.");
+                }
+                this.startTime = new Date();
+            }
+            /**
+             * Returns the calculated color at the provided time.
+             * @returns
+             */
+            AnimateColor.prototype.GetColor = function () {
+                var now = new Date();
+                var elapsedMs = now.getTime() - this.startTime.getTime();
+                // Animation over.
+                if (elapsedMs >= this.durationMs) {
+                    return this.color;
+                }
+                try {
+                    var progress = elapsedMs / this.durationMs;
+                    return Cesium.Color.lerp(this.startColor, this.color, progress, new Cesium.Color());
+                }
+                catch (e) {
+                    console.error(e);
+                }
+                // Failed to calculate color.
+                // We'll just return the target color.
+                return this.color;
+            };
+            /**
+             * Returns the calculated color as a material property.
+             * @returns
+             */
+            AnimateColor.prototype.GetMaterial = function () {
+                var color = this.GetColor();
+                return new Cesium.ColorMaterialProperty(color);
+            };
+            return AnimateColor;
+        }());
+        CesiumAnimatedProperty.AnimateColor = AnimateColor;
+        var AnimateNumber = /** @class */ (function () {
+            function AnimateNumber(params) {
+                this.paused = false;
+                this.paused = Boolean(params.startPaused);
+                this.viewer = params.viewer;
+                this.value = params.value;
+                this.durationMs = params.durationMs;
+                this.startValue = getNumber(this.viewer, params.startValue);
+                if (!this.startValue) {
+                    this.startValue = 0;
+                }
+                if (!this.paused) {
+                    this.startTime = new Date();
+                }
+            }
+            AnimateNumber.prototype.Play = function () {
+                if (this.paused) {
+                    this.paused = false;
+                    this.startTime = new Date();
+                }
+            };
+            AnimateNumber.prototype.GetValue = function () {
+                if (this.paused) {
+                    return this.startValue;
+                }
+                var now = new Date();
+                var elapsedMs = now.getTime() - this.startTime.getTime();
+                // Animation over.
+                if (elapsedMs >= this.durationMs) {
+                    return this.value;
+                }
+                try {
+                    var progress = elapsedMs / this.durationMs;
+                    return Cesium.Math.lerp(this.startValue, this.value, progress);
+                }
+                catch (e) {
+                    console.error(e);
+                }
+                // Failed to calculate value.
+                // We'll just return the target value.
+                return this.value;
+            };
+            return AnimateNumber;
+        }());
+        CesiumAnimatedProperty.AnimateNumber = AnimateNumber;
+        /**
+         * Animates the color of a feature.
+         * This is handled separately from the AnimateColor class as Tileset features do not support Cesium callback properties.
+         *
+         * Example:
+         * ```
+         * const animateColor = AnimateTFeatureColor({
+         *    viewer: viewer,
+         *    feature: feature,
+         *    color: Cesium.Color.RED,
+         *    startColor: feature.color,
+         *    durationMs: 1000
+         * });
+         * ```
+         * @param params
+         * @returns
+         */
+        function AnimateTFeatureColor(params) {
+            var viewer = params.viewer, feature = params.feature, color = params.color, startColor = params.startColor, durationMs = params.durationMs;
+            ClearTFeatureColorAnimation(feature);
+            if (!startColor) {
+                if (feature.color) {
+                    startColor = feature.color;
+                    if (startColor.clone) {
+                        startColor = startColor.clone();
+                    }
+                }
+                else {
+                    startColor = Cesium.Color.WHITE.clone();
+                }
+            }
+            // Don't animate if the colour is the same.
+            var curColor = getColor(viewer, feature.color);
+            if (curColor && Cesium.Color.WHITE.equals(curColor)) {
+                curColor = null;
+            }
+            var colorTmp = color == null || Cesium.Color.WHITE.equals(color) ? null : color;
+            if (!curColor && !colorTmp) {
+                return function () { };
+            }
+            else if (curColor && colorTmp && curColor.equals(colorTmp)) {
+                return function () { };
+            }
+            // Marks are used to detect external changes to the feature's color.
+            // If an external change is detected, the animation will stop.
+            var mark = generateMark();
+            setMark(feature.color, mark);
+            setMark(startColor, mark);
+            setMark(color, mark);
+            var startTime = new Date();
+            var removal = viewer.scene.postUpdate.addEventListener(function () {
+                if (!isFeatureAlive(viewer, feature)) {
+                    removal === null || removal === void 0 ? void 0 : removal();
+                    removal = null;
+                    return;
+                }
+                if (!assertColorMark(mark, feature.color)) {
+                    removal === null || removal === void 0 ? void 0 : removal();
+                    removal = null;
+                    return;
+                }
+                var now = new Date();
+                var elapsedMs = now.getTime() - startTime.getTime();
+                // Animation over.
+                if (elapsedMs >= durationMs) {
+                    feature.color = color;
+                    removal === null || removal === void 0 ? void 0 : removal();
+                    removal = null;
+                    return;
+                }
+                try {
+                    var progress = elapsedMs / durationMs;
+                    var newColor = Cesium.Color.lerp(startColor, color, progress, new Cesium.Color());
+                    setMark(newColor, mark);
+                    feature.color = newColor;
+                    return;
+                }
+                catch (e) {
+                    console.error(e);
+                }
+                // Failed to calculate color.
+                // We'll just set the target color and stop the animation.
+                feature.color = color;
+            });
+            // Return a function to stop the animation.
+            feature["ANIMATED_COLOR_REMOVAL"] = removal;
+            return function () {
+                removal === null || removal === void 0 ? void 0 : removal();
+                removal = null;
+            };
+        }
+        CesiumAnimatedProperty.AnimateTFeatureColor = AnimateTFeatureColor;
+        function ClearTFeatureColorAnimation(feature) {
+            if (feature && feature["ANIMATED_COLOR_REMOVAL"]) {
+                feature["ANIMATED_COLOR_REMOVAL"]();
+                feature["ANIMATED_COLOR_REMOVAL"] = null;
+            }
+        }
+        CesiumAnimatedProperty.ClearTFeatureColorAnimation = ClearTFeatureColorAnimation;
+    })(CesiumAnimatedProperty || (CesiumAnimatedProperty = {}));
+
     /**
      * Returns if a given visual can be styled by this utility.
      * @param viewer
@@ -1019,7 +1295,7 @@
      * @param graphic
      * @returns
      */
-    function getColor(viewer, key, graphic) {
+    function getColor$1(viewer, key, graphic) {
         var color = graphic[getStoreKey(key)];
         // If no color is stored for the default color, we'll calculate and store it.
         if (!color) {
@@ -1049,6 +1325,8 @@
     function applyOpacity(viewer, opacity, graphic) {
         refreshColor(viewer, graphic, opacity);
     }
+    var ANIMATE_COLOR_MS = 200;
+    var ANIMATE_COLOR_HIGHLIGHT_MS = 200;
     /**
      * Applies a color to a graphic based on the current key states.
      * Eg: if the graphic is selected, it will apply the selected color.
@@ -1057,7 +1335,7 @@
      * @param opacity
      */
     function refreshColor(viewer, graphic, opacity) {
-        var _a;
+        var _a, _b;
         // Calculate what color key we should apply.
         var key = "default";
         if (getKeyState(graphic, "select")) {
@@ -1068,11 +1346,12 @@
         }
         // This ensures that the default color is always stored prior to applying a new color.
         if (key != "default") {
-            getColor(viewer, "default", graphic);
+            getColor$1(viewer, "default", graphic);
         }
-        var color = (_a = getColor(viewer, key, graphic)) !== null && _a !== void 0 ? _a : Cesium.Color.WHITE;
+        var color = (_a = getColor$1(viewer, key, graphic)) !== null && _a !== void 0 ? _a : Cesium.Color.WHITE;
         // If we're highlighting and it's selected, don't change the color.
         if (key != "highlight" || getKeyState(graphic, "select") == false) {
+            var animateMs = key == "highlight" ? ANIMATE_COLOR_HIGHLIGHT_MS : ANIMATE_COLOR_MS;
             color = color.clone();
             // Multiply opacity if one is set.
             if (opacity != null) {
@@ -1088,10 +1367,34 @@
                 }
             }
             if (graphic instanceof Cesium.Cesium3DTileFeature) {
-                graphic.color = color;
+                CesiumAnimatedProperty.ClearTFeatureColorAnimation(graphic);
+                if (key == "default") {
+                    graphic.color = color;
+                }
+                else {
+                    CesiumAnimatedProperty.AnimateTFeatureColor({
+                        color: color.clone(),
+                        durationMs: animateMs,
+                        feature: graphic,
+                        viewer: viewer,
+                        startColor: ((_b = graphic.color) === null || _b === void 0 ? void 0 : _b.clone) ? graphic.color.clone() : graphic.color
+                    });
+                }
             }
             else if (graphic instanceof Cesium.ModelGraphics) {
-                graphic.color = new Cesium.ConstantProperty(color);
+                // graphic.color = new Cesium.ConstantProperty(color);
+                var animateColor_1 = new CesiumAnimatedProperty.AnimateColor({
+                    color: color,
+                    durationMs: animateMs,
+                    viewer: viewer,
+                    startColor: graphic.color
+                });
+                if (graphic.color instanceof Cesium.CallbackProperty) {
+                    graphic.color.setCallback(function () { return animateColor_1.GetColor(); }, false);
+                }
+                else {
+                    graphic.color = new Cesium.CallbackProperty(function () { return animateColor_1.GetColor(); }, false);
+                }
             }
             else if (graphic instanceof Cesium.PolygonGraphics) {
                 graphic.material = new Cesium.ColorMaterialProperty(color);
@@ -1103,10 +1406,34 @@
                 graphic.material = new Cesium.ColorMaterialProperty(color);
             }
             else if (graphic instanceof Cesium.PointGraphics) {
-                graphic.color = new Cesium.ConstantProperty(color);
+                // graphic.color = new Cesium.ConstantProperty(color);
+                var animateColor_2 = new CesiumAnimatedProperty.AnimateColor({
+                    color: color,
+                    durationMs: animateMs,
+                    viewer: viewer,
+                    startColor: graphic.color
+                });
+                if (graphic.color instanceof Cesium.CallbackProperty) {
+                    graphic.color.setCallback(function () { return animateColor_2.GetColor(); }, false);
+                }
+                else {
+                    graphic.color = new Cesium.CallbackProperty(function () { return animateColor_2.GetColor(); }, false);
+                }
             }
             else if (graphic instanceof Cesium.BillboardGraphics) {
-                graphic.color = new Cesium.ConstantProperty(color);
+                // graphic.color = new Cesium.ConstantProperty(color);
+                var animateColor_3 = new CesiumAnimatedProperty.AnimateColor({
+                    color: color,
+                    durationMs: animateMs,
+                    viewer: viewer,
+                    startColor: graphic.color
+                });
+                if (graphic.color instanceof Cesium.CallbackProperty) {
+                    graphic.color.setCallback(function () { return animateColor_3.GetColor(); }, false);
+                }
+                else {
+                    graphic.color = new Cesium.CallbackProperty(function () { return animateColor_3.GetColor(); }, false);
+                }
             }
             else if (graphic instanceof Cesium.EllipseGraphics) {
                 graphic.material = new Cesium.ColorMaterialProperty(color);
@@ -1202,6 +1529,64 @@
             }
         }
         CesiumEntityStyler.Refresh = Refresh;
+        function BakeDefaultColor(params) {
+            var viewer = params.viewer, entity = params.entity, override = params.override;
+            if (!entity) {
+                return;
+            }
+            var parts = exports.EntityUtils.GatherEntity({
+                entity: entity
+            });
+            for (var i = 0; i < parts.length; i++) {
+                var part = parts[i];
+                if (!isAlive(viewer, part)) {
+                    continue;
+                }
+                // If we're not overriding then we check to ensure a colour is not already set.
+                if (override == false) {
+                    var stored = part[getStoreKey("default")];
+                    if (stored) {
+                        continue;
+                    }
+                }
+                if (part instanceof Cesium.Cesium3DTileFeature) {
+                    var opacity = getAppliedOpacity(part);
+                    storeColor(viewer, "default", calculateCurColor(viewer, part), part);
+                    refreshColor(viewer, part, opacity);
+                }
+                else if (part instanceof Cesium.Entity) {
+                    if (part.billboard) {
+                        storeColor(viewer, "default", calculateCurColor(viewer, part.billboard), part.billboard);
+                        refreshColor(viewer, part.billboard, getAppliedOpacity(part.billboard));
+                    }
+                    if (part.model) {
+                        storeColor(viewer, "default", calculateCurColor(viewer, part.model), part.model);
+                        refreshColor(viewer, part.model, getAppliedOpacity(part.model));
+                    }
+                    if (part.polyline) {
+                        storeColor(viewer, "default", calculateCurColor(viewer, part.polyline), part.polyline);
+                        refreshColor(viewer, part.polyline, getAppliedOpacity(part.polyline));
+                    }
+                    if (part.polygon) {
+                        storeColor(viewer, "default", calculateCurColor(viewer, part.polygon), part.polygon);
+                        refreshColor(viewer, part.polygon, getAppliedOpacity(part.polygon));
+                    }
+                    if (part.corridor) {
+                        storeColor(viewer, "default", calculateCurColor(viewer, part.corridor), part.corridor);
+                        refreshColor(viewer, part.corridor, getAppliedOpacity(part.corridor));
+                    }
+                    if (part.point) {
+                        storeColor(viewer, "default", calculateCurColor(viewer, part.point), part.point);
+                        refreshColor(viewer, part.point, getAppliedOpacity(part.point));
+                    }
+                    if (part.ellipse) {
+                        storeColor(viewer, "default", calculateCurColor(viewer, part.ellipse), part.ellipse);
+                        refreshColor(viewer, part.ellipse, getAppliedOpacity(part.ellipse));
+                    }
+                }
+            }
+        }
+        CesiumEntityStyler.BakeDefaultColor = BakeDefaultColor;
         /**
          * Updates the default colour of a graphic.
          * This will not change the graphic's state to use it if the entity is selected/highlighted.
@@ -4248,7 +4633,7 @@
     var createCircleBillboard = function (size, colorCss) {
         var key = size + "-" + colorCss;
         var cacheData = _billboardCache.Get(key);
-        if ((cacheData === null || cacheData === void 0 ? void 0 : cacheData.canvas) instanceof HTMLCanvasElement) {
+        if ((cacheData === null || cacheData === void 0 ? void 0 : cacheData.canvasDataUri) && typeof (cacheData === null || cacheData === void 0 ? void 0 : cacheData.canvasDataUri) == "string") {
             return cacheData;
         }
         // Slight padding to avoid corners clipping.
@@ -4262,7 +4647,7 @@
         context.fillStyle = colorCss;
         context.fill();
         var data = {
-            canvas: canvas,
+            canvasDataUri: canvas.toDataURL("image/png"),
             colorCss: colorCss,
             size: size,
             height: canvasSize,
@@ -4297,7 +4682,7 @@
                             var context = canvas_1.getContext("2d");
                             context.drawImage(image_1, 0, 0);
                             var data = {
-                                canvas: canvas_1,
+                                canvasDataUri: canvas_1.toDataURL("image/png"),
                                 height: image_1.height
                             };
                             res(data);
@@ -4412,11 +4797,11 @@
     }
     (function (EntityRenderEngine) {
         function Render(params) {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             return __awaiter(this, void 0, void 0, function () {
-                var groupRenderParams, i, entity, geometry, cEntities, models, multiGeometry, polygons, polylines, points, i, entity, id, zoomItem, displayType, newRenderId, existingRego, oldRenderId, mParams, mEntities, i, entity, id, cEntity, _loop_1, i, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity;
-                return __generator(this, function (_j) {
-                    switch (_j.label) {
+                var groupRenderParams, i, entity, geometry, cEntities, models, multiGeometry, polygons, polylines, points, i, entity, id, zoomItem, displayType, existingRego, newRenderId, oldRenderId, mParams, mEntities, i, entity, id, cEntity, _loop_1, i, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity;
+                return __generator(this, function (_m) {
+                    switch (_m.label) {
                         case 0:
                             groupRenderParams = {
                                 apiGetter: params.apiGetter,
@@ -4458,21 +4843,36 @@
                                     displayType = bruceModels.ZoomControl.EDisplayType.Geometry;
                                 }
                                 if (displayType != bruceModels.ZoomControl.EDisplayType.Hidden) {
-                                    newRenderId = getRenderGroupId(zoomItem, (_b = params.viewer) === null || _b === void 0 ? void 0 : _b.terrainProvider);
                                     existingRego = params.visualRegister.GetRego({
                                         entityId: id,
                                         menuItemId: params.menuItemId
                                     });
+                                    newRenderId = getRenderGroupId(zoomItem, (_b = params.viewer) === null || _b === void 0 ? void 0 : _b.terrainProvider);
                                     oldRenderId = (_c = existingRego === null || existingRego === void 0 ? void 0 : existingRego.visual) === null || _c === void 0 ? void 0 : _c._renderGroup;
-                                    if (!params.force && newRenderId == oldRenderId && !(existingRego === null || existingRego === void 0 ? void 0 : existingRego.stale)) {
+                                    if (!params.force &&
+                                        newRenderId == oldRenderId &&
+                                        !(existingRego === null || existingRego === void 0 ? void 0 : existingRego.stale) &&
+                                        // If historic metadata is different then it's also stale.
+                                        ((existingRego === null || existingRego === void 0 ? void 0 : existingRego.historicDateTime) == ((_d = entity.Bruce) === null || _d === void 0 ? void 0 : _d.historicDateTime))) {
+                                        // No sorting category needed. Already rendered the way we want.
                                         cEntities[id] = existingRego.visual;
                                     }
                                     else {
+                                        // Add so we can re-use the graphic and update it.
+                                        if (existingRego && newRenderId == oldRenderId) {
+                                            cEntities[id] = existingRego.visual;
+                                            // Flag as no longer stale as we're unlikely to recreate the rego if we're reusing the graphic.
+                                            existingRego.stale = false;
+                                            // Update metadata for the same reason.
+                                            existingRego.historicDateTime = (_e = entity.Bruce) === null || _e === void 0 ? void 0 : _e.historicDateTime;
+                                            existingRego.historicAttrKey = (_f = entity.Bruce) === null || _f === void 0 ? void 0 : _f.historicAttrKey;
+                                            existingRego.entityTypeId = entity.Bruce["EntityType.ID"];
+                                        }
                                         if (displayType == bruceModels.ZoomControl.EDisplayType.Model3D) {
                                             models.push(entity);
                                         }
                                         else if (displayType == bruceModels.ZoomControl.EDisplayType.Geometry) {
-                                            if ((_e = (_d = entity.geometry) === null || _d === void 0 ? void 0 : _d.MultiGeometry) === null || _e === void 0 ? void 0 : _e.length) {
+                                            if ((_h = (_g = entity.geometry) === null || _g === void 0 ? void 0 : _g.MultiGeometry) === null || _h === void 0 ? void 0 : _h.length) {
                                                 multiGeometry.push(entity);
                                             }
                                             else {
@@ -4487,10 +4887,10 @@
                                 }
                             }
                             if (!(models.length > 0)) return [3 /*break*/, 2];
-                            mParams = __assign(__assign({}, groupRenderParams), { entities: models });
+                            mParams = __assign(__assign({}, groupRenderParams), { rendered: cEntities, entities: models });
                             return [4 /*yield*/, Model3d.RenderGroup(mParams)];
                         case 1:
-                            mEntities = _j.sent();
+                            mEntities = _m.sent();
                             for (i = 0; i < mParams.entities.length; i++) {
                                 entity = mParams.entities[i];
                                 id = entity.Bruce.ID;
@@ -4502,20 +4902,20 @@
                                     multiGeometry.push(entity);
                                 }
                             }
-                            _j.label = 2;
+                            _m.label = 2;
                         case 2:
                             if (!(multiGeometry.length > 0)) return [3 /*break*/, 6];
                             _loop_1 = function (i) {
                                 var entity, pParams, zoomItem, j, subEntity, cPoly, rendered, cLines, cPoints, rootEntity_1, firstEntity;
-                                return __generator(this, function (_k) {
-                                    switch (_k.label) {
+                                return __generator(this, function (_o) {
+                                    switch (_o.label) {
                                         case 0:
                                             entity = multiGeometry[i];
-                                            if (!((_g = (_f = entity.geometry) === null || _f === void 0 ? void 0 : _f.MultiGeometry) === null || _g === void 0 ? void 0 : _g.length)) {
+                                            if (!((_k = (_j = entity.geometry) === null || _j === void 0 ? void 0 : _j.MultiGeometry) === null || _k === void 0 ? void 0 : _k.length)) {
                                                 polygons.push(entity);
                                                 return [2 /*return*/, "continue"];
                                             }
-                                            pParams = __assign(__assign({}, groupRenderParams), { entities: [] });
+                                            pParams = __assign(__assign({}, groupRenderParams), { entities: [], rendered: cEntities });
                                             zoomItem = pParams.zoomItems[entity.Bruce.ID];
                                             for (j = 0; j < entity.geometry.MultiGeometry.length; j++) {
                                                 subEntity = __assign(__assign({}, entity), { geometry: entity.geometry.MultiGeometry[j], Bruce: __assign(__assign({}, entity.Bruce), { ID: bruceModels.ObjectUtils.UId() }) });
@@ -4524,7 +4924,7 @@
                                             }
                                             return [4 /*yield*/, Polygon.RenderGroup(pParams)];
                                         case 1:
-                                            cPoly = _k.sent();
+                                            cPoly = _o.sent();
                                             Object.keys(cPoly).forEach(function (key) {
                                                 if (cPoly[key]) {
                                                     pParams.entities = pParams.entities.filter(function (e) { return e.Bruce.ID != key; });
@@ -4533,7 +4933,7 @@
                                             rendered = Object.values(cPoly);
                                             return [4 /*yield*/, Polyline.RenderGroup(pParams)];
                                         case 2:
-                                            cLines = _k.sent();
+                                            cLines = _o.sent();
                                             Object.keys(cLines).forEach(function (key) {
                                                 if (cLines[key]) {
                                                     pParams.entities = pParams.entities.filter(function (e) { return e.Bruce.ID != key; });
@@ -4543,9 +4943,9 @@
                                             if (!!rendered.length) return [3 /*break*/, 4];
                                             return [4 /*yield*/, Point.RenderGroup(pParams)];
                                         case 3:
-                                            cPoints = _k.sent();
+                                            cPoints = _o.sent();
                                             rendered = rendered.concat(Object.values(cPoints));
-                                            _k.label = 4;
+                                            _o.label = 4;
                                         case 4:
                                             rendered = rendered.filter(function (x) { return x != null; });
                                             if (rendered.length) {
@@ -4553,7 +4953,7 @@
                                                     id: bruceModels.ObjectUtils.UId(10)
                                                 });
                                                 rootEntity_1._siblingGraphics = [];
-                                                rootEntity_1._renderGroup = getRenderGroupId(zoomItem, (_h = params.viewer) === null || _h === void 0 ? void 0 : _h.terrainProvider);
+                                                rootEntity_1._renderGroup = getRenderGroupId(zoomItem, (_l = params.viewer) === null || _l === void 0 ? void 0 : _l.terrainProvider);
                                                 rootEntity_1._siblingGraphics = rootEntity_1._siblingGraphics.concat(rendered);
                                                 cEntities[entity.Bruce.ID] = rootEntity_1;
                                                 firstEntity = rendered[0];
@@ -4572,22 +4972,22 @@
                                 });
                             };
                             i = 0;
-                            _j.label = 3;
+                            _m.label = 3;
                         case 3:
                             if (!(i < multiGeometry.length)) return [3 /*break*/, 6];
                             return [5 /*yield**/, _loop_1(i)];
                         case 4:
-                            _j.sent();
-                            _j.label = 5;
+                            _m.sent();
+                            _m.label = 5;
                         case 5:
                             i++;
                             return [3 /*break*/, 3];
                         case 6:
                             if (!(polygons.length > 0)) return [3 /*break*/, 8];
-                            pParams = __assign(__assign({}, groupRenderParams), { entities: polygons });
+                            pParams = __assign(__assign({}, groupRenderParams), { entities: polygons, rendered: cEntities });
                             return [4 /*yield*/, Polygon.RenderGroup(pParams)];
                         case 7:
-                            pEntities = _j.sent();
+                            pEntities = _m.sent();
                             for (i = 0; i < pParams.entities.length; i++) {
                                 entity = pParams.entities[i];
                                 cEntity = pEntities[entity.Bruce.ID];
@@ -4598,13 +4998,13 @@
                                     polylines.push(entity);
                                 }
                             }
-                            _j.label = 8;
+                            _m.label = 8;
                         case 8:
                             if (!(polylines.length > 0)) return [3 /*break*/, 10];
-                            pParams = __assign(__assign({}, groupRenderParams), { entities: polylines });
+                            pParams = __assign(__assign({}, groupRenderParams), { entities: polylines, rendered: cEntities });
                             return [4 /*yield*/, Polyline.RenderGroup(pParams)];
                         case 9:
-                            pEntities = _j.sent();
+                            pEntities = _m.sent();
                             for (i = 0; i < pParams.entities.length; i++) {
                                 entity = pParams.entities[i];
                                 cEntity = pEntities[entity.Bruce.ID];
@@ -4615,13 +5015,13 @@
                                     points.push(entity);
                                 }
                             }
-                            _j.label = 10;
+                            _m.label = 10;
                         case 10:
                             if (!(points.length > 0)) return [3 /*break*/, 12];
-                            pParams = __assign(__assign({}, groupRenderParams), { entities: points });
+                            pParams = __assign(__assign({}, groupRenderParams), { entities: points, rendered: cEntities });
                             return [4 /*yield*/, Point.RenderGroup(pParams)];
                         case 11:
-                            pEntities = _j.sent();
+                            pEntities = _m.sent();
                             for (i = 0; i < pParams.entities.length; i++) {
                                 entity = pParams.entities[i];
                                 cEntity = pEntities[entity.Bruce.ID];
@@ -4629,7 +5029,7 @@
                                     cEntities[entity.Bruce.ID] = cEntity;
                                 }
                             }
-                            _j.label = 12;
+                            _m.label = 12;
                         case 12: return [2 /*return*/, cEntities];
                     }
                 });
@@ -4682,11 +5082,11 @@
             }
             Point.CreateCircleBillboard = CreateCircleBillboard;
             function Render(params) {
-                var _a, _b;
+                var _a, _b, _c, _d;
                 return __awaiter(this, void 0, void 0, function () {
-                    var entity, style, type, cEntity, siblings, iconUrlRows, icon, iconUrl, metadata, api, image, e_5, iconScale, disableDepthTest, bColor, cColor, heightRef, radius, bFill, cFill, outline, cOutline, outlineWidth, bOutline, heightRef, pos3d, extrusion, outlineExtrusion, bColor, cColor, size, heightRef, circleBillboard, disableDepthTest;
-                    return __generator(this, function (_c) {
-                        switch (_c.label) {
+                    var entity, style, type, cEntity, siblings, prepareExistingGraphic, iconUrlRows, icon, iconUrl, metadata, api, image, e_5, iconScale, disableDepthTest, bColor, cColor_1, heightRef, currentImgKey, radius, bFill, cFill, outline, cOutline, outlineWidth, bOutline, heightRef, pos3d, extrusion, hasOutline, outlineExtrusion, outlineEntity, bColor, cColor, size, heightRef, circleBillboard, disableDepthTest, imgKey, currentImgKey;
+                    return __generator(this, function (_e) {
+                        switch (_e.label) {
                             case 0:
                                 entity = params.entity;
                                 style = params.style;
@@ -4699,6 +5099,27 @@
                                 }
                                 cEntity = null;
                                 siblings = [];
+                                prepareExistingGraphic = function (cEntity, siblings) {
+                                    if (siblings === void 0) { siblings = 0; }
+                                    // Gather entity in case previous version had sibling graphics we no longer need.
+                                    var parts = exports.EntityUtils.GatherEntity({
+                                        entity: cEntity,
+                                    });
+                                    if (parts.length > 1) {
+                                        // We'll cull all except the allowed number of siblings.
+                                        cEntity._siblingGraphics = cEntity._siblingGraphics.slice(0, siblings);
+                                        // We'll remove all that aren't in the allowed (direct) list.
+                                        for (var i = 0; i < parts.length - 1; i++) {
+                                            var part = parts[i];
+                                            if (part && part instanceof Cesium.Entity && params.viewer.entities.contains(part) && !cEntity._siblingGraphics.includes(part)) {
+                                                params.viewer.entities.remove(part);
+                                            }
+                                        }
+                                        if (cEntity._parentEntity) {
+                                            console.warn("Point.Render: Parent entity was not null. This should not happen.");
+                                        }
+                                    }
+                                };
                                 if (!(type == bruceModels.Style.EPointType.Icon)) return [3 /*break*/, 9];
                                 iconUrlRows = style.iconUrl == null ? [] : style.iconUrl;
                                 iconUrlRows.forEach(function (row) {
@@ -4715,36 +5136,36 @@
                                 api = params.apiGetter.getApi(metadata.accountId);
                                 return [4 /*yield*/, api.Loading];
                             case 1:
-                                _c.sent();
+                                _e.sent();
                                 iconUrl = bruceModels.ClientFile.GetUrl({
                                     api: api,
                                     fileId: metadata.fileId,
                                     viaCdn: true
                                 });
-                                _c.label = 2;
+                                _e.label = 2;
                             case 2:
                                 if (!(!iconUrl && style.iconId)) return [3 /*break*/, 4];
                                 return [4 /*yield*/, params.api.Loading];
                             case 3:
-                                _c.sent();
+                                _e.sent();
                                 iconUrl = bruceModels.ClientFile.GetUrl({
                                     api: params.api,
                                     fileId: style.iconId,
                                     viaCdn: true
                                 });
-                                _c.label = 4;
+                                _e.label = 4;
                             case 4:
                                 image = null;
                                 if (!iconUrl) return [3 /*break*/, 8];
-                                _c.label = 5;
+                                _e.label = 5;
                             case 5:
-                                _c.trys.push([5, 7, , 8]);
+                                _e.trys.push([5, 7, , 8]);
                                 return [4 /*yield*/, createImageBillboard(iconUrl)];
                             case 6:
-                                image = _c.sent();
+                                image = _e.sent();
                                 return [3 /*break*/, 8];
                             case 7:
-                                e_5 = _c.sent();
+                                e_5 = _e.sent();
                                 // Expanding the logging here so we can figure out why this is happening.
                                 // Most of the time the file is missing but we're getting some strange errors so I am including logging on the API settings as well.
                                 OneTimeError("ENTITY_RENDER_ENGINE_ICON_URL_ERROR_" + iconUrl, {
@@ -4763,34 +5184,64 @@
                                     disableDepthTest = Boolean(style.renderOnTop);
                                     if (iconScale > 0) {
                                         bColor = style.iconTintColor ? bruceModels.Calculator.GetColor(style.iconTintColor, entity, params.tags) : null;
-                                        cColor = bColor ? colorToCColor(bColor) : undefined;
+                                        cColor_1 = bColor ? colorToCColor(bColor) : undefined;
                                         heightRef = getHeightRef(style);
-                                        cEntity = new Cesium.Entity({
-                                            id: bruceModels.ObjectUtils.UId(10),
-                                            billboard: {
-                                                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                                                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-                                                image: image.canvas,
-                                                heightReference: getHeightRef(style),
-                                                scale: iconScale,
-                                                disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined,
-                                                distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
-                                                color: cColor
-                                                // Would be great once we have a setting for this.
-                                                // translucencyByDistance: getTranslucencyByDistance(params.minDistance, params.maxDistance),
-                                            },
-                                            position: exports.EntityUtils.GetPos({
+                                        if (!params.rendered || !params.rendered.billboard) {
+                                            cEntity = new Cesium.Entity({
+                                                id: bruceModels.ObjectUtils.UId(10),
+                                                billboard: {
+                                                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                                                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                                                    image: image.canvasDataUri,
+                                                    heightReference: getHeightRef(style),
+                                                    scale: iconScale,
+                                                    disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined,
+                                                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
+                                                    color: new Cesium.CallbackProperty(function () { return cColor_1; }, true),
+                                                    // Would be great once we have a setting for this.
+                                                    // translucencyByDistance: getTranslucencyByDistance(params.minDistance, params.maxDistance),
+                                                },
+                                                position: exports.EntityUtils.GetPos({
+                                                    viewer: params.viewer,
+                                                    entity: entity,
+                                                    recordHeightRef: heightRef,
+                                                    returnHeightRef: heightRef
+                                                }),
+                                                show: true
+                                            });
+                                        }
+                                        else {
+                                            prepareExistingGraphic(params.rendered);
+                                            cEntity = params.rendered;
+                                            currentImgKey = cEntity.billboard._billboardImgKey;
+                                            if (currentImgKey != iconUrl) {
+                                                cEntity.billboard.image = new Cesium.ConstantProperty(image.canvasDataUri);
+                                            }
+                                            cEntity.billboard.scale = new Cesium.ConstantProperty(iconScale);
+                                            cEntity.billboard.heightReference = new Cesium.ConstantProperty(getHeightRef(style));
+                                            cEntity.billboard.disableDepthTestDistance = new Cesium.ConstantProperty(disableDepthTest ? Number.POSITIVE_INFINITY : undefined);
+                                            cEntity.billboard.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                            cEntity.position = new Cesium.ConstantPositionProperty(exports.EntityUtils.GetPos({
                                                 viewer: params.viewer,
                                                 entity: entity,
                                                 recordHeightRef: heightRef,
                                                 returnHeightRef: heightRef
-                                            }),
-                                            show: true
-                                        });
+                                            }));
+                                            // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                                            exports.CesiumEntityStyler.SetDefaultColor({
+                                                color: cColor_1,
+                                                entity: cEntity,
+                                                viewer: params.viewer,
+                                                override: true,
+                                                requestRender: false
+                                            });
+                                            cEntity.show = true;
+                                        }
                                         cEntity.billboard._billboardSize = image.height;
+                                        cEntity.billboard._billboardImgKey = iconUrl;
                                     }
                                 }
-                                _c.label = 9;
+                                _e.label = 9;
                             case 9:
                                 if (type == bruceModels.Style.EPointType.Cylinder) {
                                     radius = EnsureNumber(bruceModels.Calculator.GetNumber(style.CylinderRadius, entity, params.tags));
@@ -4815,46 +5266,97 @@
                                         returnHeightRef: heightRef
                                     });
                                     extrusion = getCylinderExtrusion(entity, params.tags, heightRef, style.CylinderFillExtrusion);
-                                    cEntity = new Cesium.Entity({
-                                        id: bruceModels.ObjectUtils.UId(10),
-                                        ellipse: {
-                                            semiMajorAxis: radius,
-                                            semiMinorAxis: radius,
-                                            material: cFill,
-                                            outlineWidth: null,
-                                            extrudedHeight: extrusion.value,
-                                            heightReference: heightRef,
-                                            extrudedHeightReference: extrusion.exHeightRef,
-                                            height: Cesium.Cartographic.fromCartesian(pos3d).height,
-                                            zIndex: 1,
-                                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                                        },
-                                        position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone(),
-                                        show: true
-                                    });
-                                    if (outline && outlineWidth > 0) {
-                                        outlineExtrusion = getCylinderExtrusion(entity, params.tags, heightRef, style.CylinderBorderExtrusion);
-                                        // If this doesn't have its own extrusion, we must make it match the sibling.
-                                        // This way they render in a uniform way.
-                                        if (!outlineExtrusion.value && extrusion.value) {
-                                            outlineExtrusion.exHeightRef = extrusion.exHeightRef;
-                                        }
-                                        siblings.push(new Cesium.Entity({
+                                    hasOutline = outline && outlineWidth > 0;
+                                    if (!params.rendered || !params.rendered.ellipse) {
+                                        cEntity = new Cesium.Entity({
                                             id: bruceModels.ObjectUtils.UId(10),
                                             ellipse: {
-                                                semiMajorAxis: radius + outlineWidth,
-                                                semiMinorAxis: radius + outlineWidth,
-                                                material: cOutline,
-                                                outlineWidth: undefined,
-                                                extrudedHeight: outlineExtrusion.value,
+                                                semiMajorAxis: radius,
+                                                semiMinorAxis: radius,
+                                                material: cFill,
+                                                outlineWidth: null,
+                                                extrudedHeight: extrusion.value,
                                                 heightReference: heightRef,
-                                                extrudedHeightReference: outlineExtrusion.exHeightRef,
+                                                extrudedHeightReference: extrusion.exHeightRef,
                                                 height: Cesium.Cartographic.fromCartesian(pos3d).height,
-                                                zIndex: 2,
+                                                zIndex: 1,
                                                 distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                                             },
-                                            position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone()
-                                        }));
+                                            position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone(),
+                                            show: true
+                                        });
+                                    }
+                                    else {
+                                        prepareExistingGraphic(params.rendered, hasOutline ? 1 : 0);
+                                        cEntity = params.rendered;
+                                        cEntity.ellipse.semiMajorAxis = new Cesium.ConstantProperty(radius);
+                                        cEntity.ellipse.semiMinorAxis = new Cesium.ConstantProperty(radius);
+                                        cEntity.ellipse.outlineWidth = undefined;
+                                        cEntity.ellipse.extrudedHeight = new Cesium.ConstantProperty(extrusion.value);
+                                        cEntity.ellipse.heightReference = new Cesium.ConstantProperty(heightRef);
+                                        cEntity.ellipse.extrudedHeightReference = new Cesium.ConstantProperty(extrusion.exHeightRef);
+                                        cEntity.ellipse.height = new Cesium.ConstantProperty(Cesium.Cartographic.fromCartesian(pos3d).height);
+                                        cEntity.ellipse.zIndex = new Cesium.ConstantProperty(1);
+                                        cEntity.ellipse.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                        cEntity.position = new Cesium.ConstantPositionProperty(pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone());
+                                        // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                                        // WARNING: ellipse does not support animation (yet?).
+                                        exports.CesiumEntityStyler.SetDefaultColor({
+                                            color: cFill,
+                                            entity: cEntity,
+                                            viewer: params.viewer,
+                                            override: true,
+                                            requestRender: false
+                                        });
+                                        cEntity.show = true;
+                                    }
+                                    if (hasOutline) {
+                                        outlineExtrusion = getCylinderExtrusion(entity, params.tags, heightRef, style.CylinderBorderExtrusion);
+                                        // If this doesn't have its own extrusion, we must make it match the sibling.
+                                        // This way they render in a uniform way.
+                                        if (!outlineExtrusion.value && extrusion.value) {
+                                            outlineExtrusion.exHeightRef = extrusion.exHeightRef;
+                                        }
+                                        outlineEntity = (_d = (_c = params.rendered) === null || _c === void 0 ? void 0 : _c._siblingGraphics) === null || _d === void 0 ? void 0 : _d[0];
+                                        if (outlineEntity && outlineEntity.ellipse) {
+                                            outlineEntity.ellipse.semiMajorAxis = new Cesium.ConstantProperty(radius + outlineWidth);
+                                            outlineEntity.ellipse.semiMinorAxis = new Cesium.ConstantProperty(radius + outlineWidth);
+                                            outlineEntity.ellipse.extrudedHeight = new Cesium.ConstantProperty(outlineExtrusion.value);
+                                            outlineEntity.ellipse.heightReference = new Cesium.ConstantProperty(heightRef);
+                                            outlineEntity.ellipse.extrudedHeightReference = new Cesium.ConstantProperty(outlineExtrusion.exHeightRef);
+                                            outlineEntity.ellipse.height = new Cesium.ConstantProperty(Cesium.Cartographic.fromCartesian(pos3d).height);
+                                            outlineEntity.ellipse.zIndex = new Cesium.ConstantProperty(2);
+                                            outlineEntity.ellipse.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                            // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                                            // WARNING: ellipse does not support animation (yet?).
+                                            exports.CesiumEntityStyler.SetDefaultColor({
+                                                color: cOutline,
+                                                entity: outlineEntity,
+                                                viewer: params.viewer,
+                                                override: true,
+                                                requestRender: false
+                                            });
+                                            outlineEntity.show = true;
+                                        }
+                                        else {
+                                            outlineEntity = new Cesium.Entity({
+                                                id: bruceModels.ObjectUtils.UId(10),
+                                                ellipse: {
+                                                    semiMajorAxis: radius + outlineWidth,
+                                                    semiMinorAxis: radius + outlineWidth,
+                                                    material: cOutline,
+                                                    outlineWidth: undefined,
+                                                    extrudedHeight: outlineExtrusion.value,
+                                                    heightReference: heightRef,
+                                                    extrudedHeightReference: outlineExtrusion.exHeightRef,
+                                                    height: Cesium.Cartographic.fromCartesian(pos3d).height,
+                                                    zIndex: 2,
+                                                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                                                },
+                                                position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone()
+                                            });
+                                        }
+                                        siblings.push(outlineEntity);
                                     }
                                 }
                                 if (!cEntity) {
@@ -4871,33 +5373,66 @@
                                     heightRef = getHeightRef(style);
                                     circleBillboard = createCircleBillboard(size, cColor.toCssColorString());
                                     disableDepthTest = Boolean(style.renderOnTop);
-                                    cEntity = new Cesium.Entity({
-                                        id: bruceModels.ObjectUtils.UId(10),
-                                        // point: {
-                                        //     pixelSize: size,
-                                        //     color: cColor,
-                                        //     heightReference: getHeightRef(style),
-                                        //     distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                                        // },
-                                        // We are generating a billboard instead of using the point.
-                                        // This is because points were behaving strangely where they would appear oblong shapes.
-                                        // This occurred consistently when rendering many icons and points at the same time.
-                                        billboard: {
-                                            height: circleBillboard.height,
-                                            width: circleBillboard.width,
-                                            image: circleBillboard.canvas,
-                                            heightReference: heightRef,
-                                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
-                                            disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined
-                                        },
-                                        position: exports.EntityUtils.GetPos({
+                                    if (!params.rendered || !params.rendered.billboard) {
+                                        cEntity = new Cesium.Entity({
+                                            id: bruceModels.ObjectUtils.UId(10),
+                                            // point: {
+                                            //     pixelSize: size,
+                                            //     color: cColor,
+                                            //     heightReference: getHeightRef(style),
+                                            //     distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                                            // },
+                                            // We are generating a billboard instead of using the point.
+                                            // This is because points were behaving strangely where they would appear oblong shapes.
+                                            // This occurred consistently when rendering many icons and points at the same time.
+                                            billboard: {
+                                                height: circleBillboard.height,
+                                                width: circleBillboard.width,
+                                                image: circleBillboard.canvasDataUri,
+                                                color: new Cesium.CallbackProperty(function () { return undefined; }, true),
+                                                heightReference: heightRef,
+                                                distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
+                                                disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined
+                                            },
+                                            position: exports.EntityUtils.GetPos({
+                                                viewer: params.viewer,
+                                                entity: entity,
+                                                recordHeightRef: heightRef,
+                                                returnHeightRef: heightRef
+                                            }),
+                                            show: true
+                                        });
+                                    }
+                                    else {
+                                        prepareExistingGraphic(params.rendered);
+                                        cEntity = params.rendered;
+                                        imgKey = "".concat(size, "-").concat(cColor.toCssColorString());
+                                        currentImgKey = cEntity.billboard._billboardImgKey;
+                                        if (currentImgKey != imgKey) {
+                                            cEntity.billboard.image = new Cesium.ConstantProperty(circleBillboard.canvasDataUri);
+                                        }
+                                        cEntity.billboard.height = new Cesium.ConstantProperty(circleBillboard.height);
+                                        cEntity.billboard.width = new Cesium.ConstantProperty(circleBillboard.width);
+                                        cEntity.billboard.heightReference = new Cesium.ConstantProperty(heightRef);
+                                        cEntity.billboard.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                        cEntity.billboard.disableDepthTestDistance = new Cesium.ConstantProperty(disableDepthTest ? Number.POSITIVE_INFINITY : undefined);
+                                        cEntity.position = new Cesium.ConstantPositionProperty(exports.EntityUtils.GetPos({
                                             viewer: params.viewer,
                                             entity: entity,
                                             recordHeightRef: heightRef,
                                             returnHeightRef: heightRef
-                                        }),
-                                        show: true
-                                    });
+                                        }));
+                                        // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                                        exports.CesiumEntityStyler.SetDefaultColor({
+                                            color: cColor,
+                                            entity: cEntity,
+                                            viewer: params.viewer,
+                                            override: true,
+                                            requestRender: false
+                                        });
+                                        cEntity.show = true;
+                                        cEntity.billboard._billboardImgKey = imgKey;
+                                    }
                                     cEntity.billboard._billboardSize = Math.ceil(circleBillboard.height / 2);
                                 }
                                 if (cEntity) {
@@ -4910,16 +5445,16 @@
             }
             Point.Render = Render;
             function RenderGroup(params) {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 return __awaiter(this, void 0, void 0, function () {
-                    var api, cEntities, i, entity, zoomItem, style, _d, tagIds, tags, pStyle, cEntity, name_2;
-                    return __generator(this, function (_e) {
-                        switch (_e.label) {
+                    var api, cEntities, i, entity, zoomItem, style, _e, tagIds, tags, pStyle, cEntity, name_2;
+                    return __generator(this, function (_f) {
+                        switch (_f.label) {
                             case 0:
                                 api = params.apiGetter.getApi();
                                 cEntities = {};
                                 i = 0;
-                                _e.label = 1;
+                                _f.label = 1;
                             case 1:
                                 if (!(i < params.entities.length)) return [3 /*break*/, 11];
                                 entity = params.entities[i];
@@ -4927,13 +5462,13 @@
                                 if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 3];
                                 return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                             case 2:
-                                _d = (_a = (_e.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
+                                _e = (_a = (_f.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
                                 return [3 /*break*/, 4];
                             case 3:
-                                _d = zoomItem.Style;
-                                _e.label = 4;
+                                _e = zoomItem.Style;
+                                _f.label = 4;
                             case 4:
-                                style = _d;
+                                style = _e;
                                 tagIds = entity.Bruce["Layer.ID"];
                                 tags = [];
                                 if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 6];
@@ -4942,8 +5477,8 @@
                                         tagIds: tagIds
                                     })];
                             case 5:
-                                tags = (_e.sent()).tags;
-                                _e.label = 6;
+                                tags = (_f.sent()).tags;
+                                _f.label = 6;
                             case 6:
                                 pStyle = (_b = style === null || style === void 0 ? void 0 : style.pointStyle) !== null && _b !== void 0 ? _b : {};
                                 return [4 /*yield*/, Render({
@@ -4954,20 +5489,21 @@
                                         api: api,
                                         apiGetter: params.apiGetter,
                                         maxDistance: zoomItem.MaxZoom,
-                                        minDistance: zoomItem.MinZoom
+                                        minDistance: zoomItem.MinZoom,
+                                        rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c[entity.Bruce.ID]
                                     })];
                             case 7:
-                                cEntity = _e.sent();
+                                cEntity = _f.sent();
                                 if (!cEntity) return [3 /*break*/, 9];
                                 return [4 /*yield*/, getName(api, entity)];
                             case 8:
-                                name_2 = _e.sent();
+                                name_2 = _f.sent();
                                 cEntity.name = name_2;
-                                cEntity._renderGroup = getRenderGroupId(zoomItem, (_c = params.viewer) === null || _c === void 0 ? void 0 : _c.terrainProvider);
-                                _e.label = 9;
+                                cEntity._renderGroup = getRenderGroupId(zoomItem, (_d = params.viewer) === null || _d === void 0 ? void 0 : _d.terrainProvider);
+                                _f.label = 9;
                             case 9:
                                 cEntities[entity.Bruce.ID] = cEntity;
-                                _e.label = 10;
+                                _f.label = 10;
                             case 10:
                                 i++;
                                 return [3 /*break*/, 1];
@@ -5052,52 +5588,110 @@
                 if (style.drapeOver == "ALL") {
                     classification = Cesium.ClassificationType.BOTH;
                 }
-                var cEntity = new Cesium.Entity({
-                    id: bruceModels.ObjectUtils.UId(10),
-                    polyline: units == "px" ? {
-                        positions: posses,
-                        material: cColor,
-                        width: width,
-                        classificationType: classification,
-                        arcType: Cesium.ArcType.GEODESIC,
-                        zIndex: getZIndex(style, entity, params.tags),
-                        clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
-                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                    } : null,
-                    corridor: units == "m" ? {
-                        positions: posses,
-                        material: cColor,
-                        width: width,
-                        classificationType: classification,
-                        heightReference: heightRef,
-                        zIndex: getZIndex(style, entity, params.tags),
-                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
-                        cornerType: Cesium.CornerType.MITERED,
-                        shadows: Cesium.ShadowMode.ENABLED,
-                        fill: true
-                    } : null,
-                    position: exports.EntityUtils.GetPos({
+                var cEntity = null;
+                if (!params.rendered || ((!params.rendered.polyline && units == "px") ||
+                    (!params.rendered.corridor && units == "m"))) {
+                    cEntity = new Cesium.Entity({
+                        id: bruceModels.ObjectUtils.UId(10),
+                        polyline: units == "px" ? {
+                            positions: posses,
+                            material: cColor,
+                            width: width,
+                            classificationType: classification,
+                            arcType: Cesium.ArcType.GEODESIC,
+                            zIndex: getZIndex(style, entity, params.tags),
+                            clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                        } : null,
+                        corridor: units == "m" ? {
+                            positions: posses,
+                            material: cColor,
+                            width: width,
+                            classificationType: classification,
+                            heightReference: heightRef,
+                            zIndex: getZIndex(style, entity, params.tags),
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
+                            cornerType: Cesium.CornerType.MITERED,
+                            shadows: Cesium.ShadowMode.ENABLED,
+                            fill: true
+                        } : null,
+                        position: exports.EntityUtils.GetPos({
+                            viewer: params.viewer,
+                            entity: entity,
+                            recordHeightRef: heightRef,
+                            returnHeightRef: heightRef
+                        }),
+                        show: true
+                    });
+                }
+                else {
+                    // Gather entity in case previous version had sibling graphics we no longer need.
+                    var parts = exports.EntityUtils.GatherEntity({
+                        entity: cEntity,
+                    });
+                    if (parts.length > 1) {
+                        // Kill all expect last part. Last one is the primary entity.
+                        for (var i = 0; i < parts.length - 1; i++) {
+                            var part = parts[i];
+                            if (part && part instanceof Cesium.Entity && params.viewer.entities.contains(part)) {
+                                params.viewer.entities.remove(part);
+                            }
+                        }
+                        cEntity._siblingGraphics = [];
+                        if (cEntity._parentEntity) {
+                            console.warn("Polyline.Render: Parent entity was not null. This should not happen.");
+                        }
+                    }
+                    cEntity = params.rendered;
+                    if (units == "px") {
+                        cEntity.polyline.positions = new Cesium.ConstantProperty(posses);
+                        cEntity.polyline.width = new Cesium.ConstantProperty(width);
+                        cEntity.polyline.classificationType = new Cesium.ConstantProperty(classification);
+                        cEntity.polyline.zIndex = new Cesium.ConstantProperty(getZIndex(style, entity, params.tags));
+                        cEntity.polyline.clampToGround = new Cesium.ConstantProperty(heightRef == Cesium.HeightReference.CLAMP_TO_GROUND);
+                        cEntity.polyline.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                        cEntity.corridor = undefined;
+                    }
+                    else {
+                        cEntity.corridor.positions = new Cesium.ConstantProperty(posses);
+                        cEntity.corridor.width = new Cesium.ConstantProperty(width);
+                        cEntity.corridor.classificationType = new Cesium.ConstantProperty(classification);
+                        cEntity.corridor.heightReference = new Cesium.ConstantProperty(heightRef);
+                        cEntity.corridor.zIndex = new Cesium.ConstantProperty(getZIndex(style, entity, params.tags));
+                        cEntity.corridor.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width));
+                        cEntity.polyline = undefined;
+                    }
+                    // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                    // WARNING: polyline does not support animation (yet?).
+                    exports.CesiumEntityStyler.SetDefaultColor({
+                        color: cColor,
+                        entity: cEntity,
+                        viewer: params.viewer,
+                        override: true,
+                        requestRender: false
+                    });
+                    cEntity.position = new Cesium.ConstantPositionProperty(exports.EntityUtils.GetPos({
                         viewer: params.viewer,
                         entity: entity,
                         recordHeightRef: heightRef,
                         returnHeightRef: heightRef
-                    }),
-                    show: true
-                });
+                    }));
+                    cEntity.show = true;
+                }
                 return cEntity;
             }
             Polyline.Render = Render;
             function RenderGroup(params) {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 return __awaiter(this, void 0, void 0, function () {
-                    var api, cEntities, i, entity, zoomItem, style, _d, tagIds, tags, lStyle, cEntity, name_3;
-                    return __generator(this, function (_e) {
-                        switch (_e.label) {
+                    var api, cEntities, i, entity, zoomItem, style, _e, tagIds, tags, lStyle, cEntity, name_3;
+                    return __generator(this, function (_f) {
+                        switch (_f.label) {
                             case 0:
                                 api = params.apiGetter.getApi();
                                 cEntities = {};
                                 i = 0;
-                                _e.label = 1;
+                                _f.label = 1;
                             case 1:
                                 if (!(i < params.entities.length)) return [3 /*break*/, 9];
                                 entity = params.entities[i];
@@ -5105,13 +5699,13 @@
                                 if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 3];
                                 return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                             case 2:
-                                _d = (_a = (_e.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
+                                _e = (_a = (_f.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
                                 return [3 /*break*/, 4];
                             case 3:
-                                _d = zoomItem.Style;
-                                _e.label = 4;
+                                _e = zoomItem.Style;
+                                _f.label = 4;
                             case 4:
-                                style = _d;
+                                style = _e;
                                 tagIds = entity.Bruce["Layer.ID"];
                                 tags = [];
                                 if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 6];
@@ -5120,8 +5714,8 @@
                                         tagIds: tagIds
                                     })];
                             case 5:
-                                tags = (_e.sent()).tags;
-                                _e.label = 6;
+                                tags = (_f.sent()).tags;
+                                _f.label = 6;
                             case 6:
                                 lStyle = (_b = style === null || style === void 0 ? void 0 : style.polylineStyle) !== null && _b !== void 0 ? _b : {};
                                 cEntity = Render({
@@ -5130,16 +5724,17 @@
                                     tags: tags,
                                     viewer: params.viewer,
                                     maxDistance: zoomItem.MaxZoom,
-                                    minDistance: zoomItem.MinZoom
+                                    minDistance: zoomItem.MinZoom,
+                                    rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c[entity.Bruce.ID]
                                 });
                                 if (!cEntity) return [3 /*break*/, 8];
                                 return [4 /*yield*/, getName(api, entity)];
                             case 7:
-                                name_3 = _e.sent();
+                                name_3 = _f.sent();
                                 cEntity.name = name_3;
-                                cEntity._renderGroup = getRenderGroupId(zoomItem, (_c = params.viewer) === null || _c === void 0 ? void 0 : _c.terrainProvider);
+                                cEntity._renderGroup = getRenderGroupId(zoomItem, (_d = params.viewer) === null || _d === void 0 ? void 0 : _d.terrainProvider);
                                 cEntities[entity.Bruce.ID] = cEntity;
-                                _e.label = 8;
+                                _f.label = 8;
                             case 8:
                                 i++;
                                 return [3 /*break*/, 1];
@@ -5153,7 +5748,7 @@
         var Polygon;
         (function (Polygon) {
             function Render(params) {
-                var _a, _b;
+                var _a, _b, _c, _d;
                 var entity = params.entity;
                 var pRings = (_a = entity.geometry) === null || _a === void 0 ? void 0 : _a.Polygon;
                 if (pRings == null || pRings.length <= 0) {
@@ -5210,30 +5805,85 @@
                 if (style.drapeOver == "ALL") {
                     classification = Cesium.ClassificationType.BOTH;
                 }
-                var cEntity = new Cesium.Entity({
-                    id: bruceModels.ObjectUtils.UId(10),
-                    polygon: {
-                        hierarchy: new Cesium.PolygonHierarchy(posses, holePosses.map(function (x) { return new Cesium.PolygonHierarchy(x); })),
-                        material: cFillColor,
-                        extrudedHeight: extrusion.value,
-                        extrudedHeightReference: extrusion.exHeightRef,
-                        shadows: Cesium.ShadowMode.ENABLED,
-                        heightReference: heightRef,
-                        classificationType: classification,
-                        perPositionHeight: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND ? false : true,
-                        zIndex: zIndex,
-                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true)
-                    },
-                    position: exports.EntityUtils.GetPos({
+                var prepareExistingGraphic = function (cEntity, siblings) {
+                    if (siblings === void 0) { siblings = 0; }
+                    // Gather entity in case previous version had sibling graphics we no longer need.
+                    var parts = exports.EntityUtils.GatherEntity({
+                        entity: cEntity,
+                    });
+                    if (parts.length > 1) {
+                        // We'll cull all except the allowed number of siblings.
+                        cEntity._siblingGraphics = cEntity._siblingGraphics.slice(0, siblings);
+                        // We'll remove all that aren't in the allowed (direct) list.
+                        for (var i = 0; i < parts.length - 1; i++) {
+                            var part = parts[i];
+                            if (part && part instanceof Cesium.Entity && params.viewer.entities.contains(part) && !cEntity._siblingGraphics.includes(part)) {
+                                params.viewer.entities.remove(part);
+                            }
+                        }
+                        if (cEntity._parentEntity) {
+                            console.warn("Point.Render: Parent entity was not null. This should not happen.");
+                        }
+                    }
+                };
+                var hasOutline = width > 0 && cLineColor;
+                var cEntity = null;
+                if (!params.rendered || !params.rendered.polygon) {
+                    cEntity = new Cesium.Entity({
+                        id: bruceModels.ObjectUtils.UId(10),
+                        polygon: {
+                            hierarchy: new Cesium.PolygonHierarchy(posses, holePosses.map(function (x) { return new Cesium.PolygonHierarchy(x); })),
+                            material: cFillColor,
+                            extrudedHeight: extrusion.value,
+                            extrudedHeightReference: extrusion.exHeightRef,
+                            shadows: Cesium.ShadowMode.ENABLED,
+                            heightReference: heightRef,
+                            classificationType: classification,
+                            perPositionHeight: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND ? false : true,
+                            zIndex: zIndex,
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true)
+                        },
+                        position: exports.EntityUtils.GetPos({
+                            viewer: params.viewer,
+                            entity: entity,
+                            recordHeightRef: heightRef,
+                            returnHeightRef: heightRef
+                        }),
+                        show: true
+                    });
+                }
+                else {
+                    // Polygons can have more siblings for the related hole graphics.
+                    // So this is a "good enough" way rather than perfect as it only preserves the outline.
+                    prepareExistingGraphic(params.rendered, hasOutline ? 1 : 0);
+                    cEntity = params.rendered;
+                    cEntity.polygon.hierarchy = new Cesium.ConstantProperty(new Cesium.PolygonHierarchy(posses, holePosses.map(function (x) { return new Cesium.PolygonHierarchy(x); })));
+                    cEntity.polygon.extrudedHeight = new Cesium.ConstantProperty(extrusion.value);
+                    cEntity.polygon.extrudedHeightReference = new Cesium.ConstantProperty(extrusion.exHeightRef);
+                    cEntity.polygon.shadows = new Cesium.ConstantProperty(Cesium.ShadowMode.ENABLED);
+                    cEntity.polygon.heightReference = new Cesium.ConstantProperty(heightRef);
+                    cEntity.polygon.classificationType = new Cesium.ConstantProperty(classification);
+                    cEntity.polygon.perPositionHeight = new Cesium.ConstantProperty(heightRef == Cesium.HeightReference.CLAMP_TO_GROUND ? false : true);
+                    cEntity.polygon.zIndex = new Cesium.ConstantProperty(zIndex);
+                    cEntity.polygon.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true));
+                    cEntity.position = new Cesium.ConstantPositionProperty(exports.EntityUtils.GetPos({
                         viewer: params.viewer,
                         entity: entity,
                         recordHeightRef: heightRef,
                         returnHeightRef: heightRef
-                    }),
-                    show: true
-                });
-                cEntity._siblingGraphics = [];
-                if (width > 0 && cLineColor) {
+                    }));
+                    // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                    // WARNING: polygon does not support animation (yet?).
+                    exports.CesiumEntityStyler.SetDefaultColor({
+                        color: cFillColor,
+                        entity: cEntity,
+                        viewer: params.viewer,
+                        override: true,
+                        requestRender: false
+                    });
+                    cEntity.show = true;
+                }
+                if (hasOutline) {
                     var borderHeight = undefined;
                     if (heightRef != Cesium.HeightReference.CLAMP_TO_GROUND) {
                         if (flattenPoints) {
@@ -5257,33 +5907,62 @@
                     else {
                         borderPosses = posses.map(function (x) { return x.clone ? x.clone() : __assign({}, x); });
                     }
-                    var cEntityBorder = new Cesium.Entity({
-                        id: bruceModels.ObjectUtils.UId(10),
-                        polyline: units == "px" ? new Cesium.PolylineGraphics({
-                            positions: borderPosses,
-                            material: cLineColor,
-                            width: width,
-                            clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
-                            classificationType: Cesium.ClassificationType.TERRAIN,
-                            arcType: Cesium.ArcType.GEODESIC,
-                            zIndex: zIndex,
-                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                        }) : null,
-                        corridor: units == "m" ? {
-                            positions: borderPosses,
-                            material: cLineColor,
-                            heightReference: heightRef,
-                            height: borderHeight,
-                            width: width,
-                            fill: true,
-                            zIndex: zIndex + 1,
-                            cornerType: Cesium.CornerType.MITERED,
-                            classificationType: classification,
-                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
-                            shadows: Cesium.ShadowMode.ENABLED
-                        } : null,
-                        show: true
-                    });
+                    var cEntityBorder = (_d = (_c = params.rendered) === null || _c === void 0 ? void 0 : _c._siblingGraphics) === null || _d === void 0 ? void 0 : _d[0];
+                    cEntity._siblingGraphics = [];
+                    if (!cEntityBorder || ((!cEntityBorder.polyline && units == "px") ||
+                        (!cEntityBorder.corridor && units == "m"))) {
+                        cEntityBorder = new Cesium.Entity({
+                            id: bruceModels.ObjectUtils.UId(10),
+                            polyline: units == "px" ? new Cesium.PolylineGraphics({
+                                positions: borderPosses,
+                                material: cLineColor,
+                                width: width,
+                                clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
+                                classificationType: Cesium.ClassificationType.TERRAIN,
+                                arcType: Cesium.ArcType.GEODESIC,
+                                zIndex: zIndex,
+                                distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                            }) : null,
+                            corridor: units == "m" ? {
+                                positions: borderPosses,
+                                material: cLineColor,
+                                heightReference: heightRef,
+                                height: borderHeight,
+                                width: width,
+                                fill: true,
+                                zIndex: zIndex + 1,
+                                cornerType: Cesium.CornerType.MITERED,
+                                classificationType: classification,
+                                distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
+                                shadows: Cesium.ShadowMode.ENABLED
+                            } : null,
+                            show: true
+                        });
+                    }
+                    else {
+                        if (units == "px") {
+                            cEntityBorder.polyline.positions = new Cesium.ConstantProperty(borderPosses);
+                            cEntityBorder.polyline.width = new Cesium.ConstantProperty(width);
+                            cEntityBorder.polyline.clampToGround = new Cesium.ConstantProperty(heightRef == Cesium.HeightReference.CLAMP_TO_GROUND);
+                            cEntityBorder.polyline.classificationType = new Cesium.ConstantProperty(Cesium.ClassificationType.TERRAIN);
+                            cEntityBorder.polyline.zIndex = new Cesium.ConstantProperty(zIndex);
+                            cEntityBorder.polyline.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                            cEntityBorder.polyline.material = new Cesium.ColorMaterialProperty(cLineColor);
+                            cEntityBorder.corridor = undefined;
+                        }
+                        else {
+                            cEntityBorder.corridor.positions = new Cesium.ConstantProperty(borderPosses);
+                            cEntityBorder.corridor.heightReference = new Cesium.ConstantProperty(heightRef);
+                            cEntityBorder.corridor.height = new Cesium.ConstantProperty(borderHeight);
+                            cEntityBorder.corridor.width = new Cesium.ConstantProperty(width);
+                            cEntityBorder.corridor.fill = new Cesium.ConstantProperty(true);
+                            cEntityBorder.corridor.zIndex = new Cesium.ConstantProperty(zIndex + 1);
+                            cEntityBorder.corridor.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width));
+                            cEntityBorder.corridor.material = new Cesium.ColorMaterialProperty(cLineColor);
+                            cEntityBorder.polyline = undefined;
+                        }
+                        cEntityBorder.show = true;
+                    }
                     cEntityBorder._parentEntity = cEntity;
                     cEntity._siblingGraphics.push(cEntityBorder);
                     for (var i = 0; i < holePosses.length; i++) {
@@ -5320,20 +5999,23 @@
                         cEntityHole._parentEntity = cEntity;
                     }
                 }
+                else {
+                    cEntity._siblingGraphics = [];
+                }
                 return cEntity;
             }
             Polygon.Render = Render;
             function RenderGroup(params) {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 return __awaiter(this, void 0, void 0, function () {
-                    var api, cEntities, i, entity, zoomItem, style, _d, tagIds, tags, pStyle, cEntity, name_4;
-                    return __generator(this, function (_e) {
-                        switch (_e.label) {
+                    var api, cEntities, i, entity, zoomItem, style, _e, tagIds, tags, pStyle, cEntity, name_4;
+                    return __generator(this, function (_f) {
+                        switch (_f.label) {
                             case 0:
                                 api = params.apiGetter.getApi();
                                 cEntities = {};
                                 i = 0;
-                                _e.label = 1;
+                                _f.label = 1;
                             case 1:
                                 if (!(i < params.entities.length)) return [3 /*break*/, 9];
                                 entity = params.entities[i];
@@ -5341,13 +6023,13 @@
                                 if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 3];
                                 return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                             case 2:
-                                _d = (_a = (_e.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
+                                _e = (_a = (_f.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
                                 return [3 /*break*/, 4];
                             case 3:
-                                _d = zoomItem.Style;
-                                _e.label = 4;
+                                _e = zoomItem.Style;
+                                _f.label = 4;
                             case 4:
-                                style = _d;
+                                style = _e;
                                 tagIds = entity.Bruce["Layer.ID"];
                                 tags = [];
                                 if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 6];
@@ -5356,8 +6038,8 @@
                                         tagIds: tagIds
                                     })];
                             case 5:
-                                tags = (_e.sent()).tags;
-                                _e.label = 6;
+                                tags = (_f.sent()).tags;
+                                _f.label = 6;
                             case 6:
                                 pStyle = (_b = style === null || style === void 0 ? void 0 : style.polygonStyle) !== null && _b !== void 0 ? _b : {};
                                 cEntity = Render({
@@ -5366,16 +6048,17 @@
                                     tags: tags,
                                     viewer: params.viewer,
                                     maxDistance: zoomItem.MaxZoom,
-                                    minDistance: zoomItem.MinZoom
+                                    minDistance: zoomItem.MinZoom,
+                                    rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c[entity.Bruce.ID]
                                 });
                                 if (!cEntity) return [3 /*break*/, 8];
                                 return [4 /*yield*/, getName(api, entity)];
                             case 7:
-                                name_4 = _e.sent();
+                                name_4 = _f.sent();
                                 cEntity.name = name_4;
-                                cEntity._renderGroup = getRenderGroupId(zoomItem, (_c = params.viewer) === null || _c === void 0 ? void 0 : _c.terrainProvider);
+                                cEntity._renderGroup = getRenderGroupId(zoomItem, (_d = params.viewer) === null || _d === void 0 ? void 0 : _d.terrainProvider);
                                 cEntities[entity.Bruce.ID] = cEntity;
-                                _e.label = 8;
+                                _f.label = 8;
                             case 8:
                                 i++;
                                 return [3 /*break*/, 1];
@@ -5439,8 +6122,9 @@
                         color = colorToCColor(bColor);
                     }
                 }
-                var cEntity = new Cesium.Entity({
-                    id: bruceModels.ObjectUtils.UId(10),
+                /*
+                const cEntity: ICesiumEntityExt = new Cesium.Entity({
+                    id: ObjectUtils.UId(10),
                     model: {
                         uri: params.lodUrl,
                         heightReference: heightRef,
@@ -5448,13 +6132,89 @@
                         shadows: Cesium.ShadowMode.ENABLED,
                         colorBlendAmount: blendAmount,
                         colorBlendMode: blendMode,
-                        color: color,
+                        color: new Cesium.CallbackProperty(() => color, true),
                         distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                     },
                     orientation: new Cesium.ConstantProperty(orientation),
                     position: pos,
                     show: true
                 });
+                */
+                var animateScale = null;
+                var cEntity = params.rendered;
+                if (!cEntity || !cEntity.model) {
+                    cEntity = new Cesium.Entity({
+                        id: bruceModels.ObjectUtils.UId(10),
+                        model: {
+                            uri: params.lodUrl,
+                            heightReference: heightRef,
+                            scale: new Cesium.CallbackProperty(function () { return scale * styleScale; }, true),
+                            shadows: Cesium.ShadowMode.ENABLED,
+                            colorBlendAmount: blendAmount,
+                            colorBlendMode: blendMode,
+                            color: new Cesium.CallbackProperty(function () { return color; }, true),
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                        },
+                        orientation: new Cesium.ConstantProperty(orientation),
+                        position: pos,
+                        show: true
+                    });
+                }
+                else {
+                    // Gather entity in case previous version had sibling graphics we no longer need.
+                    var parts = exports.EntityUtils.GatherEntity({
+                        entity: cEntity,
+                    });
+                    if (parts.length > 1) {
+                        // Kill all expect last part. Last one is the primary entity.
+                        for (var i = 0; i < parts.length - 1; i++) {
+                            var part = parts[i];
+                            if (part && part instanceof Cesium.Entity && params.viewer.entities.contains(part)) {
+                                params.viewer.entities.remove(part);
+                            }
+                        }
+                        cEntity._siblingGraphics = [];
+                        if (cEntity._parentEntity) {
+                            console.warn("Model3d.Render: Parent entity was not null. This should not happen.");
+                        }
+                    }
+                    var currentUri = getValue$1(params.viewer, cEntity.model.uri);
+                    if (currentUri != params.lodUrl) {
+                        cEntity.model.uri = new Cesium.ConstantProperty(params.lodUrl);
+                    }
+                    cEntity.model.heightReference = new Cesium.ConstantProperty(heightRef);
+                    cEntity.model.shadows = new Cesium.ConstantProperty(Cesium.ShadowMode.ENABLED);
+                    cEntity.model.colorBlendAmount = new Cesium.ConstantProperty(blendAmount);
+                    cEntity.model.colorBlendMode = new Cesium.ConstantProperty(blendMode);
+                    cEntity.model.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                    cEntity.orientation = new Cesium.ConstantProperty(orientation);
+                    cEntity.position = new Cesium.ConstantPositionProperty(pos);
+                    // Same file but different scale. We'll animate the scale.
+                    var prevClientFileId = cEntity.model._clientFileId;
+                    if (prevClientFileId == params.lodClientFileId) {
+                        animateScale = new CesiumAnimatedProperty.AnimateNumber({
+                            durationMs: 200,
+                            value: scale * styleScale,
+                            viewer: params.viewer,
+                            startValue: cEntity.model.scale,
+                            startPaused: true
+                        });
+                        cEntity.model.scale = new Cesium.CallbackProperty(function () { return animateScale.GetValue(); }, false);
+                    }
+                    else {
+                        cEntity.model.scale = new Cesium.CallbackProperty(function () { return scale * styleScale; }, true);
+                    }
+                    // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                    // cEntity.model.color = new Cesium.CallbackProperty(() => color, true);
+                    exports.CesiumEntityStyler.SetDefaultColor({
+                        color: color,
+                        entity: cEntity,
+                        viewer: params.viewer,
+                        override: true,
+                        requestRender: false
+                    });
+                    cEntity.show = true;
+                }
                 var fileRadiusKey = "model3d_".concat(params.lodUrl, "_").concat(scale * styleScale, "_radius");
                 var heightProm = _fileRadiusCache.Get(fileRadiusKey);
                 if (!heightProm) {
@@ -5533,6 +6293,10 @@
                             VisualRegisterCuller.MarkShouldRecheck(params.viewer);
                         }
                     }
+                    // Rough estimate on when the model is ready in the scene.
+                    if (animateScale) {
+                        animateScale.Play();
+                    }
                 });
                 var model = cEntity.model;
                 model._radiusLoaded = false;
@@ -5545,16 +6309,16 @@
             }
             Model3d.Render = Render;
             function RenderGroup(params) {
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d, _e, _f;
                 return __awaiter(this, void 0, void 0, function () {
-                    var api, cEntities, reqBody, i, entity, zoomItem, style, _f, tagIds, tags, mStyle, group, level, catId, lodData, _loop_2, i;
-                    return __generator(this, function (_g) {
-                        switch (_g.label) {
+                    var api, cEntities, reqBody, i, entity, zoomItem, style, _g, tagIds, tags, mStyle, group, level, catId, lodData, _loop_2, i;
+                    return __generator(this, function (_h) {
+                        switch (_h.label) {
                             case 0:
                                 api = params.apiGetter.getApi();
                                 return [4 /*yield*/, api.Loading];
                             case 1:
-                                _g.sent();
+                                _h.sent();
                                 cEntities = {};
                                 reqBody = {
                                     "strict": false,
@@ -5562,7 +6326,7 @@
                                     "Items": []
                                 };
                                 i = 0;
-                                _g.label = 2;
+                                _h.label = 2;
                             case 2:
                                 if (!(i < params.entities.length)) return [3 /*break*/, 9];
                                 entity = params.entities[i];
@@ -5570,13 +6334,13 @@
                                 if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 4];
                                 return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                             case 3:
-                                _f = (_a = (_g.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
+                                _g = (_a = (_h.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
                                 return [3 /*break*/, 5];
                             case 4:
-                                _f = zoomItem.Style;
-                                _g.label = 5;
+                                _g = zoomItem.Style;
+                                _h.label = 5;
                             case 5:
-                                style = _f;
+                                style = _g;
                                 tagIds = entity.Bruce["Layer.ID"];
                                 tags = [];
                                 if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 7];
@@ -5585,8 +6349,8 @@
                                         tagIds: tagIds
                                     })];
                             case 6:
-                                tags = (_g.sent()).tags;
-                                _g.label = 7;
+                                tags = (_h.sent()).tags;
+                                _h.label = 7;
                             case 7:
                                 mStyle = (_b = style === null || style === void 0 ? void 0 : style.modelStyle) !== null && _b !== void 0 ? _b : {};
                                 group = mStyle.lodGroup ? bruceModels.Calculator.GetString(mStyle.lodGroup, entity, tags) : null;
@@ -5607,7 +6371,7 @@
                                     "group": group,
                                     "level": level
                                 });
-                                _g.label = 8;
+                                _h.label = 8;
                             case 8:
                                 i++;
                                 return [3 /*break*/, 2];
@@ -5616,24 +6380,24 @@
                                     filter: reqBody
                                 })];
                             case 10:
-                                lodData = (_g.sent()).lods;
+                                lodData = (_h.sent()).lods;
                                 _loop_2 = function (i) {
-                                    var entity, zoomItem, style, _h, tagIds, tags, lod, mStyle, cEntity, name_5;
-                                    return __generator(this, function (_j) {
-                                        switch (_j.label) {
+                                    var entity, zoomItem, style, _j, tagIds, tags, lod, mStyle, cEntity, name_5;
+                                    return __generator(this, function (_k) {
+                                        switch (_k.label) {
                                             case 0:
                                                 entity = params.entities[i];
                                                 zoomItem = params.zoomItems[entity.Bruce.ID];
                                                 if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 2];
                                                 return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                                             case 1:
-                                                _h = (_c = (_j.sent())) === null || _c === void 0 ? void 0 : _c.Settings;
+                                                _j = (_c = (_k.sent())) === null || _c === void 0 ? void 0 : _c.Settings;
                                                 return [3 /*break*/, 3];
                                             case 2:
-                                                _h = zoomItem.Style;
-                                                _j.label = 3;
+                                                _j = zoomItem.Style;
+                                                _k.label = 3;
                                             case 3:
-                                                style = _h;
+                                                style = _j;
                                                 tagIds = entity.Bruce["Layer.ID"];
                                                 tags = [];
                                                 if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 5];
@@ -5642,8 +6406,8 @@
                                                         tagIds: tagIds
                                                     })];
                                             case 4:
-                                                tags = (_j.sent()).tags;
-                                                _j.label = 5;
+                                                tags = (_k.sent()).tags;
+                                                _k.label = 5;
                                             case 5:
                                                 lod = lodData.find(function (x) { return x.entityId == entity.Bruce.ID; });
                                                 if (!(lod === null || lod === void 0 ? void 0 : lod.clientFileId)) {
@@ -5651,6 +6415,7 @@
                                                 }
                                                 mStyle = (_d = style === null || style === void 0 ? void 0 : style.modelStyle) !== null && _d !== void 0 ? _d : {};
                                                 cEntity = Render({
+                                                    rendered: (_e = params.rendered) === null || _e === void 0 ? void 0 : _e[entity.Bruce.ID],
                                                     entity: entity,
                                                     style: mStyle,
                                                     tags: tags,
@@ -5667,23 +6432,23 @@
                                                 if (!cEntity) return [3 /*break*/, 7];
                                                 return [4 /*yield*/, getName(api, entity)];
                                             case 6:
-                                                name_5 = _j.sent();
+                                                name_5 = _k.sent();
                                                 cEntity.name = name_5;
-                                                cEntity._renderGroup = getRenderGroupId(zoomItem, (_e = params.viewer) === null || _e === void 0 ? void 0 : _e.terrainProvider);
+                                                cEntity._renderGroup = getRenderGroupId(zoomItem, (_f = params.viewer) === null || _f === void 0 ? void 0 : _f.terrainProvider);
                                                 cEntities[entity.Bruce.ID] = cEntity;
-                                                _j.label = 7;
+                                                _k.label = 7;
                                             case 7: return [2 /*return*/];
                                         }
                                     });
                                 };
                                 i = 0;
-                                _g.label = 11;
+                                _h.label = 11;
                             case 11:
                                 if (!(i < params.entities.length)) return [3 /*break*/, 14];
                                 return [5 /*yield**/, _loop_2(i)];
                             case 12:
-                                _g.sent();
-                                _g.label = 13;
+                                _h.sent();
+                                _h.label = 13;
                             case 13:
                                 i++;
                                 return [3 /*break*/, 11];
@@ -8973,7 +9738,8 @@
                     // So for multiple tags we'll manually sort on UI end...
                     tagIds: (tagsToRender === null || tagsToRender === void 0 ? void 0 : tagsToRender.length) ? tagsToRender : [],
                     debugShowBounds: Boolean(window === null || window === void 0 ? void 0 : window.ENTITIES_RENDER_MANAGER_SHOW_BOUNDS),
-                    cdn: this.item.cdnEnabled
+                    cdn: this.item.cdnEnabled,
+                    historicAttrKey: this.item.BruceEntity.historicAttrKey
                 });
                 var minMax = exports.RenderManager.GetZoomMinMax({
                     zoomControl: this.item.CameraZoomSettings
@@ -9535,23 +10301,37 @@
              * @returns
              */
             Manager.prototype.renderAsIndividuals = function (entities, force) {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e, _f, _g;
                 if (force === void 0) { force = false; }
                 return __awaiter(this, void 0, void 0, function () {
-                    var cEntities, i, entity, id, cEntity, visual, wasClustered, tagIds, rego;
-                    return __generator(this, function (_d) {
-                        switch (_d.label) {
-                            case 0: return [4 /*yield*/, exports.EntityRenderEngine.Render({
-                                    viewer: this.viewer,
-                                    apiGetter: this.apiGetter,
-                                    entities: entities,
-                                    menuItemId: this.item.id,
-                                    visualRegister: this.visualsManager,
-                                    zoomControl: this.item.CameraZoomSettings,
-                                    force: force
-                                })];
+                    var toRemove, i, entity, cEntities, i, entity, id, cEntity, visual, wasClustered, tagIds, rego;
+                    return __generator(this, function (_h) {
+                        switch (_h.label) {
+                            case 0:
+                                if ((_a = this.item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historicAttrKey) {
+                                    toRemove = entities.filter(function (x) { var _a; return !((_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.historicAttrKey); });
+                                    for (i = 0; i < toRemove.length; i++) {
+                                        entity = toRemove[i];
+                                        this.visualsManager.RemoveRegos({
+                                            entityId: entity.Bruce.ID,
+                                            menuItemId: this.item.id,
+                                            requestRender: false
+                                        });
+                                        (_b = this.clustering) === null || _b === void 0 ? void 0 : _b.RemoveEntity(entity.Bruce.ID, false);
+                                    }
+                                    entities = entities.filter(function (x) { var _a; return !!((_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.historicAttrKey); });
+                                }
+                                return [4 /*yield*/, exports.EntityRenderEngine.Render({
+                                        viewer: this.viewer,
+                                        apiGetter: this.apiGetter,
+                                        entities: entities,
+                                        menuItemId: this.item.id,
+                                        visualRegister: this.visualsManager,
+                                        zoomControl: this.item.CameraZoomSettings,
+                                        force: force
+                                    })];
                             case 1:
-                                cEntities = _d.sent();
+                                cEntities = _h.sent();
                                 if (this.disposed) {
                                     this.doDispose();
                                     return [2 /*return*/];
@@ -9562,13 +10342,13 @@
                                     cEntity = cEntities[id];
                                     this.renderedEntities[id] = !!cEntity;
                                     if (cEntity) {
-                                        visual = (_a = this.visualsManager.GetRego({
+                                        visual = (_c = this.visualsManager.GetRego({
                                             entityId: id,
                                             menuItemId: this.item.id
-                                        })) === null || _a === void 0 ? void 0 : _a.visual;
+                                        })) === null || _c === void 0 ? void 0 : _c.visual;
                                         if (!visual || visual != cEntity) {
                                             wasClustered = this.clustering ? this.clustering.AddEntity(id, cEntity, false) : false;
-                                            tagIds = (_b = entity.Bruce) === null || _b === void 0 ? void 0 : _b["Layer.ID"];
+                                            tagIds = (_d = entity.Bruce) === null || _d === void 0 ? void 0 : _d["Layer.ID"];
                                             rego = {
                                                 entityId: id,
                                                 menuItemId: this.item.id,
@@ -9579,7 +10359,9 @@
                                                 tagIds: tagIds ? [].concat(tagIds) : [],
                                                 overrideShow: wasClustered ? false : null,
                                                 name: cEntity.name,
-                                                cdn: this.item.cdnEnabled
+                                                cdn: this.item.cdnEnabled,
+                                                historicDateTime: (_e = entity.Bruce) === null || _e === void 0 ? void 0 : _e.historicDateTime,
+                                                historicAttrKey: (_f = entity.Bruce) === null || _f === void 0 ? void 0 : _f.historicAttrKey
                                             };
                                             this.visualsManager.AddRego({
                                                 rego: rego,
@@ -9593,7 +10375,7 @@
                                             menuItemId: this.item.id,
                                             requestRender: false
                                         });
-                                        (_c = this.clustering) === null || _c === void 0 ? void 0 : _c.RemoveEntity(id, false);
+                                        (_g = this.clustering) === null || _g === void 0 ? void 0 : _g.RemoveEntity(id, false);
                                     }
                                 }
                                 this.viewer.scene.requestRender();
@@ -11758,6 +12540,16 @@
             };
             Styler.prototype.QueueEntities = function (entities, highPriority) {
                 if (highPriority === void 0) { highPriority = false; }
+                // We set a default colour right away to avoid race conditions at later times.
+                for (var i = 0; i < entities.length; i++) {
+                    var entity = entities[i];
+                    this.styledEntityIds[entity.entityId] = true;
+                    exports.CesiumEntityStyler.BakeDefaultColor({
+                        entity: entity.visual,
+                        viewer: this.viewer,
+                        override: false
+                    });
+                }
                 for (var i = 0; i < entities.length; i++) {
                     var entity = entities[i];
                     this.queueTilesetFeatureStyle(entity, highPriority);
@@ -12784,12 +13576,13 @@
             EStatus["Loading"] = "LOADING";
         })(EStatus = EntityFilterGetter.EStatus || (EntityFilterGetter.EStatus = {}));
         var Getter = /** @class */ (function () {
-            function Getter(api, viewPort, typeId, batchSize, attrFilter, viaCdn) {
+            function Getter(api, viewer, viewPort, typeId, batchSize, attrFilter, historicAttrKey, viaCdn) {
                 this.onUpdate = null;
                 this.LastStateUpdates = {};
                 this.onStateUpdate = null;
                 this.onScanUpdate = null;
                 this.viewPortChangeRemoval = null;
+                this.viewerDateTimeChangeRemoval = null;
                 this.cells = null;
                 this.registeredItems = {};
                 this.getterLoopId = 0;
@@ -12800,10 +13593,12 @@
                 this.viewCenter = null;
                 this.api = api;
                 this.typeId = typeId;
+                this.historicAttrKey = historicAttrKey;
                 this.viaCdn = Boolean(viaCdn);
                 this.batchSize = isNaN(batchSize) ? 300 : batchSize;
                 this.viewPort = viewPort;
                 this.attrFilter = attrFilter;
+                this.viewer = viewer;
                 this.updateBounds();
             }
             Object.defineProperty(Getter.prototype, "OnUpdate", {
@@ -12842,7 +13637,14 @@
              * @returns
              */
             Getter.prototype.getIntegrityId = function () {
-                return this.tagIds == null ? "" : this.tagIds.join();
+                var integrity = this.tagIds == null ? "" : this.tagIds.join();
+                if (this.historicAttrKey) {
+                    integrity += this.historicAttrKey;
+                    if (this.historicAttrDateTime) {
+                        integrity += this.historicAttrDateTime;
+                    }
+                }
+                return integrity;
             };
             Getter.prototype.viewAreaSub = function () {
                 var _this = this;
@@ -12855,6 +13657,57 @@
             Getter.prototype.viewAreaDispose = function () {
                 var _a;
                 (_a = this.viewPortChangeRemoval) === null || _a === void 0 ? void 0 : _a.call(this);
+                this.viewPortChangeRemoval = null;
+            };
+            /**
+             * Monitors the Cesium viewer and updates the historic data filter values.
+             * If there is no historic attr set, this will do nothing.
+             */
+            Getter.prototype.viewerDateTimeSub = function () {
+                var _this = this;
+                this.viewerDateTimeDispose();
+                if (!this.historicAttrKey) {
+                    return;
+                }
+                var delayQueue = new bruceModels.DelayQueue(function () {
+                    var current = _this.getIntegrityId();
+                    _this.updateHistoricDateTime();
+                    if (current != _this.getIntegrityId()) {
+                        _this.updateState();
+                    }
+                }, 250);
+                var postUpdateRemoval = this.viewer.scene.postUpdate.addEventListener(function () {
+                    if (delayQueue) {
+                        delayQueue.Call();
+                    }
+                });
+                this.viewerDateTimeChangeRemoval = function () {
+                    delayQueue === null || delayQueue === void 0 ? void 0 : delayQueue.Dispose();
+                    postUpdateRemoval === null || postUpdateRemoval === void 0 ? void 0 : postUpdateRemoval();
+                    delayQueue = null;
+                    postUpdateRemoval = null;
+                };
+            };
+            Getter.prototype.updateHistoricDateTime = function () {
+                var newDateTime = Cesium.JulianDate.toDate(this.viewer.clock.currentTime);
+                // Has previous value. Let's compare.
+                if (this.historicAttrDateTime) {
+                    var oldDateTime = new Date(this.historicAttrDateTime);
+                    // Change must be at least 0.1 seconds.
+                    // TODO: This is just a random value I picked. We may need to make a setting or refine this.
+                    if (Math.abs(newDateTime.getTime() - oldDateTime.getTime()) < 100) {
+                        return;
+                    }
+                }
+                this.historicAttrDateTime = newDateTime.toISOString();
+                // Set min/max to be the value increased/decreased by 1 minute.
+                this.historicAttrDateTimeMin = new Date(newDateTime.getTime() - 60000).toISOString();
+                this.historicAttrDateTimeMax = new Date(newDateTime.getTime() + 60000).toISOString();
+            };
+            Getter.prototype.viewerDateTimeDispose = function () {
+                var _a;
+                (_a = this.viewerDateTimeChangeRemoval) === null || _a === void 0 ? void 0 : _a.call(this);
+                this.viewerDateTimeChangeRemoval = null;
             };
             Getter.prototype.GetMenuItems = function () {
                 return Object.keys(this.registeredItems);
@@ -12914,8 +13767,10 @@
                     this.minHeight = minHeight;
                     this.maxHeight = maxHeight;
                     this.updateBounds();
+                    this.updateHistoricDateTime();
                     this.startGetterLoop();
                     this.viewAreaSub();
+                    this.viewerDateTimeSub();
                 }
                 else {
                     this.getterLoopId += 1;
@@ -13011,6 +13866,9 @@
                                 _j.trys.push([8, 10, , 11]);
                                 return [4 /*yield*/, bruceModels.Entity.GetList({
                                         api: this.api,
+                                        historicKey: this.historicAttrKey,
+                                        historicFrom: this.historicAttrKey ? this.historicAttrDateTimeMin : null,
+                                        historicTo: this.historicAttrKey ? this.historicAttrDateTimeMax : null,
                                         filter: {
                                             pageSize: PAGE_SIZE,
                                             pageIndex: curCell.FetchPageIndex,
@@ -13108,6 +13966,7 @@
         cacheKey += params.batchSize;
         cacheKey += String(params.cdn);
         cacheKey += JSON.stringify(params.tagIds ? params.tagIds : []);
+        cacheKey += params.historicAttrKey ? params.historicAttrKey : "";
         // This could potentially crash, but if it crashes here then it would crash during API request anyways.
         cacheKey += JSON.stringify(params.attrFilter ? params.attrFilter : {});
         return cacheKey;
@@ -13122,7 +13981,7 @@
                 var cacheKey = createFilterGetterCacheKey(params);
                 var getter = this.data[cacheKey];
                 if (!getter) {
-                    getter = new EntityFilterGetter.Getter(params.api, params.monitor, params.typeId, params.batchSize, params.attrFilter, params.cdn);
+                    getter = new EntityFilterGetter.Getter(params.api, params.viewer, params.monitor, params.typeId, params.batchSize, params.attrFilter, params.historicAttrKey, params.cdn);
                     this.data[cacheKey] = getter;
                     /**
                      * Debug option.
@@ -22514,7 +23373,7 @@
         ViewRenderEngine.Render = Render;
     })(exports.ViewRenderEngine || (exports.ViewRenderEngine = {}));
 
-    var VERSION = "3.7.3";
+    var VERSION = "3.7.5";
 
     exports.VERSION = VERSION;
     exports.CesiumParabola = CesiumParabola;