@xeokit/xeokit-sdk 2.5.2-beta-10 → 2.5.2-beta-13

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

@@ -0,0 +1,376 @@
+import {math} from "../../../math/math.js";
+
+/**
+ * @private
+ */
+class MousePickHandler {
+
+    constructor(scene, controllers, configs, states, updates) {
+
+        this._scene = scene;
+
+        const pickController = controllers.pickController;
+        const pivotController = controllers.pivotController;
+        const cameraControl = controllers.cameraControl;
+
+        this._clicks = 0;
+        this._timeout = null;
+        this._lastPickedEntityId = null;
+
+        let leftDown = false;
+        let rightDown = false;
+
+        const canvas = this._scene.canvas.canvas;
+
+        const flyCameraTo = (pickResult) => {
+            let pos;
+            if (pickResult && pickResult.worldPos) {
+                pos = pickResult.worldPos
+            }
+            const aabb = pickResult && pickResult.entity ? pickResult.entity.aabb : scene.aabb;
+            if (pos) { // Fly to look at point, don't change eye->look dist
+                const camera = scene.camera;
+                const diff = math.subVec3(camera.eye, camera.look, []);
+                controllers.cameraFlight.flyTo({
+                    // look: pos,
+                    // eye: xeokit.math.addVec3(pos, diff, []),
+                    // up: camera.up,
+                    aabb: aabb
+                });
+                // TODO: Option to back off to fit AABB in view
+            } else {// Fly to fit target boundary in view
+                controllers.cameraFlight.flyTo({
+                    aabb: aabb
+                });
+            }
+        };
+
+        const tickifiedMouseMoveFn = scene.tickify (
+            this._canvasMouseMoveHandler = (e) => {
+                if (!(configs.active && configs.pointerEnabled)) {
+                    return;
+                }
+
+                if (leftDown || rightDown) {
+                    return;
+                }
+
+                const hoverSubs = cameraControl.hasSubs("hover");
+                const hoverEnterSubs = cameraControl.hasSubs("hoverEnter");
+                const hoverOutSubs = cameraControl.hasSubs("hoverOut");
+                const hoverOffSubs = cameraControl.hasSubs("hoverOff");
+                const hoverSurfaceSubs = cameraControl.hasSubs("hoverSurface");
+                const hoverSnapOrSurfaceSubs = cameraControl.hasSubs("hoverSnapOrSurface");
+
+                if (hoverSubs || hoverEnterSubs || hoverOutSubs || hoverOffSubs || hoverSurfaceSubs || hoverSnapOrSurfaceSubs) {
+
+                    pickController.pickCursorPos = states.pointerCanvasPos;
+                    pickController.schedulePickEntity = true;
+                    pickController.schedulePickSurface = hoverSurfaceSubs;
+                    pickController.scheduleSnapOrPick = hoverSnapOrSurfaceSubs
+
+                    pickController.update();
+
+                    if (pickController.pickResult) {
+
+                        if (pickController.pickResult.entity) {
+                            const pickedEntityId = pickController.pickResult.entity.id;
+
+                            if (this._lastPickedEntityId !== pickedEntityId) {
+
+                                if (this._lastPickedEntityId !== undefined) {
+
+                                    cameraControl.fire("hoverOut", { // Hovered off an entity
+                                        entity: scene.objects[this._lastPickedEntityId]
+                                    }, true);
+                                }
+
+                                cameraControl.fire("hoverEnter", pickController.pickResult, true); // Hovering over a new entity
+
+                                this._lastPickedEntityId = pickedEntityId;
+                            }
+                        }
+
+                        cameraControl.fire("hover", pickController.pickResult, true);
+
+                        if (pickController.pickResult.worldPos || pickController.pickResult.snappedWorldPos) { // Hovering the surface of an entity
+                            cameraControl.fire("hoverSurface", pickController.pickResult, true);
+                        }
+
+                    } else {
+
+                        if (this._lastPickedEntityId !== undefined) {
+
+                            cameraControl.fire("hoverOut", { // Hovered off an entity
+                                entity: scene.objects[this._lastPickedEntityId]
+                            }, true);
+
+                            this._lastPickedEntityId = undefined;
+                        }
+
+                        cameraControl.fire("hoverOff", { // Not hovering on any entity
+                            canvasPos: pickController.pickCursorPos
+                        }, true);
+                    }
+                }
+            }
+        );
+
+        canvas.addEventListener("mousemove", tickifiedMouseMoveFn);
+
+        canvas.addEventListener('mousedown', this._canvasMouseDownHandler = (e) => {
+
+            if (e.which === 1) {
+                leftDown = true;
+            }
+
+            if (e.which === 3) {
+                rightDown = true;
+            }
+
+            const leftButtonDown = (e.which === 1);
+
+            if (!leftButtonDown) {
+                return;
+            }
+
+            if (!(configs.active && configs.pointerEnabled)) {
+                return;
+            }
+
+            // Left mouse button down to start pivoting
+
+            states.mouseDownClientX = e.clientX;
+            states.mouseDownClientY = e.clientY;
+            states.mouseDownCursorX = states.pointerCanvasPos[0];
+            states.mouseDownCursorY = states.pointerCanvasPos[1];
+
+            if ((!configs.firstPerson) && configs.followPointer) {
+
+                pickController.pickCursorPos = states.pointerCanvasPos;
+                pickController.schedulePickSurface = true;
+
+                pickController.update();
+
+                if (e.which === 1) {// Left button
+                    const pickResult = pickController.pickResult;
+                    if (pickResult && pickResult.worldPos) {
+                        pivotController.setPivotPos(pickResult.worldPos);
+                        pivotController.startPivot();
+                    } else {
+                        if (configs.smartPivot) {
+                            pivotController.setCanvasPivotPos(states.pointerCanvasPos);
+                        } else {
+                            pivotController.setPivotPos(scene.camera.look);
+                        }
+                        pivotController.startPivot();
+                    }
+                }
+            }
+        });
+
+        document.addEventListener('mouseup', this._documentMouseUpHandler = (e) => {
+
+            if (e.which === 1) {
+                leftDown = false;
+            }
+
+            if (e.which === 3) {
+                rightDown = false;
+            }
+
+            if (pivotController.getPivoting()) {
+                pivotController.endPivot();
+            }
+        });
+
+        canvas.addEventListener('mouseup', this._canvasMouseUpHandler = (e) => {
+
+            if (!(configs.active && configs.pointerEnabled)) {
+                return;
+            }
+
+            const leftButtonUp = (e.which === 1);
+
+            if (!leftButtonUp) {
+                return;
+            }
+
+            // Left mouse button up to possibly pick or double-pick
+
+            pivotController.hidePivot();
+
+            if (Math.abs(e.clientX - states.mouseDownClientX) > 3 || Math.abs(e.clientY - states.mouseDownClientY) > 3) {
+                return;
+            }
+
+            const pickedSubs = cameraControl.hasSubs("picked");
+            const pickedNothingSubs = cameraControl.hasSubs("pickedNothing");
+            const pickedSurfaceSubs = cameraControl.hasSubs("pickedSurface");
+            const doublePickedSubs = cameraControl.hasSubs("doublePicked");
+            const doublePickedSurfaceSubs = cameraControl.hasSubs("doublePickedSurface");
+            const doublePickedNothingSubs = cameraControl.hasSubs("doublePickedNothing");
+
+            if ((!configs.doublePickFlyTo) &&
+                (!doublePickedSubs) &&
+                (!doublePickedSurfaceSubs) &&
+                (!doublePickedNothingSubs)) {
+
+                //  Avoid the single/double click differentiation timeout
+
+                if (pickedSubs || pickedNothingSubs || pickedSurfaceSubs) {
+
+                    pickController.pickCursorPos = states.pointerCanvasPos;
+                    pickController.schedulePickEntity = true;
+                    pickController.schedulePickSurface = pickedSurfaceSubs;
+                    pickController.update();
+
+                    if (pickController.pickResult) {
+
+                        cameraControl.fire("picked", pickController.pickResult, true);
+
+                        if (pickController.pickedSurface) {
+                            cameraControl.fire("pickedSurface", pickController.pickResult, true);
+                        }
+                    } else {
+                        cameraControl.fire("pickedNothing", {
+                            canvasPos: states.pointerCanvasPos
+                        }, true);
+                    }
+                }
+
+                this._clicks = 0;
+
+                return;
+            }
+
+            this._clicks++;
+
+            if (this._clicks === 1) { // First click
+
+                pickController.pickCursorPos = states.pointerCanvasPos;
+                pickController.schedulePickEntity = configs.doublePickFlyTo;
+                pickController.schedulePickSurface = pickedSurfaceSubs;
+                pickController.update();
+
+                const firstClickPickResult = pickController.pickResult;
+                const firstClickPickSurface = pickController.pickedSurface;
+
+                this._timeout = setTimeout(() => {
+
+                    if (firstClickPickResult) {
+
+                        cameraControl.fire("picked", firstClickPickResult, true);
+
+                        if (firstClickPickSurface) {
+
+                            cameraControl.fire("pickedSurface", firstClickPickResult, true);
+
+                            if ((!configs.firstPerson) && configs.followPointer) {
+                                controllers.pivotController.setPivotPos(firstClickPickResult.worldPos);
+                                if (controllers.pivotController.startPivot()) {
+                                    controllers.pivotController.showPivot();
+                                }
+                            }
+                        }
+                    } else {
+                        cameraControl.fire("pickedNothing", {
+                            canvasPos: states.pointerCanvasPos
+                        }, true);
+                    }
+
+                    this._clicks = 0;
+
+                }, configs.doubleClickTimeFrame);
+
+            } else { // Second click
+
+                if (this._timeout !== null) {
+                    window.clearTimeout(this._timeout);
+                    this._timeout = null;
+                }
+
+                pickController.pickCursorPos = states.pointerCanvasPos;
+                pickController.schedulePickEntity = configs.doublePickFlyTo || doublePickedSubs || doublePickedSurfaceSubs;
+                pickController.schedulePickSurface = pickController.schedulePickEntity && doublePickedSurfaceSubs;
+                pickController.update();
+
+                if (pickController.pickResult) {
+
+                    cameraControl.fire("doublePicked", pickController.pickResult, true);
+
+                    if (pickController.pickedSurface) {
+                        cameraControl.fire("doublePickedSurface", pickController.pickResult, true);
+                    }
+
+                    if (configs.doublePickFlyTo) {
+
+                        flyCameraTo(pickController.pickResult);
+
+                        if ((!configs.firstPerson) && configs.followPointer) {
+
+                            const pickedEntityAABB = pickController.pickResult.entity.aabb;
+                            const pickedEntityCenterPos = math.getAABB3Center(pickedEntityAABB);
+
+                            controllers.pivotController.setPivotPos(pickedEntityCenterPos);
+
+                            if (controllers.pivotController.startPivot()) {
+                                controllers.pivotController.showPivot();
+                            }
+                        }
+                    }
+
+                } else {
+
+                    cameraControl.fire("doublePickedNothing", {
+                        canvasPos: states.pointerCanvasPos
+                    }, true);
+
+                    if (configs.doublePickFlyTo) {
+
+                        flyCameraTo();
+
+                        if ((!configs.firstPerson) && configs.followPointer) {
+
+                            const sceneAABB = scene.aabb;
+                            const sceneCenterPos = math.getAABB3Center(sceneAABB);
+
+                            controllers.pivotController.setPivotPos(sceneCenterPos);
+
+                            if (controllers.pivotController.startPivot()) {
+                                controllers.pivotController.showPivot();
+                            }
+                        }
+                    }
+                }
+
+                this._clicks = 0;
+            }
+        }, false);
+    }
+
+    reset() {
+        this._clicks = 0;
+        this._lastPickedEntityId = null;
+        if (this._timeout) {
+            window.clearTimeout(this._timeout);
+            this._timeout = null;
+        }
+    }
+
+    destroy() {
+        const canvas = this._scene.canvas.canvas;
+        canvas.removeEventListener("mousemove", this._canvasMouseMoveHandler);
+        canvas.removeEventListener("mousedown", this._canvasMouseDownHandler);
+        document.removeEventListener("mouseup", this._documentMouseUpHandler);
+        canvas.removeEventListener("mouseup", this._canvasMouseUpHandler);
+        if (this._timeout) {
+            window.clearTimeout(this._timeout);
+            this._timeout = null;
+        }
+    }
+}
+
+
+
+export {MousePickHandler};

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

