@xeokit/xeokit-sdk 2.6.63 → 2.6.65

package/dist/xeokit-sdk.es.js

@@ -1055,13 +1055,10 @@ class PointerLens {
         this.scene = this.viewer.scene;
 
         this._lensCursorDiv = document.createElement('div');
-        this.viewer.scene.canvas.canvas.parentNode.insertBefore(this._lensCursorDiv, this.viewer.scene.canvas.canvas);
-        this._lensCursorDiv.style.background = "pink";
-        this._lensCursorDiv.style.border = "2px solid red";
-        this._lensCursorDiv.style.borderRadius = "20px";
-        this._lensCursorDiv.style.width = "10px";
-        this._lensCursorDiv.style.height = "10px";
-        this._lensCursorDiv.style.margin = "-200px -200px";
+        this._lensParams = { canvasSize: 300, cursorBorder: 2, cursorSize: 10 };
+        this._lensCursorDiv.style.borderRadius = "50%";
+        this._lensCursorDiv.style.width  = this._lensParams.cursorSize + "px";
+        this._lensCursorDiv.style.height = this._lensParams.cursorSize + "px";
         this._lensCursorDiv.style.zIndex = "100000";
         this._lensCursorDiv.style.position = "absolute";
         this._lensCursorDiv.style.pointerEvents = "none";
@@ -1074,8 +1071,8 @@ class PointerLens {
         this._lensContainer.style.background = "white";
     //    this._lensContainer.style.opacity = "0";
         this._lensContainer.style.borderRadius = "50%";
-        this._lensContainer.style.width = "300px";
-        this._lensContainer.style.height = "300px";
+        this._lensContainer.style.width  = this._lensParams.canvasSize + "px";
+        this._lensContainer.style.height = this._lensParams.canvasSize + "px";
         
         this._lensContainer.style.zIndex = "15000";
         this._lensContainer.style.position = "absolute";
@@ -1087,13 +1084,14 @@ class PointerLens {
         // this._lensCanvas.style.background = "darkblue";
         this._lensCanvas.style.borderRadius = "50%";
 
-        this._lensCanvas.style.width = "300px";
-        this._lensCanvas.style.height = "300px";
+        this._lensCanvas.style.width  = this._lensParams.canvasSize + "px";
+        this._lensCanvas.style.height = this._lensParams.canvasSize + "px";
         this._lensCanvas.style.zIndex = "15000";
         this._lensCanvas.style.pointerEvents = "none";
 
         document.body.appendChild(this._lensContainer);
         this._lensContainer.appendChild(this._lensCanvas);
+        this._lensContainer.appendChild(this._lensCursorDiv);
 
         this._lensCanvasContext = this._lensCanvas.getContext('2d');
         this._canvasElement = this.viewer.scene.canvas.canvas;
@@ -1111,7 +1109,7 @@ class PointerLens {
 
         this._active = (cfg.active !== false);
         this._visible = false;
-        this._snapped = false;
+        this.snapped = false;
 
         this._onViewerRendering = this.viewer.scene.on("rendering", () => {
             if (this._active && this._visible) {
@@ -1158,21 +1156,13 @@ class PointerLens {
             this._lensCanvas.height // destination height
         );
 
-        const centerLensCanvas = [
-            (lensRect.left + lensRect.right) / 2 - canvasRect.left,
-            (lensRect.top + lensRect.bottom) / 2 - canvasRect.top
-        ];
+        const middle = this._lensParams.canvasSize / 2 - this._lensParams.cursorSize / 2 - this._lensParams.cursorBorder;
 
-        if (this._snappedCanvasPos) {
-            const deltaX = this._snappedCanvasPos[0] - this._canvasPos[0];
-            const deltaY = this._snappedCanvasPos[1] - this._canvasPos[1];
+        const deltaX = this._snappedCanvasPos ? (this._snappedCanvasPos[0] - this._canvasPos[0]) : 0;
+        const deltaY = this._snappedCanvasPos ? (this._snappedCanvasPos[1] - this._canvasPos[1]) : 0;
 
-            this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] + deltaX * this._zoomLevel - 10}px`;
-            this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] + deltaY * this._zoomLevel - 10}px`;
-        } else {
-            this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] - 10}px`;
-            this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] - 10}px`;
-        }
+        this._lensCursorDiv.style.left = `${middle + deltaX * this._zoomLevel}px`;
+        this._lensCursorDiv.style.top  = `${middle + deltaY * this._zoomLevel}px`;
     }
 
 
@@ -1240,14 +1230,10 @@ class PointerLens {
      * @private
      */
     set snapped(snapped) {
-     this._snapped = snapped;
-        if (snapped) {
-            this._lensCursorDiv.style.background = "greenyellow";
-            this._lensCursorDiv.style.border = "2px solid green";
-        } else {
-            this._lensCursorDiv.style.background = "pink";
-            this._lensCursorDiv.style.border = "2px solid red";
-        }
+        this._snapped = snapped;
+        const [ bg, border ] = snapped ? [ "greenyellow", "green" ] : [ "pink", "red" ];
+        this._lensCursorDiv.style.background = bg;
+        this._lensCursorDiv.style.border = this._lensParams.cursorBorder + "px solid " + border;
     }
 
     /**
@@ -1259,19 +1245,19 @@ class PointerLens {
     get snapped() {
         return this._snapped;
     }
-    
+
+    _updateActiveVisible() {
+        this._lensContainer.style.visibility = (this._active && this._visible) ? "visible" : "hidden";
+        this.update();
+    }
+
     /**
      * Sets if this PointerLens is active.
      * @param active
      */
     set active(active) {
         this._active = active;
-        this._lensContainer.style.visibility = (active && this._visible) ? "visible" : "hidden";
-        if (!active || !this._visible ) {
-            this._lensCursorDiv.style.marginLeft = `-100px`;
-            this._lensCursorDiv.style.marginTop = `-100px`;
-        }
-        this.update();
+        this._updateActiveVisible();
     }
 
     /**
@@ -1290,12 +1276,7 @@ class PointerLens {
      */
     set visible(visible) {
         this._visible = visible;
-        this._lensContainer.style.visibility = (visible && this._active) ? "visible" : "hidden";
-        if (!visible || !this._active) {
-            this._lensCursorDiv.style.marginLeft = `-100px`;
-            this._lensCursorDiv.style.marginTop = `-100px`;
-        }
-        this.update();
+        this._updateActiveVisible();
     }
 
     /**
@@ -9586,7 +9567,8 @@ const os = {
     }
 };
 
-function addContextMenuListener(elem, callback) {
+//failCallback will be called when the press is not long enough to considered a long press
+function addContextMenuListener(elem, callback, failCallback = () => {}) {
     if (!elem || !callback) return;
 
     let timeout = null;
@@ -9640,6 +9622,7 @@ function addContextMenuListener(elem, callback) {
     const touchEndHandler = (event) => {
         event.preventDefault();
         if (timeout) {
+            failCallback(event);
             clearTimeout(timeout);
             timeout = null;
         }
@@ -13781,6 +13764,8 @@ const WAITING_FOR_TARGET_LONG_TOUCH_END$1 = 8;
 
 const TOUCH_CANCELING$1 = 7;
 
+const tmpVec2$1 = math.vec2();
+
 /**
  * Creates {@link AngleMeasurement}s from touch input.
  *
@@ -13919,6 +13904,19 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
         };
 
+        const copyCanvasPos = (event, dst) => {
+            dst[0] = event.clientX;
+            dst[1] = event.clientY;
+            transformToNode(canvas.ownerDocument.documentElement, canvas, dst);
+            return dst;
+        };
+
+        const toBodyPos = (pos, dst) => {
+            dst.set(pos);
+            transformToNode(canvas, canvas.ownerDocument.documentElement, dst);
+            return dst;
+        };
+
         canvas.addEventListener("touchstart", this._onCanvasTouchStart = (event) => {
 
             const currentNumTouches = event.touches.length;
@@ -13932,11 +13930,8 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             }
 
             const touch = event.touches[0];
-            const touchX = touch.clientX;
-            const touchY = touch.clientY;
-
-            touchStartCanvasPos.set([touchX, touchY]);
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchStartCanvasPos);
+            touchMoveCanvasPos.set(touchStartCanvasPos);
 
             switch (this._touchState) {
 
@@ -13952,7 +13947,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                     });
                     if (snapPickResult && snapPickResult.snapped) {
                         pointerWorldPos.set(snapPickResult.worldPos);
-                        this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                        this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2$1));
                     } else {
                         const pickResult = scene.pick({
                             canvasPos: touchMoveCanvasPos,
@@ -13960,7 +13955,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                         });
                         if (pickResult && pickResult.worldPos) {
                             pointerWorldPos.set(pickResult.worldPos);
-                            this.pointerCircle.start(pickResult.canvasPos);
+                            this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2$1));
                         } else {
                             return;
                         }
@@ -14067,7 +14062,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                     this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
                                     this.pointerLens.snapped = true;
                                 }
-                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2$1));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentAngleMeasurement.corner.worldPos = snapPickResult.worldPos;
                                 this._currentAngleMeasurement.corner.entity = snapPickResult.entity;
@@ -14089,7 +14084,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                         this.pointerLens.cursorPos = pickResult.canvasPos;
                                         this.pointerLens.snapped = false;
                                     }
-                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2$1));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentAngleMeasurement.corner.worldPos = pickResult.worldPos;
                                     this._currentAngleMeasurement.corner.entity = pickResult.entity;
@@ -14160,7 +14155,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                     this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
                                     this.pointerLens.snapped = true;
                                 }
-                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2$1));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentAngleMeasurement.target.worldPos = snapPickResult.worldPos;
                                 this._currentAngleMeasurement.target.entity = snapPickResult.entity;
@@ -14182,7 +14177,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                         this.pointerLens.cursorPos = pickResult.canvasPos;
                                         this.pointerLens.snapped = false;
                                     }
-                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2$1));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentAngleMeasurement.target.worldPos = pickResult.worldPos;
                                     this._currentAngleMeasurement.target.entity = pickResult.entity;
@@ -14246,14 +14241,11 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             }
 
             const touch = event.touches[0];
-            const touchX = touch.clientX;
-            const touchY = touch.clientY;
-
             if (touch.identifier !== touchId) {
                 return;
             }
 
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchMoveCanvasPos);
 
             let snapPickResult;
             let pickResult;
@@ -14423,9 +14415,6 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             }
 
             const touch = event.changedTouches[0];
-            const touchX = touch.clientX;
-            const touchY = touch.clientY;
-
             if (touch.identifier !== touchId) {
                 return;
             }
@@ -14435,7 +14424,10 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                 longTouchTimeout = null;
             }
 
-            touchEndCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchEndCanvasPos);
+
+            const touchX = touchEndCanvasPos[0];
+            const touchY = touchEndCanvasPos[1];
 
             switch (this._touchState) {
 
@@ -14916,6 +14908,9 @@ class Annotation extends Marker {
             addContextMenuListener(this._marker, e => {
                 e.preventDefault();
                 this.plugin.fire("contextmenu", this);
+            }, e => {
+                e.preventDefault();
+                this.plugin.fire("markerClicked", this);
             });
             this._marker.addEventListener("mouseenter", () => {
                 this.plugin.fire("markerMouseEnter", this);
@@ -66120,7 +66115,7 @@ class VBOInstancingLinesLayer {
 
         let pickFlag = (visible && !culled && pickable) ? RENDER_PASSES.PICK : RENDER_PASSES.NOT_RENDERED;
 
-        const clippableFlag = !!(flags & ENTITY_FLAGS.CLIPPABLE) ? 255 : 0;
+        const clippableFlag = !!(flags & ENTITY_FLAGS.CLIPPABLE) ? 1 : 0;
 
         let vertFlag = 0;
         vertFlag |= colorFlag;
@@ -80697,8 +80692,7 @@ class DTXTrianglesLayer {
                 worldPos[2] = positions[i + 2];
                 worldPos[3] = 1.0;
                 math.decompressPosition(worldPos, positionsDecodeMatrix);
-                math.transformPoint4(this.model.worldMatrix, worldPos, worldPos);
-                math.transformPoint4(this.model.worldMatrix, worldPos, worldPos);
+                math.mulMat4v4(this.model.worldMatrix, worldPos, worldPos);
                 worldPos[0] += offsetX;
                 worldPos[1] += offsetY;
                 worldPos[2] += offsetZ;
@@ -89874,6 +89868,8 @@ const WAITING_FOR_TARGET_LONG_TOUCH_END = 5;
 
 const TOUCH_CANCELING = 7;
 
+const tmpVec2 = math.vec2();
+
 /**
  * Creates {@link DistanceMeasurement}s from touch input.
  *
@@ -90020,6 +90016,19 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
         };
 
+        const copyCanvasPos = (event, dst) => {
+            dst[0] = event.clientX;
+            dst[1] = event.clientY;
+            transformToNode(canvas.ownerDocument.documentElement, canvas, dst);
+            return dst;
+        };
+
+        const toBodyPos = (pos, dst) => {
+            dst.set(pos);
+            transformToNode(canvas, canvas.ownerDocument.documentElement, dst);
+            return dst;
+        };
+
         canvas.addEventListener("touchstart", this._onCanvasTouchStart = (event) => {
 
             const currentNumTouches = event.touches.length;
@@ -90033,16 +90042,8 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             }
 
             const touch = event.touches[0];
-
-            // Get the canvas's bounding rectangle
-            const rect = canvas.getBoundingClientRect();
-
-            // Calculate the touch position relative to the canvas
-            const touchX = touch.clientX - rect.left;
-            const touchY = touch.clientY - rect.top;
-
-            touchStartCanvasPos.set([touchX, touchY]);
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchStartCanvasPos);
+            touchMoveCanvasPos.set(touchStartCanvasPos);
 
             switch (this._touchState) {
 
@@ -90058,7 +90059,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                     });
                     if (snapPickResult && snapPickResult.snapped) {
                         pointerWorldPos.set(snapPickResult.worldPos);
-                        this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                        this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
                     } else {
                         const pickResult = scene.pick({
                             canvasPos: touchMoveCanvasPos,
@@ -90066,7 +90067,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                         });
                         if (pickResult && pickResult.worldPos) {
                             pointerWorldPos.set(pickResult.worldPos);
-                            this.pointerCircle.start(pickResult.canvasPos);
+                            this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
                         } else {
                             return;
                         }
@@ -90170,7 +90171,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                                     this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
                                     this.pointerLens.snapped = true;
                                 }
-                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentDistanceMeasurement.target.worldPos = snapPickResult.worldPos;
                                 this._currentDistanceMeasurement.target.entity = snapPickResult.entity;
@@ -90188,7 +90189,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                                         this.pointerLens.cursorPos = pickResult.canvasPos;
                                         this.pointerLens.snapped = false;
                                     }
-                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentDistanceMeasurement.target.worldPos = pickResult.worldPos;
                                     this._currentDistanceMeasurement.target.entity = pickResult.entity;
@@ -90247,19 +90248,11 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             }
 
             const touch = event.touches[0];
-
-            // Get the canvas's bounding rectangle
-            const rect = canvas.getBoundingClientRect();
-
-            // Calculate the touch position relative to the canvas
-            const touchX = touch.clientX - rect.left;
-            const touchY = touch.clientY - rect.top;
-            
             if (touch.identifier !== touchId) {
                 return;
             }
 
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchMoveCanvasPos);
 
             let snapPickResult;
             let pickResult;
@@ -90421,14 +90414,6 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             }
 
             const touch = event.changedTouches[0];
-
-            // Get the canvas's bounding rectangle
-            const rect = canvas.getBoundingClientRect();
-
-            // Calculate the touch position relative to the canvas
-            const touchX = touch.clientX - rect.left;
-            const touchY = touch.clientY - rect.top;
-
             if (touch.identifier !== touchId) {
                 return;
             }
@@ -90438,7 +90423,10 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                 longTouchTimeout = null;
             }
 
-            touchEndCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchEndCanvasPos);
+
+            const touchX = touchEndCanvasPos[0];
+            const touchY = touchEndCanvasPos[1];
 
             switch (this._touchState) {
 
@@ -97135,6 +97123,14 @@ class MousePanRotateDollyHandler {
             keyDown[keyCode] = false;
         });
 
+        document.addEventListener("visibilitychange", this._onVisibilityChange = () => {
+            keyDown.splice(0);
+        });
+
+        window.addEventListener("blur", this._onBlur = () => {
+            keyDown.splice(0);
+        });
+
         function setMousedownState(pick = true) {
             setMousedownPositions();
             if (pick) {
@@ -97400,6 +97396,8 @@ class MousePanRotateDollyHandler {
 
         document.removeEventListener("keydown", this._documentKeyDownHandler);
         document.removeEventListener("keyup", this._documentKeyUpHandler);
+        document.removeEventListener("visibilitychange", this._onVisibilityChange);
+        window.removeEventListener("blur", this._onBlur);
         canvas.removeEventListener("mousedown", this._mouseDownHandler);
         document.removeEventListener("mousemove", this._documentMouseMoveHandler);
         canvas.removeEventListener("mousemove", this._canvasMouseMoveHandler);
@@ -97955,6 +97953,14 @@ class KeyboardPanRotateDollyHandler {
             }
         });
 
+        document.addEventListener("visibilitychange", this._onVisibilityChange = () => {
+            keyDownMap.splice(0);
+        });
+
+        window.addEventListener("blur", this._onBlur = () => {
+            keyDownMap.splice(0);
+        });
+
         this._onTick = scene.on("tick", (e) => {
 
             if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
@@ -98084,6 +98090,8 @@ class KeyboardPanRotateDollyHandler {
 
         this._scene.input.off(this._onSceneMouseMove);
         this._scene.input.off(this._onSceneKeyDown);
+        document.removeEventListener("visibilitychange", this._onVisibilityChange);
+        window.removeEventListener("blur", this._onBlur);
         this._scene.input.off(this._onSceneKeyUp);
     }
 }
@@ -120732,322 +120740,336 @@ class Control {
          */
         this.id = null;
 
-        this._viewer = plugin.viewer;
+        const viewer = plugin.viewer;
+        const camera = viewer.camera;
+        const cameraControl = viewer.cameraControl;
+        const scene = viewer.scene;
+        const canvas = scene.canvas.canvas;
 
         this._visible = false;
-        this._pos = math.vec3(); // Full-precision position of the center of the Control
-        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
+        let ignoreNextSectionPlaneDirUpdate = false;
 
-        this._ignoreNextSectionPlaneDirUpdate = false;
+        // Builds the Entities that represent this Control.
+        const NO_STATE_INHERIT = false;
+        const arrowLength = 1.0;
+        const handleRadius = 0.09;
+        const tubeRadius = 0.01;
 
-        this._createNodes();
-        this._bindEvents();
-    }
+        const rootNode = new Node$2(scene, { // Root of Node graph that represents this control in the 3D scene
+            position: [0, 0, 0],
+            scale: [5, 5, 5],
+            isObject: false
+        });
 
-    /**
-     * Called by SectionPlanesPlugin to assign this Control to a SectionPlane.
-     * SectionPlanesPlugin keeps SectionPlaneControls in a reuse pool.
-     * Call with a null or undefined value to disconnect the Control 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;
-                }
-            });
-        }
-    }
+        const pos = math.vec3();
+        const setPos = (function() {
+            const origin = math.vec3();
+            const rtcPos = math.vec3();
+            return function(p) {
+                pos.set(p);
+                worldToRTCPos(p, origin, rtcPos);
+                rootNode.origin = origin;
+                rootNode.position = rtcPos;
+            };
+        })();
 
-    /**
-     * Gets the {@link SectionPlane} controlled by this Control.
-     * @returns {SectionPlane} The SectionPlane.
-     */
-    get sectionPlane() {
-        return this._sectionPlane;
-    }
+        const arrowGeometry = (radiusBottom, height) => new ReadableGeometry(rootNode, buildCylinderGeometry({
+            radiusTop: 0.001,
+            radiusBottom: radiusBottom,
+            radialSegments: 32,
+            heightSegments: 1,
+            height: height,
+            openEnded: false
+        }));
 
-    /** @private */
-    _setPos(xyz) {
+        const tubeGeometry = (radius, height, radialSegments) => new ReadableGeometry(rootNode, buildCylinderGeometry({
+            radiusTop: radius,
+            radiusBottom: radius,
+            radialSegments: radialSegments,
+            heightSegments: 1,
+            height: height,
+            openEnded: false
+        }));
 
-        this._pos.set(xyz);
+        const torusGeometry = (tube, arcFraction, tubeSegments) => new ReadableGeometry(rootNode, buildTorusGeometry({
+            radius: arrowLength - 0.2,
+            tube: tube,
+            radialSegments: 64,
+            tubeSegments: tubeSegments,
+            arc: (Math.PI * 2.0) * arcFraction
+        }));
 
-        worldToRTCPos(this._pos, this._origin, this._rtcPos);
+        const shapes = {// Reusable geometries
 
-        this._rootNode.origin = this._origin;
-        this._rootNode.position = this._rtcPos;
-    }
+            curve:       torusGeometry(tubeRadius,   0.25, 14),
+            curveHandle: torusGeometry(handleRadius, 0.25, 14),
+            hoop:        torusGeometry(tubeRadius,   1,     8),
 
-    /** @private */
-    _setDir(xyz) {
-        this._baseDir.set(xyz);
-        this._rootNode.quaternion = math.vec3PairToQuaternion(zeroVec$1, xyz, quat$1);
-    }
+            arrowHead:       arrowGeometry(0.07, 0.2),
+            arrowHeadBig:    arrowGeometry(0.09, 0.25),
+            arrowHeadHandle: tubeGeometry(handleRadius, 0.37, 8),
 
-    _setSectionPlaneDir(dir) {
-        if (this._sectionPlane) {
-            this._ignoreNextSectionPlaneDirUpdate = true;
-            this._sectionPlane.dir = dir;
-        }
-    }
+            axis:       tubeGeometry(tubeRadius,   arrowLength, 20),
+            axisHandle: tubeGeometry(handleRadius, arrowLength, 20)
+        };
 
-    /**
-     * Sets if this Control 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;
-                }
-            }
-        }
-    }
+        const colorMaterial = (rgb) => new PhongMaterial(rootNode, {
+            diffuse: rgb,
+            emissive: rgb,
+            ambient: [0.0, 0.0, 0.0],
+            specular: [.6, .6, .3],
+            shininess: 80,
+            lineWidth: 2
+        });
 
-    /**
-     * Gets if this Control is visible.
-     *
-     * @type {Boolean}
-     */
-    getVisible() {
-        return this._visible;
-    }
+        const highlightMaterial = (rgb, fillAlpha) => new EmphasisMaterial(rootNode, {
+            edges: false,
+            fill: true,
+            fillColor: rgb,
+            fillAlpha: fillAlpha
+        });
 
-    /**
-     * Sets if this Control is culled. This is called by SectionPlanesPlugin to
-     * temporarily hide the Control 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;
-                }
-            }
-        }
-    }
+        const pickableMaterial = new PhongMaterial(rootNode, { // Invisible material for pickable handles, which define a pickable 3D area
+            diffuse: [1, 1, 0],
+            alpha: 0, // Invisible
+            alphaMode: "blend"
+        });
 
-    /**
-     * Builds the Entities that represent this Control.
-     * @private
-     */
-    _createNodes() {
+        const handlers = { };
+        const addAxis = (rgb, axisDirection, hoopDirection) => {
+            const material = colorMaterial(rgb);
 
-        const NO_STATE_INHERIT = false;
-        const scene = this._viewer.scene;
-        const radius = 1.0;
-        const handleTubeRadius = 0.06;
-        const hoopRadius = radius - 0.2;
-        const tubeRadius = 0.01;
-        const arrowRadius = 0.07;
+            const rotateToHorizontal = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
+            const hoopRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], hoopDirection), math.identityMat4());
+            const hoopMatrix = math.mulMat4(hoopRotation, rotateToHorizontal, math.identityMat4());
 
-        this._rootNode = new Node$2(scene, {
-            position: [0, 0, 0],
-            scale: [5, 5, 5],
-            isObject: false
-        });
+            const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
 
-        const rootNode = this._rootNode;
+            const scaledArrowMatrix = (t, matR) => {
+                const matT = math.translateMat4v(t, math.identityMat4());
+                const ret = math.identityMat4();
+                math.mulMat4(matT, matR, ret);
+                math.mulMat4(hoopMatrix, ret, ret);
+                return math.mulMat4(ret, scale, math.identityMat4());
+            };
 
-        const shapes = {// Reusable geometries
+            const curve = rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.curve,
+                material: material,
+                matrix: hoopMatrix,
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                backfaces: true,
+                visible: false,
+                isObject: false
+            }), NO_STATE_INHERIT);
 
