bruce-cesium 3.8.2 → 3.8.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 { 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, EntityHistoricData, 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, ConstantProperty, ConstantPositionProperty, ClassificationType, ArcType, CornerType, ShadowMode, PolygonHierarchy, PolylineGraphics, ColorMaterialProperty, ColorBlendMode, HeadingPitchRoll, Transforms, Primitive, Cesium3DTileFeature, SceneMode, GeoJsonDataSource, Cesium3DTileColorBlendMode, HeadingPitchRange, Ion, Cesium3DTileStyle, KmlDataSource, SceneTransforms, OrthographicFrustum, EasingFunction, EllipsoidTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, CesiumTerrainProvider, Cesium3DTileset, Matrix4, Matrix3, IonResource, CesiumInspector, defined, ClockRange, EllipsoidGeodesic, sampleTerrainMostDetailed, PolygonPipeline, BoundingSphere, GeometryInstance, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, ScreenSpaceEventHandler, ScreenSpaceEventType, CzmlDataSource, Quaternion, Intersect } 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, ColorBlendMode, HeadingPitchRoll, Transforms, SceneMode, Primitive, Cesium3DTileFeature, GeoJsonDataSource, HeadingPitchRange, Cesium3DTileColorBlendMode, Ion, Cesium3DTileStyle, KmlDataSource, SceneTransforms, OrthographicFrustum, EasingFunction, EllipsoidTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, CesiumTerrainProvider, CesiumInspector, defined, ClockRange, Cesium3DTileset, Matrix4, Matrix3, IonResource, EllipsoidGeodesic, sampleTerrainMostDetailed, PolygonPipeline, BoundingSphere, GeometryInstance, ScreenSpaceEventHandler, ScreenSpaceEventType, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, CzmlDataSource, Quaternion, Intersect } from 'cesium';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -1011,6 +1011,11 @@ var CesiumAnimatedProperty;
             }
             this.startTime = new Date();
         }
