@xeokit/xeokit-sdk 2.6.23 → 2.6.26

package/src/plugins/ZonesPlugin/index.js

@@ -7,7 +7,7 @@ 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";
+import {activateDraggableDots, Dot3D, transformToNode} from "../../../src/plugins/lib/ui/index.js";
 
 const hex2rgb = function(color) {
     const rgb = idx => parseInt(color.substr(idx + 1, 2), 16) / 255;
@@ -1612,26 +1612,19 @@ export class ZonesPolysurfaceTouchControl extends Component {
 
 export class ZoneEditControl extends Component {
     constructor(zone, cfg, handleMouseEvents, handleTouchEvents) {
-        super(zone.plugin.viewer.scene);
-        const self = this;
+        const viewer = zone.plugin.viewer;
+        const scene = viewer.scene;
+        super(scene);
 
         const altitude = zone._geometry.altitude;
-        const pointerLens = cfg && cfg.pointerLens;
-        const updatePointerLens = (pointerLens
-                                   ? function(canvasPos) {
-                                       pointerLens.visible = !! canvasPos;
-                                       if (canvasPos)
-                                       {
-                                           pointerLens.canvasPos = canvasPos;
-                                       }
-                                   }
-                                   : () => { });
 
         const dots = zone._geometry.planeCoordinates.map(planeCoord => {
-            let initWorldPos, initPlaneCoord;
-            const setPlaneCoord = function(coord) {
-                planeCoord[0] = coord[0];
-                planeCoord[1] = coord[1];
+            const dotParent = scene.canvas.canvas.ownerDocument.body;
+            const dot = new Dot3D(scene, {}, dotParent, { fillColor: zone._color });
+            dot.worldPos = math.vec3([ planeCoord[0], altitude, planeCoord[1] ]);
+            dot.on("worldPos", function() {
+                planeCoord[0] = dot.worldPos[0];
+                planeCoord[1] = dot.worldPos[2];
                 try {
                     zone._rebuildMesh();
                 } catch (e) {
@@ -1640,46 +1633,29 @@ export class ZoneEditControl extends Component {
                         zone._zoneMesh = null;
                     }
                 }
-            };
-
-            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);
-                },
-                onMove: (canvasPos, worldPos) => {
-                    updatePointerLens(canvasPos);
-                    setPlaneCoord([ worldPos[0], worldPos[2] ]);
-                },
-                onEnd: () => {
-                    if (zone._zoneMesh)
-                    {
-                        self.fire("edited");
-                    }
-                    else
-                    {
-                        dot.setWorldPos(initWorldPos);
-                        setPlaneCoord(initPlaneCoord);
-                    }
-                    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));
-        set_other_dots_active(true);
+
+        const cleanupDrag = activateDraggableDots({
+            viewer: viewer,
+            handleMouseEvents: handleMouseEvents,
+            handleTouchEvents: handleTouchEvents,
+            pointerLens: cfg && cfg.pointerLens,
+            dots: dots,
+            ray2WorldPos: (orig, dir) => planeIntersect(altitude, math.vec3([ 0, 1, 0 ]), orig, dir),
+            onEnd: (initPos, dot) => {
+                if (zone._zoneMesh)
+                {
+                    this.fire("edited");
+                }
+                return !! zone._zoneMesh;
+            }
+        });
 
         const cleanup = function() {
-            dots.forEach(m => m.destroy());
-            updatePointerLens(null);
+            cleanupDrag();
+            dots.forEach(d => d.destroy());
         };
 
         const destroyCb = zone.on("destroyed", cleanup);

package/src/plugins/lib/html/Dot.js

@@ -97,6 +97,24 @@ class Dot {
             });
         }
 
+        if (cfg.onTouchstart) {
+            dotClickable.addEventListener('touchstart', (event) => {
+                cfg.onTouchstart(event, this);
+            });
+        }
+
+        if (cfg.onTouchmove) {
+            dotClickable.addEventListener('touchmove', (event) => {
+                cfg.onTouchmove(event, this);
+            });
+        }
+
+        if (cfg.onTouchend) {
+            dotClickable.addEventListener('touchend', (event) => {
+                cfg.onTouchend(event, this);
+            });
+        }
+
         if (cfg.onContextMenu) {
             if(os.isIphoneSafari()){
                 dotClickable.addEventListener('touchstart', (event) => {
@@ -136,24 +154,6 @@ class Dot {
             
         }
 
-        if (cfg.onTouchstart) {
-            dotClickable.addEventListener('touchstart', (event) => {
-                cfg.onTouchstart(event, this);
-            });
-        }
-
-        if (cfg.onTouchmove) {
-            dotClickable.addEventListener('touchmove', (event) => {
-                cfg.onTouchmove(event, this);
-            });
-        }
-
-        if (cfg.onTouchend) {
-            dotClickable.addEventListener('touchend', (event) => {
-                cfg.onTouchend(event, this);
-            });
-        }
-
         this.setPos(cfg.x || 0, cfg.y || 0);
         this.setFillColor(cfg.fillColor);
         this.setBorderColor(cfg.borderColor);

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

@@ -11,7 +11,82 @@ export function transformToNode(from, to, vec) {
     vec[1] += fromRec.top  - toRec.top;
 };
 
-export function createDraggableDot3D(cfg) {
+export class Dot3D extends Marker {
+    constructor(scene, markerCfg, parentElement, cfg = {}) {
+        super(scene, markerCfg);
+
+        const handler = (cfgEvent, componentEvent) => {
+            return event => {
+                if (cfgEvent) {
+                    cfgEvent(event);
+                }
+                this.fire(componentEvent, event, true);
+            };
+        };
+        this._dot = new Dot(parentElement, {
+            fillColor: cfg.fillColor,
+            zIndex: cfg.zIndex,
+            onMouseOver:   handler(cfg.onMouseOver,   "mouseover"),
+            onMouseLeave:  handler(cfg.onMouseLeave,  "mouseleave"),
+            onMouseWheel:  handler(cfg.onMouseWheel,  "wheel"),
+            onMouseDown:   handler(cfg.onMouseDown,   "mousedown"),
+            onMouseUp:     handler(cfg.onMouseUp,     "mouseup"),
+            onMouseMove:   handler(cfg.onMouseMove,   "mousemove"),
+            onTouchstart:  handler(cfg.onTouchstart,  "touchstart"),
+            onTouchmove:   handler(cfg.onTouchmove,   "touchmove"),
+            onTouchend:    handler(cfg.onTouchend,    "touchend"),
+            onContextMenu: handler(cfg.onContextMenu, "contextmenu")
+        });
+
+        const updateDotPos = () => {
+            const pos = this.canvasPos.slice();
+            transformToNode(scene.canvas.canvas, parentElement, pos);
+            this._dot.setPos(pos[0], pos[1]);
+        };
+
+        this.on("worldPos", updateDotPos);
+
+        const onViewMatrix = scene.camera.on("viewMatrix", updateDotPos);
+        const onProjMatrix = scene.camera.on("projMatrix", updateDotPos);
+        this._cleanup = () => {
+            scene.camera.off(onViewMatrix);
+            scene.camera.off(onProjMatrix);
+            this._dot.destroy();
+        };
+    }
+
+    setClickable(value) {
+        this._dot.setClickable(value);
+    }
+
+    setCulled(value) {
+        this._dot.setCulled(value);
+    }
+
+    setFillColor(value) {
+        this._dot.setFillColor(value);
+    }
+
+    setHighlighted(value) {
+        this._dot.setHighlighted(value);
+    }
+
+    setOpacity(value) {
+        this._dot.setOpacity(value);
+    }
+
+    setVisible(value) {
+        this._dot.setVisible(value);
+    }
+
+    destroy() {
+        this._cleanup();
+        super.destroy();
+    }
+
+}
+
+export function activateDraggableDot(dot, cfg) {
     const extractCFG = function(propName, defaultValue) {
         if (propName in cfg) {
             return cfg[propName];
@@ -23,8 +98,6 @@ export function createDraggableDot3D(cfg) {
     };
 
     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);
@@ -35,8 +108,6 @@ export function createDraggableDot3D(cfg) {
     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();
@@ -47,11 +118,7 @@ export function createDraggableDot3D(cfg) {
     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);
+        onMove(canvasPos, pickWorldPos(canvasPos));
     };
 
     let currentDrag = null;
@@ -97,13 +164,17 @@ export function createDraggableDot3D(cfg) {
         onStart();
     };
 
-    const dotCfg = { fillColor: color };
+    const cleanupDotHandlers = [ ];
+    const dot_on = function(event, callback) {
+        const id = dot.on(event, callback);
+        cleanupDotHandlers.push(() => dot.off(id));
+    };
 
     if (handleMouseEvents)
     {
-        dotCfg.onMouseOver  = () => (! currentDrag) && dot.setOpacity(1.0);
-        dotCfg.onMouseLeave = () => (! currentDrag) && dot.setOpacity(idleOpacity);
-        dotCfg.onMouseDown  = event => {
+        dot_on("mouseover",  () => (! currentDrag) && dot.setOpacity(1.0));
+        dot_on("mouseleave", () => (! currentDrag) && dot.setOpacity(idleOpacity));
+        dot_on("mousedown",  event => {
             if (event.which === 1)
             {
                 canvas.addEventListener("mousemove", onDragMove);
@@ -115,13 +186,13 @@ export function createDraggableDot3D(cfg) {
                         canvas.removeEventListener("mouseup",   onDragEnd);
                     });
             }
-        };
+        });
     }
 
     if (handleTouchEvents)
     {
         let touchStartId;
-        dotCfg.onTouchstart  = event => {
+        dot_on("touchstart", event => {
             event.preventDefault();
             if (event.touches.length === 1)
             {
@@ -130,46 +201,24 @@ export function createDraggableDot3D(cfg) {
                     event => [...event.changedTouches].find(e => e.identifier === touchStartId),
                     () => { touchStartId = null; });
             }
-        };
-        dotCfg.onTouchmove = event => {
+        });
+        dot_on("touchmove", event => {
             event.preventDefault();
             onDragMove(event);
-        };
-        dotCfg.onTouchend  = event => {
+        });
+        dot_on("touchend",  event => {
             event.preventDefault();
             onDragEnd(event);
-        };
+        });
     }
 
-    const dotParent = canvas.ownerDocument.body;
-    const dot = new Dot(dotParent, dotCfg);
-
-    const idleOpacity = 0.5;
+    const idleOpacity = 0.8;
     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();
-        }
+    return function() {
+        currentDrag && currentDrag.cleanup();
+        cleanupDotHandlers.forEach(c => c());
+        dot.setOpacity(1.0);
     };
 };
 
@@ -187,11 +236,10 @@ export function activateDraggableDots(cfg) {
     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 dots = extractCFG("dots");
+    const ray2WorldPos = extractCFG("ray2WorldPos");
+    const onEnd = extractCFG("onEnd", nop);
 
     const updatePointerLens = (pointerLens
                                ? function(canvasPos) {
@@ -203,62 +251,36 @@ export function activateDraggableDots(cfg) {
                                }
                                : () => { });
 
-    const dots = markers.map(marker => {
-        let initDotPos, initMarkerPos;
-        const setCoord = coord => marker.worldPos = coord;
-
-        const dot = createDraggableDot3D({
+    const cleanups = dots.map(dot => {
+        let initPos;
+        return activateDraggableDot(dot, {
             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;
-            },
+            ray2WorldPos: (orig, dir, canvasPos) => (ray2WorldPos(orig, dir, canvasPos) || initPos),
             onStart: () => {
-                initDotPos = dot.getWorldPos().slice();
-                initMarkerPos = marker.worldPos.slice();
+                initPos = dot.worldPos.slice();
                 setOtherDotsActive(false, dot);
             },
             onMove: (canvasPos, worldPos) => {
                 updatePointerLens(canvasPos);
-                setCoord(worldPos);
+                dot.worldPos = worldPos;
             },
             onEnd: () => {
-                if (! math.compareVec3(initMarkerPos, marker.worldPos))
-                {
-                    onEdit();
-                }
-                else
-                {
-                    dot.setWorldPos(initDotPos);
-                    setCoord(initMarkerPos);
+                if (! onEnd(initPos, dot)) {
+                    dot.worldPos = initPos;
                 }
                 updatePointerLens(null);
                 setOtherDotsActive(true, dot);
             }
         });
-        return dot;
     });
 
-    const setOtherDotsActive = (active, dot) => dots.forEach(d => (d !== dot) && d.setActive(active));
+    const setOtherDotsActive = (active, dot) => dots.forEach(d => (d !== dot) && d.setClickable(active));
     setOtherDotsActive(true);
 
     return function() {
-        dots.forEach(m => m.destroy());
+        cleanups.forEach(c => c());
         updatePointerLens(null);
     };
 }

package/src/viewer/scene/CameraControl/CameraControl.js

@@ -649,6 +649,8 @@ class CameraControl extends Component {
             snapToEdge: DEFAULT_SNAP_EDGE,
             snapRadius: DEFAULT_SNAP_PICK_RADIUS,
 
+            keyboardEnabledOnlyIfMouseover: true,
+
             // Rotation
 
             dragRotationRate: 360.0,
@@ -959,6 +961,24 @@ class CameraControl extends Component {
     get snapRadius() {
         return this._configs.snapRadius;
     }
+
+    /**
+     * If `true`, the keyboard shortcuts are enabled ONLY if the mouse is over the canvas.
+     * 
+     * @param {boolean} value
+     */
+    set keyboardEnabledOnlyIfMouseover(value) {
+        this._configs.keyboardEnabledOnlyIfMouseover = !!value;
+    }
+
+    /**
+     * Gets whether the keyboard shortcuts are enabled ONLY if the mouse is over the canvas or ALWAYS.
+     * 
+     * @returns {boolean}
+     */
+    get keyboardEnabledOnlyIfMouseover() {
+        return this._configs.keyboardEnabledOnlyIfMouseover;
+    }
     
     /**
      * Sets the current navigation mode.

package/src/viewer/scene/CameraControl/lib/handlers/KeyboardAxisViewHandler.js

@@ -29,7 +29,7 @@ class KeyboardAxisViewHandler {
                 return;
             }
 
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
                 return;
             }
 

package/src/viewer/scene/CameraControl/lib/handlers/KeyboardPanRotateDollyHandler.js

@@ -22,7 +22,7 @@ class KeyboardPanRotateDollyHandler {
             if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
                 return;
             }
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
                 return;
             }
             keyDownMap[keyCode] = true;
@@ -53,7 +53,7 @@ class KeyboardPanRotateDollyHandler {
                 return;
             }
 
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover &&  !states.mouseover) {
                 return;
             }
 

package/src/viewer/scene/geometry/builders/index.js

@@ -6,4 +6,5 @@ export * from "./buildPlaneGeometry.js";
 export * from "./buildSphereGeometry.js";
 export * from "./buildTorusGeometry.js";
 export * from "./buildVectorTextGeometry.js";
-export * from "./buildPolylineGeometry.js";
+export * from "./buildPolylineGeometry.js";
+export * from "./buildLineGeometry.js";

package/src/viewer/scene/marker/Marker.js

@@ -196,11 +196,17 @@ class Marker extends Component {
                 return;
             }
             if (this._onEntityDestroyed !== null) {
-                this._entity.model.off(this._onEntityDestroyed);
+                if (this._entity.model) {
+                    this._entity.model.off(this._onEntityDestroyed);
+                } else {
+                    this._entity.off(this._onEntityDestroyed);
+                }
                 this._onEntityDestroyed = null;
             }
             if (this._onEntityModelDestroyed !== null) {
-                this._entity.model.off(this._onEntityModelDestroyed);
+                if (this._entity.model) {
+                    this._entity.model.off(this._onEntityModelDestroyed);
+                }
                 this._onEntityModelDestroyed = null;
             }
         }
@@ -212,7 +218,7 @@ class Marker extends Component {
                     this._onEntityModelDestroyed = null;
                 });
             } else {
-                this._onEntityDestroyed = this._entity.model.on("destroyed", () => {
+                this._onEntityDestroyed = this._entity.on("destroyed", () => {
                     this._entity = null;
                     this._onEntityDestroyed = null;
                 });

package/src/viewer/scene/scene/Scene.js

@@ -2099,10 +2099,10 @@ class Scene extends Component {
      */
     get center() {
         if (this._aabbDirty || !this._center) {
-            if (!this._center || !this._center) {
+            const aabb = this.aabb;
+            if (!this._center) {
                 this._center = math.vec3();
             }
-            const aabb = this.aabb;
             this._center[0] = (aabb[0] + aabb[3]) / 2;
             this._center[1] = (aabb[1] + aabb[4]) / 2;
             this._center[2] = (aabb[2] + aabb[5]) / 2;
@@ -2177,6 +2177,7 @@ class Scene extends Component {
             this._aabb[4] = ymax;
             this._aabb[5] = zmax;
             this._aabbDirty = false;
+            this._center = null;
         }
         return this._aabb;
     }
@@ -2832,4 +2833,4 @@ class Scene extends Component {
     }
 }
 
-export {Scene};
+export {Scene};

package/types/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.d.ts

@@ -17,6 +17,58 @@ export declare type AngleMeasurementsPluginConfiguration = {
   zIndex?: number;
 };
 
+/**
+ * Event fire by {@link AngleMeasurementsPlugin} when mouse enters over an {@link AngleMeasurement}.
+ */
+export declare type AngleMeasurementMouseOverEvent = {
+
+    /**
+     * The plugin.
+     */
+    plugin: AngleMeasurementsPlugin;
+
+    /**
+     * The measurement.
+     */
+    angleMeasurement: AngleMeasurement;
+
+    /**
+     * The measurement.
+     */
+    measurement: AngleMeasurement;
+
+    /**
+     * The original mouse event.
+     */
+    event: MouseEvent;
+}
+
+/**
+ * Event fire by {@link AngleMeasurementsPlugin} when mouse leaves an {@link AngleMeasurement}.
+ */
+export declare type AngleMeasurementMouseLeaveEvent = {
+
+    /**
+     * The plugin.
+     */
+    plugin: AngleMeasurementsPlugin;
+
+    /**
+     * The measurement.
+     */
+    angleMeasurement: AngleMeasurement;
+
+    /**
+     * The measurement.
+     */
+    measurement: AngleMeasurement;
+
+    /**
+     * The original mouse event.
+     */
+    event: MouseEvent;
+}
+
 /**
  * {@link Viewer} plugin for measuring angles.
  */
@@ -87,7 +139,35 @@ export declare class AngleMeasurementsPlugin extends Plugin {
    */
   clear(): void;
 
-  /**
+    /**
+     * Fires when mouse is over a measurement.
+     * @param {String} event The mouseOver event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "mouseOver", callback: (event: AngleMeasurementMouseOverEvent)=> void): string;
+
+    /**
+     * Fires when mouse leaves a measurement.
+     * @param {String} event The mouseLeave event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "mouseLeave", callback: (event: AngleMeasurementMouseLeaveEvent)=> void): string;
+
+    /**
+     * Fires when a context menu is to be opened on a measurement.
+     * @param {String} event The contextMenu event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "contextMenu", callback: (measurement: AngleMeasurement)=> void): string;
+    
+    /**
+     * Fires when a measurement is completed.
+     * @param {String} event The measurementEnd event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "measurementStart", callback: (measurement: AngleMeasurement)=> void): string;
+    
+    /**
    * Fires when a measurement is created.
    * @param {String} event The measurementCreated event
    * @param {Function} callback Callback fired on the event