-            arrowHead: new ReadableGeometry(rootNode, buildCylinderGeometry({
-                radiusTop: 0.001,
-                radiusBottom: arrowRadius,
-                radialSegments: 32,
-                heightSegments: 1,
-                height: 0.2,
-                openEnded: false
-            })),
+            const rotateHandle = rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.curveHandle,
+                material: pickableMaterial,
+                matrix: hoopMatrix,
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                backfaces: true,
+                visible: false,
+                isObject: false
+            }), NO_STATE_INHERIT);
 
-            arrowHeadBig: new ReadableGeometry(rootNode, buildCylinderGeometry({
-                radiusTop: 0.001,
-                radiusBottom: 0.09,
-                radialSegments: 32,
-                heightSegments: 1,
-                height: 0.25,
-                openEnded: false
-            })),
+            const arrow1 = rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: material,
+                matrix: scaledArrowMatrix([ .8, .07, 0 ], math.rotationMat4v(180 * math.DEGTORAD, [0, 0, 1], math.identityMat4())),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false,
+                isObject: false
+            }), NO_STATE_INHERIT);
 
-            arrowHeadHandle: new ReadableGeometry(rootNode, buildCylinderGeometry({
-                radiusTop: 0.09,
-                radiusBottom: 0.09,
-                radialSegments: 8,
-                heightSegments: 1,
-                height: 0.37,
-                openEnded: false
-            })),
+            const arrow2 = rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: material,
+                matrix: scaledArrowMatrix([ .07, .8, 0 ], math.rotationMat4v(90 * math.DEGTORAD, [0, 0, 1], math.identityMat4())),
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false,
+                isObject: false
+            }), NO_STATE_INHERIT);
 
