bruce-cesium 3.2.4 → 3.2.6

package/dist/bruce-cesium.es5.js

@@ -1,6 +1,6 @@
 import { Cartes, ProjectViewTile, Carto, Entity as Entity$1, Geometry, Tileset, MathUtils, LRUCache, DelayQueue, ZoomControl, Style, EntityTag, Calculator, EntityLod, EntityType, ClientFile, ObjectUtils, Bounds, EntityRelationType, BruceEvent, EntityCoords, Api, EntitySource, MenuItem, EntityRelation, ProgramKey, ENVIRONMENT, AbstractApi, ProjectViewBookmark, EntityAttachment, EntityAttachmentType, EntityAttribute, ProjectView, ProjectViewLegacyTile, Camera } from 'bruce-models';
 import * as Cesium from 'cesium';
-import { Cartographic, Cartesian2, Math as Math$1, Cartesian3, CallbackProperty, Color, HeightReference, Rectangle, SceneMode, JulianDate, Entity, Primitive, Cesium3DTileFeature, DistanceDisplayCondition, NearFarScalar, Model, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, CornerType, ShadowMode, PolygonHierarchy, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, Cesium3DTileColorBlendMode, HeadingPitchRange, Ion, Cesium3DTileStyle, KmlDataSource, SceneTransforms, OrthographicFrustum, EasingFunction, EllipsoidTerrainProvider, CesiumInspector, defined, EllipsoidGeodesic, sampleTerrainMostDetailed, Cesium3DTileset, Matrix4, Matrix3, IonResource, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, CesiumTerrainProvider, ScreenSpaceEventHandler, ScreenSpaceEventType, ColorMaterialProperty, BoundingSphere, GeometryInstance, PolygonPipeline, Intersect } from 'cesium';
+import { Cartographic, Cartesian2, Math as Math$1, Cartesian3, CallbackProperty, Color, HeightReference, Rectangle, JulianDate, DistanceDisplayCondition, NearFarScalar, Model, Entity, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, CornerType, ShadowMode, PolygonHierarchy, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, Primitive, Cesium3DTileFeature, SceneMode, Cesium3DTileColorBlendMode, HeadingPitchRange, Ion, Cesium3DTileStyle, KmlDataSource, SceneTransforms, OrthographicFrustum, EasingFunction, EllipsoidTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, CesiumTerrainProvider, EllipsoidGeodesic, sampleTerrainMostDetailed, defined, Cesium3DTileset, CesiumInspector, Matrix4, Matrix3, IonResource, PolygonPipeline, BoundingSphere, GeometryInstance, ScreenSpaceEventHandler, ScreenSpaceEventType, Intersect, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, ColorMaterialProperty } from 'cesium';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -692,7 +692,7 @@ var ViewUtils;
 })(ViewUtils || (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
@@ -702,10 +702,10 @@ function isAlive(viewer, visual) {
         return false;
     }
     if (visual instanceof Entity) {
-        return viewer.entities.contains(visual);
+        return true;
     }
     else if (visual instanceof Primitive) {
-        return viewer.scene.primitives.contains(visual);
+        return true;
     }
     else if (visual instanceof Cesium3DTileFeature) {
         var cTileset = visual === null || visual === void 0 ? void 0 : visual.tileset;
@@ -719,133 +719,589 @@ function isAlive(viewer, visual) {
     }
     return false;
 }
-function traverseEntity(cEntity, arr, ignoreParent) {
-    if (cEntity._parentEntity && !ignoreParent) {
-        traverseEntity(cEntity._parentEntity, arr, false);
+var _selectColor = Color.fromAlpha(Color.YELLOW, 0.5);
+var _highlightColor = 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 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 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 : 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 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 Cesium3DTileFeature) {
+        color = (_a = graphic.color) !== null && _a !== void 0 ? _a : new Color();
+    }
+    else if (graphic instanceof ModelGraphics) {
+        color = (_b = getCesiumColorValue(viewer, graphic.color)) !== null && _b !== void 0 ? _b : new Color();
+    }
+    else if (graphic instanceof PolygonGraphics) {
+        color = (_c = getCesiumColorValue(viewer, graphic.material)) !== null && _c !== void 0 ? _c : new Color();
+    }
+    else if (graphic instanceof PolylineGraphics) {
+        color = (_d = getCesiumColorValue(viewer, graphic.material)) !== null && _d !== void 0 ? _d : new Color();
+    }
+    else if (graphic instanceof CorridorGraphics) {
+        color = (_e = getCesiumColorValue(viewer, graphic.material)) !== null && _e !== void 0 ? _e : new Color();
+    }
+    else if (graphic instanceof PointGraphics) {
+        color = (_f = getCesiumColorValue(viewer, graphic.color)) !== null && _f !== void 0 ? _f : new Color();
+    }
+    else if (graphic instanceof BillboardGraphics) {
+        color = (_g = getCesiumColorValue(viewer, graphic.color)) !== null && _g !== void 0 ? _g : new Color();
+    }
+    else if (graphic instanceof EllipseGraphics) {
+        color = (_h = getCesiumColorValue(viewer, graphic.material)) !== null && _h !== void 0 ? _h : new 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 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 : 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 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 : 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(Color.WHITE)) {
+                color.blue = 0.0001;
+            }
+        }
+        if (graphic instanceof Cesium3DTileFeature) {
+            graphic.color = color;
+        }
+        else if (graphic instanceof ModelGraphics) {
+            graphic.color = color;
+        }
+        else if (graphic instanceof PolygonGraphics) {
+            graphic.material = new ColorMaterialProperty(color);
+        }
+        else if (graphic instanceof PolylineGraphics) {
+            graphic.material = new ColorMaterialProperty(color);
+        }
+        else if (graphic instanceof CorridorGraphics) {
+            graphic.material = new ColorMaterialProperty(color);
+        }
+        else if (graphic instanceof PointGraphics) {
+            graphic.color = color;
+        }
+        else if (graphic instanceof BillboardGraphics) {
+            graphic.color = color;
+        }
+        else if (graphic instanceof EllipseGraphics) {
+            graphic.material = new 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 = EntityUtils.GatherEntity({
+            entity: entity
+        });
+        for (var i = 0; i < parts.length; i++) {
+            var part = parts[i];
+            if (!isAlive(viewer, part)) {
+                continue;
+            }
+            if (part instanceof Cesium3DTileFeature) {
+                applyOpacity(viewer, opacity, part);
+            }
+            else if (part instanceof 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 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 = EntityUtils.GatherEntity({
+            entity: entity
+        });
+        for (var i = 0; i < parts.length; i++) {
+            var part = parts[i];
+            if (part instanceof Cesium3DTileFeature) {
+                return getAppliedOpacity(part);
+            }
+            else if (part instanceof 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 Cesium3DTileFeature) {
-        var orgOpacity = entity[ORG_OPACITY_KEY];
-        if (orgOpacity != null) {
-            var color = entity.color ? entity.color.clone() : new 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 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 = EntityUtils.GatherEntity({
+            entity: entity
+        });
+        for (var i = 0; i < parts.length; i++) {
+            var part = parts[i];
+            if (!isAlive(viewer, part)) {
+                continue;
+            }
+            if (part instanceof Cesium3DTileFeature) {
+                var opacity = getAppliedOpacity(part);
+                part[getStoreStateKey("select")] = true;
+                refreshColor(viewer, part, opacity);
+            }
+            else if (part instanceof 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 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 = EntityUtils.GatherEntity({
+            entity: entity
+        });
+        for (var i = 0; i < parts.length; i++) {
+            var part = parts[i];
+            if (!isAlive(viewer, part)) {
+                continue;
+            }
+            if (part instanceof Cesium3DTileFeature) {
+                var opacity = getAppliedOpacity(part);
+                part[getStoreStateKey("select")] = false;
+                refreshColor(viewer, part, opacity);
+            }
+            else if (part instanceof 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 Color();
-        color.alpha = opacity * orgOpacity;
-        if (color.equals(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 = EntityUtils.GatherEntity({
+            entity: entity
+        });
+        for (var i = 0; i < parts.length; i++) {
+            var part = parts[i];
+            if (!isAlive(viewer, part)) {
+                continue;
+            }
+            if (part instanceof Cesium3DTileFeature) {
+                part[getStoreStateKey("highlight")] = true;
+                refreshColor(viewer, part, getAppliedOpacity(part));
+            }
+            else if (part instanceof 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 = EntityUtils.GatherEntity({
+            entity: entity
+        });
+        for (var i = 0; i < parts.length; i++) {
+            var part = parts[i];
+            if (!isAlive(viewer, part)) {
+                continue;
+            }
+            if (part instanceof Cesium3DTileFeature) {
+                part[getStoreStateKey("highlight")] = false;
+                refreshColor(viewer, part, getAppliedOpacity(part));
+            }
+            else if (part instanceof 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) {
@@ -1808,10 +2264,12 @@ var EntityUtils;
      */
     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;
     /**
@@ -1822,10 +2280,11 @@ var EntityUtils;
      */
     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;
     /**
@@ -1837,7 +2296,9 @@ var EntityUtils;
      */
     function GetOpacity(params) {
         var entity = params.entity;
-        return findOpacity(entity);
+        return CesiumEntityStyler.GetOpacity({
+            entity: entity
+        });
     }
     EntityUtils.GetOpacity = GetOpacity;
 })(EntityUtils || (EntityUtils = {}));
@@ -2466,8 +2927,13 @@ function runCullChecker(register) {
             var parts = 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 Entity)) {
+                    continue;
+                }
                 var shouldCull = shouldCullEntity(viewer, part);
                 if (shouldCull) {
                     part[VisualRegisterCuller.VISUAL_CULL_KEY] = true;
@@ -2477,7 +2943,11 @@ function runCullChecker(register) {
                 }
                 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);
                     }
                 }
@@ -5642,137 +6112,6 @@ function unmarkEntity(visual, ignoreParent) {
         }
     }
 }
-var ORG_COLOR_KEY = "_org_color_";
-function select(viewer, visual, color, reqRender) {
-    var _a;
-    if (!color) {
-        color = Color.fromAlpha(Color.YELLOW, 0.5);
-    }
-    if (visual instanceof Entity) {
-        if (!(viewer === null || viewer === void 0 ? void 0 : viewer.scene) || viewer.isDestroyed()) {
-            return;
-        }
-        var entities = 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 = 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 Primitive) ;
-    else if (visual instanceof 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 = EntityUtils.GetOpacity({
-        entity: visual
-    });
-    if (opacity != null) {
-        EntityUtils.SetOpacity({
-            viewer: viewer,
-            entity: visual,
-            opacity: opacity,
-            requestRender: false
-        });
-    }
-    if (reqRender != false) {
-        viewer.scene.requestRender();
-    }
-}
-function deselect(viewer, visual, reqRender) {
-    if (visual instanceof Entity) {
-        if (!(viewer === null || viewer === void 0 ? void 0 : viewer.scene) || viewer.isDestroyed()) {
-            return;
-        }
-        var entities = 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 Primitive) ;
-    else if (visual instanceof Cesium3DTileFeature) {
-        if (!isAlive$1(viewer, visual)) {
-            return;
-        }
-        var orgColor = visual[ORG_COLOR_KEY];
-        if (orgColor != null) {
-            visual.color = orgColor;
-        }
-    }
-    var opacity = EntityUtils.GetOpacity({
-        entity: visual
-    });
-    if (opacity != null) {
-        EntityUtils.SetOpacity({
-            viewer: viewer,
-            entity: visual,
-            opacity: opacity,
-            requestRender: false
-        });
-    }
-    if (reqRender != false) {
-        viewer.scene.requestRender();
-    }
-}
 /**
  * Manages a registry of all Bruce visuals being rendered by menu items.
  * If multiple stuff is registered with the same entity id, only the "best" one is left visible.
@@ -5794,6 +6133,7 @@ var VisualsRegister;
             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.
@@ -5864,7 +6204,7 @@ var VisualsRegister;
          */
         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) {
@@ -5882,7 +6222,7 @@ var VisualsRegister;
             };
             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();
@@ -5923,7 +6263,19 @@ var VisualsRegister;
          * @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;
@@ -5944,7 +6296,11 @@ var VisualsRegister;
                         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
+                                });
                             }
                         }
                     }
@@ -5957,7 +6313,11 @@ var VisualsRegister;
                         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
+                                });
                             }
                         }
                     }
@@ -5984,7 +6344,11 @@ var VisualsRegister;
                 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
+                        });
                     }
                 }
             }
