@xeokit/xeokit-sdk 2.6.71 → 2.6.72

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

@@ -15,9 +15,28 @@ const tmpVec4b = math.vec4();
 const tmpVec4c = math.vec4();
 const tmpVec4d = math.vec4();
 const tmpMat4  = math.mat4();
+const tmpRay = {
+    origin:    math.vec3(),
+    direction: math.vec3()
+};
 
 const nop = () => { };
 
+const planeIntersect = function(p0, n, origin, direction) {
+    const t = (p0 - math.dotVec3(origin, n)) / math.dotVec3(direction, n);
+    if (t < 0)
+    {
+        return null;
+    }
+    else
+    {
+        const worldPos = math.vec3();
+        math.mulVec3Scalar(direction, t, worldPos);
+        math.addVec3(origin, worldPos, worldPos);
+        return worldPos;
+    }
+};
+
 export function transformToNode(from, to, vec) {
     const fromRec = from.getBoundingClientRect();
     const toRec = to.getBoundingClientRect();
@@ -280,9 +299,15 @@ export class Label3D {
         this._mid   = math.vec3();
         this._end   = math.vec3();
         this._yOff  = 0;
-        this._betweenWires = false;
         this.__visible = true;
 
+        this._updatePos = () => {
+            toClipSpace(camera, this._start, tmpVec4a);
+            math.mulVec4Scalar(tmpVec4a, 1.0 / tmpVec4a[3]);
+            toCanvasSpace(scene.canvas.canvas, parentElement, tmpVec4a, tmpVec2a);
+            this._label.setPos(tmpVec2a[0], tmpVec2a[1]);
+        };
+
         const setPosOnWire = (p0, p1, yOff) => {
             p0[0] += p1[0];
             p0[1] += p1[1];
@@ -290,36 +315,44 @@ export class Label3D {
             this._label.setPos(p0[0], p0[1] + yOff);
         };
 
-        this._updatePositions = () => {
-            if (! this.__visible) {
-                return;
+        this._updatePosBetween = () => {
+            const visibleA = clipSegment(scene, parentElement, this._start, this._mid, tmpVec2a, tmpVec2b);
+            const visibleB = clipSegment(scene, parentElement, this._end,   this._mid, tmpVec2c, tmpVec2d);
+            this._label.setCulled(! (visibleA || visibleB));
+            if (visibleA && visibleB) {
+                tmpVec2b[0] += tmpVec2d[0];
+                tmpVec2b[1] += tmpVec2d[1];
+                math.mulVec2Scalar(tmpVec2b, .5);
+
+                tmpVec2b[0] += tmpVec2a[0] + tmpVec2c[0];
+                tmpVec2b[1] += tmpVec2a[1] + tmpVec2c[1];
+                math.mulVec2Scalar(tmpVec2b, 1/3);
+                this._label.setPos(tmpVec2b[0], tmpVec2b[1]);
+            } else if (visibleA) {
+                setPosOnWire(tmpVec2a, tmpVec2b, 0);
+            } else if (visibleB) {
+                setPosOnWire(tmpVec2c, tmpVec2d, 0);
             }
-            if (this._betweenWires) {
-                const visibleA = clipSegment(scene, parentElement, this._start, this._mid, tmpVec2a, tmpVec2b);
-                const visibleB = clipSegment(scene, parentElement, this._end,   this._mid, tmpVec2c, tmpVec2d);
-                this._label.setCulled(! (visibleA || visibleB));
-                if (visibleA && visibleB) {
-                    tmpVec2b[0] += tmpVec2d[0];
-                    tmpVec2b[1] += tmpVec2d[1];
-                    math.mulVec2Scalar(tmpVec2b, .5);
-
-                    tmpVec2b[0] += tmpVec2a[0] + tmpVec2c[0];
-                    tmpVec2b[1] += tmpVec2a[1] + tmpVec2c[1];
-                    math.mulVec2Scalar(tmpVec2b, 1/3);
-                    this._label.setPos(tmpVec2b[0], tmpVec2b[1]);
-                } else if (visibleA) {
-                    setPosOnWire(tmpVec2a, tmpVec2b, 0);
-                } else if (visibleB) {
-                    setPosOnWire(tmpVec2c, tmpVec2d, 0);
-                }
-            } else {
-                const visible = (clipSegment(scene, parentElement, this._start, this._end, tmpVec2a, tmpVec2b)
-                                 &&
-                                 (math.distVec2(tmpVec2a, tmpVec2b) >= this._labelMinAxisLength));
-                this._label.setCulled(!visible);
-                if (visible) {
-                    setPosOnWire(tmpVec2a, tmpVec2b, this._yOff);
-                }
+        };
+
+        this._updatePosOnWire = () => {
+            const visible = (clipSegment(scene, parentElement, this._start, this._end, tmpVec2a, tmpVec2b)
+                             &&
+                             (math.distVec2(tmpVec2a, tmpVec2b) >= this._labelMinAxisLength));
+            this._label.setCulled(!visible);
+            if (visible) {
+                setPosOnWire(tmpVec2a, tmpVec2b, this._yOff);
+            }
+        };
+
+        let posUpdate = () => { };
+        this._setUpdatePositions = (_posUpdate) => {
+            posUpdate = _posUpdate;
+            this._updatePositions();
+        };
+        this._updatePositions = () => {
+            if (this.__visible) {
+                posUpdate();
             }
         };
 
@@ -337,21 +370,24 @@ export class Label3D {
         };
     }
 
+    setPos(p0) {
+        this._start.set(p0);
+        this._setUpdatePositions(this._updatePos);
+    }
+
     setPosOnWire(p0, p1, yOff, labelMinAxisLength) {
         this._start.set(p0);
         this._end.set(p1);
         this._yOff = yOff;
         this._labelMinAxisLength = labelMinAxisLength;
-        this._betweenWires = false;
-        this._updatePositions();
+        this._setUpdatePositions(this._updatePosOnWire);
     }
 
     setPosBetween(p0, p1, p2) {
         this._start.set(p0);
         this._mid.set(p1);
         this._end.set(p2);
-        this._betweenWires = true;
-        this._updatePositions();
+        this._setUpdatePositions(this._updatePosBetween);
     }
 
     setFillColor(value) {
@@ -454,6 +490,51 @@ export class Wire3D {
 
 }
 
+export const marker3D = function(scene, color) {
+    const marker = new Dot3D(scene, {}, scene.canvas.canvas.parentNode, {
+        borderColor: "white",
+        fillColor: color,
+        zIndex: 100
+    });
+
+    return {
+        update: function(worldPos) {
+            if (worldPos)
+            {
+                marker.worldPos = worldPos;
+            }
+            marker.setVisible(!!worldPos);
+        },
+
+        setFillColor:  c => marker.setFillColor(c),
+        setHighlighted: h => marker.setHighlighted(h),
+        getCanvasPos:  () => marker.canvasPos,
+        getWorldPos:   () => marker.worldPos,
+        destroy:       () => marker.destroy()
+    };
+};
+
+export const wire3D = function(scene, color) {
+    const wire = new Wire3D(scene, scene.canvas.canvas.ownerDocument.body, {
+        color: color,
+        thickness: 1,
+        thicknessClickable: 6   // TODO: Remove to make not clickable?
+    });
+    wire.setVisible(false);
+    return {
+        update: (startWorldPos, endWorldPos) => {
+            if (endWorldPos)
+            {
+                wire.setEnds(startWorldPos, endWorldPos);
+            }
+            wire.setVisible(!!endWorldPos);
+        },
+
+        setColor: c => wire.setColor(c),
+        destroy: () => wire.destroy()
+    };
+};
+
 export function activateDraggableDot(dot, cfg) {
     const extractCFG = function(propName, defaultValue) {
         if (propName in cfg) {
@@ -768,3 +849,480 @@ export const touchPointSelector = function(viewer, pointerCircle, ray2WorldPos)
         return cleanup;
     };
 };
+
+export const triangulateEarClipping = function(planeCoords) {
+    const polygonVertices = [ ];
+    for (let i = 0; i < planeCoords.length; ++i)
+        polygonVertices.push(i);
+
+    const isCCW = (function() {
+        const ba = math.vec2();
+        const bc = math.vec2();
+
+        let anglesSum = 0;
+        const angles = [ ];
+
+        for (let i = 0; i < polygonVertices.length; ++i)
+        {
+            const a = planeCoords[polygonVertices[i]];
+            const b = planeCoords[polygonVertices[(i + 1) % polygonVertices.length]];
+            const c = planeCoords[polygonVertices[(i + 2) % polygonVertices.length]];
+
+            math.subVec2(a, b, ba);
+            math.subVec2(c, b, bc);
+
+            const theta = math.dotVec2(ba, bc) / Math.sqrt(math.sqLenVec2(ba) * math.sqLenVec2(bc));
+            const angle = Math.acos(Math.max(-1, Math.min(theta, 1)));
+            const convex = (ba[0] * bc[1] - ba[1] * bc[0]) >= 0;
+            anglesSum += convex ? angle : (2 * Math.PI - angle);
+        }
+
+        return anglesSum < (polygonVertices.length * Math.PI);
+    })();
+
+    const pointInTriangle = (function() {
+        const sign = (p1, p2, p3) => {
+            return (p1[0] - p3[0]) * (p2[1] - p3[1]) - (p2[0] - p3[0]) * (p1[1] - p3[1]);
+        };
+
+        return (pt, v1, v2, v3) => {
+            const d1 = sign(pt, v1, v2);
+            const d2 = sign(pt, v2, v3);
+            const d3 = sign(pt, v3, v1);
+
+            const has_neg = (d1 < 0) || (d2 < 0) || (d3 < 0);
+            const has_pos = (d1 > 0) || (d2 > 0) || (d3 > 0);
+
+            return !(has_neg && has_pos);
+        };
+    })();
+
+    const baseTriangles = [ ];
+
+    const vertices = (isCCW ? polygonVertices : polygonVertices.slice(0).reverse()).map(i => ({ idx: i }));
+    vertices.forEach((v, i) => {
+        v.prev = vertices[(i - 1 + vertices.length) % vertices.length];
+        v.next = vertices[(i + 1)                   % vertices.length];
+    });
+
+    const ba = math.vec2();
+    const bc = math.vec2();
+
+    while (vertices.length > 2) {
+        let earIdx = 0;
+        while (true) {
+            if (earIdx >= vertices.length)
+            {
+                throw `isCCW = ${isCCW}; earIdx = ${earIdx}; len = ${vertices.length}`;
+            }
+            const v = vertices[earIdx];
+
+            const a = planeCoords[v.prev.idx];
+            const b = planeCoords[v.idx];
+            const c = planeCoords[v.next.idx];
+
+            math.subVec2(a, b, ba);
+            math.subVec2(c, b, bc);
+
+            if (((ba[0] * bc[1] - ba[1] * bc[0]) >= 0) // a convex vertex
+                &&
+                vertices.every( // no other vertices inside
+                    vv => ((vv === v)
+                           ||
+                           (vv === v.prev)
+                           ||
+                           (vv === v.next)
+                           ||
+                           !pointInTriangle(planeCoords[vv.idx], a, b, c))))
+                break;
+            ++earIdx;
+        }
+
+        const ear = vertices[earIdx];
+        vertices.splice(earIdx, 1);
+
+        baseTriangles.push([ ear.idx, ear.next.idx, ear.prev.idx ]);
+
+        const prev = ear.prev;
+        prev.next = ear.next;
+        const next = ear.next;
+        next.prev = ear.prev;
+    }
+
+    return [ planeCoords, baseTriangles, isCCW ];
+};
+
+export const addMousePressListener = function(element, onChange) {
+    const moveTolerance = 4;
+
+    const copyElementPos = (event, out) => {
+        out[0] = event.clientX;
+        out[1] = event.clientY;
+        transformToNode(element.ownerDocument.documentElement, element, out);
+        return out;
+    };
+
+    let buttonDown = false;
+
+    const cleanups = [ ];
+    const cleanup = () => cleanups.forEach(c => c());
+
+    const addElementEventListener = (type, listener) => {
+        element.addEventListener(type, listener);
+        cleanups.push(() => element.removeEventListener(type, listener));
+    };
+
+    const downPos = math.vec2();
+    addElementEventListener("mousedown", function(event) {
+        if (event.which === 1) {
+            buttonDown = true;
+            onChange(copyElementPos(event, downPos));
+        }
+    });
+
+    addElementEventListener("mousemove", function(event) {
+        copyElementPos(event, tmpVec2a);
+        if (buttonDown && (math.distVec2(downPos, tmpVec2a) > moveTolerance)) {
+            buttonDown = false;
+        }
+        if (buttonDown || (! event.buttons & 1)) {
+            onChange(tmpVec2a);
+        }
+    });
+
+    addElementEventListener("mouseup", function(event) {
+        if ((event.which === 1) && buttonDown) {
+            const commit = onChange(copyElementPos(event, tmpVec2a));
+            if (commit) {
+                cleanup();
+                commit();
+            }
+        }
+    });
+
+    return cleanup;
+};
+
+export const addTouchPressListener = function(element, cameraControl, pointerCircle, onChange) {
+    const longTouchTimeoutMs = 300;
+    const moveTolerance = 20;
+    const startPos = math.vec2();
+
+    const copyElementPos = (event, out) => {
+        out[0] = event.clientX;
+        out[1] = event.clientY;
+        transformToNode(element.ownerDocument.documentElement, element, out);
+        return out;
+    };
+
+    let longTouchTimeout = null;
+    let onSingleTouchMove = nop;
+    let startTouchIdentifier;
+
+    const resetAction = function() {
+        clearTimeout(longTouchTimeout);
+        pointerCircle.stop();
+        cameraControl.active = true;
+        onSingleTouchMove = nop;
+        startTouchIdentifier = null;
+    };
+
+    const cleanups = [ ];
+    const cleanup = () => cleanups.forEach(c => c());
+
+    const addElementEventListener = (type, listener) => {
+        element.addEventListener(type, listener, {passive: true});
+        cleanups.push(() => element.removeEventListener(type, listener));
+    };
+
+    addElementEventListener("touchstart", function(event) {
+        const touches = event.touches;
+
+        if (touches.length !== 1)
+        {
+            resetAction();
+            onChange(null);
+        }
+        else
+        {
+            const touch = touches[0];
+            copyElementPos(touch, startPos);
+
+            startTouchIdentifier = touch.identifier;
+
+            onSingleTouchMove = elementPos => {
+                if (math.distVec2(startPos, elementPos) > moveTolerance)
+                {
+                    resetAction();
+                }
+            };
+
+            longTouchTimeout = setTimeout(
+                function() {
+                    pointerCircle.start(startPos);
+
+                    longTouchTimeout = setTimeout(
+                        function() {
+                            pointerCircle.stop();
+                            cameraControl.active = false;
+                            onSingleTouchMove = onChange;
+                            onSingleTouchMove(startPos);
+                        },
+                        longTouchTimeoutMs);
+                },
+                250);
+        }
+    });
+
+    // element.addEventListener("touchcancel", e => console.log("touchcancel", e), {passive: true});
+
+    addElementEventListener("touchmove", function(event) {
+        const touch = [...event.changedTouches].find(e => e.identifier === startTouchIdentifier);
+        if (touch)
+        {
+            onSingleTouchMove(copyElementPos(touch, tmpVec2a));
+        }
+    });
+
+    addElementEventListener("touchend", function(event) {
+        const touch = [...event.changedTouches].find(e => e.identifier === startTouchIdentifier);
+        if (touch)
+        {
+            const commit = onChange(copyElementPos(touch, tmpVec2a));
+            resetAction();
+	    if (commit) {
+	        cleanup();
+		commit();
+	    } else {
+                onChange(null);
+            }
+        }
+    });
+
+    return () => {
+        resetAction();
+        cleanup();
+    };
+};
+
+export const startPolygonCreate = function(scene, pointerLens, addPressListener, pickRayResult, onChange, onConclude) {
+    const canvas = scene.canvas.canvas;
+
+    const updatePointerLens = (pointerLens
+                               ? function(canvasPos, isSnapped) {
+                                   pointerLens.visible = !! canvasPos;
+                                   if (canvasPos)
+                                   {
+                                       pointerLens.canvasPos = canvasPos;
+                                       pointerLens.snapped = !! isSnapped;
+                                   }
+                               }
+                               : () => { });
+
+    const testLastSegmentIntersects = (function() {
+        const onSegment = (p, q, r) => ((q[0] <= Math.max(p[0], r[0])) &&
+                                        (q[0] >= Math.min(p[0], r[0])) &&
+                                        (q[1] <= Math.max(p[1], r[1])) &&
+                                        (q[1] >= Math.min(p[1], r[1])));
+
+        const orient = (p, q, r) => {
+            const val = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
+            // collinear
+            // clockwise
+            // counterclockwise
+            return ((val === 0) ? 0 : ((val > 0) ? 1 : 2));
+        };
+
+        return function(pos2D, lastSegmentClosesLoop) {
+            const s = lastSegmentClosesLoop ? 1 : 0;
+            const a = pos2D[(pos2D.length - 2 + s) % pos2D.length];
+            const b = pos2D[(pos2D.length - 1 + s) % pos2D.length];
+
+            for (let i = s; i < pos2D.length - 2 - 1 + s; ++i) {
+                const c = pos2D[i];
+                const d = pos2D[i + 1];
+
+                const o1 = orient(a, b, c);
+                const o2 = orient(a, b, d);
+                const o3 = orient(c, d, a);
+                const o4 = orient(c, d, b);
+
+                if (((o1 !== o2) && (o3 !== o4))       || // General case
+                    ((o1 === 0) && onSegment(a, c, b)) || // a, b and c are collinear and c lies on segment ab
+                    ((o2 === 0) && onSegment(a, d, b)) || // a, b and d are collinear and d lies on segment ab
+                    ((o3 === 0) && onSegment(c, a, d)) || // c, d and a are collinear and a lies on segment cd
+                    ((o4 === 0) && onSegment(c, b, d)))   // c, d and b are collinear and b lies on segment cd
+                {
+                    return true;
+                }
+            }
+
+            return false;
+        };
+    })();
+
+    const getPlane = (points) => (points.length >= 3) && (function() {
+        const u      = math.normalizeVec3(math.subVec3(points[1], points[0], math.vec3()));
+        const v20    = math.normalizeVec3(math.subVec3(points[2], points[0], tmpVec3a));
+        const normal = math.normalizeVec3(math.cross3Vec3(u, v20, math.vec3()));
+        const v      = math.normalizeVec3(math.cross3Vec3(normal, u, math.vec3()));
+        return {
+            normal: normal,
+            origin: math.vec3(points[0]),
+            u:      u,
+            v:      v
+        };
+    })();
+
+    const vertices = [ ];
+    let currentInteraction;
+
+    (function selectNextPoint() {
+        const plane = getPlane(vertices);
+
+        const canvasPos2Ray = (canvasPos, dst) => (math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, scene.camera.projection, canvasPos, dst.origin, dst.direction), dst);
+
+        const pickRay = (ray) => {
+            const pickResult = pickRayResult(ray);
+            const snapWorldPos = pickResult && pickResult.entity && ((! plane) || pickResult.snapped) && pickResult.worldPos;
+            if (plane) {
+                const originDistance = math.dotVec3(plane.normal, plane.origin);
+                const snapPlaneDist = (snapWorldPos
+                                       ? ((originDistance - math.dotVec3(snapWorldPos, plane.normal)))
+                                       : window.Infinity);
+                if (Math.abs(snapPlaneDist) < 0.0001) {
+                    const ret = math.vec3();
+                    return {
+                        worldPos: math.addVec3(snapWorldPos, math.mulVec3Scalar(plane.normal, snapPlaneDist, ret), ret),
+                        snapped:  true
+                    };
+                } else {
+                    return {
+                        worldPos: planeIntersect(originDistance, plane.normal, ray.origin, ray.direction),
+                        snapped:  false
+                    };
+                }
+            } else {
+                return {
+                    worldPos: snapWorldPos,
+                    snapped:  pickResult && pickResult.snapped
+                };
+            }
+        };
+
+        let placeVertex = false;
+        const removePressListener = addPressListener(
+            (inputCanvasPos) => {
+                const rayPick = inputCanvasPos && pickRay(canvasPos2Ray(inputCanvasPos, tmpRay));
+                const worldPos = rayPick && rayPick.worldPos;
+                return onWorldPos(worldPos, inputCanvasPos, rayPick && rayPick.snapped);
+            });
+
+        const onWorldPos = (worldPos, inputCanvasPos, rayPickSnapped) => {
+                const canvasPos = worldPos ? scene.camera.projectWorldPos(worldPos) : inputCanvasPos;
+                const firstMarker = (vertices.length > 0) && (function() {
+                    const v = vertices[0];
+                    return {
+                        canvasPos: scene.camera.projectWorldPos(v),
+                        worldPos: v
+                    };
+                })();
+                const snapToFirst = (vertices.length >= 3) && ((canvasPos && (math.distVec2(canvasPos, firstMarker.canvasPos) < 10))
+                                                               ||
+                                                               (worldPos && math.compareVec3(worldPos, firstMarker.worldPos)));
+
+                updatePointerLens(snapToFirst ? firstMarker.canvasPos : canvasPos, snapToFirst || rayPickSnapped);
+
+                const lastPointOverlaps = (inputCanvasPos
+                                           &&
+                                           ((! worldPos)
+                                            ||
+                                            ((vertices.length < 3)
+                                             ? vertices.some(v => math.compareVec3(v, worldPos))
+                                             : math.compareVec3(vertices[vertices.length - 1], worldPos))));
+
+                const points = vertices.concat(((! snapToFirst) && worldPos && (! lastPointOverlaps)) ? [worldPos] : []);
+
+                const curPlane = (! lastPointOverlaps) && (plane || getPlane(points));
+
+                const uvs = curPlane && points.map(p => {
+                    math.subVec3(p, curPlane.origin, tmpVec3a);
+                    return math.vec2([ math.dotVec3(tmpVec3a, curPlane.u), math.dotVec3(tmpVec3a, curPlane.v) ]);
+                });
+
+                const isValid = (! lastPointOverlaps) && (! (uvs && testLastSegmentIntersects(uvs, snapToFirst)));
+                const geometry = isValid && uvs && (snapToFirst || (! testLastSegmentIntersects(uvs, true))) && (function() {
+                    try {
+                        const [ baseVertices, baseTriangles, isCCW ] = triangulateEarClipping(uvs);
+                        return {
+                            faces: baseTriangles,
+                            vertices: baseVertices.map(uv => math.addVec3(
+                                curPlane.origin,
+                                math.addVec3(
+                                    math.mulVec3Scalar(curPlane.u, uv[0], tmpVec3a),
+                                    math.mulVec3Scalar(curPlane.v, uv[1], tmpVec3b),
+                                    tmpVec3a),
+                                math.vec3()))
+                        };
+                    } catch (e) {
+                        console.warn("e", e);
+                        return false;
+                    }
+                })();
+
+                onChange(points, snapToFirst, isValid, geometry);
+
+                return placeVertex = (isValid && (snapToFirst
+                                                  ? () => {
+                                                      updatePointerLens(null);
+                                                      onConclude();
+                                                  }
+                                                  : () => {
+                                                      vertices.push(math.vec3(worldPos));
+                                                      updatePointerLens(null);
+                                                      selectNextPoint();
+                                                  }));
+            };
+
+        currentInteraction = {
+            closePolygon: (() => {
+                const commit = (vertices.length >= 3) && onWorldPos(vertices[0]);
+                if (commit) {
+                    removePressListener();
+                    commit();
+                }
+                return !! commit;
+            }),
+            placeVertex: () => {
+                if (placeVertex) {
+                    removePressListener();
+                    placeVertex();
+                }
+                return !!placeVertex;
+            },
+            popVertex: () => {
+                if (vertices.length > 0) {
+                    removePressListener();
+                    vertices.pop();
+                    selectNextPoint();
+                    return true;
+                } else {
+                    return false;
+                }
+            },
+            removePressListener: removePressListener,
+            updateOnChange: () => onWorldPos()
+        };
+    })();
+
+    return {
+        cancel: () => {
+            currentInteraction.removePressListener();
+            updatePointerLens(null);
+        },
+        closePolygon:   () => currentInteraction.closePolygon(),
+        placeVertex:    () => currentInteraction.placeVertex(),
+        popVertex:      () => currentInteraction.popVertex(),
+        updateOnChange: () => currentInteraction.updateOnChange()
+    };
+};