@xeokit/xeokit-sdk 2.4.2-beta-31 → 2.4.2-beta-32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.4.2-beta-31",
+  "version": "2.4.2-beta-32",
   "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js

@@ -62,7 +62,25 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
 
         this._currentAngleMeasurement = null;
 
+        // init markerDiv element (think about making its style configurable)
+        this._initMarkerDiv()
+
+        this._onMouseHoverSurface = null;
+        this._onHoverNothing = null;
+        this._onPickedNothing = null;
+        this._onPickedSurface = null;
+
+        this._onInputMouseDown = null;
+        this._onInputMouseUp = null;
+
+        this._snapping = cfg.snapping !== false;
+
+        this._attachPlugin(angleMeasurementsPlugin, cfg);
+    }
+
+    _initMarkerDiv() {
         const markerDiv = document.createElement('div');
+        markerDiv.setAttribute('id', 'myMarkerDiv');
         const canvas = this.scene.canvas.canvas;
         canvas.parentNode.insertBefore(markerDiv, canvas);
 
@@ -77,17 +95,14 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
         markerDiv.style.pointerEvents = "none";
 
         this.markerDiv = markerDiv;
-        this._onMouseHoverSurface = null;
-        this._onHoverNothing = null;
-        this._onPickedNothing = null;
-        this._onPickedSurface = null;
-
-        this._onInputMouseDown = null;
-        this._onInputMouseUp = null;
-
-        this._snapping = cfg.snapping !== false;
+    }
 
-        this._attachPlugin(angleMeasurementsPlugin, cfg);
+    _destroyMarkerDiv() {
+        if (this._markerDiv) {
+            const element = document.getElementById('myMarkerDiv')
+            element.parentNode.removeChild(element)
+            this._markerDiv = null
+        }
     }
 
     _attachPlugin(angleMeasurementsPlugin, cfg = {}) {
@@ -155,6 +170,9 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
         if (this._active) {
             return;
         }
+        if (!this.markerDiv) {
+            this._initMarkerDiv() // if the marker is destroyed after deactivation, we recreate it
+        }
         const angleMeasurementsPlugin = this.angleMeasurementsPlugin;
         const scene = this.scene;
         const input = scene.input;
@@ -359,6 +377,9 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
         if (this.pointerLens) {
             this.pointerLens.visible = false;
         }
+        if (this._markerDiv) {
+            this._destroyMarkerDiv()
+        }
         this.reset();
         const canvas = this.scene.canvas.canvas;
         canvas.removeEventListener("mousedown", this._onMouseDown);
@@ -383,6 +404,10 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
         if (!this._active) {
             return;
         }
+
+        this._destroyMarkerDiv()
+        this._initMarkerDiv()
+
         if (this._currentAngleMeasurement) {
             this._currentAngleMeasurement.destroy();
             this._currentAngleMeasurement = null;

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsMouseControl.js

@@ -58,21 +58,6 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
 
         this._active = false;
 
-        const markerDiv = document.createElement('div');
-        const canvas = this.scene.canvas.canvas;
-        canvas.parentNode.insertBefore(markerDiv, canvas);
-        markerDiv.style.background = "black";
-        markerDiv.style.border = "2px solid blue";
-        markerDiv.style.borderRadius = "10px";
-        markerDiv.style.width = "5px";
-        markerDiv.style.height = "5px";
-        markerDiv.style.margin = "-200px -200px";
-        markerDiv.style.zIndex = "100";
-        markerDiv.style.position = "absolute";
-        markerDiv.style.pointerEvents = "none";
-
-        this._markerDiv = markerDiv;
-
         this._currentDistanceMeasurement = null;
 
         this._currentDistanceMeasurementInitState = {
@@ -84,6 +69,8 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
             targetVisible: null,
         }
 
+        this._initMarkerDiv()
+
         this._onCameraControlHoverSnapOrSurface = null;
         this._onCameraControlHoverSnapOrSurfaceOff = null;
         this._onMouseDown = null;
@@ -96,6 +83,32 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
         this._attachPlugin(distanceMeasurementsPlugin, cfg);
     }
 
+    _initMarkerDiv() {
+        const markerDiv = document.createElement('div');
+        markerDiv.setAttribute('id', 'myMarkerDiv');
+        const canvas = this.scene.canvas.canvas;
+        canvas.parentNode.insertBefore(markerDiv, canvas);
+        markerDiv.style.background = "black";
+        markerDiv.style.border = "2px solid blue";
+        markerDiv.style.borderRadius = "10px";
+        markerDiv.style.width = "5px";
+        markerDiv.style.height = "5px";
+        markerDiv.style.margin = "-200px -200px";
+        markerDiv.style.zIndex = "100";
+        markerDiv.style.position = "absolute";
+        markerDiv.style.pointerEvents = "none";
+
+        this._markerDiv = markerDiv;
+    }
+
+    _destroyMarkerDiv() {
+        if (this._markerDiv) {
+            const element = document.getElementById('myMarkerDiv')
+            element.parentNode.removeChild(element)
+            this._markerDiv = null
+        }
+    }
+
     _attachPlugin(distanceMeasurementsPlugin, cfg = {}) {
 
         /**
@@ -161,6 +174,10 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
             return;
         }
 
+        if (!this._markerDiv) {
+            this._initMarkerDiv()
+        }
+
         this.fire("activated", true);
 
         const distanceMeasurementsPlugin = this.distanceMeasurementsPlugin;
@@ -316,6 +333,9 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
         if (this.pointerLens) {
             this.pointerLens.visible = false;
         }
+        if (this._markerDiv) {
+            this._destroyMarkerDiv()
+        }
         this.reset();
         const canvas = this.scene.canvas.canvas;
         canvas.removeEventListener("mousedown", this._onMouseDown);
@@ -342,6 +362,10 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
         if (!this._active) {
             return;
         }
+
+        this._destroyMarkerDiv()
+        this._initMarkerDiv()
+
         if (this._currentDistanceMeasurement) {
             this.distanceMeasurementsPlugin.fire("measurementCancel", this._currentDistanceMeasurement);
             this._currentDistanceMeasurement.destroy();