@@ -0,0 +1,288 @@
+import {math} from "../../../math/math.js";
+
+const getCanvasPosFromEvent = function (event, canvasPos) {
+    if (!event) {
+        event = window.event;
+        canvasPos[0] = event.x;
+        canvasPos[1] = event.y;
+    } else {
+        let element = event.target;
+        let totalOffsetLeft = 0;
+        let totalOffsetTop = 0;
+        while (element.offsetParent) {
+            totalOffsetLeft += element.offsetLeft;
+            totalOffsetTop += element.offsetTop;
+            element = element.offsetParent;
+        }
+        canvasPos[0] = event.pageX - totalOffsetLeft;
+        canvasPos[1] = event.pageY - totalOffsetTop;
+    }
+    return canvasPos;
+};
+
+/**
+ * @private
+ */
+class TouchPanRotateAndDollyHandler {
+
+    constructor(scene, controllers, configs, states, updates) {
+
+        this._scene = scene;
+
+        const pickController = controllers.pickController;
+        const pivotController = controllers.pivotController;
+
+        const tapStartCanvasPos = math.vec2();
+        const tapCanvasPos0 = math.vec2();
+        const tapCanvasPos1 = math.vec2();
+        const touch0Vec = math.vec2();
+
+        const lastCanvasTouchPosList = [];
+        const canvas = this._scene.canvas.canvas;
+
+        let numTouches = 0;
+        let tapStartTime = -1;
+        let waitForTick = false;
+
+        this._onTick = scene.on("tick", () => {
+            waitForTick = false;
+        });
+
+        let firstDragDeltaX = 0;
+        let firstDragDeltaY = 1;
+        let absorbTinyFirstDrag = false;
+
+        canvas.addEventListener("touchstart", this._canvasTouchStartHandler = (event) => {
+
+            if (!(configs.active && configs.pointerEnabled)) {
+                return;
+            }
+
+            event.preventDefault();
+
+            const touches = event.touches;
+            const changedTouches = event.changedTouches;
+
+            states.touchStartTime = Date.now();
+
+            if (touches.length === 1 && changedTouches.length === 1) {
+
+                tapStartTime = states.touchStartTime;
+
+                getCanvasPosFromEvent(touches[0], tapStartCanvasPos);
+
+                if (configs.followPointer) {
+
+                    pickController.pickCursorPos = tapStartCanvasPos;
+                    pickController.schedulePickSurface = true;
+                    pickController.update();
+
+                    if (!configs.planView) {
+
+                        if (pickController.picked && pickController.pickedSurface && pickController.pickResult && pickController.pickResult.worldPos) {
+
+                            pivotController.setPivotPos(pickController.pickResult.worldPos);
+
+                            if (!configs.firstPerson && pivotController.startPivot()) {
+                                pivotController.showPivot();
+                            }
+
+                        } else {
+
+                            if (configs.smartPivot) {
+                                pivotController.setCanvasPivotPos(states.pointerCanvasPos);
+                            } else {
+                                pivotController.setPivotPos(scene.camera.look);
+                            }
+
+                            if (!configs.firstPerson && pivotController.startPivot()) {
+                                pivotController.showPivot();
+                            }
+                        }
+                    }
+                }
+
+            } else {
+                tapStartTime = -1;
+            }
+
+            while (lastCanvasTouchPosList.length < touches.length) {
+                lastCanvasTouchPosList.push(math.vec2());
+            }
+
+            for (let i = 0, len = touches.length; i < len; ++i) {
+                getCanvasPosFromEvent(touches[i], lastCanvasTouchPosList[i]);
+            }
+
+            numTouches = touches.length;
+        });
+
+        canvas.addEventListener("touchend", this._canvasTouchEndHandler = () => {
+            if (pivotController.getPivoting()) {
+                pivotController.endPivot()
+            }
+            firstDragDeltaX = 0;
+            firstDragDeltaY = 0;
+            absorbTinyFirstDrag = true;
+        })
+
+        canvas.addEventListener("touchmove", this._canvasTouchMoveHandler = (event) => {
+
+            if (!(configs.active && configs.pointerEnabled)) {
+                return;
+            }
+
+            event.stopPropagation();
+            event.preventDefault();
+
+            if (waitForTick) {
+                // Limit changes detection to one per frame
+                return;
+            }
+
+            waitForTick = true;
+
+            // Scaling drag-rotate to canvas boundary
+
+            const canvasBoundary = scene.canvas.boundary;
+            const canvasWidth = canvasBoundary[2];
+            const canvasHeight = canvasBoundary[3];
+
+            const touches = event.touches;
+
+            if (event.touches.length !== numTouches) {
+                // Two fingers were pressed, then one of them is removed
+                // We don't want to rotate in this case (weird behavior)
+                return;
+            }
+
+            if (numTouches === 1) {
+
+                getCanvasPosFromEvent(touches[0], tapCanvasPos0);
+
+                //-----------------------------------------------------------------------------------------------
+                // Drag rotation
+                //-----------------------------------------------------------------------------------------------
+
+                math.subVec2(tapCanvasPos0, lastCanvasTouchPosList[0], touch0Vec);
+
+                const xPanDelta = touch0Vec[0];
+                const yPanDelta = touch0Vec[1];
+
+                if (states.longTouchTimeout !== null && (Math.abs(xPanDelta) > configs.longTapRadius || Math.abs(yPanDelta) > configs.longTapRadius)) {
+                    clearTimeout(states.longTouchTimeout);
+                    states.longTouchTimeout = null;
+                }
+
+                if (configs.planView) { // No rotating in plan-view mode
+
+                    const camera = scene.camera;
+
+                    // We use only canvasHeight here so that aspect ratio does not distort speed
+
+                    if (camera.projection === "perspective") {
+
+                        const touchPicked = false;
+                        const pickedWorldPos = [0, 0, 0];
+
+                        const depth = Math.abs(touchPicked ? math.lenVec3(math.subVec3(pickedWorldPos, scene.camera.eye, [])) : scene.camera.eyeLookDist);
+                        const targetDistance = depth * Math.tan((camera.perspective.fov / 2) * Math.PI / 180.0);
+
+                        updates.panDeltaX += (xPanDelta * targetDistance / canvasHeight) * configs.touchPanRate;
+                        updates.panDeltaY += (yPanDelta * targetDistance / canvasHeight) * configs.touchPanRate;
+
+                    } else {
+
+                        updates.panDeltaX += 0.5 * camera.ortho.scale * (xPanDelta / canvasHeight) * configs.touchPanRate;
+                        updates.panDeltaY += 0.5 * camera.ortho.scale * (yPanDelta / canvasHeight) * configs.touchPanRate;
+                    }
+
+                } else {
+                  //  if (!absorbTinyFirstDrag) {
+                        updates.rotateDeltaY -= (xPanDelta / canvasWidth) * (configs.dragRotationRate * 1.0); // Full horizontal rotation
+                        updates.rotateDeltaX += (yPanDelta / canvasHeight) * (configs.dragRotationRate * 1.5); // Half vertical rotation
+                    // } else {
+                    //     firstDragDeltaY -= (xPanDelta / canvasWidth) * (configs.dragRotationRate * 1.0); // Full horizontal rotation
+                    //     firstDragDeltaX += (yPanDelta / canvasHeight) * (configs.dragRotationRate * 1.5); // Half vertical rotation
+                    //     if (Math.abs(firstDragDeltaX) > 5 || Math.abs(firstDragDeltaY) > 5) {
+                    //         updates.rotateDeltaX += firstDragDeltaX;
+                    //         updates.rotateDeltaY += firstDragDeltaY;
+                    //         firstDragDeltaX = 0;
+                    //         firstDragDeltaY = 0;
+                    //         absorbTinyFirstDrag = false;
+                    //     }
+                    // }
+                }
+
+            } else if (numTouches === 2) {
+
+                const touch0 = touches[0];
+                const touch1 = touches[1];
+
+                getCanvasPosFromEvent(touch0, tapCanvasPos0);
+                getCanvasPosFromEvent(touch1, tapCanvasPos1);
+
+                const lastMiddleTouch = math.geometricMeanVec2(lastCanvasTouchPosList[0], lastCanvasTouchPosList[1]);
+                const currentMiddleTouch = math.geometricMeanVec2(tapCanvasPos0, tapCanvasPos1);
+
+                const touchDelta = math.vec2();
+
+                math.subVec2(lastMiddleTouch, currentMiddleTouch, touchDelta);
+
+                const xPanDelta = touchDelta[0];
+                const yPanDelta = touchDelta[1];
+
+                const camera = scene.camera;
+
+                // Dollying
+
+                const d1 = math.distVec2([touch0.pageX, touch0.pageY], [touch1.pageX, touch1.pageY]);
+                const d2 = math.distVec2(lastCanvasTouchPosList[0], lastCanvasTouchPosList[1]);
+
+                const dollyDelta = (d2 - d1) * configs.touchDollyRate;
+
+                updates.dollyDelta = dollyDelta;
+
+                if (Math.abs(dollyDelta) < 1.0) {
+
+                    // We use only canvasHeight here so that aspect ratio does not distort speed
+
+                    if (camera.projection === "perspective") {
+                        const pickedWorldPos = pickController.pickResult ? pickController.pickResult.worldPos : scene.center;
+
+                        const depth = Math.abs(math.lenVec3(math.subVec3(pickedWorldPos, scene.camera.eye, [])));
+                        const targetDistance = depth * Math.tan((camera.perspective.fov / 2) * Math.PI / 180.0);
+
+                        updates.panDeltaX -= (xPanDelta * targetDistance / canvasHeight) * configs.touchPanRate;
+                        updates.panDeltaY -= (yPanDelta * targetDistance / canvasHeight) * configs.touchPanRate;
+
+                    } else {
+
+                        updates.panDeltaX -= 0.5 * camera.ortho.scale * (xPanDelta / canvasHeight) * configs.touchPanRate;
+                        updates.panDeltaY -= 0.5 * camera.ortho.scale * (yPanDelta / canvasHeight) * configs.touchPanRate;
+                    }
+                }
+
+
+                states.pointerCanvasPos = currentMiddleTouch;
+            }
+
+            for (let i = 0; i < numTouches; ++i) {
+                getCanvasPosFromEvent(touches[i], lastCanvasTouchPosList[i]);
+            }
+        });
+    }
+
+    reset() {
+    }
+
+    destroy() {
+        const canvas = this._scene.canvas.canvas;
+        canvas.removeEventListener("touchstart", this._canvasTouchStartHandler);
+        canvas.removeEventListener("touchend", this._canvasTouchEndHandler);
+        canvas.removeEventListener("touchmove", this._canvasTouchMoveHandler);
+        this._scene.off(this._onTick);
+    }
+}
+
+export {TouchPanRotateAndDollyHandler};