bruce-cesium 5.7.9 → 5.8.1

package/dist/lib/widgets/widget-cursorbar.js

@@ -0,0 +1,1179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetCursorBar = void 0;
+const widget_1 = require("./widget");
+const measure_creator_1 = require("./common/measure-creator");
+const Cesium = require("cesium");
+const bruce_models_1 = require("bruce-models");
+const widget_left_panel_1 = require("./widget-left-panel");
+const walkthrough_1 = require("./common/walkthrough");
+const drawing_utils_1 = require("../utils/drawing-utils");
+var ECursor;
+(function (ECursor) {
+    ECursor["Select"] = "select";
+    ECursor["Pan"] = "pan";
+    ECursor["Measure"] = "measure";
+    ECursor["Walkthrough"] = "walkthrough";
+})(ECursor || (ECursor = {}));
+var ESecondaryCursor;
+(function (ESecondaryCursor) {
+    ESecondaryCursor["None"] = "none";
+    ESecondaryCursor["Select"] = "select";
+    ESecondaryCursor["Pan"] = "pan";
+    ESecondaryCursor["MeasurePoint"] = "measure-point";
+    ESecondaryCursor["MeasurePolyline"] = "measure-polyline";
+    ESecondaryCursor["MeasurePolygon"] = "measure-polygon";
+    ESecondaryCursor["WalkthroughPin"] = "walkthrough-pin";
+})(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";
+const VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM = "--viewer-walkthrough-panel-bottom";
+class WidgetCursorBar extends widget_1.Widget.AWidget {
+    constructor(params) {
+        super(params);
+        this.STYLESHEET_ID = "nextspace-cursorbar-stylesheet";
+        this._selectedCursor = ECursor.Select;
+        this._selectedSecondaryCursor = ESecondaryCursor.None;
+        this.OnCursorChange = new bruce_models_1.BruceEvent();
+        this._generateStyles();
+        this._generateElement();
+        if (this._selectedCursor == ECursor.Select || this._selectedSecondaryCursor == ESecondaryCursor.Select) {
+            this._listenSelection();
+        }
+        document.documentElement.style.setProperty(VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM, "0px");
+    }
+    Dispose() {
+        var _a, _b, _c;
+        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");
+        }
+        if (((_c = this._viewer) === null || _c === void 0 ? void 0 : _c.scene) && !this._viewer.isDestroyed()) {
+            walkthrough_1.Walkthrough.Stop({
+                viewer: this._viewer
+            });
+        }
+    }
+    _generateStyles() {
+        if (document.getElementById(this.STYLESHEET_ID)) {
+            return;
+        }
+        // If any CSS vars are unset we will set them here to 0.
+        // Having them unset breaks calc functions.
+        const root = document.documentElement;
+        if (!root.style.getPropertyValue(widget_left_panel_1.VIEWER_LEFT_PANEL_CSS_VAR_LEFT)) {
+            root.style.setProperty(widget_left_panel_1.VIEWER_LEFT_PANEL_CSS_VAR_LEFT, "0px");
+        }
+        const style = document.createElement("style");
+        style.id = this.STYLESHEET_ID;
+        style.innerHTML = `
+            .NextspaceCursorBar {
+                position: absolute;
+                z-index: 1;
+                top: 10px;
+                left: calc(10px + var(${widget_left_panel_1.VIEWER_LEFT_PANEL_CSS_VAR_LEFT}));
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+                pointer-events: none;
+                color: black;
+            }
+
+            .NextspaceCursorBar * {
+                box-sizing: border-box;
+            }
+
+            .NextspaceCursorBarPrim {
+                pointer-events: auto;
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                user-select: none;
+            }
+
+            .NextspaceCursorBarPrimContent {
+                align-items: center;
+                background-color: #21272a;
+                border-radius: 9px;
+                display: flex;
+                pointer-events: auto;
+                width: -webkit-max-content;
+                width: max-content;
+                margin-bottom: 8px;
+            }
+
+            .NextspaceCursorBarPrimControl {
+                width: 48px;
+            }
+
+            .NextspaceCursorBarPrimControlInner {
+                align-items: center;
+                border-radius: 0;
+                display: flex;
+                height: 100%;
+                height: -webkit-max-content;
+                height: max-content;
+                justify-content: center;
+                padding: 8px;
+                padding-left: 8px;
+            }
+
+            .NextspaceCursorBarPrimControl:first-of-type .NextspaceCursorBarPrimControlInner {
+                border-radius: 9px 0 0 9px;
+                padding-left: 8px;
+            }
+
+            .NextspaceCursorBarPrimControl:last-of-type .NextspaceCursorBarPrimControlInner {
+                border-radius: 0 9px 9px 0;
+                padding-right: 8px;
+            }
+
+            .NextspaceCursorBarPrimControl:first-of-type:last-of-type .NextspaceCursorBarPrimControlInner {
+                border-radius: 9px;
+            }
+
+            .NextspaceCursorBarPrimControlInnerIcon {
+                align-items: center;
+                border-radius: 6px;
+                color: #fff;
+                cursor: pointer;
+                display: flex;
+                font-size: 18px;
+                height: 32px;
+                justify-content: center;
+                transition: .3s ease;
+                width: 32px;
+            }
+
+            .NextspaceCursorBarPrimControlInnerIcon:hover {
+                transform: scale(1.2);
+            }
+
+            .NextspaceCursorBarPrimControlInner[is-selected="true"] {
+                background: #33b1ff;
+            }
+
+            .NextspaceCursorBarSec {
+                pointer-events: auto;
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                user-select: none;
+            }
+
+            .NextspaceCursorBarSecContent {
+                align-items: center;
+                -webkit-backdrop-filter: blur(20px);
+                backdrop-filter: blur(20px);
+                background: rgba(33,39,42,.8);
+                border-radius: 9px;
+                box-shadow: 0 0 1px rgba(18,22,25,.36),0 18px 36px -4px rgba(18,22,25,.36);
+                display: flex;
+                pointer-events: auto;
+                width: -webkit-max-content;
+                width: max-content;
+            }
+            
+            .NextspaceCursorBarSecControl {
+                align-items: center;
+                border-radius: 0;
+                display: flex;
+                height: 100%;
+                height: -webkit-max-content;
+                height: max-content;
+                justify-content: center;
+                padding: 8px;
+                padding-left: 8px;
+                border: 2px solid transparent;
+                flex-shrink: 0;
+                margin: 6px 0 6px 6px;
+                margin-right: 0px;
+            }
+
+            .NextspaceCursorBarSecControl[is-selected="true"] {
+                background-color: transparent;
+                border: 2px solid #33b1ff;
+                border-radius: 6px;
+            }
+
+            .NextspaceCursorBarSecControl:last-of-type {
+                margin-right: 6px;
+            }
+
+            .NextspaceCursorBarSecControl:first-of-type {
+                padding-left: 8px;
+            }
+            
+            .NextspaceCursorBarSecControlIcon {
+                align-items: center;
+                border-radius: 6px;
+                color: #fff;
+                cursor: pointer;
+                display: flex;
+                font-size: 18px;
+                height: 32px;
+                justify-content: center;
+                transition: .3s ease;
+                width: 32px;
+            }
+
+            .NextspaceCursorBarSecControlIcon:hover {
+                -webkit-transform: scale(1.2);
+                transform: scale(1.2);
+            }
+
+            .NextspaceWalkthroughBar {
+                position: absolute;
+                z-index: 1;
+                bottom: 10px;
+                left: calc(45px + var(${widget_left_panel_1.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;
+                box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.36), 0px 18px 36px -4px rgba(18, 22, 25, 0.36);
+            }
+
+            .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);
+    }
+    _generateElement() {
+        const element = document.createElement("div");
+        element.className = "NextspaceCursorBar";
+        const prim = document.createElement("div");
+        prim.className = "NextspaceCursorBarPrim";
+        this._primary = prim;
+        const primContent = document.createElement("div");
+        primContent.className = "NextspaceCursorBarPrimContent";
+        prim.appendChild(primContent);
+        element.appendChild(prim);
+        this._primaryContent = primContent;
+        const sec = document.createElement("div");
+        sec.className = "NextspaceCursorBarSec";
+        this._secondary = sec;
+        const secContent = document.createElement("div");
+        secContent.className = "NextspaceCursorBarSecContent";
+        sec.appendChild(secContent);
+        element.appendChild(sec);
+        this._secondaryContent = secContent;
+        this._generateSelect();
+        this._generatePan();
+        this._generateMeasure();
+        this._generateWalkthrough();
+        this._updateControls();
+        this.Container.appendChild(element);
+        this._element = element;
+    }
+    _generateControl(title, cursor, onClick, iconHtml) {
+        const div = document.createElement("div");
+        div.className = "NextspaceCursorBarPrimControl";
+        const inner = document.createElement("div");
+        inner.setAttribute("title", title);
+        inner.setAttribute("control", cursor);
+        inner.className = "NextspaceCursorBarPrimControlInner";
+        inner.innerHTML = `
+            <div class="NextspaceCursorBarPrimControlInnerIcon">
+                ${iconHtml}
+            </div>
+        `;
+        div.appendChild(inner);
+        inner.addEventListener("click", () => {
+            var _a;
+            this._disposeMeasureTool();
+            this._disposeCesiumEvent();
+            this._disposeWalkthroughBar();
+            if (((_a = this._viewer) === null || _a === void 0 ? void 0 : _a.scene) && !this._viewer.isDestroyed()) {
+                walkthrough_1.Walkthrough.Stop({
+                    viewer: this._viewer
+                });
+            }
+            this._disposeWalkthroughBar();
+            onClick();
+            this._updateControls();
+        });
+        this._primaryContent.appendChild(div);
+    }
+    _generateSecondaryControl(title, cursor, onClick, iconHTML) {
+        const div = document.createElement("div");
+        div.className = "NextspaceCursorBarSecControl";
+        div.setAttribute("title", title);
+        div.setAttribute("control", cursor);
+        div.innerHTML = `
+            <div class="NextspaceCursorBarSecControlIcon">
+                ${iconHTML}
+            </div>
+        `;
+        div.addEventListener("click", () => {
+            this._disposeMeasureTool();
+            this._disposeCesiumEvent();
+            onClick();
+            this._updateSecondary();
+        });
+        this._secondaryContent.appendChild(div);
+    }
+    _generateSelect() {
+        const svg = `
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11.0706 25L9 7L23 17.8592L15.3135 18.3375L11.0706 25Z" fill="white" stroke="white" strokeLinejoin="round"/>
+            </svg>
+        `;
+        this._generateControl("Select", ECursor.Select, () => {
+            this._selectedCursor = ECursor.Select;
+            this._secondary.style.display = "none";
+            this._listenSelection();
+            this.OnCursorChange.Trigger(this._selectedCursor);
+        }, svg);
+    }
+    _generatePan() {
+        const svg = `
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <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"/>
+            </svg>
+        `;
+        this._generateControl("Pan", ECursor.Pan, () => {
+            this._selectedCursor = this._selectedCursor == ECursor.Pan ? ECursor.Select : ECursor.Pan;
+            this._secondary.style.display = "none";
+            if (this._selectedCursor == ECursor.Select) {
+                this._listenSelection();
+            }
+            this.OnCursorChange.Trigger(this._selectedCursor);
+        }, svg);
+    }
+    _generateMeasure() {
+        const svg = `
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <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"/>
+            </svg>
+        `;
+        this._generateControl("Measure", ECursor.Measure, () => {
+            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();
+            }
+            this.OnCursorChange.Trigger(this._selectedCursor);
+        }, svg);
+    }
+    _generateMeasureSecondary() {
+        this._secondaryContent.innerHTML = "";
+        this._secondary.style.display = "flex";
+        const panSvg = `
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <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"/>
+            </svg>
+        `;
+        this._generateSecondaryControl("Pan", ESecondaryCursor.Pan, () => {
+            this._selectedSecondaryCursor = ESecondaryCursor.Pan;
+            this._updateSecondary();
+        }, panSvg);
+        const pointSvg = `
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <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"/>
+            </svg>
+        `;
+        this._generateSecondaryControl("Measure point", ESecondaryCursor.MeasurePoint, () => {
+            this._selectedSecondaryCursor = this._selectedSecondaryCursor == ESecondaryCursor.MeasurePoint ? ESecondaryCursor.Pan : ESecondaryCursor.MeasurePoint;
+            this._updateSecondary();
+            this._enabledMeasureTool = new measure_creator_1.MeasureCreator.Point(this._viewer, true);
+            this._enabledMeasureTool.Start();
+        }, pointSvg);
+        const polylineSvg = `
+            <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6 4L18 8" stroke="white" stroke-width="3"/>
+                <path d="M4 6L5.12233 15" stroke="white" stroke-width="3"/>
+                <circle cx="3.5" cy="3.5" r="2.5" stroke="white" stroke-width="2"/>
+                <circle cx="20.1223" cy="9" r="2" stroke="white" stroke-width="2"/>
+                <circle cx="6" cy="17" r="2" stroke="white" stroke-width="2"/>
+            </svg>
+        `;
+        this._generateSecondaryControl("Measure polyline", ESecondaryCursor.MeasurePolyline, () => {
+            this._selectedSecondaryCursor = this._selectedSecondaryCursor == ESecondaryCursor.MeasurePolyline ? ESecondaryCursor.Pan : ESecondaryCursor.MeasurePolyline;
+            this._updateSecondary();
+            this._enabledMeasureTool = new measure_creator_1.MeasureCreator.Polyline(this._viewer, true);
+            this._enabledMeasureTool.Start();
+        }, polylineSvg);
+        const polygonSvg = `
+            <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6.5 15.5L5 5L18 9L6.5 15.5Z" fill="white" fill-opacity="0.4"/>
+                <path d="M6 4L18 8" stroke="white" stroke-width="3"/>
+                <path d="M4 6L5.12233 15" stroke="white" stroke-width="3"/>
+                <path d="M18.9518 9.82404L8 16.2072" stroke="white" stroke-width="3"/>
+                <circle cx="3.5" cy="3.5" r="2.5" stroke="white" stroke-width="2"/>
+                <circle cx="20.1223" cy="9" r="2" stroke="white" stroke-width="2"/>
+                <circle cx="6" cy="17" r="2" stroke="white" stroke-width="2"/>
+            </svg>
+        `;
+        this._generateSecondaryControl("Measure polygon", ESecondaryCursor.MeasurePolygon, () => {
+            this._selectedSecondaryCursor = this._selectedSecondaryCursor == ESecondaryCursor.MeasurePolygon ? ESecondaryCursor.Pan : ESecondaryCursor.MeasurePolygon;
+            this._updateSecondary();
+            this._enabledMeasureTool = new measure_creator_1.MeasureCreator.Polygon(this._viewer, true);
+            this._enabledMeasureTool.Start();
+        }, polygonSvg);
+    }
+    _generateWalkthrough() {
+        const svg = `
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M17.5033 4C16.8406 4 16.205 4.26339 15.7364 4.73223C15.2678 5.20107 15.0045 5.83696 15.0045 6.5C15.0045 7.16304 15.2678 7.79893 15.7364 8.26777C16.205 8.73661 16.8406 9 17.5033 9C18.166 9 18.8015 8.73661 19.2701 8.26777C19.7388 7.79893 20.002 7.16304 20.002 6.5C20.002 5.83696 19.7388 5.20107 19.2701 4.73223C18.8015 4.26339 18.166 4 17.5033 4ZM15.5023 10C15.1066 10 14.7378 10.1015 14.4052 10.2656C14.3549 10.2813 14.306 10.3009 14.2588 10.3242L10.3448 12.1992C10.1322 12.3003 9.96216 12.4733 9.86453 12.6875L8.09784 16.5859C8.0405 16.7059 8.00764 16.836 8.00118 16.9688C7.99472 17.1016 8.01479 17.2344 8.06021 17.3593C8.10563 17.4843 8.1755 17.5989 8.26572 17.6965C8.35594 17.7941 8.46471 17.8727 8.58567 17.9278C8.70662 17.9828 8.83733 18.0132 8.97016 18.0171C9.10299 18.0211 9.23526 17.9984 9.35924 17.9506C9.48323 17.9028 9.59644 17.8307 9.69225 17.7386C9.78806 17.6464 9.86454 17.5361 9.91724 17.4141L11.3638 14.2246L12.658 13.8359C12.3918 15.2411 12.0603 16.9816 12.0587 16.9902C12.0583 16.9923 12.0572 16.994 12.0568 16.9961C12.0568 16.9961 12.0568 17 12.0568 17C12.024 17.1615 12.006 17.3288 12.006 17.5C12.006 18.271 12.3631 18.9514 12.9118 19.4102L12.9196 19.4336L16.8103 22.5L17.923 26.6953L18.0225 27.1953C18.0677 27.4221 18.19 27.6263 18.3687 27.773C18.5474 27.9197 18.7714 27.9999 19.0025 28C19.2676 28 19.5218 27.8946 19.7093 27.7071C19.8967 27.5196 20.002 27.2652 20.002 27C20.0019 26.9344 19.9954 26.869 19.9825 26.8047V26.8008C19.9812 26.7969 19.9799 26.793 19.9786 26.7891L18.983 21.8047C18.9562 21.6693 18.9017 21.541 18.8229 21.4277L16.9528 18.0039C16.9546 17.9951 16.953 17.9854 16.9547 17.9766L17.9366 13.0625L17.9347 13.0605C17.9762 12.8798 18.003 12.6933 18.003 12.5C18.003 11.1207 16.8837 10.0011 15.5023 10ZM19.3871 13.7422L18.9186 16.0078L19.3344 16.3809C19.4093 16.4489 19.4962 16.5059 19.5882 16.5469L22.5866 17.9102V17.9082C22.7165 17.9681 22.8576 17.9994 23.0005 18C23.2656 18 23.5198 17.8946 23.7073 17.7071C23.8947 17.5196 24 17.2652 24 17C23.9996 16.8084 23.9442 16.6209 23.8404 16.4599C23.7366 16.2989 23.5887 16.1711 23.4144 16.0918V16.0898L20.5545 14.7891L19.3871 13.7422ZM11.9631 20.7246L11.4497 22.4219L9.22228 26.3613L9.1481 26.4863L9.15005 26.4883C9.13825 26.5087 9.12718 26.5296 9.11686 26.5508L9.10905 26.5625C9.0425 26.6987 9.00778 26.8484 9.00754 27C9.00754 27.2652 9.11285 27.5196 9.30029 27.7071C9.48773 27.8946 9.74195 28 10.007 28C10.1647 27.9999 10.3201 27.9626 10.4606 27.891C10.601 27.8193 10.7225 27.7155 10.8152 27.5879H10.8172L10.8328 27.5645C10.8334 27.5632 10.8341 27.5618 10.8347 27.5605L14.1592 22.5117L11.9631 20.7246Z" fill="white"/>
+            </svg>
+        `;
+        this._generateControl("Walkthrough", ECursor.Walkthrough, () => {
+            var _a;
+            this._selectedSecondaryCursor = ESecondaryCursor.Select;
+            this._selectedCursor = this._selectedCursor == ECursor.Walkthrough ? ECursor.Select : ECursor.Walkthrough;
+            if (this._selectedCursor == ECursor.Walkthrough) {
+                this._generateWalkthroughSecondary();
+                this._updateSecondary();
+                if (((_a = this._viewer) === null || _a === void 0 ? void 0 : _a.scene) && !this._viewer.isDestroyed()) {
+                    walkthrough_1.Walkthrough.Start({
+                        viewer: this._viewer
+                    });
+                    let moveType = localStorage.getItem(KEY_WALKTHROUGH_MODE);
+                    if (!moveType) {
+                        moveType = walkthrough_1.Walkthrough.EMoveType.Walk;
+                    }
+                    walkthrough_1.Walkthrough.SetMoveType({
+                        type: moveType,
+                        viewer: this._viewer
+                    });
+                    let speed = localStorage.getItem(KEY_WALKTHROUGH_SPEED_FLY);
+                    if (speed != null && !isNaN(+speed)) {
+                        walkthrough_1.Walkthrough.SetFlyMoveRate({
+                            rate: +speed,
+                            viewer: this._viewer
+                        });
+                    }
+                    speed = localStorage.getItem(KEY_WALKTHROUGH_SPEED_WALK);
+                    if (speed != null && !isNaN(+speed)) {
+                        walkthrough_1.Walkthrough.SetWalkMoveRate({
+                            rate: +speed,
+                            viewer: this._viewer
+                        });
+                    }
+                }
+                this._generateWalkthroughBar();
+            }
+            else {
+                this._secondary.style.display = "none";
+            }
+            if (this._selectedCursor == ECursor.Select || this._selectedSecondaryCursor == ESecondaryCursor.Select) {
+                this._listenSelection();
+            }
+            this.OnCursorChange.Trigger(this._selectedCursor);
+        }, svg);
+    }
+    _generateWalkthroughSecondary() {
+        this._secondaryContent.innerHTML = "";
+        this._secondary.style.display = "flex";
+        const selectSvg = `
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11.0706 25L9 7L23 17.8592L15.3135 18.3375L11.0706 25Z" fill="white" stroke="white" strokeLinejoin="round"/>
+            </svg>
+        `;
+        this._generateSecondaryControl("Select", ESecondaryCursor.Select, () => {
+            if (this._walkthroughPinEventRemoval) {
+                this._walkthroughPinEventRemoval();
+                this._walkthroughPinEventRemoval = null;
+            }
+            this._selectedSecondaryCursor = ESecondaryCursor.Select;
+            this._listenSelection();
+        }, selectSvg);
+        const panSvg = `
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <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"/>
+            </svg>
+        `;
+        this._generateSecondaryControl("Pan", ESecondaryCursor.Pan, () => {
+            if (this._walkthroughPinEventRemoval) {
+                this._walkthroughPinEventRemoval();
+                this._walkthroughPinEventRemoval = null;
+            }
+            if (this._selectedSecondaryCursor == ESecondaryCursor.Pan) {
+                this._selectedSecondaryCursor = ESecondaryCursor.Select;
+                this._listenSelection();
+            }
+            else {
+                this._selectedSecondaryCursor = ESecondaryCursor.Pan;
+            }
+            this._updateSecondary();
+        }, panSvg);
+        const pinSvg = `
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <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"/>
+            </svg>
+        `;
+        this._generateSecondaryControl("Move to point", ESecondaryCursor.WalkthroughPin, () => {
+            if (this._selectedSecondaryCursor == ESecondaryCursor.WalkthroughPin) {
+                this._selectedSecondaryCursor = ESecondaryCursor.Select;
+                this._listenSelection();
+            }
+            else {
+                this._selectedSecondaryCursor = ESecondaryCursor.WalkthroughPin;
+                this._initWalkthroughPin();
+            }
+            this._updateSecondary();
+        }, pinSvg);
+    }
+    _initWalkthroughPin() {
+        if (this._walkthroughPinEventRemoval) {
+            this._walkthroughPinEventRemoval();
+            this._walkthroughPinEventRemoval = null;
+        }
+        let pointer;
+        let events = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
+        this._walkthroughPinEventRemoval = () => {
+            var _a;
+            if (events && !events.isDestroyed()) {
+                events.destroy();
+                events = null;
+            }
+            if (((_a = this._viewer) === null || _a === void 0 ? void 0 : _a.scene) && !this._viewer.scene.isDestroyed()) {
+                if (pointer && this._viewer.entities.contains(pointer)) {
+                    this._viewer.entities.remove(pointer);
+                }
+                pointer = null;
+                this._viewer.scene.requestRender();
+            }
+        };
+        let dropPosition3d;
+        let dropOnTerrain = false;
+        events.setInputAction((e) => {
+            const pos2d = e.endPosition;
+            // First try find a position on a 'thing'.
+            // This lets us put our pin underground if there is something there.
+            let pos3d = drawing_utils_1.DrawingUtils.GetAccuratePosition(this._viewer, pos2d, true, pointer ? [pointer] : null);
+            dropOnTerrain = false;
+            // Fallback to position including terrain as an option.
+            if (!bruce_models_1.Cartes.ValidateCartes3(pos3d)) {
+                pos3d = drawing_utils_1.DrawingUtils.GetAccuratePosition(this._viewer, pos2d, false, pointer ? [pointer] : null);
+                dropOnTerrain = true;
+            }
+            if (bruce_models_1.Cartes.ValidateCartes3(pos3d)) {
+                dropPosition3d = pos3d;
+                if (!pointer) {
+                    // Preview is mucking up the raycast even when we ignore it, or make it not have a fill colour.
+                    // So hiding until we find a workaround (likely a circle that isn't filled as custom geometry rather than a material).
+                    // pointer = this._viewer.entities.add({
+                    //     position: new Cesium.CallbackProperty(() => dropPosition3d, false) as any,
+                    //     point: {
+                    //         pixelSize: 10,
+                    //         // color: Cesium.Color.fromCssColorString("#33B1FF"),
+                    //         color: Cesium.Color.TRANSPARENT,
+                    //         outlineColor: Cesium.Color.WHITE,
+                    //         outlineWidth: 2,
+                    //         heightReference: Cesium.HeightReference.NONE,
+                    //         show: true
+                    //     }
+                    // });
+                }
+            }
+        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+        let processing = false;
+        events.setInputAction(async (e) => {
+            if (processing) {
+                return;
+            }
+            processing = true;
+            try {
+                if (!bruce_models_1.Cartes.ValidateCartes3(dropPosition3d) && e.position) {
+                    // First try find a position on a 'thing'.
+                    // This lets us put our pin underground if there is something there.
+                    let pos3d = drawing_utils_1.DrawingUtils.GetAccuratePosition(this._viewer, e.position, true);
+                    dropOnTerrain = false;
+                    // Fallback to position including terrain as an option.
+                    if (!bruce_models_1.Cartes.ValidateCartes3(pos3d)) {
+                        pos3d = drawing_utils_1.DrawingUtils.GetAccuratePosition(this._viewer, e.position, false);
+                        dropOnTerrain = true;
+                    }
+                    dropPosition3d = pos3d;
+                }
+                let pos3d = dropPosition3d === null || dropPosition3d === void 0 ? void 0 : dropPosition3d.clone();
+                if (bruce_models_1.Cartes.ValidateCartes3(pos3d)) {
+                    const carto = Cesium.Cartographic.fromCartesian(pos3d);
+                    // If we can raycast to something then we won't adjust above terrain.
+                    // Eg: we clicked on an Entity so if it's underground, that's likely intended.
+                    if (dropOnTerrain) {
+                        const terrainCarto = carto.clone();
+                        terrainCarto.height = 0;
+                        if (this._viewer.scene.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
+                            // Flat terrain. Ignored.
+                        }
+                        else {
+                            const sample = await Cesium.sampleTerrainMostDetailed(this._viewer.scene.terrainProvider, [terrainCarto]);
+                            const terrainHeight = (sample === null || sample === void 0 ? void 0 : sample.length) ? sample[0].height : null;
+                            if (terrainHeight != null) {
+                                if (carto.height < terrainHeight) {
+                                    carto.height = terrainHeight;
+                                }
+                            }
+                        }
+                    }
+                    // Add average human height.
+                    carto.height += 1.7;
+                    pos3d = Cesium.Cartesian3.fromRadians(carto.longitude, carto.latitude, carto.height);
+                    this._viewer.camera.flyTo({
+                        destination: pos3d,
+                        duration: 2,
+                        orientation: {
+                            heading: this._viewer.camera.heading,
+                            pitch: Cesium.Math.toRadians(0),
+                            roll: Cesium.Math.toRadians(0)
+                        }
+                    });
+                    // Disable this picking cursor.
+                    this._selectedSecondaryCursor = ESecondaryCursor.Select;
+                    this._listenSelection();
+                    this._updateSecondary();
+                    if (this._walkthroughPinEventRemoval) {
+                        this._walkthroughPinEventRemoval();
+                        this._walkthroughPinEventRemoval = null;
+                    }
+                }
+            }
+            catch (e) {
+                console.error(e);
+            }
+            processing = false;
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    }
+    /**
+     * 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_1.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 heightCollapsed = "70px";
+            const heightExpanded = "150px";
+            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");
+                document.documentElement.style.setProperty(VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM, expanded ? heightExpanded : heightCollapsed);
+            };
+            content.appendChild(expand);
+            element.setAttribute("expanded", expanded ? "true" : "false");
+            document.documentElement.style.setProperty(VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM, expanded ? heightExpanded : heightCollapsed);
+        }
+        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_1.Walkthrough.GetMoveType({
+                viewer: this._viewer
+            }) == walkthrough_1.Walkthrough.EMoveType.Fly;
+            toggle.addEventListener("change", () => {
+                const newType = toggle.checked ? walkthrough_1.Walkthrough.EMoveType.Fly : walkthrough_1.Walkthrough.EMoveType.Walk;
+                walkthrough_1.Walkthrough.SetMoveType({
+                    viewer: this._viewer,
+                    type: newType
+                });
+                // Update the speed slider to match the new move type.
+                if (moveRateInput) {
+                    if (newType == walkthrough_1.Walkthrough.EMoveType.Fly) {
+                        const rate = walkthrough_1.Walkthrough.GetFlyMoveRate({
+                            viewer: this._viewer
+                        });
+                        moveRateInput.value = (rate * 50).toFixed(2);
+                    }
+                    else {
+                        const rate = walkthrough_1.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_1.Walkthrough.GetMoveType({
+                    viewer: this._viewer
+                });
+                if (type == walkthrough_1.Walkthrough.EMoveType.Fly) {
+                    const value = parseFloat(slider.value);
+                    const speed = value / 50;
+                    walkthrough_1.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_1.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_1.Walkthrough.GetMoveType({
+                viewer: this._viewer
+            });
+            if (type == walkthrough_1.Walkthrough.EMoveType.Fly) {
+                const rate = walkthrough_1.Walkthrough.GetFlyMoveRate({
+                    viewer: this._viewer
+                });
+                slider.value = (rate * 50).toFixed(2);
+            }
+            else {
+                const rate = walkthrough_1.Walkthrough.GetWalkMoveRate({
+                    viewer: this._viewer
+                });
+                slider.value = (rate * 500).toFixed(2);
+            }
+            row.appendChild(slider);
+        }
+        this._walkthroughBar = element;
+    }
+    _disposeWalkthroughBar() {
+        var _a;
+        if (this._walkthroughPinEventRemoval) {
+            this._walkthroughPinEventRemoval();
+            this._walkthroughPinEventRemoval = null;
+        }
+        if ((_a = this._walkthroughBar) === null || _a === void 0 ? void 0 : _a.parentElement) {
+            this._walkthroughBar.parentElement.removeChild(this._walkthroughBar);
+            this._walkthroughBar = null;
+        }
+        document.documentElement.style.setProperty(VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM, "0px");
+    }
+    _updateControls() {
+        const controls = this._primaryContent.querySelectorAll(".NextspaceCursorBarPrimControlInner");
+        controls.forEach((control) => {
+            control.setAttribute("is-selected", "false");
+        });
+        const selected = this._primaryContent.querySelector(`.NextspaceCursorBarPrimControlInner[control="${this._selectedCursor}"]`);
+        if (selected) {
+            selected.setAttribute("is-selected", "true");
+        }
+    }
+    _updateSecondary() {
+        const secondary = this._secondary.querySelectorAll(".NextspaceCursorBarSecControl");
+        secondary.forEach((control) => {
+            control.setAttribute("is-selected", "false");
+        });
+        const selected = this._secondary.querySelector(`.NextspaceCursorBarSecControl[control="${this._selectedSecondaryCursor}"]`);
+        if (selected) {
+            selected.setAttribute("is-selected", "true");
+        }
+    }
+    _disposeMeasureTool() {
+        if (this._enabledMeasureTool) {
+            this._enabledMeasureTool.Stop();
+            this._enabledMeasureTool = null;
+        }
+    }
+    _disposeCesiumEvent() {
+        if (this._cesiumEventRemoval) {
+            this._cesiumEventRemoval();
+        }
+        this._cesiumEventRemoval = null;
+    }
+    _listenSelection() {
+        this._disposeCesiumEvent();
+        const events = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
+        let lastHoverPos = null;
+        //let lastHoveredEntityId: string = null;
+        //let unhighlightTimeout: any = null;
+        const process2dCursor = (pos2d, isHover) => {
+            try {
+                const { regos } = this._manager.VisualsRegister.GetRegosFromCursor({
+                    cursor: pos2d
+                });
+                const first = regos.length ? regos[0] : null;
+                const firstId = first === null || first === void 0 ? void 0 : first.entityId;
+                if (isHover) {
+                    if (regos.length) {
+                        this._viewer.canvas.style.cursor = "pointer";
+                    }
+                    else if (this._viewer.canvas.style.cursor) {
+                        this._viewer.canvas.style.removeProperty("cursor");
+                    }
+                    /*
+                    clearTimeout(unhighlightTimeout);
+                    if (lastHoveredEntityId && lastHoveredEntityId != firstId) {
+                        this._manager.VisualsRegister.SetHighlighted({
+                            entityIds: [lastHoveredEntityId],
+                            highlighted: false
+                        });
+                    }
+                    if (firstId) {
+                        unhighlightTimeout = setTimeout(() => {
+                            if (lastHoveredEntityId == firstId) {
+                                this._manager.VisualsRegister.SetHighlighted({
+                                    entityIds: [firstId],
+                                    highlighted: false
+                                });
+                                lastHoveredEntityId = null;
+                            }
+                        }, 5000);
+                        if (lastHoveredEntityId != firstId) {
+                            this._manager.VisualsRegister.SetHighlighted({
+                                entityIds: [firstId],
+                                highlighted: true
+                            });
+                        }
+                    }
+                    
+                    lastHoveredEntityId = firstId;
+                    */
+                }
+                else {
+                    this._manager.VisualsRegister.ClearSelected();
+                    if (first) {
+                        this._manager.VisualsRegister.SetSelected({
+                            entityIds: [firstId],
+                            selected: true
+                        });
+                    }
+                }
+            }
+            catch (e) {
+                console.error(e);
+            }
+        };
+        const hoverDelayQueue = new bruce_models_1.DelayQueue(() => {
+            process2dCursor(lastHoverPos, true);
+        }, 80);
+        events.setInputAction((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);
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        events.setInputAction((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();
+        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+        this._cesiumEventRemoval = () => {
+            hoverDelayQueue.Dispose();
+            if (!events || events.isDestroyed()) {
+                return;
+            }
+            events.destroy();
+        };
+    }
+}
+exports.WidgetCursorBar = WidgetCursorBar;
+//# sourceMappingURL=widget-cursorbar.js.map