bruce-cesium 4.2.8 → 4.3.0

package/dist/bruce-cesium.umd.js

@@ -23107,6 +23107,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(WidgetLeftPanel.prototype, "OnBookmarkSelect", {
+            get: function () {
+                if (this._onBookmarkSelect == null) {
+                    this._onBookmarkSelect = new BModels.BruceEvent();
+                }
+                return this._onBookmarkSelect;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(WidgetLeftPanel.prototype, "Loading", {
             get: function () {
                 return this._loading;
@@ -23157,6 +23167,10 @@
         };
         WidgetLeftPanel.prototype.Dispose = function () {
             _super.prototype.Dispose.call(this);
+            if (this.envSubRemoval) {
+                this.envSubRemoval();
+                this.envSubRemoval = null;
+            }
             if (this._enabledTabContent) {
                 this._enabledTabContent.Dispose();
                 this._enabledTabContent = null;
@@ -23169,21 +23183,36 @@
             }
             var style = document.createElement("style");
             style.id = this.STYLESHEET_ID;
-            style.innerHTML = "\n            .NextspaceLeftPanel {\n                align-items: center;\n                background-color: #21272a;\n                cursor: default;\n                display: flex;\n                flex-direction: column;\n                flex-shrink: 0;\n                height: 100%;\n                padding-bottom: 15px;\n                padding-top: 15px;\n                position: absolute;\n                width: 50px;\n                z-index: 1;\n                top: 0;\n                left: 0;\n            }\n\n            .NextspaceLeftPanel * {\n                box-sizing: border-box;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelBreaker {\n                background-color: hsla(0,0%,50%,.231);\n                flex-shrink: 0;\n                height: 2px;\n                margin-bottom: 15px;\n                width: calc(100% - 8px);\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton {\n                border-radius: 3px;\n                color: #fff;\n                cursor: pointer;\n                font-size: 18px;\n                height: 32px;\n                overflow: hidden;\n                width: 32px;\n                margin-bottom: 15px;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton:first-of-type {\n                margin-bottom: 8px;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton >.NextspaceLeftPanelButtonIcon {\n                align-items: center;\n                display: flex;\n                justify-content: center;\n                position: relative;\n                transition: .3s ease;\n                height: 100%;\n                width: 100%;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton >.NextspaceLeftPanelButtonIcon:hover {\n                transform: scale(1.2);\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton >.NextspaceLeftPanelButtonIcon >svg {\n                cursor: pointer;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton[is-enabled=\"true\"] >.NextspaceLeftPanelButtonIcon {\n                background-color: #fff;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton[is-enabled=\"true\"] >.NextspaceLeftPanelButtonIcon >svg {\n                filter: invert(1);\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelTabContent {\n                display: none;\n                width: 300px;\n                height: 100%;\n                position: absolute;\n                top: 0;\n                left: 50px;\n                background-color: #21272a;\n                padding: 40px 30px 30px;\n                flex-direction: column;\n                flex-grow: 1;\n                flex-shrink: 1;\n                overflow: hidden;\n            }\n        ";
+            style.innerHTML = "\n            .NextspaceLeftPanel {\n                align-items: center;\n                background-color: #21272a;\n                cursor: default;\n                display: flex;\n                flex-direction: column;\n                flex-shrink: 0;\n                height: 100%;\n                padding-top: 15px;\n                position: absolute;\n                width: 50px;\n                z-index: 1;\n                top: 0;\n                left: 0;\n                box-sizing: border-box;\n            }\n\n            .NextspaceLeftPanel * {\n                box-sizing: border-box;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelBreaker {\n                background-color: hsla(0,0%,50%,.231);\n                flex-shrink: 0;\n                height: 2px;\n                margin-bottom: 15px;\n                width: calc(100% - 8px);\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelBottomBreaker {\n                margin-top: auto;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton {\n                border-radius: 3px;\n                color: #fff;\n                cursor: pointer;\n                font-size: 18px;\n                height: 32px;\n                overflow: hidden;\n                width: 32px;\n                margin-bottom: 15px;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton:first-of-type {\n                margin-bottom: 8px;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton >.NextspaceLeftPanelButtonIcon {\n                align-items: center;\n                display: flex;\n                justify-content: center;\n                position: relative;\n                transition: .3s ease;\n                height: 100%;\n                width: 100%;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton >.NextspaceLeftPanelButtonIcon:hover {\n                transform: scale(1.2);\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton[no-content=\"true\"] {\n                cursor: default;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton[no-content=\"true\"] >.NextspaceLeftPanelButtonIcon:hover {\n                transform: none;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton >.NextspaceLeftPanelButtonIcon >svg {\n                cursor: pointer;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton[is-enabled=\"true\"] >.NextspaceLeftPanelButtonIcon {\n                background-color: #fff;\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton[is-enabled=\"true\"] >.NextspaceLeftPanelButtonIcon >svg {\n                filter: invert(1);\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelButton[is-disabled=\"true\"] {\n                opacity: .5;\n                pointer-events: none\n            }\n\n            .NextspaceLeftPanel >.NextspaceLeftPanelTabContent {\n                display: none;\n                width: 300px;\n                height: 100%;\n                position: absolute;\n                top: 0;\n                left: 50px;\n                background-color: #21272a;\n                padding: 40px 30px 30px;\n                flex-direction: column;\n                flex-grow: 1;\n                flex-shrink: 1;\n                overflow: hidden;\n            }\n\n            .NextspaceLeftPanel .NextspaceLeftPanelTabContentCloseButton {\n                color: #fff;\n                cursor: pointer;\n                opacity: .7;\n                position: absolute;\n                right: 22px;\n                top: 14px;\n                transition: transform .3s ease;\n                z-index: 1;\n            }\n\n            .NextspaceLeftPanel .NextspaceLeftPanelTabContentCloseButton:hover {\n                transform: scale(1.2);\n            }\n        ";
             document.head.appendChild(style);
         };
         WidgetLeftPanel.prototype._generateElement = function () {
+            var _this = this;
             var element = document.createElement("div");
             element.className = "NextspaceLeftPanel";
             this.Container.appendChild(element);
             this._element = element;
-            this._addPlaceholderTab("Dashboard", "\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9ZM18 9C18 10.1046 17.1046 11 16 11C14.8954 11 14 10.1046 14 9C14 7.89543 14.8954 7 16 7C17.1046 7 18 7.89543 18 9ZM23 11C24.1046 11 25 10.1046 25 9C25 7.89543 24.1046 7 23 7C21.8954 7 21 7.89543 21 9C21 10.1046 21.8954 11 23 11ZM11 16C11 17.1046 10.1046 18 9 18C7.89543 18 7 17.1046 7 16C7 14.8954 7.89543 14 9 14C10.1046 14 11 14.8954 11 16ZM9 25C10.1046 25 11 24.1046 11 23C11 21.8954 10.1046 21 9 21C7.89543 21 7 21.8954 7 23C7 24.1046 7.89543 25 9 25ZM18 16C18 17.1046 17.1046 18 16 18C14.8954 18 14 17.1046 14 16C14 14.8954 14.8954 14 16 14C17.1046 14 18 14.8954 18 16ZM16 25C17.1046 25 18 24.1046 18 23C18 21.8954 17.1046 21 16 21C14.8954 21 14 21.8954 14 23C14 24.1046 14.8954 25 16 25ZM25 16C25 17.1046 24.1046 18 23 18C21.8954 18 21 17.1046 21 16C21 14.8954 21.8954 14 23 14C24.1046 14 25 14.8954 25 16ZM23 25C24.1046 25 25 24.1046 25 23C25 21.8954 24.1046 21 23 21C21.8954 21 21 21.8954 21 23C21 24.1046 21.8954 25 23 25Z\" fill=\"white\"></path>\n        ");
+            this._addPlaceholderTab("Dashboard", "\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9ZM18 9C18 10.1046 17.1046 11 16 11C14.8954 11 14 10.1046 14 9C14 7.89543 14.8954 7 16 7C17.1046 7 18 7.89543 18 9ZM23 11C24.1046 11 25 10.1046 25 9C25 7.89543 24.1046 7 23 7C21.8954 7 21 7.89543 21 9C21 10.1046 21.8954 11 23 11ZM11 16C11 17.1046 10.1046 18 9 18C7.89543 18 7 17.1046 7 16C7 14.8954 7.89543 14 9 14C10.1046 14 11 14.8954 11 16ZM9 25C10.1046 25 11 24.1046 11 23C11 21.8954 10.1046 21 9 21C7.89543 21 7 21.8954 7 23C7 24.1046 7.89543 25 9 25ZM18 16C18 17.1046 17.1046 18 16 18C14.8954 18 14 17.1046 14 16C14 14.8954 14.8954 14 16 14C17.1046 14 18 14.8954 18 16ZM16 25C17.1046 25 18 24.1046 18 23C18 21.8954 17.1046 21 16 21C14.8954 21 14 21.8954 14 23C14 24.1046 14.8954 25 16 25ZM25 16C25 17.1046 24.1046 18 23 18C21.8954 18 21 17.1046 21 16C21 14.8954 21.8954 14 23 14C24.1046 14 25 14.8954 25 16ZM23 25C24.1046 25 25 24.1046 25 23C25 21.8954 24.1046 21 23 21C21.8954 21 21 21.8954 21 23C21 24.1046 21.8954 25 23 25Z\" fill=\"white\"></path>\n            </svg>\n        ");
             var breaker = document.createElement("div");
             breaker.className = "NextspaceLeftPanelBreaker";
             this._element.appendChild(breaker);
-            this._addPanelTab("bookmarks", "Bookmarks", "\n            <path d=\"M23 25V7H9V25L16 18L23 25Z\" fill=\"white\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        ");
+            this._addPanelTab("bookmarks", "Bookmarks", "\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M23 25V7H9V25L16 18L23 25Z\" fill=\"white\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n        ");
+            var bottomBreaker = document.createElement("div");
+            bottomBreaker.className = "NextspaceLeftPanelBottomBreaker";
+            this._element.appendChild(bottomBreaker);
+            this._addUserProfileTab();
             var panelContent = document.createElement("div");
             panelContent.className = "NextspaceLeftPanelTabContent";
+            var panelContentCloseButton = document.createElement("div");
+            panelContentCloseButton.setAttribute("title", "Close");
+            panelContentCloseButton.className = "NextspaceLeftPanelTabContentCloseButton";
+            panelContentCloseButton.innerHTML = "\n            <svg 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        ";
+            panelContentCloseButton.onclick = function () {
+                _this._enabledPanelTab = "";
+                _this._updatePanelContent();
+                _this._updatePanelStyles();
+            };
+            panelContent.appendChild(panelContentCloseButton);
             this._element.appendChild(panelContent);
             this._updatePanelStyles();
         };
@@ -23230,15 +23259,87 @@
             tabButton.style.pointerEvents = "none";
             var buttonBookmarksIcon = document.createElement("div");
             buttonBookmarksIcon.className = "NextspaceLeftPanelButtonIcon";
-            var buttonBookmarksIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            buttonBookmarksIconSvg.setAttribute("viewBox", "0 0 32 32");
-            buttonBookmarksIconSvg.setAttribute("width", "32");
-            buttonBookmarksIconSvg.setAttribute("height", "32");
-            buttonBookmarksIconSvg.innerHTML = svgStr;
-            buttonBookmarksIcon.appendChild(buttonBookmarksIconSvg);
+            buttonBookmarksIcon.innerHTML = svgStr;
             tabButton.appendChild(buttonBookmarksIcon);
             this._element.appendChild(tabButton);
         };
+        /**
+         * User profile handled separately.
+         * This is because for a while it will be just an indicator of logged in user session.
+         * It won't have a tab content.
+         */
+        WidgetLeftPanel.prototype._addUserProfileTab = function () {
+            var tabButton = document.createElement("div");
+            tabButton.className = "NextspaceLeftPanelButton";
+            tabButton.setAttribute("title", "Not logged in");
+            tabButton.setAttribute("no-content", "true");
+            var buttonBookmarksIcon = document.createElement("div");
+            buttonBookmarksIcon.className = "NextspaceLeftPanelButtonIcon";
+            var LOGGED_OUT_ICON = "\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V19C4 19.55 4.45 20 5 20H19C19.55 20 20 19.55 20 19V18C20 15.34 14.67 14 12 14Z\" fill=\"white\"/>\n            </svg>\n        ";
+            buttonBookmarksIcon.innerHTML = LOGGED_OUT_ICON;
+            tabButton.appendChild(buttonBookmarksIcon);
+            this._element.appendChild(tabButton);
+            function getInitials(name) {
+                var nameSplit = name.split(" ");
+                if (nameSplit.length > 1) {
+                    return nameSplit[0][0] + nameSplit[1][0];
+                }
+                else {
+                    return nameSplit[0][0];
+                }
+            }
+            function GetColorForString(str) {
+                var stringUniqueHash = [].concat(str).reduce(function (acc, char) { return char.charCodeAt(0) + ((acc << 5) - acc); }, 0);
+                return "hsl(".concat(stringUniqueHash % 360, ", 95%, 35%)");
+            }
+            /**
+             * Updates the tab button based on the current user session.
+             */
+            function updateProfile() {
+                var _a;
+                return __awaiter(this, void 0, void 0, function () {
+                    var session, isLoggedIn, userName, initials, e_2;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _b.trys.push([0, 2, , 3]);
+                                return [4 /*yield*/, BModels.Session.Get({
+                                        sessionId: BModels.ENVIRONMENT.PARAMS.sessionId ? BModels.ENVIRONMENT.PARAMS.sessionId : "anonymous",
+                                    })];
+                            case 1:
+                                session = (_b.sent()).session;
+                                isLoggedIn = session.ID != "anonymous" && ((_a = session.User) === null || _a === void 0 ? void 0 : _a.ID) != "anonymous";
+                                userName = session.User.FullName ? session.User.FullName : session.User.ID;
+                                tabButton.setAttribute("title", isLoggedIn ? userName : "Not logged in");
+                                // Draw a circle with the user's initials.
+                                if (isLoggedIn) {
+                                    initials = getInitials(userName);
+                                    buttonBookmarksIcon.innerHTML = "\n                        <div \n                            style=\"\n                                background-color: ".concat(GetColorForString(userName), "; \n                                color: white;\n                                border-radius: 50%;\n                                display: flex; \n                                align-items: center; \n                                justify-content: center; \n                                font-size: 12px;\n                                font-family: Arial;\n                                height: 100%; \n                                width: 100%;\">\n                            ").concat(initials, "\n                        </div>\n                    ");
+                                }
+                                else {
+                                    buttonBookmarksIcon.innerHTML = LOGGED_OUT_ICON;
+                                }
+                                return [3 /*break*/, 3];
+                            case 2:
+                                e_2 = _b.sent();
+                                console.error(e_2);
+                                tabButton.setAttribute("title", "Not logged in");
+                                buttonBookmarksIcon.innerHTML = LOGGED_OUT_ICON;
+                                return [3 /*break*/, 3];
+                            case 3: return [2 /*return*/];
+                        }
+                    });
+                });
+            }
+            if (this.envSubRemoval) {
+                this.envSubRemoval();
+                this.envSubRemoval = null;
+            }
+            this.envSubRemoval = BModels.ENVIRONMENT.OnParamsChange.Subscribe(function () {
+                updateProfile();
+            });
+            updateProfile();
+        };
         /**
          * Updates the panel styles based on the current state.
          * Eg: if a tab is enabled, the button should be highlighted.
@@ -23247,8 +23348,14 @@
             var _this = this;
             var buttons = this._element.querySelectorAll(".NextspaceLeftPanelButton");
             buttons.forEach(function (button) {
-                var isEnabled = button.getAttribute("widget-left-panel-tab") === _this._enabledPanelTab;
+                var buttonTab = button.getAttribute("widget-left-panel-tab");
+                var isEnabled = buttonTab === _this._enabledPanelTab;
                 button.setAttribute("is-enabled", isEnabled ? "true" : "false");
+                // Disable for specific tabs.
+                // Eg: bookmarks require a viewId.
+                if (buttonTab === "bookmarks") {
+                    button.setAttribute("is-disabled", !_this._viewId ? "true" : "false");
+                }
             });
             // Make the tab content visible/invisible based on the current state.
             var contentDisplayState = this._enabledPanelTab ? "flex" : "none";
@@ -23275,6 +23382,10 @@
                         });
                         break;
                     default:
+                        if (this.customTabs.has(this._enabledPanelTab) === false) {
+                            console.error("Tab ".concat(this._enabledPanelTab, " not found."));
+                            return;
+                        }
                         tabContent = new (this.customTabs.get(this._enabledPanelTab)({
                             widget: this,
                             container: container
@@ -23311,6 +23422,9 @@
                 viewer: this._viewer,
                 viewId: this._viewId
             });
+            if (this._onBookmarkSelect) {
+                this._onBookmarkSelect.Trigger(bookmark);
+            }
         };
         return WidgetLeftPanel;
     }(exports.Widget.AWidget));
@@ -26236,7 +26350,7 @@
         ViewerUtils.AssertIonToken = AssertIonToken;
     })(exports.ViewerUtils || (exports.ViewerUtils = {}));
 
-    var VERSION = "4.2.8";
+    var VERSION = "4.3.0";
 
     exports.VERSION = VERSION;
     exports.CesiumParabola = CesiumParabola;