fix: correct highlihgter update

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openbim-components",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "main": "src/index.js",
   "author": "harry collin, antonio gonzalez viegas",
   "license": "MIT",

resources/openbim-components.js

@@ -101925,6 +101925,7 @@ class FragmentHighlighter extends Component {
         this.onBeforeUpdate = new Event();
         /** {@link Updateable.onAfterUpdate} */
         this.onAfterUpdate = new Event();
+        this.needsUpdate = false;
         /** {@link Configurable.isSetup} */
         this.isSetup = false;
         this.enabled = true;
@@ -102062,10 +102063,9 @@ class FragmentHighlighter extends Component {
             onHighlight: new Event(),
             onClear: new Event(),
         };
-        await this.update();
+        await this.updateHighlight();
     }
-    /** {@link Updateable.update} */
-    async update() {
+    async updateHighlight() {
         if (!this.fillEnabled) {
             return;
         }
@@ -102077,6 +102077,9 @@ class FragmentHighlighter extends Component {
             const outlinedMesh = this._outlinedMeshes[fragmentID];
             if (outlinedMesh) {
                 fragment.mesh.updateMatrixWorld(true);
+                outlinedMesh.position.set(0, 0, 0);
+                outlinedMesh.rotation.set(0, 0, 0);
+                outlinedMesh.scale.set(1, 1, 1);
                 outlinedMesh.applyMatrix4(fragment.mesh.matrixWorld);
             }
         }

src/core/SimpleClipper/index.html

@@ -93,7 +93,7 @@
     which is simply an array of all the meshes in the Scene 🗄️.
      */
 	scene.add(cube);
-	components.meshes.push(cube);
+	components.meshes.add(cube);
 
     /*MD
 	### ⚙️ Adding Simple Clipper

src/fragments/FragmentHighlighter/index.html

@@ -125,7 +125,7 @@
     const dataBlob = await file.arrayBuffer();
     const buffer = new Uint8Array(dataBlob);
     fragments.load(buffer);
-    highlighter.update();
+    highlighter.updateHighlight();
 
     components.renderer.postproduction.customEffects.outlineEnabled = true;
     highlighter.outlinesEnabled = true;

src/fragments/FragmentHighlighter/index.ts

@@ -39,7 +39,7 @@ export interface FragmentHighlighterConfig {
 
 export class FragmentHighlighter
   extends Component<HighlightMaterials>
-  implements Disposable, Updateable, Configurable<FragmentHighlighterConfig>
+  implements Disposable, Configurable<FragmentHighlighterConfig>
 {
   static readonly uuid = "cb8a76f2-654a-4b50-80c6-66fd83cafd77" as const;
 
@@ -52,6 +52,8 @@ export class FragmentHighlighter
   /** {@link Updateable.onAfterUpdate} */
   readonly onAfterUpdate = new Event<FragmentHighlighter>();
 
+  needsUpdate = false;
+
   /** {@link Configurable.isSetup} */
   isSetup = false;
 
@@ -203,11 +205,10 @@ export class FragmentHighlighter
       onClear: new Event(),
     };
 
-    await this.update();
+    await this.updateHighlight();
   }
 
