@xeokit/xeokit-sdk 2.6.23 → 2.6.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.23",
+  "version": "2.6.26",
   "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/plugins/AngleMeasurementsPlugin/AngleMeasurement.js

@@ -1,6 +1,5 @@
-import {Marker} from "../../viewer/scene/marker/Marker.js";
+import {Dot3D} from "../lib/ui/index.js";
 import {Wire} from "../lib/html/Wire.js";
-import {Dot} from "../lib/html/Dot.js";
 import {Label} from "../lib/html/Label.js";
 import {math} from "../../viewer/scene/math/math.js";
 import {Component} from "../../viewer/scene/Component.js";
@@ -37,10 +36,6 @@ class AngleMeasurement extends Component {
 
         var scene = this.plugin.viewer.scene;
 
-        this._originMarker = new Marker(scene, cfg.origin);
-        this._cornerMarker = new Marker(scene, cfg.corner);
-        this._targetMarker = new Marker(scene, cfg.target);
-
         this._originWorld = math.vec3();
         this._cornerWorld = math.vec3();
         this._targetWorld = math.vec3();
@@ -80,7 +75,7 @@ class AngleMeasurement extends Component {
             this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mousemove', event));
         };
 
-        this._originDot = new Dot(this._container, {
+        this._originDot = new Dot3D(scene, cfg.origin, this._container, {
             fillColor: this._color,
             zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
             onMouseOver,
@@ -91,7 +86,7 @@ class AngleMeasurement extends Component {
             onMouseMove,
             onContextMenu
         });
-        this._cornerDot = new Dot(this._container, {
+        this._cornerDot = new Dot3D(scene, cfg.corner, this._container, {
             fillColor: this._color,
             zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
             onMouseOver,
@@ -102,7 +97,7 @@ class AngleMeasurement extends Component {
             onMouseMove,
             onContextMenu
         });
-        this._targetDot = new Dot(this._container, {
+        this._targetDot = new Dot3D(scene, cfg.target, this._container, {
             fillColor: this._color,
             zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
             onMouseOver,
@@ -169,19 +164,19 @@ class AngleMeasurement extends Component {
         this._labelsVisible = false;
         this._clickable = false;
 
-        this._originMarker.on("worldPos", (value) => {
+        this._originDot.on("worldPos", (value) => {
             this._originWorld.set(value || [0, 0, 0]);
             this._wpDirty = true;
             this._needUpdate(0); // No lag
         });
 
-        this._cornerMarker.on("worldPos", (value) => {
+        this._cornerDot.on("worldPos", (value) => {
             this._cornerWorld.set(value || [0, 0, 0]);
             this._wpDirty = true;
             this._needUpdate(0); // No lag
         });
 
-        this._targetMarker.on("worldPos", (value) => {
+        this._targetDot.on("worldPos", (value) => {
             this._targetWorld.set(value || [0, 0, 0]);
             this._wpDirty = true;
             this._needUpdate(0); // No lag
@@ -287,9 +282,9 @@ class AngleMeasurement extends Component {
         if (this._cpDirty) {
 
             const near = -0.3;
-            const zOrigin = this._originMarker.viewPos[2];
-            const zCorner = this._cornerMarker.viewPos[2];
-            const zTarget = this._targetMarker.viewPos[2];
+            const zOrigin = this._originDot.viewPos[2];
+            const zCorner = this._cornerDot.viewPos[2];
+            const zTarget = this._targetDot.viewPos[2];
 
             if (zOrigin > near || zCorner > near || zTarget > near) {
 
@@ -326,10 +321,6 @@ class AngleMeasurement extends Component {
                 j += 2;
             }
 
-            this._originDot.setPos(cp[0], cp[1]);
-            this._cornerDot.setPos(cp[2], cp[3]);
-            this._targetDot.setPos(cp[4], cp[5]);
-
             this._originWire.setStartAndEnd(cp[0], cp[1], cp[2], cp[3]);
             this._targetWire.setStartAndEnd(cp[2], cp[3], cp[4], cp[5]);
 
@@ -410,30 +401,30 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets the origin {@link Marker}.
+     * Gets the origin {@link Dot3D}.
      *
-     * @type {Marker}
+     * @type {Dot3D}
      */
     get origin() {
-        return this._originMarker;
+        return this._originDot;
     }
 
     /**
-     * Gets the corner {@link Marker}.
+     * Gets the corner {@link Dot3D}.
      *
-     * @type {Marker}
+     * @type {Dot3D}
      */
     get corner() {
-        return this._cornerMarker;
+        return this._cornerDot;
     }
 
     /**
-     * Gets the target {@link Marker}.
+     * Gets the target {@link Dot3D}.
      *
-     * @type {Marker}
+     * @type {Dot3D}
      */
     get target() {
-        return this._targetMarker;
+        return this._targetDot;
     }
 
     /**
@@ -503,7 +494,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Sets if the origin {@link Marker} is visible.
+     * Sets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -516,7 +507,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets if the origin {@link Marker} is visible.
+     * Gets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -525,7 +516,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Sets if the corner {@link Marker} is visible.
+     * Sets if the corner {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -538,7 +529,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets if the corner {@link Marker} is visible.
+     * Gets if the corner {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -547,7 +538,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Sets if the target {@link Marker} is visible.
+     * Sets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -560,7 +551,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets if the target {@link Marker} is visible.
+     * Gets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */

package/src/plugins/AngleMeasurementsPlugin/index.js

@@ -4,6 +4,7 @@ export * from "./AngleMeasurementsMouseControl.js";
 export * from "./AngleMeasurementsTouchControl.js";
 
 import {Component} from "../../viewer/scene/Component.js";
+import {math} from "../../viewer/scene/math/math.js";
 import {activateDraggableDots} from "../../../src/plugins/lib/ui/index.js";
 
 class AngleMeasurementEditControl extends Component {
@@ -28,11 +29,30 @@ class AngleMeasurementEditControl extends Component {
             viewer: viewer,
             handleMouseEvents: handleMouseEvents,
             handleTouchEvents: handleTouchEvents,
-            snapping: cfg.snapping,
             pointerLens: cfg.pointerLens,
-            color: measurement.color,
-            markers: [ measurement.origin, measurement.corner, measurement.target ],
-            onEdit: () => this.fire("edited")
+            dots: [ measurement.origin, measurement.corner, measurement.target ],
+            ray2WorldPos: (orig, dir, canvasPos) => {
+                const tryPickWorldPos = snap => {
+                    const pickResult = viewer.scene.pick({
+                        canvasPos: canvasPos,
+                        snapToEdge: snap,
+                        snapToVertex: snap,
+                        pickSurface: true  // <<------ This causes picking to find the intersection point on the entity
+                    });
+
+                    // If - when snapping - no pick found, then try w/o snapping
+                    return (pickResult && pickResult.worldPos) ? pickResult.worldPos : (snap && tryPickWorldPos(false));
+                };
+
+                return tryPickWorldPos(!!cfg.snapping);
+            },
+            onEnd: (initPos, dot) => {
+                const changed = ! math.compareVec3(initPos, dot.worldPos);
+                if (changed) {
+                    this.fire("edited");
+                }
+                return changed;
+            }
         });
 
         const destroyCb = measurement.on("destroyed", cleanup);

package/src/plugins/AnnotationsPlugin/Annotation.js

@@ -1,6 +1,11 @@
+import {math} from '../../viewer/scene/math/math.js';
 import {Marker} from "../../viewer/scene/marker/Marker.js";
 import {utils} from "../../viewer/scene/utils.js";
 
+const tempVec3a = math.vec3();
+const tempVec3b = math.vec3();
+const tempVec3c = math.vec3();
+
 /**
  * A {@link Marker} with an HTML label attached to it, managed by an {@link AnnotationsPlugin}.
  *
@@ -40,6 +45,9 @@ class Annotation extends Marker {
             this._marker.addEventListener("click", this._onMouseClickedExternalMarker = () => {
                 this.plugin.fire("markerClicked", this);
             });
+            this._marker.addEventListener("contextmenu", this._onContextMenuExtenalMarker = () => {
+                this.plugin.fire("contextmenu", this);
+            });
             this._marker.addEventListener("mouseenter", this._onMouseEnterExternalMarker = () => {
                 this.plugin.fire("markerMouseEnter", this);
             });
@@ -67,6 +75,7 @@ class Annotation extends Marker {
         this._values = cfg.values || {};
         this._layoutDirty = true;
         this._visibilityDirty = true;
+        this._labelPosition = 24;
 
         this._buildHTML();
 
@@ -159,6 +168,10 @@ class Annotation extends Marker {
             this._marker.addEventListener("click", () => {
                 this.plugin.fire("markerClicked", this);
             });
+            this._marker.addEventListener("contextmenu", e => {
+                e.preventDefault();
+                this.plugin.fire("contextmenu", this);
+            });
             this._marker.addEventListener("mouseenter", () => {
                 this.plugin.fire("markerMouseEnter", this);
             });
@@ -193,17 +206,23 @@ class Annotation extends Marker {
      * @private
      */
     _updatePosition() {
+        const px = x => x + "px";
         const boundary = this.scene.canvas.boundary;
-        const left = boundary[0];
-        const top = boundary[1];
-        const canvasPos = this.canvasPos;
-        this._marker.style.left = (Math.floor(left + canvasPos[0]) - 12) + "px";
-        this._marker.style.top = (Math.floor(top + canvasPos[1]) - 12) + "px";
+        const left = boundary[0] + this.canvasPos[0];
+        const top  = boundary[1] + this.canvasPos[1];
+        const markerRect = this._marker.getBoundingClientRect();
+        const markerWidth = markerRect.width;
+        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 offsetX = 20;
-        const offsetY = -17;
-        this._label.style.left = 20 + Math.floor(left + canvasPos[0] + offsetX) + "px";
-        this._label.style.top = Math.floor(top + canvasPos[1] + offsetY) + "px";
+
+        const labelRect = this._label.getBoundingClientRect();
+        const labelWidth = labelRect.width;
+        const labelDir = Math.sign(this._labelPosition);
+        this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
+        this._label.style.top  = px(top - 17);
         this._label.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
     }
 
@@ -220,6 +239,55 @@ class Annotation extends Marker {
         return template;
     }
 
+    /**
+     * Sets the Marker's worldPos and entity properties based on passed {@link PickResult}
+     *
+     * @param {PickResult} pickResult A PickResult to position the Marker at.
+     */
+    setFromPickResult(pickResult) {
+        if (!pickResult.worldPos || !pickResult.worldNormal) {
+            this.error("Param 'pickResult' does not have both worldPos and worldNormal");
+        } else {
+            const normalizedWorldNormal = math.normalizeVec3(pickResult.worldNormal, tempVec3a);
+            const offset = (this.plugin && this.plugin.surfaceOffset) || 0;
+            const offsetVec = math.mulVec3Scalar(normalizedWorldNormal, offset, tempVec3b);
+            const offsetWorldPos = math.addVec3(pickResult.worldPos, offsetVec, tempVec3c);
+            this.entity = pickResult.entity;
+            this.worldPos = offsetWorldPos;
+        }
+    }
+
+    /**
+     * Sets the horizontal alignment of the Annotation's marker HTML.
+     *
+     * @param {String} align Either "left", "center", "right" (default "left")
+     */
+    setMarkerAlign(align) {
+        const valid = [ "left", "center", "right" ];
+        if (! valid.includes(align)) {
+            this.error("Param 'align' should be one of: " + JSON.stringify(valid));
+        } else {
+            this._markerAlign = align;
+            this._updatePosition();
+        }
+    }
+
+    /**
+     * Sets the relative horizontal position of the Annotation's label HTML.
+     *
+     * @param {Number} position Negative - to the left, positive - to the right, otherwise ignore (default 24)
+     */
+    setLabelPosition(position) {
+        if (typeof position !== "number") {
+            this.error("Param 'position' is not a number");
+        } else if (position === 0) {
+            this.error("Param 'position' is zero");
+        } else {
+            this._labelPosition = position;
+            this._updatePosition();
+        }
+    }
+
     /**
      * Sets whether or not to show this Annotation's marker.
      *
@@ -350,6 +418,7 @@ class Annotation extends Marker {
                 this._marker = null;
             } else {
                 this._marker.removeEventListener("click", this._onMouseClickedExternalMarker);
+                this._marker.removeEventListener("contextmenu", this._onContextMenuExtenalMarker);
                 this._marker.removeEventListener("mouseenter", this._onMouseEnterExternalMarker);
                 this._marker.removeEventListener("mouseleave", this._onMouseLeaveExternalMarker);
                 this._marker = null;

package/src/plugins/AnnotationsPlugin/AnnotationsPlugin.js

@@ -3,10 +3,6 @@ import {Annotation} from "./Annotation.js";
 import {utils} from "../../viewer/scene/utils.js";
 import {math} from "../../viewer/scene/math/math.js";
 
-const tempVec3a = math.vec3();
-const tempVec3b = math.vec3();
-const tempVec3c = math.vec3();
-
 /**
  * {@link Viewer} plugin that creates {@link Annotation}s.
  *
@@ -481,24 +477,6 @@ class AnnotationsPlugin extends Plugin {
             this.error("Viewer component with this ID already exists: " + params.id);
             delete params.id;
         }
-        var worldPos;
-        var entity;
-        params.pickResult = params.pickResult || params.pickRecord;
-        if (params.pickResult) {
-            const pickResult = params.pickResult;
-            if (!pickResult.worldPos || !pickResult.worldNormal) {
-                this.error("Param 'pickResult' does not have both worldPos and worldNormal");
-            } else {
-                const normalizedWorldNormal = math.normalizeVec3(pickResult.worldNormal, tempVec3a);
-                const offsetVec = math.mulVec3Scalar(normalizedWorldNormal, this._surfaceOffset, tempVec3b);
-                const offsetWorldPos = math.addVec3(pickResult.worldPos, offsetVec, tempVec3c);
-                worldPos = offsetWorldPos;
-                entity = pickResult.entity;
-            }
-        } else {
-            worldPos = params.worldPos;
-            entity = params.entity;
-        }
 
         var markerElement = null;
         if (params.markerElementId) {
@@ -519,8 +497,6 @@ class AnnotationsPlugin extends Plugin {
         const annotation = new Annotation(this.viewer.scene, {
             id: params.id,
             plugin: this,
-            entity: entity,
-            worldPos: worldPos,
             container: this._container,
             markerElement: markerElement,
             labelElement: labelElement,
@@ -536,6 +512,15 @@ class AnnotationsPlugin extends Plugin {
             projection: params.projection,
             visible: (params.visible !== false)
         });
+
+        params.pickResult = params.pickResult || params.pickRecord;
+        if (params.pickResult) {
+            annotation.setFromPickResult(params.pickResult);
+        } else {
+            annotation.entity = params.entity;
+            annotation.worldPos = params.worldPos;
+        }
+
         this.annotations[annotation.id] = annotation;
         annotation.on("destroyed", () => {
             delete this.annotations[annotation.id];

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurement.js

@@ -1,6 +1,5 @@
-import {Marker} from "../../viewer/scene/marker/Marker.js";
+import {Dot3D} from "../lib/ui/index.js";
 import {Wire} from "../lib/html/Wire.js";
-import {Dot} from "../lib/html/Dot.js";
 import {Label} from "../lib/html/Label.js";
 import {math} from "../../viewer/scene/math/math.js";
 import {Component} from "../../viewer/scene/Component.js";
@@ -50,8 +49,6 @@ class DistanceMeasurement extends Component {
         this._eventSubs = {};
 
         var scene = this.plugin.viewer.scene;
-        this._originMarker = new Marker(scene, cfg.origin);
-        this._targetMarker = new Marker(scene, cfg.target);
 
         this._originWorld = math.vec3();
         this._targetWorld = math.vec3();
@@ -97,7 +94,7 @@ class DistanceMeasurement extends Component {
             this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new WheelEvent('wheel', event));
         };
 
-        this._originDot = new Dot(this._container, {
+        this._originDot = new Dot3D(scene, cfg.origin, this._container, {
             fillColor: this._color,
             zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
             onMouseOver,
@@ -109,7 +106,7 @@ class DistanceMeasurement extends Component {
             onContextMenu
         });
 
-        this._targetDot = new Dot(this._container, {
+        this._targetDot = new Dot3D(scene, cfg.target, this._container, {
             fillColor: this._color,
             zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
             onMouseOver,
@@ -256,13 +253,13 @@ class DistanceMeasurement extends Component {
         this._labelsOnWires = false;
         this._clickable = false;
 
-        this._originMarker.on("worldPos", (value) => {
+        this._originDot.on("worldPos", (value) => {
             this._originWorld.set(value || [0,0,0]); 
             this._wpDirty = true;
             this._needUpdate(0); // No lag
         });
 
-        this._targetMarker.on("worldPos", (value) => {
+        this._targetDot.on("worldPos", (value) => {
             this._targetWorld.set(value || [0,0,0]); 
             this._wpDirty = true;
             this._needUpdate(0); // No lag
@@ -424,8 +421,8 @@ class DistanceMeasurement extends Component {
         }
 
         const near = -0.3;
-        const vpz1 = this._originMarker.viewPos[2];
-        const vpz2 = this._targetMarker.viewPos[2];
+        const vpz1 = this._originDot.viewPos[2];
+        const vpz2 = this._targetDot.viewPos[2];
 
         if (vpz1 > near || vpz2 > near) {
 
@@ -474,9 +471,6 @@ class DistanceMeasurement extends Component {
                 j += 2;
             }
 
-            this._originDot.setPos(cp[0], cp[1]);
-            this._targetDot.setPos(cp[6], cp[7]);
-
             this._lengthWire.setStartAndEnd(cp[0], cp[1], cp[6], cp[7]);
 
             this._xAxisWire.setStartAndEnd(cp[0], cp[1], cp[2], cp[3]);
@@ -618,21 +612,21 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Gets the origin {@link Marker}.
+     * Gets the origin {@link Dot3D}.
      *
-     * @type {Marker}
+     * @type {Dot3D}
      */
     get origin() {
-        return this._originMarker;
+        return this._originDot;
     }
 
     /**
-     * Gets the target {@link Marker}.
+     * Gets the target {@link Dot3D}.
      *
-     * @type {Marker}
+     * @type {Dot3D}
      */
     get target() {
-        return this._targetMarker;
+        return this._targetDot;
     }
 
     /**
@@ -701,7 +695,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Sets if the origin {@link Marker} is visible.
+     * Sets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -712,7 +706,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Gets if the origin {@link Marker} is visible.
+     * Gets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -721,7 +715,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Sets if the target {@link Marker} is visible.
+     * Sets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -732,7 +726,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Gets if the target {@link Marker} is visible.
+     * Gets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */

package/src/plugins/DistanceMeasurementsPlugin/index.js

@@ -4,6 +4,7 @@ export * from "./DistanceMeasurementsMouseControl.js";
 export * from "./DistanceMeasurementsTouchControl.js";
 
 import {Component} from "../../viewer/scene/Component.js";
+import {math} from "../../viewer/scene/math/math.js";
 import {activateDraggableDots} from "../../../src/plugins/lib/ui/index.js";
 
 class DistanceMeasurementEditControl extends Component {
@@ -28,11 +29,30 @@ class DistanceMeasurementEditControl extends Component {
             viewer: viewer,
             handleMouseEvents: handleMouseEvents,
             handleTouchEvents: handleTouchEvents,
-            snapping: cfg.snapping,
             pointerLens: cfg.pointerLens,
-            color: measurement.color,
-            markers: [ measurement.origin, measurement.target ],
-            onEdit: () => this.fire("edited")
+            dots: [ measurement.origin, measurement.target ],
+            ray2WorldPos: (orig, dir, canvasPos) => {
+                const tryPickWorldPos = snap => {
+                    const pickResult = viewer.scene.pick({
+                        canvasPos: canvasPos,
+                        snapToEdge: snap,
+                        snapToVertex: snap,
+                        pickSurface: true  // <<------ This causes picking to find the intersection point on the entity
+                    });
+
+                    // If - when snapping - no pick found, then try w/o snapping
+                    return (pickResult && pickResult.worldPos) ? pickResult.worldPos : (snap && tryPickWorldPos(false));
+                };
+
+                return tryPickWorldPos(!!cfg.snapping);
+            },
+            onEnd: (initPos, dot) => {
+                const changed = ! math.compareVec3(initPos, dot.worldPos);
+                if (changed) {
+                    this.fire("edited");
+                }
+                return changed;
+            }
         });
 
         const destroyCb = measurement.on("destroyed", cleanup);

package/src/plugins/XKTLoaderPlugin/XKTDefaultDataSource.js

@@ -1,5 +1,4 @@
 import {utils} from "../../viewer/scene/utils.js";
-import {math} from "../../viewer";
 
 /**
  * Default data access strategy for {@link XKTLoaderPlugin}.