@xeokit/xeokit-sdk 2.6.71 → 2.6.73

package/dist/xeokit-sdk.es.js

@@ -1,7 +1,7 @@
 /**
- * xeokit-sdk v2.6.71
- *  Commit: 7443626ab66b3eab0018b1ed0ee05d3bfa9f8eae
- *  Built: 2025-03-21T09:02:29.217Z
+ * xeokit-sdk v2.6.73
+ *  Commit: 3b3bb2ad8abfdf189cf4ba7f67d6798375772b7b
+ *  Built: 2025-04-10T16:46:49.684Z
  */
 
 /** @private */
@@ -330,6 +330,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 = {}) {
 
@@ -344,6 +345,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.
@@ -352,12 +354,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();
                 }
@@ -661,7 +663,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>');
 
@@ -712,13 +717,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;
 
@@ -752,7 +754,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);
@@ -11655,9 +11657,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$1 = 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;
+    }
+};
+
 function transformToNode(from, to, vec) {
     const fromRec = from.getBoundingClientRect();
     const toRec = to.getBoundingClientRect();
@@ -11919,9 +11940,15 @@ 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];
@@ -11929,36 +11956,44 @@ 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();
             }
         };
 
@@ -11976,21 +12011,24 @@ 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) {
@@ -12093,6 +12131,51 @@ class Wire3D {
 
 }
 
+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()
+    };
+};
+
+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()
+    };
+};
+
 function activateDraggableDot(dot, cfg) {
     const extractCFG = function(propName, defaultValue) {
         if (propName in cfg) {
@@ -12407,6 +12490,482 @@ const touchPointSelector = function(viewer, pointerCircle, ray2WorldPos) {
     };
 };
 
+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;
+
+        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 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;
+};
+
+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();
+    };
+};
+
+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$2));
+        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$1(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$2);
+                    return math.vec2([ math.dotVec3(tmpVec3a$2, curPlane.u), math.dotVec3(tmpVec3a$2, 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$2),
+                                    math.mulVec3Scalar(curPlane.v, uv[1], tmpVec3b$2),
+                                    tmpVec3a$2),
+                                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()
+    };
+};
+
 const tmpVec3a$1 = math.vec3();
 const tmpVec3b$1 = math.vec3();
 
@@ -14826,6 +15385,8 @@ const tempVec3a$M = math.vec3();
 const tempVec3b$B = math.vec3();
 const tempVec3c$w = math.vec3();
 