+        AnimateColor.prototype.IsDone = function () {
+            var now = new Date();
+            var elapsedMs = now.getTime() - this.startTime.getTime();
+            return elapsedMs >= this.durationMs;
+        };
         /**
          * Returns the calculated color at the provided time.
          * @returns
@@ -1107,7 +1112,7 @@ var CesiumAnimatedProperty;
      * @returns
      */
     function AnimateTFeatureColor(params) {
-        var viewer = params.viewer, feature = params.feature, color = params.targetColor, startColor = params.startColor, durationMs = params.durationMs;
+        var viewer = params.viewer, feature = params.feature, color = params.targetColor, startColor = params.startColor, durationMs = params.durationMs, onDone = params.onDone;
         ClearTFeatureColorAnimation(feature);
         if (!startColor) {
             if (feature.color) {
@@ -1148,6 +1153,7 @@ var CesiumAnimatedProperty;
             if (!assertColorMark(mark, feature.color)) {
                 removal === null || removal === void 0 ? void 0 : removal();
                 removal = null;
+                onDone === null || onDone === void 0 ? void 0 : onDone();
                 return;
             }
             var now = new Date();
@@ -1157,6 +1163,7 @@ var CesiumAnimatedProperty;
                 feature.color = color;
                 removal === null || removal === void 0 ? void 0 : removal();
                 removal = null;
+                onDone === null || onDone === void 0 ? void 0 : onDone();
                 return;
             }
             try {
@@ -1257,6 +1264,69 @@ var CesiumAnimatedProperty;
         return AnimateHeading;
     }());
     CesiumAnimatedProperty.AnimateHeading = AnimateHeading;
+    /**
+     * Animates a position from a set of provided positions in time.
+     * This will return a position across the provided positions based on the current time.
+     * If the time exceeds the duration, the last position will be returned.
+     * If the time proceeds the first position, the first position will be returned.
+     */
+    var AnimatePositionSeries = /** @class */ (function () {
+        function AnimatePositionSeries(params) {
+            this.cachedCalc = null;
+            this.cachedTime = null;
+            this.viewer = params.viewer;
+            this.positions = params.posses;
+            // Order positions by date.
+            this.positions.sort(function (a, b) {
+                return a.dateTime.getTime() - b.dateTime.getTime();
+            });
+        }
+        AnimatePositionSeries.prototype.GetValue = function () {
+            var _this = this;
+            var now = this.viewer.scene.lastRenderTime;
+            if (!now) {
+                now = this.viewer.clock.currentTime;
+            }
+            var nowTime = JulianDate.toDate(now);
+            if (this.cachedTime == nowTime.getTime()) {
+                return this.cachedCalc;
+            }
+            var calculate = function () {
+                // See if we're before the first position.
+                if (nowTime.getTime() <= _this.positions[0].dateTime.getTime()) {
+                    return _this.positions[0].pos3d;
+                }
+                // See if we're after the last position.
+                if (nowTime.getTime() >= _this.positions[_this.positions.length - 1].dateTime.getTime()) {
+                    return _this.positions[_this.positions.length - 1].pos3d;
+                }
+                // Find the current position.
+                var lastIndex = 0;
+                for (var i = 1; i < _this.positions.length; i++) {
+                    var pos = _this.positions[i];
+                    if (nowTime.getTime() >= pos.dateTime.getTime()) {
+                        lastIndex = i;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                var last = _this.positions[lastIndex];
+                // Interpolate the position.
+                var next = _this.positions[lastIndex + 1];
+                if (!next) {
+                    return last.pos3d;
+                }
+                var progress = (nowTime.getTime() - last.dateTime.getTime()) / (next.dateTime.getTime() - last.dateTime.getTime());
+                return Cartesian3.lerp(last.pos3d, next.pos3d, progress, new Cartesian3());
+            };
+            this.cachedTime = nowTime.getTime();
+            this.cachedCalc = calculate();
+            return this.cachedCalc;
+        };
+        return AnimatePositionSeries;
+    }());
+    CesiumAnimatedProperty.AnimatePositionSeries = AnimatePositionSeries;
 })(CesiumAnimatedProperty || (CesiumAnimatedProperty = {}));
 
 /**
@@ -1618,10 +1688,32 @@ var CesiumEntityStyler;
     }
     CesiumEntityStyler.Refresh = Refresh;
     function BakeDefaultColor(params) {
-        var viewer = params.viewer, entity = params.entity, override = params.override;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var viewer = params.viewer, entity = params.entity, override = params.override, colors = params.colors, refresh = params.refresh;
         if (!entity) {
             return;
         }
+        if (refresh == null) {
+            refresh = true;
+        }
+        var colorMap;
+        if (colors) {
+            if (!(colors instanceof Map)) {
+                var keys = Object.keys(colors);
+                var map = new Map();
+                for (var i = 0; i < keys.length; i++) {
+                    var key = keys[i];
+                    map.set(key, colors[key]);
+                }
+                colorMap = map;
+            }
+            else {
+                colorMap = colors;
+            }
+        }
+        else {
+            colorMap = new Map();
+        }
         var parts = EntityUtils.GatherEntity({
             entity: entity
         });
@@ -1639,37 +1731,61 @@ var CesiumEntityStyler;
             }
             if (part instanceof Cesium3DTileFeature) {
                 var opacity = getAppliedOpacity(part);
-                storeColor("default", calculateCurColor(viewer, part), part);
-                refreshColor(viewer, part, opacity);
+                var color = (_a = colorMap.get("feature")) !== null && _a !== void 0 ? _a : calculateCurColor(viewer, part);
+                storeColor("default", color, part);
+                if (refresh) {
+                    refreshColor(viewer, part, opacity);
+                }
             }
             else if (part instanceof Entity) {
                 if (part.billboard) {
-                    storeColor("default", calculateCurColor(viewer, part.billboard), part.billboard);
-                    refreshColor(viewer, part.billboard, getAppliedOpacity(part.billboard));
+                    var color = (_b = colorMap.get("billboard")) !== null && _b !== void 0 ? _b : calculateCurColor(viewer, part.billboard);
+                    storeColor("default", color, part.billboard);
+                    if (refresh) {
+                        refreshColor(viewer, part.billboard, getAppliedOpacity(part.billboard));
+                    }
                 }
                 if (part.model) {
-                    storeColor("default", calculateCurColor(viewer, part.model), part.model);
-                    refreshColor(viewer, part.model, getAppliedOpacity(part.model));
+                    var color = (_c = colorMap.get("model")) !== null && _c !== void 0 ? _c : calculateCurColor(viewer, part.model);
+                    storeColor("default", color, part.model);
+                    if (refresh) {
+                        refreshColor(viewer, part.model, getAppliedOpacity(part.model));
+                    }
                 }
                 if (part.polyline) {
-                    storeColor("default", calculateCurColor(viewer, part.polyline), part.polyline);
-                    refreshColor(viewer, part.polyline, getAppliedOpacity(part.polyline));
+                    var color = (_d = colorMap.get("polyline")) !== null && _d !== void 0 ? _d : calculateCurColor(viewer, part.polyline);
+                    storeColor("default", color, part.polyline);
+                    if (refresh) {
+                        refreshColor(viewer, part.polyline, getAppliedOpacity(part.polyline));
+                    }
                 }
                 if (part.polygon) {
-                    storeColor("default", calculateCurColor(viewer, part.polygon), part.polygon);
-                    refreshColor(viewer, part.polygon, getAppliedOpacity(part.polygon));
+                    var color = (_e = colorMap.get("polygon")) !== null && _e !== void 0 ? _e : calculateCurColor(viewer, part.polygon);
+                    storeColor("default", color, part.polygon);
+                    if (refresh) {
+                        refreshColor(viewer, part.polygon, getAppliedOpacity(part.polygon));
+                    }
                 }
                 if (part.corridor) {
-                    storeColor("default", calculateCurColor(viewer, part.corridor), part.corridor);
-                    refreshColor(viewer, part.corridor, getAppliedOpacity(part.corridor));
+                    var color = (_f = colorMap.get("corridor")) !== null && _f !== void 0 ? _f : calculateCurColor(viewer, part.corridor);
+                    storeColor("default", color, part.corridor);
+                    if (refresh) {
+                        refreshColor(viewer, part.corridor, getAppliedOpacity(part.corridor));
+                    }
                 }
                 if (part.point) {
-                    storeColor("default", calculateCurColor(viewer, part.point), part.point);
-                    refreshColor(viewer, part.point, getAppliedOpacity(part.point));
+                    var color = (_g = colorMap.get("point")) !== null && _g !== void 0 ? _g : calculateCurColor(viewer, part.point);
+                    storeColor("default", color, part.point);
+                    if (refresh) {
+                        refreshColor(viewer, part.point, getAppliedOpacity(part.point));
+                    }
                 }
                 if (part.ellipse) {
-                    storeColor("default", calculateCurColor(viewer, part.ellipse), part.ellipse);
-                    refreshColor(viewer, part.ellipse, getAppliedOpacity(part.ellipse));
+                    var color = (_h = colorMap.get("ellipse")) !== null && _h !== void 0 ? _h : calculateCurColor(viewer, part.ellipse);
+                    storeColor("default", color, part.ellipse);
+                    if (refresh) {
+                        refreshColor(viewer, part.ellipse, getAppliedOpacity(part.ellipse));
+                    }
                 }
             }
         }
@@ -4889,6 +5005,27 @@ function extractMetadataFromFileUrl(url) {
         envId: envId
     };
 }
+function getSeriesPossesForHistoricEntity(viewer, heightRef, historic) {
+    var series = [];
+    for (var i = 0; i < historic.length; i++) {
+        var item = historic[i];
+        var pos3d = EntityUtils.GetPos({
+            entity: item.data,
+            viewer: viewer,
+            recordHeightRef: heightRef,
+            returnHeightRef: heightRef
+        });
+        var dateTime = new Date(item.dateTime);
+        if (!dateTime || !pos3d || isNaN(pos3d.x) || isNaN(pos3d.y) || isNaN(pos3d.z)) {
+            continue;
+        }
+        series.push({
+            dateTime: dateTime,
+            pos3d: pos3d
+        });
+    }
+    return series;
+}
 var EntityRenderEngine;
 (function (EntityRenderEngine) {
     function Render(params) {
@@ -4984,7 +5121,7 @@ var EntityRenderEngine;
                             }
                         }
                         if (!(models.length > 0)) return [3 /*break*/, 2];
-                        mParams = __assign(__assign({}, groupRenderParams), { rendered: cEntities, entities: models });
+                        mParams = __assign(__assign({}, groupRenderParams), { rendered: cEntities, entities: models, entitiesHistoric: params.entitiesHistoric });
                         return [4 /*yield*/, Model3d.RenderGroup(mParams)];
                     case 1:
                         mEntities = _m.sent();
@@ -5013,6 +5150,7 @@ var EntityRenderEngine;
                                             return [2 /*return*/, "continue"];
                                         }
                                         pParams = __assign(__assign({}, groupRenderParams), { entities: [], rendered: cEntities });
+                                        pParams.entitiesHistoric = params.entitiesHistoric;
                                         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() }) });
