bruce-cesium 2.2.6 → 2.2.8

package/dist/bruce-cesium.es5.js

@@ -1,6 +1,6 @@
-import { BruceEvent, Cartes, Carto, Entity as Entity$1, Geometry, Tileset, MathUtils, LRUCache, ZoomControl, Style, EntityTag, Calculator, EntityLod, EntityType, ClientFile, ObjectUtils, DelayQueue, BatchedDataGetter, EntityRelationType, EntityCoords, EntityFilterGetter, EntitySource, MenuItem, EntityRelation, ENVIRONMENT, ProjectView, ProjectViewBookmark, ProjectViewTile, ProjectViewLegacyTile, ProgramKey, Camera } from 'bruce-models';
+import { BruceEvent, Cartes, Carto, Entity as Entity$1, Geometry, Tileset, MathUtils, LRUCache, ZoomControl, Style, EntityTag, Calculator, EntityLod, EntityType, ClientFile, ObjectUtils, DelayQueue, BatchedDataGetter, EntityRelationType, EntityCoords, EntityFilterGetter, EntitySource, MenuItem, EntityRelation, ENVIRONMENT, ProjectView, ProjectViewBookmark, ProjectViewTile, ProjectViewLegacyTile, ProgramKey, Camera, AbstractApi, EntityAttachment, EntityAttachmentType, EntityAttribute } from 'bruce-models';
 import * as Cesium from 'cesium';
-import { Cartesian2, Cartographic, CallbackProperty, Cartesian3, Color, Rectangle, Math as Math$1, HeightReference, DistanceDisplayCondition, NearFarScalar, Entity, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, PolygonHierarchy, ShadowMode, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, Primitive, Cesium3DTileFeature, SceneMode, Cesium3DTileColorBlendMode, HeadingPitchRange, createOsmBuildings, Cesium3DTileStyle, KmlDataSource, PolygonPipeline, createWorldTerrain, EllipsoidTerrainProvider, CesiumTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, OrthographicFrustum, JulianDate, CesiumInspector, defined, EllipsoidGeodesic, sampleTerrainMostDetailed, Cesium3DTileset, Model, ColorMaterialProperty, Matrix3, Matrix4, EasingFunction, GeometryInstance, IonResource } from 'cesium';
+import { Cartographic, Cartesian3, SceneMode, Math as Math$1, Cartesian2, CallbackProperty, Color, Rectangle, HeightReference, DistanceDisplayCondition, NearFarScalar, Entity, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, PolygonHierarchy, ShadowMode, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, Primitive, Cesium3DTileFeature, Cesium3DTileColorBlendMode, HeadingPitchRange, Cesium3DTileStyle, OrthographicFrustum, JulianDate, KmlDataSource, createOsmBuildings, EllipsoidGeodesic, EllipsoidTerrainProvider, sampleTerrainMostDetailed, defined, Cesium3DTileset, Model, Matrix4, Matrix3, IonResource, ScreenSpaceEventHandler, ScreenSpaceEventType, PolygonPipeline, CesiumInspector, createWorldTerrain, CesiumTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, ColorMaterialProperty, EasingFunction, GeometryInstance, Ion, BoundingSphere } from 'cesium';
 
 var TIME_LAG = 300;
 var POSITION_CHECK_TIMER = 950;
@@ -273,6 +273,20 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
 See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
 
 var __assign = function() {
     __assign = Object.assign || function __assign(t) {
@@ -408,6 +422,28 @@ var MeasureUtils;
     MeasureUtils.MeasurePolygon = MeasurePolygon;
 })(MeasureUtils || (MeasureUtils = {}));
 
+var C3 = [Cartesian3][0];
+function getT(t, alpha, p0, p1) {
+    var d = C3.subtract(p1, p0, new C3);
+    var a = C3.dot(d, d);
+    var b = Math.pow(a, alpha * 0.5);
+    return b + t;
+}
+function catmullRom(p0, p1, p2, p3, t) {
+    var t0 = 0;
+    var t1 = getT(t0, 0.5, p0, p1);
+    var t2 = getT(t1, 0.5, p1, p2);
+    var t3 = getT(t2, 0.5, p2, p3);
+    t = Math$1.lerp(t1, t2, t);
+    var _a = [function (l, r) { return C3.add(l, r, new C3); }, function (l, r) { return C3.multiplyByScalar(l, r, new C3); }], add = _a[0], mul = _a[1];
+    var A1 = add(mul(p0, (t1 - t) / (t1 - t0)), mul(p1, (t - t0) / (t1 - t0)));
+    var A2 = add(mul(p1, (t2 - t) / (t2 - t1)), mul(p2, (t - t1) / (t2 - t1)));
+    var A3 = add(mul(p2, (t3 - t) / (t3 - t2)), mul(p3, (t - t2) / (t3 - t2)));
+    var B1 = add(mul(A1, (t2 - t) / (t2 - t0)), mul(A2, (t - t0) / (t2 - t0)));
+    var B2 = add(mul(A2, (t3 - t) / (t3 - t1)), mul(A3, (t - t1) / (t3 - t1)));
+    var C = add(mul(B1, (t2 - t) / (t2 - t1)), mul(B2, (t - t1) / (t2 - t1)));
+    return C;
+}
 var DrawingUtils;
 (function (DrawingUtils) {
     /**
@@ -625,6 +661,70 @@ var DrawingUtils;
             return pos3d;
         };
     })();
+    /**
+     * Smooths a given set of points.
+     * @param points
+     * @param multiplier
+     * @param closed: true if this is a closed shape. Eg: polygon.
+     * @returns
+     */
+    function SmoothPoints(points, multiplier, closed) {
+        if (points.length < 4 || multiplier < 2) {
+            return points;
+        }
+        if (!closed) {
+            points.unshift(C3.subtract(points[0], points[1], new C3));
+            points.push(C3.subtract(points[points.length - 1], points[points.length - 2], new C3));
+        }
+        else {
+            points.unshift(points[points.length - 1]);
+            points.unshift(points[points.length - 2]);
+            points.push(points[2]);
+        }
+        var splinePoints = [];
+        var _loop_1 = function (i) {
+            var _a = [0, 1, 2, 3].map(function (n) { return points[i + n]; }), P0 = _a[0], P1 = _a[1], P2 = _a[2], P3 = _a[3];
+            for (var j = 0; j <= multiplier; j++) {
+                splinePoints.push(catmullRom(P0, P1, P2, P3, j / multiplier));
+            }
+        };
+        for (var i = 0; i < points.length - 3; i++) {
+            _loop_1(i);
+        }
+        return splinePoints;
+    }
+    DrawingUtils.SmoothPoints = SmoothPoints;
+    /**
+     * @param pos3d
+     * @param minimumHeight height relative to ground
+     */
+    function RaisePos3d(viewer, pos3d, minimumHeight) {
+        if (minimumHeight === void 0) { minimumHeight = 0; }
+        return __awaiter(this, void 0, void 0, function () {
+            var carto, terrainCarto, sample, terrainHeight;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        carto = Cartographic.fromCartesian(pos3d);
+                        terrainCarto = carto.clone();
+                        terrainCarto.height = 0;
+                        if (!(viewer.scene.terrainProvider instanceof EllipsoidTerrainProvider)) return [3 /*break*/, 1];
+                        carto.height = Math.max(carto.height, minimumHeight);
+                        return [3 /*break*/, 3];
+                    case 1: return [4 /*yield*/, sampleTerrainMostDetailed(viewer.scene.terrainProvider, [terrainCarto])];
+                    case 2:
+                        sample = _a.sent();
+                        terrainHeight = (sample === null || sample === void 0 ? void 0 : sample.length) ? sample[0].height : null;
+                        if (terrainHeight != null) {
+                            carto.height = Math.max(carto.height, terrainHeight + minimumHeight);
+                        }
+                        _a.label = 3;
+                    case 3: return [2 /*return*/, Cartesian3.fromRadians(carto.longitude, carto.latitude, carto.height)];
+                }
+            });
+        });
+    }
+    DrawingUtils.RaisePos3d = RaisePos3d;
 })(DrawingUtils || (DrawingUtils = {}));
 
 /**
@@ -4843,6 +4943,7 @@ var VisualsRegister;
         EVisualUpdateType["Add"] = "ADD";
         EVisualUpdateType["Remove"] = "REMOVE";
         EVisualUpdateType["Update"] = "UPDATE";
+        EVisualUpdateType["DeselectAll"] = "DESELECT_ALL";
     })(EVisualUpdateType = VisualsRegister.EVisualUpdateType || (VisualsRegister.EVisualUpdateType = {}));
     var Register = /** @class */ (function () {
         function Register(viewer) {
@@ -4943,6 +5044,7 @@ var VisualsRegister;
             return this.selectedIds.indexOf(id) !== -1;
         };
         Register.prototype.ClearSelected = function () {
+            var _a;
             for (var i = 0; i < this.selectedIds.length; i++) {
                 var id = this.selectedIds[i];
                 var regos = this.rego[id];
@@ -4954,6 +5056,9 @@ var VisualsRegister;
                 }
             }
             this.selectedIds = [];
+            (_a = this.onUpdate) === null || _a === void 0 ? void 0 : _a.Trigger({
+                type: EVisualUpdateType.DeselectAll
+            });
         };
         Register.prototype.GetSelected = function () {
             return this.selectedIds;
@@ -8641,94 +8746,52 @@ var MenuItemManager;
     MenuItemManager.Manager = Manager;
 })(MenuItemManager || (MenuItemManager = {}));
 
