[FEATURE] Editable measurements

examples/measurement/angle_createWithMouse_snapping.html

@@ -120,7 +120,7 @@ <h3>Assets</h3>
 </body>
 <script type="module">
 
-    import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin, ContextMenu, AngleMeasurementsMouseControl, PointerLens} from "../../dist/xeokit-sdk.min.es.js";
+    import {Viewer, XKTLoaderPlugin, ContextMenu, PointerLens, AngleMeasurementsPlugin, AngleMeasurementsMouseControl, AngleMeasurementEditMouseControl} from "../../dist/xeokit-sdk.min.es.js";
 
     const viewer = new Viewer({
         canvasId: "myCanvas",
@@ -153,6 +153,8 @@ <h3>Assets</h3>
     // Create a context menu to delete and configure measurements
     //------------------------------------------------------------------------------------------------------------------
 
+    let endMeasurementEdit = null;
+
     const angleMeasurementsContextMenu = new ContextMenu({
         items: [
 
@@ -164,7 +166,23 @@ <h3>Assets</h3>
                     doAction: function (context) {
                         context.angleMeasurement.labelsVisible = !context.angleMeasurement.labelsVisible;
                     }
-                }
+                },
+                {
+                    title: "Edit",
+                    doAction: function (context) {
+                        angleMeasurementsMouseControl.deactivate();
+                        const measurement = context.angleMeasurement;
+                        const edit = new AngleMeasurementEditMouseControl(measurement, {
+                            pointerLens: new PointerLens(viewer),
+                            snapping: true
+                        });
+                        edit.on("edited", () => console.log("edited", measurement.id));
+                        endMeasurementEdit = () => {
+                            edit.deactivate();
+                            endMeasurementEdit = null;
+                        };
+                    }
+                 }
             ], [
                 {
                     title: "Delete Measurement",
@@ -181,6 +199,17 @@ <h3>Assets</h3>
                     doAction: function () {
                         angleMeasurementsMouseControl.reset();
                     }
+                },
+                {
+                    getTitle: () => {
+                        return "End Editing";
+                    },
+                    getEnabled: function () {
+                        return !!endMeasurementEdit;
+                    },
+                    doAction: function () {
+                        endMeasurementEdit();
+                    }
                 }
             ]
 
@@ -231,17 +260,26 @@ <h3>Assets</h3>
     angleMeasurementsMouseControl.activate();
 
     angleMeasurementsPlugin.on("mouseOver", (e) => {
+        if (endMeasurementEdit) {
+            return;
+        }
         e.angleMeasurement.setHighlighted(true);
     });
 
     angleMeasurementsPlugin.on("mouseLeave", (e) => {
+        if (endMeasurementEdit) {
+            return;
+        }
         if (angleMeasurementsContextMenu.shown && angleMeasurementsContextMenu.context.angleMeasurement.id === e.angleMeasurement.id) {
             return;
         }
         e.angleMeasurement.setHighlighted(false);
     });
 
     angleMeasurementsPlugin.on("contextMenu", (e) => {
+        if (endMeasurementEdit) {
+            return;
+        }
         angleMeasurementsContextMenu.context = { // Must set context before showing menu
             viewer: viewer,
             angleMeasurementsPlugin: angleMeasurementsPlugin,
@@ -532,6 +570,17 @@ <h3>Assets</h3>
                                 doAction: function () {
                                     angleMeasurementsMouseControl.reset();
                                 }
+                            },
+                            {
+                                getTitle: () => {
+                                    return "End Editing";
+                                },
+                                getEnabled: function () {
+                                    return !!endMeasurementEdit;
+                                },
+                                doAction: function () {
+                                    endMeasurementEdit();
+                                }
                             }
                         ]
                     ]
@@ -738,6 +787,17 @@ <h3>Assets</h3>
                                 doAction: function () {
                                     angleMeasurementsMouseControl.reset();
                                 }
+                            },
+                            {
+                                getTitle: () => {
+                                    return "End Editing";
+                                },
+                                getEnabled: function () {
+                                    return !!endMeasurementEdit;
+                                },
+                                doAction: function () {
+                                    endMeasurementEdit();
+                                }
                             }
                         ]
                     ]

examples/measurement/distance_createWithMouse_snapping.html

@@ -134,7 +134,7 @@ <h3>Assets</h3>
     // Import the modules we need for this example
     //------------------------------------------------------------------------------------------------------------------
 