-            curve: new ReadableGeometry(rootNode, buildTorusGeometry({
-                radius: hoopRadius,
-                tube: tubeRadius,
-                radialSegments: 64,
-                tubeSegments: 14,
-                arc: (Math.PI * 2.0) / 4.0
-            })),
+            const hoop = rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.hoop,
+                material: material,
+                highlighted: true,
+                highlightMaterial: highlightMaterial(rgb, 0.6),
+                matrix: hoopMatrix,
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false,
+                isObject: false
+            }), NO_STATE_INHERIT);
 
-            curveHandle: new ReadableGeometry(rootNode, buildTorusGeometry({
-                radius: hoopRadius,
-                tube: handleTubeRadius,
-                radialSegments: 64,
-                tubeSegments: 14,
-                arc: (Math.PI * 2.0) / 4.0
-            })),
 
-            hoop: new ReadableGeometry(rootNode, buildTorusGeometry({
-                radius: hoopRadius,
-                tube: tubeRadius,
-                radialSegments: 64,
-                tubeSegments: 8,
-                arc: (Math.PI * 2.0)
-            })),
+            const axisRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], axisDirection), math.identityMat4());
 
-            axis: new ReadableGeometry(rootNode, buildCylinderGeometry({
-                radiusTop: tubeRadius,
-                radiusBottom: tubeRadius,
-                radialSegments: 20,
-                heightSegments: 1,
-                height: radius,
-                openEnded: false
-            })),
+            const translatedAxisMatrix = (yOffset) => math.mulMat4(axisRotation, math.translateMat4c(0, yOffset, 0, math.identityMat4()), math.identityMat4());
+            const arrowMatrix = translatedAxisMatrix(arrowLength + .1);
+            const shaftMatrix = translatedAxisMatrix(arrowLength / 2);
 
