bruce-cesium 3.2.4 → 3.2.6

package/dist/bruce-cesium.umd.js

@@ -691,7 +691,7 @@
     })(exports.ViewUtils || (exports.ViewUtils = {}));
 
     /**
-     * Returns if a given visual is alive and in the scene.
+     * Returns if a given visual can be styled by this utility.
      * @param viewer
      * @param visual
      * @returns
@@ -701,10 +701,10 @@
             return false;
         }
         if (visual instanceof Cesium.Entity) {
-            return viewer.entities.contains(visual);
+            return true;
         }
         else if (visual instanceof Cesium.Primitive) {
-            return viewer.scene.primitives.contains(visual);
+            return true;
         }
         else if (visual instanceof Cesium.Cesium3DTileFeature) {
             var cTileset = visual === null || visual === void 0 ? void 0 : visual.tileset;
@@ -718,133 +718,589 @@
         }
         return false;
     }
-    function traverseEntity(cEntity, arr, ignoreParent) {
-        if (cEntity._parentEntity && !ignoreParent) {
-            traverseEntity(cEntity._parentEntity, arr, false);
+    var _selectColor = Cesium.Color.fromAlpha(Cesium.Color.YELLOW, 0.5);
+    var _highlightColor = Cesium.Color.fromCssColorString("#33b1ff").withAlpha(0.5);
+    var STORE_COLOR_PREFIX = "_storeColor_";
+    function getStoreKey(key) {
+        return STORE_COLOR_PREFIX + key;
+    }
+    var STORE_KEY_STATE_PREFIX = "_storeKeyState_";
+    function getStoreStateKey(key) {
+        return STORE_KEY_STATE_PREFIX + key;
+    }
+    var LAST_APPLIED_OPACITY_KEY = "_lastAppliedOpacityKey";
+    /**
+     * Returns a color property from a graphic.
+     * This will turn materials properties into colors before returning them.
+     * @param viewer
+     * @param prop
+     * @returns
+     */
+    function getCesiumColorValue(viewer, prop) {
+        if (!prop) {
+            return Cesium.Color.WHITE;
         }
-        if (cEntity._siblingGraphics) {
-            for (var i = 0; i < cEntity._siblingGraphics.length; i++) {
-                var sibling = cEntity._siblingGraphics[i];
-                traverseEntity(sibling, arr, true);
-            }
+        if (prop.getValue) {
+            prop = prop.getValue(viewer.scene.lastRenderTime);
         }
-        arr.push(cEntity);
+        if (prop instanceof Cesium.Color) {
+            return prop;
+        }
+        var tmp = prop === null || prop === void 0 ? void 0 : prop.color;
+        if (tmp === null || tmp === void 0 ? void 0 : tmp.getValue) {
+            tmp = tmp.getValue(viewer.scene.lastRenderTime);
+        }
+        return tmp ? tmp : Cesium.Color.WHITE;
     }
-    var ORG_OPACITY_KEY = "_org_opacity_";
-    var NEW_OPACITY_KEY = "_new_opacity_";
-    function getColor(viewer, material) {
-        var _a, _b;
-        function findColor() {
-            if (!material) {
-                return Cesium.Color.WHITE;
+    /**
+     * Returns the current color of a graphic.
+     * @param viewer
+     * @param graphic
+     * @returns
+     */
+    function calculateCurColor(viewer, graphic) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var color;
+        if (graphic instanceof Cesium.Cesium3DTileFeature) {
+            color = (_a = graphic.color) !== null && _a !== void 0 ? _a : new Cesium.Color();
+        }
+        else if (graphic instanceof Cesium.ModelGraphics) {
+            color = (_b = getCesiumColorValue(viewer, graphic.color)) !== null && _b !== void 0 ? _b : new Cesium.Color();
+        }
+        else if (graphic instanceof Cesium.PolygonGraphics) {
+            color = (_c = getCesiumColorValue(viewer, graphic.material)) !== null && _c !== void 0 ? _c : new Cesium.Color();
+        }
+        else if (graphic instanceof Cesium.PolylineGraphics) {
+            color = (_d = getCesiumColorValue(viewer, graphic.material)) !== null && _d !== void 0 ? _d : new Cesium.Color();
+        }
+        else if (graphic instanceof Cesium.CorridorGraphics) {
+            color = (_e = getCesiumColorValue(viewer, graphic.material)) !== null && _e !== void 0 ? _e : new Cesium.Color();
+        }
+        else if (graphic instanceof Cesium.PointGraphics) {
+            color = (_f = getCesiumColorValue(viewer, graphic.color)) !== null && _f !== void 0 ? _f : new Cesium.Color();
+        }
+        else if (graphic instanceof Cesium.BillboardGraphics) {
+            color = (_g = getCesiumColorValue(viewer, graphic.color)) !== null && _g !== void 0 ? _g : new Cesium.Color();
+        }
+        else if (graphic instanceof Cesium.EllipseGraphics) {
+            color = (_h = getCesiumColorValue(viewer, graphic.material)) !== null && _h !== void 0 ? _h : new Cesium.Color();
+        }
+        return color;
+    }
+    /**
+     * Stores a copy of the color against a key within the graphic.
+     * This lets us refer to it later if we need to change to it.
+     * @param viewer
+     * @param key
+     * @param color
+     * @param graphic
+     */
+    function storeColor(viewer, key, color, graphic) {
+        graphic[getStoreKey(key)] = (color === null || color === void 0 ? void 0 : color.clone) ? color.clone() : color;
+    }
+    /**
+     * Returns a stored color for a graphic.
+     * If no color is stored, it will calculate and store the default color.
+     * @param viewer
+     * @param key
+     * @param graphic
+     * @returns
+     */
+    function getColor(viewer, key, graphic) {
+        var color = graphic[getStoreKey(key)];
+        // If no color is stored for the default color, we'll calculate and store it.
+        if (!color) {
+            if (key == "default") {
+                color = calculateCurColor(viewer, graphic);
             }
-            if (material.getValue) {
-                material = material.getValue(viewer.scene.lastRenderTime);
+            else if (key == "select") {
+                color = _selectColor;
             }
-            if (material instanceof Cesium.Color) {
-                return material;
+            else if (key == "highlight") {
+                color = _highlightColor;
             }
-            var tmp = material === null || material === void 0 ? void 0 : material.color;
-            if (tmp === null || tmp === void 0 ? void 0 : tmp.getValue) {
-                tmp = tmp.getValue(viewer.scene.lastRenderTime);
+            if (color) {
+                storeColor(viewer, key, color, graphic);
             }
-            return tmp ? tmp : Cesium.Color.WHITE;
-        }
-        return (_b = (_a = findColor()) === null || _a === void 0 ? void 0 : _a.clone) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }
-    function applyOpacityToColor(viewer, opacity, material) {
-        var color = getColor(viewer, material);
-        if (color) {
-            color.alpha = opacity;
         }
         return color;
     }
-    function applyOpacityToGraphic(viewer, entity, graphicKey, materialKey, opacity) {
-        var color = applyOpacityToColor(viewer, opacity, entity[graphicKey][materialKey]);
-        if (color) {
-            entity[graphicKey][materialKey] = materialKey == "material" ? new Cesium.ColorMaterialProperty(color) : color;
+    /**
+     * Applies opacity to current color.
+     * @param viewer
+     * @param opacity
+     * @param graphic
+     */
+    function applyOpacity(viewer, opacity, graphic) {
+        refreshColor(viewer, graphic, opacity);
+    }
+    /**
+     * Applies a color to a graphic based on the current key states.
+     * Eg: if the graphic is selected, it will apply the selected color.
+     * @param viewer
+     * @param graphic
+     * @param opacity
+     */
+    function refreshColor(viewer, graphic, opacity) {
+        var _a;
+        // Calculate what color key we should apply.
+        var key = "default";
+        if (getKeyState(graphic, "select")) {
+            key = "select";
+        }
+        else if (getKeyState(graphic, "highlight")) {
+            key = "highlight";
+        }
+        // This ensures that the default color is always stored prior to applying a new color.
+        if (key != "default") {
+            getColor(viewer, "default", graphic);
+        }
+        var color = (_a = getColor(viewer, key, graphic)) !== null && _a !== void 0 ? _a : Cesium.Color.WHITE;
+        // If we're highlighting and it's selected, don't change the color.
+        if (key != "highlight" || getKeyState(graphic, "select") == false) {
+            color = color.clone();
+            // Multiply opacity if one is set.
+            if (opacity != null) {
+                // Not sure if this will ever be needed.
+                // The original code had a null-check but I suspect it was because it may not been a Cesium color instance.
+                if (color.alpha == null) {
+                    color.alpha = 1;
+                }
+                color.alpha *= opacity;
+                // Cesium ignores pure white so if we want opacity and it's white, we'll set a tiny blue value.
+                if (color.equals(Cesium.Color.WHITE)) {
+                    color.blue = 0.0001;
+                }
+            }
+            if (graphic instanceof Cesium.Cesium3DTileFeature) {
+                graphic.color = color;
+            }
+            else if (graphic instanceof Cesium.ModelGraphics) {
+                graphic.color = color;
+            }
+            else if (graphic instanceof Cesium.PolygonGraphics) {
+                graphic.material = new Cesium.ColorMaterialProperty(color);
+            }
+            else if (graphic instanceof Cesium.PolylineGraphics) {
+                graphic.material = new Cesium.ColorMaterialProperty(color);
+            }
+            else if (graphic instanceof Cesium.CorridorGraphics) {
+                graphic.material = new Cesium.ColorMaterialProperty(color);
+            }
+            else if (graphic instanceof Cesium.PointGraphics) {
+                graphic.color = color;
+            }
+            else if (graphic instanceof Cesium.BillboardGraphics) {
+                graphic.color = color;
+            }
+            else if (graphic instanceof Cesium.EllipseGraphics) {
+                graphic.material = new Cesium.ColorMaterialProperty(color);
+            }
+            graphic[LAST_APPLIED_OPACITY_KEY] = opacity;
+        }
+        // Record the state of the current key.
+        graphic[getStoreStateKey(key)] = true;
+        // This means other keys are false.
+        if (key == "default") {
+            graphic[getStoreStateKey("select")] = false;
+            graphic[getStoreStateKey("highlight")] = false;
+        }
+        // This means 'default' is false.
+        else {
+            graphic[getStoreStateKey("default")] = false;
         }
     }
-    function revertAppliedEntityOpacity(viewer, entity) {
-        if (!isAlive(viewer, entity)) {
-            return;
+    /**
+     * Returns the last applied opacity for a graphic.
+     * This is used to ensure that we don't lose the opacity when we change color.
+     * @param graphic
+     * @returns
+     */
+    function getAppliedOpacity(graphic) {
+        return isNaN(graphic[LAST_APPLIED_OPACITY_KEY]) ? null : graphic[LAST_APPLIED_OPACITY_KEY];
+    }
+    /**
+     * Returns the state of a key for a graphic.
+     * Eg: if the graphic is selected, this will return true for the select key.
+     * A graphic may have multiple active states, but only one color can be applied at a time.
+     * @param graphic
+     * @param key
+     * @returns
+     */
+    function getKeyState(graphic, key) {
+        var value = graphic[getStoreStateKey(key)];
+        return value == null ? false : value;
+    }
+    /**
+     * Internal utility to help with managing Cesium Entity styling.
+     * Do not expose this to public as it will likely be killed and replaced with something that do animated changes.
+     */
+    var CesiumEntityStyler;
+    (function (CesiumEntityStyler) {
+        function UpdateColorSetting(key, color) {
+            if (key == "select") {
+                _selectColor = color.clone();
+            }
+            else if (key == "highlight") {
+                _highlightColor = color.clone();
+            }
+        }
+        CesiumEntityStyler.UpdateColorSetting = UpdateColorSetting;
+        /**
+         * Updates the opacity of the graphic.
+         * This will multiply against the current colour's opacity before applying.
+         * @param params
+         * @returns
+         */
+        function SetOpacity(params) {
+            var viewer = params.viewer, entity = params.entity, opacity = params.opacity, requestRender = params.requestRender;
+            if (!entity) {
+                return;
+            }
+            var parts = exports.EntityUtils.GatherEntity({
+                entity: entity
+            });
+            for (var i = 0; i < parts.length; i++) {
+                var part = parts[i];
+                if (!isAlive(viewer, part)) {
+                    continue;
+                }
+                if (part instanceof Cesium.Cesium3DTileFeature) {
+                    applyOpacity(viewer, opacity, part);
+                }
+                else if (part instanceof Cesium.Entity) {
+                    if (part.billboard) {
+                        applyOpacity(viewer, opacity, part.billboard);
+                    }
+                    if (part.model) {
+                        applyOpacity(viewer, opacity, part.model);
+                    }
+                    if (part.polyline) {
+                        applyOpacity(viewer, opacity, part.polyline);
+                    }
+                    if (part.polygon) {
+                        applyOpacity(viewer, opacity, part.polygon);
+                    }
+                    if (part.corridor) {
+                        applyOpacity(viewer, opacity, part.corridor);
+                    }
+                    if (part.point) {
+                        applyOpacity(viewer, opacity, part.point);
+                    }
+                    if (part.ellipse) {
+                        applyOpacity(viewer, opacity, part.ellipse);
+                    }
+                }
+            }
+            if (requestRender != false) {
+                viewer.scene.requestRender();
+            }
         }
-        entity[NEW_OPACITY_KEY] = null;
-        if (entity instanceof Cesium.Entity) {
-            var processKey = function (graphicKey, materialKey) {
-                if (materialKey === void 0) { materialKey = "material"; }
-                if (entity[graphicKey]) {
-                    var orgOpacity = entity[graphicKey][ORG_OPACITY_KEY];
-                    if (orgOpacity != null) {
-                        applyOpacityToGraphic(viewer, entity, graphicKey, materialKey, orgOpacity);
+        CesiumEntityStyler.SetOpacity = SetOpacity;
+        /**
+         * Returns the opacity of a graphic.
+         * This will return the last applied opacity. If no opacity has been applied, it will return null.
+         * @param params
+         */
+        function GetOpacity(params) {
+            var entity = params.entity;
+            if (!entity) {
+                return null;
+            }
+            var parts = exports.EntityUtils.GatherEntity({
+                entity: entity
+            });
+            for (var i = 0; i < parts.length; i++) {
+                var part = parts[i];
+                if (part instanceof Cesium.Cesium3DTileFeature) {
+                    return getAppliedOpacity(part);
+                }
+                else if (part instanceof Cesium.Entity) {
+                    if (part.billboard) {
+                        return getAppliedOpacity(part.billboard);
+                    }
+                    if (part.model) {
+                        return getAppliedOpacity(part.model);
+                    }
+                    if (part.polyline) {
+                        return getAppliedOpacity(part.polyline);
+                    }
+                    if (part.polygon) {
+                        return getAppliedOpacity(part.polygon);
+                    }
+                    if (part.corridor) {
+                        return getAppliedOpacity(part.corridor);
+                    }
+                    if (part.point) {
+                        return getAppliedOpacity(part.point);
+                    }
+                    if (part.ellipse) {
+                        return getAppliedOpacity(part.ellipse);
                     }
-                    entity[graphicKey][ORG_OPACITY_KEY] = null;
                 }
-            };
-            processKey("polygon");
-            processKey("polyline");
-            processKey("point", "color");
-            processKey("ellipse");
-            processKey("model", "color");
-            processKey("corridor");
-            processKey("billboard", "color");
-        }
-        else if (entity instanceof Cesium.Cesium3DTileFeature) {
-            var orgOpacity = entity[ORG_OPACITY_KEY];
-            if (orgOpacity != null) {
-                var color = entity.color ? entity.color.clone() : new Cesium.Color();
-                color.alpha = orgOpacity;
-                entity.color = color;
-            }
-            entity[ORG_OPACITY_KEY] = null;
+            }
+            return null;
         }
-    }
-    function applyOpacityToEntity(viewer, opacity, entity) {
-        if (!isAlive(viewer, entity)) {
-            return;
+        CesiumEntityStyler.GetOpacity = GetOpacity;
+        /**
+         * Clears the opacity from a graphic and refreshes it.
+         * Eg: if it is selected it will change the color to the selected color with the original selection opacity.
+         * @param params
+         */
+        function ClearOpacity(params) {
+            SetOpacity({
+                viewer: params.viewer,
+                entity: params.entity,
+                opacity: null,
+                requestRender: params.requestRender
+            });
         }
-        entity[NEW_OPACITY_KEY] = opacity;
-        if (entity instanceof Cesium.Entity) {
-            var processKey = function (graphicKey, materialKey) {
-                var _a;
-                if (materialKey === void 0) { materialKey = "material"; }
-                if (entity[graphicKey]) {
-                    var orgOpacity = entity[graphicKey][ORG_OPACITY_KEY];
-                    if (orgOpacity == null) {
-                        entity[graphicKey][ORG_OPACITY_KEY] = (_a = getColor(viewer, entity[graphicKey][materialKey])) === null || _a === void 0 ? void 0 : _a.alpha;
+        CesiumEntityStyler.ClearOpacity = ClearOpacity;
+        /**
+         * Selects a graphic and refreshes it.
+         * @param params
+         */
+        function Select(params) {
+            var viewer = params.viewer, entity = params.entity, requestRender = params.requestRender;
+            if (!entity) {
+                return;
+            }
+            var parts = exports.EntityUtils.GatherEntity({
+                entity: entity
+            });
+            for (var i = 0; i < parts.length; i++) {
+                var part = parts[i];
+                if (!isAlive(viewer, part)) {
+                    continue;
+                }
+                if (part instanceof Cesium.Cesium3DTileFeature) {
+                    var opacity = getAppliedOpacity(part);
+                    part[getStoreStateKey("select")] = true;
+                    refreshColor(viewer, part, opacity);
+                }
+                else if (part instanceof Cesium.Entity) {
+                    if (part.billboard) {
+                        part.billboard[getStoreStateKey("select")] = true;
+                        refreshColor(viewer, part.billboard, getAppliedOpacity(part.billboard));
                     }
-                    if (orgOpacity == null) {
-                        orgOpacity = 1;
+                    if (part.model) {
+                        part.model[getStoreStateKey("select")] = true;
+                        refreshColor(viewer, part.model, getAppliedOpacity(part.model));
+                    }
+                    if (part.polyline) {
+                        part.polyline[getStoreStateKey("select")] = true;
+                        refreshColor(viewer, part.polyline, getAppliedOpacity(part.polyline));
+                    }
+                    if (part.polygon) {
+                        part.polygon[getStoreStateKey("select")] = true;
+                        refreshColor(viewer, part.polygon, getAppliedOpacity(part.polygon));
+                    }
+                    if (part.corridor) {
+                        part.corridor[getStoreStateKey("select")] = true;
+                        refreshColor(viewer, part.corridor, getAppliedOpacity(part.corridor));
+                    }
+                    if (part.point) {
+                        part.point[getStoreStateKey("select")] = true;
+                        refreshColor(viewer, part.point, getAppliedOpacity(part.point));
+                    }
+                    if (part.ellipse) {
+                        part.ellipse[getStoreStateKey("select")] = true;
+                        refreshColor(viewer, part.ellipse, getAppliedOpacity(part.ellipse));
                     }
-                    applyOpacityToGraphic(viewer, entity, graphicKey, materialKey, opacity * orgOpacity);
                 }
-            };
-            processKey("polygon");
-            processKey("polyline");
-            processKey("point", "color");
-            processKey("ellipse");
-            processKey("model", "color");
-            processKey("corridor");
-            processKey("billboard", "color");
+            }
+            if (requestRender != false) {
+                viewer.scene.requestRender();
+            }
         }
-        else if (entity instanceof Cesium.Cesium3DTileFeature) {
-            var orgOpacity = entity[ORG_OPACITY_KEY];
-            if (orgOpacity == null) {
-                entity[ORG_OPACITY_KEY] = entity.color ? entity.color.alpha : 1;
+        CesiumEntityStyler.Select = Select;
+        /**
+         * Deselects a graphic and refreshes it.
+         * If the graphic is highlighted, it will change the color to the highlighted color.
+         * @param params
+         */
+        function Deselect(params) {
+            var viewer = params.viewer, entity = params.entity, requestRender = params.requestRender;
+            if (!entity) {
+                return;
             }
-            if (!orgOpacity) {
-                orgOpacity = 1;
+            var parts = exports.EntityUtils.GatherEntity({
+                entity: entity
+            });
+            for (var i = 0; i < parts.length; i++) {
+                var part = parts[i];
+                if (!isAlive(viewer, part)) {
+                    continue;
+                }
+                if (part instanceof Cesium.Cesium3DTileFeature) {
+                    var opacity = getAppliedOpacity(part);
+                    part[getStoreStateKey("select")] = false;
+                    refreshColor(viewer, part, opacity);
+                }
+                else if (part instanceof Cesium.Entity) {
+                    if (part.billboard) {
+                        part.billboard[getStoreStateKey("select")] = false;
+                        refreshColor(viewer, part.billboard, getAppliedOpacity(part.billboard));
+                    }
+                    if (part.model) {
+                        part.model[getStoreStateKey("select")] = false;
+                        refreshColor(viewer, part.model, getAppliedOpacity(part.model));
+                    }
+                    if (part.polyline) {
+                        part.polyline[getStoreStateKey("select")] = false;
+                        refreshColor(viewer, part.polyline, getAppliedOpacity(part.polyline));
+                    }
+                    if (part.polygon) {
+                        part.polygon[getStoreStateKey("select")] = false;
+                        refreshColor(viewer, part.polygon, getAppliedOpacity(part.polygon));
+                    }
+                    if (part.corridor) {
+                        part.corridor[getStoreStateKey("select")] = false;
+                        refreshColor(viewer, part.corridor, getAppliedOpacity(part.corridor));
+                    }
+                    if (part.point) {
+                        part.point[getStoreStateKey("select")] = false;
+                        refreshColor(viewer, part.point, getAppliedOpacity(part.point));
+                    }
+                    if (part.ellipse) {
+                        part.ellipse[getStoreStateKey("select")] = false;
+                        refreshColor(viewer, part.ellipse, getAppliedOpacity(part.ellipse));
+                    }
+                }
             }
-            var color = entity.color ? entity.color.clone() : new Cesium.Color();
-            color.alpha = opacity * orgOpacity;
-            if (color.equals(Cesium.Color.WHITE)) {
-                color.blue = 0.0001;
+            if (requestRender != false) {
+                viewer.scene.requestRender();
             }
-            entity.color = color;
         }
-    }
-    function findOpacity(entity) {
-        return entity ? entity[NEW_OPACITY_KEY] : null;
+        CesiumEntityStyler.Deselect = Deselect;
+        /**
+         * Highlights a graphic and refreshes it.
+         * If the graphic is selected, it will not change the color.
+         * @param params
+         */
+        function Highlight(params) {
+            var viewer = params.viewer, entity = params.entity, requestRender = params.requestRender;
+            if (!entity) {
+                return;
+            }
+            var parts = exports.EntityUtils.GatherEntity({
+                entity: entity
+            });
+            for (var i = 0; i < parts.length; i++) {
+                var part = parts[i];
+                if (!isAlive(viewer, part)) {
+                    continue;
+                }
+                if (part instanceof Cesium.Cesium3DTileFeature) {
+                    part[getStoreStateKey("highlight")] = true;
+                    refreshColor(viewer, part, getAppliedOpacity(part));
+                }
+                else if (part instanceof Cesium.Entity) {
+                    if (part.billboard) {
+                        part.billboard[getStoreStateKey("highlight")] = true;
+                        refreshColor(viewer, part.billboard, getAppliedOpacity(part.billboard));
+                    }
+                    if (part.model) {
+                        part.model[getStoreStateKey("highlight")] = true;
+                        refreshColor(viewer, part.model, getAppliedOpacity(part.model));
+                    }
+                    if (part.polyline) {
+                        part.polyline[getStoreStateKey("highlight")] = true;
+                        refreshColor(viewer, part.polyline, getAppliedOpacity(part.polyline));
+                    }
+                    if (part.polygon) {
+                        part.polygon[getStoreStateKey("highlight")] = true;
+                        refreshColor(viewer, part.polygon, getAppliedOpacity(part.polygon));
+                    }
+                    if (part.corridor) {
+                        part.corridor[getStoreStateKey("highlight")] = true;
+                        refreshColor(viewer, part.corridor, getAppliedOpacity(part.corridor));
+                    }
+                    if (part.point) {
+                        part.point[getStoreStateKey("highlight")] = true;
+                        refreshColor(viewer, part.point, getAppliedOpacity(part.point));
+                    }
+                    if (part.ellipse) {
+                        part.ellipse[getStoreStateKey("highlight")] = true;
+                        refreshColor(viewer, part.ellipse, getAppliedOpacity(part.ellipse));
+                    }
+                }
+            }
+            if (requestRender != false) {
+                viewer.scene.requestRender();
+            }
+        }
+        CesiumEntityStyler.Highlight = Highlight;
+        /**
+         * Removes the highlight from a graphic and refreshes it.
+         * @param params
+         */
+        function Unhighlight(params) {
+            var viewer = params.viewer, entity = params.entity, requestRender = params.requestRender;
+            if (!entity) {
+                return;
+            }
+            var parts = exports.EntityUtils.GatherEntity({
+                entity: entity
+            });
+            for (var i = 0; i < parts.length; i++) {
+                var part = parts[i];
+                if (!isAlive(viewer, part)) {
+                    continue;
+                }
+                if (part instanceof Cesium.Cesium3DTileFeature) {
+                    part[getStoreStateKey("highlight")] = false;
+                    refreshColor(viewer, part, getAppliedOpacity(part));
+                }
+                else if (part instanceof Cesium.Entity) {
+                    if (part.billboard) {
+                        part.billboard[getStoreStateKey("highlight")] = false;
+                        refreshColor(viewer, part.billboard, getAppliedOpacity(part.billboard));
+                    }
+                    if (part.model) {
+                        part.model[getStoreStateKey("highlight")] = false;
+                        refreshColor(viewer, part.model, getAppliedOpacity(part.model));
+                    }
+                    if (part.polyline) {
+                        part.polyline[getStoreStateKey("highlight")] = false;
+                        refreshColor(viewer, part.polyline, getAppliedOpacity(part.polyline));
+                    }
+                    if (part.polygon) {
+                        part.polygon[getStoreStateKey("highlight")] = false;
+                        refreshColor(viewer, part.polygon, getAppliedOpacity(part.polygon));
+                    }
+                    if (part.corridor) {
+                        part.corridor[getStoreStateKey("highlight")] = false;
+                        refreshColor(viewer, part.corridor, getAppliedOpacity(part.corridor));
+                    }
+                    if (part.point) {
+                        part.point[getStoreStateKey("highlight")] = false;
+                        refreshColor(viewer, part.point, getAppliedOpacity(part.point));
+                    }
+                    if (part.ellipse) {
+                        part.ellipse[getStoreStateKey("highlight")] = false;
+                        refreshColor(viewer, part.ellipse, getAppliedOpacity(part.ellipse));
+                    }
+                }
+            }
+            if (requestRender != false) {
+                viewer.scene.requestRender();
+            }
+        }
+        CesiumEntityStyler.Unhighlight = Unhighlight;
+    })(CesiumEntityStyler || (CesiumEntityStyler = {}));
+
+    function traverseEntity(cEntity, arr, ignoreParent) {
+        if (cEntity._parentEntity && !ignoreParent) {
+            traverseEntity(cEntity._parentEntity, arr, false);
+        }
+        if (cEntity._siblingGraphics) {
+            for (var i = 0; i < cEntity._siblingGraphics.length; i++) {
+                var sibling = cEntity._siblingGraphics[i];
+                traverseEntity(sibling, arr, true);
+            }
+        }
+        arr.push(cEntity);
     }
     function GetValue(viewer, obj) {
         if (obj === null || obj === void 0 ? void 0 : obj.getValue) {
@@ -1806,10 +2262,12 @@
          */
         function SetOpacity(params) {
             var viewer = params.viewer, entity = params.entity, opacity = params.opacity, requestRender = params.requestRender;
-            applyOpacityToEntity(viewer, opacity, entity);
-            if (requestRender != false) {
-                viewer.scene.requestRender();
-            }
+            CesiumEntityStyler.SetOpacity({
+                entity: entity,
+                opacity: opacity,
+                viewer: viewer,
+                requestRender: requestRender
+            });
         }
         EntityUtils.SetOpacity = SetOpacity;
         /**
@@ -1820,10 +2278,11 @@
          */
         function RevertOpacity(params) {
             var viewer = params.viewer, entity = params.entity, requestRender = params.requestRender;
-            revertAppliedEntityOpacity(viewer, entity);
-            if (requestRender != false) {
-                viewer.scene.requestRender();
-            }
+            CesiumEntityStyler.ClearOpacity({
+                entity: entity,
+                viewer: viewer,
+                requestRender: requestRender
+            });
         }
         EntityUtils.RevertOpacity = RevertOpacity;
         /**
@@ -1835,7 +2294,9 @@
          */
         function GetOpacity(params) {
             var entity = params.entity;
-            return findOpacity(entity);
+            return CesiumEntityStyler.GetOpacity({
+                entity: entity
+            });
         }
         EntityUtils.GetOpacity = GetOpacity;
     })(exports.EntityUtils || (exports.EntityUtils = {}));
@@ -2463,8 +2924,13 @@
                 var parts = exports.EntityUtils.GatherEntity({
                     entity: rego.visual
                 });
+                var isolatedIds = register.GetIsolated();
+                var hiddenIds = register.GetHidden();
                 for (var i_1 = 0; i_1 < parts.length; i_1++) {
                     var part = parts[i_1];
+                    if (!(part instanceof Cesium.Entity)) {
+                        continue;
+                    }
                     var shouldCull = shouldCullEntity(viewer, part);
                     if (shouldCull) {
                         part[VisualRegisterCuller.VISUAL_CULL_KEY] = true;
@@ -2474,7 +2940,11 @@
                     }
                     else {
                         delete part[VisualRegisterCuller.VISUAL_CULL_KEY];
-                        if (!rego.overrideShow && rego.best && !viewer.entities.contains(part)) {
+                        if (rego.overrideShow != false &&
+                            rego.best &&
+                            !viewer.entities.contains(part) &&
+                            !hiddenIds.includes(entityId) &&
+                            (isolatedIds.length <= 0 || isolatedIds.includes(entityId))) {
                             viewer.entities.add(part);
                         }
                     }
@@ -5634,137 +6104,6 @@
             }
         }
     }
-    var ORG_COLOR_KEY = "_org_color_";
-    function select(viewer, visual, color, reqRender) {
-        var _a;
-        if (!color) {
-            color = Cesium.Color.fromAlpha(Cesium.Color.YELLOW, 0.5);
-        }
-        if (visual instanceof Cesium.Entity) {
-            if (!(viewer === null || viewer === void 0 ? void 0 : viewer.scene) || viewer.isDestroyed()) {
-                return;
-            }
-            var entities = exports.EntityUtils.GatherEntity({
-                entity: visual
-            });
-            var keyMapping = {
-                "point": "color",
-                "polygon": "material",
-                "polyline": "material",
-                "model": "color",
-                "billboard": "color",
-                "corridor": "material",
-                "ellipse": "material"
-            };
-            var _loop_1 = function (i) {
-                var entity = entities[i];
-                var processGraphic = function (graphicKey, materialKey) {
-                    if (entity[graphicKey]) {
-                        if (entity[graphicKey][ORG_COLOR_KEY] == null) {
-                            var orgColor = entity[graphicKey][materialKey];
-                            if (!orgColor) {
-                                orgColor = Cesium.Color.WHITE;
-                            }
-                            entity[graphicKey][ORG_COLOR_KEY] = orgColor.clone ? orgColor.clone() : orgColor;
-                        }
-                        entity[graphicKey][materialKey] = color.clone();
-                    }
-                };
-                for (var key in keyMapping) {
-                    var map = keyMapping[key];
-                    processGraphic(key, map);
-                }
-            };
-            for (var i = 0; i < entities.length; i++) {
-                _loop_1(i);
-            }
-        }
-        if (visual instanceof Cesium.Primitive) ;
-        else if (visual instanceof Cesium.Cesium3DTileFeature) {
-            if (!isAlive$1(viewer, visual)) {
-                return;
-            }
-            var orgColor = visual[ORG_COLOR_KEY];
-            if (orgColor == null) {
-                orgColor = visual.color;
-                visual[ORG_COLOR_KEY] = (_a = orgColor === null || orgColor === void 0 ? void 0 : orgColor.clone) === null || _a === void 0 ? void 0 : _a.call(orgColor);
-            }
-            visual.color = color.clone();
-        }
-        var opacity = exports.EntityUtils.GetOpacity({
-            entity: visual
-        });
-        if (opacity != null) {
-            exports.EntityUtils.SetOpacity({
-                viewer: viewer,
-                entity: visual,
-                opacity: opacity,
-                requestRender: false
-            });
-        }
-        if (reqRender != false) {
-            viewer.scene.requestRender();
-        }
-    }
-    function deselect(viewer, visual, reqRender) {
-        if (visual instanceof Cesium.Entity) {
-            if (!(viewer === null || viewer === void 0 ? void 0 : viewer.scene) || viewer.isDestroyed()) {
-                return;
-            }
-            var entities = exports.EntityUtils.GatherEntity({
-                entity: visual
-            });
-            var keyMapping = {
-                "point": "color",
-                "polygon": "material",
-                "polyline": "material",
-                "model": "color",
-                "billboard": "color",
-                "corridor": "material",
-                "ellipse": "material"
-            };
-            var _loop_2 = function (i) {
-                var entity = entities[i];
-                var processGraphic = function (graphicKey, materialKey) {
-                    var _a;
-                    if ((_a = entity[graphicKey]) === null || _a === void 0 ? void 0 : _a[ORG_COLOR_KEY]) {
-                        entity[graphicKey][materialKey] = entity[graphicKey][ORG_COLOR_KEY];
-                    }
-                };
-                for (var key in keyMapping) {
-                    var map = keyMapping[key];
-                    processGraphic(key, map);
-                }
-            };
-            for (var i = 0; i < entities.length; i++) {
-                _loop_2(i);
-            }
-        }
-        if (visual instanceof Cesium.Primitive) ;
-        else if (visual instanceof Cesium.Cesium3DTileFeature) {
-            if (!isAlive$1(viewer, visual)) {
-                return;
-            }
-            var orgColor = visual[ORG_COLOR_KEY];
-            if (orgColor != null) {
-                visual.color = orgColor;
-            }
-        }
-        var opacity = exports.EntityUtils.GetOpacity({
-            entity: visual
-        });
-        if (opacity != null) {
-            exports.EntityUtils.SetOpacity({
-                viewer: viewer,
-                entity: visual,
-                opacity: opacity,
-                requestRender: false
-            });
-        }
-        if (reqRender != false) {
-            viewer.scene.requestRender();
-        }
-    }
     (function (VisualsRegister) {
         var EVisualUpdateType;
         (function (EVisualUpdateType) {
@@ -5781,6 +6120,7 @@
                 this.selectedIds = [];
                 this.isolatedIds = [];
                 this.hiddenIds = [];
+                this.highlightedIds = [];
                 // Entity id -> opacity for visual.
                 this.opacity = {};
                 // Array of entity ids for entities who have labels drawn for them.
@@ -5851,7 +6191,7 @@
              */
             Register.prototype.SetLabelled = function (params) {
                 var labelled = params.labelled, entityIds = params.entityIds, requestRender = params.requestRender;
-                var _loop_3 = function (i) {
+                var _loop_1 = function (i) {
                     var id = entityIds[i];
                     var index = this_1.labelledEntityIds.findIndex(function (x) { return x == id; });
                     if (labelled) {
@@ -5869,7 +6209,7 @@
                 };
                 var this_1 = this;
                 for (var i = 0; i < entityIds.length; i++) {
-                    _loop_3(i);
+                    _loop_1(i);
                 }
                 if (requestRender != false) {
                     this.viewer.scene.requestRender();
@@ -5910,7 +6250,19 @@
              * @param color
              */
             Register.prototype.SetSelectionColor = function (color) {
-                this.selectionColor = color;
+                if (color) {
+                    CesiumEntityStyler.UpdateColorSetting("select", color);
+                }
+            };
+            /**
+             * Updates the highlight color.
+             * This will not update the highlight color for already highlighted entities.
+             * @param color
+             */
+            Register.prototype.SetHighlightColor = function (color) {
+                if (color) {
+                    CesiumEntityStyler.UpdateColorSetting("highlight", color);
+                }
             };
             Register.prototype.SetSelected = function (params) {
                 var _a;
@@ -5931,7 +6283,11 @@
                             if (regos) {
                                 for (var i_1 = 0; i_1 < regos.length; i_1++) {
                                     var rego = regos[i_1];
-                                    select(this.viewer, rego.visual, this.selectionColor, false);
+                                    CesiumEntityStyler.Select({
+                                        entity: rego.visual,
+                                        viewer: this.viewer,
+                                        requestRender: false
+                                    });
                                 }
                             }
                         }
@@ -5944,7 +6300,11 @@
                             if (regos) {
                                 for (var i_2 = 0; i_2 < regos.length; i_2++) {
                                     var rego = regos[i_2];
-                                    deselect(this.viewer, rego.visual, false);
+                                    CesiumEntityStyler.Deselect({
+                                        entity: rego.visual,
+                                        viewer: this.viewer,
+                                        requestRender: false
+                                    });
                                 }
                             }
                         }
@@ -5971,7 +6331,11 @@
                     if (regos) {
                         for (var i_3 = 0; i_3 < regos.length; i_3++) {
                             var rego = regos[i_3];
-                            deselect(this.viewer, rego.visual, false);
+                            CesiumEntityStyler.Deselect({
+                                entity: rego.visual,
+                                viewer: this.viewer,
+                                requestRender: false
+                            });
                         }
                     }
                 }
@@ -5986,6 +6350,82 @@
             Register.prototype.GetSelected = function () {
                 return this.selectedIds;
             };
+            Register.prototype.SetHighlighted = function (params) {
+                var entityIds = params.entityIds, highlighted = params.highlighted, refreshIfHighlighted = params.refreshIfHighlighted, requestRender = params.requestRender;
+                if (refreshIfHighlighted == null) {
+                    refreshIfHighlighted = true;
+                }
+                for (var i = 0; i < entityIds.length; i++) {
+                    var id = entityIds[i];
+                    if (highlighted) {
+                        var doHighlight = refreshIfHighlighted;
+                        if (this.highlightedIds.indexOf(id) === -1) {
+                            this.highlightedIds.push(id);
+                            doHighlight = true;
+                        }
+                        if (doHighlight) {
+                            var regos = this.rego[id];
+                            if (regos) {
+                                for (var i_4 = 0; i_4 < regos.length; i_4++) {
+                                    var rego = regos[i_4];
+                                    CesiumEntityStyler.Highlight({
+                                        entity: rego.visual,
+                                        viewer: this.viewer,
+                                        requestRender: false
+                                    });
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        var index = this.highlightedIds.indexOf(id);
+                        if (index !== -1) {
+                            this.highlightedIds.splice(index, 1);
+                            var regos = this.rego[id];
+                            if (regos) {
+                                for (var i_5 = 0; i_5 < regos.length; i_5++) {
+                                    var rego = regos[i_5];
+                                    CesiumEntityStyler.Unhighlight({
+                                        entity: rego.visual,
+                                        viewer: this.viewer,
+                                        requestRender: false
+                                    });
+                                }
+                            }
+                        }
+                    }
+                }
+                if (requestRender != false) {
+                    this.viewer.scene.requestRender();
+                }
+            };
+            Register.prototype.GetIsHighlighted = function (params) {
+                var id = params.entityId;
+                return this.highlightedIds.indexOf(id) !== -1;
+            };
+            Register.prototype.ClearHighlighted = function (params) {
+                for (var i = 0; i < this.highlightedIds.length; i++) {
+                    var id = this.highlightedIds[i];
+                    var regos = this.rego[id];
+                    if (regos) {
+                        for (var i_6 = 0; i_6 < regos.length; i_6++) {
+                            var rego = regos[i_6];
+                            CesiumEntityStyler.Unhighlight({
+                                entity: rego.visual,
+                                viewer: this.viewer,
+                                requestRender: false
+                            });
+                        }
+                    }
+                }
+                this.highlightedIds = [];
+                if ((params === null || params === void 0 ? void 0 : params.requestRender) != false) {
+                    this.viewer.scene.requestRender();
+                }
+            };
+            Register.prototype.GetHighlighted = function () {
+                return this.highlightedIds;
+            };
             Register.prototype.SetIsolated = function (params) {
                 var _a;
                 var entityIds = params.entityIds, isolate = params.isolated, requestRender = params.requestRender;
@@ -6096,7 +6536,12 @@
                 updateEntity(this.viewer, entityId, this);
                 var selected = this.selectedIds.includes(entityId);
                 if (selected) {
-                    select(this.viewer, rego.visual, this.selectionColor, false);
+                    // select(this.viewer, rego.visual, this.selectionColor, false);
+                    CesiumEntityStyler.Select({
+                        entity: rego.visual,
+                        viewer: this.viewer,
+                        requestRender: false
+                    });
                 }
                 var opacity = this.opacity[entityId];
                 if (opacity != null && opacity != 1) {
@@ -6237,7 +6682,7 @@
                         return;
                     }
                     var menuItems = menuItemId ? [menuItemId] : entityRegos.map(function (x) { return x.menuItemId; });
-                    var _loop_4 = function (i) {
+                    var _loop_2 = function (i) {
                         var menuItemId_2 = menuItems[i];
                         var rego = entityRegos.find(function (r) { return r.menuItemId === menuItemId_2; });
                         if (!rego) {
@@ -6259,7 +6704,7 @@
                     };
                     var this_2 = this;
                     for (var i = 0; i < menuItems.length; i++) {
-                        var state_1 = _loop_4(i);
+                        var state_1 = _loop_2(i);
                         if (typeof state_1 === "object")
                             return state_1.value;
                     }
@@ -6307,7 +6752,7 @@
                 var height = Math.ceil(EnsureNumber(params.height, 5));
                 var pickLimit = Math.ceil(EnsureNumber(params.pickLimit, 5));
                 var picked = this.viewer.scene.drillPick(new Cesium.Cartesian2(cursor.x, cursor.y), pickLimit, width, height);
-                var _loop_5 = function (i) {
+                var _loop_3 = function (i) {
                     var object = picked[i];
                     var entity = (object && object.id && object.id instanceof Cesium.Entity ? object.id : object);
                     var visual = entity;
@@ -6320,7 +6765,7 @@
                 };
                 var this_3 = this;
                 for (var i = 0; i < picked.length; i++) {
-                    _loop_5(i);
+                    _loop_3(i);
                 }
                 return {
                     regos: found
@@ -6381,6 +6826,7 @@
                 var entityIds = params.entityIds, menuItemIds = params.menuItemId, requestRender = params.requestRender;
                 for (var _i = 0, entityIds_2 = entityIds; _i < entityIds_2.length; _i++) {
                     var entityId = entityIds_2[_i];
+                    this.opacity[entityId] = params.opacity;
                     var regos = this.rego[entityId];
                     if (regos && regos.length) {
                         for (var _b = 0, regos_2 = regos; _b < regos_2.length; _b++) {
@@ -6402,7 +6848,6 @@
                                         requestRender: false
                                     });
                                 }
-                                this.opacity[rego.entityId] = params.opacity;
                                 (_a = this.onUpdate) === null || _a === void 0 ? void 0 : _a.Trigger({
                                     rego: rego,
                                     type: EVisualUpdateType.Update,
@@ -14815,11 +15260,15 @@
             this._disposeCesiumEvent();
             var events = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
             var lastHoverPos = null;
+            var lastHoveredEntityId = null;
+            var unhighlightTimeout = null;
             var process2dCursor = function (pos2d, isHover) {
                 try {
                     var regos = _this._manager.VisualsRegister.GetRegosFromCursor({
                         cursor: pos2d
                     }).regos;
+                    var first = regos.length ? regos[0] : null;
+                    var firstId_1 = first === null || first === void 0 ? void 0 : first.entityId;
                     if (isHover) {
                         if (regos.length) {
                             _this._viewer.canvas.style.cursor = "pointer";
@@ -14827,13 +15276,37 @@
                         else if (_this._viewer.canvas.style.cursor) {
                             _this._viewer.canvas.style.removeProperty("cursor");
                         }
+                        clearTimeout(unhighlightTimeout);
+                        if (lastHoveredEntityId && lastHoveredEntityId != firstId_1) {
+                            _this._manager.VisualsRegister.SetHighlighted({
+                                entityIds: [lastHoveredEntityId],
+                                highlighted: false
+                            });
+                        }
+                        if (firstId_1) {
+                            unhighlightTimeout = setTimeout(function () {
+                                if (lastHoveredEntityId == firstId_1) {
+                                    _this._manager.VisualsRegister.SetHighlighted({
+                                        entityIds: [firstId_1],
+                                        highlighted: false
+                                    });
+                                    lastHoveredEntityId = null;
+                                }
+                            }, 5000);
+                            if (lastHoveredEntityId != firstId_1) {
+                                _this._manager.VisualsRegister.SetHighlighted({
+                                    entityIds: [firstId_1],
+                                    highlighted: true
+                                });
+                            }
+                        }
+                        lastHoveredEntityId = firstId_1;
                     }
                     else {
-                        var first = regos.length ? regos[0] : null;
                         _this._manager.VisualsRegister.ClearSelected();
                         if (first) {
                             _this._manager.VisualsRegister.SetSelected({
-                                entityIds: [first.entityId],
+                                entityIds: [firstId_1],
                                 selected: true
                             });
                         }
@@ -15482,6 +15955,7 @@
             var isFirstEnabled = !this._lastEnabledBookmarkId;
             this._lastEnabledBookmarkId = bookmark.ID;
             this._updateBookmark();
+            // console.log("render bookmark", bookmark.ID);
             exports.ViewRenderEngine.Render({
                 apiGetter: this._apiGetters.GetBruceGetter(),
                 bookmark: bookmark,
@@ -15508,6 +15982,20 @@
             var record = index > -1 ? this.bookmarks[index] : null;
             this._name.innerText = record ? record.Title ? record.Title : "Unnamed bookmark" : "Unknown bookmark";
             this._chip.innerText = "".concat(index > -1 ? (index + 1) + "/" : "").concat(this.bookmarks.length);
+            // Scroll the selected bookmark into view.
+            var selected = this._row.querySelector(".NextspaceBookmarksRowItem[is-selected='true']");
+            if (selected) {
+                var scrollLeft = this._row.scrollLeft;
+                var scrollRight = scrollLeft + this._row.clientWidth;
+                var left = selected.offsetLeft;
+                var right = left + selected.clientWidth;
+                if (left < scrollLeft) {
+                    this._row.scrollLeft = left;
+                }
+                else if (right > scrollRight) {
+                    this._row.scrollLeft = right - this._row.clientWidth;
+                }
+            }
         };
         return WidgetBookmarks;
     }(Widget.AWidget));
@@ -19352,7 +19840,7 @@
         CesiumViewMonitor.Monitor = Monitor;
     })(exports.CesiumViewMonitor || (exports.CesiumViewMonitor = {}));
 
-    var VERSION$1 = "3.2.4";
+    var VERSION$1 = "3.2.6";
 
     exports.VERSION = VERSION$1;
     exports.CesiumParabola = CesiumParabola;