@thatopen/components 3.1.5 → 3.2.0

package/README.md

@@ -1,76 +1,76 @@
-<p align="center">
-  <a href="https://thatopen.com/">TOC</a>
-  |
-  <a href="https://docs.thatopen.com/intro">documentation</a>
-  |
-  <a href="https://thatopen.github.io/engine_components/examples/IfcLoader/index.html">demo</a>
-  |
-  <a href="https://people.thatopen.com/">community</a>
-  |
-  <a href="https://www.npmjs.com/org/thatopen">npm package</a>
-</p>
-
-![cover](https://thatopen.github.io/engine_components/resources/cover.png)
-
-<h1>Open BIM Components <img src="https://thatopen.github.io/engine_components/resources/favicon.ico" width="32"/></h1>
-
-[![NPM Package][npm]][npm-url]
-[![NPM Package][npm-downloads]][npm-url]
-
-This library is a collection of BIM tools based on [Three.js](https://github.com/mrdoob/three.js/) and other libraries. It includes pre-made features to easily build browser-based 3D BIM applications, such as postproduction, dimensions, floorplan navigation, DXF export and much more. 
-
-
-## 🤝 Want our help?
-Are you developing a project with our technology and would like our help?
-Apply now to join [That Open Accelerator Program](https://thatopen.com/accelerator)!
-
-## Packages
-
-This library contains 2 packages:
-
-`@thatopen/components` - The core functionality. Compatible both with browser and Node.js environments.
-
-`@thatopen/components-front` - Features exclusive for browser environments.
-
-## Usage
-
-You need to be familiar with [Three.js API](https://github.com/mrdoob/three.js/) to be able to use this library effectively. In the following example, we will create a cube in a 3D scene that can be navigated with the mouse or touch events. You can see the full example [here](https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/Worlds/example.ts) and the deployed app [here](https://thatopen.github.io/engine_components/examples/Worlds/index.html).
-
-```js
-/* eslint import/no-extraneous-dependencies: 0 */
-
-import * as THREE from "three";
-import * as OBC from "../..";
-
-const container = document.getElementById("container")!;
-
-const components = new OBC.Components();
-
-const worlds = components.get(OBC.Worlds);
-
-const world = worlds.create<
-  OBC.SimpleScene,
-  OBC.SimpleCamera,
-  OBC.SimpleRenderer
->();
-
-world.scene = new OBC.SimpleScene(components);
-world.renderer = new OBC.SimpleRenderer(components, container);
-world.camera = new OBC.SimpleCamera(components);
-
-components.init();
-
-const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
-const geometry = new THREE.BoxGeometry();
-const cube = new THREE.Mesh(geometry, material);
-world.scene.three.add(cube);
-
-world.scene.setup();
-
-world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
-```
-
-
-[npm]: https://img.shields.io/npm/v/@thatopen/components
-[npm-url]: https://www.npmjs.com/package/@thatopen/components
-[npm-downloads]: https://img.shields.io/npm/dw/@thatopen/components
+<p align="center">
+  <a href="https://thatopen.com/">TOC</a>
+  |
+  <a href="https://docs.thatopen.com/intro">documentation</a>
+  |
+  <a href="https://thatopen.github.io/engine_components/examples/IfcLoader/index.html">demo</a>
+  |
+  <a href="https://people.thatopen.com/">community</a>
+  |
+  <a href="https://www.npmjs.com/org/thatopen">npm package</a>
+</p>
+
+![cover](https://thatopen.github.io/engine_components/resources/cover.png)
+
+<h1>Open BIM Components <img src="https://thatopen.github.io/engine_components/resources/favicon.ico" width="32"/></h1>
+
+[![NPM Package][npm]][npm-url]
+[![NPM Package][npm-downloads]][npm-url]
+
+This library is a collection of BIM tools based on [Three.js](https://github.com/mrdoob/three.js/) and other libraries. It includes pre-made features to easily build browser-based 3D BIM applications, such as postproduction, dimensions, floorplan navigation, DXF export and much more. 
+
+
+## 🤝 Want our help?
+Are you developing a project with our technology and would like our help?
+Apply now to join [That Open Accelerator Program](https://thatopen.com/accelerator)!
+
+## Packages
+
+This library contains 2 packages:
+
+`@thatopen/components` - The core functionality. Compatible both with browser and Node.js environments.
+
+`@thatopen/components-front` - Features exclusive for browser environments.
+
+## Usage
+
+You need to be familiar with [Three.js API](https://github.com/mrdoob/three.js/) to be able to use this library effectively. In the following example, we will create a cube in a 3D scene that can be navigated with the mouse or touch events. You can see the full example [here](https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/Worlds/example.ts) and the deployed app [here](https://thatopen.github.io/engine_components/examples/Worlds/index.html).
+
+```js
+/* eslint import/no-extraneous-dependencies: 0 */
+
+import * as THREE from "three";
+import * as OBC from "../..";
+
+const container = document.getElementById("container")!;
+
+const components = new OBC.Components();
+
+const worlds = components.get(OBC.Worlds);
+
+const world = worlds.create<
+  OBC.SimpleScene,
+  OBC.SimpleCamera,
+  OBC.SimpleRenderer
+>();
+
+world.scene = new OBC.SimpleScene(components);
+world.renderer = new OBC.SimpleRenderer(components, container);
+world.camera = new OBC.SimpleCamera(components);
+
+components.init();
+
+const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
+const geometry = new THREE.BoxGeometry();
+const cube = new THREE.Mesh(geometry, material);
+world.scene.three.add(cube);
+
+world.scene.setup();
+
+world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
+```
+
+
+[npm]: https://img.shields.io/npm/v/@thatopen/components
+[npm-url]: https://www.npmjs.com/package/@thatopen/components
+[npm-downloads]: https://img.shields.io/npm/dw/@thatopen/components

package/dist/index.cjs

@@ -124,6 +124,10 @@ class Base {
     __publicField(this, "isConfigurable", () => {
       return "setup" in this && "config" in this && "onSetup" in this;
     });
+    /** Whether is component is {@link Serializable}. */
+    __publicField(this, "isSerializable", () => {
+      return "import" in this && "export" in this;
+    });
     this.components = components;
   }
 }
@@ -3176,6 +3180,7 @@ const _FragmentsManager = class _FragmentsManager extends Component {
     super(components);
     /** {@link Disposable.onDisposed} */
     __publicField(this, "onDisposed", new Event());
+    __publicField(this, "onBeforeDispose", new Event());
     /**
      * Event triggered when fragments are loaded.
      */
@@ -3184,10 +3189,12 @@ const _FragmentsManager = class _FragmentsManager extends Component {
     __publicField(this, "baseCoordinationMatrix", new THREE__namespace.Matrix4());
     /** {@link Component.enabled} */
     __publicField(this, "enabled", true);
-    __publicField(this, "initialized", false);
     __publicField(this, "_core");
     this.components.add(_FragmentsManager.uuid, this);
   }
+  get initialized() {
+    return !!this._core;
+  }
   /**
    * Map containing all loaded fragment models.
    * The key is the group's unique identifier, and the value is the model itself.
@@ -3201,8 +3208,12 @@ const _FragmentsManager = class _FragmentsManager extends Component {
     }
     return this._core;
   }
+  get _hasCoordinationModel() {
+    return this.baseCoordinationModel !== "";
+  }
   /** {@link Disposable.dispose} */
   dispose() {
+    this.onBeforeDispose.trigger();
     if (this._core) {
       this.core.dispose();
       this._core = void 0;
@@ -3214,12 +3225,14 @@ const _FragmentsManager = class _FragmentsManager extends Component {
   }
   init(workerURL) {
     this._core = new FRAGS.FragmentsModels(workerURL);
-    this.initialized = true;
-    this.core.onModelLoaded.add(async (model) => {
-      if (this.list.size !== 1)
+    this.core.onModelLoaded.add(async () => {
+      if (this._hasCoordinationModel)
         return;
-      this.baseCoordinationModel = model.modelId;
-      this.baseCoordinationMatrix = await model.getCoordinationMatrix();
+      const firstModel = [...this.list.values()][0];
+      if (!firstModel)
+        return;
+      this.baseCoordinationModel = firstModel.modelId;
+      this.baseCoordinationMatrix = await firstModel.getCoordinationMatrix();
     });
     this.list.onItemDeleted.add(() => {
       if (this.list.size > 0)
@@ -3894,7 +3907,7 @@ __publicField(_BoundingBoxer, "uuid", "d1444724-dba6-4cdd-a0c7-68ee1450d166");
 let BoundingBoxer = _BoundingBoxer;
 class FinderQuery {
   constructor(components, queries) {
-    __publicField(this, "description");
+    __publicField(this, "customData", {});
     __publicField(this, "_components");
     __publicField(this, "_queries", []);
     __publicField(this, "_aggregation", "exclusive");
@@ -4017,9 +4030,11 @@ class FinderQuery {
    * @returns A `SerializedFinderQuery` object representing the serialized query.
    */
   toJSON() {
+    const manager = this._components.get(ItemsFinder);
+    const name = manager.list.getKey(this) ?? "Finder Query";
     const result = {
-      name: "Finder Query",
-      description: this.description,
+      name,
+      customData: this.customData,
       queries: this.queries.map(this.serializeQueryParameters),
       aggregation: this.aggregation,
       cache: this.cache
@@ -4051,7 +4066,7 @@ class FinderQuery {
    * @returns A `FinderQuery` instance.
    */
   fromJSON(data) {
-    this.description = data.description;
+    this.customData = data.customData;
     this.aggregation = data.aggregation;
     this.cache = data.cache;
     this.queries = data.queries.map(this.deserializeQueryParameters);
@@ -4151,9 +4166,9 @@ const _ItemsFinder = class _ItemsFinder extends Component {
     if (!data)
       return instances;
     for (const value of data) {
-      const { name, description, queries, aggregation, cache } = value;
+      const { name, customData, queries, aggregation, cache } = value;
       const finderQuery = this.create(name, []);
-      finderQuery.fromJSON({ description, queries, aggregation, cache });
+      finderQuery.fromJSON({ customData, queries, aggregation, cache });
       instances.push(finderQuery);
     }
     return instances;
@@ -15895,21 +15910,6 @@ ${users}
       const viewpoint = new Viewpoint(this.components, bcfViewpoint);
       createdViewpoints.push(viewpoint);
     }
-    const getNameWithoutExtension = (name) => {
-      const partsBySlash = name.split("/");
-      const partsByDot = partsBySlash[partsBySlash.length - 1].split(".");
-      partsByDot.pop();
-      return partsByDot.join(".");
-    };
-    const snapshotFiles = files.filter(
-      (file) => file.name.endsWith(".png") || file.name.endsWith(".jpeg")
-    );
-    for (const file of snapshotFiles) {
-      const name = getNameWithoutExtension(file.name);
-      const buffer = await file.async("arraybuffer");
-      const bytes = new Uint8Array(buffer);
-      viewpoints.snapshots.set(name, bytes);
-    }
     const topicRelations = {};
     const topics = [];
     const markupFiles = files.filter((file) => file.name.endsWith(".bcf"));
@@ -15958,12 +15958,16 @@ ${users}
         if (!(markupViewpoint && markupViewpoint.Guid))
           continue;
         const viewpoint = viewpoints.list.get(markupViewpoint.Guid);
-        if (viewpoint) {
-          topic.viewpoints.add(viewpoint.guid);
-          const snapshotName = getNameWithoutExtension(
-            markupViewpoint.Snapshot
-          );
-          viewpoint.snapshot = snapshotName ?? null;
+        if (!viewpoint)
+          continue;
+        topic.viewpoints.add(viewpoint.guid);
+        const snapshotName = `${topic.guid}/${markupViewpoint.Snapshot}`;
+        const snapshotFile = files.find(({ name }) => name === snapshotName);
+        if (snapshotFile) {
+          const buffer = await snapshotFile.async("arraybuffer");
+          const bytes = new Uint8Array(buffer);
+          viewpoints.snapshots.set(viewpoint.guid, bytes);
+          viewpoint.snapshot = viewpoint.guid ?? null;
         }
       }
       const markupDocReferences = this.getMarkupDocumentReferences(
@@ -18496,21 +18500,21 @@ ${colorTags}
     </CameraUpVector>`;
     const cameraRatioXML = `<AspectRatio>${this.camera.aspect_ratio}</AspectRatio>`;
     let cameraXML = "";
-    if ("viewToWorld" in this.camera) {
+    if ("view_to_world_scale" in this.camera) {
       cameraXML = `<OrthogonalCamera>
         ${cameraViewpointXML}
         ${cameraDirectionXML}
         ${cameraUpVectorXML}
         ${cameraRatioXML}
-        <ViewToWorldScale>${this.camera.viewToWorld}</ViewToWorldScale>
+        <ViewToWorldScale>${this.camera.view_to_world_scale}</ViewToWorldScale>
       </OrthogonalCamera>`;
-    } else if ("fov" in this.camera) {
+    } else if ("field_of_view" in this.camera) {
       cameraXML = `<PerspectiveCamera>
         ${cameraViewpointXML}
         ${cameraDirectionXML}
         ${cameraUpVectorXML}
         ${cameraRatioXML}
-        <FieldOfView>${this.camera.fov}</FieldOfView>
+        <FieldOfView>${this.camera.field_of_view}</FieldOfView>
       </PerspectiveCamera>`;
     }
     const viewSetupHints = `<ViewSetupHints SpacesVisible="${this.spacesVisible ?? false}" SpaceBoundariesVisible="${this.spaceBoundariesVisible ?? false}" OpeningsVisible="${this.openingsVisible ?? false}" />`;
@@ -19590,10 +19594,10 @@ class IDSFacet {
       collector.set(modelId, modelItemResults);
     }
     let result = modelItemResults.get(item._localId.value);
-    if (result && skipIfFails) {
-      if (!result.pass)
-        return null;
-    } else {
+    if (result && skipIfFails && !result.pass) {
+      return null;
+    }
+    if (!result) {
       const checks2 = [];
       result = {
         guid: Array.isArray(item._guid) ? void 0 : item._guid.value,

package/dist/index.d.ts

@@ -80,6 +80,8 @@ export declare abstract class Base {
     isHideable: () => this is Hideable;
     /** Whether is component is {@link Configurable}. */
     isConfigurable: () => this is Configurable<any, any>;
+    /** Whether is component is {@link Serializable}. */
+    isSerializable: () => this is Serializable<any, Record<string, any>>;
 }
 
 /**
@@ -1633,7 +1635,7 @@ export declare interface ExternalDocumentReference extends DocumentReference {
  * Represents a finder query for retrieving items based on specified parameters. This class encapsulates the query logic, caching mechanism, and result management.
  */
 export declare class FinderQuery {
-    description?: string;
+    customData: Record<string, any>;
     private _components;
     private _queries;
     /**
@@ -1715,7 +1717,8 @@ export declare class FragmentsManager extends Component implements Disposable_2
      */
     static readonly uuid: "fef46874-46a3-461b-8c44-2922ab77c806";
     /** {@link Disposable.onDisposed} */
-    readonly onDisposed: Event_2<unknown>;
+    readonly onDisposed: Event_2<undefined>;
+    readonly onBeforeDispose: Event_2<undefined>;
     /**
      * Event triggered when fragments are loaded.
      */
@@ -1724,7 +1727,7 @@ export declare class FragmentsManager extends Component implements Disposable_2
     baseCoordinationMatrix: THREE.Matrix4;
     /** {@link Component.enabled} */
     enabled: boolean;
-    initialized: boolean;
+    get initialized(): boolean;
     private _core?;
     /**
      * Map containing all loaded fragment models.
@@ -1732,6 +1735,7 @@ export declare class FragmentsManager extends Component implements Disposable_2
      */
     get list(): FRAGS.DataMap<string, FRAGS.FragmentsModel>;
     get core(): FRAGS.FragmentsModels;
+    private get _hasCoordinationModel();
     constructor(components: Components);
     /** {@link Disposable.dispose} */
     dispose(): void;
@@ -2868,9 +2872,9 @@ export declare interface SerializedFinderQuery {
      */
     name: string;
     /**
-     * An optional description of the query.
+     * An object to define custom data.
      */
-    description?: string;
+    customData: Record<string, any>;
     /**
      * An array of serialized query parameters.
      */
@@ -4052,7 +4056,7 @@ export declare class Viewpoint {
 }
 
 /**
- * Represents a bitmap image associated with a viewpoint. This interface is compliant with the BCF API specifications.
+ *  Represents a bitmap image associated with a viewpoint. This interface is compliant with the BCF API specifications.
  */
 export declare interface ViewpointBitmap {
     /**