Visualization of length measurement

[RASRC]

Describe the bug 📝

1. The background color of the label seems to be missing

2. When you disable the measurement, it hides only the dimension line. The pointers and the labels are still in the scene.

Thanks!

Reproduction ▶️

No response

Steps to reproduce 🔢

1. Creating a dimension element

const dimensions = new OBC.LengthMeasurement(this.components)
dimensions.create()

2. Disabling o hiding a dimension element

dimensions.enabled = false;
dimensions.visible = false;

System Info 💻

openbim-components

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a IFC.js components 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.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.

[agviegas]

Hi @RASRC,

1. Are you importing the CSS styles of the viewer?
2. I'll take a look!

[RASRC]

Hi @agviegas. I put the styles that are shown in the documentation inside the main .css file of the app:

About the background color, in the community forum Juan mentioned that could be a color class that was probably deleted in the development process.

I'll be attending to the news. Thanks!

[HoyosJuan]

Hi @RASRC! Hope you're fine 🙂

I'm following up this issue. A couple of things:

1. The styles that are referenced in the documentation are not applicable anymore (docs need to be updated about this).
2. The reason why the background wasn't visible, is because the class that gives its color was missing from the resources/styles.css file just as you said in the previous message.
3. Actually, the fact the measurements still visible is intended (the weird thing is the line hiding when deactivating the tool). In other words, enabling/disabling the tool is not going to hide them, just turn on/off the ability to be created. However, the visibility property does hide them, so we could add another button that works as a visibility toggle. Would that work for you? In fact, I guess it would be a great idea to complement the UI to add a list of current measurements.

The question is: when you toggle dimensions.visible, does the dimensions get showed/hidden? If that's the case, then I would close this issue and create a feature issue talking about the button and dimensions window.

Let me know!

[RASRC]

Hello @HoyosJuan !

The app is designed following the IFC.js advance course criteria, but perhaps I'm missing some step in the way:

1. Defining the dimension tool in the constructor of the BuildingScene class:

2. Defining a method that set the values of the properties of the dimension tool following the value of a boolean parameter

Thanks!

[HoyosJuan]

Hi @RASRC!

And are you using the built-in UI? Things have changed quite a lot since the IFC.js advance course, and I'm not aware about the BuildingScene class and what exact code should we find there. But, just in case, our conversation means the bug is solved?

[RASRC]

Hi @HoyosJuan! Sorry for the late response. I'm starting over the viewer following the Master classes with the latest version of the library.
The appearance now it's ok, but I'm continue having troubles with the visibility when you disable the tool (the labels are still in the scene and not following the scale of the camera’s zoom).

Thanks.

[shahbaziparisa]

ass and w

Excuse me how did you use the code? Would you please share?
I follow documentation but labels and points are not visible to me. And snapping rectangle is not available.

[agviegas]

Hey @shahbaziparisa are you using the library @thatopen/components? It should be solved there!

[shahbaziparisa]

Hey @shahbaziparisa are you using the library @thatopen/components? It should be solved there!

Yes
Recently I update my project.
Snapping does not work.Do you have sample code?

[agviegas]

I don't know if you mean A) "I want to use snapping, and I don't know how" or B) "Snapping doesn't work when using a specific measurement component".

For A), we don't have a specific component for snapping, but you can see how we use it in the source code of the library.
For B), it should work. You can find an example here and the deployed app here.

We are currently updating the documentation. Hopefully later today you will be able to find all the updated tutorials for measurement components as well.

[shahbaziparisa]

I don't know if you mean A) "I want to use snapping, and I don't know how" or B) "Snapping doesn't work when using a specific measurement component".

For A), we don't have a specific component for snapping, but you can see how we use it in the source code of the library. For B), it should work. You can find an example here and the deployed app here.

We are currently updating the documentation. Hopefully later today you will be able to find all the updated tutorials for measurement components as well.

Thanks. I need such snapping to corner on .ifc models . I load ifc model and use the same code but magnetic snapping to corners is not available. For me, a red rectangle appear but never snapped to corners

[agviegas]

You are right, snapping is not working for IFC models. I'll fix this today!

[shahbaziparisa]

You are right, snapping is not working for IFC models. I'll fix this today!

Hi
Is it fixed now?

[agviegas]

Yes, it should be fixed in the latest patch.