bruce-cesium 3.7.3 → 3.7.5

package/dist/lib/rendering/entity-render-engine.js

@@ -55,6 +55,8 @@ var render_manager_1 = require("./render-managers/render-manager");
 var js_utils_1 = require("../internal/js-utils");
 var visual_register_culler_1 = require("./visual-register-culler");
 var limited_log_1 = require("../internal/limited-log");
+var cesium_entity_styler_1 = require("../utils/cesium-entity-styler");
+var cesium_animated_property_1 = require("./cesium-animated-property");
 function colorToCColor(color) {
     return new Cesium.Color(color.red ? color.red / 255 : 0, color.green ? color.green / 255 : 0, color.blue ? color.blue / 255 : 0, color.alpha);
 }
@@ -450,7 +452,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.
@@ -464,7 +466,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,
@@ -499,7 +501,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);
@@ -615,11 +617,11 @@ function extractMetadataFromFileUrl(url) {
 var EntityRenderEngine;
 (function (EntityRenderEngine) {
     function Render(params) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         return __awaiter(this, void 0, void 0, function () {
-            var groupRenderParams, i, entity, geometry, cEntities, models, multiGeometry, polygons, polylines, points, i, entity, id, zoomItem, displayType, newRenderId, existingRego, oldRenderId, mParams, mEntities, i, entity, id, cEntity, _loop_1, i, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity;
-            return __generator(this, function (_j) {
-                switch (_j.label) {
+            var groupRenderParams, i, entity, geometry, cEntities, models, multiGeometry, polygons, polylines, points, i, entity, id, zoomItem, displayType, existingRego, newRenderId, oldRenderId, mParams, mEntities, i, entity, id, cEntity, _loop_1, i, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity;
+            return __generator(this, function (_m) {
+                switch (_m.label) {
                     case 0:
                         groupRenderParams = {
                             apiGetter: params.apiGetter,
@@ -661,21 +663,36 @@ var EntityRenderEngine;
                                 displayType = bruce_models_1.ZoomControl.EDisplayType.Geometry;
                             }
                             if (displayType != bruce_models_1.ZoomControl.EDisplayType.Hidden) {
-                                newRenderId = getRenderGroupId(zoomItem, (_b = params.viewer) === null || _b === void 0 ? void 0 : _b.terrainProvider);
                                 existingRego = params.visualRegister.GetRego({
                                     entityId: id,
                                     menuItemId: params.menuItemId
                                 });
+                                newRenderId = getRenderGroupId(zoomItem, (_b = params.viewer) === null || _b === void 0 ? void 0 : _b.terrainProvider);
                                 oldRenderId = (_c = existingRego === null || existingRego === void 0 ? void 0 : existingRego.visual) === null || _c === void 0 ? void 0 : _c._renderGroup;
-                                if (!params.force && newRenderId == oldRenderId && !(existingRego === null || existingRego === void 0 ? void 0 : existingRego.stale)) {
+                                if (!params.force &&
+                                    newRenderId == oldRenderId &&
+                                    !(existingRego === null || existingRego === void 0 ? void 0 : existingRego.stale) &&
+                                    // If historic metadata is different then it's also stale.
+                                    ((existingRego === null || existingRego === void 0 ? void 0 : existingRego.historicDateTime) == ((_d = entity.Bruce) === null || _d === void 0 ? void 0 : _d.historicDateTime))) {
+                                    // No sorting category needed. Already rendered the way we want.
                                     cEntities[id] = existingRego.visual;
                                 }
                                 else {
+                                    // Add so we can re-use the graphic and update it.
+                                    if (existingRego && newRenderId == oldRenderId) {
+                                        cEntities[id] = existingRego.visual;
+                                        // Flag as no longer stale as we're unlikely to recreate the rego if we're reusing the graphic.
+                                        existingRego.stale = false;
+                                        // Update metadata for the same reason.
+                                        existingRego.historicDateTime = (_e = entity.Bruce) === null || _e === void 0 ? void 0 : _e.historicDateTime;
+                                        existingRego.historicAttrKey = (_f = entity.Bruce) === null || _f === void 0 ? void 0 : _f.historicAttrKey;
+                                        existingRego.entityTypeId = entity.Bruce["EntityType.ID"];
+                                    }
                                     if (displayType == bruce_models_1.ZoomControl.EDisplayType.Model3D) {
                                         models.push(entity);
                                     }
                                     else if (displayType == bruce_models_1.ZoomControl.EDisplayType.Geometry) {
-                                        if ((_e = (_d = entity.geometry) === null || _d === void 0 ? void 0 : _d.MultiGeometry) === null || _e === void 0 ? void 0 : _e.length) {
+                                        if ((_h = (_g = entity.geometry) === null || _g === void 0 ? void 0 : _g.MultiGeometry) === null || _h === void 0 ? void 0 : _h.length) {
                                             multiGeometry.push(entity);
                                         }
                                         else {
@@ -690,10 +707,10 @@ 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();
+                        mEntities = _m.sent();
                         for (i = 0; i < mParams.entities.length; i++) {
                             entity = mParams.entities[i];
                             id = entity.Bruce.ID;
@@ -705,20 +722,20 @@ var EntityRenderEngine;
                                 multiGeometry.push(entity);
                             }
                         }
-                        _j.label = 2;
+                        _m.label = 2;
                     case 2:
                         if (!(multiGeometry.length > 0)) return [3 /*break*/, 6];
                         _loop_1 = function (i) {
                             var entity, pParams, zoomItem, j, subEntity, cPoly, rendered, cLines, cPoints, rootEntity_1, firstEntity;
-                            return __generator(this, function (_k) {
-                                switch (_k.label) {
+                            return __generator(this, function (_o) {
+                                switch (_o.label) {
                                     case 0:
                                         entity = multiGeometry[i];
-                                        if (!((_g = (_f = entity.geometry) === null || _f === void 0 ? void 0 : _f.MultiGeometry) === null || _g === void 0 ? void 0 : _g.length)) {
+                                        if (!((_k = (_j = entity.geometry) === null || _j === void 0 ? void 0 : _j.MultiGeometry) === null || _k === void 0 ? void 0 : _k.length)) {
                                             polygons.push(entity);
                                             return [2 /*return*/, "continue"];
                                         }
-                                        pParams = __assign(__assign({}, groupRenderParams), { entities: [] });
+                                        pParams = __assign(__assign({}, groupRenderParams), { entities: [], rendered: cEntities });
                                         zoomItem = pParams.zoomItems[entity.Bruce.ID];
                                         for (j = 0; j < entity.geometry.MultiGeometry.length; j++) {
                                             subEntity = __assign(__assign({}, entity), { geometry: entity.geometry.MultiGeometry[j], Bruce: __assign(__assign({}, entity.Bruce), { ID: bruce_models_1.ObjectUtils.UId() }) });
@@ -727,7 +744,7 @@ var EntityRenderEngine;
                                         }
                                         return [4 /*yield*/, Polygon.RenderGroup(pParams)];
                                     case 1:
-                                        cPoly = _k.sent();
+                                        cPoly = _o.sent();
                                         Object.keys(cPoly).forEach(function (key) {
                                             if (cPoly[key]) {
                                                 pParams.entities = pParams.entities.filter(function (e) { return e.Bruce.ID != key; });
@@ -736,7 +753,7 @@ var EntityRenderEngine;
                                         rendered = Object.values(cPoly);
                                         return [4 /*yield*/, Polyline.RenderGroup(pParams)];
                                     case 2:
-                                        cLines = _k.sent();
+                                        cLines = _o.sent();
                                         Object.keys(cLines).forEach(function (key) {
                                             if (cLines[key]) {
                                                 pParams.entities = pParams.entities.filter(function (e) { return e.Bruce.ID != key; });
@@ -746,9 +763,9 @@ var EntityRenderEngine;
                                         if (!!rendered.length) return [3 /*break*/, 4];
                                         return [4 /*yield*/, Point.RenderGroup(pParams)];
                                     case 3:
-                                        cPoints = _k.sent();
+                                        cPoints = _o.sent();
                                         rendered = rendered.concat(Object.values(cPoints));
-                                        _k.label = 4;
+                                        _o.label = 4;
                                     case 4:
                                         rendered = rendered.filter(function (x) { return x != null; });
                                         if (rendered.length) {
@@ -756,7 +773,7 @@ var EntityRenderEngine;
                                                 id: bruce_models_1.ObjectUtils.UId(10)
                                             });
                                             rootEntity_1._siblingGraphics = [];
-                                            rootEntity_1._renderGroup = getRenderGroupId(zoomItem, (_h = params.viewer) === null || _h === void 0 ? void 0 : _h.terrainProvider);
+                                            rootEntity_1._renderGroup = getRenderGroupId(zoomItem, (_l = params.viewer) === null || _l === void 0 ? void 0 : _l.terrainProvider);
                                             rootEntity_1._siblingGraphics = rootEntity_1._siblingGraphics.concat(rendered);
                                             cEntities[entity.Bruce.ID] = rootEntity_1;
                                             firstEntity = rendered[0];
@@ -775,22 +792,22 @@ var EntityRenderEngine;
                             });
                         };
                         i = 0;
-                        _j.label = 3;
+                        _m.label = 3;
                     case 3:
                         if (!(i < multiGeometry.length)) return [3 /*break*/, 6];
                         return [5 /*yield**/, _loop_1(i)];
                     case 4:
-                        _j.sent();
-                        _j.label = 5;
+                        _m.sent();
+                        _m.label = 5;
                     case 5:
                         i++;
                         return [3 /*break*/, 3];
                     case 6:
                         if (!(polygons.length > 0)) return [3 /*break*/, 8];
-                        pParams = __assign(__assign({}, groupRenderParams), { entities: polygons });
+                        pParams = __assign(__assign({}, groupRenderParams), { entities: polygons, rendered: cEntities });
                         return [4 /*yield*/, Polygon.RenderGroup(pParams)];
                     case 7:
-                        pEntities = _j.sent();
+                        pEntities = _m.sent();
                         for (i = 0; i < pParams.entities.length; i++) {
                             entity = pParams.entities[i];
                             cEntity = pEntities[entity.Bruce.ID];
@@ -801,13 +818,13 @@ var EntityRenderEngine;
                                 polylines.push(entity);
                             }
                         }
-                        _j.label = 8;
+                        _m.label = 8;
                     case 8:
                         if (!(polylines.length > 0)) return [3 /*break*/, 10];
-                        pParams = __assign(__assign({}, groupRenderParams), { entities: polylines });
+                        pParams = __assign(__assign({}, groupRenderParams), { entities: polylines, rendered: cEntities });
                         return [4 /*yield*/, Polyline.RenderGroup(pParams)];
                     case 9:
-                        pEntities = _j.sent();
+                        pEntities = _m.sent();
                         for (i = 0; i < pParams.entities.length; i++) {
                             entity = pParams.entities[i];
                             cEntity = pEntities[entity.Bruce.ID];
@@ -818,13 +835,13 @@ var EntityRenderEngine;
                                 points.push(entity);
                             }
                         }
-                        _j.label = 10;
+                        _m.label = 10;
                     case 10:
                         if (!(points.length > 0)) return [3 /*break*/, 12];
-                        pParams = __assign(__assign({}, groupRenderParams), { entities: points });
+                        pParams = __assign(__assign({}, groupRenderParams), { entities: points, rendered: cEntities });
                         return [4 /*yield*/, Point.RenderGroup(pParams)];
                     case 11:
-                        pEntities = _j.sent();
+                        pEntities = _m.sent();
                         for (i = 0; i < pParams.entities.length; i++) {
                             entity = pParams.entities[i];
                             cEntity = pEntities[entity.Bruce.ID];
@@ -832,7 +849,7 @@ var EntityRenderEngine;
                                 cEntities[entity.Bruce.ID] = cEntity;
                             }
                         }
-                        _j.label = 12;
+                        _m.label = 12;
                     case 12: return [2 /*return*/, cEntities];
                 }
             });
@@ -885,11 +902,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;
@@ -902,6 +919,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 = entity_utils_1.EntityUtils.GatherEntity({
+                                    entity: cEntity,
+                                });
+                                if (parts.length > 1) {
+                                    // We'll cull all except the allowed number of siblings.
+                                    cEntity._siblingGraphics = cEntity._siblingGraphics.slice(0, siblings);
+                                    // We'll remove all that aren't in the allowed (direct) list.
+                                    for (var i = 0; i < parts.length - 1; i++) {
+                                        var part = parts[i];
+                                        if (part && part instanceof Cesium.Entity && params.viewer.entities.contains(part) && !cEntity._siblingGraphics.includes(part)) {
+                                            params.viewer.entities.remove(part);
+                                        }
+                                    }
+                                    if (cEntity._parentEntity) {
+                                        console.warn("Point.Render: Parent entity was not null. This should not happen.");
+                                    }
+                                }
+                            };
                             if (!(type == bruce_models_1.Style.EPointType.Icon)) return [3 /*break*/, 9];
                             iconUrlRows = style.iconUrl == null ? [] : style.iconUrl;
                             iconUrlRows.forEach(function (row) {
@@ -918,36 +956,36 @@ var EntityRenderEngine;
                             api = params.apiGetter.getApi(metadata.accountId);
                             return [4 /*yield*/, api.Loading];
                         case 1:
-                            _c.sent();
+                            _e.sent();
                             iconUrl = bruce_models_1.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 = bruce_models_1.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.
                             (0, limited_log_1.OneTimeError)("ENTITY_RENDER_ENGINE_ICON_URL_ERROR_" + iconUrl, {
@@ -966,34 +1004,64 @@ var EntityRenderEngine;
                                 disableDepthTest = Boolean(style.renderOnTop);
                                 if (iconScale > 0) {
                                     bColor = style.iconTintColor ? bruce_models_1.Calculator.GetColor(style.iconTintColor, entity, params.tags) : null;
-                                    cColor = bColor ? colorToCColor(bColor) : undefined;
+                                    cColor_1 = bColor ? colorToCColor(bColor) : undefined;
                                     heightRef = getHeightRef(style);
-                                    cEntity = new Cesium.Entity({
-                                        id: bruce_models_1.ObjectUtils.UId(10),
-                                        billboard: {
-                                            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-                                            image: image.canvas,
-                                            heightReference: getHeightRef(style),
-                                            scale: iconScale,
-                                            disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined,
-                                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
-                                            color: cColor
-                                            // Would be great once we have a setting for this.
-                                            // translucencyByDistance: getTranslucencyByDistance(params.minDistance, params.maxDistance),
-                                        },
-                                        position: entity_utils_1.EntityUtils.GetPos({
+                                    if (!params.rendered || !params.rendered.billboard) {
+                                        cEntity = new Cesium.Entity({
+                                            id: bruce_models_1.ObjectUtils.UId(10),
+                                            billboard: {
+                                                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                                                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                                                image: image.canvasDataUri,
+                                                heightReference: getHeightRef(style),
+                                                scale: iconScale,
+                                                disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined,
+                                                distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
+                                                color: new Cesium.CallbackProperty(function () { return cColor_1; }, true),
+                                                // Would be great once we have a setting for this.
+                                                // translucencyByDistance: getTranslucencyByDistance(params.minDistance, params.maxDistance),
+                                            },
+                                            position: entity_utils_1.EntityUtils.GetPos({
+                                                viewer: params.viewer,
+                                                entity: entity,
+                                                recordHeightRef: heightRef,
+                                                returnHeightRef: heightRef
+                                            }),
+                                            show: true
+                                        });
+                                    }
+                                    else {
+                                        prepareExistingGraphic(params.rendered);
+                                        cEntity = params.rendered;
+                                        currentImgKey = cEntity.billboard._billboardImgKey;
+                                        if (currentImgKey != iconUrl) {
+                                            cEntity.billboard.image = new Cesium.ConstantProperty(image.canvasDataUri);
+                                        }
+                                        cEntity.billboard.scale = new Cesium.ConstantProperty(iconScale);
+                                        cEntity.billboard.heightReference = new Cesium.ConstantProperty(getHeightRef(style));
+                                        cEntity.billboard.disableDepthTestDistance = new Cesium.ConstantProperty(disableDepthTest ? Number.POSITIVE_INFINITY : undefined);
+                                        cEntity.billboard.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                        cEntity.position = new Cesium.ConstantPositionProperty(entity_utils_1.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.
+                                        cesium_entity_styler_1.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 == bruce_models_1.Style.EPointType.Cylinder) {
                                 radius = (0, js_utils_1.EnsureNumber)(bruce_models_1.Calculator.GetNumber(style.CylinderRadius, entity, params.tags));
@@ -1018,46 +1086,97 @@ var EntityRenderEngine;
                                     returnHeightRef: heightRef
                                 });
                                 extrusion = getCylinderExtrusion(entity, params.tags, heightRef, style.CylinderFillExtrusion);
-                                cEntity = new Cesium.Entity({
-                                    id: bruce_models_1.ObjectUtils.UId(10),
-                                    ellipse: {
-                                        semiMajorAxis: radius,
-                                        semiMinorAxis: radius,
-                                        material: cFill,
-                                        outlineWidth: null,
-                                        extrudedHeight: extrusion.value,
-                                        heightReference: heightRef,
-                                        extrudedHeightReference: extrusion.exHeightRef,
-                                        height: Cesium.Cartographic.fromCartesian(pos3d).height,
-                                        zIndex: 1,
-                                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                                    },
-                                    position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone(),
-                                    show: true
-                                });
-                                if (outline && outlineWidth > 0) {
-                                    outlineExtrusion = getCylinderExtrusion(entity, params.tags, heightRef, style.CylinderBorderExtrusion);
-                                    // If this doesn't have its own extrusion, we must make it match the sibling.
-                                    // This way they render in a uniform way.
-                                    if (!outlineExtrusion.value && extrusion.value) {
-                                        outlineExtrusion.exHeightRef = extrusion.exHeightRef;
-                                    }
-                                    siblings.push(new Cesium.Entity({
+                                hasOutline = outline && outlineWidth > 0;
+                                if (!params.rendered || !params.rendered.ellipse) {
+                                    cEntity = new Cesium.Entity({
                                         id: bruce_models_1.ObjectUtils.UId(10),
                                         ellipse: {
-                                            semiMajorAxis: radius + outlineWidth,
-                                            semiMinorAxis: radius + outlineWidth,
-                                            material: cOutline,
-                                            outlineWidth: undefined,
-                                            extrudedHeight: outlineExtrusion.value,
+                                            semiMajorAxis: radius,
+                                            semiMinorAxis: radius,
+                                            material: cFill,
+                                            outlineWidth: null,
+                                            extrudedHeight: extrusion.value,
                                             heightReference: heightRef,
-                                            extrudedHeightReference: outlineExtrusion.exHeightRef,
+                                            extrudedHeightReference: extrusion.exHeightRef,
                                             height: Cesium.Cartographic.fromCartesian(pos3d).height,
-                                            zIndex: 2,
+                                            zIndex: 1,
                                             distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                                         },
-                                        position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone()
-                                    }));
+                                        position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone(),
+                                        show: true
+                                    });
+                                }
+                                else {
+                                    prepareExistingGraphic(params.rendered, hasOutline ? 1 : 0);
+                                    cEntity = params.rendered;
+                                    cEntity.ellipse.semiMajorAxis = new Cesium.ConstantProperty(radius);
+                                    cEntity.ellipse.semiMinorAxis = new Cesium.ConstantProperty(radius);
+                                    cEntity.ellipse.outlineWidth = undefined;
+                                    cEntity.ellipse.extrudedHeight = new Cesium.ConstantProperty(extrusion.value);
+                                    cEntity.ellipse.heightReference = new Cesium.ConstantProperty(heightRef);
+                                    cEntity.ellipse.extrudedHeightReference = new Cesium.ConstantProperty(extrusion.exHeightRef);
+                                    cEntity.ellipse.height = new Cesium.ConstantProperty(Cesium.Cartographic.fromCartesian(pos3d).height);
+                                    cEntity.ellipse.zIndex = new Cesium.ConstantProperty(1);
+                                    cEntity.ellipse.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                    cEntity.position = new Cesium.ConstantPositionProperty(pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone());
+                                    // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                                    // WARNING: ellipse does not support animation (yet?).
+                                    cesium_entity_styler_1.CesiumEntityStyler.SetDefaultColor({
+                                        color: cFill,
+                                        entity: cEntity,
+                                        viewer: params.viewer,
+                                        override: true,
+                                        requestRender: false
+                                    });
+                                    cEntity.show = true;
+                                }
+                                if (hasOutline) {
+                                    outlineExtrusion = getCylinderExtrusion(entity, params.tags, heightRef, style.CylinderBorderExtrusion);
+                                    // If this doesn't have its own extrusion, we must make it match the sibling.
+                                    // This way they render in a uniform way.
+                                    if (!outlineExtrusion.value && extrusion.value) {
+                                        outlineExtrusion.exHeightRef = extrusion.exHeightRef;
+                                    }
+                                    outlineEntity = (_d = (_c = params.rendered) === null || _c === void 0 ? void 0 : _c._siblingGraphics) === null || _d === void 0 ? void 0 : _d[0];
+                                    if (outlineEntity && outlineEntity.ellipse) {
+                                        outlineEntity.ellipse.semiMajorAxis = new Cesium.ConstantProperty(radius + outlineWidth);
+                                        outlineEntity.ellipse.semiMinorAxis = new Cesium.ConstantProperty(radius + outlineWidth);
+                                        outlineEntity.ellipse.extrudedHeight = new Cesium.ConstantProperty(outlineExtrusion.value);
+                                        outlineEntity.ellipse.heightReference = new Cesium.ConstantProperty(heightRef);
+                                        outlineEntity.ellipse.extrudedHeightReference = new Cesium.ConstantProperty(outlineExtrusion.exHeightRef);
+                                        outlineEntity.ellipse.height = new Cesium.ConstantProperty(Cesium.Cartographic.fromCartesian(pos3d).height);
+                                        outlineEntity.ellipse.zIndex = new Cesium.ConstantProperty(2);
+                                        outlineEntity.ellipse.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                        // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                                        // WARNING: ellipse does not support animation (yet?).
+                                        cesium_entity_styler_1.CesiumEntityStyler.SetDefaultColor({
+                                            color: cOutline,
+                                            entity: outlineEntity,
+                                            viewer: params.viewer,
+                                            override: true,
+                                            requestRender: false
+                                        });
+                                        outlineEntity.show = true;
+                                    }
+                                    else {
+                                        outlineEntity = new Cesium.Entity({
+                                            id: bruce_models_1.ObjectUtils.UId(10),
+                                            ellipse: {
+                                                semiMajorAxis: radius + outlineWidth,
+                                                semiMinorAxis: radius + outlineWidth,
+                                                material: cOutline,
+                                                outlineWidth: undefined,
+                                                extrudedHeight: outlineExtrusion.value,
+                                                heightReference: heightRef,
+                                                extrudedHeightReference: outlineExtrusion.exHeightRef,
+                                                height: Cesium.Cartographic.fromCartesian(pos3d).height,
+                                                zIndex: 2,
+                                                distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                                            },
+                                            position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone()
+                                        });
+                                    }
+                                    siblings.push(outlineEntity);
                                 }
                             }
                             if (!cEntity) {
@@ -1074,33 +1193,66 @@ var EntityRenderEngine;
                                 heightRef = getHeightRef(style);
                                 circleBillboard = createCircleBillboard(size, cColor.toCssColorString());
                                 disableDepthTest = Boolean(style.renderOnTop);
-                                cEntity = new Cesium.Entity({
-                                    id: bruce_models_1.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: entity_utils_1.EntityUtils.GetPos({
+                                if (!params.rendered || !params.rendered.billboard) {
+                                    cEntity = new Cesium.Entity({
+                                        id: bruce_models_1.ObjectUtils.UId(10),
+                                        // point: {
+                                        //     pixelSize: size,
+                                        //     color: cColor,
+                                        //     heightReference: getHeightRef(style),
+                                        //     distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                                        // },
+                                        // We are generating a billboard instead of using the point.
+                                        // This is because points were behaving strangely where they would appear oblong shapes.
+                                        // This occurred consistently when rendering many icons and points at the same time.
+                                        billboard: {
+                                            height: circleBillboard.height,
+                                            width: circleBillboard.width,
+                                            image: circleBillboard.canvasDataUri,
+                                            color: new Cesium.CallbackProperty(function () { return undefined; }, true),
+                                            heightReference: heightRef,
+                                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
+                                            disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined
+                                        },
+                                        position: entity_utils_1.EntityUtils.GetPos({
+                                            viewer: params.viewer,
+                                            entity: entity,
+                                            recordHeightRef: heightRef,
+                                            returnHeightRef: heightRef
+                                        }),
+                                        show: true
+                                    });
+                                }
+                                else {
+                                    prepareExistingGraphic(params.rendered);
+                                    cEntity = params.rendered;
+                                    imgKey = "".concat(size, "-").concat(cColor.toCssColorString());
+                                    currentImgKey = cEntity.billboard._billboardImgKey;
+                                    if (currentImgKey != imgKey) {
+                                        cEntity.billboard.image = new Cesium.ConstantProperty(circleBillboard.canvasDataUri);
+                                    }
+                                    cEntity.billboard.height = new Cesium.ConstantProperty(circleBillboard.height);
+                                    cEntity.billboard.width = new Cesium.ConstantProperty(circleBillboard.width);
+                                    cEntity.billboard.heightReference = new Cesium.ConstantProperty(heightRef);
+                                    cEntity.billboard.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                    cEntity.billboard.disableDepthTestDistance = new Cesium.ConstantProperty(disableDepthTest ? Number.POSITIVE_INFINITY : undefined);
+                                    cEntity.position = new Cesium.ConstantPositionProperty(entity_utils_1.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.
+                                    cesium_entity_styler_1.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) {
@@ -1113,16 +1265,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];
@@ -1130,13 +1282,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];
@@ -1145,8 +1297,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({
@@ -1157,20 +1309,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];
@@ -1255,52 +1408,110 @@ var EntityRenderEngine;
             if (style.drapeOver == "ALL") {
                 classification = Cesium.ClassificationType.BOTH;
             }
-            var cEntity = new Cesium.Entity({
-                id: bruce_models_1.ObjectUtils.UId(10),
-                polyline: units == "px" ? {
-                    positions: posses,
-                    material: cColor,
-                    width: width,
-                    classificationType: classification,
-                    arcType: Cesium.ArcType.GEODESIC,
-                    zIndex: getZIndex(style, entity, params.tags),
-                    clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
-                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                } : null,
-                corridor: units == "m" ? {
-                    positions: posses,
-                    material: cColor,
-                    width: width,
-                    classificationType: classification,
-                    heightReference: heightRef,
-                    zIndex: getZIndex(style, entity, params.tags),
-                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
-                    cornerType: Cesium.CornerType.MITERED,
-                    shadows: Cesium.ShadowMode.ENABLED,
-                    fill: true
-                } : null,
-                position: entity_utils_1.EntityUtils.GetPos({
+            var cEntity = null;
+            if (!params.rendered || ((!params.rendered.polyline && units == "px") ||
+                (!params.rendered.corridor && units == "m"))) {
+                cEntity = new Cesium.Entity({
+                    id: bruce_models_1.ObjectUtils.UId(10),
+                    polyline: units == "px" ? {
+                        positions: posses,
+                        material: cColor,
+                        width: width,
+                        classificationType: classification,
+                        arcType: Cesium.ArcType.GEODESIC,
+                        zIndex: getZIndex(style, entity, params.tags),
+                        clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                    } : null,
+                    corridor: units == "m" ? {
+                        positions: posses,
+                        material: cColor,
+                        width: width,
+                        classificationType: classification,
+                        heightReference: heightRef,
+                        zIndex: getZIndex(style, entity, params.tags),
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
+                        cornerType: Cesium.CornerType.MITERED,
+                        shadows: Cesium.ShadowMode.ENABLED,
+                        fill: true
+                    } : null,
+                    position: entity_utils_1.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 = entity_utils_1.EntityUtils.GatherEntity({
+                    entity: cEntity,
+                });
+                if (parts.length > 1) {
+                    // Kill all expect last part. Last one is the primary entity.
+                    for (var i = 0; i < parts.length - 1; i++) {
+                        var part = parts[i];
+                        if (part && part instanceof Cesium.Entity && params.viewer.entities.contains(part)) {
+                            params.viewer.entities.remove(part);
+                        }
+                    }
+                    cEntity._siblingGraphics = [];
+                    if (cEntity._parentEntity) {
+                        console.warn("Polyline.Render: Parent entity was not null. This should not happen.");
+                    }
+                }
+                cEntity = params.rendered;
+                if (units == "px") {
+                    cEntity.polyline.positions = new Cesium.ConstantProperty(posses);
+                    cEntity.polyline.width = new Cesium.ConstantProperty(width);
+                    cEntity.polyline.classificationType = new Cesium.ConstantProperty(classification);
+                    cEntity.polyline.zIndex = new Cesium.ConstantProperty(getZIndex(style, entity, params.tags));
+                    cEntity.polyline.clampToGround = new Cesium.ConstantProperty(heightRef == Cesium.HeightReference.CLAMP_TO_GROUND);
+                    cEntity.polyline.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                    cEntity.corridor = undefined;
+                }
+                else {
+                    cEntity.corridor.positions = new Cesium.ConstantProperty(posses);
+                    cEntity.corridor.width = new Cesium.ConstantProperty(width);
+                    cEntity.corridor.classificationType = new Cesium.ConstantProperty(classification);
+                    cEntity.corridor.heightReference = new Cesium.ConstantProperty(heightRef);
+                    cEntity.corridor.zIndex = new Cesium.ConstantProperty(getZIndex(style, entity, params.tags));
+                    cEntity.corridor.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width));
+                    cEntity.polyline = undefined;
+                }
+                // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                // WARNING: polyline does not support animation (yet?).
+                cesium_entity_styler_1.CesiumEntityStyler.SetDefaultColor({
+                    color: cColor,
+                    entity: cEntity,
+                    viewer: params.viewer,
+                    override: true,
+                    requestRender: false
+                });
+                cEntity.position = new Cesium.ConstantPositionProperty(entity_utils_1.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];
@@ -1308,13 +1519,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];
@@ -1323,8 +1534,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({
@@ -1333,16 +1544,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];
@@ -1356,7 +1568,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) {
@@ -1413,30 +1625,85 @@ var EntityRenderEngine;
             if (style.drapeOver == "ALL") {
                 classification = Cesium.ClassificationType.BOTH;
             }
-            var cEntity = new Cesium.Entity({
-                id: bruce_models_1.ObjectUtils.UId(10),
-                polygon: {
-                    hierarchy: new Cesium.PolygonHierarchy(posses, holePosses.map(function (x) { return new Cesium.PolygonHierarchy(x); })),
-                    material: cFillColor,
-                    extrudedHeight: extrusion.value,
-                    extrudedHeightReference: extrusion.exHeightRef,
-                    shadows: Cesium.ShadowMode.ENABLED,
-                    heightReference: heightRef,
-                    classificationType: classification,
-                    perPositionHeight: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND ? false : true,
-                    zIndex: zIndex,
-                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true)
-                },
-                position: entity_utils_1.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 = entity_utils_1.EntityUtils.GatherEntity({
+                    entity: cEntity,
+                });
+                if (parts.length > 1) {
+                    // We'll cull all except the allowed number of siblings.
+                    cEntity._siblingGraphics = cEntity._siblingGraphics.slice(0, siblings);
+                    // We'll remove all that aren't in the allowed (direct) list.
+                    for (var i = 0; i < parts.length - 1; i++) {
+                        var part = parts[i];
+                        if (part && part instanceof Cesium.Entity && params.viewer.entities.contains(part) && !cEntity._siblingGraphics.includes(part)) {
+                            params.viewer.entities.remove(part);
+                        }
+                    }
+                    if (cEntity._parentEntity) {
+                        console.warn("Point.Render: Parent entity was not null. This should not happen.");
+                    }
+                }
+            };
+            var hasOutline = width > 0 && cLineColor;
+            var cEntity = null;
+            if (!params.rendered || !params.rendered.polygon) {
+                cEntity = new Cesium.Entity({
+                    id: bruce_models_1.ObjectUtils.UId(10),
+                    polygon: {
+                        hierarchy: new Cesium.PolygonHierarchy(posses, holePosses.map(function (x) { return new Cesium.PolygonHierarchy(x); })),
+                        material: cFillColor,
+                        extrudedHeight: extrusion.value,
+                        extrudedHeightReference: extrusion.exHeightRef,
+                        shadows: Cesium.ShadowMode.ENABLED,
+                        heightReference: heightRef,
+                        classificationType: classification,
+                        perPositionHeight: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND ? false : true,
+                        zIndex: zIndex,
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true)
+                    },
+                    position: entity_utils_1.EntityUtils.GetPos({
+                        viewer: params.viewer,
+                        entity: entity,
+                        recordHeightRef: heightRef,
+                        returnHeightRef: heightRef
+                    }),
+                    show: true
+                });
+            }
+            else {
+                // Polygons can have more siblings for the related hole graphics.
+                // So this is a "good enough" way rather than perfect as it only preserves the outline.
+                prepareExistingGraphic(params.rendered, hasOutline ? 1 : 0);
+                cEntity = params.rendered;
+                cEntity.polygon.hierarchy = new Cesium.ConstantProperty(new Cesium.PolygonHierarchy(posses, holePosses.map(function (x) { return new Cesium.PolygonHierarchy(x); })));
+                cEntity.polygon.extrudedHeight = new Cesium.ConstantProperty(extrusion.value);
+                cEntity.polygon.extrudedHeightReference = new Cesium.ConstantProperty(extrusion.exHeightRef);
+                cEntity.polygon.shadows = new Cesium.ConstantProperty(Cesium.ShadowMode.ENABLED);
+                cEntity.polygon.heightReference = new Cesium.ConstantProperty(heightRef);
+                cEntity.polygon.classificationType = new Cesium.ConstantProperty(classification);
+                cEntity.polygon.perPositionHeight = new Cesium.ConstantProperty(heightRef == Cesium.HeightReference.CLAMP_TO_GROUND ? false : true);
+                cEntity.polygon.zIndex = new Cesium.ConstantProperty(zIndex);
+                cEntity.polygon.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true));
+                cEntity.position = new Cesium.ConstantPositionProperty(entity_utils_1.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?).
+                cesium_entity_styler_1.CesiumEntityStyler.SetDefaultColor({
+                    color: cFillColor,
+                    entity: cEntity,
+                    viewer: params.viewer,
+                    override: true,
+                    requestRender: false
+                });
+                cEntity.show = true;
+            }
+            if (hasOutline) {
                 var borderHeight = undefined;
                 if (heightRef != Cesium.HeightReference.CLAMP_TO_GROUND) {
                     if (flattenPoints) {
@@ -1460,33 +1727,62 @@ var EntityRenderEngine;
                 else {
                     borderPosses = posses.map(function (x) { return x.clone ? x.clone() : __assign({}, x); });
                 }
-                var cEntityBorder = new Cesium.Entity({
-                    id: bruce_models_1.ObjectUtils.UId(10),
-                    polyline: units == "px" ? new Cesium.PolylineGraphics({
-                        positions: borderPosses,
-                        material: cLineColor,
-                        width: width,
-                        clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
-                        classificationType: Cesium.ClassificationType.TERRAIN,
-                        arcType: Cesium.ArcType.GEODESIC,
-                        zIndex: zIndex,
-                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                    }) : null,
-                    corridor: units == "m" ? {
-                        positions: borderPosses,
-                        material: cLineColor,
-                        heightReference: heightRef,
-                        height: borderHeight,
-                        width: width,
-                        fill: true,
-                        zIndex: zIndex + 1,
-                        cornerType: Cesium.CornerType.MITERED,
-                        classificationType: classification,
-                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
-                        shadows: Cesium.ShadowMode.ENABLED
-                    } : null,
-                    show: true
-                });
+                var cEntityBorder = (_d = (_c = params.rendered) === null || _c === void 0 ? void 0 : _c._siblingGraphics) === null || _d === void 0 ? void 0 : _d[0];
+                cEntity._siblingGraphics = [];
+                if (!cEntityBorder || ((!cEntityBorder.polyline && units == "px") ||
+                    (!cEntityBorder.corridor && units == "m"))) {
+                    cEntityBorder = new Cesium.Entity({
+                        id: bruce_models_1.ObjectUtils.UId(10),
+                        polyline: units == "px" ? new Cesium.PolylineGraphics({
+                            positions: borderPosses,
+                            material: cLineColor,
+                            width: width,
+                            clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
+                            classificationType: Cesium.ClassificationType.TERRAIN,
+                            arcType: Cesium.ArcType.GEODESIC,
+                            zIndex: zIndex,
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                        }) : null,
+                        corridor: units == "m" ? {
+                            positions: borderPosses,
+                            material: cLineColor,
+                            heightReference: heightRef,
+                            height: borderHeight,
+                            width: width,
+                            fill: true,
+                            zIndex: zIndex + 1,
+                            cornerType: Cesium.CornerType.MITERED,
+                            classificationType: classification,
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
+                            shadows: Cesium.ShadowMode.ENABLED
+                        } : null,
+                        show: true
+                    });
+                }
+                else {
+                    if (units == "px") {
+                        cEntityBorder.polyline.positions = new Cesium.ConstantProperty(borderPosses);
+                        cEntityBorder.polyline.width = new Cesium.ConstantProperty(width);
+                        cEntityBorder.polyline.clampToGround = new Cesium.ConstantProperty(heightRef == Cesium.HeightReference.CLAMP_TO_GROUND);
+                        cEntityBorder.polyline.classificationType = new Cesium.ConstantProperty(Cesium.ClassificationType.TERRAIN);
+                        cEntityBorder.polyline.zIndex = new Cesium.ConstantProperty(zIndex);
+                        cEntityBorder.polyline.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                        cEntityBorder.polyline.material = new Cesium.ColorMaterialProperty(cLineColor);
+                        cEntityBorder.corridor = undefined;
+                    }
+                    else {
+                        cEntityBorder.corridor.positions = new Cesium.ConstantProperty(borderPosses);
+                        cEntityBorder.corridor.heightReference = new Cesium.ConstantProperty(heightRef);
+                        cEntityBorder.corridor.height = new Cesium.ConstantProperty(borderHeight);
+                        cEntityBorder.corridor.width = new Cesium.ConstantProperty(width);
+                        cEntityBorder.corridor.fill = new Cesium.ConstantProperty(true);
+                        cEntityBorder.corridor.zIndex = new Cesium.ConstantProperty(zIndex + 1);
+                        cEntityBorder.corridor.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width));
+                        cEntityBorder.corridor.material = new Cesium.ColorMaterialProperty(cLineColor);
+                        cEntityBorder.polyline = undefined;
+                    }
+                    cEntityBorder.show = true;
+                }
                 cEntityBorder._parentEntity = cEntity;
                 cEntity._siblingGraphics.push(cEntityBorder);
                 for (var i = 0; i < holePosses.length; i++) {
@@ -1523,20 +1819,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];
@@ -1544,13 +1843,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];
@@ -1559,8 +1858,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({
@@ -1569,16 +1868,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];
@@ -1642,8 +1942,9 @@ var EntityRenderEngine;
                     color = colorToCColor(bColor);
                 }
             }
-            var cEntity = new Cesium.Entity({
-                id: bruce_models_1.ObjectUtils.UId(10),
+            /*
+            const cEntity: ICesiumEntityExt = new Cesium.Entity({
+                id: ObjectUtils.UId(10),
                 model: {
                     uri: params.lodUrl,
                     heightReference: heightRef,
@@ -1651,13 +1952,89 @@ var EntityRenderEngine;
                     shadows: Cesium.ShadowMode.ENABLED,
                     colorBlendAmount: blendAmount,
                     colorBlendMode: blendMode,
-                    color: color,
+                    color: new Cesium.CallbackProperty(() => color, true),
                     distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                 },
                 orientation: new Cesium.ConstantProperty(orientation),
                 position: pos,
                 show: true
             });
+            */
+            var animateScale = null;
+            var cEntity = params.rendered;
+            if (!cEntity || !cEntity.model) {
+                cEntity = new Cesium.Entity({
+                    id: bruce_models_1.ObjectUtils.UId(10),
+                    model: {
+                        uri: params.lodUrl,
+                        heightReference: heightRef,
+                        scale: new Cesium.CallbackProperty(function () { return scale * styleScale; }, true),
+                        shadows: Cesium.ShadowMode.ENABLED,
+                        colorBlendAmount: blendAmount,
+                        colorBlendMode: blendMode,
+                        color: new Cesium.CallbackProperty(function () { return color; }, true),
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                    },
+                    orientation: new Cesium.ConstantProperty(orientation),
+                    position: pos,
+                    show: true
+                });
+            }
+            else {
+                // Gather entity in case previous version had sibling graphics we no longer need.
+                var parts = entity_utils_1.EntityUtils.GatherEntity({
+                    entity: cEntity,
+                });
+                if (parts.length > 1) {
+                    // Kill all expect last part. Last one is the primary entity.
+                    for (var i = 0; i < parts.length - 1; i++) {
+                        var part = parts[i];
+                        if (part && part instanceof Cesium.Entity && params.viewer.entities.contains(part)) {
+                            params.viewer.entities.remove(part);
+                        }
+                    }
+                    cEntity._siblingGraphics = [];
+                    if (cEntity._parentEntity) {
+                        console.warn("Model3d.Render: Parent entity was not null. This should not happen.");
+                    }
+                }
+                var currentUri = getValue(params.viewer, cEntity.model.uri);
+                if (currentUri != params.lodUrl) {
+                    cEntity.model.uri = new Cesium.ConstantProperty(params.lodUrl);
+                }
+                cEntity.model.heightReference = new Cesium.ConstantProperty(heightRef);
+                cEntity.model.shadows = new Cesium.ConstantProperty(Cesium.ShadowMode.ENABLED);
+                cEntity.model.colorBlendAmount = new Cesium.ConstantProperty(blendAmount);
+                cEntity.model.colorBlendMode = new Cesium.ConstantProperty(blendMode);
+                cEntity.model.distanceDisplayCondition = new Cesium.ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                cEntity.orientation = new Cesium.ConstantProperty(orientation);
+                cEntity.position = new Cesium.ConstantPositionProperty(pos);
+                // Same file but different scale. We'll animate the scale.
+                var prevClientFileId = cEntity.model._clientFileId;
+                if (prevClientFileId == params.lodClientFileId) {
+                    animateScale = new cesium_animated_property_1.CesiumAnimatedProperty.AnimateNumber({
+                        durationMs: 200,
+                        value: scale * styleScale,
+                        viewer: params.viewer,
+                        startValue: cEntity.model.scale,
+                        startPaused: true
+                    });
+                    cEntity.model.scale = new Cesium.CallbackProperty(function () { return animateScale.GetValue(); }, false);
+                }
+                else {
+                    cEntity.model.scale = new Cesium.CallbackProperty(function () { return scale * styleScale; }, true);
+                }
+                // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                // cEntity.model.color = new Cesium.CallbackProperty(() => color, true);
+                cesium_entity_styler_1.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) {
@@ -1736,6 +2113,10 @@ var EntityRenderEngine;
                         visual_register_culler_1.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;
@@ -1748,16 +2129,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,
@@ -1765,7 +2146,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];
@@ -1773,13 +2154,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];
@@ -1788,8 +2169,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 ? bruce_models_1.Calculator.GetString(mStyle.lodGroup, entity, tags) : null;
@@ -1810,7 +2191,7 @@ var EntityRenderEngine;
                                 "group": group,
                                 "level": level
                             });
-                            _g.label = 8;
+                            _h.label = 8;
                         case 8:
                             i++;
                             return [3 /*break*/, 2];
@@ -1819,24 +2200,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];
@@ -1845,8 +2226,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)) {
@@ -1854,6 +2235,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,
@@ -1870,23 +2252,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];