+const px = x => x + "px";
+
 /**
  * A {@link Marker} with an HTML label attached to it, managed by an {@link AnnotationsPlugin}.
  *
@@ -15032,22 +15593,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;
     }
 
     /**
@@ -15078,7 +15646,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
@@ -15086,7 +15655,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);
+            }
         }
     }
 
@@ -15124,10 +15695,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 {
@@ -26510,6 +27081,65 @@ class ReadableGeometry extends Geometry {
         return this._obb;
     }
 
+    _getMetrics() {
+        if (! ("_metrics" in this)) {
+            switch (this._state.primitiveName) {
+            case "solid":
+            case "surface":
+            case "triangles": {
+                const indices = this._state.indices;
+                const positions = this._state.positions;
+                const getPos = (i, out) => {
+                    const idx = indices[i] * 3;
+                    for (let j = 0; j < 3; ++j) {
+                        out[j] = positions[idx + j];
+                    }                    return out;
+                };
+                const tmp = [ math.vec3(), math.vec3(), math.vec3(), math.vec3() ];
+                let totalArea = 0;
+                const centroid = math.vec3([ 0, 0, 0 ]);
+                for (let i = 0; i < indices.length; i += 3) {
+                    const v0 = getPos(i,   tmp[0]);
+                    const v1 = getPos(i+1, tmp[1]);
+                    const v2 = getPos(i+2, tmp[2]);
+                    math.addVec3(v0, v1, tmp[3]);
+                    math.addVec3(v2, tmp[3], tmp[3]);
+                    const faceArea = math.lenVec3(
+                        math.cross3Vec3(
+                            math.subVec3(v1, v0, tmp[1]),
+                            math.subVec3(v2, v0, tmp[2]),
+                            tmp[0])) / 2;
+                    totalArea += faceArea;
+                    math.mulVec3Scalar(tmp[3], faceArea, tmp[3]);
+                    math.addVec3(centroid, tmp[3], centroid);
+                }
+                this._metrics = { surfaceArea: totalArea, centroid: math.mulVec3Scalar(centroid, 1 / totalArea / 3, centroid) };
+                break;
+            }
+            default:
+                this._metrics = { surfaceArea: 0 };
+                break;
+            }
+        }
+        return this._metrics;
+    }
+
+    /**
+     * Returns the surface area of this Mesh.
+     * @returns {number}
+     */
+    get surfaceArea() {
+        return this._getMetrics().surfaceArea;
+    }
+
+    /**
+     * Returns the centroid of this Mesh.
+     * @returns {number}
+     */
+    get centroid() {
+        return this._getMetrics().centroid;
+    }
+
     /**
      * Approximate number of triangles in this ReadableGeometry.
      *
@@ -40058,7 +40688,7 @@ function buildPlaneGeometry(cfg = {}) {
             positions[offset + 1] = centerY;
             positions[offset + 2] = -z + centerZ;
 
-            normals[offset + 2] = -1;
+            normals[offset + 1] = 1;
 
             uvs[offset2] = (ix) / planeX;
             uvs[offset2 + 1] = ((planeZ - iz) / planeZ);
@@ -43356,8 +43986,7 @@ class SectionCaps {
         if(!this._resourcesAllocated) {
             this._resourcesAllocated = true;
             this._sectionPlanes = [];
-            this._verticesMap = {};
-            this._indicesMap = {};
+            this._sceneModelsData = {};
             this._dirtyMap = {};
             this._prevIntersectionModelsMap = {};
             this._sectionPlaneTimeout = null;
@@ -43372,7 +44001,8 @@ class SectionCaps {
                 this._sectionPlanes.push(sectionPlane);
                 sectionPlane.on('pos', onSectionPlaneUpdated);
                 sectionPlane.on('dir', onSectionPlaneUpdated);
-                sectionPlane.once('destroyed', ((sectionPlane) => {
+                sectionPlane.on('active', onSectionPlaneUpdated);
+                sectionPlane.once('destroyed', (() => {
                     const sectionPlaneId = sectionPlane.id;
                     if (sectionPlaneId) {
                         this._sectionPlanes = this._sectionPlanes.filter((sectionPlane) => sectionPlane.id !== sectionPlaneId);
@@ -43389,13 +44019,19 @@ class SectionCaps {
 
             this._onTick = this.scene.on("tick", () => {
                 //on ticks we only check if there is a model that we have saved vertices for,
-                //but it's no more available on the scene
-                for(const key in this._verticesMap) {
-                    if(!this.scene.models[key]){
-                        delete this._verticesMap[key];
-                        delete this._indicesMap[key];
-                        this._update();
-                    }
+                //but it's no more available on the scene, or if its visibility changed
+                let dirty = false;
+                for(const sceneModelId in this._sceneModelsData) {
+                    if(!this.scene.models[sceneModelId]){
+                        delete this._sceneModelsData[sceneModelId];
+                        dirty = true;
+                    } else if (this._sceneModelsData[sceneModelId].visible !== (!!this.scene.models[sceneModelId].visible)) {
+                        this._sceneModelsData[sceneModelId].visible = !!this.scene.models[sceneModelId].visible;
+                        dirty = true;
+                    }
+                }
+                if (dirty) {
+                    this._update();
                 }
             });
         }
@@ -43412,8 +44048,8 @@ class SectionCaps {
         this._deletePreviousModels();
         this._updateTimeout = setTimeout(() => {
             clearTimeout(this._updateTimeout);
-            const sceneModels = Object.keys(this.scene.models).map((key) => this.scene.models[key]);
-            this._addHatches(sceneModels, this._sectionPlanes);
+            const sceneModels = Object.values(this.scene.models).filter(sceneModel => sceneModel.visible);
+            this._addHatches(sceneModels, this._sectionPlanes.filter(sectionPlane => sectionPlane.active));
             this._setAllDirty(false);
         }, 100);
     }
@@ -43426,21 +44062,9 @@ class SectionCaps {
 
     _addHatches(sceneModels, planes) {
 
-        if (planes.length <= 0) return;
-
         planes.forEach((plane) => {
             sceneModels.forEach((sceneModel) => {
-                //#region creating a plane equation
-                //we create a plane equation that will be used to slice through each triangle
-                const planeEquation = {
-                    A: plane.dir[0],
-                    B: plane.dir[1],
-                    C: plane.dir[2],
-                    D: -(plane.dir[0] * plane.pos[0] + plane.dir[1] * plane.pos[1] + plane.dir[2] * plane.pos[2])
-                };
-                //#endregion
-                
-                if(!this._doesPlaneIntersectBoundingBox(sceneModel.aabb, planeEquation)) return;
+                if(!this._doesPlaneIntersectBoundingBox(sceneModel.aabb, plane)) return;
 
                 if(!this._dirtyMap[sceneModel.id]) return;
 
@@ -43462,39 +44086,35 @@ class SectionCaps {
 
                     const object = objects[objectId];
 
-                    if(!this._doesPlaneIntersectBoundingBox(object.aabb, planeEquation)) return;
+                    if(!this._doesPlaneIntersectBoundingBox(object.aabb, plane)) return;
 
-                    if(!this._verticesMap[sceneModel.id]) {
-                        this._verticesMap[sceneModel.id] = new Map();
-                        this._indicesMap[sceneModel.id] = new Map();
+                    if(!this._sceneModelsData[sceneModel.id]) {
+                        this._sceneModelsData[sceneModel.id] = {
+                            verticesMap: new Map(),
+                            indicesMap:  new Map()
+                        };
                     }
 
-                    let vertices = [], indices = [];
+                    const sceneModelData = this._sceneModelsData[sceneModel.id];
 
-                    if(!this._verticesMap[sceneModel.id].has(objectId)) {
+                    if(!sceneModelData.verticesMap.has(objectId)) {
                         const isSolid = object.meshes[0].isSolid();
+                        const vertices = [ ];
+                        const indices  = [ ];
                         if(isSolid && object.capMaterial) {
-                            object.getEachVertex((_vertices) => {
-                                vertices.push(_vertices[0], _vertices[1], _vertices[2]);
-                            });
-                            object.getEachIndex((_indices) => {
-                                indices.push(_indices);
-                            });
+                            object.getEachVertex(v => vertices.push(v[0], v[1], v[2]));
+                            object.getEachIndex(i  => indices.push(i));
                         }
-                        this._verticesMap[sceneModel.id].set(objectId, vertices);
-                        this._indicesMap[sceneModel.id].set(objectId, indices);
+                        sceneModelData.verticesMap.set(objectId, vertices);
+                        sceneModelData.indicesMap.set(objectId, indices);
                     }
-                    else {
-                        vertices = this._verticesMap[sceneModel.id].get(objectId);
-                        indices = this._indicesMap[sceneModel.id].get(objectId);
-                    }
-                    
+
+                    const vertices = sceneModelData.verticesMap.get(objectId);
+                    const indices  = sceneModelData.indicesMap.get(objectId);
+
                     const capSegments = [];
                     const vertCount = indices.length;
-                    
-                    // Preallocate intersection result array
-                    const intersectionBuffer = new Float32Array(3);
-                    
+
                     for (let i = 0; i < vertCount; i += 3) {
                         // Reuse triangle buffer instead of creating new arrays
                         for (let j = 0; j < 3; j++) {
@@ -43511,21 +44131,15 @@ class SectionCaps {
                         for (let i = 0; i < 3; i++) {
                             const p1 = triangle[i];
                             const p2 = triangle[(i + 1) % 3];
-                            
-                            // Inline the distance calculations to avoid function calls
-                            const d1 = planeEquation.A * p1[0] + planeEquation.B * p1[1] + planeEquation.C * p1[2] + planeEquation.D;
-                            const d2 = planeEquation.A * p2[0] + planeEquation.B * p2[1] + planeEquation.C * p2[2] + planeEquation.D;
-                            
+
+                            const d1 = plane.dist + math.dotVec3(plane.dir, p1);
+                            const d2 = plane.dist + math.dotVec3(plane.dir, p2);
+
                             if (d1 * d2 > 0) continue;
-                            
+
                             const t = -d1 / (d2 - d1);
-                            // Reuse intersection buffer
-                            intersectionBuffer[0] = p1[0] + t * (p2[0] - p1[0]);
-                            intersectionBuffer[1] = p1[1] + t * (p2[1] - p1[1]);
-                            intersectionBuffer[2] = p1[2] + t * (p2[2] - p1[2]);
-                            
-                            // Clone the buffer for storage
-                            intersections.push(new Float32Array(intersectionBuffer));
+
+                            intersections.push(math.lerpVec3(t, 0, 1, p1, p2, math.vec3()));
                         }
 
                         if(intersections.length === 2) capSegments.push(intersections);
@@ -43805,7 +44419,7 @@ class SectionCaps {
 
     }
 
-    _doesPlaneIntersectBoundingBox(bb, planeEquation) {
+    _doesPlaneIntersectBoundingBox(bb, plane) {
         const min = [bb[0], bb[1], bb[2]];
         const max = [bb[3], bb[4], bb[5]];
 
@@ -43825,10 +44439,7 @@ class SectionCaps {
         let hasNegative = false;
 
         for (const corner of corners) {
-            const distance = planeEquation.A * corner[0] +
-                planeEquation.B * corner[1] +
-                planeEquation.C * corner[2] +
-                planeEquation.D;
+            const distance = plane.dist + math.dotVec3(plane.dir, corner);
 
             if (distance > 0) hasPositive = true;
             if (distance < 0) hasNegative = true;
@@ -44323,13 +44934,12 @@ class Scene extends Component {
      * configures renderer logic for the specified number of SectionPlanes, eliminating the need for setting up logic with each SectionPlane creation and thereby enhancing
      * responsiveness. It is important to consider that each SectionPlane imposes rendering performance, so it is recommended to set this value to a quantity that aligns with
      * your expected usage.
-     * @throws {String} Throws an exception when both canvasId or canvasElement are missing or they aren't pointing to a valid HTMLCanvasElement.
+     * @throws {String} Throws an exception when  canvasId or canvasElement are missing or they aren't pointing to a valid HTMLCanvasElement.
      */
     constructor(viewer, cfg = {}) {
 
         super(null, cfg);
-
-        const canvas = cfg.canvasElement || document.getElementById(cfg.canvasId);
+        const canvas = cfg.canvasElement || document.querySelector(`#${cfg.canvasId}`);
 
         if (!(canvas instanceof HTMLCanvasElement)) {
             throw "Mandatory config expected: valid canvasId or canvasElement";
@@ -123577,6 +124187,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);
@@ -123686,8 +124297,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");
 
@@ -123957,7 +124567,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;
@@ -124190,7 +124800,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;
                 }
