@xeokit/xeokit-sdk 2.3.0-beta-22 → 2.3.0-beta-24

package/dist/xeokit-sdk.es.js

@@ -12733,7 +12733,6 @@ class PickResult {
 
     /**
      * @private
-     * @param value
      */
     constructor() {
 
@@ -12770,6 +12769,12 @@ class PickResult {
          */
         this.pickSurfacePrecision = false;
 
+        /**
+         * True when picked from touch input, else false when from mouse input.
+         * @type {boolean}
+         */
+        this.touchInput = false;
+
         this._canvasPos = new Int16Array([0, 0]);
         this._origin = new Float64Array([0, 0, 0]);
         this._direction = new Float64Array([0, 0, 0]);
@@ -13047,6 +13052,7 @@ class PickResult {
         this._gotBary = false;
         this._gotWorldNormal = false;
         this._gotUV = false;
+        this.touchInput = false;
     }
 }
 
@@ -15950,6 +15956,19 @@ const Renderer = function (scene, options) {
 
             //------------------------------------------------------------------------------------------------------
             // Render deferred bins
+            //
+            // Order:
+            //
+            // 1. Opaque color fill
+            // 2. Opaque edges
+            // 3. Opaque X-ray fill
+            // 4. Opaque X-ray edges
+            // 5. Opaque highlight
+            // 6. Transparent highlight
+            // 7. Selected opaque
+            // 8. Selected transparent
+            // 9. Normal transparent
+            // 10. X-rayed transparent
             //------------------------------------------------------------------------------------------------------
 
             // Opaque color with SAO
@@ -15985,66 +16004,6 @@ const Renderer = function (scene, options) {
                 }
             }
 
-            // Transparent
-
-            if (xrayedFillTransparentBinLen > 0 || xrayEdgesTransparentBinLen > 0 || normalFillTransparentBinLen > 0 || normalEdgesTransparentBinLen > 0) {
-                gl.enable(gl.CULL_FACE);
-                gl.enable(gl.BLEND);
-                if (canvasTransparent) {
-                    gl.blendEquation(gl.FUNC_ADD);
-                    gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-                } else {
-                    gl.blendEquation(gl.FUNC_ADD);
-                    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-                }
-                frameCtx.backfaces = false;
-                if (!alphaDepthMask) {
-                    gl.depthMask(false);
-                }
-
-                // Transparent color edges
-
-                if (normalFillTransparentBinLen > 0 || normalEdgesTransparentBinLen > 0) {
-                    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-                }
-                if (normalEdgesTransparentBinLen > 0) {
-                    for (i = 0; i < normalEdgesTransparentBinLen; i++) {
-                        drawable = normalEdgesTransparentBin[i];
-                        drawable.drawEdgesColorTransparent(frameCtx);
-                    }
-                }
-
-                // Transparent color fill
-
-                if (normalFillTransparentBinLen > 0) {
-                    for (i = 0; i < normalFillTransparentBinLen; i++) {
-                        drawable = normalFillTransparentBin[i];
-                        drawable.drawColorTransparent(frameCtx);
-                    }
-                }
-
-                // Transparent X-ray edges
-
-                if (xrayEdgesTransparentBinLen > 0) {
-                    for (i = 0; i < xrayEdgesTransparentBinLen; i++) {
-                        xrayEdgesTransparentBin[i].drawEdgesXRayed(frameCtx);
-                    }
-                }
-
-                // Transparent X-ray fill
-
-                if (xrayedFillTransparentBinLen > 0) {
-                    for (i = 0; i < xrayedFillTransparentBinLen; i++) {
-                        xrayedFillTransparentBin[i].drawSilhouetteXRayed(frameCtx);
-                    }
-                }
-
-                gl.disable(gl.BLEND);
-                if (!alphaDepthMask) {
-                    gl.depthMask(true);
-                }
-            }
-
             // Opaque highlight
 
             if (highlightedFillOpaqueBinLen > 0 || highlightedEdgesOpaqueBinLen > 0) {
@@ -16163,6 +16122,66 @@ const Renderer = function (scene, options) {
                 gl.disable(gl.BLEND);
             }
 
+            // Transparent
+
+            if (xrayedFillTransparentBinLen > 0 || xrayEdgesTransparentBinLen > 0 || normalFillTransparentBinLen > 0 || normalEdgesTransparentBinLen > 0) {
+                gl.enable(gl.CULL_FACE);
+                gl.enable(gl.BLEND);
+                if (canvasTransparent) {
+                    gl.blendEquation(gl.FUNC_ADD);
+                    gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+                } else {
+                    gl.blendEquation(gl.FUNC_ADD);
+                    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+                }
+                frameCtx.backfaces = false;
+                if (!alphaDepthMask) {
+                    gl.depthMask(false);
+                }
+
+                // Transparent color edges
+
+                if (normalFillTransparentBinLen > 0 || normalEdgesTransparentBinLen > 0) {
+                    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+                }
+                if (normalEdgesTransparentBinLen > 0) {
+                    for (i = 0; i < normalEdgesTransparentBinLen; i++) {
+                        drawable = normalEdgesTransparentBin[i];
+                        drawable.drawEdgesColorTransparent(frameCtx);
+                    }
+                }
+
+                // Transparent color fill
+
+                if (normalFillTransparentBinLen > 0) {
+                    for (i = 0; i < normalFillTransparentBinLen; i++) {
+                        drawable = normalFillTransparentBin[i];
+                        drawable.drawColorTransparent(frameCtx);
+                    }
+                }
+
+                // Transparent X-ray edges
+
+                if (xrayEdgesTransparentBinLen > 0) {
+                    for (i = 0; i < xrayEdgesTransparentBinLen; i++) {
+                        xrayEdgesTransparentBin[i].drawEdgesXRayed(frameCtx);
+                    }
+                }
+
+                // Transparent X-ray fill
+
+                if (xrayedFillTransparentBinLen > 0) {
+                    for (i = 0; i < xrayedFillTransparentBinLen; i++) {
+                        xrayedFillTransparentBin[i].drawSilhouetteXRayed(frameCtx);
+                    }
+                }
+
+                gl.disable(gl.BLEND);
+                if (!alphaDepthMask) {
+                    gl.depthMask(true);
+                }
+            }
+
             const endTime = Date.now();
             const frameStats = stats.frame;
 
@@ -46613,7 +46632,7 @@ class DistanceMeasurementsControl extends Component {
         this._active = false;
 
         this._currentDistMeasurement = null;
-        // Keep initial measurement state values to do not force values but put the default ones.
+
         this._currentDistMeasurementInitState = {
             wireVisible: null,
             axisVisible: null,
@@ -46646,7 +46665,7 @@ class DistanceMeasurementsControl extends Component {
         }
 
         const cameraControl = this.plugin.viewer.cameraControl;
-
+        const canvas = this.scene.canvas.canvas;
         let hoveredEntity = null;
         const worldPos = math.vec3();
         const hoverCanvasPos = math.vec2();
@@ -46679,18 +46698,18 @@ class DistanceMeasurementsControl extends Component {
             }
         });
 
-        let lastX;
-        let lastY;
-        const tolerance = 5;
+        let lastMouseCanvasX;
+        let lastMouseCanvasY;
+        const mouseCanvasTolerance = 5;
 
         this._onInputMouseDown = this.plugin.viewer.scene.input.on("mousedown", (coords) => {
-            lastX = coords[0];
-            lastY = coords[1];
+            lastMouseCanvasX = coords[0];
+            lastMouseCanvasY = coords[1];
         });
 
         this._onInputMouseUp = this.plugin.viewer.scene.input.on("mouseup", (coords) => {
 
-            if (coords[0] > lastX + tolerance || coords[0] < lastX - tolerance || coords[1] > lastY + tolerance || coords[1] < lastY - tolerance) {
+            if (coords[0] > lastMouseCanvasX + mouseCanvasTolerance || coords[0] < lastMouseCanvasX - mouseCanvasTolerance || coords[1] > lastMouseCanvasY + mouseCanvasTolerance || coords[1] < lastMouseCanvasY - mouseCanvasTolerance) {
                 return;
             }
 
@@ -46767,78 +46786,195 @@ class DistanceMeasurementsControl extends Component {
             this.plugin.viewer.scene.canvas.canvas.style.cursor = "default";
         });
 
+        math.vec3();
+        math.vec3();
+
+        let state = 0;
+
         this._onPickedNothing = cameraControl.on("pickedNothing", e => {
+            console.log("pick nothing");
             if (this._currentDistMeasurement) {
                 this._currentDistMeasurement.destroy();
                 this._currentDistMeasurement = null;
             }
+            if (this.startDot) {
+                this.startDot.setVisible(false);
+            }
+            state = 0;
         });
 
-        //-------------------------------------------------------------------------------------------------------------
+        const tapStartCanvasPos = math.vec2();
+        math.vec2();
+        math.vec2();
+        math.vec2();
 
-        // const canvas = this.scene.canvas.canvas;
-        // const tapStartCanvasPos = math.vec2();
-        // const tapCanvasPos0 = math.vec2();
-        // const tapCanvasPos1 = math.vec2();
-        // const touch0Vec = math.vec2();
-        // const lastCanvasTouchPosList = [];
-        // let numTouches = 0;
-        // let waitForTick = false;
-        //
-        // this._onTick = scene.on("tick", () => {
-        //     waitForTick = false;
+        const startWorldPos = math.vec3();
+        math.vec3();
+
+        const lastCanvasTouchPosList = [];
+
+        this._onTick = scene.on("tick", () => {
+        });
+
+        canvas.addEventListener("touchstart", this._canvasTouchStartHandler = (event) => {
+
+            console.log("touchStart");
+
+            event.preventDefault();
+
+            const touches = event.touches;
+            const changedTouches = event.changedTouches;
+
+            if (touches.length === 1 && changedTouches.length === 1) {
+
+                getCanvasPosFromEvent$4(touches[0], tapStartCanvasPos);
+
+                const pickResult = this.plugin.viewer.scene.pick({
+                    canvasPos: tapStartCanvasPos,
+                    pickSurface: true,
+                    // pickSurfacePrecision: true
+                });
+
+                if (pickResult && pickResult.worldPos) {
+
+                    console.log("Finger is down over an object");
+                    if (state === 0) {
+                        if (this.startDot) {
+                            this.startDot.setVisible(true);
+                            this.startDot.setPos(tapStartCanvasPos[0], tapStartCanvasPos[1]);
+                        }
+                        startWorldPos.set(pickResult.worldPos);
+                        state = 1;
+                    } else {
+                        if (this.startDot) {
+                            this.startDot.setVisible(false);
+                        }
+                    }
+                } else {
+                    const pickResult = this.plugin.viewer.scene.pick({
+                        canvasPos: tapStartCanvasPos,
+                        pickSurface: true,
+                        pickSurfacePrecision: true
+                    });
+                    if (pickResult && pickResult.worldPos) {
+                        this._currentDistMeasurement = this.plugin.createMeasurement({
+                            id: math.createUUID(),
+                            origin: {
+                                entity: hoveredEntity,
+                                worldPos: startWorldPos
+                            },
+                            target: {
+                                entity: hoveredEntity,
+                                worldPos: pickResult.worldPos
+                            },
+                            approximate: true
+                        });
+                    }
+                    if (this.startDot) {
+                        this.startDot.setVisible(false);
+                    }
+                    state = 0;
+                }
+            }
+            while (lastCanvasTouchPosList.length < touches.length) {
+                lastCanvasTouchPosList.push(math.vec2());
+            }
+            for (let i = 0, len = touches.length; i < len; ++i) {
+                getCanvasPosFromEvent$4(touches[i], lastCanvasTouchPosList[i]);
+            }
+        });
+
+        // canvas.addEventListener("touchmove", this._canvasTouchMoveHandler = (event) => {
+        // //    event.stopPropagation();
+        //     event.preventDefault();
+        //     if (this.startDot) {
+        //         this.startDot.setVisible(false);
+        //     }
+        //     state = 0;
         // });
+
+        // canvas.addEventListener("touchend", this._canvasTouchEndHandler = (event) => {
         //
-        // canvas.addEventListener("touchstart", this._canvasTouchStartHandler = (event) => {
+        //     event.stopPropagation();
         //     event.preventDefault();
+        //
+        //     const currentTime = Date.now();
         //     const touches = event.touches;
         //     const changedTouches = event.changedTouches;
-        //     if (touches.length === 1 && changedTouches.length === 1) {
-        //         getCanvasPosFromEvent(touches[0], tapStartCanvasPos);
         //
-        //         if (pickSurfacePrecisionEnabled) {
-        //             const pickResult = this.plugin.viewer.scene.pick({
-        //                 canvasPos: tapStartCanvasPos,
-        //                 pickSurface: true,
-        //                // pickSurfacePrecision: true
-        //             });
-        //             if (pickResult && pickResult.worldPos) {
-        //                // this._currentDistMeasurement.target.worldPos = pickResult.worldPos;
+        //     if (touches.length === 0 && changedTouches.length === 1) {
+        //
+        //         if (tapStartTime > -1 && currentTime - tapStartTime < TAP_INTERVAL) {
+        //
+        //             if (lastTapTime > -1 && tapStartTime - lastTapTime < DBL_TAP_INTERVAL) {
+        //
+        //                 // Double-tap
+        //
+        //                 getCanvasPosFromEvent(changedTouches[0], pickController.pickCursorPos);
+        //                 pickController.schedulePickEntity = true;
+        //                 pickController.schedulePickSurface = pickedSurfaceSubs;
+        //
+        //                 pickController.update();
+        //
+        //                 if (pickController.pickResult) {
+        //
+        //                     cameraControl.fire("doublePicked", pickController.pickResult);
+        //
+        //                     if (pickController.pickedSurface) {
+        //                         cameraControl.fire("doublePickedSurface", pickController.pickResult);
+        //                     }
+        //
+        //                     if (configs.doublePickFlyTo) {
+        //                         flyCameraTo(pickController.pickResult);
+        //                     }
+        //                 } else {
+        //                     cameraControl.fire("doublePickedNothing");
+        //                     if (configs.doublePickFlyTo) {
+        //                         flyCameraTo();
+        //                     }
+        //                 }
+        //
+        //                 lastTapTime = -1;
+        //
+        //             } else if (math.distVec2(activeTouches[0], tapStartPos) < TAP_DISTANCE_THRESHOLD) {
+        //
+        //                 // Single-tap
+        //
+        //                 getCanvasPosFromEvent(changedTouches[0], pickController.pickCursorPos);
+        //                 pickController.schedulePickEntity = true;
+        //                 pickController.schedulePickSurface = pickedSurfaceSubs;
+        //
+        //                 pickController.update();
+        //
+        //                 if (pickController.pickResult) {
+        //
+        //                     cameraControl.fire("picked", pickController.pickResult);
+        //
+        //                     if (pickController.pickedSurface) {
+        //                         cameraControl.fire("pickedSurface", pickController.pickResult);
+        //                     }
+        //
+        //                 } else {
+        //                     cameraControl.fire("pickedNothing");
+        //                 }
+        //
+        //                 lastTapTime = currentTime;
         //             }
-        //        //     this._currentDistMeasurement.approximate = false;
-        //         }
         //
-        //         // TODO: Create start of measurement
-        //     }
-        //     while (lastCanvasTouchPosList.length < touches.length) {
-        //         lastCanvasTouchPosList.push(math.vec2());
+        //             tapStartTime = -1
+        //         }
         //     }
+        //
+        //     activeTouches.length = touches.length;
+        //
         //     for (let i = 0, len = touches.length; i < len; ++i) {
-        //         getCanvasPosFromEvent(touches[i], lastCanvasTouchPosList[i]);
+        //         activeTouches[i][0] = touches[i].pageX;
+        //         activeTouches[i][1] = touches[i].pageY;
         //     }
-        //     numTouches = touches.length;
-        // });
         //
-        // canvas.addEventListener("touchmove", this._canvasTouchMoveHandler = (event) => {
         //     event.stopPropagation();
-        //     event.preventDefault();
-        //     if (waitForTick) {  // Limit changes detection to one per frame
-        //         return;
-        //     }
-        //     waitForTick = true;
-        //     const touches = event.touches;
-        //     if (event.touches.length !== numTouches) {
-        //         // Two fingers were pressed, then one of them is removed
-        //         return;
-        //     }
-        //     if (numTouches === 1) {
-        //         getCanvasPosFromEvent(touches[0], tapCanvasPos0);
-        //         // TODO: update end of distance measurement
-        //     }
-        //     for (let i = 0; i < numTouches; ++i) {
-        //         getCanvasPosFromEvent(touches[i], lastCanvasTouchPosList[i]);
-        //     }
-        // });
+        //
+        // }, {passive: true});
 
         //-------------------------------------------------------------------------------------------------------------
 
@@ -46905,9 +47041,28 @@ class DistanceMeasurementsControl extends Component {
         this.deactivate();
         super.destroy();
     }
-
 }
 
+const getCanvasPosFromEvent$4 = 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;
+};
+
 /**
  * {@link Viewer} plugin for measuring point-to-point distances.
  *
@@ -157271,8 +157426,8 @@ class TouchPanRotateAndDollyHandler {
             // Scaling drag-rotate to canvas boundary
 
             const canvasBoundary = scene.canvas.boundary;
-            const canvasWidth = canvasBoundary[0];
-            const canvasHeight = canvasBoundary[1];
+            const canvasWidth = canvasBoundary[2];
+            const canvasHeight = canvasBoundary[3];
 
             const touches = event.touches;
 
@@ -157548,6 +157703,8 @@ class TouchPickHandler {
 
                         if (pickController.pickResult) {
 
+                            pickController.pickResult.touchInput = true;
+
                             cameraControl.fire("doublePicked", pickController.pickResult);
 
                             if (pickController.pickedSurface) {
@@ -157578,6 +157735,8 @@ class TouchPickHandler {
 
                         if (pickController.pickResult) {
 
+                            pickController.pickResult.touchInput = true;
+
                             cameraControl.fire("picked", pickController.pickResult);
 
                             if (pickController.pickedSurface) {
@@ -157602,7 +157761,7 @@ class TouchPickHandler {
                 activeTouches[i][1] = touches[i].pageY;
             }
 
-            e.stopPropagation();
+          //  e.stopPropagation();
 
         }, {passive: true});
 
@@ -159753,7 +159912,6 @@ class PropertySet {
  *
  * * Located in {@link Viewer#metaScene}.
  * * Contains {@link MetaModel}s and {@link MetaObject}s.
- * * [Scene Graphs user guide](https://github.com/xeokit/xeokit-sdk/wiki/Scene-Graphs)
  * * [Scene graph example with metadata](http://xeokit.github.io/xeokit-sdk/examples/#sceneRepresentation_SceneGraph_metadata)
  */
 class MetaScene {