feat(front): implement fragment load cancel

packages/front/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thatopen/components-front",
   "description": "Collection of frontend tools to author BIM apps.",
-  "version": "2.3.0-alpha.10",
+  "version": "2.3.0-alpha.11",
   "author": "That Open Company",
   "contributors": [
     "Antonio Gonzalez Viegas (https://github.com/agviegas)",

packages/front/src/fragments/IfcStreamer/index.ts

@@ -65,6 +65,11 @@ export class IfcStreamer extends OBC.Component implements OBC.Disposable {
    */
   useCache = true;
 
+  /**
+   * Flag to cancel the files that are being currently loaded.
+   */
+  cancel = false;
+
   fetch = async (fileName: string): Promise<Response | File> => {
     return fetch(this.url + fileName);
   };
@@ -422,8 +427,28 @@ export class IfcStreamer extends OBC.Component implements OBC.Disposable {
     },
     visible = true,
   ) {
+    this.cancel = false;
+
+    const cancelled: { [modelID: string]: Set<number> } = {};
+    for (const modelID in seen) {
+      const idsOfModel = new Set<number>();
+      for (const [, ids] of seen[modelID]) {
+        for (const id of ids) {
+          idsOfModel.add(id);
+        }
+      }
+      cancelled[modelID] = idsOfModel;
+    }
+
     for (const modelID in seen) {
-      if (this._isDisposing) return;
+      if (this._isDisposing) {
+        return;
+      }
+
+      if (this.cancel) {
+        this.cancelLoading(cancelled);
+        return;
+      }
 
       const fragments = this.components.get(OBC.FragmentsManager);
       const group = fragments.groups.get(modelID);
@@ -441,6 +466,11 @@ export class IfcStreamer extends OBC.Component implements OBC.Disposable {
 
       for (const [priority, ids] of seen[modelID]) {
         for (const id of ids) {
+          if (this.cancel) {
+            this.cancelLoading(cancelled);
+            return;
+          }
+
           allIDs.add(id);
           const geometry = geometries[id];
           if (!geometry) {
@@ -449,6 +479,7 @@ export class IfcStreamer extends OBC.Component implements OBC.Disposable {
           if (geometry.geometryFile) {
             const file = geometry.geometryFile;
             const value = files.get(file) || 0;
+            // This adds up the pixels of all fragments in a file to determine its priority
             files.set(file, value + priority);
           }
         }
@@ -497,7 +528,17 @@ export class IfcStreamer extends OBC.Component implements OBC.Disposable {
 
         if (result) {
           for (const [geometryID, { position, index, normal }] of result.data) {
-            if (this._isDisposing) return;
+            if (this._isDisposing) {
+              return;
+            }
+
+            if (this.cancel) {
+              this.cancelLoading(cancelled);
+              return;
+            }
+
+            // This fragment can be cancelled, it will be loaded
+            cancelled[modelID].delete(geometryID);
 
             if (!allIDs.has(geometryID)) continue;
 
@@ -759,4 +800,9 @@ export class IfcStreamer extends OBC.Component implements OBC.Disposable {
 
     this._isDisposing = false;
   };
+
+  private cancelLoading(items: { [modelID: string]: Set<number> }) {
+    this.cancel = false;
+    this.culler.cancel(items);
+  }
 }

packages/front/src/fragments/IfcStreamer/src/geometry-culler-renderer.ts

@@ -516,6 +516,31 @@ export class GeometryCullerRenderer extends OBC.CullerRenderer {
     }
   }
 
+  cancel(items: { [modelID: string]: Set<number> }) {
+    for (const modelID in items) {
+      const modelIndex = this._modelIDIndex.get(modelID);
+      if (modelIndex === undefined) {
+        throw new Error("Model not found.");
+      }
+      const map = this.codes.get(modelIndex);
+      if (map === undefined) {
+        throw new Error("Codes not found.");
+      }
+      for (const id of items[modelID]) {
+        const colorCode = map.get(id);
+        if (colorCode === undefined) {
+          throw new Error("Color code not found.");
+        }
+        this._geometriesInMemory.delete(colorCode);
+        const found = this._geometries.get(colorCode);
+        if (!found) {
+          throw new Error("Geometry not found.");
+        }
+        found.exists = false;
+      }
+    }
+  }
+
   private setGeometryVisibility(
     geometry: CullerBoundingBox,
     visible: boolean,
@@ -545,7 +570,6 @@ export class GeometryCullerRenderer extends OBC.CullerRenderer {
     const colors = event.data.colors as Map<string, number>;
 
     const toLoad: { [modelID: string]: Map<number, Set<number>> } = {};
-
     const toRemove: { [modelID: string]: Set<number> } = {};
     const toHide: { [modelID: string]: Set<number> } = {};
     const toShow: { [modelID: string]: Set<number> } = {};

yarn.lock

@@ -621,8 +621,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thatopen/components-front@workspace:packages/front"
   dependencies:
-    "@thatopen/components": 2.3.0-alpha.1
-    "@thatopen/fragments": 2.3.0-alpha.1
+    "@thatopen/components": ">=2.3.0-alpha"
+    "@thatopen/fragments": ">=2.3.0-alpha"
     "@thatopen/ui": ~2.2.0
     "@thatopen/ui-obc": ~2.2.0
     "@types/earcut": ^2.1.4
@@ -635,33 +635,17 @@ __metadata:
     three: ^0.160.1
     web-ifc: 0.0.57
   peerDependencies:
-    "@thatopen/fragments": 2.3.0-alpha.1
+    "@thatopen/fragments": ">=2.3.0-alpha"
     three: ^0.160.1
     web-ifc: 0.0.57
   languageName: unknown
   linkType: soft
 
-"@thatopen/components@npm:2.3.0-alpha.1":
-  version: 2.3.0-alpha.1
-  resolution: "@thatopen/components@npm:2.3.0-alpha.1"
-  dependencies:
-    camera-controls: 2.7.3
-    fast-xml-parser: 4.4.1
-    jszip: 3.10.1
-    three-mesh-bvh: 0.7.0
-  peerDependencies:
-    "@thatopen/fragments": ~2.2.0
-    three: ^0.160.1
-    web-ifc: 0.0.57
-  checksum: 00faa025507aacf82be2f9388bb6f65abc3d57565b4d540d4ee7e9a621b3e7bb9983798f83b041d46f59dedadd25627f1a58be112316333f33edc53e329f90b3
-  languageName: node
-  linkType: hard
-
-"@thatopen/components@workspace:packages/core":
+"@thatopen/components@>=2.3.0-alpha, @thatopen/components@workspace:packages/core":
   version: 0.0.0-use.local
   resolution: "@thatopen/components@workspace:packages/core"
   dependencies:
-    "@thatopen/fragments": 2.3.0-alpha.1
+    "@thatopen/fragments": ">=2.3.0-alpha"
     "@thatopen/ui": ~2.2.0
     "@types/three": 0.160.0
     camera-controls: 2.7.3
@@ -672,21 +656,21 @@ __metadata:
     three-mesh-bvh: 0.7.0
     web-ifc: 0.0.57
   peerDependencies:
-    "@thatopen/fragments": 2.3.0-alpha.1
+    "@thatopen/fragments": ">=2.3.0-alpha"
     three: ^0.160.1
     web-ifc: 0.0.57
   languageName: unknown
   linkType: soft
 
-"@thatopen/fragments@npm:2.3.0-alpha.1":
-  version: 2.3.0-alpha.1
-  resolution: "@thatopen/fragments@npm:2.3.0-alpha.1"
+"@thatopen/fragments@npm:>=2.3.0-alpha":
+  version: 2.3.0-alpha.2
+  resolution: "@thatopen/fragments@npm:2.3.0-alpha.2"
   dependencies:
     flatbuffers: 23.3.3
     three-mesh-bvh: 0.7.0
   peerDependencies:
     three: ^0.160.1
-  checksum: a2263a03cfee1800372e733983417978c344677382574549898a402efa1a40c0387b2d756d40accd2e2bfbd4449d91e314e11791511734344cf380bdf86457a1
+  checksum: 537887ffe869e0618c50f668c8513d91b3605810e7ed1355e9cf6ca3c83154e823b8461bc0d90ad72c011f4645689963b9e052f76f746663dc547e5374937832
   languageName: node
   linkType: hard