@xeokit/xeokit-sdk 2.4.2-beta-30 → 2.4.2-beta-32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.4.2-beta-30",
+  "version": "2.4.2-beta-32",
   "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/AngleMeasurementsMouseControl.js

@@ -62,7 +62,25 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
 
         this._currentAngleMeasurement = null;
 
+        // init markerDiv element (think about making its style configurable)
+        this._initMarkerDiv()
+
+        this._onMouseHoverSurface = null;
+        this._onHoverNothing = null;
+        this._onPickedNothing = null;
+        this._onPickedSurface = null;
+
+        this._onInputMouseDown = null;
+        this._onInputMouseUp = null;
+
+        this._snapping = cfg.snapping !== false;
+
+        this._attachPlugin(angleMeasurementsPlugin, cfg);
+    }
+
+    _initMarkerDiv() {
         const markerDiv = document.createElement('div');
+        markerDiv.setAttribute('id', 'myMarkerDiv');
         const canvas = this.scene.canvas.canvas;
         canvas.parentNode.insertBefore(markerDiv, canvas);
 
@@ -77,17 +95,14 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
         markerDiv.style.pointerEvents = "none";
 
         this.markerDiv = markerDiv;
-        this._onMouseHoverSurface = null;
-        this._onHoverNothing = null;
-        this._onPickedNothing = null;
-        this._onPickedSurface = null;
-
-        this._onInputMouseDown = null;
-        this._onInputMouseUp = null;
-
-        this._snapping = cfg.snapping !== false;
+    }
 
