@xeokit/xeokit-sdk 2.6.25 → 2.6.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.25",
+  "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/AnnotationsPlugin/Annotation.js

@@ -75,6 +75,7 @@ class Annotation extends Marker {
         this._values = cfg.values || {};
         this._layoutDirty = true;
         this._visibilityDirty = true;
+        this._labelPosition = 24;
 
         this._buildHTML();
 
@@ -205,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;
     }
 
@@ -250,6 +257,37 @@ class Annotation extends Marker {
         }
     }
 
+    /**
+     * 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.
      *

package/src/viewer/scene/CameraControl/CameraControl.js

@@ -649,6 +649,8 @@ class CameraControl extends Component {
             snapToEdge: DEFAULT_SNAP_EDGE,
             snapRadius: DEFAULT_SNAP_PICK_RADIUS,
 
+            keyboardEnabledOnlyIfMouseover: true,
+
             // Rotation
 
             dragRotationRate: 360.0,
@@ -959,6 +961,24 @@ class CameraControl extends Component {
     get snapRadius() {
         return this._configs.snapRadius;
     }
+
+    /**
+     * If `true`, the keyboard shortcuts are enabled ONLY if the mouse is over the canvas.
+     * 
+     * @param {boolean} value
+     */
+    set keyboardEnabledOnlyIfMouseover(value) {
+        this._configs.keyboardEnabledOnlyIfMouseover = !!value;
+    }
+
+    /**
+     * Gets whether the keyboard shortcuts are enabled ONLY if the mouse is over the canvas or ALWAYS.
+     * 
+     * @returns {boolean}
+     */
+    get keyboardEnabledOnlyIfMouseover() {
+        return this._configs.keyboardEnabledOnlyIfMouseover;
+    }
     
     /**
      * Sets the current navigation mode.

package/src/viewer/scene/CameraControl/lib/handlers/KeyboardAxisViewHandler.js

@@ -29,7 +29,7 @@ class KeyboardAxisViewHandler {
                 return;
             }
 
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
                 return;
             }
 

package/src/viewer/scene/CameraControl/lib/handlers/KeyboardPanRotateDollyHandler.js

@@ -22,7 +22,7 @@ class KeyboardPanRotateDollyHandler {
             if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
                 return;
             }
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
                 return;
             }
             keyDownMap[keyCode] = true;
@@ -53,7 +53,7 @@ class KeyboardPanRotateDollyHandler {
                 return;
             }
 
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover &&  !states.mouseover) {
                 return;
             }
 

package/src/viewer/scene/scene/Scene.js

@@ -2099,10 +2099,10 @@ class Scene extends Component {
      */
     get center() {
         if (this._aabbDirty || !this._center) {
-            if (!this._center || !this._center) {
+            const aabb = this.aabb;
+            if (!this._center) {
                 this._center = math.vec3();
             }
-            const aabb = this.aabb;
             this._center[0] = (aabb[0] + aabb[3]) / 2;
             this._center[1] = (aabb[1] + aabb[4]) / 2;
             this._center[2] = (aabb[2] + aabb[5]) / 2;
@@ -2177,6 +2177,7 @@ class Scene extends Component {
             this._aabb[4] = ymax;
             this._aabb[5] = zmax;
             this._aabbDirty = false;
+            this._center = null;
         }
         return this._aabb;
     }
@@ -2832,4 +2833,4 @@ class Scene extends Component {
     }
 }
 
-export {Scene};
+export {Scene};

package/types/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.d.ts

@@ -17,6 +17,58 @@ export declare type AngleMeasurementsPluginConfiguration = {
   zIndex?: number;
 };
 
+/**
+ * Event fire by {@link AngleMeasurementsPlugin} when mouse enters over an {@link AngleMeasurement}.
+ */
+export declare type AngleMeasurementMouseOverEvent = {
+
+    /**
+     * The plugin.
+     */
+    plugin: AngleMeasurementsPlugin;
+
+    /**
+     * The measurement.
+     */
+    angleMeasurement: AngleMeasurement;
+
+    /**
+     * The measurement.
+     */
+    measurement: AngleMeasurement;
+
+    /**
+     * The original mouse event.
+     */
+    event: MouseEvent;
+}
+
+/**
+ * Event fire by {@link AngleMeasurementsPlugin} when mouse leaves an {@link AngleMeasurement}.
+ */
+export declare type AngleMeasurementMouseLeaveEvent = {
+
+    /**
+     * The plugin.
+     */
+    plugin: AngleMeasurementsPlugin;
+
+    /**
+     * The measurement.
+     */
+    angleMeasurement: AngleMeasurement;
+
+    /**
+     * The measurement.
+     */
+    measurement: AngleMeasurement;
+
+    /**
+     * The original mouse event.
+     */
+    event: MouseEvent;
+}
+
 /**
  * {@link Viewer} plugin for measuring angles.
  */
@@ -87,7 +139,35 @@ export declare class AngleMeasurementsPlugin extends Plugin {
    */
   clear(): void;
 
-  /**
+    /**
+     * Fires when mouse is over a measurement.
+     * @param {String} event The mouseOver event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "mouseOver", callback: (event: AngleMeasurementMouseOverEvent)=> void): string;
+
+    /**
+     * Fires when mouse leaves a measurement.
+     * @param {String} event The mouseLeave event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "mouseLeave", callback: (event: AngleMeasurementMouseLeaveEvent)=> void): string;
+
+    /**
+     * Fires when a context menu is to be opened on a measurement.
+     * @param {String} event The contextMenu event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "contextMenu", callback: (measurement: AngleMeasurement)=> void): string;
+    
+    /**
+     * Fires when a measurement is completed.
+     * @param {String} event The measurementEnd event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "measurementStart", callback: (measurement: AngleMeasurement)=> void): string;
+    
+    /**
    * Fires when a measurement is created.
    * @param {String} event The measurementCreated event
    * @param {Function} callback Callback fired on the event

package/types/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsPlugin.d.ts

@@ -38,6 +38,59 @@ export declare type DistanceMeasurementsPluginConfiguration = {
   zIndex?: number;
 };
 
+
+/**
+ * Event fire by {@link DistanceMeasurementsPlugin} when mouse enters over a {@link DistanceMeasurement}.
+ */
+export declare type DistanceMeasurementMouseOverEvent = {
+
+    /**
+     * The plugin.
+     */
+    plugin: DistanceMeasurementsPlugin;
+
+    /**
+     * The measurement.
+     */
+    angleMeasurement: DistanceMeasurement;
+
+    /**
+     * The measurement.
+     */
+    measurement: DistanceMeasurement;
+
+    /**
+     * The original mouse event.
+     */
+    event: MouseEvent;
+}
+
+/**
+ * Event fire by {@link DistanceMeasurementsPlugin} when mouse leaves a {@link DistanceMeasurement}.
+ */
+export declare type DistanceMeasurementMouseLeaveEvent = {
+
+    /**
+     * The plugin.
+     */
+    plugin: DistanceMeasurementsPlugin;
+
+    /**
+     * The measurement.
+     */
+    angleMeasurement: DistanceMeasurement;
+
+    /**
+     * The measurement.
+     */
+    measurement: DistanceMeasurement;
+
+    /**
+     * The original mouse event.
+     */
+    event: MouseEvent;
+}
+
 /**
  * {@link Viewer} plugin for measuring point-to-point distances.
  */
@@ -134,6 +187,27 @@ export declare class DistanceMeasurementsPlugin extends Plugin {
    */
   clear(): void;
 
+    /**
+     * Fires when mouse is over a measurement.
+     * @param {String} event The mouseOver event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "mouseOver", callback: (event: DistanceMeasurementMouseOverEvent)=> void): string;
+
+    /**
+     * Fires when mouse leaves a measurement.
+     * @param {String} event The mouseLeave event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "mouseLeave", callback: (event: DistanceMeasurementMouseLeaveEvent)=> void): string;
+
+    /**
+     * Fires when a context menu is to be opened on a measurement.
+     * @param {String} event The contextMenu event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "contextMenu", callback: (measurement: DistanceMeasurement)=> void): string;
+
   /**
    * Fires when a measurement is created.
    * @param {String} event The measurementCreated event
@@ -141,6 +215,13 @@ export declare class DistanceMeasurementsPlugin extends Plugin {
    */
   on(event: "measurementCreated", callback: (measurement: DistanceMeasurement)=> void): string;
 
+    /**
+     * Fires when a measurement is completed.
+     * @param {String} event The measurementEnd event
+     * @param {Function} callback Callback fired on the event
+     */
+    on(event: "measurementStart", callback: (measurement: DistanceMeasurement)=> void): string;
+
   /**
    * Fires when a measurement is completed.
    * @param {String} event The measurementEnd event