@xeokit/xeokit-sdk 2.6.77-slim-rc4 → 2.6.77

package/src/plugins/{SectionPlanesPlugin/Control.js → TransformControl/TransformControl.js}

@@ -16,35 +16,18 @@ const zeroVec = new Float64Array([0, 0, 1]);
 const quat = new Float64Array(4);
 
 /**
- * Controls a {@link SectionPlane} with mouse and touch input.
+ * Controls a transformation with mouse and touch input.
  *
  * @private
  */
-class Control {
+class TransformControl {
 
     /** @private */
-    constructor(plugin) {
-
-        /**
-         * ID of this Control.
-         *
-         * SectionPlaneControls are mapped by this ID in {@link SectionPlanesPlugin#sectionPlaneControls}.
-         *
-         * @property id
-         * @type {String|Number}
-         */
-        this.id = null;
-
-        const viewer = plugin.viewer;
-        const camera = viewer.camera;
+    constructor(viewer) {
         const cameraControl = viewer.cameraControl;
         const scene = viewer.scene;
         const canvas = scene.canvas.canvas;
 
-        this._visible = false;
-
-        let ignoreNextSectionPlaneDirUpdate = false;
-
         // Builds the Entities that represent this Control.
         const NO_STATE_INHERIT = false;
         const arrowLength = 1.0;
@@ -58,7 +41,7 @@ class Control {
         });
 
         const pos = math.vec3();
-        const setPos = (function() {
+        this._setPosition = (function() {
             const origin = math.vec3();
             const rtcPos = math.vec3();
             return function(p) {
@@ -69,6 +52,8 @@ class Control {
             };
         })();
 
+        this._setQuaternion = q => { rootNode.quaternion = q; };
+
         const arrowGeometry = (radiusBottom, height) => new ReadableGeometry(rootNode, buildCylinderGeometry({
             radiusTop: 0.001,
             radiusBottom: radiusBottom,
@@ -156,6 +141,7 @@ class Control {
                 clippable: false,
                 backfaces: true,
                 visible: false,
+                isUI: true,
                 isObject: false
             }), NO_STATE_INHERIT);
 
@@ -168,6 +154,7 @@ class Control {
                 clippable: false,
                 backfaces: true,
                 visible: false,
+                isUI: true,
                 isObject: false
             }), NO_STATE_INHERIT);
 
@@ -179,6 +166,7 @@ class Control {
                 collidable: true,
                 clippable: false,
                 visible: false,
+                isUI: true,
                 isObject: false
             }), NO_STATE_INHERIT);
 
@@ -190,6 +178,7 @@ class Control {
                 collidable: true,
                 clippable: false,
                 visible: false,
+                isUI: true,
                 isObject: false
             }), NO_STATE_INHERIT);
 
@@ -203,6 +192,7 @@ class Control {
                 collidable: true,
                 clippable: false,
                 visible: false,
+                isUI: true,
                 isObject: false
             }), NO_STATE_INHERIT);
 
@@ -222,6 +212,7 @@ class Control {
                 collidable: true,
                 clippable: false,
                 visible: false,
+                isUI: true,
                 isObject: false
             }), NO_STATE_INHERIT);
 
@@ -233,6 +224,7 @@ class Control {
                 collidable: true,
                 clippable: false,
                 visible: false,
+                isUI: true,
                 isObject: false
             }), NO_STATE_INHERIT);
 
@@ -244,6 +236,7 @@ class Control {
                 collidable: true,
                 clippable: false,
                 visible: false,
+                isUI: true,
                 isObject: false
             }), NO_STATE_INHERIT);
 
@@ -255,6 +248,7 @@ class Control {
                 collidable: true,
                 clippable: false,
                 visible: false,
+                isUI: true,
                 isObject: false
             }), NO_STATE_INHERIT);
 
@@ -266,6 +260,7 @@ class Control {
                 collidable: true,
                 clippable: false,
                 visible: false,
+                isUI: true,
                 isObject: false
             }), NO_STATE_INHERIT);
 