-            axisHandle: new ReadableGeometry(rootNode, buildCylinderGeometry({
-                radiusTop: 0.08,
-                radiusBottom: 0.08,
-                radialSegments: 20,
-                heightSegments: 1,
-                height: radius,
-                openEnded: false
-            }))
-        };
+            const arrow = rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHead,
+                material: material,
+                matrix: arrowMatrix,
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false,
+                isObject: false
+            }), NO_STATE_INHERIT);
 
-        const materials = { // Reusable materials
+            const arrowHandle = rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHeadHandle,
+                material: pickableMaterial,
+                matrix: arrowMatrix,
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false,
+                isObject: false
+            }), NO_STATE_INHERIT);
 
-            pickable: new PhongMaterial(rootNode, { // Invisible material for pickable handles, which define a pickable 3D area
-                diffuse: [1, 1, 0],
-                alpha: 0, // Invisible
-                alphaMode: "blend"
-            }),
+            const shaft = rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.axis,
+                material: material,
+                matrix: shaftMatrix,
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false,
+                isObject: false
+            }), NO_STATE_INHERIT);
 
-            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
-            }),
+            const shaftHandle = rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.axisHandle,
+                material: pickableMaterial,
+                matrix: shaftMatrix,
+                pickable: true,
+                collidable: true,
+                clippable: false,
+                visible: false,
+                isObject: false
+            }), NO_STATE_INHERIT);
 
-            highlightRed: new EmphasisMaterial(rootNode, { // Emphasis for red rotation affordance hoop
-                edges: false,
-                fill: true,
-                fillColor: [1, 0, 0],
-                fillAlpha: 0.6
-            }),
+            const bigArrowHead = rootNode.addChild(new Mesh(rootNode, {
+                geometry: shapes.arrowHeadBig,
+                material: material,
+                matrix: arrowMatrix,
+                pickable: false,
+                collidable: true,
+                clippable: false,
+                visible: false,
+                isObject: false
+            }), NO_STATE_INHERIT);
 
-            green: new PhongMaterial(rootNode, {
-                diffuse: [0.0, 1, 0.0],
-                emissive: [0.0, 1, 0.0],
-                ambient: [0.0, 0.0, 0.0],
-                specular: [.6, .6, .3],
-                shininess: 80,
-                lineWidth: 2
-            }),
+            const localToWorldVec = (localVec, worldVec) => math.vec3ApplyQuaternion(rootNode.quaternion, localVec, worldVec);
 
-            highlightGreen: new EmphasisMaterial(rootNode, { // Emphasis for green rotation affordance hoop
-                edges: false,
-                fill: true,
-                fillColor: [0, 1, 0],
-                fillAlpha: 0.6
-            }),
+            const closestPointOnAxis = (function() {
+                const worldAxis = math.vec3();
+                const org = math.vec3();
+                const dir = math.vec3();
+                return (canvasPos, dst) => {
+                    localToWorldVec(rgb, worldAxis);
 
-            blue: new PhongMaterial(rootNode, {
-                diffuse: [0.0, 0.0, 1],
-                emissive: [0.0, 0.0, 1],
-                ambient: [0.0, 0.0, 0.0],
-                specular: [.6, .6, .3],
-                shininess: 80,
-                lineWidth: 2
-            }),
+                    const P = pos;
+                    const D = worldAxis;
 
-            highlightBlue: new EmphasisMaterial(rootNode, { // Emphasis for blue rotation affordance hoop
-                edges: false,
-                fill: true,
-                fillColor: [0, 0, 1],
-                fillAlpha: 0.2
-            }),
+                    math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, scene.camera.projection, canvasPos, org, dir);
 
-            center: new PhongMaterial(rootNode, {
-                diffuse: [0.0, 0.0, 0.0],
-                emissive: [0, 0, 0],
-                ambient: [0.0, 0.0, 0.0],
-                specular: [.6, .6, .3],
-                shininess: 80
-            }),
+                    const d01 = math.dotVec3(D, dir);
+                    const v = math.subVec3(org, P, dst);
+                    const v0 = math.dotVec3(v, D);
+                    const v1 = math.dotVec3(v, dir);
+                    const det = 1 - d01 * d01;
 
-            highlightBall: new EmphasisMaterial(rootNode, {
-                edges: false,
-                fill: true,
-                fillColor: [0.5, 0.5, 0.5],
-                fillAlpha: 0.5,
-                vertices: false
-            }),
+                    if (Math.abs(det) > 1e-10) { // if lines are not parallel
+                        const s = (v0 - d01 * v1) / det;
+                        math.addVec3(P, math.mulVec3Scalar(D, s, dst), dst);
+                        return true;
+                    } else {
+                        return false;
+                    }
+                };
+            })();
+            const initOffset = math.vec3();
+            const tempVec3 = math.vec3();
+            handlers[arrowHandle.id] = handlers[shaftHandle.id] = {
+                setActivated: a => bigArrowHead.visible = a,
+                initDragAction: (initCanvasPos) => {
+                    return closestPointOnAxis(initCanvasPos, initOffset) && math.subVec3(initOffset, pos, initOffset) && ((canvasPos) => {
+                        if (closestPointOnAxis(canvasPos, tempVec3)) {
+                            math.subVec3(tempVec3, initOffset, tempVec3);
+                            setPos(tempVec3);
+                            if (this._sectionPlane) {
+                                this._sectionPlane.pos = tempVec3;
+                            }
+                        }
+                    });
+                }
+            };
 
