@xeokit/xeokit-sdk 2.6.20 → 2.6.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.20",
+  "version": "2.6.23",
   "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

@@ -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
         }
     }
 

package/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);
+    }
+}

package/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);
+    }
+}

package/src/plugins/ZonesPlugin/index.js

@@ -7,19 +7,13 @@ import {PhongMaterial} from "../../viewer/scene/materials/PhongMaterial.js";
 import {math} from "../../viewer/scene/math/math.js";
 import {Mesh} from "../../viewer/scene/mesh/Mesh.js";
 import {Dot} from "../lib/html/Dot.js";
+import {createDraggableDot3D, transformToNode} from "../../../src/plugins/lib/ui/index.js";
 
 const hex2rgb = function(color) {
     const rgb = idx => parseInt(color.substr(idx + 1, 2), 16) / 255;
     return [ rgb(0), rgb(2), rgb(4) ];
 };
 
-const transformToNode = function(from, to, vec) {
-    const fromRec = from.getBoundingClientRect();
-    const toRec = to.getBoundingClientRect();
-    vec[0] += fromRec.left - toRec.left;
-    vec[1] += fromRec.top  - toRec.top;
-};
-
 const triangulateEarClipping = function(planeCoords) {
 
     const polygonVertices = [ ];
@@ -123,148 +117,6 @@ const triangulateEarClipping = function(planeCoords) {
     return [ planeCoords, baseTriangles ];
 };
 
-const draggableDot3D = function(handleMouseEvents, handleTouchEvents, viewer, worldPos, color, ray2WorldPos, onStart, onMove, onEnd) {
-    const scene = viewer.scene;
-    const canvas = scene.canvas.canvas;
-
-    const marker = new Marker(scene, {});
-
-    const pickWorldPos = canvasPos => {
-        const origin = math.vec3();
-        const direction = math.vec3();
-        math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
-        return ray2WorldPos(origin, direction);
-    };
-
-    const onChange = event => {
-        const canvasPos = math.vec2([ event.clientX, event.clientY ]);
-        transformToNode(canvas.ownerDocument.body, canvas, canvasPos);
-
-        const worldPos = pickWorldPos(canvasPos);
-        marker.worldPos = worldPos;
-        updateDotPos();
-        onMove(canvasPos, worldPos);
-    };
-
-    let currentDrag = null;
-
-    const onDragMove = function(event) {
-        const e = currentDrag.matchesEvent(event);
-        if (e)
-        {
-            onChange(e);
-        }
-    };
-
-    const onDragEnd = function(event) {
-        const e = currentDrag.matchesEvent(event);
-        if (e)
-        {
-            dot.setOpacity(idleOpacity);
-            currentDrag.cleanup();
-            onChange(e);
-            onEnd();
-        }
-    };
-
-    const startDrag = function(matchesEvent, cleanupHandlers) {
-        if (currentDrag) {
-            currentDrag.cleanup();
-        }
-
-        dot.setOpacity(1.0);
-        dot.setClickable(false);
-        viewer.cameraControl.active = false;
-
-        currentDrag = {
-            matchesEvent: matchesEvent,
-            cleanup: function() {
-                currentDrag = null;
-                dot.setClickable(true);
-                viewer.cameraControl.active = true;
-                cleanupHandlers();
-            }
-        };
-
-        onStart();
-    };
-
-    const dotCfg = { fillColor: color };
-
-    if (handleMouseEvents)
-    {
-        dotCfg.onMouseOver  = () => (! currentDrag) && dot.setOpacity(1.0);
-        dotCfg.onMouseLeave = () => (! currentDrag) && dot.setOpacity(idleOpacity);
-        dotCfg.onMouseDown  = event => {
-            if (event.which === 1)
-            {
-                canvas.addEventListener("mousemove", onDragMove);
-                canvas.addEventListener("mouseup",   onDragEnd);
-                startDrag(
-                    event => (event.which === 1) && event,
-                    () => {
-                        canvas.removeEventListener("mousemove", onDragMove);
-                        canvas.removeEventListener("mouseup",   onDragEnd);
-                    });
-            }
-        };
-    }
-
-    if (handleTouchEvents)
-    {
-        let touchStartId;
-        dotCfg.onTouchstart  = event => {
-            event.preventDefault();
-            if (event.touches.length === 1)
-            {
-                touchStartId = event.touches[0].identifier;
-                startDrag(
-                    event => [...event.changedTouches].find(e => e.identifier === touchStartId),
-                    () => { touchStartId = null; });
-            }
-        };
-        dotCfg.onTouchmove = event => {
-            event.preventDefault();
-            onDragMove(event);
-        };
-        dotCfg.onTouchend  = event => {
-            event.preventDefault();
-            onDragEnd(event);
-        };
-    }
-
-    const dotParent = canvas.ownerDocument.body;
-    const dot = new Dot(dotParent, dotCfg);
-
-    const idleOpacity = 0.5;
-    dot.setOpacity(idleOpacity);
-
-    const updateDotPos = function() {
-        const pos = marker.canvasPos.slice();
-        transformToNode(canvas, dotParent, pos);
-        dot.setPos(pos[0], pos[1]);
-    };
-
-    marker.worldPos = worldPos;
-    updateDotPos();
-
-    const onViewMatrix = scene.camera.on("viewMatrix", updateDotPos);
-    const onProjMatrix = scene.camera.on("projMatrix", updateDotPos);
-
-    return {
-        setActive: value => dot.setClickable(value),
-        getWorldPos: () => marker.worldPos,
-        setWorldPos: pos => { marker.worldPos = pos; updateDotPos(); },
-        destroy: function() {
-            currentDrag && currentDrag.cleanup();
-            scene.camera.off(onViewMatrix);
-            scene.camera.off(onProjMatrix);
-            marker.destroy();
-            dot.destroy();
-        }
-    };
-};
-
 const marker3D = function(scene, color) {
     const canvas = scene.canvas.canvas;
 
@@ -1790,23 +1642,23 @@ export class ZoneEditControl extends Component {
                 }
             };
 
-            const dot = draggableDot3D(
-                handleMouseEvents,
-                handleTouchEvents,
-                zone.plugin.viewer,
-                math.vec3([ planeCoord[0], altitude, planeCoord[1] ]),
-                zone._color,
-                (orig, dir) => planeIntersect(altitude, math.vec3([ 0, 1, 0 ]), orig, dir),
-                () => {
+            const dot = createDraggableDot3D({
+                handleMouseEvents: handleMouseEvents,
+                handleTouchEvents: handleTouchEvents,
+                viewer: zone.plugin.viewer,
+                worldPos: math.vec3([ planeCoord[0], altitude, planeCoord[1] ]),
+                color: zone._color,
+                ray2WorldPos: (orig, dir) => planeIntersect(altitude, math.vec3([ 0, 1, 0 ]), orig, dir),
+                onStart: () => {
                     initWorldPos = dot.getWorldPos().slice();
                     initPlaneCoord = planeCoord.slice();
                     set_other_dots_active(false, dot);
                 },
-                (canvasPos, worldPos) => {
+                onMove: (canvasPos, worldPos) => {
                     updatePointerLens(canvasPos);
                     setPlaneCoord([ worldPos[0], worldPos[2] ]);
                 },
-                () => {
+                onEnd: () => {
                     if (zone._zoneMesh)
                     {
                         self.fire("edited");
@@ -1818,7 +1670,8 @@ export class ZoneEditControl extends Component {
                     }
                     updatePointerLens(null);
                     set_other_dots_active(true, dot);
-                });
+                }
+            });
             return dot;
         });
         const set_other_dots_active = (active, dot) => dots.forEach(d => (d !== dot) && d.setActive(active));

package/src/plugins/lib/ui/index.js

@@ -0,0 +1,264 @@
+import {Dot} from "../html/Dot.js";
+import {math} from "../../../viewer/scene/math/math.js";
+import {Marker} from "../../../viewer/scene/marker/Marker.js";
+
+const nop = () => { };
+
+export function transformToNode(from, to, vec) {
+    const fromRec = from.getBoundingClientRect();
+    const toRec = to.getBoundingClientRect();
+    vec[0] += fromRec.left - toRec.left;
+    vec[1] += fromRec.top  - toRec.top;
+};
+
+export function createDraggableDot3D(cfg) {
+    const extractCFG = function(propName, defaultValue) {
+        if (propName in cfg) {
+            return cfg[propName];
+        } else if (defaultValue !== undefined) {
+            return defaultValue;
+        } else {
+            throw "config missing: " + propName;
+        }
+    };
+
+    const viewer = extractCFG("viewer");
+    const worldPos = extractCFG("worldPos");
+    const color = extractCFG("color");
+    const ray2WorldPos = extractCFG("ray2WorldPos");
+    const handleMouseEvents = extractCFG("handleMouseEvents", false);
+    const handleTouchEvents = extractCFG("handleTouchEvents", false);
+    const onStart = extractCFG("onStart", nop);
+    const onMove  = extractCFG("onMove",  nop);
+    const onEnd   = extractCFG("onEnd",   nop);
+
+    const scene = viewer.scene;
+    const canvas = scene.canvas.canvas;
+
+    const marker = new Marker(scene, {});
+
+    const pickWorldPos = canvasPos => {
+        const origin = math.vec3();
+        const direction = math.vec3();
+        math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
+        return ray2WorldPos(origin, direction, canvasPos);
+    };
+
+    const onChange = event => {
+        const canvasPos = math.vec2([ event.clientX, event.clientY ]);
+        transformToNode(canvas.ownerDocument.body, canvas, canvasPos);
+
+        const worldPos = pickWorldPos(canvasPos);
+        marker.worldPos = worldPos;
+        updateDotPos();
+        onMove(canvasPos, worldPos);
+    };
+
+    let currentDrag = null;
+
+    const onDragMove = function(event) {
+        const e = currentDrag.matchesEvent(event);
+        if (e)
+        {
+            onChange(e);
+        }
+    };
+
+    const onDragEnd = function(event) {
+        const e = currentDrag.matchesEvent(event);
+        if (e)
+        {
+            dot.setOpacity(idleOpacity);
+            currentDrag.cleanup();
+            onChange(e);
+            onEnd();
+        }
+    };
+
+    const startDrag = function(matchesEvent, cleanupHandlers) {
+        if (currentDrag) {
+            currentDrag.cleanup();
+        }
+
+        dot.setOpacity(1.0);
+        dot.setClickable(false);
+        viewer.cameraControl.active = false;
+
+        currentDrag = {
+            matchesEvent: matchesEvent,
+            cleanup: function() {
+                currentDrag = null;
+                dot.setClickable(true);
+                viewer.cameraControl.active = true;
+                cleanupHandlers();
+            }
+        };
+
+        onStart();
+    };
+
+    const dotCfg = { fillColor: color };
+
+    if (handleMouseEvents)
+    {
+        dotCfg.onMouseOver  = () => (! currentDrag) && dot.setOpacity(1.0);
+        dotCfg.onMouseLeave = () => (! currentDrag) && dot.setOpacity(idleOpacity);
+        dotCfg.onMouseDown  = event => {
+            if (event.which === 1)
+            {
+                canvas.addEventListener("mousemove", onDragMove);
+                canvas.addEventListener("mouseup",   onDragEnd);
+                startDrag(
+                    event => (event.which === 1) && event,
+                    () => {
+                        canvas.removeEventListener("mousemove", onDragMove);
+                        canvas.removeEventListener("mouseup",   onDragEnd);
+                    });
+            }
+        };
+    }
+
+    if (handleTouchEvents)
+    {
+        let touchStartId;
+        dotCfg.onTouchstart  = event => {
+            event.preventDefault();
+            if (event.touches.length === 1)
+            {
+                touchStartId = event.touches[0].identifier;
+                startDrag(
+                    event => [...event.changedTouches].find(e => e.identifier === touchStartId),
+                    () => { touchStartId = null; });
+            }
+        };
+        dotCfg.onTouchmove = event => {
+            event.preventDefault();
+            onDragMove(event);
+        };
+        dotCfg.onTouchend  = event => {
+            event.preventDefault();
+            onDragEnd(event);
+        };
+    }
+
+    const dotParent = canvas.ownerDocument.body;
+    const dot = new Dot(dotParent, dotCfg);
+
+    const idleOpacity = 0.5;
+    dot.setOpacity(idleOpacity);
+
+    const updateDotPos = function() {
+        const pos = marker.canvasPos.slice();
+        transformToNode(canvas, dotParent, pos);
+        dot.setPos(pos[0], pos[1]);
+    };
+
+    marker.worldPos = worldPos;
+    updateDotPos();
+
+    const onViewMatrix = scene.camera.on("viewMatrix", updateDotPos);
+    const onProjMatrix = scene.camera.on("projMatrix", updateDotPos);
+
+    return {
+        setActive: value => dot.setClickable(value),
+        getWorldPos: () => marker.worldPos,
+        setWorldPos: pos => { marker.worldPos = pos; updateDotPos(); },
+        destroy: function() {
+            currentDrag && currentDrag.cleanup();
+            scene.camera.off(onViewMatrix);
+            scene.camera.off(onProjMatrix);
+            marker.destroy();
+            dot.destroy();
+        }
+    };
+};
+
+export function activateDraggableDots(cfg) {
+    const extractCFG = function(propName, defaultValue) {
+        if (propName in cfg) {
+            return cfg[propName];
+        } else if (defaultValue !== undefined) {
+            return defaultValue;
+        } else {
+            throw "config missing: " + propName;
+        }
+    };
+
+    const viewer = extractCFG("viewer");
+    const handleMouseEvents = extractCFG("handleMouseEvents", false);
+    const handleTouchEvents = extractCFG("handleTouchEvents", false);
+    const snapping = extractCFG("snapping");
+    const pointerLens = extractCFG("pointerLens", null);
+    const color = extractCFG("color");
+    const markers = extractCFG("markers");
+    const onEdit = extractCFG("onEdit", nop);
+
+    const updatePointerLens = (pointerLens
+                               ? function(canvasPos) {
+                                   pointerLens.visible = !! canvasPos;
+                                   if (canvasPos)
+                                   {
+                                       pointerLens.canvasPos = canvasPos;
+                                   }
+                               }
+                               : () => { });
+
+    const dots = markers.map(marker => {
+        let initDotPos, initMarkerPos;
+        const setCoord = coord => marker.worldPos = coord;
+
+        const dot = createDraggableDot3D({
+            handleMouseEvents: handleMouseEvents,
+            handleTouchEvents: handleTouchEvents,
+            viewer: viewer,
+            worldPos: marker.worldPos,
+            color: color,
+            ray2WorldPos: (orig, dir, canvasPos) => {
+                const tryPickWorldPos = snap => {
+                    const pickResult = viewer.scene.pick({
+                        canvasPos: canvasPos,
+                        snapToEdge: snap,
+                        snapToVertex: snap,
+                        pickSurface: true  // <<------ This causes picking to find the intersection point on the entity
+                    });
+
+                    // If - when snapping - no pick found, then try w/o snapping
+                    return (pickResult && pickResult.worldPos) ? pickResult.worldPos : (snap && tryPickWorldPos(false));
+                };
+
+                return tryPickWorldPos(!!snapping) || initDotPos;
+            },
+            onStart: () => {
+                initDotPos = dot.getWorldPos().slice();
+                initMarkerPos = marker.worldPos.slice();
+                setOtherDotsActive(false, dot);
+            },
+            onMove: (canvasPos, worldPos) => {
+                updatePointerLens(canvasPos);
+                setCoord(worldPos);
+            },
+            onEnd: () => {
+                if (! math.compareVec3(initMarkerPos, marker.worldPos))
+                {
+                    onEdit();
+                }
+                else
+                {
+                    dot.setWorldPos(initDotPos);
+                    setCoord(initMarkerPos);
+                }
+                updatePointerLens(null);
+                setOtherDotsActive(true, dot);
+            }
+        });
+        return dot;
+    });
+
+    const setOtherDotsActive = (active, dot) => dots.forEach(d => (d !== dot) && d.setActive(active));
+    setOtherDotsActive(true);
+
+    return function() {
+        dots.forEach(m => m.destroy());
+        updatePointerLens(null);
+    };
+}