@xeokit/xeokit-sdk 2.5.2-beta-20 → 2.5.2-beta-21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.5.2-beta-20",
+  "version": "2.5.2-beta-21",
   "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/DistanceMeasurementsPlugin/DistanceMeasurement.js

@@ -241,6 +241,7 @@ class DistanceMeasurement extends Component {
         this._zAxisVisible = false;
         this._axisEnabled = true;
         this._labelsVisible = false;
+        this._labelsOnWires = false;
         this._clickable = false;
 
         this._originMarker.on("worldPos", (value) => {
@@ -300,6 +301,7 @@ class DistanceMeasurement extends Component {
         this.yAxisVisible = cfg.yAxisVisible;
         this.zAxisVisible = cfg.zAxisVisible;
         this.labelsVisible = cfg.labelsVisible;
+        this.labelsOnWires = cfg.labelsOnWires;
     }
 
     _update() {
@@ -451,9 +453,19 @@ class DistanceMeasurement extends Component {
 
                 this._lengthLabel.setPosOnWire(cp[0], cp[1], cp[6], cp[7]);
 
-                this._xAxisLabel.setPosOnWire(cp[0], cp[1], cp[2], cp[3]);
-                this._yAxisLabel.setPosOnWire(cp[2], cp[3], cp[4], cp[5]);
-                this._zAxisLabel.setPosOnWire(cp[4], cp[5], cp[6], cp[7]);
+                if (this.labelsOnWires) {
+                    this._xAxisLabel.setPosOnWire(cp[0], cp[1], cp[2], cp[3]);
+                    this._yAxisLabel.setPosOnWire(cp[2], cp[3], cp[4], cp[5]);
+                    this._zAxisLabel.setPosOnWire(cp[4], cp[5], cp[6], cp[7]);
+                } else {
+                    const labelOffset = 35;
+                    let currentLabelOffset = labelOffset;
+                    this._xAxisLabel.setPosOnWire(cp[0], cp[1] + currentLabelOffset, cp[6], cp[7] + currentLabelOffset);
+                    currentLabelOffset += labelOffset;
+                    this._yAxisLabel.setPosOnWire(cp[0], cp[1] + currentLabelOffset, cp[6], cp[7] + currentLabelOffset);
+                    currentLabelOffset += labelOffset;
+                    this._zAxisLabel.setPosOnWire(cp[0], cp[1] + currentLabelOffset, cp[6], cp[7] + currentLabelOffset);
+                }
 
                 const tilde = this._approximate ? " ~ " : " = ";
 
@@ -466,9 +478,15 @@ class DistanceMeasurement extends Component {
 
                 const labelMinAxisLength = this.plugin.labelMinAxisLength;
 
-                this._xAxisLabelCulled = (xAxisCanvasLength < labelMinAxisLength);
-                this._yAxisLabelCulled = (yAxisCanvasLength < labelMinAxisLength);
-                this._zAxisLabelCulled = (zAxisCanvasLength < labelMinAxisLength);
+                if (this.labelsOnWires){
+                    this._xAxisLabelCulled = (xAxisCanvasLength < labelMinAxisLength);
+                    this._yAxisLabelCulled = (yAxisCanvasLength < labelMinAxisLength);
+                    this._zAxisLabelCulled = (zAxisCanvasLength < labelMinAxisLength);
+                } else {
+                    this._xAxisLabelCulled = false;
+                    this._yAxisLabelCulled = false;
+                    this._zAxisLabelCulled = false;
+                }
 
                 if (!this._xAxisLabelCulled) {
                     this._xAxisLabel.setText(tilde + Math.abs((this._targetWorld[0] - this._originWorld[0]) * scale).toFixed(2) + unitAbbrev);
@@ -869,6 +887,25 @@ class DistanceMeasurement extends Component {
         return this._labelsVisible;
     }
 
+    /**
+     * Sets if labels should be positioned on the wires.
+     *
+     * @type {Boolean}
+     */
+    set labelsOnWires(value) {
+        value = value !== undefined ? Boolean(value) : this.plugin.defaultLabelsOnWires;
+        this._labelsOnWires = value;
+    }
+
+    /**
+     * Gets if labels should be positioned on the wires.
+     *
+     * @type {Boolean}
+     */
+    get labelsOnWires() {
+        return this._labelsOnWires;
+    }
+
     /**
      * Sets if this DistanceMeasurement appears highlighted.
      * @param highlighted

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsPlugin.js

@@ -242,6 +242,7 @@ class DistanceMeasurementsPlugin extends Plugin {
      * @param {boolean} [cfg.defaultZAxisVisible=true] The default value of the DistanceMeasurements `zAxisVisible` property.
      * @param {string} [cfg.defaultColor=#00BBFF] The default color of the length dots, wire and label.
      * @param {number} [cfg.zIndex] If set, the wires, dots and labels will have this zIndex (+1 for dots and +2 for labels).
+     * @param {boolean} [cfg.defaultLabelsOnWires=true] The default value of the DistanceMeasurements `labelsOnWires` property.
      * @param {PointerCircle} [cfg.pointerLens] A PointerLens to help the user position the pointer. This can be shared with other plugins.
      */
     constructor(viewer, cfg = {}) {
@@ -269,6 +270,7 @@ class DistanceMeasurementsPlugin extends Plugin {
         this.defaultZAxisVisible = cfg.defaultZAxisVisible !== false;
         this.defaultColor = cfg.defaultColor !== undefined ? cfg.defaultColor : "#00BBFF";
         this.zIndex = cfg.zIndex || 10000;
+        this.defaultLabelsOnWires = cfg.defaultLabelsOnWires !== false;
 
         this._onMouseOver = (event, measurement) => {
             this.fire("mouseOver", {
@@ -391,6 +393,7 @@ class DistanceMeasurementsPlugin extends Plugin {
      * @param {Boolean} [params.zAxisVisible=true] Whether to initially show the Z-axis-aligned wires between {@link DistanceMeasurement#origin} and {@link DistanceMeasurement#target}.
      * @param {Boolean} [params.labelsVisible=true] Whether to initially show the labels.
      * @param {string} [params.color] The color of the length dot, wire and label.
+     * @param {Boolean} [params.labelsOnWires=true] Determines if labels will be set on wires or one below the other.
      * @returns {DistanceMeasurement} The new {@link DistanceMeasurement}.
      */
     createMeasurement(params = {}) {
@@ -422,6 +425,7 @@ class DistanceMeasurementsPlugin extends Plugin {
             originVisible: params.originVisible,
             targetVisible: params.targetVisible,
             color: params.color,
+            labelsOnWires: params.labelsOnWires !== false && this.defaultLabelsOnWires !== false,
             onMouseOver: this._onMouseOver,
             onMouseLeave: this._onMouseLeave,
             onContextMenu: this._onContextMenu

package/src/viewer/scene/geometry/builders/buildBoxLinesGeometry.js

@@ -103,4 +103,136 @@ function buildBoxLinesGeometry(cfg = {}) {
     });
 }
 
-export {buildBoxLinesGeometry};
+/**
+ * @desc Creates a box-shaped lines {@link Geometry} from AABB.
+ *
+ * ## Usage
+ *
+ * In the example below we'll create a {@link Mesh} with a box-shaped {@link ReadableGeometry} that has lines primitives.
+ * This box will be created from AABB of a model.
+ *
+ * [[Run this example](/examples/#geometry_builders_buildBoxLinesGeometryFromAABB)]
+ *
+ * ````javascript
+ *     import {Viewer, Mesh, Node, buildBoxGeometry, buildBoxLinesGeometryFromAABB, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";
+ *
+ *     const viewer = new Viewer({
+ *         canvasId: "myCanvas"
+ *     });
+ *
+ *     viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
+ *     viewer.scene.camera.look = [0, -5.75, 0];
+ *     viewer.scene.camera.up = [0.37, 0.91, -0.11];
+ *
+ *     const boxGeometry = new ReadableGeometry(viewer.scene, buildBoxGeometry({
+ *         xSize: 1,
+ *         ySize: 1,
+ *         zSize: 1
+ *     }));
+ *
+ *     new Node(viewer.scene, {
+ *         id: "table",
+ *         isModel: true, // <--------------------- Node represents a model
+ *         rotation: [0, 50, 0],
+ *         position: [0, 0, 0],
+ *         scale: [1, 1, 1],
+ *
+ *         children: [
+ *
+ *             new Mesh(viewer.scene, { // Red table leg
+ *                 id: "redLeg",
+ *                 isObject: true, // <---------- Node represents an object
+ *                 position: [-4, -6, -4],
+ *                 scale: [1, 3, 1],
+ *                 rotation: [0, 0, 0],
+ *                 geometry: boxGeometry,
+ *                 material: new PhongMaterial(viewer.scene, {
+ *                     diffuse: [1, 0.3, 0.3]
+ *                 })
+ *             }),
+ *
+ *             new Mesh(viewer.scene, { // Green table leg
+ *                 id: "greenLeg",
+ *                 isObject: true, // <---------- Node represents an object
+ *                 position: [4, -6, -4],
+ *                 scale: [1, 3, 1],
+ *                 rotation: [0, 0, 0],
+ *                 geometry: boxGeometry,
+ *                 material: new PhongMaterial(viewer.scene, {
+ *                     diffuse: [0.3, 1.0, 0.3]
+ *                 })
+ *             }),
+ *
+ *             new Mesh(viewer.scene, {// Blue table leg
+ *                 id: "blueLeg",
+ *                 isObject: true, // <---------- Node represents an object
+ *                 position: [4, -6, 4],
+ *                 scale: [1, 3, 1],
+ *                 rotation: [0, 0, 0],
+ *                 geometry: boxGeometry,
+ *                 material: new PhongMaterial(viewer.scene, {
+ *                     diffuse: [0.3, 0.3, 1.0]
+ *                 })
+ *             }),
+ *
+ *             new Mesh(viewer.scene, {  // Yellow table leg
+ *                 id: "yellowLeg",
+ *                 isObject: true, // <---------- Node represents an object
+ *                 position: [-4, -6, 4],
+ *                 scale: [1, 3, 1],
+ *                 rotation: [0, 0, 0],
+ *                 geometry: boxGeometry,
+ *                 material: new PhongMaterial(viewer.scene, {
+ *                     diffuse: [1.0, 1.0, 0.0]
+ *                 })
+ *             }),
+ *
+ *             new Mesh(viewer.scene, { // Purple table top
+ *                 id: "tableTop",
+ *                 isObject: true, // <---------- Node represents an object
+ *                 position: [0, -3, 0],
+ *                 scale: [6, 0.5, 6],
+ *                 rotation: [0, 0, 0],
+ *                 geometry: boxGeometry,
+ *                 material: new PhongMaterial(viewer.scene, {
+ *                     diffuse: [1.0, 0.3, 1.0]
+ *                 })
+ *             })
+ *         ]
+ *     });
+ *
+ *     let aabb = viewer.scene.aabb;
+ *     console.log(aabb);
+ *
+ *     new Mesh(viewer.scene, {
+ *         geometry: new ReadableGeometry(viewer.scene, buildBoxLinesGeometryFromAABB({
+ *             id: "aabb",
+ *             aabb: aabb,
+ *         })),
+ *         material: new PhongMaterial(viewer.scene, {
+ *             emissive: [0, 1,]
+ *         })
+ *     });
+ * ````
+ *
+ * @function buildBoxLinesGeometryFromAABB
+ * @param {*} [cfg] Configs
+ * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ * @param {Number[]} [cfg.aabb]  AABB for which box will be created.
+ * @returns {Object} Configuration for a {@link Geometry} subtype.
+ */
+function buildBoxLinesGeometryFromAABB(cfg = {}){
+    return buildBoxLinesGeometry({
+        id: cfg.id,
+        center: [
+            (cfg.aabb[0] + cfg.aabb[3]) / 2.0,
+            (cfg.aabb[1] + cfg.aabb[4]) / 2.0,
+            (cfg.aabb[2] + cfg.aabb[5]) / 2.0,
+        ],
+        xSize: (Math.abs(cfg.aabb[3] - cfg.aabb[0])) / 2.0,
+        ySize: (Math.abs(cfg.aabb[4] - cfg.aabb[1])) / 2.0,
+        zSize: (Math.abs(cfg.aabb[5] - cfg.aabb[2])) / 2.0,
+    });
+}
+
+export {buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB};

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

@@ -134,4 +134,18 @@ export declare class DistanceMeasurement extends Component {
    * @type {String}
    */
   get color(): string;
+
+  /**
+   * Sets if labels should be positioned on the wires.
+   *
+   * @type {Boolean}
+   */
+  set labelsOnWires(arg: boolean);
+
+  /**
+   * Gets if labels should be positioned on the wires.
+   *
+   * @type {Boolean}
+   */
+  get labelsOnWires() : boolean;
 }

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

@@ -21,6 +21,8 @@ export declare type DistanceMeasurementsPluginConfiguration = {
   defaultAxisVisible?: boolean;
   /** The default color of the length dots, wire and label. */
   defaultColor?: string;
+  /** The default value of the DistanceMeasurements `labelsOnWires` property. */
+  defaultLabelsOnWires?: boolean;
   /** If set, the wires, dots and labels will have this zIndex (+1 for dots and +2 for labels). */
   zIndex?: number;
 };
@@ -86,6 +88,7 @@ export declare class DistanceMeasurementsPlugin extends Plugin {
    * @param {Boolean} [params.wireVisible=true] Whether to initially show the direct point-to-point wire between {@link DistanceMeasurement.origin} and {@link DistanceMeasurement.target}.
    * @param {Boolean} [params.axisVisible=true] Whether to initially show the axis-aligned wires between {@link DistanceMeasurement.origin} and {@link DistanceMeasurement.target}.
    * @param {string} [params.color] The color of the length dot, wire and label.
+   * @param {Boolean} [params.labelsOnWires=true] Determines if labels will be set on wires or one below the other.
    * @returns {DistanceMeasurement} The new {@link DistanceMeasurement}.
    */
   createMeasurement(params?: {
@@ -104,6 +107,7 @@ export declare class DistanceMeasurementsPlugin extends Plugin {
       wireVisible?: boolean;
       axisVisible?: boolean;
       color?: string;
+      labelsOnWires?: boolean;
   }): DistanceMeasurement;
   
   /**