@@ -5999,6 +6363,82 @@ var VisualsRegister;
         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;
@@ -6109,7 +6549,12 @@ var VisualsRegister;
             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) {
@@ -6250,7 +6695,7 @@ var VisualsRegister;
                     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) {
@@ -6272,7 +6717,7 @@ var VisualsRegister;
                 };
                 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;
                 }
@@ -6320,7 +6765,7 @@ var VisualsRegister;
             var height = Math.ceil(EnsureNumber(params.height, 5));
             var pickLimit = Math.ceil(EnsureNumber(params.pickLimit, 5));
             var picked = this.viewer.scene.drillPick(new 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 Entity ? object.id : object);
                 var visual = entity;
@@ -6333,7 +6778,7 @@ var VisualsRegister;
             };
             var this_3 = this;
             for (var i = 0; i < picked.length; i++) {
-                _loop_5(i);
+                _loop_3(i);
             }
             return {
                 regos: found
@@ -6394,6 +6839,7 @@ var VisualsRegister;
             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++) {
@@ -6415,7 +6861,6 @@ var VisualsRegister;
                                     requestRender: false
                                 });
                             }
-                            this.opacity[rego.entityId] = params.opacity;
                             (_a = this.onUpdate) === null || _a === void 0 ? void 0 : _a.Trigger({
                                 rego: rego,
                                 type: EVisualUpdateType.Update,
@@ -14866,11 +15311,15 @@ var WidgetCursorBar = /** @class */ (function (_super) {
         this._disposeCesiumEvent();
         var events = new 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";
@@ -14878,13 +15327,37 @@ var WidgetCursorBar = /** @class */ (function (_super) {
                     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
                         });
                     }
@@ -15533,6 +16006,7 @@ var WidgetBookmarks = /** @class */ (function (_super) {
         var isFirstEnabled = !this._lastEnabledBookmarkId;
         this._lastEnabledBookmarkId = bookmark.ID;
         this._updateBookmark();
+        // console.log("render bookmark", bookmark.ID);
         ViewRenderEngine.Render({
             apiGetter: this._apiGetters.GetBruceGetter(),
             bookmark: bookmark,
@@ -15559,6 +16033,20 @@ var WidgetBookmarks = /** @class */ (function (_super) {
         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));
@@ -19411,7 +19899,7 @@ var CesiumViewMonitor;
     CesiumViewMonitor$$1.Monitor = Monitor;
 })(CesiumViewMonitor || (CesiumViewMonitor = {}));
 
-var VERSION$1 = "3.2.4";
+var VERSION$1 = "3.2.6";
 
 export { VERSION$1 as VERSION, CesiumViewMonitor, ViewerUtils, MenuItemManager, EntityRenderEngine, MenuItemCreator, VisualsRegister, RenderManager, EntitiesIdsRenderManager, EntitiesLoadedRenderManager, EntitiesRenderManager, EntityRenderManager, TilesetCadRenderManager, TilesetArbRenderManager, TilesetEntitiesRenderManager, TilesetOsmRenderManager, TilesetPointcloudRenderManager, TilesetGooglePhotosRenderManager, DataSourceStaticKmlManager, RelationsRenderManager, SharedGetters, CesiumParabola, EntityLabel, ViewRenderEngine, TileRenderEngine, TilesetRenderEngine, CESIUM_INSPECTOR_KEY, ViewUtils, DrawingUtils, MeasureUtils, EntityUtils, Draw3dPolygon, Draw3dPolyline };
 //# sourceMappingURL=bruce-cesium.es5.js.map