@xeokit/xeokit-sdk 2.6.71 → 2.6.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.71",
+  "version": "2.6.72",
   "description": "3D BIM IFC Viewer SDK for AEC engineering applications. Open Source JavaScript Toolkit based on pure WebGL for top performance, real-world coordinates and full double precision",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/extras/ContextMenu/ContextMenu.js

@@ -282,6 +282,7 @@ class ContextMenu {
      * @param {Boolean} [cfg.enabled=true] Whether this ````ContextMenu```` is initially enabled. {@link ContextMenu#show} does nothing while this is ````false````.
      * @param {Boolean} [cfg.hideOnMouseDown=true] Whether this ````ContextMenu```` automatically hides whenever we mouse-down or tap anywhere in the page.
      * @param {Boolean} [cfg.hideOnAction=true] Whether this ````ContextMenu```` automatically hides after we select a menu item. Se false if we want the menu to remain shown and show any updates to its item titles, after we've selected an item.
+     * @param {Node | undefined} [cfg.parentNode] Optional reference to an existing DOM Node (e.g. ShadowRoot), to which the menu's HTML element will be appended, defaults to ````document.body````.
      */
     constructor(cfg = {}) {
 
@@ -296,6 +297,7 @@ class ContextMenu {
         this._itemMap = {};     // Items mapped to their IDs
         this._shown = false;    // True when the ContextMenu is visible
         this._nextId = 0;
+        this._parentNode = cfg.parentNode || document.body;
 
         /**
          * Subscriptions to events fired at this ContextMenu.
@@ -304,12 +306,12 @@ class ContextMenu {
         this._eventSubs = {};
 
         if (cfg.hideOnMouseDown !== false) {
-            document.addEventListener("mousedown", (event) => {
+            this._parentNode.addEventListener("mousedown", (event) => {
                 if (!event.target.classList.contains("xeokit-context-menu-item")) {
                     this.hide();
                 }
             });
-            document.addEventListener("touchstart", this._canvasTouchStartHandler = (event) => {
+            this._parentNode.addEventListener("touchstart", this._canvasTouchStartHandler = (event) => {
                 if (!event.target.classList.contains("xeokit-context-menu-item")) {
                     this.hide();
                 }
@@ -613,7 +615,10 @@ class ContextMenu {
         const groups = menu.groups;
         const html = [];
 
-        html.push('<div class="xeokit-context-menu ' + menu.id + '" style="z-index:300000; position: absolute;">');
+        const menuElement= document.createElement("div");
+        menuElement.classList.add("xeokit-context-menu", menu.id);
+        menuElement.style.zIndex = 300000;
+        menuElement.style.position = "absolute";
 
         html.push('<ul>');
 
@@ -664,13 +669,10 @@ class ContextMenu {
         }
 
         html.push('</ul>');
-        html.push('</div>');
 
         const htmlString = html.join("");
-
-        document.body.insertAdjacentHTML('beforeend', htmlString);
-
-        const menuElement = document.querySelector("." + menu.id);
+        menuElement.innerHTML = htmlString;
+        this._parentNode.appendChild(menuElement);
 
         menu.menuElement = menuElement;
 
@@ -704,7 +706,7 @@ class ContextMenu {
                         const item = groupItems[j];
                         const itemSubMenu = item.subMenu;
 
-                        item.itemElement = document.getElementById(item.id);
+                        item.itemElement = this._parentNode.querySelector(`#${item.id}`);
 
                         if (!item.itemElement) {
                             console.error("ContextMenu item element not found: " + item.id);

package/src/plugins/AnnotationsPlugin/Annotation.js

@@ -7,6 +7,8 @@ const tempVec3a = math.vec3();
 const tempVec3b = math.vec3();
 const tempVec3c = math.vec3();
 
+const px = x => x + "px";
+
 /**
  * A {@link Marker} with an HTML label attached to it, managed by an {@link AnnotationsPlugin}.
  *
@@ -213,22 +215,29 @@ class Annotation extends Marker {
      * @private
      */
     _updateWithCurWidths() {
-        const px = x => x + "px";
         const boundary = this.scene.canvas.boundary;
         const left = boundary[0] + this.canvasPos[0];
         const top  = boundary[1] + this.canvasPos[1];
-        const markerWidth = this._curMarkerWidth;
-        const markerDir = (this._markerAlign === "right") ? -1 : ((this._markerAlign === "center") ? 0 : 1);
-        const markerCenter = left + markerDir * (markerWidth / 2 - 12);
-        this._marker.style.left = px(markerCenter - markerWidth / 2);
-        this._marker.style.top  = px(top - 12);
-        this._marker.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
-
-        const labelWidth = this._curLabelWidth;
-        const labelDir = Math.sign(this._labelPosition);
-        this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
+        this._marker.style.top = px(top - 12);
         this._label.style.top  = px(top - 17);
-        this._label.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
+
+        if (this._markerAlign === "legacy") {
+            this._marker.style.left = px(left - 12);
+            this._label.style.left  = px(left + 40);
+        } else {
+            const markerWidth = this._curMarkerWidth;
+            const markerDir = (this._markerAlign === "right") ? -1 : ((this._markerAlign === "center") ? 0 : 1);
+            const markerCenter = left + markerDir * (markerWidth / 2 - 12);
+            this._marker.style.left = px(markerCenter - markerWidth / 2);
+
+            const labelWidth = this._curLabelWidth;
+            const labelDir = Math.sign(this._labelPosition);
+            this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
+        }
+
+        const zIndex = 90005 + Math.floor(this._viewPos[2]) + 1;
+        this._marker.style["z-index"] = zIndex;
+        this._label.style["z-index"]  = zIndex;
     }
 
     /**
@@ -259,7 +268,8 @@ class Annotation extends Marker {
      * @private
      */
     _updatePosition() {
-        if (this._curMarkerWidth === undefined) {
+        const isLegacy = this._markerAlign === "legacy";
+        if ((! isLegacy) && (this._curMarkerWidth === undefined)) {
             this._updateIfWidthsChanged();
         } else {
             // Update position with cached width values
@@ -267,7 +277,9 @@ class Annotation extends Marker {
             // so they don't interfere with e.g. interactive scene manipulation
             this._updateWithCurWidths();
             window.clearTimeout(this._widthTimeout);
-            this._widthTimeout = window.setTimeout(() => this._updateIfWidthsChanged(), 500);
+            if (! isLegacy) {
+                this._widthTimeout = window.setTimeout(() => this._updateIfWidthsChanged(), 500);
+            }
         }
     }
 
@@ -305,10 +317,10 @@ class Annotation extends Marker {
     /**
      * Sets the horizontal alignment of the Annotation's marker HTML.
      *
-     * @param {String} align Either "left", "center", "right" (default "left")
+     * @param {String} align Either "left", "center", "right", "legacy" (default "left")
      */
     setMarkerAlign(align) {
-        const valid = [ "left", "center", "right" ];
+        const valid = [ "left", "center", "right", "legacy" ];
         if (! valid.includes(align)) {
             this.error("Param 'align' should be one of: " + JSON.stringify(valid));
         } else {

package/src/plugins/NavCubePlugin/CubeTextureCanvas.js

@@ -8,6 +8,7 @@ function CubeTextureCanvas(viewer, navCubeScene, cfg = {}) {
     const cubeColor = "lightgrey";
     const cubeHighlightColor = cfg.hoverColor || "rgba(0,0,0,0.4)";
     const textColor = cfg.textColor || "black";
+    const parentNode = cfg.canvasElement || document.body;
 
     const height = 500;
     const width = height + (height / 3);
@@ -119,8 +120,7 @@ function CubeTextureCanvas(viewer, navCubeScene, cfg = {}) {
     this._textureCanvas.style.visibility = "hidden";
     this._textureCanvas.style["z-index"] = 2000000;
 
-    const body = document.getElementsByTagName("body")[0];
-    body.appendChild(this._textureCanvas);
+    parentNode.appendChild(this._textureCanvas);
 
     const context = this._textureCanvas.getContext("2d");
 

package/src/plugins/NavCubePlugin/NavCubePlugin.js

@@ -115,7 +115,7 @@ class NavCubePlugin extends Plugin {
             this._navCubeScene = new Scene(viewer, {
                 canvasId: cfg.canvasId,
                 canvasElement: cfg.canvasElement,
-                transparent: true
+                transparent: true,
             });
 
             this._navCubeCanvas = this._navCubeScene.canvas.canvas;
@@ -361,7 +361,7 @@ class NavCubePlugin extends Plugin {
                 }
             });
 
-            document.addEventListener("mouseup", self._onMouseUp = function (e) {
+            self._navCubeCanvas.addEventListener("mouseup", self._onMouseUp = function (e) {
                 if (e.which !== 1) {// Left button
                     return;
                 }
@@ -378,7 +378,7 @@ class NavCubePlugin extends Plugin {
                     if (hit.uv) {
                         var areaId = self._cubeTextureCanvas.getArea(hit.uv);
                         if (areaId >= 0) {
-                            document.body.style.cursor = "pointer";
+                            self._navCubeCanvas.style.cursor = "pointer";
                             if (lastAreaId >= 0) {
                                 self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                                 self._repaint();
@@ -404,7 +404,7 @@ class NavCubePlugin extends Plugin {
                                             self._repaint();
                                             lastAreaId = -1;
                                         }
-                                        document.body.style.cursor = "pointer";
+                                        self._navCubeCanvas.style.cursor = "pointer";
                                         if (lastAreaId >= 0) {
                                             self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                                             self._repaint();
@@ -423,7 +423,7 @@ class NavCubePlugin extends Plugin {
                 }
             });
 
-            document.addEventListener("mousemove", self._onMouseMove = function (e) {
+            self._navCubeCanvas.addEventListener("mousemove", self._onMouseMove = function (e) {
                 if (lastAreaId >= 0) {
                     self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                     self._repaint();
@@ -435,7 +435,7 @@ class NavCubePlugin extends Plugin {
                 if (down) {
                     var posX = e.clientX;
                     var posY = e.clientY;
-                    document.body.style.cursor = "move";
+                    self._navCubeCanvas.style.cursor = "move";
                     actionMove(posX, posY);
                     return;
                 }
@@ -449,7 +449,7 @@ class NavCubePlugin extends Plugin {
                 });
                 if (hit) {
                     if (hit.uv) {
-                        document.body.style.cursor = "pointer";
+                        self._navCubeCanvas.style.cursor = "pointer";
                         var areaId = self._cubeTextureCanvas.getArea(hit.uv);
                         if (areaId === lastAreaId) {
                             return;
@@ -464,7 +464,7 @@ class NavCubePlugin extends Plugin {
                         }
                     }
                 } else {
-                    document.body.style.cursor = "default";
+                    self._navCubeCanvas.style.cursor = "default";
                     if (lastAreaId >= 0) {
                         self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                         self._repaint();
@@ -727,8 +727,8 @@ class NavCubePlugin extends Plugin {
             this._navCubeCanvas.removeEventListener("mouseleave", this._onMouseLeave);
             this._navCubeCanvas.removeEventListener("mousedown", this._onMouseDown);
 
-            document.removeEventListener("mousemove", this._onMouseMove);
-            document.removeEventListener("mouseup", this._onMouseUp);
+            this._navCubeCanvas.removeEventListener("mousemove", this._onMouseMove);
+            this._navCubeCanvas.removeEventListener("mouseup", this._onMouseUp);
 
             this._navCubeCanvas = null;
             this._cubeTextureCanvas.destroy();

package/src/plugins/SectionPlanesPlugin/Control.js

@@ -482,8 +482,8 @@ class Control {
             const canvasPos = math.vec2();
 
             const copyCanvasPos = (event, vec2) => {
-                vec2[0] = event.clientX;
-                vec2[1] = event.clientY;
+                vec2[0] = event.pageX;
+                vec2[1] = event.pageY;
                 transformToNode(canvas.ownerDocument.documentElement, canvas, vec2);
             };
 

package/src/plugins/ZonesPlugin/ZonesPlugin.js

@@ -5,159 +5,13 @@ import {ReadableGeometry} from "../../viewer/scene/geometry/ReadableGeometry.js"
 import {PhongMaterial} from "../../viewer/scene/materials/PhongMaterial.js";
 import {math} from "../../viewer/scene/math/math.js";
 import {Mesh} from "../../viewer/scene/mesh/Mesh.js";
-import {activateDraggableDots, Dot3D, Wire3D, touchPointSelector, transformToNode} from "../../../src/plugins/lib/ui/index.js";
+import {activateDraggableDots, Dot3D, marker3D, wire3D, touchPointSelector, transformToNode, triangulateEarClipping} from "../../../src/plugins/lib/ui/index.js";
 
 const hex2rgb = function(color) {
     const rgb = idx => parseInt(color.substr(idx + 1, 2), 16) / 255;
     return [ rgb(0), rgb(2), rgb(4) ];
 };
 
-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 ];
-};
-
-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);
-        },
-
-        setHighlighted: h => marker.setHighlighted(h),
-        getCanvasPos:  () => marker.canvasPos,
-        getWorldPos:   () => marker.worldPos,
-        destroy:       () => marker.destroy()
-    };
-};
-
-const wire3D = function(scene, color, startWorldPos) {
-    const wire = new Wire3D(scene, scene.canvas.canvas.ownerDocument.body, {
-        color: color,
-        thickness: 1,
-        thicknessClickable: 6
-    });
-    wire.setVisible(false);
-    return {
-        update: endWorldPos => {
-            if (endWorldPos)
-            {
-                wire.setEnds(startWorldPos, endWorldPos);
-            }
-            wire.setVisible(!!endWorldPos);
-        },
-
-        destroy: () => wire.destroy()
-    };
-};
-
 const basePolygon3D = function(scene, color, alpha) {
     let mesh = null;
 
@@ -1160,7 +1014,8 @@ const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, z
 
     (function selectNextPoint(markers) {
         const marker = marker3D(scene, zoneColor);
-        const wire = (markers.length > 0) && wire3D(scene, zoneColor, markers[markers.length - 1].getWorldPos());
+        const wire = (markers.length > 0) && wire3D(scene, zoneColor);
+        const wireStart = wire && markers[markers.length - 1].getWorldPos();
 
         cleanups.push(() => {
             marker.destroy();
@@ -1220,7 +1075,7 @@ const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, z
             () => {
                 updatePointerLens(null);
                 marker.update(null);
-                wire && wire.update(null);
+                wire && wire.update(wireStart, null);
                 basePolygon.updateBase((markers.length > 2) ? markers.map(m => m.getWorldPos()) : null);
             },
             (canvasPos, worldPos) => {
@@ -1228,7 +1083,7 @@ const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, z
                 firstMarker && firstMarker.setHighlighted(!! snappedFirst);
                 updatePointerLens(snappedFirst ? snappedFirst.canvasPos : canvasPos);
                 marker.update((! snappedFirst) && worldPos);
-                wire && wire.update(snappedFirst ? snappedFirst.worldPos : worldPos);
+                wire && wire.update(wireStart, snappedFirst ? snappedFirst.worldPos : worldPos);
                 if ((markers.length >= 2))
                 {
                     const pos = markers.map(m => m.getWorldPos()).concat(snappedFirst ? [] : [worldPos]);
@@ -1272,7 +1127,7 @@ const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, z
                 else
                 {
                     marker.update(worldPos);
-                    wire && wire.update(worldPos);
+                    wire && wire.update(wireStart, worldPos);
                     selectNextPoint(markers.concat(marker));
                 }
             });