@@ -124207,7 +124817,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();
@@ -124233,7 +124843,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();
@@ -124252,7 +124862,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();
@@ -124264,7 +124874,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;
                 }
@@ -124278,7 +124888,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;
@@ -124293,7 +124903,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();
@@ -124556,8 +125166,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();
@@ -125951,8 +126561,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);
             };
 
@@ -168432,151 +169042,6 @@ const hex2rgb = function(color) {
     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;
-
-        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;
 
@@ -169556,7 +170021,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();
@@ -169616,7 +170082,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) => {
@@ -169624,7 +170090,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]);
@@ -169668,7 +170134,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));
                 }
             });
@@ -170103,4 +170569,4 @@ class ZoneTranslateTouchControl extends ZoneTranslateControl {
     }
 }
 
-export { AlphaFormat, AmbientLight, AngleMeasurementEditMouseControl, AngleMeasurementEditTouchControl, AngleMeasurementsControl, AngleMeasurementsMouseControl, AngleMeasurementsPlugin, AngleMeasurementsTouchControl, AnnotationsPlugin, AxisGizmoPlugin, BCFViewpointsPlugin, Bitmap, ByteType, CameraMemento, CameraPath, CameraPathAnimation, CityJSONLoaderPlugin, ClampToEdgeWrapping, Component, CompressedMediaType, Configs, ContextMenu, CubicBezierCurve, Curve, CxConverterIFCLoaderPlugin, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DirLight, DistanceMeasurementEditControl, DistanceMeasurementEditMouseControl, DistanceMeasurementEditTouchControl, DistanceMeasurementsControl, DistanceMeasurementsMouseControl, DistanceMeasurementsPlugin, DistanceMeasurementsTouchControl, Dot3D, DotBIMDefaultDataSource, DotBIMLoaderPlugin, EdgeMaterial, EmphasisMaterial, FaceAlignedSectionPlanesPlugin, FastNavPlugin, FloatType, Fresnel, Frustum$1 as Frustum, FrustumPlane, GIFMediaType, GLTFDefaultDataSource, GLTFLoaderPlugin, HalfFloatType, ImagePlane, IntType, JPEGMediaType, KTX2TextureTranscoder, LASLoaderPlugin, Label3D, LambertMaterial, LightMap, LineSet, LinearEncoding, LinearFilter, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoadingManager, LocaleService, LuminanceAlphaFormat, LuminanceFormat, Map$1 as Map, Marker, MarqueePicker, MarqueePickerMouseControl, Mesh, MeshSurfaceArea, MeshVolume, MetallicMaterial, MirroredRepeatWrapping, ModelMemento, NavCubePlugin, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, Node$1 as Node, OBJLoaderPlugin, ObjectsKdTree3, ObjectsMemento, PNGMediaType, Path, PerformanceModel, PhongMaterial, PickResult, Plugin, PointLight, PointerCircle, PointerLens, QuadraticBezierCurve, Queue, RGBAFormat, RGBAIntegerFormat, RGBA_ASTC_10x10_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_BPTC_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGBFormat, RGB_ETC1_Format, RGB_ETC2_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGB_S3TC_DXT1_Format, RGFormat, RGIntegerFormat, ReadableGeometry, RedFormat, RedIntegerFormat, ReflectionMap, RepeatWrapping, STLDefaultDataSource, STLLoaderPlugin, SceneModel, SceneModelMesh, SceneModelTransform, SectionPlane, SectionPlanesPlugin, ShortType, Skybox, SkyboxesPlugin, SpecularMaterial, SplineCurve, SpriteMarker, StoreyViewsPlugin, Texture, TextureTranscoder, TreeViewPlugin, UnsignedByteType, UnsignedInt248Type, UnsignedIntType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedShortType, VBOGeometry, ViewCullPlugin, Viewer, WebIFCLoaderPlugin, Wire3D, WorkerPool$1 as WorkerPool, XKTDefaultDataSource, XKTLoaderPlugin, XML3DLoaderPlugin, ZoneEditControl, ZoneEditMouseControl, ZoneEditTouchControl, ZoneTranslateControl, ZoneTranslateMouseControl, ZoneTranslateTouchControl, ZonesMouseControl, ZonesPlugin, ZonesPolysurfaceMouseControl, ZonesPolysurfaceTouchControl, ZonesTouchControl, activateDraggableDot, activateDraggableDots, buildBoxGeometry, buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB, buildCylinderGeometry, buildGridGeometry, buildLineGeometry, buildPlaneGeometry, buildPolylineGeometry, buildPolylineGeometryFromCurve, buildSphereGeometry, buildTorusGeometry, buildVectorTextGeometry, createRTCViewMat, frustumIntersectsAABB3, getKTX2TextureTranscoder, getPlaneRTCPos, isTriangleMeshSolid, load3DSGeometry, loadOBJGeometry, math, meshSurfaceArea, meshVolume, os, rtcToWorldPos, sRGBEncoding, setFrustum, stats, touchPointSelector, transformToNode, utils, worldToRTCPos, worldToRTCPositions };
+export { AlphaFormat, AmbientLight, AngleMeasurementEditMouseControl, AngleMeasurementEditTouchControl, AngleMeasurementsControl, AngleMeasurementsMouseControl, AngleMeasurementsPlugin, AngleMeasurementsTouchControl, AnnotationsPlugin, AxisGizmoPlugin, BCFViewpointsPlugin, Bitmap, ByteType, CameraMemento, CameraPath, CameraPathAnimation, CityJSONLoaderPlugin, ClampToEdgeWrapping, Component, CompressedMediaType, Configs, ContextMenu, CubicBezierCurve, Curve, CxConverterIFCLoaderPlugin, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DirLight, DistanceMeasurementEditControl, DistanceMeasurementEditMouseControl, DistanceMeasurementEditTouchControl, DistanceMeasurementsControl, DistanceMeasurementsMouseControl, DistanceMeasurementsPlugin, DistanceMeasurementsTouchControl, Dot3D, DotBIMDefaultDataSource, DotBIMLoaderPlugin, EdgeMaterial, EmphasisMaterial, FaceAlignedSectionPlanesPlugin, FastNavPlugin, FloatType, Fresnel, Frustum$1 as Frustum, FrustumPlane, GIFMediaType, GLTFDefaultDataSource, GLTFLoaderPlugin, HalfFloatType, ImagePlane, IntType, JPEGMediaType, KTX2TextureTranscoder, LASLoaderPlugin, Label3D, LambertMaterial, LightMap, LineSet, LinearEncoding, LinearFilter, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoadingManager, LocaleService, LuminanceAlphaFormat, LuminanceFormat, Map$1 as Map, Marker, MarqueePicker, MarqueePickerMouseControl, Mesh, MeshSurfaceArea, MeshVolume, MetallicMaterial, MirroredRepeatWrapping, ModelMemento, NavCubePlugin, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, Node$1 as Node, OBJLoaderPlugin, ObjectsKdTree3, ObjectsMemento, PNGMediaType, Path, PerformanceModel, PhongMaterial, PickResult, Plugin, PointLight, PointerCircle, PointerLens, QuadraticBezierCurve, Queue, RGBAFormat, RGBAIntegerFormat, RGBA_ASTC_10x10_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_BPTC_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGBFormat, RGB_ETC1_Format, RGB_ETC2_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGB_S3TC_DXT1_Format, RGFormat, RGIntegerFormat, ReadableGeometry, RedFormat, RedIntegerFormat, ReflectionMap, RepeatWrapping, STLDefaultDataSource, STLLoaderPlugin, SceneModel, SceneModelMesh, SceneModelTransform, SectionPlane, SectionPlanesPlugin, ShortType, Skybox, SkyboxesPlugin, SpecularMaterial, SplineCurve, SpriteMarker, StoreyViewsPlugin, Texture, TextureTranscoder, TreeViewPlugin, UnsignedByteType, UnsignedInt248Type, UnsignedIntType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedShortType, VBOGeometry, ViewCullPlugin, Viewer, WebIFCLoaderPlugin, Wire3D, WorkerPool$1 as WorkerPool, XKTDefaultDataSource, XKTLoaderPlugin, XML3DLoaderPlugin, ZoneEditControl, ZoneEditMouseControl, ZoneEditTouchControl, ZoneTranslateControl, ZoneTranslateMouseControl, ZoneTranslateTouchControl, ZonesMouseControl, ZonesPlugin, ZonesPolysurfaceMouseControl, ZonesPolysurfaceTouchControl, ZonesTouchControl, activateDraggableDot, activateDraggableDots, addMousePressListener, addTouchPressListener, buildBoxGeometry, buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB, buildCylinderGeometry, buildGridGeometry, buildLineGeometry, buildPlaneGeometry, buildPolylineGeometry, buildPolylineGeometryFromCurve, buildSphereGeometry, buildTorusGeometry, buildVectorTextGeometry, createRTCViewMat, frustumIntersectsAABB3, getKTX2TextureTranscoder, getPlaneRTCPos, isTriangleMeshSolid, load3DSGeometry, loadOBJGeometry, marker3D, math, meshSurfaceArea, meshVolume, os, rtcToWorldPos, sRGBEncoding, setFrustum, startPolygonCreate, stats, touchPointSelector, transformToNode, triangulateEarClipping, utils, wire3D, worldToRTCPos, worldToRTCPositions };