@xeokit/xeokit-sdk 2.6.55 → 2.6.58

package/dist/xeokit-sdk.cjs.js

@@ -9573,9 +9573,89 @@ const os = {
         const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);
 
         return isIphone && isSafari;
+    },
+    isTouchDevice() {
+        return (
+            'ontouchstart' in window || //works for most devices
+            navigator.maxTouchPoints > 0 || //works for modern touch devices
+            navigator.mxMaxTouchPoints > 0 //works for older microsoft touch devices
+        )
     }
 };
 
+function addContextMenuListener(elem, callback) {
+    if (!elem || !callback) return;
+
+    let timeout = null;
+    const longPressTimer = 500;
+    const MOVE_THRESHOLD = 3;
+    let startX, startY;
+
+    const touchStartHandler = (event) => {
+        event.preventDefault();
+        const touch = event.touches[0];
+        startX = touch.clientX;
+        startY = touch.clientY;
+
+        if (timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+
+        timeout = setTimeout(() => {
+            event.clientX = touch.clientX;
+            event.clientY = touch.clientY;
+            callback(event);
+            clearTimeout(timeout);
+            timeout = null;
+        }, longPressTimer);
+    };
+
+    const touchMoveHandler = (event) => {
+        if (!timeout) return;
+        const touch = event.touches[0];
+        const deltaX = Math.abs(touch.clientX - startX);
+        const deltaY = Math.abs(touch.clientY - startY);
+
+        if (deltaX > MOVE_THRESHOLD || deltaY > MOVE_THRESHOLD) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+
+    const touchEndHandler = (event) => {
+        event.preventDefault();
+        if (timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+
+    const contextMenuHandler = (event) => {
+        callback(event);
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    
+    if (os.isIphoneSafari()) {
+        elem.addEventListener('touchstart', touchStartHandler);
+        elem.addEventListener('touchmove', touchMoveHandler);
+        elem.addEventListener('touchend', touchEndHandler);
+    } else {
+        elem.addEventListener('contextmenu', contextMenuHandler);
+    }
+
+    return function removeContextMenuListener() {
+        if (os.isIphoneSafari()) {
+            elem.removeEventListener('touchstart', touchStartHandler);
+            elem.removeEventListener('touchmove', touchMoveHandler);
+            elem.removeEventListener('touchend', touchEndHandler);
+        } else {
+            elem.removeEventListener('contextmenu', contextMenuHandler);
+        }
+    };
+}
+
 /** @private */
 class Dot {
 
@@ -9689,41 +9769,10 @@ class Dot {
         }
 
         if (cfg.onContextMenu) {
-            if(os.isIphoneSafari()){
-                dotClickable.addEventListener('touchstart', (event) => {
-                    event.preventDefault();
-                    if(this._timeout){
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                    this._timeout = setTimeout(() => {
-                        event.clientX = event.touches[0].clientX;
-                        event.clientY = event.touches[0].clientY;
-                        cfg.onContextMenu(event, this);
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }, 500);
-                });
-
-                dotClickable.addEventListener('touchend', (event) => {
-                    event.preventDefault();
-                    //stops short touches from calling the timeout
-                    if(this._timeout) {
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                } );
-
-            }
-            else {
-                dotClickable.addEventListener('contextmenu', (event) => {
-                    console.log(event);
-                    cfg.onContextMenu(event, this);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    console.log("Label context menu");
-                });
-            }
+            const contextMenuCallback = (event) => {
+                cfg.onContextMenu(event, this);
+            };
+            addContextMenuListener(dotClickable, contextMenuCallback);
             
         }
 
@@ -9736,12 +9785,12 @@ class Dot {
         this._x = x;
         this._y = y;
         var dotStyle = this._dot.style;
-        dotStyle["left"] = (Math.round(x) - 4) + 'px';
-        dotStyle["top"] = (Math.round(y) - 4) + 'px';
+        dotStyle["left"] = (Math.round(x) - 6) + 'px';
+        dotStyle["top"] = (Math.round(y) - 6) + 'px';
 
         var dotClickableStyle = this._dotClickable.style;
-        dotClickableStyle["left"] = (Math.round(x) - 9) + 'px';
-        dotClickableStyle["top"] = (Math.round(y) - 9) + 'px';
+        dotClickableStyle["left"] = (Math.round(x) - 14) + 'px';
+        dotClickableStyle["top"] = (Math.round(y) - 14) + 'px';
     }
 
     setFillColor(color) {
@@ -9756,12 +9805,16 @@ class Dot {
         this._dot.style.opacity = opacity;
     }
 
+    _updateVisibility() {
+        this._dot.style.visibility = this._dotClickable.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+    }
+
     setVisible(visible) {
         if (this._visible === visible) {
             return;
         }
         this._visible = !!visible;
-        this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+        this._updateVisibility();
     }
 
     setCulled(culled) {
@@ -9769,7 +9822,7 @@ class Dot {
             return;
         }
         this._culled = !!culled;
-        this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+        this._updateVisibility();
     }
 
     setClickable(clickable) {
@@ -9799,6 +9852,413 @@ class Dot {
     }
 }
 
+/** @private */
+class Label {
+
+    constructor(parentElement, cfg = {}) {
+
+        this._highlightClass = "viewer-ruler-label-highlighted";
+
+        this._prefix = cfg.prefix || "";
+        this._x = 0;
+        this._y = 0;
+        this._visible = true;
+        this._culled = false;
+
+        this._label = document.createElement('div');
+        this._label.className += this._label.className ? ' viewer-ruler-label' : 'viewer-ruler-label';
+        this._timeout = null;
+
+        var label = this._label;
+        var style = label.style;
+
+        style["border-radius"] = 5 + "px";
+        style.color = "white";
+        style.padding = "4px";
+        style.border = "solid 1px";
+        style.background = "lightgreen";
+        style.position = "absolute";
+        style["z-index"] = cfg.zIndex === undefined ? "5000005" : cfg.zIndex;
+        style.width = "auto";
+        style.height = "auto";
+        style.visibility = "visible";
+        style.top = 0 + "px";
+        style.left = 0 + "px";
+        style["pointer-events"] = "all";
+        style["opacity"] = 1.0;
+        if (cfg.onContextMenu) ;
+        label.innerText = "";
+
+        parentElement.appendChild(label);
+
+        this.setPos(cfg.x || 0, cfg.y || 0);
+        this.setFillColor(cfg.fillColor);
+        this.setBorderColor(cfg.fillColor);
+        this.setText(cfg.text);
+
+        if (cfg.onMouseOver) {
+            label.addEventListener('mouseover', (event) => {
+                cfg.onMouseOver(event, this);
+                event.preventDefault();
+            });
+        }
+
+        if (cfg.onMouseLeave) {
+            label.addEventListener('mouseleave', (event) => {
+                cfg.onMouseLeave(event, this);
+                event.preventDefault();
+            });
+        }
+
+        if (cfg.onMouseWheel) {
+            label.addEventListener('wheel', (event) => {
+                cfg.onMouseWheel(event, this);
+            });
+        }
+
+        if (cfg.onMouseDown) {
+            label.addEventListener('mousedown', (event) => {
+                cfg.onMouseDown(event, this);
+                event.stopPropagation();
+            });
+        }
+
+        if (cfg.onMouseUp) {
+            label.addEventListener('mouseup', (event) => {
+                cfg.onMouseUp(event, this);
+                event.stopPropagation();
+            });
+        }
+
+        if (cfg.onMouseMove) {
+            label.addEventListener('mousemove', (event) => {
+                cfg.onMouseMove(event, this);
+            });
+        }
+
+        if (cfg.onContextMenu) {
+            const contextMenuCallback = (event) => {
+                cfg.onContextMenu(event, this);
+            };
+            addContextMenuListener(label, contextMenuCallback);
+            
+        }
+    }
+
+    setPos(x, y) {
+        this._x = x;
+        this._y = y;
+        var style = this._label.style;
+        style["left"] = (Math.round(x) - 20) + 'px';
+        style["top"] = (Math.round(y) - 12) + 'px';
+    }
+
+    setPosOnWire(x1, y1, x2, y2) {
+        var x = x1 + ((x2 - x1) * 0.5);
+        var y = y1 + ((y2 - y1) * 0.5);
+        var style = this._label.style;
+        style["left"] = (Math.round(x) - 20) + 'px';
+        style["top"] = (Math.round(y) - 12) + 'px';
+    }
+
+    setPosBetweenWires(x1, y1, x2, y2, x3, y3) {
+        var x = (x1 + x2 + x3) / 3;
+        var y = (y1 + y2 + y3) / 3;
+        var style = this._label.style;
+        style["left"] = (Math.round(x) - 20) + 'px';
+        style["top"] = (Math.round(y) - 12) + 'px';
+    }
+
+    setText(text) {
+        this._label.innerHTML = this._prefix + (text || "");
+    }
+
+    setFillColor(color) {
+        this._fillColor = color || "lightgreen";
+        this._label.style.background =this._fillColor;
+    }
+
+    setBorderColor(color) {
+        this._borderColor = color || "black";
+        this._label.style.border = "solid 1px " + this._borderColor;
+    }
+
+    setOpacity(opacity) {
+        this._label.style.opacity = opacity;
+    }
+
+    _updateVisibility() {
+        this._label.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+    }
+
+    setVisible(visible) {
+        if (this._visible === visible) {
+            return;
+        }
+        this._visible = !!visible;
+        this._updateVisibility();
+    }
+
+    setCulled(culled) {
+        if (this._culled === culled) {
+            return;
+        }
+        this._culled = !!culled;
+        this._updateVisibility();
+    }
+
+    setHighlighted(highlighted) {
+        if (this._highlighted === highlighted) {
+            return;
+        }
+        this._highlighted = !!highlighted;
+        if (this._highlighted) {
+            this._label.classList.add(this._highlightClass);
+        } else {
+            this._label.classList.remove(this._highlightClass);
+        }
+    }
+
+    setClickable(clickable) {
+        this._label.style["pointer-events"] = (clickable) ? "all" : "none";
+    }
+
+    setPrefix(prefix) {
+        if(this._prefix === prefix){
+            return;
+        }
+        this._prefix = prefix;
+    }
+
+    destroy() {
+        if (this._label.parentElement) {
+            this._label.parentElement.removeChild(this._label);
+        }
+    }
+
+    
+}
+
+/** @private */
+class Wire {
+
+    constructor(parentElement, cfg = {}) {
+
+        this._color = cfg.color || "black";
+        this._highlightClass = "viewer-ruler-wire-highlighted";
+
+        this._wire = document.createElement('div');
+        this._wire.className += this._wire.className ? ' viewer-ruler-wire' : 'viewer-ruler-wire';
+
+        this._wireClickable = document.createElement('div');
+        this._wireClickable.className += this._wireClickable.className ? ' viewer-ruler-wire-clickable' : 'viewer-ruler-wire-clickable';
+
+        this._thickness = cfg.thickness || 1.0;
+        this._thicknessClickable = cfg.thicknessClickable || 6.0;
+
+        this._visible = true;
+        this._culled = false;
+
+        var wire = this._wire;
+        var wireStyle = wire.style;
+
+        wireStyle.border = "solid " + this._thickness + "px " + this._color;
+        wireStyle.position = "absolute";
+        wireStyle["z-index"] = cfg.zIndex === undefined ? "2000001" : cfg.zIndex;
+        wireStyle.width = 0 + "px";
+        wireStyle.height = 0 + "px";
+        wireStyle.visibility = "visible";
+        wireStyle.top = 0 + "px";
+        wireStyle.left = 0 + "px";
+        wireStyle['-webkit-transform-origin'] = "0 0";
+        wireStyle['-moz-transform-origin'] = "0 0";
+        wireStyle['-ms-transform-origin'] = "0 0";
+        wireStyle['-o-transform-origin'] = "0 0";
+        wireStyle['transform-origin'] = "0 0";
+        wireStyle['-webkit-transform'] = 'rotate(0deg)';
+        wireStyle['-moz-transform'] = 'rotate(0deg)';
+        wireStyle['-ms-transform'] = 'rotate(0deg)';
+        wireStyle['-o-transform'] = 'rotate(0deg)';
+        wireStyle['transform'] = 'rotate(0deg)';
+        wireStyle["opacity"] = 1.0;
+        wireStyle["pointer-events"] = "none";
+        if (cfg.onContextMenu) ;
+
+        parentElement.appendChild(wire);
+
+        var wireClickable = this._wireClickable;
+        var wireClickableStyle = wireClickable.style;
+
+        wireClickableStyle.border = "solid " + this._thicknessClickable + "px " + this._color;
+        wireClickableStyle.position = "absolute";
+        wireClickableStyle["z-index"] = cfg.zIndex === undefined ? "2000002" : (cfg.zIndex + 1);
+        wireClickableStyle.width = 0 + "px";
+        wireClickableStyle.height = 0 + "px";
+        wireClickableStyle.visibility = "visible";
+        wireClickableStyle.top = 0 + "px";
+        wireClickableStyle.left = 0 + "px";
+        // wireClickableStyle["pointer-events"] = "none";
+        wireClickableStyle['-webkit-transform-origin'] = "0 0";
+        wireClickableStyle['-moz-transform-origin'] = "0 0";
+        wireClickableStyle['-ms-transform-origin'] = "0 0";
+        wireClickableStyle['-o-transform-origin'] = "0 0";
+        wireClickableStyle['transform-origin'] = "0 0";
+        wireClickableStyle['-webkit-transform'] = 'rotate(0deg)';
+        wireClickableStyle['-moz-transform'] = 'rotate(0deg)';
+        wireClickableStyle['-ms-transform'] = 'rotate(0deg)';
+        wireClickableStyle['-o-transform'] = 'rotate(0deg)';
+        wireClickableStyle['transform'] = 'rotate(0deg)';
+        wireClickableStyle["opacity"] = 0.0;
+        wireClickableStyle["pointer-events"] = "none";
+        if (cfg.onContextMenu) ;
+
+        parentElement.appendChild(wireClickable);
+
+        if (cfg.onMouseOver) {
+            wireClickable.addEventListener('mouseover', (event) => {
+                cfg.onMouseOver(event, this);
+            });
+        }
+
+        if (cfg.onMouseLeave) {
+            wireClickable.addEventListener('mouseleave', (event) => {
+                cfg.onMouseLeave(event, this);
+            });
+        }
+
+        if (cfg.onMouseWheel) {
+            wireClickable.addEventListener('wheel', (event) => {
+                cfg.onMouseWheel(event, this);
+            });
+        }
+
+        if (cfg.onMouseDown) {
+            wireClickable.addEventListener('mousedown', (event) => {
+                cfg.onMouseDown(event, this);
+            });
+        }
+
+        if (cfg.onMouseUp) {
+            wireClickable.addEventListener('mouseup', (event) => {
+                cfg.onMouseUp(event, this);
+            });
+        }
+
+        if (cfg.onMouseMove) {
+            wireClickable.addEventListener('mousemove', (event) => {
+                cfg.onMouseMove(event, this);
+            });
+        }
+
+        if (cfg.onContextMenu) {
+            const contextMenuCallback = (event) => {
+                cfg.onContextMenu(event, this);
+            };
+            addContextMenuListener(wireClickable, contextMenuCallback);
+            
+        }
+
+        this._x1 = 0;
+        this._y1 = 0;
+        this._x2 = 0;
+        this._y2 = 0;
+
+        this._update();
+    }
+
+    get visible() {
+        return this._wire.style.visibility === "visible";
+    }
+
+    _update() {
+
+        var length = Math.abs(Math.sqrt((this._x1 - this._x2) * (this._x1 - this._x2) + (this._y1 - this._y2) * (this._y1 - this._y2)));
+        var angle = Math.atan2(this._y2 - this._y1, this._x2 - this._x1) * 180.0 / Math.PI;
+
+        var wireStyle = this._wire.style;
+        wireStyle["width"] = Math.round(length) + 'px';
+        wireStyle["left"] = Math.round(this._x1) + 'px';
+        wireStyle["top"] = Math.round(this._y1) + 'px';
+        wireStyle['-webkit-transform'] =
+            wireStyle['-moz-transform'] =
+            wireStyle['-ms-transform'] =
+            wireStyle['-o-transform'] =
+            wireStyle['transform'] = 'rotate(' + angle + 'deg) translate(-' + this._thickness + 'px, -' + this._thickness + 'px)';
+
+        var wireClickableStyle = this._wireClickable.style;
+        wireClickableStyle["width"] = Math.round(length) + 'px';
+        wireClickableStyle["left"] = Math.round(this._x1) + 'px';
+        wireClickableStyle["top"] = Math.round(this._y1) + 'px';
+        wireClickableStyle['-webkit-transform'] =
+            wireClickableStyle['-moz-transform'] =
+            wireClickableStyle['-ms-transform'] =
+            wireClickableStyle['-o-transform'] =
+            wireClickableStyle['transform'] = 'rotate(' + angle + 'deg) translate(-' + this._thicknessClickable + 'px, -' + this._thicknessClickable + 'px)';
+    }
+
+    setStartAndEnd(x1, y1, x2, y2) {
+        this._x1 = x1;
+        this._y1 = y1;
+        this._x2 = x2;
+        this._y2 = y2;
+        this._update();
+    }
+
+    setColor(color) {
+        this._color = color || "black";
+        this._wire.style.border = "solid " + this._thickness + "px " + this._color;
+    }
+
+    setOpacity(opacity) {
+        this._wire.style.opacity = opacity;
+    }
+
+    _updateVisibility() {
+        this._wire.style.visibility = this._wireClickable.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+    }
+
+    setVisible(visible) {
+        if (this._visible === visible) {
+            return;
+        }
+        this._visible = !!visible;
+        this._updateVisibility();
+    }
+
+    setCulled(culled) {
+        if (this._culled === culled) {
+            return;
+        }
+        this._culled = !!culled;
+        this._updateVisibility();
+    }
+
+    setClickable(clickable) {
+        this._wireClickable.style["pointer-events"] = (clickable) ? "all" : "none";
+    }
+
+    setHighlighted(highlighted) {
+        if (this._highlighted === highlighted) {
+            return;
+        }
+        this._highlighted = !!highlighted;
+        if (this._highlighted) {
+            this._wire.classList.add(this._highlightClass);
+        } else {
+            this._wire.classList.remove(this._highlightClass);
+        }
+    }
+
+    destroy(visible) {
+        if (this._wire.parentElement) {
+            this._wire.parentElement.removeChild(this._wire);
+        }
+        if (this._wireClickable.parentElement) {
+            this._wireClickable.parentElement.removeChild(this._wireClickable);
+        }
+    }
+}
+
 const tempVec3a$L = math.vec3();
 const tempVec4$1  = math.vec4();
 
@@ -9992,6 +10452,11 @@ class SceneModelEntity {
          */
         this.model = model;
 
+        /**
+         * Identifies if it's a SceneModelEntity
+         */
+        this.isSceneModelEntity = true;
+
         /**
          * The {@link SceneModelMesh}es belonging to this SceneModelEntity.
          *
@@ -10903,28 +11368,13 @@ class Marker extends Component {
      * @type {Entity}
      */
     set entity(entity) {
-        if (this._entity) {
-            if (this._entity === entity) {
-                return;
-            }
-            if (this._onEntityDestroyed !== null) {
-                if (this._entity.model) {
-                    this._entity.model.off(this._onEntityDestroyed);
-                } else {
-                    this._entity.off(this._onEntityDestroyed);
-                }
-                this._onEntityDestroyed = null;
-            }
-            if (this._onEntityModelDestroyed !== null) {
-                if (this._entity.model) {
-                    this._entity.model.off(this._onEntityModelDestroyed);
-                }
-                this._onEntityModelDestroyed = null;
-            }
+        if (this._entity === entity) {
+            return;
         }
+        this._cleanupDestroyedHandlers();
         this._entity = entity;
         if (this._entity) {
-            if (this._entity instanceof SceneModelEntity) {
+            if (this._entity.isSceneModelEntity) {
                 this._onEntityModelDestroyed = this._entity.model.on("destroyed", () => { // SceneModelEntity does not fire events, and cannot exist beyond its VBOSceneModel
                     this._entity = null; // Marker now may become visible, if it was synched to invisible Entity
                     this._onEntityModelDestroyed = null;
@@ -11086,19 +11536,42 @@ class Marker extends Component {
         this.fire("destroyed", true);
         this.scene.camera.off(this._onCameraViewMatrix);
         this.scene.camera.off(this._onCameraProjMatrix);
+        this._cleanupDestroyedHandlers();
+        this._renderer.removeMarker(this);
+        super.destroy();
+    }
+
+    _cleanupDestroyedHandlers() {
         if (this._entity) {
             if (this._onEntityDestroyed !== null) {
-                this._entity.model.off(this._onEntityDestroyed);
+                if (this._entity.model) {
+                    this._entity.model.off(this._onEntityDestroyed);
+                } else {
+                    this._entity.off(this._onEntityDestroyed);
+                }
+                this._onEntityDestroyed = null;
             }
             if (this._onEntityModelDestroyed !== null) {
-                this._entity.model.off(this._onEntityModelDestroyed);
+                if (this._entity.model) {
+                    this._entity.model.off(this._onEntityModelDestroyed);
+                }
+                this._onEntityModelDestroyed = null;
             }
         }
-        this._renderer.removeMarker(this);
-        super.destroy();
     }
 }
 
+const tmpVec2a = math.vec2();
+const tmpVec2b = math.vec2();
+const tmpVec2c = math.vec2();
+const tmpVec2d = math.vec2();
+const tmpVec3a$2 = math.vec3();
+const tmpVec3b$2 = math.vec3();
+const tmpVec4a = math.vec4();
+const tmpVec4b = math.vec4();
+const tmpVec4c = math.vec4();
+const tmpVec4d = math.vec4();
+
 const nop = () => { };
 
 function transformToNode(from, to, vec) {
@@ -11107,10 +11580,124 @@ function transformToNode(from, to, vec) {
     vec[0] += fromRec.left - toRec.left;
     vec[1] += fromRec.top  - toRec.top;
 }
+const toClipSpace = (camera, worldPos, p) => {
+    // to homogeneous coords
+    p.set(worldPos);
+    p[3] = 1;
+
+    // to clip space
+    math.mulMat4v4(camera.viewMatrix, p, p);
+    math.mulMat4v4(camera.projMatrix, p, p);
+};
+
+const toCanvasSpace = (canvas, parentElement, ndc, p) => {
+    p[0] = (1 + ndc[0]) * 0.5 * canvas.offsetWidth;
+    p[1] = (1 - ndc[1]) * 0.5 * canvas.offsetHeight;
+    transformToNode(canvas, parentElement, p);
+};
+
+const clipSegment = (scene, parentElement, start, end, canvasStart, canvasEnd) => {
+    const camera = scene.camera;
+    const canvas = scene.canvas.canvas;
+
+    if (math.distVec3(start, end) < 0.001) {
+        return false;
+    }
+
+    const delta = math.subVec3(end, start, tmpVec3a$2);
+    let s_min = 0.0;
+    let s_max = 1.0;
+
+    for (let plane of scene._sectionPlanesState.sectionPlanes) {
+        const endDot   = math.dotVec3(plane.dir, math.subVec3(plane.pos, end,   tmpVec3b$2));
+        const startDot = math.dotVec3(plane.dir, math.subVec3(plane.pos, start, tmpVec3b$2));
+
+        if ((startDot > 0) && (endDot > 0)) {
+            return false;
+        } else if ((startDot > 0) || (endDot > 0)) {
+            const denom = math.dotVec3(plane.dir, delta);
+            if (Math.abs(denom) >= 1e-6) {
+                const ratio = math.dotVec3(plane.dir, tmpVec3b$2) / denom;
+                if (startDot > 0) {
+                    s_min = Math.max(s_min, ratio);
+                } else {
+                    s_max = Math.min(s_max, ratio);
+                }
+            }
+        }
+    }
+
+    const p0 = tmpVec4a;
+    const p1 = tmpVec4b;
+    toClipSpace(camera, (s_min > 0) ? math.addVec3(start, math.mulVec3Scalar(delta, s_min, tmpVec3b$2), tmpVec3b$2) : start, p0);
+    toClipSpace(camera, (s_max < 1) ? math.addVec3(start, math.mulVec3Scalar(delta, s_max, tmpVec3b$2), tmpVec3b$2) : end,   p1);
+
+    const p0Behind = ((p0[2] / p0[3]) < -1) || (p0[3] < 0);
+    const p1Behind = ((p1[2] / p1[3]) < -1) || (p1[3] < 0);
+    if (p0Behind && p1Behind) {
+        return false;
+    }
+
+    const t = (p0[3] + p0[2]) / ((p0[3] + p0[2]) - (p1[3] + p1[2]));
+
+    if ((t > 0) && (t < 1)) { //p0Behind || p1Behind) {
+        // Find the intersection of a segment with the near plane in clip space, if it exists."""
+        // Calculate the interpolation factor t where the line segment crosses the near plane
+        const delta = math.subVec4(p1, p0, tmpVec4c);
+        math.mulVec4Scalar(delta, t, delta);
+        math.addVec4(p0, delta, p0Behind ? p0 : p1);
+    }
+
+    // normalize clip space coords
+    math.mulVec4Scalar(p0, 1.0 / p0[3]);
+    math.mulVec4Scalar(p1, 1.0 / p1[3]);
+
+    let t_min = 0.0;
+    let t_max = 1.0;
+
+    // If either point is outside the view frustum, clip the line segment
+
+    for (let i = 0; i < 2; ++i) {
+        const denom = p1[i] - p0[i];
+
+        const l = (-p0[3] - p0[i]) / denom;
+        const r = ( p0[3] - p0[i]) / denom;
+
+        if (denom > 0) {
+            t_min = Math.max(t_min, l);
+            t_max = Math.min(t_max, r);
+        } else {
+            t_min = Math.max(t_min, r);
+            t_max = Math.min(t_max, l);
+        }
+    }
+
+    if (t_min >= t_max) {
+        return false;
+    }
+
+    // Calculate the clipped start and end points
+    const ndcDelta = math.subVec4(p1, p0, tmpVec4c);
+    math.addVec4(p0, math.mulVec4Scalar(ndcDelta, t_max, tmpVec4d), p1);
+    math.addVec4(p0, math.mulVec4Scalar(ndcDelta, t_min, tmpVec4d), p0);
+
+    math.mulVec4Scalar(p0, 1 / p0[3]);
+    math.mulVec4Scalar(p1, 1 / p1[3]);
+
+    toCanvasSpace(canvas, parentElement, p0, canvasStart);
+    toCanvasSpace(canvas, parentElement, p1, canvasEnd);
+
+    return true;
+};
+
 class Dot3D extends Marker {
     constructor(scene, markerCfg, parentElement, cfg = {}) {
+        const camera = scene.camera;
+
         super(scene, markerCfg);
 
+        this.__visible = true;  // "__" to not interfere with Marker::_visible
+
         const handler = (cfgEvent, componentEvent) => {
             return event => {
                 if (cfgEvent) {
@@ -11120,6 +11707,7 @@ class Dot3D extends Marker {
             };
         };
         this._dot = new Dot(parentElement, {
+            borderColor: cfg.borderColor,
             fillColor: cfg.fillColor,
             zIndex: cfg.zIndex,
             onMouseOver:   handler(cfg.onMouseOver,   "mouseover"),
@@ -11134,19 +11722,62 @@ class Dot3D extends Marker {
             onContextMenu: handler(cfg.onContextMenu, "contextmenu")
         });
 
+        const toClipSpace = (worldPos, p) => {
+            // to homogeneous coords
+            p.set(worldPos);
+            p[3] = 1;
+
+            // to clip space
+            math.mulMat4v4(camera.viewMatrix, p, p);
+            math.mulMat4v4(camera.projMatrix, p, p);
+        };
+
+        const toCanvasSpace = ndc => {
+            const canvas = scene.canvas.canvas;
+            ndc[0] = (1 + ndc[0]) * 0.5 * canvas.offsetWidth;
+            ndc[1] = (1 - ndc[1]) * 0.5 * canvas.offsetHeight;
+            transformToNode(canvas, parentElement, ndc);
+        };
+
         const updateDotPos = () => {
-            const pos = this.canvasPos.slice();
-            transformToNode(scene.canvas.canvas, parentElement, pos);
-            this._dot.setPos(pos[0], pos[1]);
+            if (! this.__visible) {
+                return;
+            }
+            const p0 = tmpVec4c;
+            toClipSpace(this.worldPos, p0);
+            math.mulVec3Scalar(p0, 1.0 / p0[3]);
+
+            const outsideFrustum = ((p0[3] < 0)
+                                    ||
+                                    (p0[0] < -1) || (p0[0] > 1)
+                                    ||
+                                    (p0[1] < -1) || (p0[1] > 1)
+                                    ||
+                                    (p0[2] < -1) || (p0[2] > 1));
+            const culled = outsideFrustum || scene._sectionPlanesState.sectionPlanes.some(
+                plane => (math.dotVec3(plane.dir, math.subVec3(plane.pos, this.worldPos, tmpVec3a$2)) > 0));
+
+            this._dot.setCulled(culled);
+            if (!culled) {
+                toCanvasSpace(p0);
+                this._dot.setPos(p0[0], p0[1]);
+            }
         };
 
         this.on("worldPos", updateDotPos);
 
-        const onViewMatrix = scene.camera.on("viewMatrix", updateDotPos);
-        const onProjMatrix = scene.camera.on("projMatrix", updateDotPos);
+        const onViewMatrix = camera.on("viewMatrix", updateDotPos);
+        const onProjMatrix = camera.on("projMatrix", updateDotPos);
+        const onCanvasBnd  = scene.canvas.on("boundary", updateDotPos);
+        const planesUpdate = scene.on("sectionPlaneUpdated", updateDotPos);
+
+        this._updatePosition = updateDotPos;
+
         this._cleanup = () => {
-            scene.camera.off(onViewMatrix);
-            scene.camera.off(onProjMatrix);
+            camera.off(onViewMatrix);
+            camera.off(onProjMatrix);
+            scene.canvas.off(onCanvasBnd);
+            scene.off(planesUpdate);
             this._dot.destroy();
         };
     }
@@ -11155,14 +11786,14 @@ class Dot3D extends Marker {
         this._dot.setClickable(value);
     }
 
-    setCulled(value) {
-        this._dot.setCulled(value);
-    }
-
     setFillColor(value) {
         this._dot.setFillColor(value);
     }
 
+    setBorderColor(value) {
+        this._dot.setBorderColor(value);
+    }
+
     setHighlighted(value) {
         this._dot.setHighlighted(value);
     }
@@ -11172,7 +11803,11 @@ class Dot3D extends Marker {
     }
 
     setVisible(value) {
-        this._dot.setVisible(value);
+        if (this.__visible != value) {
+            this.__visible = value;
+            this._updatePosition();
+            this._dot.setVisible(value);
+        }
     }
 
     destroy() {
@@ -11182,6 +11817,189 @@ class Dot3D extends Marker {
 
 }
 
+class Label3D {
+    constructor(scene, parentElement, cfg) {
+        const camera = scene.camera;
+
+        this._label = new Label(parentElement, cfg);
+        this._start = math.vec3();
+        this._mid   = math.vec3();
+        this._end   = math.vec3();
+        this._yOff  = 0;
+        this._betweenWires = false;
+        this.__visible = true;
+
+        const setPosOnWire = (p0, p1, yOff) => {
+            p0[0] += p1[0];
+            p0[1] += p1[1];
+            math.mulVec2Scalar(p0, .5);
+            this._label.setPos(p0[0], p0[1] + yOff);
+        };
+
+        this._updatePositions = () => {
+            if (! this.__visible) {
+                return;
+            }
+            if (this._betweenWires) {
+                const visibleA = clipSegment(scene, parentElement, this._start, this._mid, tmpVec2a, tmpVec2b);
+                const visibleB = clipSegment(scene, parentElement, this._end,   this._mid, tmpVec2c, tmpVec2d);
+                this._label.setCulled(! (visibleA || visibleB));
+                if (visibleA && visibleB) {
+                    tmpVec2b[0] += tmpVec2d[0];
+                    tmpVec2b[1] += tmpVec2d[1];
+                    math.mulVec2Scalar(tmpVec2b, .5);
+
+                    tmpVec2b[0] += tmpVec2a[0] + tmpVec2c[0];
+                    tmpVec2b[1] += tmpVec2a[1] + tmpVec2c[1];
+                    math.mulVec2Scalar(tmpVec2b, 1/3);
+                    this._label.setPos(tmpVec2b[0], tmpVec2b[1]);
+                } else if (visibleA) {
+                    setPosOnWire(tmpVec2a, tmpVec2b, 0);
+                } else if (visibleB) {
+                    setPosOnWire(tmpVec2c, tmpVec2d, 0);
+                }
+            } else {
+                const visible = (clipSegment(scene, parentElement, this._start, this._end, tmpVec2a, tmpVec2b)
+                                 &&
+                                 (math.distVec2(tmpVec2a, tmpVec2b) >= this._labelMinAxisLength));
+                this._label.setCulled(!visible);
+                if (visible) {
+                    setPosOnWire(tmpVec2a, tmpVec2b, this._yOff);
+                }
+            }
+        };
+
+        const onViewMatrix = camera.on("viewMatrix", this._updatePositions);
+        const onProjMatrix = camera.on("projMatrix", this._updatePositions);
+        const onCanvasBnd  = scene.canvas.on("boundary", this._updatePositions);
+        const planesUpdate = scene.on("sectionPlaneUpdated", this._updatePositions);
+
+        this._cleanup = () => {
+            camera.off(onViewMatrix);
+            camera.off(onProjMatrix);
+            scene.canvas.off(onCanvasBnd);
+            scene.off(planesUpdate);
+            this._label.destroy();
+        };
+    }
+
+    setPosOnWire(p0, p1, yOff, labelMinAxisLength) {
+        this._start.set(p0);
+        this._end.set(p1);
+        this._yOff = yOff;
+        this._labelMinAxisLength = labelMinAxisLength;
+        this._betweenWires = false;
+        this._updatePositions();
+    }
+
+    setPosBetween(p0, p1, p2) {
+        this._start.set(p0);
+        this._mid.set(p1);
+        this._end.set(p2);
+        this._betweenWires = true;
+        this._updatePositions();
+    }
+
+    setFillColor(value) {
+        this._label.setFillColor(value);
+    }
+
+    setHighlighted(value) {
+        this._label.setHighlighted(value);
+    }
+
+    setText(value) {
+        this._label.setText(value);
+    }
+
+    setClickable(value) {
+        this._label.setClickable(value);
+    }
+
+    setVisible(value) {
+        if (this.__visible != value) {
+            this.__visible = value;
+            this._updatePositions();
+            this._label.setVisible(value);
+        }
+    }
+
+    destroy() {
+        this._cleanup();
+    }
+
+}
+
+class Wire3D {
+    constructor(scene, parentElement, cfg) {
+        const camera = scene.camera;
+
+        this._wire  = new Wire(parentElement, cfg);
+        this._start = math.vec3();
+        this._end   = math.vec3();
+        this.__visible = true;
+
+        this._updatePositions = () => {
+            if (! this.__visible) {
+                return;
+            }
+            const visible = clipSegment(scene, parentElement, this._start, this._end, tmpVec2a, tmpVec2b);
+            this._wire.setCulled(! visible);
+            if (visible) {
+                this._wire.setStartAndEnd(tmpVec2a[0], tmpVec2a[1], tmpVec2b[0], tmpVec2b[1]);
+            }
+        };
+
+        const onViewMatrix = camera.on("viewMatrix", this._updatePositions);
+        const onProjMatrix = camera.on("projMatrix", this._updatePositions);
+        const onCanvasBnd  = scene.canvas.on("boundary", this._updatePositions);
+        const planesUpdate = scene.on("sectionPlaneUpdated", this._updatePositions);
+
+        this._cleanup = () => {
+            camera.off(onViewMatrix);
+            camera.off(onProjMatrix);
+            scene.canvas.off(onCanvasBnd);
+            scene.off(planesUpdate);
+            this._wire.destroy();
+        };
+    }
+
+    setEnds(start, end) {
+        this._start.set(start);
+        this._end.set(end);
+        this._updatePositions();
+    }
+
+    setClickable(value) {
+        this._wire.setClickable(value);
+    }
+
+    setColor(value) {
+        this._wire.setColor(value);
+    }
+
+    setHighlighted(value) {
+        this._wire.setHighlighted(value);
+    }
+
+    setOpacity(value) {
+        this._wire.setOpacity(value);
+    }
+
+    setVisible(value) {
+        if (this.__visible != value) {
+            this.__visible = value;
+            this._updatePositions();
+            this._wire.setVisible(value);
+        }
+    }
+
+    destroy() {
+        this._cleanup();
+    }
+
+}
+
 function activateDraggableDot(dot, cfg) {
     const extractCFG = function(propName, defaultValue) {
         if (propName in cfg) {
@@ -11496,469 +12314,8 @@ const touchPointSelector = function(viewer, pointerCircle, ray2WorldPos) {
     };
 };
 
-/** @private */
-class Wire {
-
-    constructor(parentElement, cfg = {}) {
-
-        this._color = cfg.color || "black";
-        this._highlightClass = "viewer-ruler-wire-highlighted";
-
-        this._wire = document.createElement('div');
-        this._wire.className += this._wire.className ? ' viewer-ruler-wire' : 'viewer-ruler-wire';
-
-        this._wireClickable = document.createElement('div');
-        this._wireClickable.className += this._wireClickable.className ? ' viewer-ruler-wire-clickable' : 'viewer-ruler-wire-clickable';
-
-        this._thickness = cfg.thickness || 1.0;
-        this._thicknessClickable = cfg.thicknessClickable || 6.0;
-
-        this._visible = true;
-        this._culled = false;
-
-        var wire = this._wire;
-        var wireStyle = wire.style;
-
-        wireStyle.border = "solid " + this._thickness + "px " + this._color;
-        wireStyle.position = "absolute";
-        wireStyle["z-index"] = cfg.zIndex === undefined ? "2000001" : cfg.zIndex;
-        wireStyle.width = 0 + "px";
-        wireStyle.height = 0 + "px";
-        wireStyle.visibility = "visible";
-        wireStyle.top = 0 + "px";
-        wireStyle.left = 0 + "px";
-        wireStyle['-webkit-transform-origin'] = "0 0";
-        wireStyle['-moz-transform-origin'] = "0 0";
-        wireStyle['-ms-transform-origin'] = "0 0";
-        wireStyle['-o-transform-origin'] = "0 0";
-        wireStyle['transform-origin'] = "0 0";
-        wireStyle['-webkit-transform'] = 'rotate(0deg)';
-        wireStyle['-moz-transform'] = 'rotate(0deg)';
-        wireStyle['-ms-transform'] = 'rotate(0deg)';
-        wireStyle['-o-transform'] = 'rotate(0deg)';
-        wireStyle['transform'] = 'rotate(0deg)';
-        wireStyle["opacity"] = 1.0;
-        wireStyle["pointer-events"] = "none";
-        if (cfg.onContextMenu) ;
-
-        parentElement.appendChild(wire);
-
-        var wireClickable = this._wireClickable;
-        var wireClickableStyle = wireClickable.style;
-
-        wireClickableStyle.border = "solid " + this._thicknessClickable + "px " + this._color;
-        wireClickableStyle.position = "absolute";
-        wireClickableStyle["z-index"] = cfg.zIndex === undefined ? "2000002" : (cfg.zIndex + 1);
-        wireClickableStyle.width = 0 + "px";
-        wireClickableStyle.height = 0 + "px";
-        wireClickableStyle.visibility = "visible";
-        wireClickableStyle.top = 0 + "px";
-        wireClickableStyle.left = 0 + "px";
-        // wireClickableStyle["pointer-events"] = "none";
-        wireClickableStyle['-webkit-transform-origin'] = "0 0";
-        wireClickableStyle['-moz-transform-origin'] = "0 0";
-        wireClickableStyle['-ms-transform-origin'] = "0 0";
-        wireClickableStyle['-o-transform-origin'] = "0 0";
-        wireClickableStyle['transform-origin'] = "0 0";
-        wireClickableStyle['-webkit-transform'] = 'rotate(0deg)';
-        wireClickableStyle['-moz-transform'] = 'rotate(0deg)';
-        wireClickableStyle['-ms-transform'] = 'rotate(0deg)';
-        wireClickableStyle['-o-transform'] = 'rotate(0deg)';
-        wireClickableStyle['transform'] = 'rotate(0deg)';
-        wireClickableStyle["opacity"] = 0.0;
-        wireClickableStyle["pointer-events"] = "none";
-        if (cfg.onContextMenu) ;
-
-        parentElement.appendChild(wireClickable);
-
-        if (cfg.onMouseOver) {
-            wireClickable.addEventListener('mouseover', (event) => {
-                cfg.onMouseOver(event, this);
-            });
-        }
-
-        if (cfg.onMouseLeave) {
-            wireClickable.addEventListener('mouseleave', (event) => {
-                cfg.onMouseLeave(event, this);
-            });
-        }
-
-        if (cfg.onMouseWheel) {
-            wireClickable.addEventListener('wheel', (event) => {
-                cfg.onMouseWheel(event, this);
-            });
-        }
-
-        if (cfg.onMouseDown) {
-            wireClickable.addEventListener('mousedown', (event) => {
-                cfg.onMouseDown(event, this);
-            });
-        }
-
-        if (cfg.onMouseUp) {
-            wireClickable.addEventListener('mouseup', (event) => {
-                cfg.onMouseUp(event, this);
-            });
-        }
-
-        if (cfg.onMouseMove) {
-            wireClickable.addEventListener('mousemove', (event) => {
-                cfg.onMouseMove(event, this);
-            });
-        }
-
-        if (cfg.onContextMenu) {
-            if(os.isIphoneSafari()){
-                wireClickable.addEventListener('touchstart', (event) => {
-                    event.preventDefault();
-                    if(this._timeout){
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                    this._timeout = setTimeout(() => {
-                        event.clientX = event.touches[0].clientX;
-                        event.clientY = event.touches[0].clientY;
-                        cfg.onContextMenu(event, this);
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }, 500);
-                });
-
-                wireClickable.addEventListener('touchend', (event) => {
-                    event.preventDefault();
-                    //stops short touches from calling the timeout
-                    if(this._timeout) {
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                } );
-
-            }
-            else {
-                wireClickable.addEventListener('contextmenu', (event) => {
-                    console.log(event);
-                    cfg.onContextMenu(event, this);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    console.log("Label context menu");
-                });
-            }
-            
-        }
-
-        this._x1 = 0;
-        this._y1 = 0;
-        this._x2 = 0;
-        this._y2 = 0;
-
-        this._update();
-    }
-
-    get visible() {
-        return this._wire.style.visibility === "visible";
-    }
-
-    _update() {
-
-        var length = Math.abs(Math.sqrt((this._x1 - this._x2) * (this._x1 - this._x2) + (this._y1 - this._y2) * (this._y1 - this._y2)));
-        var angle = Math.atan2(this._y2 - this._y1, this._x2 - this._x1) * 180.0 / Math.PI;
-
-        var wireStyle = this._wire.style;
-        wireStyle["width"] = Math.round(length) + 'px';
-        wireStyle["left"] = Math.round(this._x1) + 'px';
-        wireStyle["top"] = Math.round(this._y1) + 'px';
-        wireStyle['-webkit-transform'] = 'rotate(' + angle + 'deg)';
-        wireStyle['-moz-transform'] = 'rotate(' + angle + 'deg)';
-        wireStyle['-ms-transform'] = 'rotate(' + angle + 'deg)';
-        wireStyle['-o-transform'] = 'rotate(' + angle + 'deg)';
-        wireStyle['transform'] = 'rotate(' + angle + 'deg)';
-
-        var wireClickableStyle = this._wireClickable.style;
-        wireClickableStyle["width"] = Math.round(length) + 'px';
-        wireClickableStyle["left"] = Math.round(this._x1) + 'px';
-        wireClickableStyle["top"] = Math.round(this._y1) + 'px';
-        wireClickableStyle['-webkit-transform'] = 'rotate(' + angle + 'deg)';
-        wireClickableStyle['-moz-transform'] = 'rotate(' + angle + 'deg)';
-        wireClickableStyle['-ms-transform'] = 'rotate(' + angle + 'deg)';
-        wireClickableStyle['-o-transform'] = 'rotate(' + angle + 'deg)';
-        wireClickableStyle['transform'] = 'rotate(' + angle + 'deg)';
-    }
-
-    setStartAndEnd(x1, y1, x2, y2) {
-        this._x1 = x1;
-        this._y1 = y1;
-        this._x2 = x2;
-        this._y2 = y2;
-        this._update();
-    }
-
-    setColor(color) {
-        this._color = color || "black";
-        this._wire.style.border = "solid " + this._thickness + "px " + this._color;
-    }
-
-    setOpacity(opacity) {
-        this._wire.style.opacity = opacity;
-    }
-
-    setVisible(visible) {
-        if (this._visible === visible) {
-            return;
-        }
-        this._visible = !!visible;
-        this._wire.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
-    }
-
-    setCulled(culled) {
-        if (this._culled === culled) {
-            return;
-        }
-        this._culled = !!culled;
-        this._wire.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
-    }
-
-    setClickable(clickable) {
-        this._wireClickable.style["pointer-events"] = (clickable) ? "all" : "none";
-    }
-
-    setHighlighted(highlighted) {
-        if (this._highlighted === highlighted) {
-            return;
-        }
-        this._highlighted = !!highlighted;
-        if (this._highlighted) {
-            this._wire.classList.add(this._highlightClass);
-        } else {
-            this._wire.classList.remove(this._highlightClass);
-        }
-    }
-
-    destroy(visible) {
-        if (this._wire.parentElement) {
-            this._wire.parentElement.removeChild(this._wire);
-        }
-        if (this._wireClickable.parentElement) {
-            this._wireClickable.parentElement.removeChild(this._wireClickable);
-        }
-    }
-}
-
-/** @private */
-class Label {
-
-    constructor(parentElement, cfg = {}) {
-
-        this._highlightClass = "viewer-ruler-label-highlighted";
-
-        this._prefix = cfg.prefix || "";
-        this._x = 0;
-        this._y = 0;
-        this._visible = true;
-        this._culled = false;
-
-        this._label = document.createElement('div');
-        this._label.className += this._label.className ? ' viewer-ruler-label' : 'viewer-ruler-label';
-        this._timeout = null;
-
-        var label = this._label;
-        var style = label.style;
-
-        style["border-radius"] = 5 + "px";
-        style.color = "white";
-        style.padding = "4px";
-        style.border = "solid 1px";
-        style.background = "lightgreen";
-        style.position = "absolute";
-        style["z-index"] = cfg.zIndex === undefined ? "5000005" : cfg.zIndex;
-        style.width = "auto";
-        style.height = "auto";
-        style.visibility = "visible";
-        style.top = 0 + "px";
-        style.left = 0 + "px";
-        style["pointer-events"] = "all";
-        style["opacity"] = 1.0;
-        if (cfg.onContextMenu) ;
-        label.innerText = "";
-
-        parentElement.appendChild(label);
-
-        this.setPos(cfg.x || 0, cfg.y || 0);
-        this.setFillColor(cfg.fillColor);
-        this.setBorderColor(cfg.fillColor);
-        this.setText(cfg.text);
-
-        if (cfg.onMouseOver) {
-            label.addEventListener('mouseover', (event) => {
-                cfg.onMouseOver(event, this);
-                event.preventDefault();
-            });
-        }
-
-        if (cfg.onMouseLeave) {
-            label.addEventListener('mouseleave', (event) => {
-                cfg.onMouseLeave(event, this);
-                event.preventDefault();
-            });
-        }
-
-        if (cfg.onMouseWheel) {
-            label.addEventListener('wheel', (event) => {
-                cfg.onMouseWheel(event, this);
-            });
-        }
-
-        if (cfg.onMouseDown) {
-            label.addEventListener('mousedown', (event) => {
-                cfg.onMouseDown(event, this);
-                event.stopPropagation();
-            });
-        }
-
-        if (cfg.onMouseUp) {
-            label.addEventListener('mouseup', (event) => {
-                cfg.onMouseUp(event, this);
-                event.stopPropagation();
-            });
-        }
-
-        if (cfg.onMouseMove) {
-            label.addEventListener('mousemove', (event) => {
-                cfg.onMouseMove(event, this);
-            });
-        }
-
-        if (cfg.onContextMenu) {
-            if(os.isIphoneSafari()){
-                label.addEventListener('touchstart', (event) => {
-                    event.preventDefault();
-                    if(this._timeout){
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                    this._timeout = setTimeout(() => {
-                        event.clientX = event.touches[0].clientX;
-                        event.clientY = event.touches[0].clientY;
-                        cfg.onContextMenu(event, this);
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }, 500);
-                });
-
-                label.addEventListener('touchend', (event) => {
-                    event.preventDefault();
-                    //stops short touches from calling the timeout
-                    if(this._timeout) {
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                } );
-
-            }
-            else {
-                label.addEventListener('contextmenu', (event) => {
-                    console.log(event);
-                    cfg.onContextMenu(event, this);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    console.log("Label context menu");
-                });
-            }
-            
-        }
-    }
-
-    setPos(x, y) {
-        this._x = x;
-        this._y = y;
-        var style = this._label.style;
-        style["left"] = (Math.round(x) - 20) + 'px';
-        style["top"] = (Math.round(y) - 12) + 'px';
-    }
-
-    setPosOnWire(x1, y1, x2, y2) {
-        var x = x1 + ((x2 - x1) * 0.5);
-        var y = y1 + ((y2 - y1) * 0.5);
-        var style = this._label.style;
-        style["left"] = (Math.round(x) - 20) + 'px';
-        style["top"] = (Math.round(y) - 12) + 'px';
-    }
-
-    setPosBetweenWires(x1, y1, x2, y2, x3, y3) {
-        var x = (x1 + x2 + x3) / 3;
-        var y = (y1 + y2 + y3) / 3;
-        var style = this._label.style;
-        style["left"] = (Math.round(x) - 20) + 'px';
-        style["top"] = (Math.round(y) - 12) + 'px';
-    }
-
-    setText(text) {
-        this._label.innerHTML = this._prefix + (text || "");
-    }
-
-    setFillColor(color) {
-        this._fillColor = color || "lightgreen";
-        this._label.style.background =this._fillColor;
-    }
-
-    setBorderColor(color) {
-        this._borderColor = color || "black";
-        this._label.style.border = "solid 1px " + this._borderColor;
-    }
-
-    setOpacity(opacity) {
-        this._label.style.opacity = opacity;
-    }
-
-    setVisible(visible) {
-        if (this._visible === visible) {
-            return;
-        }
-        this._visible = !!visible;
-        this._label.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
-    }
-
-    setCulled(culled) {
-        if (this._culled === culled) {
-            return;
-        }
-        this._culled = !!culled;
-        this._label.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
-    }
-
-    setHighlighted(highlighted) {
-        if (this._highlighted === highlighted) {
-            return;
-        }
-        this._highlighted = !!highlighted;
-        if (this._highlighted) {
-            this._label.classList.add(this._highlightClass);
-        } else {
-            this._label.classList.remove(this._highlightClass);
-        }
-    }
-
-    setClickable(clickable) {
-        this._label.style["pointer-events"] = (clickable) ? "all" : "none";
-    }
-
-    setPrefix(prefix) {
-        if(this._prefix === prefix){
-            return;
-        }
-        this._prefix = prefix;
-    }
-
-    destroy() {
-        if (this._label.parentElement) {
-            this._label.parentElement.removeChild(this._label);
-        }
-    }
-
-    
-}
-
-var originVec = math.vec3();
-var targetVec = math.vec3();
+const tmpVec3a$1 = math.vec3();
+const tmpVec3b$1 = math.vec3();
 
 /**
  * @desc Measures the angle indicated by three 3D points.
@@ -11972,7 +12329,9 @@ class AngleMeasurement extends Component {
      */
     constructor(plugin, cfg = {}) {
 
-        super(plugin.viewer.scene, cfg);
+        const scene = plugin.viewer.scene;
+
+        super(scene, cfg);
 
         /**
          * The {@link AngleMeasurementsPlugin} that owns this AngleMeasurement.
@@ -11980,349 +12339,165 @@ class AngleMeasurement extends Component {
          */
         this.plugin = plugin;
 
-        this._container = cfg.container;
-        if (!this._container) {
+        const container = cfg.container;
+        if (!container) {
             throw "config missing: container";
         }
 
         this._color = cfg.color || plugin.defaultColor;
 
-        var scene = this.plugin.viewer.scene;
+        const channel = function(v) {
+            const listeners = [ ];
+            let value = v !== false;
+            return {
+                reg: (l) => listeners.push(l),
+                get: () => value,
+                set: (v) => {
+                    value = v !== false;
+                    listeners.forEach(l => l(value));
+                }
+            };
+        };
 
-        this._originWorld = math.vec3();
-        this._cornerWorld = math.vec3();
-        this._targetWorld = math.vec3();
+        this._visible           = channel(cfg.visible);
+        this._originVisible     = channel(cfg.originVisible);
+        this._cornerVisible     = channel(cfg.cornerVisible);
+        this._targetVisible     = channel(cfg.targetVisible);
+        this._originWireVisible = channel(cfg.originWireVisible);
+        this._targetWireVisible = channel(cfg.targetWireVisible);
+        this._angleVisible      = channel(cfg.angleVisible);
+        this._labelsVisible     = channel();
+        this.labelsVisible      = cfg.labelsVisible;
+        this._clickable         = channel(false);
 
-        this._wp = new Float64Array(12);
-        this._vp = new Float64Array(12);
-        this._pp = new Float64Array(12);
-        this._cp = new Int16Array(6);
+        this.approximate = cfg.approximate;
+
+
+        const canvas = scene.canvas.canvas;
 
         const onMouseOver = cfg.onMouseOver ? (event) => {
             cfg.onMouseOver(event, this);
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mouseover', event));
+            canvas.dispatchEvent(new MouseEvent('mouseover', event));
         } : null;
 
         const onMouseLeave = cfg.onMouseLeave ? (event) => {
             cfg.onMouseLeave(event, this);
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mouseleave', event));
+            canvas.dispatchEvent(new MouseEvent('mouseleave', event));
         } : null;
 
         const onContextMenu = cfg.onContextMenu ? (event) => {
             cfg.onContextMenu(event, this);
         } : null;
 
-        const onMouseWheel = (event) => {
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new WheelEvent('wheel', event));
-        };
+        const onMouseDown  = (event) => canvas.dispatchEvent(new MouseEvent('mousedown', event));
+        const onMouseUp    = (event) => canvas.dispatchEvent(new MouseEvent('mouseup', event));
+        const onMouseMove  = (event) => canvas.dispatchEvent(new MouseEvent('mousemove', event));
+        const onMouseWheel = (event) => canvas.dispatchEvent(new WheelEvent('wheel', event));
 
-        const onMouseDown = (event) => {
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mousedown', event));
-        } ;
 
-        const onMouseUp =  (event) => {
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mouseup', event));
-        };
+        this._cleanups = [ ];
+        this._drawables = [ ];
 
-        const onMouseMove =  (event) => {
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mousemove', event));
+        const registerDrawable = (drawable, visibilityChannels) => {
+            const updateVisibility = () => drawable.setVisible(visibilityChannels.every(ch => ch.get()));
+            visibilityChannels.forEach(ch => ch.reg(updateVisibility));
+            this._drawables.push(drawable);
+            this._cleanups.push(() => drawable.destroy());
         };
 
-        this._originDot = new Dot3D(scene, cfg.origin, this._container, {
-            fillColor: this._color,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
-        this._cornerDot = new Dot3D(scene, cfg.corner, this._container, {
-            fillColor: this._color,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
-        this._targetDot = new Dot3D(scene, cfg.target, this._container, {
-            fillColor: this._color,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
-
-        this._originWire = new Wire(this._container, {
-            color: this._color || "blue",
-            thickness: 1,
-            zIndex: plugin.zIndex,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
-        this._targetWire = new Wire(this._container, {
-            color: this._color || "red",
-            thickness: 1,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
-
-        this._angleLabel = new Label(this._container, {
-            fillColor: this._color || "#00BBFF",
-            prefix: "",
-            text: "",
-            zIndex: plugin.zIndex + 2,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
-
-        this._wpDirty = false;
-        this._vpDirty = false;
-        this._cpDirty = false;
-
-        this._visible = false;
-        this._originVisible = false;
-        this._cornerVisible = false;
-        this._targetVisible = false;
-
-        this._originWireVisible = false;
-        this._targetWireVisible = false;
-
-        this._angleVisible = false;
-        this._labelsVisible = false;
-        this._clickable = false;
-
-        this._originDot.on("worldPos", (value) => {
-            this._originWorld.set(value || [0, 0, 0]);
-            this._wpDirty = true;
-            this._needUpdate(0); // No lag
-        });
-
-        this._cornerDot.on("worldPos", (value) => {
-            this._cornerWorld.set(value || [0, 0, 0]);
-            this._wpDirty = true;
-            this._needUpdate(0); // No lag
-        });
-
-        this._targetDot.on("worldPos", (value) => {
-            this._targetWorld.set(value || [0, 0, 0]);
-            this._wpDirty = true;
-            this._needUpdate(0); // No lag
-        });
-
-        this._onViewMatrix = scene.camera.on("viewMatrix", () => {
-            this._vpDirty = true;
-            this._needUpdate(0); // No lag
-        });
-
-        this._onProjMatrix = scene.camera.on("projMatrix", () => {
-            this._cpDirty = true;
-            this._needUpdate();
-        });
-
-        this._onCanvasBoundary = scene.canvas.on("boundary", () => {
-            this._cpDirty = true;
-            this._needUpdate(0); // No lag
-        });
-
-        this._onSectionPlaneUpdated = scene.on("sectionPlaneUpdated", () => {
-            this._sectionPlanesDirty = true;
-            this._needUpdate();
-        });
-
-        this.approximate = cfg.approximate;
-        this.visible = cfg.visible;
-
-        this.originVisible = cfg.originVisible;
-        this.cornerVisible = cfg.cornerVisible;
-        this.targetVisible = cfg.targetVisible;
-
-        this.originWireVisible = cfg.originWireVisible;
-        this.targetWireVisible = cfg.targetWireVisible;
+        const makeWire = (color, thickness, visibilityChannels) => {
+            const wire = new Wire3D(scene, container, {
+                color: color,
+                thickness: thickness,
+                thicknessClickable: 6,
+                zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
+                onMouseOver,
+                onMouseLeave,
+                onMouseWheel,
+                onMouseDown,
+                onMouseUp,
+                onMouseMove,
+                onContextMenu
+            });
+            registerDrawable(wire, visibilityChannels);
+            return {
+                setEnds: (p0, p1) => wire.setEnds(p0, p1),
+                setColor: value => wire.setColor(value)
+            };
+        };
+        this._originWire = makeWire(this._color || "blue", 1, [ this._visible, this._originWireVisible ]);
+        this._targetWire = makeWire(this._color || "red",  1, [ this._visible, this._targetWireVisible ]);
+
+        const makeLabel = (color, zIndexOffset, visibilityChannels) => {
+            const label = new Label3D(scene, container, {
+                fillColor: color,
+                zIndex: plugin.zIndex + zIndexOffset,
+                onMouseOver,
+                onMouseLeave,
+                onMouseWheel,
+                onMouseDown,
+                onMouseUp,
+                onMouseMove,
+                onContextMenu
+            });
+            registerDrawable(label, visibilityChannels);
+            return {
+                setFillColor:  value => label.setFillColor(value),
+                setPosOnWire:  (p0, p1, offset) => label.setPosOnWire(p0, p1, offset),
+                setPosBetween: (p0, p1, p2) => label.setPosBetween(p0, p1, p2),
+                setText:       str => label.setText(str)
+            };
+        };
+        this._angleLabel = makeLabel(this._color || "#00BBFF", 2, [ this._visible, this._angleVisible, this._labelsVisible ]);
+
+        const makeDot = (cfg, visibilityChannels) => {
+            const dot = new Dot3D(scene, cfg, container, {
+                fillColor: this._color,
+                zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
+                onMouseOver,
+                onMouseLeave,
+                onMouseWheel,
+                onMouseDown,
+                onMouseUp,
+                onMouseMove,
+                onContextMenu
+            });
+            dot.on("worldPos", () => this._update());
+            registerDrawable(dot, visibilityChannels);
+            return dot;
+        };
+        this._originDot = makeDot(cfg.origin, [ this._visible, this._originVisible ]);
+        this._cornerDot = makeDot(cfg.corner, [ this._visible, this._cornerVisible ]);
+        this._targetDot = makeDot(cfg.target, [ this._visible, this._targetVisible ]);
 
-        this.angleVisible = cfg.angleVisible;
-        this.labelsVisible = cfg.labelsVisible;
+        this._update();
     }
 
     _update() {
-
-        if (!this._visible) {
+        if (! this._targetDot) {
             return;
         }
 
-        const scene = this.plugin.viewer.scene;
-
-        if (this._wpDirty) {
-
-            this._wp[0] = this._originWorld[0];
-            this._wp[1] = this._originWorld[1];
-            this._wp[2] = this._originWorld[2];
-            this._wp[3] = 1.0;
-
-            this._wp[4] = this._cornerWorld[0];
-            this._wp[5] = this._cornerWorld[1];
-            this._wp[6] = this._cornerWorld[2];
-            this._wp[7] = 1.0;
-
-            this._wp[8] = this._targetWorld[0];
-            this._wp[9] = this._targetWorld[1];
-            this._wp[10] = this._targetWorld[2];
-            this._wp[11] = 1.0;
-
-            this._wpDirty = false;
-            this._vpDirty = true;
-        }
-
-        if (this._vpDirty) {
-
-            math.transformPositions4(scene.camera.viewMatrix, this._wp, this._vp);
-
-            this._vp[3] = 1.0;
-            this._vp[7] = 1.0;
-            this._vp[11] = 1.0;
-
-            this._vpDirty = false;
-            this._cpDirty = true;
-        }
-
-        if (this._sectionPlanesDirty) {
-
-            if (this._isSliced(this._wp)) {
-                this._angleLabel.setCulled(true);
-                this._originWire.setCulled(true);
-                this._targetWire.setCulled(true);
-                this._originDot.setCulled(true);
-                this._cornerDot.setCulled(true);
-                this._targetDot.setCulled(true);
-                return;
-            } else {
-                this._angleLabel.setCulled(false);
-                this._originWire.setCulled(false);
-                this._targetWire.setCulled(false);
-                this._originDot.setCulled(false);
-                this._cornerDot.setCulled(false);
-                this._targetDot.setCulled(false);
-            }
-
-            this._sectionPlanesDirty = true;
-        }
-
-        if (this._cpDirty) {
-
-            const near = -0.3;
-            const zOrigin = this._originDot.viewPos[2];
-            const zCorner = this._cornerDot.viewPos[2];
-            const zTarget = this._targetDot.viewPos[2];
-
-            if (zOrigin > near || zCorner > near || zTarget > near) {
-
-                this._originDot.setVisible(false);
-                this._cornerDot.setVisible(false);
-                this._targetDot.setVisible(false);
-
-                this._originWire.setVisible(false);
-                this._targetWire.setVisible(false);
-
-                this._angleLabel.setCulled(true);
-
-                return;
-            }
-
-            math.transformPositions4(scene.camera.project.matrix, this._vp, this._pp);
-
-            var pp = this._pp;
-            var cp = this._cp;
-
-            var canvas = scene.canvas.canvas;
-            var offsets = canvas.getBoundingClientRect();
-            const containerOffsets = this._container.getBoundingClientRect();
-            var top = offsets.top - containerOffsets.top;
-            var left = offsets.left - containerOffsets.left;
-            var aabb = scene.canvas.boundary;
-            var canvasWidth = aabb[2];
-            var canvasHeight = aabb[3];
-            var j = 0;
-
-            for (var i = 0, len = pp.length; i < len; i += 4) {
-                cp[j] = left + Math.floor((1 + pp[i + 0] / pp[i + 3]) * canvasWidth / 2);
-                cp[j + 1] = top + Math.floor((1 - pp[i + 1] / pp[i + 3]) * canvasHeight / 2);
-                j += 2;
-            }
-
-            this._originWire.setStartAndEnd(cp[0], cp[1], cp[2], cp[3]);
-            this._targetWire.setStartAndEnd(cp[2], cp[3], cp[4], cp[5]);
-
-            this._angleLabel.setPosBetweenWires(cp[0], cp[1], cp[2], cp[3], cp[4], cp[5]);
-
-            math.subVec3(this._originWorld, this._cornerWorld, originVec);
-            math.subVec3(this._targetWorld, this._cornerWorld, targetVec);
-
-            var validVecs =
-                (originVec[0] !== 0 || originVec[1] !== 0 || originVec[2] !== 0) &&
-                (targetVec[0] !== 0 || targetVec[1] !== 0 || targetVec[2] !== 0);
-
-            if (validVecs) {
-
-                const tilde = this._approximate ? " ~ " : " = ";
-
-                math.normalizeVec3(originVec);
-                math.normalizeVec3(targetVec);
-                const angle = Math.abs(math.angleVec3(originVec, targetVec));
-                this._angle = angle / math.DEGTORAD;
-                this._angleLabel.setText(tilde + this._angle.toFixed(2) + "°");
-            } else {
-                this._angleLabel.setText("");
-            }
+        const p0 = this._originDot.worldPos;
+        const p1 = this._cornerDot.worldPos;
+        const p2 = this._targetDot.worldPos;
 
-            // this._angleLabel.setText((Math.abs(math.lenVec3(math.subVec3(this._targetWorld, this._originWorld, distVec3)) * scale).toFixed(2)) + unitAbbrev);
+        this._originWire.setEnds(p0, p1);
+        this._targetWire.setEnds(p1, p2);
+        this._angleLabel.setPosBetween(p0, p1, p2);
 
-            this._originDot.setVisible(this._visible && this._originVisible);
-            this._cornerDot.setVisible(this._visible && this._cornerVisible);
-            this._targetDot.setVisible(this._visible && this._targetVisible);
+        math.subVec3(p0, p1, tmpVec3a$1);
+        math.subVec3(p2, p1, tmpVec3b$1);
 
-            this._originWire.setVisible(this._visible && this._originWireVisible);
-            this._targetWire.setVisible(this._visible && this._targetWireVisible);
-
-            this._angleLabel.setCulled(!(this._visible && this._angleVisible && this.labelsVisible));
-
-            this._cpDirty = false;
-        }
-    }
-
-    _isSliced(positions) {
-        const sectionPlanes = this.scene._sectionPlanesState.sectionPlanes;
-        for (let i = 0, len = sectionPlanes.length; i < len; i++) {
-            const sectionPlane = sectionPlanes[i];
-            if (math.planeClipsPositions3(sectionPlane.pos, sectionPlane.dir, positions, 4)) {
-                return true
-            }
+        if ((math.lenVec3(tmpVec3a$1) > 0) && (math.lenVec3(tmpVec3b$1) > 0)) {
+            math.normalizeVec3(tmpVec3a$1);
+            math.normalizeVec3(tmpVec3b$1);
+            this._angle = Math.abs(math.angleVec3(tmpVec3a$1, tmpVec3b$1)) * math.RADTODEG;
+            this._angleLabel.setText((this._approximate ? " ~ " : " = ") + this._angle.toFixed(2) + "°");
+        } else {
+            this._angle = undefined;
+            this._angleLabel.setText("");
         }
-        return false;
     }
 
     /**
@@ -12338,8 +12513,7 @@ class AngleMeasurement extends Component {
             return;
         }
         this._approximate = approximate;
-        this._cpDirty = true;
-        this._needUpdate(0);
+        this._update();
     }
 
     /**
@@ -12387,7 +12561,6 @@ class AngleMeasurement extends Component {
      * @type {Number}
      */
     get angle() {
-        this._update();
         return this._angle;
     }
 
@@ -12409,14 +12582,13 @@ class AngleMeasurement extends Component {
      * @type {String}
      */
     set color(value) {
+        this._color = value;
         this._originDot.setFillColor(value);
         this._cornerDot.setFillColor(value);
         this._targetDot.setFillColor(value);
         this._originWire.setColor(value || "blue");
         this._targetWire.setColor(value || "red");
         this._angleLabel.setFillColor(value || "#00BBFF");
-
-        this._color = value;
     }
 
     /**
@@ -12425,16 +12597,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     set visible(value) {
-        value = value !== false;
-        this._visible = value;
-        this._originDot.setVisible(this._visible && this._originVisible);
-        this._cornerDot.setVisible(this._visible && this._cornerVisible);
-        this._targetDot.setVisible(this._visible && this._targetVisible);
-        this._originWire.setVisible(this._visible && this._originWireVisible);
-        this._targetWire.setVisible(this._visible && this._targetWireVisible);
-        this._angleLabel.setVisible(this._visible && this._angleVisible);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._visible.set(value);
     }
 
     /**
@@ -12443,7 +12606,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     get visible() {
-        return this._visible;
+        return this._visible.get();
     }
 
     /**
@@ -12452,11 +12615,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     set originVisible(value) {
-        value = value !== false;
-        this._originVisible = value;
-        this._originDot.setVisible(this._visible && this._originVisible);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._originVisible.set(value);
     }
 
     /**
@@ -12465,7 +12624,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     get originVisible() {
-        return this._originVisible;
+        return this._originVisible.get();
     }
 
     /**
@@ -12474,11 +12633,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     set cornerVisible(value) {
-        value = value !== false;
-        this._cornerVisible = value;
-        this._cornerDot.setVisible(this._visible && this._cornerVisible);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._cornerVisible.set(value);
     }
 
     /**
@@ -12487,7 +12642,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     get cornerVisible() {
-        return this._cornerVisible;
+        return this._cornerVisible.get();
     }
 
     /**
@@ -12496,11 +12651,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     set targetVisible(value) {
-        value = value !== false;
-        this._targetVisible = value;
-        this._targetDot.setVisible(this._visible && this._targetVisible);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._targetVisible.set(value);
     }
 
     /**
@@ -12509,7 +12660,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     get targetVisible() {
-        return this._targetVisible;
+        return this._targetVisible.get();
     }
 
     /**
@@ -12518,11 +12669,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     set originWireVisible(value) {
-        value = value !== false;
-        this._originWireVisible = value;
-        this._originWire.setVisible(this._visible && this._originWireVisible);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._originWireVisible.set(value);
     }
 
     /**
@@ -12531,7 +12678,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     get originWireVisible() {
-        return this._originWireVisible;
+        return this._originWireVisible.get();
     }
 
     /**
@@ -12540,11 +12687,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     set targetWireVisible(value) {
-        value = value !== false;
-        this._targetWireVisible = value;
-        this._targetWire.setVisible(this._visible && this._targetWireVisible);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._targetWireVisible.set(value);
     }
 
     /**
@@ -12553,7 +12696,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     get targetWireVisible() {
-        return this._targetWireVisible;
+        return this._targetWireVisible.get();
     }
 
     /**
@@ -12562,11 +12705,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     set angleVisible(value) {
-        value = value !== false;
-        this._angleVisible = value;
-        this._angleLabel.setVisible(this._visible && this._angleVisible);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._angleVisible.set(value);
     }
 
     /**
@@ -12575,7 +12714,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     get angleVisible() {
-        return this._angleVisible;
+        return this._angleVisible.get();
     }
 
     /**
@@ -12584,12 +12723,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     set labelsVisible(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultLabelsVisible;
-        this._labelsVisible = value;
-        var labelsVisible = this._visible && this._labelsVisible;
-        this._angleLabel.setVisible(labelsVisible);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._labelsVisible.set(value !== undefined ? Boolean(value) : this.plugin.defaultLabelsVisible);
     }
 
     /**
@@ -12598,7 +12732,7 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     get labelsVisible() {
-        return this._labelsVisible;
+        return this._labelsVisible.get();
     }
 
     /**
@@ -12606,12 +12740,7 @@ class AngleMeasurement extends Component {
      * @param highlighted
      */
     setHighlighted(highlighted) {
-        this._originDot.setHighlighted(highlighted);
-        this._cornerDot.setHighlighted(highlighted);
-        this._targetDot.setHighlighted(highlighted);
-        this._originWire.setHighlighted(highlighted);
-        this._targetWire.setHighlighted(highlighted);
-        this._angleLabel.setHighlighted(highlighted);
+        this._drawables.forEach(d => d.setHighlighted(highlighted));
     }
 
     /**
@@ -12620,14 +12749,8 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     set clickable(value) {
-        value = !!value;
-        this._clickable = value;
-        this._originDot.setClickable(this._clickable);
-        this._cornerDot.setClickable(this._clickable);
-        this._targetDot.setClickable(this._clickable);
-        this._originWire.setClickable(this._clickable);
-        this._targetWire.setClickable(this._clickable);
-        this._angleLabel.setClickable(this._clickable);
+        this._clickable.set(!!value);
+        this._drawables.forEach(d => d.setClickable(this._clickable.get()));
     }
 
     /**
@@ -12636,38 +12759,14 @@ class AngleMeasurement extends Component {
      * @type {Boolean}
      */
     get clickable() {
-        return this._clickable;
+        return this._clickable.get();
     }
 
     /**
      * @private
      */
     destroy() {
-
-        const scene = this.plugin.viewer.scene;
-
-        if (this._onViewMatrix) {
-            scene.camera.off(this._onViewMatrix);
-        }
-        if (this._onProjMatrix) {
-            scene.camera.off(this._onProjMatrix);
-        }
-        if (this._onCanvasBoundary) {
-            scene.canvas.off(this._onCanvasBoundary);
-        }
-        if (this._onSectionPlaneUpdated) {
-            scene.off(this._onSectionPlaneUpdated);
-        }
-
-        this._originDot.destroy();
-        this._cornerDot.destroy();
-        this._targetDot.destroy();
-
-        this._originWire.destroy();
-        this._targetWire.destroy();
-
-        this._angleLabel.destroy();
-
+        this._cleanups.forEach(cleanup => cleanup());
         super.destroy();
     }
 }
@@ -13098,7 +13197,7 @@ class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
                 mouseHovering = false;
                 if (pointerLens) {
                     pointerLens.visible = true;
-                    pointerLens.pointerPos = event.canvasPos;
+                    pointerLens.canvasPos = event.canvasPos;
                     pointerLens.snappedCanvasPos = event.snappedCanvasPos || event.canvasPos;
                     pointerLens.snapped = false;
                 }
@@ -14664,9 +14763,10 @@ class Annotation extends Marker {
             this._marker.addEventListener("click", this._onMouseClickedExternalMarker = () => {
                 this.plugin.fire("markerClicked", this);
             });
-            this._marker.addEventListener("contextmenu", this._onContextMenuExtenalMarker = () => {
+            this._onContextMenuExtenalMarker = () => {
                 this.plugin.fire("contextmenu", this);
-            });
+            };
+            this._onContextMenuExtenalMarkerRemover = addContextMenuListener(this._markerHTML, this._onContextMenuExtenalMarker);
             this._marker.addEventListener("mouseenter", this._onMouseEnterExternalMarker = () => {
                 this.plugin.fire("markerMouseEnter", this);
             });
@@ -14787,7 +14887,7 @@ class Annotation extends Marker {
             this._marker.addEventListener("click", () => {
                 this.plugin.fire("markerClicked", this);
             });
-            this._marker.addEventListener("contextmenu", e => {
+            addContextMenuListener(this._marker, e => {
                 e.preventDefault();
                 this.plugin.fire("contextmenu", this);
             });
@@ -15037,7 +15137,7 @@ class Annotation extends Marker {
                 this._marker = null;
             } else {
                 this._marker.removeEventListener("click", this._onMouseClickedExternalMarker);
-                this._marker.removeEventListener("contextmenu", this._onContextMenuExtenalMarker);
+                this._onContextMenuExtenalMarkerRemover();
                 this._marker.removeEventListener("mouseenter", this._onMouseEnterExternalMarker);
                 this._marker.removeEventListener("mouseleave", this._onMouseLeaveExternalMarker);
                 this._marker = null;
@@ -87932,22 +88032,12 @@ function colorizeToRGB(color) {
     return rgb;
 }
 
-const distVec3 = math.vec3();
-const tmpVec3 = math.vec3();
-
-const lengthWire = (x1, y1, x2, y2) => {
-    var a = x1 - x2;
-    var b = y1 - y2;
-    return Math.sqrt(a * a + b * b);
-};
-
-function determineMeasurementOrientation(A, B, distance) {
-    const yDiff = Math.abs(B[1] - A[1]);
-
-    return yDiff > distance ? 'Vertical' : 'Horizontal';
-}
-
-// function findDistance
+const tmpVec3a = math.vec3();
+const tmpVec3b = math.vec3();
+const tmpVec3c = math.vec3();
+math.vec4();
+math.vec4();
+math.vec4();
 
 /**
  * @desc Measures the distance between two 3D points.
@@ -87961,7 +88051,9 @@ class DistanceMeasurement extends Component {
      */
     constructor(plugin, cfg = {}) {
 
-        super(plugin.viewer.scene, cfg);
+        const scene = plugin.viewer.scene;
+
+        super(scene, cfg);
 
         /**
          * The {@link DistanceMeasurementsPlugin} that owns this DistanceMeasurement.
@@ -87969,597 +88061,251 @@ class DistanceMeasurement extends Component {
          */
         this.plugin = plugin;
 
-        this._container = cfg.container;
-        if (!this._container) {
+        const container = cfg.container;
+        if (!container) {
             throw "config missing: container";
         }
 
-        this._eventSubs = {};
-
-        var scene = this.plugin.viewer.scene;
+        this._color = cfg.color || plugin.defaultColor;
 
-        this._originWorld = math.vec3();
-        this._targetWorld = math.vec3();
+        const channel = function(v, defaultIfUndefined) {
+            const listeners = [ ];
+            let value = v !== undefined ? Boolean(v) : defaultIfUndefined;
+            return {
+                reg: (l) => listeners.push(l),
+                get: () => value,
+                set: (v) => {
+                    value = v !== undefined ? Boolean(v) : defaultIfUndefined;
+                    listeners.forEach(l => l(value));
+                }
+            };
+        };
 
-        this._wp = new Float64Array(24); //world position
-        this._vp = new Float64Array(24); //view position
-        this._pp = new Float64Array(24);
-        this._cp = new Float64Array(8); //canvas position
+        this._visible               = channel(cfg.visible,               plugin.defaultVisible);
+        this._originVisible         = channel(cfg.originVisible,         plugin.defaultOriginVisible);
+        this._targetVisible         = channel(cfg.targetVisible,         plugin.defaultTargetVisible);
+        this._axisVisible           = channel(cfg.axisVisible,           plugin.defaultAxisVisible);
+        this._xAxisVisible          = channel(cfg.xAxisVisible,          plugin.defaultAxisVisible);
+        this._yAxisVisible          = channel(cfg.yAxisVisible,          plugin.defaultAxisVisible);
+        this._zAxisVisible          = channel(cfg.zAxisVisible,          plugin.defaultAxisVisible);
+        this._axisEnabled           = channel(true,                      plugin.defaultAxisVisible);
+        this._wireVisible           = channel(cfg.wireVisible,           plugin.defaultWireVisible);
+        this._xLabelEnabled         = channel(cfg.xLabelEnabled,         plugin.defaultXLabelEnabled);
+        this._yLabelEnabled         = channel(cfg.yLabelEnabled,         plugin.defaultYLabelEnabled);
+        this._zLabelEnabled         = channel(cfg.zLabelEnabled,         plugin.defaultZLabelEnabled);
+        this._lengthLabelEnabled    = channel(cfg.lengthLabelEnabled,    plugin.defaultLengthLabelEnabled);
+        this._labelsVisible         = channel(cfg.labelsVisible,         plugin.defaultLabelsVisible);
+        this._clickable             = channel(false,                     false);
+        this._labelsOnWires         = channel(cfg.labelsOnWires,         plugin.defaultLabelsOnWires);
+        this._useRotationAdjustment = channel(cfg.useRotationAdjustment, plugin.useRotationAdjustment);
+
+        this._axesBasis = math.identityMat4();
+        this.approximate = cfg.approximate;
 
-        this._xAxisLabelCulled = false;
-        this._yAxisLabelCulled = false;
-        this._zAxisLabelCulled = false;
 
-        this._color = cfg.color || this.plugin.defaultColor;
+        const canvas = scene.canvas.canvas;
 
         const onMouseOver = cfg.onMouseOver ? (event) => {
             cfg.onMouseOver(event, this);
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mouseover', event));
+            canvas.dispatchEvent(new MouseEvent('mouseover', event));
         } : null;
 
         const onMouseLeave = cfg.onMouseLeave ? (event) => {
             cfg.onMouseLeave(event, this);
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mouseleave', event));
+            canvas.dispatchEvent(new MouseEvent('mouseleave', event));
         } : null;
 
-        const onMouseDown = (event) => {
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mousedown', event));
-        } ;
-
-        const onMouseUp =  (event) => {
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mouseup', event));
-        };
-
-        const onMouseMove =  (event) => {
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mousemove', event));
-        };
-
         const onContextMenu = cfg.onContextMenu ? (event) => {
             cfg.onContextMenu(event, this);
         } : null;
 
-        const onMouseWheel = (event) => {
-            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new WheelEvent('wheel', event));
-        };
+        const onMouseDown  = (event) => canvas.dispatchEvent(new MouseEvent('mousedown', event));
+        const onMouseUp    = (event) => canvas.dispatchEvent(new MouseEvent('mouseup', event));
+        const onMouseMove  = (event) => canvas.dispatchEvent(new MouseEvent('mousemove', event));
+        const onMouseWheel = (event) => canvas.dispatchEvent(new WheelEvent('wheel', event));
 
-        this._originDot = new Dot3D(scene, cfg.origin, this._container, {
-            fillColor: this._color,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
 
-        this._targetDot = new Dot3D(scene, cfg.target, this._container, {
-            fillColor: this._color,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
+        this._cleanups = [ ];
 
-        this._lengthWire = new Wire(this._container, {
-            color: this._color,
-            thickness: 2,
-            thicknessClickable: 6,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
+        [ "units", "scale" ].forEach(evt => {
+            const handler = scene.metrics.on("units", () => this._update());
+            this._cleanups.push(() => scene.metrics.off(handler));
         });
 
-        this._xAxisWire = new Wire(this._container, {
-            color: "#FF0000",
-            thickness: 1,
-            thicknessClickable: 6,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
+        this._drawables = [ ];
 
-        this._yAxisWire = new Wire(this._container, {
-            color: "green",
-            thickness: 1,
-            thicknessClickable: 6,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
+        const registerDrawable = (drawable, visibilityChannels) => {
+            const updateVisibility = () => drawable.setVisible(visibilityChannels.every(ch => ch.get()));
+            visibilityChannels.forEach(ch => ch.reg(updateVisibility));
+            this._drawables.push(drawable);
+            this._cleanups.push(() => drawable.destroy());
+        };
 
-        this._zAxisWire = new Wire(this._container, {
-            color: "blue",
-            thickness: 1,
-            thicknessClickable: 6,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
+        const makeWire = (color, thickness, visibilityChannels) => {
+            const wire = new Wire3D(scene, container, {
+                color: color,
+                thickness: thickness,
+                thicknessClickable: 6,
+                zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
+                onMouseOver,
+                onMouseLeave,
+                onMouseWheel,
+                onMouseDown,
+                onMouseUp,
+                onMouseMove,
+                onContextMenu
+            });
+            registerDrawable(wire, visibilityChannels);
+            return {
+                setEnds: (p0, p1) => wire.setEnds(p0, p1),
+                setColor: value => wire.setColor(value)
+            };
+        };
+        this._lengthWire = makeWire(this._color, 2, [ this._visible, this._wireVisible ]);
+        this._xAxisWire  = makeWire("red",       1, [ this._visible, this._axisEnabled, this._axisVisible, this._xAxisVisible ]);
+        this._yAxisWire  = makeWire("green",     1, [ this._visible, this._axisEnabled, this._axisVisible, this._yAxisVisible ]);
+        this._zAxisWire  = makeWire("blue",      1, [ this._visible, this._axisEnabled, this._axisVisible, this._zAxisVisible ]);
+
+        const makeLabel = (color, zIndexOffset, visibilityChannels) => {
+            const label = new Label3D(scene, container, {
+                fillColor: color,
+                zIndex: plugin.zIndex !== undefined ? plugin.zIndex + zIndexOffset : undefined,
+                onMouseOver,
+                onMouseLeave,
+                onMouseWheel,
+                onMouseDown,
+                onMouseUp,
+                onMouseMove,
+                onContextMenu
+            });
+            registerDrawable(label, visibilityChannels);
+            return {
+                setFillColor:  value => label.setFillColor(value),
+                setPosOnWire:  (p0, p1, offset, labelMinAxisLength) => label.setPosOnWire(p0, p1, offset, labelMinAxisLength),
+                setPosBetween: (p0, p1, p2) => label.setPosBetween(p0, p1, p2),
+                setText:       str => label.setText(str.replace(/ /g, "&nbsp;"))
+            };
+        };
+        this._lengthLabel = makeLabel(this._color, 4, [ this._visible, this._wireVisible, this._labelsVisible, this._clickable, this._axisEnabled, this._lengthLabelEnabled ]);
+        this._xAxisLabel  = makeLabel("red",       3, [ this._visible, this._axisEnabled, this._axisVisible, this._xAxisVisible, this._labelsVisible, this._clickable, this._xLabelEnabled ]);
+        this._yAxisLabel  = makeLabel("green",     3, [ this._visible, this._axisEnabled, this._axisVisible, this._yAxisVisible, this._labelsVisible, this._clickable, this._yLabelEnabled ]);
+        this._zAxisLabel  = makeLabel("blue",      3, [ this._visible, this._axisEnabled, this._axisVisible, this._zAxisVisible, this._labelsVisible, this._clickable, this._zLabelEnabled ]);
+
+        const makeDot = (cfg, visibilityChannels) => {
+            const dot = new Dot3D(scene, cfg, container, {
+                fillColor: this._color,
+                zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
+                onMouseOver,
+                onMouseLeave,
+                onMouseWheel,
+                onMouseDown,
+                onMouseUp,
+                onMouseMove,
+                onContextMenu
+            });
+            dot.on("worldPos", () => this._update());
+            registerDrawable(dot, visibilityChannels);
+            return dot;
+        };
+        this._originDot = makeDot(cfg.origin, [ this._visible, this._originVisible ]);
+        this._targetDot = makeDot(cfg.target, [ this._visible, this._targetVisible ]);
 
-        this._lengthLabel = new Label(this._container, {
-            fillColor: this._color,
-            prefix: "",
-            text: "",
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 4 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
+        this._update();
+    }
 
-        this._xAxisLabel = new Label(this._container, {
-            fillColor: "red",
-            prefix: "X",
-            text: "",
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 3 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
+    _update() {
+        if (! this._targetDot) {
+            return;
+        }
 
-        this._yAxisLabel = new Label(this._container, {
-            fillColor: "green",
-            prefix: "Y",
-            text: "",
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 3 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
+        const p0 = this._originDot.worldPos;
+        const p1 = this._targetDot.worldPos;
+        const axesBasis = this._axesBasis;
+        const delta = math.subVec3(p1, p0, tmpVec3a);
+        const factors = math.transformVec3(axesBasis, delta, delta);
 
-        this._zAxisLabel = new Label(this._container, {
-            fillColor: "blue",
-            prefix: "Z",
-            text: "",
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 3 : undefined,
-            onMouseOver,
-            onMouseLeave,
-            onMouseWheel,
-            onMouseDown,
-            onMouseUp,
-            onMouseMove,
-            onContextMenu
-        });
+        const measurementOrientationVertical = this._useRotationAdjustment.get() && Math.abs(delta[1]) > 0;
 
-        this._measurementOrientation = 'Horizontal';
-        this._wpDirty = false;
-        this._vpDirty = false;
-        this._cpDirty = false;
-        this._sectionPlanesDirty = true;
+        const setWireCoordinates = (xEnd, zStart) => {
 
-        this._visible = false;
-        this._originVisible = false;
-        this._targetVisible = false;
-        this._useRotationAdjustment = false;
-        this._wireVisible = false;
-        this._axisVisible = false;
-        this._xAxisVisible = false;
-        this._yAxisVisible = false;
-        this._zAxisVisible = false;
-        this._axisEnabled = true;
-        this._xLabelEnabled = false;
-        this._yLabelEnabled = false;
-        this._zLabelEnabled = false;
-        this._lengthLabelEnabled = false;
-        this._labelsVisible = false;
-        this._labelsOnWires = false;
-        this._clickable = false;
-
-        this._originDot.on("worldPos", (value) => {
-            this._originWorld.set(value || [0,0,0]); 
-            this._wpDirty = true;
-            this._needUpdate(0); // No lag
-        });
+            const metrics = this.plugin.viewer.scene.metrics;
+            const scale = metrics.scale;
+            const unit = metrics.unitsInfo[metrics.units].abbrev;
 
-        this._targetDot.on("worldPos", (value) => {
-            this._targetWorld.set(value || [0,0,0]); 
-            this._wpDirty = true;
-            this._needUpdate(0); // No lag
-        });
+            const setAxisLabelCoords = (label, a, b, offsetIdx) => {
+                if (this._labelsOnWires.get()) {
+                    label.setPosOnWire(a, b, 0, this.plugin.labelMinAxisLength);
+                } else {
+                    label.setPosOnWire(p0, p1, offsetIdx * 35, 0);
+                }
+            };
+            const unitStr = len => (this._approximate ? " ~ " : " = ") + len.toFixed(2) + unit;
 
-        this._onViewMatrix = scene.camera.on("viewMatrix", () => {
-            this._vpDirty = true;
-            this._needUpdate(0); // No lag
-        });
+            this._xAxisWire.setEnds(p0, xEnd);
+            setAxisLabelCoords(this._xAxisLabel, p0, xEnd, 1);
+            this._xAxisLabel.setText("X" + unitStr(math.distVec3(p0, xEnd) * scale));
 
-        this._onProjMatrix = scene.camera.on("projMatrix", () => {
-            this._cpDirty = true;
-            this._needUpdate();
-        });
+            this._yAxisWire.setEnds(xEnd, zStart);
+            setAxisLabelCoords(this._yAxisLabel, xEnd, zStart, 2);
+            this._yAxisLabel.setText("Y" + unitStr(math.distVec3(xEnd, zStart) * scale));
 
-        this._onCanvasBoundary = scene.canvas.on("boundary", () => {
-            this._cpDirty = true;
-            this._needUpdate(0); // No lag
-        });
+            this._zAxisWire.setEnds(zStart, p1);
+            setAxisLabelCoords(this._zAxisLabel, zStart, p1, 3);
+            this._zAxisLabel.setText((measurementOrientationVertical ? "" : "Z") + unitStr(math.distVec3(zStart, p1) * scale));
 
-        this._onMetricsUnits = scene.metrics.on("units", () => {
-            this._cpDirty = true;
-            this._needUpdate();
-        });
-
-        this._onMetricsScale = scene.metrics.on("scale", () => {
-            this._cpDirty = true;
-            this._needUpdate();
-        });
+            this._lengthWire.setEnds(p0, p1);
+            setAxisLabelCoords(this._lengthLabel, p0, p1, 0);
+            this._length = math.distVec3(p0, p1) * scale;
+            this._lengthLabel.setText(unitStr(this._length));
+        };
 
-        this._onMetricsOrigin = scene.metrics.on("origin", () => {
-            this._cpDirty = true;
-            this._needUpdate();
-        });
+        if (measurementOrientationVertical) {
+            tmpVec3c[0] = p0[0];
+            tmpVec3c[1] = p1[1];
+            tmpVec3c[2] = p0[2];
 
-        this._onSectionPlaneUpdated = scene.on("sectionPlaneUpdated", () =>{
-            this._sectionPlanesDirty = true;
-            this._needUpdate();
-        });
+            setWireCoordinates(p0, tmpVec3c);
+        }
+        else {
+            tmpVec3b[0] = p0[0] + axesBasis[0] * factors[0];
+            tmpVec3b[1] = p0[1] + axesBasis[4] * factors[0];
+            tmpVec3b[2] = p0[2] + axesBasis[8] * factors[0];
 
-        this.approximate = cfg.approximate;
-        this.visible = cfg.visible;
-        this.originVisible = cfg.originVisible;
-        this.targetVisible = cfg.targetVisible;
-        this.wireVisible = cfg.wireVisible;
-        this.axisVisible = cfg.axisVisible;
-        this.xAxisVisible = cfg.xAxisVisible;
-        this.yAxisVisible = cfg.yAxisVisible;
-        this.zAxisVisible = cfg.zAxisVisible;
-        this.xLabelEnabled = cfg.xLabelEnabled;
-        this.yLabelEnabled = cfg.yLabelEnabled;
-        this.zLabelEnabled = cfg.zLabelEnabled;
-        this.lengthLabelEnabled = cfg.lengthLabelEnabled;
-        this.labelsVisible = cfg.labelsVisible;
-        this.labelsOnWires = cfg.labelsOnWires;
-        this._useRotationAdjustment = cfg.useRotationAdjustment;
+            tmpVec3c[0] = tmpVec3b[0] + axesBasis[1] * factors[1];
+            tmpVec3c[1] = tmpVec3b[1] + axesBasis[5] * factors[1];
+            tmpVec3c[2] = tmpVec3b[2] + axesBasis[9] * factors[1];
 
-        /**
-         * @type {number[]}
-         */
-        this._axesBasis = [
-            1, 0, 0, 0,
-            0, 1, 0, 0,
-            0, 0, 1, 0,
-            0, 0, 0, 1,
-        ];
+            setWireCoordinates(tmpVec3b, tmpVec3c);
+        }
     }
 
     /**
      * Sets the axes basis for the measurement.
-     * 
+     *
      * The value is a 4x4 matrix where each column-vector defines an axis and must have unit length.
-     * 
+     *
      * This is the ```identity``` matrix by default, meaning the measurement axes are the same as the world axes.
-     * 
-     * @param {number[]} value 
+     *
+     * @param {number[]} value
      */
     set axesBasis(value) {
-        this._axesBasis = value.slice();
-        this._wpDirty = true;
-        this._needUpdate(0); // No lag
+        this._axesBasis.set(value);
+        this._update();
     }
 
     /**
      * Gets the axes basis for the measurement.
-     * 
+     *
      * The value is a 4x4 matrix where each column-vector defines an axis and must have unit length.
-     * 
+     *
      * This is the ```identity``` matrix by default, meaning the measurement axes are the same as the world axes.
-     * 
+     *
      * @type {number[]}
      */
     get axesBasis() {
         return this._axesBasis;
     }
 
-    _update() {
-
-        if (!this._visible) {
-            return;
-        }
-
-        const scene = this.plugin.viewer.scene;
-
-        if (this._wpDirty) {
-            const delta = math.subVec3(
-                this._targetWorld,
-                this._originWorld,
-                tmpVec3
-            );
-
-            /**
-             * The length detected for each measurement axis.
-             */
-            this._factors = math.transformVec3(this._axesBasis, delta);
-
-            this._measurementOrientation = determineMeasurementOrientation(this._originWorld, this._targetWorld, 0);
-            if (this._measurementOrientation === 'Vertical' && this._useRotationAdjustment) {
-                this._wp[0] = this._originWorld[0];
-                this._wp[1] = this._originWorld[1];
-                this._wp[2] = this._originWorld[2];
-                this._wp[3] = 1.0;
-
-                this._wp[4] = this._originWorld[0]; //x-axis
-                this._wp[5] = this._originWorld[1];
-                this._wp[6] = this._originWorld[2];
-                this._wp[7] = 1.0;
-
-                this._wp[8] = this._originWorld[0]; //x-axis
-                this._wp[9] = this._targetWorld[1]; //y-axis
-                this._wp[10] = this._originWorld[2];
-                this._wp[11] = 1.0;
-
-                this._wp[12] = this._targetWorld[0];
-                this._wp[13] = this._targetWorld[1];
-                this._wp[14] = this._targetWorld[2];
-                this._wp[15] = 1.0;
-            }
-            else {
-
-                this._wp[0] = this._originWorld[0];
-                this._wp[1] = this._originWorld[1];
-                this._wp[2] = this._originWorld[2];
-                this._wp[3] = 1.0;
-
-                this._wp[4] = this._originWorld[0] + this._axesBasis[0]*this._factors[0];
-                this._wp[5] = this._originWorld[1] + this._axesBasis[4]*this._factors[0];
-                this._wp[6] = this._originWorld[2] + this._axesBasis[8]*this._factors[0];
-                this._wp[7] = 1.0;
-
-                this._wp[8] = this._originWorld[0] + this._axesBasis[0]*this._factors[0]+ this._axesBasis[1]*this._factors[1];
-                this._wp[9] = this._originWorld[1] + this._axesBasis[4]*this._factors[0]+ this._axesBasis[5]*this._factors[1];
-                this._wp[10] = this._originWorld[2] + this._axesBasis[8]*this._factors[0]+ this._axesBasis[9]*this._factors[1];                this._wp[11] = 1.0;
-
-                this._wp[12] = this._targetWorld[0];
-                this._wp[13] = this._targetWorld[1];
-                this._wp[14] = this._targetWorld[2];
-                this._wp[15] = 1.0;
-            }
-            
-
-            this._wpDirty = false;
-            this._vpDirty = true;
-        }
-
-        if (this._vpDirty) {
-
-            math.transformPositions4(scene.camera.viewMatrix, this._wp, this._vp);
-
-            this._vp[3] = 1.0;
-            this._vp[7] = 1.0;
-            this._vp[11] = 1.0;
-            this._vp[15] = 1.0;
-
-            this._vpDirty = false;
-            this._cpDirty = true;
-        }
-
-        if (this._sectionPlanesDirty) {
-
-            if (this._isSliced(this._originWorld) || this._isSliced(this._targetWorld)) {
-                this._xAxisLabel.setCulled(true);
-                this._yAxisLabel.setCulled(true);
-                this._zAxisLabel.setCulled(true);
-                this._lengthLabel.setCulled(true);
-                this._xAxisWire.setCulled(true);
-                this._yAxisWire.setCulled(true);
-                this._zAxisWire.setCulled(true);
-                this._lengthWire.setCulled(true);
-                this._originDot.setCulled(true);
-                this._targetDot.setCulled(true);
-                return;
-            } else {
-                this._xAxisLabel.setCulled(false);
-                this._yAxisLabel.setCulled(false);
-                this._zAxisLabel.setCulled(false);
-                this._lengthLabel.setCulled(false);
-                this._xAxisWire.setCulled(false);
-                this._yAxisWire.setCulled(false);
-                this._zAxisWire.setCulled(false);
-                this._lengthWire.setCulled(false);
-                this._originDot.setCulled(false);
-                this._targetDot.setCulled(false);
-            }
-
-            this._sectionPlanesDirty = true;
-        }
-
-        const near = -0.3;
-        const vpz1 = this._originDot.viewPos[2];
-        const vpz2 = this._targetDot.viewPos[2];
-
-        if (vpz1 > near || vpz2 > near) {
-
-            this._xAxisLabel.setCulled(true);
-            this._yAxisLabel.setCulled(true);
-            this._zAxisLabel.setCulled(true);
-            this._lengthLabel.setCulled(true);
-
-            this._xAxisWire.setVisible(false);
-            this._yAxisWire.setVisible(false);
-            this._zAxisWire.setVisible(false);
-            this._lengthWire.setVisible(false);
-
-            this._originDot.setVisible(false);
-            this._targetDot.setVisible(false);
-
-            return;
-        }
-
-        if (this._cpDirty) {
-
-            math.transformPositions4(scene.camera.project.matrix, this._vp, this._pp);
-
-            var pp = this._pp;
-            var cp = this._cp;
-
-            var canvas = scene.canvas.canvas;
-            var offsets = canvas.getBoundingClientRect();
-            const containerOffsets = this._container.getBoundingClientRect();
-            var top = offsets.top - containerOffsets.top;
-            var left = offsets.left - containerOffsets.left;
-            var aabb = scene.canvas.boundary;
-            var canvasWidth = aabb[2];
-            var canvasHeight = aabb[3];
-            var j = 0;
-
-            const metrics = this.plugin.viewer.scene.metrics;
-            const scale = metrics.scale;
-            const units = metrics.units;
-            const unitInfo = metrics.unitsInfo[units];
-            const unitAbbrev = unitInfo.abbrev;
-
-            for (var i = 0, len = pp.length; i < len; i += 4) {
-                cp[j] = left + Math.floor((1 + pp[i + 0] / pp[i + 3]) * canvasWidth / 2);
-                cp[j + 1] = top + Math.floor((1 - pp[i + 1] / pp[i + 3]) * canvasHeight / 2);
-                j += 2;
-            }
-
-            this._lengthWire.setStartAndEnd(cp[0], cp[1], cp[6], cp[7]);
-
-            this._xAxisWire.setStartAndEnd(cp[0], cp[1], cp[2], cp[3]);
-            this._yAxisWire.setStartAndEnd(cp[2], cp[3], cp[4], cp[5]);
-            this._zAxisWire.setStartAndEnd(cp[4], cp[5], cp[6], cp[7]);
-
-            if (!this.labelsVisible) {
-
-                this._lengthLabel.setCulled(true);
-
-                this._xAxisLabel.setCulled(true);
-                this._yAxisLabel.setCulled(true);
-                this._zAxisLabel.setCulled(true);
-
-            } else {
-
-                this._lengthLabel.setPosOnWire(cp[0], cp[1], cp[6], cp[7]);
-
-                if (this.labelsOnWires) {
-                    this._xAxisLabel.setPosOnWire(cp[0], cp[1], cp[2], cp[3]);
-                    this._yAxisLabel.setPosOnWire(cp[2], cp[3], cp[4], cp[5]);
-                    this._zAxisLabel.setPosOnWire(cp[4], cp[5], cp[6], cp[7]);
-                } else {
-                    const labelOffset = 35;
-                    let currentLabelOffset = labelOffset;
-                    this._xAxisLabel.setPosOnWire(cp[0], cp[1] + currentLabelOffset, cp[6], cp[7] + currentLabelOffset);
-                    currentLabelOffset += labelOffset;
-                    this._yAxisLabel.setPosOnWire(cp[0], cp[1] + currentLabelOffset, cp[6], cp[7] + currentLabelOffset);
-                    currentLabelOffset += labelOffset;
-                    this._zAxisLabel.setPosOnWire(cp[0], cp[1] + currentLabelOffset, cp[6], cp[7] + currentLabelOffset);
-                }
-
-                const tilde = this._approximate ? " ~ " : " = ";
-
-                this._length = Math.abs(math.lenVec3(math.subVec3(this._targetWorld, this._originWorld, distVec3)));
-                this._lengthLabel.setText(tilde + (this._length * scale).toFixed(2) + unitAbbrev);
-
-                const xAxisCanvasLength = Math.abs(lengthWire(cp[0], cp[1], cp[2], cp[3]));
-                const yAxisCanvasLength = Math.abs(lengthWire(cp[2], cp[3], cp[4], cp[5]));
-                const zAxisCanvasLength = Math.abs(lengthWire(cp[4], cp[5], cp[6], cp[7]));
-
-                const labelMinAxisLength = this.plugin.labelMinAxisLength;
-
-                if (this.labelsOnWires){
-                    this._xAxisLabelCulled = (xAxisCanvasLength < labelMinAxisLength);
-                    this._yAxisLabelCulled = (yAxisCanvasLength < labelMinAxisLength);
-                    this._zAxisLabelCulled = (zAxisCanvasLength < labelMinAxisLength);
-                } else {
-                    this._xAxisLabelCulled = false;
-                    this._yAxisLabelCulled = false;
-                    this._zAxisLabelCulled = false;
-                }
-
-                if (!this._xAxisLabelCulled) {
-                    this._xAxisLabel.setText(tilde + Math.abs(this._factors[0] * scale).toFixed(2) + unitAbbrev);
-                    this._xAxisLabel.setCulled(!this.axisVisible);
-                } else {
-                    this._xAxisLabel.setCulled(true);
-                }
-
-                if (!this._yAxisLabelCulled) {
-                    this._yAxisLabel.setText(tilde + Math.abs(this._factors[1] * scale).toFixed(2) + unitAbbrev);
-                    this._yAxisLabel.setCulled(!this.axisVisible);
-                } else {
-                    this._yAxisLabel.setCulled(true);
-                }
-
-                if (!this._zAxisLabelCulled) {
-                    if (this._measurementOrientation === 'Vertical' && this._useRotationAdjustment) {
-                        this._zAxisLabel.setPrefix("");
-                        this._zAxisLabel.setText(tilde + Math.abs(math.lenVec3(math.subVec3(this._targetWorld, [this._originWorld[0], this._targetWorld[1], this._originWorld[2]], distVec3)) * scale).toFixed(2) + unitAbbrev);
-                    }
-                    else {
-                        this._zAxisLabel.setPrefix("Z");
-                        this._zAxisLabel.setText(tilde + Math.abs(this._factors[2] * scale).toFixed(2) + unitAbbrev);
-                    }
-                    this._zAxisLabel.setCulled(!this.axisVisible);
-                } else {
-                    this._zAxisLabel.setCulled(true);
-                }
-            }
-
-            // this._xAxisLabel.setVisible(this.axisVisible && this.xAxisVisible);
-            // this._yAxisLabel.setVisible(this.axisVisible && this.yAxisVisible);
-            // this._zAxisLabel.setVisible(this.axisVisible && this.zAxisVisible);
-            // this._lengthLabel.setVisible(false);
-
-            this._originDot.setVisible(this._visible && this._originVisible);
-            this._targetDot.setVisible(this._visible && this._targetVisible);
-
-            this._xAxisWire.setVisible(this.axisVisible && this.xAxisVisible);
-            this._yAxisWire.setVisible(this.axisVisible && this.yAxisVisible);
-            this._zAxisWire.setVisible(this.axisVisible && this.zAxisVisible);
-
-            this._lengthWire.setVisible(this.wireVisible);
-            this._lengthLabel.setCulled(!this.wireVisible);
-
-            this._cpDirty = false;
-        }
-    }
-
-    _isSliced(positions) {
-       const sectionPlanes = this.scene._sectionPlanesState.sectionPlanes;
-        for (let i = 0, len = sectionPlanes.length; i < len; i++) {
-            const sectionPlane = sectionPlanes[i];
-            if (math.planeClipsPositions3(sectionPlane.pos, sectionPlane.dir, positions, 4)) {
-                return true
-            }
-        }
-        return false;
-    }
-
     /**
      * Sets whether this DistanceMeasurement indicates that its measurement is approximate.
      *
@@ -88573,8 +88319,7 @@ class DistanceMeasurement extends Component {
             return;
         }
         this._approximate = approximate;
-        this._cpDirty = true;
-        this._needUpdate(0);
+        this._update();
     }
 
     /**
@@ -88612,9 +88357,7 @@ class DistanceMeasurement extends Component {
      * @type {Number}
      */
     get length() {
-        this._update();
-        const scale = this.plugin.viewer.scene.metrics.scale;
-        return this._length * scale;
+        return this._length;
     }
 
     get color() {
@@ -88635,31 +88378,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set visible(value) {
-
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultVisible;
-
-        this._visible = value;
-
-        this._originDot.setVisible(this._visible && this._originVisible);
-        this._targetDot.setVisible(this._visible && this._targetVisible);
-        this._lengthWire.setVisible(this._visible && this._wireVisible);
-        this._lengthLabel.setVisible(this._visible && this._wireVisible && this._lengthLabelEnabled);
-
-        const xAxisVisible = this._visible && this._axisVisible && this._xAxisVisible;
-        const yAxisVisible = this._visible && this._axisVisible && this._yAxisVisible;
-        const zAxisVisible = this._visible && this._axisVisible && this._zAxisVisible;
-
-        this._xAxisWire.setVisible(xAxisVisible);
-        this._yAxisWire.setVisible(yAxisVisible);
-        this._zAxisWire.setVisible(zAxisVisible);
-
-        this._xAxisLabel.setVisible(xAxisVisible && !this._xAxisLabelCulled && this._EnabledVisible);
-        this._yAxisLabel.setVisible(yAxisVisible && !this._yAxisLabelCulled && this._yLabelEnabled);
-        this._zAxisLabel.setVisible(zAxisVisible && !this._zAxisLabelCulled && this._zLabelEnabled);
-
-        this._cpDirty = true;
-
-        this._needUpdate();
+        this._visible.set(value);
     }
 
     /**
@@ -88668,7 +88387,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get visible() {
-        return this._visible;
+        return this._visible.get();
     }
 
     /**
@@ -88677,9 +88396,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set originVisible(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultOriginVisible;
-        this._originVisible = value;
-        this._originDot.setVisible(this._visible && this._originVisible);
+        this._originVisible.set(value);
     }
 
     /**
@@ -88688,7 +88405,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get originVisible() {
-        return this._originVisible;
+        return this._originVisible.get();
     }
 
     /**
@@ -88697,9 +88414,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set targetVisible(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultTargetVisible;
-        this._targetVisible = value;
-        this._targetDot.setVisible(this._visible && this._targetVisible);
+        this._targetVisible.set(value);
     }
 
     /**
@@ -88708,7 +88423,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get targetVisible() {
-        return this._targetVisible;
+        return this._targetVisible.get();
     }
 
     /**
@@ -88717,8 +88432,8 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set useRotationAdjustment(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.useRotationAdjustment;
-        this._useRotationAdjustment = value;
+        this._useRotationAdjustment.set(value);
+        this._update();
     }
 
     /**
@@ -88727,7 +88442,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get useRotationAdjustment() {
-        return this._useRotationAdjustment;
+        return this._useRotationAdjustment.get();
     }
 
     /**
@@ -88738,17 +88453,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set axisEnabled(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultAxisVisible;
-        this._axisEnabled = value;
-        var axisVisible = this._visible && this._axisVisible && this._axisEnabled;
-        this._xAxisWire.setVisible(axisVisible && this._xAxisVisible);
-        this._yAxisWire.setVisible(axisVisible && this._yAxisVisible);
-        this._zAxisWire.setVisible(axisVisible && this._zAxisVisible);
-        this._xAxisLabel.setVisible(axisVisible && !this._xAxisLabelCulled&& this._xAxisVisible && this._xLabelEnabled);
-        this._yAxisLabel.setVisible(axisVisible && !this._yAxisLabelCulled&& this._xAxisVisible && this._yLabelEnabled);
-        this._zAxisLabel.setVisible(axisVisible && !this._zAxisLabelCulled&& this._xAxisVisible && this._zLabelEnabled);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._axisEnabled.set(value);
     }
 
     /**
@@ -88759,7 +88464,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get axisEnabled() {
-        return this._axisEnabled;
+        return this._axisEnabled.get();
     }
 
     /**
@@ -88770,17 +88475,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set axisVisible(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultAxisVisible;
-        this._axisVisible = value;
-        var axisVisible = this._visible && this._axisVisible && this._axisEnabled;
-        this._xAxisWire.setVisible(axisVisible && this._xAxisVisible);
-        this._yAxisWire.setVisible(axisVisible && this._yAxisVisible);
-        this._zAxisWire.setVisible(axisVisible && this._zAxisVisible);
-        this._xAxisLabel.setVisible(axisVisible && !this._xAxisLabelCulled&& this._xAxisVisible);
-        this._yAxisLabel.setVisible(axisVisible && !this._yAxisLabelCulled&& this._yAxisVisible);
-        this._zAxisLabel.setVisible(axisVisible && !this._zAxisLabelCulled&& this._zAxisVisible);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._axisVisible.set(value);
     }
 
     /**
@@ -88791,7 +88486,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get axisVisible() {
-        return this._axisVisible;
+        return this._axisVisible.get();
     }
 
     /**
@@ -88802,13 +88497,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set xAxisVisible(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultAxisVisible;
-        this._xAxisVisible = value;
-        const axisVisible = this._visible && this._axisVisible && this._xAxisVisible && this._axisEnabled;
-        this._xAxisWire.setVisible(axisVisible);
-        this._xAxisLabel.setVisible(axisVisible && !this._xAxisLabelCulled && this._xLabelEnabled);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._xAxisVisible.set(value);
     }
 
     /**
@@ -88819,7 +88508,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get xAxisVisible() {
-        return this._xAxisVisible;
+        return this._xAxisVisible.get();
     }
 
     /**
@@ -88830,13 +88519,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set yAxisVisible(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultAxisVisible;
-        this._yAxisVisible = value;
-        const axisVisible = this._visible && this._axisVisible && this._yAxisVisible && this._axisEnabled;
-        this._yAxisWire.setVisible(axisVisible);
-        this._yAxisLabel.setVisible(axisVisible && !this._yAxisLabelCulled && this._yLabelEnabled);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._yAxisVisible.set(value);
     }
 
     /**
@@ -88847,7 +88530,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get yAxisVisible() {
-        return this._yAxisVisible;
+        return this._yAxisVisible.get();
     }
 
     /**
@@ -88858,13 +88541,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set zAxisVisible(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultAxisVisible;
-        this._zAxisVisible = value;
-        const axisVisible = this._visible && this._axisVisible && this._zAxisVisible && this._axisEnabled;
-        this._zAxisWire.setVisible(axisVisible);
-        this._zAxisLabel.setVisible(axisVisible && !this._zAxisLabelCulled && this._zLabelEnabled);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._zAxisVisible.set(value);
     }
 
     /**
@@ -88875,7 +88552,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get zAxisVisible() {
-        return this._zAxisVisible;
+        return this._zAxisVisible.get();
     }
 
     /**
@@ -88884,11 +88561,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set wireVisible(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultWireVisible;
-        this._wireVisible = value;
-        var wireVisible = this._visible && this._wireVisible;
-        this._lengthLabel.setVisible(wireVisible && this._lengthLabelEnabled);
-        this._lengthWire.setVisible(wireVisible);
+        this._wireVisible.set(value);
     }
 
     /**
@@ -88897,7 +88570,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get wireVisible() {
-        return this._wireVisible;
+        return this._wireVisible.get();
     }
 
     /**
@@ -88906,15 +88579,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set labelsVisible(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultLabelsVisible;
-        this._labelsVisible = value;
-        var labelsVisible = this._visible && this._labelsVisible;
-        this._xAxisLabel.setVisible(labelsVisible && !this._xAxisLabelCulled && this._clickable && this._axisEnabled && this._xLabelEnabled);
-        this._yAxisLabel.setVisible(labelsVisible && !this._yAxisLabelCulled && this._clickable && this._axisEnabled && this._yLabelEnabled);
-        this._zAxisLabel.setVisible(labelsVisible && !this._zAxisLabelCulled && this._clickable && this._axisEnabled && this._zLabelEnabled);
-        this._lengthLabel.setVisible(labelsVisible && this._lengthLabelEnabled);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._labelsVisible.set(value);
     }
 
     /**
@@ -88923,7 +88588,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get labelsVisible() {
-        return this._labelsVisible;
+        return this._labelsVisible.get();
     }
 
     /**
@@ -88932,12 +88597,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set xLabelEnabled(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultXLabelEnabled;
-        this._xLabelEnabled = value;
-        var labelsVisible = this._visible && this._labelsVisible;
-        this._xAxisLabel.setVisible(labelsVisible && !this._xAxisLabelCulled && this._clickable && this._axisEnabled && this._xLabelEnabled);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._xLabelEnabled.set(value);
     }
 
     /**
@@ -88946,7 +88606,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get xLabelEnabled(){
-        return this._xLabelEnabled;
+        return this._xLabelEnabled.get();
     }
 
     /**
@@ -88955,12 +88615,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set yLabelEnabled(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultYLabelEnabled;
-        this._yLabelEnabled = value;
-        var labelsVisible = this._visible && this._labelsVisible;
-        this._yAxisLabel.setVisible(labelsVisible && !this._yAxisLabelCulled && this._clickable && this._axisEnabled && this._yLabelEnabled);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._yLabelEnabled.set(value);
     }
 
     /**
@@ -88969,7 +88624,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get yLabelEnabled(){
-        return this._yLabelEnabled;
+        return this._yLabelEnabled.get();
     }
 
     /**
@@ -88978,12 +88633,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set zLabelEnabled(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultZLabelEnabled;
-        this._zLabelEnabled = value;
-        var labelsVisible = this._visible && this._labelsVisible;
-        this._zAxisLabel.setVisible(labelsVisible && !this._zAxisLabelCulled && this._clickable && this._axisEnabled && this._zLabelEnabled);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._zLabelEnabled.set(value);
     }
 
     /**
@@ -88992,7 +88642,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get zLabelEnabled(){
-        return this._zLabelEnabled;
+        return this._zLabelEnabled.get();
     }
 
     /**
@@ -89001,12 +88651,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set lengthLabelEnabled(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultLengthLabelEnabled;
-        this._lengthLabelEnabled = value;
-        var labelsVisible = this._visible && this._labelsVisible;
-        this._lengthLabel.setVisible(labelsVisible && !this._lengthAxisLabelCulled && this._clickable && this._axisEnabled && this._lengthLabelEnabled);
-        this._cpDirty = true;
-        this._needUpdate();
+        this._lengthLabelEnabled.set(value);
     }
 
     /**
@@ -89015,7 +88660,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get lengthLabelEnabled(){
-        return this._lengthLabelEnabled;
+        return this._lengthLabelEnabled.get();
     }
 
     /**
@@ -89024,8 +88669,8 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set labelsOnWires(value) {
-        value = value !== undefined ? Boolean(value) : this.plugin.defaultLabelsOnWires;
-        this._labelsOnWires = value;
+        this._labelsOnWires.set(value);
+        this._update();
     }
 
     /**
@@ -89034,7 +88679,7 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get labelsOnWires() {
-        return this._labelsOnWires;
+        return this._labelsOnWires.get();
     }
 
     /**
@@ -89042,16 +88687,7 @@ class DistanceMeasurement extends Component {
      * @param highlighted
      */
     setHighlighted(highlighted) {
-        this._originDot.setHighlighted(highlighted);
-        this._targetDot.setHighlighted(highlighted);
-        this._xAxisWire.setHighlighted(highlighted);
-        this._yAxisWire.setHighlighted(highlighted);
-        this._zAxisWire.setHighlighted(highlighted);
-        this._xAxisLabel.setHighlighted(highlighted);
-        this._yAxisLabel.setHighlighted(highlighted);
-        this._zAxisLabel.setHighlighted(highlighted);
-        this._lengthWire.setHighlighted(highlighted);
-        this._lengthLabel.setHighlighted(highlighted);
+        this._drawables.forEach(d => d.setHighlighted(highlighted));
     }
 
     /**
@@ -89060,18 +88696,8 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     set clickable(value) {
-        value = !!value;
-        this._clickable = value;
-        this._originDot.setClickable(this._clickable);
-        this._targetDot.setClickable(this._clickable);
-        this._xAxisWire.setClickable(this._clickable);
-        this._yAxisWire.setClickable(this._clickable);
-        this._zAxisWire.setClickable(this._clickable);
-        this._lengthWire.setClickable(this._clickable);
-        this._xAxisLabel.setClickable(this._clickable);
-        this._yAxisLabel.setClickable(this._clickable);
-        this._zAxisLabel.setClickable(this._clickable);
-        this._lengthLabel.setClickable(this._clickable);
+        this._clickable.set(!!value);
+        this._drawables.forEach(d => d.setClickable(this._clickable.get()));
     }
 
     /**
@@ -89080,50 +88706,14 @@ class DistanceMeasurement extends Component {
      * @type {Boolean}
      */
     get clickable() {
-        return this._clickable;
+        return this._clickable.get();
     }
 
     /**
      * @private
      */
     destroy() {
-
-        const scene = this.plugin.viewer.scene;
-        const metrics = scene.metrics;
-
-        if (this._onViewMatrix) {
-            scene.camera.off(this._onViewMatrix);
-        }
-        if (this._onProjMatrix) {
-            scene.camera.off(this._onProjMatrix);
-        }
-        if (this._onCanvasBoundary) {
-            scene.canvas.off(this._onCanvasBoundary);
-        }
-        if (this._onMetricsUnits) {
-            metrics.off(this._onMetricsUnits);
-        }
-        if (this._onMetricsScale) {
-            metrics.off(this._onMetricsScale);
-        }
-        if (this._onMetricsOrigin) {
-            metrics.off(this._onMetricsOrigin);
-        }
-        if (this._onSectionPlaneUpdated) {
-            scene.off(this._onSectionPlaneUpdated);
-        }
-
-        this._originDot.destroy();
-        this._targetDot.destroy();
-        this._xAxisWire.destroy();
-        this._yAxisWire.destroy();
-        this._zAxisWire.destroy();
-        this._lengthLabel.destroy();
-        this._xAxisLabel.destroy();
-        this._yAxisLabel.destroy();
-        this._zAxisLabel.destroy();
-        this._lengthWire.destroy();
-
+        this._cleanups.forEach(cleanup => cleanup());
         super.destroy();
     }
 }
@@ -97495,7 +97085,7 @@ class MousePanRotateDollyHandler {
         }
 
         function isPanning() {
-            return cameraControl._isKeyDownForAction(cameraControl.MOUSE_PAN, keyDown);
+            return configs.planView || cameraControl._isKeyDownForAction(cameraControl.MOUSE_PAN, keyDown);
         }
 
         function isRotating() {
@@ -98910,6 +98500,7 @@ class TouchPanRotateAndDollyHandler {
         canvas.addEventListener("touchend", this._canvasTouchEndHandler = () => {
             if (pivotController.getPivoting()) {
                 pivotController.endPivot();
+                pivotController.hidePivot();
             }
         });
 
@@ -101851,6 +101442,7 @@ class MetaModel {
                     this.rootMetaObjects.push(metaObject);
                     metaScene.rootMetaObjects[id] = metaObject;
                 }
+                metaObject.metaModels.push(this);
             }
         }
     }
@@ -102256,13 +101848,14 @@ class MetaScene {
         if (metaModel.metaObjects) {
             for (let i = 0, len = metaModel.metaObjects.length; i < len; i++) {
                 const metaObject = metaModel.metaObjects[i];
-                metaObject.type;
                 const id = metaObject.id;
-                if (metaObject.metaModels.length === 1&& metaObject.metaModels[0].id === metaModelId) { // MetaObject owned only by this model, delete
+                if (metaObject.metaModels.length === 1 && metaObject.metaModels[0].id === metaModelId) { // MetaObject owned only by this model, delete
                     delete this.metaObjects[id];
                     if (!metaObject.parent) {
                         delete this.rootMetaObjects[id];
                     }
+                } else {
+                    metaObject.metaModels = metaObject.metaModels.filter(metaModel => metaModel.id !== metaModelId);
                 }
             }
         }
@@ -110709,6 +110302,12 @@ class Viewer {
             }
         }
 
+        // Added to fix label's text offset in an html2canvas capture (See XEOK-151)
+        // based on https://github.com/niklasvh/html2canvas/issues/2775#issuecomment-1316356991
+        const style = document.createElement('style');
+        document.head.appendChild(style);
+        style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');
+
         for (let i = 0, len = pluginContainerElements.length; i < len; i++) {
             const containerElement = pluginContainerElements[i];
             await html2canvas(containerElement, {
@@ -110721,6 +110320,9 @@ class Viewer {
             // (implemented to compensate XCD-153 issue)
             snapshotCanvas.getContext("2d").resetTransform();
         }
+
+        style.remove();
+
         if (!params.includeGizmos) {
             this.sendToPlugins("snapshotFinished");
         }
@@ -123595,6 +123197,43 @@ class StoreyViewsPlugin extends Plugin {
                 this.modelStoreys[modelId][storeyId] = storey;
             }
         }
+        this._clipBoundingBoxes();
+    }
+
+    _clipBoundingBoxes() {
+        const storeysList = this.storeysList;
+        const metaScene = this.viewer.metaScene;
+        const camera = this.viewer.camera;
+        const worldUp = camera.worldUp;
+        const xUp = worldUp[0] > worldUp[1] && worldUp[0] > worldUp[2];
+        const yUp = !xUp && worldUp[1] > worldUp[0] && worldUp[1] > worldUp[2];
+        !xUp && !yUp && worldUp[2] > worldUp[0] && worldUp[2] > worldUp[1];
+
+        let bbIndex;
+
+        if(xUp) bbIndex = 0;
+        else if(yUp) bbIndex = 1;
+        else bbIndex = 2;
+        
+        for (let i = 0, len = storeysList.length; i < len; i++) {
+
+            const storeyMetaObjectCur = metaScene.metaObjects[storeysList[i].storeyId];
+            const elevationCur = storeyMetaObjectCur.attributes.elevation;
+
+            if(isNaN(elevationCur)) return;
+
+            const bb = storeysList[i].storeyAABB;
+            bb[bbIndex] = Math.max(bb[1], parseFloat(elevationCur));
+
+            if (i > 0) {
+                const storeyMetaObjectNext = metaScene.metaObjects[storeysList[i - 1].storeyId];
+                const elevationNext = storeyMetaObjectNext.attributes.elevation;
+                bb[4] = Math.min(bb[bbIndex + 3], parseFloat(elevationNext));
+            }
+
+            this.storeys[storeysList[i].storeyId].storeyAABB = bb;
+        }
+
     }
 
     _deregisterModelStoreys(modelId) {
@@ -123791,6 +123430,7 @@ class StoreyViewsPlugin extends Plugin {
      * @param {Number} [options.width=300] Image width in pixels. Height will be automatically determined from this, if not given.
      * @param {Number} [options.height=300] Image height in pixels, as an alternative to width. Width will be automatically determined from this, if not given.
      * @param {String} [options.format="png"] Image format. Accepted values are "png" and "jpeg".
+     * @param {Boolean} [options.captureSectionPlanes=false] Whether the storey map is sliced or not.
      * @returns {StoreyMap} The StoreyMap.
      */
     createStoreyMap(storeyId, options = {}) {
@@ -123807,6 +123447,7 @@ class StoreyViewsPlugin extends Plugin {
         const aabb = (this._fitStoreyMaps) ? storey.storeyAABB : storey.modelAABB;
         const aspect = Math.abs((aabb[5] - aabb[2]) / (aabb[3] - aabb[0]));
         const padding = options.padding || 0;
+        const captureSectionPlanes = !!options.captureSectionPlanes;
 
         let width;
         let height;
@@ -123838,6 +123479,9 @@ class StoreyViewsPlugin extends Plugin {
         this.showStoreyObjects(storeyId, utils.apply(options, {
             hideOthers: true
         }));
+        
+        if (captureSectionPlanes)
+            this._toggleSectionPlanes(false);
 
         this._arrangeStoreyMapCamera(storey);
 
@@ -123849,10 +123493,19 @@ class StoreyViewsPlugin extends Plugin {
 
         this._objectsMemento.restoreObjects(scene, mask);
         this._cameraMemento.restoreCamera(scene);
+        if (captureSectionPlanes)
+            this._toggleSectionPlanes(true);
 
         return new StoreyMap(storeyId, src, format, width, height, padding);
     }
 
+    _toggleSectionPlanes(visible) {
+        const planes = this.viewer.scene.sectionPlanes;
+        for (const key in planes) {
+            planes[key].active = visible;
+        }
+    }
+
     _arrangeStoreyMapCamera(storey) {
         const viewer = this.viewer;
         const scene = viewer.scene;
@@ -126396,7 +126049,7 @@ class RenderService {
     nodeElement.appendChild(span);
 
     if (contextmenuHandler) {
-      span.oncontextmenu = contextmenuHandler;
+      addContextMenuListener(span, contextmenuHandler);
     }
 
     if (titleClickHandler) {
@@ -133101,7 +132754,7 @@ parsers[ParserV11.version] = ParserV11;
  *
  * ````javascript
  * const sceneModel = xktLoader.load({
- *   manifestSrc: "https://xeokit.github.io/xeokit-sdk/assets/models/models/xkt/Schependomlaan.xkt",
+ *   src: "https://xeokit.github.io/xeokit-sdk/assets/models/models/xkt/Schependomlaan.xkt",
  *   id: "myModel",
  * });
  * ````
@@ -133839,6 +133492,10 @@ class XKTLoaderPlugin extends Plugin {
 }
 
 function getBaseDirectory(filePath) {
+    if (filePath.indexOf('?') > -1) {
+        filePath = filePath.split('?')[0];
+    }
+
     const pathArray = filePath.split('/');
     pathArray.pop(); // Remove the file name or the last segment of the path
     return pathArray.join('/') + '/';
@@ -140815,105 +140472,45 @@ const triangulateEarClipping = function(planeCoords) {
 };
 
 const marker3D = function(scene, color) {
-    const canvas = scene.canvas.canvas;
-
-    const markerParent = canvas.parentNode;
-    const markerDiv = document.createElement("div");
-    markerParent.insertBefore(markerDiv, canvas);
-
-    let size = 5;
-    markerDiv.style.background = color;
-    markerDiv.style.border = "2px solid white";
-    markerDiv.style.margin = "0 0";
-    markerDiv.style.zIndex = "100";
-    markerDiv.style.position = "absolute";
-    markerDiv.style.pointerEvents = "none";
-    markerDiv.style.display = "none";
-
-    const marker = new Marker(scene, {});
-
-    const px = x => x + "px";
-    const update = function() {
-        const pos = marker.canvasPos.slice();
-        transformToNode(canvas, markerParent, pos);
-        markerDiv.style.left = px(pos[0] - 3 - size / 2);
-        markerDiv.style.top  = px(pos[1] - 3 - size / 2);
-        markerDiv.style.borderRadius = px(size * 2);
-        markerDiv.style.width  = px(size);
-        markerDiv.style.height = px(size);
-    };
-    const onViewMatrix = scene.camera.on("viewMatrix", update);
-    const onProjMatrix = scene.camera.on("projMatrix", update);
+    const marker = new Dot3D(scene, {}, scene.canvas.canvas.parentNode, {
+        borderColor: "white",
+        fillColor: color,
+        zIndex: 100
+    });
 
     return {
         update: function(worldPos) {
             if (worldPos)
             {
                 marker.worldPos = worldPos;
-                update();
             }
-            markerDiv.style.display = worldPos ? "" : "none";
+            marker.setVisible(!!worldPos);
         },
 
-        setHighlighted: function(h) {
-            size = h ? 10 : 5;
-            update();
-        },
-
-        getCanvasPos: () => marker.canvasPos,
-
-        getWorldPos: () => marker.worldPos,
-
-        destroy: function() {
-            markerDiv.parentNode.removeChild(markerDiv);
-            scene.camera.off(onViewMatrix);
-            scene.camera.off(onProjMatrix);
-            marker.destroy();
-        }
+        setHighlighted: h => marker.setHighlighted(h),
+        getCanvasPos:  () => marker.canvasPos,
+        getWorldPos:   () => marker.worldPos,
+        destroy:       () => marker.destroy()
     };
 };
 
 const wire3D = function(scene, color, startWorldPos) {
-    const canvas = scene.canvas.canvas;
-
-    const startMarker = new Marker(scene, {});
-    startMarker.worldPos = startWorldPos;
-    const endMarker = new Marker(scene, {});
-    const wireParent = canvas.ownerDocument.body;
-    const wire = new Wire(wireParent, {
+    const wire = new Wire3D(scene, scene.canvas.canvas.ownerDocument.body, {
         color: color,
         thickness: 1,
         thicknessClickable: 6
     });
     wire.setVisible(false);
-
-    const updatePos = function() {
-        const p0 = startMarker.canvasPos.slice();
-        const p1 = endMarker.canvasPos.slice();
-        transformToNode(canvas, wireParent, p0);
-        transformToNode(canvas, wireParent, p1);
-        wire.setStartAndEnd(p0[0], p0[1], p1[0], p1[1]);
-    };
-    const onViewMatrix = scene.camera.on("viewMatrix", updatePos);
-    const onProjMatrix = scene.camera.on("projMatrix", updatePos);
-
     return {
-        update: function(endWorldPos) {
+        update: endWorldPos => {
             if (endWorldPos)
             {
-                endMarker.worldPos = endWorldPos;
-                updatePos();
+                wire.setEnds(startWorldPos, endWorldPos);
             }
             wire.setVisible(!!endWorldPos);
         },
 
-        destroy: function() {
-            scene.camera.off(onViewMatrix);
-            scene.camera.off(onProjMatrix);
-            startMarker.destroy();
-            endMarker.destroy();
-            wire.destroy();
-        }
+        destroy: () => wire.destroy()
     };
 };
 
@@ -142498,6 +142095,7 @@ exports.IntType = IntType;
 exports.JPEGMediaType = JPEGMediaType;
 exports.KTX2TextureTranscoder = KTX2TextureTranscoder;
 exports.LASLoaderPlugin = LASLoaderPlugin;
+exports.Label3D = Label3D;
 exports.LambertMaterial = LambertMaterial;
 exports.LightMap = LightMap;
 exports.LineSet = LineSet;
@@ -142606,6 +142204,7 @@ exports.VBOGeometry = VBOGeometry;
 exports.ViewCullPlugin = ViewCullPlugin;
 exports.Viewer = Viewer;
 exports.WebIFCLoaderPlugin = WebIFCLoaderPlugin;
+exports.Wire3D = Wire3D;
 exports.WorkerPool = WorkerPool$1;
 exports.XKTDefaultDataSource = XKTDefaultDataSource;
 exports.XKTLoaderPlugin = XKTLoaderPlugin;
@@ -142645,6 +142244,7 @@ exports.loadOBJGeometry = loadOBJGeometry;
 exports.math = math;
 exports.meshSurfaceArea = meshSurfaceArea;
 exports.meshVolume = meshVolume;
+exports.os = os;
 exports.rtcToWorldPos = rtcToWorldPos;
 exports.sRGBEncoding = sRGBEncoding;
 exports.setFrustum = setFrustum;