@xeokit/xeokit-sdk 2.3.2 → 2.3.4

package/dist/xeokit-sdk.es.js

@@ -746,9 +746,7 @@ class ContextMenu {
 
                         item.itemElement.addEventListener("mouseenter", (event) => {
                             event.preventDefault();
-                            if (item.enabled === false) {
-                                return;
-                            }
+
                             const subMenu = item.subMenu;
                             if (!subMenu) {
                                 if (lastSubMenu) {
@@ -762,6 +760,10 @@ class ContextMenu {
                                 lastSubMenu = null;
                             }
 
+                            if (item.enabled === false) {
+                                return;
+                            }
+
                             const itemElement = item.itemElement;
                             const subMenuElement = subMenu.menuElement;
 
@@ -12638,7 +12640,7 @@ function buildBoxGeometry(cfg = {}) {
  *         xSize: 1,  // Half-size on each axis
  *         ySize: 1,
  *         zSize: 1
- *      }),
+ *      })),
  *      material: new PhongMaterial(viewer.scene, {
  *         emissive: [0,1,0]
  *      })
@@ -65449,37 +65451,91 @@ 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';
 
-        var wire = this._wire;
-        var style = wire.style;
+        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;
 
-        style.border = "solid " + this._thickness + "px " + (cfg.color || "black");
-        style.position = "absolute";
-        style["z-index"] = cfg.zIndex === undefined ? "2000001" : cfg.zIndex ;
-        style.width = 0 + "px";
-        style.height = 0 + "px";
-        style.visibility = "visible";
-        style.top = 0 + "px";
-        style.left = 0 + "px";
-        style["pointer-events"] = "none";
-        style['-webkit-transform-origin'] = "0 0";
-        style['-moz-transform-origin'] = "0 0";
-        style['-ms-transform-origin'] = "0 0";
-        style['-o-transform-origin'] = "0 0";
-        style['transform-origin'] = "0 0";
-        style['-webkit-transform'] = 'rotate(0deg)';
-        style['-moz-transform'] = 'rotate(0deg)';
-        style['-ms-transform'] = 'rotate(0deg)';
-        style['-o-transform'] = 'rotate(0deg)';
-        style['transform'] = 'rotate(0deg)';
-        style["opacity"] = 1.0;
+        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;
+        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"] = "all";
+        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.onContextMenu) {
+            wireClickable.addEventListener('contextmenu', (event) => {
+                cfg.onContextMenu(event, this);
+                event.preventDefault();
+            });
+        }
+
         this._x1 = 0;
         this._y1 = 0;
         this._x2 = 0;