@@ -306,9 +301,9 @@ class Control {
                     return closestPointOnAxis(initCanvasPos, initOffset) && math.subVec3(initOffset, pos, initOffset) && ((canvasPos) => {
                         if (closestPointOnAxis(canvasPos, tempVec3)) {
                             math.subVec3(tempVec3, initOffset, tempVec3);
-                            setPos(tempVec3);
-                            if (this._sectionPlane) {
-                                this._sectionPlane.pos = tempVec3;
+                            this._setPosition(tempVec3);
+                            if (this._handlers) {
+                                this._handlers.onPosition(tempVec3);
                             }
                         }
                     });
@@ -319,9 +314,9 @@ class Control {
                 setActivated: a => hoop.visible = a,
                 initDragAction: (initCanvasPos) => {
                     const rotationFromCanvasPos = (function() {
-                        const planeCanvasPos = camera.projectWorldPos(pos);
+                        const planeCanvasPos = scene.camera.projectWorldPos(pos);
                         localToWorldVec(rgb, tempVec3);
-                        math.transformVec3(camera.normalMatrix, tempVec3, tempVec3);
+                        math.transformVec3(scene.camera.normalMatrix, tempVec3, tempVec3);
                         const axisCoeff = Math.sign(tempVec3[2]);
                         return (canvasPos) => {
                             const dx = canvasPos[0] - planeCanvasPos[0];
@@ -335,101 +330,46 @@ class Control {
                     return canvasPos => {
                         const rotation = rotationFromCanvasPos(canvasPos);
                         rootNode.rotate(rgb, (rotation - lastRotation) * 180 / Math.PI);
-                        if (this._sectionPlane) {
-                            ignoreNextSectionPlaneDirUpdate = true;
-                            this._sectionPlane.quaternion = rootNode.quaternion;
+                        if (this._handlers) {
+                            this._handlers.onQuaternion(rootNode.quaternion);
                         }
                         lastRotation = rotation;
                     };
                 }
             };
 
+            let positionActive = false;
+            let rotationActive = false;
+            let visible = false;
+
+            const updatePositionHandle = () => {
+                const v = visible && positionActive;
+                arrowHandle.visible = shaftHandle.visible = arrow.visible = shaft.visible = !!v;
+                if (! v) {
+                    bigArrowHead.visible = false;
+                }
+            };
+            const updateRotationHandle = () => {
+                const v = visible && rotationActive;
+                rotateHandle.visible = curve.visible = arrow1.visible = arrow2.visible = !!v;
+                if (! v) {
+                    hoop.visible = false;
+                }
+            };
+
             return {
+                setPositionActive: (a) => { positionActive = a; updatePositionHandle(); },
+                setRotationActive: (a) => { rotationActive = a; updateRotationHandle(); },
                 set visible(v) {
-                    arrow.visible = arrowHandle.visible = shaft.visible = shaftHandle.visible = curve.visible = rotateHandle.visible = arrow1.visible = arrow2.visible = v;
-                    if (! v) {
-                        bigArrowHead.visible = v;
-                        hoop.visible = v;
-                    }
-                },
-                set culled(c) {
-                    arrow.culled = arrowHandle.culled = shaft.culled = shaftHandle.culled = curve.culled = rotateHandle.culled = arrow1.culled = arrow2.culled = c;
-                    if (! c) {
-                        bigArrowHead.culled = c;
-                        hoop.culled = c;
-                    }
+                    visible = v;
+                    updatePositionHandle();
+                    updateRotationHandle();
                 }
             };
         };
 
-        this._displayMeshes = [ // Meshes that are always visible
-            rootNode.addChild(new Mesh(rootNode, { // plane
-                geometry: new ReadableGeometry(rootNode, {
-                    primitive: "triangles",
-                    positions: [
-                        0.5, 0.5, 0.0, 0.5, -0.5, 0.0, // 0
-                        -0.5, -0.5, 0.0, -0.5, 0.5, 0.0, // 1
-                        0.5, 0.5, -0.0, 0.5, -0.5, -0.0, // 2
-                        -0.5, -0.5, -0.0, -0.5, 0.5, -0.0 // 3
-                    ],
-                    indices: [0, 1, 2, 2, 3, 0]
-                }),
-                material: new PhongMaterial(rootNode, {
-                    emissive: [0, 0.0, 0],
-                    diffuse: [0, 0, 0],
-                    backfaces: true
-                }),
-                opacity: 0.6,
-                ghosted: true,
-                ghostMaterial: new EmphasisMaterial(rootNode, {
-                    edges: false,
-                    filled: true,
-                    fillColor: [1, 1, 0],
-                    edgeColor: [0, 0, 0],
-                    fillAlpha: 0.1,
-                    backfaces: true
-                }),
-                pickable: false,
-                collidable: true,
-                clippable: false,
-                visible: false,
-                scale: [2.4, 2.4, 1],
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            rootNode.addChild(new Mesh(rootNode, { // Visible frame
-                geometry: new ReadableGeometry(rootNode, buildTorusGeometry({
-                    center: [0, 0, 0],
-                    radius: 1.7,
-                    tube: tubeRadius * 2,
-                    radialSegments: 4,
-                    tubeSegments: 4,
-                    arc: Math.PI * 2.0
-                })),
-                material: new PhongMaterial(rootNode, {
-                    emissive: [0, 0, 0],
-                    diffuse: [0, 0, 0],
-                    specular: [0, 0, 0],
-                    shininess: 0
-                }),
-                //highlighted: true,
-                highlightMaterial: new EmphasisMaterial(rootNode, {
-                    edges: false,
-                    edgeColor: [0.0, 0.0, 0.0],
-                    filled: true,
-                    fillColor: [0.8, 0.8, 0.8],
-                    fillAlpha: 1.0
-                }),
-                pickable: false,
-                collidable: false,
-                clippable: false,
-                visible: false,
-                scale: [1, 1, .1],
-                rotation: [0, 0, 45],
-                isObject: false
-            }), NO_STATE_INHERIT),
-
-            rootNode.addChild(new Mesh(rootNode, { // center
+        this._displayMeshes = {
+            center: rootNode.addChild(new Mesh(rootNode, { // center
                 geometry: new ReadableGeometry(rootNode, buildSphereGeometry({
                     radius: 0.05
                 })),
@@ -447,21 +387,25 @@ class Control {
                 isObject: false
             }), NO_STATE_INHERIT),
 
-            //----------------------------------------------------------------------------------------------------------
-            //
-            //----------------------------------------------------------------------------------------------------------
-
-            addAxis([1,0,0], math.vec3PairToQuaternion([1,0,0], [0,0,1])),
-            addAxis([0,1,0], math.eulerToQuaternion([90,0,0], "XYZ")),
-            addAxis([0,0,1], math.identityQuaternion())
-        ];
+            x: addAxis([1,0,0], math.vec3PairToQuaternion([1,0,0], [0,0,1])),
+            y: addAxis([0,1,0], math.eulerToQuaternion([90,0,0], "XYZ")),
+            z: addAxis([0,0,1], math.identityQuaternion())
+        };
 
         const cleanups = [ ];
 
         { // Keep gizmo screen size constant
             let lastDist = -1;
-            const setRootNodeScale = size => { if (size !== rootNode.scale[0]) { rootNode.scale = [size, size, size]; } };
+            const setRootNodeScale = size => {
+                if (rootNode.scale[0] !== size) {
+                    rootNode.scale = [size, size, size];
+                    if (this._handlers && this._handlers.onScreenScale) {
+                        this._handlers.onScreenScale(rootNode.scale);
+                    }
+                }
+            };
             const onSceneTick = scene.on("tick", () => {
+                const camera = scene.camera;
                 const dist = Math.abs(math.distVec3(camera.eye, pos));
                 if (camera.projection === "perspective") {
                     if (dist !== lastDist) {
@@ -487,9 +431,11 @@ class Control {
                 transformToNode(canvas.ownerDocument.documentElement, canvas, vec2);
             };
 
+            const pickIds = Object.keys(handlers);
             const pickHandler = (e) => {
                 copyCanvasPos(e, canvasPos);
-                const pickResult = viewer.scene.pick({ canvasPos: canvasPos });
+                // This doesn't guarantee the gizmo is prioritized (as it should be) by other Scene::pick calls
+                const pickResult = scene.pick({ canvasPos: canvasPos });//, includeEntities: pickIds });
                 const pickEntity = pickResult && pickResult.entity;
                 const pickId = pickEntity && pickEntity.id;
                 return (pickId in handlers) && handlers[pickId];
@@ -522,6 +468,9 @@ class Control {
                             }
                         };
                     }
+                    return !!dragAction;
+                } else {
+                    return false;
                 }
             };
 
@@ -530,16 +479,22 @@ class Control {
                 cleanups.push(() => canvas.removeEventListener(type, listener));
             };
 
-            addCanvasEventListener("mousedown", (e) => {
+            const preventDefaultStopPropagation = e => {
                 e.preventDefault();
-                if (e.which === 1) {
-                    startDrag(e, event => (event.which === 1) && event);
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+            };
+
+            addCanvasEventListener("mousedown", (e) => {
+                if ((e.which === 1) && startDrag(e, event => (event.which === 1) && event)) {
+                    preventDefaultStopPropagation(e);
                 }
             });
 
             addCanvasEventListener("mousemove", (e) => {
                 if (currentDrag) {
                     currentDrag.onChange(e);
+                    preventDefaultStopPropagation(e);
                 } else {
                     if (deactivateActive) {
                         deactivateActive();
@@ -558,6 +513,9 @@ class Control {
                 if (currentDrag) {
                     currentDrag.onChange(e);
                     currentDrag.cleanup();
+                    // Calling preventDefaultStopPropagation would interfere with cameraControl
+                    // by making it follow the pointer until next click
+                    // preventDefaultStopPropagation(e);
                 }
             });
 
@@ -567,116 +525,75 @@ class Control {
                 if (event.touches.length === 1)
                 {
                     const touchStartId = event.touches[0].identifier;
-                    startDrag(event, event => [...event.changedTouches].find(e => e.identifier === touchStartId));
+                    if (startDrag(event, event => [...event.changedTouches].find(e => e.identifier === touchStartId))) {
+                        preventDefaultStopPropagation(event);
+                    }
                 }
             });
 
             addCanvasEventListener("touchmove", event => {
-                event.preventDefault();
-                currentDrag && currentDrag.onChange(event);
+                if (currentDrag) {
+                    currentDrag.onChange(event);
+                    preventDefaultStopPropagation(event);
+                }
             });
 
             addCanvasEventListener("touchend",  event => {
-                event.preventDefault();
                 if (currentDrag) {
                     currentDrag.onChange(event);
                     currentDrag.cleanup();
+                    // See the comment in mouseup listener
+                    // preventDefaultStopPropagation(e);
                 }
             });
         }
 
-        this._unbindSectionPlane = () => { };
-
-        this.__setSectionPlane = sectionPlane => {
-            this.id = sectionPlane.id;
-            this._sectionPlane = sectionPlane;
-            const setPosFromSectionPlane = () => setPos(sectionPlane.pos);
-            const setDirFromSectionPlane = () => rootNode.quaternion = sectionPlane.quaternion;
-            setPosFromSectionPlane();
-            setDirFromSectionPlane();
-            const onSectionPlanePos = sectionPlane.on("pos", setPosFromSectionPlane);
-            const onSectionPlaneDir = sectionPlane.on("dir", () => {
-                if (!ignoreNextSectionPlaneDirUpdate) {
-                    setDirFromSectionPlane();
-                } else {
-                    ignoreNextSectionPlaneDirUpdate = false;
-                }
-            });
-
-            this._unbindSectionPlane = () => {
-                this.id = null;
-                this._sectionPlane = null;
-                sectionPlane.off(onSectionPlanePos);
-                sectionPlane.off(onSectionPlaneDir);
-                this._unbindSectionPlane = () => { };
-            };
-        };
-
         this.__destroy = () => {
             cleanups.forEach(c => c());
-            this._unbindSectionPlane();
             rootNode.destroy();
-            this._displayMeshes = [ ];
             for (let id in handlers) {
                 delete handlers[id];
             }
         };
     }
 
-    _destroy() {
+    destroy() {
         this.__destroy();
     }
 
     /**
-     * Called by SectionPlanesPlugin to assign this Control to a SectionPlane.
-     * SectionPlanesPlugin keeps SectionPlaneControls in a reuse pool.
-     * Call with a null or undefined value to disconnect the Control ffrom whatever SectionPlane it was assigned to.
+     * Called to assign this Control to Handlers.
+     * Call with a null or undefined value to disconnect the Control from whatever Handlers it was assigned to.
      * @private
      */
-    _setSectionPlane(sectionPlane) {
-        this._unbindSectionPlane();
-        if (sectionPlane) {
-            this.__setSectionPlane(sectionPlane);
-        }
-    }
-
-    /**
-     * Gets the {@link SectionPlane} controlled by this Control.
-     * @returns {SectionPlane} The SectionPlane.
-     */
-    get sectionPlane() {
-        return this._sectionPlane;
+    setHandlers(handlers) {
+        Object.values(this._displayMeshes).forEach(m => m.visible = !!handlers);
+        this._handlers = handlers;
+        this._displayMeshes.x.setPositionActive(handlers && handlers.onPosition);
+        this._displayMeshes.y.setPositionActive(handlers && handlers.onPosition);
+        this._displayMeshes.z.setPositionActive(handlers && handlers.onPosition);
+        this._displayMeshes.x.setRotationActive(handlers && handlers.onQuaternion);
+        this._displayMeshes.y.setRotationActive(handlers && handlers.onQuaternion);
+        this._displayMeshes.z.setRotationActive(handlers && handlers.onQuaternion);
     }
 
     /**
-     * Sets if this Control is visible.
+     * Sets the World-space position of this Control.
      *
-     * @type {Boolean}
+     * @param {Number[]} value New position.
      */
-    setVisible(visible = true) {
-        if (this._visible !== visible) {
-            this._visible = visible;
-            this._displayMeshes.forEach(m => m.visible = visible);
-        }
+    setPosition(p) {
+        this._setPosition(p);
     }
 
     /**
-     * Gets if this Control is visible.
+     * Sets the quaternion of this Control.
      *
-     * @type {Boolean}
-     */
-    getVisible() {
-        return this._visible;
-    }
-
-    /**
-     * Sets if this Control is culled. This is called by SectionPlanesPlugin to
-     * temporarily hide the Control while a snapshot is being taken by Viewer#getSnapshot().
-     * @param culled
+     * @param {Number[]} value New quaternion.
      */
-    setCulled(culled) {
-        this._displayMeshes.forEach(m => m.culled = culled);
+    setQuaternion(q) {
+        this._setQuaternion(q);
     }
 }
 
-export {Control};
+export {TransformControl};

package/src/plugins/TransformControl/index.js

@@ -0,0 +1 @@
+export * from "./TransformControl.js";

package/src/plugins/index.js

@@ -11,6 +11,7 @@ export * from "./SectionPlanesPlugin/index.js";
 export * from "./StoreyViewsPlugin/index.js";
 export * from "./FaceAlignedSectionPlanesPlugin/index.js";
 export * from "./STLLoaderPlugin/index.js";
+export * from "./TransformControl/index.js";
 export * from "./TreeViewPlugin/index.js";
 export * from "./ViewCullPlugin/index.js";
 export * from "./XKTLoaderPlugin/index.js";

package/src/viewer/scene/camera/Camera.js

@@ -229,6 +229,7 @@ class Camera extends Component {
         super(owner, cfg);
 
         this._state = new RenderState({
+            offsetEyeFromLook: true, // TODO: treat as legacy and get rid of at some later point
             deviceMatrix: math.mat4(),
             hasDeviceMatrix: false, // True when deviceMatrix set to other than identity
             matrix: math.mat4(),
@@ -289,7 +290,7 @@ class Camera extends Component {
         // the front off the view (not a problem with perspective, since objects close enough
         // to be clipped by the front plane are usually too big to see anything of their cross-sections).
         let eye;
-        if (this.projection === "ortho") {
+        if (this.projection === "ortho" && this._state.offsetEyeFromLook) {
             math.subVec3(this._eye, this._look, eyeLookVec);
             math.normalizeVec3(eyeLookVec, eyeLookVecNorm);
             math.mulVec3Scalar(eyeLookVecNorm, 1000.0, eyeLookOffset);
@@ -871,6 +872,25 @@ class Camera extends Component {
         return this._project;
     }
 
+    /**
+     * Gets whether to offset the ortho camera's effective eye from its look
+     *
+     * Default value for legacy reasons is ````true````.
+     */
+    get offsetEyeFromLook() {
+        return this._state.offsetEyeFromLook;
+    }
+
+    /**
+     * Offsets the ortho camera's effective eye from its look
+     *
+     * Default value for legacy reasons is ````true````.
+     */
+    set offsetEyeFromLook(v) {
+        this._state.offsetEyeFromLook = v;
+        this._needUpdate(0); // Ensure matrix built on next "tick"
+    }
+
     /**
      * Get the 2D canvas position of a 3D world position.
      *

package/src/viewer/scene/math/math.js

@@ -261,6 +261,16 @@ const math = {
         return (v1[0] === v2[0] && v1[1] === v2[1] && v1[2] === v2[2]);
     },
 
+    /**
+     * Returns true if the two 4-element vectors are the same.
+     * @param v1
+     * @param v2
+     * @returns {Boolean}
+     */
+    compareVec4(v1, v2) {
+        return (v1[0] === v2[0] && v1[1] === v2[1] && v1[2] === v2[2] && v1[3] === v2[3]);
+    },
+
     /**
      * Negates a three-element vector.
      * @method negateVec3

package/src/viewer/scene/mesh/Mesh.js

@@ -260,7 +260,8 @@ class Mesh extends Component {
             pickHash: "",
             offset: math.vec3(),
             origin: null,
-            originHash: null
+            originHash: null,
+            isUI: cfg.isUI
         });
 
         this._drawRenderer = null;
@@ -613,6 +614,15 @@ class Mesh extends Component {
         return this._isObject;
     }
 
+    /**
+     * Returns ````true```` if this Mesh is an UI object.
+     *
+     * @type {Boolean}
+     */
+    get isUI() {
+        return this._state.isUI;
+    }
+
     /**
      * Gets the Mesh's World-space 3D axis-aligned bounding box.
      *