bruce-cesium 3.7.2 → 3.7.4

package/dist/bruce-cesium.es5.js

@@ -1,6 +1,6 @@
 import { BruceEvent, Cartes, Carto, Entity as Entity$1, Geometry, Tileset, MathUtils, LRUCache, ProjectViewTile, DelayQueue, ZoomControl, Style, EntityTag, Calculator, EntityLod, EntityType, ClientFile, ObjectUtils, Bounds, Api, EntityRelationType, ENVIRONMENT, EntityCoords, EntitySource, MenuItem, EntityRelation, ProgramKey, AbstractApi, ProjectViewBookmark, EntityAttachment, EntityAttachmentType, EntityAttribute, ProjectView, ProjectViewLegacyTile, Camera } from 'bruce-models';
 import * as Cesium from 'cesium';
-import { Cartographic, Cartesian2, Math as Math$1, Cartesian3, CallbackProperty, Color, HeightReference, Rectangle, JulianDate, DistanceDisplayCondition, NearFarScalar, Model, Entity, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, CornerType, ShadowMode, PolygonHierarchy, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, ConstantProperty, Primitive, Cesium3DTileFeature, SceneMode, GeoJsonDataSource, ColorMaterialProperty, Cesium3DTileColorBlendMode, HeadingPitchRange, Ion, Cesium3DTileStyle, KmlDataSource, OrthographicFrustum, EasingFunction, SceneTransforms, EllipsoidTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, CesiumTerrainProvider, Cesium3DTileset, Matrix4, Matrix3, IonResource, CesiumInspector, defined, ClockRange, PolygonPipeline, EllipsoidGeodesic, sampleTerrainMostDetailed, BoundingSphere, GeometryInstance, ScreenSpaceEventHandler, ScreenSpaceEventType, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, CzmlDataSource, Quaternion, Intersect, ConstantPositionProperty } from 'cesium';
+import { Cartographic, Cartesian2, Math as Math$1, Cartesian3, CallbackProperty, Color, HeightReference, Rectangle, JulianDate, DistanceDisplayCondition, NearFarScalar, Model, Entity, HorizontalOrigin, VerticalOrigin, ConstantProperty, ConstantPositionProperty, ClassificationType, ArcType, CornerType, ShadowMode, PolygonHierarchy, PolylineGraphics, ColorMaterialProperty, HeadingPitchRoll, Transforms, ColorBlendMode, Primitive, Cesium3DTileFeature, SceneMode, GeoJsonDataSource, Cesium3DTileColorBlendMode, HeadingPitchRange, Ion, Cesium3DTileStyle, KmlDataSource, SceneTransforms, OrthographicFrustum, EasingFunction, Cesium3DTileset, Matrix4, Matrix3, IonResource, EllipsoidTerrainProvider, CesiumInspector, defined, ClockRange, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, CesiumTerrainProvider, EllipsoidGeodesic, sampleTerrainMostDetailed, PolygonPipeline, BoundingSphere, GeometryInstance, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, ScreenSpaceEventHandler, ScreenSpaceEventType, CzmlDataSource, Quaternion, Intersect } from 'cesium';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -900,6 +900,282 @@ var DrawingUtils;
     DrawingUtils.RaisePos3d = RaisePos3d;
 })(DrawingUtils || (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 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 = 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 Color.lerp(this.startColor, this.color, progress, new 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 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 Math$1.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 = Color.WHITE.clone();
+            }
+        }
+        // Don't animate if the colour is the same.
+        var curColor = getColor(viewer, feature.color);
+        if (curColor && Color.WHITE.equals(curColor)) {
+            curColor = null;
+        }
+        var colorTmp = color == null || 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 = Color.lerp(startColor, color, progress, new 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
@@ -1020,7 +1296,7 @@ function storeColor(viewer, key, color, graphic) {
  * @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) {
@@ -1050,6 +1326,8 @@ function getColor(viewer, key, graphic) {
 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.
@@ -1058,7 +1336,7 @@ function applyOpacity(viewer, opacity, graphic) {
  * @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")) {
@@ -1069,11 +1347,12 @@ function refreshColor(viewer, graphic, opacity) {
     }
     // 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 : Color.WHITE;
+    var color = (_a = getColor$1(viewer, key, graphic)) !== null && _a !== void 0 ? _a : 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) {
@@ -1089,10 +1368,34 @@ function refreshColor(viewer, graphic, opacity) {
             }
         }
         if (graphic instanceof 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 ModelGraphics) {
-            graphic.color = new 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 CallbackProperty) {
+                graphic.color.setCallback(function () { return animateColor_1.GetColor(); }, false);
+            }
+            else {
+                graphic.color = new CallbackProperty(function () { return animateColor_1.GetColor(); }, false);
+            }
         }
         else if (graphic instanceof PolygonGraphics) {
             graphic.material = new ColorMaterialProperty(color);
@@ -1104,10 +1407,34 @@ function refreshColor(viewer, graphic, opacity) {
             graphic.material = new ColorMaterialProperty(color);
         }
         else if (graphic instanceof PointGraphics) {
-            graphic.color = new 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 CallbackProperty) {
+                graphic.color.setCallback(function () { return animateColor_2.GetColor(); }, false);
+            }
+            else {
+                graphic.color = new CallbackProperty(function () { return animateColor_2.GetColor(); }, false);
+            }
         }
         else if (graphic instanceof BillboardGraphics) {
-            graphic.color = new 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 CallbackProperty) {
+                graphic.color.setCallback(function () { return animateColor_3.GetColor(); }, false);
+            }
+            else {
+                graphic.color = new CallbackProperty(function () { return animateColor_3.GetColor(); }, false);
+            }
         }
         else if (graphic instanceof EllipseGraphics) {
             graphic.material = new ColorMaterialProperty(color);
@@ -1208,6 +1535,64 @@ var CesiumEntityStyler;
         }
     }
     CesiumEntityStyler.Refresh = Refresh;
+    function BakeDefaultColor(params) {
+        var viewer = params.viewer, entity = params.entity, override = params.override;
+        if (!entity) {
+            return;
+        }
+        var parts = 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 Cesium3DTileFeature) {
+                var opacity = getAppliedOpacity(part);
+                storeColor(viewer, "default", calculateCurColor(viewer, part), part);
+                refreshColor(viewer, part, opacity);
+            }
+            else if (part instanceof 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.
@@ -2581,7 +2966,6 @@ var EntityUtils;
                                 if (isNaN(roll)) {
                                     roll = 0;
                                 }
-                                console.log(tSettings, entity);
                                 matrix4 = entity.worldPosition;
                                 offset = new Cartesian3(+matrix4[0][3], +matrix4[1][3], +matrix4[2][3]);
                                 if (entity.worldPivot) //the position from worldMatrix + center of geometry offset
@@ -4258,7 +4642,7 @@ var POINT_BILLBOARD_PADDING = 1;
 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.
@@ -4272,7 +4656,7 @@ var createCircleBillboard = function (size, colorCss) {
     context.fillStyle = colorCss;
     context.fill();
     var data = {
-        canvas: canvas,
+        canvasDataUri: canvas.toDataURL("image/png"),
         colorCss: colorCss,
         size: size,
         height: canvasSize,
@@ -4307,7 +4691,7 @@ var createImageBillboard = function (url) {
                         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);
@@ -4425,7 +4809,7 @@ var EntityRenderEngine;
     function Render(params) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         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;
+            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 (_j) {
                 switch (_j.label) {
                     case 0:
@@ -4469,16 +4853,23 @@ var EntityRenderEngine;
                                 displayType = ZoomControl.EDisplayType.Geometry;
                             }
                             if (displayType != 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)) {
+                                    // 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;
+                                    }
                                     if (displayType == ZoomControl.EDisplayType.Model3D) {
                                         models.push(entity);
                                     }
@@ -4498,7 +4889,7 @@ var EntityRenderEngine;
                             }
                         }
                         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();
@@ -4526,7 +4917,7 @@ var EntityRenderEngine;
                                             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: ObjectUtils.UId() }) });
