clipping edge with tiles streaming

Describe the bug 📝

when i use clipping edge with tiles and make a section (i have more than one model using setModelTransformation() for coordination) 1 - fragments loaded first on it non coordinated position this image for( const model = await loader.load(geometryData, false);) i made it false for showing clipping edges wrong position

2 - cut geometries at first position and clipping edges shows at non coordinated position

Reproduction ▶️

No response

Steps to reproduce 🔢

No response

System Info 💻

"@thatopen/components": "^2.1.0",
"@thatopen/components-front": "^2.1.10",
"@thatopen/fragments": "^2.0.0",
"web-ifc": "0.0.56"

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.

You need to update the edges for the coordination transformation to take effect. For instance, adding the following code to the streamer tutorial to add some edges planes:

async function loadModel(geometryURL: string, propertiesURL?: string) {
  const rawGeometryData = await fetch(geometryURL);
  const geometryData = await rawGeometryData.json();
  let propertiesData;
  if (propertiesURL) {
    const rawPropertiesData = await fetch(propertiesURL);
    propertiesData = await rawPropertiesData.json();
  }

  const model = await loader.load(geometryData, true, propertiesData);
  console.log(model);

  const clipper = new OBC.Clipper(components);
  const edges = components.get(OBCF.ClipEdges);
  clipper.Type = OBCF.EdgesPlane;

  const blueFill = new THREE.MeshBasicMaterial({ color: "lightblue", side: 2 });
  const blueLine = new THREE.LineBasicMaterial({ color: "blue" });
  const blueOutline = new THREE.MeshBasicMaterial({
    color: "blue",
    opacity: 0.5,
    side: 2,
    transparent: true,
  });

  const style = edges.styles.create(
    "Blue lines",
    new Set(),
    world,
    blueLine,
    blueFill,
    blueOutline,
  );

  loader.onFragmentsLoaded.add((frags) => {
    for (const frag of frags) {
      style.meshes.add(frag.mesh);
    }
  });

  loader.onFragmentsDeleted.add((frags) => {
    for (const frag of frags) {
      style.meshes.delete(frag.mesh);
    }
  });

  window.addEventListener("keydown", (e) => {
    if (e.code === "KeyC") {
      clipper.create(world);
    }
    if (e.code === "KeyM") {
      model.position.x += 1;
      // model.updateWorldMatrix(false, true);
      // edges.update(true);
    }
  });
}

Notice the 2 last commented lines. Every time a model is moved (and that includes loading it and coordinating it with another model), those 2 lines need to be called in order for the clipper to be updated. If I leave them commented, moving the model has no effect on the edges:

https://github.com/user-attachments/assets/666744a8-3e9c-47c1-b707-eb368d690bd7

But if I uncomment them, it works:

https://github.com/user-attachments/assets/825d8770-a635-410a-9059-d4119a22172a

ThatOpen / engine_components