bruce-cesium 5.0.1 → 5.0.3

package/dist/bruce-cesium.es5.js

@@ -1,6 +1,6 @@
 import { BruceEvent, Cartes, Entity as Entity$1, Carto, Geometry, MathUtils, LRUCache, Api, Calculator, ClientFile, EntityTag, EntityType, ObjectUtils, Style, ProjectViewTile, DelayQueue, EntityLod, Bounds, ZoomControl, EntityRelationType, ENVIRONMENT, EntityHistoricData, Tileset, EntityCoords, DataLab, EntitySource, MenuItem, EntityRelation, ProgramKey, ProjectView, ProjectViewBookmark, Camera, ProjectViewLegacyTile, EntityAttachment, EntityAttachmentType, EntityAttribute, AbstractApi, Session } from 'bruce-models';
 import * as Cesium from 'cesium';
-import { Cartographic, Cartesian2, Math as Math$1, Cartesian3, CallbackProperty, Color, HeightReference, Rectangle, JulianDate, Entity, DistanceDisplayCondition, HorizontalOrigin, VerticalOrigin, ConstantProperty, ClassificationType, ConstantPositionProperty, ArcType, CornerType, ShadowMode, PolygonHierarchy, PolylineGraphics, ColorMaterialProperty, ColorBlendMode, HeadingPitchRoll, Transforms, Model, Primitive, Cesium3DTileFeature, SceneMode, GeoJsonDataSource, Cesium3DTileColorBlendMode, HeadingPitchRange, Cesium3DTileStyle, Ion, KmlDataSource, SceneTransforms, OrthographicFrustum, EasingFunction, NearFarScalar, EllipsoidTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, UrlTemplateImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, TileMapServiceImageryProvider, IonImageryProvider, CesiumTerrainProvider, Cesium3DTileset, Matrix4, Matrix3, IonResource, CesiumInspector, defined, ClockRange, EllipsoidGeodesic, sampleTerrainMostDetailed, PolygonPipeline, BoundingSphere, GeometryInstance, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, PolylineDashMaterialProperty, Quaternion, ScreenSpaceEventHandler, ScreenSpaceEventType, CzmlDataSource, Intersect, Fullscreen } from 'cesium';
+import { Cartographic, Cartesian2, Math as Math$1, Cartesian3, CallbackProperty, Color, HeightReference, Rectangle, JulianDate, Entity, DistanceDisplayCondition, ClassificationType, ArcType, CornerType, ShadowMode, ConstantProperty, ConstantPositionProperty, ColorBlendMode, HeadingPitchRoll, Transforms, Model, PolygonHierarchy, PolylineGraphics, ColorMaterialProperty, SceneMode, GeoJsonDataSource, Primitive, Cesium3DTileFeature, HorizontalOrigin, VerticalOrigin, Cesium3DTileColorBlendMode, HeadingPitchRange, Cesium3DTileStyle, Ion, KmlDataSource, SceneTransforms, OrthographicFrustum, EasingFunction, NearFarScalar, EllipsoidTerrainProvider, CesiumInspector, defined, ClockRange, EllipsoidGeodesic, sampleTerrainMostDetailed, Cesium3DTileset, PolygonPipeline, Matrix4, Matrix3, IonResource, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, UrlTemplateImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, TileMapServiceImageryProvider, IonImageryProvider, CesiumTerrainProvider, BoundingSphere, GeometryInstance, Quaternion, ScreenSpaceEventHandler, ScreenSpaceEventType, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, PolylineDashMaterialProperty, CzmlDataSource, Intersect, Fullscreen } from 'cesium';
 
 const TIME_LAG = 300;
 const POSITION_CHECK_TIMER = 950;
@@ -25932,20 +25932,352 @@ var MeasureCreator;
     MeasureCreator.Polygon = Polygon;
 })(MeasureCreator || (MeasureCreator = {}));
 