-            highlightPlane: new EmphasisMaterial(rootNode, {
-                edges: true,
-                edgeWidth: 3,
-                fill: false,
-                fillColor: [0.5, 0.5, .5],
-                fillAlpha: 0.5,
-                vertices: false
-            })
-        };
+            handlers[rotateHandle.id] = {
+                setActivated: a => hoop.visible = a,
+                initDragAction: (initCanvasPos) => {
+                    const rotationFromCanvasPos = (function() {
+                        const planeCanvasPos = camera.projectWorldPos(pos);
+                        localToWorldVec(rgb, tempVec3);
+                        math.transformVec3(camera.normalMatrix, tempVec3, tempVec3);
+                        const axisCoeff = Math.sign(tempVec3[2]);
+                        return (canvasPos) => {
+                            const dx = canvasPos[0] - planeCanvasPos[0];
+                            const dy = canvasPos[1] - planeCanvasPos[1];
+                            return axisCoeff * Math.atan2(-dy, dx);
+                        };
+                    })();
 
-        this._displayMeshes = {
+                    let lastRotation = rotationFromCanvasPos(initCanvasPos);
 
-            plane: rootNode.addChild(new Mesh(rootNode, {
+                    return canvasPos => {
+                        const rotation = rotationFromCanvasPos(canvasPos);
+                        rootNode.rotate(rgb, (rotation - lastRotation) * 180 / Math.PI);
+                        if (this._sectionPlane) {
+                            ignoreNextSectionPlaneDirUpdate = true;
+                            this._sectionPlane.dir = math.vec3ApplyQuaternion(rootNode.quaternion, [0, 0, 1], tempVec3);
+                        }
+                        lastRotation = rotation;
+                    };
+                }
+            };
+
+            return {
+                set visible(v) {
+                    arrow.visible = arrowHandle.visible = shaft.visible = shaftHandle.visible = curve.visible = rotateHandle.visible = arrow1.visible = arrow2.visible = v;
+                    if (! v) {
+                        bigArrowHead.visible = v;
+                        hoop.visible = v;
+                    }
+                },
+                set culled(c) {
+                    arrow.culled = arrowHandle.culled = shaft.culled = shaftHandle.culled = curve.culled = rotateHandle.culled = arrow1.culled = arrow2.culled = c;
+                    if (! c) {
+                        bigArrowHead.culled = c;
+                        hoop.culled = c;
+                    }
+                }
+            };
+        };
+
+        this._displayMeshes = [ // Meshes that are always visible
+            rootNode.addChild(new Mesh(rootNode, { // plane
                 geometry: new ReadableGeometry(rootNode, {
                     primitive: "triangles",
                     positions: [
@@ -121081,7 +121103,7 @@ class Control {
                 isObject: false
             }), NO_STATE_INHERIT),
 
-            planeFrame: rootNode.addChild(new Mesh(rootNode, { // Visible frame
+            rootNode.addChild(new Mesh(rootNode, { // Visible frame
                 geometry: new ReadableGeometry(rootNode, buildTorusGeometry({
                     center: [0, 0, 0],
                     radius: 1.7,
@@ -121113,310 +121135,17 @@ class Control {
                 isObject: false
             }), NO_STATE_INHERIT),
 
-            //----------------------------------------------------------------------------------------------------------
-            //
-            //----------------------------------------------------------------------------------------------------------
-
-            xCurve: rootNode.addChild(new Mesh(rootNode, { // Red hoop about Y-axis
-                geometry: shapes.curve,
-                material: materials.red,
-                matrix: (function () {
-                    const rotate2 = math.rotationMat4v(90 * math.DEGTORAD, [0, 1, 0], math.identityMat4());
-                    const rotate1 = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-                    return math.mulMat4(rotate1, rotate2, math.identityMat4());
-                })(),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                backfaces: true,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            xCurveHandle: rootNode.addChild(new Mesh(rootNode, { // Red hoop about Y-axis
-                geometry: shapes.curveHandle,
-                material: materials.pickable,
-                matrix: (function () {
-                    const rotate2 = math.rotationMat4v(90 * math.DEGTORAD, [0, 1, 0], math.identityMat4());
-                    const rotate1 = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-                    return math.mulMat4(rotate1, rotate2, math.identityMat4());
-                })(),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                backfaces: true,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            xCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHead,
-                material: materials.red,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0., -0.07, -0.8, math.identityMat4());
-                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
-                    const rotate = math.rotationMat4v(0 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
-                    return math.mulMat4(math.mulMat4(translate, scale, math.identityMat4()), rotate, math.identityMat4());
-                })(),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            xCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHead,
-                material: materials.red,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0.0, -0.8, -0.07, math.identityMat4());
-                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
-                    const rotate = math.rotationMat4v(90 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-                    return math.mulMat4(math.mulMat4(translate, scale, math.identityMat4()), rotate, math.identityMat4());
-                })(),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            //----------------------------------------------------------------------------------------------------------
-            //
-            //----------------------------------------------------------------------------------------------------------
-
-            yCurve: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.curve,
-                material: materials.green,
-                rotation: [-90, 0, 0],
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                backfaces: true,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            yCurveHandle: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.curveHandle,
-                material: materials.pickable,
-                rotation: [-90, 0, 0],
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                backfaces: true,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            yCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHead,
-                material: materials.green,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0.07, 0, -0.8, math.identityMat4());
-                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
-                    const rotate = math.rotationMat4v(90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
-                    return math.mulMat4(math.mulMat4(translate, scale, math.identityMat4()), rotate, math.identityMat4());
-                })(),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            yCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHead,
-                material: materials.green,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0.8, 0.0, -0.07, math.identityMat4());
-                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
-                    const rotate = math.rotationMat4v(90 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-                    return math.mulMat4(math.mulMat4(translate, scale, math.identityMat4()), rotate, math.identityMat4());
-                })(),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            //----------------------------------------------------------------------------------------------------------
-            //
-            //----------------------------------------------------------------------------------------------------------
-
-            zCurve: rootNode.addChild(new Mesh(rootNode, { // Blue hoop about Z-axis
-                geometry: shapes.curve,
-                material: materials.blue,
-                matrix: math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4()),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            zCurveHandle: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.curveHandle,
-                material: materials.pickable,
-                matrix: math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4()),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            zCurveCurveArrow1: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHead,
-                material: materials.blue,
-                matrix: (function () {
-                    const translate = math.translateMat4c(.8, -0.07, 0, math.identityMat4());
-                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
-                    return math.mulMat4(translate, scale, math.identityMat4());
-                })(),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            zCurveArrow2: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHead,
-                material: materials.blue,
-                matrix: (function () {
-                    const translate = math.translateMat4c(.05, -0.8, 0, math.identityMat4());
-                    const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
-                    const rotate = math.rotationMat4v(90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
-                    return math.mulMat4(math.mulMat4(translate, scale, math.identityMat4()), rotate, math.identityMat4());
-                })(),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            //----------------------------------------------------------------------------------------------------------
-            //
-            //----------------------------------------------------------------------------------------------------------
-
-            center: rootNode.addChild(new Mesh(rootNode, {
+            rootNode.addChild(new Mesh(rootNode, { // center
                 geometry: new ReadableGeometry(rootNode, buildSphereGeometry({
                     radius: 0.05
                 })),
-                material: materials.center,
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            //----------------------------------------------------------------------------------------------------------
-            //
-            //----------------------------------------------------------------------------------------------------------
-
-            xAxisArrow: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHead,
-                material: materials.red,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            xAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHeadHandle,
-                material: materials.pickable,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            xAxis: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.axis,
-                material: materials.red,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius / 2, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            xAxisHandle: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.axisHandle,
-                material: materials.pickable,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius / 2, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            //----------------------------------------------------------------------------------------------------------
-            //
-            //----------------------------------------------------------------------------------------------------------
-
-            yAxisArrow: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHead,
-                material: materials.green,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            yAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHeadHandle,
-                material: materials.pickable,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                opacity: 0.2,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            yShaft: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.axis,
-                material: materials.green,
-                position: [0, -radius / 2, 0],
+                material: new PhongMaterial(rootNode, {
+                    diffuse: [0.0, 0.0, 0.0],
+                    emissive: [0, 0, 0],
+                    ambient: [0.0, 0.0, 0.0],
+                    specular: [.6, .6, .3],
+                    shininess: 80
+                }),
                 pickable: false,
                 collidable: true,
                 clippable: false,
@@ -121424,615 +121153,235 @@ class Control {
                 isObject: false
             }), NO_STATE_INHERIT),
 
-            yShaftHandle: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.axisHandle,
-                material: materials.pickable,
-                position: [0, -radius / 2, 0],
-                pickable: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: 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,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            zAxisArrowHandle: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHeadHandle,
-                material: materials.pickable,
-                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: true,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: 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,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            zAxisHandle: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.axisHandle,
-                material: materials.pickable,
-                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: true,
-                collidable: true,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT)
-        };
-
-        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],
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            xHoop: rootNode.addChild(new Mesh(rootNode, { // Full
-                geometry: shapes.hoop,
-                material: materials.red,
-                highlighted: true,
-                highlightMaterial: materials.highlightRed,
-                matrix: (function () {
-                    const rotate2 = math.rotationMat4v(90 * math.DEGTORAD, [0, 1, 0], math.identityMat4());
-                    const rotate1 = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-                    return math.mulMat4(rotate1, rotate2, math.identityMat4());
-                })(),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            yHoop: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.hoop,
-                material: materials.green,
-                highlighted: true,
-                highlightMaterial: materials.highlightGreen,
-                rotation: [-90, 0, 0],
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            zHoop: rootNode.addChild(new Mesh(rootNode, { // Blue hoop about Z-axis
-                geometry: shapes.hoop,
-                material: materials.blue,
-                highlighted: true,
-                highlightMaterial: materials.highlightBlue,
-                matrix: math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4()),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                backfaces: true,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            xAxisArrow: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHeadBig,
-                material: materials.red,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(-90 * math.DEGTORAD, [0, 0, 1], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            yAxisArrow: rootNode.addChild(new Mesh(rootNode, {
-                geometry: shapes.arrowHeadBig,
-                material: materials.green,
-                matrix: (function () {
-                    const translate = math.translateMat4c(0, radius + .1, 0, math.identityMat4());
-                    const rotate = math.rotationMat4v(180 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-                    return math.mulMat4(rotate, translate, math.identityMat4());
-                })(),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                isObject: false
-            }), 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,
-                isObject: false
-            }), NO_STATE_INHERIT)
-        };
-    }
-
-    _bindEvents() {
-
-        const self = this;
-
-        var grabbed = false;
-
-        const DRAG_ACTIONS = {
-            none: -1,
-            xTranslate: 0,
-            yTranslate: 1,
-            zTranslate: 2,
-            xRotate: 3,
-            yRotate: 4,
-            zRotate: 5
-        };
-
-        const rootNode = this._rootNode;
-
-        var nextDragAction = null; // As we hover grabbed an arrow or hoop, self is the action we would do if we then dragged it.
-        var dragAction = null; // Action we're doing while we drag an arrow or hoop.
-        const lastCanvasPos = math.vec2();
-
-        const xBaseAxis = math.vec3([1, 0, 0]);
-        const yBaseAxis = math.vec3([0, 1, 0]);
-        const zBaseAxis = math.vec3([0, 0, 1]);
+            addAxis([1,0,0], [ 1,  0,  0 ], [ 1, 0,  0 ]),
+            addAxis([0,1,0], [ 0, -1,  0 ], [ 0, 1,  0 ]),
+            addAxis([0,0,1], [ 0,  0, -1 ], [ 0, 0, -1 ])
+        ];
 
-        const canvas = this._viewer.scene.canvas.canvas;
-        const camera = this._viewer.camera;
-        const scene = this._viewer.scene;
+        const cleanups = [ ];
 
         { // Keep gizmo screen size constant
-
-            const tempVec3a = math.vec3([0, 0, 0]);
             let lastDist = -1;
-
-            this._onCameraViewMatrix = scene.camera.on("viewMatrix", () => {
-            });
-
-            this._onCameraProjMatrix = scene.camera.on("projMatrix", () => {
-            });
-
-            this._onSceneTick = scene.on("tick", () => {
-
-                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;
+            const setRootNodeScale = size => rootNode.scale = [size, size, size];
+            const onSceneTick = scene.on("tick", () => {
+                const dist = Math.abs(math.distVec3(camera.eye, pos));
+                if (camera.projection === "perspective") {
+                    if (dist !== lastDist) {
+                        setRootNodeScale(0.07 * dist * Math.tan(camera.perspective.fov * math.DEGTORAD));
                     }
+                } else if (camera.projection === "ortho") {
+                    setRootNodeScale(camera.ortho.scale / 10);
                 }
-
-                if (camera.projection === "ortho") {
-                    const worldSize = camera.ortho.scale / 10;
-                    const size = worldSize;
-                    rootNode.scale = [size, size, size];
-                    lastDist = dist;
-                }
+                lastDist = dist;
             });
+            cleanups.push(() => scene.off(onSceneTick));
         }
 
-        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;
+        {
+            let deactivateActive = null;
+            let currentDrag = null;
+            cleanups.push(() => { if (currentDrag) { currentDrag.cleanup(); } });
+            const canvasPos = math.vec2();
+
+            const copyCanvasPos = (event, vec2) => {
+                vec2[0] = event.clientX;
+                vec2[1] = event.clientY;
+                transformToNode(canvas.ownerDocument.documentElement, canvas, vec2);
             };
-        })();
 
-        const localToWorldVec = (function () {
-            const mat = math.mat4();
-            return function (localVec, worldVec) {
-                math.quaternionToMat4(self._rootNode.quaternion, mat);
-                math.transformVec3(mat, localVec, worldVec);
-                math.normalizeVec3(worldVec);
-                return worldVec;
+            const pickHandler = (e) => {
+                copyCanvasPos(e, canvasPos);
+                const pickResult = viewer.scene.pick({ canvasPos: canvasPos });
+                const pickEntity = pickResult && pickResult.entity;
+                const pickId = pickEntity && pickEntity.id;
+                return (pickId in handlers) && handlers[pickId];
             };
-        })();
-
-        var getTranslationPlane = (function () {
-            const planeNormal = math.vec3();
-            return function (worldAxis) {
-                const absX = Math.abs(worldAxis[0]);
-                if (absX > Math.abs(worldAxis[1]) && absX > Math.abs(worldAxis[2])) {
-                    math.cross3Vec3(worldAxis, [0, 1, 0], planeNormal);
-                } else {
-                    math.cross3Vec3(worldAxis, [1, 0, 0], planeNormal);
-                }
-                math.cross3Vec3(planeNormal, worldAxis, planeNormal);
-                math.normalizeVec3(planeNormal);
-                return planeNormal;
-            }
-        })();
-
-        const dragTranslateSectionPlane = (function () {
-            const p1 = math.vec3();
-            const p2 = math.vec3();
-            const worldAxis = math.vec4();
-            return function (baseAxis, fromMouse, toMouse) {
-                localToWorldVec(baseAxis, worldAxis);
-                const planeNormal = getTranslationPlane(worldAxis, fromMouse, toMouse);
-                getPointerPlaneIntersect(fromMouse, planeNormal, p1);
-                getPointerPlaneIntersect(toMouse, planeNormal, p2);
-                math.subVec3(p2, p1);
-                const dot = math.dotVec3(p2, worldAxis);
-                self._pos[0] += worldAxis[0] * dot;
-                self._pos[1] += worldAxis[1] * dot;
-                self._pos[2] += worldAxis[2] * dot;
-                self._rootNode.position = self._pos;
-                if (self._sectionPlane) {
-                    self._sectionPlane.pos = self._pos;
-                }
-            }
-        })();
 
-        var dragRotateSectionPlane = (function () {
-            const p1 = math.vec4();
-            const p2 = math.vec4();
-            const c = math.vec4();
-            const worldAxis = math.vec4();
-            return function (baseAxis, fromMouse, toMouse) {
-                localToWorldVec(baseAxis, worldAxis);
-                const hasData = getPointerPlaneIntersect(fromMouse, worldAxis, p1) && getPointerPlaneIntersect(toMouse, worldAxis, p2);
-                if (!hasData) { // Find intersections with view plane and project down to origin
-                    const planeNormal = getTranslationPlane(worldAxis, fromMouse, toMouse);
-                    getPointerPlaneIntersect(fromMouse, planeNormal, p1, 1); // Ensure plane moves closer to camera so angles become workable
-                    getPointerPlaneIntersect(toMouse, planeNormal, p2, 1);
-                    var dot = math.dotVec3(p1, worldAxis);
-                    p1[0] -= dot * worldAxis[0];
-                    p1[1] -= dot * worldAxis[1];
-                    p1[2] -= dot * worldAxis[2];
-                    dot = math.dotVec3(p2, worldAxis);
-                    p2[0] -= dot * worldAxis[0];
-                    p2[1] -= dot * worldAxis[1];
-                    p2[2] -= dot * worldAxis[2];
-                }
-                math.normalizeVec3(p1);
-                math.normalizeVec3(p2);
-                dot = math.dotVec3(p1, p2);
-                dot = math.clamp(dot, -1.0, 1.0); // Rounding errors cause dot to exceed allowed range
-                var incDegrees = Math.acos(dot) * math.RADTODEG;
-                math.cross3Vec3(p1, p2, c);
-                if (math.dotVec3(c, worldAxis) < 0.0) {
-                    incDegrees = -incDegrees;
-                }
-                self._rootNode.rotate(baseAxis, incDegrees);
-                rotateSectionPlane();
-            }
-        })();
-
-        var getPointerPlaneIntersect = (function () {
-            const dir = math.vec4([0, 0, 0, 1]);
-            const matrix = math.mat4();
-            return function (mouse, axis, dest, offset) {
-                offset = offset || 0;
-                dir[0] = mouse[0] / canvas.width * 2.0 - 1.0;
-                dir[1] = -(mouse[1] / canvas.height * 2.0 - 1.0);
-                dir[2] = 0.0;
-                dir[3] = 1.0;
-                math.mulMat4(camera.projMatrix, camera.viewMatrix, matrix); // Unproject norm device coords to view coords
-                math.inverseMat4(matrix);
-                math.transformVec4(matrix, dir, dir);
-                math.mulVec4Scalar(dir, 1.0 / dir[3]); // This is now point A on the ray in world space
-                var rayO = camera.eye; // The direction
-                math.subVec4(dir, rayO, dir);
-                const origin = self._sectionPlane.pos; // Plane origin:
-                var d = -math.dotVec3(origin, axis) - offset;
-                var dot = math.dotVec3(axis, dir);
-                if (Math.abs(dot) > 0.005) {
-                    var t = -(math.dotVec3(axis, rayO) + d) / dot;
-                    math.mulVec3Scalar(dir, t, dest);
-                    math.addVec3(dest, rayO);
-                    math.subVec3(dest, origin, dest);
-                    return true;
-                }
-                return false;
-            }
-        })();
+            const startDrag = (event, matchesEvent) => {
+                const handler = pickHandler(matchesEvent(event));
+                if (handler) {
+                    if (currentDrag) {
+                        currentDrag.cleanup();
+                    }
 
-        const rotateSectionPlane = (function () {
-            const dir = math.vec3();
-            const mat = math.mat4();
-            return function () {
-                if (self.sectionPlane) {
-                    math.quaternionToMat4(rootNode.quaternion, mat);  // << ---
-                    math.transformVec3(mat, [0, 0, 1], dir);
-                    self._setSectionPlaneDir(dir);
+                    const dragAction = handler.initDragAction(canvasPos);
+                    if (dragAction) {
+                        cameraControl.pointerEnabled = false; // or .active = false ?
+                        handler.setActivated(true);
+
+                        currentDrag = {
+                            onChange: event => {
+                                const e = matchesEvent(event);
+                                if (e) {
+                                    copyCanvasPos(e, canvasPos);
+                                    dragAction(canvasPos);
+                                }
+                            },
+                            cleanup: function() {
+                                currentDrag = null;
+                                cameraControl.pointerEnabled = true; // or .active = true ?
+                                handler.setActivated(false);
+                            }
+                        };
+                    }
                 }
             };
-        })();
-
-        {
-            var down = false;
-            var lastAffordanceMesh;
-
-            this._onCameraControlHover = this._viewer.cameraControl.on("hoverEnter", (hit) => {
-                if (!this._visible) {
-                    return;
-                }
-                if (down) {
-                    return;
-                }
-                grabbed = false;
-                if (lastAffordanceMesh) {
-                    lastAffordanceMesh.visible = false;
-                }
-                var affordanceMesh;
-                const meshId = hit.entity.id;
-                switch (meshId) {
-
-                    case this._displayMeshes.xAxisArrowHandle.id:
-                        affordanceMesh = this._affordanceMeshes.xAxisArrow;
-                        nextDragAction = DRAG_ACTIONS.xTranslate;
-                        break;
-
-                    case this._displayMeshes.xAxisHandle.id:
-                        affordanceMesh = this._affordanceMeshes.xAxisArrow;
-                        nextDragAction = DRAG_ACTIONS.xTranslate;
-                        break;
-
-                    case this._displayMeshes.yAxisArrowHandle.id:
-                        affordanceMesh = this._affordanceMeshes.yAxisArrow;
-                        nextDragAction = DRAG_ACTIONS.yTranslate;
-                        break;
-
-                    case this._displayMeshes.yShaftHandle.id:
-                        affordanceMesh = this._affordanceMeshes.yAxisArrow;
-                        nextDragAction = DRAG_ACTIONS.yTranslate;
-                        break;
 
-                    case this._displayMeshes.zAxisArrowHandle.id:
-                        affordanceMesh = this._affordanceMeshes.zAxisArrow;
-                        nextDragAction = DRAG_ACTIONS.zTranslate;
-                        break;
-
-                    case this._displayMeshes.zAxisHandle.id:
-                        affordanceMesh = this._affordanceMeshes.zAxisArrow;
-                        nextDragAction = DRAG_ACTIONS.zTranslate;
-                        break;
-
-                    case this._displayMeshes.xCurveHandle.id:
-                        affordanceMesh = this._affordanceMeshes.xHoop;
-                        nextDragAction = DRAG_ACTIONS.xRotate;
-                        break;
-
-                    case this._displayMeshes.yCurveHandle.id:
-                        affordanceMesh = this._affordanceMeshes.yHoop;
-                        nextDragAction = DRAG_ACTIONS.yRotate;
-                        break;
-
-                    case this._displayMeshes.zCurveHandle.id:
-                        affordanceMesh = this._affordanceMeshes.zHoop;
-                        nextDragAction = DRAG_ACTIONS.zRotate;
-                        break;
+            const addCanvasEventListener = (type, listener) => {
+                canvas.addEventListener(type, listener);
+                cleanups.push(() => canvas.removeEventListener(type, listener));
+            };
 
-                    default:
-                        nextDragAction = DRAG_ACTIONS.none;
-                        return; // Not clicked an arrow or hoop
-                }
-                if (affordanceMesh) {
-                    affordanceMesh.visible = true;
+            addCanvasEventListener("mousedown", (e) => {
+                e.preventDefault();
+                if (e.which === 1) {
+                    startDrag(e, event => (event.which === 1) && event);
                 }
-                lastAffordanceMesh = affordanceMesh;
-                grabbed = true;
             });
 
-            this._onCameraControlHoverLeave = this._viewer.cameraControl.on("hoverOutEntity", (hit) => {
-                if (!this._visible) {
-                    return;
-                }
-                if (lastAffordanceMesh) {
-                    lastAffordanceMesh.visible = false;
+            addCanvasEventListener("mousemove", (e) => {
+                if (currentDrag) {
+                    currentDrag.onChange(e);
+                } else {
+                    if (deactivateActive) {
+                        deactivateActive();
+                    }
+                    const handler = pickHandler(e);
+                    if (handler) {
+                        handler.setActivated(true);
+                        deactivateActive = () => handler.setActivated(false);
+                    } else {
+                        deactivateActive = null;
+                    }
                 }
-                lastAffordanceMesh = null;
-                nextDragAction = DRAG_ACTIONS.none;
             });
 
-            canvas.addEventListener("mousedown", this._canvasMouseDownListener = (e) => {
-                e.preventDefault();
-                if (!this._visible) {
-                    return;
-                }
-                if (!grabbed) {
-                    return;
-                }
-                this._viewer.cameraControl.pointerEnabled = false;
-                switch (e.which) {
-                    case 1: // Left button
-                        down = true;
-                        var canvasPos = getClickCoordsWithinElement(e);
-                        dragAction = nextDragAction;
-                        lastCanvasPos[0] = canvasPos[0];
-                        lastCanvasPos[1] = canvasPos[1];
-                        break;
+            addCanvasEventListener("mouseup", (e) => {
+                if (currentDrag) {
+                    currentDrag.onChange(e);
+                    currentDrag.cleanup();
                 }
             });
 
-            canvas.addEventListener("mousemove", this._canvasMouseMoveListener = (e) => {
-                if (!this._visible) {
-                    return;
-                }
-                if (!down) {
-                    return;
-                }
-                var canvasPos = getClickCoordsWithinElement(e);
-                const x = canvasPos[0];
-                const y = canvasPos[1];
 
-                switch (dragAction) {
-                    case DRAG_ACTIONS.xTranslate:
-                        dragTranslateSectionPlane(xBaseAxis, lastCanvasPos, canvasPos);
-                        break;
-                    case DRAG_ACTIONS.yTranslate:
-                        dragTranslateSectionPlane(yBaseAxis, lastCanvasPos, canvasPos);
-                        break;
-                    case DRAG_ACTIONS.zTranslate:
-                        dragTranslateSectionPlane(zBaseAxis, lastCanvasPos, canvasPos);
-                        break;
-                    case DRAG_ACTIONS.xRotate:
-                        dragRotateSectionPlane(xBaseAxis, lastCanvasPos, canvasPos);
-                        break;
-                    case DRAG_ACTIONS.yRotate:
-                        dragRotateSectionPlane(yBaseAxis, lastCanvasPos, canvasPos);
-                        break;
-                    case DRAG_ACTIONS.zRotate:
-                        dragRotateSectionPlane(zBaseAxis, lastCanvasPos, canvasPos);
-                        break;
+            addCanvasEventListener("touchstart", event => {
+                event.preventDefault();
+                if (event.touches.length === 1)
+                {
+                    const touchStartId = event.touches[0].identifier;
+                    startDrag(event, event => [...event.changedTouches].find(e => e.identifier === touchStartId));
                 }
+            });
 
-                lastCanvasPos[0] = x;
-                lastCanvasPos[1] = y;
+            addCanvasEventListener("touchmove", event => {
+                event.preventDefault();
+                currentDrag && currentDrag.onChange(event);
             });
 
-            canvas.addEventListener("mouseup", this._canvasMouseUpListener = (e) => {
-                if (!this._visible) {
-                    return;
-                }
-                this._viewer.cameraControl.pointerEnabled = true;
-                if (!down) {
-                    return;
+            addCanvasEventListener("touchend",  event => {
+                event.preventDefault();
+                if (currentDrag) {
+                    currentDrag.onChange(event);
+                    currentDrag.cleanup();
                 }
-                switch (e.which) {
-                                    }
-                down = false;
-                grabbed = false;
             });
+        }
 
-            canvas.addEventListener("wheel", this._canvasWheelListener = (e) => {
-                if (!this._visible) {
-                    return;
-                }
-                var delta = Math.max(-1, Math.min(1, -e.deltaY * 40));
-                if (delta === 0) {
-                    return;
+        this._unbindSectionPlane = () => { };
+
+        this.__setSectionPlane = sectionPlane => {
+            this.id = sectionPlane.id;
+            this._sectionPlane = sectionPlane;
+            const setPosFromSectionPlane = () => setPos(sectionPlane.pos);
+            const setDirFromSectionPlane = () => rootNode.quaternion = math.vec3PairToQuaternion(zeroVec$1, sectionPlane.dir, quat$1);
+            setPosFromSectionPlane();
+            setDirFromSectionPlane();
+            const onSectionPlanePos = sectionPlane.on("pos", setPosFromSectionPlane);
+            const onSectionPlaneDir = sectionPlane.on("dir", () => {
+                if (!ignoreNextSectionPlaneDirUpdate) {
+                    setDirFromSectionPlane();
+                } else {
+                    ignoreNextSectionPlaneDirUpdate = false;
                 }
             });
-        }
+
+            this._unbindSectionPlane = () => {
+                this.id = null;
+                this._sectionPlane = null;
+                sectionPlane.off(onSectionPlanePos);
+                sectionPlane.off(onSectionPlaneDir);
+                this._unbindSectionPlane = () => { };
+            };
+        };
+
+        this.__destroy = () => {
+            cleanups.forEach(c => c());
+            this._unbindSectionPlane();
+            rootNode.destroy();
+            this._displayMeshes = [ ];
+            for (let id in handlers) {
+                delete handlers[id];
+            }
+        };
     }
 
     _destroy() {
-        this._unbindEvents();
-        this._destroyNodes();
+        this.__destroy();
     }
 
-    _unbindEvents() {
-
-        const viewer = this._viewer;
-        const scene = viewer.scene;
-        const canvas = scene.canvas.canvas;
-        const camera = viewer.camera;
-        const cameraControl = viewer.cameraControl;
-
-        scene.off(this._onSceneTick);
+    /**
+     * Called by SectionPlanesPlugin to assign this Control to a SectionPlane.
+     * SectionPlanesPlugin keeps SectionPlaneControls in a reuse pool.
+     * Call with a null or undefined value to disconnect the Control ffrom whatever SectionPlane it was assigned to.
+     * @private
+     */
+    _setSectionPlane(sectionPlane) {
+        this._unbindSectionPlane();
+        if (sectionPlane) {
+            this.__setSectionPlane(sectionPlane);
+        }
+    }
 
-        canvas.removeEventListener("mousedown", this._canvasMouseDownListener);
-        canvas.removeEventListener("mousemove", this._canvasMouseMoveListener);
-        canvas.removeEventListener("mouseup", this._canvasMouseUpListener);
-        canvas.removeEventListener("wheel", this._canvasWheelListener);
+    /**
+     * Gets the {@link SectionPlane} controlled by this Control.
+     * @returns {SectionPlane} The SectionPlane.
+     */
+    get sectionPlane() {
+        return this._sectionPlane;
+    }
 
-        camera.off(this._onCameraViewMatrix);
-        camera.off(this._onCameraProjMatrix);
+    /**
+     * Sets if this Control is visible.
+     *
+     * @type {Boolean}
+     */
+    setVisible(visible = true) {
+        if (this._visible !== visible) {
+            this._visible = visible;
+            this._displayMeshes.forEach(m => m.visible = visible);
+        }
+    }
 
-        cameraControl.off(this._onCameraControlHover);
-        cameraControl.off(this._onCameraControlHoverLeave);
+    /**
+     * Gets if this Control is visible.
+     *
+     * @type {Boolean}
+     */
+    getVisible() {
+        return this._visible;
     }
 
-    _destroyNodes() {
-        this._setSectionPlane(null);
-        this._rootNode.destroy();
-        this._displayMeshes = {};
-        this._affordanceMeshes = {};
+    /**
+     * Sets if this Control is culled. This is called by SectionPlanesPlugin to
+     * temporarily hide the Control while a snapshot is being taken by Viewer#getSnapshot().
+     * @param culled
+     */
+    setCulled(culled) {
+        this._displayMeshes.forEach(m => m.culled = culled);
     }
 }
 
@@ -126614,6 +125963,8 @@ class TreeViewPlugin extends Plugin {
      * @param {RenderService} [cfg.renderService] Optional {@link RenderService} to use. Defaults to the {@link TreeViewPlugin}'s default {@link RenderService}.
      * @param {Boolean} [cfg.showIndeterminate=false] When true, will show indeterminate state for checkboxes when some but not all child nodes are checked
      * @param {Boolean} [cfg.showProjectNode=false] When true, will show top level project node when hierarchy is set to "storeys"
+     * @param {Function} [cfg.elevationSortFunction] Optional function to replace the default elevation sort function. The function should take two nodes and return -1, 0 or 1. 
+     * @param {Function} [cfg.defaultSortFunction] Optional function to replace the default sort function. The function should take two nodes and return -1, 0 or 1.
      */
     constructor(viewer, cfg = {}) {
 
@@ -126667,6 +126018,8 @@ class TreeViewPlugin extends Plugin {
         this._renderService = cfg.renderService || new RenderService();
         this._showIndeterminate = cfg.showIndeterminate ?? false;
         this._showProjectNode = cfg.showProjectNode ?? false;
+        this._elevationSortFunction = cfg.elevationSortFunction ?? undefined;
+        this._defaultSortFunction = cfg.defaultSortFunction ?? undefined;
 
         if (!this._renderService) {
             throw new Error('TreeViewPlugin: no render service set');
@@ -127480,9 +126833,11 @@ class TreeViewPlugin extends Plugin {
         }
         const firstChild = children[0];
         if ((this._hierarchy === "storeys" || this._hierarchy === "containment") &&  firstChild.type === "IfcBuildingStorey") {
-            children.sort(this._getSpatialSortFunc());
+            if (this._elevationSortFunction) children.sort(this._elevationSortFunction);
+            else children.sort(this._getSpatialSortFunc());
         } else {
-            children.sort(this._alphaSortFunc);
+            if (this._defaultSortFunction) children.sort(this._defaultSortFunction);
+            else children.sort(this._alphaSortFunc);
         }
         for (let i = 0, len = children.length; i < len; i++) {
             const node = children[i];