@@ -4595,7 +4986,7 @@ var EntityRenderEngine;
                         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();
@@ -4612,7 +5003,7 @@ var EntityRenderEngine;
                         _j.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();
@@ -4629,7 +5020,7 @@ var EntityRenderEngine;
                         _j.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();
@@ -4693,11 +5084,11 @@ var EntityRenderEngine;
         }
         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;
@@ -4710,6 +5101,27 @@ var EntityRenderEngine;
                             }
                             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 = 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 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 == Style.EPointType.Icon)) return [3 /*break*/, 9];
                             iconUrlRows = style.iconUrl == null ? [] : style.iconUrl;
                             iconUrlRows.forEach(function (row) {
@@ -4726,36 +5138,36 @@ var EntityRenderEngine;
                             api = params.apiGetter.getApi(metadata.accountId);
                             return [4 /*yield*/, api.Loading];
                         case 1:
-                            _c.sent();
+                            _e.sent();
                             iconUrl = 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 = 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, {
@@ -4774,34 +5186,64 @@ var EntityRenderEngine;
                                 disableDepthTest = Boolean(style.renderOnTop);
                                 if (iconScale > 0) {
                                     bColor = style.iconTintColor ? Calculator.GetColor(style.iconTintColor, entity, params.tags) : null;
-                                    cColor = bColor ? colorToCColor(bColor) : undefined;
+                                    cColor_1 = bColor ? colorToCColor(bColor) : undefined;
                                     heightRef = getHeightRef(style);
-                                    cEntity = new Entity({
-                                        id: ObjectUtils.UId(10),
-                                        billboard: {
-                                            horizontalOrigin: HorizontalOrigin.CENTER,
-                                            verticalOrigin: 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: EntityUtils.GetPos({
+                                    if (!params.rendered || !params.rendered.billboard) {
+                                        cEntity = new Entity({
+                                            id: ObjectUtils.UId(10),
+                                            billboard: {
+                                                horizontalOrigin: HorizontalOrigin.CENTER,
+                                                verticalOrigin: VerticalOrigin.BOTTOM,
+                                                image: image.canvasDataUri,
+                                                heightReference: getHeightRef(style),
+                                                scale: iconScale,
+                                                disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined,
+                                                distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
+                                                color: new CallbackProperty(function () { return cColor_1; }, true),
+                                                // Would be great once we have a setting for this.
+                                                // translucencyByDistance: getTranslucencyByDistance(params.minDistance, params.maxDistance),
+                                            },
+                                            position: 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 ConstantProperty(image.canvasDataUri);
+                                        }
+                                        cEntity.billboard.scale = new ConstantProperty(iconScale);
+                                        cEntity.billboard.heightReference = new ConstantProperty(getHeightRef(style));
+                                        cEntity.billboard.disableDepthTestDistance = new ConstantProperty(disableDepthTest ? Number.POSITIVE_INFINITY : undefined);
+                                        cEntity.billboard.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                        cEntity.position = new ConstantPositionProperty(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.
+                                        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 == Style.EPointType.Cylinder) {
                                 radius = EnsureNumber(Calculator.GetNumber(style.CylinderRadius, entity, params.tags));
@@ -4826,46 +5268,97 @@ var EntityRenderEngine;
                                     returnHeightRef: heightRef
                                 });
                                 extrusion = getCylinderExtrusion(entity, params.tags, heightRef, style.CylinderFillExtrusion);
-                                cEntity = new Entity({
-                                    id: ObjectUtils.UId(10),
-                                    ellipse: {
-                                        semiMajorAxis: radius,
-                                        semiMinorAxis: radius,
-                                        material: cFill,
-                                        outlineWidth: null,
-                                        extrudedHeight: extrusion.value,
-                                        heightReference: heightRef,
-                                        extrudedHeightReference: extrusion.exHeightRef,
-                                        height: 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 Entity({
+                                hasOutline = outline && outlineWidth > 0;
+                                if (!params.rendered || !params.rendered.ellipse) {
+                                    cEntity = new Entity({
                                         id: 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: 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 ConstantProperty(radius);
+                                    cEntity.ellipse.semiMinorAxis = new ConstantProperty(radius);
+                                    cEntity.ellipse.outlineWidth = undefined;
+                                    cEntity.ellipse.extrudedHeight = new ConstantProperty(extrusion.value);
+                                    cEntity.ellipse.heightReference = new ConstantProperty(heightRef);
+                                    cEntity.ellipse.extrudedHeightReference = new ConstantProperty(extrusion.exHeightRef);
+                                    cEntity.ellipse.height = new ConstantProperty(Cartographic.fromCartesian(pos3d).height);
+                                    cEntity.ellipse.zIndex = new ConstantProperty(1);
+                                    cEntity.ellipse.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                    cEntity.position = new 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?).
+                                    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 ConstantProperty(radius + outlineWidth);
+                                        outlineEntity.ellipse.semiMinorAxis = new ConstantProperty(radius + outlineWidth);
+                                        outlineEntity.ellipse.extrudedHeight = new ConstantProperty(outlineExtrusion.value);
+                                        outlineEntity.ellipse.heightReference = new ConstantProperty(heightRef);
+                                        outlineEntity.ellipse.extrudedHeightReference = new ConstantProperty(outlineExtrusion.exHeightRef);
+                                        outlineEntity.ellipse.height = new ConstantProperty(Cartographic.fromCartesian(pos3d).height);
+                                        outlineEntity.ellipse.zIndex = new ConstantProperty(2);
+                                        outlineEntity.ellipse.distanceDisplayCondition = new 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?).
+                                        CesiumEntityStyler.SetDefaultColor({
+                                            color: cOutline,
+                                            entity: outlineEntity,
+                                            viewer: params.viewer,
+                                            override: true,
+                                            requestRender: false
+                                        });
+                                        outlineEntity.show = true;
+                                    }
+                                    else {
+                                        outlineEntity = new Entity({
+                                            id: ObjectUtils.UId(10),
+                                            ellipse: {
+                                                semiMajorAxis: radius + outlineWidth,
+                                                semiMinorAxis: radius + outlineWidth,
+                                                material: cOutline,
+                                                outlineWidth: undefined,
+                                                extrudedHeight: outlineExtrusion.value,
+                                                heightReference: heightRef,
+                                                extrudedHeightReference: outlineExtrusion.exHeightRef,
+                                                height: 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) {
@@ -4882,33 +5375,66 @@ var EntityRenderEngine;
                                 heightRef = getHeightRef(style);
                                 circleBillboard = createCircleBillboard(size, cColor.toCssColorString());
                                 disableDepthTest = Boolean(style.renderOnTop);
-                                cEntity = new Entity({
-                                    id: 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: EntityUtils.GetPos({
+                                if (!params.rendered || !params.rendered.billboard) {
+                                    cEntity = new Entity({
+                                        id: 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 CallbackProperty(function () { return undefined; }, true),
+                                            heightReference: heightRef,
+                                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
+                                            disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined
+                                        },
+                                        position: 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 ConstantProperty(circleBillboard.canvasDataUri);
+                                    }
+                                    cEntity.billboard.height = new ConstantProperty(circleBillboard.height);
+                                    cEntity.billboard.width = new ConstantProperty(circleBillboard.width);
+                                    cEntity.billboard.heightReference = new ConstantProperty(heightRef);
+                                    cEntity.billboard.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                    cEntity.billboard.disableDepthTestDistance = new ConstantProperty(disableDepthTest ? Number.POSITIVE_INFINITY : undefined);
+                                    cEntity.position = new ConstantPositionProperty(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.
+                                    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) {
@@ -4921,16 +5447,16 @@ var EntityRenderEngine;
         }
         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];
@@ -4938,13 +5464,13 @@ var EntityRenderEngine;
                             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];
@@ -4953,8 +5479,8 @@ var EntityRenderEngine;
                                     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({
@@ -4965,20 +5491,21 @@ var EntityRenderEngine;
                                     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];
@@ -5063,52 +5590,110 @@ var EntityRenderEngine;
             if (style.drapeOver == "ALL") {
                 classification = ClassificationType.BOTH;
             }
-            var cEntity = new Entity({
-                id: ObjectUtils.UId(10),
-                polyline: units == "px" ? {
-                    positions: posses,
-                    material: cColor,
-                    width: width,
-                    classificationType: classification,
-                    arcType: ArcType.GEODESIC,
-                    zIndex: getZIndex(style, entity, params.tags),
-                    clampToGround: heightRef == 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: CornerType.MITERED,
-                    shadows: ShadowMode.ENABLED,
-                    fill: true
-                } : null,
-                position: EntityUtils.GetPos({
+            var cEntity = null;
+            if (!params.rendered || ((!params.rendered.polyline && units == "px") ||
+                (!params.rendered.corridor && units == "m"))) {
+                cEntity = new Entity({
+                    id: ObjectUtils.UId(10),
+                    polyline: units == "px" ? {
+                        positions: posses,
+                        material: cColor,
+                        width: width,
+                        classificationType: classification,
+                        arcType: ArcType.GEODESIC,
+                        zIndex: getZIndex(style, entity, params.tags),
+                        clampToGround: heightRef == 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: CornerType.MITERED,
+                        shadows: ShadowMode.ENABLED,
+                        fill: true
+                    } : null,
+                    position: 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 = 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 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 ConstantProperty(posses);
+                    cEntity.polyline.width = new ConstantProperty(width);
+                    cEntity.polyline.classificationType = new ConstantProperty(classification);
+                    cEntity.polyline.zIndex = new ConstantProperty(getZIndex(style, entity, params.tags));
+                    cEntity.polyline.clampToGround = new ConstantProperty(heightRef == HeightReference.CLAMP_TO_GROUND);
+                    cEntity.polyline.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                    cEntity.corridor = undefined;
+                }
+                else {
+                    cEntity.corridor.positions = new ConstantProperty(posses);
+                    cEntity.corridor.width = new ConstantProperty(width);
+                    cEntity.corridor.classificationType = new ConstantProperty(classification);
+                    cEntity.corridor.heightReference = new ConstantProperty(heightRef);
+                    cEntity.corridor.zIndex = new ConstantProperty(getZIndex(style, entity, params.tags));
+                    cEntity.corridor.distanceDisplayCondition = new 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?).
+                CesiumEntityStyler.SetDefaultColor({
+                    color: cColor,
+                    entity: cEntity,
+                    viewer: params.viewer,
+                    override: true,
+                    requestRender: false
+                });
+                cEntity.position = new ConstantPositionProperty(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];
@@ -5116,13 +5701,13 @@ var EntityRenderEngine;
                             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];
@@ -5131,8 +5716,8 @@ var EntityRenderEngine;
                                     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({
@@ -5141,16 +5726,17 @@ var EntityRenderEngine;
                                 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];
@@ -5164,7 +5750,7 @@ var EntityRenderEngine;
     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) {
@@ -5221,30 +5807,85 @@ var EntityRenderEngine;
             if (style.drapeOver == "ALL") {
                 classification = ClassificationType.BOTH;
             }
-            var cEntity = new Entity({
-                id: ObjectUtils.UId(10),
-                polygon: {
-                    hierarchy: new PolygonHierarchy(posses, holePosses.map(function (x) { return new PolygonHierarchy(x); })),
-                    material: cFillColor,
-                    extrudedHeight: extrusion.value,
-                    extrudedHeightReference: extrusion.exHeightRef,
-                    shadows: ShadowMode.ENABLED,
-                    heightReference: heightRef,
-                    classificationType: classification,
-                    perPositionHeight: heightRef == HeightReference.CLAMP_TO_GROUND ? false : true,
-                    zIndex: zIndex,
-                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true)
-                },
-                position: 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 = 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 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 Entity({
+                    id: ObjectUtils.UId(10),
+                    polygon: {
+                        hierarchy: new PolygonHierarchy(posses, holePosses.map(function (x) { return new PolygonHierarchy(x); })),
+                        material: cFillColor,
+                        extrudedHeight: extrusion.value,
+                        extrudedHeightReference: extrusion.exHeightRef,
+                        shadows: ShadowMode.ENABLED,
+                        heightReference: heightRef,
+                        classificationType: classification,
+                        perPositionHeight: heightRef == HeightReference.CLAMP_TO_GROUND ? false : true,
+                        zIndex: zIndex,
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true)
+                    },
+                    position: 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 ConstantProperty(new PolygonHierarchy(posses, holePosses.map(function (x) { return new PolygonHierarchy(x); })));
+                cEntity.polygon.extrudedHeight = new ConstantProperty(extrusion.value);
+                cEntity.polygon.extrudedHeightReference = new ConstantProperty(extrusion.exHeightRef);
+                cEntity.polygon.shadows = new ConstantProperty(ShadowMode.ENABLED);
+                cEntity.polygon.heightReference = new ConstantProperty(heightRef);
+                cEntity.polygon.classificationType = new ConstantProperty(classification);
+                cEntity.polygon.perPositionHeight = new ConstantProperty(heightRef == HeightReference.CLAMP_TO_GROUND ? false : true);
+                cEntity.polygon.zIndex = new ConstantProperty(zIndex);
+                cEntity.polygon.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true));
+                cEntity.position = new ConstantPositionProperty(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?).
+                CesiumEntityStyler.SetDefaultColor({
+                    color: cFillColor,
+                    entity: cEntity,
+                    viewer: params.viewer,
+                    override: true,
+                    requestRender: false
+                });
+                cEntity.show = true;
+            }
+            if (hasOutline) {
                 var borderHeight = undefined;
                 if (heightRef != HeightReference.CLAMP_TO_GROUND) {
                     if (flattenPoints) {
@@ -5268,33 +5909,62 @@ var EntityRenderEngine;
                 else {
                     borderPosses = posses.map(function (x) { return x.clone ? x.clone() : __assign({}, x); });
                 }
-                var cEntityBorder = new Entity({
-                    id: ObjectUtils.UId(10),
-                    polyline: units == "px" ? new PolylineGraphics({
-                        positions: borderPosses,
-                        material: cLineColor,
-                        width: width,
-                        clampToGround: heightRef == HeightReference.CLAMP_TO_GROUND,
-                        classificationType: ClassificationType.TERRAIN,
-                        arcType: 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: CornerType.MITERED,
-                        classificationType: classification,
-                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
-                        shadows: 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 Entity({
+                        id: ObjectUtils.UId(10),
+                        polyline: units == "px" ? new PolylineGraphics({
+                            positions: borderPosses,
+                            material: cLineColor,
+                            width: width,
+                            clampToGround: heightRef == HeightReference.CLAMP_TO_GROUND,
+                            classificationType: ClassificationType.TERRAIN,
+                            arcType: 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: CornerType.MITERED,
+                            classificationType: classification,
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
+                            shadows: ShadowMode.ENABLED
+                        } : null,
+                        show: true
+                    });
+                }
+                else {
+                    if (units == "px") {
+                        cEntityBorder.polyline.positions = new ConstantProperty(borderPosses);
+                        cEntityBorder.polyline.width = new ConstantProperty(width);
+                        cEntityBorder.polyline.clampToGround = new ConstantProperty(heightRef == HeightReference.CLAMP_TO_GROUND);
+                        cEntityBorder.polyline.classificationType = new ConstantProperty(ClassificationType.TERRAIN);
+                        cEntityBorder.polyline.zIndex = new ConstantProperty(zIndex);
+                        cEntityBorder.polyline.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                        cEntityBorder.polyline.material = new ColorMaterialProperty(cLineColor);
+                        cEntityBorder.corridor = undefined;
+                    }
+                    else {
+                        cEntityBorder.corridor.positions = new ConstantProperty(borderPosses);
+                        cEntityBorder.corridor.heightReference = new ConstantProperty(heightRef);
+                        cEntityBorder.corridor.height = new ConstantProperty(borderHeight);
+                        cEntityBorder.corridor.width = new ConstantProperty(width);
+                        cEntityBorder.corridor.fill = new ConstantProperty(true);
+                        cEntityBorder.corridor.zIndex = new ConstantProperty(zIndex + 1);
+                        cEntityBorder.corridor.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width));
+                        cEntityBorder.corridor.material = new ColorMaterialProperty(cLineColor);
+                        cEntityBorder.polyline = undefined;
+                    }
+                    cEntityBorder.show = true;
+                }
                 cEntityBorder._parentEntity = cEntity;
                 cEntity._siblingGraphics.push(cEntityBorder);
                 for (var i = 0; i < holePosses.length; i++) {
@@ -5331,20 +6001,23 @@ var EntityRenderEngine;
                     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];
@@ -5352,13 +6025,13 @@ var EntityRenderEngine;
                             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];
@@ -5367,8 +6040,8 @@ var EntityRenderEngine;
                                     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({
@@ -5377,16 +6050,17 @@ var EntityRenderEngine;
                                 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];
@@ -5450,22 +6124,99 @@ var EntityRenderEngine;
                     color = colorToCColor(bColor);
                 }
             }
-            var cEntity = new Entity({
+            /*
+            const cEntity: ICesiumEntityExt = new Cesium.Entity({
                 id: ObjectUtils.UId(10),
                 model: {
                     uri: params.lodUrl,
                     heightReference: heightRef,
                     scale: scale * styleScale,
-                    shadows: ShadowMode.ENABLED,
+                    shadows: Cesium.ShadowMode.ENABLED,
                     colorBlendAmount: blendAmount,
                     colorBlendMode: blendMode,
-                    color: color,
+                    color: new Cesium.CallbackProperty(() => color, true),
                     distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                 },
-                orientation: new ConstantProperty(orientation),
+                orientation: new Cesium.ConstantProperty(orientation),
                 position: pos,
                 show: true
             });
+            */
+            var animateScale = null;
+            var cEntity = params.rendered;
+            if (!cEntity || !cEntity.model) {
+                cEntity = new Entity({
+                    id: ObjectUtils.UId(10),
+                    model: {
+                        uri: params.lodUrl,
+                        heightReference: heightRef,
+                        scale: new CallbackProperty(function () { return scale * styleScale; }, true),
+                        shadows: ShadowMode.ENABLED,
+                        colorBlendAmount: blendAmount,
+                        colorBlendMode: blendMode,
+                        color: new CallbackProperty(function () { return color; }, true),
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                    },
+                    orientation: new ConstantProperty(orientation),
+                    position: pos,
+                    show: true
+                });
+            }
+            else {
+                // Gather entity in case previous version had sibling graphics we no longer need.
+                var parts = 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 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 ConstantProperty(params.lodUrl);
+                }
+                cEntity.model.heightReference = new ConstantProperty(heightRef);
+                cEntity.model.shadows = new ConstantProperty(ShadowMode.ENABLED);
+                cEntity.model.colorBlendAmount = new ConstantProperty(blendAmount);
+                cEntity.model.colorBlendMode = new ConstantProperty(blendMode);
+                cEntity.model.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                cEntity.orientation = new ConstantProperty(orientation);
+                cEntity.position = new 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 CallbackProperty(function () { return animateScale.GetValue(); }, false);
+                }
+                else {
+                    cEntity.model.scale = new 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);
+                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) {
@@ -5544,6 +6295,10 @@ var EntityRenderEngine;
                         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;
@@ -5556,16 +6311,16 @@ var EntityRenderEngine;
         }
         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,
@@ -5573,7 +6328,7 @@ var EntityRenderEngine;
                                 "Items": []
                             };
                             i = 0;
-                            _g.label = 2;
+                            _h.label = 2;
                         case 2:
                             if (!(i < params.entities.length)) return [3 /*break*/, 9];
                             entity = params.entities[i];
@@ -5581,13 +6336,13 @@ var EntityRenderEngine;
                             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];
@@ -5596,8 +6351,8 @@ var EntityRenderEngine;
                                     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 ? Calculator.GetString(mStyle.lodGroup, entity, tags) : null;
@@ -5618,7 +6373,7 @@ var EntityRenderEngine;
                                 "group": group,
                                 "level": level
                             });
-                            _g.label = 8;
+                            _h.label = 8;
                         case 8:
                             i++;
                             return [3 /*break*/, 2];
@@ -5627,24 +6382,24 @@ var EntityRenderEngine;
                                 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];
@@ -5653,8 +6408,8 @@ var EntityRenderEngine;
                                                     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)) {
@@ -5662,6 +6417,7 @@ var EntityRenderEngine;
                                             }
                                             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,
@@ -5678,23 +6434,23 @@ var EntityRenderEngine;
                                             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];
@@ -11799,6 +12555,16 @@ var TilesetRenderEngine;
         };
         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;
+                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);
@@ -22579,7 +23345,7 @@ var ViewRenderEngine;
     ViewRenderEngine.Render = Render;
 })(ViewRenderEngine || (ViewRenderEngine = {}));
 
-var VERSION = "3.7.2";
+var VERSION = "3.7.4";
 
 export { VERSION, CesiumViewMonitor, ViewerUtils, MenuItemManager, EntityRenderEngine, MenuItemCreator, VisualsRegister, RenderManager, EntitiesIdsRenderManager, EntitiesLoadedRenderManager, EntitiesRenderManager, EntityRenderManager, TilesetCadRenderManager, TilesetArbRenderManager, TilesetEntitiesRenderManager, TilesetOsmRenderManager, TilesetPointcloudRenderManager, TilesetGooglePhotosRenderManager, DataSourceStaticKmlManager, RelationsRenderManager, SharedGetters, CesiumParabola, EntityLabel, ViewRenderEngine, TileRenderEngine, TilesetRenderEngine, CESIUM_INSPECTOR_KEY, CESIUM_TIMELINE_KEY, ViewUtils, DrawingUtils, MeasureUtils, EntityUtils, CesiumEntityStyler, Draw3dPolygon, Draw3dPolyline };
 //# sourceMappingURL=bruce-cesium.es5.js.map