bruce-cesium 5.0.2 → 5.0.4

package/dist/bruce-cesium.es5.js

@@ -26274,12 +26274,17 @@ var ESecondaryCursor;
     ESecondaryCursor["MeasurePolyline"] = "measure-polyline";
     ESecondaryCursor["MeasurePolygon"] = "measure-polygon";
 })(ESecondaryCursor || (ESecondaryCursor = {}));
+const KEY_WALKTHROUGH_MODE = "WidgetCursorBar.Walkthrough.Mode";
+const KEY_WALKTHROUGH_SPEED_FLY = "WidgetCursorBar.Walkthrough.SpeedFly";
+const KEY_WALKTHROUGH_SPEED_WALK = "WidgetCursorBar.Walkthrough.SpeedWalk";
+const KEY_WALKTHROUGH_EXPANDED = "WidgetCursorBar.Walkthrough.Expanded";
 class WidgetCursorBar extends Widget.AWidget {
     constructor(params) {
         super(params);
         this.STYLESHEET_ID = "nextspace-cursorbar-stylesheet";
         this._selectedCursor = ECursor.Select;
         this._selectedSecondaryCursor = ESecondaryCursor.None;
+        this.OnCursorChange = new BruceEvent();
         this._generateStyles();
         this._generateElement();
         if (this._selectedCursor == ECursor.Select || this._selectedSecondaryCursor == ESecondaryCursor.Select) {
@@ -26291,6 +26296,7 @@ class WidgetCursorBar extends Widget.AWidget {
         super.Dispose();
         this._disposeMeasureTool();
         this._disposeCesiumEvent();
+        this._disposeWalkthroughBar();
         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");
         }
@@ -26465,6 +26471,165 @@ class WidgetCursorBar extends Widget.AWidget {
                 -webkit-transform: scale(1.2);
                 transform: scale(1.2);
             }
+
+            .NextspaceWalkthroughBar {
+                position: absolute;
+                z-index: 1;
+                bottom: 10px;
+                left: calc(45px + var(${VIEWER_LEFT_PANEL_CSS_VAR_LEFT}));
+                width: min(1100px, calc(100vw - 205px));
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                pointer-events: auto;
+                font-size: 12px;
+                font-family: Arial;
+                transition: 0.3s ease;
+            }
+
+            .NextspaceWalkthroughBar * {
+                box-sizing: border-box;
+            }
+
+            .NextspaceWalkthroughBar[expanded="false"] {
+                width: 395px;
+            }
+
+            .NextspaceWalkthroughBar[expanded="false"] .NextspaceWalkthroughBarInputs {
+                flex-direction: row;
+                margin-right: 0;
+            }
+
+            .NextspaceWalkthroughBar[expanded="false"] .NextspaceWalkthroughBarRow {
+                margin-right: 25px;
+                margin-bottom: 0;
+            }
+
+            .NextspaceWalkthroughBar[expanded="false"] .NextspaceWalkthroughBarRowTip,
+            .NextspaceWalkthroughBar[expanded="false"] .NextspaceWalkthroughBarTips  {
+                display: none;
+            }
+
+            .NextspaceWalkthroughBarContent {
+                background-color: white;
+                border-radius: 8px;
+                display: flex;
+                flex-direction: row;
+                padding: 14px 18px;
+            }
+
+            .NextspaceWalkthroughBarTitle {
+                opacity: 0.7;
+                color: white;
+                font-size: 12px;
+                font-family: Arial;
+                font-style: normal;
+                letter-spacing: 0.15em;
+                margin-bottom: 15px;
+                position: absolute;
+                top: -15px;
+                left: 5px;
+            }
+
+            .NextspaceWalkthroughBarInputs {
+                display: flex;
+                flex-direction: column;
+                margin-right: 40px;
+            }
+
+            .NextspaceWalkthroughBarRowTip {
+                color: #000;
+                font-family: Arial;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 300;
+                letter-spacing: .01em;
+                background: #efefefbf;
+                padding: 8px;
+                gap: 6px;
+                border-radius: 5px;
+            }
+
+            .NextspaceWalkthroughBarRow {
+                align-items: center;
+                display: flex;
+                margin-bottom: 5px;
+            }
+
+            .NextspaceWalkthroughBarInputs .NextspaceWalkthroughBarRow {
+                margin-right: 20px;
+            }
+
+            .NextspaceWalkthroughBarRowLabel {
+                margin-right: 8px;
+                flex-shrink: 0;
+            }
+
+            .NextspaceWalkthroughBarRowValue {
+                flex-grow: 1;
+                max-width: 120px;
+            }
+
+            .NextspaceWalkthroughBarRowValue input {
+                width: 100%;
+                padding: 4px;
+                border: 1px solid #ccc;
+                border-radius: 4px;
+            }
+
+            .NextspaceWalkthroughBarIcon {
+                margin-right: 20px;
+                flex-shrink: 0;
+            }
+
+            .NextspaceWalkthroughButtonClose {
+                position: absolute;
+                top: 6px;
+                right: 8px;
+                z-index: 1;
+                font-size: 25px;
+                color: black;
+                cursor: pointer;
+                transition: 0.3s ease;
+            }
+
+            .NextspaceWalkthroughButtonExpand {
+                position: absolute;
+                top: 6px;
+                right: 40px;
+                z-index: 1;
+                font-size: 25px;
+                color: black;
+                cursor: pointer;
+                transition: 0.3s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 24px;
+                width: 24px;
+            }
+
+            .NextspaceWalkthroughButtonClose:hover,
+            .NextspaceWalkthroughButtonExpand:hover {
+                transform: scale(1.2);
+            }
+
+            .NextspaceWalkthroughBarTips {
+                flex-grow: 1;
+                flex-shrink: 1;
+                display: flex;
+                color: black;
+                font-size: 12px;
+                font-family: Arial;
+            }
+
+            .NextspaceWalkthroughBarTips >* {
+                margin-right: 24px;
+            }
+
+            .NextspaceWalkthroughBarTips >*:last-child {
+                margin-right: 0;
+            }
         `;
         document.head.appendChild(style);
     }
@@ -26512,11 +26677,13 @@ class WidgetCursorBar extends Widget.AWidget {
             var _a;
             this._disposeMeasureTool();
             this._disposeCesiumEvent();
+            this._disposeWalkthroughBar();
             if (((_a = this._viewer) === null || _a === void 0 ? void 0 : _a.scene) && !this._viewer.isDestroyed()) {
                 Walkthrough.Stop({
                     viewer: this._viewer
                 });
             }
+            this._disposeWalkthroughBar();
             onClick();
             this._updateControls();
         });
@@ -26550,6 +26717,7 @@ class WidgetCursorBar extends Widget.AWidget {
             this._selectedCursor = ECursor.Select;
             this._secondary.style.display = "none";
             this._listenSelection();
+            this.OnCursorChange.Trigger(this._selectedCursor);
         }, svg);
     }
     _generatePan() {
@@ -26564,6 +26732,7 @@ class WidgetCursorBar extends Widget.AWidget {
             if (this._selectedCursor == ECursor.Select) {
                 this._listenSelection();
             }
+            this.OnCursorChange.Trigger(this._selectedCursor);
         }, svg);
     }
     _generateMeasure() {
@@ -26585,6 +26754,7 @@ class WidgetCursorBar extends Widget.AWidget {
             if (this._selectedCursor == ECursor.Select) {
                 this._listenSelection();
             }
+            this.OnCursorChange.Trigger(this._selectedCursor);
         }, svg);
     }
     _generateMeasureSecondary() {
@@ -26660,7 +26830,30 @@ class WidgetCursorBar extends Widget.AWidget {
                     Walkthrough.Start({
                         viewer: this._viewer
                     });
+                    let moveType = localStorage.getItem(KEY_WALKTHROUGH_MODE);
+                    if (!moveType) {
+                        moveType = Walkthrough.EMoveType.Walk;
+                    }
+                    Walkthrough.SetMoveType({
+                        type: moveType,
+                        viewer: this._viewer
+                    });
+                    let speed = localStorage.getItem(KEY_WALKTHROUGH_SPEED_FLY);
+                    if (speed != null && !isNaN(+speed)) {
+                        Walkthrough.SetFlyMoveRate({
+                            rate: +speed,
+                            viewer: this._viewer
+                        });
+                    }
+                    speed = localStorage.getItem(KEY_WALKTHROUGH_SPEED_WALK);
+                    if (speed != null && !isNaN(+speed)) {
+                        Walkthrough.SetWalkMoveRate({
+                            rate: +speed,
+                            viewer: this._viewer
+                        });
+                    }
                 }
+                this._generateWalkthroughBar();
             }
             else {
                 this._secondary.style.display = "none";
@@ -26668,6 +26861,7 @@ class WidgetCursorBar extends Widget.AWidget {
             if (this._selectedCursor == ECursor.Select || this._selectedSecondaryCursor == ESecondaryCursor.Select) {
                 this._listenSelection();
             }
+            this.OnCursorChange.Trigger(this._selectedCursor);
         }, svg);
     }
     _generateWalkthroughSecondary() {
@@ -26698,6 +26892,257 @@ class WidgetCursorBar extends Widget.AWidget {
             this._updateSecondary();
         }, panSvg);
     }
+    /**
+     * Generates the Walkthrough controls bar at the bottom of the screen.
+     * This bar will be collapsable to show minimal information.
+     * A TODO is to break this class into pieces similar the ViewBar.
+     */
+    _generateWalkthroughBar() {
+        this._disposeWalkthroughBar();
+        const element = document.createElement("div");
+        element.className = "NextspaceWalkthroughBar";
+        this.Container.appendChild(element);
+        const content = document.createElement("div");
+        content.className = "NextspaceWalkthroughBarContent";
+        element.appendChild(content);
+        const inputs = document.createElement("div");
+        inputs.className = "NextspaceWalkthroughBarInputs";
+        inputs.style.marginRight = "40px";
+        const title = document.createElement("div");
+        title.className = "NextspaceWalkthroughBarTitle";
+        title.innerText = "Walkthrough";
+        inputs.appendChild(title);
+        // Expanded by default to show how to use Walkthrough.
+        let expanded = localStorage.getItem(KEY_WALKTHROUGH_EXPANDED) != "false";
+        // Close button.
+        {
+            const svg = `
+                <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="black"/>
+                </svg>
+            `;
+            const close = document.createElement("div");
+            close.className = "NextspaceWalkthroughButtonClose";
+            close.innerHTML = svg;
+            close.onclick = () => {
+                var _a;
+                // Toggles off the Walkthrough mode (enables first primary cursor).
+                // TODO: We need a more elegant way to handle this.
+                this._secondary.style.display = "none";
+                this._selectedCursor = ECursor.Select;
+                this._selectedSecondaryCursor = ESecondaryCursor.None;
+                this._updateControls();
+                this._updateSecondary();
+                this._disposeWalkthroughBar();
+                this._listenSelection();
+                if (((_a = this._viewer) === null || _a === void 0 ? void 0 : _a.scene) && !this._viewer.isDestroyed()) {
+                    Walkthrough.Stop({
+                        viewer: this._viewer
+                    });
+                }
+                this.OnCursorChange.Trigger(this._selectedCursor);
+            };
+            content.appendChild(close);
+        }
+        // Toggle expand button.
+        {
+            const svgExpand = `
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M6 14C5.45 14 5 14.45 5 15V18C5 18.55 5.45 19 6 19H9C9.55 19 10 18.55 10 18C10 17.45 9.55 17 9 17H7V15C7 14.45 6.55 14 6 14ZM6 10C6.55 10 7 9.55 7 9V7H9C9.55 7 10 6.55 10 6C10 5.45 9.55 5 9 5H6C5.45 5 5 5.45 5 6V9C5 9.55 5.45 10 6 10ZM17 17H15C14.45 17 14 17.45 14 18C14 18.55 14.45 19 15 19H18C18.55 19 19 18.55 19 18V15C19 14.45 18.55 14 18 14C17.45 14 17 14.45 17 15V17ZM14 6C14 6.55 14.45 7 15 7H17V9C17 9.55 17.45 10 18 10C18.55 10 19 9.55 19 9V6C19 5.45 18.55 5 18 5H15C14.45 5 14 5.45 14 6Z" fill="black"/>
+                </svg>
+            `;
+            const svgMinimize = `
+                <svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M15 1L1 0.999999" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            `;
+            const expand = document.createElement("div");
+            expand.className = "NextspaceWalkthroughButtonExpand";
+            expand.innerHTML = expanded ? svgMinimize : svgExpand;
+            expand.onclick = () => {
+                expanded = !expanded;
+                expand.innerHTML = expanded ? svgMinimize : svgExpand;
+                element.setAttribute("expanded", expanded ? "true" : "false");
+                localStorage.setItem(KEY_WALKTHROUGH_EXPANDED, expanded ? "true" : "false");
+            };
+            content.appendChild(expand);
+            element.setAttribute("expanded", expanded ? "true" : "false");
+        }
+        content.appendChild(inputs);
+        const tips = document.createElement("div");
+        tips.className = "NextspaceWalkthroughBarTips";
+        {
+            const wasd = document.createElement("div");
+            wasd.setAttribute("style", `
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-end;
+            `);
+            const wasdSvg = `
+                <svg width="132" height="87" viewBox="0 0 188 124" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="128" y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="64" y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><path d="M88.2841 39L83.5114 21.5455H85.6591L89.3068 35.7614H89.4773L93.1932 21.5455H95.5795L99.2955 35.7614H99.4659L103.114 21.5455H105.261L100.489 39H98.3068L94.4545 25.0909H94.3182L90.4659 39H88.2841Z" fill="#525252"></path><path d="M24.8295 103H22.6136L29.0227 85.5455H31.2045L37.6136 103H35.3977L30.1818 88.3068H30.0455L24.8295 103ZM25.6477 96.1818H34.5795V98.0568H25.6477V96.1818Z" fill="#525252"></path><path d="M97.6591 89.9091C97.5568 89.0455 97.142 88.375 96.4148 87.8977C95.6875 87.4205 94.7955 87.1818 93.7386 87.1818C92.9659 87.1818 92.2898 87.3068 91.7102 87.5568C91.1364 87.8068 90.6875 88.1506 90.3636 88.5881C90.0455 89.0256 89.8864 89.5227 89.8864 90.0795C89.8864 90.5455 89.9972 90.946 90.2188 91.2812C90.446 91.6108 90.7358 91.8864 91.0881 92.108C91.4403 92.3239 91.8097 92.5028 92.196 92.6449C92.5824 92.7812 92.9375 92.892 93.2614 92.9773L95.0341 93.4545C95.4886 93.5739 95.9943 93.7386 96.5511 93.9489C97.1136 94.1591 97.6506 94.446 98.1619 94.8097C98.679 95.1676 99.1051 95.6278 99.4403 96.1903C99.7756 96.7528 99.9432 97.4432 99.9432 98.2614C99.9432 99.2045 99.696 100.057 99.2017 100.818C98.7131 101.58 97.9972 102.185 97.054 102.634C96.1165 103.082 94.9773 103.307 93.6364 103.307C92.3864 103.307 91.304 103.105 90.3892 102.702C89.4801 102.298 88.7642 101.736 88.2415 101.014C87.7244 100.293 87.4318 99.4545 87.3636 98.5H89.5455C89.6023 99.1591 89.8239 99.7045 90.2102 100.136C90.6023 100.562 91.0966 100.881 91.6932 101.091C92.2955 101.295 92.9432 101.398 93.6364 101.398C94.4432 101.398 95.1676 101.267 95.8097 101.006C96.4517 100.739 96.9602 100.369 97.3352 99.8977C97.7102 99.4205 97.8977 98.8636 97.8977 98.2273C97.8977 97.6477 97.7358 97.1761 97.4119 96.8125C97.0881 96.4489 96.6619 96.1534 96.1335 95.9261C95.6051 95.6989 95.0341 95.5 94.4205 95.3295L92.2727 94.7159C90.9091 94.3239 89.8295 93.7642 89.0341 93.0369C88.2386 92.3097 87.8409 91.358 87.8409 90.1818C87.8409 89.2045 88.1051 88.3523 88.6335 87.625C89.1676 86.892 89.8835 86.3239 90.7812 85.9205C91.6847 85.5114 92.6932 85.3068 93.8068 85.3068C94.9318 85.3068 95.9318 85.5085 96.8068 85.9119C97.6818 86.3097 98.375 86.8551 98.8864 87.5483C99.4034 88.2415 99.6761 89.0284 99.7045 89.9091H97.6591Z" fill="#525252"></path><path d="M157.5 103H152.114V85.5455H157.739C159.432 85.5455 160.881 85.8949 162.085 86.5938C163.29 87.2869 164.213 88.2841 164.855 89.5852C165.497 90.8807 165.818 92.4318 165.818 94.2386C165.818 96.0568 165.494 97.6222 164.847 98.9347C164.199 100.241 163.256 101.247 162.017 101.952C160.778 102.651 159.273 103 157.5 103ZM154.227 101.125H157.364C158.807 101.125 160.003 100.847 160.952 100.29C161.901 99.733 162.608 98.9403 163.074 97.9119C163.54 96.8835 163.773 95.6591 163.773 94.2386C163.773 92.8295 163.543 91.6165 163.082 90.5994C162.622 89.5767 161.935 88.7926 161.02 88.2472C160.105 87.696 158.966 87.4205 157.602 87.4205H154.227V101.125Z" fill="#525252"></path></svg>
+            `;
+            wasd.innerHTML = wasdSvg;
+            wasd.innerHTML += `
+                <div style="margin-top: 5px;">
+                    Click W,A,S,D on your keyboard to move your camera.
+                </div>
+            `;
+            tips.appendChild(wasd);
+            const arrows = document.createElement("div");
+            arrows.setAttribute("style", `
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-end;
+            `);
+            const arrowsSvg = `
+                <svg width="132" height="87" viewBox="0 0 188 124" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="128" y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="64" y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><path d="M95.2503 38.75V24.7875L101.35 30.8875C101.838 31.375 102.638 31.375 103.125 30.8875C103.613 30.4 103.613 29.6125 103.125 29.125L94.8878 20.8875C94.4003 20.4 93.6128 20.4 93.1253 20.8875L84.8753 29.1125C84.3878 29.6 84.3878 30.3875 84.8753 30.875C85.3628 31.3625 86.1503 31.3625 86.6378 30.875L92.7503 24.7875V38.75C92.7503 39.4375 93.3128 40 94.0003 40C94.6878 40 95.2503 39.4375 95.2503 38.75Z" fill="#525252"></path><path d="M38.75 92.7497H24.7875L30.8875 86.6497C31.375 86.1622 31.375 85.3622 30.8875 84.8747C30.4 84.3872 29.6125 84.3872 29.125 84.8747L20.8875 93.1122C20.4 93.5997 20.4 94.3872 20.8875 94.8747L29.1125 103.125C29.6 103.612 30.3875 103.612 30.875 103.125C31.3625 102.637 31.3625 101.85 30.875 101.362L24.7875 95.2497H38.75C39.4375 95.2497 40 94.6872 40 93.9997C40 93.3122 39.4375 92.7497 38.75 92.7497Z" fill="#525252"></path><path d="M150.25 95.2503H164.213L158.113 101.35C157.625 101.838 157.625 102.638 158.113 103.125C158.6 103.613 159.388 103.613 159.875 103.125L168.113 94.8878C168.6 94.4003 168.6 93.6128 168.113 93.1253L159.888 84.8753C159.4 84.3878 158.613 84.3878 158.125 84.8753C157.638 85.3628 157.638 86.1503 158.125 86.6378L164.213 92.7503H150.25C149.563 92.7503 149 93.3128 149 94.0003C149 94.6878 149.563 95.2503 150.25 95.2503Z" fill="#525252"></path><path d="M92.7497 85.25V99.2125L86.6497 93.1125C86.1622 92.625 85.3622 92.625 84.8747 93.1125C84.3872 93.6 84.3872 94.3875 84.8747 94.875L93.1122 103.113C93.5997 103.6 94.3872 103.6 94.8747 103.113L103.125 94.8875C103.612 94.4 103.612 93.6125 103.125 93.125C102.637 92.6375 101.85 92.6375 101.362 93.125L95.2497 99.2125V85.25C95.2497 84.5625 94.6872 84 93.9997 84C93.3122 84 92.7497 84.5625 92.7497 85.25Z" fill="#525252"></path></svg>
+            `;
+            arrows.innerHTML = arrowsSvg;
+            arrows.innerHTML += `
+                <div style="margin-top: 5px;">
+                    Click the arrow keys to pan.
+                </div>
+            `;
+            tips.appendChild(arrows);
+            const upDown = document.createElement("div");
+            upDown.setAttribute("style", `
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-end;
+            `);
+            const upDownSvg = `
+                <svg width="87" height="42" viewBox="0 0 124 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect width="60" height="60" rx="6" fill="#ebebeb"></rect><path d="M29.4545 33.5455H31.7727L33.7159 36.1023L34.2273 36.7841L37.125 40.6364H34.8068L32.8977 38.0795L32.4205 37.4318L29.4545 33.5455ZM37.8409 30.2727C37.8409 32.1136 37.5085 33.7045 36.8438 35.0455C36.179 36.3864 35.267 37.4205 34.108 38.1477C32.9489 38.875 31.625 39.2386 30.1364 39.2386C28.6477 39.2386 27.3239 38.875 26.1648 38.1477C25.0057 37.4205 24.0938 36.3864 23.429 35.0455C22.7642 33.7045 22.4318 32.1136 22.4318 30.2727C22.4318 28.4318 22.7642 26.8409 23.429 25.5C24.0938 24.1591 25.0057 23.125 26.1648 22.3977C27.3239 21.6705 28.6477 21.3068 30.1364 21.3068C31.625 21.3068 32.9489 21.6705 34.108 22.3977C35.267 23.125 36.179 24.1591 36.8438 25.5C37.5085 26.8409 37.8409 28.4318 37.8409 30.2727ZM35.7955 30.2727C35.7955 28.7614 35.5426 27.4858 35.0369 26.446C34.5369 25.4062 33.858 24.6193 33 24.0852C32.1477 23.5511 31.1932 23.2841 30.1364 23.2841C29.0795 23.2841 28.1222 23.5511 27.2642 24.0852C26.4119 24.6193 25.733 25.4062 25.2273 26.446C24.7273 27.4858 24.4773 28.7614 24.4773 30.2727C24.4773 31.7841 24.7273 33.0597 25.2273 34.0994C25.733 35.1392 26.4119 35.9261 27.2642 36.4602C28.1222 36.9943 29.0795 37.2614 30.1364 37.2614C31.1932 37.2614 32.1477 36.9943 33 36.4602C33.858 35.9261 34.5369 35.1392 35.0369 34.0994C35.5426 33.0597 35.7955 31.7841 35.7955 30.2727Z" fill="#525252"></path><path d="M88.1136 39V21.5455H98.6477V23.4205H90.2273V29.3182H98.1023V31.1932H90.2273V37.125H98.7841V39H88.1136Z" fill="#525252"></path></svg>
+            `;
+            upDown.innerHTML = upDownSvg;
+            upDown.innerHTML += `
+                <div style="margin-top: 5px;">
+                    Click Q and E to move up and down.
+                </div>
+            `;
+            tips.appendChild(upDown);
+        }
+        content.appendChild(tips);
+        // Reference to our speed slider so we can adjust it when the move type changes.
+        let moveRateInput = null;
+        // Fly toggle row.
+        {
+            const row = document.createElement("div");
+            row.className = "NextspaceWalkthroughBarRow";
+            inputs.appendChild(row);
+            const label = document.createElement("div");
+            label.className = "NextspaceWalkthroughBarRowLabel";
+            label.innerText = "Fly";
+            row.appendChild(label);
+            const toggle = document.createElement("input");
+            toggle.className = "NextspaceWalkthroughBarRowToggle";
+            toggle.type = "checkbox";
+            row.appendChild(toggle);
+            toggle.checked = Walkthrough.GetMoveType({
+                viewer: this._viewer
+            }) == Walkthrough.EMoveType.Fly;
+            toggle.addEventListener("change", () => {
+                const newType = toggle.checked ? Walkthrough.EMoveType.Fly : Walkthrough.EMoveType.Walk;
+                Walkthrough.SetMoveType({
+                    viewer: this._viewer,
+                    type: newType
+                });
+                // Update the speed slider to match the new move type.
+                if (moveRateInput) {
+                    if (newType == Walkthrough.EMoveType.Fly) {
+                        const rate = Walkthrough.GetFlyMoveRate({
+                            viewer: this._viewer
+                        });
+                        moveRateInput.value = (rate * 50).toFixed(2);
+                    }
+                    else {
+                        const rate = Walkthrough.GetWalkMoveRate({
+                            viewer: this._viewer
+                        });
+                        moveRateInput.value = (rate * 500).toFixed(2);
+                    }
+                }
+                localStorage.setItem(KEY_WALKTHROUGH_MODE, newType);
+            });
+            // Tip for the row.
+            // Will be hidden while collapsed through css.
+            {
+                const tip = document.createElement("div");
+                tip.style.marginBottom = "10px";
+                tip.className = "NextspaceWalkthroughBarRowTip";
+                tip.innerText = "Flying means the camera will not maintain its height.";
+                inputs.appendChild(tip);
+            }
+        }
+        // Speed slider row.
+        {
+            const row = document.createElement("div");
+            row.className = "NextspaceWalkthroughBarRow";
+            inputs.appendChild(row);
+            const label = document.createElement("div");
+            label.className = "NextspaceWalkthroughBarRowLabel";
+            label.innerText = "Speed";
+            row.appendChild(label);
+            const slider = document.createElement("input");
+            moveRateInput = slider;
+            slider.className = "NextspaceWalkthroughBarRowSlider";
+            slider.type = "range";
+            slider.min = "0.01";
+            slider.max = "100";
+            slider.step = "0.01";
+            slider.value = "50";
+            slider.addEventListener("input", () => {
+                // Walk is between 0.01 and 0.5
+                // Fly is between 0.01 and 10
+                // We want to convert this slider's range into the respective values and apply based on active move type.
+                const type = Walkthrough.GetMoveType({
+                    viewer: this._viewer
+                });
+                if (type == Walkthrough.EMoveType.Fly) {
+                    const value = parseFloat(slider.value);
+                    const speed = value / 50;
+                    Walkthrough.SetFlyMoveRate({
+                        viewer: this._viewer,
+                        rate: speed
+                    });
+                    localStorage.setItem(KEY_WALKTHROUGH_SPEED_FLY, speed.toString());
+                }
+                else {
+                    const value = parseFloat(slider.value);
+                    const speed = value / 500;
+                    Walkthrough.SetWalkMoveRate({
+                        viewer: this._viewer,
+                        rate: speed
+                    });
+                    localStorage.setItem(KEY_WALKTHROUGH_SPEED_WALK, speed.toString());
+                }
+            });
+            // Set the initial value based on the move type.
+            const type = Walkthrough.GetMoveType({
+                viewer: this._viewer
+            });
+            if (type == Walkthrough.EMoveType.Fly) {
+                const rate = Walkthrough.GetFlyMoveRate({
+                    viewer: this._viewer
+                });
+                slider.value = (rate * 50).toFixed(2);
+            }
+            else {
+                const rate = Walkthrough.GetWalkMoveRate({
+                    viewer: this._viewer
+                });
+                slider.value = (rate * 500).toFixed(2);
+            }
+            row.appendChild(slider);
+        }
+        this._walkthroughBar = element;
+    }
+    _disposeWalkthroughBar() {
+        var _a;
+        if ((_a = this._walkthroughBar) === null || _a === void 0 ? void 0 : _a.parentElement) {
+            this._walkthroughBar.parentElement.removeChild(this._walkthroughBar);
+            this._walkthroughBar = null;
+        }
+    }
     _updateControls() {
         const controls = this._primaryContent.querySelectorAll(".NextspaceCursorBarPrimControlInner");
         controls.forEach((control) => {
@@ -28765,7 +29210,7 @@ class WidgetViewBar extends Widget.AWidget {
     }
 }
 
-const VERSION = "5.0.2";
+const VERSION = "5.0.4";
 
 export { VERSION, CesiumViewMonitor, ViewerUtils, ViewerEventTracker, MenuItemManager, EntityRenderEngine, EntityRenderEnginePoint, EntityRenderEnginePolyline, EntityRenderEnginePolygon, EntityRenderEngineModel3d, MenuItemCreator, VisualsRegister, RenderManager, EntitiesIdsRenderManager, DataLabRenderManager, EntitiesLoadedRenderManager, EntitiesRenderManager, EntityRenderManager, TilesetCadRenderManager, TilesetArbRenderManager, TilesetEntitiesRenderManager, TilesetOsmRenderManager, TilesetPointcloudRenderManager, TilesetGooglePhotosRenderManager, DataSourceStaticKmlManager, GoogleSearchRenderManager, RelationsRenderManager, SharedGetters, CesiumParabola, EntityLabel, ViewRenderEngine, TileRenderEngine, TilesetRenderEngine, CESIUM_INSPECTOR_KEY, CESIUM_TIMELINE_KEY, ViewUtils, DrawingUtils, MeasureUtils, EntityUtils, CesiumEntityStyler, CesiumAnimatedProperty, CesiumAnimatedInOut, Draw3dPolygon, Draw3dPolyline, MeasureCreator, Walkthrough, Widget, VIEWER_BOOKMARKS_WIDGET_KEY, WidgetBookmarks, WidgetBranding, WidgetCursorBar, WidgetEmbeddedInfoView, WidgetInfoView, WidgetNavCompass$$1 as WidgetNavCompass, VIEWER_VIEW_BAR_WIDGET_KEY, WidgetViewBar, WidgetControlViewBar, WidgetControlViewBarSearch, VIEWER_LEFT_PANEL_WIDGET_KEY, VIEWER_LEFT_PANEL_CSS_VAR_LEFT, WidgetLeftPanel, WidgetLeftPanelTab, WidgetLeftPanelTabBookmarks };
 //# sourceMappingURL=bruce-cesium.es5.js.map