-    import {Viewer, XKTLoaderPlugin, ContextMenu, DistanceMeasurementsPlugin, DistanceMeasurementsMouseControl, PointerLens} from "../../dist/xeokit-sdk.es.js";
+    import {Viewer, XKTLoaderPlugin, ContextMenu, PointerLens, DistanceMeasurementsPlugin, DistanceMeasurementsMouseControl, DistanceMeasurementEditMouseControl} from "../../dist/xeokit-sdk.es.js";
 
     //------------------------------------------------------------------------------------------------------------------
     // Create a Viewer and arrange the camera
@@ -191,17 +191,6 @@ <h3>Assets</h3>
         console.log("target", distanceMeasurement.target.entity);
     });
 
-    distanceMeasurementsPlugin.on("mouseOver", (e) => {
-        e.distanceMeasurement.setHighlighted(true);
-    });
-
-    distanceMeasurementsPlugin.on("mouseLeave", (e) => {
-        if (distanceMeasurementsContextMenu.shown && distanceMeasurementsContextMenu.context.distanceMeasurement.id === e.distanceMeasurement.id) {
-            return;
-        }
-        e.distanceMeasurement.setHighlighted(false);
-    });
-
     const distanceMeasurementsMouseControl = new DistanceMeasurementsMouseControl(distanceMeasurementsPlugin, {
         pointerLens: new PointerLens(viewer),
         snapping: true // Default
@@ -215,6 +204,8 @@ <h3>Assets</h3>
     // Create a context menu to delete and configure measurements
     //------------------------------------------------------------------------------------------------------------------
 
+    let endMeasurementEdit = null;
+
     const distanceMeasurementsContextMenu = new ContextMenu({
         items: [
             [
@@ -271,6 +262,22 @@ <h3>Assets</h3>
                     doAction: function (context) {
                         context.distanceMeasurement.labelsVisible = !context.distanceMeasurement.labelsVisible;
                     }
+                },
+                {
+                    title: "Edit",
+                    doAction: function (context) {
+                        distanceMeasurementsMouseControl.deactivate();
+                        const measurement = context.distanceMeasurement;
+                        const edit = new DistanceMeasurementEditMouseControl(measurement, {
+                            pointerLens: new PointerLens(viewer),
+                            snapping: true
+                        });
+                        edit.on("edited", () => console.log("edited", measurement.id));
+                        endMeasurementEdit = () => {
+                            edit.deactivate();
+                            endMeasurementEdit = null;
+                        };
+                    }
                 }
             ], [
                 {
@@ -331,6 +338,17 @@ <h3>Assets</h3>
                     doAction: function () {
                         distanceMeasurementsMouseControl.reset();
                     }
+                },
+                {
+                    getTitle: () => {
+                        return "End Editing";
+                    },
+                    getEnabled: function () {
+                        return !!endMeasurementEdit;
+                    },
+                    doAction: function () {
+                        endMeasurementEdit();
+                    }
                 }
             ]
         ]
@@ -349,17 +367,26 @@ <h3>Assets</h3>
     //------------------------------------------------------------------------------------------------------------------
 
     distanceMeasurementsPlugin.on("mouseOver", (e) => {
+        if (endMeasurementEdit) {
+            return;
+        }
         e.distanceMeasurement.setHighlighted(true);
     });
 
     distanceMeasurementsPlugin.on("mouseLeave", (e) => {
+        if (endMeasurementEdit) {
+            return;
+        }
         if (distanceMeasurementsContextMenu.shown && distanceMeasurementsContextMenu.context.distanceMeasurement.id === e.distanceMeasurement.id) {
             return;
         }
         e.distanceMeasurement.setHighlighted(false);
     });
 
     distanceMeasurementsPlugin.on("contextMenu", (e) => {
+        if (endMeasurementEdit) {
+            return;
+        }
         distanceMeasurementsContextMenu.context = { // Must set context before showing menu
             viewer: viewer,
             distanceMeasurementsPlugin: distanceMeasurementsPlugin,

src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js

@@ -103,10 +103,10 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
     }
 
     _destroyMarkerDiv() {
-        if (this._markerDiv) {
+        if (this.markerDiv) {
             const element = document.getElementById('myMarkerDiv')
             element.parentNode.removeChild(element)
-            this._markerDiv = null
+            this.markerDiv = null
         }
     }
 

src/plugins/AngleMeasurementsPlugin/index.js

@@ -1,4 +1,62 @@
 export * from "./AngleMeasurementsPlugin.js";
 export * from "./AngleMeasurementsControl.js";
 export * from "./AngleMeasurementsMouseControl.js";
-export * from "./AngleMeasurementsTouchControl.js";
+export * from "./AngleMeasurementsTouchControl.js";
+
+import {Component} from "../../viewer/scene/Component.js";
+import {activateDraggableDots} from "../../../src/plugins/lib/ui/index.js";
+
+class AngleMeasurementEditControl extends Component {
+
+    /**
+     * Edits {@link AngleMeasurement} with mouse and/or touch input.
+     *
+     * @param {AngleMeasurement} [measurement] The AngleMeasurement to edit.
+     * @param [cfg] Configuration
+     * @param {PointerLens} [cfg.pointerLens] A PointerLens to use to provide a magnified view of the cursor.
+     * @param {boolean} [cfg.snapping] Whether to enable snap-to-vertex and snap-to-edge.
+     * @param {boolean} [handleMouseEvents] Whether to hangle mouse input.
+     * @param {boolean} [handleTouchEvents] Whether to hangle touch input.
+     */
+    constructor(measurement, cfg, handleMouseEvents, handleTouchEvents) {
+
+        const viewer = measurement.plugin.viewer;
+
+        super(viewer.scene);
+
+        const cleanup = activateDraggableDots({
+            viewer: viewer,
+            handleMouseEvents: handleMouseEvents,
+            handleTouchEvents: handleTouchEvents,
+            snapping: cfg.snapping,
+            pointerLens: cfg.pointerLens,
+            color: measurement.color,
+            markers: [ measurement.origin, measurement.corner, measurement.target ],
+            onEdit: () => this.fire("edited")
+        });
+
+        const destroyCb = measurement.on("destroyed", cleanup);
+
+        this._deactivate = function() {
+            measurement.off("destroyed", destroyCb);
+            cleanup();
+        };
+    }
+
+    deactivate() {
+        this._deactivate();
+        super.destroy();
+    }
+}
+
+export class AngleMeasurementEditMouseControl extends AngleMeasurementEditControl {
+    constructor(zone, cfg) {
+        super(zone, cfg, true, false);
+    }
+}
+
+export class AngleMeasurementEditTouchControl extends AngleMeasurementEditControl {
+    constructor(zone, cfg) {
+        super(zone, cfg, false, true);
+    }
+}

src/plugins/DistanceMeasurementsPlugin/index.js

@@ -1,4 +1,62 @@
 export * from "./DistanceMeasurementsPlugin.js";
 export * from "./DistanceMeasurementsControl.js";
 export * from "./DistanceMeasurementsMouseControl.js";
-export * from "./DistanceMeasurementsTouchControl.js";
+export * from "./DistanceMeasurementsTouchControl.js";
+
+import {Component} from "../../viewer/scene/Component.js";
+import {activateDraggableDots} from "../../../src/plugins/lib/ui/index.js";
+
+class DistanceMeasurementEditControl extends Component {
+
+    /**
+     * Edits {@link DistanceMeasurement} with mouse and/or touch input.
+     *
+     * @param {DistanceMeasurement} [measurement] The DistanceMeasurement to edit.
+     * @param [cfg] Configuration
+     * @param {PointerLens} [cfg.pointerLens] A PointerLens to use to provide a magnified view of the cursor.
+     * @param {boolean} [cfg.snapping] Whether to enable snap-to-vertex and snap-to-edge.
+     * @param {boolean} [handleMouseEvents] Whether to hangle mouse input.
+     * @param {boolean} [handleTouchEvents] Whether to hangle touch input.
+     */
+    constructor(measurement, cfg, handleMouseEvents, handleTouchEvents) {
+
+        const viewer = measurement.plugin.viewer;
+
+        super(viewer.scene);
+
+        const cleanup = activateDraggableDots({
+            viewer: viewer,
+            handleMouseEvents: handleMouseEvents,
+            handleTouchEvents: handleTouchEvents,
+            snapping: cfg.snapping,
+            pointerLens: cfg.pointerLens,
+            color: measurement.color,
+            markers: [ measurement.origin, measurement.target ],
+            onEdit: () => this.fire("edited")
+        });
+
+        const destroyCb = measurement.on("destroyed", cleanup);
+
+        this._deactivate = function() {
+            measurement.off("destroyed", destroyCb);
+            cleanup();
+        };
+    }
+
+    deactivate() {
+        this._deactivate();
+        super.destroy();
+    }
+}
+
+export class DistanceMeasurementEditMouseControl extends DistanceMeasurementEditControl {
+    constructor(zone, cfg) {
+        super(zone, cfg, true, false);
+    }
+}
+
+export class DistanceMeasurementEditTouchControl extends DistanceMeasurementEditControl {
+    constructor(zone, cfg) {
+        super(zone, cfg, false, true);
+    }
+}