-var CESIUM_VIEWER_MANAGER_KEY = "_cesiumViewerManager";
-var ViewerUtils;
-(function (ViewerUtils) {
-    /**
-     * Destroys all the junk that cesium viewer ships with.
-     * @param viewer
-     */
-    function InitViewer(params) {
-        var viewer = params.viewer, destroyWidgets = params.destroyWidgets, styleContainer = params.styleContainer;
-        if (destroyWidgets != false) {
-            ViewerUtils.DestroyWidget(viewer.timeline);
-            ViewerUtils.DestroyWidget(viewer.vrButton);
-            ViewerUtils.DestroyWidget(viewer.sceneModePicker);
-            ViewerUtils.DestroyWidget(viewer.homeButton);
-            ViewerUtils.DestroyWidget(viewer.fullscreenButton);
-            ViewerUtils.DestroyWidget(viewer.baseLayerPicker);
-        }
-        if (styleContainer != false) {
-            ViewerUtils.StyleContainer({ viewer: viewer });
-        }
-    }
-    ViewerUtils.InitViewer = InitViewer;
-    function DestroyWidget(widget) {
-        if (widget && !widget.isDestroyed()) {
-            widget.destroy();
-        }
-    }
-    ViewerUtils.DestroyWidget = DestroyWidget;
-    /**
-     * Hides all unnecessary elements from the Cesium viewer container.
-     * @param viewer
-     */
-    function StyleContainer(params) {
-        var _a;
-        var viewer = params.viewer;
-        var container = viewer.container;
-        var genContainer = (_a = container.getElementsByClassName("cesium-viewer")) === null || _a === void 0 ? void 0 : _a[0];
-        if (genContainer) {
-            var children = genContainer.children;
-            for (var i = 0; i < children.length; i++) {
-                var child = children[i];
-                if (!child.classList.contains("cesium-viewer-cesiumWidgetContainer")) {
-                    child.style.display = "none";
-                }
+/**
+ * Describes a Nextspace provided UI widget.
+ */
+var Widget;
+(function (Widget) {
+    var AWidget = /** @class */ (function () {
+        function AWidget(params) {
+            var viewer = params.viewer, container = params.container, manager = params.manager;
+            if (!container) {
+                container = viewer.container;
+            }
+            this._viewer = viewer;
+            this._manager = manager;
+            this._container = container;
+            this._apiGetters = params.apiGetters;
+        }
+        Object.defineProperty(AWidget.prototype, "Viewer", {
+            get: function () {
+                return this._viewer;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AWidget.prototype, "Container", {
+            get: function () {
+                return this._container;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AWidget.prototype, "Element", {
+            get: function () {
+                return this._element;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AWidget.prototype.Dispose = function () {
+            if (this._element && this._element.parentElement) {
+                this._element.parentElement.removeChild(this._element);
             }
-        }
-        var canvas = viewer.canvas;
-        canvas.style.width = "100%";
-        canvas.style.height = "100%";
-        var widget = canvas.parentElement;
-        widget.style.width = "100%";
-        widget.style.height = "100%";
-        widget.style.touchAction = "none";
-        var widgetContainer = widget.parentElement;
-        widgetContainer.style.width = "100%";
-        widgetContainer.style.height = "100%";
-        var viewerContainer = widgetContainer.parentElement;
-        viewerContainer.style.fontFamily = "sans-serif";
-        viewerContainer.style.fontSize = "16px";
-        viewerContainer.style.overflow = "hidden";
-        viewerContainer.style.display = "block";
-        viewerContainer.style.position = "relative";
-        viewerContainer.style.top = "0";
-        viewerContainer.style.left = "0";
-        viewerContainer.style.width = "100%";
-        viewerContainer.style.height = "100%";
-    }
-    ViewerUtils.StyleContainer = StyleContainer;
-    /**
-     * Returns a given Cesium viewer's menu item manager.
-     * If one is missing then it'll optionally create one before returning it.
-     * @param params
-     * @returns
-     */
-    function GetManager(params) {
-        var viewer = params.viewer, createIfMissing = params.createIfMissing;
-        if (viewer[CESIUM_VIEWER_MANAGER_KEY]) {
-            return viewer[CESIUM_VIEWER_MANAGER_KEY];
-        }
-        else if (createIfMissing != false) {
-            var manager = new MenuItemManager.Manager({ viewer: viewer });
-            viewer[CESIUM_VIEWER_MANAGER_KEY] = manager;
-            return manager;
-        }
-        return null;
-    }
-    ViewerUtils.GetManager = GetManager;
-})(ViewerUtils || (ViewerUtils = {}));
+        };
+        return AWidget;
+    }());
+    Widget.AWidget = AWidget;
+})(Widget || (Widget = {}));
 
 /**
  * Utility to help generate menu items for rendering various data.
@@ -10448,8 +10511,333 @@ var ViewUtils;
         return viewer.camera.frustum instanceof OrthographicFrustum;
     }
     ViewUtils.Get2dStatus = Get2dStatus;
+    function SetLockedCameraStatus(params) {
+        var viewer = params.viewer, status = params.status;
+        var scene = viewer === null || viewer === void 0 ? void 0 : viewer.scene;
+        if (!scene) {
+            return;
+        }
+        if (status) {
+            scene.screenSpaceCameraController.enableRotate = false;
+            scene.screenSpaceCameraController.enableTranslate = false;
+            scene.screenSpaceCameraController.enableTilt = false;
+            scene.screenSpaceCameraController.enableLook = false;
+            scene.screenSpaceCameraController.enableRotate = false;
+            scene.screenSpaceCameraController.maximumMovementRatio = 0.3;
+            scene.screenSpaceCameraController.minimumCollisionTerrainHeight = 1000;
+        }
+        else {
+            scene.screenSpaceCameraController.maximumMovementRatio = 0.1;
+            scene.screenSpaceCameraController.minimumCollisionTerrainHeight = 1000;
+            scene.screenSpaceCameraController.enableRotate = true;
+            scene.screenSpaceCameraController.enableTranslate = true;
+            if (!ViewUtils.Get2dStatus({ viewer: viewer })) {
+                scene.screenSpaceCameraController.enableTilt = true;
+            }
+            scene.screenSpaceCameraController.enableLook = true;
+            scene.screenSpaceCameraController.enableRotate = true;
+        }
+    }
+    ViewUtils.SetLockedCameraStatus = SetLockedCameraStatus;
+    function GetLockedCameraStatus(params) {
+        var _a;
+        var scene = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a.scene;
+        if (!scene) {
+            return false;
+        }
+        return !scene.screenSpaceCameraController.enableTranslate;
+    }
+    ViewUtils.GetLockedCameraStatus = GetLockedCameraStatus;
 })(ViewUtils || (ViewUtils = {}));
 
+var VIEWER_BOOKMARKS_WIDGET_KEY = "_viewerBookmarksWidget";
+var WidgetBookmarks = /** @class */ (function (_super) {
+    __extends(WidgetBookmarks, _super);
+    function WidgetBookmarks(params) {
+        var _this = _super.call(this, params) || this;
+        _this.STYLESHEET_ID = "nextspace-bookmarks-stylesheet";
+        _this.bookmarks = [];
+        _this.reloadCounter = 0;
+        _this._lastEnabledBookmarkId = null;
+        _this._autoplayInterval = null;
+        _this._viewId = params.viewId;
+        _this._generateStyles();
+        _this._generateElement();
+        _this.loadBookmarks().then(function () {
+            _this._updateBookmarks();
+        });
+        _this._viewer[VIEWER_BOOKMARKS_WIDGET_KEY] = _this;
+        return _this;
+    }
+    Object.defineProperty(WidgetBookmarks.prototype, "ViewId", {
+        get: function () {
+            return this._viewId;
+        },
+        set: function (value) {
+            var _this = this;
+            var isChanged = this._viewId != value;
+            if (isChanged) {
+                this._viewId = value;
+                this._lastEnabledBookmarkId = null;
+                this.loadBookmarks().then(function () {
+                    _this._updateBookmarks();
+                });
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WidgetBookmarks.prototype, "LastEnabledBookmarkId", {
+        get: function () {
+            return this._lastEnabledBookmarkId;
+        },
+        set: function (value) {
+            this._lastEnabledBookmarkId = value;
+            this._updateBookmark();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    WidgetBookmarks.prototype.LoadViewId = function (params) {
+        var _this = this;
+        var viewId = params.viewId, runFirstBookmark = params.runFirstBookmark, autoPlay = params.autoPlay, bookmarkId = params.bookmarkId;
+        if (runFirstBookmark == null) {
+            runFirstBookmark = true;
+        }
+        if (autoPlay == null) {
+            autoPlay = false;
+        }
+        this._viewId = viewId;
+        this.loadBookmarks().then(function () {
+            _this._updateBookmarks();
+            var bookmark = null;
+            if (bookmarkId) {
+                bookmark = _this.bookmarks.find(function (b) { return b.ID == bookmarkId; });
+            }
+            if (!bookmark && runFirstBookmark && _this.bookmarks.length) {
+                bookmark = _this.bookmarks[0];
+            }
+            if (bookmark) {
+                _this._selectBookmark(bookmark);
+            }
+            if (autoPlay) {
+                _this._toggleOnAutoPlay();
+            }
+        });
+        this._lastEnabledBookmarkId = null;
+    };
+    WidgetBookmarks.prototype.loadBookmarks = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var counter, api, viewId, data, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.reloadCounter += 1;
+                        counter = this.reloadCounter;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        api = this._apiGetters.GetBruceApi();
+                        viewId = this._viewId;
+                        if (!viewId) {
+                            this.bookmarks = [];
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, ProjectViewBookmark.GetList({
+                                viewId: viewId,
+                                api: api
+                            })];
+                    case 2:
+                        data = _a.sent();
+                        if (counter != this.reloadCounter) {
+                            return [2 /*return*/];
+                        }
+                        this.bookmarks = data.bookmarks;
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        console.error(e_1);
+                        this.bookmarks = [];
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    WidgetBookmarks.prototype.Dispose = function () {
+        _super.prototype.Dispose.call(this);
+        this._toggleOffAutoPlay();
+    };
+    WidgetBookmarks.prototype._generateStyles = function () {
+        if (document.getElementById(this.STYLESHEET_ID)) {
+            return;
+        }
+        var style = document.createElement("style");
+        style.id = this.STYLESHEET_ID;
+        style.innerHTML = "\n            .NextspaceBookmarks {\n                pointer-events: none !important;\n                position: absolute;\n                bottom: 10px;\n                left: 0;\n                width: 100%;\n                height: 120px;\n                display: flex;\n                align-items: flex-end;\n                justify-content: center;\n                z-index: 1;\n            }\n\n            .NextspaceBookmarks * {\n                box-sizing: border-box;\n            }\n\n            .NextspaceBookmarksContainer {\n                border-radius: 10px;\n                display: flex;\n                flex-direction: column;\n                height: 132px;\n                max-width: calc(100% - 40px);\n                max-width: min(600px, calc(100% - 40px));\n                overflow: visible;\n                padding: 4px;\n                width: -webkit-max-content;\n                width: max-content;\n                pointer-events: auto;\n                -webkit-backdrop-filter: blur(20px);\n                backdrop-filter: blur(20px);\n                background: rgba(33,39,42,.8);\n                border-radius: 9px;\n                box-shadow: 0 0 1px rgba(18,22,25,.36),0 18px 36px -4px rgba(18,22,25,.36);\n            }\n\n            .NextspaceBookmarksRow {\n                display: flex;\n                flex-direction: row;\n                height: 80px;\n                overflow-x: auto;\n                overflow-y: hidden;\n                padding: 5px;\n                margin-bottom: 4px;\n                padding-bottom: 8px;\n            }\n\n            .NextspaceBookmarksRowItem {\n                background-color: #fff;\n                background-position: 50%;\n                background-repeat: no-repeat;\n                background-size: cover;\n                border-radius: 6px;\n                cursor: pointer;\n                margin-right: 8px;\n                min-width: 70px;\n                outline: 3px solid transparent;\n                transition: .3s ease;\n                width: 110px;\n            }\n            \n            .NextspaceBookmarksRowItem:last-of-type {\n                margin-right: 0;\n            }\n\n            .NextspaceBookmarksRowItem[is-selected=\"true\"] {\n                outline: 3px solid #0072c3;\n            }\n\n            .NextspaceBookmarksRowItem:hover {\n                filter: grayscale(.5);\n            }\n\n            .NextspaceBookmarksToolbar {\n                display: flex;\n                flex-direction: row;\n                align-items: center;\n                padding-left: 4px;\n                padding-right: 4px;\n            }\n\n            .NextspaceBookmarksToolbarLeft {\n                align-items: center;\n                display: flex;\n                min-width: 150px;\n            }\n\n            .NextspaceBookmarksToolbarBreaker {\n                background: hsla(0,0%,100%,.12);\n                border-radius: 2px;\n                flex-shrink: 0;\n                height: 32px;\n                margin-left: 6px;\n                margin-right: 14px;\n                width: 2px;\n            }\n\n            .NextspaceBookmarksToolbarName {\n                color: #fff;\n                display: block;\n                font-size: 15px;\n                font-family: sans-serif;\n                letter-spacing: .5px;\n                max-width: 250px;\n                overflow: hidden;\n                text-overflow: clip;\n                white-space: nowrap;\n            }\n\n            .NextspaceBookmarksToolbarButt {\n                align-items: center;\n                display: flex;\n                flex-grow: 0;\n                flex-shrink: 0;\n                height: 30px;\n                justify-content: center;\n                margin-right: 8px;\n                min-height: 0;\n                min-width: 0;\n                position: relative;\n                width: 30px;\n                font-size: 1.5rem;\n                padding: 8px;\n                border-radius: 50%;\n                overflow: visible;\n                color: rgba(0, 0, 0, 0.54);\n                transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n                appearance: none;\n                text-decoration: none;\n                text-align: center;\n                background-color: transparent;\n                outline: 0px;\n                border: 0px none;\n                margin: 0px;\n                margin-right: 0px;\n                cursor: pointer;\n                user-select: none;\n                -moz-box-pack: center;\n                -moz-box-align: center;\n            }\n\n            .NextspaceBookmarksToolbarButt:hover {\n                opacity: .9;\n                transition: opacity .3s ease;\n                background-color: rgba(0, 0, 0, 0.04);\n            }\n\n            .NextspaceBookmarksToolbarButt svg {\n                max-height: 24px;\n                max-width: 24px;\n                flex-shrink: 0;\n            }\n\n            .NextspaceBookmarksAutoplayCounter {\n                padding: 4px 8px;\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n                border-radius: 8px;\n                box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.27);\n                -webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.27);\n                -moz-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.27);\n                right: 100%;\n                border-radius: 50%;\n                width: 20px;\n                height: 20px;\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n                font-size: 9px;\n                color: white;\n                background-color: #21272a;\n                position: absolute;\n                z-index: 2;\n                pointer-events: none;\n                opacity: 0.8;\n            }\n\n            .NextspaceBookmarksToolbarChip {\n                background: rgba(0,175,250,.2);\n                border-radius: 11px;\n                color: #18ffff;\n                letter-spacing: 1px;\n                margin-right: 3px;\n                font-size: 13px;\n                min-width: 50px;\n                padding: 5px 8px;\n                display: flex;\n                flex-direction: column;\n                justify-content: center;\n                align-items: center;\n                box-shadow: 0 0 12px 1px rgba(0,0,0,.27);\n                -webkit-box-shadow: 0 0 12px 1px rgba(0,0,0,.27);\n                -moz-box-shadow: 0 0 12px 1px rgba(0,0,0,.27);\n                font-family: sans-serif;\n            }\n        ";
+        document.head.appendChild(style);
+    };
+    WidgetBookmarks.prototype._generateElement = function () {
+        var _this = this;
+        var element = document.createElement("div");
+        element.style.display = "none";
+        element.className = "NextspaceBookmarks";
+        var container = document.createElement("div");
+        container.className = "NextspaceBookmarksContainer";
+        element.appendChild(container);
+        var row = document.createElement("div");
+        row.className = "NextspaceBookmarksRow";
+        container.appendChild(row);
+        this._row = row;
+        var toolbar = document.createElement("div");
+        toolbar.className = "NextspaceBookmarksToolbar";
+        toolbar.innerHTML = "\n            <div class=\"NextspaceBookmarksToolbarLeft\">\n                <button title=\"Autoplay\" class=\"NextspaceBookmarksToolbarButt\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8 6.81976V17.1798C8 17.9698 8.87 18.4498 9.54 18.0198L17.68 12.8398C18.3 12.4498 18.3 11.5498 17.68 11.1498L9.54 5.97976C8.87 5.54976 8 6.02976 8 6.81976Z\" fill=\"white\"></path></svg>\n                    <div class=\"NextspaceBookmarksAutoplayCounter\" style=\"display: none;\">5</div>\n                </button>\n                <button title=\"Back\" class=\"NextspaceBookmarksToolbarButt\">\n                    <svg width=\"10\" height=\"17\" viewBox=\"0 0 10 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 15.5L1.5 8.5L8.5 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n                </button>\n                <div class=\"NextspaceBookmarksToolbarChip\">\n                </div>\n                <button title=\"Next\" class=\"NextspaceBookmarksToolbarButt\">\n                    <svg width=\"10\" height=\"17\" viewBox=\"0 0 10 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.5 1.5L8.5 8.5L1.5 15.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n                </button>\n            </div>\n            <div class=\"NextspaceBookmarksToolbarBreaker\"></div>\n            <div class=\"NextspaceBookmarksToolbarName\"></div>\n        ";
+        container.appendChild(toolbar);
+        this._name = toolbar.querySelector(".NextspaceBookmarksToolbarName");
+        this._chip = toolbar.querySelector(".NextspaceBookmarksToolbarChip");
+        this._autoplayCounter = toolbar.querySelector(".NextspaceBookmarksAutoplayCounter");
+        var autoPlay = toolbar.querySelector(".NextspaceBookmarksToolbarButt:nth-child(1)");
+        this._autoplayButtSvg = autoPlay.querySelector("svg");
+        var back = toolbar.querySelector(".NextspaceBookmarksToolbarButt:nth-child(2)");
+        var next = toolbar.querySelector(".NextspaceBookmarksToolbarButt:nth-child(4)");
+        autoPlay.addEventListener("click", function () {
+            if (_this._autoplayInterval) {
+                _this._toggleOffAutoPlay();
+            }
+            else {
+                _this._toggleOnAutoPlay();
+            }
+        });
+        back.addEventListener("click", function () {
+            var index = _this.bookmarks.findIndex(function (b) { return b.ID == _this._lastEnabledBookmarkId; });
+            if (index < 0) {
+                index = 0;
+            }
+            else if (index > 0) {
+                index--;
+            }
+            else {
+                index = _this.bookmarks.length - 1;
+            }
+            _this._selectBookmark(_this.bookmarks[index]);
+        });
+        next.addEventListener("click", function () {
+            var index = _this.bookmarks.findIndex(function (b) { return b.ID == _this._lastEnabledBookmarkId; });
+            if (index < 0) {
+                index = 0;
+            }
+            else if (index < _this.bookmarks.length - 1) {
+                index++;
+            }
+            else {
+                index = 0;
+            }
+            _this._selectBookmark(_this.bookmarks[index]);
+        });
+        this.Container.appendChild(element);
+        this._element = element;
+        this._updateBookmarks();
+    };
+    WidgetBookmarks.prototype._toggleOnAutoPlay = function () {
+        var _this = this;
+        this._toggleOffAutoPlay();
+        this._autoplayCounter.style.display = "block";
+        this._autoplayCounter.innerText = "5";
+        var counter = 5;
+        this._autoplayInterval = setInterval(function () {
+            counter--;
+            _this._autoplayCounter.innerText = counter.toString();
+            if (counter <= 0) {
+                var index = _this.bookmarks.findIndex(function (b) { return b.ID == _this._lastEnabledBookmarkId; });
+                if (index < 0) {
+                    index = 0;
+                }
+                else if (index < _this.bookmarks.length - 1) {
+                    index++;
+                }
+                else {
+                    index = 0;
+                }
+                _this._selectBookmark(_this.bookmarks[index]);
+                counter = 5;
+            }
+        }, 1000);
+        this._autoplayButtSvg.innerHTML = "\n            <path d=\"M8 19C9.1 19 10 18.1 10 17V7C10 5.9 9.1 5 8 5C6.9 5 6 5.9 6 7V17C6 18.1 6.9 19 8 19ZM14 7V17C14 18.1 14.9 19 16 19C17.1 19 18 18.1 18 17V7C18 5.9 17.1 5 16 5C14.9 5 14 5.9 14 7Z\" fill=\"white\"></path>\n        ";
+    };
+    WidgetBookmarks.prototype._toggleOffAutoPlay = function () {
+        clearInterval(this._autoplayInterval);
+        this._autoplayInterval = null;
+        this._autoplayCounter.style.display = "none";
+        this._autoplayButtSvg.innerHTML = "\n            <path d=\"M8 6.81976V17.1798C8 17.9698 8.87 18.4498 9.54 18.0198L17.68 12.8398C18.3 12.4498 18.3 11.5498 17.68 11.1498L9.54 5.97976C8.87 5.54976 8 6.02976 8 6.81976Z\" fill=\"white\"></path>\n        ";
+    };
+    WidgetBookmarks.prototype._updateBookmarks = function () {
+        var _this = this;
+        var bookmarks = this.bookmarks;
+        this._element.style.display = bookmarks.length ? "flex" : "none";
+        var api = this._apiGetters.GetBruceApi();
+        var row = this._row;
+        row.innerHTML = "";
+        var _loop_1 = function (bookmark) {
+            var item = document.createElement("div");
+            item.className = "NextspaceBookmarksRowItem";
+            var previewUrl = "";
+            if (bookmark["Screenshot.ClientFile.ID"]) {
+                previewUrl = ClientFile.GetUrl({
+                    fileId: bookmark["Screenshot.ClientFile.ID"],
+                    api: api
+                });
+            }
+            // TODO: Some nice empty image.
+            item.style.backgroundImage = previewUrl ? "url(".concat(previewUrl, ")") : "";
+            item.setAttribute("is-selected", this_1._lastEnabledBookmarkId == bookmark.ID ? "true" : "false");
+            item.addEventListener("click", function () {
+                _this._selectBookmark(bookmark);
+            });
+            item.setAttribute("title", bookmark.Title);
+            item.setAttribute("bookmark-id", bookmark.ID);
+            row.appendChild(item);
+        };
+        var this_1 = this;
+        for (var _i = 0, bookmarks_1 = bookmarks; _i < bookmarks_1.length; _i++) {
+            var bookmark = bookmarks_1[_i];
+            _loop_1(bookmark);
+        }
+        this._updateBookmark();
+    };
+    WidgetBookmarks.prototype._selectBookmark = function (bookmark) {
+        var isFirstEnabled = !this._lastEnabledBookmarkId;
+        this._lastEnabledBookmarkId = bookmark.ID;
+        this._updateBookmark();
+        ViewRenderEngine.Render({
+            apiGetter: this._apiGetters.GetBruceGetter(),
+            bookmark: bookmark,
+            bookmarkId: bookmark.ID,
+            manager: this._manager,
+            skipTransition: isFirstEnabled,
+            viewId: this._viewId,
+            viewer: this._viewer
+        });
+    };
+    WidgetBookmarks.prototype._updateBookmark = function () {
+        var _this = this;
+        var allBookmarks = this._row.querySelectorAll(".NextspaceBookmarksRowItem");
+        for (var _i = 0, _a = Array.from(allBookmarks); _i < _a.length; _i++) {
+            var item = _a[_i];
+            if (item.getAttribute("bookmark-id") == this._lastEnabledBookmarkId) {
+                item.setAttribute("is-selected", "true");
+            }
+            else {
+                item.setAttribute("is-selected", "false");
+            }
+        }
+        var index = this.bookmarks.findIndex(function (b) { return b.ID == _this._lastEnabledBookmarkId; });
+        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);
+    };
+    return WidgetBookmarks;
+}(Widget.AWidget));
+
 // TODO: Move these to the data model.
 var MIN_SHADOW_SIZE = 2048;
 var MAX_SHADOW_SIZE = 32768;
@@ -10931,10 +11319,11 @@ function renderNavigator(params, bookmark, view) {
 var ViewRenderEngine;
 (function (ViewRenderEngine) {
     function Render(params) {
+        var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var api, view, _a, bookmark, bookmarkId, _b, version;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var api, view, _b, bookmark, bookmarkId, _c, version, bWidget;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
                         if (!params.manager && params.viewer) {
                             params.manager = ViewerUtils.GetManager({
@@ -10950,17 +11339,17 @@ var ViewRenderEngine;
                         }
                         api = params.apiGetter.getApi();
                         if (!params.view) return [3 /*break*/, 1];
-                        _a = params.view;
+                        _b = params.view;
                         return [3 /*break*/, 3];
                     case 1: return [4 /*yield*/, ProjectView.Get({
                             api: api,
                             viewId: params.viewId
                         })];
                     case 2:
-                        _a = (_c.sent()).view;
-                        _c.label = 3;
+                        _b = (_d.sent()).view;
+                        _d.label = 3;
                     case 3:
-                        view = _a;
+                        view = _b;
                         bookmark = params.bookmark;
                         if (!!bookmark) return [3 /*break*/, 7];
                         bookmarkId = params.bookmarkId;
@@ -10974,26 +11363,32 @@ var ViewRenderEngine;
                                 bookmarkId: bookmarkId
                             })];
                     case 4:
-                        _b = (_c.sent()).bookmark;
+                        _c = (_d.sent()).bookmark;
                         return [3 /*break*/, 6];
                     case 5:
-                        _b = null;
-                        _c.label = 6;
+                        _c = null;
+                        _d.label = 6;
                     case 6:
-                        bookmark = _b;
-                        _c.label = 7;
+                        bookmark = _c;
+                        _d.label = 7;
                     case 7:
                         version = view.DataVersion;
                         if (!(version == 1)) return [3 /*break*/, 9];
                         return [4 /*yield*/, renderLegacyNavigator(params, bookmark, view)];
                     case 8:
-                        _c.sent();
+                        _d.sent();
                         return [3 /*break*/, 11];
                     case 9: return [4 /*yield*/, renderNavigator(params, bookmark, view)];
                     case 10:
-                        _c.sent();
-                        _c.label = 11;
-                    case 11: return [2 /*return*/];
+                        _d.sent();
+                        _d.label = 11;
+                    case 11:
+                        bWidget = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_BOOKMARKS_WIDGET_KEY];
+                        if (bWidget) {
+                            bWidget.ViewId = params.viewId ? params.viewId : view === null || view === void 0 ? void 0 : view.ID;
+                            bWidget.LastEnabledBookmarkId = params.bookmarkId ? params.bookmarkId : bookmark === null || bookmark === void 0 ? void 0 : bookmark.ID;
+                        }
+                        return [2 /*return*/];
                 }
             });
         });
@@ -11001,7 +11396,2799 @@ var ViewRenderEngine;
     ViewRenderEngine.Render = Render;
 })(ViewRenderEngine || (ViewRenderEngine = {}));
 
-var VERSION = "2.2.6";
+var DEFAULT_SMOOTH_MULTIPLIER = 0;
+function avgDistanceFromPointPair(refPoint, pos1, pos2) {
+    var carto1 = Cartographic.fromCartesian(refPoint);
+    var carto2 = Cartographic.fromCartesian(pos1);
+    var carto3 = Cartographic.fromCartesian(pos2);
+    var x1 = carto1.longitude;
+    var y1 = carto1.latitude;
+    var x2 = carto2.longitude;
+    var y2 = carto2.latitude;
+    var x3 = carto3.longitude;
+    var y3 = carto3.latitude;
+    var A = x1 - x2;
+    var B = y1 - y2;
+    var C = x3 - x2;
+    var D = y3 - y2;
+    var dot = A * C + B * D;
+    var lenSq = C * C + D * D;
+    var param = dot / lenSq;
+    var xx;
+    var yy;
+    if (param < 0 || x2 == x3 && y2 == y3) {
+        xx = x2;
+        yy = y2;
+    }
+    else if (param > 1) {
+        xx = x3;
+        yy = y3;
+    }
+    else {
+        xx = x2 + param * C;
+        yy = y2 + param * D;
+    }
+    var dx = x1 - xx;
+    var dy = y1 - yy;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+function getInsertIndex(positions, pos3d) {
+    if (positions.length < 2) {
+        return 0;
+    }
+    var index = -1;
+    if (positions) {
+        var distance = void 0;
+        for (var j = 0; j < positions.length; j++) {
+            var pos1 = positions[j];
+            var pos2 = void 0;
+            var pos2Index = -1;
+            if (j >= positions.length - 1) {
+                pos2 = positions[0];
+                pos2Index = 0;
+            }
+            else {
+                pos2 = positions[j + 1];
+                pos2Index = j + 1;
+            }
+            if (Cartes.ValidateCartes3(pos1), Cartes.ValidateCartes3(pos2)) {
+                var length_1 = avgDistanceFromPointPair(pos3d, pos1, pos2);
+                if (index == -1 || length_1 < distance) {
+                    var insertIndex = pos2Index == 0 ? 0 : j > pos2Index ? j : pos2Index;
+                    index = insertIndex;
+                    distance = length_1;
+                }
+            }
+        }
+    }
+    return index == -1 ? 0 : index;
+}
+var OUTLINE_COLOR = "rgba(51, 177, 255, 0.2)";
+var FILL_COLOR = "#33B1FF";
+var POINT_SIZE = 25;
+var PolygonPoint = /** @class */ (function () {
+    function PolygonPoint(viewer, position, perPositionHeight) {
+        this.id = ObjectUtils.UId();
+        this.viewer = viewer;
+        this.position = position;
+        this.perPositionHeight = perPositionHeight;
+    }
+    Object.defineProperty(PolygonPoint.prototype, "Id", {
+        get: function () {
+            return this.id;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PolygonPoint.prototype.GetPosition = function () {
+        return this.position.clone();
+    };
+    PolygonPoint.prototype.SetPosition = function (value) {
+        this.position = value;
+    };
+    PolygonPoint.prototype.createEntity = function () {
+        var _this = this;
+        this.destroyEntity();
+        this.point = this.viewer.entities.add({
+            id: this.id,
+            point: {
+                pixelSize: POINT_SIZE,
+                color: Color.fromCssColorString(FILL_COLOR),
+                outlineColor: Color.WHITE,
+                outlineWidth: 2,
+                heightReference: this.perPositionHeight ? HeightReference.NONE : HeightReference.CLAMP_TO_GROUND
+            },
+            position: new CallbackProperty(function () { return _this.position; }, false)
+        });
+    };
+    PolygonPoint.prototype.destroyEntity = function () {
+        if (this.point && this.viewer.entities.contains(this.point)) {
+            this.viewer.entities.remove(this.point);
+        }
+        this.point = null;
+    };
+    PolygonPoint.prototype.Dispose = function () {
+        this.destroyEntity();
+    };
+    PolygonPoint.prototype.Create = function () {
+        this.createEntity();
+    };
+    PolygonPoint.prototype.Remove = function () {
+        this.destroyEntity();
+    };
+    return PolygonPoint;
+}());
+var Draw3dPolygon = /** @class */ (function () {
+    function Draw3dPolygon(params) {
+        var _this = this;
+        this.points = [];
+        this.changed = false;
+        this.hidePolygon = false;
+        this.perPositionHeight = false;
+        this.smoothing = false;
+        this.maxPoints = -1;
+        this.viewer = params.viewer;
+        this.onFinish = params.onFinish;
+        this.onChange = params.onChange;
+        this.maxPoints = isNaN(+params.maxPoints) ? -1 : +params.maxPoints;
+        this.perPositionHeight = Boolean(params.perPositionHeight);
+        if (params.hierarchy) {
+            params.hierarchy.positions.forEach(function (pos3d) {
+                _this.points.push(new PolygonPoint(_this.viewer, pos3d, _this.perPositionHeight));
+            });
+        }
+        if (params.hidePolygon) {
+            this.hidePolygon = params.hidePolygon;
+        }
+        if (params.smoothing) {
+            this.smoothing = params.smoothing;
+        }
+    }
+    Object.defineProperty(Draw3dPolygon.prototype, "hasReachedMax", {
+        get: function () {
+            return this.maxPoints > 0 && this.points.length >= this.maxPoints;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Starts or resumes the tool.
+     */
+    Draw3dPolygon.prototype.Start = function () {
+        this.createCursor();
+        this.createEntity();
+        this.points.forEach(function (x) {
+            x.Create();
+        });
+        this.startEvents();
+        if (this.points.length > 2) {
+            this.createFinishButton();
+        }
+    };
+    /**
+     * Stops events without removing the entity.
+     */
+    Draw3dPolygon.prototype.Pause = function () {
+        this.destroyEvents();
+        this.points.forEach(function (point) {
+            point.Remove();
+        });
+        this.destroyFinishButton();
+        this.destroyCursor();
+        if (this.draggingPoint) {
+            this.draggingPoint.Dispose();
+            this.draggingPoint = null;
+            ViewUtils.SetLockedCameraStatus({
+                status: false,
+                viewer: this.viewer
+            });
+        }
+    };
+    /**
+     * Disposes of the tool. Removes events and entity.
+     */
+    Draw3dPolygon.prototype.Dispose = function () {
+        this.destroyFinishButton();
+        this.destroyEvents();
+        this.destroyEntity();
+        this.destroyCursor();
+        this.points.forEach(function (point) {
+            point.Dispose();
+        });
+        this.points = [];
+        if (this.draggingPoint) {
+            this.draggingPoint.Dispose();
+            this.draggingPoint = null;
+            ViewUtils.SetLockedCameraStatus({
+                status: false,
+                viewer: this.viewer
+            });
+        }
+    };
+    Draw3dPolygon.prototype.GetHierarchy = function (smooth) {
+        if (smooth === void 0) { smooth = false; }
+        if (smooth) {
+            if (!this.changed && this.cachedHierarchy) {
+                return this.cachedHierarchy;
+            }
+            var posses = this.points.map(function (x) { return x.GetPosition(); });
+            if (smooth) {
+                posses = DrawingUtils.SmoothPoints(posses, this.smoothing ? DEFAULT_SMOOTH_MULTIPLIER : 0, true);
+            }
+            this.cachedHierarchy = new PolygonHierarchy(posses, []);
+            this.changed = false;
+            return this.cachedHierarchy;
+        }
+        return new PolygonHierarchy(this.points.map(function (x) { return x.GetPosition(); }), []);
+    };
+    Draw3dPolygon.prototype.getOutlinePosses = function (smooth) {
+        if (smooth === void 0) { smooth = false; }
+        var hierarchy = this.GetHierarchy(smooth);
+        var posses = hierarchy.positions.map(function (x) { return x.clone(); });
+        if (posses.length > 2 && !Cartes.IsRing3Closed(posses)) {
+            posses.push(posses[0]);
+        }
+        return posses;
+    };
+    Draw3dPolygon.prototype.startEvents = function () {
+        var _this = this;
+        this.destroyEvents();
+        this.events = new ScreenSpaceEventHandler(this.viewer.canvas);
+        this.events.setInputAction(function (e) {
+            var pos2d = e.position;
+            if (Cartes.ValidateCartes2(pos2d)) {
+                _this.onMouseClick(pos2d);
+            }
+        }, ScreenSpaceEventType.LEFT_CLICK);
+        this.events.setInputAction(function (e) {
+            var pos2d = e.position;
+            if (Cartes.ValidateCartes2(pos2d)) {
+                _this.onMouseUp(pos2d);
+            }
+        }, ScreenSpaceEventType.LEFT_UP);
+        this.events.setInputAction(function (e) {
+            var pos2d = e.endPosition;
+            if (Cartes.ValidateCartes2(pos2d)) {
+                _this.onMouseMove(pos2d);
+            }
+        }, ScreenSpaceEventType.MOUSE_MOVE);
+        this.events.setInputAction(function (e) {
+            var pos2d = e.position;
+            if (Cartes.ValidateCartes2(pos2d)) {
+                _this.onMouseDown(pos2d);
+            }
+        }, ScreenSpaceEventType.LEFT_DOWN);
+        this.events.setInputAction(function (e) {
+            var pos2d = e.position;
+            if (Cartes.ValidateCartes2(pos2d)) {
+                _this.onMouseRightClick(pos2d);
+            }
+        }, ScreenSpaceEventType.RIGHT_CLICK);
+        this.renderEventRemoval = this.viewer.scene.postRender.addEventListener(function () {
+            _this.updateFinishButton();
+        });
+    };
+    Draw3dPolygon.prototype.onMouseUp = function (pos2d) {
+        if (this.draggingPoint) {
+            this.draggingPoint = null;
+            ViewUtils.SetLockedCameraStatus({
+                status: false,
+                viewer: this.viewer
+            });
+        }
+    };
+    Draw3dPolygon.prototype.onMouseClick = function (pos2d) {
+        var _a;
+        if (!this.draggingPoint && !this.hasReachedMax) {
+            var pos3d = DrawingUtils.GetAccuratePosition(this.viewer, pos2d);
+            if (Cartes.ValidateCartes3(pos3d)) {
+                var positions = this.GetHierarchy().positions;
+                var index = getInsertIndex(positions, pos3d);
+                var point = new PolygonPoint(this.viewer, pos3d, this.perPositionHeight);
+                point.Create();
+                this.points.splice(index, 0, point);
+                this.changed = true;
+                (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.GetHierarchy());
+                if (!this.finishElement && this.points.length > 2) {
+                    this.createFinishButton();
+                }
+            }
+        }
+    };
+    Draw3dPolygon.prototype.onMouseDown = function (pos2d) {
+        var point = this.getPointFrom2dPos(pos2d);
+        if (point) {
+            this.draggingPoint = point;
+            ViewUtils.SetLockedCameraStatus({
+                status: true,
+                viewer: this.viewer
+            });
+        }
+    };
+    Draw3dPolygon.prototype.onMouseRightClick = function (pos2d) {
+        var _a;
+        var point = this.getPointFrom2dPos(pos2d);
+        if (point) {
+            var index = this.points.findIndex(function (x) { return x.Id == point.Id; });
+            if (index >= 0) {
+                this.points.splice(index, 1);
+                point.Dispose();
+                this.changed = true;
+                (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.GetHierarchy());
+                if (this.points.length < 3) {
+                    this.destroyFinishButton();
+                }
+            }
+        }
+    };
+    Draw3dPolygon.prototype.onMouseMove = function (pos2d) {
+        var _a;
+        var pos3d = DrawingUtils.GetAccuratePosition(this.viewer, pos2d);
+        if (Cartes.ValidateCartes3(pos3d)) {
+            this.cursorPos = pos3d;
+            if (this.draggingPoint) {
+                this.draggingPoint.SetPosition(pos3d);
+                this.changed = true;
+                (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.GetHierarchy());
+            }
+        }
+    };
+    Draw3dPolygon.prototype.destroyEvents = function () {
+        var _a, _b;
+        (_a = this.events) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.events = null;
+        (_b = this.renderEventRemoval) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.renderEventRemoval = null;
+    };
+    Draw3dPolygon.prototype.createEntity = function () {
+        var _this = this;
+        this.destroyEntity();
+        this.polygon = this.viewer.entities.add({
+            polygon: {
+                hierarchy: new CallbackProperty(function () { return _this.GetHierarchy(true); }, false),
+                material: Color.fromCssColorString(OUTLINE_COLOR),
+                heightReference: this.perPositionHeight ? HeightReference.NONE : HeightReference.CLAMP_TO_GROUND,
+                perPositionHeight: this.perPositionHeight ? true : undefined,
+                shadows: ShadowMode.ENABLED,
+                classificationType: ClassificationType.TERRAIN
+            },
+            polyline: {
+                positions: new CallbackProperty(function () { return _this.getOutlinePosses(true); }, false),
+                width: 6,
+                material: Color.fromCssColorString(FILL_COLOR),
+                clampToGround: !this.perPositionHeight
+            },
+            show: !this.hidePolygon
+        });
+    };
+    Draw3dPolygon.prototype.destroyEntity = function () {
+        if (this.polygon && this.viewer.entities.contains(this.polygon)) {
+            this.viewer.entities.remove(this.polygon);
+        }
+        this.polygon = null;
+    };
+    Draw3dPolygon.prototype.createCursor = function () {
+        var _this = this;
+        this.destroyCursor();
+        this.cursor = this.viewer.entities.add({
+            point: {
+                pixelSize: 10,
+                color: Color.fromCssColorString(FILL_COLOR),
+                outlineColor: Color.WHITE,
+                outlineWidth: 2,
+                heightReference: this.perPositionHeight ? HeightReference.NONE : HeightReference.CLAMP_TO_GROUND
+            },
+            position: new CallbackProperty(function () { return _this.cursorPos; }, false)
+        });
+    };
+    Draw3dPolygon.prototype.destroyCursor = function () {
+        if (this.cursor && this.viewer.entities.contains(this.cursor)) {
+            this.viewer.entities.remove(this.cursor);
+        }
+        this.cursor = null;
+    };
+    Draw3dPolygon.prototype.getPointFrom2dPos = function (pos2d) {
+        var drill = this.viewer.scene.drillPick(pos2d, 3, 5, 5);
+        if (drill && drill.length > 0) {
+            var _loop_1 = function (i) {
+                var entity = drill[i].id;
+                if (entity instanceof Entity) {
+                    var id_1 = entity.id;
+                    var point = this_1.points.find(function (x) { return x.Id == id_1; });
+                    if (point) {
+                        return { value: point };
+                    }
+                }
+            };
+            var this_1 = this;
+            for (var i = 0; i < drill.length; i++) {
+                var state_1 = _loop_1(i);
+                if (typeof state_1 === "object")
+                    return state_1.value;
+            }
+        }
+        return null;
+    };
+    Draw3dPolygon.prototype.createFinishButton = function () {
+        var _this = this;
+        this.destroyFinishButton();
+        if (!this.onFinish) {
+            return;
+        }
+        var ele = document.createElement("div");
+        ele.setAttribute("style", "\n            left: 0px;\n            top: 0px;\n            position: absolute;\n            z-index: 3;\n            border-radius: 5px;\n            background-color: white;\n            display: flex;\n            align-items: center;\n            padding: 3px 4px;\n            -webkit-touch-callout: none;\n            -webkit-user-select: none;\n            -khtml-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n            box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.24), 0px 18px 36px -4px rgba(18, 22, 25, 0.6);\n        ");
+        var butt = document.createElement("button");
+        butt.setAttribute("style", "\n            cursor: pointer;\n            border-radius: .375rem;\n            padding: 4px 9px;\n            transition: opacity 0.3s ease;\n            width: 100px;\n            width: min-content;\n            white-space: nowrap;\n            background-color: white;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-grow: 1;\n            flex-shrink: 1;\n            height: 100%;            \n            background-color: #0072c3;\n            border: 1px solid #0072c3;\n            color: white;\n        ");
+        butt.innerText = "Finish?";
+        butt.onclick = function () {
+            _this.onFinish(_this.GetHierarchy());
+        };
+        ele.appendChild(butt);
+        ele.style.display = "none";
+        this.viewer.canvas.parentElement.appendChild(ele);
+        this.finishElement = ele;
+        this.updateFinishButton();
+    };
+    Draw3dPolygon.prototype.destroyFinishButton = function () {
+        if (this.finishElement && this.finishElement.parentElement) {
+            this.finishElement.remove();
+        }
+        this.finishElement = null;
+    };
+    Draw3dPolygon.prototype.updateFinishButton = function () {
+        if (this.finishElement) {
+            var point = this.points.length ? this.points[0] : null;
+            if (point) {
+                var pos3d = point.GetPosition();
+                if (Cartes.ValidateCartes3(pos3d)) {
+                    var pos2d = this.viewer.scene.cartesianToCanvasCoordinates(pos3d);
+                    if (Cartes.ValidateCartes2(pos2d)) {
+                        this.finishElement.style.left = "".concat(pos2d.x + 10, "px");
+                        this.finishElement.style.top = "".concat(pos2d.y - 20, "px");
+                        this.finishElement.style.display = "flex";
+                    }
+                }
+            }
+        }
+    };
+    return Draw3dPolygon;
+}());
+
+var DEFAULT_SMOOTH_MULTIPLIER$1 = 0;
+function avgDistanceFromPointPair$1(refPoint, pos1, pos2) {
+    var carto1 = Cartographic.fromCartesian(refPoint);
+    var carto2 = Cartographic.fromCartesian(pos1);
+    var carto3 = Cartographic.fromCartesian(pos2);
+    var x1 = carto1.longitude;
+    var y1 = carto1.latitude;
+    var x2 = carto2.longitude;
+    var y2 = carto2.latitude;
+    var x3 = carto3.longitude;
+    var y3 = carto3.latitude;
+    var A = x1 - x2;
+    var B = y1 - y2;
+    var C = x3 - x2;
+    var D = y3 - y2;
+    var dot = A * C + B * D;
+    var lenSq = C * C + D * D;
+    var param = dot / lenSq;
+    var xx;
+    var yy;
+    if (param < 0 || x2 == x3 && y2 == y3) {
+        xx = x2;
+        yy = y2;
+    }
+    else if (param > 1) {
+        xx = x3;
+        yy = y3;
+    }
+    else {
+        xx = x2 + param * C;
+        yy = y2 + param * D;
+    }
+    var dx = x1 - xx;
+    var dy = y1 - yy;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+function getInsertIndex$1(positions, pos3d) {
+    if (positions.length < 2) {
+        return 0;
+    }
+    var index = 0;
+    if (positions) {
+        var marginalShift = function (pos) {
+            var SHIFT = 0.001;
+            pos = pos.clone();
+            return new Cartesian3(pos.x + SHIFT, pos.y + SHIFT, pos.z + SHIFT);
+        };
+        var distance = avgDistanceFromPointPair$1(pos3d, positions[0], marginalShift(positions[0]));
+        var endDistance = avgDistanceFromPointPair$1(pos3d, positions[positions.length - 1], marginalShift(positions[positions.length - 1]));
+        if (endDistance < distance) {
+            index = positions.length;
+            distance = endDistance;
+        }
+        for (var j = 0; j < positions.length; j++) {
+            var pos1 = positions[j];
+            var pos2 = positions[j + 1];
+            var pos2Index = j + 1;
+            if (Cartes.ValidateCartes3(pos1), Cartes.ValidateCartes3(pos2)) {
+                var length_1 = avgDistanceFromPointPair$1(pos3d, pos1, pos2);
+                if (length_1 < distance) {
+                    var insertIndex = pos2Index == 0 ? 0 : j > pos2Index ? j : pos2Index;
+                    index = insertIndex;
+                    distance = length_1;
+                }
+            }
+        }
+    }
+    return index;
+}
+var FILL_COLOR$1 = "#33B1FF";
+var POINT_SIZE$1 = 25;
+var PolylinePoint = /** @class */ (function () {
+    function PolylinePoint(viewer, position, perPositionHeight) {
+        this.id = ObjectUtils.UId();
+        this.viewer = viewer;
+        this.position = position;
+        this.perPositionHeight = perPositionHeight;
+    }
+    Object.defineProperty(PolylinePoint.prototype, "Id", {
+        get: function () {
+            return this.id;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PolylinePoint.prototype.GetPosition = function () {
+        return this.position.clone();
+    };
+    PolylinePoint.prototype.SetPosition = function (value) {
+        this.position = value;
+    };
+    PolylinePoint.prototype.createEntity = function () {
+        var _this = this;
+        this.destroyEntity();
+        this.point = this.viewer.entities.add({
+            id: this.id,
+            point: {
+                pixelSize: POINT_SIZE$1,
+                color: Color.fromCssColorString(FILL_COLOR$1),
+                outlineColor: Color.WHITE,
+                outlineWidth: 2,
+                heightReference: this.perPositionHeight ? HeightReference.NONE : HeightReference.CLAMP_TO_GROUND
+            },
+            position: new CallbackProperty(function () { return _this.position; }, false)
+        });
+    };
+    PolylinePoint.prototype.destroyEntity = function () {
+        if (this.point && this.viewer.entities.contains(this.point)) {
+            this.viewer.entities.remove(this.point);
+        }
+        this.point = null;
+    };
+    PolylinePoint.prototype.Dispose = function () {
+        this.destroyEntity();
+    };
+    PolylinePoint.prototype.Create = function () {
+        this.createEntity();
+    };
+    PolylinePoint.prototype.Remove = function () {
+        this.destroyEntity();
+    };
+    return PolylinePoint;
+}());
+var Draw3dPolyline = /** @class */ (function () {
+    function Draw3dPolyline(params) {
+        this.points = [];
+        this.hideLine = false;
+        this.perPositionHeight = false;
+        this.smoothing = false;
+        this.viewer = params.viewer;
+        this.onFinish = params.onFinish;
+        this.onChange = params.onChange;
+        if (params.perPositionHeight) {
+            this.perPositionHeight = params.perPositionHeight;
+        }
+        if (params.posses) {
+            for (var _i = 0, _a = params.posses; _i < _a.length; _i++) {
+                var pos = _a[_i];
+                this.points.push(new PolylinePoint(this.viewer, pos, this.perPositionHeight));
+            }
+        }
+        if (params.hideLine) {
+            this.hideLine = params.hideLine;
+        }
+        if (params.smoothing) {
+            this.smoothing = params.smoothing;
+        }
+    }
+    Draw3dPolyline.prototype.Start = function () {
+        this.createEntity();
+        this.points.forEach(function (x) {
+            x.Create();
+        });
+        this.createCursor();
+        this.startEvents();
+        if (this.points.length > 1) {
+            this.createFinishButton();
+        }
+    };
+    Draw3dPolyline.prototype.Pause = function () {
+        this.points.forEach(function (x) {
+            x.Remove();
+        });
+        this.destroyFinishButton();
+        this.destroyCursor();
+        this.destroyEvents();
+    };
+    Draw3dPolyline.prototype.Dispose = function () {
+        this.destroyEntity();
+        this.points.forEach(function (x) {
+            x.Dispose();
+        });
+        this.destroyCursor();
+        this.destroyEvents();
+        this.destroyFinishButton();
+    };
+    Draw3dPolyline.prototype.GetPositions = function (smooth) {
+        if (smooth === void 0) { smooth = false; }
+        var points = this.points.map(function (x) { return x.GetPosition(); });
+        if (smooth) {
+            points = DrawingUtils.SmoothPoints(points, this.smoothing ? DEFAULT_SMOOTH_MULTIPLIER$1 : 0, false);
+        }
+        return points;
+    };
+    Draw3dPolyline.prototype.startEvents = function () {
+        var _this = this;
+        this.destroyEvents();
+        this.events = new ScreenSpaceEventHandler(this.viewer.canvas);
+        this.events.setInputAction(function (e) {
+            var pos2d = e.position;
+            if (Cartes.ValidateCartes2(pos2d)) {
+                _this.onMouseClick(pos2d);
+            }
+        }, ScreenSpaceEventType.LEFT_CLICK);
+        this.events.setInputAction(function (e) {
+            var pos2d = e.position;
+            if (Cartes.ValidateCartes2(pos2d)) {
+                _this.onMouseUp(pos2d);
+            }
+        }, ScreenSpaceEventType.LEFT_UP);
+        this.events.setInputAction(function (e) {
+            var pos2d = e.endPosition;
+            if (Cartes.ValidateCartes2(pos2d)) {
+                _this.onMouseMove(pos2d);
+            }
+        }, ScreenSpaceEventType.MOUSE_MOVE);
+        this.events.setInputAction(function (e) {
+            var pos2d = e.position;
+            if (Cartes.ValidateCartes2(pos2d)) {
+                _this.onMouseDown(pos2d);
+            }
+        }, ScreenSpaceEventType.LEFT_DOWN);
+        this.events.setInputAction(function (e) {
+            var pos2d = e.position;
+            if (Cartes.ValidateCartes2(pos2d)) {
+                _this.onMouseRightClick(pos2d);
+            }
+        }, ScreenSpaceEventType.RIGHT_CLICK);
+        this.renderEventRemoval = this.viewer.scene.postRender.addEventListener(function () {
+            _this.updateFinishButton();
+        });
+    };
+    Draw3dPolyline.prototype.onMouseUp = function (pos2d) {
+        if (this.draggingPoint) {
+            this.draggingPoint = null;
+            ViewUtils.SetLockedCameraStatus({
+                status: false,
+                viewer: this.viewer
+            });
+        }
+    };
+    Draw3dPolyline.prototype.onMouseClick = function (pos2d) {
+        var _a;
+        if (!this.draggingPoint) {
+            var pos3d = DrawingUtils.GetAccuratePosition(this.viewer, pos2d);
+            if (Cartes.ValidateCartes3(pos3d)) {
+                var positions = this.GetPositions();
+                var index = getInsertIndex$1(positions, pos3d);
+                var point = new PolylinePoint(this.viewer, pos3d, this.perPositionHeight);
+                point.Create();
+                this.points.splice(index, 0, point);
+                (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.GetPositions());
+                if (!this.finishElement && this.points.length > 1) {
+                    this.createFinishButton();
+                }
+            }
+        }
+    };
+    Draw3dPolyline.prototype.onMouseDown = function (pos2d) {
+        var point = this.getPointFrom2dPos(pos2d);
+        if (point) {
+            this.draggingPoint = point;
+            ViewUtils.SetLockedCameraStatus({
+                status: true,
+                viewer: this.viewer
+            });
+        }
+    };
+    Draw3dPolyline.prototype.onMouseRightClick = function (pos2d) {
+        var _a;
+        var point = this.getPointFrom2dPos(pos2d);
+        if (point) {
+            var index = this.points.findIndex(function (x) { return x.Id == point.Id; });
+            if (index >= 0) {
+                this.points.splice(index, 1);
+                point.Dispose();
+                (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.GetPositions());
+                if (this.points.length < 2) {
+                    this.destroyFinishButton();
+                }
+            }
+        }
+    };
+    Draw3dPolyline.prototype.onMouseMove = function (pos2d) {
+        var _a;
+        var pos3d = DrawingUtils.GetAccuratePosition(this.viewer, pos2d);
+        if (Cartes.ValidateCartes3(pos3d)) {
+            this.cursorPos = pos3d;
+            if (this.draggingPoint) {
+                this.draggingPoint.SetPosition(pos3d);
+                (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, this.GetPositions());
+            }
+        }
+    };
+    Draw3dPolyline.prototype.destroyEvents = function () {
+        var _a, _b;
+        (_a = this.events) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.events = null;
+        (_b = this.renderEventRemoval) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.renderEventRemoval = null;
+    };
+    Draw3dPolyline.prototype.createEntity = function () {
+        var _this = this;
+        this.destroyEntity();
+        this.polyline = this.viewer.entities.add({
+            polyline: {
+                positions: new CallbackProperty(function () { return _this.GetPositions(true); }, false),
+                width: 6,
+                material: Color.fromCssColorString(FILL_COLOR$1),
+                clampToGround: !this.perPositionHeight
+            },
+            show: !this.hideLine
+        });
+    };
+    Draw3dPolyline.prototype.destroyEntity = function () {
+        if (this.polyline && this.viewer.entities.contains(this.polyline)) {
+            this.viewer.entities.remove(this.polyline);
+        }
+        this.polyline = null;
+    };
+    Draw3dPolyline.prototype.createCursor = function () {
+        var _this = this;
+        this.destroyCursor();
+        this.cursor = this.viewer.entities.add({
+            point: {
+                pixelSize: 10,
+                color: Color.fromCssColorString(FILL_COLOR$1),
+                outlineColor: Color.WHITE,
+                outlineWidth: 2,
+                heightReference: this.perPositionHeight ? HeightReference.NONE : HeightReference.CLAMP_TO_GROUND
+            },
+            position: new CallbackProperty(function () { return _this.cursorPos; }, false)
+        });
+    };
+    Draw3dPolyline.prototype.destroyCursor = function () {
+        if (this.cursor && this.viewer.entities.contains(this.cursor)) {
+            this.viewer.entities.remove(this.cursor);
+        }
+        this.cursor = null;
+    };
+    Draw3dPolyline.prototype.getPointFrom2dPos = function (pos2d) {
+        var drill = this.viewer.scene.drillPick(pos2d, 3, 5, 5);
+        if (drill && drill.length > 0) {
+            var _loop_1 = function (i) {
+                var entity = drill[i].id;
+                if (entity instanceof Entity) {
+                    var id_1 = entity.id;
+                    var point = this_1.points.find(function (x) { return x.Id == id_1; });
+                    if (point) {
+                        return { value: point };
+                    }
+                }
+            };
+            var this_1 = this;
+            for (var i = 0; i < drill.length; i++) {
+                var state_1 = _loop_1(i);
+                if (typeof state_1 === "object")
+                    return state_1.value;
+            }
+        }
+        return null;
+    };
+    Draw3dPolyline.prototype.createFinishButton = function () {
+        var _this = this;
+        this.destroyFinishButton();
+        if (!this.onFinish) {
+            return;
+        }
+        var ele = document.createElement("div");
+        ele.setAttribute("style", "\n            left: 0px;\n            top: 0px;\n            position: absolute;\n            z-index: 3;\n            border-radius: 5px;\n            background-color: white;\n            display: flex;\n            align-items: center;\n            padding: 3px 4px;\n            -webkit-touch-callout: none;\n            -webkit-user-select: none;\n            -khtml-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n            box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.24), 0px 18px 36px -4px rgba(18, 22, 25, 0.6);\n        ");
+        var butt = document.createElement("button");
+        butt.setAttribute("style", "\n            cursor: pointer;\n            border-radius: .375rem;\n            padding: 4px 9px;\n            transition: opacity 0.3s ease;\n            width: 100px;\n            width: min-content;\n            white-space: nowrap;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-grow: 1;\n            flex-shrink: 1;\n            height: 100%;\n            background-color: #0072c3;\n            border: 1px solid #0072c3;\n            color: white;\n        ");
+        butt.innerText = "Finish?";
+        butt.onclick = function () {
+            _this.onFinish(_this.GetPositions());
+        };
+        ele.appendChild(butt);
+        ele.style.display = "none";
+        this.viewer.canvas.parentElement.appendChild(ele);
+        this.finishElement = ele;
+        this.updateFinishButton();
+    };
+    Draw3dPolyline.prototype.destroyFinishButton = function () {
+        if (this.finishElement && this.finishElement.parentElement) {
+            this.finishElement.remove();
+        }
+        this.finishElement = null;
+    };
+    Draw3dPolyline.prototype.updateFinishButton = function () {
+        if (this.finishElement) {
+            var point = this.points.length ? this.points[0] : null;
+            if (point) {
+                var pos3d = point.GetPosition();
+                if (Cartes.ValidateCartes3(pos3d)) {
+                    var pos2d = this.viewer.scene.cartesianToCanvasCoordinates(pos3d);
+                    if (Cartes.ValidateCartes2(pos2d)) {
+                        this.finishElement.style.left = "".concat(pos2d.x + 10, "px");
+                        this.finishElement.style.top = "".concat(pos2d.y - 20, "px");
+                        this.finishElement.style.display = "flex";
+                    }
+                }
+            }
+        }
+    };
+    return Draw3dPolyline;
+}());
+
+var WidgetNavCompass = /** @class */ (function (_super) {
+    __extends(WidgetNavCompass, _super);
+    function WidgetNavCompass(params) {
+        var _this = _super.call(this, params) || this;
+        _this.ZOOM_DISTANCE = 0.85;
+        _this.ZOOM_TIME = 0.2;
+        _this.TURN_SPEED = 0.04;
+        _this.MIN_ZOOM_DISTANCE = 0.3;
+        _this.STYLESHEET_ID = "nextspace-nav-compass-stylesheet";
+        _this._generateStyles();
+        _this._generateElement();
+        _this._listenToRenders();
+        return _this;
+    }
+    WidgetNavCompass.prototype._getIs2d = function () {
+        return this._viewer.camera.frustum instanceof OrthographicFrustum;
+    };
+    WidgetNavCompass.prototype._listenToRenders = function () {
+        var _this = this;
+        if (this._renderRemoval) {
+            return;
+        }
+        this._renderRemoval = this._viewer.scene.postRender.addEventListener(function () {
+            _this._updateAxis();
+            _this._update2d3d();
+        });
+    };
+    WidgetNavCompass.prototype.Dispose = function () {
+        if (this._renderRemoval) {
+            this._renderRemoval();
+            this._renderRemoval = null;
+        }
+        _super.prototype.Dispose.call(this);
+    };
+    WidgetNavCompass.prototype._generateStyles = function () {
+        if (document.getElementById(this.STYLESHEET_ID)) {
+            return;
+        }
+        var style = document.createElement("style");
+        style.id = this.STYLESHEET_ID;
+        style.innerHTML = "\n            .NextspaceNavCompass {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                width: 85px;\n                min-height: 150px;\n                background: rgba(33, 39, 42, 0.75);\n                box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.18), 0px 18px 36px -4px rgba(18, 22, 25, 0.36);\n                backdrop-filter: blur(20px);\n                border-radius: 102px 102px 9px 9px;\n                overflow: hidden;\n                padding-top: 85px;\n                padding-bottom: 5px;\n                position: absolute;\n                bottom: 10px;\n                right: 10px;\n                box-sizing: border-box;\n            }\n\n            .NextspaceNavCompass * {\n                box-sizing: border-box;\n            }\n\n            .NextspaceNavCompassTop {\n                position: absolute;\n                height: 85px;\n                width: 85px;\n                top: -2px;\n                border-radius: 50%;\n                border: 1px solid #4D5358;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n            }\n\n            .NextspaceNavCompassAxis {\n                background: #181d20;\n                border: 1px solid rgba(255, 255, 255, 0.15);\n                width: 60px;\n                height: 60px;\n                border-radius: 50%;\n                position: relative;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n            }\n\n            .NextspaceNavCompassAxis >svg {\n                transition: 0.3s ease;\n                opacity: 0.9;\n                position: absolute;\n            }\n\n            .NextspaceNavCompassArrow {\n                margin-bottom: 6px;\n            }\n\n            .NextspaceNavCompassAxis:hover .NextspaceNavCompassArrow {\n                opacity: 1;\n                transform: scale(1.1);\n            }\n\n            .NextspaceNavCompassRow {\n                display: flex;\n                align-items: center;\n            }\n\n            .NextspaceNavCompassCol {\n                display: flex;\n                flex-direction: column;\n            }\n\n            .NextspaceNavCompassButt {\n                width: 40px;\n                height: 35px;\n                flex-shrink: 1;\n                flex-grow: 0;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                transition: 0.3s ease;\n            }\n\n            .NextspaceNavCompassButt[is-disabled=\"true\"] {\n                opacity: 0.4;\n                cursor: default;\n                pointer-events: none;\n            }\n\n            .NextspaceNavCompassButt:hover {\n                transform: scale(1.2);\n            }\n\n            .NextspaceNavCompassHorDash {\n                background-color: rgba(255, 255, 255, 0.12);\n                width: calc(100% - 10px);\n                height: 1px;\n                flex-shrink: 0;\n                flex-grow: 0;\n                margin-top: 5px;\n                margin-bottom: 5px;\n            }\n\n            .NextspaceNavCompassVerDash {\n                background-color: rgba(255, 255, 255, 0.12);\n                width: 1px;\n                height: 50px;\n                flex-shrink: 0;\n                flex-grow: 0;\n                margin-top: 5px;\n                margin-bottom: 5px;\n                margin-left: 1px;\n                margin-right: 1px;\n            }\n\n            .NextspaceNavCompassDimToggle {\n                background: #121619;\n                border-radius: 6px;\n                width: calc(100% - 10px);\n                height: 24px;\n                flex-grow: 0;\n                flex-shrink: 1;\n                padding: 2px;\n                display: flex;\n            }\n\n            .NextspaceNavCompassDimToggleButt {\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 4px;\n                flex-grow: 1;\n                flex-shrink: 1;\n                width: 100%;\n                transition: 0.3s ease;\n                cursor: pointer;\n                opacity: 0.4;\n                color: white;\n                font-size: 12px;\n                font-family: Arial, Helvetica, sans-serif;\n            }\n\n            .NextspaceNavCompassDimToggleButt[is-selected=\"true\"] {\n                opacity: 1;\n                background-color: #4D5358;\n                box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12);\n            }\n        ";
+        document.head.appendChild(style);
+    };
+    WidgetNavCompass.prototype._generateElement = function () {
+        var _this = this;
+        var element = document.createElement("div");
+        element.className = "NextspaceNavCompass";
+        var top = document.createElement("div");
+        top.className = "NextspaceNavCompassTop";
+        element.appendChild(top);
+        var axis = document.createElement("div");
+        axis.className = "NextspaceNavCompassAxis";
+        axis.setAttribute("title", "Click to reset north");
+        top.appendChild(axis);
+        axis.addEventListener("click", function () {
+            _this._clickResetNorth();
+        });
+        axis.innerHTML = "\n            <svg width=\"72\" height=\"72\" viewBox=\"0 0 94 94\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"46\" width=\"2\" height=\"8\" rx=\"1\" fill=\"#FF3D00\"/>\n                <rect x=\"46\" y=\"86\" width=\"2\" height=\"8\" rx=\"1\" fill=\"#4D5254\"/>\n                <rect x=\"94\" y=\"46\" width=\"2\" height=\"8\" rx=\"1\" transform=\"rotate(90 94 46)\" fill=\"#4D5254\"/>\n                <rect x=\"8\" y=\"46\" width=\"2\" height=\"8\" rx=\"1\" transform=\"rotate(90 8 46)\" fill=\"#4D5254\"/>\n                <rect x=\"79.5269\" y=\"13.0589\" width=\"2\" height=\"8\" rx=\"1\" transform=\"rotate(45 79.5269 13.0589)\" fill=\"#4D5254\"/>\n                <rect x=\"18.7157\" y=\"73.8701\" width=\"2\" height=\"8\" rx=\"1\" transform=\"rotate(45 18.7157 73.8701)\" fill=\"#4D5254\"/>\n                <rect x=\"80.9412\" y=\"79.5269\" width=\"2\" height=\"8\" rx=\"1\" transform=\"rotate(135 80.9412 79.5269)\" fill=\"#4D5254\"/>\n                <rect x=\"20.1299\" y=\"18.7157\" width=\"2\" height=\"8\" rx=\"1\" transform=\"rotate(135 20.1299 18.7157)\" fill=\"#4D5254\"/>\n                <rect x=\"28.8555\" y=\"5.80811\" width=\"2\" height=\"4\" rx=\"1\" transform=\"rotate(-22.5 28.8555 5.80811)\" fill=\"#505456\"/>\n                <rect x=\"61.7662\" y=\"85.2617\" width=\"2\" height=\"4\" rx=\"1\" transform=\"rotate(-22.5 61.7662 85.2617)\" fill=\"#505456\"/>\n                <rect x=\"88.1919\" y=\"28.8553\" width=\"2\" height=\"4\" rx=\"1\" transform=\"rotate(67.5 88.1919 28.8553)\" fill=\"#505456\"/>\n                <rect x=\"8.73828\" y=\"61.7661\" width=\"2\" height=\"4\" rx=\"1\" transform=\"rotate(67.5 8.73828 61.7661)\" fill=\"#505456\"/>\n                <rect x=\"63.2969\" y=\"5.04272\" width=\"2\" height=\"4\" rx=\"1\" transform=\"rotate(22.5 63.2969 5.04272)\" fill=\"#505456\"/>\n                <rect x=\"30.386\" y=\"84.4963\" width=\"2\" height=\"4\" rx=\"1\" transform=\"rotate(22.5 30.386 84.4963)\" fill=\"#505456\"/>\n                <rect x=\"88.9572\" y=\"63.2969\" width=\"2\" height=\"4\" rx=\"1\" transform=\"rotate(112.5 88.9572 63.2969)\" fill=\"#505456\"/>\n                <rect x=\"9.50354\" y=\"30.3861\" width=\"2\" height=\"4\" rx=\"1\" transform=\"rotate(112.5 9.50354 30.3861)\" fill=\"#505456\"/>\n            </svg>\n\n            <svg class=\"NextspaceNavCompassArrow\" width=\"28\" height=\"35\" viewBox=\"0 0 32 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M31.544 39.666C31.969 39.29 32.114 38.682 31.905 38.15L17.229 0.845C17.028 0.334 16.542 0 16.001 0C15.46 0 14.974 0.335 14.773 0.846L0.0950303 38.155C-0.11397 38.687 0.0310303 39.295 0.45603 39.67C0.88103 40.046 1.49303 40.106 1.98203 39.821L14.699 32.401C15.515 31.925 16.518 31.925 17.333 32.401L30.019 39.816C30.507 40.101 31.12 40.041 31.545 39.665L31.544 39.666Z\" fill=\"url(#paint0_linear_363_9865)\"/>\n                <path d=\"M16.001 0C15.46 0 14.974 0.335 14.773 0.846L0.0950303 38.155C-0.11397 38.687 0.0310303 39.295 0.45603 39.67C0.88103 40.046 1.49303 40.106 1.98203 39.821L14.699 32.401C15.103 32.165 15.552 32.047 16.002 32.045V0H16.001Z\" fill=\"#1192E8\"/>\n                <path d=\"M0.454956 39.67C0.879956 40.046 1.49196 40.106 1.98096 39.821L14.698 32.401C15.102 32.165 15.551 32.047 16.001 32.045V24.844L0.454956 39.67Z\" fill=\"url(#paint1_linear_363_9865)\"/>\n                <path d=\"M31.546 39.67C31.121 40.046 30.509 40.106 30.02 39.821L17.303 32.401C16.899 32.165 16.45 32.047 16 32.045V24.844L31.546 39.67Z\" fill=\"url(#paint2_linear_363_9865)\"/>\n                <defs>\n                    <linearGradient id=\"paint0_linear_363_9865\" x1=\"16\" y1=\"0\" x2=\"16\" y2=\"39.9997\" gradientUnits=\"userSpaceOnUse\">\n                        <stop stop-color=\"#0072C3\"/>\n                        <stop offset=\"1\" stop-color=\"#00539A\"/>\n                    </linearGradient>\n                    <linearGradient id=\"paint1_linear_363_9865\" x1=\"8.22796\" y1=\"24.844\" x2=\"8.22796\" y2=\"39.9997\" gradientUnits=\"userSpaceOnUse\">\n                        <stop stop-color=\"#0072C3\"/>\n                        <stop offset=\"1\" stop-color=\"#00539A\"/>\n                    </linearGradient>\n                    <linearGradient id=\"paint2_linear_363_9865\" x1=\"23.773\" y1=\"24.844\" x2=\"23.773\" y2=\"39.9997\" gradientUnits=\"userSpaceOnUse\">\n                        <stop stop-color=\"#00539A\"/>\n                        <stop offset=\"1\" stop-color=\"#003A6D\"/>\n                    </linearGradient>\n                </defs>\n            </svg>\n        ";
+        this._axis = axis;
+        var rotateRow = document.createElement("div");
+        rotateRow.className = "NextspaceNavCompassRow";
+        rotateRow.innerHTML = "\n            <div class=\"NextspaceNavCompassButt\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M8 12.5C8 16.743 10.5205 20.389 14.1445 22.043C14.6875 22.291 15.3286 22.0152 15.5176 21.4492C15.6776 20.9702 15.4522 20.4473 14.9922 20.2383C12.0482 18.9023 10 15.943 10 12.5C10 10.3219 10.8297 8.34307 12.1777 6.83983L15.1465 9.80858C15.3415 10.0036 15.6585 10.0036 15.8535 9.80858C15.9505 9.71058 16 9.58306 16 9.45506L16 2.95506C16 2.68985 15.8946 2.43549 15.7071 2.24795C15.5196 2.06042 15.2652 1.95506 15 1.95506L8.5 1.95506C8.372 1.95506 8.24348 2.00355 8.14648 2.10155C7.95148 2.29655 7.95148 2.61358 8.14648 2.80858L10.7695 5.43163C9.05703 7.29483 8 9.76796 8 12.5Z\" fill=\"#A2A9B0\"/>\n                </svg>\n            </div>\n\n            <div class=\"NextspaceNavCompassButt\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M16 12.5C16 16.743 13.4795 20.389 9.85547 22.043C9.31247 22.291 8.67142 22.0152 8.48242 21.4492C8.32242 20.9702 8.54781 20.4473 9.00781 20.2383C11.9518 18.9023 14 15.943 14 12.5C14 10.3219 13.1703 8.34307 11.8223 6.83983L8.85352 9.80858C8.65852 10.0036 8.34149 10.0036 8.14648 9.80858C8.04948 9.71058 8 9.58306 8 9.45506L8 2.95506C8 2.68985 8.10536 2.43549 8.29289 2.24795C8.48043 2.06042 8.73478 1.95506 9 1.95506L15.5 1.95506C15.628 1.95506 15.7565 2.00355 15.8535 2.10155C16.0485 2.29655 16.0485 2.61358 15.8535 2.80858L13.2305 5.43163C14.943 7.29483 16 9.76796 16 12.5Z\" fill=\"#A2A9B0\"/>\n                </svg>\n            </div>\n        ";
+        element.appendChild(rotateRow);
+        var rotateLeft = rotateRow.children[0];
+        var rotateRight = rotateRow.children[1];
+        rotateLeft.addEventListener("click", function () {
+            _this._doRotate(-Math.PI * 0.25);
+        });
+        rotateRight.addEventListener("click", function () {
+            _this._doRotate(Math.PI * 0.25);
+        });
+        var horDash = document.createElement("div");
+        horDash.className = "NextspaceNavCompassHorDash";
+        element.appendChild(horDash);
+        var etcRow = document.createElement("div");
+        etcRow.className = "NextspaceNavCompassRow";
+        etcRow.innerHTML = "\n            <div class=\"NextspaceNavCompassCol\">\n                <div class=\"NextspaceNavCompassButt\">\n                    <svg width=\"16\" height=\"9\" viewBox=\"0 0 16 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M1 8L8 1L15 8\" stroke=\"#A2A9B0\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                    </svg>\n                </div>\n\n                <div class=\"NextspaceNavCompassButt\">\n                    <svg width=\"16\" height=\"9\" viewBox=\"0 0 16 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M15 1L8 8L1 1\" stroke=\"#A2A9B0\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                    </svg>\n                </div>\n            </div>\n            <div class=\"NextspaceNavCompassVerDash\"></div>\n            <div class=\"NextspaceNavCompassCol\">\n                <div class=\"NextspaceNavCompassButt\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 1V15\" stroke=\"#A2A9B0\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                        <path d=\"M15 8L1 8\" stroke=\"#A2A9B0\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                    </svg>\n                </div>\n\n                <div class=\"NextspaceNavCompassButt\">\n                    <svg width=\"16\" height=\"2\" viewBox=\"0 0 16 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M15 1L1 0.999999\" stroke=\"#A2A9B0\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                    </svg>\n                </div>\n            </div>\n        ";
+        element.appendChild(etcRow);
+        var lookUp = etcRow.children[0].children[0];
+        this._up = lookUp;
+        var lookDown = etcRow.children[0].children[1];
+        lookUp.addEventListener("click", function () {
+            _this._doLook(true);
+        });
+        this._down = lookDown;
+        lookDown.addEventListener("click", function () {
+            _this._doLook(false);
+        });
+        var zoomIn = etcRow.children[2].children[0];
+        var zoomOut = etcRow.children[2].children[1];
+        zoomIn.addEventListener("click", function () {
+            _this._doZoom(true);
+        });
+        zoomOut.addEventListener("click", function () {
+            _this._doZoom(false);
+        });
+        var dimToggle = document.createElement("div");
+        dimToggle.className = "NextspaceNavCompassDimToggle";
+        dimToggle.innerHTML = "\n            <div class=\"NextspaceNavCompassDimToggleButt\" is-selected=\"false\">\n                3D\n            </div>\n\n            <div class=\"NextspaceNavCompassDimToggleButt\" is-selected=\"false\">\n                2D\n            </div>\n        ";
+        element.appendChild(dimToggle);
+        var butt2d = dimToggle.children[1];
+        this._2d = butt2d;
+        butt2d.addEventListener("click", function () {
+            _this._toggle2d3d();
+        });
+        var butt3d = dimToggle.children[0];
+        this._3d = butt3d;
+        butt3d.addEventListener("click", function () {
+            _this._toggle2d3d();
+        });
+        this.Container.appendChild(element);
+        this._element = element;
+        this._update2d3d();
+    };
+    WidgetNavCompass.prototype._updateAxis = function () {
+        var heading = this._viewer.camera.heading;
+        var axis = this._axis;
+        axis.style.transform = "rotate(".concat(heading, "rad)");
+    };
+    WidgetNavCompass.prototype._clickResetNorth = function () {
+        var viewer = this._viewer;
+        var h = viewer.camera.heading;
+        var north = h < Math.PI ? h : h - Math.PI * 2;
+        this._doRotate(north);
+    };
+    WidgetNavCompass.prototype._doRotate = function (radians) {
+        var viewer = this._viewer;
+        var TURN_SPEED = this.TURN_SPEED;
+        var left = radians < 0;
+        radians = Math.abs(radians);
+        var camera = viewer.camera;
+        var is2d = this._getIs2d();
+        var isLookingStraightDown = camera.pitch === -Math.PI / 2;
+        if (is2d || isLookingStraightDown) {
+            camera.flyTo({
+                destination: camera.position,
+                orientation: {
+                    heading: camera.heading + (left ? radians : -radians),
+                    pitch: camera.pitch,
+                    roll: camera.roll
+                },
+                duration: 0.2
+            });
+        }
+        else {
+            var c = viewer.canvas;
+            var center = new Cartesian2(c.width / 2, c.height / 2);
+            var ground_1 = DrawingUtils.GetAccuratePosition(viewer, center);
+            if (!(ground_1 === null || ground_1 === void 0 ? void 0 : ground_1.x)) {
+                return;
+            }
+            var offset_1 = Cartesian3.distance(camera.position, ground_1);
+            var r_1 = 0;
+            var unsub_1 = viewer.clock.onTick.addEventListener(function () {
+                var inc = Math.PI * TURN_SPEED;
+                if (r_1 + inc >= radians) {
+                    unsub_1();
+                    inc = radians - r_1;
+                }
+                camera.lookAt(ground_1, new HeadingPitchRange(camera.heading, camera.pitch, offset_1));
+                left ? camera.rotateLeft(inc) : camera.rotateRight(inc);
+                camera.lookAtTransform(Matrix4.IDENTITY);
+                r_1 += inc;
+            });
+        }
+    };
+    WidgetNavCompass.prototype._doZoom = function (zoomIn) {
+        var viewer = this._viewer;
+        var c = viewer.canvas;
+        var center = new Cartesian2(c.width / 2, c.height / 2);
+        var camera = viewer.camera;
+        var ground = DrawingUtils.GetAccuratePosition(viewer, center);
+        if (!(ground === null || ground === void 0 ? void 0 : ground.x)) {
+            return;
+        }
+        var p = camera.position;
+        var height = Cartesian3.distance(p, ground);
+        var mag = this.ZOOM_DISTANCE / Math.max(1, 4 - Math.log10(height));
+        var zoom = zoomIn ? 1 - mag : 1 + mag;
+        var offset = Cartesian3.multiplyByScalar(Cartesian3.subtract(p, ground, new Cartesian3), zoom, new Cartesian3);
+        if (zoomIn && Cartesian3.magnitude(offset) <= this.MIN_ZOOM_DISTANCE) {
+            return;
+        }
+        var to = Cartesian3.add(ground, offset, new Cartesian3);
+        camera.flyTo({
+            destination: to,
+            orientation: { heading: camera.heading, pitch: camera.pitch, roll: camera.roll },
+            duration: this.ZOOM_TIME,
+            easingFunction: EasingFunction.QUADRATIC_IN_OUT
+        });
+    };
+    WidgetNavCompass.prototype._doLook = function (tiltUp) {
+        var viewer = this._viewer;
+        var diff = 6.26 / 32;
+        if (!tiltUp) {
+            diff *= -1;
+        }
+        var current = viewer.camera.pitch;
+        current += diff;
+        viewer.camera.flyTo({
+            destination: viewer.camera.position,
+            orientation: {
+                heading: viewer.camera.heading,
+                pitch: current,
+                roll: viewer.camera.roll
+            },
+            duration: 0.2
+        });
+    };
+    WidgetNavCompass.prototype._update2d3d = function () {
+        var is2d = this._getIs2d();
+        this._2d.setAttribute("is-selected", is2d ? "true" : "false");
+        this._3d.setAttribute("is-selected", is2d ? "false" : "true");
+        this._up.setAttribute("is-disabled", is2d ? "true" : "false");
+        this._down.setAttribute("is-disabled", is2d ? "true" : "false");
+    };
+    WidgetNavCompass.prototype._toggle2d3d = function () {
+        var shouldBe2d = !this._getIs2d();
+        ViewUtils.Set2dStatus({
+            status: shouldBe2d,
+            viewer: this._viewer,
+            moveCamera: true
+        });
+        this._update2d3d();
+    };
+    return WidgetNavCompass;
+}(Widget.AWidget));
+
+var WidgetBranding = /** @class */ (function (_super) {
+    __extends(WidgetBranding, _super);
+    function WidgetBranding(params) {
+        var _this = _super.call(this, params) || this;
+        _this.STYLESHEET_ID = "nextspace-branding-stylesheet";
+        _this._generateStyles();
+        _this._generateElement();
+        _this._listenToRenders();
+        return _this;
+    }
+    WidgetBranding.prototype._listenToRenders = function () {
+        var _this = this;
+        var _a, _b;
+        if (this._terrainListenRemoval) {
+            return;
+        }
+        this._terrainListenRemoval = (_b = (_a = this._viewer.scene) === null || _a === void 0 ? void 0 : _a.terrainProviderChanged) === null || _b === void 0 ? void 0 : _b.addEventListener(function () {
+            _this._updateIon();
+        });
+    };
+    WidgetBranding.prototype.Dispose = function () {
+        if (this._terrainListenRemoval) {
+            this._terrainListenRemoval();
+            this._terrainListenRemoval = null;
+        }
+        _super.prototype.Dispose.call(this);
+    };
+    WidgetBranding.prototype._generateStyles = function () {
+        if (document.getElementById(this.STYLESHEET_ID)) {
+            return;
+        }
+        var style = document.createElement("style");
+        style.id = this.STYLESHEET_ID;
+        style.innerHTML = "\n            .NextspaceBranding {\n                position: absolute;\n                z-index: 1;\n                bottom: 10px;\n                left: 10px;\n                display: flex;\n                flex-direction: column;\n                box-sizing: border-box;\n            }\n\n            .NextspaceBranding * {\n                box-sizing: border-box;\n            }\n\n            .NextspaceBrandingLogo {\n                width: 24px;\n                height: 24px;\n                cursor: pointer;\n                -webkit-animation-name: NextspaceBrandingLogoFadeIn;\n                animation-name: NextspaceBrandingLogoFadeIn;\n                animation-duration: 0.3s;\n                opacity: 1;\n                margin-top: 8px;\n            }\n\n            @keyframes NextspaceBrandingLogoFadeIn {\n                0% {\n                    opacity: 0;\n                }\n                100% {\n                    opacity: 1;\n                }\n            }\n        ";
+        document.head.appendChild(style);
+    };
+    WidgetBranding.prototype._generateElement = function () {
+        var element = document.createElement("div");
+        element.className = "NextspaceBranding";
+        var ionLogo = document.createElement("div");
+        ionLogo.className = "NextspaceBrandingLogo";
+        ionLogo.innerHTML = "\n            <div className=\"NextspaceBrandingLogo\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37259 18.6274 0 12 0C5.37258 0 0 5.37259 0 12C0 18.6274 5.37258 24 12 24Z\" fill=\"white\"/>\n                    <path d=\"M21.6985 10.4272C21.3489 10.4272 20.9994 10.631 20.7373 10.9806L17.4169 15.3786C16.8635 16.1068 16.0771 16.5145 15.2616 16.5145C14.446 16.5145 13.6596 16.1068 13.1062 15.3786L9.78584 10.9806C9.5237 10.631 9.17419 10.4272 8.82467 10.4272C8.47516 10.4272 8.12564 10.631 7.86351 10.9806L4.54312 15.3786C3.98972 16.1068 3.23244 16.5145 2.4169 16.5145C4.10623 20.0971 7.747 22.5728 11.9703 22.5728C17.7955 22.5728 22.5431 17.8543 22.5431 12C22.5431 11.5922 22.514 11.1844 22.4557 10.7767C22.2519 10.5437 21.9897 10.4272 21.6985 10.4272Z\" fill=\"#7A9C49\"/>\n                    <path d=\"M11.9996 1.42718C6.1744 1.42718 1.42683 6.14562 1.42683 12C1.42683 12.932 1.57246 13.8349 1.77634 14.6796C1.98022 14.8252 2.18411 14.9126 2.41712 14.9126C2.76663 14.9126 3.11615 14.7087 3.37828 14.3592L6.69867 9.96116C7.25207 9.233 8.03848 8.82523 8.85401 8.82523C9.66955 8.82523 10.456 9.233 11.0094 9.96116L14.2132 14.1845L14.3589 14.3592C14.621 14.7087 14.9705 14.8835 15.2909 14.9126C15.6404 14.9126 15.9608 14.7087 16.2229 14.3592L16.3686 14.1845L19.5725 9.96116C20.1259 9.233 20.9123 8.82523 21.7278 8.82523C21.8443 8.82523 21.9899 8.82524 22.1064 8.85436C20.7666 4.54368 16.7472 1.42718 11.9996 1.42718V1.42718ZM15.5239 8.12621C14.9123 8.12621 14.4171 7.63105 14.4171 7.0194C14.4171 6.40775 14.9123 5.91261 15.5239 5.91261C16.1356 5.91261 16.6307 6.40775 16.6307 7.0194C16.6307 7.63105 16.1356 8.12621 15.5239 8.12621Z\" fill=\"#6DABE4\"/>\n                </svg>\n            </div>\n        ";
+        ionLogo.title = "Cesium World Terrain provided by Cesium Ion";
+        ionLogo.addEventListener("click", function () {
+            window.open("https://cesium.com/ion/", "_blank");
+        });
+        this.ion = ionLogo;
+        var nextspaceLogo = document.createElement("div");
+        nextspaceLogo.className = "NextspaceBrandingLogo";
+        nextspaceLogo.innerHTML = "\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,0L2,6v12l10,6,10-6V6L12,0Zm0,19.6l-6-3.6,1.667-1,4.333,2.6,4.333-2.6,1.667,1-6,3.6Zm0-4l-6-3.6,1.667-1,4.333,2.6,4.333-2.6,1.667,1-6,3.6Zm0-4l-6-3.6,6-3.6,6,3.6-6,3.6Z\" fill=\"#fff\"></path><path d=\"M18,8l-6,3.6-6-3.6,6-3.6,6,3.6Zm-6,9.6l-4.333-2.6-1.667,1,6,3.6,6-3.6-1.667-1-4.333,2.6Zm0-4l-4.333-2.6-1.667,1,6,3.6,6-3.6-1.667-1-4.333,2.6Z\" fill=\"#141414\" opacity=\".85\"></path></svg>\n        ";
+        nextspaceLogo.title = "Nextspace";
+        nextspaceLogo.addEventListener("click", function () {
+            window.open("https://nextspace.com/", "_blank");
+        });
+        element.appendChild(nextspaceLogo);
+        this.Container.appendChild(element);
+        this._element = element;
+        this._updateIon();
+    };
+    WidgetBranding.prototype._shouldShowIonLogo = function () {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var viewer, provider, credits;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        viewer = this._viewer;
+                        if (!((_a = viewer === null || viewer === void 0 ? void 0 : viewer.scene) === null || _a === void 0 ? void 0 : _a.terrainProvider)) {
+                            return [2 /*return*/, false];
+                        }
+                        provider = viewer.scene.terrainProvider;
+                        return [4 /*yield*/, provider.readyPromise];
+                    case 1:
+                        _c.sent();
+                        if (provider != viewer.scene.terrainProvider) {
+                            return [2 /*return*/];
+                        }
+                        credits = provider === null || provider === void 0 ? void 0 : provider._tileCredits;
+                        return [2 /*return*/, credits && credits.length > 0 && credits[0]._html && ((_b = credits[0]._html) === null || _b === void 0 ? void 0 : _b.includes("ion-credit.png"))];
+                }
+            });
+        });
+    };
+    WidgetBranding.prototype._updateIon = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var shouldShow, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.updatingIon) {
+                            return [2 /*return*/];
+                        }
+                        this.updatingIon = true;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this._shouldShowIonLogo()];
+                    case 2:
+                        shouldShow = _a.sent();
+                        if (shouldShow && !this.ion.parentElement) {
+                            this._element.insertBefore(this.ion, this._element.firstChild);
+                        }
+                        else if (!shouldShow && this.ion.parentElement) {
+                            this.ion.parentElement.removeChild(this.ion);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        console.error(e_1);
+                        return [3 /*break*/, 4];
+                    case 4:
+                        this.updatingIon = false;
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return WidgetBranding;
+}(Widget.AWidget));
+
+var MARKER_ICON_SVG = "\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.2292 21.5965C5.55352 13.3684 4.5 12.5239 4.5 9.5C4.5 5.35785 7.85785 2 12 2C16.1421 2 19.5 5.35785 19.5 9.5C19.5 12.5239 18.4465 13.3684 12.7708 21.5965C12.3983 22.1345 11.6016 22.1345 11.2292 21.5965ZM12 12.625C13.7259 12.625 15.125 11.2259 15.125 9.5C15.125 7.7741 13.7259 6.375 12 6.375C10.2741 6.375 8.875 7.7741 8.875 9.5C8.875 11.2259 10.2741 12.625 12 12.625Z\" fill=\"black\"/>\n    </svg>\n";
+var CLOSE_ICON_SVG = "\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M15.7909 12L21.4767 6.3142C22.1744 5.61648 22.1744 4.48523 21.4767 3.78693L20.2131 2.5233C19.5153 1.82557 18.3841 1.82557 17.6858 2.5233L12 8.20909L6.3142 2.5233C5.61648 1.82557 4.48523 1.82557 3.78693 2.5233L2.5233 3.78693C1.82557 4.48466 1.82557 5.61591 2.5233 6.3142L8.20909 12L2.5233 17.6858C1.82557 18.3835 1.82557 19.5148 2.5233 20.2131L3.78693 21.4767C4.48466 22.1744 5.61648 22.1744 6.3142 21.4767L12 15.7909L17.6858 21.4767C18.3835 22.1744 19.5153 22.1744 20.2131 21.4767L21.4767 20.2131C22.1744 19.5153 22.1744 18.3841 21.4767 17.6858L15.7909 12Z\" fill=\"black\"/>\n    </svg>\n";
+function generateEle() {
+    var ele = document.createElement("div");
+    ele.setAttribute("style", "\n        left: 0px;\n        top: 0px;\n        position: absolute;\n        z-index: 3;\n        border-radius: 18px;\n        background-color: white;\n        display: flex;\n        align-items: center;\n        padding: 3px 4px;\n        padding-right: 10px;\n        font-size: 15px;\n        pointer-events: none;\n        box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.24), 0px 18px 36px -4px rgba(18, 22, 25, 0.6);\n    ");
+    var icon = document.createElement("div");
+    icon.innerHTML = MARKER_ICON_SVG;
+    icon.setAttribute("style", "\n        margin-right: 2px;\n        height: 30px;\n        width: 30px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    ");
+    ele.appendChild(icon);
+    var span = document.createElement("span");
+    span.setAttribute("style", "\n        flex-grow: 1;\n        flex-shrink: 1;\n        height: 100%;\n    ");
+    span.innerText = "";
+    ele.appendChild(span);
+    return ele;
+}
+var FILL_COLOR$2 = "#33B1FF";
+var POINT_SIZE$2 = 10;
+/**
+ * Metric to imperial "nice looking" string.
+ * @param length
+ * @returns
+ */
+function metricToImperialLenStr(length) {
+    // Convert meters to feet.
+    if (length < 500) {
+        return "".concat(MathUtils.Round(length * 3.2808, 2).toLocaleString(), "ft");
+    }
+    // Convert meters to miles.
+    else {
+        return "".concat(MathUtils.Round(length * 0.00062137, 4).toLocaleString(), "mi");
+    }
+}
+/**
+ * Metric to imperial "nice looking" string.
+ * @param area in meters squared.
+ * @returns
+ */
+function metricToImperialAreaStr(area) {
+    // Convert meters squared to feet squared.
+    if (area < 250000) {
+        return "".concat(MathUtils.Round(area / 0.09290304, 2).toLocaleString(), "ft\u00B2");
+    }
+    // Convert meters squared to miles squared.
+    else {
+        return "".concat(MathUtils.Round((area / 2589988.11), 4).toLocaleString(), "mi\u00B2");
+    }
+}
+/**
+ * Metric "nice looking" string.
+ * @param length
+ */
+function metricLenStr(length) {
+    if (length < 1000) {
+        return "".concat(MathUtils.Round(length, 2).toLocaleString(), "m");
+    }
+    else {
+        return "".concat(MathUtils.Round(length / 1000, 2).toLocaleString(), "km");
+    }
+}
+/**
+ * Metric "nice looking" string.
+ * @param length
+ */
+function metricAreaStr(area) {
+    if (area < 1000000) {
+        return "".concat(MathUtils.Round(area, 2).toLocaleString(), "m\u00B2");
+    }
+    else {
+        return "".concat(MathUtils.Round(area / 1000000, 2).toLocaleString(), "km\u00B2");
+    }
+}
+/**
+ * DO NOT USE THIS CLASS DIRECTLY.
+ * Use only through the cursor-bar widget as this is at high risk of change.
+ */
+var MeasureCreator;
+(function (MeasureCreator) {
+    var Point = /** @class */ (function () {
+        function Point(viewer, isMetric) {
+            this.viewer = viewer;
+            this.isMetric = isMetric;
+        }
+        Point.prototype.Start = function () {
+            var _this = this;
+            var _a, _b;
+            this.Stop();
+            var updateMarker = function () {
+                if (!_this.marker) {
+                    _this.generateMarker();
+                }
+                var pos2d = _this.viewer.scene.cartesianToCanvasCoordinates(_this.pos3d);
+                if (Cartes.ValidateCartes2(pos2d) && _this.element) {
+                    _this.element.style.left = "".concat(pos2d.x + 10, "px");
+                    _this.element.style.top = "".concat(pos2d.y - 20, "px");
+                }
+            };
+            this.renderEventRemoval = (_b = (_a = this.viewer.scene) === null || _a === void 0 ? void 0 : _a.postRender) === null || _b === void 0 ? void 0 : _b.addEventListener(function () {
+                if (Cartes.ValidateCartes3(_this.pos3d)) {
+                    updateMarker();
+                }
+            });
+            var processPos2d = function (pos2d) {
+                if (Cartes.ValidateCartes2(pos2d)) {
+                    var pos3d = DrawingUtils.GetAccuratePosition(_this.viewer, pos2d);
+                    if (Cartes.ValidateCartes3(pos3d)) {
+                        _this.pos3d = pos3d;
+                        var carto = Cartographic.fromCartesian(_this.pos3d);
+                        var lat = Math$1.toDegrees(carto.latitude);
+                        var lng = Math$1.toDegrees(carto.longitude);
+                        var heightStr = carto.height.toFixed(2);
+                        if (!_this.isMetric) {
+                            heightStr = metricToImperialLenStr(carto.height);
+                        }
+                        _this.updateText("".concat(lat.toFixed(6), ", ").concat(lng.toFixed(6), ", ").concat(heightStr));
+                        updateMarker();
+                    }
+                }
+            };
+            this.events = new ScreenSpaceEventHandler(this.viewer.scene.canvas);
+            this.events.setInputAction(function (e) {
+                var pos2d = e.endPosition;
+                processPos2d(pos2d);
+            }, ScreenSpaceEventType.MOUSE_MOVE);
+            this.events.setInputAction(function (e) {
+                var _a;
+                console.log(e);
+                processPos2d(e.position);
+                (_a = _this.events) === null || _a === void 0 ? void 0 : _a.destroy();
+                _this.events = null;
+                if (_this.element) {
+                    _this.element.style.removeProperty("pointer-events");
+                    _this.appendCloseButton();
+                }
+            }, ScreenSpaceEventType.LEFT_CLICK);
+        };
+        Point.prototype.Stop = function () {
+            var _a, _b;
+            this.pos3d = null;
+            if (this.element && this.element.parentElement) {
+                this.element.remove();
+            }
+            this.element = null;
+            if (this.marker && this.viewer.entities.contains(this.marker)) {
+                this.viewer.entities.remove(this.marker);
+            }
+            this.marker = null;
+            (_a = this.renderEventRemoval) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.renderEventRemoval = null;
+            (_b = this.events) === null || _b === void 0 ? void 0 : _b.destroy();
+            this.events = null;
+        };
+        Point.prototype.updateText = function (text) {
+            if (!this.element) {
+                this.generateElement();
+            }
+            this.element.querySelector("span").innerText = text;
+        };
+        Point.prototype.generateElement = function () {
+            var ele = generateEle();
+            this.element = ele;
+            this.viewer.canvas.parentElement.appendChild(ele);
+        };
+        Point.prototype.appendCloseButton = function () {
+            var _this = this;
+            var btn = document.createElement("div");
+            btn.setAttribute("style", "\n                height: 30px;\n                width: 30px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                margin-left: 5px;\n            ");
+            btn.setAttribute("title", "Close measurement");
+            btn.innerHTML = CLOSE_ICON_SVG;
+            btn.addEventListener("click", function () {
+                _this.Start();
+            });
+            this.element.appendChild(btn);
+            this.element.style.paddingRight = "5px";
+        };
+        Point.prototype.generateMarker = function () {
+            var _this = this;
+            this.marker = this.viewer.entities.add({
+                position: new CallbackProperty(function () { return _this.pos3d; }, false),
+                point: {
+                    pixelSize: POINT_SIZE$2,
+                    color: Color.fromCssColorString(FILL_COLOR$2),
+                    outlineColor: Color.WHITE,
+                    outlineWidth: 2
+                }
+            });
+        };
+        return Point;
+    }());
+    MeasureCreator.Point = Point;
+    var Polyline = /** @class */ (function () {
+        function Polyline(viewer, isMetric) {
+            this.posses3d = [];
+            this.viewer = viewer;
+            this.isMetric = isMetric;
+        }
+        Polyline.prototype.Start = function () {
+            var _this = this;
+            var _a, _b;
+            this.Stop();
+            this.renderEventRemoval = (_b = (_a = this.viewer.scene) === null || _a === void 0 ? void 0 : _a.postRender) === null || _b === void 0 ? void 0 : _b.addEventListener(function () {
+                var pos3d = _this.posses3d.length > 0 ? _this.posses3d[_this.posses3d.length - 1] : null;
+                if (Cartes.ValidateCartes3(pos3d)) {
+                    var pos2d = _this.viewer.scene.cartesianToCanvasCoordinates(pos3d);
+                    if (Cartes.ValidateCartes2(pos2d) && _this.element) {
+                        _this.element.style.left = "".concat(pos2d.x + 10, "px");
+                        _this.element.style.top = "".concat(pos2d.y - 20, "px");
+                        _this.element.style.display = "flex";
+                    }
+                }
+            });
+            this.drawingTool = new Draw3dPolyline({
+                viewer: this.viewer,
+                onFinish: function (posses3d) {
+                    var _a;
+                    _this.posses3d = posses3d;
+                    _this.onDone();
+                    _this.drawingTool.Pause();
+                    (_a = _this.onFinish) === null || _a === void 0 ? void 0 : _a.call(_this);
+                },
+                onChange: function (posses3d) {
+                    _this.posses3d = posses3d;
+                    _this.updateText();
+                },
+                perPositionHeight: true
+            });
+            this.drawingTool.Start();
+        };
+        Polyline.prototype.Stop = function () {
+            var _a, _b;
+            if (this.element && this.element.parentElement) {
+                this.element.remove();
+            }
+            this.element = null;
+            (_a = this.renderEventRemoval) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.renderEventRemoval = null;
+            this.posses3d = [];
+            (_b = this.drawingTool) === null || _b === void 0 ? void 0 : _b.Dispose();
+            this.drawingTool = null;
+        };
+        Polyline.prototype.updateText = function () {
+            var length = 0;
+            var posses = [].concat(this.posses3d);
+            for (var i = 0; i < posses.length - 1; i++) {
+                var pos1 = posses[i];
+                var pos2 = posses[i + 1];
+                if (Cartes.ValidateCartes3(pos1) && Cartes.ValidateCartes3(pos2)) {
+                    length += Cartesian3.distance(pos1, pos2);
+                }
+            }
+            if (!length && !this.element) {
+                return;
+            }
+            if (!this.element) {
+                this.generateElement();
+            }
+            var lengthStr;
+            if (!this.isMetric) {
+                lengthStr = metricToImperialLenStr(length);
+            }
+            else {
+                lengthStr = metricLenStr(length);
+            }
+            this.element.querySelector("span").innerText = lengthStr;
+        };
+        Polyline.prototype.generateElement = function () {
+            var ele = generateEle();
+            ele.style.display = "none";
+            this.element = ele;
+            this.viewer.canvas.parentElement.appendChild(ele);
+        };
+        Polyline.prototype.appendCloseButton = function () {
+            var _this = this;
+            var btn = document.createElement("div");
+            btn.setAttribute("style", "\n                height: 30px;\n                width: 30px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                margin-left: 5px;\n                font-size: 18px;\n            ");
+            btn.setAttribute("title", "Close measurement");
+            btn.innerHTML = CLOSE_ICON_SVG;
+            btn.addEventListener("click", function () {
+                _this.Start();
+            });
+            this.element.appendChild(btn);
+            this.element.style.paddingRight = "5px";
+        };
+        Polyline.prototype.onDone = function () {
+            if (this.element) {
+                this.element.style.removeProperty("pointer-events");
+                this.appendCloseButton();
+            }
+            this.updateText();
+        };
+        return Polyline;
+    }());
+    MeasureCreator.Polyline = Polyline;
+    var Polygon = /** @class */ (function () {
+        function Polygon(viewer, isMetric, onFinish) {
+            this.posses3d = [];
+            this.viewer = viewer;
+            this.onFinish = onFinish;
+            this.isMetric = isMetric;
+        }
+        Polygon.prototype.Start = function () {
+            var _this = this;
+            var _a, _b;
+            this.Stop();
+            this.renderEventRemoval = (_b = (_a = this.viewer.scene) === null || _a === void 0 ? void 0 : _a.postRender) === null || _b === void 0 ? void 0 : _b.addEventListener(function () {
+                var pos3d = _this.posses3d.length > 0 ? _this.posses3d[_this.posses3d.length - 1] : null;
+                if (Cartes.ValidateCartes3(pos3d)) {
+                    var pos2d = _this.viewer.scene.cartesianToCanvasCoordinates(pos3d);
+                    if (Cartes.ValidateCartes2(pos2d) && _this.element) {
+                        _this.element.style.left = "".concat(pos2d.x + 10, "px");
+                        _this.element.style.top = "".concat(pos2d.y - 20, "px");
+                        _this.element.style.display = "flex";
+                    }
+                }
+            });
+            this.drawingTool = new Draw3dPolygon({
+                viewer: this.viewer,
+                onChange: function (hierarchy) {
+                    _this.posses3d = hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.positions;
+                    _this.updateText();
+                },
+                onFinish: function (hierarchy) {
+                    var _a;
+                    _this.posses3d = hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.positions;
+                    _this.drawingTool.Pause();
+                    _this.onDone();
+                    (_a = _this.onFinish) === null || _a === void 0 ? void 0 : _a.call(_this);
+                },
+                perPositionHeight: true
+            });
+            this.drawingTool.Start();
+        };
+        Polygon.prototype.Stop = function () {
+            var _a, _b, _c;
+            if (this.element && this.element.parentElement) {
+                this.element.remove();
+            }
+            this.element = null;
+            (_a = this.renderEventRemoval) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.renderEventRemoval = null;
+            (_b = this.events) === null || _b === void 0 ? void 0 : _b.destroy();
+            this.events = null;
+            this.posses3d = [];
+            (_c = this.drawingTool) === null || _c === void 0 ? void 0 : _c.Dispose();
+            this.drawingTool = null;
+        };
+        Polygon.prototype.updateText = function () {
+            var posses = [].concat(this.posses3d);
+            if (!Cartes.IsRing3Closed(posses)) {
+                posses.push(posses[0].clone());
+            }
+            if (posses.length < 3) {
+                return;
+            }
+            var measure = MeasureUtils.MeasurePolygon({
+                posses: posses
+            });
+            if (!measure.area && !measure.perimeter && !this.element) {
+                return;
+            }
+            if (!this.element) {
+                this.generateElement();
+            }
+            var lengthStr;
+            var areaStr;
+            if (!this.isMetric) {
+                lengthStr = metricToImperialLenStr(measure.perimeter);
+                areaStr = metricToImperialAreaStr(measure.area);
+            }
+            else {
+                lengthStr = metricLenStr(measure.perimeter);
+                areaStr = metricAreaStr(measure.area);
+            }
+            var text = "".concat(lengthStr, ", ").concat(areaStr);
+            this.element.querySelector("span").innerText = text;
+        };
+        Polygon.prototype.generateElement = function () {
+            var ele = generateEle();
+            ele.style.display = "none";
+            this.element = ele;
+            this.viewer.canvas.parentElement.appendChild(ele);
+        };
+        Polygon.prototype.appendCloseButton = function () {
+            var _this = this;
+            var btn = document.createElement("div");
+            btn.setAttribute("style", "\n                height: 30px;\n                width: 30px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                margin-left: 5px;\n                font-size: 18px;\n            ");
+            btn.setAttribute("title", "Close measurement");
+            btn.innerHTML = CLOSE_ICON_SVG;
+            btn.addEventListener("click", function () {
+                _this.Start();
+            });
+            this.element.appendChild(btn);
+            this.element.style.paddingRight = "5px";
+        };
+        Polygon.prototype.onDone = function () {
+            var _a;
+            (_a = this.events) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.events = null;
+            if (this.element) {
+                this.element.style.removeProperty("pointer-events");
+                this.appendCloseButton();
+            }
+            this.updateText();
+        };
+        return Polygon;
+    }());
+    MeasureCreator.Polygon = Polygon;
+})(MeasureCreator || (MeasureCreator = {}));
+
+var ECursor;
+(function (ECursor) {
+    ECursor["Select"] = "select";
+    ECursor["Pan"] = "pan";
+    ECursor["Measure"] = "measure";
+})(ECursor || (ECursor = {}));
+var ESecondaryCursor;
+(function (ESecondaryCursor) {
+    ESecondaryCursor["None"] = "none";
+    ESecondaryCursor["Pan"] = "pan";
+    ESecondaryCursor["MeasurePoint"] = "measure-point";
+    ESecondaryCursor["MeasurePolyline"] = "measure-polyline";
+    ESecondaryCursor["MeasurePolygon"] = "measure-polygon";
+})(ESecondaryCursor || (ESecondaryCursor = {}));
+var WidgetCursorBar = /** @class */ (function (_super) {
+    __extends(WidgetCursorBar, _super);
+    function WidgetCursorBar(params) {
+        var _this = _super.call(this, params) || this;
+        _this.STYLESHEET_ID = "nextspace-cursorbar-stylesheet";
+        _this._selectedCursor = ECursor.Select;
+        _this._selectedSecondaryCursor = ESecondaryCursor.None;
+        _this._generateStyles();
+        _this._generateElement();
+        if (_this._selectedCursor == ECursor.Select) {
+            _this._listenSelection();
+        }
+        return _this;
+    }
+    WidgetCursorBar.prototype.Dispose = function () {
+        var _a, _b;
+        _super.prototype.Dispose.call(this);
+        this._disposeMeasureTool();
+        this._disposeCesiumEvent();
+        if ((_b = (_a = this._viewer) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.style.cursor) {
+            this._viewer.canvas.style.removeProperty("cursor");
+        }
+    };
+    WidgetCursorBar.prototype._generateStyles = function () {
+        if (document.getElementById(this.STYLESHEET_ID)) {
+            return;
+        }
+        var style = document.createElement("style");
+        style.id = this.STYLESHEET_ID;
+        style.innerHTML = "\n            .NextspaceCursorBar {\n                position: absolute;\n                z-index: 1;\n                top: 10px;\n                left: 10px;\n                box-sizing: border-box;\n                display: flex;\n                flex-direction: column;\n                overflow: hidden;\n                pointer-events: none;\n            }\n\n            .NextspaceCursorBar * {\n                box-sizing: border-box;\n            }\n\n            .NextspaceCursorBarPrim {\n                pointer-events: auto;\n                -webkit-touch-callout: none;\n                -webkit-user-select: none;\n                user-select: none;\n            }\n\n            .NextspaceCursorBarPrimContent {\n                align-items: center;\n                background-color: #21272a;\n                border-radius: 9px;\n                display: flex;\n                pointer-events: auto;\n                width: -webkit-max-content;\n                width: max-content;\n                margin-bottom: 8px;\n            }\n\n            .NextspaceCursorBarPrimControl {\n                width: 48px;\n            }\n\n            .NextspaceCursorBarPrimControlInner {\n                align-items: center;\n                border-radius: 0;\n                display: flex;\n                height: 100%;\n                height: -webkit-max-content;\n                height: max-content;\n                justify-content: center;\n                padding: 8px;\n                padding-left: 8px;\n            }\n\n            .NextspaceCursorBarPrimControl:first-of-type .NextspaceCursorBarPrimControlInner {\n                border-radius: 9px 0 0 9px;\n                padding-left: 8px;\n            }\n\n            .NextspaceCursorBarPrimControl:last-of-type .NextspaceCursorBarPrimControlInner {\n                border-radius: 0 9px 9px 0;\n                padding-right: 8px;\n            }\n\n            .NextspaceCursorBarPrimControl:first-of-type:last-of-type .NextspaceCursorBarPrimControlInner {\n                border-radius: 9px;\n            }\n\n            .NextspaceCursorBarPrimControlInnerIcon {\n                align-items: center;\n                border-radius: 6px;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                font-size: 18px;\n                height: 32px;\n                justify-content: center;\n                transition: .3s ease;\n                width: 32px;\n            }\n\n            .NextspaceCursorBarPrimControlInnerIcon:hover {\n                transform: scale(1.2);\n            }\n\n            .NextspaceCursorBarPrimControlInner[is-selected=\"true\"] {\n                background: #33b1ff;\n            }\n\n            .NextspaceCursorBarSec {\n                pointer-events: auto;\n                -webkit-touch-callout: none;\n                -webkit-user-select: none;\n                user-select: none;\n            }\n\n            .NextspaceCursorBarSecContent {\n                align-items: center;\n                -webkit-backdrop-filter: blur(20px);\n                backdrop-filter: blur(20px);\n                background: rgba(33,39,42,.8);\n                border-radius: 9px;\n                box-shadow: 0 0 1px rgba(18,22,25,.36),0 18px 36px -4px rgba(18,22,25,.36);\n                display: flex;\n                pointer-events: auto;\n                width: -webkit-max-content;\n                width: max-content;\n            }\n            \n            .NextspaceCursorBarSecControl {\n                align-items: center;\n                border-radius: 0;\n                display: flex;\n                height: 100%;\n                height: -webkit-max-content;\n                height: max-content;\n                justify-content: center;\n                padding: 8px;\n                padding-left: 8px;\n                border: 2px solid transparent;\n                flex-shrink: 0;\n                margin: 6px 0 6px 6px;\n                margin-right: 0px;\n            }\n\n            .NextspaceCursorBarSecControl[is-selected=\"true\"] {\n                background-color: transparent;\n                border: 2px solid #33b1ff;\n                border-radius: 6px;\n            }\n\n            .NextspaceCursorBarSecControl:last-of-type {\n                margin-right: 6px;\n            }\n\n            .NextspaceCursorBarSecControl:first-of-type {\n                padding-left: 8px;\n            }\n            \n            .NextspaceCursorBarSecControlIcon {\n                align-items: center;\n                border-radius: 6px;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                font-size: 18px;\n                height: 32px;\n                justify-content: center;\n                transition: .3s ease;\n                width: 32px;\n            }\n\n            .NextspaceCursorBarSecControlIcon:hover {\n                -webkit-transform: scale(1.2);\n                transform: scale(1.2);\n            }\n        ";
+        document.head.appendChild(style);
+    };
+    WidgetCursorBar.prototype._generateElement = function () {
+        var element = document.createElement("div");
+        element.className = "NextspaceCursorBar";
+        var prim = document.createElement("div");
+        prim.className = "NextspaceCursorBarPrim";
+        this._primary = prim;
+        var primContent = document.createElement("div");
+        primContent.className = "NextspaceCursorBarPrimContent";
+        prim.appendChild(primContent);
+        element.appendChild(prim);
+        this._primaryContent = primContent;
+        var sec = document.createElement("div");
+        sec.className = "NextspaceCursorBarSec";
+        this._secondary = sec;
+        var secContent = document.createElement("div");
+        secContent.className = "NextspaceCursorBarSecContent";
+        sec.appendChild(secContent);
+        element.appendChild(sec);
+        this._secondaryContent = secContent;
+        this._generateSelect();
+        this._generatePan();
+        this._generateMeasure();
+        this._updateControls();
+        this.Container.appendChild(element);
+        this._element = element;
+    };
+    WidgetCursorBar.prototype._generateControl = function (title, cursor, onClick, iconHtml) {
+        var _this = this;
+        var div = document.createElement("div");
+        div.className = "NextspaceCursorBarPrimControl";
+        var inner = document.createElement("div");
+        inner.setAttribute("title", title);
+        inner.setAttribute("control", cursor);
+        inner.className = "NextspaceCursorBarPrimControlInner";
+        inner.innerHTML = "\n            <div class=\"NextspaceCursorBarPrimControlInnerIcon\">\n                ".concat(iconHtml, "\n            </div>\n        ");
+        div.appendChild(inner);
+        inner.addEventListener("click", function () {
+            _this._disposeMeasureTool();
+            _this._disposeCesiumEvent();
+            onClick();
+            _this._updateControls();
+        });
+        this._primaryContent.appendChild(div);
+    };
+    WidgetCursorBar.prototype._generateSecondaryControl = function (title, cursor, onClick, iconHTML) {
+        var _this = this;
+        var div = document.createElement("div");
+        div.className = "NextspaceCursorBarSecControl";
+        div.setAttribute("title", title);
+        div.setAttribute("control", cursor);
+        div.innerHTML = "\n            <div class=\"NextspaceCursorBarSecControlIcon\">\n                ".concat(iconHTML, "\n            </div>\n        ");
+        div.addEventListener("click", function () {
+            _this._disposeMeasureTool();
+            _this._disposeCesiumEvent();
+            onClick();
+            _this._updateSecondary();
+        });
+        this._secondaryContent.appendChild(div);
+    };
+    WidgetCursorBar.prototype._generateSelect = function () {
+        var _this = this;
+        var svg = "\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M11.0706 25L9 7L23 17.8592L15.3135 18.3375L11.0706 25Z\" fill=\"white\" stroke=\"white\" strokeLinejoin=\"round\"/>\n            </svg>\n        ";
+        this._generateControl("Select", ECursor.Select, function () {
+            _this._selectedCursor = ECursor.Select;
+            _this._secondary.style.display = "none";
+            _this._listenSelection();
+        }, svg);
+    };
+    WidgetCursorBar.prototype._generatePan = function () {
+        var _this = this;
+        var svg = "\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M15.5652 6C14.9172 6 14.3913 6.51692 14.3913 7.15385V14.4615H13.6087V8.69231C13.6087 8.05538 13.0828 7.53846 12.4348 7.53846C11.7868 7.53846 11.2609 8.05538 11.2609 8.69231V14.4615V16.7692V19.6734C11.2609 19.6734 9.0069 18.2402 7.87211 17.7548C7.55594 17.6194 7.22575 17.5385 6.89079 17.5385C5.1401 17.5385 5 19.0769 5 19.0769L8.13043 21.3846L10.6357 24.3398C11.5279 25.3922 12.85 26 14.243 26H19.8696C21.5983 26 23 24.6223 23 22.9231V14.4615V11C23 10.3631 22.4741 9.84615 21.8261 9.84615C21.1781 9.84615 20.6522 10.3631 20.6522 11V14.4615H19.8696V8.69231C19.8696 8.05538 19.3437 7.53846 18.6957 7.53846C18.0477 7.53846 17.5217 8.05538 17.5217 8.69231V14.4615H16.7391V7.15385C16.7391 6.51692 16.2132 6 15.5652 6Z\" fill=\"white\"/>\n            </svg>\n        ";
+        this._generateControl("Pan", ECursor.Pan, function () {
+            _this._selectedCursor = _this._selectedCursor == ECursor.Pan ? ECursor.Select : ECursor.Pan;
+            _this._secondary.style.display = "none";
+            if (_this._selectedCursor == ECursor.Select) {
+                _this._listenSelection();
+            }
+        }, svg);
+    };
+    WidgetCursorBar.prototype._generateMeasure = function () {
+        var _this = this;
+        var svg = "\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M26.5044 8.88032C26.1735 8.54947 23.4505 5.8265 23.1197 5.49564C22.4588 4.83479 21.3876 4.83479 20.7267 5.49564C20.6878 5.53457 20.4449 5.77742 20.0557 6.16666L21.6753 7.78623C22.0061 8.11708 22.0061 8.65186 21.6753 8.98271C21.5103 9.14771 21.2936 9.23064 21.077 9.23064C20.8604 9.23064 20.6438 9.14771 20.4788 8.98271L18.8592 7.36314C18.4581 7.76423 18.0063 8.21608 17.5172 8.70517L18.2906 9.47857C18.6214 9.80942 18.6214 10.3442 18.2906 10.6751C18.1256 10.8401 17.909 10.923 17.6923 10.923C17.4757 10.923 17.2591 10.8401 17.0941 10.6751L16.3207 9.90165C15.8875 10.3349 15.4381 10.7842 14.9787 11.2437L16.5982 12.8632C16.9291 13.1941 16.9291 13.7289 16.5982 14.0597C16.4332 14.2247 16.2166 14.3077 16 14.3077C15.7834 14.3077 15.5668 14.2247 15.4018 14.0597L13.7822 12.4402C13.3363 12.8861 12.8869 13.3354 12.4402 13.7822L13.2136 14.5556C13.5444 14.8864 13.5444 15.4212 13.2136 15.7521C13.0486 15.9171 12.8319 16 12.6153 16C12.3987 16 12.1821 15.9171 12.0171 15.7521L11.2437 14.9787C10.7842 15.4381 10.3349 15.8875 9.90165 16.3207L11.5212 17.9403C11.8521 18.2711 11.8521 18.8059 11.5212 19.1368C11.3562 19.3018 11.1396 19.3847 10.923 19.3847C10.7064 19.3847 10.4897 19.3018 10.3247 19.1368L8.70517 17.5172C8.21608 18.0063 7.76423 18.4581 7.36314 18.8592L8.13654 19.6326C8.46739 19.9635 8.46739 20.4982 8.13654 20.8291C7.97154 20.9941 7.75492 21.077 7.5383 21.077C7.32168 21.077 7.10506 20.9941 6.94006 20.8291L6.16666 20.0557C5.77742 20.4449 5.53457 20.6878 5.49564 20.7267C4.83479 21.3876 4.83479 22.4588 5.49564 23.1197C5.8265 23.4505 8.54947 26.1735 8.88032 26.5044C9.54118 27.1652 10.6124 27.1652 11.2733 26.5044C11.6041 26.1735 26.1735 11.6041 26.5044 11.2733C27.1652 10.6124 27.1652 9.54118 26.5044 8.88032Z\" fill=\"white\"/>\n            </svg>\n        ";
+        this._generateControl("Measure", ECursor.Measure, function () {
+            _this._selectedSecondaryCursor = ESecondaryCursor.Pan;
+            _this._selectedCursor = _this._selectedCursor == ECursor.Measure ? ECursor.Select : ECursor.Measure;
+            if (_this._selectedCursor == ECursor.Measure) {
+                _this._generateMeasureSecondary();
+                _this._updateSecondary();
+            }
+            else {
+                _this._secondary.style.display = "none";
+            }
+            if (_this._selectedCursor == ECursor.Select) {
+                _this._listenSelection();
+            }
+        }, svg);
+    };
+    WidgetCursorBar.prototype._generateMeasureSecondary = function () {
+        var _this = this;
+        this._secondaryContent.innerHTML = "";
+        this._secondary.style.display = "flex";
+        var panSvg = "\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M15.5652 6C14.9172 6 14.3913 6.51692 14.3913 7.15385V14.4615H13.6087V8.69231C13.6087 8.05538 13.0828 7.53846 12.4348 7.53846C11.7868 7.53846 11.2609 8.05538 11.2609 8.69231V14.4615V16.7692V19.6734C11.2609 19.6734 9.0069 18.2402 7.87211 17.7548C7.55594 17.6194 7.22575 17.5385 6.89079 17.5385C5.1401 17.5385 5 19.0769 5 19.0769L8.13043 21.3846L10.6357 24.3398C11.5279 25.3922 12.85 26 14.243 26H19.8696C21.5983 26 23 24.6223 23 22.9231V14.4615V11C23 10.3631 22.4741 9.84615 21.8261 9.84615C21.1781 9.84615 20.6522 10.3631 20.6522 11V14.4615H19.8696V8.69231C19.8696 8.05538 19.3437 7.53846 18.6957 7.53846C18.0477 7.53846 17.5217 8.05538 17.5217 8.69231V14.4615H16.7391V7.15385C16.7391 6.51692 16.2132 6 15.5652 6Z\" fill=\"white\"/>\n            </svg>\n        ";
+        this._generateSecondaryControl("Pan", ESecondaryCursor.Pan, function () {
+            _this._selectedSecondaryCursor = ESecondaryCursor.Pan;
+            _this._updateSecondary();
+        }, panSvg);
+        var pointSvg = "\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M6 20H18C18.55 20 19 20.45 19 21C19 21.55 18.55 22 18 22H6C5.45 22 5 21.55 5 21C5 20.45 5.45 20 6 20ZM12 7C10.9 7 10 7.9 10 9C10 10.1 10.9 11 12 11C13.1 11 14 10.1 14 9C14 7.9 13.1 7 12 7ZM12 2C15.27 2 19 4.46 19 9.15C19 12.13 16.87 15.27 12.61 18.54C12.25 18.82 11.75 18.82 11.39 18.54C7.13 15.26 5 12.13 5 9.15C5 4.46 8.73 2 12 2Z\" fill=\"white\"/>\n            </svg>\n        ";
+        this._generateSecondaryControl("Measure point", ESecondaryCursor.MeasurePoint, function () {
+            _this._selectedSecondaryCursor = _this._selectedSecondaryCursor == ESecondaryCursor.MeasurePoint ? ESecondaryCursor.Pan : ESecondaryCursor.MeasurePoint;
+            _this._updateSecondary();
+            _this._enabledMeasureTool = new MeasureCreator.Point(_this._viewer, true);
+            _this._enabledMeasureTool.Start();
+        }, pointSvg);
+        var polylineSvg = "\n            <svg width=\"24\" height=\"20\" viewBox=\"0 0 24 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M6 4L18 8\" stroke=\"white\" stroke-width=\"3\"/>\n                <path d=\"M4 6L5.12233 15\" stroke=\"white\" stroke-width=\"3\"/>\n                <circle cx=\"3.5\" cy=\"3.5\" r=\"2.5\" stroke=\"white\" stroke-width=\"2\"/>\n                <circle cx=\"20.1223\" cy=\"9\" r=\"2\" stroke=\"white\" stroke-width=\"2\"/>\n                <circle cx=\"6\" cy=\"17\" r=\"2\" stroke=\"white\" stroke-width=\"2\"/>\n            </svg>\n        ";
+        this._generateSecondaryControl("Measure polyline", ESecondaryCursor.MeasurePolyline, function () {
+            _this._selectedSecondaryCursor = _this._selectedSecondaryCursor == ESecondaryCursor.MeasurePolyline ? ESecondaryCursor.Pan : ESecondaryCursor.MeasurePolyline;
+            _this._updateSecondary();
+            _this._enabledMeasureTool = new MeasureCreator.Polyline(_this._viewer, true);
+            _this._enabledMeasureTool.Start();
+        }, polylineSvg);
+        var polygonSvg = "\n            <svg width=\"24\" height=\"20\" viewBox=\"0 0 24 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M6.5 15.5L5 5L18 9L6.5 15.5Z\" fill=\"white\" fill-opacity=\"0.4\"/>\n                <path d=\"M6 4L18 8\" stroke=\"white\" stroke-width=\"3\"/>\n                <path d=\"M4 6L5.12233 15\" stroke=\"white\" stroke-width=\"3\"/>\n                <path d=\"M18.9518 9.82404L8 16.2072\" stroke=\"white\" stroke-width=\"3\"/>\n                <circle cx=\"3.5\" cy=\"3.5\" r=\"2.5\" stroke=\"white\" stroke-width=\"2\"/>\n                <circle cx=\"20.1223\" cy=\"9\" r=\"2\" stroke=\"white\" stroke-width=\"2\"/>\n                <circle cx=\"6\" cy=\"17\" r=\"2\" stroke=\"white\" stroke-width=\"2\"/>\n            </svg>\n        ";
+        this._generateSecondaryControl("Measure polygon", ESecondaryCursor.MeasurePolygon, function () {
+            _this._selectedSecondaryCursor = _this._selectedSecondaryCursor == ESecondaryCursor.MeasurePolygon ? ESecondaryCursor.Pan : ESecondaryCursor.MeasurePolygon;
+            _this._updateSecondary();
+            _this._enabledMeasureTool = new MeasureCreator.Polygon(_this._viewer, true);
+            _this._enabledMeasureTool.Start();
+        }, polygonSvg);
+    };
+    WidgetCursorBar.prototype._updateControls = function () {
+        var controls = this._primaryContent.querySelectorAll(".NextspaceCursorBarPrimControlInner");
+        controls.forEach(function (control) {
+            control.setAttribute("is-selected", "false");
+        });
+        var selected = this._primaryContent.querySelector(".NextspaceCursorBarPrimControlInner[control=\"".concat(this._selectedCursor, "\"]"));
+        if (selected) {
+            selected.setAttribute("is-selected", "true");
+        }
+    };
+    WidgetCursorBar.prototype._updateSecondary = function () {
+        var secondary = this._secondary.querySelectorAll(".NextspaceCursorBarSecControl");
+        secondary.forEach(function (control) {
+            control.setAttribute("is-selected", "false");
+        });
+        var selected = this._secondary.querySelector(".NextspaceCursorBarSecControl[control=\"".concat(this._selectedSecondaryCursor, "\"]"));
+        if (selected) {
+            selected.setAttribute("is-selected", "true");
+        }
+    };
+    WidgetCursorBar.prototype._disposeMeasureTool = function () {
+        if (this._enabledMeasureTool) {
+            this._enabledMeasureTool.Stop();
+            this._enabledMeasureTool = null;
+        }
+    };
+    WidgetCursorBar.prototype._disposeCesiumEvent = function () {
+        if (this._cesiumEventRemoval) {
+            this._cesiumEventRemoval();
+        }
+        this._cesiumEventRemoval = null;
+    };
+    WidgetCursorBar.prototype._listenSelection = function () {
+        var _this = this;
+        this._disposeCesiumEvent();
+        var events = new ScreenSpaceEventHandler(this._viewer.scene.canvas);
+        var lastHoverPos = null;
+        var process2dCursor = function (pos2d, isHover) {
+            try {
+                var regos = _this._manager.VisualsRegister.GetRegosFromCursor({
+                    cursor: pos2d
+                }).regos;
+                if (isHover) {
+                    if (regos.length) {
+                        _this._viewer.canvas.style.cursor = "pointer";
+                    }
+                    else if (_this._viewer.canvas.style.cursor) {
+                        _this._viewer.canvas.style.removeProperty("cursor");
+                    }
+                }
+                else {
+                    var first = regos.length ? regos[0] : null;
+                    _this._manager.VisualsRegister.ClearSelected();
+                    if (first) {
+                        _this._manager.VisualsRegister.SetSelected({
+                            entityIds: [first.entityId],
+                            selected: true
+                        });
+                    }
+                }
+            }
+            catch (e) {
+                console.error(e);
+            }
+        };
+        var hoverDelayQueue = new DelayQueue(function () {
+            process2dCursor(lastHoverPos, true);
+        }, 80);
+        events.setInputAction(function (e) {
+            var _a;
+            if (!((_a = e === null || e === void 0 ? void 0 : e.position) === null || _a === void 0 ? void 0 : _a.x)) {
+                return;
+            }
+            process2dCursor(e.position, false);
+        }, ScreenSpaceEventType.LEFT_CLICK);
+        events.setInputAction(function (e) {
+            var _a;
+            if (!((_a = e === null || e === void 0 ? void 0 : e.endPosition) === null || _a === void 0 ? void 0 : _a.x)) {
+                return;
+            }
+            lastHoverPos = e.endPosition;
+            hoverDelayQueue.Call();
+        }, ScreenSpaceEventType.MOUSE_MOVE);
+        this._cesiumEventRemoval = function () {
+            hoverDelayQueue.Dispose();
+            if (!events || events.isDestroyed()) {
+                return;
+            }
+            events.destroy();
+        };
+    };
+    return WidgetCursorBar;
+}(Widget.AWidget));
+
+var ESearchType;
+(function (ESearchType) {
+    ESearchType["CesiumAddress"] = "CESIUM_ADDRESS";
+    ESearchType["LatLon"] = "LATLON";
+})(ESearchType || (ESearchType = {}));
+function isLatLon(text) {
+    var parts = text.split(",");
+    if (parts.length !== 2 && parts.length !== 3) {
+        return false;
+    }
+    var lat = parseFloat(parts[0]);
+    var lon = parseFloat(parts[1]);
+    if (isNaN(lat) || isNaN(lon)) {
+        return false;
+    }
+    return true;
+}
+var WidgetSearchBar = /** @class */ (function (_super) {
+    __extends(WidgetSearchBar, _super);
+    function WidgetSearchBar(params) {
+        var _this = _super.call(this, params) || this;
+        _this.STYLESHEET_ID = "nextspace-searchbar-stylesheet";
+        _this._cApi = new AbstractApi({});
+        _this._generateStyles();
+        _this._generateElement();
+        return _this;
+    }
+    WidgetSearchBar.prototype.Dispose = function () {
+        _super.prototype.Dispose.call(this);
+    };
+    WidgetSearchBar.prototype._generateStyles = function () {
+        if (document.getElementById(this.STYLESHEET_ID)) {
+            return;
+        }
+        var style = document.createElement("style");
+        style.id = this.STYLESHEET_ID;
+        style.innerHTML = "\n            .NextspaceSearchBar {\n                position: absolute;\n                z-index: 1;\n                top: 10px;\n                right: 10px;\n                display: flex;\n                box-sizing: border-box;\n                box-shadow: 0 0 1px rgba(18,22,25,.24),0 18px 36px -4px rgba(18,22,25,.6);\n                background: #21272a;\n                border-radius: 9px;\n                height: 48px;\n                padding-left: 2px;\n                padding-right: 2px;\n                font-family: sans-serif;\n            }\n\n            .NextspaceSearchBar * {\n                box-sizing: border-box;\n            }\n\n            .NextspaceSearchBar[is-opened=\"true\"] .NextspaceSearchBarContent {\n                display: flex;\n                overflow: visible;\n                width: 260px;\n            }\n\n            .NextspaceSearchBarToggle {\n                align-items: center;\n                border-radius: 0;\n                border-radius: 9px 0 0 9px;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                flex-shrink: 0;\n                font-size: 18px;\n                height: 100%;\n                justify-content: center;\n                transition: .3s ease;\n                width: 46px;\n            }\n\n            .NextspaceSearchBarToggle >svg {\n                transition: .3s ease;\n            }\n\n            .NextspaceSearchBarToggle >svg:hover {\n                -webkit-transform: scale(1.2);\n                transform: scale(1.2);\n            }\n\n            .NextspaceSearchBarContent {\n                flex-grow: 0;\n                flex-shrink: 0;\n                overflow: hidden;\n                transition: .3s ease;\n                width: 0;\n            }\n\n            .NextspaceSearchBarContent >input {\n                background: transparent;\n                border: none;\n                color: #fff;\n                font-size: 15px;\n                height: 100%;\n                outline: none;\n                padding: 0 8px;\n                width: 100%;\n            }\n\n            .NextspaceSearchBarResults {\n                background-color: #21272a;\n                border-radius: 0 0 6px 6px;\n                display: flex;\n                flex-direction: column;\n                overflow: hidden;\n                padding: 12px 8px 8px;\n                position: absolute;\n                top: calc(100% - 4px);\n                width: 100%;\n                left: 0;\n                z-index: 1;\n            }\n\n            .NextspaceSearchBarResultsItem {\n                align-items: center;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                height: 30px;\n                transition: .3s ease;\n                font-size: 13px;\n            }\n\n            .NextspaceSearchBarResultsItem:hover .NextspaceSearchBarResultsItemIcon {\n                -webkit-transform: scale(1.05);\n                transform: scale(1.05);\n            }\n\n            .NextspaceSearchBarResultsItemIcon {\n                align-items: center;\n                display: flex;\n                flex-grow: 0;\n                flex-shrink: 0;\n                justify-content: center;\n                margin-right: 5px;\n                width: 25px;\n            }\n\n            .NextspaceSearchBarResultsItemTip {\n                flex-grow: 1;\n                flex-shrink: 1;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                width: 50px;\n                font-size: 15px;\n            }\n\n            .NextspaceSearchBarResultsWarning {\n                height: 30px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                color: white;\n                font-size: 15px;\n            }\n        ";
+        document.head.appendChild(style);
+    };
+    WidgetSearchBar.prototype._generateElement = function () {
+        var _this = this;
+        var element = document.createElement("div");
+        element.className = "NextspaceSearchBar";
+        element.setAttribute("is-opened", "false");
+        var toggle = document.createElement("div");
+        toggle.className = "NextspaceSearchBarToggle";
+        toggle.innerHTML = "\n            <svg class=\"\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.3283 6C9.73857 6 6 9.73857 6 14.3283C6 18.918 9.73857 22.6566 14.3283 22.6566C16.3242 22.6566 18.1571 21.9479 19.5937 20.7714L24.5663 25.7439C24.643 25.8239 24.7349 25.8877 24.8366 25.9316C24.9383 25.9756 25.0478 25.9988 25.1586 26C25.2694 26.0011 25.3793 25.9801 25.4819 25.9382C25.5845 25.8963 25.6777 25.8344 25.756 25.756C25.8344 25.6777 25.8963 25.5845 25.9382 25.4819C25.9801 25.3793 26.0011 25.2694 26 25.1586C25.9988 25.0478 25.9756 24.9383 25.9316 24.8366C25.8877 24.7349 25.8239 24.643 25.7439 24.5663L20.7714 19.5937C21.9479 18.1571 22.6566 16.3242 22.6566 14.3283C22.6566 9.73857 18.918 6 14.3283 6ZM14.3283 7.66566C18.0178 7.66566 20.9909 10.6388 20.9909 14.3283C20.9909 18.0178 18.0178 20.9909 14.3283 20.9909C10.6388 20.9909 7.66566 18.0178 7.66566 14.3283C7.66566 10.6388 10.6388 7.66566 14.3283 7.66566Z\" fill=\"white\"></path></svg>\n        ";
+        toggle.onclick = function () {
+            var _a, _b;
+            if (element.getAttribute("is-opened") === "true") {
+                element.setAttribute("is-opened", "false");
+                _this._hideResults();
+            }
+            else {
+                element.setAttribute("is-opened", "true");
+                // Show prior results.
+                if (_this._results.innerHTML) {
+                    element.style.borderRadius = "9px 9px 0 0";
+                    _this._results.style.display = "flex";
+                }
+                // Focus input.
+                (_b = (_a = content.querySelector("input")) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        };
+        element.appendChild(toggle);
+        var content = document.createElement("div");
+        content.className = "NextspaceSearchBarContent";
+        content.innerHTML = "\n            <input placeholder=\"address\"/>\n        ";
+        element.appendChild(content);
+        var input = content.querySelector("input");
+        var searchTimeout = null;
+        var counter = 0;
+        input.onkeyup = function (e) {
+            var _a;
+            var value = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+            if (!value || value.length < 3) {
+                return;
+            }
+            counter += 1;
+            var curCounter = counter;
+            _this._displayLoading();
+            clearTimeout(searchTimeout);
+            searchTimeout = setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                var searchData, e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, this._doSearch(value)];
+                        case 1:
+                            searchData = _a.sent();
+                            if (curCounter !== counter) {
+                                return [2 /*return*/];
+                            }
+                            this._displayResults(searchData);
+                            return [3 /*break*/, 3];
+                        case 2:
+                            e_1 = _a.sent();
+                            console.error(e_1);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); }, 200);
+        };
+        var results = document.createElement("div");
+        results.className = "NextspaceSearchBarResults";
+        element.appendChild(results);
+        results.style.display = "none";
+        this._results = results;
+        this.Container.appendChild(element);
+        this._element = element;
+    };
+    WidgetSearchBar.prototype._displayResults = function (results) {
+        var _this = this;
+        this._element.style.borderRadius = "9px 9px 0 0";
+        this._results.style.display = "flex";
+        if (results === null || results === void 0 ? void 0 : results.length) {
+            this._results.innerHTML = "";
+            var getIcon_1 = function (result) {
+                if (result.type == ESearchType.CesiumAddress) {
+                    return "\n                        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37259 18.6274 0 12 0C5.37258 0 0 5.37259 0 12C0 18.6274 5.37258 24 12 24Z\" fill=\"white\"/>\n                            <path d=\"M21.6985 10.4272C21.3489 10.4272 20.9994 10.631 20.7373 10.9806L17.4169 15.3786C16.8635 16.1068 16.0771 16.5145 15.2616 16.5145C14.446 16.5145 13.6596 16.1068 13.1062 15.3786L9.78584 10.9806C9.5237 10.631 9.17419 10.4272 8.82467 10.4272C8.47516 10.4272 8.12564 10.631 7.86351 10.9806L4.54312 15.3786C3.98972 16.1068 3.23244 16.5145 2.4169 16.5145C4.10623 20.0971 7.747 22.5728 11.9703 22.5728C17.7955 22.5728 22.5431 17.8543 22.5431 12C22.5431 11.5922 22.514 11.1844 22.4557 10.7767C22.2519 10.5437 21.9897 10.4272 21.6985 10.4272Z\" fill=\"#7A9C49\"/>\n                            <path d=\"M11.9996 1.42718C6.1744 1.42718 1.42683 6.14562 1.42683 12C1.42683 12.932 1.57246 13.8349 1.77634 14.6796C1.98022 14.8252 2.18411 14.9126 2.41712 14.9126C2.76663 14.9126 3.11615 14.7087 3.37828 14.3592L6.69867 9.96116C7.25207 9.233 8.03848 8.82523 8.85401 8.82523C9.66955 8.82523 10.456 9.233 11.0094 9.96116L14.2132 14.1845L14.3589 14.3592C14.621 14.7087 14.9705 14.8835 15.2909 14.9126C15.6404 14.9126 15.9608 14.7087 16.2229 14.3592L16.3686 14.1845L19.5725 9.96116C20.1259 9.233 20.9123 8.82523 21.7278 8.82523C21.8443 8.82523 21.9899 8.82524 22.1064 8.85436C20.7666 4.54368 16.7472 1.42718 11.9996 1.42718V1.42718ZM15.5239 8.12621C14.9123 8.12621 14.4171 7.63105 14.4171 7.0194C14.4171 6.40775 14.9123 5.91261 15.5239 5.91261C16.1356 5.91261 16.6307 6.40775 16.6307 7.0194C16.6307 7.63105 16.1356 8.12621 15.5239 8.12621Z\" fill=\"#6DABE4\"/>\n                        </svg>\n                    ";
+                }
+                return "\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M6 20H18C18.55 20 19 20.45 19 21C19 21.55 18.55 22 18 22H6C5.45 22 5 21.55 5 21C5 20.45 5.45 20 6 20ZM12 7C10.9 7 10 7.9 10 9C10 10.1 10.9 11 12 11C13.1 11 14 10.1 14 9C14 7.9 13.1 7 12 7ZM12 2C15.27 2 19 4.46 19 9.15C19 12.13 16.87 15.27 12.61 18.54C12.25 18.82 11.75 18.82 11.39 18.54C7.13 15.26 5 12.13 5 9.15C5 4.46 8.73 2 12 2Z\" fill=\"white\"/>\n                    </svg>\n                ";
+            };
+            results.forEach(function (result) {
+                var resultElement = document.createElement("div");
+                resultElement.className = "NextspaceSearchBarResultsItem";
+                resultElement.innerHTML = "\n                    <div class=\"NextspaceSearchBarResultsItemIcon\">\n                        ".concat(getIcon_1(result), "\n                    </div>\n                    <div class=\"NextspaceSearchBarResultsItemTip\">\n                        ").concat(result.tip, "\n                    </div>\n                ");
+                resultElement.onclick = function () {
+                    _this._clickResult(result);
+                };
+                _this._results.appendChild(resultElement);
+            });
+        }
+        else {
+            this._results.innerHTML = "\n                <div class=\"NextspaceSearchBarResultsWarning\">No results found...</div>\n            ";
+        }
+    };
+    WidgetSearchBar.prototype._displayLoading = function () {
+        this._element.style.borderRadius = "9px 9px 0 0";
+        this._results.style.display = "flex";
+        this._results.innerHTML = "\n            <div class=\"NextspaceSearchBarResultsWarning\">Loading...</div>\n        ";
+    };
+    WidgetSearchBar.prototype._hideResults = function () {
+        this._element.style.borderRadius = "9px";
+        this._results.style.display = "none";
+    };
+    WidgetSearchBar.prototype._cesiumAutoComplete = function (text) {
+        return __awaiter(this, void 0, void 0, function () {
+            var token;
+            return __generator(this, function (_a) {
+                token = Ion.defaultAccessToken;
+                return [2 /*return*/, this._cApi.get("https://api.cesium.com/v1/geocode/autocomplete?text=".concat(encodeURI(text), "&access_token=").concat(token))];
+            });
+        });
+    };
+    WidgetSearchBar.prototype._doSearch = function (text) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var result, parts, lat, lon, alt, res, MAX_ITEMS, added, _loop_1, i, state_1, e_2;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!text || text.length < 3) {
+                            return [2 /*return*/, []];
+                        }
+                        result = [];
+                        if (isLatLon(text)) {
+                            parts = text.split(",");
+                            lat = parseFloat(parts[0]);
+                            lon = parseFloat(parts[1]);
+                            alt = parts.length > 2 ? parseFloat(parts[2]) : null;
+                            result.push({
+                                type: ESearchType.LatLon,
+                                tip: "Lat Lon Location",
+                                data: {
+                                    altitude: alt,
+                                    latitude: lat,
+                                    longitude: lon
+                                }
+                            });
+                            return [2 /*return*/, result];
+                        }
+                        if (!Ion.defaultAccessToken) return [3 /*break*/, 5];
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this._cesiumAutoComplete(text)];
+                    case 2:
+                        res = _b.sent();
+                        console.log("Cesium search result", res);
+                        MAX_ITEMS = 5;
+                        added = 0;
+                        if (res && res.features) {
+                            _loop_1 = function (i) {
+                                var feature = res.features[i];
+                                if (feature.bbox || feature.geometry) {
+                                    var name_1 = feature.properties.name;
+                                    if (!name_1) {
+                                        name_1 = feature.properties.label;
+                                    }
+                                    if (!name_1) {
+                                        return "continue";
+                                    }
+                                    // We don't want results with the same visual name, even if they have different coordinate data.
+                                    if (result.find(function (x) { return x.type == ESearchType.CesiumAddress && x.tip == name_1; })) {
+                                        return "continue";
+                                    }
+                                    var coords = (_a = feature.geometry) === null || _a === void 0 ? void 0 : _a.coordinates;
+                                    var bbox = feature.bbox;
+                                    if (!coords && !bbox) {
+                                        return "continue";
+                                    }
+                                    result.push({
+                                        type: ESearchType.CesiumAddress,
+                                        tip: name_1,
+                                        data: {
+                                            bbox: bbox,
+                                            location: coords ? {
+                                                altitude: coords[2],
+                                                latitude: coords[1],
+                                                longitude: coords[0]
+                                            } : null
+                                        }
+                                    });
+                                    added += 1;
+                                    if (added >= MAX_ITEMS) {
+                                        return "break";
+                                    }
+                                }
+                            };
+                            for (i = 0; i < res.features.length; i++) {
+                                state_1 = _loop_1(i);
+                                if (state_1 === "break")
+                                    break;
+                            }
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_2 = _b.sent();
+                        console.error(e_2);
+                        return [3 /*break*/, 4];
+                    case 4: return [3 /*break*/, 6];
+                    case 5:
+                        console.warn("No Cesium token set, skipping Cesium address search.");
+                        _b.label = 6;
+                    case 6: return [2 /*return*/, result];
+                }
+            });
+        });
+    };
+    WidgetSearchBar.prototype._clickResult = function (item) {
+        return __awaiter(this, void 0, void 0, function () {
+            function zoomToCarto(points) {
+                var cartes = points.map(function (x) { var _a; return Cartesian3.fromDegrees(x.longitude, x.latitude, (_a = x.altitude) !== null && _a !== void 0 ? _a : 0); });
+                zoomToCartes(cartes);
+            }
+            var deduplicatePoints, raiseCartesToHeight, zoomToCartes, bbox, point;
+            var _this = this;
+            return __generator(this, function (_a) {
+                deduplicatePoints = function (points) {
+                    var DIS_TOLERANCE = 0.001;
+                    var result = [];
+                    var _loop_2 = function (i) {
+                        var point_1 = points[i];
+                        if (result.find(function (x) { return Cartesian3.distance(x, point_1) < DIS_TOLERANCE; })) {
+                            return "continue";
+                        }
+                        result.push(point_1);
+                    };
+                    for (var i = 0; i < points.length; i++) {
+                        _loop_2(i);
+                    }
+                    return result;
+                };
+                raiseCartesToHeight = function (points, minHeight) {
+                    for (var i = 0; i < points.length; i++) {
+                        var carto = Cartographic.fromCartesian(points[i]);
+                        carto.height = Math.max(carto.height, minHeight);
+                        points[i] = Cartesian3.fromRadians(carto.longitude, carto.latitude, carto.height);
+                    }
+                };
+                zoomToCartes = function (points) {
+                    points = deduplicatePoints(points);
+                    raiseCartesToHeight(points, 2500);
+                    var viewer = _this._viewer;
+                    var orient = {
+                        heading: Math$1.toRadians(0),
+                        pitch: Math$1.toRadians(-90),
+                        roll: 0
+                    };
+                    var onComplete = function () {
+                        viewer.camera.lookAtTransform(Matrix4.IDENTITY);
+                    };
+                    if (points.length > 1) {
+                        var rectangle = Rectangle.fromCartesianArray(points);
+                        viewer.camera.flyTo({
+                            destination: rectangle,
+                            orientation: orient,
+                            duration: 1,
+                            complete: onComplete
+                        });
+                    }
+                    else {
+                        var carto = BoundingSphere.fromPoints(points).center;
+                        viewer.camera.flyTo({
+                            destination: carto,
+                            orientation: orient,
+                            duration: 1,
+                            complete: onComplete
+                        });
+                    }
+                };
+                switch (item.type) {
+                    case ESearchType.CesiumAddress:
+                        bbox = item.data.bbox;
+                        if (bbox) {
+                            zoomToCarto([
+                                {
+                                    altitude: null,
+                                    latitude: bbox[1],
+                                    longitude: bbox[0]
+                                },
+                                {
+                                    altitude: null,
+                                    latitude: bbox[3],
+                                    longitude: bbox[2]
+                                }
+                            ]);
+                            break;
+                        }
+                        point = item.data.location;
+                        if (point) {
+                            zoomToCarto([point]);
+                            break;
+                        }
+                        break;
+                    case ESearchType.LatLon:
+                        zoomToCarto([item.data]);
+                        break;
+                }
+                this._element.setAttribute("is-opened", "false");
+                this._hideResults();
+                return [2 /*return*/];
+            });
+        });
+    };
+    return WidgetSearchBar;
+}(Widget.AWidget));
+
+var EMode;
+(function (EMode) {
+    EMode["ShowImportant"] = "IMP";
+    EMode["ShowAll"] = "ALL";
+    EMode["ShowAvailable"] = "AV";
+    EMode["ShowImportantAndAvailable"] = "IMP_AV";
+})(EMode || (EMode = {}));
+var OPEN_STORAGE_KEY = "EntityViewSummary_open_";
+var EXCLUDED_PROPERTIES = ["Bruce", "geometry", "position", "boundaries"];
+function isAttributeImportant(mode, entity, path, field) {
+    if (path.length && EXCLUDED_PROPERTIES.includes(path[0])) {
+        return false;
+    }
+    if (mode === EMode.ShowAvailable || mode === EMode.ShowImportantAndAvailable) {
+        var value = Entity$1.GetValue({
+            entity: entity,
+            path: path
+        });
+        var hasValue = value || value == 0;
+        if (mode === EMode.ShowAvailable) {
+            return hasValue;
+        }
+        if (!hasValue) {
+            return false;
+        }
+    }
+    if (field.IsImportant || mode === EMode.ShowAll) {
+        return true;
+    }
+    if (field.Type === EntityAttribute.EType.Structure) {
+        return field.Structure.some(function (field) { return isAttributeImportant(mode, entity, path, field); });
+    }
+    return false;
+}
+function digAttributes(mode, entity, structure, path) {
+    var attributes = [];
+    for (var i = 0; i < structure.length; i++) {
+        var field = structure[i];
+        var fieldPath = [].concat(path);
+        fieldPath.push(field.Key);
+        if (!isAttributeImportant(mode, entity, fieldPath, field)) {
+            continue;
+        }
+        if (field.Type === EntityAttribute.EType.Structure) {
+            var dug = digAttributes(mode, entity, field.Structure, fieldPath);
+            attributes = attributes.concat(dug);
+        }
+        else {
+            attributes.push(fieldPath);
+        }
+    }
+    return attributes;
+}
+function gatherAttributes(mode, entity, type) {
+    var _a, _b;
+    var schema = (_b = (_a = type.DataSchema) === null || _a === void 0 ? void 0 : _a.Structure) !== null && _b !== void 0 ? _b : [];
+    schema = [].concat(schema);
+    Object.keys(entity).forEach(function (key) {
+        if (!schema.find(function (field) { return (field === null || field === void 0 ? void 0 : field.Key) == key; })) {
+            schema.push({
+                Key: key,
+                Name: key,
+                Type: EntityAttribute.EType.String,
+                IsImportant: false,
+                IsIndexed: false,
+                Structure: []
+            });
+        }
+    });
+    return digAttributes(mode, entity, schema, []);
+}
+function digTypeItem(path, structure) {
+    var key = path[0];
+    var field = structure.find(function (field) { return field.Key === key; });
+    if (!field) {
+        return null;
+    }
+    if (path.length === 1) {
+        return field;
+    }
+    if (field.Type === EntityAttribute.EType.Structure) {
+        return digTypeItem(path.slice(1), field.Structure);
+    }
+    return null;
+}
+function groupAttributes(paths, attributes) {
+    var groups = [];
+    var _loop_1 = function (i) {
+        var path = paths[i];
+        var groupPath = path.slice(0, path.length - 1);
+        var groupAttr = digTypeItem(groupPath, attributes);
+        if (!groupAttr) {
+            groupAttr = {
+                Key: "ROOT"
+            };
+        }
+        var group = groups.find(function (group) { return group.group.Key === groupAttr.Key; });
+        if (group) {
+            group.attributes.push(path);
+        }
+        else {
+            var isOpen = localStorage.getItem(OPEN_STORAGE_KEY + groupAttr.Key);
+            if (isOpen == null) {
+                var DEFAULT_CLOSED = [
+                    "Bruce",
+                    "location",
+                    "boundaries",
+                    "transform"
+                ];
+                isOpen = path.length ? DEFAULT_CLOSED.includes(path[0]) ? "false" : "true" : "true";
+            }
+            groups.push({
+                group: groupAttr,
+                attributes: [path],
+                open: isOpen != "false"
+            });
+        }
+    };
+    for (var i = 0; i < paths.length; i++) {
+        _loop_1(i);
+    }
+    return groups;
+}
+var WidgetInfoView = /** @class */ (function (_super) {
+    __extends(WidgetInfoView, _super);
+    function WidgetInfoView(params) {
+        var _this = _super.call(this, params) || this;
+        _this.STYLESHEET_ID = "nextspace-info-view-stylesheet";
+        _this._generateStyles();
+        _this._generateElement();
+        _this._updateRemoval = _this._manager.VisualsRegister.OnUpdate.Subscribe(function (data) {
+            if (data.type == "UPDATE" || data.type == "DESELECT_ALL") {
+                _this._updateInfoView();
+            }
+        });
+        return _this;
+    }
+    WidgetInfoView.prototype.Dispose = function () {
+        _super.prototype.Dispose.call(this);
+        this._updateRemoval();
+    };
+    WidgetInfoView.prototype._generateStyles = function () {
+        if (document.getElementById(this.STYLESHEET_ID)) {
+            return;
+        }
+        var style = document.createElement("style");
+        style.id = this.STYLESHEET_ID;
+        style.innerHTML = "\n            .NextspaceInfoView {\n                width: 430px;\n                right: 10px;\n                top: 66px;\n                height: max-content;\n                max-height: calc(100% - 320px);\n                min-height: 50px;\n                align-items: center;\n                -webkit-backdrop-filter: blur(20px);\n                backdrop-filter: blur(20px);\n                background: rgba(33,39,42,.8);\n                border-radius: 9px;\n                box-shadow: 0 0 1px rgba(18,22,25,.36),0 18px 36px -4px rgba(18,22,25,.36);\n                display: flex;\n                flex-direction: column;\n                flex-shrink: 1;\n                opacity: 0;\n                position: absolute;\n                z-index: 1;\n                transition: opacity .3s ease,-webkit-transform .1s;\n                transition: opacity .3s ease,transform .1s;\n                transition: opacity .3s ease,transform .1s,-webkit-transform .1s;\n                font-family: Arial;\n            }\n\n            .NextspaceInfoView * {\n                box-sizing: border-box;\n            }\n\n            .NextspaceInfoViewTopLeftButtons {\n                left: 12px;\n                top: 5px;\n                align-items: center;\n                display: flex;\n                position: absolute;\n                z-index: 1;\n            }\n\n            .NextspaceInfoViewTopRightButtons {\n                right: 12px;\n                top: 5px;\n                align-items: center;\n                display: flex;\n                position: absolute;\n                z-index: 1;\n            }\n\n            .NextspaceInfoViewIconButton {\n                align-items: center;\n                display: flex;\n                flex-grow: 0;\n                flex-shrink: 0;\n                height: 30px;\n                justify-content: center;\n                margin-right: 8px;\n                min-height: 0;\n                min-width: 0;\n                position: relative;\n                width: 30px;\n                font-size: 1.5rem;\n                padding: 8px;\n                border-radius: 50%;\n                overflow: visible;\n                color: rgba(0, 0, 0, 0.54);\n                transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n                appearance: none;\n                text-decoration: none;\n                text-align: center;\n                background-color: transparent;\n                outline: 0px;\n                border: 0px none;\n                margin: 0px;\n                margin-right: 0px;\n                cursor: pointer;\n                user-select: none;\n                -moz-box-pack: center;\n                -moz-box-align: center;\n            }\n\n            .NextspaceInfoViewIconButton:hover {\n                opacity: .9;\n                transition: opacity .3s ease;\n                background-color: rgba(0, 0, 0, 0.04);\n            }\n\n            .NextspaceInfoViewIconButton svg {\n                max-height: 24px;\n                max-width: 24px;\n                flex-shrink: 0;\n            }\n\n            .NextspaceInfoViewContent {\n                align-items: flex-start;\n                color: #fff;\n                display: flex;\n                flex-direction: column;\n                flex-grow: 1;\n                flex-shrink: 1;\n                margin-top: 12px;\n                overflow: auto;\n                padding: 25px;\n                width: 100%;\n            }\n\n            .NextspaceInfoViewScrollBox {\n                flex-grow: 1;\n                flex-shrink: 1;\n                overflow-y: auto;\n                width: 100%;\n            }\n\n            .NextspaceInfoViewName {\n                font-family: Arial;\n                font-style: normal;\n                font-weight: 400;\n                text-align: center;\n                width: 100%;\n                color: #40c4ff;\n                font-size: 13px;\n                letter-spacing: .01em;\n                line-height: 16px;\n                margin-bottom: 5px;\n            }\n\n            .NextspaceInfoViewType {\n                font-family: Arial;\n                font-style: normal;\n                font-weight: 400;\n                text-align: center;\n                width: 100%;\n                color: #c1c7cd;\n                font-size: 10px;\n                letter-spacing: .05em;\n                line-height: 10px;\n                margin-bottom: 12px;\n                -webkit-user-select: none;\n                user-select: none;\n            }\n\n            .NextspaceInfoViewTitle {\n                color: #f2f4f8;\n                font-family: Arial;\n                font-size: 14px;\n                font-style: normal;\n                font-weight: 500;\n                line-height: 20px;\n                margin-right: auto;\n                -webkit-touch-callout: none;\n                -webkit-user-select: none;\n                user-select: none;\n                margin-top: 20px;\n                margin-bottom: 10px;\n            }\n\n            .NextspaceInfoViewSummary {\n                display: flex;\n                flex-direction: column;\n                flex-grow: 1;\n                flex-shrink: 1;\n            }\n\n            .NextspaceAttributesGroup {\n                display: flex;\n                flex-direction: column;\n            }\n\n            .NextspaceAttributesGroup[is-opened=\"false\"] .NextspaceAttribute {\n                display: none;\n            }\n\n            .NextspaceAttributesGroupToggle {\n                align-items: center;\n                background-color: #343a3f;\n                border: 1px solid #343a3f;\n                border-radius: 5px;\n                cursor: pointer;\n                display: flex;\n                height: 35px;\n                margin-bottom: 3px;\n                overflow: hidden;\n                padding-left: 12px;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                -webkit-touch-callout: none;\n                -webkit-user-select: none;\n                user-select: none;\n                font-size: 12px;\n            }\n\n            .NextspaceAttributesGroupToggleIcon {\n                align-items: center;\n                display: flex;\n                height: 20px;\n                justify-content: center;\n                margin-left: auto;\n                margin-right: 8px;\n                width: 20px;\n                cursor: pointer;\n                white-space: nowrap;\n            }\n\n            .NextspaceAttributesGroup[is-opened=\"false\"] .NextspaceAttributesGroupToggleIconOpened {\n                display: none;\n            }\n\n            .NextspaceAttributesGroup[is-opened=\"true\"] .NextspaceAttributesGroupToggleIconOpened {\n                display: block;\n            }\n\n            .NextspaceAttributesGroup[is-opened=\"false\"] .NextspaceAttributesGroupToggleIconClosed {\n                display: block;\n            }\n\n            .NextspaceAttributesGroup[is-opened=\"true\"] .NextspaceAttributesGroupToggleIconClosed {\n                display: none;\n            }\n\n            .NextspaceAttribute {\n                align-items: center;\n                display: flex;\n                flex-direction: row;\n                flex-grow: 1;\n            }\n\n            .NextspaceAttributeInput {\n                align-items: center;\n                background-color: #121619;\n                border: 1px solid #434343;\n                border-radius: 5px;\n                display: flex;\n                height: 35px;\n                margin-bottom: 3px;\n                width: 100%;\n            }\n\n            .NextspaceAttributeInputLabel {\n                border-right: 1px solid #434343;\n                flex-grow: .8;\n                flex-shrink: 1;\n                margin-right: 8px;\n                overflow: hidden;\n                padding-left: 8px;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                width: 90px;\n                font-size: 12px;\n            }\n\n            .NextspaceAttributeInputValue {\n                background-color: transparent;\n                border: 1px solid transparent;\n                color: #fff;\n                flex-grow: 1;\n                flex-shrink: 1;\n                height: 100%;\n                padding-left: 2px;\n                text-align: left;\n                width: 120px;\n                cursor: default;\n                opacity: .6;\n                outline: none;\n                padding: .5rem .75rem;\n                border-radius: .375rem;\n                font-size: 12px;\n            }\n\n            .NextspaceDefaultImageContainer {\n                align-items: center;\n                border-radius: 5px;\n                display: flex;\n                flex-direction: column;\n                flex-grow: 0;\n                flex-shrink: 1;\n                height: 170px;\n                overflow: hidden;\n                position: relative;\n                width: 100%;\n                background-color: rgba(33, 39, 42, 0.8);\n                margin-bottom: 20px;\n            }\n\n            .NextspaceDefaultImage {\n                background-position: 50%;\n                background-repeat: no-repeat;\n                background-size: cover;\n                height: 100%;\n                width: 100%;\n                user-select: none;\n            }\n        ";
+        document.head.appendChild(style);
+    };
+    WidgetInfoView.prototype._generateElement = function () {
+        var _this = this;
+        var element = document.createElement("div");
+        element.className = "NextspaceInfoView";
+        element.style.display = "none";
+        var topLeftButtons = document.createElement("div");
+        topLeftButtons.className = "NextspaceInfoViewTopLeftButtons";
+        topLeftButtons.innerHTML = "\n            <button title=\"Fly to entity\" class=\"NextspaceInfoViewIconButton\">\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20.5926 2.12617L2.49072 12.5694C1.78383 12.9756 1.87366 13.9597 2.57664 14.2566L6.72815 15.9984L17.9486 6.10975C18.1634 5.91838 18.468 6.21129 18.2844 6.4339L8.87616 17.8964V21.0403C8.87616 21.962 9.98921 22.3252 10.536 21.6574L13.016 18.6385L17.8822 20.6771C18.4367 20.9115 19.0694 20.5639 19.171 19.9663L21.9829 3.09473C22.1157 2.30583 21.2682 1.73563 20.5926 2.12617Z\" fill=\"white\"></path></svg>\n            </button>\n        ";
+        element.appendChild(topLeftButtons);
+        var topRightButtons = document.createElement("div");
+        topRightButtons.className = "NextspaceInfoViewTopRightButtons";
+        topRightButtons.innerHTML = "\n            <button title=\"Close\" class=\"NextspaceInfoViewIconButton\">\n                <svg class=\"\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M18.3002 5.70973C17.9102 5.31973 17.2802 5.31973 16.8902 5.70973L12.0002 10.5897L7.11022 5.69973C6.72022 5.30973 6.09021 5.30973 5.70021 5.69973C5.31021 6.08973 5.31021 6.71973 5.70021 7.10973L10.5902 11.9997L5.70021 16.8897C5.31021 17.2797 5.31021 17.9097 5.70021 18.2997C6.09021 18.6897 6.72022 18.6897 7.11022 18.2997L12.0002 13.4097L16.8902 18.2997C17.2802 18.6897 17.9102 18.6897 18.3002 18.2997C18.6902 17.9097 18.6902 17.2797 18.3002 16.8897L13.4102 11.9997L18.3002 7.10973C18.6802 6.72973 18.6802 6.08973 18.3002 5.70973Z\" fill=\"white\"></path></svg>\n            </button>\n        ";
+        element.appendChild(topRightButtons);
+        var flyToButt = topLeftButtons.querySelector("button");
+        flyToButt.addEventListener("click", function () {
+            _this._clickFlyTo();
+        });
+        this._flyTo = flyToButt;
+        var closeButt = topRightButtons.querySelector("button");
+        closeButt.addEventListener("click", function () {
+            _this._manager.VisualsRegister.ClearSelected();
+        });
+        var content = document.createElement("div");
+        content.className = "NextspaceInfoViewContent";
+        element.appendChild(content);
+        var scrollBox = document.createElement("div");
+        scrollBox.className = "NextspaceInfoViewScrollBox";
+        content.appendChild(scrollBox);
+        var name = document.createElement("div");
+        name.className = "NextspaceInfoViewName";
+        scrollBox.appendChild(name);
+        this._name = name;
+        var type = document.createElement("div");
+        type.className = "NextspaceInfoViewType";
+        scrollBox.appendChild(type);
+        this._type = type;
+        var imageContainer = document.createElement("div");
+        imageContainer.className = "NextspaceDefaultImageContainer";
+        var image = document.createElement("div");
+        image.classList.add("NextspaceDefaultImage");
+        imageContainer.appendChild(image);
+        scrollBox.appendChild(imageContainer);
+        this._imageContainer = imageContainer;
+        this._image = image;
+        var title = document.createElement("div");
+        title.className = "NextspaceInfoViewTitle";
+        title.innerText = "Details";
+        scrollBox.appendChild(title);
+        this._title = title;
+        var summary = document.createElement("div");
+        summary.className = "NextspaceInfoViewSummary";
+        scrollBox.appendChild(summary);
+        this._summary = summary;
+        this.Container.appendChild(element);
+        this._element = element;
+        this._updateInfoView();
+    };
+    WidgetInfoView.prototype._clickFlyTo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var entityId, pos3d;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        entityId = this._lastSelectedId;
+                        if (!entityId) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, EntityUtils.GetPosAsync({
+                                api: this._apiGetters.GetBruceApi(),
+                                entityId: entityId,
+                                viewer: this._viewer,
+                                returnHeightRef: HeightReference.NONE,
+                                recordHeightRef: HeightReference.NONE,
+                                visualRegister: this._manager.VisualsRegister
+                            })];
+                    case 1:
+                        pos3d = _a.sent();
+                        if (!(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) return [3 /*break*/, 3];
+                        return [4 /*yield*/, DrawingUtils.RaisePos3d(this._viewer, pos3d, 15)];
+                    case 2:
+                        pos3d = _a.sent();
+                        this._viewer.camera.flyTo({
+                            destination: pos3d,
+                            duration: 1,
+                            orientation: {
+                                heading: 0,
+                                pitch: -Math$1.PI_OVER_TWO,
+                                roll: 0
+                            }
+                        });
+                        return [3 /*break*/, 4];
+                    case 3:
+                        alert("Could not get position of entity.");
+                        _a.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    WidgetInfoView.prototype._updateInfoView = function () {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function () {
+            var selectedIds, firstId, api, entity, entityType, name_1, data, items, images, defaultImage, url, attributes, groups, _i, groups_1, group, e_1;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        selectedIds = this._manager.VisualsRegister.GetSelected();
+                        if (selectedIds.length <= 0) {
+                            this._element.style.display = "none";
+                            this._element.style.opacity = "0";
+                            return [2 /*return*/];
+                        }
+                        this._element.style.display = "flex";
+                        this._element.style.opacity = "1";
+                        firstId = selectedIds[0];
+                        if (this._lastSelectedId == firstId) {
+                            return [2 /*return*/];
+                        }
+                        this._lastSelectedId = firstId;
+                        _d.label = 1;
+                    case 1:
+                        _d.trys.push([1, 5, , 6]);
+                        this._title.style.display = "none";
+                        this._flyTo.style.display = "none";
+                        this._name.innerText = "Loading...";
+                        this._type.innerText = "";
+                        this._summary.innerHTML = "";
+                        this._imageContainer.style.display = "none";
+                        api = this._apiGetters.GetBruceApi();
+                        return [4 /*yield*/, Entity$1.Get({
+                                entityId: firstId,
+                                api: api
+                            })];
+                    case 2:
+                        entity = (_d.sent()).entity;
+                        if (!entity) {
+                            throw (new Error("Could not get entity."));
+                        }
+                        return [4 /*yield*/, EntityType.Get({
+                                entityTypeId: (_a = entity.Bruce) === null || _a === void 0 ? void 0 : _a["EntityType.ID"],
+                                api: api
+                            })];
+                    case 3:
+                        entityType = (_d.sent()).entityType;
+                        name_1 = Entity$1.CalculateName({
+                            entity: entity,
+                            type: entityType,
+                            defaultToId: false
+                        });
+                        if (!name_1) {
+                            name_1 = "Unnamed entity";
+                        }
+                        this._title.style.display = "block";
+                        this._flyTo.style.display = "flex";
+                        this._name.innerText = name_1;
+                        this._type.innerText = (entityType === null || entityType === void 0 ? void 0 : entityType.Name) ? entityType.Name : "Unknown type";
+                        return [4 /*yield*/, EntityAttachment.GetListByEntityId({
+                                entityId: firstId,
+                                api: api
+                            })];
+                    case 4:
+                        data = _d.sent();
+                        items = data.attachments;
+                        images = [].concat(items).sort(function (a, b) { return b.DisplayOrder - a.DisplayOrder; }).filter(function (x) { return x["EntityAttachmentType.ID"] == EntityAttachmentType.EType.Photo; }).reverse();
+                        defaultImage = images.length ? images[0] : null;
+                        if (defaultImage) {
+                            this._imageContainer.style.display = "flex";
+                            url = ClientFile.GetUrl({
+                                fileId: defaultImage["ClientFile.ID"],
+                                api: api
+                            });
+                            this._image.style.backgroundImage = "url(".concat(url, ")");
+                        }
+                        attributes = gatherAttributes(EMode.ShowAll, entity, entityType);
+                        groups = groupAttributes(attributes, (_c = (_b = entityType.DataSchema) === null || _b === void 0 ? void 0 : _b.Structure) !== null && _c !== void 0 ? _c : []);
+                        for (_i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+                            group = groups_1[_i];
+                            this._generateAttrGroup(entityType, entity, group);
+                        }
+                        return [3 /*break*/, 6];
+                    case 5:
+                        e_1 = _d.sent();
+                        console.error(e_1);
+                        this._name.innerText = "";
+                        this._summary.innerHTML = "<p>Could not read entity information</p>";
+                        return [3 /*break*/, 6];
+                    case 6: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    WidgetInfoView.prototype._generateAttrGroup = function (type, entity, group) {
+        var groupDiv = document.createElement("div");
+        groupDiv.className = "NextspaceAttributesGroup";
+        groupDiv.setAttribute("is-opened", group.open ? "true" : "false");
+        if (group.group.Key != "ROOT") {
+            var toggle = document.createElement("div");
+            toggle.className = "NextspaceAttributesGroupToggle";
+            toggle.innerHTML = "\n                ".concat(group.group.Key, "\n                <div class=\"NextspaceAttributesGroupToggleIcon\">\n                    <svg class=\"NextspaceAttributesGroupToggleIconOpened\" width=\"16\" height=\"9\" viewBox=\"0 0 16 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15 1L8 8L1 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n                    <svg class=\"NextspaceAttributesGroupToggleIconClosed\" width=\"10\" height=\"17\" viewBox=\"0 0 10 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 15.5L1.5 8.5L8.5 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n                </div>\n            ");
+            toggle.addEventListener("click", function () {
+                var isOpened = groupDiv.getAttribute("is-opened") == "true";
+                groupDiv.setAttribute("is-opened", isOpened ? "false" : "true");
+                localStorage.setItem("".concat(OPEN_STORAGE_KEY).concat(group.group.Key), isOpened ? "false" : "true");
+            });
+            groupDiv.appendChild(toggle);
+        }
+        for (var _i = 0, _a = group.attributes; _i < _a.length; _i++) {
+            var attr = _a[_i];
+            var attrDiv = this._generateAttr(groupDiv, type, entity, attr);
+            if (group.group.Key != "ROOT") {
+                attrDiv.style.marginLeft = "12px";
+            }
+        }
+        this._summary.appendChild(groupDiv);
+    };
+    WidgetInfoView.prototype._generateAttr = function (container, type, entity, path) {
+        var _a, _b, _c;
+        var attrDiv = document.createElement("div");
+        attrDiv.className = "NextspaceAttribute";
+        var typeItem = digTypeItem(path, (_b = (_a = type.DataSchema) === null || _a === void 0 ? void 0 : _a.Structure) !== null && _b !== void 0 ? _b : []);
+        var attrType = (_c = typeItem === null || typeItem === void 0 ? void 0 : typeItem.Type) !== null && _c !== void 0 ? _c : EntityAttribute.EType.String;
+        var input = document.createElement("div");
+        input.className = "NextspaceAttributeInput";
+        attrDiv.appendChild(input);
+        var attrName = document.createElement("div");
+        attrName.className = "NextspaceAttributeInputLabel";
+        attrName.innerText = typeItem ? typeItem.Name ? typeItem.Name : typeItem.Key : path[path.length - 1];
+        input.appendChild(attrName);
+        var value = Entity$1.GetValue({
+            entity: entity,
+            path: path
+        });
+        var valueStr = "";
+        if (attrType == EntityAttribute.EType.Boolean) {
+            valueStr = value ? "Yes" : "No";
+        }
+        else if (attrType == EntityAttribute.EType.Integer || attrType == EntityAttribute.EType.Double) {
+            valueStr = +value;
+            if (isNaN(valueStr)) {
+                valueStr = 0;
+            }
+        }
+        else if (attrType == EntityAttribute.EType.Structure) {
+            valueStr = "<Multiple values>";
+        }
+        else if (attrType == EntityAttribute.EType.Geometry) {
+            valueStr = "<Multiple values>";
+        }
+        else {
+            if (value && typeof value == "object") {
+                valueStr = "<Multiple values>";
+            }
+            else {
+                valueStr = value ? String(value) : "<No value>";
+            }
+        }
+        var attrValue = document.createElement("input");
+        attrValue.className = "NextspaceAttributeInputValue";
+        attrValue.value = String(valueStr);
+        input.appendChild(attrValue);
+        container.appendChild(attrDiv);
+        return attrDiv;
+    };
+    return WidgetInfoView;
+}(Widget.AWidget));
+
+var CESIUM_VIEWER_MANAGER_KEY = "_cesiumViewerManager";
+var ViewerUtils;
+(function (ViewerUtils) {
+    /**
+     * Destroys all the junk that cesium viewer ships with.
+     * @param viewer
+     */
+    function InitViewer(params) {
+        var viewer = params.viewer, destroyWidgets = params.destroyWidgets, styleContainer = params.styleContainer, nextspaceWidgets = params.nextspaceWidgets;
+        var data = { widgets: {} };
+        if (destroyWidgets != false) {
+            ViewerUtils.DestroyWidget(viewer.timeline);
+            ViewerUtils.DestroyWidget(viewer.vrButton);
+            ViewerUtils.DestroyWidget(viewer.sceneModePicker);
+            ViewerUtils.DestroyWidget(viewer.homeButton);
+            ViewerUtils.DestroyWidget(viewer.fullscreenButton);
+            ViewerUtils.DestroyWidget(viewer.baseLayerPicker);
+        }
+        if (styleContainer != false) {
+            ViewerUtils.StyleContainer({ viewer: viewer });
+        }
+        if (nextspaceWidgets != false) {
+            data.widgets = ViewerUtils.CreateWidgets({
+                viewer: viewer
+            });
+        }
+        return data;
+    }
+    ViewerUtils.InitViewer = InitViewer;
+    function DestroyWidget(widget) {
+        if (widget && !widget.isDestroyed()) {
+            widget.destroy();
+        }
+    }
+    ViewerUtils.DestroyWidget = DestroyWidget;
+    /**
+     * Hides all unnecessary elements from the Cesium viewer container.
+     * @param viewer
+     */
+    function StyleContainer(params) {
+        var _a;
+        var viewer = params.viewer;
+        var container = viewer.container;
+        var genContainer = (_a = container.getElementsByClassName("cesium-viewer")) === null || _a === void 0 ? void 0 : _a[0];
+        if (genContainer) {
+            var children = genContainer.children;
+            for (var i = 0; i < children.length; i++) {
+                var child = children[i];
+                if (!child.classList.contains("cesium-viewer-cesiumWidgetContainer")) {
+                    child.style.display = "none";
+                }
+            }
+        }
+        var canvas = viewer.canvas;
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+        var widget = canvas.parentElement;
+        widget.style.width = "100%";
+        widget.style.height = "100%";
+        widget.style.touchAction = "none";
+        var widgetContainer = widget.parentElement;
+        widgetContainer.style.width = "100%";
+        widgetContainer.style.height = "100%";
+        var viewerContainer = widgetContainer.parentElement;
+        viewerContainer.style.fontFamily = "sans-serif";
+        viewerContainer.style.fontSize = "16px";
+        viewerContainer.style.overflow = "hidden";
+        viewerContainer.style.display = "block";
+        viewerContainer.style.position = "relative";
+        viewerContainer.style.top = "0";
+        viewerContainer.style.left = "0";
+        viewerContainer.style.width = "100%";
+        viewerContainer.style.height = "100%";
+    }
+    ViewerUtils.StyleContainer = StyleContainer;
+    /**
+     * Returns a given Cesium viewer's menu item manager.
+     * If one is missing then it'll optionally create one before returning it.
+     * @param params
+     * @returns
+     */
+    function GetManager(params) {
+        var viewer = params.viewer, createIfMissing = params.createIfMissing;
+        if (viewer[CESIUM_VIEWER_MANAGER_KEY]) {
+            return viewer[CESIUM_VIEWER_MANAGER_KEY];
+        }
+        else if (createIfMissing != false) {
+            var manager = new MenuItemManager.Manager({ viewer: viewer });
+            viewer[CESIUM_VIEWER_MANAGER_KEY] = manager;
+            return manager;
+        }
+        return null;
+    }
+    ViewerUtils.GetManager = GetManager;
+    /**
+     * Creates Nextspace default widgets.
+     * Returns key/value pairs for created widgets. Key is widget name.
+     * @param params
+     */
+    function CreateWidgets(params) {
+        var viewer = params.viewer, manager = params.manager, container = params.container, apiGetters = params.apiGetters, navCompass = params.navCompass, defaultState = params.defaultState, branding = params.branding, cursorBar = params.cursorBar, searchBar = params.searchBar, bookmarks = params.bookmarks, infoView = params.infoView;
+        var widgets = {};
+        if (!viewer && manager) {
+            viewer = manager.Viewer;
+        }
+        if (viewer && !manager) {
+            manager = ViewerUtils.GetManager({ viewer: viewer });
+        }
+        if (!container && viewer) {
+            container = viewer.container;
+        }
+        if (!apiGetters) {
+            apiGetters = ENVIRONMENT.Api();
+        }
+        if (defaultState == null) {
+            defaultState = true;
+        }
+        var widgetParams = {
+            viewer: viewer,
+            container: container,
+            apiGetters: apiGetters,
+            manager: manager
+        };
+        if (navCompass || defaultState) {
+            widgets["navCompass"] = new WidgetNavCompass(widgetParams);
+        }
+        if (branding || defaultState) {
+            widgets["navBranding"] = new WidgetBranding(widgetParams);
+        }
+        if (cursorBar || defaultState) {
+            widgets["cursorBar"] = new WidgetCursorBar(widgetParams);
+        }
+        if (searchBar || defaultState) {
+            widgets["searchBar"] = new WidgetSearchBar(widgetParams);
+        }
+        if (bookmarks || defaultState) {
+            widgets["bookmarks"] = new WidgetBookmarks(__assign(__assign({}, widgetParams), { viewId: params.viewId }));
+        }
+        if (infoView || defaultState) {
+            widgets["infoView"] = new WidgetInfoView(widgetParams);
+        }
+        return widgets;
+    }
+    ViewerUtils.CreateWidgets = CreateWidgets;
+})(ViewerUtils || (ViewerUtils = {}));
+
+var VERSION$1 = "2.2.8";
 
-export { VERSION, CesiumViewMonitor, ViewerUtils, MenuItemManager, EntityRenderEngine, MenuItemCreator, VisualsRegister, RenderManager, EntitiesIdsRenderManager, EntitiesLoadedRenderManager, EntitiesRenderManager, EntityRenderManager, TilesetCadRenderManager, TilesetArbRenderManager, TilesetEntitiesRenderManager, TilesetOsmRenderManager, TilesetPointcloudRenderManager, TilesetGooglePhotosRenderManager, DataSourceStaticKmlManager, RelationsRenderManager, SharedGetters, CesiumParabola, ViewRenderEngine, TileRenderEngine, TilesetRenderEngine, CESIUM_INSPECTOR_KEY, ViewUtils, DrawingUtils, MeasureUtils, EntityUtils };
+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, ViewRenderEngine, TileRenderEngine, TilesetRenderEngine, CESIUM_INSPECTOR_KEY, ViewUtils, DrawingUtils, MeasureUtils, EntityUtils, Draw3dPolygon, Draw3dPolyline };
 //# sourceMappingURL=bruce-cesium.es5.js.map