bruce-cesium 4.2.9 → 4.3.1

package/dist/bruce-cesium.umd.js

@@ -23167,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;
@@ -23179,7 +23183,7 @@
             }
             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-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 >.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\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        ";
+            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 () {
@@ -23196,7 +23200,7 @@
             var bottomBreaker = document.createElement("div");
             bottomBreaker.className = "NextspaceLeftPanelBottomBreaker";
             this._element.appendChild(bottomBreaker);
-            this._addPlaceholderTab("Profile", "\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        ");
+            this._addUserProfileTab();
             var panelContent = document.createElement("div");
             panelContent.className = "NextspaceLeftPanelTabContent";
             var panelContentCloseButton = document.createElement("div");
@@ -23218,9 +23222,12 @@
          */
         WidgetLeftPanel.prototype.AddPanelTab = function (params) {
             this.customTabs.set(params.tab, params.content);
-            this._addPanelTab(params.tab, params.title, params.svgStr);
+            // We insert before the bottom breaker.
+            var bottomBreaker = this._element.querySelector(".NextspaceLeftPanelBottomBreaker");
+            var afterElement = bottomBreaker ? bottomBreaker.previousElementSibling : null;
+            this._addPanelTab(params.tab, params.title, params.svgStr, afterElement);
         };
-        WidgetLeftPanel.prototype._addPanelTab = function (tab, title, svgStr) {
+        WidgetLeftPanel.prototype._addPanelTab = function (tab, title, svgStr, afterElement) {
             var _this = this;
             var tabButton = document.createElement("div");
             tabButton.setAttribute("widget-left-panel-tab", tab);
@@ -23245,7 +23252,17 @@
                 _this._updatePanelContent();
                 _this._updatePanelStyles();
             };
-            this._element.appendChild(tabButton);
+            if (afterElement && afterElement.parentElement) {
+                if (afterElement.nextSibling) {
+                    afterElement.parentElement.insertBefore(tabButton, afterElement.nextSibling);
+                }
+                else {
+                    afterElement.parentElement.appendChild(tabButton);
+                }
+            }
+            else {
+                this._element.appendChild(tabButton);
+            }
         };
         WidgetLeftPanel.prototype._addPlaceholderTab = function (title, svgStr) {
             var tabButton = document.createElement("div");
@@ -23259,6 +23276,83 @@
             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.
@@ -23267,8 +23361,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";
@@ -23295,10 +23395,15 @@
                         });
                         break;
                     default:
-                        tabContent = new (this.customTabs.get(this._enabledPanelTab)({
+                        if (this.customTabs.has(this._enabledPanelTab) === false) {
+                            console.error("Tab ".concat(this._enabledPanelTab, " not found."));
+                            return;
+                        }
+                        var clazz = this.customTabs.get(this._enabledPanelTab);
+                        tabContent = new clazz({
                             widget: this,
                             container: container
-                        }));
+                        });
                         break;
                 }
                 this._enabledTabContent = tabContent;
@@ -26259,7 +26364,7 @@
         ViewerUtils.AssertIonToken = AssertIonToken;
     })(exports.ViewerUtils || (exports.ViewerUtils = {}));
 
-    var VERSION = "4.2.9";
+    var VERSION = "4.3.1";
 
     exports.VERSION = VERSION;
     exports.CesiumParabola = CesiumParabola;