-  /** {@link Updateable.update} */
-  async update() {
+  async updateHighlight() {
     if (!this.fillEnabled) {
       return;
     }
@@ -219,6 +220,9 @@ export class FragmentHighlighter
       const outlinedMesh = this._outlinedMeshes[fragmentID];
       if (outlinedMesh) {
         fragment.mesh.updateMatrixWorld(true);
+        outlinedMesh.position.set(0, 0, 0);
+        outlinedMesh.rotation.set(0, 0, 0);
+        outlinedMesh.scale.set(1, 1, 1);
         outlinedMesh.applyMatrix4(fragment.mesh.matrixWorld);
       }
     }

src/fragments/FragmentPlans/index.html

@@ -214,7 +214,7 @@
     const canvas = renderer.get().domElement;
     canvas.addEventListener("click", () => highlighter.clear("default"))
 
-    highlighter.update();
+    highlighter.updateHighlight();
 
     /*MD
     And let's add these features to the floorplans as extra commands

src/fragments/FragmentTree/index.html

@@ -94,11 +94,17 @@
 
      */
     const fragments = new OBC.FragmentManager(components);
+
     const file = await fetch("../../../resources/small.frag");
     const data = await file.arrayBuffer();
     const buffer = new Uint8Array(data);
     const model = await fragments.load(buffer);
 
+    const file2 = await fetch("../../../resources/small2.frag");
+    const data2 = await file2.arrayBuffer();
+    const buffer2 = new Uint8Array(data2);
+    const model2 = await fragments.load(buffer2);
+
     /*MD
 
     ### 🕹 Selection of Fragments
@@ -130,7 +136,7 @@
     components.renderer.postproduction.customEffects.outlineEnabled = true;
     highlighter.outlinesEnabled = true;
 
-    highlighter.update();
+    highlighter.updateHighlight();
 
     /*MD
 
@@ -154,9 +160,12 @@
 
     */
 
-    const properties = await fetch("../../../resources/bbbb.json");
+    const properties = await fetch("../../../resources/small.json");
     model.setLocalProperties(await properties.json());
 
+    const properties2 = await fetch("../../../resources/small2.json");
+    model2.setLocalProperties(await properties2.json());
+
     /*MD
 
     Now that we have the properties, we will pass the model to classifier and use `classifier.byStorey()` which will group the Fragments according to Floors.
@@ -165,8 +174,11 @@
 
     */
 
-    classifier.byStorey(model);
-    classifier.byEntity(model);
+    // classifier.byStorey(model);
+    // classifier.byEntity(model);
+
+    classifier.byStorey(model2);
+    classifier.byEntity(model2);
 
     /*MD
 

src/measurement/AngleMeasurement/index.html

@@ -128,7 +128,7 @@
    */
 
 	scene.add(cube);
-	components.meshes.push(cube);
+	components.meshes.add(cube);
 
 	/*MD
 

src/measurement/AreaMeasurement/index.html

@@ -127,7 +127,7 @@
      */
 
 	scene.add(cube);
-	components.meshes.push(cube);
+	components.meshes.add(cube);
 
 	/*MD
 

src/measurement/LengthMeasurement/index.html

@@ -127,7 +127,7 @@
      */
 
 	scene.add(cube);
-	components.meshes.push(cube);
+	components.meshes.add(cube);
 
 	/*MD
 

src/measurement/VolumeMeasurement/index.html

@@ -97,7 +97,7 @@
 
 	const highlighter = new OBC.FragmentHighlighter(components, fragments);
 	highlighter.setup();
-	highlighter.update();
+	highlighter.updateHighlight();
 
 	highlighter.events.select.onHighlight.add((event) => {
 		const fragmentIDs = Object.keys(event);

src/navigation/CubeMap/index.html

@@ -61,7 +61,7 @@
 	cube.position.set(0, 1.5, 0);
 	scene.add(cube);
 
-	components.meshes.push(cube);
+	components.meshes.add(cube);
 
 	const directionalLight = new THREE.DirectionalLight();
 	directionalLight.position.set(5, 10, 3);

src/navigation/EdgesClipper/index.html

@@ -113,12 +113,12 @@
 	const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
 	cube.position.set(-2, 1.5, 0);
 	scene.add(cube);
-	components.meshes.push(cube);
+	components.meshes.add(cube);
 
 	const cube2 = new THREE.Mesh(cubeGeometry, cubeMaterial);
 	cube2.position.set(2, 1.5, 0);
 	scene.add(cube2);
-	components.meshes.push(cube2);
+	components.meshes.add(cube2);
 
 	/*MD
 

src/navigation/OrthoPerspectiveCamera/index.html

@@ -100,7 +100,7 @@
 
    */
 	scene.add(cube);
-	components.meshes.push(cube);
+	components.meshes.add(cube);
 
 	/*MD
   ### 🎞️ Developing an OrthoPerspective Camera

src/navigation/ShadowDropper/index.html

@@ -97,7 +97,7 @@
 
   scene.background = new THREE.Color("gray");
 	scene.add(cube);
-	components.meshes.push(cube);
+	components.meshes.add(cube);
 
     /*MD
     ### 🌚 Adding Beautiful Shadow