-        this._attachPlugin(angleMeasurementsPlugin, cfg);
+    _destroyMarkerDiv() {
+        if (this._markerDiv) {
+            const element = document.getElementById('myMarkerDiv')
+            element.parentNode.removeChild(element)
+            this._markerDiv = null
+        }
     }
 
     _attachPlugin(angleMeasurementsPlugin, cfg = {}) {
@@ -155,6 +170,9 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
         if (this._active) {
             return;
         }
+        if (!this.markerDiv) {
+            this._initMarkerDiv() // if the marker is destroyed after deactivation, we recreate it
+        }
         const angleMeasurementsPlugin = this.angleMeasurementsPlugin;
         const scene = this.scene;
         const input = scene.input;
@@ -359,6 +377,9 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
         if (this.pointerLens) {
             this.pointerLens.visible = false;
         }
+        if (this._markerDiv) {
+            this._destroyMarkerDiv()
+        }
         this.reset();
         const canvas = this.scene.canvas.canvas;
         canvas.removeEventListener("mousedown", this._onMouseDown);
@@ -383,6 +404,10 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
         if (!this._active) {
             return;
         }
+
+        this._destroyMarkerDiv()
+        this._initMarkerDiv()
+
         if (this._currentAngleMeasurement) {
             this._currentAngleMeasurement.destroy();
             this._currentAngleMeasurement = null;

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsMouseControl.js

@@ -58,21 +58,6 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
 
         this._active = false;
 
-        const markerDiv = document.createElement('div');
-        const canvas = this.scene.canvas.canvas;
-        canvas.parentNode.insertBefore(markerDiv, canvas);
-        markerDiv.style.background = "black";
-        markerDiv.style.border = "2px solid blue";
-        markerDiv.style.borderRadius = "10px";
-        markerDiv.style.width = "5px";
-        markerDiv.style.height = "5px";
-        markerDiv.style.margin = "-200px -200px";
-        markerDiv.style.zIndex = "100";
-        markerDiv.style.position = "absolute";
-        markerDiv.style.pointerEvents = "none";
-
-        this._markerDiv = markerDiv;
-
         this._currentDistanceMeasurement = null;
 
         this._currentDistanceMeasurementInitState = {
@@ -84,6 +69,8 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
             targetVisible: null,
         }
 
+        this._initMarkerDiv()
+
         this._onCameraControlHoverSnapOrSurface = null;
         this._onCameraControlHoverSnapOrSurfaceOff = null;
         this._onMouseDown = null;
@@ -96,6 +83,32 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
         this._attachPlugin(distanceMeasurementsPlugin, cfg);
     }
 
+    _initMarkerDiv() {
+        const markerDiv = document.createElement('div');
+        markerDiv.setAttribute('id', 'myMarkerDiv');
+        const canvas = this.scene.canvas.canvas;
+        canvas.parentNode.insertBefore(markerDiv, canvas);
+        markerDiv.style.background = "black";
+        markerDiv.style.border = "2px solid blue";
+        markerDiv.style.borderRadius = "10px";
+        markerDiv.style.width = "5px";
+        markerDiv.style.height = "5px";
+        markerDiv.style.margin = "-200px -200px";
+        markerDiv.style.zIndex = "100";
+        markerDiv.style.position = "absolute";
+        markerDiv.style.pointerEvents = "none";
+
+        this._markerDiv = markerDiv;
+    }
+
+    _destroyMarkerDiv() {
+        if (this._markerDiv) {
+            const element = document.getElementById('myMarkerDiv')
+            element.parentNode.removeChild(element)
+            this._markerDiv = null
+        }
+    }
+
     _attachPlugin(distanceMeasurementsPlugin, cfg = {}) {
 
         /**
@@ -161,6 +174,10 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
             return;
         }
 
+        if (!this._markerDiv) {
+            this._initMarkerDiv()
+        }
+
         this.fire("activated", true);
 
         const distanceMeasurementsPlugin = this.distanceMeasurementsPlugin;
@@ -316,6 +333,9 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
         if (this.pointerLens) {
             this.pointerLens.visible = false;
         }
+        if (this._markerDiv) {
+            this._destroyMarkerDiv()
+        }
         this.reset();
         const canvas = this.scene.canvas.canvas;
         canvas.removeEventListener("mousedown", this._onMouseDown);
@@ -342,6 +362,10 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
         if (!this._active) {
             return;
         }
+
+        this._destroyMarkerDiv()
+        this._initMarkerDiv()
+
         if (this._currentDistanceMeasurement) {
             this.distanceMeasurementsPlugin.fire("measurementCancel", this._currentDistanceMeasurement);
             this._currentDistanceMeasurement.destroy();

package/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js

@@ -431,6 +431,15 @@ parsers[ParserV10.version] = ParserV10;
  * myViewer.scene.setObjectVisibilities("myModel1#0BTBFw6f90Nfh9rP1dlXrb", true);
  *````
  *
+ * We can also provide an HTTP URL to the XKT file:
+ *
+ * ````javascript
+ * const sceneModel = xktLoader.load({
+ *   manifestSrc: "https://xeokit.github.io/xeokit-sdk/assets/models/models/xkt/Schependomlaan.xkt",
+ *   id: "myModel",
+ * });
+ * ````
+ *
  * # Loading a model from a manifest of XKT files
  *
  * The `ifc2gltf` tool from Creoox, which converts IFC files into glTF geometry and JSON metadata files, has the option to
@@ -517,6 +526,65 @@ parsers[ParserV10.version] = ParserV10;
  * They work much reliably (and faster) when processing smaller files (eg. 20MB) than when processing large files (eg. 500MB), where
  * they have less trouble allocating the system memory they need for conversion and parsing.
  *
+ * We can also provide an HTTP URL to the manifest:
+ *
+ * ````javascript
+ * const sceneModel = xktLoader.load({
+ *   manifestSrc: "https://xeokit.github.io/xeokit-sdk/assets/models/xkt/v10/split/Karhumaki-Bridge/model.xkt.manifest.json",
+ *   id: "myModel",
+ * });
+ * ````
+ *
+ * We can also provide the manifest as parameter object:
+ *
+ * ````javascript
+ * const sceneModel = xktLoader.load({
+ *   id: "myModel",
+ *   manifest: {
+ *   inputFile: "assets/models/gltf/Karhumaki/model.glb.manifest.json",
+ *   converterApplication: "convert2xkt",
+ *   converterApplicationVersion: "v1.1.10",
+ *   conversionDate": "09-11-2023- 18-29-01",
+ *     xktFiles: [
+ *       "../../assets/models/xkt/v10/split/Karhumaki-Bridge/model.xkt",
+ *       "../../assets/models/xkt/v10/split/Karhumaki-Bridge/model_1.xkt",
+ *       "../../assets/models/xkt/v10/split/Karhumaki-Bridge/model_2.xkt",
+ *       "../../assets/models/xkt/v10/split/Karhumaki-Bridge/model_3.xkt",
+ *       "../../assets/models/xkt/v10/split/Karhumaki-Bridge/model_4.xkt",
+ *       "../../assets/models/xkt/v10/split/Karhumaki-Bridge/model_5.xkt",
+ *       "../../assets/models/xkt/v10/split/Karhumaki-Bridge/model_6.xkt",
+ *       "../../assets/models/xkt/v10/split/Karhumaki-Bridge/model_7.xkt",
+ *       "../../assets/models/xkt/v10/split/Karhumaki-Bridge/model_8.xkt"
+ *     ]
+ *   }
+ * });
+ * ````
+ *
+ * We can also provide the paths to the XKT files as HTTP URLs:
+ *
+ * ````javascript
+ * const sceneModel = xktLoader.load({
+ *   id: "myModel",
+ *   manifest: {
+ *   inputFile: "assets/models/gltf/Karhumaki/model.glb.manifest.json",
+ *   converterApplication: "convert2xkt",
+ *   converterApplicationVersion: "v1.1.10",
+ *   conversionDate": "09-11-2023- 18-29-01",
+ *     xktFiles: [
+ *       "https://xeokit.github.io/xeokit-sdk/assets/models/xkt/v10/split/Karhumaki-Bridge/model.xkt",
+ *       "https://xeokit.github.io/xeokit-sdk/assets/models/xkt/v10/split/Karhumaki-Bridge/model_1.xkt",
+ *       "https://xeokit.github.io/xeokit-sdk/assets/models/xkt/v10/split/Karhumaki-Bridge/model_2.xkt",
+ *       "https://xeokit.github.io/xeokit-sdk/assets/models/xkt/v10/split/Karhumaki-Bridge/model_3.xkt",
+ *       "https://xeokit.github.io/xeokit-sdk/assets/models/xkt/v10/split/Karhumaki-Bridge/model_4.xkt",
+ *       "https://xeokit.github.io/xeokit-sdk/assets/models/xkt/v10/split/Karhumaki-Bridge/model_5.xkt",
+ *       "https://xeokit.github.io/xeokit-sdk/assets/models/xkt/v10/split/Karhumaki-Bridge/model_6.xkt",
+ *       "https://xeokit.github.io/xeokit-sdk/assets/models/xkt/v10/split/Karhumaki-Bridge/model_7.xkt",
+ *       "https://xeokit.github.io/xeokit-sdk/assets/models/xkt/v10/split/Karhumaki-Bridge/model_8.xkt"
+ *     ]
+ *   }
+ * });
+ * ````
+ *
  * @class XKTLoaderPlugin
  */
 class XKTLoaderPlugin extends Plugin {
@@ -786,10 +854,14 @@ class XKTLoaderPlugin extends Plugin {
      *
      * @param {*} params Loading parameters.
      * @param {String} [params.id] ID to assign to the root {@link Entity#id}, unique among all components in the Viewer's {@link Scene}, generated automatically by default.
-     * @param {String} [params.src] Path to a *````.xkt````* file, as an alternative to the ````xkt```` parameter.
+     * @param {String} [params.src] Path or URL to an *````.xkt````* file, as an alternative to the ````xkt```` parameter.
      * @param {ArrayBuffer} [params.xkt] The *````.xkt````* file data, as an alternative to the ````src```` parameter.
-     * @param {String} [params.metaModelSrc] Path to an optional metadata file, as an alternative to the ````metaModelData```` parameter.
+     * @param {String} [params.metaModelSrc] Path or URL to an optional metadata file, as an alternative to the ````metaModelData```` parameter.
      * @param {*} [params.metaModelData] JSON model metadata, as an alternative to the ````metaModelSrc```` parameter.
+     * @param {String} [params.manifestSrc] Path or URL to a JSON manifest file that provides paths to ````.xkt```` files to load as parts of the model. Use this option to load models that have been split into
+     * multiple XKT files. See [tutorial](https://www.notion.so/xeokit/Automatically-Splitting-Large-Models-for-Better-Performance-165fc022e94742cf966ee50003572259) for more info.
+     * @param {Object} [params.manifest] A JSON manifest object (as an alternative to a path or URL) that provides paths to ````.xkt```` files to load as parts of the model. Use this option to load models that have been split into
+     * multiple XKT files. See [tutorial](https://www.notion.so/xeokit/Automatically-Splitting-Large-Models-for-Better-Performance-165fc022e94742cf966ee50003572259) for more info.
      * @param {{String:Object}} [params.objectDefaults] Map of initial default states for each loaded {@link Entity} that represents an object. Default value is {@link IFCObjectDefaults}.
      * @param {String[]} [params.includeTypes] When loading metadata, only loads objects that have {@link MetaObject}s with {@link MetaObject#type} values in this list.
      * @param {String[]} [params.excludeTypes] When loading metadata, never loads objects that have {@link MetaObject}s with {@link MetaObject#type} values in this list.
@@ -825,8 +897,8 @@ class XKTLoaderPlugin extends Plugin {
             delete params.id;
         }
 
-        if (!params.src && !params.xkt && !params.manifestSrc) {
-            this.error("load() param expected: src, xkt or manifestSrc");
+        if (!params.src && !params.xkt && !params.manifestSrc && !params.manifest) {
+            this.error("load() param expected: src, xkt, manifestSrc or manifestData");
             return sceneModel; // Return new empty model
         }
 
@@ -954,8 +1026,8 @@ class XKTLoaderPlugin extends Plugin {
             } else if (params.xkt) {
                 this._parseModel(params.xkt, params, options, sceneModel, metaModel, manifestCtx);
                 finish();
-            } else if (params.manifestSrc) {
-                const baseDir = getBaseDirectory(params.manifestSrc)
+            } else if (params.manifestSrc || params.manifest) {
+                const baseDir = params.manifestSrc ? getBaseDirectory(params.manifestSrc) : "";
                 const loadJSONs = (metaDataFiles, done, error) => {
                     let i = 0;
                     const loadNext = () => {
@@ -975,7 +1047,6 @@ class XKTLoaderPlugin extends Plugin {
                     }
                     loadNext();
                 }
-
                 const loadXKTs = (xktFiles, done, error) => {
                     let i = 0;
                     const loadNext = () => {
@@ -991,11 +1062,8 @@ class XKTLoaderPlugin extends Plugin {
                     }
                     loadNext();
                 };
-
-                this._dataSource.getManifest(params.manifestSrc, (manifestData) => {
-                    if (sceneModel.destroyed) {
-                        return;
-                    }
+                if (params.manifest) {
+                    const manifestData = params.manifest;
                     const xktFiles = manifestData.xktFiles;
                     if (!xktFiles || xktFiles.length === 0) {
                         error(`load(): Failed to load model manifest - manifest not valid`);
@@ -1009,7 +1077,26 @@ class XKTLoaderPlugin extends Plugin {
                     } else {
                         loadXKTs(xktFiles, finish, error);
                     }
-                }, error);
+                } else {
+                    this._dataSource.getManifest(params.manifestSrc, (manifestData) => {
+                        if (sceneModel.destroyed) {
+                            return;
+                        }
+                        const xktFiles = manifestData.xktFiles;
+                        if (!xktFiles || xktFiles.length === 0) {
+                            error(`load(): Failed to load model manifest - manifest not valid`);
+                            return;
+                        }
+                        const metaModelFiles = manifestData.metaModelFiles;
+                        if (metaModelFiles) {
+                            loadJSONs(metaModelFiles, () => {
+                                loadXKTs(xktFiles, finish, error);
+                            }, error);
+                        } else {
+                            loadXKTs(xktFiles, finish, error);
+                        }
+                    }, error);
+                }
             }
         }
 

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

@@ -2654,7 +2654,7 @@ class Scene extends Component {
      * - it runs maximum once per scene-tick
      *
      * @param {Function} cb The function to tickify
-     * @returns {Function)}
+     * @returns {Function}
      */
     tickify(cb) {
         const cbString = cb.toString();