@xtctwins/tctwins-core 1.0.25 → 1.0.26

package/dist/tctwins-core.es.js

@@ -12460,9 +12460,6 @@ s	 * @param {function} [cfg.canvasToPagePos] Optional function to map canvas-spa
 		if (this.pointerLens) {
 			this.pointerLens.visible = false;
 		}
-		if (this.markerDiv) {
-			this._destroyMarkerDiv();
-		}
 		this.reset();
 		const canvas = this.scene.canvas.canvas;
 		canvas.removeEventListener("mousedown", this._onMouseDown);
@@ -12505,7 +12502,6 @@ s	 * @param {function} [cfg.canvasToPagePos] Optional function to map canvas-spa
 	destroy() {
 		this.deactivate();
 		this._destroyMarkerDiv();
-
 		if (this.pointerLens) {
 			this.pointerLens.destroy();
 		}
@@ -13321,6 +13317,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
 		canvas.addEventListener(
 			"touchstart",
 			(this._onCanvasTouchStart = (event) => {
+				if (!event.isTrusted) return;
 				const currentNumTouches = event.touches.length;
 
 				//多指触碰
@@ -13847,6 +13844,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
 				touchEndCanvasPos.set([touchX, touchY]);
 
 				switch (this._touchState) {
+					//起点短按
 					case WAITING_FOR_ORIGIN_QUICK_TOUCH_END$1:
 						{
 							if (
@@ -13876,7 +13874,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
 										worldPos: pickResult.worldPos
 									}
 								});
-								this._currentAngleMeasurement.clickable = false;
+								// this._currentAngleMeasurement.clickable = false;
 								this._currentAngleMeasurement.originVisible = true;
 								this._currentAngleMeasurement.originWireVisible = false;
 								this._currentAngleMeasurement.cornerVisible = false;
@@ -13898,6 +13896,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
 						enableCameraNavigation();
 						break;
 
+					//起点长按
 					case WAITING_FOR_ORIGIN_LONG_TOUCH_END$1:
 						if (this.pointerLens) {
 							this.pointerLens.visible = false;
@@ -13916,6 +13915,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
 						enableCameraNavigation();
 						break;
 
+					//拐角短按
 					case WAITING_FOR_CORNER_QUICK_TOUCH_END:
 						{
 							if (
@@ -13955,6 +13955,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
 						enableCameraNavigation();
 						break;
 
+					//拐角长按
 					case WAITING_FOR_CORNER_LONG_TOUCH_END:
 						if (this.pointerLens) {
 							this.pointerLens.visible = false;
@@ -13964,6 +13965,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
 						enableCameraNavigation();
 						break;
 
+					//终点短按
 					case WAITING_FOR_TARGET_QUICK_TOUCH_END$1:
 						{
 							if (
@@ -14004,6 +14006,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
 						enableCameraNavigation();
 						break;
 
+					//终点长按
 					case WAITING_FOR_TARGET_LONG_TOUCH_END$1:
 						if (this.pointerLens) {
 							this.pointerLens.visible = false;
@@ -14029,6 +14032,8 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
 			{ passive: true }
 		);
 
+		canvas.addEventListener("touchcancel", this._onCanvasTouchEnd);
+
 		this._active = true;
 	}
 
@@ -14048,6 +14053,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
 		const canvas = this.plugin.viewer.scene.canvas.canvas;
 		canvas.removeEventListener("touchstart", this._onCanvasTouchStart);
 		canvas.removeEventListener("touchend", this._onCanvasTouchEnd);
+		canvas.removeEventListener("touchcancel", this._onCanvasTouchEnd);
 		if (this._currentAngleMeasurement) {
 			this.angleMeasurementsPlugin.fire("measurementCancel", this._currentAngleMeasurement);
 			this._currentAngleMeasurement.destroy();
@@ -21697,6 +21703,7 @@ class Input extends Component {
 				if (!this.enabled) {
 					return;
 				}
+				if (!e.isTrusted) return;
 				if (e.touches.length == 1) {
 					this.touchDown = true;
 				}
@@ -21720,6 +21727,8 @@ class Input extends Component {
 			}),
 			true
 		);
+		//touchcancel
+		this.element.addEventListener("touchcancel", this._touchUpListener, true);
 		//touchmove
 		this.element.addEventListener(
 			"touchmove",
@@ -21789,6 +21798,7 @@ class Input extends Component {
 
 		this.element.removeEventListener("touchstart", this._touchDownListener);
 		document.removeEventListener("touchend", this._touchUpListener);
+		document.removeEventListener("touchcancel", this._touchUpListener);
 		this.element.removeEventListener("touchmove", this._touchMoveListener);
 
 		if (window.OrientationChangeEvent) {
@@ -87380,13 +87390,10 @@ class DistanceMeasurementsMouseControl extends DistanceMeasurementsControl {
 		if (this.pointerLens) {
 			this.pointerLens.visible = false;
 		}
-		if (this._markerDiv) {
-			this._destroyMarkerDiv();
-		}
 		this.reset();
 		const canvas = this.scene.canvas.canvas;
-		canvas.removeEventListener("mousedown" , this._onMouseDown);
-		canvas.removeEventListener("mouseup" , this._onMouseUp);
+		canvas.removeEventListener("mousedown", this._onMouseDown);
+		canvas.removeEventListener("mouseup", this._onMouseUp);
 		const cameraControl = this.distanceMeasurementsPlugin.viewer.cameraControl;
 		cameraControl.off(this._onCameraControlHoverSnapOrSurface);
 		cameraControl.off(this._onCameraControlHoverSnapOrSurfaceOff);
@@ -88217,6 +88224,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
 		canvas.addEventListener(
 			"touchstart",
 			(this._onCanvasTouchStart = (event) => {
+				if (!event.isTrusted) return;
 				const currentNumTouches = event.touches.length;
 
 				if (currentNumTouches !== 1) {
@@ -88626,6 +88634,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
 				touchEndCanvasPos.set([touchX, touchY]);
 
 				switch (this._touchState) {
+					//等待起点短按
 					case WAITING_FOR_ORIGIN_QUICK_TOUCH_END:
 						{
 							if (
@@ -88661,7 +88670,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
 								this._currentDistanceMeasurement.wireVisible = false;
 								this._currentDistanceMeasurement.originVisible = true;
 								this._currentDistanceMeasurement.targetVisible = false;
-								this._currentDistanceMeasurement.clickable = false;
+								// this._currentDistanceMeasurement.clickable = false;
 								this._touchState = WAITING_FOR_TARGET_TOUCH_START;
 								this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement);
 								//  console.log("touchend: this._touchState= WAITING_FOR_ORIGIN_QUICK_TOUCH_END -> WAITING_FOR_ORIGIN_TOUCH_START")
@@ -88759,6 +88768,8 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
 			{ passive: true }
 		);
 
+		canvas.addEventListener("touchcancel", this._onCanvasTouchEnd);
+
 		this._active = true;
 	}
 
@@ -88778,6 +88789,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
 		const canvas = this.plugin.viewer.scene.canvas.canvas;
 		canvas.removeEventListener("touchstart", this._onCanvasTouchStart);
 		canvas.removeEventListener("touchend", this._onCanvasTouchEnd);
+		canvas.removeEventListener("touchcancel", this._onCanvasTouchEnd);
 		if (this._currentDistanceMeasurement) {
 			this.distanceMeasurementsPlugin.fire("measurementCancel", this._currentDistanceMeasurement);
 			this._currentDistanceMeasurement.destroy();
@@ -95469,16 +95481,17 @@ class MousePanRotateDollyHandler {
 
 	destroy() {
 		const canvas = this._scene.canvas.canvas;
-
-		document.removeEventListener("keydown", this._documentKeyDownHandler);
-		document.removeEventListener("keyup", this._documentKeyUpHandler);
-		canvas.removeEventListener("mousedown", this._mouseDownHandler);
-		document.removeEventListener("mousemove", this._documentMouseMoveHandler);
-		canvas.removeEventListener("mousemove", this._canvasMouseMoveHandler);
-		document.removeEventListener("mouseup", this._documentMouseUpHandler);
-		canvas.removeEventListener("mouseup", this._mouseUpHandler);
-		canvas.removeEventListener("mouseenter", this._mouseEnterHandler);
-		canvas.removeEventListener("wheel", this._mouseWheelHandler);
+		if (canvas) {
+			document.removeEventListener("keydown", this._documentKeyDownHandler);
+			document.removeEventListener("keyup", this._documentKeyUpHandler);
+			canvas.removeEventListener("mousedown", this._mouseDownHandler);
+			document.removeEventListener("mousemove", this._documentMouseMoveHandler);
+			canvas.removeEventListener("mousemove", this._canvasMouseMoveHandler);
+			document.removeEventListener("mouseup", this._documentMouseUpHandler);
+			canvas.removeEventListener("mouseup", this._mouseUpHandler);
+			canvas.removeEventListener("mouseenter", this._mouseEnterHandler);
+			canvas.removeEventListener("wheel", this._mouseWheelHandler);
+		}
 	}
 }
 
@@ -95772,6 +95785,7 @@ class MousePickHandler {
 						const pickResult = pickController.pickResult;
 
 						if (pickResult && pickResult.worldPos) {
+							pivotController.setCanvasPivotPos(states.pointerCanvasPos);
 							cameraControl.fire("mouseDownEntity", pickController.pickResult, true);
 						} else {
 							if (configs.smartPivot) {
@@ -96274,7 +96288,7 @@ class CameraUpdater {
 
                 if ((!configs.firstPerson) && configs.followPointer && pivotController.getPivoting()) {
                     pivotController.continuePivot(updates.rotateDeltaY, updates.rotateDeltaX);
-                    pivotController.showPivot();
+                    // pivotController.showPivot();
 
                 } else {
 
@@ -96600,6 +96614,7 @@ class TouchPanRotateAndDollyHandler {
 				if (!(configs.active && configs.pointerEnabled)) {
 					return;
 				}
+				if (!event.isTrusted) return;
 
 				event.preventDefault();
 
@@ -96617,31 +96632,33 @@ class TouchPanRotateAndDollyHandler {
 						pickController.pickCursorPos = tapStartCanvasPos;
 						pickController.schedulePickSurface = true;
 						pickController.update();
-
-						if (!configs.planView) {
-							if (
-								pickController.picked &&
-								pickController.pickedSurface &&
-								pickController.pickResult &&
-								pickController.pickResult.worldPos
-							) {
-								pivotController.setPivotPos(pickController.pickResult.worldPos);
-
-								if (!configs.firstPerson && pivotController.startPivot()) {
-									pivotController.showPivot();
-								}
-							} else {
-								if (configs.smartPivot) {
-									pivotController.setCanvasPivotPos(states.pointerCanvasPos);
-								} else {
-									pivotController.setPivotPos(scene.camera.look);
-								}
-
-								if (!configs.firstPerson && pivotController.startPivot()) {
-									pivotController.showPivot();
-								}
-							}
-						}
+						pivotController.setPivotPos(scene.camera.look);
+
+						// if (!configs.planView) {
+						// 	if (
+						// 		pickController.picked &&
+						// 		pickController.pickedSurface &&
+						// 		pickController.pickResult &&
+						// 		pickController.pickResult.worldPos
+						// 	) {
+						// 		// pivotController.setPivotPos(pickController.pickResult.worldPos);
+						// 		pivotController.setPivotPos(scene.camera.look);
+						// 		if (!configs.firstPerson && pivotController.startPivot()) {
+						// 			// pivotController.showPivot();
+						// 		}
+						// 	} else {
+						// 		if (configs.smartPivot) {
+						// 			pivotController.setPivotPos(scene.camera.look);
+						// 			// pivotController.setCanvasPivotPos(states.pointerCanvasPos);
+						// 		} else {
+						// 			pivotController.setPivotPos(scene.camera.look);
+						// 		}
+
+						// 		if (!configs.firstPerson && pivotController.startPivot()) {
+						// 			// pivotController.showPivot();
+						// 		}
+						// 	}
+						// }
 					}
 				}
 
@@ -96666,6 +96683,7 @@ class TouchPanRotateAndDollyHandler {
 				}
 			})
 		);
+		canvas.addEventListener("touchcancel", this._canvasTouchEndHandler);
 
 		canvas.addEventListener(
 			"touchmove",
@@ -96816,6 +96834,7 @@ class TouchPanRotateAndDollyHandler {
 		const canvas = this._scene.canvas.canvas;
 		canvas.removeEventListener("touchstart", this._canvasTouchStartHandler);
 		canvas.removeEventListener("touchend", this._canvasTouchEndHandler);
+		canvas.removeEventListener("touchcancel", this._canvasTouchEndHandler);
 		canvas.removeEventListener("touchmove", this._canvasTouchMoveHandler);
 		this._scene.off(this._onTick);
 	}
@@ -96891,6 +96910,7 @@ class TouchPickHandler {
 				if (!(configs.active && configs.pointerEnabled)) {
 					return;
 				}
+				if (!e.isTrusted) return;
 
 				if (states.longTouchTimeout !== null) {
 					clearTimeout(states.longTouchTimeout);
@@ -97058,6 +97078,8 @@ class TouchPickHandler {
 			}),
 			{ passive: true }
 		);
+
+		canvas.addEventListener("touchcancel", this._canvasTouchEndHandler);
 	}
 
 	reset() {
@@ -97070,6 +97092,7 @@ class TouchPickHandler {
 		const canvas = this._scene.canvas.canvas;
 		canvas.removeEventListener("touchstart", this._canvasTouchStartHandler);
 		canvas.removeEventListener("touchend", this._canvasTouchEndHandler);
+		canvas.removeEventListener("touchcancel", this._canvasTouchEndHandler);
 	}
 }
 
@@ -120912,7 +120935,7 @@ class Control {
 			//touchend
 			canvas.addEventListener(
 				"touchend",
-				(this._canvasMouseUpListener = (e) => {
+				(this._canvasTouchEndListener = (e) => {
 					// if (!this._visible) return;
 					this._viewer.cameraControl.pointerEnabled = true;
 					if (lastAffordanceMesh) {
@@ -120924,6 +120947,7 @@ class Control {
 					grabbed = false;
 				})
 			);
+			canvas.addEventListener("touchcancel", this._canvasTouchEndListener);
 		}
 	}
 
@@ -120945,6 +120969,8 @@ class Control {
 		canvas.removeEventListener("mousemove", this._canvasMouseMoveListener);
 		canvas.removeEventListener("mouseup", this._canvasMouseUpListener);
 		canvas.removeEventListener("wheel", this._canvasWheelListener);
+		canvas.removeEventListener("touchend", this._canvasTouchEndListener);
+		canvas.removeEventListener("touchcancel", this._canvasTouchEndListener);
 
 		camera.off(this._onCameraViewMatrix);
 		camera.off(this._onCameraProjMatrix);
@@ -122669,597 +122695,677 @@ const quat = new Float64Array(4);
  * Controls a {@link SectionPlane} with mouse and touch input.
  */
 class FaceAlignedSectionPlanesControl {
+	/** @private */
+	constructor(plugin) {
+		/**
+		 * ID of this FaceAlignedSectionPlanesControl.
+		 *
+		 * FaceAlignedSectionPlanesControl are mapped by this ID in {@link FaceAlignedSectionPlanesPlugin#controls}.
+		 *
+		 * @property id
+		 * @type {String|Number}
+		 */
+		this.id = null;
 
-    /** @private */
-    constructor(plugin) {
-
-        /**
-         * ID of this FaceAlignedSectionPlanesControl.
-         *
-         * FaceAlignedSectionPlanesControl are mapped by this ID in {@link FaceAlignedSectionPlanesPlugin#controls}.
-         *
-         * @property id
-         * @type {String|Number}
-         */
-        this.id = null;
-
-        this._viewer = plugin.viewer;
-        this._plugin = plugin;
-        this._visible = false;
-        this._pos = math.vec3(); // Full-precision position of the center of the FaceAlignedSectionPlanesControl
-        this._origin = math.vec3();
-        this._rtcPos = math.vec3();
-
-        this._baseDir = math.vec3(); // Saves direction of clip plane when we start dragging an arrow or ring.
-        this._rootNode = null; // Root of Node graph that represents this control in the 3D scene
-        this._displayMeshes = null; // Meshes that are always visible
-        this._affordanceMeshes = null; // Meshes displayed momentarily for affordance
+		this._viewer = plugin.viewer;
+		this._plugin = plugin;
+		this._visible = false;
+		this._pos = math.vec3(); // Full-precision position of the center of the FaceAlignedSectionPlanesControl
+		this._origin = math.vec3();
+		this._rtcPos = math.vec3();
 
-        this._ignoreNextSectionPlaneDirUpdate = false;
+		this._baseDir = math.vec3(); // Saves direction of clip plane when we start dragging an arrow or ring.
+		this._rootNode = null; // Root of Node graph that represents this control in the 3D scene
+		this._displayMeshes = null; // Meshes that are always visible
+		this._affordanceMeshes = null; // Meshes displayed momentarily for affordance
 
-        this._createNodes();
-        this._bindEvents();
-    }
+		this._ignoreNextSectionPlaneDirUpdate = false;
 
-    /**
-     * Called by FaceAlignedSectionPlanesPlugin to assign this FaceAlignedSectionPlanesControl to a SectionPlane.
-     * FaceAlignedSectionPlanesPlugin keeps FaceAlignedSectionPlanesControls in a reuse pool.
-     * Call with a null or undefined value to disconnect the FaceAlignedSectionPlanesControl ffrom whatever SectionPlane it was assigned to.
-     * @private
-     */
-    _setSectionPlane(sectionPlane) {
-        if (this._sectionPlane) {
-            this._sectionPlane.off(this._onSectionPlanePos);
-            this._sectionPlane.off(this._onSectionPlaneDir);
-            this._onSectionPlanePos = null;
-            this._onSectionPlaneDir = null;
-            this._sectionPlane = null;
-        }
-        if (sectionPlane) {
-            this.id = sectionPlane.id;
-            this._setPos(sectionPlane.pos);
-            this._setDir(sectionPlane.dir);
-            this._sectionPlane = sectionPlane;
-            this._onSectionPlanePos = sectionPlane.on("pos", () => {
-                this._setPos(this._sectionPlane.pos);
-            });
-            this._onSectionPlaneDir = sectionPlane.on("dir", () => {
-                if (!this._ignoreNextSectionPlaneDirUpdate) {
-                    this._setDir(this._sectionPlane.dir);
-                } else {
-                    this._ignoreNextSectionPlaneDirUpdate = false;
-                }
-            });
-        }
-    }
+		this._createNodes();
+		this._bindEvents();
+	}
 
-    /**
-     * Gets the {@link SectionPlane} controlled by this FaceAlignedSectionPlanesControl.
-     * @returns {SectionPlane} The SectionPlane.
-     */
-    get sectionPlane() {
-        return this._sectionPlane;
-    }
+	/**
+	 * Called by FaceAlignedSectionPlanesPlugin to assign this FaceAlignedSectionPlanesControl to a SectionPlane.
+	 * FaceAlignedSectionPlanesPlugin keeps FaceAlignedSectionPlanesControls in a reuse pool.
+	 * Call with a null or undefined value to disconnect the FaceAlignedSectionPlanesControl ffrom whatever SectionPlane it was assigned to.
+	 * @private
+	 */
+	_setSectionPlane(sectionPlane) {
+		if (this._sectionPlane) {
+			this._sectionPlane.off(this._onSectionPlanePos);
+			this._sectionPlane.off(this._onSectionPlaneDir);
+			this._onSectionPlanePos = null;
+			this._onSectionPlaneDir = null;
+			this._sectionPlane = null;
+		}
+		if (sectionPlane) {
+			this.id = sectionPlane.id;
+			this._setPos(sectionPlane.pos);
+			this._setDir(sectionPlane.dir);
+			this._sectionPlane = sectionPlane;
+			this._onSectionPlanePos = sectionPlane.on("pos", () => {
+				this._setPos(this._sectionPlane.pos);
+			});
+			this._onSectionPlaneDir = sectionPlane.on("dir", () => {
+				if (!this._ignoreNextSectionPlaneDirUpdate) {
+					this._setDir(this._sectionPlane.dir);
+				} else {
+					this._ignoreNextSectionPlaneDirUpdate = false;
+				}
+			});
+		}
+	}
 
-    /** @private */
-    _setPos(xyz) {
+	/**
+	 * Gets the {@link SectionPlane} controlled by this FaceAlignedSectionPlanesControl.
+	 * @returns {SectionPlane} The SectionPlane.
+	 */
+	get sectionPlane() {
+		return this._sectionPlane;
+	}
 
-        this._pos.set(xyz);
+	/** @private */
+	_setPos(xyz) {
+		this._pos.set(xyz);
 
-        worldToRTCPos(this._pos, this._origin, this._rtcPos);
+		worldToRTCPos(this._pos, this._origin, this._rtcPos);
 
-        this._rootNode.origin = this._origin;
-        this._rootNode.position = this._rtcPos;
-    }
+		this._rootNode.origin = this._origin;
+		this._rootNode.position = this._rtcPos;
+	}
 
-    /** @private */
-    _setDir(xyz) {
-        this._baseDir.set(xyz);
-        this._rootNode.quaternion = math.vec3PairToQuaternion(zeroVec, xyz, quat);
-    }
+	/** @private */
+	_setDir(xyz) {
+		this._baseDir.set(xyz);
+		this._rootNode.quaternion = math.vec3PairToQuaternion(zeroVec, xyz, quat);
+	}
 
-    _setSectionPlaneDir(dir) {
-        if (this._sectionPlane) {
-            this._ignoreNextSectionPlaneDirUpdate = true;
-            this._sectionPlane.dir = dir;
-        }
-    }
+	_setSectionPlaneDir(dir) {
+		if (this._sectionPlane) {
+			this._ignoreNextSectionPlaneDirUpdate = true;
+			this._sectionPlane.dir = dir;
+		}
+	}
 
-    /**
-     * Sets if this FaceAlignedSectionPlanesControl is visible.
-     *
-     * @type {Boolean}
-     */
-    setVisible(visible = true) {
-        if (this._visible === visible) {
-            return;
-        }
-        this._visible = visible;
-        var id;
-        for (id in this._displayMeshes) {
-            if (this._displayMeshes.hasOwnProperty(id)) {
-                this._displayMeshes[id].visible = visible;
-            }
-        }
-        if (!visible) {
-            for (id in this._affordanceMeshes) {
-                if (this._affordanceMeshes.hasOwnProperty(id)) {
-                    this._affordanceMeshes[id].visible = visible;
-                }
-            }
-        }
-    }
+	/**
+	 * Sets if this FaceAlignedSectionPlanesControl is visible.
+	 *
+	 * @type {Boolean}
+	 */
+	setVisible(visible = true) {
+		if (this._visible === visible) {
+			return;
+		}
+		this._visible = visible;
+		var id;
+		for (id in this._displayMeshes) {
+			if (this._displayMeshes.hasOwnProperty(id)) {
+				this._displayMeshes[id].visible = visible;
+			}
+		}
+		if (!visible) {
+			for (id in this._affordanceMeshes) {
+				if (this._affordanceMeshes.hasOwnProperty(id)) {
+					this._affordanceMeshes[id].visible = visible;
+				}
+			}
+		}
+	}
 
-    /**
-     * Gets if this FaceAlignedSectionPlanesControl is visible.
-     *
-     * @type {Boolean}
-     */
-    getVisible() {
-        return this._visible;
-    }
+	/**
+	 * Gets if this FaceAlignedSectionPlanesControl is visible.
+	 *
+	 * @type {Boolean}
+	 */
+	getVisible() {
+		return this._visible;
+	}
 
-    /**
-     * Sets if this FaceAlignedSectionPlanesControl is culled. This is called by FaceAlignedSectionPlanesPlugin to
-     * temporarily hide the FaceAlignedSectionPlanesControl while a snapshot is being taken by Viewer#getSnapshot().
-     * @param culled
-     */
-    setCulled(culled) {
-        var id;
-        for (id in this._displayMeshes) {
-            if (this._displayMeshes.hasOwnProperty(id)) {
-                this._displayMeshes[id].culled = culled;
-            }
-        }
-        if (!culled) {
-            for (id in this._affordanceMeshes) {
-                if (this._affordanceMeshes.hasOwnProperty(id)) {
-                    this._affordanceMeshes[id].culled = culled;
-                }
-            }
-        }
-    }
+	/**
+	 * Sets if this FaceAlignedSectionPlanesControl is culled. This is called by FaceAlignedSectionPlanesPlugin to
+	 * temporarily hide the FaceAlignedSectionPlanesControl while a snapshot is being taken by Viewer#getSnapshot().
+	 * @param culled
+	 */
+	setCulled(culled) {
+		var id;
+		for (id in this._displayMeshes) {
+			if (this._displayMeshes.hasOwnProperty(id)) {
+				this._displayMeshes[id].culled = culled;
+			}
+		}
+		if (!culled) {
+			for (id in this._affordanceMeshes) {
+				if (this._affordanceMeshes.hasOwnProperty(id)) {
+					this._affordanceMeshes[id].culled = culled;
+				}
+			}
+		}
+	}
 
-    /**
-     * Builds the Entities that represent this FaceAlignedSectionPlanesControl.
-     * @private
-     */
-    _createNodes() {
+	/**
+	 * Builds the Entities that represent this FaceAlignedSectionPlanesControl.
+	 * @private
+	 */
+	_createNodes() {
+		const NO_STATE_INHERIT = false;
+		const scene = this._viewer.scene;
+		const radius = 1.0;
+		const tubeRadius = 0.01;
+		const arrowRadius = 0.07;
 
-        const NO_STATE_INHERIT = false;
-        const scene = this._viewer.scene;
-        const radius = 1.0;
-        const tubeRadius = 0.01;
-        const arrowRadius = 0.07;
+		this._rootNode = new Node$2(scene, {
+			position: [0, 0, 0],
+			scale: [5, 5, 5]
+		});
 
-        this._rootNode = new Node$2(scene, {
-            position: [0, 0, 0],
-            scale: [5, 5, 5]
-        });
+		const rootNode = this._rootNode;
 
-        const rootNode = this._rootNode;
+		const shapes = {
+			// Reusable geometries
 
-        const shapes = {// Reusable geometries
+			arrowHead: new ReadableGeometry(
+				rootNode,
+				buildCylinderGeometry({
+					radiusTop: 0.001,
+					radiusBottom: arrowRadius,
+					radialSegments: 32,
+					heightSegments: 1,
+					height: 0.2,
+					openEnded: false
+				})
+			),
 
-            arrowHead: new ReadableGeometry(rootNode, buildCylinderGeometry({
-                radiusTop: 0.001,
-                radiusBottom: arrowRadius,
-                radialSegments: 32,
-                heightSegments: 1,
-                height: 0.2,
-                openEnded: false
-            })),
+			arrowHeadBig: new ReadableGeometry(
+				rootNode,
+				buildCylinderGeometry({
+					radiusTop: 0.001,
+					radiusBottom: 0.09,
+					radialSegments: 32,
+					heightSegments: 1,
+					height: 0.25,
+					openEnded: false
+				})
+			),
 
-            arrowHeadBig: new ReadableGeometry(rootNode, buildCylinderGeometry({
-                radiusTop: 0.001,
-                radiusBottom: 0.09,
-                radialSegments: 32,
-                heightSegments: 1,
-                height: 0.25,
-                openEnded: false
-            })),
+			axis: new ReadableGeometry(
+				rootNode,
+				buildCylinderGeometry({
+					radiusTop: tubeRadius,
+					radiusBottom: tubeRadius,
+					radialSegments: 20,
+					heightSegments: 1,
+					height: radius,
+					openEnded: false
+				})
+			)
+		};
 
-            axis: new ReadableGeometry(rootNode, buildCylinderGeometry({
-                radiusTop: tubeRadius,
-                radiusBottom: tubeRadius,
-                radialSegments: 20,
-                heightSegments: 1,
-                height: radius,
-                openEnded: false
-            }))
-        };
+		const materials = {
+			// Reusable materials
 
-        const materials = { // Reusable materials
+			red: new PhongMaterial(rootNode, {
+				diffuse: [1, 0.0, 0.0],
+				emissive: [1, 0.0, 0.0],
+				ambient: [0.0, 0.0, 0.0],
+				specular: [0.6, 0.6, 0.3],
+				shininess: 80,
+				lineWidth: 2
+			}),
 
-            red: new PhongMaterial(rootNode, {
-                diffuse: [1, 0.0, 0.0],
-                emissive: [1, 0.0, 0.0],
-                ambient: [0.0, 0.0, 0.0],
-                specular: [.6, .6, .3],
-                shininess: 80,
-                lineWidth: 2
-            }),
+			green: new PhongMaterial(rootNode, {
+				diffuse: [0, 1.0, 0.0],
+				emissive: [1, 0.0, 0.0],
+				ambient: [0.0, 0.0, 0.0],
+				specular: [0.6, 0.6, 0.3],
+				shininess: 80,
+				lineWidth: 2
+			}),
 
-            green: new PhongMaterial(rootNode, {
-                diffuse: [0, 1.0, 0.0],
-                emissive: [1, 0.0, 0.0],
-                ambient: [0.0, 0.0, 0.0],
-                specular: [.6, .6, .3],
-                shininess: 80,
-                lineWidth: 2
-            }),
+			blue: new PhongMaterial(rootNode, {
+				diffuse: [0, 0.0, 1.0],
+				emissive: [1, 0.0, 0.0],
+				ambient: [0.0, 0.0, 0.0],
+				specular: [0.6, 0.6, 0.3],
+				shininess: 80,
+				lineWidth: 2
+			}),
 
-            blue: new PhongMaterial(rootNode, {
-                diffuse: [0, 0.0, 1.0],
-                emissive: [1, 0.0, 0.0],
-                ambient: [0.0, 0.0, 0.0],
-                specular: [.6, .6, .3],
-                shininess: 80,
-                lineWidth: 2
-            }),
+			highlightRed: new EmphasisMaterial(rootNode, {
+				// Emphasis for red rotation affordance hoop
+				edges: false,
+				fill: true,
+				fillColor: [1, 0, 0],
+				fillAlpha: 0.6
+			})
+		};
 
-            highlightRed: new EmphasisMaterial(rootNode, { // Emphasis for red rotation affordance hoop
-                edges: false,
-                fill: true,
-                fillColor: [1, 0, 0],
-                fillAlpha: 0.6
-            })
-        };
+		this._displayMeshes = {
+			plane: rootNode.addChild(
+				new Mesh(rootNode, {
+					geometry: new ReadableGeometry(rootNode, {
+						primitive: "triangles",
+						positions: [
+							0.5,
+							0.5,
+							0.0,
+							0.5,
+							-0.5,
+							0.0, // 0
+							-0.5,
+							-0.5,
+							0.0,
+							-0.5,
+							0.5,
+							0.0, // 1
+							0.5,
+							0.5,
+							-0.0,
+							0.5,
+							-0.5,
+							-0.0, // 2
+							-0.5,
+							-0.5,
+							-0.0,
+							-0.5,
+							0.5,
+							-0.0 // 3
+						],
+						indices: [0, 1, 2, 2, 3, 0]
+					}),
+					material: new PhongMaterial(rootNode, {
+						emissive: [0, 0.0, 0],
+						diffuse: [0, 0, 0],
+						backfaces: true
+					}),
+					opacity: 0.6,
+					ghosted: true,
+					pickable: false,
+					collidable: true,
+					clippable: false,
+					visible: false,
+					scale: [2.4, 2.4, 1]
+				}),
+				NO_STATE_INHERIT
+			),
 
-        this._displayMeshes = {
+			planeFrame: rootNode.addChild(
+				new Mesh(rootNode, {
+					// Visible frame
+					geometry: new ReadableGeometry(
+						rootNode,
+						buildTorusGeometry({
+							center: [0, 0, 0],
+							radius: 1.7,
+							tube: tubeRadius * 2,
+							radialSegments: 4,
+							tubeSegments: 4,
+							arc: Math.PI * 2.0
+						})
+					),
+					material: new PhongMaterial(rootNode, {
+						emissive: [0, 0, 0],
+						diffuse: [0, 0, 0],
+						specular: [0, 0, 0],
+						shininess: 0
+					}),
+					pickable: false,
+					collidable: false,
+					clippable: false,
+					visible: false,
+					scale: [1, 1, 0.1],
+					rotation: [0, 0, 45]
+				}),
+				NO_STATE_INHERIT
+			),
 
-            plane: rootNode.addChild(new Mesh(rootNode, {
-                geometry: new ReadableGeometry(rootNode, {
-                    primitive: "triangles",
-                    positions: [
-                        0.5, 0.5, 0.0, 0.5, -0.5, 0.0, // 0
-                        -0.5, -0.5, 0.0, -0.5, 0.5, 0.0, // 1
-                        0.5, 0.5, -0.0, 0.5, -0.5, -0.0, // 2
-                        -0.5, -0.5, -0.0, -0.5, 0.5, -0.0 // 3
-                    ],
-                    indices: [0, 1, 2, 2, 3, 0]
-                }),
-                material: new PhongMaterial(rootNode, {
-                    emissive: [0, 0.0, 0],
-                    diffuse: [0, 0, 0],
-                    backfaces: true
-                }),
-                opacity: 0.6,
-                ghosted: true,
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                scale: [2.4, 2.4, 1]
-            }), NO_STATE_INHERIT),
-
-            planeFrame: rootNode.addChild(new Mesh(rootNode, { // Visible frame
-                geometry: new ReadableGeometry(rootNode, buildTorusGeometry({
-                    center: [0, 0, 0],
-                    radius: 1.7,
-                    tube: tubeRadius * 2,
-                    radialSegments: 4,
-                    tubeSegments: 4,
-                    arc: Math.PI * 2.0
-                })),
-                material: new PhongMaterial(rootNode, {
-                    emissive: [0, 0, 0],
-                    diffuse: [0, 0, 0],
-                    specular: [0, 0, 0],
-                    shininess: 0
-                }),
-                pickable: false,
-                collidable: false,
-                clippable: false,
-                visible: false,
-                scale: [1, 1, .1],
-                rotation: [0, 0, 45]
-            }), NO_STATE_INHERIT),
-
-            center: rootNode.addChild(new Mesh(rootNode, {
-                geometry: new ReadableGeometry(rootNode, buildSphereGeometry({
-                    radius: 0.05
-                })),
-                material: materials.center,
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false
-            }), NO_STATE_INHERIT),
-
-            zAxisArrow: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHead,
-                material: materials.blue,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0.8, 0, 0], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false
-            }), NO_STATE_INHERIT),
-
-            zShaft: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.axis,
-                material: materials.blue,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius / 2, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                clippable: false,
-                pickable: false,
-                collidable: true,
-                visible: false
-            }), NO_STATE_INHERIT)
-        };
+			center: rootNode.addChild(
+				new Mesh(rootNode, {
+					geometry: new ReadableGeometry(
+						rootNode,
+						buildSphereGeometry({
+							radius: 0.05
+						})
+					),
+					material: materials.center,
+					pickable: false,
+					collidable: true,
+					clippable: false,
+					visible: false
+				}),
+				NO_STATE_INHERIT
+			),
 
-        this._affordanceMeshes = {
+			zAxisArrow: rootNode.addChild(
+				new Mesh(rootNode, {
+					geometry: shapes.arrowHead,
+					material: materials.blue,
+					matrix: (function () {
+						const translate = math.translateMat4c(0, radius + 0.1, 0, math.identityMat4());
+						const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0.8, 0, 0], math.identityMat4());
+						return math.mulMat4(rotate, translate, math.identityMat4());
+					})(),
+					pickable: false,
+					collidable: true,
+					clippable: false,
+					visible: false
+				}),
+				NO_STATE_INHERIT
+			),
 
-            planeFrame: rootNode.addChild(new Mesh(rootNode, {
-                geometry: new ReadableGeometry(rootNode, buildTorusGeometry({
-                    center: [0, 0, 0],
-                    radius: 2,
-                    tube: tubeRadius,
-                    radialSegments: 4,
-                    tubeSegments: 4,
-                    arc: Math.PI * 2.0
-                })),
-                material: new PhongMaterial(rootNode, {
-                    ambient: [1, 1, 1],
-                    diffuse: [0, 0, 0],
-                    emissive: [1, 1, 0]
-                }),
-                highlighted: true,
-                highlightMaterial: new EmphasisMaterial(rootNode, {
-                    edges: false,
-                    filled: true,
-                    fillColor: [1, 1, 0],
-                    fillAlpha: 1.0
-                }),
-                pickable: false,
-                collidable: false,
-                clippable: false,
-                visible: false,
-                scale: [1, 1, 1],
-                rotation: [0, 0, 45]
-            }), NO_STATE_INHERIT),
-
-            zAxisArrow: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHeadBig,
-                material: materials.blue,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0.8, 0, 0], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false
-            }), NO_STATE_INHERIT)
-        };
-    }
+			zShaft: rootNode.addChild(
+				new Mesh(rootNode, {
+					geometry: shapes.axis,
+					material: materials.blue,
+					matrix: (function () {
+						const translate = math.translateMat4c(0, radius / 2, 0, math.identityMat4());
+						const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+						return math.mulMat4(rotate, translate, math.identityMat4());
+					})(),
+					clippable: false,
+					pickable: false,
+					collidable: true,
+					visible: false
+				}),
+				NO_STATE_INHERIT
+			)
+		};
 
-    _bindEvents() {
+		this._affordanceMeshes = {
+			planeFrame: rootNode.addChild(
+				new Mesh(rootNode, {
+					geometry: new ReadableGeometry(
+						rootNode,
+						buildTorusGeometry({
+							center: [0, 0, 0],
+							radius: 2,
+							tube: tubeRadius,
+							radialSegments: 4,
+							tubeSegments: 4,
+							arc: Math.PI * 2.0
+						})
+					),
+					material: new PhongMaterial(rootNode, {
+						ambient: [1, 1, 1],
+						diffuse: [0, 0, 0],
+						emissive: [1, 1, 0]
+					}),
+					highlighted: true,
+					highlightMaterial: new EmphasisMaterial(rootNode, {
+						edges: false,
+						filled: true,
+						fillColor: [1, 1, 0],
+						fillAlpha: 1.0
+					}),
+					pickable: false,
+					collidable: false,
+					clippable: false,
+					visible: false,
+					scale: [1, 1, 1],
+					rotation: [0, 0, 45]
+				}),
+				NO_STATE_INHERIT
+			),
 
-        const rootNode = this._rootNode;
-        const lastCanvasPos = math.vec2();
-        const camera = this._viewer.camera;
-        const scene = this._viewer.scene;
+			zAxisArrow: rootNode.addChild(
+				new Mesh(rootNode, {
+					geometry: shapes.arrowHeadBig,
+					material: materials.blue,
+					matrix: (function () {
+						const translate = math.translateMat4c(0, radius + 0.1, 0, math.identityMat4());
+						const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0.8, 0, 0], math.identityMat4());
+						return math.mulMat4(rotate, translate, math.identityMat4());
+					})(),
+					pickable: false,
+					collidable: true,
+					clippable: false,
+					visible: false
+				}),
+				NO_STATE_INHERIT
+			)
+		};
+	}
 
-        let deltaUpdate = 0;
-        let waitForTick = false;
+	_bindEvents() {
+		const rootNode = this._rootNode;
+		const lastCanvasPos = math.vec2();
+		const camera = this._viewer.camera;
+		const scene = this._viewer.scene;
 
-        { // Keep gizmo screen size constant
+		let deltaUpdate = 0;
+		let waitForTick = false;
 
-            const tempVec3a = math.vec3([0, 0, 0]);
-            let lastDist = -1;
+		{
+			// Keep gizmo screen size constant
 
-            this._onCameraViewMatrix = scene.camera.on("viewMatrix", () => {
-            });
+			const tempVec3a = math.vec3([0, 0, 0]);
+			let lastDist = -1;
 
-            this._onCameraProjMatrix = scene.camera.on("projMatrix", () => {
-            });
+			this._onCameraViewMatrix = scene.camera.on("viewMatrix", () => {
+			});
 
-            this._onSceneTick = scene.on("tick", () => {
+			this._onCameraProjMatrix = scene.camera.on("projMatrix", () => {
+			});
 
-                waitForTick = false;
-                const dist = Math.abs(math.lenVec3(math.subVec3(scene.camera.eye, this._pos, tempVec3a)));
+			this._onSceneTick = scene.on("tick", () => {
+				waitForTick = false;
+				const dist = Math.abs(math.lenVec3(math.subVec3(scene.camera.eye, this._pos, tempVec3a)));
 
-                if (dist !== lastDist) {
-                    if (camera.projection === "perspective") {
-                        const worldSize = (Math.tan(camera.perspective.fov * math.DEGTORAD)) * dist;
-                        const size = 0.07 * worldSize;
-                        rootNode.scale = [size, size, size];
-                        lastDist = dist;
-                    }
-                }
+				if (dist !== lastDist) {
+					if (camera.projection === "perspective") {
+						const worldSize = Math.tan(camera.perspective.fov * math.DEGTORAD) * dist;
+						const size = 0.07 * worldSize;
+						rootNode.scale = [size, size, size];
+						lastDist = dist;
+					}
+				}
 
-                if (camera.projection === "ortho") {
-                    const worldSize = camera.ortho.scale / 10;
-                    const size = worldSize;
-                    rootNode.scale = [size, size, size];
-                    lastDist = dist;
-                }
+				if (camera.projection === "ortho") {
+					const worldSize = camera.ortho.scale / 10;
+					const size = worldSize;
+					rootNode.scale = [size, size, size];
+					lastDist = dist;
+				}
 
-                if (deltaUpdate !== 0) {
-                    moveSectionPlane(deltaUpdate);
-                    deltaUpdate = 0;
-                }
-            });
-        }
+				if (deltaUpdate !== 0) {
+					moveSectionPlane(deltaUpdate);
+					deltaUpdate = 0;
+				}
+			});
+		}
 
-        const getClickCoordsWithinElement = (function () {
-            const canvasPos = new Float64Array(2);
-            return function (event) {
-                if (!event) {
-                    event = window.event;
-                    canvasPos[0] = event.x;
-                    canvasPos[1] = event.y;
-                } else {
-                    var element = event.target;
-                    var totalOffsetLeft = 0;
-                    var totalOffsetTop = 0;
-
-                    while (element.offsetParent) {
-                        totalOffsetLeft += element.offsetLeft;
-                        totalOffsetTop += element.offsetTop;
-                        element = element.offsetParent;
-                    }
-                    canvasPos[0] = event.pageX - totalOffsetLeft;
-                    canvasPos[1] = event.pageY - totalOffsetTop;
-                }
-                return canvasPos;
-            };
-        })();
+		const getClickCoordsWithinElement = (function () {
+			const canvasPos = new Float64Array(2);
+			return function (event) {
+				if (!event) {
+					event = window.event;
+					canvasPos[0] = event.x;
+					canvasPos[1] = event.y;
+				} else {
+					var element = event.target;
+					var totalOffsetLeft = 0;
+					var totalOffsetTop = 0;
 
-        const moveSectionPlane = (delta) => {
-            const pos = this._sectionPlane.pos;
-            const dir = this._sectionPlane.dir;
-            math.addVec3(pos, math.mulVec3Scalar(dir, 0.1 * delta * this._plugin.getDragSensitivity(), math.vec3()));
-            this._sectionPlane.pos = pos;
-        };
+					while (element.offsetParent) {
+						totalOffsetLeft += element.offsetLeft;
+						totalOffsetTop += element.offsetTop;
+						element = element.offsetParent;
+					}
+					canvasPos[0] = event.pageX - totalOffsetLeft;
+					canvasPos[1] = event.pageY - totalOffsetTop;
+				}
+				return canvasPos;
+			};
+		})();
 
-        {
-            let down = false;
+		const moveSectionPlane = (delta) => {
+			const pos = this._sectionPlane.pos;
+			const dir = this._sectionPlane.dir;
+			math.addVec3(pos, math.mulVec3Scalar(dir, 0.1 * delta * this._plugin.getDragSensitivity(), math.vec3()));
+			this._sectionPlane.pos = pos;
+		};
 
-            this._plugin._controlElement.addEventListener("mousedown", this._canvasMouseDownListener = (e) => {
-                e.preventDefault();
-                if (!this._visible) {
-                    return;
-                }
-                this._viewer.cameraControl.pointerEnabled = false;
-                switch (e.which) {
-                    case 1: // Left button
-                        down = true;
-                        var canvasPos = getClickCoordsWithinElement(e);
-                        lastCanvasPos[0] = canvasPos[0];
-                        lastCanvasPos[1] = canvasPos[1];
-                        break;
-                }
-            });
+		{
+			let down = false;
 
-            this._plugin._controlElement.addEventListener("mousemove", this._canvasMouseMoveListener = (e) => {
-                if (!this._visible) {
-                    return;
-                }
-                if (!down) {
-                    return;
-                }
-                if (waitForTick) {    // Limit changes detection to one per frame
-                    return;
-                }
-                var canvasPos = getClickCoordsWithinElement(e);
-                const x = canvasPos[0];
-                const y = canvasPos[1];
-                moveSectionPlane(y - lastCanvasPos[1]);
-                lastCanvasPos[0] = x;
-                lastCanvasPos[1] = y;
-            });
+			this._plugin._controlElement.addEventListener(
+				"mousedown",
+				(this._canvasMouseDownListener = (e) => {
+					e.preventDefault();
+					if (!this._visible) {
+						return;
+					}
+					this._viewer.cameraControl.pointerEnabled = false;
+					switch (e.which) {
+						case 1: // Left button
+							down = true;
+							var canvasPos = getClickCoordsWithinElement(e);
+							lastCanvasPos[0] = canvasPos[0];
+							lastCanvasPos[1] = canvasPos[1];
+							break;
+					}
+				})
+			);
 
-            this._plugin._controlElement.addEventListener("mouseup", this._canvasMouseUpListener = (e) => {
-                if (!this._visible) {
-                    return;
-                }
-                this._viewer.cameraControl.pointerEnabled = true;
-                if (!down) {
-                    return;
-                }
-                switch (e.which) {
-                                    }
-                down = false;
-            });
+			this._plugin._controlElement.addEventListener(
+				"mousemove",
+				(this._canvasMouseMoveListener = (e) => {
+					if (!this._visible) {
+						return;
+					}
+					if (!down) {
+						return;
+					}
+					if (waitForTick) {
+						// Limit changes detection to one per frame
+						return;
+					}
+					var canvasPos = getClickCoordsWithinElement(e);
+					const x = canvasPos[0];
+					const y = canvasPos[1];
+					moveSectionPlane(y - lastCanvasPos[1]);
+					lastCanvasPos[0] = x;
+					lastCanvasPos[1] = y;
+				})
+			);
 
-            this._plugin._controlElement.addEventListener("wheel", this._canvasWheelListener = (e) => {
-                if (!this._visible) {
-                    return;
-                }
-                deltaUpdate += Math.max(-1, Math.min(1, -e.deltaY * 40));
-            });
-        }
+			this._plugin._controlElement.addEventListener(
+				"mouseup",
+				(this._canvasMouseUpListener = (e) => {
+					if (!this._visible) {
+						return;
+					}
+					this._viewer.cameraControl.pointerEnabled = true;
+					if (!down) {
+						return;
+					}
+					switch (e.which) {
+											}
+					down = false;
+				})
+			);
 
-        {
-            let touchStartY, touchEndY;
-            let lastTouchY = null;
+			this._plugin._controlElement.addEventListener(
+				"wheel",
+				(this._canvasWheelListener = (e) => {
+					if (!this._visible) {
+						return;
+					}
+					deltaUpdate += Math.max(-1, Math.min(1, -e.deltaY * 40));
+				})
+			);
+		}
 
-            this._plugin._controlElement.addEventListener("touchstart", this._handleTouchStart = (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                if (!this._visible) {
-                    return;
-                }
-                touchStartY = e.touches[0].clientY;
-                lastTouchY = touchStartY;
-                deltaUpdate = 0;
-            });
+		{
+			let touchStartY, touchEndY;
+			let lastTouchY = null;
 
-            this._plugin._controlElement.addEventListener("touchmove", this._handleTouchMove = (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                if (!this._visible) {
-                    return;
-                }
-                if (waitForTick) {    // Limit changes detection to one per frame
-                    return;
-                }
-                waitForTick = true;
-                touchEndY = e.touches[0].clientY;
-                if (lastTouchY !== null) {
-                    deltaUpdate += touchEndY - lastTouchY;
-                }
-                lastTouchY = touchEndY;
-            });
+			this._plugin._controlElement.addEventListener(
+				"touchstart",
+				(this._handleTouchStart = (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					if (!this._visible) {
+						return;
+					}
+					touchStartY = e.touches[0].clientY;
+					lastTouchY = touchStartY;
+					deltaUpdate = 0;
+				})
+			);
 
-            this._plugin._controlElement.addEventListener("touchend", this._handleTouchEnd = (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                if (!this._visible) {
-                    return;
-                }
-                touchStartY = null;
-                touchEndY = null;
-                deltaUpdate = 0;
-            });
-        }
-    }
+			this._plugin._controlElement.addEventListener(
+				"touchmove",
+				(this._handleTouchMove = (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					if (!this._visible) {
+						return;
+					}
+					if (waitForTick) {
+						// Limit changes detection to one per frame
+						return;
+					}
+					waitForTick = true;
+					touchEndY = e.touches[0].clientY;
+					if (lastTouchY !== null) {
+						deltaUpdate += touchEndY - lastTouchY;
+					}
+					lastTouchY = touchEndY;
+				})
+			);
 
-    _destroy() {
-        this._unbindEvents();
-        this._destroyNodes();
-    }
+			this._plugin._controlElement.addEventListener(
+				"touchend",
+				(this._handleTouchEnd = (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					if (!this._visible) {
+						return;
+					}
+					touchStartY = null;
+					touchEndY = null;
+					deltaUpdate = 0;
+				})
+			);
+			this._plugin._controlElement.addEventListener("touchcancel", this._handleTouchEnd);
+		}
+	}
 
-    _unbindEvents() {
+	_destroy() {
+		this._unbindEvents();
+		this._destroyNodes();
+	}
 
-        const viewer = this._viewer;
-        const scene = viewer.scene;
-        const canvas = scene.canvas.canvas;
-        const camera = viewer.camera;
-        const controlElement = this._plugin._controlElement;
+	_unbindEvents() {
+		const viewer = this._viewer;
+		const scene = viewer.scene;
+		const canvas = scene.canvas.canvas;
+		const camera = viewer.camera;
+		const controlElement = this._plugin._controlElement;
 
-        scene.off(this._onSceneTick);
+		scene.off(this._onSceneTick);
 
-        canvas.removeEventListener("mousedown", this._canvasMouseDownListener);
-        canvas.removeEventListener("mousemove", this._canvasMouseMoveListener);
-        canvas.removeEventListener("mouseup", this._canvasMouseUpListener);
-        canvas.removeEventListener("wheel", this._canvasWheelListener);
+		canvas.removeEventListener("mousedown", this._canvasMouseDownListener);
+		canvas.removeEventListener("mousemove", this._canvasMouseMoveListener);
+		canvas.removeEventListener("mouseup", this._canvasMouseUpListener);
+		canvas.removeEventListener("wheel", this._canvasWheelListener);
 
-        controlElement.removeEventListener("touchstart", this._handleTouchStart);
-        controlElement.removeEventListener("touchmove", this._handleTouchMove);
-        controlElement.removeEventListener("touchend", this._handleTouchEnd);
+		controlElement.removeEventListener("touchstart", this._handleTouchStart);
+		controlElement.removeEventListener("touchmove", this._handleTouchMove);
+		controlElement.removeEventListener("touchend", this._handleTouchEnd);
+		controlElement.removeEventListener("touchcancel", this._handleTouchEnd);
 
-        camera.off(this._onCameraViewMatrix);
-        camera.off(this._onCameraProjMatrix);
-    }
+		camera.off(this._onCameraViewMatrix);
+		camera.off(this._onCameraProjMatrix);
+	}
 
-    _destroyNodes() {
-        this._setSectionPlane(null);
-        this._rootNode.destroy();
-        this._displayMeshes = {};
-        this._affordanceMeshes = {};
-    }
+	_destroyNodes() {
+		this._setSectionPlane(null);
+		this._rootNode.destroy();
+		this._displayMeshes = {};
+		this._affordanceMeshes = {};
+	}
 }
 
 /**