onHighlight event from FragmentHighlighter is not triggered

[lemoinet]

Describe the bug 📝

using the following code doesn't trigger the onHighlight event anymore. The onClear event does get triggered. The console window does not show any error message

`const scene = new OBC.SimpleScene(this.components); this.components.scene = scene;

const renderer = new OBC.PostproductionRenderer(
  this.components,
  this.viewer.nativeElement
);
this.components.renderer = renderer;
this.components.uiEnabled = false;

const camera = new OBC.SimpleCamera(this.components);
this.components.camera = camera;

this.components.raycaster = new OBC.SimpleRaycaster(this.components);

renderer.postproduction.enabled = true;
renderer.postproduction.customEffects.outlineEnabled = true;

await this.components.init();

camera.controls.setLookAt(10, 10, 10, 0, 0, 0);

//Set background of Scene
const threeScene = scene.get();
threeScene.background = new THREE.Color(0xffffff);

scene.setup();

const grid = new OBC.SimpleGrid(this.components);
grid.visible = true;

this.fragments = new OBC.FragmentManager(this.components);
this.fragmentIfcLoader = new OBC.FragmentIfcLoader(this.components);
this.fragmentIfcLoader.settings.wasm = {
  path: '/assets/',
  absolute: true,
  logLevel: LogLevel.LOG_LEVEL_DEBUG,
};

await this.fragmentIfcLoader.setup({ autoSetWasm: false });

const highlighter = new OBC.FragmentHighlighter(this.components);
highlighter.multiple = 'none';
highlighter.outlineEnabled = true;
await highlighter.setup();

this.fragmentIfcLoader.onIfcLoaded.add(async () => {
  const highlighterEvents = highlighter.events;

  highlighterEvents['select'].onClear.add(() => {
    console.log('onClear');
  });

  highlighterEvents['select'].onHighlight.add(
    (selection: OBC.FragmentIdMap) => {
      console.log('onHighlight');
      const fragmentID = Object.keys(selection)[0];
      const expressID = Number([...selection[fragmentID]][0]);
      let model;
      for (const group of this.fragments.groups) {
        for (const [_key, value] of group.keyFragments) {
          if (value === fragmentID) {
            model = group;
            break;
          }
        }
      }

      if (model) {
        this.openPropertiesDialog(model, expressID);
      }
    }
  );

  await highlighter.updateHighlight();
});`

Reproduction ▶️

No response

Steps to reproduce 🔢

No response

System Info 💻

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 1.66 GB / 15.65 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 2.4.0 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    openbim-components: ^1.4.5 => 1.4.5

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• [X] Check that this is a concrete bug. For Q&A join our Community.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[K1vs]

I found such a solution based on the difference in the code of the two loaders.

You need to add the lines circled in red.

[K1vs]

Here are both loading functions and something is missing)

The FragmentIfcLoader instructions talk about the addition model to scene, but don't mention this loop.

https://docs.thatopen.com/Tutorials/FragmentIfcLoader

[agviegas]

Fixed! Now, with this code, the highlighter works. Let us know if you face any issues. You can find the full updated tutorial for the highlighter here.

import * as OBC from "@thatopen/components";
import * as OBCF from "@thatopen/components-front";

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();
world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);
world.scene.setup();

const grids = components.get(OBC.Grids);
grids.create(world);

const fragments = new OBC.FragmentsManager(components);
const file = await fetch(
  "https://thatopen.github.io/engine_components/resources/small.frag",
);
const data = await file.arrayBuffer();
const buffer = new Uint8Array(data);
const model = fragments.load(buffer);
world.scene.three.add(model);

const highlighter = components.get(OBCF.Highlighter);
highlighter.setup({ world });
highlighter.zoomToSelection = true;

highlighter.events.select.onHighlight.add((e) => {
  console.log(e);
});