@@ -65497,16 +65553,25 @@ class Wire {
         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 style = this._wire.style;
-        style["width"] = Math.round(length) + 'px';
-        style["left"] = Math.round(this._x1) + 'px';
-        style["top"] = Math.round(this._y1) + 'px';
-        style['-webkit-transform'] = 'rotate(' + angle + 'deg)';
-        style['-moz-transform'] = 'rotate(' + angle + 'deg)';
-        style['-ms-transform'] = 'rotate(' + angle + 'deg)';
-        style['-o-transform'] = 'rotate(' + angle + 'deg)';
-        style['transform'] = 'rotate(' + angle + 'deg)';
-        style["pointer-events"] = "none";
+        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) {
@@ -65518,7 +65583,8 @@ class Wire {
     }
 
     setColor(color) {
-        this._wire.style.border = "solid " + this._thickness + "px " + (color || "black");
+        this._color = color || "black";
+        this._wire.style.border = "solid " + this._thickness + "px " + this._color;
     }
 
     setOpacity(opacity) {
@@ -65533,8 +65599,25 @@ class Wire {
         this._wire.style.visibility = visible ? "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) {
         this._wire.parentElement.removeChild(this._wire);
+        this._wireClickable.parentElement.removeChild(this._wireClickable);
     }
 }
 
@@ -65543,6 +65626,8 @@ class Dot {
 
     constructor(parentElement, cfg = {}) {
 
+        this._highlightClass = "viewer-ruler-dot-highlighted";
+
         this._x = 0;
         this._y = 0;
 
@@ -65550,37 +65635,77 @@ class Dot {
         this._dot = document.createElement('div');
         this._dot.className += this._dot.className ? ' viewer-ruler-dot' : 'viewer-ruler-dot';
 
+        this._dotClickable = document.createElement('div');
+        this._dotClickable.className += this._dotClickable.className ? ' viewer-ruler-dot-clickable' : 'viewer-ruler-dot-clickable';
+
         var dot = this._dot;
-        var style = dot.style;
+        var dotStyle = dot.style;
+        dotStyle["border-radius"] = 25 + "px";
+        dotStyle.border = "solid 2px white";
+        dotStyle.background = "lightgreen";
+        dotStyle.position = "absolute";
+        dotStyle["z-index"] = cfg.zIndex === undefined ? "40000005" : cfg.zIndex ;
+        dotStyle.width = 8 + "px";
+        dotStyle.height = 8 + "px";
+        dotStyle.visibility = cfg.visible !== false ? "visible" : "hidden";
+        dotStyle.top = 0 + "px";
+        dotStyle.left = 0 + "px";
+        dotStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";
+        dotStyle["opacity"] = 1.0;
+        dotStyle["pointer-events"] = "none";
+        if (cfg.onContextMenu) ;
+        parentElement.appendChild(dot);
 
-        style["border-radius"] = 25 + "px";
-        style.border = "solid 2px white";
-        style.background = "lightgreen";
-        style.position = "absolute";
-        style["z-index"] = cfg.zIndex === undefined ? "40000005" : cfg.zIndex ;
-        style.width = 8 + "px";
-        style.height = 8 + "px";
-        style.visibility = cfg.visible !== false ? "visible" : "hidden";
-        style.top = 0 + "px";
-        style.left = 0 + "px";
-        style["box-shadow"] = "0 2px 5px 0 #182A3D;";
-        style["pointer-events"] = "none";
-        style["opacity"] = 1.0;
+        var dotClickable = this._dotClickable;
+        var dotClickableStyle = dotClickable.style;
+        dotClickableStyle["border-radius"] = 35 + "px";
+        dotClickableStyle.border = "solid 10px white";
+        dotClickableStyle.position = "absolute";
+        dotClickableStyle["z-index"] = cfg.zIndex === undefined ? "40000007" : (cfg.zIndex + 1);
+        dotClickableStyle.width = 8 + "px";
+        dotClickableStyle.height = 8 + "px";
+        dotClickableStyle.visibility = "visible";
+        dotClickableStyle.top = 0 + "px";
+        dotClickableStyle.left = 0 + "px";
+        dotClickableStyle["opacity"] = 0.0;
+        dotClickableStyle["pointer-events"] = "all";
+        if (cfg.onContextMenu) ;
+        parentElement.appendChild(dotClickable);
+
+        if (cfg.onMouseOver) {
+            dotClickable.addEventListener('mouseover', (event) => {
+                cfg.onMouseOver(event, this);
+            });
+        }
 
-        parentElement.appendChild(dot);
+        if (cfg.onMouseLeave) {
+            dotClickable.addEventListener('mouseleave', (event) => {
+                cfg.onMouseLeave(event, this);
+            });
+        }
 
+        if (cfg.onContextMenu) {
+            dotClickable.addEventListener('contextmenu', (event) => {
+                cfg.onContextMenu(event, this);
+                event.preventDefault();
+            });
+        }
+        
         this.setPos(cfg.x || 0, cfg.y || 0);
         this.setFillColor(cfg.fillColor);
         this.setBorderColor(cfg.borderColor);
-        this.setClickable(false);
     }
 
     setPos(x, y) {
         this._x = x;
         this._y = y;
-        var style = this._dot.style;
-        style["left"] = (Math.round(x) - 5) + 'px';
-        style["top"] = (Math.round(y) - 5) + 'px';
+        var dotStyle = this._dot.style;
+        dotStyle["left"] = (Math.round(x) - 4) + 'px';
+        dotStyle["top"] = (Math.round(y) - 4) + 'px';
+
+        var dotClickableStyle = this._dotClickable.style;
+        dotClickableStyle["left"] = (Math.round(x) - 9) + 'px';
+        dotClickableStyle["top"] = (Math.round(y) - 9) + 'px';
     }
 
     setFillColor(color) {
@@ -65604,12 +65729,26 @@ class Dot {
     }
 
     setClickable(clickable) {
+        this._dotClickable.style["pointer-events"] = (!!clickable) ? "all" : "none";
         this._dot.style["pointer-events"] = (!!clickable) ? "all" : "none";
     }
 
+    setHighlighted(highlighted) {
+        if (this._highlighted === highlighted) {
+            return;
+        }
+        this._highlighted = !!highlighted;
+        if (this._highlighted) {
+            this._dot.classList.add(this._highlightClass);
+        } else {
+            this._dot.classList.remove(this._highlightClass);
+        }
+    }
+    
     destroy() {
         this.setVisible(false);
         this._dot.parentElement.removeChild(this._dot);
+        this._dotClickable.parentElement.removeChild(this._dotClickable);
     }
 }
 
@@ -65618,10 +65757,13 @@ 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';
@@ -65632,7 +65774,7 @@ class Label {
         style["border-radius"] = 5 + "px";
         style.color = "white";
         style.padding = "4px";
-        style.border = "solid 0px white";
+        style.border = "solid 1px";
         style.background = "lightgreen";
         style.position = "absolute";
         style["z-index"] = cfg.zIndex === undefined ? "5000005" : cfg.zIndex;
@@ -65641,16 +65783,38 @@ class Label {
         style.visibility = "visible";
         style.top = 0 + "px";
         style.left = 0 + "px";
-        style["pointer-events"] = "none";
+        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.borderColor);
+        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.onContextMenu) {
+            label.addEventListener('contextmenu', (event) => {
+                cfg.onContextMenu(event, this);
+                event.preventDefault();
+            });
+        }
     }
 
     setPos(x, y) {
@@ -65682,11 +65846,13 @@ class Label {
     }
 
     setFillColor(color) {
-        this._label.style.background = color || "lightgreen";
+        this._fillColor = color || "lightgreen";
+        this._label.style.background =this._fillColor;
     }
 
     setBorderColor(color) {
-        this._label.style.border = "solid 2px" + (color || "black");
+        this._borderColor = color || "black";
+        this._label.style.border = "solid 1px " + this._borderColor;
     }
 
     setOpacity(opacity) {
@@ -65698,7 +65864,31 @@ class Label {
             return;
         }
         this._visible = !!visible;
-        this._label.style.visibility = this._visible ? "visible" : "hidden";
+        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";
     }
 
     destroy() {
@@ -65751,35 +65941,65 @@ class AngleMeasurement extends Component {
         this._pp = new Float64Array(12);
         this._cp = new Int16Array(6);
 
+        const onMouseOver = cfg.onMouseOver ? (event) => {
+            cfg.onMouseOver(event, this);
+        } : null;
+
+        const onMouseLeave = cfg.onMouseLeave ? (event) => {
+            cfg.onMouseLeave(event, this);
+        } : null;
+
+        const onContextMenu = cfg.onContextMenu ? (event) => {
+            cfg.onContextMenu(event, this);
+        } : null;
+
         this._originDot = new Dot(this._container, {
             fillColor: this._color,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2: undefined
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2: undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
         this._cornerDot = new Dot(this._container, {
             fillColor: this._color,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2: undefined
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2: undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
         this._targetDot = new Dot(this._container, {
             fillColor: this._color,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2: undefined
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2: undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._originWire = new Wire(this._container, {
             color: this._color || "blue",
             thickness: 1,
-            zIndex: plugin.zIndex
+            zIndex: plugin.zIndex,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
         this._targetWire = new Wire(this._container, {
             color: this._color || "red",
             thickness: 1,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1: undefined
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1: undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._angleLabel = new Label(this._container, {
             fillColor: this._color || "#00BBFF",
             prefix: "",
             text: "",
-            zIndex: plugin.zIndex + 2
+            zIndex: plugin.zIndex + 2,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._wpDirty = false;
@@ -65795,6 +66015,8 @@ class AngleMeasurement extends Component {
         this._targetWireVisible = false;
 
         this._angleVisible = false;
+        this._labelsVisible = false;
+        this._clickable = true;
 
         this._originMarker.on("worldPos", (value) => {
             this._originWorld.set(value || [0, 0, 0]);
@@ -65840,6 +66062,7 @@ class AngleMeasurement extends Component {
         this.targetWireVisible = cfg.targetWireVisible;
 
         this.angleVisible = cfg.angleVisible;
+        this.labelsVisible = cfg.labelsVisible;
     }
 
     _update() {
@@ -65899,7 +66122,7 @@ class AngleMeasurement extends Component {
                 this._originWire.setVisible(false);
                 this._targetWire.setVisible(false);
 
-                this._angleLabel.setVisible(false);
+                this._angleLabel.setCulled(true);
 
                 return;
             }
@@ -65963,7 +66186,7 @@ class AngleMeasurement extends Component {
             this._originWire.setVisible(this._visible && this._originWireVisible);
             this._targetWire.setVisible(this._visible && this._targetWireVisible);
 
-            this._angleLabel.setVisible(this._visible && this._angleVisible);
+            this._angleLabel.setCulled(!(this._visible && this._angleVisible && this.labelsVisible));
 
             this._cpDirty = false;
         }
@@ -66077,6 +66300,8 @@ class AngleMeasurement extends Component {
         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();
     }
 
     /**
@@ -66097,6 +66322,8 @@ class AngleMeasurement extends Component {
         value = value !== false;
         this._originVisible = value;
         this._originDot.setVisible(this._visible && this._originVisible);
+        this._cpDirty = true;
+        this._needUpdate();
     }
 
     /**
@@ -66117,6 +66344,8 @@ class AngleMeasurement extends Component {
         value = value !== false;
         this._cornerVisible = value;
         this._cornerDot.setVisible(this._visible && this._cornerVisible);
+        this._cpDirty = true;
+        this._needUpdate();
     }
 
     /**
@@ -66137,6 +66366,8 @@ class AngleMeasurement extends Component {
         value = value !== false;
         this._targetVisible = value;
         this._targetDot.setVisible(this._visible && this._targetVisible);
+        this._cpDirty = true;
+        this._needUpdate();
     }
 
     /**
@@ -66157,6 +66388,8 @@ class AngleMeasurement extends Component {
         value = value !== false;
         this._originWireVisible = value;
         this._originWire.setVisible(this._visible && this._originWireVisible);
+        this._cpDirty = true;
+        this._needUpdate();
     }
 
     /**
@@ -66177,6 +66410,8 @@ class AngleMeasurement extends Component {
         value = value !== false;
         this._targetWireVisible = value;
         this._targetWire.setVisible(this._visible && this._targetWireVisible);
+        this._cpDirty = true;
+        this._needUpdate();
     }
 
     /**
@@ -66197,6 +66432,8 @@ class AngleMeasurement extends Component {
         value = value !== false;
         this._angleVisible = value;
         this._angleLabel.setVisible(this._visible && this._angleVisible);
+        this._cpDirty = true;
+        this._needUpdate();
     }
 
     /**
@@ -66208,6 +66445,67 @@ class AngleMeasurement extends Component {
         return this._angleVisible;
     }
 
+    /**
+     * Sets if the labels are visible.
+     *
+     * @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();
+    }
+
+    /**
+     * Gets if the labels are visible.
+     *
+     * @type {Boolean}
+     */
+    get labelsVisible() {
+        return this._labelsVisible;
+    }
+
+    /**
+     * Sets if this DistanceMeasurement appears highlighted.
+     * @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);
+    }
+
+    /**
+     * Sets if the wires, dots ad labels will fire "mouseOver" "mouseLeave" and "contextMenu" events.
+     *
+     * @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);
+    }
+
+    /**
+     * Gets if the wires, dots ad labels will fire "mouseOver" "mouseLeave" and "contextMenu" events.
+     *
+     * @type {Boolean}
+     */
+    get clickable() {
+        return this._clickable;
+    }
+
     /**
      * @private
      */
@@ -66534,6 +66832,7 @@ class AngleMeasurementsControl extends Component {
                             this._currentAngleMeasurement.targetWireVisible = false;
                             this._currentAngleMeasurement.targetVisible = false;
                             this._currentAngleMeasurement.angleVisible = false;
+                            this._currentAngleMeasurement.clickable = false;
                             this._state = FINDING_CORNER;
                             this.fire("measurementStart", this._currentAngleMeasurement);
                             break;
@@ -66549,6 +66848,7 @@ class AngleMeasurementsControl extends Component {
                             //  this._currentAngleMeasurement.approximate = false;
                             this._currentAngleMeasurement.targetVisible = true;
                             this._currentAngleMeasurement.angleVisible = true;
+                            this._currentAngleMeasurement.clickable = true;
                             this.fire("measurementEnd", this._currentAngleMeasurement);
                             this._currentAngleMeasurement = null;
                             this._state = FINDING_ORIGIN;
@@ -66774,6 +67074,85 @@ const getCanvasPosFromEvent$5 = function (event, canvasPos) {
  *
  * angleMeasurements.control.activate();  // <------------ Activate the AngleMeasurementsControl
  * ````
+ *
+ * ## Example 4: Attaching Mouse Handlers
+ *
+ * In our fourth example, we'll attach even handlers to our plugin, to catch when the user
+ * hovers or right-clicks over our measurements.
+ *
+ * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]
+ *
+ * ````javascript
+ * import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ *     transparent: true
+ * });
+ *
+ * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];
+ * viewer.scene.camera.look = [10.97, 5.82, -11.22];
+ * viewer.scene.camera.up = [0.36, 0.83, 0.40];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const angleMeasurements = new AngleMeasurementsPlugin(viewer);
+ *
+ * angleMeasurements.on("mouseOver", (e) => {
+ *     e.measurement.setHighlighted(true);
+ * });
+ *
+ * angleMeasurements.on("mouseLeave", (e) => {
+ *     e.measurement.setHighlighted(false);
+ * });
+ *
+ * angleMeasurements.on("contextMenu", (e) => {
+ *     // Show context menu
+ *     e.event.preventDefault();
+ * });
+ *
+ * const model = xktLoader.load({
+ *      src: "./models/xkt/duplex/duplex.xkt"
+ * });
+ *
+ * model.on("loaded", () => {
+ *
+ *       angleMeasurementsPlugin.createMeasurement({
+ *             id: "angleMeasurement1",
+ *             origin: {
+ *                 entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
+ *                 worldPos: [0.4158603637281142, 2.5193106917110457, 17.79972838299403]
+ *             },
+ *             corner: {
+ *                 entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
+ *                 worldPos: [0.41857741956197625,0.0987169929481646,17.799763071093395]
+ *             },
+ *             target: {
+ *                 entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
+ *                 worldPos: [5.235526066859247, 0.11580773869801986, 17.824891550941565]
+ *             },
+ *             visible: true
+ *         });
+ *
+ *         angleMeasurementsPlugin.createMeasurement({
+ *             id: "angleMeasurement2",
+ *             origin: {
+ *                 entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
+ *                 worldPos: [-0.00003814187850181838, 5.9996748076205115,17.79996871551525]
+ *             },
+ *             corner: {
+ *                 entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNqI"],
+ *                 worldPos: [-0.0005214119318139865, 3.1010044228517595, 17.787656604483363]
+ *
+ *             },
+ *             target: {
+ *                 entity: viewer.scene.objects["1s1jVhK8z0pgKYcr9jt7AB"],
+ *                 worldPos: [ 8.380657312957396, 3.1055697628459553, 17.799220108187185]
+ *             },
+ *             visible: true
+ *         });
+ * });
+ * ````
  */
 class AngleMeasurementsPlugin extends Plugin {
 
@@ -66784,6 +67163,7 @@ class AngleMeasurementsPlugin extends Plugin {
      * @param {String} [cfg.id="AngleMeasurements"] Optional ID for this plugin, so that we can find it within {@link Viewer#plugins}.
      * @param {HTMLElement} [cfg.container] Container DOM element for markers and labels. Defaults to ````document.body````.
      * @param {string} [cfg.defaultColor=null] The default color of the dots, wire and label.
+    * @param {boolean} [cfg.defaultLabelsVisible=true] The default value of {@link AngleMeasurement.labelsVisible}.
      * @param {number} [cfg.zIndex] If set, the wires, dots and labels will have this zIndex (+1 for dots and +2 for labels).
     */
     constructor(viewer, cfg = {}) {
@@ -66796,8 +67176,33 @@ class AngleMeasurementsPlugin extends Plugin {
 
         this._measurements = {};
 
-        this.defaultColor = cfg.defaultColor;
+        this.defaultColor = cfg.defaultColor !== undefined ? cfg.defaultColor : "#00BBFF";
+        this.defaultLabelsVisible = cfg.defaultLabelsVisible !== false;
         this.zIndex = cfg.zIndex || 10000;
+
+        this._onMouseOver = (event, measurement) => {
+            this.fire("mouseOver", {
+                plugin: this,
+                measurement,
+                event
+            });
+        };
+
+        this._onMouseLeave = (event, measurement) => {
+            this.fire("mouseLeave", {
+                plugin: this,
+                measurement,
+                event
+            });
+        };
+
+        this._onContextMenu = (event, measurement) => {
+            this.fire("contextMenu", {
+                plugin: this,
+                measurement,
+                event
+            });
+        };
     }
 
     /**
@@ -66872,6 +67277,9 @@ class AngleMeasurementsPlugin extends Plugin {
             cornerVisible: true,
             targetWireVisible: true,
             targetVisible: true,
+            onMouseOver: this._onMouseOver,
+            onMouseLeave: this._onMouseLeave,
+            onContextMenu: this._onContextMenu
         });
         this._measurements[measurement.id] = measurement;
         measurement.on("destroyed", () => {
@@ -66896,6 +67304,17 @@ class AngleMeasurementsPlugin extends Plugin {
         this.fire("measurementDestroyed", measurement);
     }
 
+    /**
+     * Shows all or hides the angle label of each {@link AngleMeasurement}.
+     *
+     * @param {Boolean} labelsShown Whether or not to show the labels.
+     */
+    setLabelsShown(labelsShown) {
+        for (const [key, measurement] of Object.entries(this.measurements)) {
+            measurement.labelShown = labelsShown;
+        }
+    }
+
     /**
      * Destroys all {@link AngleMeasurement}s.
      */
@@ -74472,7 +74891,7 @@ class CustomProjection extends Component {
         this._inverseMatrixDirty = true;
         this._transposedMatrixDirty = true;
         this.glRedraw();
-        this.fire("far", this._state.matrix);
+        this.fire("matrix", this._state.matrix);
     }
 
     /**
@@ -80595,7 +81014,7 @@ class DistanceMeasurement extends Component {
         this._wp = new Float64Array(24);
         this._vp = new Float64Array(24);
         this._pp = new Float64Array(24);
-        this._cp = new Int16Array(8);
+        this._cp = new Float64Array(8);
 
         this._xAxisLabelCulled = false;
         this._yAxisLabelCulled = false;
@@ -80603,66 +81022,112 @@ class DistanceMeasurement extends Component {
 
         this._color = cfg.color || this.plugin.defaultColor;
 
+        const onMouseOver = cfg.onMouseOver ? (event) => {
+            cfg.onMouseOver(event, this);
+        } : null;
+
+        const onMouseLeave = cfg.onMouseLeave ? (event) => {
+            cfg.onMouseLeave(event, this);
+        } : null;
+
+        const onContextMenu = cfg.onContextMenu ? (event) => {
+            cfg.onContextMenu(event, this);
+        } : null;
+
         this._originDot = new Dot(this._container, {
             fillColor: this._color,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2: undefined
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._targetDot = new Dot(this._container, {
             fillColor: this._color,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2: undefined
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._lengthWire = new Wire(this._container, {
             color: this._color,
             thickness: 2,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1: undefined
+            thicknessClickable: 6,
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._xAxisWire = new Wire(this._container, {
-            color: "red",
+            color: "#FF0000",
             thickness: 1,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1: undefined
+            thicknessClickable: 6,
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._yAxisWire = new Wire(this._container, {
             color: "green",
             thickness: 1,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1: undefined
+            thicknessClickable: 6,
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._zAxisWire = new Wire(this._container, {
             color: "blue",
             thickness: 1,
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1: undefined
+            thicknessClickable: 6,
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 1 : undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._lengthLabel = new Label(this._container, {
             fillColor: this._color,
             prefix: "",
             text: "",
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 4: undefined
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 4 : undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._xAxisLabel = new Label(this._container, {
             fillColor: "red",
             prefix: "X",
             text: "",
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 3: undefined
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 3 : undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._yAxisLabel = new Label(this._container, {
             fillColor: "green",
             prefix: "Y",
             text: "",
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 3: undefined
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 3 : undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._zAxisLabel = new Label(this._container, {
             fillColor: "blue",
             prefix: "Z",
             text: "",
-            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 3: undefined
+            zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 3 : undefined,
+            onMouseOver,
+            onMouseLeave,
+            onContextMenu
         });
 
         this._wpDirty = false;
@@ -80674,7 +81139,12 @@ class DistanceMeasurement extends Component {
         this._targetVisible = false;
         this._wireVisible = false;
         this._axisVisible = false;
+        this._xAxisVisible = false;
+        this._yAxisVisible = false;
+        this._zAxisVisible = false;
         this._axisEnabled = true;
+        this._labelsVisible = false;
+        this._clickable = true;
 
         this._originMarker.on("worldPos", (value) => {
             this._originWorld.set(value || [0, 0, 0]);
@@ -80724,6 +81194,7 @@ class DistanceMeasurement extends Component {
         this.targetVisible = cfg.targetVisible;
         this.wireVisible = cfg.wireVisible;
         this.axisVisible = cfg.axisVisible;
+        this.labelsVisible = cfg.labelsVisible;
     }
 
     _update() {
@@ -80833,45 +81304,57 @@ class DistanceMeasurement extends Component {
             this._yAxisWire.setStartAndEnd(cp[2], cp[3], cp[4], cp[5]);
             this._zAxisWire.setStartAndEnd(cp[4], cp[5], cp[6], cp[7]);
 
-            this._lengthLabel.setPosOnWire(cp[0], cp[1], cp[6], cp[7]);
-            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]);
+            if (!this.labelsVisible) {
 
-            const tilde = this._approximate ? " ~ " : " = ";
+                this._lengthLabel.setCulled(true);
 
-            this._length = Math.abs(math.lenVec3(math.subVec3(this._targetWorld, this._originWorld, distVec3)));
-            this._lengthLabel.setText(tilde + (this._length * scale).toFixed(2) + unitAbbrev);
+                this._xAxisLabel.setCulled(true);
+                this._yAxisLabel.setCulled(true);
+                this._zAxisLabel.setCulled(true);
 
-            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]));
+            } else {
 
-            const labelMinAxisLength = this.plugin.labelMinAxisLength;
+                this._lengthLabel.setPosOnWire(cp[0], cp[1], cp[6], cp[7]);
 
-            this._xAxisLabelCulled = (xAxisCanvasLength < labelMinAxisLength);
-            this._yAxisLabelCulled = (yAxisCanvasLength < labelMinAxisLength);
-            this._zAxisLabelCulled = (zAxisCanvasLength < labelMinAxisLength);
+                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]);
 
-            if (!this._xAxisLabelCulled) {
-                this._xAxisLabel.setText(tilde + Math.abs((this._targetWorld[0] - this._originWorld[0]) * scale).toFixed(2) + unitAbbrev);
-                this._xAxisLabel.setVisible(this.axisVisible);
-            } else {
-                this._xAxisLabel.setVisible(false);
-            }
+                const tilde = this._approximate ? " ~ " : " = ";
 
-            if (!this._yAxisLabelCulled) {
-                this._yAxisLabel.setText(tilde + Math.abs((this._targetWorld[1] - this._originWorld[1]) * scale).toFixed(2) + unitAbbrev);
-                this._yAxisLabel.setVisible(this.axisVisible);
-            } else {
-                this._yAxisLabel.setVisible(false);
-            }
+                this._length = Math.abs(math.lenVec3(math.subVec3(this._targetWorld, this._originWorld, distVec3)));
+                this._lengthLabel.setText(tilde + (this._length * scale).toFixed(2) + unitAbbrev);
 
-            if (!this._zAxisLabelCulled) {
-                this._zAxisLabel.setText(tilde + Math.abs((this._targetWorld[2] - this._originWorld[2]) * scale).toFixed(2) + unitAbbrev);
-                this._zAxisLabel.setVisible(this.axisVisible);
-            } else {
-                this._zAxisLabel.setVisible(false);
+                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;
+
+                this._xAxisLabelCulled = (xAxisCanvasLength < labelMinAxisLength);
+                this._yAxisLabelCulled = (yAxisCanvasLength < labelMinAxisLength);
+                this._zAxisLabelCulled = (zAxisCanvasLength < labelMinAxisLength);
+
+                if (!this._xAxisLabelCulled) {
+                    this._xAxisLabel.setText(tilde + Math.abs((this._targetWorld[0] - this._originWorld[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._targetWorld[1] - this._originWorld[1]) * scale).toFixed(2) + unitAbbrev);
+                    this._yAxisLabel.setCulled(!this.axisVisible);
+                } else {
+                    this._yAxisLabel.setCulled(true);
+                }
+
+                if (!this._zAxisLabelCulled) {
+                    this._zAxisLabel.setText(tilde + Math.abs((this._targetWorld[2] - this._originWorld[2]) * scale).toFixed(2) + unitAbbrev);
+                    this._zAxisLabel.setCulled(!this.axisVisible);
+                } else {
+                    this._zAxisLabel.setCulled(true);
+                }
             }
 
             this._originDot.setVisible(this._visible && this._originVisible);
@@ -80880,7 +81363,7 @@ class DistanceMeasurement extends Component {
             this._yAxisWire.setVisible(this.axisVisible);
             this._zAxisWire.setVisible(this.axisVisible);
             this._lengthWire.setVisible(this.wireVisible);
-            this._lengthLabel.setVisible(this.wireVisible);
+            this._lengthLabel.setCulled(!this.wireVisible);
 
             this._cpDirty = false;
         }
@@ -80913,7 +81396,7 @@ class DistanceMeasurement extends Component {
     get approximate() {
         return this._approximate;
     }
-    
+
     /**
      * Gets the origin {@link Marker}.
      *
@@ -80961,19 +81444,31 @@ 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);
-        var axisVisible = this._visible && this._axisVisible;
-        this._xAxisWire.setVisible(axisVisible);
-        this._yAxisWire.setVisible(axisVisible);
-        this._zAxisWire.setVisible(axisVisible);
-        this._xAxisLabel.setVisible(axisVisible && !this._xAxisLabelCulled);
-        this._yAxisLabel.setVisible(axisVisible && !this._yAxisLabelCulled);
-        this._zAxisLabel.setVisible(axisVisible && !this._zAxisLabelCulled);
+
+        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._yAxisLabel.setVisible(yAxisVisible && !this._yAxisLabelCulled);
+        this._zAxisLabel.setVisible(zAxisVisible && !this._zAxisLabelCulled);
+
+        this._cpDirty = true;
+
+        this._needUpdate();
     }
 
     /**
@@ -81026,7 +81521,9 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Sets if the axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} are visible.
+     * Sets if the axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} are enabled.
+     *
+     * Wires are only shown if enabled and visible.
      *
      * @type {Boolean}
      */
@@ -81040,20 +81537,26 @@ class DistanceMeasurement extends Component {
         this._xAxisLabel.setVisible(axisVisible && !this._xAxisLabelCulled);
         this._yAxisLabel.setVisible(axisVisible && !this._yAxisLabelCulled);
         this._zAxisLabel.setVisible(axisVisible && !this._zAxisLabelCulled);
+        this._cpDirty = true;
+        this._needUpdate();
     }
 
     /**
-     * Gets if the axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} are visible.
+     * Gets if the axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} are enabled.
+     *
+     * Wires are only shown if enabled and visible.
      *
      * @type {Boolean}
      */
     get axisEnabled() {
         return this._axisEnabled;
     }
-    
+
     /**
      * Sets if the axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} are visible.
      *
+     * Wires are only shown if enabled and visible.
+     *
      * @type {Boolean}
      */
     set axisVisible(value) {
@@ -81066,17 +81569,105 @@ class DistanceMeasurement extends Component {
         this._xAxisLabel.setVisible(axisVisible && !this._xAxisLabelCulled);
         this._yAxisLabel.setVisible(axisVisible && !this._yAxisLabelCulled);
         this._zAxisLabel.setVisible(axisVisible && !this._zAxisLabelCulled);
+        this._cpDirty = true;
+        this._needUpdate();
     }
 
     /**
      * Gets if the axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} are visible.
      *
+     * Wires are only shown if enabled and visible.
+     *
      * @type {Boolean}
      */
     get axisVisible() {
         return this._axisVisible;
     }
 
+    /**
+     * Sets if the X-axis-aligned wire between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} is visible.
+     *
+     * Wires are only shown if enabled and visible.
+     *
+     * @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._cpDirty = true;
+        this._needUpdate();
+    }
+
+    /**
+     * Gets if the X-axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} are visible.
+     *
+     * Wires are only shown if enabled and visible.
+     *
+     * @type {Boolean}
+     */
+    get xAxisVisible() {
+        return this._xAxisVisible;
+    }
+
+    /**
+     * Sets if the Y-axis-aligned wire between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} is visible.
+     *
+     * Wires are only shown if enabled and visible.
+     *
+     * @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._cpDirty = true;
+        this._needUpdate();
+    }
+
+    /**
+     * Gets if the Y-axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} are visible.
+     *
+     * Wires are only shown if enabled and visible.
+     *
+     * @type {Boolean}
+     */
+    get yAxisVisible() {
+        return this._yAxisVisible;
+    }
+
+    /**
+     * Sets if the Z-axis-aligned wire between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} is visible.
+     *
+     * Wires are only shown if enabled and visible.
+     *
+     * @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._cpDirty = true;
+        this._needUpdate();
+    }
+
+    /**
+     * Gets if the Z-axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} are visible.
+     *
+     * Wires are only shown if enabled and visible.
+     *
+     * @type {Boolean}
+     */
+    get zAxisVisible() {
+        return this._zAxisVisible;
+    }
+
     /**
      * Sets if the direct point-to-point wire between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target} is visible.
      *
@@ -81099,6 +81690,78 @@ class DistanceMeasurement extends Component {
         return this._wireVisible;
     }
 
+    /**
+     * Sets if the labels are visible.
+     *
+     * @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._yAxisLabel.setVisible(labelsVisible && !this._yAxisLabelCulled && this._clickable && this._axisEnabled);
+        this._zAxisLabel.setVisible(labelsVisible && !this._zAxisLabelCulled && this._clickable && this._axisEnabled);
+        this._lengthLabel.setVisible(labelsVisible);
+        this._cpDirty = true;
+        this._needUpdate();
+    }
+
+    /**
+     * Gets if the labels are visible.
+     *
+     * @type {Boolean}
+     */
+    get labelsVisible() {
+        return this._labelsVisible;
+    }
+
+    /**
+     * Sets if this DistanceMeasurement appears highlighted.
+     * @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);
+    }
+
+    /**
+     * Sets if the wires, dots ad labels will fire "mouseOver" "mouseLeave" and "contextMenu" events.
+     *
+     * @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);
+    }
+
+    /**
+     * Gets if the wires, dots ad labels will fire "mouseOver" "mouseLeave" and "contextMenu" events.
+     *
+     * @type {Boolean}
+     */
+    get clickable() {
+        return this._clickable;
+    }
+
     /**
      * @private
      */
@@ -87033,6 +87696,9 @@ class DistanceMeasurementsControl extends Component {
         this._currentDistanceMeasurementByMouseInittouchState = {
             wireVisible: null,
             axisVisible: null,
+            xAxisVisible: null,
+            yaxisVisible: null,
+            zAxisVisible: null,
             targetVisible: null,
         };
 
@@ -87120,6 +87786,9 @@ class DistanceMeasurementsControl extends Component {
             if (this._currentDistanceMeasurementByMouse) {
                 this._currentDistanceMeasurementByMouse.wireVisible = this._currentDistanceMeasurementByMouseInittouchState.wireVisible;
                 this._currentDistanceMeasurementByMouse.axisVisible = this._currentDistanceMeasurementByMouseInittouchState.axisVisible && this.plugin.defaultAxisVisible;
+                this._currentDistanceMeasurementByMouse.xAxisVisible = this._currentDistanceMeasurementByMouseInittouchState.xAxisVisible && this.plugin.defaultXAxisVisible;
+                this._currentDistanceMeasurementByMouse.yAxisVisible = this._currentDistanceMeasurementByMouseInittouchState.yAxisVisible && this.plugin.defaultYAxisVisible;
+                this._currentDistanceMeasurementByMouse.zAxisVisible = this._currentDistanceMeasurementByMouseInittouchState.zAxisVisible && this.plugin.defaultZAxisVisible;
                 this._currentDistanceMeasurementByMouse.targetVisible = this._currentDistanceMeasurementByMouseInittouchState.targetVisible;
                 this._currentDistanceMeasurementByMouse.target.entity = mouseHoverEntity;
                 this._currentDistanceMeasurementByMouse.target.worldPos = mouseWorldPos;
@@ -87151,7 +87820,7 @@ class DistanceMeasurementsControl extends Component {
                         }
                         this._currentDistanceMeasurementByMouse.approximate = false;
                     }
-
+                    this._currentDistanceMeasurementByMouse.clickable = true;
                     this.fire("measurementEnd", this._currentDistanceMeasurementByMouse);
                     this._currentDistanceMeasurementByMouse = null;
                 } else {
@@ -87184,8 +87853,14 @@ class DistanceMeasurementsControl extends Component {
                         approximate: true
                     });
                     this._currentDistanceMeasurementByMouseInittouchState.axisVisible = this._currentDistanceMeasurementByMouse.axisVisible && this.plugin.defaultAxisVisible;
+
+                    this._currentDistanceMeasurementByMouseInittouchState.xAxisVisible = this._currentDistanceMeasurementByMouse.xAxisVisible && this.plugin.defaultXAxisVisible;
+                    this._currentDistanceMeasurementByMouseInittouchState.yAxisVisible = this._currentDistanceMeasurementByMouse.yAxisVisible && this.plugin.defaultYAxisVisible;
+                    this._currentDistanceMeasurementByMouseInittouchState.zAxisVisible = this._currentDistanceMeasurementByMouse.zAxisVisible && this.plugin.defaultZAxisVisible;
+
                     this._currentDistanceMeasurementByMouseInittouchState.wireVisible = this._currentDistanceMeasurementByMouse.wireVisible;
                     this._currentDistanceMeasurementByMouseInittouchState.targetVisible = this._currentDistanceMeasurementByMouse.targetVisible;
+                    this._currentDistanceMeasurementByMouse.clickable = false;
                     this.fire("measurementStart", this._currentDistanceMeasurementByMouse);
                 }
             }
@@ -87245,7 +87920,7 @@ class DistanceMeasurementsControl extends Component {
                         case SECOND_TOUCH_EXPECTED:
                             startDot.setVisible(false);
                             this._touchStartMarker.worldPos = pickResult.worldPos;
-                            plugin.createMeasurement({
+                           const measurement = plugin.createMeasurement({
                                 id: math.createUUID(),
                                 origin: {
                                     entity: mouseHoverEntity,
@@ -87257,6 +87932,7 @@ class DistanceMeasurementsControl extends Component {
                                 },
                                 approximate: (!pickSurfacePrecisionEnabled)
                             });
+                            measurement.clickable = true;
                             touchState = FIRST_TOUCH_EXPECTED;
                             break;
                     }
@@ -87358,7 +88034,7 @@ const getCanvasPosFromEvent = function (event, canvasPos) {
  *
  * * [[Example 1: Model with distance measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_distance_modelWithMeasurements)]
  * * [[Example 2: Create distance measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_distance_createWithMouse)]
- * * [[Example 3: Configuring units and scale](https://xeokit.github.io/xeokit-sdk/examples/#measurements_distance_unitsAndScale)]
+ * * [[Example 3: Configuring units and scale](https://xeokit.github.io/xeokit-sdk/examples/#measurements_distance_unitsAndScale)
  *
  * ## Overview
  *
@@ -87481,6 +88157,78 @@ const getCanvasPosFromEvent = function (event, canvasPos) {
  * metrics.units = "meters";
  * metrics.scale = 10.0;
  * ````
+ *
+ * ## Example 4: Attaching Mouse Handlers
+ *
+ * In our fourth example, we'll attach even handlers to our plugin, to catch when the user
+ * hovers or right-clicks over our measurements.
+ *
+ * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_distance_modelWithMeasurements)]
+ *
+ * ````javascript
+ * import {Viewer, XKTLoaderPlugin, DistanceMeasurementsPlugin} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ *     transparent: true
+ * });
+ *
+ * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];
+ * viewer.scene.camera.look = [10.97, 5.82, -11.22];
+ * viewer.scene.camera.up = [0.36, 0.83, 0.40];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const distanceMeasurements = new DistanceMeasurementsPlugin(viewer);
+ *
+ * distanceMeasurements.on("mouseOver", (e) => {
+ *     e.measurement.setHighlighted(true);
+ * });
+ *
+ * distanceMeasurements.on("mouseLeave", (e) => {
+ *     e.measurement.setHighlighted(false);
+ * });
+ *
+ * distanceMeasurements.on("contextMenu", (e) => {
+ *     // Show context menu
+ *     e.event.preventDefault();
+ * });
+ *
+ * const model = xktLoader.load({
+ *      src: "./models/xkt/duplex/duplex.xkt"
+ * });
+ *
+ * model.on("loaded", () => {
+ *
+ *      const myMeasurement1 = distanceMeasurements.createMeasurement({
+ *          id: "distanceMeasurement1",
+ *          origin: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
+ *              worldPos: [0.044, 5.998, 17.767]
+ *          },
+ *          target: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
+ *              worldPos: [4.738, 3.172, 17.768]
+ *          },
+ *          visible: true,
+ *          wireVisible: true
+ *      });
+ *
+ *      const myMeasurement2 = distanceMeasurements.createMeasurement({
+ *          id: "distanceMeasurement2",
+ *          origin: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
+ *              worldPos: [0.457, 2.532, 17.766]
+ *          },
+ *          target: {
+ *              entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
+ *              worldPos: [0.436, 0.001, 22.135]
+ *          },
+ *          visible: true,
+ *          wireVisible: true
+ *      });
+ * });
+ * ````
  */
 class DistanceMeasurementsPlugin extends Plugin {
 
@@ -87495,10 +88243,14 @@ class DistanceMeasurementsPlugin extends Plugin {
      * @param {boolean} [cfg.defaultOriginVisible=true] The default value of the DistanceMeasurements `originVisible` property.
      * @param {boolean} [cfg.defaultTargetVisible=true] The default value of the DistanceMeasurements `targetVisible` property.
      * @param {boolean} [cfg.defaultWireVisible=true] The default value of the DistanceMeasurements `wireVisible` property.
+     * @param {boolean} [cfg.defaultLabelsVisible=true] The default value of the DistanceMeasurements `labelsVisible` property.
      * @param {boolean} [cfg.defaultAxisVisible=true] The default value of the DistanceMeasurements `axisVisible` property.
-     * @param {boolean} [cfg.defaultAxisEnabled=true] The default value of the DistanceMeasurements `axisVisible` property.
+     * @param {boolean} [cfg.defaultXAxisVisible=true] The default value of the DistanceMeasurements `xAxisVisible` property.
+     * @param {boolean} [cfg.defaultYAxisVisible=true] The default value of the DistanceMeasurements `yAxisVisible` property.
+     * @param {boolean} [cfg.defaultZAxisVisible=true] The default value of the DistanceMeasurements `zAxisVisible` property.
      * @param {string} [cfg.defaultColor=#00BBFF] The default color of the length dots, wire and label.
      * @param {number} [cfg.zIndex] If set, the wires, dots and labels will have this zIndex (+1 for dots and +2 for labels).
+     *
      */
     constructor(viewer, cfg = {}) {
 
@@ -87516,9 +88268,37 @@ class DistanceMeasurementsPlugin extends Plugin {
         this.defaultOriginVisible = cfg.defaultOriginVisible !== false;
         this.defaultTargetVisible = cfg.defaultTargetVisible !== false;
         this.defaultWireVisible = cfg.defaultWireVisible !== false;
+        this.defaultLabelsVisible = cfg.defaultLabelsVisible !== false;
         this.defaultAxisVisible = cfg.defaultAxisVisible !== false;
+        this.defaultXAxisVisible = cfg.defaultXAxisVisible !== false;
+        this.defaultYAxisVisible = cfg.defaultYAxisVisible !== false;
+        this.defaultZAxisVisible = cfg.defaultZAxisVisible !== false;
         this.defaultColor = cfg.defaultColor !== undefined ? cfg.defaultColor : "#00BBFF";
         this.zIndex = cfg.zIndex || 10000;
+
+        this._onMouseOver = (event, measurement) => {
+            this.fire("mouseOver", {
+                plugin: this,
+                measurement,
+                event
+            });
+        };
+
+        this._onMouseLeave = (event, measurement) => {
+            this.fire("mouseLeave", {
+                plugin: this,
+                measurement,
+                event
+            });
+        };
+
+        this._onContextMenu = (event, measurement) => {
+            this.fire("contextMenu", {
+                plugin: this,
+                measurement,
+                event
+            });
+        };
     }
 
     /**
@@ -87589,6 +88369,10 @@ class DistanceMeasurementsPlugin extends Plugin {
      * @param {Boolean} [params.targetVisible=true] Whether to initially show the {@link DistanceMeasurement} target.
      * @param {Boolean} [params.wireVisible=true] Whether to initially show the direct point-to-point wire between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target}.
      * @param {Boolean} [params.axisVisible=true] Whether to initially show the axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target}.
+     * @param {Boolean} [params.xAxisVisible=true] Whether to initially show the X-axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target}.
+     * @param {Boolean} [params.yAxisVisible=true] Whether to initially show the Y-axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target}.
+     * @param {Boolean} [params.zAxisVisible=true] Whether to initially show the Z-axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target}.
+     * @param {Boolean} [params.labelsVisible=true] Whether to initially show the labels.
      * @param {string} [params.color] The color of the length dot, wire and label.
      * @returns {DistanceMeasurement} The new {@link DistanceMeasurement}.
      */
@@ -87614,9 +88398,16 @@ class DistanceMeasurementsPlugin extends Plugin {
             visible: params.visible,
             wireVisible: params.wireVisible,
             axisVisible: params.axisVisible !== false && this.defaultAxisVisible !== false,
+            xAxisVisible: params.xAxisVisible !== false && this.defaultXAxisVisible !== false,
+            yAxisVisible: params.yAxisVisible !== false && this.defaultYAxisVisible !== false,
+            zAxisVisible: params.zAxisVisible !== false && this.defaultZAxisVisible !== false,
+            labelsVisible: params.labelsVisible !== false && this.defaultLabelsVisible !== false,
             originVisible: params.originVisible,
             targetVisible: params.targetVisible,
-            color: params.color
+            color: params.color,
+            onMouseOver: this._onMouseOver,
+            onMouseLeave: this._onMouseLeave,
+            onContextMenu: this._onContextMenu
         });
         this._measurements[measurement.id] = measurement;
         measurement.on("destroyed", () => {
@@ -87641,6 +88432,18 @@ class DistanceMeasurementsPlugin extends Plugin {
         this.fire("measurementDestroyed", measurement);
     }
 
+    /**
+     * Shows all or hides the angle label of each {@link DistanceMeasurement}.
+     *
+     * @param {Boolean} labelsShown Whether or not to show the labels.
+     */
+    setLabelsShown(labelsShown) {
+        for (const [key, measurement] of Object.entries(this.measurements)) {
+            measurement.labelShown = labelsShown;
+        }
+    }
+
+
     /**
      * Destroys all {@link DistanceMeasurement}s.
      */
@@ -102787,6 +103590,7 @@ class ModelTreeView {
                 numEntities: 0,
                 numVisibleEntities: 0,
                 checked: false,
+                xrayed: false,
                 children: []
             };
             this._rootNodes.push(buildingNode);
@@ -102805,6 +103609,7 @@ class ModelTreeView {
                 numEntities: 0,
                 numVisibleEntities: 0,
                 checked: false,
+                xrayed: false,
                 children: []
             };
             buildingNode.children.push(storeyNode);
@@ -102829,6 +103634,7 @@ class ModelTreeView {
                             numEntities: 0,
                             numVisibleEntities: 0,
                             checked: false,
+                            xrayed: false,
                             children: []
                         };
                         storeyNode.children.push(typeNode);
@@ -102844,6 +103650,7 @@ class ModelTreeView {
                         numEntities: 0,
                         numVisibleEntities: 0,
                         checked: false,
+                        xrayed: false,
                         children: []
                     };
                     typeNode.children.push(node);
@@ -102877,6 +103684,7 @@ class ModelTreeView {
                 numEntities: 0,
                 numVisibleEntities: 0,
                 checked: false,
+                xrayed: false,
                 children: []
             };
             this._rootNodes.push(rootNode);
@@ -102898,6 +103706,7 @@ class ModelTreeView {
                             numEntities: 0,
                             numVisibleEntities: 0,
                             checked: false,
+                            xrayed: false,
                             children: []
                         };
                         rootNode.children.push(typeNode);
@@ -102913,6 +103722,7 @@ class ModelTreeView {
                         numEntities: 0,
                         numVisibleEntities: 0,
                         checked: false,
+                        xrayed: false,
                         children: []
                     };
                     typeNode.children.push(node);
@@ -102945,6 +103755,7 @@ class ModelTreeView {
             numEntities: 0,
             numVisibleEntities: 0,
             checked: false,
+            xrayed: false,
             children: []
         };
         if (parent) {
@@ -163207,16 +164018,17 @@ class WebIFCLoaderPlugin extends Plugin {
                     ctx.stats.numPropertySets++;
                     const relatedObjects = rel.RelatedObjects;
                     if (!relatedObjects || relatedObjects.length === 0) {
-                        for (let i = 0, len = relatedObjects.length; i < len; i++) {
-                            const relatedObject = relatedObjects[i];
-                            const metaObjectId = relatedObject.GlobalId.value;
-                            const metaObject = ctx.metaObjects[metaObjectId];
-                            if (metaObject) {
-                                if (!metaObject.propertySetIds) {
-                                    metaObject.propertySetIds = [];
-                                }
-                                metaObject.propertySetIds.push(propertySetId);
+                        return;
+                    }
+                    for (let i = 0, len = relatedObjects.length; i < len; i++) {
+                        const relatedObject = relatedObjects[i];
+                        const metaObjectId = relatedObject.GlobalId.value;
+                        const metaObject = ctx.metaObjects[metaObjectId];
+                        if (metaObject) {
+                            if (!metaObject.propertySetIds) {
+                                metaObject.propertySetIds = [];
                             }
+                            metaObject.propertySetIds.push(propertySetId);
                         }
                     }
                 }
@@ -163623,7 +164435,7 @@ class LASLoaderPlugin extends Plugin {
      * @param {Number|String} value Valid values are 8, 16 and "auto".
      */
     set colorDepth(value) {
-        this._colorDepth = !!value;
+        this._colorDepth = value || "auto";
     }
 
     /**
@@ -163659,9 +164471,11 @@ class LASLoaderPlugin extends Plugin {
         }
 
         const options = {
-            skip: this._skip,
-            fp64: this._fp64,
-            colorDepth: this._colorDepth
+            las: {
+                skip: this._skip,
+                fp64: this._fp64,
+                colorDepth: this._colorDepth
+            }
         };
 
         if (params.src) {
@@ -163776,10 +164590,10 @@ class LASLoaderPlugin extends Plugin {
                         reject("No positions found in file");
                         return;
                     }
-                    
+
                     let positionsValue;
                     let colorsCompressed;
-                    
+
                     switch (pointsFormatId) {
                         case 0:
                             positionsValue = readPositions(attributes.POSITION);