fix: correct visibility issue when updating edges planes

packages/front/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thatopen/components-front",
   "description": "Collection of frontend tools to author BIM apps.",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "author": "That Open Company",
   "contributors": [
     "Antonio Gonzalez Viegas (https://github.com/agviegas)",
@@ -54,4 +54,4 @@
     "n8ao": "1.5.1",
     "postprocessing": "6.34.2"
   }
-}
+}

packages/front/src/core/ClipEdges/index.ts

@@ -78,7 +78,9 @@ export class ClipEdges extends OBC.Component implements OBC.Disposable {
    * This method iterates through all the {@link EdgesPlane} instances associated with the {@link Clipper} component.
    */
   async update(updateFills = false) {
-    if (!this.enabled) return;
+    if (!this.enabled) {
+      return;
+    }
     const clipper = this.components.get(OBC.Clipper);
     for (const plane of clipper.list) {
       if (!(plane instanceof EdgesPlane)) {

packages/front/src/core/ClipEdges/src/clipping-edges.ts

@@ -56,6 +56,7 @@ export class ClippingEdges
 
   /** {@link OBC.Hideable.visible} */
   set visible(visible: boolean) {
+    this._visible = visible;
     for (const name in this._edges) {
       const edges = this._edges[name];
       if (visible) {
@@ -275,13 +276,10 @@ export class ClippingEdges
     const attributes = currentEdges.mesh.geometry.attributes;
     const position = attributes.position as THREE.BufferAttribute;
     if (!Number.isNaN(position.array[0])) {
-      if (!currentEdges.mesh.parent) {
-        const scene = this.world.scene.three;
-        scene.add(currentEdges.mesh);
-      }
       if (this.fillNeedsUpdate && currentEdges.fill) {
         currentEdges.fill.geometry = currentEdges.mesh.geometry;
         currentEdges.fill.update(indexes, indexFragMap);
+        currentEdges.fill.visible = this._visible;
       }
     }
   }

packages/front/src/core/ClipEdges/src/edges-plane.ts

@@ -95,6 +95,5 @@ export class EdgesPlane extends OBC.SimplePlane {
   updateFill = () => {
     this.edges.fillNeedsUpdate = true;
     this.edges.update();
-    this.edges.visible = this._visible;
   };
 }

packages/front/src/fragments/Plans/example.ts

@@ -121,7 +121,7 @@ world.renderer.onAfterUpdate.add(() => stats.end());
   ### 🖼️ Getting the plans
   ---
 
- Now, we will get an instance of the plans component and automatically generate the all the floor plans of the BIM model we just loaded. 
+ Now, we will get an instance of the plans component and automatically generate the all the floor plans of the BIM model we just loaded.
 */
 
 const plans = components.get(OBCF.Plans);
@@ -133,7 +133,7 @@ await plans.generate(model);
   ---
 
  Now, let's set up highlighting so that the user can hover and select items on the BIM model.
- 
+
   :::tip Highlighter?
 
     If you are not familiar with highlighter, check out its specific tutorial!
@@ -149,7 +149,7 @@ highlighter.setup({ world });
   ---
 
  Now, let's set up culling so that our scene becomes even more efficient.
- 
+
   :::tip Culling?
 
     If you are not familiar with culling, check out its specific tutorial!
@@ -173,7 +173,7 @@ world.camera.controls.addEventListener("sleep", () => {
   ### 🖌️ Defining styles
   ---
 
- Next, we need to define how we want the floorplans to look like. For that, we'll need to create a bunch of clipping styles, so that the walls and slabs have a thick section line and a filling, whereas the doors and windows have a thin section line. Of course, we also need to classifier to split the model to categories. 
+ Next, we need to define how we want the floorplans to look like. For that, we'll need to create a bunch of clipping styles, so that the walls and slabs have a thick section line and a filling, whereas the doors and windows have a thin section line. Of course, we also need to classifier to split the model to categories.
 
    :::tip Clipping? Classifier?
 
@@ -303,6 +303,7 @@ for (const plan of plans.list) {
           classifier.setColor(modelItems, whiteColor);
           world.scene.three.background = whiteColor;
           plans.goTo(plan.id);
+          culler.needsUpdate = true;
         }}">
       </bim-button>
     `;
@@ -326,6 +327,7 @@ const exitButton = BUI.Component.create<BUI.Checkbox>(() => {
           classifier.resetColor(modelItems);
           world.scene.three.background = defaultBackground;
           plans.exitPlanView();
+          culler.needsUpdate = true;
         }}">
       </bim-button>
     `;