+var EAction;
+(function (EAction) {
+    EAction["Forward"] = "f";
+    EAction["Backward"] = "b";
+    EAction["Left"] = "l";
+    EAction["Right"] = "r";
+    EAction["Up"] = "u";
+    EAction["Down"] = "d";
+    EAction["LookUp"] = "lu";
+    EAction["LookDown"] = "ld";
+    EAction["LookLeft"] = "ll";
+    EAction["LookRight"] = "lr";
+    EAction["Looking"] = "looking";
+})(EAction || (EAction = {}));
+const DEFAULT_WALK_MOVE_RATE = 0.2;
+const DEFAULT_FLY_MOVE_RATE = 0.2;
+const DEFAULT_MOVE_TYPE = null;
+const VIEWER_WALKTHROUGH_DATA_KEY = "_cesiumWalkthroughData";
+/**
+ * Returns heading of camera towards where movement is happening.
+ * @returns
+ */
+function getMovementHeading(viewer) {
+    var _a;
+    const actions = (_a = viewer[VIEWER_WALKTHROUGH_DATA_KEY]) === null || _a === void 0 ? void 0 : _a.actions;
+    if (!actions) {
+        return 0;
+    }
+    let heading = Math$1.toDegrees(viewer.camera.heading);
+    let count = 0;
+    let totalHeading = 0;
+    let left = actions.get(EAction.Left);
+    if (left) {
+        totalHeading += heading + 270;
+        count += 1;
+    }
+    if (actions.get(EAction.Right)) {
+        totalHeading += heading + 90;
+        count += 1;
+    }
+    let forward = actions.get(EAction.Forward);
+    if (forward) {
+        totalHeading += heading;
+        count += 1;
+    }
+    if (actions.get(EAction.Backward)) {
+        totalHeading += heading + 180;
+        count += 1;
+    }
+    if (left && forward) {
+        totalHeading = heading - 45;
+    }
+    else {
+        totalHeading /= count;
+    }
+    return totalHeading;
+}
+/**
+ * Updates camera position and orientation based on current actions.
+ */
+function doMovementTick(viewer) {
+    const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
+    if (!data) {
+        return;
+    }
+    const canvas = viewer.canvas;
+    const camera = viewer.camera;
+    const moveRate = data.moveType == Walkthrough.EMoveType.Walk ? data.walkMoveRate : data.flyMoveRate;
+    if (data.actions.get(EAction.Looking)) {
+        let width = canvas.clientWidth;
+        let height = canvas.clientHeight;
+        // Coordinate (0.0, 0.0) will be where the mouse was clicked.
+        let x = (data.mousePosCurrent.x - data.mousePosStart.x) / width;
+        let y = -(data.mousePosCurrent.y - data.mousePosStart.y) / height;
+        let lookFactor = 0.1;
+        camera.lookRight(x * lookFactor);
+        camera.lookUp(y * lookFactor);
+    }
+    let lookStep = 0.03;
+    if (data.actions.get(EAction.LookLeft)) {
+        camera.lookLeft(lookStep);
+    }
+    if (data.actions.get(EAction.LookRight)) {
+        camera.lookRight(lookStep);
+    }
+    if (data.actions.get(EAction.LookUp)) {
+        camera.lookUp(lookStep);
+    }
+    if (data.actions.get(EAction.LookDown)) {
+        camera.lookDown(lookStep);
+    }
+    if (data.actions.get(EAction.Up)) {
+        camera.moveUp(moveRate / 2);
+    }
+    if (data.actions.get(EAction.Down)) {
+        camera.moveDown(moveRate / 2);
+    }
+    if (camera.roll > 0) {
+        camera.twistLeft(camera.roll);
+    }
+    else if (camera.roll < 0) {
+        camera.twistRight(camera.roll * -1);
+    }
+    // If movement type is fly use cesium movement methods
+    if (data.moveType == Walkthrough.EMoveType.Fly) {
+        if (data.actions.get(EAction.Forward)) {
+            camera.moveForward(moveRate);
+        }
+        if (data.actions.get(EAction.Backward)) {
+            camera.moveBackward(moveRate);
+        }
+        if (data.actions.get(EAction.Left)) {
+            camera.moveLeft(moveRate);
+        }
+        if (data.actions.get(EAction.Right)) {
+            camera.moveRight(moveRate);
+        }
+    }
+    // If movement type is walk, calculate new position without affecting altitude
+    else {
+        if (data.actions.get(EAction.Left) ||
+            data.actions.get(EAction.Right) ||
+            data.actions.get(EAction.Forward) ||
+            data.actions.get(EAction.Backward)) {
+            const heading = getMovementHeading(viewer);
+            const pos = viewer.camera.positionCartographic;
+            const newPos = _offsetPoint$1({
+                altitude: pos.height,
+                latitude: Math$1.toDegrees(pos.latitude),
+                longitude: Math$1.toDegrees(pos.longitude)
+            }, moveRate, heading);
+            camera.position = Cartesian3.fromDegrees(newPos.longitude, newPos.latitude, newPos.altitude);
+        }
+    }
+    viewer.scene.requestRender();
+}
+/**
+ * Moves a given point by a given distance towards a heading.
+ * @param point in degrees.
+ * @param distance in meters.
+ * @param heading in degrees.
+ * @returns
+ */
+function _offsetPoint$1(point, distance, heading) {
+    // Radius of earth.
+    const radius = 6371e3;
+    const δ = distance / radius;
+    const θ = Math$1.toRadians(heading);
+    const φ1 = Math$1.toRadians(point.latitude);
+    const λ1 = Math$1.toRadians(point.longitude);
+    const sinφ2 = Math.sin(φ1) * Math.cos(δ) + Math.cos(φ1) * Math.sin(δ) * Math.cos(θ);
+    const φ2 = Math.asin(sinφ2);
+    const y = Math.sin(θ) * Math.sin(δ) * Math.cos(φ1);
+    const x = Math.cos(δ) - Math.sin(φ1) * sinφ2;
+    const λ2 = λ1 + Math.atan2(y, x);
+    return {
+        altitude: point.altitude,
+        latitude: Math$1.toDegrees(φ2),
+        longitude: Math$1.toDegrees(λ2)
+    };
+}
+/**
+ * Checks given keyboard key against keybinds and sets action accordingly.
+ * @param key
+ * @param keyDown
+ */
+function checkKeybind(viewer, key, keyDown) {
+    const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
+    if (!data) {
+        return;
+    }
+    key = key.toLowerCase();
+    if (key == "w") {
+        data.actions.set(EAction.Forward, keyDown);
+    }
+    else if (key == "s") {
+        data.actions.set(EAction.Backward, keyDown);
+    }
+    else if (key == "a") {
+        data.actions.set(EAction.Left, keyDown);
+    }
+    else if (key == "d") {
+        data.actions.set(EAction.Right, keyDown);
+    }
+    else if (key == "q") {
+        data.actions.set(EAction.Up, keyDown);
+    }
+    else if (key == "e") {
+        data.actions.set(EAction.Down, keyDown);
+    }
+    else if (key == "arrowup") {
+        data.actions.set(EAction.LookUp, keyDown);
+    }
+    else if (key == "arrowdown") {
+        data.actions.set(EAction.LookDown, keyDown);
+    }
+    else if (key == "arrowleft") {
+        data.actions.set(EAction.LookLeft, keyDown);
+    }
+    else if (key == "arrowright") {
+        data.actions.set(EAction.LookRight, keyDown);
+    }
+}
+var Walkthrough;
+(function (Walkthrough) {
+    let EMoveType;
+    (function (EMoveType) {
+        EMoveType["Walk"] = "WALK";
+        EMoveType["Fly"] = "FLY";
+    })(EMoveType = Walkthrough.EMoveType || (Walkthrough.EMoveType = {}));
+    function Start(params) {
+        Stop(params);
+        const viewer = params.viewer;
+        const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY] = {
+            walkMoveRate: DEFAULT_WALK_MOVE_RATE,
+            flyMoveRate: DEFAULT_FLY_MOVE_RATE,
+            moveType: DEFAULT_MOVE_TYPE,
+            actions: new Map(),
+            ...viewer[VIEWER_WALKTHROUGH_DATA_KEY]
+        };
+        data.handlerScreenSpace = new ScreenSpaceEventHandler(viewer.canvas);
+        ViewUtils.SetLockedCameraStatus({
+            viewer: viewer,
+            status: true
+        });
+        let lastCheck;
+        let currentTime = new Date();
+        data.tickRemoval = viewer.clock.onTick.addEventListener(async () => {
+            lastCheck = new Date();
+            if (lastCheck.getTime() - currentTime.getTime() > (1000 / 60)) {
+                doMovementTick(viewer);
+                currentTime = new Date();
+            }
+        });
+        document.addEventListener("keydown", data.handlerKeyDown = (e) => {
+            checkKeybind(viewer, e.key, true);
+        }, false);
+        document.addEventListener("keyup", data.handlerKeyUp = (e) => {
+            checkKeybind(viewer, e.key, false);
+        }, false);
+        data.handlerScreenSpace.setInputAction((e) => {
+            data.actions.set(EAction.Looking, true);
+            data.mousePosCurrent = data.mousePosStart = Cartesian2.clone(e.position);
+        }, ScreenSpaceEventType.LEFT_DOWN);
+        data.handlerScreenSpace.setInputAction(((e) => {
+            data.mousePosCurrent = e.endPosition;
+        }), ScreenSpaceEventType.MOUSE_MOVE);
+        data.handlerScreenSpace.setInputAction(() => {
+            data.actions.set(EAction.Looking, false);
+        }, ScreenSpaceEventType.LEFT_UP);
+    }
+    Walkthrough.Start = Start;
+    function Stop(params) {
+        var _a, _b;
+        const viewer = params.viewer;
+        const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
+        ViewUtils.SetLockedCameraStatus({
+            viewer: viewer,
+            status: false
+        });
+        if (data) {
+            (_a = data.screenSpaceHandler) === null || _a === void 0 ? void 0 : _a.destroy();
+            data.screenSpaceHandler = null;
+            (_b = data.tickRemoval) === null || _b === void 0 ? void 0 : _b.call(data);
+            data.tickRemoval = null;
+            if (data.keyDownHandler) {
+                document.removeEventListener("keydown", data.keyDownHandler);
+                data.keyDownHandler = null;
+            }
+            if (data.keyUpHandler) {
+                document.removeEventListener("keyup", data.keyUpHandler);
+                data.keyUpHandler = null;
+            }
+        }
+    }
+    Walkthrough.Stop = Stop;
+    function IsRunning(params) {
+        const viewer = params.viewer;
+        const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
+        return (data === null || data === void 0 ? void 0 : data.handlerScreenSpace) != null;
+    }
+    Walkthrough.IsRunning = IsRunning;
+    function SetWalkMoveRate(params) {
+        var _a;
+        const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+        if (data) {
+            data.walkMoveRate = params.rate;
+        }
+    }
+    Walkthrough.SetWalkMoveRate = SetWalkMoveRate;
+    function SetMoveType(params) {
+        var _a;
+        const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+        if (data) {
+            data.moveType = params.type;
+        }
+    }
+    Walkthrough.SetMoveType = SetMoveType;
+    function GetWalkMoveRate(params) {
+        var _a;
+        const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+        return data === null || data === void 0 ? void 0 : data.walkMoveRate;
+    }
+    Walkthrough.GetWalkMoveRate = GetWalkMoveRate;
+    function GetFlyMoveRate(params) {
+        var _a;
+        const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+        return data === null || data === void 0 ? void 0 : data.flyMoveRate;
+    }
+    Walkthrough.GetFlyMoveRate = GetFlyMoveRate;
+    function SetFlyMoveRate(params) {
+        var _a;
+        const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+        if (data) {
+            data.flyMoveRate = params.rate;
+        }
+    }
+    Walkthrough.SetFlyMoveRate = SetFlyMoveRate;
+    function GetMoveType(params) {
+        var _a;
+        const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+        return data === null || data === void 0 ? void 0 : data.moveType;
+    }
+    Walkthrough.GetMoveType = GetMoveType;
+})(Walkthrough || (Walkthrough = {}));
+
 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 || (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);