@@ -5115,7 +5253,7 @@ var EntityRenderEngine;
                         _m.label = 10;
                     case 10:
                         if (!(points.length > 0)) return [3 /*break*/, 12];
-                        pParams = __assign(__assign({}, groupRenderParams), { entities: points, rendered: cEntities });
+                        pParams = __assign(__assign({}, groupRenderParams), { entities: points, rendered: cEntities, entitiesHistoric: params.entitiesHistoric });
                         return [4 /*yield*/, Point.RenderGroup(pParams)];
                     case 11:
                         pEntities = _m.sent();
@@ -5184,11 +5322,14 @@ var EntityRenderEngine;
         function Render(params) {
             var _a, _b, _c, _d;
             return __awaiter(this, void 0, void 0, function () {
-                var entity, style, type, cEntity, siblings, prepareExistingGraphic, iconUrlRows, icon, iconUrl, metadata, api, image, e_5, iconScale, disableDepthTest, bColor, cColor_1, heightRef_1, currentImgKey, pos3d, prevPos3d, animatePosition_1, radius, bFill, cFill, outline, cOutline, outlineWidth, bOutline, heightRef, pos3d, extrusion, hasOutline, outlineExtrusion, outlineEntity, bColor, cColor, size, heightRef_2, circleBillboard, disableDepthTest, imgKey, currentImgKey, pos3d, prevPos3d, animatePosition_2;
+                var entity, style, type, cEntity, siblings, prepareExistingGraphic, iconUrlRows, icon, iconUrl, metadata, api, image, e_5, iconScale, disableDepthTest, bColor, cColor, heightRef_1, animateColorIn_1, position, series, animatePosition_1, currentImgKey, series, animatePosition_2, pos3d, prevPos3d, animatePosition_3, radius, bFill, cFill, outline, cOutline, outlineWidth, bOutline, heightRef, pos3d, extrusion, hasOutline, outlineExtrusion, outlineEntity, bColor, cColor, size, heightRef_2, circleBillboard, disableDepthTest, animateColorIn_2, position, series, animatePosition_4, imgKey, currentImgKey, series, animatePosition_5, pos3d, prevPos3d, animatePosition_6;
                 return __generator(this, function (_e) {
                     switch (_e.label) {
                         case 0:
                             entity = params.entity;
+                            if (!params.entityHistoric) {
+                                params.entityHistoric = [];
+                            }
                             style = params.style;
                             type = style.Type;
                             if (type == null) {
@@ -5284,9 +5425,32 @@ var EntityRenderEngine;
                                 disableDepthTest = Boolean(style.renderOnTop);
                                 if (iconScale > 0) {
                                     bColor = style.iconTintColor ? Calculator.GetColor(style.iconTintColor, entity, params.tags) : null;
-                                    cColor_1 = bColor ? colorToCColor(bColor) : undefined;
+                                    cColor = bColor ? colorToCColor(bColor) : Color.WHITE.clone();
                                     heightRef_1 = getHeightRef(style);
                                     if (!params.rendered || !params.rendered.billboard) {
+                                        animateColorIn_1 = new CesiumAnimatedProperty.AnimateColor({
+                                            durationMs: 200,
+                                            targetColor: cColor,
+                                            startColor: cColor.withAlpha(0),
+                                            viewer: params.viewer
+                                        });
+                                        position = null;
+                                        series = getSeriesPossesForHistoricEntity(params.viewer, heightRef_1, params.entityHistoric);
+                                        if (series.length > 1) {
+                                            animatePosition_1 = new CesiumAnimatedProperty.AnimatePositionSeries({
+                                                posses: series,
+                                                viewer: params.viewer
+                                            });
+                                            position = new CallbackProperty(function () { return animatePosition_1.GetValue(); }, false);
+                                        }
+                                        else {
+                                            position = new CallbackProperty(function () { return EntityUtils.GetPos({
+                                                viewer: params.viewer,
+                                                entity: entity,
+                                                recordHeightRef: heightRef_1,
+                                                returnHeightRef: heightRef_1
+                                            }); }, true);
+                                        }
                                         cEntity = new Entity({
                                             id: ObjectUtils.UId(10),
                                             billboard: {
@@ -5297,18 +5461,27 @@ var EntityRenderEngine;
                                                 scale: iconScale,
                                                 disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined,
                                                 distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
-                                                color: new CallbackProperty(function () { return cColor_1; }, true),
+                                                color: new CallbackProperty(function () {
+                                                    var color = animateColorIn_1.GetColor();
+                                                    if (animateColorIn_1.IsDone() && (cEntity === null || cEntity === void 0 ? void 0 : cEntity.billboard)) {
+                                                        cEntity.billboard.color = new CallbackProperty(function () { return color; }, true);
+                                                    }
+                                                    return color;
+                                                }, false),
                                                 // Would be great once we have a setting for this.
                                                 // translucencyByDistance: getTranslucencyByDistance(params.minDistance, params.maxDistance),
                                             },
-                                            position: new CallbackProperty(function () { return EntityUtils.GetPos({
-                                                viewer: params.viewer,
-                                                entity: entity,
-                                                recordHeightRef: heightRef_1,
-                                                returnHeightRef: heightRef_1
-                                            }); }, true),
+                                            position: position,
                                             show: true
                                         });
+                                        CesiumEntityStyler.BakeDefaultColor({
+                                            entity: cEntity,
+                                            colors: {
+                                                "billboard": cColor
+                                            },
+                                            viewer: params.viewer,
+                                            refresh: false
+                                        });
                                     }
                                     else {
                                         prepareExistingGraphic(params.rendered);
@@ -5321,25 +5494,35 @@ var EntityRenderEngine;
                                         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));
-                                        pos3d = EntityUtils.GetPos({
-                                            viewer: params.viewer,
-                                            entity: entity,
-                                            recordHeightRef: heightRef_1,
-                                            returnHeightRef: heightRef_1
-                                        });
-                                        prevPos3d = getValue$1(params.viewer, cEntity.position);
-                                        if (!prevPos3d || !Cartesian3.equals(prevPos3d, pos3d)) {
-                                            animatePosition_1 = new CesiumAnimatedProperty.AnimatePosition({
-                                                durationMs: 200,
-                                                targetPos3d: pos3d,
+                                        series = getSeriesPossesForHistoricEntity(params.viewer, heightRef_1, params.entityHistoric);
+                                        if (series.length > 1) {
+                                            animatePosition_2 = new CesiumAnimatedProperty.AnimatePositionSeries({
+                                                posses: series,
+                                                viewer: params.viewer
+                                            });
+                                            cEntity.position = new CallbackProperty(function () { return animatePosition_2.GetValue(); }, false);
+                                        }
+                                        else {
+                                            pos3d = EntityUtils.GetPos({
                                                 viewer: params.viewer,
-                                                startPos3d: prevPos3d
+                                                entity: entity,
+                                                recordHeightRef: heightRef_1,
+                                                returnHeightRef: heightRef_1
                                             });
-                                            cEntity.position = new CallbackProperty(function () { return animatePosition_1.GetValue(); }, false);
+                                            prevPos3d = getValue$1(params.viewer, cEntity.position);
+                                            if (!prevPos3d || !Cartesian3.equals(prevPos3d, pos3d)) {
+                                                animatePosition_3 = new CesiumAnimatedProperty.AnimatePosition({
+                                                    durationMs: 200,
+                                                    targetPos3d: pos3d,
+                                                    viewer: params.viewer,
+                                                    startPos3d: prevPos3d
+                                                });
+                                                cEntity.position = new CallbackProperty(function () { return animatePosition_3.GetValue(); }, false);
+                                            }
                                         }
                                         // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
                                         CesiumEntityStyler.SetDefaultColor({
-                                            color: cColor_1 ? cColor_1 : new Color(),
+                                            color: cColor ? cColor : new Color(),
                                             entity: cEntity,
                                             viewer: params.viewer,
                                             override: true,
@@ -5484,6 +5667,29 @@ var EntityRenderEngine;
                                 circleBillboard = createCircleBillboard(size, cColor.toCssColorString());
                                 disableDepthTest = Boolean(style.renderOnTop);
                                 if (!params.rendered || !params.rendered.billboard) {
+                                    animateColorIn_2 = new CesiumAnimatedProperty.AnimateColor({
+                                        durationMs: 200,
+                                        targetColor: cColor,
+                                        startColor: cColor.withAlpha(0),
+                                        viewer: params.viewer
+                                    });
+                                    position = null;
+                                    series = getSeriesPossesForHistoricEntity(params.viewer, heightRef_2, params.entityHistoric);
+                                    if (series.length > 1) {
+                                        animatePosition_4 = new CesiumAnimatedProperty.AnimatePositionSeries({
+                                            posses: series,
+                                            viewer: params.viewer
+                                        });
+                                        position = new CallbackProperty(function () { return animatePosition_4.GetValue(); }, false);
+                                    }
+                                    else {
+                                        position = new CallbackProperty(function () { return EntityUtils.GetPos({
+                                            viewer: params.viewer,
+                                            entity: entity,
+                                            recordHeightRef: heightRef_2,
+                                            returnHeightRef: heightRef_2
+                                        }); }, true);
+                                    }
                                     cEntity = new Entity({
                                         id: ObjectUtils.UId(10),
                                         // point: {
@@ -5499,19 +5705,28 @@ var EntityRenderEngine;
                                             height: circleBillboard.height,
                                             width: circleBillboard.width,
                                             image: circleBillboard.canvasDataUri,
-                                            color: new CallbackProperty(function () { return undefined; }, true),
+                                            color: new CallbackProperty(function () {
+                                                var color = animateColorIn_2.GetColor();
+                                                if (animateColorIn_2.IsDone() && (cEntity === null || cEntity === void 0 ? void 0 : cEntity.billboard)) {
+                                                    cEntity.billboard.color = new CallbackProperty(function () { return color; }, true);
+                                                }
+                                                return color;
+                                            }, false),
                                             heightReference: heightRef_2,
                                             distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
                                             disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined
                                         },
-                                        position: new CallbackProperty(function () { return EntityUtils.GetPos({
-                                            viewer: params.viewer,
-                                            entity: entity,
-                                            recordHeightRef: heightRef_2,
-                                            returnHeightRef: heightRef_2
-                                        }); }, true),
+                                        position: position,
                                         show: true
                                     });
+                                    CesiumEntityStyler.BakeDefaultColor({
+                                        entity: cEntity,
+                                        viewer: params.viewer,
+                                        colors: {
+                                            "billboard": cColor
+                                        },
+                                        refresh: false
+                                    });
                                 }
                                 else {
                                     prepareExistingGraphic(params.rendered);
@@ -5526,21 +5741,31 @@ var EntityRenderEngine;
                                     cEntity.billboard.heightReference = new ConstantProperty(heightRef_2);
                                     cEntity.billboard.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
                                     cEntity.billboard.disableDepthTestDistance = new ConstantProperty(disableDepthTest ? Number.POSITIVE_INFINITY : undefined);
-                                    pos3d = EntityUtils.GetPos({
-                                        viewer: params.viewer,
-                                        entity: entity,
-                                        recordHeightRef: heightRef_2,
-                                        returnHeightRef: heightRef_2
-                                    });
-                                    prevPos3d = getValue$1(params.viewer, cEntity.position);
-                                    if (!prevPos3d || !Cartesian3.equals(prevPos3d, pos3d)) {
-                                        animatePosition_2 = new CesiumAnimatedProperty.AnimatePosition({
-                                            durationMs: 200,
-                                            targetPos3d: pos3d,
+                                    series = getSeriesPossesForHistoricEntity(params.viewer, heightRef_2, params.entityHistoric);
+                                    if (series.length > 1) {
+                                        animatePosition_5 = new CesiumAnimatedProperty.AnimatePositionSeries({
+                                            posses: series,
+                                            viewer: params.viewer
+                                        });
+                                        cEntity.position = new CallbackProperty(function () { return animatePosition_5.GetValue(); }, false);
+                                    }
+                                    else {
+                                        pos3d = EntityUtils.GetPos({
                                             viewer: params.viewer,
-                                            startPos3d: prevPos3d
+                                            entity: entity,
+                                            recordHeightRef: heightRef_2,
+                                            returnHeightRef: heightRef_2
                                         });
-                                        cEntity.position = new CallbackProperty(function () { return animatePosition_2.GetValue(); }, false);
+                                        prevPos3d = getValue$1(params.viewer, cEntity.position);
+                                        if (!prevPos3d || !Cartesian3.equals(prevPos3d, pos3d)) {
+                                            animatePosition_6 = new CesiumAnimatedProperty.AnimatePosition({
+                                                durationMs: 200,
+                                                targetPos3d: pos3d,
+                                                viewer: params.viewer,
+                                                startPos3d: prevPos3d
+                                            });
+                                            cEntity.position = new CallbackProperty(function () { return animatePosition_6.GetValue(); }, false);
+                                        }
                                     }
                                     // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
                                     CesiumEntityStyler.SetDefaultColor({
@@ -5565,16 +5790,16 @@ var EntityRenderEngine;
         }
         Point.Render = Render;
         function RenderGroup(params) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             return __awaiter(this, void 0, void 0, function () {
-                var api, cEntities, i, entity, zoomItem, style, _e, tagIds, tags, pStyle, cEntity, name_2;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                var api, cEntities, i, entity, zoomItem, style, _f, tagIds, tags, pStyle, cEntity, name_2;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
                             api = params.apiGetter.getApi();
                             cEntities = new Map();
                             i = 0;
-                            _f.label = 1;
+                            _g.label = 1;
                         case 1:
                             if (!(i < params.entities.length)) return [3 /*break*/, 11];
                             entity = params.entities[i];
@@ -5582,13 +5807,13 @@ var EntityRenderEngine;
                             if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 3];
                             return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                         case 2:
-                            _e = (_a = (_f.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
+                            _f = (_a = (_g.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
                             return [3 /*break*/, 4];
                         case 3:
-                            _e = zoomItem.Style;
-                            _f.label = 4;
+                            _f = zoomItem.Style;
+                            _g.label = 4;
                         case 4:
-                            style = _e;
+                            style = _f;
                             tagIds = entity.Bruce["Layer.ID"];
                             tags = [];
                             if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 6];
@@ -5597,8 +5822,8 @@ var EntityRenderEngine;
                                     tagIds: tagIds
                                 })];
                         case 5:
-                            tags = (_f.sent()).tags;
-                            _f.label = 6;
+                            tags = (_g.sent()).tags;
+                            _g.label = 6;
                         case 6:
                             pStyle = (_b = style === null || style === void 0 ? void 0 : style.pointStyle) !== null && _b !== void 0 ? _b : {};
                             return [4 /*yield*/, Render({
@@ -5610,20 +5835,21 @@ var EntityRenderEngine;
                                     apiGetter: params.apiGetter,
                                     maxDistance: zoomItem.MaxZoom,
                                     minDistance: zoomItem.MinZoom,
-                                    rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c.get(entity.Bruce.ID)
+                                    rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c.get(entity.Bruce.ID),
+                                    entityHistoric: (_d = params.entitiesHistoric) === null || _d === void 0 ? void 0 : _d[entity.Bruce.ID]
                                 })];
                         case 7:
-                            cEntity = _f.sent();
+                            cEntity = _g.sent();
                             if (!cEntity) return [3 /*break*/, 9];
                             return [4 /*yield*/, getName(api, entity)];
                         case 8:
-                            name_2 = _f.sent();
+                            name_2 = _g.sent();
                             cEntity.name = name_2;
-                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_d = params.viewer) === null || _d === void 0 ? void 0 : _d.terrainProvider);
-                            _f.label = 9;
+                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_e = params.viewer) === null || _e === void 0 ? void 0 : _e.terrainProvider);
+                            _g.label = 9;
                         case 9:
                             cEntities.set(entity.Bruce.ID, cEntity);
-                            _f.label = 10;
+                            _g.label = 10;
                         case 10:
                             i++;
                             return [3 /*break*/, 1];
@@ -6194,6 +6420,9 @@ var EntityRenderEngine;
         function Render(params) {
             var _this = this;
             var entity = params.entity;
+            if (!params.entityHistoric) {
+                params.entityHistoric = [];
+            }
             var transform = entity === null || entity === void 0 ? void 0 : entity.transform;
             var heading = EnsureNumber(transform === null || transform === void 0 ? void 0 : transform.heading);
             heading = (heading + 90) % 360;
@@ -6240,29 +6469,38 @@ var EntityRenderEngine;
                     color = colorToCColor(bColor);
                 }
             }
-            /*
-            const cEntity: ICesiumEntityExt = new Cesium.Entity({
-                id: ObjectUtils.UId(10),
-                model: {
-                    uri: params.lodUrl,
-                    heightReference: heightRef,
-                    scale: scale * styleScale,
-                    shadows: Cesium.ShadowMode.ENABLED,
-                    colorBlendAmount: blendAmount,
-                    colorBlendMode: blendMode,
-                    color: new Cesium.CallbackProperty(() => color, true),
-                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                },
-                orientation: new Cesium.ConstantProperty(orientation),
-                position: pos,
-                show: true
-            });
-            */
             var animateScale = null;
             var cEntity = params.rendered;
             if (!cEntity || !cEntity.model) {
                 var hpr = new HeadingPitchRoll(Math$1.toRadians(heading), Math$1.toRadians(pitch), Math$1.toRadians(roll));
                 var orientation_1 = Transforms.headingPitchRollQuaternion(pos3d, hpr);
+                if (!color) {
+                    color = Color.WHITE.clone();
+                }
+                var animateColor_1 = new CesiumAnimatedProperty.AnimateColor({
+                    durationMs: 1500,
+                    targetColor: color,
+                    startColor: color.clone().withAlpha(0.001),
+                    viewer: params.viewer
+                });
+                var position = null;
+                // If we have a series of time-based positions then we'll animate as time changes.
+                var series = getSeriesPossesForHistoricEntity(params.viewer, heightRef, params.entityHistoric);
+                if (series.length > 1) {
+                    var animatePosition_7 = new CesiumAnimatedProperty.AnimatePositionSeries({
+                        posses: series,
+                        viewer: params.viewer
+                    });
+                    position = new CallbackProperty(function () { return animatePosition_7.GetValue(); }, false);
+                }
+                else {
+                    position = new CallbackProperty(function () { return EntityUtils.GetPos({
+                        viewer: params.viewer,
+                        entity: entity,
+                        recordHeightRef: heightRef,
+                        returnHeightRef: heightRef
+                    }); }, true);
+                }
                 cEntity = new Entity({
                     id: ObjectUtils.UId(10),
                     model: {
@@ -6272,17 +6510,27 @@ var EntityRenderEngine;
                         shadows: ShadowMode.ENABLED,
                         colorBlendAmount: blendAmount,
                         colorBlendMode: blendMode,
-                        color: new CallbackProperty(function () { return color; }, true),
+                        color: new CallbackProperty(function () {
+                            var color = animateColor_1.GetColor();
+                            if (animateColor_1.IsDone() && (cEntity === null || cEntity === void 0 ? void 0 : cEntity.model)) {
+                                cEntity.model.color = new CallbackProperty(function () { return color; }, true);
+                            }
+                            return color;
+                        }, false),
                         distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                     },
                     orientation: new CallbackProperty(function () { return orientation_1; }, true),
-                    position: new CallbackProperty(function () { return pos3d; }, true),
+                    position: position,
                     show: true
                 });
                 CesiumEntityStyler.BakeDefaultColor({
                     entity: cEntity,
                     viewer: params.viewer,
-                    override: true
+                    override: true,
+                    colors: {
+                        "model": color
+                    },
+                    refresh: false
                 });
             }
             else {
@@ -6312,17 +6560,28 @@ var EntityRenderEngine;
                 cEntity.model.colorBlendAmount = new ConstantProperty(blendAmount);
                 cEntity.model.colorBlendMode = new ConstantProperty(blendMode);
                 cEntity.model.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
-                var prevPos3d = getValue$1(params.viewer, cEntity.position);
-                var posChanged = !prevPos3d || !Cartesian3.equals(prevPos3d, pos3d);
-                var animatePosition_3 = null;
-                if (posChanged) {
-                    animatePosition_3 = new CesiumAnimatedProperty.AnimatePosition({
-                        durationMs: 200,
-                        targetPos3d: pos3d,
-                        viewer: params.viewer,
-                        startPos3d: prevPos3d
+                // If we have a series of time-based positions then we'll animate as time changes.
+                var series = getSeriesPossesForHistoricEntity(params.viewer, heightRef, params.entityHistoric);
+                if (series.length > 1) {
+                    var animatePosition_8 = new CesiumAnimatedProperty.AnimatePositionSeries({
+                        posses: series,
+                        viewer: params.viewer
                     });
-                    cEntity.position = new CallbackProperty(function () { return animatePosition_3.GetValue(); }, false);
+                    cEntity.position = new CallbackProperty(function () { return animatePosition_8.GetValue(); }, false);
+                }
+                else {
+                    var prevPos3d = getValue$1(params.viewer, cEntity.position);
+                    var posChanged = !prevPos3d || !Cartesian3.equals(prevPos3d, pos3d);
+                    var animatePosition_9 = null;
+                    if (posChanged) {
+                        animatePosition_9 = new CesiumAnimatedProperty.AnimatePosition({
+                            durationMs: 200,
+                            targetPos3d: pos3d,
+                            viewer: params.viewer,
+                            startPos3d: prevPos3d
+                        });
+                        cEntity.position = new CallbackProperty(function () { return animatePosition_9.GetValue(); }, false);
+                    }
                 }
                 // cEntity.orientation = new Cesium.ConstantProperty(orientation);
                 var prevHeading = cEntity.model._heading;
@@ -6471,16 +6730,16 @@ var EntityRenderEngine;
         }
         Model3d.Render = Render;
         function RenderGroup(params) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             return __awaiter(this, void 0, void 0, function () {
-                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) {
+                var api, cEntities, reqBody, i, entity, zoomItem, style, _h, tagIds, tags, mStyle, group, level, catId, lodData, _loop_2, i;
+                return __generator(this, function (_j) {
+                    switch (_j.label) {
                         case 0:
                             api = params.apiGetter.getApi();
                             return [4 /*yield*/, api.Loading];
                         case 1:
-                            _h.sent();
+                            _j.sent();
                             cEntities = new Map();
                             reqBody = {
                                 "strict": false,
@@ -6488,7 +6747,7 @@ var EntityRenderEngine;
                                 "Items": []
                             };
                             i = 0;
-                            _h.label = 2;
+                            _j.label = 2;
                         case 2:
                             if (!(i < params.entities.length)) return [3 /*break*/, 9];
                             entity = params.entities[i];
@@ -6496,13 +6755,13 @@ var EntityRenderEngine;
                             if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 4];
                             return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                         case 3:
-                            _g = (_a = (_h.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
+                            _h = (_a = (_j.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
                             return [3 /*break*/, 5];
                         case 4:
-                            _g = zoomItem.Style;
-                            _h.label = 5;
+                            _h = zoomItem.Style;
+                            _j.label = 5;
                         case 5:
-                            style = _g;
+                            style = _h;
                             tagIds = entity.Bruce["Layer.ID"];
                             tags = [];
                             if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 7];
@@ -6511,8 +6770,8 @@ var EntityRenderEngine;
                                     tagIds: tagIds
                                 })];
                         case 6:
-                            tags = (_h.sent()).tags;
-                            _h.label = 7;
+                            tags = (_j.sent()).tags;
+                            _j.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;
@@ -6533,7 +6792,7 @@ var EntityRenderEngine;
                                 "group": group,
                                 "level": level
                             });
-                            _h.label = 8;
+                            _j.label = 8;
                         case 8:
                             i++;
                             return [3 /*break*/, 2];
@@ -6542,24 +6801,24 @@ var EntityRenderEngine;
                                 filter: reqBody
                             })];
                         case 10:
-                            lodData = (_h.sent()).lods;
+                            lodData = (_j.sent()).lods;
                             _loop_2 = function (i) {
-                                var entity, zoomItem, style, _j, tagIds, tags, lod, mStyle, cEntity, name_5;
-                                return __generator(this, function (_k) {
-                                    switch (_k.label) {
+                                var entity, zoomItem, style, _k, tagIds, tags, lod, mStyle, cEntity, name_5;
+                                return __generator(this, function (_l) {
+                                    switch (_l.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:
-                                            _j = (_c = (_k.sent())) === null || _c === void 0 ? void 0 : _c.Settings;
+                                            _k = (_c = (_l.sent())) === null || _c === void 0 ? void 0 : _c.Settings;
                                             return [3 /*break*/, 3];
                                         case 2:
-                                            _j = zoomItem.Style;
-                                            _k.label = 3;
+                                            _k = zoomItem.Style;
+                                            _l.label = 3;
                                         case 3:
-                                            style = _j;
+                                            style = _k;
                                             tagIds = entity.Bruce["Layer.ID"];
                                             tags = [];
                                             if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 5];
@@ -6568,8 +6827,8 @@ var EntityRenderEngine;
                                                     tagIds: tagIds
                                                 })];
                                         case 4:
-                                            tags = (_k.sent()).tags;
-                                            _k.label = 5;
+                                            tags = (_l.sent()).tags;
+                                            _l.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)) {
@@ -6579,6 +6838,7 @@ var EntityRenderEngine;
                                             cEntity = Render({
                                                 rendered: (_e = params.rendered) === null || _e === void 0 ? void 0 : _e.get(entity.Bruce.ID),
                                                 entity: entity,
+                                                entityHistoric: (_f = params.entitiesHistoric) === null || _f === void 0 ? void 0 : _f[entity.Bruce.ID],
                                                 style: mStyle,
                                                 tags: tags,
                                                 viewer: params.viewer,
@@ -6594,23 +6854,23 @@ var EntityRenderEngine;
                                             if (!cEntity) return [3 /*break*/, 7];
                                             return [4 /*yield*/, getName(api, entity)];
                                         case 6:
-                                            name_5 = _k.sent();
+                                            name_5 = _l.sent();
                                             cEntity.name = name_5;
-                                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_f = params.viewer) === null || _f === void 0 ? void 0 : _f.terrainProvider);
+                                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_g = params.viewer) === null || _g === void 0 ? void 0 : _g.terrainProvider);
                                             cEntities.set(entity.Bruce.ID, cEntity);
-                                            _k.label = 7;
+                                            _l.label = 7;
                                         case 7: return [2 /*return*/];
                                     }
                                 });
                             };
                             i = 0;
-                            _h.label = 11;
+                            _j.label = 11;
                         case 11:
                             if (!(i < params.entities.length)) return [3 /*break*/, 14];
                             return [5 /*yield**/, _loop_2(i)];
                         case 12:
-                            _h.sent();
-                            _h.label = 13;
+                            _j.sent();
+                            _j.label = 13;
                         case 13:
                             i++;
                             return [3 /*break*/, 11];
@@ -7837,6 +8097,165 @@ var EntityLabel;
     EntityLabel.GetLabel = GetLabel;
 })(EntityLabel || (EntityLabel = {}));
 
+function getColor$2(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;
+}
+var CesiumAnimatedInOut;
+(function (CesiumAnimatedInOut) {
+    /**
+     * Animates an Entity out of the scene.
+     * Removes it from the scene at the end of the animation.
+     * @param params
+     */
+    function AnimateOut(params) {
+        var viewer = params.viewer, entity = params.entity;
+        if (entity instanceof Entity) {
+            var pieces = EntityUtils.GatherEntity({
+                entity: entity,
+            });
+            var leaderSet = false;
+            var removed_1 = false;
+            var doRemove_1 = function () {
+                if (removed_1) {
+                    return;
+                }
+                removed_1 = true;
+                var removal = viewer.scene.postRender.addEventListener(function () {
+                    removal();
+                    EntityRenderEngine.Remove({
+                        viewer: viewer,
+                        entity: entity
+                    });
+                });
+            };
+            var _loop_1 = function (i) {
+                var piece = pieces[i];
+                if (piece instanceof Entity) {
+                    var animateColor_1;
+                    var thing_1;
+                    var colorPropKey_1;
+                    if (piece.model) {
+                        var curColor = getColor$2(viewer, piece.model.color);
+                        if (!curColor) {
+                            curColor = Color.WHITE.clone();
+                        }
+                        animateColor_1 = new CesiumAnimatedProperty.AnimateColor({
+                            durationMs: 500,
+                            targetColor: curColor.withAlpha(0.01),
+                            startColor: curColor,
+                            viewer: viewer
+                        });
+                        thing_1 = piece.model;
+                        colorPropKey_1 = "color";
+                    }
+                    else if (piece.point) {
+                        var curColor = getColor$2(viewer, piece.point.color);
+                        if (!curColor) {
+                            curColor = Color.WHITE.clone();
+                        }
+                        animateColor_1 = new CesiumAnimatedProperty.AnimateColor({
+                            durationMs: 500,
+                            targetColor: curColor.withAlpha(0.01),
+                            startColor: curColor,
+                            viewer: viewer
+                        });
+                        thing_1 = piece.point;
+                        colorPropKey_1 = "color";
+                    }
+                    else if (piece.billboard) {
+                        var curColor = getColor$2(viewer, piece.billboard.color);
+                        if (!curColor) {
+                            curColor = Color.WHITE.clone();
+                        }
+                        animateColor_1 = new CesiumAnimatedProperty.AnimateColor({
+                            durationMs: 200,
+                            targetColor: curColor.withAlpha(0.0),
+                            startColor: curColor,
+                            viewer: viewer
+                        });
+                        thing_1 = piece.billboard;
+                        colorPropKey_1 = "color";
+                    }
+                    // Other graphic types don't support colour animation.
+                    if (thing_1 && colorPropKey_1 && animateColor_1) {
+                        var isLeader_1 = !leaderSet;
+                        leaderSet = true;
+                        var callback = function () {
+                            var color = animateColor_1.GetColor();
+                            if (isLeader_1 && animateColor_1.IsDone()) {
+                                doRemove_1();
+                                thing_1[colorPropKey_1] = new ConstantProperty(color);
+                            }
+                            return color;
+                        };
+                        if (thing_1[colorPropKey_1] instanceof CallbackProperty) {
+                            thing_1[colorPropKey_1].setCallback(callback, false);
+                        }
+                        else {
+                            thing_1[colorPropKey_1] = new CallbackProperty(callback, false);
+                        }
+                    }
+                }
+            };
+            for (var i = 0; i < pieces.length; i++) {
+                _loop_1(i);
+            }
+            // Nothing animated, so just remove the entity.
+            if (!leaderSet) {
+                EntityRenderEngine.Remove({
+                    viewer: viewer,
+                    entity: entity
+                });
+            }
+        }
+        else if (entity instanceof Primitive) {
+            if (viewer.scene.primitives.contains(entity)) {
+                viewer.scene.primitives.remove(entity);
+            }
+        }
+        else if (entity instanceof Cesium3DTileFeature) {
+            try {
+                CesiumAnimatedProperty.AnimateTFeatureColor({
+                    durationMs: 500,
+                    feature: entity,
+                    targetColor: Color.WHITE.withAlpha(0.0),
+                    startColor: entity.color ? entity.color : Color.WHITE.clone(),
+                    viewer: viewer,
+                    onDone: function () {
+                        var tileset = entity === null || entity === void 0 ? void 0 : entity.tileset;
+                        if (tileset && viewer.scene.primitives.contains(tileset)) {
+                            entity.show = false;
+                        }
+                    }
+                });
+            }
+            catch (e) {
+                console.error(e);
+                // If an error occurs, just hide the feature.
+                var tileset = entity === null || entity === void 0 ? void 0 : entity.tileset;
+                if (tileset && viewer.scene.primitives.contains(tileset)) {
+                    entity.show = false;
+                }
+            }
+        }
+    }
+    CesiumAnimatedInOut.AnimateOut = AnimateOut;
+})(CesiumAnimatedInOut || (CesiumAnimatedInOut = {}));
+
 /**
  * Returns if a given visual is alive and in the scene.
  * @param viewer
@@ -7867,28 +8286,10 @@ function isAlive$1(viewer, visual) {
 }
 function removeEntity(viewer, visual) {
     unmarkEntity(visual, false);
-    if (visual instanceof Entity) {
-        EntityRenderEngine.Remove({
-            viewer: viewer,
-            entity: visual
-        });
-    }
-    else if (visual instanceof Primitive) {
-        if (viewer.scene.primitives.contains(visual)) {
-            viewer.scene.primitives.remove(visual);
-        }
-    }
-    else if (visual instanceof Cesium3DTileFeature) {
-        try {
-            var tileset = visual === null || visual === void 0 ? void 0 : visual.tileset;
-            if (tileset && viewer.scene.primitives.contains(tileset)) {
-                visual.show = false;
-            }
-        }
-        catch (e) {
-            console.error(e);
-        }
-    }
+    CesiumAnimatedInOut.AnimateOut({
+        entity: visual,
+        viewer: viewer
+    });
 }
 var MAX_SHOW_DEPTH = 10;
 function updateCEntityShow(viewer, visual, rego, show, ignoreParent, depth) {
@@ -8636,6 +9037,7 @@ var VisualsRegister;
                             rego: rego
                         });
                         removeEntity(this.viewer, rego.visual);
+                        rego.visual = null;
                         var doesInclude = this.rego[entityId_4].find(function (r) { return r.menuItemId === menuItemId; });
                         if (doesInclude) {
                             this.rego[entityId_4] = entityRegos.filter(function (r) { return r.menuItemId !== menuItemId; });
@@ -8667,6 +9069,7 @@ var VisualsRegister;
                         rego: rego
                     });
                     removeEntity(this_2.viewer, rego.visual);
+                    rego.visual = null;
                     (_b = this_2.onUpdate) === null || _b === void 0 ? void 0 : _b.Trigger({
                         type: EVisualUpdateType.Remove,
                         entityId: rego.entityId,
@@ -8697,6 +9100,7 @@ var VisualsRegister;
                             rego: rego
                         });
                         removeEntity(this.viewer, rego.visual);
+                        rego.visual = null;
                         this.rego[entityId_5] = entityRegos.filter(function (r) { return r.menuItemId !== menuItemId; });
                         (_c = this.onUpdate) === null || _c === void 0 ? void 0 : _c.Trigger({
                             type: EVisualUpdateType.Remove,
@@ -10486,33 +10890,55 @@ var EntitiesRenderManager;
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             if (force === void 0) { force = false; }
             return __awaiter(this, void 0, void 0, function () {
-                var toRemove, i, entity, _k, updated, cEntities, i, entity, id, cEntity, rego, visual, wasClustered, tagIds, rego_1;
+                var entitiesHistoric, toRemove, i, entity, startTmp, stopTmp, startStr, stopStr, historicData, _k, updated, cEntities, i, entity, id, cEntity, rego, visual, wasClustered, tagIds, rego_1;
                 return __generator(this, function (_l) {
                     switch (_l.label) {
                         case 0:
-                            if ((_a = this.item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historicAttrKey) {
-                                toRemove = entities.filter(function (x) { var _a; return !((_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.historicAttrKey); });
-                                for (i = 0; i < toRemove.length; i++) {
-                                    entity = toRemove[i];
-                                    this.visualsManager.RemoveRegos({
-                                        entityId: entity.Bruce.ID,
-                                        menuItemId: this.item.id,
-                                        requestRender: false
-                                    });
-                                    (_b = this.clustering) === null || _b === void 0 ? void 0 : _b.RemoveEntity(entity.Bruce.ID, false);
-                                }
-                                entities = entities.filter(function (x) { var _a; return !!((_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.historicAttrKey); });
-                            }
-                            return [4 /*yield*/, EntityRenderEngine.Render({
-                                    viewer: this.viewer,
-                                    apiGetter: this.apiGetter,
-                                    entities: entities,
+                            entitiesHistoric = {};
+                            if (!((_a = this.item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historicAttrKey)) return [3 /*break*/, 2];
+                            toRemove = entities.filter(function (x) { var _a; return !((_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.historicAttrKey); });
+                            for (i = 0; i < toRemove.length; i++) {
+                                entity = toRemove[i];
+                                this.visualsManager.RemoveRegos({
+                                    entityId: entity.Bruce.ID,
                                     menuItemId: this.item.id,
-                                    visualRegister: this.visualsManager,
-                                    zoomControl: this.item.CameraZoomSettings,
-                                    force: force
+                                    requestRender: false
+                                });
+                                (_b = this.clustering) === null || _b === void 0 ? void 0 : _b.RemoveEntity(entity.Bruce.ID, false);
+                            }
+                            entities = entities.filter(function (x) { var _a; return !!((_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.historicAttrKey); });
+                            if (!this.item.historicInterpolation) return [3 /*break*/, 2];
+                            if (!entities.length) return [3 /*break*/, 2];
+                            startTmp = JulianDate.toDate(this.viewer.clock.startTime);
+                            stopTmp = JulianDate.toDate(this.viewer.clock.stopTime);
+                            startStr = new Date(startTmp.getTime() - 1000).toISOString();
+                            stopStr = new Date(stopTmp.getTime() + 1000).toISOString();
+                            return [4 /*yield*/, EntityHistoricData.GetList({
+                                    attrKey: this.item.BruceEntity.historicAttrKey,
+                                    dateTimeFrom: startStr,
+                                    dateTimeTo: stopStr,
+                                    entityIds: entities.map(function (x) { return x.Bruce.ID; }),
+                                    api: this.apiGetter.getApi()
                                 })];
                         case 1:
+                            historicData = _l.sent();
+                            if (this.disposed) {
+                                this.doDispose();
+                                return [2 /*return*/];
+                            }
+                            entitiesHistoric = historicData.recordsByIds;
+                            _l.label = 2;
+                        case 2: return [4 /*yield*/, EntityRenderEngine.Render({
+                                viewer: this.viewer,
+                                apiGetter: this.apiGetter,
+                                entities: entities,
+                                menuItemId: this.item.id,
+                                visualRegister: this.visualsManager,
+                                zoomControl: this.item.CameraZoomSettings,
+                                entitiesHistoric: entitiesHistoric,
+                                force: force
+                            })];
+                        case 3:
                             _k = _l.sent(), updated = _k.updated, cEntities = _k.entities;
                             if (this.disposed) {
                                 this.doDispose();
@@ -23662,7 +24088,7 @@ var ViewRenderEngine;
     ViewRenderEngine.Render = Render;
 })(ViewRenderEngine || (ViewRenderEngine = {}));
 
-var VERSION = "3.8.2";
+var VERSION = "3.8.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