@@ -25954,18 +26286,24 @@ class WidgetCursorBar extends Widget.AWidget {
         this._selectedSecondaryCursor = ESecondaryCursor.None;
         this._generateStyles();
         this._generateElement();
-        if (this._selectedCursor == ECursor.Select) {
+        if (this._selectedCursor == ECursor.Select || this._selectedSecondaryCursor == ESecondaryCursor.Select) {
             this._listenSelection();
         }
     }
     Dispose() {
-        var _a, _b;
+        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.Stop({
+                viewer: this._viewer
+            });
+        }
     }
     _generateStyles() {
         if (document.getElementById(this.STYLESHEET_ID)) {
@@ -26132,6 +26470,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);
     }
@@ -26157,6 +26654,7 @@ class WidgetCursorBar extends Widget.AWidget {
         this._generateSelect();
         this._generatePan();
         this._generateMeasure();
+        this._generateWalkthrough();
         this._updateControls();
         this.Container.appendChild(element);
         this._element = element;
@@ -26175,8 +26673,16 @@ class WidgetCursorBar extends Widget.AWidget {
         `;
         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.Stop({
+                    viewer: this._viewer
+                });
+            }
+            this._disposeWalkthroughBar();
             onClick();
             this._updateControls();
         });
@@ -26303,6 +26809,334 @@ class WidgetCursorBar extends Widget.AWidget {
             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.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";
+            }
+            if (this._selectedCursor == ECursor.Select || this._selectedSecondaryCursor == ESecondaryCursor.Select) {
+                this._listenSelection();
+            }
+        }, 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, () => {
+            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._selectedSecondaryCursor == ESecondaryCursor.Pan) {
+                this._selectedSecondaryCursor = ESecondaryCursor.Select;
+                this._listenSelection();
+            }
+            else {
+                this._selectedSecondaryCursor = ESecondaryCursor.Pan;
+            }
+            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
+                    });
+                }
+            };
+            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) => {
@@ -28370,7 +29204,7 @@ class WidgetViewBar extends Widget.AWidget {
     }
 }
 
-const VERSION = "5.0.1";
+const VERSION = "5.0.3";
 
-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, 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 };
+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