diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index 57d31ff3c..45a5dd3f1 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/build/404.html b/build/404.html index 4028864d1..f6e07e9bd 100644 --- a/build/404.html +++ b/build/404.html @@ -4,10 +4,10 @@ That Open docs - - + + -
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/BCFTopics/index.html b/build/Tutorials/Components/Core/BCFTopics/index.html index 96299cd78..4ce5b8f59 100644 --- a/build/Tutorials/Components/Core/BCFTopics/index.html +++ b/build/Tutorials/Components/Core/BCFTopics/index.html @@ -4,8 +4,8 @@ BCFTopics | That Open docs - - + +
Skip to main content

BCFTopics

@@ -66,6 +66,6 @@

Wrapping Up ✅

To complete this tutorial, let's create a very simple panel to include buttons that triggers the import and export funcionalities, and also setup the app content like this:

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel active label="BCFTopics Tutorial" class="options-menu">
      <bim-panel-section collapsed label="Controls">
        <bim-button @click=${exportBCF} label="Export BCF"></bim-button> 
        <bim-button @click=${loadBCF} label="Load BCF"></bim-button>
      </bim-panel-section>
    </bim-panel>
    `;
});

document.body.append(panel);

const app = document.getElementById("app") as BUI.Grid;
app.layouts = {
  main: {
    template: `"viewport"`,
    elements: { viewport },
  },
};

app.layout = "main";
info

@thatopen/ui comes with cool UI components you can use with topics to create BIM apps with BCF integration in no time. We recommend you taking a look at the corresponding tutorial for topics UI in Tutorials/UserInterface/OBC/TopicsUI 😉

-

Congratulations! You already have the tools you need to create BCF integrations in your next BIM app. Let's continue with more tutorials!

+

Congratulations! You already have the tools you need to create BCF integrations in your next BIM app. Let's continue with more tutorials!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/BoundingBoxer/index.html b/build/Tutorials/Components/Core/BoundingBoxer/index.html index a0fb73067..c008ae4d6 100644 --- a/build/Tutorials/Components/Core/BoundingBoxer/index.html +++ b/build/Tutorials/Components/Core/BoundingBoxer/index.html @@ -4,8 +4,8 @@ BoundingBoxer | That Open docs - - + +
Skip to main content

BoundingBoxer

@@ -56,6 +56,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created the bounding box of a BIM model and used it to make the camera fit the model to the screen. This also works with many models!

+

That's it! You have created the bounding box of a BIM model and used it to make the camera fit the model to the screen. This also works with many models!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/Classifier/index.html b/build/Tutorials/Components/Core/Classifier/index.html index 95168309e..fb8435663 100644 --- a/build/Tutorials/Components/Core/Classifier/index.html +++ b/build/Tutorials/Components/Core/Classifier/index.html @@ -4,8 +4,8 @@ Classifier | That Open docs - - + +
Skip to main content

Classifier

@@ -63,6 +63,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have classified the items of a BIM model by IFC Category, by spatial structure and by model. You can now use the classifier to quickly access the items of one or many BIM models by specific filters.

+

That's it! You have classified the items of a BIM model by IFC Category, by spatial structure and by model. You can now use the classifier to quickly access the items of one or many BIM models by specific filters.

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/Clipper/index.html b/build/Tutorials/Components/Core/Clipper/index.html index 69efc07ef..673f79862 100644 --- a/build/Tutorials/Components/Core/Clipper/index.html +++ b/build/Tutorials/Components/Core/Clipper/index.html @@ -4,8 +4,8 @@ Clipper | That Open docs - - + +
Skip to main content

Clipper

@@ -60,6 +60,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created your first clipping planes to cut your 3D models. You can now play with the inputs to see how the planes change and adapt them to the look of your app! If you liked planes, don't forget to check out the Edges Planes tutorial, who includes styles, edges and fills and much more.

+

That's it! You have created your first clipping planes to cut your 3D models. You can now play with the inputs to see how the planes change and adapt them to the look of your app! If you liked planes, don't forget to check out the Edges Planes tutorial, who includes styles, edges and fills and much more.

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/Cullers/index.html b/build/Tutorials/Components/Core/Cullers/index.html index cecba91ef..16299b746 100644 --- a/build/Tutorials/Components/Core/Cullers/index.html +++ b/build/Tutorials/Components/Core/Cullers/index.html @@ -4,8 +4,8 @@ Cullers | That Open docs - - + +
Skip to main content

Cullers

@@ -53,6 +53,6 @@

Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

const stats = new Stats();
stats.showPanel(2);
document.body.append(stats.dom);
stats.dom.style.left = "0px";
stats.dom.style.zIndex = "unset";
world.renderer.onBeforeUpdate.add(() => stats.begin());
world.renderer.onAfterUpdate.add(() => stats.end());

Great job! 🎉 Now you know how to optimise your 3D scene using a -Screen Culler component! Your BIM app will now have unmatched performance and can render huge scenes easily.

+Screen Culler component! Your BIM app will now have unmatched performance and can render huge scenes easily.

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/Exploder/index.html b/build/Tutorials/Components/Core/Exploder/index.html index c683fbee2..b977c0368 100644 --- a/build/Tutorials/Components/Core/Exploder/index.html +++ b/build/Tutorials/Components/Core/Exploder/index.html @@ -4,8 +4,8 @@ Exploder | That Open docs - - + +
Skip to main content

Exploder

@@ -58,6 +58,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created an app that can explode and restore a BIM model, allowing to have an overview of both the inside and the outside of a BIM model!

+

That's it! You have created an app that can explode and restore a BIM model, allowing to have an overview of both the inside and the outside of a BIM model!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/FragmentsManager/index.html b/build/Tutorials/Components/Core/FragmentsManager/index.html index c05c69767..3c29ce916 100644 --- a/build/Tutorials/Components/Core/FragmentsManager/index.html +++ b/build/Tutorials/Components/Core/FragmentsManager/index.html @@ -4,8 +4,8 @@ FragmentsManager | That Open docs - - + +
Skip to main content

FragmentsManager

@@ -58,6 +58,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! Now you know how to load, export and dispose Fragments in your app. Fragments are much faster than raw IFC models, so you should definitely store them in your app if you want your users to have a fast loading experience. For bigger models you can use streaming, but that's another tutorial!

+

That's it! Now you know how to load, export and dispose Fragments in your app. Fragments are much faster than raw IFC models, so you should definitely store them in your app if you want your users to have a fast loading experience. For bigger models you can use streaming, but that's another tutorial!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/Grids/index.html b/build/Tutorials/Components/Core/Grids/index.html index 246dd71bd..135a661a1 100644 --- a/build/Tutorials/Components/Core/Grids/index.html +++ b/build/Tutorials/Components/Core/Grids/index.html @@ -4,8 +4,8 @@ Grids | That Open docs - - + +
Skip to main content

Grids

@@ -44,6 +44,6 @@ 

const stats = new Stats();
stats.showPanel(2);
document.body.append(stats.dom);
stats.dom.style.left = "0px";
stats.dom.style.zIndex = "unset";
world.renderer.onBeforeUpdate.add(() => stats.begin());
world.renderer.onAfterUpdate.add(() => stats.end());

🎉 Wrap up​

-

Congratulations! You have created your first infinite grid in your 3D app. As you can see, it's super easy and it looks great!

+

Congratulations! You have created your first infinite grid in your 3D app. As you can see, it's super easy and it looks great!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/Hider/index.html b/build/Tutorials/Components/Core/Hider/index.html index 4c60b3f6f..b7fad5fd4 100644 --- a/build/Tutorials/Components/Core/Hider/index.html +++ b/build/Tutorials/Components/Core/Hider/index.html @@ -4,8 +4,8 @@ Hider | That Open docs - - + +
Skip to main content

Hider

@@ -61,6 +61,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created an app with an UI that allows the user to control the visibility of items in a BIM model by floor and by category. Well done!

+

That's it! You have created an app with an UI that allows the user to control the visibility of items in a BIM model by floor and by category. Well done!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcFinder/index.html b/build/Tutorials/Components/Core/IfcFinder/index.html index 80c3050b3..568ba72c8 100644 --- a/build/Tutorials/Components/Core/IfcFinder/index.html +++ b/build/Tutorials/Components/Core/IfcFinder/index.html @@ -4,8 +4,8 @@ IfcFinder | That Open docs - - + +
Skip to main content

IfcFinder

@@ -60,6 +60,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created an app that can make complex text queries in an IFC. Congratulations!

+

That's it! You have created an app that can make complex text queries in an IFC. Congratulations!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcGeometryTiler/index.html b/build/Tutorials/Components/Core/IfcGeometryTiler/index.html index d4accc5db..785210595 100644 --- a/build/Tutorials/Components/Core/IfcGeometryTiler/index.html +++ b/build/Tutorials/Components/Core/IfcGeometryTiler/index.html @@ -4,8 +4,8 @@ IfcGeometryTiler | That Open docs - - + +
Skip to main content

IfcGeometryTiler

@@ -77,11 +77,11 @@

🧩 Adding

We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

BUI.Manager.init();

Now we will add some UI to generate and download the tiles to our computer. For more information about the UI library, you can check the specific documentation for it!

-
const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel active label="Geometry tiles Tutorial" class="options-menu">
      <bim-panel-section collapsed label="Controls">
      
        <bim-button label="Load IFC"
          @click="${() => {
            processFile();
          }}">
        </bim-button>  
      
      </bim-panel-section>
      
    </bim-panel>
  `;
});

document.body.append(panel);
+
const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel active label="Geometry tiles Tutorial" class="options-menu">
      <bim-panel-section collapsed label="Controls">
      
        <bim-button label="Export IFC Geometry Tiles"
          @click="${() => {
            processFile();
          }}">
        </bim-button>  
      
      </bim-panel-section>
      
    </bim-panel>
  `;
});

document.body.append(panel);

And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created an app that can generate the geometry BIM tiles for an IFC and download them to your computer. Now you have the power to process big IFC files! Don't forget to check out the IFC property tiler tutorial. To consume these tiles, check out the IFC streamer tutorial.

+

That's it! You have created an app that can generate the geometry BIM tiles for an IFC and download them to your computer. Now you have the power to process big IFC files! Don't forget to check out the IFC property tiler tutorial. To consume these tiles, check out the IFC streamer tutorial.

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcIsolator/index.html b/build/Tutorials/Components/Core/IfcIsolator/index.html index 91379762a..b589100c6 100644 --- a/build/Tutorials/Components/Core/IfcIsolator/index.html +++ b/build/Tutorials/Components/Core/IfcIsolator/index.html @@ -4,8 +4,8 @@ IfcIsolator | That Open docs - - + +
Skip to main content

IfcIsolator

@@ -73,6 +73,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
	return BUI.html`
			<bim-button class="phone-menu-toggler" icon="solar:settings-bold"
				@click="${() => {
					if (panel.classList.contains("options-menu-visible")) {
						panel.classList.remove("options-menu-visible");
					} else {
						panel.classList.add("options-menu-visible");
					}
				}}">
			</bim-button>
		`;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created an app that can load IFC files and convert them to JSON! Now you can easily extract data from IFC files and move them around in your systems, regardless of the technology that you use in your stack. For bigger IFC files, exporting all the properties to a single JSON might not be feasible. In those cases, check out the properties tiler tutorial!

+

That's it! You have created an app that can load IFC files and convert them to JSON! Now you can easily extract data from IFC files and move them around in your systems, regardless of the technology that you use in your stack. For bigger IFC files, exporting all the properties to a single JSON might not be feasible. In those cases, check out the properties tiler tutorial!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcJsonExporter/index.html b/build/Tutorials/Components/Core/IfcJsonExporter/index.html index 2260f184b..da0327db3 100644 --- a/build/Tutorials/Components/Core/IfcJsonExporter/index.html +++ b/build/Tutorials/Components/Core/IfcJsonExporter/index.html @@ -4,8 +4,8 @@ IfcJsonExporter | That Open docs - - + +
Skip to main content

IfcJsonExporter

@@ -56,6 +56,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created an app that can load IFC files and convert them to JSON! Now you can easily extract data from IFC files and move them around in your systems, regardless of the technology that you use in your stack. For bigger IFC files, exporting all the properties to a single JSON might not be feasible. In those cases, check out the properties tiler tutorial!

+

That's it! You have created an app that can load IFC files and convert them to JSON! Now you can easily extract data from IFC files and move them around in your systems, regardless of the technology that you use in your stack. For bigger IFC files, exporting all the properties to a single JSON might not be feasible. In those cases, check out the properties tiler tutorial!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcLoader/index.html b/build/Tutorials/Components/Core/IfcLoader/index.html index 12145e520..4eef1c8fd 100644 --- a/build/Tutorials/Components/Core/IfcLoader/index.html +++ b/build/Tutorials/Components/Core/IfcLoader/index.html @@ -4,8 +4,8 @@ IfcLoader | That Open docs - - + +
Skip to main content

IfcLoader

@@ -78,6 +78,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created an app that can load IFC files, convert them to 3D fragments and navigate them in 3D. Fantastic job! For bigger IFC files, instead of reading them directly every time, you can store the fragments and properties and load them instead of the original IFC. For even bigger files, you can use streaming, which we also cover in other tutorials!

+

That's it! You have created an app that can load IFC files, convert them to 3D fragments and navigate them in 3D. Fantastic job! For bigger IFC files, instead of reading them directly every time, you can store the fragments and properties and load them instead of the original IFC. For even bigger files, you can use streaming, which we also cover in other tutorials!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcPropertiesManager/index.html b/build/Tutorials/Components/Core/IfcPropertiesManager/index.html index 85be72c85..d4e4c89a2 100644 --- a/build/Tutorials/Components/Core/IfcPropertiesManager/index.html +++ b/build/Tutorials/Components/Core/IfcPropertiesManager/index.html @@ -4,8 +4,8 @@ IfcPropertiesManager | That Open docs - - + +
Skip to main content

IfcPropertiesManager

@@ -48,6 +48,6 @@ 

const downloadBtn = document.getElementById("download-btn")!;
downloadBtn.addEventListener("click", async () => {
  // Here you need to provide the UInt8Array of the original model you want to modify
  const modifiedBuffer = await propsManager.saveToIfc(model, typedArray);
  const file = new File([modifiedBuffer], "small-modified.ifc");
  const a = document.createElement("a");
  a.href = URL.createObjectURL(file);
  a.download = file.name;
  a.click();
  URL.revokeObjectURL(a.href);
});

🎉 Wrap Up!​

-

That's it! Now you know how to use the IfcPropertiesManager to add, modify and delete entities in your IFC file. Keep going with more tutorials! 💪

+

That's it! Now you know how to use the IfcPropertiesManager to add, modify and delete entities in your IFC file. Keep going with more tutorials! 💪

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html b/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html index 8b16872bd..448a411e0 100644 --- a/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html +++ b/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html @@ -4,8 +4,8 @@ IfcPropertiesTiler | That Open docs - - + +
Skip to main content

IfcPropertiesTiler

@@ -66,11 +66,11 @@

🧩 Adding

We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

BUI.Manager.init();

Now we will add some UI to generate and download the tiles to our computer. For more information about the UI library, you can check the specific documentation for it!

-
const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
  <bim-panel active label="Property Tiles Tutorial" class="options-menu">
   <bim-panel-section collapsed label="Controls">
      
      <bim-panel-section style="padding-top: 12px;">
      
        <bim-button label="Load IFC"
          @click="${() => {
            processFile();
          }}">
        </bim-button>  
      
      </bim-panel-section>
      
    </bim-panel>
  `;
});

document.body.append(panel);
+
const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
  <bim-panel active label="Property Tiles Tutorial" class="options-menu">
   <bim-panel-section collapsed label="Controls">
      
      <bim-panel-section style="padding-top: 12px;">
      
        <bim-button label="Export IFC Property Tiles"
          @click="${() => {
            processFile();
          }}">
        </bim-button>  
      
      </bim-panel-section>
      
    </bim-panel>
  `;
});

document.body.append(panel);

And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created an app that can generate the property BIM tiles for an IFC and download them to your computer. Now you have the power to process big IFC files! To consume these tiles, check out the IFC streamer tutorial.

+

That's it! You have created an app that can generate the property BIM tiles for an IFC and download them to your computer. Now you have the power to process big IFC files! To consume these tiles, check out the IFC streamer tutorial.

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html b/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html index 5add37ad4..1b22aa68c 100644 --- a/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html +++ b/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html @@ -4,8 +4,8 @@ IfcRelationsIndexer | That Open docs - - + +
Skip to main content

IfcRelationsIndexer

@@ -84,6 +84,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! Now you know how to get an easy way to get the relations of your model. Keep going with more tutorials! 💪

+

That's it! Now you know how to get an easy way to get the relations of your model. Keep going with more tutorials! 💪

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/MeasurementUtils/index.html b/build/Tutorials/Components/Core/MeasurementUtils/index.html index 96cd2b2c9..49535fea4 100644 --- a/build/Tutorials/Components/Core/MeasurementUtils/index.html +++ b/build/Tutorials/Components/Core/MeasurementUtils/index.html @@ -4,8 +4,8 @@ MeasurementUtils | That Open docs - - + +
Skip to main content

MeasurementUtils

@@ -54,6 +54,6 @@ 

const stats = new Stats();
stats.showPanel(2);
document.body.append(stats.dom);
stats.dom.style.left = "0px";
stats.dom.style.zIndex = "unset";
world.renderer.onBeforeUpdate.add(() => stats.begin());
world.renderer.onAfterUpdate.add(() => stats.end());

🎉 Wrap up​

-

That's it! You have created an app that allows user to pick geometry faces and represent them in 3D. You can now use this data to build Takeoff and estimations apps!

+

That's it! You have created an app that allows user to pick geometry faces and represent them in 3D. You can now use this data to build Takeoff and estimations apps!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/MiniMap/index.html b/build/Tutorials/Components/Core/MiniMap/index.html index 230caf36a..ba02cd42f 100644 --- a/build/Tutorials/Components/Core/MiniMap/index.html +++ b/build/Tutorials/Components/Core/MiniMap/index.html @@ -4,8 +4,8 @@ MiniMap | That Open docs - - + +
Skip to main content

MiniMap

@@ -55,6 +55,6 @@

🧩 Adding 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! You have created a simple app that loads a BIM model and displays a MiniMap of it. You can play around with the different parameters of the MiniMap and see how it changes in real time.

+

That's it! You have created a simple app that loads a BIM model and displays a MiniMap of it. You can play around with the different parameters of the MiniMap and see how it changes in real time.

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html b/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html index 0c9f8212c..9fd8bbd69 100644 --- a/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html +++ b/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html @@ -4,8 +4,8 @@ OrthoPerspectiveCamera | That Open docs - - + +
Skip to main content

OrthoPerspectiveCamera

@@ -62,6 +62,6 @@

🔎 Focus 
const button = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
        @click="${() => {
          if (panel.classList.contains("options-menu-visible")) {
            panel.classList.remove("options-menu-visible");
          } else {
            panel.classList.add("options-menu-visible");
          }
        }}">
      </bim-button>
    `;
});

document.body.append(button);

🎉 Wrap up​

-

That's it! We have created an OrthoPerspective camera that can be used to navigate a 3D scene with multiple projections and navigation modes, as well as a neat UI to control it. Great job!

+

That's it! We have created an OrthoPerspective camera that can be used to navigate a 3D scene with multiple projections and navigation modes, as well as a neat UI to control it. Great job!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/Raycasters/index.html b/build/Tutorials/Components/Core/Raycasters/index.html index 21177f5d5..d74121ce6 100644 --- a/build/Tutorials/Components/Core/Raycasters/index.html +++ b/build/Tutorials/Components/Core/Raycasters/index.html @@ -4,8 +4,8 @@ Raycasters | That Open docs - - + +
Skip to main content

Raycasters

@@ -47,6 +47,6 @@ 

const stats = new Stats();
stats.showPanel(2);
document.body.append(stats.dom);
stats.dom.style.left = "0px";
stats.dom.style.zIndex = "unset";
world.renderer.onBeforeUpdate.add(() => stats.begin());
world.renderer.onAfterUpdate.add(() => stats.end());

🎉 Wrap up​

-

That's it! We have created a simple app that uses the Raycaster to pick objects in the scene with the mouse. Easy, right? Now you can allow your users to interact with your 3D world.

+

That's it! We have created a simple app that uses the Raycaster to pick objects in the scene with the mouse. Easy, right? Now you can allow your users to interact with your 3D world.

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/ShadowedScene/index.html b/build/Tutorials/Components/Core/ShadowedScene/index.html index 6dae17b1d..f83443c1a 100644 --- a/build/Tutorials/Components/Core/ShadowedScene/index.html +++ b/build/Tutorials/Components/Core/ShadowedScene/index.html @@ -4,8 +4,8 @@ ShadowedScene | That Open docs - - + +
Skip to main content

ShadowedScene

@@ -54,6 +54,6 @@ 

const stats = new Stats();
stats.showPanel(2);
document.body.append(stats.dom);
stats.dom.style.left = "0px";
stats.dom.style.zIndex = "unset";
world.renderer.onBeforeUpdate.add(() => stats.begin());
world.renderer.onAfterUpdate.add(() => stats.end());

🎉 Wrap up​

-

That's it! Now you know how to set up a scene with cool shadows and make your BIM applications shine!

+

That's it! Now you know how to set up a scene with cool shadows and make your BIM applications shine!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/Viewpoints/index.html b/build/Tutorials/Components/Core/Viewpoints/index.html index 60b9a3917..56f2f34a0 100644 --- a/build/Tutorials/Components/Core/Viewpoints/index.html +++ b/build/Tutorials/Components/Core/Viewpoints/index.html @@ -4,8 +4,8 @@ Viewpoints | That Open docs - - + +
Skip to main content

Viewpoints

@@ -56,6 +56,6 @@

Wrapping Up ✅

To complete this tutorial, let's create a very simple panel to include buttons that triggers the import and export funcionalities, and also setup the app content like this:

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel active label="Viewpoints Tutorial" class="options-menu">
      <bim-panel-section collapsed label="Controls">
        <bim-button @click=${updateViewpointCamera} label="Update Viewpoint Camera"></bim-button> 
        <bim-button @click=${setWorldCamera} label="Set World Camera"></bim-button>
        <bim-button @click=${reportComponents} label="Report Selection Components"></bim-button>
        <bim-button @click=${reportTopicViewpoints} label="Report Topic Viewpoints"></bim-button>
      </bim-panel-section>
    </bim-panel>
    `;
});

document.body.append(panel);

const app = document.getElementById("app") as BUI.Grid;
app.layouts = {
  main: {
    template: `"viewport"`,
    elements: { viewport },
  },
};

app.layout = "main";
-

Congratulations! You already have the tools you need to create viewpoints in your app. Let's continue with more tutorials!

+

Congratulations! You already have the tools you need to create viewpoints in your app. Let's continue with more tutorials!

\ No newline at end of file diff --git a/build/Tutorials/Components/Core/Worlds/index.html b/build/Tutorials/Components/Core/Worlds/index.html index 5bf7603ac..5bffcb8b8 100644 --- a/build/Tutorials/Components/Core/Worlds/index.html +++ b/build/Tutorials/Components/Core/Worlds/index.html @@ -4,8 +4,8 @@ Worlds | That Open docs - - + +
Skip to main content

Worlds

@@ -21,7 +21,7 @@

🌎
  • @thatopen/ui to add some simple and cool UI menus.
  • Stats.js (optional) to measure the performance of our app.
    • -
    import * as THREE from "three";
    import * as BUI from "@thatopen/ui";
    import Stats from "stats.js";
    import * as OBC from "@thatopen/components";
    +
    import * as THREE from "three";
    import * as BUI from "@thatopen/ui";
    import Stats from "stats.js";
    import * as OBC from "../..";

    🖼️ Getting the container​

    Next, we need to tell the library where do we want to render the 3D scene. We have added an DIV element to this HTML page that occupies the whole width and height of the viewport. Let's fetch it by its ID:

    @@ -46,7 +46,7 @@

    🌎 S

    💄 Adding things to our scene​

    Now we are ready to start adding some 3D entities to our scene. We will add a simple cube:

    -
    const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
    const geometry = new THREE.BoxGeometry();
    const cube = new THREE.Mesh(geometry, material);
    world.scene.three.add(cube);
    +
    const material = new THREE.MeshLambertMaterial({
      color: "#6528D7",
      transparent: true,
      opacity: 0.2,
    });
    const geometry = new THREE.BoxGeometry();
    const cube = new THREE.Mesh(geometry, material);
    world.scene.three.add(cube);

    cube.rotation.x += Math.PI / 4.2;
    cube.rotation.y += Math.PI / 4.2;
    cube.rotation.z += Math.PI / 4.2;
    cube.updateMatrixWorld();

    Finally, we will make the camera look at the cube:

    world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);

    ⏱️ Measuring the performance (optional)​

    @@ -63,6 +63,6 @@

    🧩 Adding 
    const button = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
          <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
            @click="${() => {
              if (panel.classList.contains("options-menu-visible")) {
                panel.classList.remove("options-menu-visible");
              } else {
                panel.classList.add("options-menu-visible");
              }
            }}">
          </bim-button>
        `;
    });

    document.body.append(button);

    🎉 Wrap up​

    -

    That's it! You have created your first 3D world and added some UI elements to it. You can now play with the inputs to see how the scene changes.

    +

    That's it! You have created your first 3D world and added some UI elements to it. You can now play with the inputs to see how the scene changes.

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/AngleMeasurement/index.html b/build/Tutorials/Components/Front/AngleMeasurement/index.html index 8ed420f12..4472da745 100644 --- a/build/Tutorials/Components/Front/AngleMeasurement/index.html +++ b/build/Tutorials/Components/Front/AngleMeasurement/index.html @@ -4,8 +4,8 @@ AngleMeasurement | That Open docs - - + +
    Skip to main content

    AngleMeasurement

    @@ -20,7 +20,7 @@

    📐 Measu
  • @thatopen/components-front to use some frontend-oriented components.
  • Stats.js (optional) to measure the performance of our app.
    • -
    import * as THREE from "three";
    import * as OBC from "@thatopen/components";
    import * as OBCF from "@thatopen/components-front";
    import Stats from "stats.js";
    +
    import * as THREE from "three";
    import * as OBC from "@thatopen/components";
    import * as BUI from "@thatopen/ui";
    import * as OBCF from "@thatopen/components-front";
    import Stats from "stats.js";

    🌎 Setting up a simple scene​

    We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

    @@ -41,14 +41,22 @@ 

    container.ondblclick = () => angles.create();

    🧹 Deleting the Dimensions​

    -

    Now that we know how to make multiple dimensions, we'll learn how to delete them when necessary. Dimensions can be removed using the deleteAll() method, which deletes all the created dimensions. Again, we'll keep it simple and bind this event to the keydown event. Specifically, it will fire when the user presses the Delete or Backspace key.

    +

    Now that we know how to make multiple angle, we'll learn how to delete them when necessary. angle can be removed using the deleteAll() method, which deletes all the created angle. Again, we'll keep it simple and bind this event to the keydown event. Specifically, it will fire when the user presses the Delete or Backspace key.

    window.onkeydown = (event) => {
      if (event.code === "Delete" || event.code === "Backspace") {
        angles.deleteAll();
      }
    };

    ⏱️ Measuring the performance (optional)​

    We'll use the Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());
    +

    🧩 Adding some UI​

    +
    +

    We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

    +
    BUI.Manager.init();
    +

    Now we will add some UI to have some control over the angles we create. For more information about the UI library, you can check the specific documentation for it!

    +
    const panel = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
      <bim-panel active label="Angle Measurement Tutorial" class="options-menu">
          <bim-panel-section collapsed label="Controls">
              <bim-label>Create angle: Double click</bim-label>  
              <bim-label>Delete angle: Delete</bim-label>  
          </bim-panel-section>
          
          <bim-panel-section collapsed label="Others">
            <bim-checkbox checked label="angles enabled" 
              @change="${({ target }: { target: BUI.Checkbox }) => {
                angles.enabled = target.value;
              }}">  
            </bim-checkbox>       
            
            <bim-button label="Delete all"
              @click="${() => {
                angles.deleteAll();
              }}">
            </bim-button>

          </bim-panel-section>
        </bim-panel>
        `;
    });

    document.body.append(panel);
    +

    And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

    +
    const button = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
          <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
            @click="${() => {
              if (panel.classList.contains("options-menu-visible")) {
                panel.classList.remove("options-menu-visible");
              } else {
                panel.classList.add("options-menu-visible");
              }
            }}">
          </bim-button>
        `;
    });

    document.body.append(button);

    🎉 Wrap up​

    -

    That's it! You have created an app that can create and delete angular dimensions on any 3D object. Congratulations!

    +

    That's it! You have created an app that can create and delete angular dimensions on any 3D object. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/AreaMeasurement/index.html b/build/Tutorials/Components/Front/AreaMeasurement/index.html index 3b1576d6b..3af18506d 100644 --- a/build/Tutorials/Components/Front/AreaMeasurement/index.html +++ b/build/Tutorials/Components/Front/AreaMeasurement/index.html @@ -4,8 +4,8 @@ AreaMeasurement | That Open docs - - + +
    Skip to main content

    AreaMeasurement

    @@ -20,7 +20,7 @@

    📐 Measur
  • @thatopen/components-front to use some frontend-oriented components.
  • Stats.js (optional) to measure the performance of our app.
    • -
    import Stats from "stats.js";
    import * as OBC from "@thatopen/components";
    import * as THREE from "three";
    import * as OBCF from "@thatopen/components-front";
    +
    import Stats from "stats.js";
    import * as OBC from "@thatopen/components";
    import * as BUI from "@thatopen/ui";
    import * as THREE from "three";
    import * as OBCF from "@thatopen/components-front";

    🌎 Setting up a simple scene​

    We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

    @@ -47,8 +47,16 @@

    Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());
    +

    🧩 Adding some UI​

    +
    +

    We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

    +
    BUI.Manager.init();
    +

    Now we will add some UI to have some control over the dimensions we create. For more information about the UI library, you can check the specific documentation for it!

    +
    const panel = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
      <bim-panel active label="Area Measurement Tutorial" class="options-menu">
          <bim-panel-section collapsed label="Controls">
              <bim-label>Create area dimension: Double click</bim-label>  
              <bim-label>Calculate selected area: Right click</bim-label>  
              <bim-label>Delete  dimension: Delete</bim-label>  
          </bim-panel-section>
          
          <bim-panel-section collapsed label="Others">
            <bim-checkbox checked label="Area dimensions enabled" 
              @change="${({ target }: { target: BUI.Checkbox }) => {
                areaDims.enabled = target.value;
              }}">  
            </bim-checkbox>       
            <bim-checkbox checked label="Area dimensions visible" 
              @change="${({ target }: { target: BUI.Checkbox }) => {
                areaDims.visible = target.value;
              }}">  
            </bim-checkbox>  
            
            <bim-button label="Delete all"
              @click="${() => {
                areaDims.deleteAll();
              }}">
            </bim-button>

          </bim-panel-section>
        </bim-panel>
        `;
    });

    document.body.append(panel);
    +

    And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

    +
    const button = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
          <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
            @click="${() => {
              if (panel.classList.contains("options-menu-visible")) {
                panel.classList.remove("options-menu-visible");
              } else {
                panel.classList.add("options-menu-visible");
              }
            }}">
          </bim-button>
        `;
    });

    document.body.append(button);

    🎉 Wrap up​

    -

    That's it! You have created an app that can create and delete area dimensions on any 3D object. Congratulations!

    +

    That's it! You have created an app that can create and delete area dimensions on any 3D object. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/Civil3DNavigator/index.html b/build/Tutorials/Components/Front/Civil3DNavigator/index.html index c8bb35da4..489e6a898 100644 --- a/build/Tutorials/Components/Front/Civil3DNavigator/index.html +++ b/build/Tutorials/Components/Front/Civil3DNavigator/index.html @@ -4,8 +4,8 @@ Civil3DNavigator | That Open docs - - + +
    Skip to main content

    Civil3DNavigator

    @@ -39,6 +39,6 @@ 

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());

    🎉 Wrap up​

    -

    That's it! You have created a 3D app that can load infra models, represent its alignment in 3D and use it to navigate around with a nice camera animation. Well done!

    +

    That's it! You have created a 3D app that can load infra models, represent its alignment in 3D and use it to navigate around with a nice camera animation. Well done!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/CivilCrossSectionNavigator/index.html b/build/Tutorials/Components/Front/CivilCrossSectionNavigator/index.html index e2e0f25b8..442c23e6a 100644 --- a/build/Tutorials/Components/Front/CivilCrossSectionNavigator/index.html +++ b/build/Tutorials/Components/Front/CivilCrossSectionNavigator/index.html @@ -4,8 +4,8 @@ CivilCrossSectionNavigator | That Open docs - - + +
    Skip to main content

    CivilCrossSectionNavigator

    @@ -85,6 +85,6 @@ 

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());

    🎉 Wrap up​

    -

    That's it! You have created an app that can generate the cross section of any civil model and navigate through it smoothly. Congratulations!

    +

    That's it! You have created an app that can generate the cross section of any civil model and navigate through it smoothly. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/CivilElevationNavigator/index.html b/build/Tutorials/Components/Front/CivilElevationNavigator/index.html index 81363b3ce..b06d11265 100644 --- a/build/Tutorials/Components/Front/CivilElevationNavigator/index.html +++ b/build/Tutorials/Components/Front/CivilElevationNavigator/index.html @@ -4,8 +4,8 @@ CivilElevationNavigator | That Open docs - - + +
    Skip to main content

    CivilElevationNavigator

    @@ -68,6 +68,6 @@ 

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());

    🎉 Wrap up​

    -

    That's it! You have created an app that can generate the elevation alignment any civil model and navigate through it smoothly. Congratulations!

    +

    That's it! You have created an app that can generate the elevation alignment any civil model and navigate through it smoothly. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/CivilPlanNavigator/index.html b/build/Tutorials/Components/Front/CivilPlanNavigator/index.html index dde0e77bd..3c790b8e3 100644 --- a/build/Tutorials/Components/Front/CivilPlanNavigator/index.html +++ b/build/Tutorials/Components/Front/CivilPlanNavigator/index.html @@ -4,8 +4,8 @@ CivilPlanNavigator | That Open docs - - + +
    Skip to main content

    CivilPlanNavigator

    @@ -60,6 +60,6 @@ 

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());

    🎉 Wrap up​

    -

    That's it! You have created an app that can generate the horizontal alignment any civil model and navigate through it smoothly. Congratulations!

    +

    That's it! You have created an app that can generate the horizontal alignment any civil model and navigate through it smoothly. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/ClipEdges/index.html b/build/Tutorials/Components/Front/ClipEdges/index.html index 18e928ab6..87c417941 100644 --- a/build/Tutorials/Components/Front/ClipEdges/index.html +++ b/build/Tutorials/Components/Front/ClipEdges/index.html @@ -4,8 +4,8 @@ ClipEdges | That Open docs - - + +
    Skip to main content

    ClipEdges

    @@ -70,6 +70,6 @@

    🧩 Adding 
    const button = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
          <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
            @click="${() => {
              if (panel.classList.contains("options-menu-visible")) {
                panel.classList.remove("options-menu-visible");
              } else {
                panel.classList.add("options-menu-visible");
              }
            }}">
          </bim-button>
        `;
    });

    document.body.append(button);

    🎉 Wrap up​

    -

    That's it! You have created an app that can create, manipulate, edit and delete clipping planes on any 3D object. Congratulations!

    +

    That's it! You have created an app that can create, manipulate, edit and delete clipping planes on any 3D object. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/EdgeMeasurement/index.html b/build/Tutorials/Components/Front/EdgeMeasurement/index.html index d4ce62c3e..78d90a7d7 100644 --- a/build/Tutorials/Components/Front/EdgeMeasurement/index.html +++ b/build/Tutorials/Components/Front/EdgeMeasurement/index.html @@ -4,8 +4,8 @@ EdgeMeasurement | That Open docs - - + +
    Skip to main content

    EdgeMeasurement

    @@ -20,7 +20,7 @@

    📐 Measur
  • @thatopen/components-front to use some frontend-oriented components.
  • Stats.js (optional) to measure the performance of our app.
    • -
    import Stats from "stats.js";
    import * as THREE from "three";
    import * as OBC from "@thatopen/components";
    import * as OBCF from "@thatopen/components-front";
    +
    import Stats from "stats.js";
    import * as THREE from "three";
    import * as OBC from "@thatopen/components";
    import * as BUI from "@thatopen/ui";
    import * as OBCF from "@thatopen/components-front";

    🌎 Setting up a simple scene​

    We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

    @@ -48,8 +48,14 @@

    Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());
    +

    🧩 Adding some UI​

    +
    +

    We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

    +
    BUI.Manager.init();
    +

    Now we will add some UI to have some control over the dimensions we create. For more information about the UI library, you can check the specific documentation for it!

    +
    const panel = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
      <bim-panel active label="Edge Measurement Tutorial" class="options-menu">
          <bim-panel-section collapsed label="Controls">
              <bim-label>Create dimension: Double click</bim-label>  
              <bim-label>Delete dimension: Press O</bim-label> 
              <bim-label>Delete all dimensions: Press S</bim-label> 
              <bim-label>Set/Show saved dimensions: Press L</bim-label>   
          </bim-panel-section>
          
          <bim-panel-section collapsed label="Others">
            <bim-checkbox checked label="Dimensions enabled" 
              @change="${({ target }: { target: BUI.Checkbox }) => {
                dimensions.enabled = target.value;
              }}">  
            </bim-checkbox>       
            
            <bim-button label="Delete all"
              @click="${() => {
                dimensions.deleteAll();
              }}">
            </bim-button>

          </bim-panel-section>
        </bim-panel>
        `;
    });

    document.body.append(panel);

    🎉 Wrap up​

    -

    That's it! You have created an app that can create and delete edge dimensions on any 3D object. Congratulations!

    +

    That's it! You have created an app that can create and delete edge dimensions on any 3D object. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/FaceMeasurement/index.html b/build/Tutorials/Components/Front/FaceMeasurement/index.html index 1c35fbd7d..faa73eddc 100644 --- a/build/Tutorials/Components/Front/FaceMeasurement/index.html +++ b/build/Tutorials/Components/Front/FaceMeasurement/index.html @@ -4,8 +4,8 @@ FaceMeasurement | That Open docs - - + +
    Skip to main content

    FaceMeasurement

    @@ -20,7 +20,7 @@

    📐 Measur
  • @thatopen/components-front to use some frontend-oriented components.
  • Stats.js (optional) to measure the performance of our app.
    • -
    import Stats from "stats.js";
    import * as THREE from "three";
    import * as OBC from "@thatopen/components";
    import * as OBCF from "@thatopen/components-front";
    +
    import Stats from "stats.js";
    import * as THREE from "three";
    import * as OBC from "@thatopen/components";
    import * as BUI from "@thatopen/ui";
    import * as OBCF from "@thatopen/components-front";

    🌎 Setting up a simple scene​

    We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

    @@ -48,8 +48,16 @@

    Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());
    +

    🧩 Adding some UI​

    +
    +

    We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

    +
    BUI.Manager.init();
    +

    Now we will add some UI to have some control over the dimensions we create. For more information about the UI library, you can check the specific documentation for it!

    +
    const panel = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
      <bim-panel active label="Face Measurement Tutorial" class="options-menu">
          <bim-panel-section collapsed label="Controls">
              <bim-label>Create dimension: Double click</bim-label>  
              <bim-label>Delete dimension: Press O</bim-label> 
              <bim-label>Delete all dimensions: Press S</bim-label> 
              <bim-label>Set/Show saved dimensions: Press L</bim-label> 
          </bim-panel-section>
          
          <bim-panel-section collapsed label="Others">
            <bim-checkbox checked label="Dimensions enabled" 
              @change="${({ target }: { target: BUI.Checkbox }) => {
                dimensions.enabled = target.value;
              }}"> 
            </bim-checkbox> 
            
            <bim-button label="Delete all"
              @click="${() => {
                dimensions.deleteAll();
              }}">
            </bim-button>

          </bim-panel-section>
        </bim-panel>
        `;
    });

    document.body.append(panel);
    +

    And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

    +
    const button = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
          <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
            @click="${() => {
              if (panel.classList.contains("options-menu-visible")) {
                panel.classList.remove("options-menu-visible");
              } else {
                panel.classList.add("options-menu-visible");
              }
            }}">
          </bim-button>
        `;
    });

    document.body.append(button);

    🎉 Wrap up​

    -

    That's it! You have created an app that can create and delete face dimensions on any 3D object. Congratulations!

    +

    That's it! You have created an app that can create and delete face dimensions on any 3D object. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/Highlighter/index.html b/build/Tutorials/Components/Front/Highlighter/index.html index d24d44c9a..70d69108f 100644 --- a/build/Tutorials/Components/Front/Highlighter/index.html +++ b/build/Tutorials/Components/Front/Highlighter/index.html @@ -4,8 +4,8 @@ Highlighter | That Open docs - - + +
    Skip to main content

    Highlighter

    @@ -50,6 +50,6 @@ 

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());

    🎉 Wrap up​

    -

    That's it! You have created an app that can highlight items on hover and on selection. Congratulations!

    +

    That's it! You have created an app that can highlight items on hover and on selection. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/IfcStreamer/index.html b/build/Tutorials/Components/Front/IfcStreamer/index.html index aba02d8e8..b9d65ad1a 100644 --- a/build/Tutorials/Components/Front/IfcStreamer/index.html +++ b/build/Tutorials/Components/Front/IfcStreamer/index.html @@ -4,8 +4,8 @@ IfcStreamer | That Open docs - - + +
    Skip to main content

    IfcStreamer

    @@ -62,6 +62,6 @@ 

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());

    🎉 Wrap up​

    -

    This is it! Now you should be able to stream your own IFC models and open them anywhere, no matter how big they are! 💪 We will keep improving and making this API more powerful to handle any model on any device smoothly.

    +

    This is it! Now you should be able to stream your own IFC models and open them anywhere, no matter how big they are! 💪 We will keep improving and making this API more powerful to handle any model on any device smoothly.

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/LengthMeasurement/index.html b/build/Tutorials/Components/Front/LengthMeasurement/index.html index 02d99a7ca..c540a1769 100644 --- a/build/Tutorials/Components/Front/LengthMeasurement/index.html +++ b/build/Tutorials/Components/Front/LengthMeasurement/index.html @@ -4,8 +4,8 @@ LengthMeasurement | That Open docs - - + +
    Skip to main content

    LengthMeasurement

    @@ -58,6 +58,6 @@

    🧩 Adding 
    const button = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
          <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
            @click="${() => {
              if (panel.classList.contains("options-menu-visible")) {
                panel.classList.remove("options-menu-visible");
              } else {
                panel.classList.add("options-menu-visible");
              }
            }}">
          </bim-button>
        `;
    });

    document.body.append(button);

    🎉 Wrap up​

    -

    That's it! You have created an app that can create and delete length measurements on any 3D object. Congratulations!

    +

    That's it! You have created an app that can create and delete length measurements on any 3D object. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/Marker/index.html b/build/Tutorials/Components/Front/Marker/index.html index ecffb8db4..eac0b280a 100644 --- a/build/Tutorials/Components/Front/Marker/index.html +++ b/build/Tutorials/Components/Front/Marker/index.html @@ -4,8 +4,8 @@ Marker | That Open docs - - + +
    Skip to main content

    Marker

    @@ -42,6 +42,6 @@ 

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());

    🎉 Wrap up​

    -

    That's it! You have created an app that can display 2D elements inside the 3D scene. Congratulations!

    +

    That's it! You have created an app that can display 2D elements inside the 3D scene. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/Plans/index.html b/build/Tutorials/Components/Front/Plans/index.html index fdf07a9d6..a67abbfef 100644 --- a/build/Tutorials/Components/Front/Plans/index.html +++ b/build/Tutorials/Components/Front/Plans/index.html @@ -4,8 +4,8 @@ Plans | That Open docs - - + +
    Skip to main content

    Plans

    @@ -83,6 +83,6 @@

    🧩 Adding 
    const defaultBackground = world.scene.three.background;

    const exitButton = BUI.Component.create<BUI.Checkbox>(() => {
      return BUI.html`
          <bim-button checked label="Exit"
            @click="${() => {
              highlighter.backupColor = null;
              highlighter.clear();
              world.renderer!.postproduction.customEffects.minGloss = minGloss;
              classifier.resetColor(modelItems);
              world.scene.three.background = defaultBackground;
              plans.exitPlanView();
              culler.needsUpdate = true;
            }}">
          </bim-button>
        `;
    });

    panelSection.append(exitButton);

    🎉 Wrap up​

    -

    That's it! You have created an app that can generate all the floorplans of a BIM model and navigate across them in 2D mode with a nice black and white look. Congratulations!

    +

    That's it! You have created an app that can generate all the floorplans of a BIM model and navigate across them in 2D mode with a nice black and white look. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/PostproductionRenderer/index.html b/build/Tutorials/Components/Front/PostproductionRenderer/index.html index 5f75581a6..b8fd4e27f 100644 --- a/build/Tutorials/Components/Front/PostproductionRenderer/index.html +++ b/build/Tutorials/Components/Front/PostproductionRenderer/index.html @@ -4,8 +4,8 @@ PostproductionRenderer | That Open docs - - + +
    Skip to main content

    PostproductionRenderer

    @@ -52,6 +52,6 @@

    🧩 Adding 
    const button = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
          <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
            @click="${() => {
              if (panel.classList.contains("options-menu-visible")) {
                panel.classList.remove("options-menu-visible");
              } else {
                panel.classList.add("options-menu-visible");
              }
            }}">
          </bim-button>
        `;
    });

    document.body.append(button);

    🎉 Wrap up​

    -

    That's it! You have created an app that looks great thanks to postproduction and exposes a menu to allow the user control it in real time.

    +

    That's it! You have created an app that looks great thanks to postproduction and exposes a menu to allow the user control it in real time.

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/Sections/index.html b/build/Tutorials/Components/Front/Sections/index.html index 1cf184007..5203712b4 100644 --- a/build/Tutorials/Components/Front/Sections/index.html +++ b/build/Tutorials/Components/Front/Sections/index.html @@ -4,8 +4,8 @@ Sections | That Open docs - - + +
    Skip to main content

    Sections

    @@ -83,6 +83,6 @@

    🧩 Adding 
    const defaultBackground = world.scene.three.background;

    const exitButton = BUI.Component.create<BUI.Checkbox>(() => {
      return BUI.html`
          <bim-button checked label="Exit"
            @click="${() => {
              highlighter.backupColor = null;
              highlighter.clear();
              world.renderer!.postproduction.customEffects.minGloss = minGloss;
              classifier.resetColor(modelItems);
              world.scene.three.background = defaultBackground;
              sections.exit();
              culler.needsUpdate = true;
            }}">
          </bim-button>
        `;
    });

    panelSection.append(exitButton);

    🎉 Wrap up​

    -

    That's it! You have created an app that can generate sections of a BIM model and navigate across them in 2D mode with a nice black and white look. Congratulations!

    +

    That's it! You have created an app that can generate sections of a BIM model and navigate across them in 2D mode with a nice black and white look. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/ShadowDropper/index.html b/build/Tutorials/Components/Front/ShadowDropper/index.html index fe90ecae8..4ebf3c5bd 100644 --- a/build/Tutorials/Components/Front/ShadowDropper/index.html +++ b/build/Tutorials/Components/Front/ShadowDropper/index.html @@ -4,8 +4,8 @@ ShadowDropper | That Open docs - - + +
    Skip to main content

    ShadowDropper

    @@ -55,6 +55,6 @@

    🧩 Adding 
    const button = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
          <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
            @click="${() => {
              if (panel.classList.contains("options-menu-visible")) {
                panel.classList.remove("options-menu-visible");
              } else {
                panel.classList.add("options-menu-visible");
              }
            }}">
          </bim-button>
        `;
    });

    document.body.append(button);

    🎉 Wrap up​

    -

    That's it! You have created a scene where you can create a super efficient projected shadow on any object. Congratulations!

    +

    That's it! You have created a scene where you can create a super efficient projected shadow on any object. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/Front/VolumeMeasurement/index.html b/build/Tutorials/Components/Front/VolumeMeasurement/index.html index eca2b59d6..afd47e612 100644 --- a/build/Tutorials/Components/Front/VolumeMeasurement/index.html +++ b/build/Tutorials/Components/Front/VolumeMeasurement/index.html @@ -4,8 +4,8 @@ VolumeMeasurement | That Open docs - - + +
    Skip to main content

    VolumeMeasurement

    @@ -19,7 +19,7 @@

    📐 Meas
  • @thatopen/components-front to use some frontend-oriented components.
  • Stats.js (optional) to measure the performance of our app.
    • -
    import Stats from "stats.js";
    import * as OBC from "@thatopen/components";
    import * as OBCF from "@thatopen/components-front";
    +
    import Stats from "stats.js";
    import * as OBC from "@thatopen/components";
    import * as BUI from "@thatopen/ui";
    import * as OBCF from "@thatopen/components-front";

    🌎 Setting up a simple scene​

    We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

    @@ -35,7 +35,7 @@ 

    const dimensions = components.get(OBCF.VolumeMeasurement);
    dimensions.world = world;
    dimensions.enabled = true;

    -

    🔦 Getting the highlighter​

    +

    🔦 Getting the highlighter​

    Now, let's get an instance of the highlighter component and initialize it to be able to highlight the computed volume.

    Highlighter?

    If you are not familiar with the highlighter component, check out the highlighter tutorial!

    @@ -46,8 +46,16 @@

    Stats.js to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.

    const stats = new Stats();
    stats.showPanel(2);
    document.body.append(stats.dom);
    stats.dom.style.left = "0px";
    stats.dom.style.zIndex = "unset";
    world.renderer.onBeforeUpdate.add(() => stats.begin());
    world.renderer.onAfterUpdate.add(() => stats.end());
    +

    🧩 Adding some UI​

    +
    +

    We will use the @thatopen/ui library to add some simple and cool UI elements to our app. First, we need to call the init method of the BUI.Manager class to initialize the library:

    +
    BUI.Manager.init();
    +

    Now we will add some UI to have some control over the dimensions we create. For more information about the UI library, you can check the specific documentation for it!

    +
    const panel = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
      <bim-panel active label="Volume Measurement Tutorial" class="options-menu">
          <bim-panel-section collapsed label="Controls">
              <bim-label>Create dimension: Left click</bim-label>  
              <bim-label>Delete dimension: Left click el</bim-label>  
          </bim-panel-section>
          
          <bim-panel-section collapsed label="Others"> 
            
            <bim-button label="Delete all"
              @click="${() => {
                dimensions.clear();
                highlighter.clear();
              }}">
            </bim-button>

          </bim-panel-section>
        </bim-panel>
        `;
    });

    document.body.append(panel);
    +

    And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.

    +
    const button = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
          <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
            @click="${() => {
              if (panel.classList.contains("options-menu-visible")) {
                panel.classList.remove("options-menu-visible");
              } else {
                panel.classList.add("options-menu-visible");
              }
            }}">
          </bim-button>
        `;
    });

    document.body.append(button);

    🎉 Wrap up​

    -

    That's it! You have created an app that can create and delete volume dimensions on any 3D object. Congratulations!

    +

    That's it! You have created an app that can create and delete volume dimensions on any 3D object. Congratulations!

    \ No newline at end of file diff --git a/build/Tutorials/Components/index.html b/build/Tutorials/Components/index.html index fe210d301..2d9939d5c 100644 --- a/build/Tutorials/Components/index.html +++ b/build/Tutorials/Components/index.html @@ -4,8 +4,8 @@ Components | That Open docs - - + +
    Skip to main content

    Components

    TOC @@ -28,6 +28,6 @@

    PackagesUsage​

    You need to be familiar with Three.js API to be able to use this library effectively. In the following example, we will create a cube in a 3D scene that can be navigated with the mouse or touch events. You can see the full example here and the deployed app here.

    -
    /* eslint import/no-extraneous-dependencies: 0 */

    import * as THREE from "three";
    import * as OBC from "../..";

    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();

    const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
    const geometry = new THREE.BoxGeometry();
    const cube = new THREE.Mesh(geometry, material);
    world.scene.three.add(cube);

    world.scene.setup();

    world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
    +
    /* eslint import/no-extraneous-dependencies: 0 */

    import * as THREE from "three";
    import * as OBC from "../..";

    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();

    const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
    const geometry = new THREE.BoxGeometry();
    const cube = new THREE.Mesh(geometry, material);
    world.scene.three.add(cube);

    world.scene.setup();

    world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/Core/Component/index.html b/build/Tutorials/UserInterface/Core/Component/index.html index 6803004f5..10e8b7ba3 100644 --- a/build/Tutorials/UserInterface/Core/Component/index.html +++ b/build/Tutorials/UserInterface/Core/Component/index.html @@ -4,8 +4,8 @@ Component | That Open docs - - + +
    Skip to main content

    Component

    @@ -15,6 +15,16 @@

    lit-html 💪. The Component class has a static method to create functional components (UI defined as a function) that can be updated anytime. The method is Component.create.

    note

    Despite the Component is a class that can be instantiated or extended, from a developer perspective using the library is most likely it will only use the create method.

    +

    Importing the libraries:​

    +

    In this tutorial, we will import:

    +
      +
    • @thatopen/ui to add some simple and cool UI menus.
      • +
    +
    // You have to import from "@thatopen/ui"
    import * as BUI from "../..";
    +

    📋 Initialising the UI​

    +
    +

    We will use the @thatopen/ui library to add some simple and cool UI elements to our app. For that, we need to call the init method of the BUI.Manager class to initialize the library:

    +
    BUI.Manager.init();

    Creating an stateless component​

    To start learning how to create custom components, let's create a custom component that uses the panel section:

    const statelessPanelSection = BUI.Component.create<BUI.PanelSection>(() => {
      return BUI.html`
        <bim-panel-section label="Stateless Panel Section">
          <bim-color-input label="Color"></bim-color-input>
        </bim-panel-section>
      `;
    });
    @@ -48,6 +58,6 @@

    Nesting c

    Finally, you can add your panel component anywhere you want as its an HTMLElement just like any other!

    document.body.append(panel);

    Congratulations! You already know how to create your own custom reactive components. Don't stop learning! Take a look at more tutorials in the documentation 🙂.

    -
    tip

    The complementary packages of the library such as @thatopen/ui-obc have premade functional components just like the ones we've learned to create in this tutorial, so you don't need to bother to create them by yourself 😉

    +
    tip

    The complementary packages of the library such as @thatopen/ui-obc have premade functional components just like the ones we've learned to create in this tutorial, so you don't need to bother to create them by yourself 😉

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/Core/Table/DataTransform/index.html b/build/Tutorials/UserInterface/Core/Table/DataTransform/index.html index 73cc135c0..bd00dbed4 100644 --- a/build/Tutorials/UserInterface/Core/Table/DataTransform/index.html +++ b/build/Tutorials/UserInterface/Core/Table/DataTransform/index.html @@ -4,8 +4,8 @@ DataTransform | That Open docs - - + +
    Skip to main content

    DataTransform

    @@ -41,6 +41,6 @@

    As everything is already setup, let's create a new component to hold the tables together and display them in the page. You can do it very easily as follows:

    const appContent = BUI.Component.create(
      () => BUI.html`
        <div style="display: flex; flex-direction: column; gap: 0.75rem; height: 100%;">
          <bim-label style="font-size: 1.375rem; line-height: normal;">Without Data Transform</bim-label>
          ${simpleTable}
          <bim-label style="font-size: 1.375rem; line-height: normal;">Data Transform applied!</bim-label>
          ${advancedTable}
        </div>
      `,
    );

    document.body.append(appContent);
    -

    Congratulations! You already know how to use an advanced feature of the bim-table component to display the information exactly how you need it. Don't hesitate into watching more tutorials! 🚀

    +

    Congratulations! You already know how to use an advanced feature of the bim-table component to display the information exactly how you need it. Don't hesitate into watching more tutorials! 🚀

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/Core/Table/ExportingData/index.html b/build/Tutorials/UserInterface/Core/Table/ExportingData/index.html index 65152f0c3..bbf29426b 100644 --- a/build/Tutorials/UserInterface/Core/Table/ExportingData/index.html +++ b/build/Tutorials/UserInterface/Core/Table/ExportingData/index.html @@ -4,8 +4,8 @@ ExportingData | That Open docs - - + +
    Skip to main content

    ExportingData

    @@ -40,6 +40,6 @@

    As everything is already setup, let's create a new component to hold everything and display them in the page. You can do it very easily as follows:

    const appContent = BUI.Component.create(
      () => BUI.html`
        <div style="display: flex; flex-direction: column; gap: 0.75rem; height: 100%;">
          <div style="display: flex; gap: 0.5rem">
            ${searchBox}
            ${fileNameInput}
            ${formatDropdown}
            ${indentationCheckbox}
            ${downloadBtn}
            ${copyBtn}
          </div> 
          ${table}
        </div>
      `,
    );

    document.body.append(appContent);
    -

    Congratulations! You already know how to export data from your bim-table component and take it anywhere you want. Don't hesitate into watching more tutorials, they're all free! 🚀

    +

    Congratulations! You already know how to export data from your bim-table component and take it anywhere you want. Don't hesitate into watching more tutorials, they're all free! 🚀

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/Core/Table/LoadFunction/index.html b/build/Tutorials/UserInterface/Core/Table/LoadFunction/index.html index 6edfeeaf2..81996dc36 100644 --- a/build/Tutorials/UserInterface/Core/Table/LoadFunction/index.html +++ b/build/Tutorials/UserInterface/Core/Table/LoadFunction/index.html @@ -4,8 +4,8 @@ LoadFunction | That Open docs - - + +
    Skip to main content

    LoadFunction

    @@ -39,6 +39,6 @@

    As everything is already setup, let's create a new component to hold all components together and display them in the page. You can do it very easily as follows:

    const appContent = BUI.Component.create(
      () => BUI.html`
        <div style="display: flex; flex-direction: column; gap: 0.75rem; height: 100%;">
          <div style="display: flex; gap: 0.375rem; width: 10rem;">
            ${forceErrorCheckbox}
            ${cleanDataBtn}
          </div>
          ${table}
        </div>
      `,
    );

    document.body.append(appContent);
    -

    Great! As you see, setting up async loading and handling errors is extremely simple when you use the bim-table component from That Open Engine. Let's continue with more tutorials! 🚀

    +

    Great! As you see, setting up async loading and handling errors is extremely simple when you use the bim-table component from That Open Engine. Let's continue with more tutorials! 🚀

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/Core/Table/Searching/index.html b/build/Tutorials/UserInterface/Core/Table/Searching/index.html index db9906637..3aed94f02 100644 --- a/build/Tutorials/UserInterface/Core/Table/Searching/index.html +++ b/build/Tutorials/UserInterface/Core/Table/Searching/index.html @@ -4,8 +4,8 @@ Searching | That Open docs - - + +
    Skip to main content

    Searching

    @@ -48,6 +48,6 @@

    As everything is already setup, let's create a new component to hold all everything and display them in the page. You can do it very easily like this:

    const appContent = BUI.Component.create(
      () => BUI.html`
        <div style="display: flex; flex-direction: column; gap: 0.75rem; height: 100%;">
          <div style="display: flex; gap: 0.75rem;">
            ${searchBox}
            ${quickFilters}
            ${preserveStructure}
          </div>
          ${table}
        </div>
      `,
    );

    document.body.append(appContent);
    -

    Congratulations! You already know how to use an advanced feature of the bim-table component to display the information exactly how you need it. Don't hesitate into watching more tutorials! 🚀

    +

    Congratulations! You already know how to use an advanced feature of the bim-table component to display the information exactly how you need it. Don't hesitate into watching more tutorials! 🚀

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/Core/Table/index.html b/build/Tutorials/UserInterface/Core/Table/index.html index de8636243..c4f9fe573 100644 --- a/build/Tutorials/UserInterface/Core/Table/index.html +++ b/build/Tutorials/UserInterface/Core/Table/index.html @@ -4,8 +4,8 @@ Table | That Open docs - - + +
    Skip to main content

    Table

    @@ -46,6 +46,6 @@

    As everything is already setup, let's create a new component to hold all buttons and tables together and display them in the page.

    const appContent = BUI.Component.create(
      () => BUI.html`
       <div style="display: flex; flex-direction: column; gap: 0.75rem; height: 100%;">
         <div style="display: flex; gap: 0.5rem">
           ${changeBtn}
           ${deleteBtn}
           ${addChildBtn}
         </div>
         ${simpleTable}
         ${nestedTable}
       </div> 
      `,
    );

    document.body.append(appContent);
    -

    Amazing! Isn't? You're now ready to implement tables in your next app. This is just the tip of the iceberg regarding the bim-table component, so continue watching the other table tutorials we have 💪

    +

    Amazing! Isn't? You're now ready to implement tables in your next app. This is just the tip of the iceberg regarding the bim-table component, so continue watching the other table tutorials we have 💪

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/ClassificationsTree/index.html b/build/Tutorials/UserInterface/OBC/ClassificationsTree/index.html index b0bc7d72b..303341cee 100644 --- a/build/Tutorials/UserInterface/OBC/ClassificationsTree/index.html +++ b/build/Tutorials/UserInterface/OBC/ClassificationsTree/index.html @@ -4,8 +4,8 @@ ClassificationsTree | That Open docs - - + +
    Skip to main content

    ClassificationsTree

    @@ -14,16 +14,41 @@

    🖖 Importing our Libraries​

    +

    In this tutorial, we will import:

    +
      +
    • @thatopen/components to set up the barebone of our app.
      • +
    • @thatopen/ui to add some simple and cool UI menus.
      • +
    • @thatopen/ui-obc to add some cool pre-made UI menus for components.
      • +
    +
    import * as OBC from "@thatopen/components";
    import * as BUI from "@thatopen/ui";
    // You have to import from "@thatopen/ui-obc"
    import * as BUIC from "../..";
    +

    📋 Initializing the UI​

    +

    As always, let's first initialize the UI library. Remember you only have to do it once in your entire app.

    +
    BUI.Manager.init();
    +

    🌎 Setting up a simple scene​

    +
    +

    We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

    +
    const components = new OBC.Components();

    const viewport = document.createElement("bim-viewport");
    viewport.name = "viewer";

    const worlds = components.get(OBC.Worlds);
    const world = worlds.create();

    const sceneComponent = new OBC.SimpleScene(components);
    sceneComponent.setup();
    world.scene = sceneComponent;

    const rendererComponent = new OBC.SimpleRenderer(components, viewport);
    world.renderer = rendererComponent;

    const cameraComponent = new OBC.SimpleCamera(components);
    world.camera = cameraComponent;

    viewport.addEventListener("resize", () => {
      rendererComponent.resize();
      cameraComponent.updateAspect();
    });

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

    components.init();
    +

    Managing your loaded models 🏢​

    +
    +

    What else can we say? The task is really simple: we need to see a list of the loaded models in the app. Let's get into it!

    +

    Setting up the components​

    +

    First of all, we're going to get the FragmentIfcLoader from an existing components instance:

    +
    const ifcLoader = components.get(OBC.IfcLoader);
    await ifcLoader.setup();
    +

    The step above is super important as none of the existing functional components setup any tool, they just get it as they are! So, if we don't setup the FragmentIfcLoader then the wasm path is not going to be defined and an error will arise 🤓. Just after we have setup the loader, let's then configure the FragmentManager so any time a model is loaded it gets added to some world scene created before:

    +
    const fragmentsManager = components.get(OBC.FragmentsManager);
    +

    If you want to get the resulted model every time a new model is loaded, you can subscribe to the following event anywhere in your app:

    +
    fragmentsManager.onFragmentsLoaded.add((model) => {
      if (world.scene) world.scene.three.add(model);
    });

    Creating the classifications tree​

    First things first, let's create an instance of the functional component, like this:

    -
    const [classificationsTree, updateClassificationsTree] =
      CUI.tables.classificationTree({
        components,
        classifications: [],
      });
    +
    const [classificationsTree, updateClassificationsTree] =
      BUIC.tables.classificationTree({
        components,
        classifications: [],
      });

    Now that we have the classifications tree created, let's tell the FragmentsManager that each time a model is loaded it needs to classify the model based on some conditions, but more importantly is that right after those classifications are made it needs to update the classifications tree!

    const classifier = components.get(OBC.Classifier);

    fragmentsManager.onFragmentsLoaded.add(async (model) => {
      // This creates a classification system named "entities"
      classifier.byEntity(model);

      // This creates a classification system named "predefinedTypes"
      await classifier.byPredefinedType(model);

      // This classifications in the state of the classifications tree.
      // Is an array with the classification systems to be shown.
      // You can pass the system name directly, or an object with system and label keys.
      // The system key is the name in the classifier, and the label is how you want it to be shown in the table.
      const classifications = [
        { system: "entities", label: "Entities" },
        { system: "predefinedTypes", label: "Predefined Types" },
      ];

      updateClassificationsTree({ classifications });
    });

    The classifications value is just an array of the classification systems from the Classifier that you want to display in the user interface, where system is the name in classifier.list and label is the name you want to use to display in the UI. Needless to say, the classifications need to be computed before they can be used on the tree. Great! As we already told the UI when it needs to update, let's add the classifications tree to the HTML page. For it, let's create simple BIM panel component where we include the tree and also a pre-made IFC load button 👇

    -
    const panel = BUI.Component.create(() => {
      const [loadIfcBtn] = CUI.buttons.loadIfc({ components });

      return BUI.html`
       <bim-panel label="Classifications Tree">
        <bim-panel-section label="Importing">
          ${loadIfcBtn}
        </bim-panel-section>
        <bim-panel-section label="Classifications">
          ${classificationsTree}
        </bim-panel-section>
       </bim-panel> 
      `;
    });
    +
    const panel = BUI.Component.create(() => {
      const [loadIfcBtn] = BUIC.buttons.loadIfc({ components });

      return BUI.html`
       <bim-panel label="Classifications Tree">
        <bim-panel-section label="Importing">
          ${loadIfcBtn}
        </bim-panel-section>
        <bim-panel-section label="Classifications">
          ${classificationsTree}
        </bim-panel-section>
       </bim-panel> 
      `;
    });

    Finally, let's append the BIM Panel to the page to see the classifications tree working 😉

    const app = document.createElement("bim-grid");
    app.layouts = {
      main: {
        template: `
          "panel viewport"
          / 23rem 1fr
        `,
        elements: { panel, viewport },
      },
    };

    app.layout = "main";
    document.body.append(app);
    -

    Congratulations! You've now a ready to go user interface that let's you show your model classifications. 🥳

    +

    Congratulations! You've now a ready to go user interface that let's you show your model classifications. 🥳

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/ElementProperties/index.html b/build/Tutorials/UserInterface/OBC/ElementProperties/index.html index 3967776cc..69136e918 100644 --- a/build/Tutorials/UserInterface/OBC/ElementProperties/index.html +++ b/build/Tutorials/UserInterface/OBC/ElementProperties/index.html @@ -4,8 +4,8 @@ ElementProperties | That Open docs - - + +
    Skip to main content

    ElementProperties

    @@ -13,6 +13,22 @@

    Displaying data the simplest way 🔥🔥​

    What is a good BIM app if you don't give users a nice way to visualize its model properties, right? Well, hold tight as here you will learn all you need to know in order to use the power of UI Components to accomplish that!

    +

    🖖 Importing our Libraries​

    +

    In this tutorial, we will import:

    +
      +
    • @thatopen/ui to add some simple and cool UI menus.
      • +
    • @thatopen/components to set up the barebone of our app.
      • +
    • @thatopen/components-front to use some frontend-oriented components.
      • +
    • @thatopen/ui-obc to add some cool pre-made UI menus for components.
      • +
    +
    import * as BUI from "@thatopen/ui";
    import * as OBC from "@thatopen/components";
    import * as OBCF from "@thatopen/components-front";
    // You have to import from "@thatopen/ui-obc"
    import * as BUIC from "../..";
    +

    📋 Initializing the UI​

    +

    As always, let's first initialize the UI library. Remember you only have to do it once in your entire app.

    +
    BUI.Manager.init();
    +

    🌎 Setting up a simple scene​

    +
    +

    We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

    +
    const viewport = document.createElement("bim-viewport");

    const components = new OBC.Components();

    const worlds = components.get(OBC.Worlds);

    const world = worlds.create();
    const sceneComponent = new OBC.SimpleScene(components);
    sceneComponent.setup();
    world.scene = sceneComponent;

    const rendererComponent = new OBC.SimpleRenderer(components, viewport);
    world.renderer = rendererComponent;

    const cameraComponent = new OBC.SimpleCamera(components);
    world.camera = cameraComponent;
    cameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);

    viewport.addEventListener("resize", () => {
      rendererComponent.resize();
      cameraComponent.updateAspect();
    });

    components.init();

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

    Loading a model and computing it's relations​

    First things first... let's load a model 👇

    const ifcLoader = components.get(OBC.IfcLoader);
    await ifcLoader.setup();
    const file = await fetch(
      "https://thatopen.github.io/engine_ui-components/resources/small.ifc",
    );
    const buffer = await file.arrayBuffer();
    const typedArray = new Uint8Array(buffer);
    const model = await ifcLoader.load(typedArray);
    world.scene.three.add(model);
    @@ -22,15 +38,15 @@

    Creating the properties table​

    Let's create an instance of the functional component, like this:

    -
    const [propertiesTable, updatePropertiesTable] = CUI.tables.elementProperties({
      components,
      fragmentIdMap: {},
    });

    propertiesTable.preserveStructureOnFilter = true;
    propertiesTable.indentationInText = false;
    +
    const [propertiesTable, updatePropertiesTable] = BUIC.tables.elementProperties({
      components,
      fragmentIdMap: {},
    });

    propertiesTable.preserveStructureOnFilter = true;
    propertiesTable.indentationInText = false;
    tip

    The elementProperties functional component is a simplified version that shows any model entity data. However, if you like a more complete properties table, use the entityAttributes component.

    Cool! properties table created. Then after, let's tell the properties table to update each time the user makes a selection over the model. For it, we will use the highlighter from @thatopen/components-front:

    -
    const highlighter = components.get(OBF.Highlighter);
    highlighter.setup({ world });

    highlighter.events.select.onHighlight.add((fragmentIdMap) => {
      updatePropertiesTable({ fragmentIdMap });
    });

    highlighter.events.select.onClear.add(() =>
      updatePropertiesTable({ fragmentIdMap: {} }),
    );
    +
    const highlighter = components.get(OBCF.Highlighter);
    highlighter.setup({ world });

    highlighter.events.select.onHighlight.add((fragmentIdMap) => {
      updatePropertiesTable({ fragmentIdMap });
    });

    highlighter.events.select.onClear.add(() =>
      updatePropertiesTable({ fragmentIdMap: {} }),
    );

    Creating a panel to append the table​

    Allright! Let's now create a BIM Panel to control some aspects of the properties table and to trigger some functionalities like expanding the rows children and copying the values to TSV, so you can paste your element values inside a spreadsheet application 😉

    const propertiesPanel = BUI.Component.create(() => {
      const onTextInput = (e: Event) => {
        const input = e.target as BUI.TextInput;
        propertiesTable.queryString = input.value !== "" ? input.value : null;
      };

      const expandTable = (e: Event) => {
        const button = e.target as BUI.Button;
        propertiesTable.expanded = !propertiesTable.expanded;
        button.label = propertiesTable.expanded ? "Collapse" : "Expand";
      };

      const copyAsTSV = async () => {
        await navigator.clipboard.writeText(propertiesTable.tsv);
      };

      return BUI.html`
        <bim-panel label="Properties">
          <bim-panel-section label="Element Data">
            <div style="display: flex; gap: 0.5rem;">
              <bim-button @click=${expandTable} label=${propertiesTable.expanded ? "Collapse" : "Expand"}></bim-button> 
              <bim-button @click=${copyAsTSV} label="Copy as TSV"></bim-button> 
            </div> 
            <bim-text-input @input=${onTextInput} placeholder="Search Property" debounce="250"></bim-text-input>
            ${propertiesTable}
          </bim-panel-section>
        </bim-panel>
      `;
    });

    Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything.

    const app = document.createElement("bim-grid");
    app.layouts = {
      main: {
        template: `
        "propertiesPanel viewport"
        /25rem 1fr
        `,
        elements: { propertiesPanel, viewport },
      },
    };

    app.layout = "main";
    document.body.append(app);
    -

    Congratulations! You have now created a fully working properties table for your app in less than 5 minutes of work. Keep going with more tutorials! 💪

    +

    Congratulations! You have now created a fully working properties table for your app in less than 5 minutes of work. Keep going with more tutorials! 💪

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html b/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html index ba47c10df..abda9ce14 100644 --- a/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html +++ b/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html @@ -4,8 +4,8 @@ EntityAttributes | That Open docs - - + +
    Skip to main content

    EntityAttributes

    @@ -13,28 +13,44 @@

    Displaying data the advanced way 🔥🔥​

    What is a good BIM app if you don't give users a nice way to visualize its model properties, right? Well, hold tight as here you will learn all you need to know in order to use the power of UI Components to accomplish that!

    +

    🖖 Importing our Libraries​

    +

    In this tutorial, we will import:

    +
      +
    • web-ifc to get some IFC items.
      • +
    • @thatopen/ui to add some simple and cool UI menus.
      • +
    • @thatopen/components to set up the barebone of our app.
      • +
    • @thatopen/components-front to use some frontend-oriented components.
      • +
    • @thatopen/ui-obc to add some cool pre-made UI menus for components.
      • +
    +
    /* eslint-disable no-alert import * as WEBIFC from "web-ifc";
    import * as BUI from "@thatopen/ui";
    import * as OBC from "@thatopen/components";
    import * as OBCF from "@thatopen/components-front";
    // You have to import from "@thatopen/ui-obc"
    import * as BUIC from "../..";
    +

    📋 Initializing the UI​

    +

    As always, let's first initialize the UI library. Remember you only have to do it once in your entire app.

    +
    BUI.Manager.init();
    +

    🌎 Setting up a simple scene​

    +
    +

    We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

    +
    const components = new OBC.Components();

    const worlds = components.get(OBC.Worlds);

    const world = worlds.create();
    const sceneComponent = new OBC.SimpleScene(components);
    sceneComponent.setup();
    world.scene = sceneComponent;

    const viewport = document.createElement("bim-viewport");
    const rendererComponent = new OBC.SimpleRenderer(components, viewport);
    world.renderer = rendererComponent;

    const cameraComponent = new OBC.SimpleCamera(components);
    world.camera = cameraComponent;
    cameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);

    viewport.addEventListener("resize", () => {
      rendererComponent.resize();
      cameraComponent.updateAspect();
    });

    components.init();

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

    Loading a model and computing it's relations​

    First things first... let's load a model 👇

    -
    import * as WEBIFC from "web-ifc";
    import * as BUI from "@thatopen/ui";
    import * as OBC from "@thatopen/components";
    import * as OBF from "@thatopen/components-front";
    import * as CUI from "../..";

    BUI.Manager.init();

    const components = new OBC.Components();

    const worlds = components.get(OBC.Worlds);

    const world = worlds.create();
    const sceneComponent = new OBC.SimpleScene(components);
    sceneComponent.setup();
    world.scene = sceneComponent;

    const viewport = document.createElement("bim-viewport");
    const rendererComponent = new OBC.SimpleRenderer(components, viewport);
    world.renderer = rendererComponent;

    const cameraComponent = new OBC.SimpleCamera(components);
    world.camera = cameraComponent;
    cameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);

    viewport.addEventListener("resize", () => {
      rendererComponent.resize();
      cameraComponent.updateAspect();
    });

    components.init();

    const grids = components.get(OBC.Grids);
    grids.create(world);
    +
    const ifcLoader = components.get(OBC.IfcLoader);
    await ifcLoader.setup();
    const file = await fetch(
      "https://thatopen.github.io/engine_ui-components/resources/small.ifc",
    );
    const buffer = await file.arrayBuffer();
    const typedArray = new Uint8Array(buffer);
    const model = await ifcLoader.load(typedArray);
    world.scene.three.add(model);
    tip

    You don't need to add the model into the scene to display its properties. However, as we are going to display the attributes for each selected element, then having the model into the scene is obvious, right?

    Now, in order to get the most out of the entities table, you need to calculate the relations index of your model. To do it, you will need to use the IfcRelationsIndexer component from @thatopen/components to speed up the process.

    -
    const ifcLoader = components.get(OBC.IfcLoader);
    await ifcLoader.setup();
    const file = await fetch(
      "https://thatopen.github.io/engine_ui-components/resources/small.ifc",
    );
    const buffer = await file.arrayBuffer();
    const typedArray = new Uint8Array(buffer);
    const model = await ifcLoader.load(typedArray);
    world.scene.three.add(model);
    +
    const indexer = components.get(OBC.IfcRelationsIndexer);
    await indexer.process(model);

    Preconfiguring the table​

    The attributes table has some optional configurations. One of them is the ability to modify the styles of the cell value based on the attribute value (e.g., colorizing entities with a specific string in its name, or numeric values based on a codition ). For it, let's first create a simple base style that all our cell overwrites will share:

    -
    const indexer = components.get(OBC.IfcRelationsIndexer);
    await indexer.process(model);
    +
    const baseStyle: Record<string, string> = {
      padding: "0.25rem",
      borderRadius: "0.25rem",
    };

    Then, let's create an object where the keys are the attribute values you want to overwrite its styles, and the values are functions that returns an html template result.

    tip

    If you want to learn more about the html template tag and how to use it, just take a look at the tutorial on how to make a custom component.

    -
    const baseStyle: Record<string, string> = {
      padding: "0.25rem",
      borderRadius: "0.25rem",
    };
    -

    Keep in mind the step above is optional! Not needed for the table to work. Now its time to create the table using the predefine functional component that ships with the library 🙂

    const tableDefinition: BUI.TableDataTransform = {
      Entity: (entity) => {
        let style = {};
        if (entity === OBC.IfcCategoryMap[WEBIFC.IFCPROPERTYSET]) {
          style = {
            ...baseStyle,
            backgroundColor: "purple",
            color: "white",
          };
        }
        if (String(entity).includes("IFCWALL")) {
          style = {
            ...baseStyle,
            backgroundColor: "green",
            color: "white",
          };
        }
        return BUI.html`<bim-label style=${BUI.styleMap(style)}>${entity}</bim-label>`;
      },
      PredefinedType: (type) => {
        const colors = ["#1c8d83", "#3c1c8d", "#386c19", "#837c24"];
        const randomIndex = Math.floor(Math.random() * colors.length);
        const backgroundColor = colors[randomIndex];
        const style = { ...baseStyle, backgroundColor, color: "white" };
        return BUI.html`<bim-label style=${BUI.styleMap(style)}>${type}</bim-label>`;
      },
      NominalValue: (value) => {
        let style = {};
        if (typeof value === "boolean" && value === false) {
          style = { ...baseStyle, backgroundColor: "#b13535", color: "white" };
        }
        if (typeof value === "boolean" && value === true) {
          style = { ...baseStyle, backgroundColor: "#18882c", color: "white" };
        }
        return BUI.html`<bim-label style=${BUI.styleMap(style)}>${value}</bim-label>`;
      },
    };
    +

    Keep in mind the step above is optional! Not needed for the table to work. Now its time to create the table using the predefine functional component that ships with the library 🙂

    +
    const [attributesTable, updateAttributesTable] = BUIC.tables.entityAttributes({
      components,
      fragmentIdMap: {},
      tableDefinition,
      attributesToInclude: () => {
        const attributes: any[] = [
          "Name",
          "ContainedInStructure",
          "HasProperties",
          "HasPropertySets",
          (name: string) => name.includes("Value"),
          (name: string) => name.startsWith("Material"),
          (name: string) => name.startsWith("Relating"),
          (name: string) => {
            const ignore = ["IsGroupedBy", "IsDecomposedBy"];
            return name.startsWith("Is") && !ignore.includes(name);
          },
        ];
        return attributes;
      },
    });

    attributesTable.expanded = true;
    attributesTable.indentationInText = true;
    attributesTable.preserveStructureOnFilter = true;

    Cool! attributes table created. Then after, let's tell the attributes table to update each time the user makes a selection over the model. For it, we will use the Highlighter:

    -
    const [attributesTable, updateAttributesTable] = CUI.tables.entityAttributes({
      components,
      fragmentIdMap: {},
      tableDefinition,
      attributesToInclude: () => {
        const attributes: any[] = [
          "Name",
          "ContainedInStructure",
          "HasProperties",
          "HasPropertySets",
          (name: string) => name.includes("Value"),
          (name: string) => name.startsWith("Material"),
          (name: string) => name.startsWith("Relating"),
          (name: string) => {
            const ignore = ["IsGroupedBy", "IsDecomposedBy"];
            return name.startsWith("Is") && !ignore.includes(name);
          },
        ];
        return attributes;
      },
    });

    attributesTable.expanded = true;
    attributesTable.indentationInText = true;
    attributesTable.preserveStructureOnFilter = true;
    +
    const highlighter = components.get(OBCF.Highlighter);
    highlighter.setup({ world });

    highlighter.events.select.onHighlight.add((fragmentIdMap) => {
      updateAttributesTable({ fragmentIdMap });
    });

    highlighter.events.select.onClear.add(() =>
      updateAttributesTable({ fragmentIdMap: {} }),
    );

    Creating a panel to append the table​

    Allright! Let's now create a BIM Panel to control some aspects of the attributes table and to trigger some functionalities like copying the values to TSV or exporing the data to JSON 😉

    -
    const highlighter = components.get(OBF.Highlighter);
    highlighter.setup({ world });

    highlighter.events.select.onHighlight.add((fragmentIdMap) => {
      updateAttributesTable({ fragmentIdMap });
    });

    highlighter.events.select.onClear.add(() =>
      updateAttributesTable({ fragmentIdMap: {} }),
    );
    -

    Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything.

    const entityAttributesPanel = BUI.Component.create(() => {
      const onSearchInput = (e: Event) => {
        const input = e.target as BUI.TextInput;
        attributesTable.queryString = input.value;
      };

      const onPreserveStructureChange = (e: Event) => {
        const checkbox = e.target as BUI.Checkbox;
        attributesTable.preserveStructureOnFilter = checkbox.checked;
      };

      const onExportJSON = () => {
        attributesTable.downloadData("entities-attributes");
      };

      const onCopyTSV = async () => {
        await navigator.clipboard.writeText(attributesTable.tsv);
        alert(
          "Table data copied as TSV in clipboard! Try to paste it in a spreadsheet app.",
        );
      };

      const onAttributesChange = (e: Event) => {
        const dropdown = e.target as BUI.Dropdown;
        updateAttributesTable({
          attributesToInclude: () => {
            const attributes: any[] = [
              ...dropdown.value,
              (name: string) => name.includes("Value"),
              (name: string) => name.startsWith("Material"),
              (name: string) => name.startsWith("Relating"),
              (name: string) => {
                const ignore = ["IsGroupedBy", "IsDecomposedBy"];
                return name.startsWith("Is") && !ignore.includes(name);
              },
            ];
            return attributes;
          },
        });
      };

      return BUI.html`
        <bim-panel>
          <bim-panel-section label="Entity Attributes" fixed>
            <div style="display: flex; gap: 0.5rem; justify-content: space-between;">
              <div style="display: flex; gap: 0.5rem;">
                <bim-text-input @input=${onSearchInput} type="search" placeholder="Search" debounce="250"></bim-text-input>
                <bim-checkbox @change=${onPreserveStructureChange} label="Preserve Structure" inverted checked></bim-checkbox>
              </div>
              <div style="display: flex; gap: 0.5rem;">
                <bim-dropdown @change=${onAttributesChange} multiple>
                  <bim-option label="Name" checked></bim-option> 
                  <bim-option label="ContainedInStructure" checked></bim-option>
                  <bim-option label="ForLayerSet"></bim-option>
                  <bim-option label="LayerThickness"></bim-option>
                  <bim-option label="HasProperties" checked></bim-option>
                  <bim-option label="HasAssociations"></bim-option>
                  <bim-option label="HasAssignments"></bim-option>
                  <bim-option label="HasPropertySets" checked></bim-option>
                  <bim-option label="PredefinedType"></bim-option>
                  <bim-option label="Quantities"></bim-option>
                  <bim-option label="ReferencedSource"></bim-option>
                  <bim-option label="Identification"></bim-option>
                  <bim-option label="Prefix"></bim-option>
                  <bim-option label="LongName"></bim-option>
                </bim-dropdown>
                <bim-button @click=${onCopyTSV} icon="solar:copy-bold" tooltip-title="Copy TSV" tooltip-text="Copy the table contents as tab separated text values, so you can copy them into a spreadsheet."></bim-button>
                <bim-button @click=${onExportJSON} icon="ph:export-fill" tooltip-title="Export JSON" tooltip-text="Download the table contents as a JSON file."></bim-button>
              </div>
            </div>
            ${attributesTable}
          </bim-panel-section>
        </bim-panel>
      `;
    });
    -

    Congratulations! You have now created a fully working advanced attributes table for your app in less than 10 minutes of work. Keep going with more tutorials! 💪

    -
    const app = document.createElement("bim-grid");
    app.layouts = {
      main: {
        template: `
          "viewport" 1fr
          "entityAttributesPanel" 1fr
        `,
        elements: { entityAttributesPanel, viewport },
      },
    };

    app.layout = "main";
    document.body.append(app);
    +

    Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything.

    +
    const app = document.createElement("bim-grid");
    app.layouts = {
      main: {
        template: `
          "viewport" 1fr
          "entityAttributesPanel" 1fr
        `,
        elements: { entityAttributesPanel, viewport },
      },
    };

    app.layout = "main";
    document.body.append(app);
    +

    Congratulations! You have now created a fully working advanced attributes table for your app in less than 10 minutes of work. Keep going with more tutorials! 💪

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/ModelsList/index.html b/build/Tutorials/UserInterface/OBC/ModelsList/index.html index 8e69ee52e..7df0354f2 100644 --- a/build/Tutorials/UserInterface/OBC/ModelsList/index.html +++ b/build/Tutorials/UserInterface/OBC/ModelsList/index.html @@ -4,8 +4,8 @@ ModelsList | That Open docs - - + +
    Skip to main content

    ModelsList

    @@ -13,6 +13,21 @@

    Managing your loaded models 🏢​

    What else can we say? The task is really simple: we need to see a list of the loaded models in the app. Let's get into it!

    +

    🖖 Importing our Libraries​

    +

    In this tutorial, we will import:

    +
      +
    • @thatopen/components to set up the barebone of our app.
      • +
    • @thatopen/ui to add some simple and cool UI menus.
      • +
    • @thatopen/ui-obc to add some cool pre-made UI menus for components.
      • +
    +
    import * as OBC from "@thatopen/components";
    import * as BUI from "@thatopen/ui";
    // You have to import from "@thatopen/ui-obc"
    import * as BUIC from "../..";
    +

    📋 Initializing the UI​

    +

    As always, let's first initialize the UI library. Remember you only have to do it once in your entire app.

    +
    BUI.Manager.init();
    +

    🌎 Setting up a simple scene​

    +
    +

    We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

    +
    const components = new OBC.Components();

    const worlds = components.get(OBC.Worlds);
    const world = worlds.create();

    const sceneComponent = new OBC.SimpleScene(components);
    sceneComponent.setup();
    world.scene = sceneComponent;

    const viewport = document.createElement("bim-viewport");
    const rendererComponent = new OBC.SimpleRenderer(components, viewport);
    world.renderer = rendererComponent;

    const cameraComponent = new OBC.SimpleCamera(components);
    world.camera = cameraComponent;

    viewport.addEventListener("resize", () => {
      rendererComponent.resize();
      cameraComponent.updateAspect();
    });

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

    components.init();

    Setting up the components​

    First of all, we're going to get the FragmentIfcLoader from an existing components instance:

    const ifcLoader = components.get(OBC.IfcLoader);
    await ifcLoader.setup();
    @@ -20,11 +35,11 @@

    Se 
    const fragmentsManager = components.get(OBC.FragmentsManager);
    fragmentsManager.onFragmentsLoaded.add((model) => {
      if (world.scene) world.scene.three.add(model);
    });

    Creating the models list component​

    Allright! Now that some basic events are setup, it's time to create a new fresh models list component:

    -
    const [modelsList] = CUI.tables.modelsList({
      components,
      tags: { schema: true, viewDefinition: false },
      actions: { download: false },
    });
    +
    const [modelsList] = BUIC.tables.modelsList({
      components,
      tags: { schema: true, viewDefinition: false },
      actions: { download: false },
    });

    Now that we have a brand new models list created, we need to add it to the HTML page. For it, let's create simple BIM panel component where we include the models list and also a pre-made IFC load button 👇

    -
    const panel = BUI.Component.create(() => {
      const [loadIfcBtn] = CUI.buttons.loadIfc({ components });

      return BUI.html`
       <bim-panel label="IFC Models">
        <bim-panel-section label="Importing">
          ${loadIfcBtn}
        </bim-panel-section>
        <bim-panel-section icon="mage:box-3d-fill" label="Loaded Models">
          ${modelsList}
        </bim-panel-section>
       </bim-panel> 
      `;
    });
    +
    const panel = BUI.Component.create(() => {
      const [loadIfcBtn] = BUIC.buttons.loadIfc({ components });

      return BUI.html`
       <bim-panel label="IFC Models">
        <bim-panel-section label="Importing">
          ${loadIfcBtn}
        </bim-panel-section>
        <bim-panel-section icon="mage:box-3d-fill" label="Loaded Models">
          ${modelsList}
        </bim-panel-section>
       </bim-panel> 
      `;
    });

    Finally, let's append the BIM Panel to the page to see the models list working 😉

    const app = document.createElement("bim-grid");
    app.layouts = {
      main: {
        template: `
          "panel viewport"
          / 23rem 1fr
        `,
        elements: { panel, viewport },
      },
    };

    app.layout = "main";
    document.body.append(app);
    -

    Congratulations! You've now a ready to go user interface that let's you show and dispose IFC models loaded into your app 🥳

    +

    Congratulations! You've now a ready to go user interface that let's you show and dispose IFC models loaded into your app 🥳

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/RelationsTree/index.html b/build/Tutorials/UserInterface/OBC/RelationsTree/index.html index be2d1a55d..f3ec55cea 100644 --- a/build/Tutorials/UserInterface/OBC/RelationsTree/index.html +++ b/build/Tutorials/UserInterface/OBC/RelationsTree/index.html @@ -4,8 +4,8 @@ RelationsTree | That Open docs - - + +
    Skip to main content

    RelationsTree

    @@ -14,17 +14,45 @@

    Sho

    Among the most common things to do with BIM models, is to show their spatial structure. This is really important, because then you can know better the model and see how elements are hierarchized between them. 🔗 However, the IFC schema is not always that intuitive when it comes to create a model tree. Why? You may wonder... and it's because IfcRelContainedInSpatialStructure is not the only IFC relation that takes play in a real model tree. 🤯 Luckily, this is already taken into account by That Open Engine's UI when creating a model tree. Let's learn how you can use the Relations Tree!

    +

    🖖 Importing our Libraries​

    +

    In this tutorial, we will import:

    +
      +
    • @thatopen/components to set up the barebone of our app.
      • +
    • @thatopen/components-front to use some frontend-oriented components.
      • +
    • @thatopen/ui to add some simple and cool UI menus.
      • +
    • @thatopen/ui-obc to add some cool pre-made UI menus for components.
      • +
    +
    import * as OBC from "@thatopen/components";
    import * as OBCF from "@thatopen/components-front";
    import * as BUI from "@thatopen/ui";
    // You have to import from "@thatopen/ui-obc"
    import * as BUIC from "../..";
    +

    📋 Initializing the UI​

    +

    As always, let's first initialize the UI library. Remember you only have to do it once in your entire app.

    +
    BUI.Manager.init();
    +

    🌎 Setting up a simple scene​

    +
    +

    We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.

    +
    const components = new OBC.Components();

    const worlds = components.get(OBC.Worlds);
    const world = worlds.create();

    const sceneComponent = new OBC.SimpleScene(components);
    sceneComponent.setup();
    world.scene = sceneComponent;

    const viewport = document.createElement("bim-viewport");
    const rendererComponent = new OBC.SimpleRenderer(components, viewport);
    world.renderer = rendererComponent;

    const cameraComponent = new OBC.SimpleCamera(components);
    world.camera = cameraComponent;

    viewport.addEventListener("resize", () => {
      rendererComponent.resize();
      cameraComponent.updateAspect();
    });

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

    components.init();
    +

    Setting up the components​

    +

    First of all, we're going to get the FragmentIfcLoader from an existing components instance:

    +
    const ifcLoader = components.get(OBC.IfcLoader);
    await ifcLoader.setup();
    +

    ###💡 Getting the highlighter +Now, we will basically get the highlighter and set it up. This will create and configure 2 things:

    +
      +
    • Selecting: when clicking on an element.
      • +
    • Hovering: when hovering the mouse over an element.
      • +
    +
    const highlighter = components.get(OBCF.Highlighter);
    highlighter.setup({ world });
    highlighter.zoomToSelection = true;
    +

    The step above is super important as none of the existing functional components setup any tool, they just get it as they are! So, if we don't setup the FragmentIfcLoader then the wasm path is not going to be defined and an error will arise 🤓. Just after we have setup the loader, let's then configure the FragmentManager so any time a model is loaded it gets added to some world scene created before:

    +
    const fragmentsManager = components.get(OBC.FragmentsManager);
    fragmentsManager.onFragmentsLoaded.add(async (model) => {
      if (world.scene) world.scene.three.add(model);
    });

    Creating the tree​

    Before using the Relations Tree, you must have the relations of your model indexed. This will ensure the Relations Tree have access to the required information to create the tree. 🌲

    const indexer = components.get(OBC.IfcRelationsIndexer);

    fragmentsManager.onFragmentsLoaded.add(async (model) => {
      if (model.hasProperties) await indexer.process(model);
    });
    tip

    If you're unsure about how the indexer works, you can take a look at the corresponding IfcRelationsIndexer tutorial!

    Now the model has their relations indexed, we can safely create the corresponding tree. 💪

    -
    const [relationsTree] = CUI.tables.relationsTree({
      components,
      models: [],
    });

    relationsTree.preserveStructureOnFilter = true;
    +
    const [relationsTree] = BUIC.tables.relationsTree({
      components,
      models: [],
    });

    relationsTree.preserveStructureOnFilter = true;

    As you see, we've passed an empty models list because in the first place there are no models. However, the Relations Tree updates it-self each time a new model comes into the scene! Which makes it really handy to work with. Great! As we already created the Relations Tree instance, let's add it to the HTML page. For it, let's create simple BIM panel component where we include the tree and also a pre-made IFC load button 👇

    -
    const panel = BUI.Component.create(() => {
      const [loadIfcBtn] = CUI.buttons.loadIfc({ components });

      const onSearch = (e: Event) => {
        const input = e.target as BUI.TextInput;
        relationsTree.queryString = input.value;
      };

      return BUI.html`
       <bim-panel label="Relations Tree">
        <bim-panel-section label="Model Tree">
          ${loadIfcBtn}
          <bim-text-input @input=${onSearch} placeholder="Search..." debounce="200"></bim-text-input>
          ${relationsTree}
        </bim-panel-section>
       </bim-panel> 
      `;
    });
    +
    const panel = BUI.Component.create(() => {
      const [loadIfcBtn] = BUIC.buttons.loadIfc({ components });

      const onSearch = (e: Event) => {
        const input = e.target as BUI.TextInput;
        relationsTree.queryString = input.value;
      };

      return BUI.html`
       <bim-panel label="Relations Tree">
        <bim-panel-section label="Model Tree">
          ${loadIfcBtn}
          <bim-text-input @input=${onSearch} placeholder="Search..." debounce="200"></bim-text-input>
          ${relationsTree}
        </bim-panel-section>
       </bim-panel> 
      `;
    });

    Finally, let's append the BIM Panel to the page to see the Relations Tree working 😉

    const app = document.getElementById("app") as BUI.Grid;
    app.layouts = {
      main: {
        template: `
          "panel viewport"
          / 30rem 1fr
        `,
        elements: { panel, viewport },
      },
    };

    app.layout = "main";
    -

    Congratulations! You've now a ready to go user interface that let's you show your model tree. 🥳

    +

    Congratulations! You've now a ready to go user interface that let's you show your model tree. 🥳

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/TopicsUI/index.html b/build/Tutorials/UserInterface/OBC/TopicsUI/index.html index 117122534..37382e85d 100644 --- a/build/Tutorials/UserInterface/OBC/TopicsUI/index.html +++ b/build/Tutorials/UserInterface/OBC/TopicsUI/index.html @@ -4,8 +4,8 @@ TopicsUI | That Open docs - - + +
    Skip to main content

    TopicsUI

    @@ -15,7 +15,12 @@

    🏗 Scaffolding the Application​

    First of all, let's import the dependencies we need to get this working:

    -
    // eslint-disable-next-line import/no-extraneous-dependencies
    import * as CUI from "@thatopen/ui-obc";
    import * as BUI from "@thatopen/ui";
    import * as OBC from "@thatopen/components";
    +
      +
    • @thatopen/ui-obc to add some cool pre-made UI menus for components.
      • +
    • @thatopen/ui to add some simple and cool UI menus.
      • +
    • @thatopen/components to set up the barebone of our app.
      • +
    +
    // eslint-disable-next-line import/no-extraneous-dependencies
    import * as BUIC from "@thatopen/ui-obc";
    import * as BUI from "@thatopen/ui";
    import * as OBC from "@thatopen/components";

    Next, it's always necessary to initialize the core UI library no matter if you're using functional components from @thatopen/ui-obc. Also, let's setup @thatopen/components with the minimum things to get a World up and running to load models.

    BUI.Manager.init();

    const viewport = document.createElement("bim-viewport");

    const components = new OBC.Components();

    const worlds = components.get(OBC.Worlds);

    const world = worlds.create();
    const sceneComponent = new OBC.SimpleScene(components);
    sceneComponent.setup();
    world.scene = sceneComponent;

    const rendererComponent = new OBC.SimpleRenderer(components, viewport);
    world.renderer = rendererComponent;

    const cameraComponent = new OBC.SimpleCamera(components);
    world.camera = cameraComponent;
    cameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);

    viewport.addEventListener("resize", () => {
      rendererComponent.resize();
      cameraComponent.updateAspect();
    });

    components.init();

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

    🏦 Loading a Model and Setting the BCFTopics​

    @@ -23,7 +28,7 @@ 

    const ifcLoader = components.get(OBC.IfcLoader);
    await ifcLoader.setup();
    const file = await fetch(
      "https://thatopen.github.io/engine_ui-components/resources/small.ifc",
    );
    const buffer = await file.arrayBuffer();
    const typedArray = new Uint8Array(buffer);
    const model = await ifcLoader.load(typedArray);
    world.scene.three.add(model);

    tip

    You don't need to add the model into the scene to create topics! We just add it for demostration purposes.

    Before creating the table to display topics to the user, let's do some initial setup of the BCFTopics component. If you're unsure about the basics of working with the BCFTopics component, first check the corresponding tutorial.

    -
    const users: CUI.TopicUserStyles = {
      "jhon.doe@example.com": {
        name: "Jhon Doe",
        picture:
          "https://www.profilebakery.com/wp-content/uploads/2023/04/Profile-Image-AI.jpg",
      },
      "user_a@something.com": {
        name: "User A",
        picture:
          "https://www.profilebakery.com/wp-content/uploads/2023/04/Portrait-Photography.jpg",
      },
      "user_b@something.com": {
        name: "User B",
        picture:
          "https://www.profilebakery.com/wp-content/uploads/2023/04/AI-Portrait.jpg",
      },
    };

    const topics = components.get(OBC.BCFTopics);

    // We setup the component to create a list of users.
    // This list will appear automatically in the topics form.
    // The recommendation is always set an email (as per the BCF standard).
    topics.setup({
      users: new Set(Object.keys(users)),
      labels: new Set(["Architecture", "Structure", "MEP"]),
    });

    // Add a default viewpoint to the topics each time they get created.
    const viewpoints = components.get(OBC.Viewpoints);
    topics.list.onItemSet.add(({ value: topic }) => {
      const viewpoint = viewpoints.create(world);
      topic.viewpoints.add(viewpoint.guid);
    });
    +
    const users: BUIC.TopicUserStyles = {
      "jhon.doe@example.com": {
        name: "Jhon Doe",
        picture:
          "https://www.profilebakery.com/wp-content/uploads/2023/04/Profile-Image-AI.jpg",
      },
      "user_a@something.com": {
        name: "User A",
        picture:
          "https://www.profilebakery.com/wp-content/uploads/2023/04/Portrait-Photography.jpg",
      },
      "user_b@something.com": {
        name: "User B",
        picture:
          "https://www.profilebakery.com/wp-content/uploads/2023/04/AI-Portrait.jpg",
      },
    };

    const topics = components.get(OBC.BCFTopics);

    // We setup the component to create a list of users.
    // This list will appear automatically in the topics form.
    // The recommendation is always set an email (as per the BCF standard).
    topics.setup({
      users: new Set(Object.keys(users)),
      labels: new Set(["Architecture", "Structure", "MEP"]),
    });

    // Add a default viewpoint to the topics each time they get created.
    const viewpoints = components.get(OBC.Viewpoints);
    topics.list.onItemSet.add(({ value: topic }) => {
      const viewpoint = viewpoints.create(world);
      topic.viewpoints.add(viewpoint.guid);
    });

    Once the BCFTopics component has been initialized, let's see how to setup a plug-n-play UI for it! The BIM Components UI package (@thatopen/ui-obc) comes with some UIs to support the usage of the BCFTopics component. Among the components you got: 👉 TopicsList: a table to display the topics created with the component (or the ones you choose to see). 👉 TopicForm: a form to create new or update existing topics. @@ -35,11 +40,11 @@

    🔨 Displaying the Topics List in a Table​

    The topics list table is the easiest way to display all topics created in the app using the BCFTopics component. Creating it is really simple, as you just need to write the following:

    -
    const [topicsList, updateTopicsList] = CUI.tables.topicsList({
      components,
      dataStyles: { users },
    });

    // Let's make row selection possible so we can decide which topics to download.
    topicsList.selectableRows = true;
    +
    const [topicsList, updateTopicsList] = BUIC.tables.topicsList({
      components,
      dataStyles: { users },
    });

    // Let's make row selection possible so we can decide which topics to download.
    topicsList.selectableRows = true;

    That's it. You don't need anything else other than creating an instance of the UI component and place it anywhere you want in the app. The table updates by it-self anytime a new topic has been created or modified!

    📃 Using the Topics Form UI​

    Let's now define a topic form so creating them is easier than ever:

    -
    const [topicForm, updateTopicForm] = CUI.forms.topic({
      components,
      styles: { users },
    });

    // We won't add the form directly to the page, but will wrap it inside a dialog element to show it as a modal.
    const topicsModal = BUI.Component.create<HTMLDialogElement>(() => {
      return BUI.html`
        <dialog class="form-dialog">
         <bim-panel style="border-radius: var(--bim-ui_size-base); width: 22rem;">
          ${topicForm}
         </bim-panel> 
        </dialog>
      `;
    });

    document.body.append(topicsModal);
    +
    const [topicForm, updateTopicForm] = BUIC.forms.topic({
      components,
      styles: { users },
    });

    // We won't add the form directly to the page, but will wrap it inside a dialog element to show it as a modal.
    const topicsModal = BUI.Component.create<HTMLDialogElement>(() => {
      return BUI.html`
        <dialog class="form-dialog">
         <bim-panel style="border-radius: var(--bim-ui_size-base); width: 22rem;">
          ${topicForm}
         </bim-panel> 
        </dialog>
      `;
    });

    document.body.append(topicsModal);

    As the modal is already on the page, lets create a very simple button to display the modal on demand:

    const showFormBtn = BUI.Component.create(() => {
      const onClick = () => {
        topicsModal.showModal();
      };

      return BUI.html`
        <bim-button style="flex: 0" @click=${onClick} label="Create Topic" icon="material-symbols:task"></bim-button>
      `;
    });

    The form component already includes the classic submit and cancel buttons. You can access them from the element by using querySelectors, but its more cumbersome than it should be. For that reason, the form state includes one callback for each button, so you decide what happens when they are clicked. In this case, the most logical thing is to close the modal when the user clicks them. Let's update the form state to include the callbacks:

    @@ -47,7 +52,7 @@

    Awesome! Topic form setup correctly 😎

    🎫 Creating a Custom Topic Panel​

    With the form set up, what if we use the topic panel to see it's full information? Typically, you will display the full information for one topic at the same time; in such case, you only need to create one topic panel component. However, you can create as many panels as you need. In this tutorial we will create one as follows:

    -
    // You don't have to create this interface, it's made just for demonstration purposes.
    // This interface allows you to update the actions in each functional section of the topics UI.
    // This is great when you have an app with user permission settings.
    interface TopicPanelActions {
      information: Partial<CUI.TopicInformationSectionActions>;
      viewpoints: Partial<CUI.TopicViewpointsSectionActions>;
      relatedTopics: Partial<CUI.TopicRelationsSectionActions>;
      comments: Partial<CUI.TopicCommentsSectionActions>;
    }

    interface TopicPanelUI {
      components: OBC.Components;
      topic?: OBC.Topic;
      styles?: Partial<CUI.TopicStyles>;
      actions?: Partial<TopicPanelActions>;
      world?: OBC.World;
    }

    // By default, it doesn't know which topic to display, so will show a default message of not topic selected.
    const [topicPanel, updateTopicPanel] = BUI.Component.create(
      (state: TopicPanelUI) => {
        const { components, topic, world, actions, styles } = state;

        let topicSections: BUI.TemplateResult | undefined;
        let missingTopicSection: BUI.TemplateResult | undefined;

        if (topic) {
          const [information] = CUI.sections.topicInformation({
            components,
            topic,
            actions: actions?.information,
            styles,
          });

          const [viewpoints] = CUI.sections.topicViewpoints({
            components,
            topic,
            world,
            actions: actions?.viewpoints,
          });

          const [relatedTopics] = CUI.sections.topicRelations({
            components,
            topic,
            actions: actions?.relatedTopics,
          });

          const [comments] = CUI.sections.topicComments({
            topic,
            actions: actions?.comments,
            styles: styles?.users,
          });

          const onReminderClick = () => {
            // eslint-disable-next-line no-alert
            window.alert(
              `An email will be sent to ${topic.assignedTo}! (obviosuly not, this is just for demo purposes)`,
            );
          };

          topicSections = BUI.html`
            <bim-panel-section label="Information" icon="ph:info-bold">
              ${information}
            </bim-panel-section>
            <bim-panel-section label="Comments" icon="majesticons:comment-line">
              ${comments}
            </bim-panel-section>
            <bim-panel-section label="Viewpoints" icon="tabler:camera">
              ${viewpoints}
            </bim-panel-section>
            <bim-panel-section label="Related Topics" icon="tabler:link">
              ${relatedTopics}
            </bim-panel-section>
            <!-- This is a custom section where you can add any functionality you like -->
            <bim-panel-section label="Communication" icon="tabler:link">
              ${
                topic.assignedTo
                  ? BUI.html`
                    <bim-button @click=${onReminderClick} label="Send Mail Reminder" icon="mingcute:send-fill"></bim-button> 
                  `
                  : BUI.html`
                    <bim-label style="white-space: normal">The topic must have an assignee to use the communication tools. Update the topic with a new assignee!</bim-label>
                  `
              }
            </bim-panel-section>
          `;
        } else {
          missingTopicSection = BUI.html`
            <bim-panel-section label="Missing Topic" icon="material-symbols:chat-error">
              ${!topic ? BUI.html`<bim-label>There is no topic to display in this panel!</bim-label>` : null}
            </bim-panel-section> 
          `;
        }

        return BUI.html`
          <bim-panel>
            ${missingTopicSection}
            ${topicSections}
          </bim-panel> 
        `;
      },
      { components, world, styles: { users } },
    );

    // Lets update the topic panel in case the topic information gets update somewhere else in the app.
    topics.list.onItemUpdated.add(() => updateTopicPanel());
    +
    // You don't have to create this interface, it's made just for demonstration purposes.
    // This interface allows you to update the actions in each functional section of the topics UI.
    // This is great when you have an app with user permission settings.
    interface TopicPanelActions {
      information: Partial<BUIC.TopicInformationSectionActions>;
      viewpoints: Partial<BUIC.TopicViewpointsSectionActions>;
      relatedTopics: Partial<BUIC.TopicRelationsSectionActions>;
      comments: Partial<BUIC.TopicCommentsSectionActions>;
    }

    interface TopicPanelUI {
      components: OBC.Components;
      topic?: OBC.Topic;
      styles?: Partial<BUIC.TopicStyles>;
      actions?: Partial<TopicPanelActions>;
      world?: OBC.World;
    }

    // By default, it doesn't know which topic to display, so will show a default message of not topic selected.
    const [topicPanel, updateTopicPanel] = BUI.Component.create(
      (state: TopicPanelUI) => {
        const { components, topic, world, actions, styles } = state;

        let topicSections: BUI.TemplateResult | undefined;
        let missingTopicSection: BUI.TemplateResult | undefined;

        if (topic) {
          const [information] = BUIC.sections.topicInformation({
            components,
            topic,
            actions: actions?.information,
            styles,
          });

          const [viewpoints] = BUIC.sections.topicViewpoints({
            components,
            topic,
            world,
            actions: actions?.viewpoints,
          });

          const [relatedTopics] = BUIC.sections.topicRelations({
            components,
            topic,
            actions: actions?.relatedTopics,
          });

          const [comments] = BUIC.sections.topicComments({
            topic,
            actions: actions?.comments,
            styles: styles?.users,
          });

          const onReminderClick = () => {
            // eslint-disable-next-line no-alert
            window.alert(
              `An email will be sent to ${topic.assignedTo}! (obviosuly not, this is just for demo purposes)`,
            );
          };

          topicSections = BUI.html`
            <bim-panel-section label="Information" icon="ph:info-bold">
              ${information}
            </bim-panel-section>
            <bim-panel-section label="Comments" icon="majesticons:comment-line">
              ${comments}
            </bim-panel-section>
            <bim-panel-section label="Viewpoints" icon="tabler:camera">
              ${viewpoints}
            </bim-panel-section>
            <bim-panel-section label="Related Topics" icon="tabler:link">
              ${relatedTopics}
            </bim-panel-section>
            <!-- This is a custom section where you can add any functionality you like -->
            <bim-panel-section label="Communication" icon="tabler:link">
              ${
                topic.assignedTo
                  ? BUI.html`
                    <bim-button @click=${onReminderClick} label="Send Mail Reminder" icon="mingcute:send-fill"></bim-button> 
                  `
                  : BUI.html`
                    <bim-label style="white-space: normal">The topic must have an assignee to use the communication tools. Update the topic with a new assignee!</bim-label>
                  `
              }
            </bim-panel-section>
          `;
        } else {
          missingTopicSection = BUI.html`
            <bim-panel-section label="Missing Topic" icon="material-symbols:chat-error">
              ${!topic ? BUI.html`<bim-label>There is no topic to display in this panel!</bim-label>` : null}
            </bim-panel-section> 
          `;
        }

        return BUI.html`
          <bim-panel>
            ${missingTopicSection}
            ${topicSections}
          </bim-panel> 
        `;
      },
      { components, world, styles: { users } },
    );

    // Lets update the topic panel in case the topic information gets update somewhere else in the app.
    topics.list.onItemUpdated.add(() => updateTopicPanel());
    tip

    If you're unsure about how to create custom functional UI components just like the panel above, take a look at the dedicated Component tutorial.

    It looks scarier than what it actually is! We give you the functional pieces, then is entirely up to you how to stack them together to define your UIs. If we give you a pre-made panel with everything, it would be easier to implement but harder to customize. The way its made let you create a panel with all the functional pieces already working, but then you have the chance to keep adding custom UIs for other functionalities you may create on top of topics. When you know which topic data to display in the panel, then you can update the topic data component. What need to happen to update the topic data panel entirely depends on your app! However, the topics list table includes a callback that gets triggered each time a topic is clicked with a button located next to its title, lets use that in this case! For it, set the callback to update the topic panel with the clicked topic as follows:

    @@ -60,6 +65,6 @@ 

    const bcfPanel = BUI.Component.create(() => {
      const onTextInput = (e: Event) => {
        const input = e.target as BUI.TextInput;
        topicsList.queryString = input.value;
      };

      return BUI.html`
        <bim-panel>
          <bim-panel-section label="BCF" fixed>
            <div style="display: flex; justify-content: space-between; gap: 0.5rem">
              <bim-text-input style="flex-grow: 0; flex-basis: 15rem" @input=${onTextInput} placeholder="Search a topic..." debounce="100"></bim-text-input>
              <div style="display: flex; gap: 0.5rem">
                ${showFormBtn}
                ${downloadBtn}
              </div> 
            </div> 
            ${topicsList}
          </bim-panel-section>
        </bim-panel>
      `;
    });

    Finally, let's create a BIM Grid element and provide the panels to the viewport to display everything.

    const app = document.createElement("bim-grid");
    app.layouts = {
      main: {
        template: `
        "customTopicPanel viewport"
        "customTopicPanel bcfPanel" 25rem
        /24rem 1fr
        `,
        elements: { bcfPanel, viewport, customTopicPanel: topicPanel },
      },
    };

    app.layout = "main";
    document.body.append(app);
    -

    Congratulations! You have now created a fully working BCF user interface for your app in less than 10 minutes of work. Keep going with more tutorials! 💪

    +

    Congratulations! You have now created a fully working BCF user interface for your app in less than 10 minutes of work. Keep going with more tutorials! 💪

    \ No newline at end of file diff --git a/build/Tutorials/UserInterface/index.html b/build/Tutorials/UserInterface/index.html index edd078d41..aba8d2d80 100644 --- a/build/Tutorials/UserInterface/index.html +++ b/build/Tutorials/UserInterface/index.html @@ -4,8 +4,8 @@ UserInterface | That Open docs - - + +
    Skip to main content

    UserInterface

    TOC @@ -68,6 +68,6 @@

    Getting Star

    And, in your JavaScript file:

    const grid = document.getElementById("grid")

    grid.layouts = {
      main: `
        "header header" auto
        "sidebar content" 1fr
        "sidebar content" 1fr
        / auto 1fr
      `
    }

    grid.setLayout("main")
    -

    To know more about the UIComponents, you can explore the README files in each repository under the packages folder and also explore the documentation. You can find the link at the top of this README file.

    +

    To know more about the UIComponents, you can explore the README files in each repository under the packages folder and also explore the documentation. You can find the link at the top of this README file.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/AngleMeasurement/index.html b/build/api/@thatopen/components-front/classes/AngleMeasurement/index.html index 2f1d465a0..47b8c58da 100644 --- a/build/api/@thatopen/components-front/classes/AngleMeasurement/index.html +++ b/build/api/@thatopen/components-front/classes/AngleMeasurement/index.html @@ -4,11 +4,11 @@ AngleMeasurement | That Open docs - - + + -
    Skip to main content

    AngleMeasurement

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    OBC.Createable.endCreation

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/AreaMeasurement/index.html b/build/api/@thatopen/components-front/classes/AreaMeasurement/index.html index cf2647237..07f8eabb3 100644 --- a/build/api/@thatopen/components-front/classes/AreaMeasurement/index.html +++ b/build/api/@thatopen/components-front/classes/AreaMeasurement/index.html @@ -4,11 +4,11 @@ AreaMeasurement | That Open docs - - + + -
    Skip to main content

    AreaMeasurement

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    OBC.Createable.endCreation

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/Civil3DNavigator/index.html b/build/api/@thatopen/components-front/classes/Civil3DNavigator/index.html index 4fe55e022..c96b79e73 100644 --- a/build/api/@thatopen/components-front/classes/Civil3DNavigator/index.html +++ b/build/api/@thatopen/components-front/classes/Civil3DNavigator/index.html @@ -4,11 +4,11 @@ Civil3DNavigator | That Open docs - - + + -
    Skip to main content

    Civil3DNavigator

    +

    Civil3DNavigator

    This component provides functionality for navigating and interacting with civil engineering data in a 3D environment. 📕 Tutorial. 📘 API.

    Extends​

      @@ -160,6 +160,6 @@

      RemarksExample​

      -
      const navigator = new Civil3DNavigator(components);
      navigator.world = world; // Initialize the world
      const alignment = model.civilData.alignments.get(alignmentId);
      if (alignment) {
        navigator.setMarker(alignment, 0.5, "select");
      }
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    const navigator = new Civil3DNavigator(components);
    navigator.world = world; // Initialize the world
    const alignment = model.civilData.alignments.get(alignmentId);
    if (alignment) {
      navigator.setMarker(alignment, 0.5, "select");
    }
    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/CivilCrossSectionNavigator/index.html b/build/api/@thatopen/components-front/classes/CivilCrossSectionNavigator/index.html index bc7d25600..3d6ad5e60 100644 --- a/build/api/@thatopen/components-front/classes/CivilCrossSectionNavigator/index.html +++ b/build/api/@thatopen/components-front/classes/CivilCrossSectionNavigator/index.html @@ -4,11 +4,11 @@ CivilCrossSectionNavigator | That Open docs - - + + -
    Skip to main content

    CivilCrossSectionNavigator

    +

    CivilCrossSectionNavigator

    This component is used to navigate and visualize cross sections of a 3D model. 📕 Tutorial. 📘 API.

    Extends​

      @@ -68,6 +68,6 @@

      ReturnsThrows​

      Will throw an error if the world or plane is not set before calling this method.

      Throws​

      -

      Will throw an error if the geometry is not indexed.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Will throw an error if the geometry is not indexed.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/CivilElevationNavigator/index.html b/build/api/@thatopen/components-front/classes/CivilElevationNavigator/index.html index 94a106849..601bf46c4 100644 --- a/build/api/@thatopen/components-front/classes/CivilElevationNavigator/index.html +++ b/build/api/@thatopen/components-front/classes/CivilElevationNavigator/index.html @@ -4,11 +4,11 @@ CivilElevationNavigator | That Open docs - - + + -
    Skip to main content

    CivilElevationNavigator

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Will throw an error if there are no curves to place the marker on.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/CivilNavigator/index.html b/build/api/@thatopen/components-front/classes/CivilNavigator/index.html index 58b064d98..ce7fd157d 100644 --- a/build/api/@thatopen/components-front/classes/CivilNavigator/index.html +++ b/build/api/@thatopen/components-front/classes/CivilNavigator/index.html @@ -4,11 +4,11 @@ abstract CivilNavigator | That Open docs - - + + -
    Skip to main content

    abstract CivilNavigator

    +

    abstract CivilNavigator

    Abstract class representing a Civil Navigator. It provides functionality to navigate and interact with civil engineering data.

    Extends​

      @@ -220,6 +220,6 @@

      ParametersReturns​

      void

      Throws​

      -

      Will throw an error if there are no curves to place the marker on.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Will throw an error if there are no curves to place the marker on.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/CivilPlanNavigator/index.html b/build/api/@thatopen/components-front/classes/CivilPlanNavigator/index.html index 18db622de..7d492aea3 100644 --- a/build/api/@thatopen/components-front/classes/CivilPlanNavigator/index.html +++ b/build/api/@thatopen/components-front/classes/CivilPlanNavigator/index.html @@ -4,11 +4,11 @@ CivilPlanNavigator | That Open docs - - + + -
    Skip to main content

    CivilPlanNavigator

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Will throw an error if there are no curves to place the marker on.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/ClipEdges/index.html b/build/api/@thatopen/components-front/classes/ClipEdges/index.html index c36717943..fc5651d89 100644 --- a/build/api/@thatopen/components-front/classes/ClipEdges/index.html +++ b/build/api/@thatopen/components-front/classes/ClipEdges/index.html @@ -4,11 +4,11 @@ ClipEdges | That Open docs - - + + -
    Skip to main content

    ClipEdges

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    This method iterates through all the EdgesPlane instances associated with the Clipper component.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/ClippingEdges/index.html b/build/api/@thatopen/components-front/classes/ClippingEdges/index.html index 5a5339a11..5f22e289d 100644 --- a/build/api/@thatopen/components-front/classes/ClippingEdges/index.html +++ b/build/api/@thatopen/components-front/classes/ClippingEdges/index.html @@ -4,11 +4,11 @@ ClippingEdges | That Open docs - - + + -
    Skip to main content

    ClippingEdges

    +

    ClippingEdges

    Class representing the ClippingEdges component. This is responsible for managing and rendering the edges of clipped objects.

    Implements​

      @@ -106,6 +106,6 @@

      update()Returns​

      void

      Implementation of​

      -

      OBC.Updateable.update

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    OBC.Updateable.update

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/ClippingFills/index.html b/build/api/@thatopen/components-front/classes/ClippingFills/index.html index 593dc6316..cd7b103e4 100644 --- a/build/api/@thatopen/components-front/classes/ClippingFills/index.html +++ b/build/api/@thatopen/components-front/classes/ClippingFills/index.html @@ -4,11 +4,11 @@ ClippingFills | That Open docs - - + + -
    Skip to main content

    ClippingFills

    +

    ClippingFills

    Class for managing and rendering the fills of a clipping plane.

    Properties​

    components​

    @@ -75,6 +75,6 @@

    update()Parameters​

    ParameterTypeDescription
    trianglesIndicesnumber[]An array of indices representing triangles in the geometry.
    indexFragMapIndexFragmentMapA map that allows to trace back the original fragment and id from each triangle of the fill mesh.

    Returns​

    -

    void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/EdgeMeasurement/index.html b/build/api/@thatopen/components-front/classes/EdgeMeasurement/index.html index 800c6549c..3c1c9cea3 100644 --- a/build/api/@thatopen/components-front/classes/EdgeMeasurement/index.html +++ b/build/api/@thatopen/components-front/classes/EdgeMeasurement/index.html @@ -4,11 +4,11 @@ EdgeMeasurement | That Open docs - - + + -
    Skip to main content

    EdgeMeasurement

    +

    EdgeMeasurement

    This component allows users to measure geometry edges in a 3D scene. 📕 Tutorial. 📘 API.

    Extends​

      @@ -147,6 +147,6 @@

      set()Parameters​

      ParameterTypeDescription
      dimensionsnumber[][]The serialized state of the measurements.
      Each inner array should contain six numbers representing the x, y, and z coordinates of the start and end points of a line measurement.

      Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/EdgesPlane/index.html b/build/api/@thatopen/components-front/classes/EdgesPlane/index.html index b87b77d4f..091b27e64 100644 --- a/build/api/@thatopen/components-front/classes/EdgesPlane/index.html +++ b/build/api/@thatopen/components-front/classes/EdgesPlane/index.html @@ -4,11 +4,11 @@ EdgesPlane | That Open docs - - + + -
    Skip to main content

    EdgesPlane

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/EdgesStyles/index.html b/build/api/@thatopen/components-front/classes/EdgesStyles/index.html index 842c95894..129594218 100644 --- a/build/api/@thatopen/components-front/classes/EdgesStyles/index.html +++ b/build/api/@thatopen/components-front/classes/EdgesStyles/index.html @@ -4,11 +4,11 @@ EdgesStyles | That Open docs - - + + -
    Skip to main content

    EdgesStyles

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    OBC.Updateable.update

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/FaceMeasurement/index.html b/build/api/@thatopen/components-front/classes/FaceMeasurement/index.html index 7c3c1bccf..5f2e11a07 100644 --- a/build/api/@thatopen/components-front/classes/FaceMeasurement/index.html +++ b/build/api/@thatopen/components-front/classes/FaceMeasurement/index.html @@ -4,11 +4,11 @@ FaceMeasurement | That Open docs - - + + -
    Skip to main content

    FaceMeasurement

    +

    FaceMeasurement

    This component allows users to measure geometry faces in a 3D scene. 📕 Tutorial. 📘 API.

    Extends​

      @@ -158,6 +158,6 @@

      ParametersReturns​

      void

      Throws​

      -

      Will throw an error if no world is given to the face measurement.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Will throw an error if no world is given to the face measurement.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/GeometryCullerRenderer/index.html b/build/api/@thatopen/components-front/classes/GeometryCullerRenderer/index.html index ee18d0f95..5fad796d1 100644 --- a/build/api/@thatopen/components-front/classes/GeometryCullerRenderer/index.html +++ b/build/api/@thatopen/components-front/classes/GeometryCullerRenderer/index.html @@ -4,15 +4,15 @@ GeometryCullerRenderer | That Open docs - - + + -
    Skip to main content

    GeometryCullerRenderer

    +

    GeometryCullerRenderer

    A renderer to determine a geometry visibility on screen

    Extends​

    • CullerRenderer
      • -
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/GraphicVertexPicker/index.html b/build/api/@thatopen/components-front/classes/GraphicVertexPicker/index.html index 309e32c07..45ec364e4 100644 --- a/build/api/@thatopen/components-front/classes/GraphicVertexPicker/index.html +++ b/build/api/@thatopen/components-front/classes/GraphicVertexPicker/index.html @@ -4,11 +4,11 @@ GraphicVertexPicker | That Open docs - - + + -
    Skip to main content

    GraphicVertexPicker

    +

    GraphicVertexPicker

    A class that extends OBC.VertexPicker to provide a graphical marker for picking vertices in a 3D scene.

    Extends​

      @@ -59,6 +59,6 @@

      ReturnsOverrides​

      -

      OBC.VertexPicker.get

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    OBC.VertexPicker.get

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/Highlighter/index.html b/build/api/@thatopen/components-front/classes/Highlighter/index.html index f9a18b420..40a6d256d 100644 --- a/build/api/@thatopen/components-front/classes/Highlighter/index.html +++ b/build/api/@thatopen/components-front/classes/Highlighter/index.html @@ -4,11 +4,11 @@ Highlighter | That Open docs - - + + -
    Skip to main content

    Highlighter

    +

    Highlighter

    This component allows highlighting and selecting fragments in a 3D scene. 📕 Tutorial. 📘 API.

    Extends​

      @@ -256,6 +256,6 @@

      updateFragme

      Parameters​

      ParameterTypeDescription
      fragmentsIterable<Fragment>The list of fragment to update.

      Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/IfcStreamer/index.html b/build/api/@thatopen/components-front/classes/IfcStreamer/index.html index 675edecbc..3b69d327f 100644 --- a/build/api/@thatopen/components-front/classes/IfcStreamer/index.html +++ b/build/api/@thatopen/components-front/classes/IfcStreamer/index.html @@ -4,11 +4,11 @@ IfcStreamer | That Open docs - - + + -
    Skip to main content

    IfcStreamer

    +

    IfcStreamer

    The IfcStreamer component is responsible for managing and streaming tiled IFC data. It provides methods for loading, removing, and managing IFC models, as well as handling visibility and caching. 📕 Tutorial. 📘 API.

    Extends​

      @@ -204,6 +204,6 @@

      setVisibility(

      Parameters​

      ParameterTypeDescription
      visiblebooleanThe visibility state to set.
      filter?FragmentIdMap

      A map of fragment IDs to arrays of item IDs.

      Only items with IDs present in the arrays will be visible.

      If not provided, it will take all loaded models as filter.

      Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/LengthMeasurement/index.html b/build/api/@thatopen/components-front/classes/LengthMeasurement/index.html index a0c9fee21..66289004a 100644 --- a/build/api/@thatopen/components-front/classes/LengthMeasurement/index.html +++ b/build/api/@thatopen/components-front/classes/LengthMeasurement/index.html @@ -4,11 +4,11 @@ LengthMeasurement | That Open docs - - + + -
    Skip to main content

    LengthMeasurement

    +

    LengthMeasurement

    A basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. 📕 Tutorial. 📘 API.

    Extends​

      @@ -140,13 +140,13 @@

      Implemen

      createOnPoints()​

      -

      createOnPoints(p1, p2): void

      +

      createOnPoints(p1, p2): SimpleDimensionLine

      Creates a new dimension line between two given points.

      Parameters​

      ParameterTypeDescription
      p1Vector3The start point of the dimension line.
      p2Vector3The end point of the dimension line.

      Returns​

      -

      void

      +

      SimpleDimensionLine

      delete()​

      @@ -208,6 +208,6 @@

      ParametersReturns​

      Promise<void>

      Implementation of​

      -

      OBC.Updateable.update

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    OBC.Updateable.update

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/Mark/index.html b/build/api/@thatopen/components-front/classes/Mark/index.html index 9731c0d96..34fa593b8 100644 --- a/build/api/@thatopen/components-front/classes/Mark/index.html +++ b/build/api/@thatopen/components-front/classes/Mark/index.html @@ -4,11 +4,11 @@ Mark | That Open docs - - + + -
    Skip to main content

    Mark

    +

    Mark

    Represents a marker in the 3D world.

    Implements​

      @@ -68,6 +68,6 @@

      toggleVisib

      This method changes the visible property of the marker to its opposite value. If the marker is currently visible, it will be hidden, and vice versa.

      Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/Marker/index.html b/build/api/@thatopen/components-front/classes/Marker/index.html index 94aed6790..74134e547 100644 --- a/build/api/@thatopen/components-front/classes/Marker/index.html +++ b/build/api/@thatopen/components-front/classes/Marker/index.html @@ -4,11 +4,11 @@ Marker | That Open docs - - + + -
    Skip to main content

    Marker

    +

    Marker

    Component for Managing Markers along with creating different types of markers. Every marker is a Simple2DMarker. For every marker that needs to be added, you can use the Manager to add the marker and change its look and feel. 📕 Tutorial. 📘 API.

    Extends​

      @@ -23,8 +23,8 @@

      autoCluster

      autoCluster: boolean = true

      -

      Indicates whether markers should be automatically clustered. -If true, markers will be clustered based on the threshold value. +

      Indicates whether markers should be automatically clustered. +If true, markers will be clustered based on the threshold value. Default value is true.

      enabled​

      @@ -39,7 +39,7 @@

      listIMarker>>

      -

      A Map containing the markers grouped by world UUID. +

      A Map containing the markers grouped by world UUID. Each world can have its own set of markers.

      onDisposed​

      @@ -54,27 +54,27 @@

      threshold

      threshold: number = 50

      -

      The distance threshold for clustering markers. -Markers within this distance will be considered for clustering. +

      The distance threshold for clustering markers. +Markers within this distance will be considered for clustering. Default value is 50.

      uuid​

      static readonly uuid: "4079eb91-79b0-4ede-bcf2-15b837129236"

      -

      A unique identifier for the component. +

      A unique identifier for the component. This UUID is used to register the component within the Components system.

      Accessors​

      color​

      get color(): string

      -

      Getter for the color property. +

      Getter for the color property. Returns the current color of the markers.

      set color(value): void

      -

      Setter for the color property. +

      Setter for the color property. Updates the color of all the markers to the new value.

      Parameters​

      ParameterTypeDescription
      valuestringThe new color value for the markers.
      @@ -113,8 +113,8 @@

      ParametersReturns​

      void

      Remarks​

      -

      This method iterates through all the worlds and their respective markers. -If a marker with the specified ID is found, it disposes of the marker's label +

      This method iterates through all the worlds and their respective markers. +If a marker with the specified ID is found, it disposes of the marker's label and removes the marker from the world's marker list.

      dispose()​

      @@ -124,7 +124,7 @@

      dispose()Parameters​

      ParameterType
      type?string
      -

      Returns​

      +

      Returns​

      void

      Implementation of​

      OBC.Disposable.dispose

      @@ -133,7 +133,7 @@

      getWorldM

      getWorldMarkerList(world): Map<string, IMarker>

      -

      Retrieves the list of markers associated with a specific world. +

      Retrieves the list of markers associated with a specific world. If the list does not exist for the given world, it creates a new one.

      Parameters​

      ParameterTypeDescription
      worldWorldThe world for which the marker list is to be retrieved.
      @@ -141,7 +141,7 @@

      ReturnsIMarker>

      A Map containing the markers associated with the given world.

      Remarks​

      -

      This method is used to manage markers per world. It ensures that each world has its own set of markers. +

      This method is used to manage markers per world. It ensures that each world has its own set of markers. If a marker list for the given world does not exist, it creates a new one and associates it with the world.

      setupEvents()​

      @@ -154,11 +154,11 @@

      ParametersReturns​

      void

      Remarks​

      -

      This method checks if the event listeners are already set up for the given world. -If the event listeners are already set up and the enabled parameter is true, the method returns without doing anything. +

      This method checks if the event listeners are already set up for the given world. +If the event listeners are already set up and the enabled parameter is true, the method returns without doing anything. If the world does not have camera controls, the method returns without doing anything.

      -

      The method then retrieves the event listener for the given world using the getWorldEvent method. +

      The method then retrieves the event listener for the given world using the getWorldEvent method. It removes the existing event listeners for the "sleep" and "rest" events from the world's camera controls.

      -

      If the enabled parameter is true, the method adds the event listener for the "sleep" and "rest" events to the world's camera controls.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    If the enabled parameter is true, the method adds the event listener for the "sleep" and "rest" events to the world's camera controls.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/Outliner/index.html b/build/api/@thatopen/components-front/classes/Outliner/index.html index b21661eec..d1ec06cb9 100644 --- a/build/api/@thatopen/components-front/classes/Outliner/index.html +++ b/build/api/@thatopen/components-front/classes/Outliner/index.html @@ -4,11 +4,11 @@ Outliner | That Open docs - - + + -
    Skip to main content

    Outliner

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    OBC.Disposable.dispose

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/Plans/index.html b/build/api/@thatopen/components-front/classes/Plans/index.html index 2d3b7a52f..d735c7e4a 100644 --- a/build/api/@thatopen/components-front/classes/Plans/index.html +++ b/build/api/@thatopen/components-front/classes/Plans/index.html @@ -4,11 +4,11 @@ Plans | That Open docs - - + + -
    Skip to main content

    Plans

    +

    Plans

    Component to easily define and navigate 2D floor plans. 📕 Tutorial. 📘 API.

    Extends​

      @@ -165,6 +165,6 @@

      goTo()Parameters​

      ParameterTypeDefault valueDescription
      idstringundefinedThe id of the floor plan to navigate to.
      animatebooleanfalseWhether to animate the camera movement. Default is false.

      Returns​

      -

      Promise<void>

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Promise<void>

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/Postproduction/index.html b/build/api/@thatopen/components-front/classes/Postproduction/index.html index 42daee308..7bb928626 100644 --- a/build/api/@thatopen/components-front/classes/Postproduction/index.html +++ b/build/api/@thatopen/components-front/classes/Postproduction/index.html @@ -4,11 +4,11 @@ Postproduction | That Open docs - - + + -
    Skip to main content

    Postproduction

    +

    Postproduction

    Class representing a post-processing effect manager for a 3D scene. It uses the EffectComposer from three.js to apply various post-processing effects. Thanks to this.

    Properties​

    composer​

    @@ -159,6 +159,6 @@

    updateProje

    Parameters​

    ParameterTypeDescription
    cameraCameraThe new camera to use for the post-processing effects.

    Returns​

    -

    void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/PostproductionRenderer/index.html b/build/api/@thatopen/components-front/classes/PostproductionRenderer/index.html index 0a572fba8..687e2bef1 100644 --- a/build/api/@thatopen/components-front/classes/PostproductionRenderer/index.html +++ b/build/api/@thatopen/components-front/classes/PostproductionRenderer/index.html @@ -4,11 +4,11 @@ PostproductionRenderer | That Open docs - - + + -
    Skip to main content

    PostproductionRenderer

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    RendererWith2D.update

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/RendererWith2D/index.html b/build/api/@thatopen/components-front/classes/RendererWith2D/index.html index 6de3bc0c9..b19d7c91c 100644 --- a/build/api/@thatopen/components-front/classes/RendererWith2D/index.html +++ b/build/api/@thatopen/components-front/classes/RendererWith2D/index.html @@ -4,11 +4,11 @@ RendererWith2D | That Open docs - - + + -
    Skip to main content

    RendererWith2D

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    This renderer is used to render 2D objects (CSS2DObjects) in a 3D scene.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/Sections/index.html b/build/api/@thatopen/components-front/classes/Sections/index.html index 0ce1394a2..82d1f680a 100644 --- a/build/api/@thatopen/components-front/classes/Sections/index.html +++ b/build/api/@thatopen/components-front/classes/Sections/index.html @@ -4,11 +4,11 @@ Sections | That Open docs - - + + -
    Skip to main content

    Sections

    +

    Sections

    A component to create and manage arbitrary sections for BIM models.

    Extends​

      @@ -129,6 +129,6 @@

      goTo()Parameters​

      ParameterTypeDefault valueDescription
      idstringundefinedThe identifier whose section to delete.
      animatebooleanfalseWhether to animate the transition.

      Returns​

      -

      Promise<void>

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Promise<void>

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/ShadowDropper/index.html b/build/api/@thatopen/components-front/classes/ShadowDropper/index.html index 2c7b1e30d..8c391008a 100644 --- a/build/api/@thatopen/components-front/classes/ShadowDropper/index.html +++ b/build/api/@thatopen/components-front/classes/ShadowDropper/index.html @@ -4,11 +4,11 @@ ShadowDropper | That Open docs - - + + -
    Skip to main content

    ShadowDropper

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    OBC.Disposable.dispose

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/SimpleDimensionLine/index.html b/build/api/@thatopen/components-front/classes/SimpleDimensionLine/index.html index c86b1e2d0..a47463c23 100644 --- a/build/api/@thatopen/components-front/classes/SimpleDimensionLine/index.html +++ b/build/api/@thatopen/components-front/classes/SimpleDimensionLine/index.html @@ -4,11 +4,11 @@ SimpleDimensionLine | That Open docs - - + + -
    Skip to main content

    SimpleDimensionLine

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/classes/VolumeMeasurement/index.html b/build/api/@thatopen/components-front/classes/VolumeMeasurement/index.html index 5bfb5e187..2b706811d 100644 --- a/build/api/@thatopen/components-front/classes/VolumeMeasurement/index.html +++ b/build/api/@thatopen/components-front/classes/VolumeMeasurement/index.html @@ -4,11 +4,11 @@ VolumeMeasurement | That Open docs - - + + -
    Skip to main content

    VolumeMeasurement

    +

    VolumeMeasurement

    This component allows users to measure geometry volumes in a 3D scene. 📕 Tutorial. 📘 API.

    Extends​

      @@ -179,6 +179,6 @@

      ThrowsRemarks​

      This method calculates the volume of each mesh in the provided array and returns the total volume. It also handles the creation of a label if it doesn't exist, adds the label to the world's scene, -and positions the label at the center of the bounding sphere of the meshes.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +and positions the label at the center of the bounding sphere of the meshes.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/index.html b/build/api/@thatopen/components-front/index.html index 14e389712..2277a1488 100644 --- a/build/api/@thatopen/components-front/index.html +++ b/build/api/@thatopen/components-front/index.html @@ -4,16 +4,16 @@ @thatopen/components-front | That Open docs - - + + -
    Skip to main content

    @thatopen/components-front

    +

    @thatopen/components-front

    Classes​

    ClassDescription
    AngleMeasurementThis component allows users to measure angles in a 3D scene. 📕 Tutorial. 📘 API.
    AreaMeasurementThis component allows users to measure areas in a 3D scene. 📕 Tutorial. 📘 API.
    Civil3DNavigatorThis component provides functionality for navigating and interacting with civil engineering data in a 3D environment. 📕 Tutorial. 📘 API.
    CivilCrossSectionNavigatorThis component is used to navigate and visualize cross sections of a 3D model. 📕 Tutorial. 📘 API.
    CivilElevationNavigatorThis component is responsible for navigating and visualizing elevation data of infra/civil models (vertical alignments). 📕 Tutorial. 📘 API.
    CivilNavigatorAbstract class representing a Civil Navigator. It provides functionality to navigate and interact with civil engineering data.
    CivilPlanNavigatorThis component is responsible for navigating and visualizing plan data of infra/civil models (horizontal alignments). 📕 Tutorial. 📘 API.
    ClipEdgesA component that can add fills and outlines to the Clipper. 📕 Tutorial. 📘 API.
    ClippingEdgesClass representing the ClippingEdges component. This is responsible for managing and rendering the edges of clipped objects.
    ClippingFillsClass for managing and rendering the fills of a clipping plane.
    EdgeMeasurementThis component allows users to measure geometry edges in a 3D scene. 📕 Tutorial. 📘 API.
    EdgesPlaneA more advanced version of Clipper planes that also includes edges and fills.
    EdgesStylesA class representing styles for clipping edges in a 3D scene.
    FaceMeasurementThis component allows users to measure geometry faces in a 3D scene. 📕 Tutorial. 📘 API.
    GeometryCullerRendererA renderer to determine a geometry visibility on screen
    GraphicVertexPickerA class that extends OBC.VertexPicker to provide a graphical marker for picking vertices in a 3D scene.
    HighlighterThis component allows highlighting and selecting fragments in a 3D scene. 📕 Tutorial. 📘 API.
    IfcStreamerThe IfcStreamer component is responsible for managing and streaming tiled IFC data. It provides methods for loading, removing, and managing IFC models, as well as handling visibility and caching. 📕 Tutorial. 📘 API.
    LengthMeasurementA basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. 📕 Tutorial. 📘 API.
    MarkRepresents a marker in the 3D world.
    MarkerComponent for Managing Markers along with creating different types of markers. Every marker is a Simple2DMarker. For every marker that needs to be added, you can use the Manager to add the marker and change its look and feel. 📕 Tutorial. 📘 API.
    OutlinerThis component allows adding a colored outline with thickness to fragments in a 3D scene. 📕 Tutorial. 📘 API.
    PlansComponent to easily define and navigate 2D floor plans. 📕 Tutorial. 📘 API.
    PostproductionClass representing a post-processing effect manager for a 3D scene. It uses the EffectComposer from three.js to apply various post-processing effects. Thanks to this.
    PostproductionRendererA class that extends RendererWith2D and adds post-processing capabilities. 📕 Tutorial. 📘 API.
    RendererWith2DA basic renderer capable of rendering 3D and 2D objects (Objec3Ds and CSS2DObjects respectively).
    SectionsA component to create and manage arbitrary sections for BIM models.
    ShadowDropperThis component drops shadows on meshes in a 3D scene. 📕 Tutorial. 📘 API.
    SimpleDimensionLineA class representing a simple dimension line in a 3D space.
    VolumeMeasurementThis component allows users to measure geometry volumes in a 3D scene. 📕 Tutorial. 📘 API.

    Interfaces​

    InterfaceDescription
    AreaSelectionRepresents a selection made by the user, containing area, perimeter, mesh, and label.
    BvhLineSegmentsGeometryA line segments geometry whose BVH has been computed.
    ClipStyleA style defines the appearance of the lines of the ClippingEdges for a set of meshes.
    DimensionDataInterface representing the data required to create a dimension line.
    EdgeThe lines that are drawn when the clipping plane cuts the geometry specified by the ClipStyle.
    HighlightEventsInterface defining the events that the Highlighter class can trigger. Each highlighter has its own set of events, identified by the highlighter name.
    HighlighterConfigInterface defining the configuration options for the Highlighter class.
    IGroupedMarkersInterface representing a group of markers.
    IMarkerInterface representing a marker object.
    PlanViewThe data that describes a plan view.
    PostproductionSettingsInterface defining the settings for the post-processing effects.
    SectionThe data that describes a section view.
    SerializedAreaMeasureRepresents a serialized version of an AreaSelection, used for saving and loading measurements.
    ShadowRepresents a shadow object used in the application.
    ShadowsRepresents a collection of shadows, where each shadow is identified by a unique ID. The keys of the object are the IDs, and the values are the corresponding Shadow objects.
    StreamLoaderSettingsSettings for the stream loader.
    StreamPropertiesSettingsSettings for the stream properties.
    StreamedInstanceRepresents an instance of a streamed object.

    Type Aliases​

    -
    Type aliasDescription
    CivilMarkerTypeRepresents the type of markers used in the CivilMarkerType class.
    EdgesType definition for the Edges object. The Edges object is a dictionary where the keys are strings and the values are of type Edge. It is used to store and manage multiple Edge instances, each identified by a unique name.
    IndexFragmentMapA map used to map the triangles of the clipping fill with the original fragment item. It's used to be able to trace to which elements a specific triangle of the clipping fill's face belongs (e.g. for highlighting an item when selecting one of its clipping fills).
    LineStylesA type representing a dictionary of ClipStyle objects, where the keys are the names of the styles.
    StreamedInstancesA map of streamed instances, grouped by their unique identifier.
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type aliasDescription
    CivilMarkerTypeRepresents the type of markers used in the CivilMarkerType class.
    EdgesType definition for the Edges object. The Edges object is a dictionary where the keys are strings and the values are of type Edge. It is used to store and manage multiple Edge instances, each identified by a unique name.
    IndexFragmentMapA map used to map the triangles of the clipping fill with the original fragment item. It's used to be able to trace to which elements a specific triangle of the clipping fill's face belongs (e.g. for highlighting an item when selecting one of its clipping fills).
    LineStylesA type representing a dictionary of ClipStyle objects, where the keys are the names of the styles.
    StreamedInstancesA map of streamed instances, grouped by their unique identifier.
    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/AreaSelection/index.html b/build/api/@thatopen/components-front/interfaces/AreaSelection/index.html index d8adbeb1e..68a31a09e 100644 --- a/build/api/@thatopen/components-front/interfaces/AreaSelection/index.html +++ b/build/api/@thatopen/components-front/interfaces/AreaSelection/index.html @@ -4,11 +4,11 @@ AreaSelection | That Open docs - - + + -
    Skip to main content

    AreaSelection

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The calculated perimeter of the selection.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry/index.html b/build/api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry/index.html index aa47a3028..9e66bad97 100644 --- a/build/api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry/index.html +++ b/build/api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry/index.html @@ -4,11 +4,11 @@ BvhLineSegmentsGeometry | That Open docs - - + + -
    Skip to main content

    BvhLineSegmentsGeometry

    +

    BvhLineSegmentsGeometry

    A line segments geometry whose BVH has been computed.

    Extends​

      @@ -27,6 +27,6 @@

      disposeBou

      Disposes the data of the computed BVH.

      Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/ClipStyle/index.html b/build/api/@thatopen/components-front/interfaces/ClipStyle/index.html index 0c5eff399..25c1bb0c2 100644 --- a/build/api/@thatopen/components-front/interfaces/ClipStyle/index.html +++ b/build/api/@thatopen/components-front/interfaces/ClipStyle/index.html @@ -4,11 +4,11 @@ ClipStyle | That Open docs - - + + -
    Skip to main content

    ClipStyle

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +and fillMaterial.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/DimensionData/index.html b/build/api/@thatopen/components-front/interfaces/DimensionData/index.html index 9e01a7392..61cb8d701 100644 --- a/build/api/@thatopen/components-front/interfaces/DimensionData/index.html +++ b/build/api/@thatopen/components-front/interfaces/DimensionData/index.html @@ -4,11 +4,11 @@ DimensionData | That Open docs - - + + -
    Skip to main content

    DimensionData

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The starting point of the dimension line in 3D space.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/Edge/index.html b/build/api/@thatopen/components-front/interfaces/Edge/index.html index a4292ee2e..c8029985c 100644 --- a/build/api/@thatopen/components-front/interfaces/Edge/index.html +++ b/build/api/@thatopen/components-front/interfaces/Edge/index.html @@ -4,11 +4,11 @@ Edge | That Open docs - - + + -
    Skip to main content

    Edge

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The name of the style to which this Edges belong.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/HighlightEvents/index.html b/build/api/@thatopen/components-front/interfaces/HighlightEvents/index.html index 7424e510e..178aff2eb 100644 --- a/build/api/@thatopen/components-front/interfaces/HighlightEvents/index.html +++ b/build/api/@thatopen/components-front/interfaces/HighlightEvents/index.html @@ -4,11 +4,11 @@ HighlightEvents | That Open docs - - + + -
    Skip to main content

    HighlightEvents

    -

    Interface defining the events that the Highlighter class can trigger. Each highlighter has its own set of events, identified by the highlighter name.

    +
    Skip to main content

    HighlightEvents

    +

    Interface defining the events that the Highlighter class can trigger. Each highlighter has its own set of events, identified by the highlighter name.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/HighlighterConfig/index.html b/build/api/@thatopen/components-front/interfaces/HighlighterConfig/index.html index 7fd23fa0c..76f3c95cf 100644 --- a/build/api/@thatopen/components-front/interfaces/HighlighterConfig/index.html +++ b/build/api/@thatopen/components-front/interfaces/HighlighterConfig/index.html @@ -4,11 +4,11 @@ HighlighterConfig | That Open docs - - + + -
    Skip to main content

    HighlighterConfig

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The world in which the highlighter operates.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/IGroupedMarkers/index.html b/build/api/@thatopen/components-front/interfaces/IGroupedMarkers/index.html index c2a7396ab..cba61c6fb 100644 --- a/build/api/@thatopen/components-front/interfaces/IGroupedMarkers/index.html +++ b/build/api/@thatopen/components-front/interfaces/IGroupedMarkers/index.html @@ -4,11 +4,11 @@ IGroupedMarkers | That Open docs - - + + -
    Skip to main content

    IGroupedMarkers

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Array of keys of markers that belong to this group.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/IMarker/index.html b/build/api/@thatopen/components-front/interfaces/IMarker/index.html index 7c2a83d02..84230763a 100644 --- a/build/api/@thatopen/components-front/interfaces/IMarker/index.html +++ b/build/api/@thatopen/components-front/interfaces/IMarker/index.html @@ -4,11 +4,11 @@ IMarker | That Open docs - - + + -
    Skip to main content

    IMarker

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Optional type of the marker.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/PlanView/index.html b/build/api/@thatopen/components-front/interfaces/PlanView/index.html index 1aaff33ae..fb4b21e7b 100644 --- a/build/api/@thatopen/components-front/interfaces/PlanView/index.html +++ b/build/api/@thatopen/components-front/interfaces/PlanView/index.html @@ -4,11 +4,11 @@ PlanView | That Open docs - - + + -
    Skip to main content

    PlanView

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Section . plane

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/PostproductionSettings/index.html b/build/api/@thatopen/components-front/interfaces/PostproductionSettings/index.html index 2b81c85e6..a32ef43b6 100644 --- a/build/api/@thatopen/components-front/interfaces/PostproductionSettings/index.html +++ b/build/api/@thatopen/components-front/interfaces/PostproductionSettings/index.html @@ -4,11 +4,11 @@ PostproductionSettings | That Open docs - - + + -
    Skip to main content

    PostproductionSettings

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +Default: true

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/Section/index.html b/build/api/@thatopen/components-front/interfaces/Section/index.html index ecffbf73d..67c8bd1d4 100644 --- a/build/api/@thatopen/components-front/interfaces/Section/index.html +++ b/build/api/@thatopen/components-front/interfaces/Section/index.html @@ -4,11 +4,11 @@ Section | That Open docs - - + + -
    Skip to main content

    Section

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The clipping plane object that cuts the model.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/SerializedAreaMeasure/index.html b/build/api/@thatopen/components-front/interfaces/SerializedAreaMeasure/index.html index c8acff210..36833d836 100644 --- a/build/api/@thatopen/components-front/interfaces/SerializedAreaMeasure/index.html +++ b/build/api/@thatopen/components-front/interfaces/SerializedAreaMeasure/index.html @@ -4,11 +4,11 @@ SerializedAreaMeasure | That Open docs - - + + -
    Skip to main content

    SerializedAreaMeasure

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The position of the vertices in the selection.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/Shadow/index.html b/build/api/@thatopen/components-front/interfaces/Shadow/index.html index 1f8bfa1e5..727485fe8 100644 --- a/build/api/@thatopen/components-front/interfaces/Shadow/index.html +++ b/build/api/@thatopen/components-front/interfaces/Shadow/index.html @@ -4,11 +4,11 @@ Shadow | That Open docs - - + + -
    Skip to main content

    Shadow

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The world in which the shadow is rendered.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/Shadows/index.html b/build/api/@thatopen/components-front/interfaces/Shadows/index.html index 8feb2389c..aa048dc08 100644 --- a/build/api/@thatopen/components-front/interfaces/Shadows/index.html +++ b/build/api/@thatopen/components-front/interfaces/Shadows/index.html @@ -4,11 +4,11 @@ Shadows | That Open docs - - + + -
    Skip to main content

    Shadows

    -

    Represents a collection of shadows, where each shadow is identified by a unique ID. The keys of the object are the IDs, and the values are the corresponding Shadow objects.

    +
    Skip to main content

    Shadows

    +

    Represents a collection of shadows, where each shadow is identified by a unique ID. The keys of the object are the IDs, and the values are the corresponding Shadow objects.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/StreamLoaderSettings/index.html b/build/api/@thatopen/components-front/interfaces/StreamLoaderSettings/index.html index 43acb46c5..240644ad0 100644 --- a/build/api/@thatopen/components-front/interfaces/StreamLoaderSettings/index.html +++ b/build/api/@thatopen/components-front/interfaces/StreamLoaderSettings/index.html @@ -4,11 +4,11 @@ StreamLoaderSettings | That Open docs - - + + -
    Skip to main content

    StreamLoaderSettings

    +

    StreamLoaderSettings

    Settings for the stream loader.

    Properties​

    assets​

    @@ -27,6 +27,6 @@

    globalDataF

    globalDataFileId: string

    -

    Identifier of the global data file.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Identifier of the global data file.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/StreamPropertiesSettings/index.html b/build/api/@thatopen/components-front/interfaces/StreamPropertiesSettings/index.html index 8040dc808..47e2cbf6b 100644 --- a/build/api/@thatopen/components-front/interfaces/StreamPropertiesSettings/index.html +++ b/build/api/@thatopen/components-front/interfaces/StreamPropertiesSettings/index.html @@ -4,11 +4,11 @@ StreamPropertiesSettings | That Open docs - - + + -
    Skip to main content

    StreamPropertiesSettings

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    [type: number]: number[]

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/interfaces/StreamedInstance/index.html b/build/api/@thatopen/components-front/interfaces/StreamedInstance/index.html index 4f00dc5ae..cb4b6eb1b 100644 --- a/build/api/@thatopen/components-front/interfaces/StreamedInstance/index.html +++ b/build/api/@thatopen/components-front/interfaces/StreamedInstance/index.html @@ -4,11 +4,11 @@ StreamedInstance | That Open docs - - + + -
    Skip to main content

    StreamedInstance

    +

    StreamedInstance

    Represents an instance of a streamed object.

    Properties​

    color​

    @@ -27,6 +27,6 @@

    transformatio

    transformation: number[]

    -

    Transformation matrix of the instance.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Transformation matrix of the instance.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/type-aliases/CivilMarkerType/index.html b/build/api/@thatopen/components-front/type-aliases/CivilMarkerType/index.html index 7a91854cf..f243d3b11 100644 --- a/build/api/@thatopen/components-front/type-aliases/CivilMarkerType/index.html +++ b/build/api/@thatopen/components-front/type-aliases/CivilMarkerType/index.html @@ -4,14 +4,14 @@ CivilMarkerType | That Open docs - - + + -
    Skip to main content

    CivilMarkerType

    +

    CivilMarkerType

    CivilMarkerType: "hover" | "select"

    -

    Represents the type of markers used in the CivilMarkerType class.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Represents the type of markers used in the CivilMarkerType class.

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/type-aliases/Edges/index.html b/build/api/@thatopen/components-front/type-aliases/Edges/index.html index dae2e1f12..3e57f04c0 100644 --- a/build/api/@thatopen/components-front/type-aliases/Edges/index.html +++ b/build/api/@thatopen/components-front/type-aliases/Edges/index.html @@ -4,16 +4,16 @@ Edges | That Open docs - - + + -
    Skip to main content

    Edges

    +

    Edges

    Edges: object

    Type definition for the Edges object. The Edges object is a dictionary where the keys are strings and the values are of type Edge. It is used to store and manage multiple Edge instances, each identified by a unique name.

    Index signature​

    -

    [name: string]: Edge

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    [name: string]: Edge

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/type-aliases/IndexFragmentMap/index.html b/build/api/@thatopen/components-front/type-aliases/IndexFragmentMap/index.html index 13b770bef..a7062ee44 100644 --- a/build/api/@thatopen/components-front/type-aliases/IndexFragmentMap/index.html +++ b/build/api/@thatopen/components-front/type-aliases/IndexFragmentMap/index.html @@ -4,14 +4,14 @@ IndexFragmentMap | That Open docs - - + + -
    Skip to main content

    IndexFragmentMap

    +

    IndexFragmentMap

    IndexFragmentMap: Map<number, FRAGS.FragmentIdMap>

    -

    A map used to map the triangles of the clipping fill with the original fragment item. It's used to be able to trace to which elements a specific triangle of the clipping fill's face belongs (e.g. for highlighting an item when selecting one of its clipping fills).

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    A map used to map the triangles of the clipping fill with the original fragment item. It's used to be able to trace to which elements a specific triangle of the clipping fill's face belongs (e.g. for highlighting an item when selecting one of its clipping fills).

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/type-aliases/LineStyles/index.html b/build/api/@thatopen/components-front/type-aliases/LineStyles/index.html index ec099a4b4..07c857547 100644 --- a/build/api/@thatopen/components-front/type-aliases/LineStyles/index.html +++ b/build/api/@thatopen/components-front/type-aliases/LineStyles/index.html @@ -4,16 +4,16 @@ LineStyles | That Open docs - - + + -
    Skip to main content

    LineStyles

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    [name: string]: ClipStyle

    \ No newline at end of file diff --git a/build/api/@thatopen/components-front/type-aliases/StreamedInstances/index.html b/build/api/@thatopen/components-front/type-aliases/StreamedInstances/index.html index 8c1158c3b..b764c2ee7 100644 --- a/build/api/@thatopen/components-front/type-aliases/StreamedInstances/index.html +++ b/build/api/@thatopen/components-front/type-aliases/StreamedInstances/index.html @@ -4,14 +4,14 @@ StreamedInstances | That Open docs - - + + -
    Skip to main content

    StreamedInstances

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    A map of streamed instances, grouped by their unique identifier.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/AsyncEvent/index.html b/build/api/@thatopen/components/classes/AsyncEvent/index.html index 92071773e..7576aa624 100644 --- a/build/api/@thatopen/components/classes/AsyncEvent/index.html +++ b/build/api/@thatopen/components/classes/AsyncEvent/index.html @@ -4,11 +4,11 @@ AsyncEvent\<T\> | That Open docs - - + + -
    Skip to main content

    AsyncEvent<T>

    +

    AsyncEvent<T>

    Simple event handler by Jason Kleban. Keep in mind that if you want to remove it later, you might want to declare the callback as an object. If you want to maintain the reference to this, you will need to declare the callback as an arrow function.

    Type parameters​

    Type parameter
    T
    @@ -55,6 +55,6 @@

    trigger()Parameters​

    ParameterType
    data?T

    Returns​

    -

    Promise<void>

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Promise<void>

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/BCFTopics/index.html b/build/api/@thatopen/components/classes/BCFTopics/index.html index 0d8f01aa4..43b0db02a 100644 --- a/build/api/@thatopen/components/classes/BCFTopics/index.html +++ b/build/api/@thatopen/components/classes/BCFTopics/index.html @@ -4,11 +4,11 @@ BCFTopics | That Open docs - - + + -
    Skip to main content

    BCFTopics

    +

    BCFTopics

    BCFTopics manages Building Collaboration Format (BCF) data the engine. It provides functionality for importing, exporting, and manipulating BCF data.

    Extends​

      @@ -200,6 +200,6 @@

      up This function iterates through each topic and checks if the viewpoints exist in the viewpoints list. If a viewpoint does not exist, it is removed from the topic's viewpoints.

      Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Base/index.html b/build/api/@thatopen/components/classes/Base/index.html index d23b8c5b5..ee4c8b413 100644 --- a/build/api/@thatopen/components/classes/Base/index.html +++ b/build/api/@thatopen/components/classes/Base/index.html @@ -4,11 +4,11 @@ abstract Base | That Open docs - - + + -
    Skip to main content

    abstract Base

    +

    abstract Base

    Base class of the library. Useful for finding out the interfaces something implements.

    Extended by​

      @@ -55,6 +55,6 @@

      isUpdateable()<

      Whether is component is Updateable.

      Returns​

      -

      this is Updateable

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    this is Updateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/BaseCamera/index.html b/build/api/@thatopen/components/classes/BaseCamera/index.html index de981b6cc..eb916ae5d 100644 --- a/build/api/@thatopen/components/classes/BaseCamera/index.html +++ b/build/api/@thatopen/components/classes/BaseCamera/index.html @@ -4,11 +4,11 @@ abstract BaseCamera | That Open docs - - + + -
    Skip to main content

    abstract BaseCamera

    +

    abstract BaseCamera

    Abstract class representing a camera in a 3D world. All cameras should use this class as a base.

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    BaseWorldItem . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/BaseRenderer/index.html b/build/api/@thatopen/components/classes/BaseRenderer/index.html index 43a1d6e39..578ccefa1 100644 --- a/build/api/@thatopen/components/classes/BaseRenderer/index.html +++ b/build/api/@thatopen/components/classes/BaseRenderer/index.html @@ -4,11 +4,11 @@ abstract BaseRenderer | That Open docs - - + + -
    Skip to main content

    abstract BaseRenderer

    +

    abstract BaseRenderer

    Abstract class representing a renderer for a 3D world. All renderers should use this class as a base.

    Extends​

      @@ -222,6 +222,6 @@

      ReturnsRemarks​

      This method is typically called when there is a change to the list of clipping planes -used by the active renderer.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +used by the active renderer.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/BaseScene/index.html b/build/api/@thatopen/components/classes/BaseScene/index.html index f73ca5583..19aea10eb 100644 --- a/build/api/@thatopen/components/classes/BaseScene/index.html +++ b/build/api/@thatopen/components/classes/BaseScene/index.html @@ -4,11 +4,11 @@ abstract BaseScene | That Open docs - - + + -
    Skip to main content

    abstract BaseScene

    +

    abstract BaseScene

    Abstract class representing a base scene in the application. All scenes should use this class as a base.

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    BaseWorldItem . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/BaseWorldItem/index.html b/build/api/@thatopen/components/classes/BaseWorldItem/index.html index b9188b96b..1535bc928 100644 --- a/build/api/@thatopen/components/classes/BaseWorldItem/index.html +++ b/build/api/@thatopen/components/classes/BaseWorldItem/index.html @@ -4,11 +4,11 @@ abstract BaseWorldItem | That Open docs - - + + -
    Skip to main content

    abstract BaseWorldItem

    +

    abstract BaseWorldItem

    One of the elements that make a world. It can be either a scene, a camera or a renderer.

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Base . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/BoundingBoxer/index.html b/build/api/@thatopen/components/classes/BoundingBoxer/index.html index 446d0ed8e..3ceab3c3b 100644 --- a/build/api/@thatopen/components/classes/BoundingBoxer/index.html +++ b/build/api/@thatopen/components/classes/BoundingBoxer/index.html @@ -4,11 +4,11 @@ BoundingBoxer | That Open docs - - + + -
    Skip to main content

    BoundingBoxer

    +

    BoundingBoxer

    A simple implementation of bounding box that works for fragments. The resulting bbox is not 100% precise, but it's fast, and should suffice for general use cases such as camera zooming or general boundary determination. 📕 Tutorial. 📘 API.

    Extends​

      @@ -260,6 +260,6 @@

      RemarksExample​

      -
      const positiveBound = BoundingBoxer.newBound(true);
      console.log(positiveBound); // Output: Vector3 { x: Infinity, y: Infinity, z: Infinity }

      const negativeBound = BoundingBoxer.newBound(false);
      console.log(negativeBound); // Output: Vector3 { x: -Infinity, y: -Infinity, z: -Infinity }
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    const positiveBound = BoundingBoxer.newBound(true);
    console.log(positiveBound); // Output: Vector3 { x: Infinity, y: Infinity, z: Infinity }

    const negativeBound = BoundingBoxer.newBound(false);
    console.log(negativeBound); // Output: Vector3 { x: -Infinity, y: -Infinity, z: -Infinity }
    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Classifier/index.html b/build/api/@thatopen/components/classes/Classifier/index.html index 83d071c96..4b8baeae8 100644 --- a/build/api/@thatopen/components/classes/Classifier/index.html +++ b/build/api/@thatopen/components/classes/Classifier/index.html @@ -4,11 +4,11 @@ Classifier | That Open docs - - + + -
    Skip to main content

    Classifier

    +

    Classifier

    The Classifier component is responsible for classifying and categorizing fragments based on various criteria. It provides methods to add, remove, find, and filter fragments based on their classification. 📕 Tutorial. 📘 API.

    Extends​

      @@ -265,6 +265,6 @@

      RemarksThrows​

      -

      Will throw an error if the fragment with the specified ID is not found.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Will throw an error if the fragment with the specified ID is not found.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Clipper/index.html b/build/api/@thatopen/components/classes/Clipper/index.html index cebb476a9..93f40c5ec 100644 --- a/build/api/@thatopen/components/classes/Clipper/index.html +++ b/build/api/@thatopen/components/classes/Clipper/index.html @@ -4,11 +4,11 @@ Clipper | That Open docs - - + + -
    Skip to main content

    Clipper

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Configurable . setup

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Comment/index.html b/build/api/@thatopen/components/classes/Comment/index.html index 282e76fbb..383ff45ab 100644 --- a/build/api/@thatopen/components/classes/Comment/index.html +++ b/build/api/@thatopen/components/classes/Comment/index.html @@ -4,11 +4,11 @@ Comment | That Open docs - - + + -
    Skip to main content

    Comment

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    A string representing the Comment in BCFv2 XML format.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Component/index.html b/build/api/@thatopen/components/classes/Component/index.html index 40d6fe3a8..2799ea81c 100644 --- a/build/api/@thatopen/components/classes/Component/index.html +++ b/build/api/@thatopen/components/classes/Component/index.html @@ -4,11 +4,11 @@ abstract Component | That Open docs - - + + -
    Skip to main content

    abstract Component

    +

    abstract Component

    Components are the building blocks of this library. Components are singleton elements that contain specific functionality. For instance, the Clipper Component can create, delete and handle 3D clipping planes. Components must be unique (they can't be instanced more than once per Components instance), and have a static UUID that identifies them uniquely. The can be accessed globally using the Components instance.

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Base . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Components/index.html b/build/api/@thatopen/components/classes/Components/index.html index a55104026..e6ff805cc 100644 --- a/build/api/@thatopen/components/classes/Components/index.html +++ b/build/api/@thatopen/components/classes/Components/index.html @@ -4,11 +4,11 @@ Components | That Open docs - - + + -
    Skip to main content

    Components

    +

    Components

    The entry point of the Components library. It can create, delete and access all the components of the library globally, update all the updatable components automatically and dispose all the components, preventing memory leaks.

    Implements​

      @@ -51,7 +51,7 @@

      Examplerelease​

      -

      static readonly release: "2.4.2" = "2.4.2"

      +

      static readonly release: "2.4.4" = "2.4.4"

      The version of the @thatopen/components library.

      Methods​

      @@ -118,6 +118,6 @@

      init()Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/ConfigManager/index.html b/build/api/@thatopen/components/classes/ConfigManager/index.html index 2d9fe1ff4..737c1e124 100644 --- a/build/api/@thatopen/components/classes/ConfigManager/index.html +++ b/build/api/@thatopen/components/classes/ConfigManager/index.html @@ -4,11 +4,11 @@ ConfigManager | That Open docs - - + + -
    Skip to main content

    ConfigManager

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Component . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/CullerRenderer/index.html b/build/api/@thatopen/components/classes/CullerRenderer/index.html index 64eaecd75..9f72dec3b 100644 --- a/build/api/@thatopen/components/classes/CullerRenderer/index.html +++ b/build/api/@thatopen/components/classes/CullerRenderer/index.html @@ -4,11 +4,11 @@ CullerRenderer | That Open docs - - + + -
    Skip to main content

    CullerRenderer

    +

    CullerRenderer

    A base renderer to determine visibility on screen.

    Extended by​

      @@ -129,6 +129,6 @@

      updateVisib

      Parameters​

      ParameterTypeDescription
      force?booleanif true, it will refresh the scene even if needsUpdate is
      not true.

      Returns​

      -

      Promise<void>

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Promise<void>

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Cullers/index.html b/build/api/@thatopen/components/classes/Cullers/index.html index bfee244f6..92dbdf047 100644 --- a/build/api/@thatopen/components/classes/Cullers/index.html +++ b/build/api/@thatopen/components/classes/Cullers/index.html @@ -4,11 +4,11 @@ Cullers | That Open docs - - + + -
    Skip to main content

    Cullers

    +

    Cullers

    A component that provides culling functionality for meshes in a 3D scene. 📕 Tutorial. 📘 API.

    Extends​

      @@ -145,6 +145,6 @@

      updateInstan

      Parameters​

      ParameterTypeDescription
      meshesIterable<InstancedMesh<BufferGeometry<NormalBufferAttributes>, Material | Material[]>>The meshes to update.

      Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/DataMap/index.html b/build/api/@thatopen/components/classes/DataMap/index.html index fc615bf70..8d891c214 100644 --- a/build/api/@thatopen/components/classes/DataMap/index.html +++ b/build/api/@thatopen/components/classes/DataMap/index.html @@ -4,11 +4,11 @@ DataMap\<K, V\> | That Open docs - - + + -
    Skip to main content

    DataMap<K, V>

    +

    DataMap<K, V>

    A class that extends the built-in Map class and provides additional events for item set, update, delete, and clear operations.

    Extends​

      @@ -126,6 +126,6 @@

      ReturnsDataMap<K, V>

      The DataMap instance.

      Overrides​

      -

      Map.set

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Map.set

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/DataSet/index.html b/build/api/@thatopen/components/classes/DataSet/index.html index a7ec495e8..fecf88a41 100644 --- a/build/api/@thatopen/components/classes/DataSet/index.html +++ b/build/api/@thatopen/components/classes/DataSet/index.html @@ -4,11 +4,11 @@ DataSet\<T\> | That Open docs - - + + -
    Skip to main content

    DataSet<T>

    +

    DataSet<T>

    A class that extends the built-in Set class and provides additional functionality. It triggers events when items are added, deleted, or the set is cleared.

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Disposer/index.html b/build/api/@thatopen/components/classes/Disposer/index.html index 5a753d846..fdb9601eb 100644 --- a/build/api/@thatopen/components/classes/Disposer/index.html +++ b/build/api/@thatopen/components/classes/Disposer/index.html @@ -4,11 +4,11 @@ Disposer | That Open docs - - + + -
    Skip to main content

    Disposer

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Component . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Event/index.html b/build/api/@thatopen/components/classes/Event/index.html index b45e42f55..34a3ad164 100644 --- a/build/api/@thatopen/components/classes/Event/index.html +++ b/build/api/@thatopen/components/classes/Event/index.html @@ -4,11 +4,11 @@ Event\<T\> | That Open docs - - + + -
    Skip to main content

    Event<T>

    +

    Event<T>

    Simple event handler by Jason Kleban. Keep in mind that if you want to remove it later, you might want to declare the callback as an object. If you want to maintain the reference to this, you will need to declare the callback as an arrow function.

    Type parameters​

    Type parameter
    T
    @@ -55,6 +55,6 @@

    trigger()Parameters​

    ParameterType
    data?T

    Returns​

    -

    void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/EventManager/index.html b/build/api/@thatopen/components/classes/EventManager/index.html index 05b42f0d1..4d9da355f 100644 --- a/build/api/@thatopen/components/classes/EventManager/index.html +++ b/build/api/@thatopen/components/classes/EventManager/index.html @@ -4,11 +4,11 @@ EventManager | That Open docs - - + + -
    Skip to main content

    EventManager

    +

    EventManager

    Simple class to easily toggle and reset event lists.

    Properties​

    list​

    @@ -53,6 +53,6 @@

    set()Parameters​

    ParameterTypeDescription
    activebooleanwhether to turn on or off the events.

    Returns​

    -

    void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Exploder/index.html b/build/api/@thatopen/components/classes/Exploder/index.html index 8a35481eb..e4f0a2e89 100644 --- a/build/api/@thatopen/components/classes/Exploder/index.html +++ b/build/api/@thatopen/components/classes/Exploder/index.html @@ -4,11 +4,11 @@ Exploder | That Open docs - - + + -
    Skip to main content

    Exploder

    +

    Exploder

    The Exploder component is responsible for managing the explosion of 3D model fragments (generally by floor). 📕 Tutorial. 📘 API.

    Extends​

      @@ -140,6 +140,6 @@

      RemarksThrows​

      -

      Will throw an error if the Classifier or FragmentsManager components are not found in the components system.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Will throw an error if the Classifier or FragmentsManager components are not found in the components system.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/FirstPersonMode/index.html b/build/api/@thatopen/components/classes/FirstPersonMode/index.html index 19b71291d..48fa2a446 100644 --- a/build/api/@thatopen/components/classes/FirstPersonMode/index.html +++ b/build/api/@thatopen/components/classes/FirstPersonMode/index.html @@ -4,11 +4,11 @@ FirstPersonMode | That Open docs - - + + -
    Skip to main content

    FirstPersonMode

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    NavigationMode . set

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/FragmentsManager/index.html b/build/api/@thatopen/components/classes/FragmentsManager/index.html index 3db543bfe..b1a45511c 100644 --- a/build/api/@thatopen/components/classes/FragmentsManager/index.html +++ b/build/api/@thatopen/components/classes/FragmentsManager/index.html @@ -4,11 +4,11 @@ FragmentsManager | That Open docs - - + + -
    Skip to main content

    FragmentsManager

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +If a model with a given ID is not found in the groups map, the method skips that model and continues with the next one.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Grids/index.html b/build/api/@thatopen/components/classes/Grids/index.html index e3dbc722a..2c3075d40 100644 --- a/build/api/@thatopen/components/classes/Grids/index.html +++ b/build/api/@thatopen/components/classes/Grids/index.html @@ -4,11 +4,11 @@ Grids | That Open docs - - + + -
    Skip to main content

    Grids

    +

    Grids

    A component that manages grid instances. Each grid is associated with a unique world. 📕 Tutorial. 📘 API.

    Extends​

      @@ -45,14 +45,14 @@

      uuidMethods​

      +

      Methods​

      create()​

      create(world): SimpleGrid

      -

      Creates a new grid for the given world. +

      Creates a new grid for the given world. Throws an error if a grid already exists for the world.

      Parameters​

      ParameterTypeDescription
      worldWorldThe world to create the grid for.
      @@ -66,14 +66,14 @@

      delete()Parameters​

      ParameterTypeDescription
      worldWorldThe world for which to delete the grid.

      Returns​

      void

      Remarks​

      -

      This method will dispose of the grid and remove it from the internal list. +

      This method will dispose of the grid and remove it from the internal list. If the world is disposed before calling this method, the grid will be automatically deleted.

      dispose()​

      @@ -134,6 +134,6 @@

      isUpdateable()<

      Returns​

      this is Updateable

      Inherited from​

      -

      Component . isUpdateable

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Component . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Hider/index.html b/build/api/@thatopen/components/classes/Hider/index.html index 8f5fbbe26..cc04e2635 100644 --- a/build/api/@thatopen/components/classes/Hider/index.html +++ b/build/api/@thatopen/components/classes/Hider/index.html @@ -4,11 +4,11 @@ Hider | That Open docs - - + + -
    Skip to main content

    Hider

    +

    Hider

    A component that hides or isolates fragments within a 3D scene. It extends the base Component class and provides methods to control fragment visibility and isolation. 📕 Tutorial. 📘 API.

    Extends​

      @@ -101,6 +101,6 @@

      set()Parameters​

      ParameterTypeDescription
      visiblebooleanThe visibility state to set for the fragments.
      items?FragmentIdMapAn optional map of fragment IDs and their corresponding sub-fragment IDs to be affected.
      If not provided, all fragments will be affected.

      Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IDSSpecification/index.html b/build/api/@thatopen/components/classes/IDSSpecification/index.html index 609af2161..fc82b1051 100644 --- a/build/api/@thatopen/components/classes/IDSSpecification/index.html +++ b/build/api/@thatopen/components/classes/IDSSpecification/index.html @@ -4,11 +4,11 @@ IDSSpecification | That Open docs - - + + -
    Skip to main content

    IDSSpecification

    +

    IDSSpecification

    Represents a single specification from the Information Delivery Specification (IDS) standard.

    Remarks​

    This class provides methods for testing a model against the specification, @@ -39,6 +39,6 @@

    ParametersReturns​

    Promise <IDSCheckResult[]>

    An array representing the test results. -If no requirements are defined for the specification, an empty array is returned.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +If no requirements are defined for the specification, an empty array is returned.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IDSSpecifications/index.html b/build/api/@thatopen/components/classes/IDSSpecifications/index.html index 0b308f0bf..2b12f6a7a 100644 --- a/build/api/@thatopen/components/classes/IDSSpecifications/index.html +++ b/build/api/@thatopen/components/classes/IDSSpecifications/index.html @@ -4,11 +4,11 @@ IDSSpecifications | That Open docs - - + + -
    Skip to main content

    IDSSpecifications

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    An array of IDSSpecification instances created from the parsed data.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcBasicQuery/index.html b/build/api/@thatopen/components/classes/IfcBasicQuery/index.html index 3ed15592b..60fb8160d 100644 --- a/build/api/@thatopen/components/classes/IfcBasicQuery/index.html +++ b/build/api/@thatopen/components/classes/IfcBasicQuery/index.html @@ -4,11 +4,11 @@ IfcBasicQuery | That Open docs - - + + -
    Skip to main content

    IfcBasicQuery

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    IfcFinderQuery . importRules

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcFinder/index.html b/build/api/@thatopen/components/classes/IfcFinder/index.html index 07b7b4db8..7693fb0e1 100644 --- a/build/api/@thatopen/components/classes/IfcFinder/index.html +++ b/build/api/@thatopen/components/classes/IfcFinder/index.html @@ -4,11 +4,11 @@ IfcFinder | That Open docs - - + + -
    Skip to main content

    IfcFinder

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Component . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcFinderQuery/index.html b/build/api/@thatopen/components/classes/IfcFinderQuery/index.html index 2b2ed4d93..8ff94304a 100644 --- a/build/api/@thatopen/components/classes/IfcFinderQuery/index.html +++ b/build/api/@thatopen/components/classes/IfcFinderQuery/index.html @@ -4,11 +4,11 @@ abstract IfcFinderQuery | That Open docs - - + + -
    Skip to main content

    abstract IfcFinderQuery

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    IfcFinderRule[]

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcFragmentSettings/index.html b/build/api/@thatopen/components/classes/IfcFragmentSettings/index.html index 8356533db..861a8c6ba 100644 --- a/build/api/@thatopen/components/classes/IfcFragmentSettings/index.html +++ b/build/api/@thatopen/components/classes/IfcFragmentSettings/index.html @@ -4,11 +4,11 @@ IfcFragmentSettings | That Open docs - - + + -
    Skip to main content

    IfcFragmentSettings

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Loader settings for web-ifc.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcGeometryTiler/index.html b/build/api/@thatopen/components/classes/IfcGeometryTiler/index.html index e5ef66ee8..dfa89ce42 100644 --- a/build/api/@thatopen/components/classes/IfcGeometryTiler/index.html +++ b/build/api/@thatopen/components/classes/IfcGeometryTiler/index.html @@ -4,11 +4,11 @@ IfcGeometryTiler | That Open docs - - + + -
    Skip to main content

    IfcGeometryTiler

    +

    IfcGeometryTiler

    A component that handles the tiling of IFC geometries for efficient streaming. 📕 Tutorial. 📘 API.

    Extends​

      @@ -177,6 +177,6 @@

      ReturnsRemarks​

      -

      This method cleans up any resources after the streaming process is complete.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    This method cleans up any resources after the streaming process is complete.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcIsolator/index.html b/build/api/@thatopen/components/classes/IfcIsolator/index.html index 95e04606b..01f185c7d 100644 --- a/build/api/@thatopen/components/classes/IfcIsolator/index.html +++ b/build/api/@thatopen/components/classes/IfcIsolator/index.html @@ -4,11 +4,11 @@ IfcIsolator | That Open docs - - + + -
    Skip to main content

    IfcIsolator

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Component . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcJsonExporter/index.html b/build/api/@thatopen/components/classes/IfcJsonExporter/index.html index 40e95fa22..088dd476a 100644 --- a/build/api/@thatopen/components/classes/IfcJsonExporter/index.html +++ b/build/api/@thatopen/components/classes/IfcJsonExporter/index.html @@ -4,11 +4,11 @@ IfcJsonExporter | That Open docs - - + + -
    Skip to main content

    IfcJsonExporter

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Component . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcLoader/index.html b/build/api/@thatopen/components/classes/IfcLoader/index.html index 71883c60b..8edccac58 100644 --- a/build/api/@thatopen/components/classes/IfcLoader/index.html +++ b/build/api/@thatopen/components/classes/IfcLoader/index.html @@ -4,11 +4,11 @@ IfcLoader | That Open docs - - + + -
    Skip to main content

    IfcLoader

    +

    IfcLoader

    The IfcLoader component is responsible for loading and processing IFC files. It utilizes the Web-IFC library to handle the IFC data and the Three.js library for 3D rendering. The class provides methods for setting up, loading, and cleaning up IFC files. 📕 Tutorial. 📘 API.

    Extends​

      @@ -183,6 +183,6 @@

      RemarksExample​

      -
      const ifcLoader = new IfcLoader(components);
      await ifcLoader.setup({ autoSetWasm: true });
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    const ifcLoader = new IfcLoader(components);
    await ifcLoader.setup({ autoSetWasm: true });
    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcPropertiesManager/index.html b/build/api/@thatopen/components/classes/IfcPropertiesManager/index.html index ceface0c2..8d08dc7b2 100644 --- a/build/api/@thatopen/components/classes/IfcPropertiesManager/index.html +++ b/build/api/@thatopen/components/classes/IfcPropertiesManager/index.html @@ -4,11 +4,11 @@ IfcPropertiesManager | That Open docs - - + + -
    Skip to main content

    IfcPropertiesManager

    +

    IfcPropertiesManager

    Component to manage and edit properties and Psets in IFC files.

    Extends​

      @@ -419,6 +419,6 @@

      ReturnsThrows​

      -

      Will throw an error if the IFC schema is not found in the model.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Will throw an error if the IFC schema is not found in the model.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcPropertiesTiler/index.html b/build/api/@thatopen/components/classes/IfcPropertiesTiler/index.html index 947833676..987d2a5f3 100644 --- a/build/api/@thatopen/components/classes/IfcPropertiesTiler/index.html +++ b/build/api/@thatopen/components/classes/IfcPropertiesTiler/index.html @@ -4,12 +4,12 @@ IfcPropertiesTiler | That Open docs - - + + -
    Skip to main content

    IfcPropertiesTiler

    -

    A component that converts the properties of an IFC file to tiles. It uses the Web-IFC library to read and process the IFC data. 📕 Tutorial. 📘 API.

    +

    IfcPropertiesTiler

    +

    A component that converts the properties of an IFC file to tiles. It uses the Web-IFC library to read and process the IFC data. 📕 Tutorial. 📘 API.

    Extends​

    • Component
      • @@ -39,21 +39,21 @@

      onIndicesS

      readonly onIndicesStreamed: AsyncEvent<Map<number, Map<number, number[]>>>

      -

      An event that is triggered when indices are streamed from the IFC file. +

      An event that is triggered when indices are streamed from the IFC file. The event provides a map of indices, where the key is the entity type and the value is another map of indices.

      onProgress​

      readonly onProgress: AsyncEvent<number>

      -

      An event that is triggered to indicate the progress of the streaming process. +

      An event that is triggered to indicate the progress of the streaming process. The event provides a number between 0 and 1 representing the progress percentage.

      onPropertiesStreamed​

      readonly onPropertiesStreamed: AsyncEvent<object>

      -

      An event that is triggered when properties are streamed from the IFC file. +

      An event that is triggered when properties are streamed from the IFC file. The event provides the type of the IFC entity and the corresponding data.

      Type declaration​

      data​
      @@ -83,7 +83,7 @@

      uuidMethods​

      dispose()​

      @@ -166,6 +166,6 @@

      ParametersParameterTypeDescriptionloadCallbackModelLoadCallbackA callback function that loads the IFC file data.

      Returns​

      Promise<void>

      -

      A Promise that resolves when the streaming process is complete.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    A Promise that resolves when the streaming process is complete.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcPropertyQuery/index.html b/build/api/@thatopen/components/classes/IfcPropertyQuery/index.html index a31d836c6..855347efe 100644 --- a/build/api/@thatopen/components/classes/IfcPropertyQuery/index.html +++ b/build/api/@thatopen/components/classes/IfcPropertyQuery/index.html @@ -4,11 +4,11 @@ IfcPropertyQuery | That Open docs - - + + -
    Skip to main content

    IfcPropertyQuery

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    IfcFinderQuery . importRules

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcRelationsIndexer/index.html b/build/api/@thatopen/components/classes/IfcRelationsIndexer/index.html index 3a1ea442b..de2c61241 100644 --- a/build/api/@thatopen/components/classes/IfcRelationsIndexer/index.html +++ b/build/api/@thatopen/components/classes/IfcRelationsIndexer/index.html @@ -4,11 +4,11 @@ IfcRelationsIndexer | That Open docs - - + + -
    Skip to main content

    IfcRelationsIndexer

    +

    IfcRelationsIndexer

    Indexer component for IFC entities, facilitating the indexing and retrieval of IFC entity relationships. It is designed to process models properties by indexing their IFC entities' relations based on predefined inverse attributes, and provides methods to query these relations. 📕 Tutorial. 📘 API.

    Extends​

      @@ -304,6 +304,6 @@

      ParametersReturns​

      void

      Fires​

      -

      onRelationsIndexed - Triggers an event with the model's UUID and the added relation map.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    onRelationsIndexed - Triggers an event with the model's UUID and the added relation map.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/IfcStreamingSettings/index.html b/build/api/@thatopen/components/classes/IfcStreamingSettings/index.html index b15ba3ea3..992b2ed48 100644 --- a/build/api/@thatopen/components/classes/IfcStreamingSettings/index.html +++ b/build/api/@thatopen/components/classes/IfcStreamingSettings/index.html @@ -4,11 +4,11 @@ IfcStreamingSettings | That Open docs - - + + -
    Skip to main content

    IfcStreamingSettings

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    IfcFragmentSettings . webIfc

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/MeasurementUtils/index.html b/build/api/@thatopen/components/classes/MeasurementUtils/index.html index 47e04affa..e6304e15a 100644 --- a/build/api/@thatopen/components/classes/MeasurementUtils/index.html +++ b/build/api/@thatopen/components/classes/MeasurementUtils/index.html @@ -4,11 +4,11 @@ MeasurementUtils | That Open docs - - + + -
    Skip to main content

    MeasurementUtils

    +

    MeasurementUtils

    Utility component for performing measurements on 3D meshes by providing methods for measuring distances between edges and faces. 📕 Tutorial. 📘 API.

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The distance from the point to the line segment.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/MeshCullerRenderer/index.html b/build/api/@thatopen/components/classes/MeshCullerRenderer/index.html index e9f490276..a3b644555 100644 --- a/build/api/@thatopen/components/classes/MeshCullerRenderer/index.html +++ b/build/api/@thatopen/components/classes/MeshCullerRenderer/index.html @@ -4,11 +4,11 @@ MeshCullerRenderer | That Open docs - - + + -
    Skip to main content

    MeshCullerRenderer

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    CullerRenderer . updateVisibility

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/MiniMap/index.html b/build/api/@thatopen/components/classes/MiniMap/index.html index 83f20d004..c0b2ade91 100644 --- a/build/api/@thatopen/components/classes/MiniMap/index.html +++ b/build/api/@thatopen/components/classes/MiniMap/index.html @@ -4,11 +4,11 @@ MiniMap | That Open docs - - + + -
    Skip to main content

    MiniMap

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Updateable . update

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/MiniMaps/index.html b/build/api/@thatopen/components/classes/MiniMaps/index.html index f24cd53a0..849c175d6 100644 --- a/build/api/@thatopen/components/classes/MiniMaps/index.html +++ b/build/api/@thatopen/components/classes/MiniMaps/index.html @@ -4,11 +4,11 @@ MiniMaps | That Open docs - - + + -
    Skip to main content

    MiniMaps

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Updateable . update

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Mouse/index.html b/build/api/@thatopen/components/classes/Mouse/index.html index c92ae5c75..44c13f3d6 100644 --- a/build/api/@thatopen/components/classes/Mouse/index.html +++ b/build/api/@thatopen/components/classes/Mouse/index.html @@ -4,11 +4,11 @@ Mouse | That Open docs - - + + -
    Skip to main content

    Mouse

    +

    Mouse

    A helper to easily get the real position of the mouse in the Three.js canvas to work with tools like the raycaster, even if it has been transformed through CSS or doesn't occupy the whole screen.

    Implements​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Disposable . dispose

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/OrbitMode/index.html b/build/api/@thatopen/components/classes/OrbitMode/index.html index 85f55c96c..4e9d95804 100644 --- a/build/api/@thatopen/components/classes/OrbitMode/index.html +++ b/build/api/@thatopen/components/classes/OrbitMode/index.html @@ -4,11 +4,11 @@ OrbitMode | That Open docs - - + + -
    Skip to main content

    OrbitMode

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    NavigationMode . set

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/OrthoPerspectiveCamera/index.html b/build/api/@thatopen/components/classes/OrthoPerspectiveCamera/index.html index 1cdff6db2..991aea494 100644 --- a/build/api/@thatopen/components/classes/OrthoPerspectiveCamera/index.html +++ b/build/api/@thatopen/components/classes/OrthoPerspectiveCamera/index.html @@ -4,11 +4,11 @@ OrthoPerspectiveCamera | That Open docs - - + + -
    Skip to main content

    OrthoPerspectiveCamera

    +

    OrthoPerspectiveCamera

    A flexible camera that uses yomotsu's cameracontrols to control the camera in 2D and 3D. It supports multiple navigation modes, such as 2D floor plan navigation, first person and 3D orbit. This class extends the SimpleCamera class and adds additional functionality for managing different camera projections and navigation modes. 📕 Tutorial. 📘 API.

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    SimpleCamera . updateAspect

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/PlanMode/index.html b/build/api/@thatopen/components/classes/PlanMode/index.html index 027e7a8d9..27228d25c 100644 --- a/build/api/@thatopen/components/classes/PlanMode/index.html +++ b/build/api/@thatopen/components/classes/PlanMode/index.html @@ -4,11 +4,11 @@ PlanMode | That Open docs - - + + -
    Skip to main content

    PlanMode

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    NavigationMode . set

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/ProjectionManager/index.html b/build/api/@thatopen/components/classes/ProjectionManager/index.html index dbb94d0c6..d315fba58 100644 --- a/build/api/@thatopen/components/classes/ProjectionManager/index.html +++ b/build/api/@thatopen/components/classes/ProjectionManager/index.html @@ -4,11 +4,11 @@ ProjectionManager | That Open docs - - + + -
    Skip to main content

    ProjectionManager

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Promise<void>

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/PropertiesStreamingSettings/index.html b/build/api/@thatopen/components/classes/PropertiesStreamingSettings/index.html index 9d9a34318..12308fb40 100644 --- a/build/api/@thatopen/components/classes/PropertiesStreamingSettings/index.html +++ b/build/api/@thatopen/components/classes/PropertiesStreamingSettings/index.html @@ -4,11 +4,11 @@ PropertiesStreamingSettings | That Open docs - - + + -
    Skip to main content

    PropertiesStreamingSettings

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    IfcFragmentSettings . webIfc

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Raycasters/index.html b/build/api/@thatopen/components/classes/Raycasters/index.html index f1828018a..d62194c5e 100644 --- a/build/api/@thatopen/components/classes/Raycasters/index.html +++ b/build/api/@thatopen/components/classes/Raycasters/index.html @@ -4,11 +4,11 @@ Raycasters | That Open docs - - + + -
    Skip to main content

    Raycasters

    +

    Raycasters

    A component that manages a raycaster for each world and automatically disposes it when its corresponding world is disposed. 📕 Tutorial. 📘 API.

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Component . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/ShadowedScene/index.html b/build/api/@thatopen/components/classes/ShadowedScene/index.html index c2d7c0b68..59ad54087 100644 --- a/build/api/@thatopen/components/classes/ShadowedScene/index.html +++ b/build/api/@thatopen/components/classes/ShadowedScene/index.html @@ -4,11 +4,11 @@ ShadowedScene | That Open docs - - + + -
    Skip to main content

    ShadowedScene

    +

    ShadowedScene

    A scene that supports efficient cast shadows. 📕 Tutorial. 📘 API.

    Extends​

      @@ -235,6 +235,6 @@

      updateShadows(

      Update all the shadows of the scene.

      Returns​

      -

      Promise<void>

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Promise<void>

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/SimpleCamera/index.html b/build/api/@thatopen/components/classes/SimpleCamera/index.html index e76607c5c..25cb292b1 100644 --- a/build/api/@thatopen/components/classes/SimpleCamera/index.html +++ b/build/api/@thatopen/components/classes/SimpleCamera/index.html @@ -4,11 +4,11 @@ SimpleCamera | That Open docs - - + + -
    Skip to main content

    SimpleCamera

    +

    SimpleCamera

    A basic camera that uses yomotsu's cameracontrols to control the camera in 2D and 3D. Check out it's API to find out what features it offers.

    Extends​

      @@ -209,6 +209,6 @@

      updateAspect()<

      Updates the aspect of the camera to match the size of the Components.renderer.

      Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/SimpleGrid/index.html b/build/api/@thatopen/components/classes/SimpleGrid/index.html index e303d8de3..eafff1bd3 100644 --- a/build/api/@thatopen/components/classes/SimpleGrid/index.html +++ b/build/api/@thatopen/components/classes/SimpleGrid/index.html @@ -4,11 +4,11 @@ SimpleGrid | That Open docs - - + + -
    Skip to main content

    SimpleGrid

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Configurable . setup

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/SimplePlane/index.html b/build/api/@thatopen/components/classes/SimplePlane/index.html index 570ea5598..3f2947ce2 100644 --- a/build/api/@thatopen/components/classes/SimplePlane/index.html +++ b/build/api/@thatopen/components/classes/SimplePlane/index.html @@ -4,11 +4,11 @@ SimplePlane | That Open docs - - + + -
    Skip to main content

    SimplePlane

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/SimpleRaycaster/index.html b/build/api/@thatopen/components/classes/SimpleRaycaster/index.html index c1c18be42..aca1bb159 100644 --- a/build/api/@thatopen/components/classes/SimpleRaycaster/index.html +++ b/build/api/@thatopen/components/classes/SimpleRaycaster/index.html @@ -4,11 +4,11 @@ SimpleRaycaster | That Open docs - - + + -
    Skip to main content

    SimpleRaycaster

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Disposable . dispose

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/SimpleRenderer/index.html b/build/api/@thatopen/components/classes/SimpleRenderer/index.html index a3426be1f..a2f3d9b9d 100644 --- a/build/api/@thatopen/components/classes/SimpleRenderer/index.html +++ b/build/api/@thatopen/components/classes/SimpleRenderer/index.html @@ -4,11 +4,11 @@ SimpleRenderer | That Open docs - - + + -
    Skip to main content

    SimpleRenderer

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +used by the active renderer.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/SimpleScene/index.html b/build/api/@thatopen/components/classes/SimpleScene/index.html index e1a6e6295..6173dac2d 100644 --- a/build/api/@thatopen/components/classes/SimpleScene/index.html +++ b/build/api/@thatopen/components/classes/SimpleScene/index.html @@ -4,11 +4,11 @@ SimpleScene | That Open docs - - + + -
    Skip to main content

    SimpleScene

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Configurable . setup

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/SimpleWorld/index.html b/build/api/@thatopen/components/classes/SimpleWorld/index.html index f19bebb45..9e2798f63 100644 --- a/build/api/@thatopen/components/classes/SimpleWorld/index.html +++ b/build/api/@thatopen/components/classes/SimpleWorld/index.html @@ -4,11 +4,11 @@ SimpleWorld\<T, U, S\> | That Open docs - - + + -
    Skip to main content

    SimpleWorld<T, U, S>

    +

    SimpleWorld<T, U, S>

    A class representing a simple world in a 3D environment. It extends the Base class and implements the World interface.

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Updateable . update

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/VertexPicker/index.html b/build/api/@thatopen/components/classes/VertexPicker/index.html index 6a2d82051..2cf5329c1 100644 --- a/build/api/@thatopen/components/classes/VertexPicker/index.html +++ b/build/api/@thatopen/components/classes/VertexPicker/index.html @@ -4,11 +4,11 @@ VertexPicker | That Open docs - - + + -
    Skip to main content

    VertexPicker

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Component . isUpdateable

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Viewpoint/index.html b/build/api/@thatopen/components/classes/Viewpoint/index.html index cbc66aa70..2c4b349ba 100644 --- a/build/api/@thatopen/components/classes/Viewpoint/index.html +++ b/build/api/@thatopen/components/classes/Viewpoint/index.html @@ -4,11 +4,11 @@ Viewpoint | That Open docs - - + + -
    Skip to main content

    Viewpoint

    +

    Viewpoint

    Represents a BCF compliant viewpoint from BuildingSMART.

    The Viewpoint class provides methods for managing and interacting with viewpoints. It includes functionality for setting viewpoint properties, updating the camera, @@ -256,6 +256,6 @@

    RemarksThrows​

    An error if the world's camera does not have camera controls.

    Throws​

    -

    An error if the world's renderer is not available.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    An error if the world's renderer is not available.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/classes/Worlds/index.html b/build/api/@thatopen/components/classes/Worlds/index.html index 0b7253381..c669b1478 100644 --- a/build/api/@thatopen/components/classes/Worlds/index.html +++ b/build/api/@thatopen/components/classes/Worlds/index.html @@ -4,11 +4,11 @@ Worlds | That Open docs - - + + -
    Skip to main content

    Worlds

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Updateable . update

    \ No newline at end of file diff --git a/build/api/@thatopen/components/index.html b/build/api/@thatopen/components/index.html index 71efa4e4c..4c3c876cc 100644 --- a/build/api/@thatopen/components/index.html +++ b/build/api/@thatopen/components/index.html @@ -4,11 +4,11 @@ @thatopen/components | That Open docs - - + + -
    Skip to main content

    @thatopen/components

    +

    @thatopen/components

    Classes​

    ClassDescription
    AsyncEventSimple event handler by Jason Kleban. Keep in mind that if you want to remove it later, you might want to declare the callback as an object. If you want to maintain the reference to this, you will need to declare the callback as an arrow function.
    BCFTopicsBCFTopics manages Building Collaboration Format (BCF) data the engine. It provides functionality for importing, exporting, and manipulating BCF data.
    BaseBase class of the library. Useful for finding out the interfaces something implements.
    BaseCameraAbstract class representing a camera in a 3D world. All cameras should use this class as a base.
    BaseRendererAbstract class representing a renderer for a 3D world. All renderers should use this class as a base.
    BaseSceneAbstract class representing a base scene in the application. All scenes should use this class as a base.
    BaseWorldItemOne of the elements that make a world. It can be either a scene, a camera or a renderer.
    BoundingBoxerA simple implementation of bounding box that works for fragments. The resulting bbox is not 100% precise, but it's fast, and should suffice for general use cases such as camera zooming or general boundary determination. 📕 Tutorial. 📘 API.
    ClassifierThe Classifier component is responsible for classifying and categorizing fragments based on various criteria. It provides methods to add, remove, find, and filter fragments based on their classification. 📕 Tutorial. 📘 API.
    ClipperA lightweight component to easily create, delete and handle clipping planes. 📕 Tutorial. 📘 API.
    CommentRepresents a comment in a BCF Topic.
    ComponentComponents are the building blocks of this library. Components are singleton elements that contain specific functionality. For instance, the Clipper Component can create, delete and handle 3D clipping planes. Components must be unique (they can't be instanced more than once per Components instance), and have a static UUID that identifies them uniquely. The can be accessed globally using the Components instance.
    ComponentsThe entry point of the Components library. It can create, delete and access all the components of the library globally, update all the updatable components automatically and dispose all the components, preventing memory leaks.
    ConfigManagerA tool to manage all the configuration from the app centrally.
    CullerRendererA base renderer to determine visibility on screen.
    CullersA component that provides culling functionality for meshes in a 3D scene. 📕 Tutorial. 📘 API.
    DataMapA class that extends the built-in Map class and provides additional events for item set, update, delete, and clear operations.
    DataSetA class that extends the built-in Set class and provides additional functionality. It triggers events when items are added, deleted, or the set is cleared.
    DisposerA tool to safely remove meshes, geometries, materials and other items from memory to prevent memory leaks.
    EventSimple event handler by Jason Kleban. Keep in mind that if you want to remove it later, you might want to declare the callback as an object. If you want to maintain the reference to this, you will need to declare the callback as an arrow function.
    EventManagerSimple class to easily toggle and reset event lists.
    ExploderThe Exploder component is responsible for managing the explosion of 3D model fragments (generally by floor). 📕 Tutorial. 📘 API.
    FirstPersonModeA NavigationMode that allows first person navigation, simulating FPS video games.
    FragmentsManagerComponent to load, delete and manage fragments efficiently. 📕 Tutorial. 📘 API.
    GridsA component that manages grid instances. Each grid is associated with a unique world. 📕 Tutorial. 📘 API.
    HiderA component that hides or isolates fragments within a 3D scene. It extends the base Component class and provides methods to control fragment visibility and isolation. 📕 Tutorial. 📘 API.
    IDSSpecificationRepresents a single specification from the Information Delivery Specification (IDS) standard.
    IDSSpecificationsComponent that manages Information Delivery Specification (IDS) data. It provides functionality for importing, exporting, and manipulating IDS data.
    IfcBasicQueryA query that checks the direct attributes of IFC items.
    IfcFinderComponent to make text queries in the IFC.
    IfcFinderQueryThe base class for all queries used by the IfcFinder.
    IfcFragmentSettingsConfiguration of the IFC-fragment conversion.
    IfcGeometryTilerA component that handles the tiling of IFC geometries for efficient streaming. 📕 Tutorial. 📘 API.
    IfcIsolatorComponent to isolate certain elements from an IFC and export to another IFC. 📕 Tutorial. 📘 API.
    IfcJsonExporterComponent to export all the properties from an IFC to a JS object. 📕 Tutorial. 📘 API.
    IfcLoaderThe IfcLoader component is responsible for loading and processing IFC files. It utilizes the Web-IFC library to handle the IFC data and the Three.js library for 3D rendering. The class provides methods for setting up, loading, and cleaning up IFC files. 📕 Tutorial. 📘 API.
    IfcPropertiesManagerComponent to manage and edit properties and Psets in IFC files.
    IfcPropertiesTilerA component that converts the properties of an IFC file to tiles. It uses the Web-IFC library to read and process the IFC data. 📕 Tutorial. 📘 API.
    IfcPropertyQueryA query that checks the properties in the property sets assigned to IFC items.
    IfcRelationsIndexerIndexer component for IFC entities, facilitating the indexing and retrieval of IFC entity relationships. It is designed to process models properties by indexing their IFC entities' relations based on predefined inverse attributes, and provides methods to query these relations. 📕 Tutorial. 📘 API.
    IfcStreamingSettingsSettings for streaming IFC geometry and assets. Extends IfcFragmentSettings to inherit common settings.
    MeasurementUtilsUtility component for performing measurements on 3D meshes by providing methods for measuring distances between edges and faces. 📕 Tutorial. 📘 API.
    MeshCullerRendererA renderer to hide/show meshes depending on their visibility from the user's point of view.
    MiniMapA class representing a 2D minimap of a 3D world.
    MiniMapsA component that manages multiple MiniMap instances, each associated with a unique world ID. 📕 Tutorial. 📘 API.
    MouseA helper to easily get the real position of the mouse in the Three.js canvas to work with tools like the raycaster, even if it has been transformed through CSS or doesn't occupy the whole screen.
    OrbitModeA NavigationMode that allows 3D navigation and panning like in many 3D and CAD softwares.
    OrthoPerspectiveCameraA flexible camera that uses yomotsu's cameracontrols to control the camera in 2D and 3D. It supports multiple navigation modes, such as 2D floor plan navigation, first person and 3D orbit. This class extends the SimpleCamera class and adds additional functionality for managing different camera projections and navigation modes. 📕 Tutorial. 📘 API.
    PlanModeA NavigationMode that allows to navigate floorplans in 2D, like many BIM tools.
    ProjectionManagerObject to control the CameraProjection of the OrthoPerspectiveCamera.
    PropertiesStreamingSettingsSettings for streaming properties. Extends IfcFragmentSettings to inherit common settings.
    RaycastersA component that manages a raycaster for each world and automatically disposes it when its corresponding world is disposed. 📕 Tutorial. 📘 API.
    ShadowedSceneA scene that supports efficient cast shadows. 📕 Tutorial. 📘 API.
    SimpleCameraA basic camera that uses yomotsu's cameracontrols to control the camera in 2D and 3D. Check out it's API to find out what features it offers.
    SimpleGridAn infinite grid. Created by fyrestar and translated to typescript by dkaraush.
    SimplePlaneEach of the clipping planes created by the clipper.
    SimpleRaycasterA simple raycaster that allows to easily get items from the scene using the mouse and touch events.
    SimpleRendererA basic renderer capable of rendering Objec3Ds.
    SimpleSceneA basic 3D scene to add objects hierarchically, and easily dispose them when you are finished with it.
    SimpleWorldA class representing a simple world in a 3D environment. It extends the Base class and implements the World interface.
    VertexPickerA class that provides functionality for picking vertices in a 3D scene.
    ViewpointRepresents a BCF compliant viewpoint from BuildingSMART.

    The Viewpoint class provides methods for managing and interacting with viewpoints. It includes functionality for setting viewpoint properties, updating the camera, applying color to components, and serializing the viewpoint for export. | @@ -18,6 +18,6 @@

    InterfacesType Aliases​

    Type aliasDescription
    BooleanPropTypesTypes for boolean properties in IFC schema.
    CameraProjectionThe projection system of the camera.
    IfcFinderRuleThe type of rules that can be used in the queries of the IfcFinder.
    IfcRelationsType alias for an array of IfcRelation types from WebIfc.
    InverseAttributesType alias for an array of inverse attribute names.
    NavModeIDThe extensible list of supported navigation modes.
    NumericPropTypesTypes for numeric properties in IFC schema.
    SerializedQueryThe data type used when the queries of the IfcFinder export or import query data to persist it.
    StringPropTypesTypes for string properties in IFC schema.

    Variables​

    -
    VariableDescription
    GeometryTypesA Set of unique numbers representing different types of IFC geometries.
    IfcCategoryMapA map that associates each unique integer identifier (IFC Entity ID) with its corresponding category name. This map is used to map IFC entities to their respective categories for easier identification and processing.
    IfcElementsA map of IFC element types to their corresponding names. The keys are the IFC entity type numbers, and the values are the names of the IFC entities.
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    VariableDescription
    GeometryTypesA Set of unique numbers representing different types of IFC geometries.
    IfcCategoryMapA map that associates each unique integer identifier (IFC Entity ID) with its corresponding category name. This map is used to map IFC entities to their respective categories for easier identification and processing.
    IfcElementsA map of IFC element types to their corresponding names. The keys are the IFC entity type numbers, and the values are the names of the IFC entities.
    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/AttributeListener/index.html b/build/api/@thatopen/components/interfaces/AttributeListener/index.html index cca9dcd3c..b209ef84e 100644 --- a/build/api/@thatopen/components/interfaces/AttributeListener/index.html +++ b/build/api/@thatopen/components/interfaces/AttributeListener/index.html @@ -4,11 +4,11 @@ AttributeListener | That Open docs - - + + -
    Skip to main content

    AttributeListener

    -

    Interface representing a map of attribute listeners. The keys are model UUIDs, and the values are objects with express IDs as keys, and objects with attribute names as keys, and Event objects as values.

    +
    Skip to main content

    AttributeListener

    +

    Interface representing a map of attribute listeners. The keys are model UUIDs, and the values are objects with express IDs as keys, and objects with attribute names as keys, and Event objects as values.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/BCFTopicsConfig/index.html b/build/api/@thatopen/components/interfaces/BCFTopicsConfig/index.html index 27c981f14..55b39204f 100644 --- a/build/api/@thatopen/components/interfaces/BCFTopicsConfig/index.html +++ b/build/api/@thatopen/components/interfaces/BCFTopicsConfig/index.html @@ -4,11 +4,11 @@ BCFTopicsConfig | That Open docs - - + + -
    Skip to main content

    BCFTopicsConfig

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The BCF version used during export.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/BCFViewpoint/index.html b/build/api/@thatopen/components/interfaces/BCFViewpoint/index.html index 930eb540f..d2408c037 100644 --- a/build/api/@thatopen/components/interfaces/BCFViewpoint/index.html +++ b/build/api/@thatopen/components/interfaces/BCFViewpoint/index.html @@ -4,11 +4,11 @@ BCFViewpoint | That Open docs - - + + -
    Skip to main content
    +
    Skip to main content
    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/CameraControllable/index.html b/build/api/@thatopen/components/interfaces/CameraControllable/index.html index a13a679b4..89e0ee28b 100644 --- a/build/api/@thatopen/components/interfaces/CameraControllable/index.html +++ b/build/api/@thatopen/components/interfaces/CameraControllable/index.html @@ -4,11 +4,11 @@ CameraControllable | That Open docs - - + + -
    Skip to main content

    CameraControllable

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +This instance is used to manipulate the camera.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/ChangeMap/index.html b/build/api/@thatopen/components/interfaces/ChangeMap/index.html index 17a427b62..d1a64cf54 100644 --- a/build/api/@thatopen/components/interfaces/ChangeMap/index.html +++ b/build/api/@thatopen/components/interfaces/ChangeMap/index.html @@ -4,11 +4,11 @@ ChangeMap | That Open docs - - + + -
    Skip to main content

    ChangeMap

    -

    Interface representing a map of changed entities in a model. The keys are model UUIDs, and the values are sets of express IDs of changed entities.

    +
    Skip to main content

    ChangeMap

    +

    Interface representing a map of changed entities in a model. The keys are model UUIDs, and the values are sets of express IDs of changed entities.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/Classification/index.html b/build/api/@thatopen/components/interfaces/Classification/index.html index 0d11bb15f..94e723567 100644 --- a/build/api/@thatopen/components/interfaces/Classification/index.html +++ b/build/api/@thatopen/components/interfaces/Classification/index.html @@ -4,13 +4,13 @@ Classification | That Open docs - - + + -
    Skip to main content

    Classification

    +

    Classification

    Interface representing a classification system. The classification is organized by system and class name, and each class contains a map of fragment IDs with extra information.

    Indexable​

    -

    [system: string]: object

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    [system: string]: object

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/Configurable/index.html b/build/api/@thatopen/components/interfaces/Configurable/index.html index 731c729e4..79becb1d8 100644 --- a/build/api/@thatopen/components/interfaces/Configurable/index.html +++ b/build/api/@thatopen/components/interfaces/Configurable/index.html @@ -4,11 +4,11 @@ Configurable\<T, U\> | That Open docs - - + + -
    Skip to main content

    Configurable<T, U>

    +

    Configurable<T, U>

    Whether this component supports to be configured.

    Type parameters​

    Type parameter
    T
    U
    @@ -39,6 +39,6 @@

    setup()Parameters​

    ParameterType
    config?Partial<U>

    Returns​

    -

    void | Promise<void>

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void | Promise<void>

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/Createable/index.html b/build/api/@thatopen/components/interfaces/Createable/index.html index be4b76ec9..7b907bc7b 100644 --- a/build/api/@thatopen/components/interfaces/Createable/index.html +++ b/build/api/@thatopen/components/interfaces/Createable/index.html @@ -4,11 +4,11 @@ Createable | That Open docs - - + + -
    Skip to main content

    Createable

    +

    Createable

    Whether this component supports create and destroy operations. This generally applies for components that work with instances, such as clipping planes or dimensions.

    Properties​

    cancelCreation()?​

    @@ -51,6 +51,6 @@

    endCreation()?Parameters​

    ParameterType
    dataany

    Returns​

    -

    void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/Disposable/index.html b/build/api/@thatopen/components/interfaces/Disposable/index.html index 614e6d1a8..32fadddbc 100644 --- a/build/api/@thatopen/components/interfaces/Disposable/index.html +++ b/build/api/@thatopen/components/interfaces/Disposable/index.html @@ -4,11 +4,11 @@ Disposable | That Open docs - - + + -
    Skip to main content

    Disposable

    +

    Disposable

    Whether this component has to be manually destroyed once you are done with it to prevent memory leaks. This also ensures that the DOM events created by that component will be cleaned up.

    Extended by​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Fired after the tool has been disposed.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/EntitiesRelatedEvent/index.html b/build/api/@thatopen/components/interfaces/EntitiesRelatedEvent/index.html index 4a9f46388..109f1fbee 100644 --- a/build/api/@thatopen/components/interfaces/EntitiesRelatedEvent/index.html +++ b/build/api/@thatopen/components/interfaces/EntitiesRelatedEvent/index.html @@ -4,11 +4,11 @@ EntitiesRelatedEvent | That Open docs - - + + -
    Skip to main content

    EntitiesRelatedEvent

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The IDs of the entities that are relating.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/Eventable/index.html b/build/api/@thatopen/components/interfaces/Eventable/index.html index 3c047166d..4237011db 100644 --- a/build/api/@thatopen/components/interfaces/Eventable/index.html +++ b/build/api/@thatopen/components/interfaces/Eventable/index.html @@ -4,17 +4,17 @@ Eventable | That Open docs - - + + -
    Skip to main content

    Eventable

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The object in charge of managing all the events.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/Hideable/index.html b/build/api/@thatopen/components/interfaces/Hideable/index.html index 35dadc198..5e1445802 100644 --- a/build/api/@thatopen/components/interfaces/Hideable/index.html +++ b/build/api/@thatopen/components/interfaces/Hideable/index.html @@ -4,11 +4,11 @@ Hideable | That Open docs - - + + -
    Skip to main content

    Hideable

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +Three.js scene.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/IDSCheckResult/index.html b/build/api/@thatopen/components/interfaces/IDSCheckResult/index.html index 8f3b28f70..f25097c87 100644 --- a/build/api/@thatopen/components/interfaces/IDSCheckResult/index.html +++ b/build/api/@thatopen/components/interfaces/IDSCheckResult/index.html @@ -4,11 +4,11 @@ IDSCheckResult | That Open docs - - + + -
    Skip to main content

    IDSCheckResult

    -

    Represents the result of a check performed by an IDSFacet test.

    +
    Skip to main content

    IDSCheckResult

    +

    Represents the result of a check performed by an IDSFacet test.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/IfcCategoryRule/index.html b/build/api/@thatopen/components/interfaces/IfcCategoryRule/index.html index 6d1beb895..a6626cecf 100644 --- a/build/api/@thatopen/components/interfaces/IfcCategoryRule/index.html +++ b/build/api/@thatopen/components/interfaces/IfcCategoryRule/index.html @@ -4,11 +4,11 @@ IfcCategoryRule | That Open docs - - + + -
    Skip to main content

    IfcCategoryRule

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The category value. It's a regular expression, so you can make complex queries and use ".*" to match all categories.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/IfcOperatorRule/index.html b/build/api/@thatopen/components/interfaces/IfcOperatorRule/index.html index 7ec9c0981..e755030ed 100644 --- a/build/api/@thatopen/components/interfaces/IfcOperatorRule/index.html +++ b/build/api/@thatopen/components/interfaces/IfcOperatorRule/index.html @@ -4,11 +4,11 @@ IfcOperatorRule | That Open docs - - + + -
    Skip to main content

    IfcOperatorRule

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The value of the property.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/IfcPropertyRule/index.html b/build/api/@thatopen/components/interfaces/IfcPropertyRule/index.html index df0673292..9c0b5d9cd 100644 --- a/build/api/@thatopen/components/interfaces/IfcPropertyRule/index.html +++ b/build/api/@thatopen/components/interfaces/IfcPropertyRule/index.html @@ -4,11 +4,11 @@ IfcPropertyRule | That Open docs - - + + -
    Skip to main content

    IfcPropertyRule

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The value of the property. It's a regular expression, so you can make complex queries and use ".*" to match all values.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/MeasureEdge/index.html b/build/api/@thatopen/components/interfaces/MeasureEdge/index.html index 14ad0b88c..11907cf21 100644 --- a/build/api/@thatopen/components/interfaces/MeasureEdge/index.html +++ b/build/api/@thatopen/components/interfaces/MeasureEdge/index.html @@ -4,11 +4,11 @@ MeasureEdge | That Open docs - - + + -
    Skip to main content

    MeasureEdge

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The two points that define the edge.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/MiniMapConfig/index.html b/build/api/@thatopen/components/interfaces/MiniMapConfig/index.html index 9fe1bc7f2..585e28d4c 100644 --- a/build/api/@thatopen/components/interfaces/MiniMapConfig/index.html +++ b/build/api/@thatopen/components/interfaces/MiniMapConfig/index.html @@ -4,11 +4,11 @@ MiniMapConfig | That Open docs - - + + -
    Skip to main content

    MiniMapConfig

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The zoom of the camera in the minimap.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/NavigationMode/index.html b/build/api/@thatopen/components/interfaces/NavigationMode/index.html index a64f50689..db0ba041f 100644 --- a/build/api/@thatopen/components/interfaces/NavigationMode/index.html +++ b/build/api/@thatopen/components/interfaces/NavigationMode/index.html @@ -4,11 +4,11 @@ NavigationMode | That Open docs - - + + -
    Skip to main content

    NavigationMode

    +

    NavigationMode

    An object that determines the behavior of the camera controls and the user input (e.g. 2D floor plan mode, first person mode, etc).

    Properties​

    enabled​

    @@ -33,6 +33,6 @@

    set()Parameters​

    ParameterTypeDescription
    activebooleanwhether to enable or disable this mode.
    options?anyany additional data required to enable or disable it.

    Returns​

    -

    void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/Progress/index.html b/build/api/@thatopen/components/interfaces/Progress/index.html index 8ef60b642..8f5d1a4df 100644 --- a/build/api/@thatopen/components/interfaces/Progress/index.html +++ b/build/api/@thatopen/components/interfaces/Progress/index.html @@ -4,11 +4,11 @@ Progress | That Open docs - - + + -
    Skip to main content

    Progress

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The total amount of things to be done by the process.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/Resizeable/index.html b/build/api/@thatopen/components/interfaces/Resizeable/index.html index 35cece31e..f1aa91496 100644 --- a/build/api/@thatopen/components/interfaces/Resizeable/index.html +++ b/build/api/@thatopen/components/interfaces/Resizeable/index.html @@ -4,11 +4,11 @@ Resizeable | That Open docs - - + + -
    Skip to main content

    Resizeable

    +

    Resizeable

    Whether this component can be resized. The meaning of this can vary depending on the component: resizing a Renderer component could mean changing its resolution, whereas resizing a Mesh would change its scale.

    Properties​

    getSize()​

    @@ -37,6 +37,6 @@

    resize()Parameters​

    ParameterType
    size?Vector2

    Returns​

    -

    void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/ShadowedSceneConfig/index.html b/build/api/@thatopen/components/interfaces/ShadowedSceneConfig/index.html index 2b902f145..f8619c606 100644 --- a/build/api/@thatopen/components/interfaces/ShadowedSceneConfig/index.html +++ b/build/api/@thatopen/components/interfaces/ShadowedSceneConfig/index.html @@ -4,15 +4,15 @@ ShadowedSceneConfig | That Open docs - - + + -
    Skip to main content

    ShadowedSceneConfig

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/SimpleGridConfig/index.html b/build/api/@thatopen/components/interfaces/SimpleGridConfig/index.html index b182dabfe..611c9adfb 100644 --- a/build/api/@thatopen/components/interfaces/SimpleGridConfig/index.html +++ b/build/api/@thatopen/components/interfaces/SimpleGridConfig/index.html @@ -4,11 +4,11 @@ SimpleGridConfig | That Open docs - - + + -
    Skip to main content

    SimpleGridConfig

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Whether the grid is visible or not.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/SimpleSceneConfig/index.html b/build/api/@thatopen/components/interfaces/SimpleSceneConfig/index.html index 12681c221..030c7c264 100644 --- a/build/api/@thatopen/components/interfaces/SimpleSceneConfig/index.html +++ b/build/api/@thatopen/components/interfaces/SimpleSceneConfig/index.html @@ -4,15 +4,15 @@ SimpleSceneConfig | That Open docs - - + + -
    Skip to main content

    SimpleSceneConfig

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/StreamedAsset/index.html b/build/api/@thatopen/components/interfaces/StreamedAsset/index.html index 372e88198..f08f3479c 100644 --- a/build/api/@thatopen/components/interfaces/StreamedAsset/index.html +++ b/build/api/@thatopen/components/interfaces/StreamedAsset/index.html @@ -4,11 +4,11 @@ StreamedAsset | That Open docs - - + + -
    Skip to main content

    StreamedAsset

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The unique identifier of the asset.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/StreamedGeometries/index.html b/build/api/@thatopen/components/interfaces/StreamedGeometries/index.html index 91892f455..d2ef77689 100644 --- a/build/api/@thatopen/components/interfaces/StreamedGeometries/index.html +++ b/build/api/@thatopen/components/interfaces/StreamedGeometries/index.html @@ -4,11 +4,11 @@ StreamedGeometries | That Open docs - - + + -
    Skip to main content

    StreamedGeometries

    -

    A dictionary of geometries streamed from a server. Each geometry is identified by a unique number (id), and contains information about its bounding box, whether it has holes, and an optional file path for the geometry data.

    +
    Skip to main content

    StreamedGeometries

    +

    A dictionary of geometries streamed from a server. Each geometry is identified by a unique number (id), and contains information about its bounding box, whether it has holes, and an optional file path for the geometry data.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/Updateable/index.html b/build/api/@thatopen/components/interfaces/Updateable/index.html index 1e7d2f3ca..6db8d8ec4 100644 --- a/build/api/@thatopen/components/interfaces/Updateable/index.html +++ b/build/api/@thatopen/components/interfaces/Updateable/index.html @@ -4,11 +4,11 @@ Updateable | That Open docs - - + + -
    Skip to main content

    Updateable

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/VertexPickerConfig/index.html b/build/api/@thatopen/components/interfaces/VertexPickerConfig/index.html index 0d25a8ebc..fabebf77b 100644 --- a/build/api/@thatopen/components/interfaces/VertexPickerConfig/index.html +++ b/build/api/@thatopen/components/interfaces/VertexPickerConfig/index.html @@ -4,11 +4,11 @@ VertexPickerConfig | That Open docs - - + + -
    Skip to main content

    VertexPickerConfig

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The maximum distance for snapping to a vertex.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/interfaces/World/index.html b/build/api/@thatopen/components/interfaces/World/index.html index 08a2e35c6..28c55cdd4 100644 --- a/build/api/@thatopen/components/interfaces/World/index.html +++ b/build/api/@thatopen/components/interfaces/World/index.html @@ -4,11 +4,11 @@ World | That Open docs - - + + -
    Skip to main content

    World

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Updateable . update

    \ No newline at end of file diff --git a/build/api/@thatopen/components/type-aliases/BooleanPropTypes/index.html b/build/api/@thatopen/components/type-aliases/BooleanPropTypes/index.html index 09a4f711d..cf224af17 100644 --- a/build/api/@thatopen/components/type-aliases/BooleanPropTypes/index.html +++ b/build/api/@thatopen/components/type-aliases/BooleanPropTypes/index.html @@ -4,14 +4,14 @@ BooleanPropTypes | That Open docs - - + + -
    Skip to main content

    BooleanPropTypes

    +

    BooleanPropTypes

    BooleanPropTypes: "IfcBoolean" | "IfcLogical"

    -

    Types for boolean properties in IFC schema.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Types for boolean properties in IFC schema.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/type-aliases/CameraProjection/index.html b/build/api/@thatopen/components/type-aliases/CameraProjection/index.html index 74353dda7..76049c309 100644 --- a/build/api/@thatopen/components/type-aliases/CameraProjection/index.html +++ b/build/api/@thatopen/components/type-aliases/CameraProjection/index.html @@ -4,14 +4,14 @@ CameraProjection | That Open docs - - + + -
    Skip to main content

    CameraProjection

    +

    CameraProjection

    CameraProjection: "Perspective" | "Orthographic"

    -

    The projection system of the camera.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The projection system of the camera.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/type-aliases/IfcFinderRule/index.html b/build/api/@thatopen/components/type-aliases/IfcFinderRule/index.html index d3bbd90ec..ccc1aa7cd 100644 --- a/build/api/@thatopen/components/type-aliases/IfcFinderRule/index.html +++ b/build/api/@thatopen/components/type-aliases/IfcFinderRule/index.html @@ -4,14 +4,14 @@ IfcFinderRule | That Open docs - - + + -
    Skip to main content

    IfcFinderRule

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The type of rules that can be used in the queries of the IfcFinder.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/type-aliases/IfcRelations/index.html b/build/api/@thatopen/components/type-aliases/IfcRelations/index.html index fc4d33f6b..6ce48cbc3 100644 --- a/build/api/@thatopen/components/type-aliases/IfcRelations/index.html +++ b/build/api/@thatopen/components/type-aliases/IfcRelations/index.html @@ -4,14 +4,14 @@ IfcRelations | That Open docs - - + + -
    Skip to main content

    IfcRelations

    +

    IfcRelations

    IfcRelations: [typeof WEBIFC.IFCRELAGGREGATES, typeof WEBIFC.IFCRELASSOCIATESMATERIAL, typeof WEBIFC.IFCRELASSOCIATESCLASSIFICATION, typeof WEBIFC.IFCRELASSIGNSTOGROUP, typeof WEBIFC.IFCRELDEFINESBYPROPERTIES, typeof WEBIFC.IFCRELDEFINESBYTYPE, typeof WEBIFC.IFCRELDEFINESBYTEMPLATE, typeof WEBIFC.IFCRELCONTAINEDINSPATIALSTRUCTURE, typeof WEBIFC.IFCRELFLOWCONTROLELEMENTS, typeof WEBIFC.IFCRELCONNECTSELEMENTS, typeof WEBIFC.IFCRELASSIGNSTOPRODUCT, typeof WEBIFC.IFCRELDECLARES, typeof WEBIFC.IFCRELASSIGNSTOCONTROL, typeof WEBIFC.IFCRELNESTS, typeof WEBIFC.IFCRELASSOCIATESDOCUMENT]

    -

    Type alias for an array of IfcRelation types from WebIfc.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Type alias for an array of IfcRelation types from WebIfc.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/type-aliases/InverseAttributes/index.html b/build/api/@thatopen/components/type-aliases/InverseAttributes/index.html index e60f1b43f..1b6c07fe9 100644 --- a/build/api/@thatopen/components/type-aliases/InverseAttributes/index.html +++ b/build/api/@thatopen/components/type-aliases/InverseAttributes/index.html @@ -4,14 +4,14 @@ InverseAttributes | That Open docs - - + + -
    Skip to main content

    InverseAttributes

    +

    InverseAttributes

    InverseAttributes: ["IsDecomposedBy", "Decomposes", "AssociatedTo", "HasAssociations", "ClassificationForObjects", "IsGroupedBy", "HasAssignments", "IsDefinedBy", "DefinesOcurrence", "IsTypedBy", "Types", "Defines", "ContainedInStructure", "ContainsElements", "HasControlElements", "AssignedToFlowElement", "ConnectedTo", "ConnectedFrom", "ReferencedBy", "Declares", "HasContext", "Controls", "IsNestedBy", "Nests", "DocumentRefForObjects"]

    -

    Type alias for an array of inverse attribute names.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Type alias for an array of inverse attribute names.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/type-aliases/NavModeID/index.html b/build/api/@thatopen/components/type-aliases/NavModeID/index.html index 5c832a2e3..33afe07ff 100644 --- a/build/api/@thatopen/components/type-aliases/NavModeID/index.html +++ b/build/api/@thatopen/components/type-aliases/NavModeID/index.html @@ -4,14 +4,14 @@ NavModeID | That Open docs - - + + -
    Skip to main content

    NavModeID

    +

    NavModeID

    NavModeID: "Orbit" | "FirstPerson" | "Plan"

    -

    The extensible list of supported navigation modes.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The extensible list of supported navigation modes.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/type-aliases/NumericPropTypes/index.html b/build/api/@thatopen/components/type-aliases/NumericPropTypes/index.html index 6e70be135..f4e663103 100644 --- a/build/api/@thatopen/components/type-aliases/NumericPropTypes/index.html +++ b/build/api/@thatopen/components/type-aliases/NumericPropTypes/index.html @@ -4,14 +4,14 @@ NumericPropTypes | That Open docs - - + + -
    Skip to main content

    NumericPropTypes

    +

    NumericPropTypes

    NumericPropTypes: "IfcInteger" | "IfcReal"

    -

    Types for numeric properties in IFC schema.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Types for numeric properties in IFC schema.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/type-aliases/SerializedQuery/index.html b/build/api/@thatopen/components/type-aliases/SerializedQuery/index.html index 130c1a7af..2dc1b0bb3 100644 --- a/build/api/@thatopen/components/type-aliases/SerializedQuery/index.html +++ b/build/api/@thatopen/components/type-aliases/SerializedQuery/index.html @@ -4,11 +4,11 @@ SerializedQuery | That Open docs - - + + -
    Skip to main content

    SerializedQuery

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The type of query.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/type-aliases/StringPropTypes/index.html b/build/api/@thatopen/components/type-aliases/StringPropTypes/index.html index dc1ad0988..288a0ace6 100644 --- a/build/api/@thatopen/components/type-aliases/StringPropTypes/index.html +++ b/build/api/@thatopen/components/type-aliases/StringPropTypes/index.html @@ -4,14 +4,14 @@ StringPropTypes | That Open docs - - + + -
    Skip to main content

    StringPropTypes

    +

    StringPropTypes

    StringPropTypes: "IfcText" | "IfcLabel" | "IfcIdentifier"

    -

    Types for string properties in IFC schema.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Types for string properties in IFC schema.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/variables/GeometryTypes/index.html b/build/api/@thatopen/components/variables/GeometryTypes/index.html index 771eb4849..2f648d1b8 100644 --- a/build/api/@thatopen/components/variables/GeometryTypes/index.html +++ b/build/api/@thatopen/components/variables/GeometryTypes/index.html @@ -4,14 +4,14 @@ GeometryTypes | That Open docs - - + + -
    Skip to main content

    GeometryTypes

    +

    GeometryTypes

    const GeometryTypes: Set<number>

    -

    A Set of unique numbers representing different types of IFC geometries.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    A Set of unique numbers representing different types of IFC geometries.

    \ No newline at end of file diff --git a/build/api/@thatopen/components/variables/IfcCategoryMap/index.html b/build/api/@thatopen/components/variables/IfcCategoryMap/index.html index 389640c18..4b72eb6f2 100644 --- a/build/api/@thatopen/components/variables/IfcCategoryMap/index.html +++ b/build/api/@thatopen/components/variables/IfcCategoryMap/index.html @@ -4,16 +4,16 @@ IfcCategoryMap | That Open docs - - + + -
    Skip to main content

    IfcCategoryMap

    +

    IfcCategoryMap

    const IfcCategoryMap: object

    A map that associates each unique integer identifier (IFC Entity ID) with its corresponding category name. This map is used to map IFC entities to their respective categories for easier identification and processing.

    Index signature​

    -

    [key: number]: string

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    [key: number]: string

    \ No newline at end of file diff --git a/build/api/@thatopen/components/variables/IfcElements/index.html b/build/api/@thatopen/components/variables/IfcElements/index.html index 521473698..fff72be80 100644 --- a/build/api/@thatopen/components/variables/IfcElements/index.html +++ b/build/api/@thatopen/components/variables/IfcElements/index.html @@ -4,11 +4,11 @@ IfcElements | That Open docs - - + + -
    Skip to main content

    IfcElements

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    [key: number]: string

    \ No newline at end of file diff --git a/build/api/@thatopen/fragments/classes/Alignment/index.html b/build/api/@thatopen/fragments/classes/Alignment/index.html deleted file mode 100644 index ab6d1a15c..000000000 --- a/build/api/@thatopen/fragments/classes/Alignment/index.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - -Alignment | That Open docs - - - - -
    Skip to main content

    Alignment

    -

    Represents an alignment in a civil engineering project. An alignment consists of vertical, horizontal, and absolute civil curves.

    -

    Properties​

    -

    absolute​

    -
    -

    absolute: CivilCurve[] = []

    -
    -

    Absolute civil curves in the alignment.

    -
    -

    horizontal​

    -
    -

    horizontal: CivilCurve[] = []

    -
    -

    Horizontal civil curves in the alignment.

    -
    -

    initialKP​

    -
    -

    initialKP: number = 0

    -
    -

    Initial KP (Kilometer Point) of the alignment.

    -
    -

    vertical​

    -
    -

    vertical: CivilCurve[] = []

    -
    -

    Vertical civil curves in the alignment.

    -

    Methods​

    -

    getCurveAt()​

    -
    -

    getCurveAt(percentage, type): object

    -
    -

    Returns the curve and the percentage at the specified percentage along the specified alignment type. -If the percentage is out of range, it will be clamped to the nearest valid value (0 or 1). -If the point cannot be computed, an error will be thrown.

    -

    Parameters​

    -
    ParameterTypeDescription
    percentagenumberThe percentage along the alignment type (between zero and one).
    typeAlignmentTypeThe type of alignment (vertical, horizontal, or absolute).
    -

    Returns​

    -

    object

    -

    An object containing the curve and the percentage along the curve.

    -
    curve​
    -
    -

    curve: CivilCurve

    -
    -
    percentage​
    -
    -

    percentage: number

    -
    -

    Throws​

    -

    Will throw an error if the percentage is out of range or if the point cannot be computed.

    -
    -

    getLength()​

    -
    -

    getLength(type): number

    -
    -

    Returns the total length of the specified alignment type.

    -

    Parameters​

    -
    ParameterTypeDescription
    typeAlignmentTypeThe type of alignment (vertical, horizontal, or absolute).
    -

    Returns​

    -

    number

    -

    The total length of the specified alignment type.

    -
    -

    getPointAt()​

    -
    -

    getPointAt(percentage, type): Vector3

    -
    -

    Returns the point at the specified percentage along the specified alignment type.

    -

    Parameters​

    -
    ParameterTypeDescription
    percentagenumberThe percentage along the alignment type (between zero and one).
    typeAlignmentTypeThe type of alignment (vertical, horizontal, or absolute).
    -

    Returns​

    -

    Vector3

    -

    The point at the specified percentage along the specified alignment type.

    -

    Throws​

    -

    Will throw an error if the percentage is out of range or if the point cannot be computed.

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/classes/CivilCurve/index.html b/build/api/@thatopen/fragments/classes/CivilCurve/index.html deleted file mode 100644 index 0ab7a194e..000000000 --- a/build/api/@thatopen/fragments/classes/CivilCurve/index.html +++ /dev/null @@ -1,147 +0,0 @@ - - - - - -CivilCurve | That Open docs - - - - -
    Skip to main content

    CivilCurve

    -

    Represents an alignment curve of a civil engineering model.

    -

    Constructors​

    -

    new CivilCurve()​

    -
    -

    new CivilCurve(index, mesh, data, alignment): CivilCurve

    -
    -

    Constructs a new instance of CivilCurve.

    -

    Parameters​

    -
    ParameterTypeDescription
    indexnumberThe index of the curve.
    meshCurveMesh<BufferGeometry<NormalBufferAttributes>, Material | Material[]>The mesh associated with the curve.
    dataobjectAdditional data associated with the curve.
    alignmentAlignmentThe alignment of the curve.
    -

    Returns​

    -

    CivilCurve

    -

    Properties​

    -

    alignment​

    -
    -

    alignment: Alignment

    -
    -

    The alignment to which this curve belongs.

    -
    -

    data​

    -
    -

    data: object

    -
    -

    Additional data associated with the curve.

    -

    Index signature​

    -

    [name: string]: any

    -
    -

    index​

    -
    -

    index: number

    -
    -

    The index of the curve. An alignment is a sequence of ordered curves, and this is the index of this curve in that sequence.

    -
    -

    mesh​

    -
    -

    mesh: CurveMesh<BufferGeometry<NormalBufferAttributes>, Material | Material[]>

    -
    -

    The THREE.js mesh containing the vertices of the curve.

    -

    Methods​

    -

    getLength()​

    -
    -

    getLength(): number

    -
    -

    Calculates the total length of the curve by summing up the lengths of all segments.

    -

    Returns​

    -

    number

    -

    The total length of the curve.

    -
    -

    getPercentageAt()​

    -
    -

    getPercentageAt(point, tolerance): null | number

    -
    -

    Calculates the percentage of the curve that corresponds to the given point.

    -

    Parameters​

    -
    ParameterTypeDefault valueDescription
    pointVector3undefinedThe point for which to calculate the percentage.
    tolerancenumber0.01The tolerance for determining if a point is on the curve. Default is 0.01.
    -

    Returns​

    -

    null | number

    -

    The percentage of the curve that corresponds to the given point, or null if the point is not contained in this curve.

    -

    Remarks​

    -

    The method works by iterating over each segment of the curve and checking if the given point is within the tolerance of the segment. -If a point is found, it calculates the percentage of the curve that corresponds to the point. -If no point is found, it returns null.

    -
    -

    getPointAt()​

    -
    -

    getPointAt(percentage): Vector3

    -
    -

    Calculates a point on the curve based on the given percentage.

    -

    Parameters​

    -
    ParameterTypeDescription
    percentagenumberThe percentage along the curve (between zero and one).
    -

    Returns​

    -

    Vector3

    -

    A new THREE.Vector3 representing the point on the curve.

    -

    Remarks​

    -

    The method works by first finding the segment that corresponds to the given percentage. -It then normalizes the direction of the segment, multiplies it by the distance to the start of the segment, -and adds it to the start point of the segment.

    -

    Throws​

    -

    Will throw an error if the percentage is outside the range [0, 1].

    -
    -

    getSegment()​

    -
    -

    getSegment(index): object

    -
    -

    Retrieves a segment of the curve based on the given index.

    -

    Parameters​

    -
    ParameterTypeDescription
    indexnumberThe index of the segment.
    -

    Returns​

    -

    object

    -

    An object containing the start and end points of the segment.

    -
    endPoint​
    -
    -

    endPoint: Vector3

    -
    -
    startPoint​
    -
    -

    startPoint: Vector3

    -
    -

    Remarks​

    -

    The method calculates the start and end points of the segment based on the given index. -It uses the index array and position attribute of the curve's geometry to determine the start and end points.

    -

    Throws​

    -

    Will throw an error if the index is out of range.

    -
    -

    getSegmentAt()​

    -
    -

    getSegmentAt(percentage): object

    -
    -

    Calculates a segment of the curve based on the given percentage.

    -

    Parameters​

    -
    ParameterTypeDescription
    percentagenumberThe percentage along the curve (between zero and one).
    -

    Returns​

    -

    object

    -

    An object containing the distance to the start of the segment, the index of the segment, and the start and end points of the segment.

    -
    distanceToStart​
    -
    -

    distanceToStart: number

    -
    -
    endPoint​
    -
    -

    endPoint: Vector3

    -
    -
    index​
    -
    -

    index: number

    -
    -
    startPoint​
    -
    -

    startPoint: Vector3

    -
    -

    Remarks​

    -

    The method works by first finding the segment that corresponds to the given percentage. -It then returns an object containing the distance to the start of the segment, the index of the segment, and the start and end points of the segment.

    -

    Throws​

    -

    Will throw an error if the percentage is outside the range [0, 1].

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/classes/CurveMesh/index.html b/build/api/@thatopen/fragments/classes/CurveMesh/index.html deleted file mode 100644 index 2aacae9a2..000000000 --- a/build/api/@thatopen/fragments/classes/CurveMesh/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - -CurveMesh\<TGeometry, TMaterial\> | That Open docs - - - - -
    Skip to main content

    CurveMesh<TGeometry, TMaterial>

    -

    Represents an alignment 3D curve mesh with additional civil engineering properties. Extends THREE.LineSegments to provide geometry and material for the curve.

    -

    Extends​

    -
      -
    • LineSegments<TGeometry, TMaterial>
      • -
    -

    Type parameters​

    -
    Type parameterValueDescription
    TGeometry extends THREE.BufferGeometryTHREE.BufferGeometryThe type of geometry for the curve mesh. Default is THREE.BufferGeometry.
    TMaterial extends THREE.Material | THREE.Material[]THREE.Material | THREE.Material[]The type of material(s) for the curve mesh. Default is THREE.Material or THREE.Material[].
    -

    Constructors​

    -

    new CurveMesh()​

    -
    -

    new CurveMesh<TGeometry, TMaterial>(index, data, alignment, geometry?, material?): CurveMesh<TGeometry, TMaterial>

    -
    -

    Constructs a new instance of CurveMesh.

    -

    Parameters​

    -
    ParameterTypeDescription
    indexnumberThe index of the curve mesh.
    dataobjectThe data associated with the curve mesh.
    alignmentAlignmentThe alignment of the curve mesh.
    geometry?TGeometryThe geometry for the curve mesh. Optional.
    material?TMaterialThe material(s) for the curve mesh. Optional.
    -

    Returns​

    -

    CurveMesh<TGeometry, TMaterial>

    -

    Overrides​

    -

    THREE.LineSegments<TGeometry, TMaterial>.constructor

    -

    Properties​

    -

    curve​

    -
    -

    curve: CivilCurve

    -
    -

    The civil curve associated with this curve mesh.

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/classes/Fragment/index.html b/build/api/@thatopen/fragments/classes/Fragment/index.html deleted file mode 100644 index c5f1271f2..000000000 --- a/build/api/@thatopen/fragments/classes/Fragment/index.html +++ /dev/null @@ -1,290 +0,0 @@ - - - - - -Fragment | That Open docs - - - - -
    Skip to main content

    Fragment

    -

    Class representing a fragment of a 3D model. Fragments are just a simple wrapper around THREE.InstancedMesh. Each fragment can contain Items (identified by ItemID) which are mapped to one or many instances inside this THREE.InstancedMesh. Fragments also implement features like instance buffer resizing and hiding out of the box.

    -

    Constructors​

    -

    new Fragment()​

    -
    -

    new Fragment(geometry, material, count): Fragment

    -
    -

    Constructs a new Fragment.

    -

    Parameters​

    -
    ParameterTypeDescription
    geometryBufferGeometry<NormalBufferAttributes>The geometry of the fragment.
    materialMaterial | Material[]The material(s) of the fragment.
    countnumberThe initial number of instances in the fragment.
    -

    Returns​

    -

    Fragment

    -

    Properties​

    -

    capacity​

    -
    -

    capacity: number = 0

    -
    -

    The amount of instances that this fragment can contain.

    -
    -

    capacityOffset​

    -
    -

    capacityOffset: number = 10

    -
    -

    The amount by which to increase the capacity when necessary.

    -
    -

    group?​

    -
    -

    optional group: FragmentsGroup

    -
    -

    The group of fragments to which this fragment belongs.

    -
    -

    hiddenItems​

    -
    -

    hiddenItems: Set<number>

    -
    -

    A set of item IDs of instances that are currently hidden.

    -
    -

    id​

    -
    -

    id: string

    -
    -

    The unique identifier of this fragment.

    -
    -

    ids​

    -
    -

    ids: Set<number>

    -
    -

    A set of unique item IDs associated with this fragment.

    -
    -

    instanceToItem​

    -
    -

    instanceToItem: Map<number, number>

    -
    -

    A map of instance IDs to item IDs.

    -
    -

    itemToInstances​

    -
    -

    itemToInstances: Map<number, Set<number>>

    -
    -

    A map of item IDs to sets of instance IDs.

    -
    -

    mesh​

    -
    -

    mesh: FragmentMesh

    -
    -

    The mesh associated with this fragment.

    -

    Accessors​

    -

    uniqueVertices​

    -
    -

    get uniqueVertices(): Vector3[]

    -
    -

    A getter property that returns the unique vertices of the fragment's geometry. -The unique vertices are determined by comparing the vertex positions.

    -

    Returns​

    -

    Vector3[]

    -

    An array of unique vertices.

    -

    Methods​

    -

    add()​

    -
    -

    add(items): void

    -
    -

    Adds items to the fragment.

    -

    Parameters​

    -
    ParameterTypeDescription
    itemsItem[]

    An array of items to be added. Each item contains an ID, an array of transform matrices, and an optional array of colors.

    If the necessary capacity to accommodate the new items exceeds the current capacity,

    a new mesh with a larger capacity is created, and the old mesh is disposed.

    The transform matrices and colors of the items are added to the respective attributes of the mesh.

    The instance IDs, item IDs, and associations between instance IDs and item IDs are updated accordingly.

    The instance color and matrix attributes of the mesh are updated.

    -

    Returns​

    -

    void

    -
    -

    applyTransform()​

    -
    -

    applyTransform(itemIDs, transform): void

    -
    -

    Applies a transformation matrix to instances associated with given item IDs.

    -

    Parameters​

    -
    ParameterTypeDescription
    itemIDsIterable<number>An iterable of item IDs to be affected.
    transformMatrix4The transformation matrix to be applied.
    -

    Returns​

    -

    void

    -

    Remarks​

    -

    This method applies the provided transformation matrix to the instances associated with the given item IDs.

    -

    Example​

    -
    fragment.applyTransform([1, 2, 3], new THREE.Matrix4().makeTranslation(1, 0, 0)); // Applies a translation of (1, 0, 0) to instances with IDs 1, 2, and 3.
    -
    -

    clear()​

    -
    -

    clear(): void

    -
    -

    Clears the fragment by resetting the hidden items, item IDs, instance-to-item associations, -instance-to-item map, and the count of instances in the fragment's mesh.

    -

    Returns​

    -

    void

    -

    Remarks​

    -

    This method is used to reset the fragment to its initial state.

    -

    Example​

    -
    fragment.clear();
    -
    -

    clone()​

    -
    -

    clone(itemIDs): Fragment

    -
    -

    Creates a copy of the whole fragment or a part of it. It shares the geometry with the original fragment, but has its own InstancedMesh data, so it also needs to be disposed.

    -

    Parameters​

    -
    ParameterTypeDescription
    itemIDsIterable<number>An iterable of item IDs to be included in the clone.
    -

    Returns​

    -

    Fragment

    -
    -

    dispose()​

    -
    -

    dispose(disposeResources): void

    -
    -

    Disposes of the fragment and its associated resources.

    -

    Parameters​

    -
    ParameterTypeDefault valueDescription
    disposeResourcesbooleantrueIf true, disposes geometries and materials associated with the fragment. If false, only disposes of the fragment itself.
    -

    Returns​

    -

    void

    -
    -

    exportData()​

    -
    -

    exportData(): object

    -
    -

    Exports the fragment's geometry and associated data.

    -

    Returns​

    -

    object

    -

    An object containing the exported geometry, an array of IDs associated with the fragment, and the fragment's ID.

    -
    colors​
    -
    -

    colors: number[]

    -
    -
    groups​
    -
    -

    groups: number[]

    -
    -
    id​
    -
    -

    id: string

    -
    -
    ids​
    -
    -

    ids: number[]

    -
    -
    index​
    -
    -

    index: number[]

    -
    -
    materials​
    -
    -

    materials: number[]

    -
    -
    matrices​
    -
    -

    matrices: number[]

    -
    -
    normal​
    -
    -

    normal: Float32Array

    -
    -
    position​
    -
    -

    position: Float32Array

    -
    -

    Remarks​

    -

    This method is used to export the fragment's geometry and associated data for further processing or storage.

    -

    Example​

    -
    const exportedData = fragment.exportData();
    // Use the exportedData object for further processing or storage
    -
    -

    get()​

    -
    -

    get(itemID): Item

    -
    -

    Retrieves the transform matrices and colors of instances associated with a given item ID.

    -

    Parameters​

    -
    ParameterTypeDescription
    itemIDnumberThe unique identifier of the item.
    -

    Returns​

    -

    Item

    -

    An object containing the item ID, an array of transform matrices, and an optional array of colors. -If no colors are found, the colors array will be undefined.

    -

    Throws​

    -

    Will throw an error if the item is not found.

    -
    -

    getInstancesIDs()​

    -
    -

    getInstancesIDs(itemID): null | Set<number>

    -
    -

    Retrieves the instance IDs associated with a given item ID.

    -

    Parameters​

    -
    ParameterTypeDescription
    itemIDnumberThe unique identifier of the item.
    -

    Returns​

    -

    null | Set<number>

    -

    The set of instance IDs associated with the item, or null if no association exists.

    -
    -

    getItemID()​

    -
    -

    getItemID(instanceID): null | number

    -
    -

    Retrieves the item ID associated with a given instance ID.

    -

    Parameters​

    -
    ParameterTypeDescription
    instanceIDnumberThe unique identifier of the instance.
    -

    Returns​

    -

    null | number

    -

    The item ID associated with the instance, or null if no association exists.

    -
    -

    remove()​

    -
    -

    remove(itemsIDs): void

    -
    -

    Removes items from the fragment.

    -

    Parameters​

    -
    ParameterTypeDescription
    itemsIDsIterable<number>

    An iterable of item IDs to be removed.

    The instance IDs, item IDs, and associations between instance IDs and item IDs are updated accordingly.

    The instance color and matrix attributes of the mesh are updated.

    -

    Returns​

    -

    void

    -

    Throws​

    -

    Will throw an error if the instances are not found.

    -
    -

    resetColor()​

    -
    -

    resetColor(itemIDs): void

    -
    -

    Resets the color of items in the fragment to their original colors.

    -

    Parameters​

    -
    ParameterTypeDescription
    itemIDsIterable<number>An iterable of item IDs to be affected. If not provided, all items in the fragment will be affected.
    -

    Returns​

    -

    void

    -

    Example​

    -
    fragment.resetColor([1, 2, 3]); // Resets the color of items with IDs 1, 2, and 3 to their original colors.
    fragment.resetColor(); // Resets the color of all items in the fragment to their original colors.
    -
    -

    setColor()​

    -
    -

    setColor(color, itemIDs, override): void

    -
    -

    Sets the color of items in the fragment.

    -

    Parameters​

    -
    ParameterTypeDefault valueDescription
    colorColorundefinedThe color to be set for the items.
    itemIDsIterable<number>undefinedAn iterable of item IDs to be affected. If not provided, all items in the fragment will be affected.
    overridebooleanfalseA boolean indicating whether the original color should be overridden. If true, the original color will be replaced with the new color.
    -

    Returns​

    -

    void

    -

    Example​

    -
    fragment.setColor(new THREE.Color(0xff0000), [1, 2, 3], true); // Sets the color of items with IDs 1, 2, and 3 to red, overriding their original colors.
    fragment.setColor(new THREE.Color(0x00ff00)); // Sets the color of all items in the fragment to green.
    -
    -

    setVisibility()​

    -
    -

    setVisibility(visible, itemIDs): void

    -
    -

    Sets the visibility of items in the fragment.

    -

    Parameters​

    -
    ParameterTypeDescription
    visiblebooleanA boolean indicating whether the items should be visible or hidden.
    itemIDsIterable<number>An iterable of item IDs to be affected. If not provided, all items in the fragment will be affected.
    -

    Returns​

    -

    void

    -

    Remarks​

    -

    This method updates the visibility of items in the fragment based on the provided visibility flag.

    -

    Example​

    -
    fragment.setVisibility(true, [1, 2, 3]); // Makes items with IDs 1, 2, and 3 visible.
    fragment.setVisibility(false); // Makes all items in the fragment hidden.
    -
    -

    update()​

    -
    -

    update(): void

    -
    -

    Updates the instance color and matrix attributes of the fragment's mesh. -This method should be called whenever the instance color or matrix attributes -need to be updated.

    -

    Returns​

    -

    void

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/classes/FragmentMesh/index.html b/build/api/@thatopen/fragments/classes/FragmentMesh/index.html deleted file mode 100644 index 03e4b37cb..000000000 --- a/build/api/@thatopen/fragments/classes/FragmentMesh/index.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - -FragmentMesh | That Open docs - - - - -
    Skip to main content

    FragmentMesh

    -

    A class representing a THREE.InstancedMesh with additional properties for fragment data.

    -

    Extends​

    -
      -
    • InstancedMesh
      • -
    -

    Constructors​

    -

    new FragmentMesh()​

    -
    -

    new FragmentMesh(geometry, material, count, fragment): FragmentMesh

    -
    -

    Constructs a new FragmentMesh.

    -

    Parameters​

    -
    ParameterTypeDescription
    geometryBufferGeometry<NormalBufferAttributes>The geometry for the mesh. Must be indexed.
    materialMaterial | Material[]The material(s) for the mesh. If a single material is provided, it will be wrapped in an array.
    countnumberThe number of instances to create.
    fragmentFragmentThe fragment associated with this mesh.
    -

    Returns​

    -

    FragmentMesh

    -

    Overrides​

    -

    THREE.InstancedMesh.constructor

    -

    Properties​

    -

    fragment​

    -
    -

    fragment: Fragment

    -
    -

    The fragment associated with this mesh.

    -
    -

    geometry​

    -
    -

    geometry: IndexedGeometry

    -
    -

    The geometry used by this mesh. -It must be an IndexedGeometry.

    -

    Overrides​

    -

    THREE.InstancedMesh.geometry

    -
    -

    material​

    -
    -

    material: Material[]

    -
    -

    The materials used by this mesh. -If a single material is provided, it will be wrapped in an array.

    -

    Overrides​

    -

    THREE.InstancedMesh.material

    -

    Methods​

    -

    exportData()​

    -
    -

    exportData(): object

    -
    -

    Exports the data of the fragment mesh to a serializable format.

    -

    Returns​

    -

    object

    -

    An object containing the position, normal, index, groups, materials, matrices, and colors of the fragment mesh.

    -
    colors​
    -
    -

    colors: number[]

    -
    -
    groups​
    -
    -

    groups: number[]

    -
    -
    index​
    -
    -

    index: number[]

    -
    -
    materials​
    -
    -

    materials: number[]

    -
    -
    matrices​
    -
    -

    matrices: number[]

    -
    -
    normal​
    -
    -

    normal: Float32Array

    -
    -
    position​
    -
    -

    position: Float32Array

    -
    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/classes/FragmentsGroup/index.html b/build/api/@thatopen/fragments/classes/FragmentsGroup/index.html deleted file mode 100644 index 0f6352884..000000000 --- a/build/api/@thatopen/fragments/classes/FragmentsGroup/index.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - -FragmentsGroup | That Open docs - - - - -
    Skip to main content

    FragmentsGroup

    -

    A class representing a group of 3D fragments. This class extends THREE.Group and adds additional properties and methods for managing and interacting with the fragments it contains.

    -

    Extends​

    -
      -
    • Group
      • -
    -

    Constructors​

    -

    new FragmentsGroup()​

    -
    -

    new FragmentsGroup(): FragmentsGroup

    -
    -

    Creates a new Group.

    -

    Returns​

    -

    FragmentsGroup

    -

    Inherited from​

    -

    THREE.Group.constructor

    -

    Properties​

    -

    boundingBox​

    -
    -

    boundingBox: Box3

    -
    -

    A THREE.Box3 object representing the bounding box of all fragments in this group.

    -
    -

    civilData?​

    -
    -

    optional civilData: object

    -
    -

    An optional object containing civil engineering data.

    -

    alignments​

    -
    -

    alignments: Map<number, Alignment>

    -
    -

    coordinationMatrix​

    -
    -

    coordinationMatrix: Matrix4

    -
    -
    -

    coordinationMatrix​

    -
    -

    coordinationMatrix: Matrix4

    -
    -

    A THREE.Matrix4 object representing the coordination matrix of this group.

    -
    -

    data​

    -
    -

    data: Map<number, [number[], number[]]>

    -
    -

    A Map object where the keys are express IDs and the values are arrays of two arrays. -The first array contains fragment keys to which this asset belongs, and the second array contains floor and category IDs.

    -
    -

    geometryIDs​

    -
    -

    geometryIDs: object

    -
    -

    An object with two Map properties, 'opaque' and 'transparent', representing the geometry IDs and keys of opaque and transparent fragments. They must be distinguished because THREE.js doesn't support transparency per instance in InstancedMesh.

    -

    opaque​

    -
    -

    opaque: Map<number, number>

    -
    -

    transparent​

    -
    -

    transparent: Map<number, number>

    -
    -
    -

    globalToExpressIDs​

    -
    -

    globalToExpressIDs: Map<string, number>

    -
    -

    A Map object where the keys are global IDs and the values are expressIDs.

    -
    -

    ifcMetadata​

    -
    -

    ifcMetadata: IfcMetadata

    -
    -

    An object representing metadata about the IFC model defined by the IFC schema.

    -
    -

    isStreamed​

    -
    -

    isStreamed: boolean = false

    -
    -

    Whether this fragments group is being streamed or not.

    -
    -

    items​

    -
    -

    items: Fragment[] = []

    -
    -

    An array of Fragment objects that are part of this group.

    -
    -

    keyFragments​

    -
    -

    keyFragments: Map<number, string>

    -
    -

    A Map object where the keys are uints and the values are strings representing fragment IDs. -This is used to save memory by mapping keys to fragment IDs.

    -
    -

    streamSettings​

    -
    -

    streamSettings: object

    -
    -

    An object containing settings for streaming data, including base URL, base file name, IDs, and types.

    -

    baseFileName​

    -
    -

    baseFileName: string

    -
    -

    baseUrl?​

    -
    -

    optional baseUrl: string

    -
    -
    Deprecated​
    -

    use FragmentsGroup.baseUrl instead

    -

    ids​

    -
    -

    ids: Map<number, number>

    -
    -

    types​

    -
    -

    types: Map<number, number[]>

    -
    -
    -

    propertiesDB​

    -
    -

    static propertiesDB: null | StreamerFileDb = null

    -
    -

    The object in charge of caching property files locally to save requests over the network.

    -
    -

    url​

    -
    -

    static url: string = ""

    -
    -

    Default URL for requesting property tiles. Feel free to change this, or override the FragmentsGroup.fetch method for more granular control.

    -
    -

    useCache​

    -
    -

    static useCache: boolean = true

    -
    -

    Whether to use local cache when streaming properties.

    -

    Accessors​

    -

    hasProperties​

    -
    -

    get hasProperties(): boolean

    -
    -

    A getter that checks if this group has properties, either locally defined or streamed from a data source.

    -

    Returns​

    -

    boolean

    -

    Methods​

    -

    cloneGroup()​

    -
    -

    cloneGroup(items?): FragmentsGroup

    -
    -

    Creates a copy of the whole group or a part of it. Each fragment clone shares the geometry of with its respective original fragment, but has its own InstancedMesh data, so it also needs to be disposed.

    -

    Parameters​

    -
    ParameterTypeDescription
    items?FragmentIdMapOptional - The part of the group to be cloned. If not given, the whole group is cloned.
    -

    Returns​

    -

    FragmentsGroup

    -
    -

    dispose()​

    -
    -

    dispose(disposeResources): void

    -
    -

    Method to dispose of the resources used by the FragmentsGroup.

    -

    Parameters​

    -
    ParameterTypeDefault valueDescription
    disposeResourcesbooleantrueIf true, also dispose of the resources used by the fragments (geometries and materials). Default is true.
    -

    Returns​

    -

    void

    -
    -

    getAllPropertiesIDs()​

    -
    -

    getAllPropertiesIDs(): number[]

    -
    -

    Method to retrieve all property IDs from either local properties or streamed properties.

    -

    Returns​

    -

    number[]

    -
      -
    • An array of property IDs.
      • -
    -

    Example​

    -
    const propertyIDs = fragmentsGroup.getAllPropertiesIDs();
    console.log(propertyIDs); // Output: [12345, 67890,...]
    -
    -

    getAllPropertiesOfType()​

    -
    -

    getAllPropertiesOfType(type): Promise<null | IfcProperties>

    -
    -

    Method to retrieve all properties of a specific type from either local properties or streamed properties.

    -

    Parameters​

    -
    ParameterTypeDescription
    typenumberThe type of properties to retrieve.
    -

    Returns​

    -

    Promise<null | IfcProperties>

    -

    A Promise that resolves to an object containing properties of type IfcProperties, or null if no properties of the specified type are found.

    -

    Example​

    -
    const type = 1001; // Example type
    fragmentsGroup.getAllPropertiesOfType(type).then((properties) => {
      if (properties) {
        for (const id in properties) {
          const property = properties[id];
          console.log(`ID: ${id}, Name: ${property.name}, Type: ${property.type}`);
        }
      } else {
        console.log(`No properties of type ${type} found.`);
      }
    });
    -
    -

    getAllPropertiesTypes()​

    -
    -

    getAllPropertiesTypes(): number[]

    -
    -

    Method to retrieve all property types from either local properties or streamed properties.

    -

    Returns​

    -

    number[]

    -
      -
    • An array of unique property types.
      • -
    -

    Example​

    -
    const propertyTypes = fragmentsGroup.getAllPropertiesTypes();
    console.log(propertyTypes); // Output: [1001, 1002,...]
    -
    -

    getFragmentMap()​

    -
    -

    getFragmentMap(expressIDs): FragmentIdMap

    -
    -

    A method to create a map of fragment IDs and express IDs contained within them. This is useful because if you want to get "a chair", it might be made of 4 different geometries, and thus the subsets of 4 different fragments. Using this method, you would get exactly the fragments of where that chair is.

    -

    Parameters​

    -
    ParameterTypeDescription
    expressIDsIterable<number>An iterable of express IDs to create the map for. If not provided, returns the fragment ID map for the whole group.
    -

    Returns​

    -

    FragmentIdMap

    -

    A map where the keys are fragment IDs and the values are sets of express IDs.

    -
    -

    getItemVertices()​

    -
    -

    getItemVertices(itemID): Vector3[]

    -
    -

    Method to retrieve the vertices of a specific item within the fragments. -This method finds the fragments that contain the specified item, -then retrieves the vertices of those fragments.

    -

    Parameters​

    -
    ParameterTypeDescription
    itemIDnumberThe ID of the item for which to retrieve vertices. Usually, an IFC expressID.
    -

    Returns​

    -

    Vector3[]

    -

    An array of THREE.Vector3 objects representing the vertices of the specified item.

    -

    Example​

    -
    const itemVertices = fragmentsGroup.getItemVertices(12345);
    for (const vertex of itemVertices) {
      console.log(`Vertex: ${vertex.x}, ${vertex.y}, ${vertex.z}`);
    }
    -
    -

    getLocalProperties()​

    -
    -

    getLocalProperties(): undefined | IfcProperties

    -
    -

    Method to retrieve the local properties of the fragments in this group.

    -

    Returns​

    -

    undefined | IfcProperties

    -
      -
    • An object containing properties of type IfcProperties. -The keys of the object are express IDs as strings, and the values are objects representing the properties of the corresponding express ID. -If no local properties are set, it returns undefined.
      • -
    -

    Example​

    -
    const properties = fragmentsGroup.getLocalProperties();
    if (properties) {
      for (const id in properties) {
        const property = properties[id];
        console.log(`ID: ${id}, Name: ${property.name}, Type: ${property.type}`);
      }
    }
    -
    -

    setLocalProperties()​

    -
    -

    setLocalProperties(properties): void

    -
    -

    Method to set local properties of the fragments in this group.

    -

    Parameters​

    -
    ParameterTypeDescription
    propertiesIfcPropertiesAn object containing properties of type IfcProperties.
    The keys of the object are express IDs as strings, and the values are objects representing the properties of the corresponding express ID.
    -

    Returns​

    -

    void

    -

    Example​

    -
    const properties: IfcProperties = {
      "12345": {
        name: "Chair",
        type: 1001,
        color: [0.5, 0.5, 0.5],
        //... other properties
      },
      "67890": {
        name: "Table",
        type: 1002,
        color: [0.8, 0.8, 0.8],
        //... other properties
      },
      //... more properties
    };

    fragmentsGroup.setLocalProperties(properties);
    -
    -

    setProperties()​

    -
    -

    setProperties(id, value): Promise<void>

    -
    -

    Method to set properties of a specific fragment in this group.

    -

    Parameters​

    -
    ParameterTypeDescription
    idnumberThe ID of the fragment for which to set properties.
    valuenull | objectThe new properties to set for the fragment. If null, it deletes the properties for the fragment.
    -

    Returns​

    -

    Promise<void>

    -

    Throws​

    -

    Will throw an error if writing streamed properties, as it is not supported yet.

    -

    Example​

    -
    const properties: IfcProperties = {
      "12345": {
        name: "Chair",
        type: 1001,
        color: [0.5, 0.5, 0.5],
        //... other properties
      },
    };

    fragmentsGroup.setProperties(12345, properties[12345]);
    -
    -

    setPropertiesDB()​

    -
    -

    static setPropertiesDB(enabled): void

    -
    -

    Enables or disables the local property caching system.

    -

    Parameters​

    -
    ParameterTypeDescription
    enabledbooleanWhether to enable or disable it.
    -

    Returns​

    -

    void

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/classes/Serializer/index.html b/build/api/@thatopen/fragments/classes/Serializer/index.html deleted file mode 100644 index ad5972f8e..000000000 --- a/build/api/@thatopen/fragments/classes/Serializer/index.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - -Serializer | That Open docs - - - - -
    Skip to main content

    Serializer

    -

    Serializer class for handling the serialization and deserialization of 3D model data. It uses the flatbuffers library for efficient data serialization and deserialization.

    -

    Implements​

    -
      -
    • FragmentParser
      • -
    -

    Properties​

    -

    version​

    -
    -

    version: number | "auto"

    -
    -

    FragmentParser.version

    -

    Implementation of​

    -

    FragmentParser.version

    -

    Methods​

    -

    export()​

    -
    -

    export(group): Uint8Array

    -
    -

    FragmentParser.export

    -

    Parameters​

    -
    ParameterType
    groupFragmentsGroup
    -

    Returns​

    -

    Uint8Array

    -

    Implementation of​

    -

    FragmentParser.export

    -
    -

    import()​

    -
    -

    import(bytes): FragmentsGroup

    -
    -

    FragmentParser.import

    -

    Parameters​

    -
    ParameterType
    bytesUint8Array
    -

    Returns​

    -

    FragmentsGroup

    -

    Implementation of​

    -

    FragmentParser.import

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/classes/StreamSerializer/index.html b/build/api/@thatopen/fragments/classes/StreamSerializer/index.html deleted file mode 100644 index 261a2c293..000000000 --- a/build/api/@thatopen/fragments/classes/StreamSerializer/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - -StreamSerializer | That Open docs - - - - -
    Skip to main content

    StreamSerializer

    -

    A class for serializing and deserializing geometry data in a streamed format.

    -

    Methods​

    -

    export()​

    -
    -

    export(geometries): Uint8Array

    -
    -

    Exports geometry data to a byte array in a streamed format.

    -

    Parameters​

    -
    ParameterTypeDescription
    geometriesStreamedGeometriesA Map of geometry IDs to their respective position, normal, and index arrays.
    -

    Returns​

    -

    Uint8Array

    -

    A Uint8Array containing the serialized geometry data.

    -
    -

    import()​

    -
    -

    import(bytes): StreamedGeometries

    -
    -

    Imports geometry data from a byte array in a streamed format.

    -

    Parameters​

    -
    ParameterTypeDescription
    bytesUint8ArrayThe byte array containing the serialized geometry data.
    -

    Returns​

    -

    StreamedGeometries

    -

    A Map of geometry IDs to their respective position, normal, and index arrays.

    -

    Throws​

    -

    Will throw an error if the geometry ID is not found.

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/index.html b/build/api/@thatopen/fragments/index.html deleted file mode 100644 index 91db18bc9..000000000 --- a/build/api/@thatopen/fragments/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - -@thatopen/fragments | That Open docs - - - - -
    Skip to main content

    @thatopen/fragments

    -

    Classes​

    -
    ClassDescription
    AlignmentRepresents an alignment in a civil engineering project. An alignment consists of vertical, horizontal, and absolute civil curves.
    CivilCurveRepresents an alignment curve of a civil engineering model.
    CurveMeshRepresents an alignment 3D curve mesh with additional civil engineering properties. Extends THREE.LineSegments to provide geometry and material for the curve.
    FragmentClass representing a fragment of a 3D model. Fragments are just a simple wrapper around THREE.InstancedMesh. Each fragment can contain Items (identified by ItemID) which are mapped to one or many instances inside this THREE.InstancedMesh. Fragments also implement features like instance buffer resizing and hiding out of the box.
    FragmentMeshA class representing a THREE.InstancedMesh with additional properties for fragment data.
    FragmentsGroupA class representing a group of 3D fragments. This class extends THREE.Group and adds additional properties and methods for managing and interacting with the fragments it contains.
    SerializerSerializer class for handling the serialization and deserialization of 3D model data. It uses the flatbuffers library for efficient data serialization and deserialization.
    StreamSerializerA class for serializing and deserializing geometry data in a streamed format.
    -

    Interfaces​

    -
    InterfaceDescription
    FragmentIdMapA map that associates each fragmentID with a set of item IDs.
    IfcMetadataRepresents metadata related to the IFC model.
    IfcPropertiesRepresents a map of IFC properties.
    IndexedGeometryRepresents a THREE.js geometry with an index attribute. We always work with indexed geometries, and this allows us to not check the existence of the index attribute each time we access it.
    ItemRepresents an item in the 3D model.
    -

    Type Aliases​

    -
    Type aliasDescription
    AlignmentTypeRepresents the type of alignment, which can be vertical, horizontal, or absolute.
    IfcSchemaRepresents the version of the IFC schema used in the model.
    StreamedGeometriesRepresents a map of streamed geometries.
    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/interfaces/FragmentIdMap/index.html b/build/api/@thatopen/fragments/interfaces/FragmentIdMap/index.html deleted file mode 100644 index 61214ecfd..000000000 --- a/build/api/@thatopen/fragments/interfaces/FragmentIdMap/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - -FragmentIdMap | That Open docs - - - - -
    Skip to main content

    FragmentIdMap

    -

    A map that associates each fragmentID with a set of item IDs.

    -

    Remarks​

    -

    This map is used to efficiently retrieve the item IDs associated with a given fragmentID. -Each fragmentID is a unique identifier for a 3D model fragment, and the corresponding set of item IDs -represents the items that are part of that fragment. Generally, the item ID correspond to the express ID of the IFC used to generate the fragments.

    -

    Example​

    -
    const fragmentIdMap: FragmentIdMap = {
      "fragment1": new Set([1, 2, 3]),
      "fragment2": new Set([4, 5]),
    };
    -

    Template​

    -

    The type of the fragmentID. In this case, it is a string.

    -

    Template​

    -

    The type of the itemID. In this case, it is a number.

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/interfaces/IfcMetadata/index.html b/build/api/@thatopen/fragments/interfaces/IfcMetadata/index.html deleted file mode 100644 index 4988681a1..000000000 --- a/build/api/@thatopen/fragments/interfaces/IfcMetadata/index.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - -IfcMetadata | That Open docs - - - - -
    Skip to main content

    IfcMetadata

    -

    Represents metadata related to the IFC model.

    -

    Remarks​

    -

    This interface contains information about the name, description, schema version, and the maximum expressID of the IFC model.

    -

    Example​

    -
    const ifcMetadata: IfcMetadata = {
      name: "My IFC Model",
      description: "A sample IFC model",
      schema: "IFC4X3",
      maxExpressID: 12345,
    };
    -

    Properties​

    -

    description​

    -
    -

    description: string

    -
    -

    A brief description of the IFC model.

    -
    -

    maxExpressID​

    -
    -

    maxExpressID: number

    -
    -

    The maximum expressID of the IFC model.

    -

    Remarks​

    -

    The expressID is a unique identifier for each IFC entity.

    -
    -

    name​

    -
    -

    name: string

    -
    -

    The name of the IFC model.

    -
    -

    schema​

    -
    -

    schema: IfcSchema

    -
    -

    The version of the IFC schema used in the model.

    -

    Remarks​

    -

    The supported IFC schemas are:

    -
      -
    • IFC2X3
      • -
    • IFC4
      • -
    • IFC4X3
      • -
    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/interfaces/IfcProperties/index.html b/build/api/@thatopen/fragments/interfaces/IfcProperties/index.html deleted file mode 100644 index 263d1a899..000000000 --- a/build/api/@thatopen/fragments/interfaces/IfcProperties/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - -IfcProperties | That Open docs - - - - -
    Skip to main content

    IfcProperties

    -

    Represents a map of IFC properties.

    -

    Remarks​

    -

    Each property is associated with an expressID, which is a unique identifier for the IFC entity. -The properties are stored as an object with attribute names as keys and their corresponding values.

    -

    Example​

    -
    const ifcProperties: IfcProperties = {
      123: { name: "Wall", color: "red" },
      456: { name: "Door", height: 2.1 },
    };
    -

    Indexable​

    -

    [expressID: number]: object

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/interfaces/IndexedGeometry/index.html b/build/api/@thatopen/fragments/interfaces/IndexedGeometry/index.html deleted file mode 100644 index c275ea1a3..000000000 --- a/build/api/@thatopen/fragments/interfaces/IndexedGeometry/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - -IndexedGeometry | That Open docs - - - - -
    Skip to main content

    IndexedGeometry

    -

    Represents a THREE.js geometry with an index attribute. We always work with indexed geometries, and this allows us to not check the existence of the index attribute each time we access it.

    -

    Remarks​

    -

    This interface extends the THREE.BufferGeometry class and adds an index attribute of type THREE.BufferAttribute. -The index attribute is used to define the order of vertices in the geometry.

    -

    Extends​

    -
      -
    • BufferGeometry
      • -
    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/interfaces/Item/index.html b/build/api/@thatopen/fragments/interfaces/Item/index.html deleted file mode 100644 index db650ac17..000000000 --- a/build/api/@thatopen/fragments/interfaces/Item/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - -Item | That Open docs - - - - -
    Skip to main content

    Item

    -

    Represents an item in the 3D model.

    -

    Remarks​

    -

    Each item has a unique identifier, a list of transformation matrices, and optionally, a list of colors.

    -

    Properties​

    -

    colors?​

    -
    -

    optional colors: Color[]

    -
    -

    An optional list of colors associated with the item.

    -
    -

    id​

    -
    -

    id: number

    -
    -

    The unique identifier of the item.

    -
    -

    transforms​

    -
    -

    transforms: Matrix4[]

    -
    -

    A list of transformation matrices representing the position, rotation, and scale of the item.

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/type-aliases/AlignmentType/index.html b/build/api/@thatopen/fragments/type-aliases/AlignmentType/index.html deleted file mode 100644 index acdc42497..000000000 --- a/build/api/@thatopen/fragments/type-aliases/AlignmentType/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - -AlignmentType | That Open docs - - - - -
    Skip to main content

    AlignmentType

    -
    -

    AlignmentType: "vertical" | "horizontal" | "absolute"

    -
    -

    Represents the type of alignment, which can be vertical, horizontal, or absolute.

    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/type-aliases/IfcSchema/index.html b/build/api/@thatopen/fragments/type-aliases/IfcSchema/index.html deleted file mode 100644 index c1f6f04d8..000000000 --- a/build/api/@thatopen/fragments/type-aliases/IfcSchema/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - -IfcSchema | That Open docs - - - - -
    Skip to main content

    IfcSchema

    -
    -

    IfcSchema: "IFC2X3" | "IFC4" | "IFC4X3"

    -
    -

    Represents the version of the IFC schema used in the model.

    -

    Remarks​

    -

    The supported IFC schemas are:

    -
      -
    • IFC2X3
      • -
    • IFC4
      • -
    • IFC4X3
      • -
    - - \ No newline at end of file diff --git a/build/api/@thatopen/fragments/type-aliases/StreamedGeometries/index.html b/build/api/@thatopen/fragments/type-aliases/StreamedGeometries/index.html deleted file mode 100644 index e5716c746..000000000 --- a/build/api/@thatopen/fragments/type-aliases/StreamedGeometries/index.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - -StreamedGeometries | That Open docs - - - - -
    Skip to main content

    StreamedGeometries

    -
    -

    StreamedGeometries: Map<number, object>

    -
    -

    Represents a map of streamed geometries.

    -

    Remarks​

    -

    This map is used to store the position, normal, and index arrays of each geometry. -Each geometry is associated with a unique identifier (number) which usually corresponds to the ExpressID of the geometry in the IFC file that was used to generate the fragments.

    -

    Example​

    -
    const streamedGeometries: StreamedGeometries = new Map([
      [1, { position: new Float32Array([0, 0, 0]), normal: new Float32Array([0, 1, 0]), index: new Uint32Array([0, 1, 2]) }],
      [2, { position: new Float32Array([1, 0, 0]), normal: new Float32Array([0, 1, 0]), index: new Uint32Array([3, 4, 5]) }],
    ]);
    -

    Template​

    -

    The type of the geometry identifier. In this case, it is a number.

    -

    Template​

    -

    The type of the geometry data. It contains position, normal, and index arrays.

    -

    Template​

    -

    The type of the position array.

    -

    Template​

    -

    The type of the normal array.

    -

    Template​

    -

    The type of the index array.

    - - \ No newline at end of file diff --git a/build/api/@thatopen/ui-obc/classes/Manager/index.html b/build/api/@thatopen/ui-obc/classes/Manager/index.html index 70fe17f7a..b7e38e1ed 100644 --- a/build/api/@thatopen/ui-obc/classes/Manager/index.html +++ b/build/api/@thatopen/ui-obc/classes/Manager/index.html @@ -4,11 +4,11 @@ Manager | That Open docs - - + + -
    Skip to main content

    Manager

    +

    Manager

    Manager class is responsible for initializing the custom elements for the BIM application. It uses the BUIManager from "@thatopen/ui" to define custom elements for 2D and 3D views.

    Methods​

    init()​

    @@ -19,6 +19,6 @@

    init()Returns​

    void

    Remarks​

    -

    This method should be called once during the application's initialization.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    This method should be called once during the application's initialization.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui-obc/classes/ViewCube/index.html b/build/api/@thatopen/ui-obc/classes/ViewCube/index.html index 9b0f701cb..6cf5e476f 100644 --- a/build/api/@thatopen/ui-obc/classes/ViewCube/index.html +++ b/build/api/@thatopen/ui-obc/classes/ViewCube/index.html @@ -4,11 +4,11 @@ ViewCube | That Open docs - - + + -
    Skip to main content

    ViewCube

    +

    ViewCube

    A custom 3D view cube component for BIM applications. HTML tag: bim-view-cube

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    LitElement.styles

    \ No newline at end of file diff --git a/build/api/@thatopen/ui-obc/classes/World/index.html b/build/api/@thatopen/ui-obc/classes/World/index.html index 7ee46c942..5398a270b 100644 --- a/build/api/@thatopen/ui-obc/classes/World/index.html +++ b/build/api/@thatopen/ui-obc/classes/World/index.html @@ -4,17 +4,17 @@ World | That Open docs - - + + -
    Skip to main content

    World

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    \ No newline at end of file diff --git a/build/api/@thatopen/ui-obc/classes/World2D/index.html b/build/api/@thatopen/ui-obc/classes/World2D/index.html index 4ee493fd5..3cdd4d3f5 100644 --- a/build/api/@thatopen/ui-obc/classes/World2D/index.html +++ b/build/api/@thatopen/ui-obc/classes/World2D/index.html @@ -4,11 +4,11 @@ World2D | That Open docs - - + + -
    Skip to main content

    World2D

    +

    World2D

    A custom 2D Scene component for BIM applications. HTML tag: bim-world-2d

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    LitElement.styles

    \ No newline at end of file diff --git a/build/api/@thatopen/ui-obc/index.html b/build/api/@thatopen/ui-obc/index.html index 32935ded4..a0cfb35dc 100644 --- a/build/api/@thatopen/ui-obc/index.html +++ b/build/api/@thatopen/ui-obc/index.html @@ -4,12 +4,12 @@ @thatopen/ui-obc | That Open docs - - + + -
    Skip to main content

    @thatopen/ui-obc

    +

    @thatopen/ui-obc

    Classes​

    -
    ClassDescription
    ManagerManager class is responsible for initializing the custom elements for the BIM application. It uses the BUIManager from "@thatopen/ui" to define custom elements for 2D and 3D views.
    ViewCubeA custom 3D view cube component for BIM applications. HTML tag: bim-view-cube
    WorldA world for BIM Apps.
    World2DA custom 2D Scene component for BIM applications. HTML tag: bim-world-2d
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    ClassDescription
    ManagerManager class is responsible for initializing the custom elements for the BIM application. It uses the BUIManager from "@thatopen/ui" to define custom elements for 2D and 3D views.
    ViewCubeA custom 3D view cube component for BIM applications. HTML tag: bim-view-cube
    WorldA world for BIM Apps.
    World2DA custom 2D Scene component for BIM applications. HTML tag: bim-world-2d
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Button/index.html b/build/api/@thatopen/ui/classes/Button/index.html index f26b71846..14232665e 100644 --- a/build/api/@thatopen/ui/classes/Button/index.html +++ b/build/api/@thatopen/ui/classes/Button/index.html @@ -4,11 +4,11 @@ Button | That Open docs - - + + -
    Skip to main content

    Button

    +

    Button

    A custom button web component for BIM applications. HTML tag: bim-button

    Fires​

    click - Fired when the button is clicked.

    @@ -143,6 +143,6 @@

    loading​

    -
    ParameterType
    valueboolean
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    ParameterType
    valueboolean
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Checkbox/index.html b/build/api/@thatopen/ui/classes/Checkbox/index.html index e1cafbf4d..cf5270ef1 100644 --- a/build/api/@thatopen/ui/classes/Checkbox/index.html +++ b/build/api/@thatopen/ui/classes/Checkbox/index.html @@ -4,11 +4,11 @@ Checkbox | That Open docs - - + + -
    Skip to main content

    Checkbox

    +

    Checkbox

    A custom checkbox web component for BIM applications. HTML tag: bim-checkbox

    Fires​

    change - Fired when the checkbox changes.

    @@ -108,6 +108,6 @@

    onValueChange<

    Example​

    checkbox.addEventListener('change', (event) => {
      console.log('Checkbox value changed:', event.target.checked);
    });

    Implementation of​

    -

    HasValue.onValueChange

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    HasValue.onValueChange

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/ColorInput/index.html b/build/api/@thatopen/ui/classes/ColorInput/index.html index 198eb9c51..0c6336809 100644 --- a/build/api/@thatopen/ui/classes/ColorInput/index.html +++ b/build/api/@thatopen/ui/classes/ColorInput/index.html @@ -4,11 +4,11 @@ ColorInput | That Open docs - - + + -
    Skip to main content

    ColorInput

    +

    ColorInput

    A custom color input web component for BIM applications. HTML tag: bim-color-input

    Fires​

    input - Fired when the color input changes.

    @@ -119,6 +119,6 @@

    focus()Returns​

    void

    Overrides​

    -

    LitElement.focus

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    LitElement.focus

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Component/index.html b/build/api/@thatopen/ui/classes/Component/index.html index 78d2e3c96..1ddae8ce8 100644 --- a/build/api/@thatopen/ui/classes/Component/index.html +++ b/build/api/@thatopen/ui/classes/Component/index.html @@ -4,11 +4,11 @@ Component | That Open docs - - + + -
    Skip to main content

    Component

    +

    Component

    A base class for UI components that utilizes the LitElement library. Provides functionality for rendering stateless and stateful components, as well as lazy loading of elements using Intersection Observer.

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The created UI component element.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Dropdown/index.html b/build/api/@thatopen/ui/classes/Dropdown/index.html index ba27f48f0..a510c87bf 100644 --- a/build/api/@thatopen/ui/classes/Dropdown/index.html +++ b/build/api/@thatopen/ui/classes/Dropdown/index.html @@ -4,11 +4,11 @@ Dropdown | That Open docs - - + + -
    Skip to main content

    Dropdown

    +

    Dropdown

    A custom dropdown web component for BIM applications.

    Extends​

      @@ -161,6 +161,6 @@

      onValueChange<

      Example​

      dropdown.addEventListener('change', (event) => {
        console.log('Dropdown value changed:', event.target.value);
      });

      Implementation of​

      -

      HasValue.onValueChange

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    HasValue.onValueChange

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Grid/index.html b/build/api/@thatopen/ui/classes/Grid/index.html index f7397bba5..fda89a7c6 100644 --- a/build/api/@thatopen/ui/classes/Grid/index.html +++ b/build/api/@thatopen/ui/classes/Grid/index.html @@ -4,11 +4,11 @@ Grid\<T\> | That Open docs - - + + -
    Skip to main content

    Grid<T>

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    ParameterType
    valueGridLayoutsDefinition<T>
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Icon/index.html b/build/api/@thatopen/ui/classes/Icon/index.html index 3d7936622..8c2705e91 100644 --- a/build/api/@thatopen/ui/classes/Icon/index.html +++ b/build/api/@thatopen/ui/classes/Icon/index.html @@ -4,11 +4,11 @@ Icon | That Open docs - - + + -
    Skip to main content

    Icon

    +

    Icon

    A custom icon web component for BIM applications. HTML tag: bim-icon

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    LitElement.styles

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Input/index.html b/build/api/@thatopen/ui/classes/Input/index.html index 5132a256a..cf5a13566 100644 --- a/build/api/@thatopen/ui/classes/Input/index.html +++ b/build/api/@thatopen/ui/classes/Input/index.html @@ -4,11 +4,11 @@ Input | That Open docs - - + + -
    Skip to main content

    Input

    +

    Input

    A custom input web component for BIM applications. HTML tag: bim-input

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    LitElement.styles

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Label/index.html b/build/api/@thatopen/ui/classes/Label/index.html index 3de6dba45..3ac93faf3 100644 --- a/build/api/@thatopen/ui/classes/Label/index.html +++ b/build/api/@thatopen/ui/classes/Label/index.html @@ -4,11 +4,11 @@ Label | That Open docs - - + + -
    Skip to main content

    Label

    +

    Label

    A custom label web component for BIM applications. HTML tag: bim-label

    Extends​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    LitElement.styles

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Manager/index.html b/build/api/@thatopen/ui/classes/Manager/index.html index d5bce58f8..1914c26c6 100644 --- a/build/api/@thatopen/ui/classes/Manager/index.html +++ b/build/api/@thatopen/ui/classes/Manager/index.html @@ -4,11 +4,11 @@ Manager | That Open docs - - + + -
    Skip to main content

    Manager

    +

    Manager

    Manager class is responsible for initializing the BIM UI library, defining custom elements, and providing configuration options.

    Methods​

    init()​

    @@ -29,6 +29,6 @@

    regi

    Returns​

    void

    Deprecated​

    -

    Use Manager.init() instead.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Use Manager.init() instead.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/NumberInput/index.html b/build/api/@thatopen/ui/classes/NumberInput/index.html index 37f5bcb9f..83755ed0b 100644 --- a/build/api/@thatopen/ui/classes/NumberInput/index.html +++ b/build/api/@thatopen/ui/classes/NumberInput/index.html @@ -4,11 +4,11 @@ NumberInput | That Open docs - - + + -
    Skip to main content

    NumberInput

    +

    NumberInput

    A custom number input web component for BIM applications. HTML tag: bim-number-input

    Extends​

      @@ -204,6 +204,6 @@

      focus()Returns​

      void

      Overrides​

      -

      LitElement.focus

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    LitElement.focus

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Option/index.html b/build/api/@thatopen/ui/classes/Option/index.html index 523332fa2..2cdee23f3 100644 --- a/build/api/@thatopen/ui/classes/Option/index.html +++ b/build/api/@thatopen/ui/classes/Option/index.html @@ -4,11 +4,11 @@ Option | That Open docs - - + + -
    Skip to main content

    Option

    +

    Option

    A custom option web component for BIM applications. HTML tag: bim-option

    Extends​

    const option = document.createElement('bim-option');
    option.label = "At origin"
    option.value = {x: 0, y: 0, z: 0} // As this is an object, it must be set in the property and not in the attribute.
    document.body.appendChild(option);

    Returns​

    -

    any

    +

    any

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Panel/index.html b/build/api/@thatopen/ui/classes/Panel/index.html index a40bc7f6a..52db151f9 100644 --- a/build/api/@thatopen/ui/classes/Panel/index.html +++ b/build/api/@thatopen/ui/classes/Panel/index.html @@ -4,11 +4,11 @@ Panel | That Open docs - - + + -
    Skip to main content

    Panel

    +

    Panel

    A custom panel web component for BIM applications. HTML tag: bim-panel

    Extends​

      @@ -152,6 +152,6 @@

      expandSection effectively showing their content. This can be used to programmatically reveal the content of sections within the panel, making the panel more informative or to display details that are necessary for the user.

      Returns​

      -

      void

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    void

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/PanelSection/index.html b/build/api/@thatopen/ui/classes/PanelSection/index.html index 16a8cc574..c2a5a918c 100644 --- a/build/api/@thatopen/ui/classes/PanelSection/index.html +++ b/build/api/@thatopen/ui/classes/PanelSection/index.html @@ -4,11 +4,11 @@ PanelSection | That Open docs - - + + -
    Skip to main content

    PanelSection

    +

    PanelSection

    A custom panel section web component for BIM applications. HTML tag: bim-panel-section

    Extends​

      @@ -116,6 +116,6 @@

      ExamplesParameters​

      ParameterType
      dataRecord<string, any>

      Returns​

      -

      Record<string, any>

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Record<string, any>

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Selector/index.html b/build/api/@thatopen/ui/classes/Selector/index.html index 52adad01e..82ac627c4 100644 --- a/build/api/@thatopen/ui/classes/Selector/index.html +++ b/build/api/@thatopen/ui/classes/Selector/index.html @@ -4,17 +4,17 @@ Selector | That Open docs - - + + -
    Skip to main content

    Selector

    +

    Selector

    A custom selector web component for BIM applications. HTML tag: bim-selector

    Extends​

    • LitElement
    -

    Implements​

    +

    Implements​

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    ParameterTypeDescription
    valueanyThe value to set for the selector.
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Tab/index.html b/build/api/@thatopen/ui/classes/Tab/index.html index cc9015ae3..24092eedf 100644 --- a/build/api/@thatopen/ui/classes/Tab/index.html +++ b/build/api/@thatopen/ui/classes/Tab/index.html @@ -4,11 +4,11 @@ Tab | That Open docs - - + + -
    Skip to main content

    Tab

    +

    Tab

    A custom tab web component for BIM applications. HTML tag: bim-tab

    Extends​

      @@ -21,12 +21,6 @@

      icon?​

      -
      -

      optional label: string

      -
      -

      The label of the tab. This property is optional and can be used to display a custom label instead of the tab's name.

      -

      name​

      name: string

      @@ -51,6 +45,14 @@

      FiresExample​

      const tab = document.querySelector('bim-tab');
      tab.hidden = true; // hides the tab

      Parameters​

      -
      ParameterTypeDescription
      valuebooleanThe new hidden state. If true, the tab will be hidden. If false, the tab will be visible.
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    ParameterTypeDescription
    valuebooleanThe new hidden state. If true, the tab will be hidden. If false, the tab will be visible.
    +
    +

    label​

    +
    +

    set label(value): void

    +
    +

    The label of the tab. This property is optional and can be used to display a custom label instead of the tab's name.

    +

    Parameters​

    +
    ParameterType
    valueundefined | string
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Table/index.html b/build/api/@thatopen/ui/classes/Table/index.html index 6dffb90f1..ee1149229 100644 --- a/build/api/@thatopen/ui/classes/Table/index.html +++ b/build/api/@thatopen/ui/classes/Table/index.html @@ -4,11 +4,11 @@ Table\<T\> | That Open docs - - + + -
    Skip to main content

    Table<T>

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Tabs/index.html b/build/api/@thatopen/ui/classes/Tabs/index.html index 6e077b60c..2f26bffa0 100644 --- a/build/api/@thatopen/ui/classes/Tabs/index.html +++ b/build/api/@thatopen/ui/classes/Tabs/index.html @@ -4,11 +4,11 @@ Tabs | That Open docs - - + + -
    Skip to main content

    Tabs

    +

    Tabs

    A custom tabs web component for BIM applications. HTML tag: bim-tabs

    Extends​

      @@ -54,6 +54,6 @@

      RemarksExample​

      // Set the active tab to "tab1"
      tabs.tab = "tab1";

      // Deselect all tabs
      tabs.tab = undefined;

      Parameters​

      -
      ParameterTypeDescription
      valueundefined | stringThe name of the tab to be set as active. If undefined, no tab will be selected.
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    ParameterTypeDescription
    valueundefined | stringThe name of the tab to be set as active. If undefined, no tab will be selected.
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/TextInput/index.html b/build/api/@thatopen/ui/classes/TextInput/index.html index 3a4b194a8..82b539dbf 100644 --- a/build/api/@thatopen/ui/classes/TextInput/index.html +++ b/build/api/@thatopen/ui/classes/TextInput/index.html @@ -4,11 +4,11 @@ TextInput | That Open docs - - + + -
    Skip to main content

    TextInput

    +

    TextInput

    A custom text input web component for BIM applications. HTML tag: bim-text-input

    Extends​

      @@ -128,6 +128,6 @@

      typeExample​

      // Set the type to "email"
      textInput.type = "email";

      Parameters​

      -
      ParameterType
      valuestring
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    ParameterType
    valuestring
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Toolbar/index.html b/build/api/@thatopen/ui/classes/Toolbar/index.html index 12e9b0d43..d8da1a0f1 100644 --- a/build/api/@thatopen/ui/classes/Toolbar/index.html +++ b/build/api/@thatopen/ui/classes/Toolbar/index.html @@ -4,11 +4,11 @@ Toolbar | That Open docs - - + + -
    Skip to main content

    Toolbar

    +

    Toolbar

    A custom toolbar web component for BIM applications. HTML tag: bim-toolbar

    Extends​

      @@ -41,6 +41,6 @@

      verticalParameters​

      -
      ParameterType
      valueboolean
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    ParameterType
    valueboolean
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/ToolbarGroup/index.html b/build/api/@thatopen/ui/classes/ToolbarGroup/index.html index 778c17cf0..1057b41a5 100644 --- a/build/api/@thatopen/ui/classes/ToolbarGroup/index.html +++ b/build/api/@thatopen/ui/classes/ToolbarGroup/index.html @@ -4,11 +4,11 @@ ToolbarGroup | That Open docs - - + + -
    Skip to main content

    ToolbarGroup

    +

    ToolbarGroup

    A custom toolbar group web component for BIM applications. HTML tag: bim-toolbar-group

    Extends​

      @@ -39,6 +39,6 @@

      verticalParameters​

      -
      ParameterType
      valueboolean
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    ParameterType
    valueboolean
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/ToolbarSection/index.html b/build/api/@thatopen/ui/classes/ToolbarSection/index.html index 42e1a4b43..e11f0c62b 100644 --- a/build/api/@thatopen/ui/classes/ToolbarSection/index.html +++ b/build/api/@thatopen/ui/classes/ToolbarSection/index.html @@ -4,11 +4,11 @@ ToolbarSection | That Open docs - - + + -
    Skip to main content

    ToolbarSection

    +
    +
    ParameterType
    valueboolean
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/classes/Viewport/index.html b/build/api/@thatopen/ui/classes/Viewport/index.html index 0eda1c82e..4bdf8b984 100644 --- a/build/api/@thatopen/ui/classes/Viewport/index.html +++ b/build/api/@thatopen/ui/classes/Viewport/index.html @@ -4,23 +4,23 @@ Viewport | That Open docs - - + + -
    Skip to main content

    Viewport

    +

    Viewport

    A custom viewport web component for BIM applications. HTML tag: bim-viewport

    Extends​

    • LitElement
    -

    Properties​

    +

    Properties​

    styles​

    static styles: CSSResult

    CSS styles for the component.

    Overrides​

    -

    LitElement.styles

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    LitElement.styles

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/functions/getElementValue/index.html b/build/api/@thatopen/ui/functions/getElementValue/index.html index 94af1c4ce..64e445e44 100644 --- a/build/api/@thatopen/ui/functions/getElementValue/index.html +++ b/build/api/@thatopen/ui/functions/getElementValue/index.html @@ -4,11 +4,11 @@ getElementValue() | That Open docs - - + + -
    Skip to main content

    getElementValue()

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    An object containing the extracted values.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/index.html b/build/api/@thatopen/ui/index.html index 571210f7f..49169e9d6 100644 --- a/build/api/@thatopen/ui/index.html +++ b/build/api/@thatopen/ui/index.html @@ -4,11 +4,11 @@ @thatopen/ui | That Open docs - - + + -
    Skip to main content

    @thatopen/ui

    +

    @thatopen/ui

    Classes​

    ClassDescription
    ButtonA custom button web component for BIM applications. HTML tag: bim-button
    CheckboxA custom checkbox web component for BIM applications. HTML tag: bim-checkbox
    ColorInputA custom color input web component for BIM applications. HTML tag: bim-color-input
    ComponentA base class for UI components that utilizes the LitElement library. Provides functionality for rendering stateless and stateful components, as well as lazy loading of elements using Intersection Observer.
    DropdownA custom dropdown web component for BIM applications.
    GridA custom grid component for web applications.
    IconA custom icon web component for BIM applications. HTML tag: bim-icon
    InputA custom input web component for BIM applications. HTML tag: bim-input
    LabelA custom label web component for BIM applications. HTML tag: bim-label
    ManagerManager class is responsible for initializing the BIM UI library, defining custom elements, and providing configuration options.
    NumberInputA custom number input web component for BIM applications. HTML tag: bim-number-input
    OptionA custom option web component for BIM applications. HTML tag: bim-option
    PanelA custom panel web component for BIM applications. HTML tag: bim-panel
    PanelSectionA custom panel section web component for BIM applications. HTML tag: bim-panel-section
    SelectorA custom selector web component for BIM applications. HTML tag: bim-selector
    TabA custom tab web component for BIM applications. HTML tag: bim-tab
    TableA custom table web component for BIM applications. HTML tag: bim-table
    TabsA custom tabs web component for BIM applications. HTML tag: bim-tabs
    TextInputA custom text input web component for BIM applications. HTML tag: bim-text-input
    ToolbarA custom toolbar web component for BIM applications. HTML tag: bim-toolbar
    ToolbarGroupA custom toolbar group web component for BIM applications. HTML tag: bim-toolbar-group
    ToolbarSectionA custom toolbar section web component for BIM applications. HTML tag: bim-toolbar-section
    ViewportA custom viewport web component for BIM applications. HTML tag: bim-viewport

    Interfaces​

    @@ -16,6 +16,6 @@

    InterfacesType Aliases​

    Type aliasDescription
    ConditionFunctionsRepresents a map of condition functions, where the key is a QueryCondition and the value is a function that evaluates the condition.
    GridLayoutsDefinitionRepresents a collection of predefined grid layouts for the Grid component. Each layout is defined by a unique name, a grid template string, and a map of area names to HTMLElement instances. The grid template string defines the structure of the grid, and the area names correspond to the grid-area property of the HTMLElement instances. The HTMLElement instances are used to populate the grid with content.
    QueryRepresents a query, which can be a single query or a group of queries.
    QueryConditionRepresents a condition used in query building.
    QueryOperatorsRepresents an operator used in query building.
    StatefullComponentRepresents a function that returns a TemplateResult for a stateful component.
    StatelessComponentRepresents a function that returns a TemplateResult for a stateless component.
    TableDataTransformRepresents a transformation function for table data.
    TableRowDataRepresents a row of data for a table.
    TableRowTemplateRepresents a template for rendering a row of data in a table.

    Functions​

    -
    FunctionDescription
    getElementValueExtracts and returns the value of an HTML element's attributes.
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    FunctionDescription
    getElementValueExtracts and returns the value of an HTML element's attributes.
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/CellCreatedEventDetail/index.html b/build/api/@thatopen/ui/interfaces/CellCreatedEventDetail/index.html index d7e324e7c..a94be3449 100644 --- a/build/api/@thatopen/ui/interfaces/CellCreatedEventDetail/index.html +++ b/build/api/@thatopen/ui/interfaces/CellCreatedEventDetail/index.html @@ -4,13 +4,13 @@ CellCreatedEventDetail\<T\> | That Open docs - - + + -
    Skip to main content

    CellCreatedEventDetail<T>

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type parameterValue
    T extends TableRowDataTableRowData
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/ColumnData/index.html b/build/api/@thatopen/ui/interfaces/ColumnData/index.html index 8b904cbaf..8b643fde2 100644 --- a/build/api/@thatopen/ui/interfaces/ColumnData/index.html +++ b/build/api/@thatopen/ui/interfaces/ColumnData/index.html @@ -4,11 +4,11 @@ ColumnData\<T\> | That Open docs - - + + -
    Skip to main content

    ColumnData<T>

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    The width of the column.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/EntryQuery/index.html b/build/api/@thatopen/ui/interfaces/EntryQuery/index.html index 06d2b21e6..8c3238420 100644 --- a/build/api/@thatopen/ui/interfaces/EntryQuery/index.html +++ b/build/api/@thatopen/ui/interfaces/EntryQuery/index.html @@ -4,11 +4,11 @@ EntryQuery | That Open docs - - + + -
    Skip to main content
    +
    Skip to main content
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/HasName/index.html b/build/api/@thatopen/ui/interfaces/HasName/index.html index 550b40484..2ac39d014 100644 --- a/build/api/@thatopen/ui/interfaces/HasName/index.html +++ b/build/api/@thatopen/ui/interfaces/HasName/index.html @@ -4,11 +4,11 @@ HasName | That Open docs - - + + -
    Skip to main content

    HasName

    -

    Represents an object that has a name and an optional label.

    +
    Skip to main content

    HasName

    +

    Represents an object that has a name and an optional label.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/HasValue/index.html b/build/api/@thatopen/ui/interfaces/HasValue/index.html index 6363321b4..922423d4b 100644 --- a/build/api/@thatopen/ui/interfaces/HasValue/index.html +++ b/build/api/@thatopen/ui/interfaces/HasValue/index.html @@ -4,11 +4,11 @@ HasValue | That Open docs - - + + -
    Skip to main content

    HasValue

    -

    Represents an object that has a value and an event for value changes.

    +
    Skip to main content

    HasValue

    +

    Represents an object that has a value and an event for value changes.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/ManagerConfig/index.html b/build/api/@thatopen/ui/interfaces/ManagerConfig/index.html index 064c89579..fd747b6ec 100644 --- a/build/api/@thatopen/ui/interfaces/ManagerConfig/index.html +++ b/build/api/@thatopen/ui/interfaces/ManagerConfig/index.html @@ -4,11 +4,11 @@ ManagerConfig | That Open docs - - + + -
    Skip to main content

    ManagerConfig

    +

    ManagerConfig

    Configuration interface for the Manager class. Defines the properties and their types that can be configured for the Manager.

    Properties​

    sectionLabelOnVerticalToolbar​

    @@ -16,6 +16,6 @@

    Previous
    HasValue
    Next
    QueryGroup

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +Default value is false.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/QueryGroup/index.html b/build/api/@thatopen/ui/interfaces/QueryGroup/index.html index 46384e3e5..44689f290 100644 --- a/build/api/@thatopen/ui/interfaces/QueryGroup/index.html +++ b/build/api/@thatopen/ui/interfaces/QueryGroup/index.html @@ -4,11 +4,11 @@ QueryGroup | That Open docs - - + + -
    Skip to main content

    QueryGroup

    -

    Represents a group of queries with an operator.

    +
    Skip to main content

    QueryGroup

    +

    Represents a group of queries with an operator.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/RowCreatedEventDetail/index.html b/build/api/@thatopen/ui/interfaces/RowCreatedEventDetail/index.html index ecf634f3f..8185d21c0 100644 --- a/build/api/@thatopen/ui/interfaces/RowCreatedEventDetail/index.html +++ b/build/api/@thatopen/ui/interfaces/RowCreatedEventDetail/index.html @@ -4,13 +4,13 @@ RowCreatedEventDetail\<T\> | That Open docs - - + + -
    Skip to main content

    RowCreatedEventDetail<T>

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type parameterValue
    T extends TableRowDataTableRowData
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/RowDeselectedEventDetail/index.html b/build/api/@thatopen/ui/interfaces/RowDeselectedEventDetail/index.html index 4c646f0bf..3d695d8ed 100644 --- a/build/api/@thatopen/ui/interfaces/RowDeselectedEventDetail/index.html +++ b/build/api/@thatopen/ui/interfaces/RowDeselectedEventDetail/index.html @@ -4,13 +4,13 @@ RowDeselectedEventDetail\<T\> | That Open docs - - + + -
    Skip to main content

    RowDeselectedEventDetail<T>

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type parameterValue
    T extends TableRowDataTableRowData
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/RowSelectedEventDetail/index.html b/build/api/@thatopen/ui/interfaces/RowSelectedEventDetail/index.html index a904e7831..367870eb8 100644 --- a/build/api/@thatopen/ui/interfaces/RowSelectedEventDetail/index.html +++ b/build/api/@thatopen/ui/interfaces/RowSelectedEventDetail/index.html @@ -4,13 +4,13 @@ RowSelectedEventDetail\<T\> | That Open docs - - + + -
    Skip to main content

    RowSelectedEventDetail<T>

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type parameterValue
    T extends TableRowDataTableRowData
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/TableGroupData/index.html b/build/api/@thatopen/ui/interfaces/TableGroupData/index.html index 8a7b0f0d5..1c44bb949 100644 --- a/build/api/@thatopen/ui/interfaces/TableGroupData/index.html +++ b/build/api/@thatopen/ui/interfaces/TableGroupData/index.html @@ -4,13 +4,13 @@ TableGroupData\<T\> | That Open docs - - + + -
    Skip to main content

    TableGroupData<T>

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type parameterValue
    T extends TableRowDataTableRowData
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/interfaces/TableGroupTemplate/index.html b/build/api/@thatopen/ui/interfaces/TableGroupTemplate/index.html index 3d664a7a4..da0e436ba 100644 --- a/build/api/@thatopen/ui/interfaces/TableGroupTemplate/index.html +++ b/build/api/@thatopen/ui/interfaces/TableGroupTemplate/index.html @@ -4,13 +4,13 @@ TableGroupTemplate\<T\> | That Open docs - - + + -
    Skip to main content

    TableGroupTemplate<T>

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type parameterValue
    T extends TableRowTemplateTableRowTemplate
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/type-aliases/ConditionFunctions/index.html b/build/api/@thatopen/ui/type-aliases/ConditionFunctions/index.html index 19958964a..a7d58c560 100644 --- a/build/api/@thatopen/ui/type-aliases/ConditionFunctions/index.html +++ b/build/api/@thatopen/ui/type-aliases/ConditionFunctions/index.html @@ -4,14 +4,14 @@ ConditionFunctions | That Open docs - - + + -
    Skip to main content

    ConditionFunctions

    +

    ConditionFunctions

    ConditionFunctions: { [queryCondition in QueryCondition]: Function }

    -

    Represents a map of condition functions, where the key is a QueryCondition and the value is a function that evaluates the condition.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Represents a map of condition functions, where the key is a QueryCondition and the value is a function that evaluates the condition.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/type-aliases/GridLayoutsDefinition/index.html b/build/api/@thatopen/ui/type-aliases/GridLayoutsDefinition/index.html index 8f532eda9..107287999 100644 --- a/build/api/@thatopen/ui/type-aliases/GridLayoutsDefinition/index.html +++ b/build/api/@thatopen/ui/type-aliases/GridLayoutsDefinition/index.html @@ -4,16 +4,16 @@ GridLayoutsDefinition\<T\> | That Open docs - - + + -
    Skip to main content

    GridLayoutsDefinition<T>

    +

    GridLayoutsDefinition<T>

    GridLayoutsDefinition<T>: { [K in keyof T]: Object }

    Represents a collection of predefined grid layouts for the Grid component. Each layout is defined by a unique name, a grid template string, and a map of area names to HTMLElement instances. The grid template string defines the structure of the grid, and the area names correspond to the grid-area property of the HTMLElement instances. The HTMLElement instances are used to populate the grid with content.

    Type parameters​

    -
    Type parameter
    T extends GridLayoutComponents
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type parameter
    T extends GridLayoutComponents
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/type-aliases/Query/index.html b/build/api/@thatopen/ui/type-aliases/Query/index.html index 3d2997d3a..1054358f5 100644 --- a/build/api/@thatopen/ui/type-aliases/Query/index.html +++ b/build/api/@thatopen/ui/type-aliases/Query/index.html @@ -4,14 +4,14 @@ Query | That Open docs - - + + -
    Skip to main content

    Query

    +
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Represents a query, which can be a single query or a group of queries.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/type-aliases/QueryCondition/index.html b/build/api/@thatopen/ui/type-aliases/QueryCondition/index.html index b811a8197..d5639fe8f 100644 --- a/build/api/@thatopen/ui/type-aliases/QueryCondition/index.html +++ b/build/api/@thatopen/ui/type-aliases/QueryCondition/index.html @@ -4,14 +4,14 @@ QueryCondition | That Open docs - - + + -
    Skip to main content

    QueryCondition

    +

    QueryCondition

    QueryCondition: "=" | ">" | ">=" | "<" | "<=" | "?" | "/" | "#"

    -

    Represents a condition used in query building.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Represents a condition used in query building.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/type-aliases/QueryOperators/index.html b/build/api/@thatopen/ui/type-aliases/QueryOperators/index.html index 1ac1eec65..a10e07563 100644 --- a/build/api/@thatopen/ui/type-aliases/QueryOperators/index.html +++ b/build/api/@thatopen/ui/type-aliases/QueryOperators/index.html @@ -4,14 +4,14 @@ QueryOperators | That Open docs - - + + -
    Skip to main content

    QueryOperators

    +

    QueryOperators

    QueryOperators: "&" | "|"

    -

    Represents an operator used in query building.

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    Represents an operator used in query building.

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/type-aliases/StatefullComponent/index.html b/build/api/@thatopen/ui/type-aliases/StatefullComponent/index.html index 369831e2b..dbd4d9fd1 100644 --- a/build/api/@thatopen/ui/type-aliases/StatefullComponent/index.html +++ b/build/api/@thatopen/ui/type-aliases/StatefullComponent/index.html @@ -4,11 +4,11 @@ StatefullComponent()\<S\> | That Open docs - - + + -
    Skip to main content

    StatefullComponent()<S>

    +

    StatefullComponent()<S>

    StatefullComponent<S>: (state, update) => TemplateResult

    @@ -18,6 +18,6 @@

    Type paramet

    Parameters​

    ParameterTypeDescription
    stateSThe current state of the component.
    updateUpdateFunction<S>An update function you can call inside the template.
    WARNING! It can cause infinite loops if not used properly.

    Returns​

    -

    TemplateResult

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    TemplateResult

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/type-aliases/StatelessComponent/index.html b/build/api/@thatopen/ui/type-aliases/StatelessComponent/index.html index 002e1eba9..ec02897e4 100644 --- a/build/api/@thatopen/ui/type-aliases/StatelessComponent/index.html +++ b/build/api/@thatopen/ui/type-aliases/StatelessComponent/index.html @@ -4,16 +4,16 @@ StatelessComponent() | That Open docs - - + + -
    Skip to main content

    StatelessComponent()

    +

    StatelessComponent()

    StatelessComponent: () => TemplateResult

    Represents a function that returns a TemplateResult for a stateless component.

    Returns​

    -

    TemplateResult

    Copyright © 2024 That Open Company. Built with Docusaurus.
    +

    TemplateResult

    \ No newline at end of file diff --git a/build/api/@thatopen/ui/type-aliases/TableDataTransform/index.html b/build/api/@thatopen/ui/type-aliases/TableDataTransform/index.html index e5eff80bf..91321caf5 100644 --- a/build/api/@thatopen/ui/type-aliases/TableDataTransform/index.html +++ b/build/api/@thatopen/ui/type-aliases/TableDataTransform/index.html @@ -4,16 +4,16 @@ TableDataTransform\<T\> | That Open docs - - + + -
    Skip to main content

    TableDataTransform<T>

    +

    TableDataTransform<T>

    TableDataTransform<T>: { [K in keyof T]?: Function }

    Represents a transformation function for table data.

    Type parameters​

    -
    Type parameterValue
    T extends TableRowDataTableRowData
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type parameterValue
    T extends TableRowDataTableRowData
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/type-aliases/TableRowData/index.html b/build/api/@thatopen/ui/type-aliases/TableRowData/index.html index c79d030db..1411d3b7f 100644 --- a/build/api/@thatopen/ui/type-aliases/TableRowData/index.html +++ b/build/api/@thatopen/ui/type-aliases/TableRowData/index.html @@ -4,16 +4,16 @@ TableRowData\<T\> | That Open docs - - + + -
    Skip to main content

    TableRowData<T>

    +

    TableRowData<T>

    TableRowData<T>: Record<keyof T, TableCellValue>

    Represents a row of data for a table.

    Type parameters​

    -
    Type parameterValue
    T extends Record<string, TableCellValue>Record<string, TableCellValue>
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type parameterValue
    T extends Record<string, TableCellValue>Record<string, TableCellValue>
    \ No newline at end of file diff --git a/build/api/@thatopen/ui/type-aliases/TableRowTemplate/index.html b/build/api/@thatopen/ui/type-aliases/TableRowTemplate/index.html index b2caa67c4..09d0e8d68 100644 --- a/build/api/@thatopen/ui/type-aliases/TableRowTemplate/index.html +++ b/build/api/@thatopen/ui/type-aliases/TableRowTemplate/index.html @@ -4,16 +4,16 @@ TableRowTemplate\<T\> | That Open docs - - + + -
    Skip to main content

    TableRowTemplate<T>

    +

    TableRowTemplate<T>

    TableRowTemplate<T>: Partial<Record<keyof T, CellRenderValue>>

    Represents a template for rendering a row of data in a table.

    Type parameters​

    -
    Type parameterValue
    T extends TableRowDataTableRowData
    Copyright © 2024 That Open Company. Built with Docusaurus.
    +
    Type parameterValue
    T extends TableRowDataTableRowData
    \ No newline at end of file diff --git a/build/api/index.html b/build/api/index.html index 05df61084..3f585f6d2 100644 --- a/build/api/index.html +++ b/build/api/index.html @@ -4,12 +4,12 @@ 📋 API | That Open docs - - + +
    Skip to main content

    📋 API

    Packages​

    -
    NameVersionDescription
    @thatopen/components2.4.2Collection of core functionalities to author BIM apps.
    @thatopen/components-front2.4.2Collection of frontend tools to author BIM apps.
    @thatopen/fragments2.4.0Simple geometric system built on top of Three.js to display 3D BIM data efficiently.
    @thatopen/ui2.4.1Collection of web components (UI components) meant to be used, but not limited to, BIM applications.
    @thatopen/ui-obc2.4.1Collection of web components (UI components) implementations to use with @thatopen/components.
    +
    NameVersionDescription
    @thatopen/components2.4.4Collection of core functionalities to author BIM apps.
    @thatopen/components-front2.4.4Collection of frontend tools to author BIM apps.
    @thatopen/ui2.4.2Collection of web components (UI components) meant to be used, but not limited to, BIM applications.
    @thatopen/ui-obc2.4.1Collection of web components (UI components) implementations to use with @thatopen/components.
    \ No newline at end of file diff --git a/build/assets/js/01976200.1db551a7.js b/build/assets/js/01976200.1db551a7.js new file mode 100644 index 000000000..41e17c0e6 --- /dev/null +++ b/build/assets/js/01976200.1db551a7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[2998],{2599:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>m,frontMatter:()=>i,metadata:()=>r,toc:()=>d});var s=t(4848),o=t(8453);const i={},a=void 0,r={id:"Tutorials/Components/Front/EdgeMeasurement",title:"EdgeMeasurement",description:'window.open("https://thatopen.github.io/engine_components/examples/EdgeMeasurement")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Front/EdgeMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/EdgeMeasurement",permalink:"/Tutorials/Components/Front/EdgeMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ClipEdges",permalink:"/Tutorials/Components/Front/ClipEdges"},next:{title:"FaceMeasurement",permalink:"/Tutorials/Components/Front/FaceMeasurement"}},l={},d=[{value:"\ud83d\udcd0 Measuring edges",id:"-measuring-edges",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddf3 Loading a BIM model",id:"-loading-a-bim-model",level:3},{value:"\ud83d\udee0\ufe0f Getting the edge measurements",id:"\ufe0f-getting-the-edge-measurements",level:3},{value:"\ud83d\uddb1\ufe0f Setting up mouse events",id:"\ufe0f-setting-up-mouse-events",level:3},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function c(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{style:{position:"relative"},children:[(0,s.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/EdgeMeasurement"}),(0,s.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/EdgeMeasurement"),children:"Go Full Screen"})]}),"\n",(0,s.jsx)(n.admonition,{title:"Source",type:"info",children:(0,s.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,s.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/EdgeMeasurement/example.ts",children:"here"}),"."]})}),"\n",(0,s.jsx)(n.h3,{id:"-measuring-edges",children:"\ud83d\udcd0 Measuring edges"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an edge measurement tool to your end users.\nWe will import:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"three"})," to create some 3D items."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components-front"})," to use some frontend-oriented components."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as THREE from "three";\nimport * as OBC from "@thatopen/components";\nimport * as BUI from "@thatopen/ui";\nimport * as OBCF from "@thatopen/components-front";\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBCF.PostproductionRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.PostproductionRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,s.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-loading-a-bim-model",children:"\ud83e\uddf3 Loading a BIM model"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file."}),"\n",(0,s.jsx)(n.admonition,{title:"Fragments?",type:"tip",children:(0,s.jsx)(n.p,{children:"If you are not familiar with fragments, check out the IfcLoader tutorial!"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const fragments = new OBC.FragmentsManager(components);\nconst file = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.frag",\n);\nconst data = await file.arrayBuffer();\nconst buffer = new Uint8Array(data);\nconst model = fragments.load(buffer);\nworld.scene.three.add(model);\n\nfor (const child of model.children) {\n if (child instanceof THREE.Mesh) {\n world.meshes.add(child);\n }\n}\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-getting-the-edge-measurements",children:"\ud83d\udee0\ufe0f Getting the edge measurements"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"First, let's get an instance of the edge measurement component and initialize it:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const dimensions = components.get(OBCF.EdgeMeasurement);\ndimensions.world = world;\ndimensions.enabled = true;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-setting-up-mouse-events",children:"\ud83d\uddb1\ufe0f Setting up mouse events"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Now, we'll define how to create the edge dimensions. In this case, we'll keep it simple and use the double click event of the container HTML element."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"container.ondblclick = () => dimensions.create();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-deleting-the-dimensions",children:"\ud83e\uddf9 Deleting the Dimensions"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["Now that we know how to make multiple dimensions, we'll learn how to delete them when necessary. Dimensions can be removed using the ",(0,s.jsx)(n.code,{children:"deleteAll()"})," method, which deletes all the created dimensions. You can also use the ",(0,s.jsx)(n.code,{children:"delete()"})," method to just delete one dimension (the one under the mouse cursor). Let's set up some basic key events that allow us to delete, save and recover the dimensions:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'let saved: number[][];\n\nwindow.addEventListener("keydown", (event) => {\n if (event.code === "KeyO") {\n dimensions.delete();\n } else if (event.code === "KeyS") {\n saved = dimensions.get();\n dimensions.deleteAll();\n } else if (event.code === "KeyL") {\n if (saved) {\n dimensions.set(saved);\n }\n }\n});\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["We'll use the ",(0,s.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["We will use the ",(0,s.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,s.jsx)(n.code,{children:"init"})," method of the ",(0,s.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,s.jsx)(n.p,{children:"Now we will add some UI to have some control over the dimensions we create. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n Create dimension: Double click \n Delete dimension: Press O \n Delete all dimensions: Press S \n Set/Show saved dimensions: Press L \n \n \n \n \n \n \n \n \n\n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"That's it! You have created an app that can create and delete edge dimensions on any 3D object. Congratulations!"})]})}function m(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>r});var s=t(6540);const o={},i=s.createContext(o);function a(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/01976200.ea89a6a9.js b/build/assets/js/01976200.ea89a6a9.js deleted file mode 100644 index 08d64b0c6..000000000 --- a/build/assets/js/01976200.ea89a6a9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[2998],{2599:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>m,frontMatter:()=>r,metadata:()=>a,toc:()=>d});var s=t(4848),o=t(8453);const r={},i=void 0,a={id:"Tutorials/Components/Front/EdgeMeasurement",title:"EdgeMeasurement",description:'window.open("https://thatopen.github.io/engine_components/examples/EdgeMeasurement")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Front/EdgeMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/EdgeMeasurement",permalink:"/Tutorials/Components/Front/EdgeMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ClipEdges",permalink:"/Tutorials/Components/Front/ClipEdges"},next:{title:"FaceMeasurement",permalink:"/Tutorials/Components/Front/FaceMeasurement"}},l={},d=[{value:"\ud83d\udcd0 Measuring edges",id:"-measuring-edges",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddf3 Loading a BIM model",id:"-loading-a-bim-model",level:3},{value:"\ud83d\udee0\ufe0f Getting the edge measurements",id:"\ufe0f-getting-the-edge-measurements",level:3},{value:"\ud83d\uddb1\ufe0f Setting up mouse events",id:"\ufe0f-setting-up-mouse-events",level:3},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function c(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{style:{position:"relative"},children:[(0,s.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/EdgeMeasurement"}),(0,s.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/EdgeMeasurement"),children:"Go Full Screen"})]}),"\n",(0,s.jsx)(n.admonition,{title:"Source",type:"info",children:(0,s.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,s.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/EdgeMeasurement/example.ts",children:"here"}),"."]})}),"\n",(0,s.jsx)(n.h3,{id:"-measuring-edges",children:"\ud83d\udcd0 Measuring edges"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an edge measurement tool to your end users.\nWe will import:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"three"})," to create some 3D items."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components-front"})," to use some frontend-oriented components."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as THREE from "three";\nimport * as OBC from "@thatopen/components";\nimport * as OBCF from "@thatopen/components-front";\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBCF.PostproductionRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.PostproductionRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,s.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-loading-a-bim-model",children:"\ud83e\uddf3 Loading a BIM model"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file."}),"\n",(0,s.jsx)(n.admonition,{title:"Fragments?",type:"tip",children:(0,s.jsx)(n.p,{children:"If you are not familiar with fragments, check out the IfcLoader tutorial!"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const fragments = new OBC.FragmentsManager(components);\nconst file = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.frag",\n);\nconst data = await file.arrayBuffer();\nconst buffer = new Uint8Array(data);\nconst model = fragments.load(buffer);\nworld.scene.three.add(model);\n\nfor (const child of model.children) {\n if (child instanceof THREE.Mesh) {\n world.meshes.add(child);\n }\n}\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-getting-the-edge-measurements",children:"\ud83d\udee0\ufe0f Getting the edge measurements"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"First, let's get an instance of the edge measurement component and initialize it:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const dimensions = components.get(OBCF.EdgeMeasurement);\ndimensions.world = world;\ndimensions.enabled = true;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-setting-up-mouse-events",children:"\ud83d\uddb1\ufe0f Setting up mouse events"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Now, we'll define how to create the edge dimensions. In this case, we'll keep it simple and use the double click event of the container HTML element."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"container.ondblclick = () => dimensions.create();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-deleting-the-dimensions",children:"\ud83e\uddf9 Deleting the Dimensions"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["Now that we know how to make multiple dimensions, we'll learn how to delete them when necessary. Dimensions can be removed using the ",(0,s.jsx)(n.code,{children:"deleteAll()"})," method, which deletes all the created dimensions. You can also use the ",(0,s.jsx)(n.code,{children:"delete()"})," method to just delete one dimension (the one under the mouse cursor). Let's set up some basic key events that allow us to delete, save and recover the dimensions:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'let saved: number[][];\n\nwindow.addEventListener("keydown", (event) => {\n if (event.code === "KeyO") {\n dimensions.delete();\n } else if (event.code === "KeyS") {\n saved = dimensions.get();\n dimensions.deleteAll();\n } else if (event.code === "KeyL") {\n if (saved) {\n dimensions.set(saved);\n }\n }\n});\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["We'll use the ",(0,s.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"That's it! You have created an app that can create and delete edge dimensions on any 3D object. Congratulations!"})]})}function m(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var s=t(6540);const o={},r=s.createContext(o);function i(e){const n=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/02e85b7e.f2d8856d.js b/build/assets/js/02e85b7e.f2d8856d.js deleted file mode 100644 index 98b538bdb..000000000 --- a/build/assets/js/02e85b7e.f2d8856d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[883],{90:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>a,metadata:()=>c,toc:()=>l});var r=s(4848),t=s(8453);const a={},i="IfcMetadata",c={id:"api/@thatopen/fragments/interfaces/IfcMetadata",title:"IfcMetadata",description:"Represents metadata related to the IFC model.",source:"@site/docs/api/@thatopen/fragments/interfaces/IfcMetadata.md",sourceDirName:"api/@thatopen/fragments/interfaces",slug:"/api/@thatopen/fragments/interfaces/IfcMetadata",permalink:"/api/@thatopen/fragments/interfaces/IfcMetadata",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FragmentIdMap",permalink:"/api/@thatopen/fragments/interfaces/FragmentIdMap"},next:{title:"IfcProperties",permalink:"/api/@thatopen/fragments/interfaces/IfcProperties"}},d={},l=[{value:"Remarks",id:"remarks",level:2},{value:"Example",id:"example",level:2},{value:"Properties",id:"properties",level:2},{value:"description",id:"description",level:3},{value:"maxExpressID",id:"maxexpressid",level:3},{value:"Remarks",id:"remarks-1",level:4},{value:"name",id:"name",level:3},{value:"schema",id:"schema",level:3},{value:"Remarks",id:"remarks-2",level:4}];function o(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"ifcmetadata",children:"IfcMetadata"}),"\n",(0,r.jsx)(n.p,{children:"Represents metadata related to the IFC model."}),"\n",(0,r.jsx)(n.h2,{id:"remarks",children:"Remarks"}),"\n",(0,r.jsx)(n.p,{children:"This interface contains information about the name, description, schema version, and the maximum expressID of the IFC model."}),"\n",(0,r.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:'const ifcMetadata: IfcMetadata = {\r\n name: "My IFC Model",\r\n description: "A sample IFC model",\r\n schema: "IFC4X3",\r\n maxExpressID: 12345,\r\n};\n'})}),"\n",(0,r.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsx)(n.h3,{id:"description",children:"description"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"description"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"A brief description of the IFC model."}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"maxexpressid",children:"maxExpressID"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"maxExpressID"}),": ",(0,r.jsx)(n.code,{children:"number"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"The maximum expressID of the IFC model."}),"\n",(0,r.jsx)(n.h4,{id:"remarks-1",children:"Remarks"}),"\n",(0,r.jsx)(n.p,{children:"The expressID is a unique identifier for each IFC entity."}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"name",children:"name"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"name"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"The name of the IFC model."}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"schema",children:"schema"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"schema"}),": ",(0,r.jsx)(n.a,{href:"/api/@thatopen/fragments/type-aliases/IfcSchema",children:(0,r.jsx)(n.code,{children:"IfcSchema"})})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"The version of the IFC schema used in the model."}),"\n",(0,r.jsx)(n.h4,{id:"remarks-2",children:"Remarks"}),"\n",(0,r.jsx)(n.p,{children:"The supported IFC schemas are:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"IFC2X3"}),"\n",(0,r.jsx)(n.li,{children:"IFC4"}),"\n",(0,r.jsx)(n.li,{children:"IFC4X3"}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>c});var r=s(6540);const t={},a=r.createContext(t);function i(e){const n=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/0dcd76a4.23a7b153.js b/build/assets/js/0dcd76a4.23a7b153.js new file mode 100644 index 000000000..20c128efc --- /dev/null +++ b/build/assets/js/0dcd76a4.23a7b153.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[1230],{4553:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>p,frontMatter:()=>a,metadata:()=>s,toc:()=>c});var o=n(4848),i=n(8453);const a={},r=void 0,s={id:"Tutorials/UserInterface/OBC/EntityAttributes",title:"EntityAttributes",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/EntityAttributes")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/EntityAttributes.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/EntityAttributes",permalink:"/Tutorials/UserInterface/OBC/EntityAttributes",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ElementProperties",permalink:"/Tutorials/UserInterface/OBC/ElementProperties"},next:{title:"ModelsList",permalink:"/Tutorials/UserInterface/OBC/ModelsList"}},l={},c=[{value:"Displaying data the advanced way \ud83d\udd25\ud83d\udd25",id:"displaying-data-the-advanced-way-",level:2},{value:"\ud83d\udd96 Importing our Libraries",id:"-importing-our-libraries",level:3},{value:"\ud83d\udccb Initializing the UI",id:"-initializing-the-ui",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"Loading a model and computing it's relations",id:"loading-a-model-and-computing-its-relations",level:3},{value:"Preconfiguring the table",id:"preconfiguring-the-table",level:3},{value:"Creating a panel to append the table",id:"creating-a-panel-to-append-the-table",level:3}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/EntityAttributes"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/EntityAttributes"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(t.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(t.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(t.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/EntityAttributes/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(t.h2,{id:"displaying-data-the-advanced-way-",children:"Displaying data the advanced way \ud83d\udd25\ud83d\udd25"}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsx)(t.p,{children:"What is a good BIM app if you don't give users a nice way to visualize its model properties, right? Well, hold tight as here you will learn all you need to know in order to use the power of UI Components to accomplish that!"}),"\n",(0,o.jsx)(t.h3,{id:"-importing-our-libraries",children:"\ud83d\udd96 Importing our Libraries"}),"\n",(0,o.jsx)(t.p,{children:"In this tutorial, we will import:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"web-ifc to get some IFC items."}),"\n",(0,o.jsx)(t.li,{children:"@thatopen/ui to add some simple and cool UI menus."}),"\n",(0,o.jsx)(t.li,{children:"@thatopen/components to set up the barebone of our app."}),"\n",(0,o.jsx)(t.li,{children:"@thatopen/components-front to use some frontend-oriented components."}),"\n",(0,o.jsx)(t.li,{children:"@thatopen/ui-obc to add some cool pre-made UI menus for components."}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'/* eslint-disable no-alert import * as WEBIFC from "web-ifc";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "@thatopen/components";\nimport * as OBCF from "@thatopen/components-front";\n// You have to import from "@thatopen/ui-obc"\nimport * as BUIC from "../..";\n'})}),"\n",(0,o.jsx)(t.h3,{id:"-initializing-the-ui",children:"\ud83d\udccb Initializing the UI"}),"\n",(0,o.jsx)(t.p,{children:"As always, let's first initialize the UI library. Remember you only have to do it once in your entire app."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(t.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsx)(t.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create();\nconst sceneComponent = new OBC.SimpleScene(components);\nsceneComponent.setup();\nworld.scene = sceneComponent;\n\nconst viewport = document.createElement("bim-viewport");\nconst rendererComponent = new OBC.SimpleRenderer(components, viewport);\nworld.renderer = rendererComponent;\n\nconst cameraComponent = new OBC.SimpleCamera(components);\nworld.camera = cameraComponent;\ncameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);\n\nviewport.addEventListener("resize", () => {\n rendererComponent.resize();\n cameraComponent.updateAspect();\n});\n\ncomponents.init();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(t.h3,{id:"loading-a-model-and-computing-its-relations",children:"Loading a model and computing it's relations"}),"\n",(0,o.jsx)(t.p,{children:"First things first... let's load a model \ud83d\udc47"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\nconst file = await fetch(\n "https://thatopen.github.io/engine_ui-components/resources/small.ifc",\n);\nconst buffer = await file.arrayBuffer();\nconst typedArray = new Uint8Array(buffer);\nconst model = await ifcLoader.load(typedArray);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsx)(t.p,{children:"You don't need to add the model into the scene to display its properties. However, as we are going to display the attributes for each selected element, then having the model into the scene is obvious, right?"})}),"\n",(0,o.jsxs)(t.p,{children:["Now, in order to get the most out of the entities table, you need to calculate the relations index of your model. To do it, you will need to use the ",(0,o.jsx)(t.a,{href:"/Tutorials/Components/Core/IfcRelationsIndexer",children:"IfcRelationsIndexer"})," component from ",(0,o.jsx)(t.code,{children:"@thatopen/components"})," to speed up the process."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"const indexer = components.get(OBC.IfcRelationsIndexer);\nawait indexer.process(model);\n"})}),"\n",(0,o.jsx)(t.h3,{id:"preconfiguring-the-table",children:"Preconfiguring the table"}),"\n",(0,o.jsx)(t.p,{children:"The attributes table has some optional configurations. One of them is the ability to modify the styles of the cell value based on the attribute value (e.g., colorizing entities with a specific string in its name, or numeric values based on a codition ). For it, let's first create a simple base style that all our cell overwrites will share:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const baseStyle: Record = {\n padding: "0.25rem",\n borderRadius: "0.25rem",\n};\n'})}),"\n",(0,o.jsxs)(t.p,{children:["Then, let's create an object where the keys are the attribute values you want to overwrite its styles, and the values are functions that returns an ",(0,o.jsx)(t.code,{children:"html"})," template result."]}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["If you want to learn more about the ",(0,o.jsx)(t.code,{children:"html"})," template tag and how to use it, just take a look at the tutorial on how to make a custom component."]})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const tableDefinition: BUI.TableDataTransform = {\n Entity: (entity) => {\n let style = {};\n if (entity === OBC.IfcCategoryMap[WEBIFC.IFCPROPERTYSET]) {\n style = {\n ...baseStyle,\n backgroundColor: "purple",\n color: "white",\n };\n }\n if (String(entity).includes("IFCWALL")) {\n style = {\n ...baseStyle,\n backgroundColor: "green",\n color: "white",\n };\n }\n return BUI.html`${entity}`;\n },\n PredefinedType: (type) => {\n const colors = ["#1c8d83", "#3c1c8d", "#386c19", "#837c24"];\n const randomIndex = Math.floor(Math.random() * colors.length);\n const backgroundColor = colors[randomIndex];\n const style = { ...baseStyle, backgroundColor, color: "white" };\n return BUI.html`${type}`;\n },\n NominalValue: (value) => {\n let style = {};\n if (typeof value === "boolean" && value === false) {\n style = { ...baseStyle, backgroundColor: "#b13535", color: "white" };\n }\n if (typeof value === "boolean" && value === true) {\n style = { ...baseStyle, backgroundColor: "#18882c", color: "white" };\n }\n return BUI.html`${value}`;\n },\n};\n'})}),"\n",(0,o.jsx)(t.p,{children:"Keep in mind the step above is optional! Not needed for the table to work. Now its time to create the table using the predefine functional component that ships with the library \ud83d\ude42"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const [attributesTable, updateAttributesTable] = BUIC.tables.entityAttributes({\n components,\n fragmentIdMap: {},\n tableDefinition,\n attributesToInclude: () => {\n const attributes: any[] = [\n "Name",\n "ContainedInStructure",\n "HasProperties",\n "HasPropertySets",\n (name: string) => name.includes("Value"),\n (name: string) => name.startsWith("Material"),\n (name: string) => name.startsWith("Relating"),\n (name: string) => {\n const ignore = ["IsGroupedBy", "IsDecomposedBy"];\n return name.startsWith("Is") && !ignore.includes(name);\n },\n ];\n return attributes;\n },\n});\n\nattributesTable.expanded = true;\nattributesTable.indentationInText = true;\nattributesTable.preserveStructureOnFilter = true;\n'})}),"\n",(0,o.jsxs)(t.p,{children:["Cool! attributes table created. Then after, let's tell the attributes table to update each time the user makes a selection over the model. For it, we will use the ",(0,o.jsx)(t.a,{href:"/Tutorials/Components/Front/Highlighter",children:"Highlighter"}),":"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"const highlighter = components.get(OBCF.Highlighter);\nhighlighter.setup({ world });\n\nhighlighter.events.select.onHighlight.add((fragmentIdMap) => {\n updateAttributesTable({ fragmentIdMap });\n});\n\nhighlighter.events.select.onClear.add(() =>\n updateAttributesTable({ fragmentIdMap: {} }),\n);\n"})}),"\n",(0,o.jsx)(t.h3,{id:"creating-a-panel-to-append-the-table",children:"Creating a panel to append the table"}),"\n",(0,o.jsx)(t.p,{children:"Allright! Let's now create a BIM Panel to control some aspects of the attributes table and to trigger some functionalities like copying the values to TSV or exporing the data to JSON \ud83d\ude09"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const entityAttributesPanel = BUI.Component.create(() => {\n const onSearchInput = (e: Event) => {\n const input = e.target as BUI.TextInput;\n attributesTable.queryString = input.value;\n };\n\n const onPreserveStructureChange = (e: Event) => {\n const checkbox = e.target as BUI.Checkbox;\n attributesTable.preserveStructureOnFilter = checkbox.checked;\n };\n\n const onExportJSON = () => {\n attributesTable.downloadData("entities-attributes");\n };\n\n const onCopyTSV = async () => {\n await navigator.clipboard.writeText(attributesTable.tsv);\n alert(\n "Table data copied as TSV in clipboard! Try to paste it in a spreadsheet app.",\n );\n };\n\n const onAttributesChange = (e: Event) => {\n const dropdown = e.target as BUI.Dropdown;\n updateAttributesTable({\n attributesToInclude: () => {\n const attributes: any[] = [\n ...dropdown.value,\n (name: string) => name.includes("Value"),\n (name: string) => name.startsWith("Material"),\n (name: string) => name.startsWith("Relating"),\n (name: string) => {\n const ignore = ["IsGroupedBy", "IsDecomposedBy"];\n return name.startsWith("Is") && !ignore.includes(name);\n },\n ];\n return attributes;\n },\n });\n };\n\n return BUI.html`\n \n \n
    \n
    \n \n \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    \n ${attributesTable}\n     \n     \n `;\n});\n'})}),"\n",(0,o.jsx)(t.p,{children:"Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const app = document.createElement("bim-grid");\napp.layouts = {\n main: {\n template: `\n "viewport" 1fr\n "entityAttributesPanel" 1fr\n `,\n elements: { entityAttributesPanel, viewport },\n },\n};\n\napp.layout = "main";\ndocument.body.append(app);\n'})}),"\n",(0,o.jsx)(t.p,{children:"Congratulations! You have now created a fully working advanced attributes table for your app in less than 10 minutes of work. Keep going with more tutorials! \ud83d\udcaa"})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>r,x:()=>s});var o=n(6540);const i={},a=o.createContext(i);function r(e){const t=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/0dcd76a4.d4f48477.js b/build/assets/js/0dcd76a4.d4f48477.js deleted file mode 100644 index a2558001b..000000000 --- a/build/assets/js/0dcd76a4.d4f48477.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[1230],{4553:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>p,frontMatter:()=>a,metadata:()=>s,toc:()=>c});var o=n(4848),i=n(8453);const a={},r=void 0,s={id:"Tutorials/UserInterface/OBC/EntityAttributes",title:"EntityAttributes",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/EntityAttributes")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/EntityAttributes.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/EntityAttributes",permalink:"/Tutorials/UserInterface/OBC/EntityAttributes",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ElementProperties",permalink:"/Tutorials/UserInterface/OBC/ElementProperties"},next:{title:"ModelsList",permalink:"/Tutorials/UserInterface/OBC/ModelsList"}},l={},c=[{value:"Displaying data the advanced way \ud83d\udd25\ud83d\udd25",id:"displaying-data-the-advanced-way-",level:2},{value:"Loading a model and computing it's relations",id:"loading-a-model-and-computing-its-relations",level:3},{value:"Preconfiguring the table",id:"preconfiguring-the-table",level:3},{value:"Creating a panel to append the table",id:"creating-a-panel-to-append-the-table",level:3}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/EntityAttributes"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/EntityAttributes"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(t.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(t.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(t.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/EntityAttributes/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(t.h2,{id:"displaying-data-the-advanced-way-",children:"Displaying data the advanced way \ud83d\udd25\ud83d\udd25"}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsx)(t.p,{children:"What is a good BIM app if you don't give users a nice way to visualize its model properties, right? Well, hold tight as here you will learn all you need to know in order to use the power of UI Components to accomplish that!"}),"\n",(0,o.jsx)(t.h3,{id:"loading-a-model-and-computing-its-relations",children:"Loading a model and computing it's relations"}),"\n",(0,o.jsx)(t.p,{children:"First things first... let's load a model \ud83d\udc47"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'import * as WEBIFC from "web-ifc";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "@thatopen/components";\nimport * as OBF from "@thatopen/components-front";\nimport * as CUI from "../..";\n\nBUI.Manager.init();\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create();\nconst sceneComponent = new OBC.SimpleScene(components);\nsceneComponent.setup();\nworld.scene = sceneComponent;\n\nconst viewport = document.createElement("bim-viewport");\nconst rendererComponent = new OBC.SimpleRenderer(components, viewport);\nworld.renderer = rendererComponent;\n\nconst cameraComponent = new OBC.SimpleCamera(components);\nworld.camera = cameraComponent;\ncameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);\n\nviewport.addEventListener("resize", () => {\n rendererComponent.resize();\n cameraComponent.updateAspect();\n});\n\ncomponents.init();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsx)(t.p,{children:"You don't need to add the model into the scene to display its properties. However, as we are going to display the attributes for each selected element, then having the model into the scene is obvious, right?"})}),"\n",(0,o.jsxs)(t.p,{children:["Now, in order to get the most out of the entities table, you need to calculate the relations index of your model. To do it, you will need to use the ",(0,o.jsx)(t.a,{href:"/Tutorials/Components/Core/IfcRelationsIndexer",children:"IfcRelationsIndexer"})," component from ",(0,o.jsx)(t.code,{children:"@thatopen/components"})," to speed up the process."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\nconst file = await fetch(\n "https://thatopen.github.io/engine_ui-components/resources/small.ifc",\n);\nconst buffer = await file.arrayBuffer();\nconst typedArray = new Uint8Array(buffer);\nconst model = await ifcLoader.load(typedArray);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(t.h3,{id:"preconfiguring-the-table",children:"Preconfiguring the table"}),"\n",(0,o.jsx)(t.p,{children:"The attributes table has some optional configurations. One of them is the ability to modify the styles of the cell value based on the attribute value (e.g., colorizing entities with a specific string in its name, or numeric values based on a codition ). For it, let's first create a simple base style that all our cell overwrites will share:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"const indexer = components.get(OBC.IfcRelationsIndexer);\nawait indexer.process(model);\n"})}),"\n",(0,o.jsxs)(t.p,{children:["Then, let's create an object where the keys are the attribute values you want to overwrite its styles, and the values are functions that returns an ",(0,o.jsx)(t.code,{children:"html"})," template result."]}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["If you want to learn more about the ",(0,o.jsx)(t.code,{children:"html"})," template tag and how to use it, just take a look at the tutorial on how to make a custom component."]})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const baseStyle: Record = {\n padding: "0.25rem",\n borderRadius: "0.25rem",\n};\n'})}),"\n",(0,o.jsx)(t.p,{children:"Keep in mind the step above is optional! Not needed for the table to work. Now its time to create the table using the predefine functional component that ships with the library \ud83d\ude42"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const tableDefinition: BUI.TableDataTransform = {\n Entity: (entity) => {\n let style = {};\n if (entity === OBC.IfcCategoryMap[WEBIFC.IFCPROPERTYSET]) {\n style = {\n ...baseStyle,\n backgroundColor: "purple",\n color: "white",\n };\n }\n if (String(entity).includes("IFCWALL")) {\n style = {\n ...baseStyle,\n backgroundColor: "green",\n color: "white",\n };\n }\n return BUI.html`${entity}`;\n },\n PredefinedType: (type) => {\n const colors = ["#1c8d83", "#3c1c8d", "#386c19", "#837c24"];\n const randomIndex = Math.floor(Math.random() * colors.length);\n const backgroundColor = colors[randomIndex];\n const style = { ...baseStyle, backgroundColor, color: "white" };\n return BUI.html`${type}`;\n },\n NominalValue: (value) => {\n let style = {};\n if (typeof value === "boolean" && value === false) {\n style = { ...baseStyle, backgroundColor: "#b13535", color: "white" };\n }\n if (typeof value === "boolean" && value === true) {\n style = { ...baseStyle, backgroundColor: "#18882c", color: "white" };\n }\n return BUI.html`${value}`;\n },\n};\n'})}),"\n",(0,o.jsxs)(t.p,{children:["Cool! attributes table created. Then after, let's tell the attributes table to update each time the user makes a selection over the model. For it, we will use the ",(0,o.jsx)(t.a,{href:"/Tutorials/Components/Front/Highlighter",children:"Highlighter"}),":"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const [attributesTable, updateAttributesTable] = CUI.tables.entityAttributes({\n components,\n fragmentIdMap: {},\n tableDefinition,\n attributesToInclude: () => {\n const attributes: any[] = [\n "Name",\n "ContainedInStructure",\n "HasProperties",\n "HasPropertySets",\n (name: string) => name.includes("Value"),\n (name: string) => name.startsWith("Material"),\n (name: string) => name.startsWith("Relating"),\n (name: string) => {\n const ignore = ["IsGroupedBy", "IsDecomposedBy"];\n return name.startsWith("Is") && !ignore.includes(name);\n },\n ];\n return attributes;\n },\n});\n\nattributesTable.expanded = true;\nattributesTable.indentationInText = true;\nattributesTable.preserveStructureOnFilter = true;\n'})}),"\n",(0,o.jsx)(t.h3,{id:"creating-a-panel-to-append-the-table",children:"Creating a panel to append the table"}),"\n",(0,o.jsx)(t.p,{children:"Allright! Let's now create a BIM Panel to control some aspects of the attributes table and to trigger some functionalities like copying the values to TSV or exporing the data to JSON \ud83d\ude09"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"const highlighter = components.get(OBF.Highlighter);\nhighlighter.setup({ world });\n\nhighlighter.events.select.onHighlight.add((fragmentIdMap) => {\n updateAttributesTable({ fragmentIdMap });\n});\n\nhighlighter.events.select.onClear.add(() =>\n updateAttributesTable({ fragmentIdMap: {} }),\n);\n"})}),"\n",(0,o.jsx)(t.p,{children:"Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const entityAttributesPanel = BUI.Component.create(() => {\n const onSearchInput = (e: Event) => {\n const input = e.target as BUI.TextInput;\n attributesTable.queryString = input.value;\n };\n\n const onPreserveStructureChange = (e: Event) => {\n const checkbox = e.target as BUI.Checkbox;\n attributesTable.preserveStructureOnFilter = checkbox.checked;\n };\n\n const onExportJSON = () => {\n attributesTable.downloadData("entities-attributes");\n };\n\n const onCopyTSV = async () => {\n await navigator.clipboard.writeText(attributesTable.tsv);\n alert(\n "Table data copied as TSV in clipboard! Try to paste it in a spreadsheet app.",\n );\n };\n\n const onAttributesChange = (e: Event) => {\n const dropdown = e.target as BUI.Dropdown;\n updateAttributesTable({\n attributesToInclude: () => {\n const attributes: any[] = [\n ...dropdown.value,\n (name: string) => name.includes("Value"),\n (name: string) => name.startsWith("Material"),\n (name: string) => name.startsWith("Relating"),\n (name: string) => {\n const ignore = ["IsGroupedBy", "IsDecomposedBy"];\n return name.startsWith("Is") && !ignore.includes(name);\n },\n ];\n return attributes;\n },\n });\n };\n\n return BUI.html`\n \n \n
    \n
    \n \n \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    \n ${attributesTable}\n     \n     \n `;\n});\n'})}),"\n",(0,o.jsx)(t.p,{children:"Congratulations! You have now created a fully working advanced attributes table for your app in less than 10 minutes of work. Keep going with more tutorials! \ud83d\udcaa"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const app = document.createElement("bim-grid");\napp.layouts = {\n main: {\n template: `\n "viewport" 1fr\n "entityAttributesPanel" 1fr\n `,\n elements: { entityAttributesPanel, viewport },\n },\n};\n\napp.layout = "main";\ndocument.body.append(app);\n'})})]})}function p(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>r,x:()=>s});var o=n(6540);const i={},a=o.createContext(i);function r(e){const t=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/11609d9c.24b8c9eb.js b/build/assets/js/11609d9c.24b8c9eb.js deleted file mode 100644 index cd5f5c074..000000000 --- a/build/assets/js/11609d9c.24b8c9eb.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8588],{6982:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>o,frontMatter:()=>r,metadata:()=>l,toc:()=>h});var n=s(4848),i=s(8453);const r={},a="@thatopen/fragments",l={id:"api/@thatopen/fragments/index",title:"@thatopen/fragments",description:"Classes",source:"@site/docs/api/@thatopen/fragments/index.md",sourceDirName:"api/@thatopen/fragments",slug:"/api/@thatopen/fragments/",permalink:"/api/@thatopen/fragments/",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"StreamedInstances",permalink:"/api/@thatopen/components-front/type-aliases/StreamedInstances"},next:{title:"Alignment",permalink:"/api/@thatopen/fragments/classes/Alignment"}},d={},h=[{value:"Classes",id:"classes",level:2},{value:"Interfaces",id:"interfaces",level:2},{value:"Type Aliases",id:"type-aliases",level:2}];function c(e){const t={a:"a",h1:"h1",h2:"h2",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"thatopenfragments",children:"@thatopen/fragments"}),"\n",(0,n.jsx)(t.h2,{id:"classes",children:"Classes"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Class"}),(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/Alignment",children:"Alignment"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Represents an alignment in a civil engineering project. An alignment consists of vertical, horizontal, and absolute civil curves."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CivilCurve",children:"CivilCurve"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Represents an alignment curve of a civil engineering model."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CurveMesh",children:"CurveMesh"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Represents an alignment 3D curve mesh with additional civil engineering properties. Extends THREE.LineSegments to provide geometry and material for the curve."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/Fragment",children:"Fragment"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Class representing a fragment of a 3D model. Fragments are just a simple wrapper around THREE.InstancedMesh. Each fragment can contain Items (identified by ItemID) which are mapped to one or many instances inside this THREE.InstancedMesh. Fragments also implement features like instance buffer resizing and hiding out of the box."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/FragmentMesh",children:"FragmentMesh"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"A class representing a THREE.InstancedMesh with additional properties for fragment data."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/FragmentsGroup",children:"FragmentsGroup"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"A class representing a group of 3D fragments. This class extends THREE.Group and adds additional properties and methods for managing and interacting with the fragments it contains."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/Serializer",children:"Serializer"})}),(0,n.jsxs)(t.td,{style:{textAlign:"left"},children:["Serializer class for handling the serialization and deserialization of 3D model data. It uses the ",(0,n.jsx)(t.a,{href:"https://flatbuffers.dev/",children:"flatbuffers library"})," for efficient data serialization and deserialization."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/StreamSerializer",children:"StreamSerializer"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"A class for serializing and deserializing geometry data in a streamed format."})]})]})]}),"\n",(0,n.jsx)(t.h2,{id:"interfaces",children:"Interfaces"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Interface"}),(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/interfaces/FragmentIdMap",children:"FragmentIdMap"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"A map that associates each fragmentID with a set of item IDs."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/interfaces/IfcMetadata",children:"IfcMetadata"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Represents metadata related to the IFC model."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/interfaces/IfcProperties",children:"IfcProperties"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a map of IFC properties."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/interfaces/IndexedGeometry",children:"IndexedGeometry"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a THREE.js geometry with an index attribute. We always work with indexed geometries, and this allows us to not check the existence of the index attribute each time we access it."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/interfaces/Item",children:"Item"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Represents an item in the 3D model."})]})]})]}),"\n",(0,n.jsx)(t.h2,{id:"type-aliases",children:"Type Aliases"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Type alias"}),(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/type-aliases/AlignmentType",children:"AlignmentType"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Represents the type of alignment, which can be vertical, horizontal, or absolute."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/type-aliases/IfcSchema",children:"IfcSchema"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Represents the version of the IFC schema used in the model."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/type-aliases/StreamedGeometries",children:"StreamedGeometries"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a map of streamed geometries."})]})]})]})]})}function o(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>a,x:()=>l});var n=s(6540);const i={},r=n.createContext(i);function a(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/140c5f61.0fa4a014.js b/build/assets/js/140c5f61.0fa4a014.js new file mode 100644 index 000000000..f67f067c9 --- /dev/null +++ b/build/assets/js/140c5f61.0fa4a014.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[4657],{9251:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>i,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var o=t(4848),s=t(8453);const a={},l=void 0,r={id:"Tutorials/Components/Front/AngleMeasurement",title:"AngleMeasurement",description:'window.open("https://thatopen.github.io/engine_components/examples/AngleMeasurement")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Front/AngleMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/AngleMeasurement",permalink:"/Tutorials/Components/Front/AngleMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Worlds",permalink:"/Tutorials/Components/Core/Worlds"},next:{title:"AreaMeasurement",permalink:"/Tutorials/Components/Front/AreaMeasurement"}},i={},c=[{value:"\ud83d\udcd0 Measuring angles",id:"-measuring-angles",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83c\udfb2 Creating a Cube Mesh",id:"-creating-a-cube-mesh",level:3},{value:"\ud83d\udee0\ufe0f Getting the angle measurements",id:"\ufe0f-getting-the-angle-measurements",level:3},{value:"\ud83d\uddb1\ufe0f Setting up mouse events",id:"\ufe0f-setting-up-mouse-events",level:3},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/AngleMeasurement"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/AngleMeasurement"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/AngleMeasurement/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"-measuring-angles",children:"\ud83d\udcd0 Measuring angles"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an angle measurement tool to your end users.\nWe will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"three"})," to create some 3D items."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components-front"})," to use some frontend-oriented components."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import * as THREE from "three";\nimport * as OBC from "@thatopen/components";\nimport * as BUI from "@thatopen/ui";\nimport * as OBCF from "@thatopen/components-front";\nimport Stats from "stats.js";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\nconst components = new OBC.Components();\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBCF.PostproductionRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.PostproductionRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-creating-a-cube-mesh",children:"\ud83c\udfb2 Creating a Cube Mesh"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["For this tutorial we will use a Cube, you can add any geometry as per your preference. We will create a ",(0,o.jsx)(n.a,{href:"https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry",children:"Cube"})," with ",(0,o.jsx)(n.code,{children:"3x3x3"})," dimensions and use red color for the material."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);\nconst cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });\nconst cube = new THREE.Mesh(cubeGeometry, cubeMaterial);\ncube.position.set(0, 1.5, 0);\nworld.scene.three.add(cube);\nworld.meshes.add(cube);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-getting-the-angle-measurements",children:"\ud83d\udee0\ufe0f Getting the angle measurements"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"First, let's get an instance of the angle measurement component and initialize it:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const angles = components.get(OBCF.AngleMeasurement);\nangles.world = world;\nangles.enabled = true;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-setting-up-mouse-events",children:"\ud83d\uddb1\ufe0f Setting up mouse events"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now, we'll define how to create the angle dimensions. In this case, we'll keep it simple and use the double click event of the container HTML element."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"container.ondblclick = () => angles.create();\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-deleting-the-dimensions",children:"\ud83e\uddf9 Deleting the Dimensions"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["Now that we know how to make multiple angle, we'll learn how to delete them when necessary. angle can be removed using the ",(0,o.jsx)(n.code,{children:"deleteAll()"})," method, which deletes all the created angle. Again, we'll keep it simple and bind this event to the keydown event. Specifically, it will fire when the user presses the ",(0,o.jsx)(n.code,{children:"Delete"})," or ",(0,o.jsx)(n.code,{children:"Backspace"})," key."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'window.onkeydown = (event) => {\n if (event.code === "Delete" || event.code === "Backspace") {\n angles.deleteAll();\n }\n};\n'})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We'll use the ",(0,o.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We will use the ",(0,o.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,o.jsx)(n.code,{children:"init"})," method of the ",(0,o.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we will add some UI to have some control over the angles we create. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n Create angle: Double click \n Delete angle: Delete \n \n \n \n \n \n \n \n \n\n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,o.jsx)(n.p,{children:"And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const button = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n});\n\ndocument.body.append(button);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"That's it! You have created an app that can create and delete angular dimensions on any 3D object. Congratulations!"})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>l,x:()=>r});var o=t(6540);const s={},a=o.createContext(s);function l(e){const n=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),o.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/140c5f61.c22b9055.js b/build/assets/js/140c5f61.c22b9055.js deleted file mode 100644 index 41c0a0b7e..000000000 --- a/build/assets/js/140c5f61.c22b9055.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[4657],{9251:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>i,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>c});var s=t(4848),o=t(8453);const r={},a=void 0,l={id:"Tutorials/Components/Front/AngleMeasurement",title:"AngleMeasurement",description:'window.open("https://thatopen.github.io/engine_components/examples/AngleMeasurement")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Front/AngleMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/AngleMeasurement",permalink:"/Tutorials/Components/Front/AngleMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Worlds",permalink:"/Tutorials/Components/Core/Worlds"},next:{title:"AreaMeasurement",permalink:"/Tutorials/Components/Front/AreaMeasurement"}},i={},c=[{value:"\ud83d\udcd0 Measuring angles",id:"-measuring-angles",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83c\udfb2 Creating a Cube Mesh",id:"-creating-a-cube-mesh",level:3},{value:"\ud83d\udee0\ufe0f Getting the angle measurements",id:"\ufe0f-getting-the-angle-measurements",level:3},{value:"\ud83d\uddb1\ufe0f Setting up mouse events",id:"\ufe0f-setting-up-mouse-events",level:3},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{style:{position:"relative"},children:[(0,s.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/AngleMeasurement"}),(0,s.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/AngleMeasurement"),children:"Go Full Screen"})]}),"\n",(0,s.jsx)(n.admonition,{title:"Source",type:"info",children:(0,s.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,s.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/AngleMeasurement/example.ts",children:"here"}),"."]})}),"\n",(0,s.jsx)(n.h3,{id:"-measuring-angles",children:"\ud83d\udcd0 Measuring angles"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an angle measurement tool to your end users.\nWe will import:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"three"})," to create some 3D items."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components-front"})," to use some frontend-oriented components."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'import * as THREE from "three";\nimport * as OBC from "@thatopen/components";\nimport * as OBCF from "@thatopen/components-front";\nimport Stats from "stats.js";\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\nconst components = new OBC.Components();\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBCF.PostproductionRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.PostproductionRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,s.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-creating-a-cube-mesh",children:"\ud83c\udfb2 Creating a Cube Mesh"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["For this tutorial we will use a Cube, you can add any geometry as per your preference. We will create a ",(0,s.jsx)(n.a,{href:"https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry",children:"Cube"})," with ",(0,s.jsx)(n.code,{children:"3x3x3"})," dimensions and use red color for the material."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);\nconst cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });\nconst cube = new THREE.Mesh(cubeGeometry, cubeMaterial);\ncube.position.set(0, 1.5, 0);\nworld.scene.three.add(cube);\nworld.meshes.add(cube);\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-getting-the-angle-measurements",children:"\ud83d\udee0\ufe0f Getting the angle measurements"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"First, let's get an instance of the angle measurement component and initialize it:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const angles = components.get(OBCF.AngleMeasurement);\nangles.world = world;\nangles.enabled = true;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-setting-up-mouse-events",children:"\ud83d\uddb1\ufe0f Setting up mouse events"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Now, we'll define how to create the angle dimensions. In this case, we'll keep it simple and use the double click event of the container HTML element."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"container.ondblclick = () => angles.create();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-deleting-the-dimensions",children:"\ud83e\uddf9 Deleting the Dimensions"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["Now that we know how to make multiple dimensions, we'll learn how to delete them when necessary. Dimensions can be removed using the ",(0,s.jsx)(n.code,{children:"deleteAll()"})," method, which deletes all the created dimensions. Again, we'll keep it simple and bind this event to the keydown event. Specifically, it will fire when the user presses the ",(0,s.jsx)(n.code,{children:"Delete"})," or ",(0,s.jsx)(n.code,{children:"Backspace"})," key."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'window.onkeydown = (event) => {\n if (event.code === "Delete" || event.code === "Backspace") {\n angles.deleteAll();\n }\n};\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["We'll use the ",(0,s.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"That's it! You have created an app that can create and delete angular dimensions on any 3D object. Congratulations!"})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>l});var s=t(6540);const o={},r=s.createContext(o);function a(e){const n=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/1c283959.720192ad.js b/build/assets/js/1c283959.720192ad.js deleted file mode 100644 index cff4f1c8c..000000000 --- a/build/assets/js/1c283959.720192ad.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[9271],{8884:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>a,contentTitle:()=>i,default:()=>o,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var s=r(4848),t=r(8453);const l={},i="FragmentMesh",d={id:"api/@thatopen/fragments/classes/FragmentMesh",title:"FragmentMesh",description:"A class representing a THREE.InstancedMesh with additional properties for fragment data.",source:"@site/docs/api/@thatopen/fragments/classes/FragmentMesh.md",sourceDirName:"api/@thatopen/fragments/classes",slug:"/api/@thatopen/fragments/classes/FragmentMesh",permalink:"/api/@thatopen/fragments/classes/FragmentMesh",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Fragment",permalink:"/api/@thatopen/fragments/classes/Fragment"},next:{title:"FragmentsGroup",permalink:"/api/@thatopen/fragments/classes/FragmentsGroup"}},a={},c=[{value:"Extends",id:"extends",level:2},{value:"Constructors",id:"constructors",level:2},{value:"new FragmentMesh()",id:"new-fragmentmesh",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Overrides",id:"overrides",level:4},{value:"Properties",id:"properties",level:2},{value:"fragment",id:"fragment",level:3},{value:"geometry",id:"geometry",level:3},{value:"Overrides",id:"overrides-1",level:4},{value:"material",id:"material",level:3},{value:"Overrides",id:"overrides-2",level:4},{value:"Methods",id:"methods",level:2},{value:"exportData()",id:"exportdata",level:3},{value:"Returns",id:"returns-1",level:4},{value:"colors",id:"colors",level:5},{value:"groups",id:"groups",level:5},{value:"index",id:"index",level:5},{value:"materials",id:"materials",level:5},{value:"matrices",id:"matrices",level:5},{value:"normal",id:"normal",level:5},{value:"position",id:"position",level:5}];function h(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",hr:"hr",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"fragmentmesh",children:"FragmentMesh"}),"\n",(0,s.jsx)(n.p,{children:"A class representing a THREE.InstancedMesh with additional properties for fragment data."}),"\n",(0,s.jsx)(n.h2,{id:"extends",children:"Extends"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"InstancedMesh"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsx)(n.h3,{id:"new-fragmentmesh",children:"new FragmentMesh()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"new FragmentMesh"}),"(",(0,s.jsx)(n.code,{children:"geometry"}),", ",(0,s.jsx)(n.code,{children:"material"}),", ",(0,s.jsx)(n.code,{children:"count"}),", ",(0,s.jsx)(n.code,{children:"fragment"}),"): ",(0,s.jsx)(n.a,{href:"/api/@thatopen/fragments/classes/FragmentMesh",children:(0,s.jsx)(n.code,{children:"FragmentMesh"})})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Constructs a new FragmentMesh."}),"\n",(0,s.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"geometry"})}),(0,s.jsxs)(n.td,{style:{textAlign:"left"},children:[(0,s.jsx)(n.code,{children:"BufferGeometry"}),"<",(0,s.jsx)(n.code,{children:"NormalBufferAttributes"}),">"]}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"The geometry for the mesh. Must be indexed."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"material"})}),(0,s.jsxs)(n.td,{style:{textAlign:"left"},children:[(0,s.jsx)(n.code,{children:"Material"})," | ",(0,s.jsx)(n.code,{children:"Material"}),"[]"]}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"The material(s) for the mesh. If a single material is provided, it will be wrapped in an array."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"count"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"number"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"The number of instances to create."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"fragment"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.a,{href:"/api/@thatopen/fragments/classes/Fragment",children:(0,s.jsx)(n.code,{children:"Fragment"})})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"The fragment associated with this mesh."})]})]})]}),"\n",(0,s.jsx)(n.h4,{id:"returns",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"/api/@thatopen/fragments/classes/FragmentMesh",children:(0,s.jsx)(n.code,{children:"FragmentMesh"})})}),"\n",(0,s.jsx)(n.h4,{id:"overrides",children:"Overrides"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"THREE.InstancedMesh.constructor"})}),"\n",(0,s.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(n.h3,{id:"fragment",children:"fragment"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"fragment"}),": ",(0,s.jsx)(n.a,{href:"/api/@thatopen/fragments/classes/Fragment",children:(0,s.jsx)(n.code,{children:"Fragment"})})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The fragment associated with this mesh."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"geometry",children:"geometry"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"geometry"}),": ",(0,s.jsx)(n.a,{href:"/api/@thatopen/fragments/interfaces/IndexedGeometry",children:(0,s.jsx)(n.code,{children:"IndexedGeometry"})})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The geometry used by this mesh.\r\nIt must be an IndexedGeometry."}),"\n",(0,s.jsx)(n.h4,{id:"overrides-1",children:"Overrides"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"THREE.InstancedMesh.geometry"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"material",children:"material"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"material"}),": ",(0,s.jsx)(n.code,{children:"Material"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The materials used by this mesh.\r\nIf a single material is provided, it will be wrapped in an array."}),"\n",(0,s.jsx)(n.h4,{id:"overrides-2",children:"Overrides"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"THREE.InstancedMesh.material"})}),"\n",(0,s.jsx)(n.h2,{id:"methods",children:"Methods"}),"\n",(0,s.jsx)(n.h3,{id:"exportdata",children:"exportData()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"exportData"}),"(): ",(0,s.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Exports the data of the fragment mesh to a serializable format."}),"\n",(0,s.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"object"})}),"\n",(0,s.jsx)(n.p,{children:"An object containing the position, normal, index, groups, materials, matrices, and colors of the fragment mesh."}),"\n",(0,s.jsx)(n.h5,{id:"colors",children:"colors"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"colors"}),": ",(0,s.jsx)(n.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(n.h5,{id:"groups",children:"groups"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"groups"}),": ",(0,s.jsx)(n.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(n.h5,{id:"index",children:"index"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"index"}),": ",(0,s.jsx)(n.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(n.h5,{id:"materials",children:"materials"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"materials"}),": ",(0,s.jsx)(n.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(n.h5,{id:"matrices",children:"matrices"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"matrices"}),": ",(0,s.jsx)(n.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(n.h5,{id:"normal",children:"normal"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"normal"}),": ",(0,s.jsx)(n.code,{children:"Float32Array"})]}),"\n"]}),"\n",(0,s.jsx)(n.h5,{id:"position",children:"position"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"position"}),": ",(0,s.jsx)(n.code,{children:"Float32Array"})]}),"\n"]})]})}function o(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},8453:(e,n,r)=>{r.d(n,{R:()=>i,x:()=>d});var s=r(6540);const t={},l=s.createContext(t);function i(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/22dd74f7.386b94fa.js b/build/assets/js/22dd74f7.386b94fa.js deleted file mode 100644 index 2a395478e..000000000 --- a/build/assets/js/22dd74f7.386b94fa.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[1567],{5226:e=>{e.exports=JSON.parse('{"version":{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"\ud83d\udc68\ud83c\udffb\u200d\ud83d\udcbb Introduction","href":"/intro","docId":"intro","unlisted":false},{"type":"link","label":"\ud83e\udd1d Get involved","href":"/contributing","docId":"contributing","unlisted":false},{"type":"category","label":"\ud83e\udde9 Components","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"\ud83d\ude80 Getting started","href":"/components/getting-started","docId":"components/getting-started","unlisted":false},{"type":"link","label":"\ud83e\uddbe Making your own","href":"/components/creating-components","docId":"components/creating-components","unlisted":false},{"type":"link","label":"\ud83e\uddf9 Keeping them clean","href":"/components/clean-components-guide","docId":"components/clean-components-guide","unlisted":false},{"type":"link","label":"\ud83e\udded Tutorial paths","href":"/components/tutorial-paths","docId":"components/tutorial-paths","unlisted":false}]},{"type":"category","label":"\ud83d\udc69\ud83c\udffb\u200d\ud83c\udfeb Tutorials","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"Components","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"Core","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"BCFTopics","href":"/Tutorials/Components/Core/BCFTopics","docId":"Tutorials/Components/Core/BCFTopics","unlisted":false},{"type":"link","label":"BoundingBoxer","href":"/Tutorials/Components/Core/BoundingBoxer","docId":"Tutorials/Components/Core/BoundingBoxer","unlisted":false},{"type":"link","label":"Classifier","href":"/Tutorials/Components/Core/Classifier","docId":"Tutorials/Components/Core/Classifier","unlisted":false},{"type":"link","label":"Clipper","href":"/Tutorials/Components/Core/Clipper","docId":"Tutorials/Components/Core/Clipper","unlisted":false},{"type":"link","label":"Cullers","href":"/Tutorials/Components/Core/Cullers","docId":"Tutorials/Components/Core/Cullers","unlisted":false},{"type":"link","label":"Exploder","href":"/Tutorials/Components/Core/Exploder","docId":"Tutorials/Components/Core/Exploder","unlisted":false},{"type":"link","label":"FragmentsManager","href":"/Tutorials/Components/Core/FragmentsManager","docId":"Tutorials/Components/Core/FragmentsManager","unlisted":false},{"type":"link","label":"Grids","href":"/Tutorials/Components/Core/Grids","docId":"Tutorials/Components/Core/Grids","unlisted":false},{"type":"link","label":"Hider","href":"/Tutorials/Components/Core/Hider","docId":"Tutorials/Components/Core/Hider","unlisted":false},{"type":"link","label":"IfcFinder","href":"/Tutorials/Components/Core/IfcFinder","docId":"Tutorials/Components/Core/IfcFinder","unlisted":false},{"type":"link","label":"IfcGeometryTiler","href":"/Tutorials/Components/Core/IfcGeometryTiler","docId":"Tutorials/Components/Core/IfcGeometryTiler","unlisted":false},{"type":"link","label":"IfcIsolator","href":"/Tutorials/Components/Core/IfcIsolator","docId":"Tutorials/Components/Core/IfcIsolator","unlisted":false},{"type":"link","label":"IfcJsonExporter","href":"/Tutorials/Components/Core/IfcJsonExporter","docId":"Tutorials/Components/Core/IfcJsonExporter","unlisted":false},{"type":"link","label":"IfcLoader","href":"/Tutorials/Components/Core/IfcLoader","docId":"Tutorials/Components/Core/IfcLoader","unlisted":false},{"type":"link","label":"IfcPropertiesManager","href":"/Tutorials/Components/Core/IfcPropertiesManager","docId":"Tutorials/Components/Core/IfcPropertiesManager","unlisted":false},{"type":"link","label":"IfcPropertiesTiler","href":"/Tutorials/Components/Core/IfcPropertiesTiler","docId":"Tutorials/Components/Core/IfcPropertiesTiler","unlisted":false},{"type":"link","label":"IfcRelationsIndexer","href":"/Tutorials/Components/Core/IfcRelationsIndexer","docId":"Tutorials/Components/Core/IfcRelationsIndexer","unlisted":false},{"type":"link","label":"MeasurementUtils","href":"/Tutorials/Components/Core/MeasurementUtils","docId":"Tutorials/Components/Core/MeasurementUtils","unlisted":false},{"type":"link","label":"MiniMap","href":"/Tutorials/Components/Core/MiniMap","docId":"Tutorials/Components/Core/MiniMap","unlisted":false},{"type":"link","label":"OrthoPerspectiveCamera","href":"/Tutorials/Components/Core/OrthoPerspectiveCamera","docId":"Tutorials/Components/Core/OrthoPerspectiveCamera","unlisted":false},{"type":"link","label":"Raycasters","href":"/Tutorials/Components/Core/Raycasters","docId":"Tutorials/Components/Core/Raycasters","unlisted":false},{"type":"link","label":"ShadowedScene","href":"/Tutorials/Components/Core/ShadowedScene","docId":"Tutorials/Components/Core/ShadowedScene","unlisted":false},{"type":"link","label":"Viewpoints","href":"/Tutorials/Components/Core/Viewpoints","docId":"Tutorials/Components/Core/Viewpoints","unlisted":false},{"type":"link","label":"Worlds","href":"/Tutorials/Components/Core/Worlds","docId":"Tutorials/Components/Core/Worlds","unlisted":false}]},{"type":"category","label":"Front","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AngleMeasurement","href":"/Tutorials/Components/Front/AngleMeasurement","docId":"Tutorials/Components/Front/AngleMeasurement","unlisted":false},{"type":"link","label":"AreaMeasurement","href":"/Tutorials/Components/Front/AreaMeasurement","docId":"Tutorials/Components/Front/AreaMeasurement","unlisted":false},{"type":"link","label":"Civil3DNavigator","href":"/Tutorials/Components/Front/Civil3DNavigator","docId":"Tutorials/Components/Front/Civil3DNavigator","unlisted":false},{"type":"link","label":"CivilCrossSectionNavigator","href":"/Tutorials/Components/Front/CivilCrossSectionNavigator","docId":"Tutorials/Components/Front/CivilCrossSectionNavigator","unlisted":false},{"type":"link","label":"CivilElevationNavigator","href":"/Tutorials/Components/Front/CivilElevationNavigator","docId":"Tutorials/Components/Front/CivilElevationNavigator","unlisted":false},{"type":"link","label":"CivilPlanNavigator","href":"/Tutorials/Components/Front/CivilPlanNavigator","docId":"Tutorials/Components/Front/CivilPlanNavigator","unlisted":false},{"type":"link","label":"ClipEdges","href":"/Tutorials/Components/Front/ClipEdges","docId":"Tutorials/Components/Front/ClipEdges","unlisted":false},{"type":"link","label":"EdgeMeasurement","href":"/Tutorials/Components/Front/EdgeMeasurement","docId":"Tutorials/Components/Front/EdgeMeasurement","unlisted":false},{"type":"link","label":"FaceMeasurement","href":"/Tutorials/Components/Front/FaceMeasurement","docId":"Tutorials/Components/Front/FaceMeasurement","unlisted":false},{"type":"link","label":"Highlighter","href":"/Tutorials/Components/Front/Highlighter","docId":"Tutorials/Components/Front/Highlighter","unlisted":false},{"type":"link","label":"IfcStreamer","href":"/Tutorials/Components/Front/IfcStreamer","docId":"Tutorials/Components/Front/IfcStreamer","unlisted":false},{"type":"link","label":"LengthMeasurement","href":"/Tutorials/Components/Front/LengthMeasurement","docId":"Tutorials/Components/Front/LengthMeasurement","unlisted":false},{"type":"link","label":"Marker","href":"/Tutorials/Components/Front/Marker","docId":"Tutorials/Components/Front/Marker","unlisted":false},{"type":"link","label":"Plans","href":"/Tutorials/Components/Front/Plans","docId":"Tutorials/Components/Front/Plans","unlisted":false},{"type":"link","label":"PostproductionRenderer","href":"/Tutorials/Components/Front/PostproductionRenderer","docId":"Tutorials/Components/Front/PostproductionRenderer","unlisted":false},{"type":"link","label":"Sections","href":"/Tutorials/Components/Front/Sections","docId":"Tutorials/Components/Front/Sections","unlisted":false},{"type":"link","label":"ShadowDropper","href":"/Tutorials/Components/Front/ShadowDropper","docId":"Tutorials/Components/Front/ShadowDropper","unlisted":false},{"type":"link","label":"VolumeMeasurement","href":"/Tutorials/Components/Front/VolumeMeasurement","docId":"Tutorials/Components/Front/VolumeMeasurement","unlisted":false}]}],"href":"/Tutorials/Components/"},{"type":"category","label":"UserInterface","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"Core","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Component","href":"/Tutorials/UserInterface/Core/Component","docId":"Tutorials/UserInterface/Core/Component","unlisted":false},{"type":"category","label":"Table","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"DataTransform","href":"/Tutorials/UserInterface/Core/Table/DataTransform","docId":"Tutorials/UserInterface/Core/Table/DataTransform","unlisted":false},{"type":"link","label":"ExportingData","href":"/Tutorials/UserInterface/Core/Table/ExportingData","docId":"Tutorials/UserInterface/Core/Table/ExportingData","unlisted":false},{"type":"link","label":"LoadFunction","href":"/Tutorials/UserInterface/Core/Table/LoadFunction","docId":"Tutorials/UserInterface/Core/Table/LoadFunction","unlisted":false},{"type":"link","label":"Searching","href":"/Tutorials/UserInterface/Core/Table/Searching","docId":"Tutorials/UserInterface/Core/Table/Searching","unlisted":false}],"href":"/Tutorials/UserInterface/Core/Table/"}]},{"type":"category","label":"OBC","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ClassificationsTree","href":"/Tutorials/UserInterface/OBC/ClassificationsTree","docId":"Tutorials/UserInterface/OBC/ClassificationsTree","unlisted":false},{"type":"link","label":"ElementProperties","href":"/Tutorials/UserInterface/OBC/ElementProperties","docId":"Tutorials/UserInterface/OBC/ElementProperties","unlisted":false},{"type":"link","label":"EntityAttributes","href":"/Tutorials/UserInterface/OBC/EntityAttributes","docId":"Tutorials/UserInterface/OBC/EntityAttributes","unlisted":false},{"type":"link","label":"ModelsList","href":"/Tutorials/UserInterface/OBC/ModelsList","docId":"Tutorials/UserInterface/OBC/ModelsList","unlisted":false},{"type":"link","label":"RelationsTree","href":"/Tutorials/UserInterface/OBC/RelationsTree","docId":"Tutorials/UserInterface/OBC/RelationsTree","unlisted":false},{"type":"link","label":"TopicsUI","href":"/Tutorials/UserInterface/OBC/TopicsUI","docId":"Tutorials/UserInterface/OBC/TopicsUI","unlisted":false}]}],"href":"/Tutorials/UserInterface/"}]},{"type":"category","label":"\ud83d\udccb API","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"@thatopen","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"@thatopen/components","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"classes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AsyncEvent\\\\","href":"/api/@thatopen/components/classes/AsyncEvent","docId":"api/@thatopen/components/classes/AsyncEvent","unlisted":false},{"type":"link","label":"BCFTopics","href":"/api/@thatopen/components/classes/BCFTopics","docId":"api/@thatopen/components/classes/BCFTopics","unlisted":false},{"type":"link","label":"abstract Base","href":"/api/@thatopen/components/classes/Base","docId":"api/@thatopen/components/classes/Base","unlisted":false},{"type":"link","label":"abstract BaseCamera","href":"/api/@thatopen/components/classes/BaseCamera","docId":"api/@thatopen/components/classes/BaseCamera","unlisted":false},{"type":"link","label":"abstract BaseRenderer","href":"/api/@thatopen/components/classes/BaseRenderer","docId":"api/@thatopen/components/classes/BaseRenderer","unlisted":false},{"type":"link","label":"abstract BaseScene","href":"/api/@thatopen/components/classes/BaseScene","docId":"api/@thatopen/components/classes/BaseScene","unlisted":false},{"type":"link","label":"abstract BaseWorldItem","href":"/api/@thatopen/components/classes/BaseWorldItem","docId":"api/@thatopen/components/classes/BaseWorldItem","unlisted":false},{"type":"link","label":"BoundingBoxer","href":"/api/@thatopen/components/classes/BoundingBoxer","docId":"api/@thatopen/components/classes/BoundingBoxer","unlisted":false},{"type":"link","label":"Classifier","href":"/api/@thatopen/components/classes/Classifier","docId":"api/@thatopen/components/classes/Classifier","unlisted":false},{"type":"link","label":"Clipper","href":"/api/@thatopen/components/classes/Clipper","docId":"api/@thatopen/components/classes/Clipper","unlisted":false},{"type":"link","label":"Comment","href":"/api/@thatopen/components/classes/Comment","docId":"api/@thatopen/components/classes/Comment","unlisted":false},{"type":"link","label":"abstract Component","href":"/api/@thatopen/components/classes/Component","docId":"api/@thatopen/components/classes/Component","unlisted":false},{"type":"link","label":"Components","href":"/api/@thatopen/components/classes/Components","docId":"api/@thatopen/components/classes/Components","unlisted":false},{"type":"link","label":"ConfigManager","href":"/api/@thatopen/components/classes/ConfigManager","docId":"api/@thatopen/components/classes/ConfigManager","unlisted":false},{"type":"link","label":"CullerRenderer","href":"/api/@thatopen/components/classes/CullerRenderer","docId":"api/@thatopen/components/classes/CullerRenderer","unlisted":false},{"type":"link","label":"Cullers","href":"/api/@thatopen/components/classes/Cullers","docId":"api/@thatopen/components/classes/Cullers","unlisted":false},{"type":"link","label":"DataMap\\\\","href":"/api/@thatopen/components/classes/DataMap","docId":"api/@thatopen/components/classes/DataMap","unlisted":false},{"type":"link","label":"DataSet\\\\","href":"/api/@thatopen/components/classes/DataSet","docId":"api/@thatopen/components/classes/DataSet","unlisted":false},{"type":"link","label":"Disposer","href":"/api/@thatopen/components/classes/Disposer","docId":"api/@thatopen/components/classes/Disposer","unlisted":false},{"type":"link","label":"Event\\\\","href":"/api/@thatopen/components/classes/Event","docId":"api/@thatopen/components/classes/Event","unlisted":false},{"type":"link","label":"EventManager","href":"/api/@thatopen/components/classes/EventManager","docId":"api/@thatopen/components/classes/EventManager","unlisted":false},{"type":"link","label":"Exploder","href":"/api/@thatopen/components/classes/Exploder","docId":"api/@thatopen/components/classes/Exploder","unlisted":false},{"type":"link","label":"FirstPersonMode","href":"/api/@thatopen/components/classes/FirstPersonMode","docId":"api/@thatopen/components/classes/FirstPersonMode","unlisted":false},{"type":"link","label":"FragmentsManager","href":"/api/@thatopen/components/classes/FragmentsManager","docId":"api/@thatopen/components/classes/FragmentsManager","unlisted":false},{"type":"link","label":"Grids","href":"/api/@thatopen/components/classes/Grids","docId":"api/@thatopen/components/classes/Grids","unlisted":false},{"type":"link","label":"Hider","href":"/api/@thatopen/components/classes/Hider","docId":"api/@thatopen/components/classes/Hider","unlisted":false},{"type":"link","label":"IDSSpecification","href":"/api/@thatopen/components/classes/IDSSpecification","docId":"api/@thatopen/components/classes/IDSSpecification","unlisted":false},{"type":"link","label":"IDSSpecifications","href":"/api/@thatopen/components/classes/IDSSpecifications","docId":"api/@thatopen/components/classes/IDSSpecifications","unlisted":false},{"type":"link","label":"IfcBasicQuery","href":"/api/@thatopen/components/classes/IfcBasicQuery","docId":"api/@thatopen/components/classes/IfcBasicQuery","unlisted":false},{"type":"link","label":"IfcFinder","href":"/api/@thatopen/components/classes/IfcFinder","docId":"api/@thatopen/components/classes/IfcFinder","unlisted":false},{"type":"link","label":"abstract IfcFinderQuery","href":"/api/@thatopen/components/classes/IfcFinderQuery","docId":"api/@thatopen/components/classes/IfcFinderQuery","unlisted":false},{"type":"link","label":"IfcFragmentSettings","href":"/api/@thatopen/components/classes/IfcFragmentSettings","docId":"api/@thatopen/components/classes/IfcFragmentSettings","unlisted":false},{"type":"link","label":"IfcGeometryTiler","href":"/api/@thatopen/components/classes/IfcGeometryTiler","docId":"api/@thatopen/components/classes/IfcGeometryTiler","unlisted":false},{"type":"link","label":"IfcIsolator","href":"/api/@thatopen/components/classes/IfcIsolator","docId":"api/@thatopen/components/classes/IfcIsolator","unlisted":false},{"type":"link","label":"IfcJsonExporter","href":"/api/@thatopen/components/classes/IfcJsonExporter","docId":"api/@thatopen/components/classes/IfcJsonExporter","unlisted":false},{"type":"link","label":"IfcLoader","href":"/api/@thatopen/components/classes/IfcLoader","docId":"api/@thatopen/components/classes/IfcLoader","unlisted":false},{"type":"link","label":"IfcPropertiesManager","href":"/api/@thatopen/components/classes/IfcPropertiesManager","docId":"api/@thatopen/components/classes/IfcPropertiesManager","unlisted":false},{"type":"link","label":"IfcPropertiesTiler","href":"/api/@thatopen/components/classes/IfcPropertiesTiler","docId":"api/@thatopen/components/classes/IfcPropertiesTiler","unlisted":false},{"type":"link","label":"IfcPropertyQuery","href":"/api/@thatopen/components/classes/IfcPropertyQuery","docId":"api/@thatopen/components/classes/IfcPropertyQuery","unlisted":false},{"type":"link","label":"IfcRelationsIndexer","href":"/api/@thatopen/components/classes/IfcRelationsIndexer","docId":"api/@thatopen/components/classes/IfcRelationsIndexer","unlisted":false},{"type":"link","label":"IfcStreamingSettings","href":"/api/@thatopen/components/classes/IfcStreamingSettings","docId":"api/@thatopen/components/classes/IfcStreamingSettings","unlisted":false},{"type":"link","label":"MeasurementUtils","href":"/api/@thatopen/components/classes/MeasurementUtils","docId":"api/@thatopen/components/classes/MeasurementUtils","unlisted":false},{"type":"link","label":"MeshCullerRenderer","href":"/api/@thatopen/components/classes/MeshCullerRenderer","docId":"api/@thatopen/components/classes/MeshCullerRenderer","unlisted":false},{"type":"link","label":"MiniMap","href":"/api/@thatopen/components/classes/MiniMap","docId":"api/@thatopen/components/classes/MiniMap","unlisted":false},{"type":"link","label":"MiniMaps","href":"/api/@thatopen/components/classes/MiniMaps","docId":"api/@thatopen/components/classes/MiniMaps","unlisted":false},{"type":"link","label":"Mouse","href":"/api/@thatopen/components/classes/Mouse","docId":"api/@thatopen/components/classes/Mouse","unlisted":false},{"type":"link","label":"OrbitMode","href":"/api/@thatopen/components/classes/OrbitMode","docId":"api/@thatopen/components/classes/OrbitMode","unlisted":false},{"type":"link","label":"OrthoPerspectiveCamera","href":"/api/@thatopen/components/classes/OrthoPerspectiveCamera","docId":"api/@thatopen/components/classes/OrthoPerspectiveCamera","unlisted":false},{"type":"link","label":"PlanMode","href":"/api/@thatopen/components/classes/PlanMode","docId":"api/@thatopen/components/classes/PlanMode","unlisted":false},{"type":"link","label":"ProjectionManager","href":"/api/@thatopen/components/classes/ProjectionManager","docId":"api/@thatopen/components/classes/ProjectionManager","unlisted":false},{"type":"link","label":"PropertiesStreamingSettings","href":"/api/@thatopen/components/classes/PropertiesStreamingSettings","docId":"api/@thatopen/components/classes/PropertiesStreamingSettings","unlisted":false},{"type":"link","label":"Raycasters","href":"/api/@thatopen/components/classes/Raycasters","docId":"api/@thatopen/components/classes/Raycasters","unlisted":false},{"type":"link","label":"ShadowedScene","href":"/api/@thatopen/components/classes/ShadowedScene","docId":"api/@thatopen/components/classes/ShadowedScene","unlisted":false},{"type":"link","label":"SimpleCamera","href":"/api/@thatopen/components/classes/SimpleCamera","docId":"api/@thatopen/components/classes/SimpleCamera","unlisted":false},{"type":"link","label":"SimpleGrid","href":"/api/@thatopen/components/classes/SimpleGrid","docId":"api/@thatopen/components/classes/SimpleGrid","unlisted":false},{"type":"link","label":"SimplePlane","href":"/api/@thatopen/components/classes/SimplePlane","docId":"api/@thatopen/components/classes/SimplePlane","unlisted":false},{"type":"link","label":"SimpleRaycaster","href":"/api/@thatopen/components/classes/SimpleRaycaster","docId":"api/@thatopen/components/classes/SimpleRaycaster","unlisted":false},{"type":"link","label":"SimpleRenderer","href":"/api/@thatopen/components/classes/SimpleRenderer","docId":"api/@thatopen/components/classes/SimpleRenderer","unlisted":false},{"type":"link","label":"SimpleScene","href":"/api/@thatopen/components/classes/SimpleScene","docId":"api/@thatopen/components/classes/SimpleScene","unlisted":false},{"type":"link","label":"SimpleWorld\\\\","href":"/api/@thatopen/components/classes/SimpleWorld","docId":"api/@thatopen/components/classes/SimpleWorld","unlisted":false},{"type":"link","label":"VertexPicker","href":"/api/@thatopen/components/classes/VertexPicker","docId":"api/@thatopen/components/classes/VertexPicker","unlisted":false},{"type":"link","label":"Viewpoint","href":"/api/@thatopen/components/classes/Viewpoint","docId":"api/@thatopen/components/classes/Viewpoint","unlisted":false},{"type":"link","label":"Worlds","href":"/api/@thatopen/components/classes/Worlds","docId":"api/@thatopen/components/classes/Worlds","unlisted":false}]},{"type":"category","label":"interfaces","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AttributeListener","href":"/api/@thatopen/components/interfaces/AttributeListener","docId":"api/@thatopen/components/interfaces/AttributeListener","unlisted":false},{"type":"link","label":"BCFTopicsConfig","href":"/api/@thatopen/components/interfaces/BCFTopicsConfig","docId":"api/@thatopen/components/interfaces/BCFTopicsConfig","unlisted":false},{"type":"link","label":"BCFViewpoint","href":"/api/@thatopen/components/interfaces/BCFViewpoint","docId":"api/@thatopen/components/interfaces/BCFViewpoint","unlisted":false},{"type":"link","label":"CameraControllable","href":"/api/@thatopen/components/interfaces/CameraControllable","docId":"api/@thatopen/components/interfaces/CameraControllable","unlisted":false},{"type":"link","label":"ChangeMap","href":"/api/@thatopen/components/interfaces/ChangeMap","docId":"api/@thatopen/components/interfaces/ChangeMap","unlisted":false},{"type":"link","label":"Classification","href":"/api/@thatopen/components/interfaces/Classification","docId":"api/@thatopen/components/interfaces/Classification","unlisted":false},{"type":"link","label":"Configurable\\\\","href":"/api/@thatopen/components/interfaces/Configurable","docId":"api/@thatopen/components/interfaces/Configurable","unlisted":false},{"type":"link","label":"Createable","href":"/api/@thatopen/components/interfaces/Createable","docId":"api/@thatopen/components/interfaces/Createable","unlisted":false},{"type":"link","label":"Disposable","href":"/api/@thatopen/components/interfaces/Disposable","docId":"api/@thatopen/components/interfaces/Disposable","unlisted":false},{"type":"link","label":"EntitiesRelatedEvent","href":"/api/@thatopen/components/interfaces/EntitiesRelatedEvent","docId":"api/@thatopen/components/interfaces/EntitiesRelatedEvent","unlisted":false},{"type":"link","label":"Eventable","href":"/api/@thatopen/components/interfaces/Eventable","docId":"api/@thatopen/components/interfaces/Eventable","unlisted":false},{"type":"link","label":"Hideable","href":"/api/@thatopen/components/interfaces/Hideable","docId":"api/@thatopen/components/interfaces/Hideable","unlisted":false},{"type":"link","label":"IDSCheckResult","href":"/api/@thatopen/components/interfaces/IDSCheckResult","docId":"api/@thatopen/components/interfaces/IDSCheckResult","unlisted":false},{"type":"link","label":"IfcCategoryRule","href":"/api/@thatopen/components/interfaces/IfcCategoryRule","docId":"api/@thatopen/components/interfaces/IfcCategoryRule","unlisted":false},{"type":"link","label":"IfcOperatorRule","href":"/api/@thatopen/components/interfaces/IfcOperatorRule","docId":"api/@thatopen/components/interfaces/IfcOperatorRule","unlisted":false},{"type":"link","label":"IfcPropertyRule","href":"/api/@thatopen/components/interfaces/IfcPropertyRule","docId":"api/@thatopen/components/interfaces/IfcPropertyRule","unlisted":false},{"type":"link","label":"MeasureEdge","href":"/api/@thatopen/components/interfaces/MeasureEdge","docId":"api/@thatopen/components/interfaces/MeasureEdge","unlisted":false},{"type":"link","label":"MiniMapConfig","href":"/api/@thatopen/components/interfaces/MiniMapConfig","docId":"api/@thatopen/components/interfaces/MiniMapConfig","unlisted":false},{"type":"link","label":"NavigationMode","href":"/api/@thatopen/components/interfaces/NavigationMode","docId":"api/@thatopen/components/interfaces/NavigationMode","unlisted":false},{"type":"link","label":"Progress","href":"/api/@thatopen/components/interfaces/Progress","docId":"api/@thatopen/components/interfaces/Progress","unlisted":false},{"type":"link","label":"Resizeable","href":"/api/@thatopen/components/interfaces/Resizeable","docId":"api/@thatopen/components/interfaces/Resizeable","unlisted":false},{"type":"link","label":"ShadowedSceneConfig","href":"/api/@thatopen/components/interfaces/ShadowedSceneConfig","docId":"api/@thatopen/components/interfaces/ShadowedSceneConfig","unlisted":false},{"type":"link","label":"SimpleGridConfig","href":"/api/@thatopen/components/interfaces/SimpleGridConfig","docId":"api/@thatopen/components/interfaces/SimpleGridConfig","unlisted":false},{"type":"link","label":"SimpleSceneConfig","href":"/api/@thatopen/components/interfaces/SimpleSceneConfig","docId":"api/@thatopen/components/interfaces/SimpleSceneConfig","unlisted":false},{"type":"link","label":"StreamedAsset","href":"/api/@thatopen/components/interfaces/StreamedAsset","docId":"api/@thatopen/components/interfaces/StreamedAsset","unlisted":false},{"type":"link","label":"StreamedGeometries","href":"/api/@thatopen/components/interfaces/StreamedGeometries","docId":"api/@thatopen/components/interfaces/StreamedGeometries","unlisted":false},{"type":"link","label":"Updateable","href":"/api/@thatopen/components/interfaces/Updateable","docId":"api/@thatopen/components/interfaces/Updateable","unlisted":false},{"type":"link","label":"VertexPickerConfig","href":"/api/@thatopen/components/interfaces/VertexPickerConfig","docId":"api/@thatopen/components/interfaces/VertexPickerConfig","unlisted":false},{"type":"link","label":"World","href":"/api/@thatopen/components/interfaces/World","docId":"api/@thatopen/components/interfaces/World","unlisted":false}]},{"type":"category","label":"type-aliases","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"BooleanPropTypes","href":"/api/@thatopen/components/type-aliases/BooleanPropTypes","docId":"api/@thatopen/components/type-aliases/BooleanPropTypes","unlisted":false},{"type":"link","label":"CameraProjection","href":"/api/@thatopen/components/type-aliases/CameraProjection","docId":"api/@thatopen/components/type-aliases/CameraProjection","unlisted":false},{"type":"link","label":"IfcFinderRule","href":"/api/@thatopen/components/type-aliases/IfcFinderRule","docId":"api/@thatopen/components/type-aliases/IfcFinderRule","unlisted":false},{"type":"link","label":"IfcRelations","href":"/api/@thatopen/components/type-aliases/IfcRelations","docId":"api/@thatopen/components/type-aliases/IfcRelations","unlisted":false},{"type":"link","label":"InverseAttributes","href":"/api/@thatopen/components/type-aliases/InverseAttributes","docId":"api/@thatopen/components/type-aliases/InverseAttributes","unlisted":false},{"type":"link","label":"NavModeID","href":"/api/@thatopen/components/type-aliases/NavModeID","docId":"api/@thatopen/components/type-aliases/NavModeID","unlisted":false},{"type":"link","label":"NumericPropTypes","href":"/api/@thatopen/components/type-aliases/NumericPropTypes","docId":"api/@thatopen/components/type-aliases/NumericPropTypes","unlisted":false},{"type":"link","label":"SerializedQuery","href":"/api/@thatopen/components/type-aliases/SerializedQuery","docId":"api/@thatopen/components/type-aliases/SerializedQuery","unlisted":false},{"type":"link","label":"StringPropTypes","href":"/api/@thatopen/components/type-aliases/StringPropTypes","docId":"api/@thatopen/components/type-aliases/StringPropTypes","unlisted":false}]},{"type":"category","label":"variables","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"GeometryTypes","href":"/api/@thatopen/components/variables/GeometryTypes","docId":"api/@thatopen/components/variables/GeometryTypes","unlisted":false},{"type":"link","label":"IfcCategoryMap","href":"/api/@thatopen/components/variables/IfcCategoryMap","docId":"api/@thatopen/components/variables/IfcCategoryMap","unlisted":false},{"type":"link","label":"IfcElements","href":"/api/@thatopen/components/variables/IfcElements","docId":"api/@thatopen/components/variables/IfcElements","unlisted":false}]}],"href":"/api/@thatopen/components/"},{"type":"category","label":"@thatopen/components-front","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"classes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AngleMeasurement","href":"/api/@thatopen/components-front/classes/AngleMeasurement","docId":"api/@thatopen/components-front/classes/AngleMeasurement","unlisted":false},{"type":"link","label":"AreaMeasurement","href":"/api/@thatopen/components-front/classes/AreaMeasurement","docId":"api/@thatopen/components-front/classes/AreaMeasurement","unlisted":false},{"type":"link","label":"Civil3DNavigator","href":"/api/@thatopen/components-front/classes/Civil3DNavigator","docId":"api/@thatopen/components-front/classes/Civil3DNavigator","unlisted":false},{"type":"link","label":"CivilCrossSectionNavigator","href":"/api/@thatopen/components-front/classes/CivilCrossSectionNavigator","docId":"api/@thatopen/components-front/classes/CivilCrossSectionNavigator","unlisted":false},{"type":"link","label":"CivilElevationNavigator","href":"/api/@thatopen/components-front/classes/CivilElevationNavigator","docId":"api/@thatopen/components-front/classes/CivilElevationNavigator","unlisted":false},{"type":"link","label":"abstract CivilNavigator","href":"/api/@thatopen/components-front/classes/CivilNavigator","docId":"api/@thatopen/components-front/classes/CivilNavigator","unlisted":false},{"type":"link","label":"CivilPlanNavigator","href":"/api/@thatopen/components-front/classes/CivilPlanNavigator","docId":"api/@thatopen/components-front/classes/CivilPlanNavigator","unlisted":false},{"type":"link","label":"ClipEdges","href":"/api/@thatopen/components-front/classes/ClipEdges","docId":"api/@thatopen/components-front/classes/ClipEdges","unlisted":false},{"type":"link","label":"ClippingEdges","href":"/api/@thatopen/components-front/classes/ClippingEdges","docId":"api/@thatopen/components-front/classes/ClippingEdges","unlisted":false},{"type":"link","label":"ClippingFills","href":"/api/@thatopen/components-front/classes/ClippingFills","docId":"api/@thatopen/components-front/classes/ClippingFills","unlisted":false},{"type":"link","label":"EdgeMeasurement","href":"/api/@thatopen/components-front/classes/EdgeMeasurement","docId":"api/@thatopen/components-front/classes/EdgeMeasurement","unlisted":false},{"type":"link","label":"EdgesPlane","href":"/api/@thatopen/components-front/classes/EdgesPlane","docId":"api/@thatopen/components-front/classes/EdgesPlane","unlisted":false},{"type":"link","label":"EdgesStyles","href":"/api/@thatopen/components-front/classes/EdgesStyles","docId":"api/@thatopen/components-front/classes/EdgesStyles","unlisted":false},{"type":"link","label":"FaceMeasurement","href":"/api/@thatopen/components-front/classes/FaceMeasurement","docId":"api/@thatopen/components-front/classes/FaceMeasurement","unlisted":false},{"type":"link","label":"GeometryCullerRenderer","href":"/api/@thatopen/components-front/classes/GeometryCullerRenderer","docId":"api/@thatopen/components-front/classes/GeometryCullerRenderer","unlisted":false},{"type":"link","label":"GraphicVertexPicker","href":"/api/@thatopen/components-front/classes/GraphicVertexPicker","docId":"api/@thatopen/components-front/classes/GraphicVertexPicker","unlisted":false},{"type":"link","label":"Highlighter","href":"/api/@thatopen/components-front/classes/Highlighter","docId":"api/@thatopen/components-front/classes/Highlighter","unlisted":false},{"type":"link","label":"IfcStreamer","href":"/api/@thatopen/components-front/classes/IfcStreamer","docId":"api/@thatopen/components-front/classes/IfcStreamer","unlisted":false},{"type":"link","label":"LengthMeasurement","href":"/api/@thatopen/components-front/classes/LengthMeasurement","docId":"api/@thatopen/components-front/classes/LengthMeasurement","unlisted":false},{"type":"link","label":"Mark","href":"/api/@thatopen/components-front/classes/Mark","docId":"api/@thatopen/components-front/classes/Mark","unlisted":false},{"type":"link","label":"Marker","href":"/api/@thatopen/components-front/classes/Marker","docId":"api/@thatopen/components-front/classes/Marker","unlisted":false},{"type":"link","label":"Outliner","href":"/api/@thatopen/components-front/classes/Outliner","docId":"api/@thatopen/components-front/classes/Outliner","unlisted":false},{"type":"link","label":"Plans","href":"/api/@thatopen/components-front/classes/Plans","docId":"api/@thatopen/components-front/classes/Plans","unlisted":false},{"type":"link","label":"Postproduction","href":"/api/@thatopen/components-front/classes/Postproduction","docId":"api/@thatopen/components-front/classes/Postproduction","unlisted":false},{"type":"link","label":"PostproductionRenderer","href":"/api/@thatopen/components-front/classes/PostproductionRenderer","docId":"api/@thatopen/components-front/classes/PostproductionRenderer","unlisted":false},{"type":"link","label":"RendererWith2D","href":"/api/@thatopen/components-front/classes/RendererWith2D","docId":"api/@thatopen/components-front/classes/RendererWith2D","unlisted":false},{"type":"link","label":"Sections","href":"/api/@thatopen/components-front/classes/Sections","docId":"api/@thatopen/components-front/classes/Sections","unlisted":false},{"type":"link","label":"ShadowDropper","href":"/api/@thatopen/components-front/classes/ShadowDropper","docId":"api/@thatopen/components-front/classes/ShadowDropper","unlisted":false},{"type":"link","label":"SimpleDimensionLine","href":"/api/@thatopen/components-front/classes/SimpleDimensionLine","docId":"api/@thatopen/components-front/classes/SimpleDimensionLine","unlisted":false},{"type":"link","label":"VolumeMeasurement","href":"/api/@thatopen/components-front/classes/VolumeMeasurement","docId":"api/@thatopen/components-front/classes/VolumeMeasurement","unlisted":false}]},{"type":"category","label":"interfaces","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AreaSelection","href":"/api/@thatopen/components-front/interfaces/AreaSelection","docId":"api/@thatopen/components-front/interfaces/AreaSelection","unlisted":false},{"type":"link","label":"BvhLineSegmentsGeometry","href":"/api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry","docId":"api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry","unlisted":false},{"type":"link","label":"ClipStyle","href":"/api/@thatopen/components-front/interfaces/ClipStyle","docId":"api/@thatopen/components-front/interfaces/ClipStyle","unlisted":false},{"type":"link","label":"DimensionData","href":"/api/@thatopen/components-front/interfaces/DimensionData","docId":"api/@thatopen/components-front/interfaces/DimensionData","unlisted":false},{"type":"link","label":"Edge","href":"/api/@thatopen/components-front/interfaces/Edge","docId":"api/@thatopen/components-front/interfaces/Edge","unlisted":false},{"type":"link","label":"HighlightEvents","href":"/api/@thatopen/components-front/interfaces/HighlightEvents","docId":"api/@thatopen/components-front/interfaces/HighlightEvents","unlisted":false},{"type":"link","label":"HighlighterConfig","href":"/api/@thatopen/components-front/interfaces/HighlighterConfig","docId":"api/@thatopen/components-front/interfaces/HighlighterConfig","unlisted":false},{"type":"link","label":"IGroupedMarkers","href":"/api/@thatopen/components-front/interfaces/IGroupedMarkers","docId":"api/@thatopen/components-front/interfaces/IGroupedMarkers","unlisted":false},{"type":"link","label":"IMarker","href":"/api/@thatopen/components-front/interfaces/IMarker","docId":"api/@thatopen/components-front/interfaces/IMarker","unlisted":false},{"type":"link","label":"PlanView","href":"/api/@thatopen/components-front/interfaces/PlanView","docId":"api/@thatopen/components-front/interfaces/PlanView","unlisted":false},{"type":"link","label":"PostproductionSettings","href":"/api/@thatopen/components-front/interfaces/PostproductionSettings","docId":"api/@thatopen/components-front/interfaces/PostproductionSettings","unlisted":false},{"type":"link","label":"Section","href":"/api/@thatopen/components-front/interfaces/Section","docId":"api/@thatopen/components-front/interfaces/Section","unlisted":false},{"type":"link","label":"SerializedAreaMeasure","href":"/api/@thatopen/components-front/interfaces/SerializedAreaMeasure","docId":"api/@thatopen/components-front/interfaces/SerializedAreaMeasure","unlisted":false},{"type":"link","label":"Shadow","href":"/api/@thatopen/components-front/interfaces/Shadow","docId":"api/@thatopen/components-front/interfaces/Shadow","unlisted":false},{"type":"link","label":"Shadows","href":"/api/@thatopen/components-front/interfaces/Shadows","docId":"api/@thatopen/components-front/interfaces/Shadows","unlisted":false},{"type":"link","label":"StreamLoaderSettings","href":"/api/@thatopen/components-front/interfaces/StreamLoaderSettings","docId":"api/@thatopen/components-front/interfaces/StreamLoaderSettings","unlisted":false},{"type":"link","label":"StreamPropertiesSettings","href":"/api/@thatopen/components-front/interfaces/StreamPropertiesSettings","docId":"api/@thatopen/components-front/interfaces/StreamPropertiesSettings","unlisted":false},{"type":"link","label":"StreamedInstance","href":"/api/@thatopen/components-front/interfaces/StreamedInstance","docId":"api/@thatopen/components-front/interfaces/StreamedInstance","unlisted":false}]},{"type":"category","label":"type-aliases","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"CivilMarkerType","href":"/api/@thatopen/components-front/type-aliases/CivilMarkerType","docId":"api/@thatopen/components-front/type-aliases/CivilMarkerType","unlisted":false},{"type":"link","label":"Edges","href":"/api/@thatopen/components-front/type-aliases/Edges","docId":"api/@thatopen/components-front/type-aliases/Edges","unlisted":false},{"type":"link","label":"IndexFragmentMap","href":"/api/@thatopen/components-front/type-aliases/IndexFragmentMap","docId":"api/@thatopen/components-front/type-aliases/IndexFragmentMap","unlisted":false},{"type":"link","label":"LineStyles","href":"/api/@thatopen/components-front/type-aliases/LineStyles","docId":"api/@thatopen/components-front/type-aliases/LineStyles","unlisted":false},{"type":"link","label":"StreamedInstances","href":"/api/@thatopen/components-front/type-aliases/StreamedInstances","docId":"api/@thatopen/components-front/type-aliases/StreamedInstances","unlisted":false}]}],"href":"/api/@thatopen/components-front/"},{"type":"category","label":"@thatopen/fragments","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"classes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Alignment","href":"/api/@thatopen/fragments/classes/Alignment","docId":"api/@thatopen/fragments/classes/Alignment","unlisted":false},{"type":"link","label":"CivilCurve","href":"/api/@thatopen/fragments/classes/CivilCurve","docId":"api/@thatopen/fragments/classes/CivilCurve","unlisted":false},{"type":"link","label":"CurveMesh\\\\","href":"/api/@thatopen/fragments/classes/CurveMesh","docId":"api/@thatopen/fragments/classes/CurveMesh","unlisted":false},{"type":"link","label":"Fragment","href":"/api/@thatopen/fragments/classes/Fragment","docId":"api/@thatopen/fragments/classes/Fragment","unlisted":false},{"type":"link","label":"FragmentMesh","href":"/api/@thatopen/fragments/classes/FragmentMesh","docId":"api/@thatopen/fragments/classes/FragmentMesh","unlisted":false},{"type":"link","label":"FragmentsGroup","href":"/api/@thatopen/fragments/classes/FragmentsGroup","docId":"api/@thatopen/fragments/classes/FragmentsGroup","unlisted":false},{"type":"link","label":"Serializer","href":"/api/@thatopen/fragments/classes/Serializer","docId":"api/@thatopen/fragments/classes/Serializer","unlisted":false},{"type":"link","label":"StreamSerializer","href":"/api/@thatopen/fragments/classes/StreamSerializer","docId":"api/@thatopen/fragments/classes/StreamSerializer","unlisted":false}]},{"type":"category","label":"interfaces","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"FragmentIdMap","href":"/api/@thatopen/fragments/interfaces/FragmentIdMap","docId":"api/@thatopen/fragments/interfaces/FragmentIdMap","unlisted":false},{"type":"link","label":"IfcMetadata","href":"/api/@thatopen/fragments/interfaces/IfcMetadata","docId":"api/@thatopen/fragments/interfaces/IfcMetadata","unlisted":false},{"type":"link","label":"IfcProperties","href":"/api/@thatopen/fragments/interfaces/IfcProperties","docId":"api/@thatopen/fragments/interfaces/IfcProperties","unlisted":false},{"type":"link","label":"IndexedGeometry","href":"/api/@thatopen/fragments/interfaces/IndexedGeometry","docId":"api/@thatopen/fragments/interfaces/IndexedGeometry","unlisted":false},{"type":"link","label":"Item","href":"/api/@thatopen/fragments/interfaces/Item","docId":"api/@thatopen/fragments/interfaces/Item","unlisted":false}]},{"type":"category","label":"type-aliases","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AlignmentType","href":"/api/@thatopen/fragments/type-aliases/AlignmentType","docId":"api/@thatopen/fragments/type-aliases/AlignmentType","unlisted":false},{"type":"link","label":"IfcSchema","href":"/api/@thatopen/fragments/type-aliases/IfcSchema","docId":"api/@thatopen/fragments/type-aliases/IfcSchema","unlisted":false},{"type":"link","label":"StreamedGeometries","href":"/api/@thatopen/fragments/type-aliases/StreamedGeometries","docId":"api/@thatopen/fragments/type-aliases/StreamedGeometries","unlisted":false}]}],"href":"/api/@thatopen/fragments/"},{"type":"category","label":"@thatopen/ui","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"classes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Button","href":"/api/@thatopen/ui/classes/Button","docId":"api/@thatopen/ui/classes/Button","unlisted":false},{"type":"link","label":"Checkbox","href":"/api/@thatopen/ui/classes/Checkbox","docId":"api/@thatopen/ui/classes/Checkbox","unlisted":false},{"type":"link","label":"ColorInput","href":"/api/@thatopen/ui/classes/ColorInput","docId":"api/@thatopen/ui/classes/ColorInput","unlisted":false},{"type":"link","label":"Component","href":"/api/@thatopen/ui/classes/Component","docId":"api/@thatopen/ui/classes/Component","unlisted":false},{"type":"link","label":"Dropdown","href":"/api/@thatopen/ui/classes/Dropdown","docId":"api/@thatopen/ui/classes/Dropdown","unlisted":false},{"type":"link","label":"Grid\\\\","href":"/api/@thatopen/ui/classes/Grid","docId":"api/@thatopen/ui/classes/Grid","unlisted":false},{"type":"link","label":"Icon","href":"/api/@thatopen/ui/classes/Icon","docId":"api/@thatopen/ui/classes/Icon","unlisted":false},{"type":"link","label":"Input","href":"/api/@thatopen/ui/classes/Input","docId":"api/@thatopen/ui/classes/Input","unlisted":false},{"type":"link","label":"Label","href":"/api/@thatopen/ui/classes/Label","docId":"api/@thatopen/ui/classes/Label","unlisted":false},{"type":"link","label":"Manager","href":"/api/@thatopen/ui/classes/Manager","docId":"api/@thatopen/ui/classes/Manager","unlisted":false},{"type":"link","label":"NumberInput","href":"/api/@thatopen/ui/classes/NumberInput","docId":"api/@thatopen/ui/classes/NumberInput","unlisted":false},{"type":"link","label":"Option","href":"/api/@thatopen/ui/classes/Option","docId":"api/@thatopen/ui/classes/Option","unlisted":false},{"type":"link","label":"Panel","href":"/api/@thatopen/ui/classes/Panel","docId":"api/@thatopen/ui/classes/Panel","unlisted":false},{"type":"link","label":"PanelSection","href":"/api/@thatopen/ui/classes/PanelSection","docId":"api/@thatopen/ui/classes/PanelSection","unlisted":false},{"type":"link","label":"Selector","href":"/api/@thatopen/ui/classes/Selector","docId":"api/@thatopen/ui/classes/Selector","unlisted":false},{"type":"link","label":"Tab","href":"/api/@thatopen/ui/classes/Tab","docId":"api/@thatopen/ui/classes/Tab","unlisted":false},{"type":"link","label":"Table\\\\","href":"/api/@thatopen/ui/classes/Table","docId":"api/@thatopen/ui/classes/Table","unlisted":false},{"type":"link","label":"Tabs","href":"/api/@thatopen/ui/classes/Tabs","docId":"api/@thatopen/ui/classes/Tabs","unlisted":false},{"type":"link","label":"TextInput","href":"/api/@thatopen/ui/classes/TextInput","docId":"api/@thatopen/ui/classes/TextInput","unlisted":false},{"type":"link","label":"Toolbar","href":"/api/@thatopen/ui/classes/Toolbar","docId":"api/@thatopen/ui/classes/Toolbar","unlisted":false},{"type":"link","label":"ToolbarGroup","href":"/api/@thatopen/ui/classes/ToolbarGroup","docId":"api/@thatopen/ui/classes/ToolbarGroup","unlisted":false},{"type":"link","label":"ToolbarSection","href":"/api/@thatopen/ui/classes/ToolbarSection","docId":"api/@thatopen/ui/classes/ToolbarSection","unlisted":false},{"type":"link","label":"Viewport","href":"/api/@thatopen/ui/classes/Viewport","docId":"api/@thatopen/ui/classes/Viewport","unlisted":false}]},{"type":"category","label":"functions","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"getElementValue()","href":"/api/@thatopen/ui/functions/getElementValue","docId":"api/@thatopen/ui/functions/getElementValue","unlisted":false}]},{"type":"category","label":"interfaces","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"CellCreatedEventDetail\\\\","href":"/api/@thatopen/ui/interfaces/CellCreatedEventDetail","docId":"api/@thatopen/ui/interfaces/CellCreatedEventDetail","unlisted":false},{"type":"link","label":"ColumnData\\\\","href":"/api/@thatopen/ui/interfaces/ColumnData","docId":"api/@thatopen/ui/interfaces/ColumnData","unlisted":false},{"type":"link","label":"EntryQuery","href":"/api/@thatopen/ui/interfaces/EntryQuery","docId":"api/@thatopen/ui/interfaces/EntryQuery","unlisted":false},{"type":"link","label":"HasName","href":"/api/@thatopen/ui/interfaces/HasName","docId":"api/@thatopen/ui/interfaces/HasName","unlisted":false},{"type":"link","label":"HasValue","href":"/api/@thatopen/ui/interfaces/HasValue","docId":"api/@thatopen/ui/interfaces/HasValue","unlisted":false},{"type":"link","label":"ManagerConfig","href":"/api/@thatopen/ui/interfaces/ManagerConfig","docId":"api/@thatopen/ui/interfaces/ManagerConfig","unlisted":false},{"type":"link","label":"QueryGroup","href":"/api/@thatopen/ui/interfaces/QueryGroup","docId":"api/@thatopen/ui/interfaces/QueryGroup","unlisted":false},{"type":"link","label":"RowCreatedEventDetail\\\\","href":"/api/@thatopen/ui/interfaces/RowCreatedEventDetail","docId":"api/@thatopen/ui/interfaces/RowCreatedEventDetail","unlisted":false},{"type":"link","label":"RowDeselectedEventDetail\\\\","href":"/api/@thatopen/ui/interfaces/RowDeselectedEventDetail","docId":"api/@thatopen/ui/interfaces/RowDeselectedEventDetail","unlisted":false},{"type":"link","label":"RowSelectedEventDetail\\\\","href":"/api/@thatopen/ui/interfaces/RowSelectedEventDetail","docId":"api/@thatopen/ui/interfaces/RowSelectedEventDetail","unlisted":false},{"type":"link","label":"TableGroupData\\\\","href":"/api/@thatopen/ui/interfaces/TableGroupData","docId":"api/@thatopen/ui/interfaces/TableGroupData","unlisted":false},{"type":"link","label":"TableGroupTemplate\\\\","href":"/api/@thatopen/ui/interfaces/TableGroupTemplate","docId":"api/@thatopen/ui/interfaces/TableGroupTemplate","unlisted":false}]},{"type":"category","label":"type-aliases","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ConditionFunctions","href":"/api/@thatopen/ui/type-aliases/ConditionFunctions","docId":"api/@thatopen/ui/type-aliases/ConditionFunctions","unlisted":false},{"type":"link","label":"GridLayoutsDefinition\\\\","href":"/api/@thatopen/ui/type-aliases/GridLayoutsDefinition","docId":"api/@thatopen/ui/type-aliases/GridLayoutsDefinition","unlisted":false},{"type":"link","label":"Query","href":"/api/@thatopen/ui/type-aliases/Query","docId":"api/@thatopen/ui/type-aliases/Query","unlisted":false},{"type":"link","label":"QueryCondition","href":"/api/@thatopen/ui/type-aliases/QueryCondition","docId":"api/@thatopen/ui/type-aliases/QueryCondition","unlisted":false},{"type":"link","label":"QueryOperators","href":"/api/@thatopen/ui/type-aliases/QueryOperators","docId":"api/@thatopen/ui/type-aliases/QueryOperators","unlisted":false},{"type":"link","label":"StatefullComponent()\\\\","href":"/api/@thatopen/ui/type-aliases/StatefullComponent","docId":"api/@thatopen/ui/type-aliases/StatefullComponent","unlisted":false},{"type":"link","label":"StatelessComponent()","href":"/api/@thatopen/ui/type-aliases/StatelessComponent","docId":"api/@thatopen/ui/type-aliases/StatelessComponent","unlisted":false},{"type":"link","label":"TableDataTransform\\\\","href":"/api/@thatopen/ui/type-aliases/TableDataTransform","docId":"api/@thatopen/ui/type-aliases/TableDataTransform","unlisted":false},{"type":"link","label":"TableRowData\\\\","href":"/api/@thatopen/ui/type-aliases/TableRowData","docId":"api/@thatopen/ui/type-aliases/TableRowData","unlisted":false},{"type":"link","label":"TableRowTemplate\\\\","href":"/api/@thatopen/ui/type-aliases/TableRowTemplate","docId":"api/@thatopen/ui/type-aliases/TableRowTemplate","unlisted":false}]}],"href":"/api/@thatopen/ui/"},{"type":"category","label":"@thatopen/ui-obc","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"classes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Manager","href":"/api/@thatopen/ui-obc/classes/Manager","docId":"api/@thatopen/ui-obc/classes/Manager","unlisted":false},{"type":"link","label":"ViewCube","href":"/api/@thatopen/ui-obc/classes/ViewCube","docId":"api/@thatopen/ui-obc/classes/ViewCube","unlisted":false},{"type":"link","label":"World","href":"/api/@thatopen/ui-obc/classes/World","docId":"api/@thatopen/ui-obc/classes/World","unlisted":false},{"type":"link","label":"World2D","href":"/api/@thatopen/ui-obc/classes/World2D","docId":"api/@thatopen/ui-obc/classes/World2D","unlisted":false}]}],"href":"/api/@thatopen/ui-obc/"}]}],"href":"/api/"}]},"docs":{"api/@thatopen/components-front/classes/AngleMeasurement":{"id":"api/@thatopen/components-front/classes/AngleMeasurement","title":"AngleMeasurement","description":"This component allows users to measure angles in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/AreaMeasurement":{"id":"api/@thatopen/components-front/classes/AreaMeasurement","title":"AreaMeasurement","description":"This component allows users to measure areas in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Civil3DNavigator":{"id":"api/@thatopen/components-front/classes/Civil3DNavigator","title":"Civil3DNavigator","description":"This component provides functionality for navigating and interacting with civil engineering data in a 3D environment. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/CivilCrossSectionNavigator":{"id":"api/@thatopen/components-front/classes/CivilCrossSectionNavigator","title":"CivilCrossSectionNavigator","description":"This component is used to navigate and visualize cross sections of a 3D model. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/CivilElevationNavigator":{"id":"api/@thatopen/components-front/classes/CivilElevationNavigator","title":"CivilElevationNavigator","description":"This component is responsible for navigating and visualizing elevation data of infra/civil models (vertical alignments). \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/CivilNavigator":{"id":"api/@thatopen/components-front/classes/CivilNavigator","title":"abstract CivilNavigator","description":"Abstract class representing a Civil Navigator. It provides functionality to navigate and interact with civil engineering data.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/CivilPlanNavigator":{"id":"api/@thatopen/components-front/classes/CivilPlanNavigator","title":"CivilPlanNavigator","description":"This component is responsible for navigating and visualizing plan data of infra/civil models (horizontal alignments). \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/ClipEdges":{"id":"api/@thatopen/components-front/classes/ClipEdges","title":"ClipEdges","description":"A component that can add fills and outlines to the Clipper. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/ClippingEdges":{"id":"api/@thatopen/components-front/classes/ClippingEdges","title":"ClippingEdges","description":"Class representing the ClippingEdges component. This is responsible for managing and rendering the edges of clipped objects.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/ClippingFills":{"id":"api/@thatopen/components-front/classes/ClippingFills","title":"ClippingFills","description":"Class for managing and rendering the fills of a clipping plane.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/EdgeMeasurement":{"id":"api/@thatopen/components-front/classes/EdgeMeasurement","title":"EdgeMeasurement","description":"This component allows users to measure geometry edges in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/EdgesPlane":{"id":"api/@thatopen/components-front/classes/EdgesPlane","title":"EdgesPlane","description":"A more advanced version of Clipper planes that also includes edges and fills.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/EdgesStyles":{"id":"api/@thatopen/components-front/classes/EdgesStyles","title":"EdgesStyles","description":"A class representing styles for clipping edges in a 3D scene.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/FaceMeasurement":{"id":"api/@thatopen/components-front/classes/FaceMeasurement","title":"FaceMeasurement","description":"This component allows users to measure geometry faces in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/GeometryCullerRenderer":{"id":"api/@thatopen/components-front/classes/GeometryCullerRenderer","title":"GeometryCullerRenderer","description":"A renderer to determine a geometry visibility on screen","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/GraphicVertexPicker":{"id":"api/@thatopen/components-front/classes/GraphicVertexPicker","title":"GraphicVertexPicker","description":"A class that extends OBC.VertexPicker to provide a graphical marker for picking vertices in a 3D scene.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Highlighter":{"id":"api/@thatopen/components-front/classes/Highlighter","title":"Highlighter","description":"This component allows highlighting and selecting fragments in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/IfcStreamer":{"id":"api/@thatopen/components-front/classes/IfcStreamer","title":"IfcStreamer","description":"The IfcStreamer component is responsible for managing and streaming tiled IFC data. It provides methods for loading, removing, and managing IFC models, as well as handling visibility and caching. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/LengthMeasurement":{"id":"api/@thatopen/components-front/classes/LengthMeasurement","title":"LengthMeasurement","description":"A basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Mark":{"id":"api/@thatopen/components-front/classes/Mark","title":"Mark","description":"Represents a marker in the 3D world.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Marker":{"id":"api/@thatopen/components-front/classes/Marker","title":"Marker","description":"Component for Managing Markers along with creating different types of markers. Every marker is a Simple2DMarker. For every marker that needs to be added, you can use the Manager to add the marker and change its look and feel. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Outliner":{"id":"api/@thatopen/components-front/classes/Outliner","title":"Outliner","description":"This component allows adding a colored outline with thickness to fragments in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Plans":{"id":"api/@thatopen/components-front/classes/Plans","title":"Plans","description":"Component to easily define and navigate 2D floor plans. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Postproduction":{"id":"api/@thatopen/components-front/classes/Postproduction","title":"Postproduction","description":"Class representing a post-processing effect manager for a 3D scene. It uses the EffectComposer from three.js to apply various post-processing effects. Thanks to this.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/PostproductionRenderer":{"id":"api/@thatopen/components-front/classes/PostproductionRenderer","title":"PostproductionRenderer","description":"A class that extends RendererWith2D and adds post-processing capabilities. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/RendererWith2D":{"id":"api/@thatopen/components-front/classes/RendererWith2D","title":"RendererWith2D","description":"A basic renderer capable of rendering 3D and 2D objects (Objec3Ds and CSS2DObjects respectively).","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Sections":{"id":"api/@thatopen/components-front/classes/Sections","title":"Sections","description":"A component to create and manage arbitrary sections for BIM models.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/ShadowDropper":{"id":"api/@thatopen/components-front/classes/ShadowDropper","title":"ShadowDropper","description":"This component drops shadows on meshes in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/SimpleDimensionLine":{"id":"api/@thatopen/components-front/classes/SimpleDimensionLine","title":"SimpleDimensionLine","description":"A class representing a simple dimension line in a 3D space.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/VolumeMeasurement":{"id":"api/@thatopen/components-front/classes/VolumeMeasurement","title":"VolumeMeasurement","description":"This component allows users to measure geometry volumes in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/index":{"id":"api/@thatopen/components-front/index","title":"@thatopen/components-front","description":"Classes","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/AreaSelection":{"id":"api/@thatopen/components-front/interfaces/AreaSelection","title":"AreaSelection","description":"Represents a selection made by the user, containing area, perimeter, mesh, and label.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry":{"id":"api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry","title":"BvhLineSegmentsGeometry","description":"A line segments geometry whose BVH has been computed.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/ClipStyle":{"id":"api/@thatopen/components-front/interfaces/ClipStyle","title":"ClipStyle","description":"A style defines the appearance of the lines of the ClippingEdges for a set of meshes.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/DimensionData":{"id":"api/@thatopen/components-front/interfaces/DimensionData","title":"DimensionData","description":"Interface representing the data required to create a dimension line.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/Edge":{"id":"api/@thatopen/components-front/interfaces/Edge","title":"Edge","description":"The lines that are drawn when the clipping plane cuts the geometry specified by the ClipStyle.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/HighlighterConfig":{"id":"api/@thatopen/components-front/interfaces/HighlighterConfig","title":"HighlighterConfig","description":"Interface defining the configuration options for the Highlighter class.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/HighlightEvents":{"id":"api/@thatopen/components-front/interfaces/HighlightEvents","title":"HighlightEvents","description":"Interface defining the events that the Highlighter class can trigger. Each highlighter has its own set of events, identified by the highlighter name.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/IGroupedMarkers":{"id":"api/@thatopen/components-front/interfaces/IGroupedMarkers","title":"IGroupedMarkers","description":"Interface representing a group of markers.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/IMarker":{"id":"api/@thatopen/components-front/interfaces/IMarker","title":"IMarker","description":"Interface representing a marker object.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/PlanView":{"id":"api/@thatopen/components-front/interfaces/PlanView","title":"PlanView","description":"The data that describes a plan view.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/PostproductionSettings":{"id":"api/@thatopen/components-front/interfaces/PostproductionSettings","title":"PostproductionSettings","description":"Interface defining the settings for the post-processing effects.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/Section":{"id":"api/@thatopen/components-front/interfaces/Section","title":"Section","description":"The data that describes a section view.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/SerializedAreaMeasure":{"id":"api/@thatopen/components-front/interfaces/SerializedAreaMeasure","title":"SerializedAreaMeasure","description":"Represents a serialized version of an AreaSelection, used for saving and loading measurements.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/Shadow":{"id":"api/@thatopen/components-front/interfaces/Shadow","title":"Shadow","description":"Represents a shadow object used in the application.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/Shadows":{"id":"api/@thatopen/components-front/interfaces/Shadows","title":"Shadows","description":"Represents a collection of shadows, where each shadow is identified by a unique ID. The keys of the object are the IDs, and the values are the corresponding Shadow objects.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/StreamedInstance":{"id":"api/@thatopen/components-front/interfaces/StreamedInstance","title":"StreamedInstance","description":"Represents an instance of a streamed object.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/StreamLoaderSettings":{"id":"api/@thatopen/components-front/interfaces/StreamLoaderSettings","title":"StreamLoaderSettings","description":"Settings for the stream loader.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/StreamPropertiesSettings":{"id":"api/@thatopen/components-front/interfaces/StreamPropertiesSettings","title":"StreamPropertiesSettings","description":"Settings for the stream properties.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/type-aliases/CivilMarkerType":{"id":"api/@thatopen/components-front/type-aliases/CivilMarkerType","title":"CivilMarkerType","description":"CivilMarkerType: \\"hover\\" \\\\| \\"select\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/type-aliases/Edges":{"id":"api/@thatopen/components-front/type-aliases/Edges","title":"Edges","description":"Edges: object","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/type-aliases/IndexFragmentMap":{"id":"api/@thatopen/components-front/type-aliases/IndexFragmentMap","title":"IndexFragmentMap","description":"IndexFragmentMap: Map\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/type-aliases/LineStyles":{"id":"api/@thatopen/components-front/type-aliases/LineStyles","title":"LineStyles","description":"LineStyles: object","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/type-aliases/StreamedInstances":{"id":"api/@thatopen/components-front/type-aliases/StreamedInstances","title":"StreamedInstances","description":"StreamedInstances: Map\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/AsyncEvent":{"id":"api/@thatopen/components/classes/AsyncEvent","title":"AsyncEvent\\\\","description":"Simple event handler by Jason Kleban. Keep in mind that if you want to remove it later, you might want to declare the callback as an object. If you want to maintain the reference to this, you will need to declare the callback as an arrow function.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Base":{"id":"api/@thatopen/components/classes/Base","title":"abstract Base","description":"Base class of the library. Useful for finding out the interfaces something implements.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BaseCamera":{"id":"api/@thatopen/components/classes/BaseCamera","title":"abstract BaseCamera","description":"Abstract class representing a camera in a 3D world. All cameras should use this class as a base.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BaseRenderer":{"id":"api/@thatopen/components/classes/BaseRenderer","title":"abstract BaseRenderer","description":"Abstract class representing a renderer for a 3D world. All renderers should use this class as a base.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BaseScene":{"id":"api/@thatopen/components/classes/BaseScene","title":"abstract BaseScene","description":"Abstract class representing a base scene in the application. All scenes should use this class as a base.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BaseWorldItem":{"id":"api/@thatopen/components/classes/BaseWorldItem","title":"abstract BaseWorldItem","description":"One of the elements that make a world. It can be either a scene, a camera or a renderer.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BCFTopics":{"id":"api/@thatopen/components/classes/BCFTopics","title":"BCFTopics","description":"BCFTopics manages Building Collaboration Format (BCF) data the engine. It provides functionality for importing, exporting, and manipulating BCF data.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BoundingBoxer":{"id":"api/@thatopen/components/classes/BoundingBoxer","title":"BoundingBoxer","description":"A simple implementation of bounding box that works for fragments. The resulting bbox is not 100% precise, but it\'s fast, and should suffice for general use cases such as camera zooming or general boundary determination. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Classifier":{"id":"api/@thatopen/components/classes/Classifier","title":"Classifier","description":"The Classifier component is responsible for classifying and categorizing fragments based on various criteria. It provides methods to add, remove, find, and filter fragments based on their classification. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Clipper":{"id":"api/@thatopen/components/classes/Clipper","title":"Clipper","description":"A lightweight component to easily create, delete and handle clipping planes. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Comment":{"id":"api/@thatopen/components/classes/Comment","title":"Comment","description":"Represents a comment in a BCF Topic.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Component":{"id":"api/@thatopen/components/classes/Component","title":"abstract Component","description":"Components are the building blocks of this library. Components are singleton elements that contain specific functionality. For instance, the Clipper Component can create, delete and handle 3D clipping planes. Components must be unique (they can\'t be instanced more than once per Components instance), and have a static UUID that identifies them uniquely. The can be accessed globally using the Components instance.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Components":{"id":"api/@thatopen/components/classes/Components","title":"Components","description":"The entry point of the Components library. It can create, delete and access all the components of the library globally, update all the updatable components automatically and dispose all the components, preventing memory leaks.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/ConfigManager":{"id":"api/@thatopen/components/classes/ConfigManager","title":"ConfigManager","description":"A tool to manage all the configuration from the app centrally.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/CullerRenderer":{"id":"api/@thatopen/components/classes/CullerRenderer","title":"CullerRenderer","description":"A base renderer to determine visibility on screen.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Cullers":{"id":"api/@thatopen/components/classes/Cullers","title":"Cullers","description":"A component that provides culling functionality for meshes in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/DataMap":{"id":"api/@thatopen/components/classes/DataMap","title":"DataMap\\\\","description":"A class that extends the built-in Map class and provides additional events for item set, update, delete, and clear operations.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/DataSet":{"id":"api/@thatopen/components/classes/DataSet","title":"DataSet\\\\","description":"A class that extends the built-in Set class and provides additional functionality. It triggers events when items are added, deleted, or the set is cleared.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Disposer":{"id":"api/@thatopen/components/classes/Disposer","title":"Disposer","description":"A tool to safely remove meshes, geometries, materials and other items from memory to prevent memory leaks.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Event":{"id":"api/@thatopen/components/classes/Event","title":"Event\\\\","description":"Simple event handler by Jason Kleban. Keep in mind that if you want to remove it later, you might want to declare the callback as an object. If you want to maintain the reference to this, you will need to declare the callback as an arrow function.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/EventManager":{"id":"api/@thatopen/components/classes/EventManager","title":"EventManager","description":"Simple class to easily toggle and reset event lists.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Exploder":{"id":"api/@thatopen/components/classes/Exploder","title":"Exploder","description":"The Exploder component is responsible for managing the explosion of 3D model fragments (generally by floor). \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/FirstPersonMode":{"id":"api/@thatopen/components/classes/FirstPersonMode","title":"FirstPersonMode","description":"A NavigationMode that allows first person navigation, simulating FPS video games.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/FragmentsManager":{"id":"api/@thatopen/components/classes/FragmentsManager","title":"FragmentsManager","description":"Component to load, delete and manage fragments efficiently. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Grids":{"id":"api/@thatopen/components/classes/Grids","title":"Grids","description":"A component that manages grid instances. Each grid is associated with a unique world. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Hider":{"id":"api/@thatopen/components/classes/Hider","title":"Hider","description":"A component that hides or isolates fragments within a 3D scene. It extends the base Component class and provides methods to control fragment visibility and isolation. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IDSSpecification":{"id":"api/@thatopen/components/classes/IDSSpecification","title":"IDSSpecification","description":"Represents a single specification from the Information Delivery Specification (IDS) standard.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IDSSpecifications":{"id":"api/@thatopen/components/classes/IDSSpecifications","title":"IDSSpecifications","description":"Component that manages Information Delivery Specification (IDS) data. It provides functionality for importing, exporting, and manipulating IDS data.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcBasicQuery":{"id":"api/@thatopen/components/classes/IfcBasicQuery","title":"IfcBasicQuery","description":"A query that checks the direct attributes of IFC items.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcFinder":{"id":"api/@thatopen/components/classes/IfcFinder","title":"IfcFinder","description":"Component to make text queries in the IFC.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcFinderQuery":{"id":"api/@thatopen/components/classes/IfcFinderQuery","title":"abstract IfcFinderQuery","description":"The base class for all queries used by the IfcFinder.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcFragmentSettings":{"id":"api/@thatopen/components/classes/IfcFragmentSettings","title":"IfcFragmentSettings","description":"Configuration of the IFC-fragment conversion.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcGeometryTiler":{"id":"api/@thatopen/components/classes/IfcGeometryTiler","title":"IfcGeometryTiler","description":"A component that handles the tiling of IFC geometries for efficient streaming. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcIsolator":{"id":"api/@thatopen/components/classes/IfcIsolator","title":"IfcIsolator","description":"Component to isolate certain elements from an IFC and export to another IFC. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcJsonExporter":{"id":"api/@thatopen/components/classes/IfcJsonExporter","title":"IfcJsonExporter","description":"Component to export all the properties from an IFC to a JS object. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcLoader":{"id":"api/@thatopen/components/classes/IfcLoader","title":"IfcLoader","description":"The IfcLoader component is responsible for loading and processing IFC files. It utilizes the Web-IFC library to handle the IFC data and the Three.js library for 3D rendering. The class provides methods for setting up, loading, and cleaning up IFC files. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcPropertiesManager":{"id":"api/@thatopen/components/classes/IfcPropertiesManager","title":"IfcPropertiesManager","description":"Component to manage and edit properties and Psets in IFC files.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcPropertiesTiler":{"id":"api/@thatopen/components/classes/IfcPropertiesTiler","title":"IfcPropertiesTiler","description":"A component that converts the properties of an IFC file to tiles. It uses the Web-IFC library to read and process the IFC data. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcPropertyQuery":{"id":"api/@thatopen/components/classes/IfcPropertyQuery","title":"IfcPropertyQuery","description":"A query that checks the properties in the property sets assigned to IFC items.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcRelationsIndexer":{"id":"api/@thatopen/components/classes/IfcRelationsIndexer","title":"IfcRelationsIndexer","description":"Indexer component for IFC entities, facilitating the indexing and retrieval of IFC entity relationships. It is designed to process models properties by indexing their IFC entities\' relations based on predefined inverse attributes, and provides methods to query these relations. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcStreamingSettings":{"id":"api/@thatopen/components/classes/IfcStreamingSettings","title":"IfcStreamingSettings","description":"Settings for streaming IFC geometry and assets. Extends IfcFragmentSettings to inherit common settings.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/MeasurementUtils":{"id":"api/@thatopen/components/classes/MeasurementUtils","title":"MeasurementUtils","description":"Utility component for performing measurements on 3D meshes by providing methods for measuring distances between edges and faces. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/MeshCullerRenderer":{"id":"api/@thatopen/components/classes/MeshCullerRenderer","title":"MeshCullerRenderer","description":"A renderer to hide/show meshes depending on their visibility from the user\'s point of view.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/MiniMap":{"id":"api/@thatopen/components/classes/MiniMap","title":"MiniMap","description":"A class representing a 2D minimap of a 3D world.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/MiniMaps":{"id":"api/@thatopen/components/classes/MiniMaps","title":"MiniMaps","description":"A component that manages multiple MiniMap instances, each associated with a unique world ID. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Mouse":{"id":"api/@thatopen/components/classes/Mouse","title":"Mouse","description":"A helper to easily get the real position of the mouse in the Three.js canvas to work with tools like the raycaster, even if it has been transformed through CSS or doesn\'t occupy the whole screen.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/OrbitMode":{"id":"api/@thatopen/components/classes/OrbitMode","title":"OrbitMode","description":"A NavigationMode that allows 3D navigation and panning like in many 3D and CAD softwares.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/OrthoPerspectiveCamera":{"id":"api/@thatopen/components/classes/OrthoPerspectiveCamera","title":"OrthoPerspectiveCamera","description":"A flexible camera that uses yomotsu\'s cameracontrols to control the camera in 2D and 3D. It supports multiple navigation modes, such as 2D floor plan navigation, first person and 3D orbit. This class extends the SimpleCamera class and adds additional functionality for managing different camera projections and navigation modes. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/PlanMode":{"id":"api/@thatopen/components/classes/PlanMode","title":"PlanMode","description":"A NavigationMode that allows to navigate floorplans in 2D, like many BIM tools.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/ProjectionManager":{"id":"api/@thatopen/components/classes/ProjectionManager","title":"ProjectionManager","description":"Object to control the CameraProjection of the OrthoPerspectiveCamera.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/PropertiesStreamingSettings":{"id":"api/@thatopen/components/classes/PropertiesStreamingSettings","title":"PropertiesStreamingSettings","description":"Settings for streaming properties. Extends IfcFragmentSettings to inherit common settings.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Raycasters":{"id":"api/@thatopen/components/classes/Raycasters","title":"Raycasters","description":"A component that manages a raycaster for each world and automatically disposes it when its corresponding world is disposed. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/ShadowedScene":{"id":"api/@thatopen/components/classes/ShadowedScene","title":"ShadowedScene","description":"A scene that supports efficient cast shadows. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleCamera":{"id":"api/@thatopen/components/classes/SimpleCamera","title":"SimpleCamera","description":"A basic camera that uses yomotsu\'s cameracontrols to control the camera in 2D and 3D. Check out it\'s API to find out what features it offers.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleGrid":{"id":"api/@thatopen/components/classes/SimpleGrid","title":"SimpleGrid","description":"An infinite grid. Created by fyrestar and translated to typescript by dkaraush.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimplePlane":{"id":"api/@thatopen/components/classes/SimplePlane","title":"SimplePlane","description":"Each of the clipping planes created by the clipper.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleRaycaster":{"id":"api/@thatopen/components/classes/SimpleRaycaster","title":"SimpleRaycaster","description":"A simple raycaster that allows to easily get items from the scene using the mouse and touch events.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleRenderer":{"id":"api/@thatopen/components/classes/SimpleRenderer","title":"SimpleRenderer","description":"A basic renderer capable of rendering Objec3Ds.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleScene":{"id":"api/@thatopen/components/classes/SimpleScene","title":"SimpleScene","description":"A basic 3D scene to add objects hierarchically, and easily dispose them when you are finished with it.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleWorld":{"id":"api/@thatopen/components/classes/SimpleWorld","title":"SimpleWorld\\\\","description":"A class representing a simple world in a 3D environment. It extends the Base class and implements the World interface.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/VertexPicker":{"id":"api/@thatopen/components/classes/VertexPicker","title":"VertexPicker","description":"A class that provides functionality for picking vertices in a 3D scene.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Viewpoint":{"id":"api/@thatopen/components/classes/Viewpoint","title":"Viewpoint","description":"Represents a BCF compliant viewpoint from BuildingSMART.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Worlds":{"id":"api/@thatopen/components/classes/Worlds","title":"Worlds","description":"A class representing a collection of worlds within a game engine. It manages the creation, deletion, and update of worlds. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/index":{"id":"api/@thatopen/components/index","title":"@thatopen/components","description":"Classes","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/AttributeListener":{"id":"api/@thatopen/components/interfaces/AttributeListener","title":"AttributeListener","description":"Interface representing a map of attribute listeners. The keys are model UUIDs, and the values are objects with express IDs as keys, and objects with attribute names as keys, and Event objects as values.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/BCFTopicsConfig":{"id":"api/@thatopen/components/interfaces/BCFTopicsConfig","title":"BCFTopicsConfig","description":"Configuration settings for managing BCF topics. This interface defines the properties and their meanings used to control the behavior of exporting and importing BCF topics.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/BCFViewpoint":{"id":"api/@thatopen/components/interfaces/BCFViewpoint","title":"BCFViewpoint","description":"Represents a viewpoint in a BCF file.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/CameraControllable":{"id":"api/@thatopen/components/interfaces/CameraControllable","title":"CameraControllable","description":"Whether a camera uses the Camera Controls library.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/ChangeMap":{"id":"api/@thatopen/components/interfaces/ChangeMap","title":"ChangeMap","description":"Interface representing a map of changed entities in a model. The keys are model UUIDs, and the values are sets of express IDs of changed entities.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Classification":{"id":"api/@thatopen/components/interfaces/Classification","title":"Classification","description":"Interface representing a classification system. The classification is organized by system and class name, and each class contains a map of fragment IDs with extra information.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Configurable":{"id":"api/@thatopen/components/interfaces/Configurable","title":"Configurable\\\\","description":"Whether this component supports to be configured.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Createable":{"id":"api/@thatopen/components/interfaces/Createable","title":"Createable","description":"Whether this component supports create and destroy operations. This generally applies for components that work with instances, such as clipping planes or dimensions.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Disposable":{"id":"api/@thatopen/components/interfaces/Disposable","title":"Disposable","description":"Whether this component has to be manually destroyed once you are done with it to prevent memory leaks. This also ensures that the DOM events created by that component will be cleaned up.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/EntitiesRelatedEvent":{"id":"api/@thatopen/components/interfaces/EntitiesRelatedEvent","title":"EntitiesRelatedEvent","description":"Interface definition of an Entities Related Event from the IfcRelationsIndexer. This event gets triggered when two or more entities has been related with each other.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Eventable":{"id":"api/@thatopen/components/interfaces/Eventable","title":"Eventable","description":"Whether it has events or not.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Hideable":{"id":"api/@thatopen/components/interfaces/Hideable","title":"Hideable","description":"Whether the geometric representation of this component can be hidden or shown in the Three.js scene.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/IDSCheckResult":{"id":"api/@thatopen/components/interfaces/IDSCheckResult","title":"IDSCheckResult","description":"Represents the result of a check performed by an IDSFacet test.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/IfcCategoryRule":{"id":"api/@thatopen/components/interfaces/IfcCategoryRule","title":"IfcCategoryRule","description":"A rule for the IfcFinder to search items based on their category.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/IfcOperatorRule":{"id":"api/@thatopen/components/interfaces/IfcOperatorRule","title":"IfcOperatorRule","description":"A rule for the IfcFinder to search items based on the value of a numeric property defined in their property sets.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/IfcPropertyRule":{"id":"api/@thatopen/components/interfaces/IfcPropertyRule","title":"IfcPropertyRule","description":"A rule for the IfcFinder to search items based on the properties defined in their property sets.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/MeasureEdge":{"id":"api/@thatopen/components/interfaces/MeasureEdge","title":"MeasureEdge","description":"Represents an edge measurement result.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/MiniMapConfig":{"id":"api/@thatopen/components/interfaces/MiniMapConfig","title":"MiniMapConfig","description":"Configuration interface for the MiniMap.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/NavigationMode":{"id":"api/@thatopen/components/interfaces/NavigationMode","title":"NavigationMode","description":"An object that determines the behavior of the camera controls and the user input (e.g. 2D floor plan mode, first person mode, etc).","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Progress":{"id":"api/@thatopen/components/interfaces/Progress","title":"Progress","description":"Basic type to describe the progress of any kind of process.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Resizeable":{"id":"api/@thatopen/components/interfaces/Resizeable","title":"Resizeable","description":"Whether this component can be resized. The meaning of this can vary depending on the component: resizing a Renderer component could mean changing its resolution, whereas resizing a Mesh would change its scale.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/ShadowedSceneConfig":{"id":"api/@thatopen/components/interfaces/ShadowedSceneConfig","title":"ShadowedSceneConfig","description":"Configuration interface for the ShadowedScene. Defines properties for directional and ambient lights, as well as shadows.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/SimpleGridConfig":{"id":"api/@thatopen/components/interfaces/SimpleGridConfig","title":"SimpleGridConfig","description":"Configuration interface for the SimpleGrid.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/SimpleSceneConfig":{"id":"api/@thatopen/components/interfaces/SimpleSceneConfig","title":"SimpleSceneConfig","description":"Configuration interface for the SimpleScene.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/StreamedAsset":{"id":"api/@thatopen/components/interfaces/StreamedAsset","title":"StreamedAsset","description":"A streamed asset, which consists of multiple geometries. Each geometry in the asset is identified by a unique number (geometryID), and contains information about its transformation and color.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/StreamedGeometries":{"id":"api/@thatopen/components/interfaces/StreamedGeometries","title":"StreamedGeometries","description":"A dictionary of geometries streamed from a server. Each geometry is identified by a unique number (id), and contains information about its bounding box, whether it has holes, and an optional file path for the geometry data.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Updateable":{"id":"api/@thatopen/components/interfaces/Updateable","title":"Updateable","description":"Whether this component should be updated each frame.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/VertexPickerConfig":{"id":"api/@thatopen/components/interfaces/VertexPickerConfig","title":"VertexPickerConfig","description":"Configuration interface for the VertexPicker component.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/World":{"id":"api/@thatopen/components/interfaces/World","title":"World","description":"Represents a 3D world with meshes, scene, camera, renderer, and other properties.","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/BooleanPropTypes":{"id":"api/@thatopen/components/type-aliases/BooleanPropTypes","title":"BooleanPropTypes","description":"BooleanPropTypes: \\"IfcBoolean\\" \\\\| \\"IfcLogical\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/CameraProjection":{"id":"api/@thatopen/components/type-aliases/CameraProjection","title":"CameraProjection","description":"CameraProjection: \\"Perspective\\" \\\\| \\"Orthographic\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/IfcFinderRule":{"id":"api/@thatopen/components/type-aliases/IfcFinderRule","title":"IfcFinderRule","description":"IfcFinderRule: IfcCategoryRule \\\\| IfcPropertyRule \\\\| IfcOperatorRule","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/IfcRelations":{"id":"api/@thatopen/components/type-aliases/IfcRelations","title":"IfcRelations","description":"IfcRelations: [typeof WEBIFC.IFCRELAGGREGATES, typeof WEBIFC.IFCRELASSOCIATESMATERIAL, typeof WEBIFC.IFCRELASSOCIATESCLASSIFICATION, typeof WEBIFC.IFCRELASSIGNSTOGROUP, typeof WEBIFC.IFCRELDEFINESBYPROPERTIES, typeof WEBIFC.IFCRELDEFINESBYTYPE, typeof WEBIFC.IFCRELDEFINESBYTEMPLATE, typeof WEBIFC.IFCRELCONTAINEDINSPATIALSTRUCTURE, typeof WEBIFC.IFCRELFLOWCONTROLELEMENTS, typeof WEBIFC.IFCRELCONNECTSELEMENTS, typeof WEBIFC.IFCRELASSIGNSTOPRODUCT, typeof WEBIFC.IFCRELDECLARES, typeof WEBIFC.IFCRELASSIGNSTOCONTROL, typeof WEBIFC.IFCRELNESTS, typeof WEBIFC.IFCRELASSOCIATESDOCUMENT]","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/InverseAttributes":{"id":"api/@thatopen/components/type-aliases/InverseAttributes","title":"InverseAttributes","description":"InverseAttributes: [\\"IsDecomposedBy\\", \\"Decomposes\\", \\"AssociatedTo\\", \\"HasAssociations\\", \\"ClassificationForObjects\\", \\"IsGroupedBy\\", \\"HasAssignments\\", \\"IsDefinedBy\\", \\"DefinesOcurrence\\", \\"IsTypedBy\\", \\"Types\\", \\"Defines\\", \\"ContainedInStructure\\", \\"ContainsElements\\", \\"HasControlElements\\", \\"AssignedToFlowElement\\", \\"ConnectedTo\\", \\"ConnectedFrom\\", \\"ReferencedBy\\", \\"Declares\\", \\"HasContext\\", \\"Controls\\", \\"IsNestedBy\\", \\"Nests\\", \\"DocumentRefForObjects\\"]","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/NavModeID":{"id":"api/@thatopen/components/type-aliases/NavModeID","title":"NavModeID","description":"NavModeID: \\"Orbit\\" \\\\| \\"FirstPerson\\" \\\\| \\"Plan\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/NumericPropTypes":{"id":"api/@thatopen/components/type-aliases/NumericPropTypes","title":"NumericPropTypes","description":"NumericPropTypes: \\"IfcInteger\\" \\\\| \\"IfcReal\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/SerializedQuery":{"id":"api/@thatopen/components/type-aliases/SerializedQuery","title":"SerializedQuery","description":"SerializedQuery: object","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/StringPropTypes":{"id":"api/@thatopen/components/type-aliases/StringPropTypes","title":"StringPropTypes","description":"StringPropTypes: \\"IfcText\\" \\\\| \\"IfcLabel\\" \\\\| \\"IfcIdentifier\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components/variables/GeometryTypes":{"id":"api/@thatopen/components/variables/GeometryTypes","title":"GeometryTypes","description":"const GeometryTypes: Set\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/components/variables/IfcCategoryMap":{"id":"api/@thatopen/components/variables/IfcCategoryMap","title":"IfcCategoryMap","description":"const IfcCategoryMap: object","sidebar":"tutorialSidebar"},"api/@thatopen/components/variables/IfcElements":{"id":"api/@thatopen/components/variables/IfcElements","title":"IfcElements","description":"const IfcElements: object","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/classes/Alignment":{"id":"api/@thatopen/fragments/classes/Alignment","title":"Alignment","description":"Represents an alignment in a civil engineering project. An alignment consists of vertical, horizontal, and absolute civil curves.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/classes/CivilCurve":{"id":"api/@thatopen/fragments/classes/CivilCurve","title":"CivilCurve","description":"Represents an alignment curve of a civil engineering model.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/classes/CurveMesh":{"id":"api/@thatopen/fragments/classes/CurveMesh","title":"CurveMesh\\\\","description":"Represents an alignment 3D curve mesh with additional civil engineering properties. Extends THREE.LineSegments to provide geometry and material for the curve.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/classes/Fragment":{"id":"api/@thatopen/fragments/classes/Fragment","title":"Fragment","description":"Class representing a fragment of a 3D model. Fragments are just a simple wrapper around THREE.InstancedMesh. Each fragment can contain Items (identified by ItemID) which are mapped to one or many instances inside this THREE.InstancedMesh. Fragments also implement features like instance buffer resizing and hiding out of the box.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/classes/FragmentMesh":{"id":"api/@thatopen/fragments/classes/FragmentMesh","title":"FragmentMesh","description":"A class representing a THREE.InstancedMesh with additional properties for fragment data.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/classes/FragmentsGroup":{"id":"api/@thatopen/fragments/classes/FragmentsGroup","title":"FragmentsGroup","description":"A class representing a group of 3D fragments. This class extends THREE.Group and adds additional properties and methods for managing and interacting with the fragments it contains.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/classes/Serializer":{"id":"api/@thatopen/fragments/classes/Serializer","title":"Serializer","description":"Serializer class for handling the serialization and deserialization of 3D model data. It uses the flatbuffers library for efficient data serialization and deserialization.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/classes/StreamSerializer":{"id":"api/@thatopen/fragments/classes/StreamSerializer","title":"StreamSerializer","description":"A class for serializing and deserializing geometry data in a streamed format.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/index":{"id":"api/@thatopen/fragments/index","title":"@thatopen/fragments","description":"Classes","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/interfaces/FragmentIdMap":{"id":"api/@thatopen/fragments/interfaces/FragmentIdMap","title":"FragmentIdMap","description":"A map that associates each fragmentID with a set of item IDs.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/interfaces/IfcMetadata":{"id":"api/@thatopen/fragments/interfaces/IfcMetadata","title":"IfcMetadata","description":"Represents metadata related to the IFC model.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/interfaces/IfcProperties":{"id":"api/@thatopen/fragments/interfaces/IfcProperties","title":"IfcProperties","description":"Represents a map of IFC properties.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/interfaces/IndexedGeometry":{"id":"api/@thatopen/fragments/interfaces/IndexedGeometry","title":"IndexedGeometry","description":"Represents a THREE.js geometry with an index attribute. We always work with indexed geometries, and this allows us to not check the existence of the index attribute each time we access it.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/interfaces/Item":{"id":"api/@thatopen/fragments/interfaces/Item","title":"Item","description":"Represents an item in the 3D model.","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/type-aliases/AlignmentType":{"id":"api/@thatopen/fragments/type-aliases/AlignmentType","title":"AlignmentType","description":"AlignmentType: \\"vertical\\" \\\\| \\"horizontal\\" \\\\| \\"absolute\\"","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/type-aliases/IfcSchema":{"id":"api/@thatopen/fragments/type-aliases/IfcSchema","title":"IfcSchema","description":"IfcSchema: \\"IFC2X3\\" \\\\| \\"IFC4\\" \\\\| \\"IFC4X3\\"","sidebar":"tutorialSidebar"},"api/@thatopen/fragments/type-aliases/StreamedGeometries":{"id":"api/@thatopen/fragments/type-aliases/StreamedGeometries","title":"StreamedGeometries","description":"StreamedGeometries: Map\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/ui-obc/classes/Manager":{"id":"api/@thatopen/ui-obc/classes/Manager","title":"Manager","description":"Manager class is responsible for initializing the custom elements for the BIM application. It uses the BUIManager from \\"@thatopen/ui\\" to define custom elements for 2D and 3D views.","sidebar":"tutorialSidebar"},"api/@thatopen/ui-obc/classes/ViewCube":{"id":"api/@thatopen/ui-obc/classes/ViewCube","title":"ViewCube","description":"A custom 3D view cube component for BIM applications. HTML tag: bim-view-cube","sidebar":"tutorialSidebar"},"api/@thatopen/ui-obc/classes/World":{"id":"api/@thatopen/ui-obc/classes/World","title":"World","description":"A world for BIM Apps.","sidebar":"tutorialSidebar"},"api/@thatopen/ui-obc/classes/World2D":{"id":"api/@thatopen/ui-obc/classes/World2D","title":"World2D","description":"A custom 2D Scene component for BIM applications. HTML tag: bim-world-2d","sidebar":"tutorialSidebar"},"api/@thatopen/ui-obc/index":{"id":"api/@thatopen/ui-obc/index","title":"@thatopen/ui-obc","description":"Classes","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Button":{"id":"api/@thatopen/ui/classes/Button","title":"Button","description":"A custom button web component for BIM applications. HTML tag: bim-button","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Checkbox":{"id":"api/@thatopen/ui/classes/Checkbox","title":"Checkbox","description":"A custom checkbox web component for BIM applications. HTML tag: bim-checkbox","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/ColorInput":{"id":"api/@thatopen/ui/classes/ColorInput","title":"ColorInput","description":"A custom color input web component for BIM applications. HTML tag: bim-color-input","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Component":{"id":"api/@thatopen/ui/classes/Component","title":"Component","description":"A base class for UI components that utilizes the LitElement library. Provides functionality for rendering stateless and stateful components, as well as lazy loading of elements using Intersection Observer.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Dropdown":{"id":"api/@thatopen/ui/classes/Dropdown","title":"Dropdown","description":"A custom dropdown web component for BIM applications.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Grid":{"id":"api/@thatopen/ui/classes/Grid","title":"Grid\\\\","description":"A custom grid component for web applications.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Icon":{"id":"api/@thatopen/ui/classes/Icon","title":"Icon","description":"A custom icon web component for BIM applications. HTML tag: bim-icon","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Input":{"id":"api/@thatopen/ui/classes/Input","title":"Input","description":"A custom input web component for BIM applications. HTML tag: bim-input","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Label":{"id":"api/@thatopen/ui/classes/Label","title":"Label","description":"A custom label web component for BIM applications. HTML tag: bim-label","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Manager":{"id":"api/@thatopen/ui/classes/Manager","title":"Manager","description":"Manager class is responsible for initializing the BIM UI library, defining custom elements, and providing configuration options.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/NumberInput":{"id":"api/@thatopen/ui/classes/NumberInput","title":"NumberInput","description":"A custom number input web component for BIM applications. HTML tag: bim-number-input","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Option":{"id":"api/@thatopen/ui/classes/Option","title":"Option","description":"A custom option web component for BIM applications. HTML tag: bim-option","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Panel":{"id":"api/@thatopen/ui/classes/Panel","title":"Panel","description":"A custom panel web component for BIM applications. HTML tag: bim-panel","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/PanelSection":{"id":"api/@thatopen/ui/classes/PanelSection","title":"PanelSection","description":"A custom panel section web component for BIM applications. HTML tag: bim-panel-section","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Selector":{"id":"api/@thatopen/ui/classes/Selector","title":"Selector","description":"A custom selector web component for BIM applications. HTML tag: bim-selector","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Tab":{"id":"api/@thatopen/ui/classes/Tab","title":"Tab","description":"A custom tab web component for BIM applications. HTML tag: bim-tab","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Table":{"id":"api/@thatopen/ui/classes/Table","title":"Table\\\\","description":"A custom table web component for BIM applications. HTML tag: bim-table","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Tabs":{"id":"api/@thatopen/ui/classes/Tabs","title":"Tabs","description":"A custom tabs web component for BIM applications. HTML tag: bim-tabs","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/TextInput":{"id":"api/@thatopen/ui/classes/TextInput","title":"TextInput","description":"A custom text input web component for BIM applications. HTML tag: bim-text-input","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Toolbar":{"id":"api/@thatopen/ui/classes/Toolbar","title":"Toolbar","description":"A custom toolbar web component for BIM applications. HTML tag: bim-toolbar","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/ToolbarGroup":{"id":"api/@thatopen/ui/classes/ToolbarGroup","title":"ToolbarGroup","description":"A custom toolbar group web component for BIM applications. HTML tag: bim-toolbar-group","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/ToolbarSection":{"id":"api/@thatopen/ui/classes/ToolbarSection","title":"ToolbarSection","description":"A custom toolbar section web component for BIM applications. HTML tag: bim-toolbar-section","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Viewport":{"id":"api/@thatopen/ui/classes/Viewport","title":"Viewport","description":"A custom viewport web component for BIM applications. HTML tag: bim-viewport","sidebar":"tutorialSidebar"},"api/@thatopen/ui/functions/getElementValue":{"id":"api/@thatopen/ui/functions/getElementValue","title":"getElementValue()","description":"getElementValue(child, transform, recursive): Record\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/ui/index":{"id":"api/@thatopen/ui/index","title":"@thatopen/ui","description":"Classes","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/CellCreatedEventDetail":{"id":"api/@thatopen/ui/interfaces/CellCreatedEventDetail","title":"CellCreatedEventDetail\\\\","description":"Represents the detail of a cell created event.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/ColumnData":{"id":"api/@thatopen/ui/interfaces/ColumnData","title":"ColumnData\\\\","description":"Represents a column in the table.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/EntryQuery":{"id":"api/@thatopen/ui/interfaces/EntryQuery","title":"EntryQuery","description":"Represents a single query condition.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/HasName":{"id":"api/@thatopen/ui/interfaces/HasName","title":"HasName","description":"Represents an object that has a name and an optional label.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/HasValue":{"id":"api/@thatopen/ui/interfaces/HasValue","title":"HasValue","description":"Represents an object that has a value and an event for value changes.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/ManagerConfig":{"id":"api/@thatopen/ui/interfaces/ManagerConfig","title":"ManagerConfig","description":"Configuration interface for the Manager class. Defines the properties and their types that can be configured for the Manager.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/QueryGroup":{"id":"api/@thatopen/ui/interfaces/QueryGroup","title":"QueryGroup","description":"Represents a group of queries with an operator.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/RowCreatedEventDetail":{"id":"api/@thatopen/ui/interfaces/RowCreatedEventDetail","title":"RowCreatedEventDetail\\\\","description":"Represents the detail of a row created event.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/RowDeselectedEventDetail":{"id":"api/@thatopen/ui/interfaces/RowDeselectedEventDetail","title":"RowDeselectedEventDetail\\\\","description":"Represents the detail of a row deselected event.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/RowSelectedEventDetail":{"id":"api/@thatopen/ui/interfaces/RowSelectedEventDetail","title":"RowSelectedEventDetail\\\\","description":"Represents the detail of a row selected event.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/TableGroupData":{"id":"api/@thatopen/ui/interfaces/TableGroupData","title":"TableGroupData\\\\","description":"Represents a group of table rows with optional children.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/TableGroupTemplate":{"id":"api/@thatopen/ui/interfaces/TableGroupTemplate","title":"TableGroupTemplate\\\\","description":"Represents a template for rendering a group of table rows in a table.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/ConditionFunctions":{"id":"api/@thatopen/ui/type-aliases/ConditionFunctions","title":"ConditionFunctions","description":"ConditionFunctions Function }","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/GridLayoutsDefinition":{"id":"api/@thatopen/ui/type-aliases/GridLayoutsDefinition","title":"GridLayoutsDefinition\\\\","description":"GridLayoutsDefinition\\\\ Object }","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/Query":{"id":"api/@thatopen/ui/type-aliases/Query","title":"Query","description":"Query: (EntryQuery \\\\| QueryGroup)[]","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/QueryCondition":{"id":"api/@thatopen/ui/type-aliases/QueryCondition","title":"QueryCondition","description":"QueryCondition: \\"=\\" \\\\| \\">\\" \\\\| \\">=\\" \\\\| \\"<\\" \\\\| \\"<=\\" \\\\| \\"?\\" \\\\| \\"/\\" \\\\| \\"#\\"","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/QueryOperators":{"id":"api/@thatopen/ui/type-aliases/QueryOperators","title":"QueryOperators","description":"QueryOperators: \\"&\\" \\\\| \\"\\\\|\\"","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/StatefullComponent":{"id":"api/@thatopen/ui/type-aliases/StatefullComponent","title":"StatefullComponent()\\\\","description":"StatefullComponent\\\\: (state, update) => TemplateResult","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/StatelessComponent":{"id":"api/@thatopen/ui/type-aliases/StatelessComponent","title":"StatelessComponent()","description":"StatelessComponent: () => TemplateResult","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/TableDataTransform":{"id":"api/@thatopen/ui/type-aliases/TableDataTransform","title":"TableDataTransform\\\\","description":"TableDataTransform\\\\ Function }","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/TableRowData":{"id":"api/@thatopen/ui/type-aliases/TableRowData","title":"TableRowData\\\\","description":"TableRowData\\\\: Record\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/TableRowTemplate":{"id":"api/@thatopen/ui/type-aliases/TableRowTemplate","title":"TableRowTemplate\\\\","description":"TableRowTemplate\\\\: Partial\\\\\\\\>","sidebar":"tutorialSidebar"},"api/index":{"id":"api/index","title":"\ud83d\udccb API","description":"Packages","sidebar":"tutorialSidebar"},"components/clean-components-guide":{"id":"components/clean-components-guide","title":"\ud83e\uddf9 Keeping them clean","description":"\ud83e\uddfd Basics","sidebar":"tutorialSidebar"},"components/creating-components":{"id":"components/creating-components","title":"\ud83e\uddbe Making your own","description":"\ud83d\udc6a Create it","sidebar":"tutorialSidebar"},"components/getting-started":{"id":"components/getting-started","title":"\ud83d\ude80 Getting started","description":"\ud83d\udc69\ud83c\udffb\u200d\ud83c\udfeb Component ABC","sidebar":"tutorialSidebar"},"components/tutorial-paths":{"id":"components/tutorial-paths","title":"\ud83e\udded Tutorial paths","description":"As you can see, we have tons of tutorials in this documentations, and we will keep adding more as new features come out. If you\'re not looking for anything specific, it can be a little difficult to know where to start. For that reason, here are some interesting itineraries to take your first steps in the library! \ud83d\udd25\ud83d\udd25\ud83d\ude80","sidebar":"tutorialSidebar"},"contributing":{"id":"contributing","title":"\ud83e\udd1d Get involved","description":"Want to help us make this project even more amazing? Great! Contributing is easy, and on this page you\'ll find a quick guide on how to do it. \ud83d\udc47\ud83c\udffb","sidebar":"tutorialSidebar"},"intro":{"id":"intro","title":"\ud83d\udc68\ud83c\udffb\u200d\ud83d\udcbb Introduction","description":"Welcome to That Open Docs! Have you ever wanted to create your own BIM software, but don\'t know where to start? Here you will find everything you need to go from zero to hero! \ud83c\udfe2\ud83d\udc69\u200d\ud83d\udcbb","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/BCFTopics":{"id":"Tutorials/Components/Core/BCFTopics","title":"BCFTopics","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/BCFTopics\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/BoundingBoxer":{"id":"Tutorials/Components/Core/BoundingBoxer","title":"BoundingBoxer","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/BoundingBoxer\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Classifier":{"id":"Tutorials/Components/Core/Classifier","title":"Classifier","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Classifier\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Clipper":{"id":"Tutorials/Components/Core/Clipper","title":"Clipper","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Clipper\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Cullers":{"id":"Tutorials/Components/Core/Cullers","title":"Cullers","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Cullers\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Exploder":{"id":"Tutorials/Components/Core/Exploder","title":"Exploder","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Exploder\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/FragmentsManager":{"id":"Tutorials/Components/Core/FragmentsManager","title":"FragmentsManager","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/FragmentsManager\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Grids":{"id":"Tutorials/Components/Core/Grids","title":"Grids","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Grids\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Hider":{"id":"Tutorials/Components/Core/Hider","title":"Hider","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Hider\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcFinder":{"id":"Tutorials/Components/Core/IfcFinder","title":"IfcFinder","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcFinder\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcGeometryTiler":{"id":"Tutorials/Components/Core/IfcGeometryTiler","title":"IfcGeometryTiler","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcGeometryTiler\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcIsolator":{"id":"Tutorials/Components/Core/IfcIsolator","title":"IfcIsolator","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcIsolator\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcJsonExporter":{"id":"Tutorials/Components/Core/IfcJsonExporter","title":"IfcJsonExporter","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcJsonExporter\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcLoader":{"id":"Tutorials/Components/Core/IfcLoader","title":"IfcLoader","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcLoader\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcPropertiesManager":{"id":"Tutorials/Components/Core/IfcPropertiesManager","title":"IfcPropertiesManager","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcPropertiesManager\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcPropertiesTiler":{"id":"Tutorials/Components/Core/IfcPropertiesTiler","title":"IfcPropertiesTiler","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcPropertiesTiler\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcRelationsIndexer":{"id":"Tutorials/Components/Core/IfcRelationsIndexer","title":"IfcRelationsIndexer","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcRelationsIndexer\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/MeasurementUtils":{"id":"Tutorials/Components/Core/MeasurementUtils","title":"MeasurementUtils","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/MeasurementUtils\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/MiniMap":{"id":"Tutorials/Components/Core/MiniMap","title":"MiniMap","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/MiniMap\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/OrthoPerspectiveCamera":{"id":"Tutorials/Components/Core/OrthoPerspectiveCamera","title":"OrthoPerspectiveCamera","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/OrthoPerspectiveCamera\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Raycasters":{"id":"Tutorials/Components/Core/Raycasters","title":"Raycasters","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Raycasters\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/ShadowedScene":{"id":"Tutorials/Components/Core/ShadowedScene","title":"ShadowedScene","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/ShadowedScene\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Viewpoints":{"id":"Tutorials/Components/Core/Viewpoints","title":"Viewpoints","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Viewpoints\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Worlds":{"id":"Tutorials/Components/Core/Worlds","title":"Worlds","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Worlds\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/AngleMeasurement":{"id":"Tutorials/Components/Front/AngleMeasurement","title":"AngleMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/AngleMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/AreaMeasurement":{"id":"Tutorials/Components/Front/AreaMeasurement","title":"AreaMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/AreaMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/Civil3DNavigator":{"id":"Tutorials/Components/Front/Civil3DNavigator","title":"Civil3DNavigator","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Civil3DNavigator\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/CivilCrossSectionNavigator":{"id":"Tutorials/Components/Front/CivilCrossSectionNavigator","title":"CivilCrossSectionNavigator","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/CivilCrossSectionNavigator\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/CivilElevationNavigator":{"id":"Tutorials/Components/Front/CivilElevationNavigator","title":"CivilElevationNavigator","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/CivilElevationNavigator\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/CivilPlanNavigator":{"id":"Tutorials/Components/Front/CivilPlanNavigator","title":"CivilPlanNavigator","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/CivilPlanNavigator\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/ClipEdges":{"id":"Tutorials/Components/Front/ClipEdges","title":"ClipEdges","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/ClipEdges\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/EdgeMeasurement":{"id":"Tutorials/Components/Front/EdgeMeasurement","title":"EdgeMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/EdgeMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/FaceMeasurement":{"id":"Tutorials/Components/Front/FaceMeasurement","title":"FaceMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/FaceMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/Highlighter":{"id":"Tutorials/Components/Front/Highlighter","title":"Highlighter","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Highlighter\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/IfcStreamer":{"id":"Tutorials/Components/Front/IfcStreamer","title":"IfcStreamer","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcStreamer\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/LengthMeasurement":{"id":"Tutorials/Components/Front/LengthMeasurement","title":"LengthMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/LengthMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/Marker":{"id":"Tutorials/Components/Front/Marker","title":"Marker","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Marker\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/Plans":{"id":"Tutorials/Components/Front/Plans","title":"Plans","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Plans\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/PostproductionRenderer":{"id":"Tutorials/Components/Front/PostproductionRenderer","title":"PostproductionRenderer","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/PostproductionRenderer\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/Sections":{"id":"Tutorials/Components/Front/Sections","title":"Sections","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Sections\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/ShadowDropper":{"id":"Tutorials/Components/Front/ShadowDropper","title":"ShadowDropper","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/ShadowDropper\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/VolumeMeasurement":{"id":"Tutorials/Components/Front/VolumeMeasurement","title":"VolumeMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/VolumeMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/index":{"id":"Tutorials/Components/index","title":"Components","description":"TOC","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Component":{"id":"Tutorials/UserInterface/Core/Component","title":"Component","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Component\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Table/DataTransform":{"id":"Tutorials/UserInterface/Core/Table/DataTransform","title":"DataTransform","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Table/DataTransform\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Table/ExportingData":{"id":"Tutorials/UserInterface/Core/Table/ExportingData","title":"ExportingData","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Table/ExportingData\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Table/LoadFunction":{"id":"Tutorials/UserInterface/Core/Table/LoadFunction","title":"LoadFunction","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Table/LoadFunction\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Table/Searching":{"id":"Tutorials/UserInterface/Core/Table/Searching","title":"Searching","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Table/Searching\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Table/Table":{"id":"Tutorials/UserInterface/Core/Table/Table","title":"Table","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Table\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/index":{"id":"Tutorials/UserInterface/index","title":"UserInterface","description":"TOC","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/ClassificationsTree":{"id":"Tutorials/UserInterface/OBC/ClassificationsTree","title":"ClassificationsTree","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/ClassificationsTree\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/ElementProperties":{"id":"Tutorials/UserInterface/OBC/ElementProperties","title":"ElementProperties","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/ElementProperties\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/EntityAttributes":{"id":"Tutorials/UserInterface/OBC/EntityAttributes","title":"EntityAttributes","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/EntityAttributes\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/ModelsList":{"id":"Tutorials/UserInterface/OBC/ModelsList","title":"ModelsList","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/ModelsList\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/RelationsTree":{"id":"Tutorials/UserInterface/OBC/RelationsTree","title":"RelationsTree","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/RelationsTree\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/TopicsUI":{"id":"Tutorials/UserInterface/OBC/TopicsUI","title":"TopicsUI","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/TopicsList\\")} >Go Full Screen","sidebar":"tutorialSidebar"}}}}')}}]); \ No newline at end of file diff --git a/build/assets/js/22dd74f7.71937219.js b/build/assets/js/22dd74f7.71937219.js new file mode 100644 index 000000000..73be89c58 --- /dev/null +++ b/build/assets/js/22dd74f7.71937219.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[1567],{5226:e=>{e.exports=JSON.parse('{"version":{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"\ud83d\udc68\ud83c\udffb\u200d\ud83d\udcbb Introduction","href":"/intro","docId":"intro","unlisted":false},{"type":"link","label":"\ud83e\udd1d Get involved","href":"/contributing","docId":"contributing","unlisted":false},{"type":"category","label":"\ud83e\udde9 Components","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"\ud83d\ude80 Getting started","href":"/components/getting-started","docId":"components/getting-started","unlisted":false},{"type":"link","label":"\ud83e\uddbe Making your own","href":"/components/creating-components","docId":"components/creating-components","unlisted":false},{"type":"link","label":"\ud83e\uddf9 Keeping them clean","href":"/components/clean-components-guide","docId":"components/clean-components-guide","unlisted":false},{"type":"link","label":"\ud83e\udded Tutorial paths","href":"/components/tutorial-paths","docId":"components/tutorial-paths","unlisted":false}]},{"type":"category","label":"\ud83d\udc69\ud83c\udffb\u200d\ud83c\udfeb Tutorials","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"Components","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"Core","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"BCFTopics","href":"/Tutorials/Components/Core/BCFTopics","docId":"Tutorials/Components/Core/BCFTopics","unlisted":false},{"type":"link","label":"BoundingBoxer","href":"/Tutorials/Components/Core/BoundingBoxer","docId":"Tutorials/Components/Core/BoundingBoxer","unlisted":false},{"type":"link","label":"Classifier","href":"/Tutorials/Components/Core/Classifier","docId":"Tutorials/Components/Core/Classifier","unlisted":false},{"type":"link","label":"Clipper","href":"/Tutorials/Components/Core/Clipper","docId":"Tutorials/Components/Core/Clipper","unlisted":false},{"type":"link","label":"Cullers","href":"/Tutorials/Components/Core/Cullers","docId":"Tutorials/Components/Core/Cullers","unlisted":false},{"type":"link","label":"Exploder","href":"/Tutorials/Components/Core/Exploder","docId":"Tutorials/Components/Core/Exploder","unlisted":false},{"type":"link","label":"FragmentsManager","href":"/Tutorials/Components/Core/FragmentsManager","docId":"Tutorials/Components/Core/FragmentsManager","unlisted":false},{"type":"link","label":"Grids","href":"/Tutorials/Components/Core/Grids","docId":"Tutorials/Components/Core/Grids","unlisted":false},{"type":"link","label":"Hider","href":"/Tutorials/Components/Core/Hider","docId":"Tutorials/Components/Core/Hider","unlisted":false},{"type":"link","label":"IfcFinder","href":"/Tutorials/Components/Core/IfcFinder","docId":"Tutorials/Components/Core/IfcFinder","unlisted":false},{"type":"link","label":"IfcGeometryTiler","href":"/Tutorials/Components/Core/IfcGeometryTiler","docId":"Tutorials/Components/Core/IfcGeometryTiler","unlisted":false},{"type":"link","label":"IfcIsolator","href":"/Tutorials/Components/Core/IfcIsolator","docId":"Tutorials/Components/Core/IfcIsolator","unlisted":false},{"type":"link","label":"IfcJsonExporter","href":"/Tutorials/Components/Core/IfcJsonExporter","docId":"Tutorials/Components/Core/IfcJsonExporter","unlisted":false},{"type":"link","label":"IfcLoader","href":"/Tutorials/Components/Core/IfcLoader","docId":"Tutorials/Components/Core/IfcLoader","unlisted":false},{"type":"link","label":"IfcPropertiesManager","href":"/Tutorials/Components/Core/IfcPropertiesManager","docId":"Tutorials/Components/Core/IfcPropertiesManager","unlisted":false},{"type":"link","label":"IfcPropertiesTiler","href":"/Tutorials/Components/Core/IfcPropertiesTiler","docId":"Tutorials/Components/Core/IfcPropertiesTiler","unlisted":false},{"type":"link","label":"IfcRelationsIndexer","href":"/Tutorials/Components/Core/IfcRelationsIndexer","docId":"Tutorials/Components/Core/IfcRelationsIndexer","unlisted":false},{"type":"link","label":"MeasurementUtils","href":"/Tutorials/Components/Core/MeasurementUtils","docId":"Tutorials/Components/Core/MeasurementUtils","unlisted":false},{"type":"link","label":"MiniMap","href":"/Tutorials/Components/Core/MiniMap","docId":"Tutorials/Components/Core/MiniMap","unlisted":false},{"type":"link","label":"OrthoPerspectiveCamera","href":"/Tutorials/Components/Core/OrthoPerspectiveCamera","docId":"Tutorials/Components/Core/OrthoPerspectiveCamera","unlisted":false},{"type":"link","label":"Raycasters","href":"/Tutorials/Components/Core/Raycasters","docId":"Tutorials/Components/Core/Raycasters","unlisted":false},{"type":"link","label":"ShadowedScene","href":"/Tutorials/Components/Core/ShadowedScene","docId":"Tutorials/Components/Core/ShadowedScene","unlisted":false},{"type":"link","label":"Viewpoints","href":"/Tutorials/Components/Core/Viewpoints","docId":"Tutorials/Components/Core/Viewpoints","unlisted":false},{"type":"link","label":"Worlds","href":"/Tutorials/Components/Core/Worlds","docId":"Tutorials/Components/Core/Worlds","unlisted":false}]},{"type":"category","label":"Front","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AngleMeasurement","href":"/Tutorials/Components/Front/AngleMeasurement","docId":"Tutorials/Components/Front/AngleMeasurement","unlisted":false},{"type":"link","label":"AreaMeasurement","href":"/Tutorials/Components/Front/AreaMeasurement","docId":"Tutorials/Components/Front/AreaMeasurement","unlisted":false},{"type":"link","label":"Civil3DNavigator","href":"/Tutorials/Components/Front/Civil3DNavigator","docId":"Tutorials/Components/Front/Civil3DNavigator","unlisted":false},{"type":"link","label":"CivilCrossSectionNavigator","href":"/Tutorials/Components/Front/CivilCrossSectionNavigator","docId":"Tutorials/Components/Front/CivilCrossSectionNavigator","unlisted":false},{"type":"link","label":"CivilElevationNavigator","href":"/Tutorials/Components/Front/CivilElevationNavigator","docId":"Tutorials/Components/Front/CivilElevationNavigator","unlisted":false},{"type":"link","label":"CivilPlanNavigator","href":"/Tutorials/Components/Front/CivilPlanNavigator","docId":"Tutorials/Components/Front/CivilPlanNavigator","unlisted":false},{"type":"link","label":"ClipEdges","href":"/Tutorials/Components/Front/ClipEdges","docId":"Tutorials/Components/Front/ClipEdges","unlisted":false},{"type":"link","label":"EdgeMeasurement","href":"/Tutorials/Components/Front/EdgeMeasurement","docId":"Tutorials/Components/Front/EdgeMeasurement","unlisted":false},{"type":"link","label":"FaceMeasurement","href":"/Tutorials/Components/Front/FaceMeasurement","docId":"Tutorials/Components/Front/FaceMeasurement","unlisted":false},{"type":"link","label":"Highlighter","href":"/Tutorials/Components/Front/Highlighter","docId":"Tutorials/Components/Front/Highlighter","unlisted":false},{"type":"link","label":"IfcStreamer","href":"/Tutorials/Components/Front/IfcStreamer","docId":"Tutorials/Components/Front/IfcStreamer","unlisted":false},{"type":"link","label":"LengthMeasurement","href":"/Tutorials/Components/Front/LengthMeasurement","docId":"Tutorials/Components/Front/LengthMeasurement","unlisted":false},{"type":"link","label":"Marker","href":"/Tutorials/Components/Front/Marker","docId":"Tutorials/Components/Front/Marker","unlisted":false},{"type":"link","label":"Plans","href":"/Tutorials/Components/Front/Plans","docId":"Tutorials/Components/Front/Plans","unlisted":false},{"type":"link","label":"PostproductionRenderer","href":"/Tutorials/Components/Front/PostproductionRenderer","docId":"Tutorials/Components/Front/PostproductionRenderer","unlisted":false},{"type":"link","label":"Sections","href":"/Tutorials/Components/Front/Sections","docId":"Tutorials/Components/Front/Sections","unlisted":false},{"type":"link","label":"ShadowDropper","href":"/Tutorials/Components/Front/ShadowDropper","docId":"Tutorials/Components/Front/ShadowDropper","unlisted":false},{"type":"link","label":"VolumeMeasurement","href":"/Tutorials/Components/Front/VolumeMeasurement","docId":"Tutorials/Components/Front/VolumeMeasurement","unlisted":false}]}],"href":"/Tutorials/Components/"},{"type":"category","label":"UserInterface","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"Core","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Component","href":"/Tutorials/UserInterface/Core/Component","docId":"Tutorials/UserInterface/Core/Component","unlisted":false},{"type":"category","label":"Table","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"DataTransform","href":"/Tutorials/UserInterface/Core/Table/DataTransform","docId":"Tutorials/UserInterface/Core/Table/DataTransform","unlisted":false},{"type":"link","label":"ExportingData","href":"/Tutorials/UserInterface/Core/Table/ExportingData","docId":"Tutorials/UserInterface/Core/Table/ExportingData","unlisted":false},{"type":"link","label":"LoadFunction","href":"/Tutorials/UserInterface/Core/Table/LoadFunction","docId":"Tutorials/UserInterface/Core/Table/LoadFunction","unlisted":false},{"type":"link","label":"Searching","href":"/Tutorials/UserInterface/Core/Table/Searching","docId":"Tutorials/UserInterface/Core/Table/Searching","unlisted":false}],"href":"/Tutorials/UserInterface/Core/Table/"}]},{"type":"category","label":"OBC","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ClassificationsTree","href":"/Tutorials/UserInterface/OBC/ClassificationsTree","docId":"Tutorials/UserInterface/OBC/ClassificationsTree","unlisted":false},{"type":"link","label":"ElementProperties","href":"/Tutorials/UserInterface/OBC/ElementProperties","docId":"Tutorials/UserInterface/OBC/ElementProperties","unlisted":false},{"type":"link","label":"EntityAttributes","href":"/Tutorials/UserInterface/OBC/EntityAttributes","docId":"Tutorials/UserInterface/OBC/EntityAttributes","unlisted":false},{"type":"link","label":"ModelsList","href":"/Tutorials/UserInterface/OBC/ModelsList","docId":"Tutorials/UserInterface/OBC/ModelsList","unlisted":false},{"type":"link","label":"RelationsTree","href":"/Tutorials/UserInterface/OBC/RelationsTree","docId":"Tutorials/UserInterface/OBC/RelationsTree","unlisted":false},{"type":"link","label":"TopicsUI","href":"/Tutorials/UserInterface/OBC/TopicsUI","docId":"Tutorials/UserInterface/OBC/TopicsUI","unlisted":false}]}],"href":"/Tutorials/UserInterface/"}]},{"type":"category","label":"\ud83d\udccb API","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"@thatopen","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"@thatopen/components","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"classes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AsyncEvent\\\\","href":"/api/@thatopen/components/classes/AsyncEvent","docId":"api/@thatopen/components/classes/AsyncEvent","unlisted":false},{"type":"link","label":"BCFTopics","href":"/api/@thatopen/components/classes/BCFTopics","docId":"api/@thatopen/components/classes/BCFTopics","unlisted":false},{"type":"link","label":"abstract Base","href":"/api/@thatopen/components/classes/Base","docId":"api/@thatopen/components/classes/Base","unlisted":false},{"type":"link","label":"abstract BaseCamera","href":"/api/@thatopen/components/classes/BaseCamera","docId":"api/@thatopen/components/classes/BaseCamera","unlisted":false},{"type":"link","label":"abstract BaseRenderer","href":"/api/@thatopen/components/classes/BaseRenderer","docId":"api/@thatopen/components/classes/BaseRenderer","unlisted":false},{"type":"link","label":"abstract BaseScene","href":"/api/@thatopen/components/classes/BaseScene","docId":"api/@thatopen/components/classes/BaseScene","unlisted":false},{"type":"link","label":"abstract BaseWorldItem","href":"/api/@thatopen/components/classes/BaseWorldItem","docId":"api/@thatopen/components/classes/BaseWorldItem","unlisted":false},{"type":"link","label":"BoundingBoxer","href":"/api/@thatopen/components/classes/BoundingBoxer","docId":"api/@thatopen/components/classes/BoundingBoxer","unlisted":false},{"type":"link","label":"Classifier","href":"/api/@thatopen/components/classes/Classifier","docId":"api/@thatopen/components/classes/Classifier","unlisted":false},{"type":"link","label":"Clipper","href":"/api/@thatopen/components/classes/Clipper","docId":"api/@thatopen/components/classes/Clipper","unlisted":false},{"type":"link","label":"Comment","href":"/api/@thatopen/components/classes/Comment","docId":"api/@thatopen/components/classes/Comment","unlisted":false},{"type":"link","label":"abstract Component","href":"/api/@thatopen/components/classes/Component","docId":"api/@thatopen/components/classes/Component","unlisted":false},{"type":"link","label":"Components","href":"/api/@thatopen/components/classes/Components","docId":"api/@thatopen/components/classes/Components","unlisted":false},{"type":"link","label":"ConfigManager","href":"/api/@thatopen/components/classes/ConfigManager","docId":"api/@thatopen/components/classes/ConfigManager","unlisted":false},{"type":"link","label":"CullerRenderer","href":"/api/@thatopen/components/classes/CullerRenderer","docId":"api/@thatopen/components/classes/CullerRenderer","unlisted":false},{"type":"link","label":"Cullers","href":"/api/@thatopen/components/classes/Cullers","docId":"api/@thatopen/components/classes/Cullers","unlisted":false},{"type":"link","label":"DataMap\\\\","href":"/api/@thatopen/components/classes/DataMap","docId":"api/@thatopen/components/classes/DataMap","unlisted":false},{"type":"link","label":"DataSet\\\\","href":"/api/@thatopen/components/classes/DataSet","docId":"api/@thatopen/components/classes/DataSet","unlisted":false},{"type":"link","label":"Disposer","href":"/api/@thatopen/components/classes/Disposer","docId":"api/@thatopen/components/classes/Disposer","unlisted":false},{"type":"link","label":"Event\\\\","href":"/api/@thatopen/components/classes/Event","docId":"api/@thatopen/components/classes/Event","unlisted":false},{"type":"link","label":"EventManager","href":"/api/@thatopen/components/classes/EventManager","docId":"api/@thatopen/components/classes/EventManager","unlisted":false},{"type":"link","label":"Exploder","href":"/api/@thatopen/components/classes/Exploder","docId":"api/@thatopen/components/classes/Exploder","unlisted":false},{"type":"link","label":"FirstPersonMode","href":"/api/@thatopen/components/classes/FirstPersonMode","docId":"api/@thatopen/components/classes/FirstPersonMode","unlisted":false},{"type":"link","label":"FragmentsManager","href":"/api/@thatopen/components/classes/FragmentsManager","docId":"api/@thatopen/components/classes/FragmentsManager","unlisted":false},{"type":"link","label":"Grids","href":"/api/@thatopen/components/classes/Grids","docId":"api/@thatopen/components/classes/Grids","unlisted":false},{"type":"link","label":"Hider","href":"/api/@thatopen/components/classes/Hider","docId":"api/@thatopen/components/classes/Hider","unlisted":false},{"type":"link","label":"IDSSpecification","href":"/api/@thatopen/components/classes/IDSSpecification","docId":"api/@thatopen/components/classes/IDSSpecification","unlisted":false},{"type":"link","label":"IDSSpecifications","href":"/api/@thatopen/components/classes/IDSSpecifications","docId":"api/@thatopen/components/classes/IDSSpecifications","unlisted":false},{"type":"link","label":"IfcBasicQuery","href":"/api/@thatopen/components/classes/IfcBasicQuery","docId":"api/@thatopen/components/classes/IfcBasicQuery","unlisted":false},{"type":"link","label":"IfcFinder","href":"/api/@thatopen/components/classes/IfcFinder","docId":"api/@thatopen/components/classes/IfcFinder","unlisted":false},{"type":"link","label":"abstract IfcFinderQuery","href":"/api/@thatopen/components/classes/IfcFinderQuery","docId":"api/@thatopen/components/classes/IfcFinderQuery","unlisted":false},{"type":"link","label":"IfcFragmentSettings","href":"/api/@thatopen/components/classes/IfcFragmentSettings","docId":"api/@thatopen/components/classes/IfcFragmentSettings","unlisted":false},{"type":"link","label":"IfcGeometryTiler","href":"/api/@thatopen/components/classes/IfcGeometryTiler","docId":"api/@thatopen/components/classes/IfcGeometryTiler","unlisted":false},{"type":"link","label":"IfcIsolator","href":"/api/@thatopen/components/classes/IfcIsolator","docId":"api/@thatopen/components/classes/IfcIsolator","unlisted":false},{"type":"link","label":"IfcJsonExporter","href":"/api/@thatopen/components/classes/IfcJsonExporter","docId":"api/@thatopen/components/classes/IfcJsonExporter","unlisted":false},{"type":"link","label":"IfcLoader","href":"/api/@thatopen/components/classes/IfcLoader","docId":"api/@thatopen/components/classes/IfcLoader","unlisted":false},{"type":"link","label":"IfcPropertiesManager","href":"/api/@thatopen/components/classes/IfcPropertiesManager","docId":"api/@thatopen/components/classes/IfcPropertiesManager","unlisted":false},{"type":"link","label":"IfcPropertiesTiler","href":"/api/@thatopen/components/classes/IfcPropertiesTiler","docId":"api/@thatopen/components/classes/IfcPropertiesTiler","unlisted":false},{"type":"link","label":"IfcPropertyQuery","href":"/api/@thatopen/components/classes/IfcPropertyQuery","docId":"api/@thatopen/components/classes/IfcPropertyQuery","unlisted":false},{"type":"link","label":"IfcRelationsIndexer","href":"/api/@thatopen/components/classes/IfcRelationsIndexer","docId":"api/@thatopen/components/classes/IfcRelationsIndexer","unlisted":false},{"type":"link","label":"IfcStreamingSettings","href":"/api/@thatopen/components/classes/IfcStreamingSettings","docId":"api/@thatopen/components/classes/IfcStreamingSettings","unlisted":false},{"type":"link","label":"MeasurementUtils","href":"/api/@thatopen/components/classes/MeasurementUtils","docId":"api/@thatopen/components/classes/MeasurementUtils","unlisted":false},{"type":"link","label":"MeshCullerRenderer","href":"/api/@thatopen/components/classes/MeshCullerRenderer","docId":"api/@thatopen/components/classes/MeshCullerRenderer","unlisted":false},{"type":"link","label":"MiniMap","href":"/api/@thatopen/components/classes/MiniMap","docId":"api/@thatopen/components/classes/MiniMap","unlisted":false},{"type":"link","label":"MiniMaps","href":"/api/@thatopen/components/classes/MiniMaps","docId":"api/@thatopen/components/classes/MiniMaps","unlisted":false},{"type":"link","label":"Mouse","href":"/api/@thatopen/components/classes/Mouse","docId":"api/@thatopen/components/classes/Mouse","unlisted":false},{"type":"link","label":"OrbitMode","href":"/api/@thatopen/components/classes/OrbitMode","docId":"api/@thatopen/components/classes/OrbitMode","unlisted":false},{"type":"link","label":"OrthoPerspectiveCamera","href":"/api/@thatopen/components/classes/OrthoPerspectiveCamera","docId":"api/@thatopen/components/classes/OrthoPerspectiveCamera","unlisted":false},{"type":"link","label":"PlanMode","href":"/api/@thatopen/components/classes/PlanMode","docId":"api/@thatopen/components/classes/PlanMode","unlisted":false},{"type":"link","label":"ProjectionManager","href":"/api/@thatopen/components/classes/ProjectionManager","docId":"api/@thatopen/components/classes/ProjectionManager","unlisted":false},{"type":"link","label":"PropertiesStreamingSettings","href":"/api/@thatopen/components/classes/PropertiesStreamingSettings","docId":"api/@thatopen/components/classes/PropertiesStreamingSettings","unlisted":false},{"type":"link","label":"Raycasters","href":"/api/@thatopen/components/classes/Raycasters","docId":"api/@thatopen/components/classes/Raycasters","unlisted":false},{"type":"link","label":"ShadowedScene","href":"/api/@thatopen/components/classes/ShadowedScene","docId":"api/@thatopen/components/classes/ShadowedScene","unlisted":false},{"type":"link","label":"SimpleCamera","href":"/api/@thatopen/components/classes/SimpleCamera","docId":"api/@thatopen/components/classes/SimpleCamera","unlisted":false},{"type":"link","label":"SimpleGrid","href":"/api/@thatopen/components/classes/SimpleGrid","docId":"api/@thatopen/components/classes/SimpleGrid","unlisted":false},{"type":"link","label":"SimplePlane","href":"/api/@thatopen/components/classes/SimplePlane","docId":"api/@thatopen/components/classes/SimplePlane","unlisted":false},{"type":"link","label":"SimpleRaycaster","href":"/api/@thatopen/components/classes/SimpleRaycaster","docId":"api/@thatopen/components/classes/SimpleRaycaster","unlisted":false},{"type":"link","label":"SimpleRenderer","href":"/api/@thatopen/components/classes/SimpleRenderer","docId":"api/@thatopen/components/classes/SimpleRenderer","unlisted":false},{"type":"link","label":"SimpleScene","href":"/api/@thatopen/components/classes/SimpleScene","docId":"api/@thatopen/components/classes/SimpleScene","unlisted":false},{"type":"link","label":"SimpleWorld\\\\","href":"/api/@thatopen/components/classes/SimpleWorld","docId":"api/@thatopen/components/classes/SimpleWorld","unlisted":false},{"type":"link","label":"VertexPicker","href":"/api/@thatopen/components/classes/VertexPicker","docId":"api/@thatopen/components/classes/VertexPicker","unlisted":false},{"type":"link","label":"Viewpoint","href":"/api/@thatopen/components/classes/Viewpoint","docId":"api/@thatopen/components/classes/Viewpoint","unlisted":false},{"type":"link","label":"Worlds","href":"/api/@thatopen/components/classes/Worlds","docId":"api/@thatopen/components/classes/Worlds","unlisted":false}]},{"type":"category","label":"interfaces","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AttributeListener","href":"/api/@thatopen/components/interfaces/AttributeListener","docId":"api/@thatopen/components/interfaces/AttributeListener","unlisted":false},{"type":"link","label":"BCFTopicsConfig","href":"/api/@thatopen/components/interfaces/BCFTopicsConfig","docId":"api/@thatopen/components/interfaces/BCFTopicsConfig","unlisted":false},{"type":"link","label":"BCFViewpoint","href":"/api/@thatopen/components/interfaces/BCFViewpoint","docId":"api/@thatopen/components/interfaces/BCFViewpoint","unlisted":false},{"type":"link","label":"CameraControllable","href":"/api/@thatopen/components/interfaces/CameraControllable","docId":"api/@thatopen/components/interfaces/CameraControllable","unlisted":false},{"type":"link","label":"ChangeMap","href":"/api/@thatopen/components/interfaces/ChangeMap","docId":"api/@thatopen/components/interfaces/ChangeMap","unlisted":false},{"type":"link","label":"Classification","href":"/api/@thatopen/components/interfaces/Classification","docId":"api/@thatopen/components/interfaces/Classification","unlisted":false},{"type":"link","label":"Configurable\\\\","href":"/api/@thatopen/components/interfaces/Configurable","docId":"api/@thatopen/components/interfaces/Configurable","unlisted":false},{"type":"link","label":"Createable","href":"/api/@thatopen/components/interfaces/Createable","docId":"api/@thatopen/components/interfaces/Createable","unlisted":false},{"type":"link","label":"Disposable","href":"/api/@thatopen/components/interfaces/Disposable","docId":"api/@thatopen/components/interfaces/Disposable","unlisted":false},{"type":"link","label":"EntitiesRelatedEvent","href":"/api/@thatopen/components/interfaces/EntitiesRelatedEvent","docId":"api/@thatopen/components/interfaces/EntitiesRelatedEvent","unlisted":false},{"type":"link","label":"Eventable","href":"/api/@thatopen/components/interfaces/Eventable","docId":"api/@thatopen/components/interfaces/Eventable","unlisted":false},{"type":"link","label":"Hideable","href":"/api/@thatopen/components/interfaces/Hideable","docId":"api/@thatopen/components/interfaces/Hideable","unlisted":false},{"type":"link","label":"IDSCheckResult","href":"/api/@thatopen/components/interfaces/IDSCheckResult","docId":"api/@thatopen/components/interfaces/IDSCheckResult","unlisted":false},{"type":"link","label":"IfcCategoryRule","href":"/api/@thatopen/components/interfaces/IfcCategoryRule","docId":"api/@thatopen/components/interfaces/IfcCategoryRule","unlisted":false},{"type":"link","label":"IfcOperatorRule","href":"/api/@thatopen/components/interfaces/IfcOperatorRule","docId":"api/@thatopen/components/interfaces/IfcOperatorRule","unlisted":false},{"type":"link","label":"IfcPropertyRule","href":"/api/@thatopen/components/interfaces/IfcPropertyRule","docId":"api/@thatopen/components/interfaces/IfcPropertyRule","unlisted":false},{"type":"link","label":"MeasureEdge","href":"/api/@thatopen/components/interfaces/MeasureEdge","docId":"api/@thatopen/components/interfaces/MeasureEdge","unlisted":false},{"type":"link","label":"MiniMapConfig","href":"/api/@thatopen/components/interfaces/MiniMapConfig","docId":"api/@thatopen/components/interfaces/MiniMapConfig","unlisted":false},{"type":"link","label":"NavigationMode","href":"/api/@thatopen/components/interfaces/NavigationMode","docId":"api/@thatopen/components/interfaces/NavigationMode","unlisted":false},{"type":"link","label":"Progress","href":"/api/@thatopen/components/interfaces/Progress","docId":"api/@thatopen/components/interfaces/Progress","unlisted":false},{"type":"link","label":"Resizeable","href":"/api/@thatopen/components/interfaces/Resizeable","docId":"api/@thatopen/components/interfaces/Resizeable","unlisted":false},{"type":"link","label":"ShadowedSceneConfig","href":"/api/@thatopen/components/interfaces/ShadowedSceneConfig","docId":"api/@thatopen/components/interfaces/ShadowedSceneConfig","unlisted":false},{"type":"link","label":"SimpleGridConfig","href":"/api/@thatopen/components/interfaces/SimpleGridConfig","docId":"api/@thatopen/components/interfaces/SimpleGridConfig","unlisted":false},{"type":"link","label":"SimpleSceneConfig","href":"/api/@thatopen/components/interfaces/SimpleSceneConfig","docId":"api/@thatopen/components/interfaces/SimpleSceneConfig","unlisted":false},{"type":"link","label":"StreamedAsset","href":"/api/@thatopen/components/interfaces/StreamedAsset","docId":"api/@thatopen/components/interfaces/StreamedAsset","unlisted":false},{"type":"link","label":"StreamedGeometries","href":"/api/@thatopen/components/interfaces/StreamedGeometries","docId":"api/@thatopen/components/interfaces/StreamedGeometries","unlisted":false},{"type":"link","label":"Updateable","href":"/api/@thatopen/components/interfaces/Updateable","docId":"api/@thatopen/components/interfaces/Updateable","unlisted":false},{"type":"link","label":"VertexPickerConfig","href":"/api/@thatopen/components/interfaces/VertexPickerConfig","docId":"api/@thatopen/components/interfaces/VertexPickerConfig","unlisted":false},{"type":"link","label":"World","href":"/api/@thatopen/components/interfaces/World","docId":"api/@thatopen/components/interfaces/World","unlisted":false}]},{"type":"category","label":"type-aliases","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"BooleanPropTypes","href":"/api/@thatopen/components/type-aliases/BooleanPropTypes","docId":"api/@thatopen/components/type-aliases/BooleanPropTypes","unlisted":false},{"type":"link","label":"CameraProjection","href":"/api/@thatopen/components/type-aliases/CameraProjection","docId":"api/@thatopen/components/type-aliases/CameraProjection","unlisted":false},{"type":"link","label":"IfcFinderRule","href":"/api/@thatopen/components/type-aliases/IfcFinderRule","docId":"api/@thatopen/components/type-aliases/IfcFinderRule","unlisted":false},{"type":"link","label":"IfcRelations","href":"/api/@thatopen/components/type-aliases/IfcRelations","docId":"api/@thatopen/components/type-aliases/IfcRelations","unlisted":false},{"type":"link","label":"InverseAttributes","href":"/api/@thatopen/components/type-aliases/InverseAttributes","docId":"api/@thatopen/components/type-aliases/InverseAttributes","unlisted":false},{"type":"link","label":"NavModeID","href":"/api/@thatopen/components/type-aliases/NavModeID","docId":"api/@thatopen/components/type-aliases/NavModeID","unlisted":false},{"type":"link","label":"NumericPropTypes","href":"/api/@thatopen/components/type-aliases/NumericPropTypes","docId":"api/@thatopen/components/type-aliases/NumericPropTypes","unlisted":false},{"type":"link","label":"SerializedQuery","href":"/api/@thatopen/components/type-aliases/SerializedQuery","docId":"api/@thatopen/components/type-aliases/SerializedQuery","unlisted":false},{"type":"link","label":"StringPropTypes","href":"/api/@thatopen/components/type-aliases/StringPropTypes","docId":"api/@thatopen/components/type-aliases/StringPropTypes","unlisted":false}]},{"type":"category","label":"variables","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"GeometryTypes","href":"/api/@thatopen/components/variables/GeometryTypes","docId":"api/@thatopen/components/variables/GeometryTypes","unlisted":false},{"type":"link","label":"IfcCategoryMap","href":"/api/@thatopen/components/variables/IfcCategoryMap","docId":"api/@thatopen/components/variables/IfcCategoryMap","unlisted":false},{"type":"link","label":"IfcElements","href":"/api/@thatopen/components/variables/IfcElements","docId":"api/@thatopen/components/variables/IfcElements","unlisted":false}]}],"href":"/api/@thatopen/components/"},{"type":"category","label":"@thatopen/components-front","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"classes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AngleMeasurement","href":"/api/@thatopen/components-front/classes/AngleMeasurement","docId":"api/@thatopen/components-front/classes/AngleMeasurement","unlisted":false},{"type":"link","label":"AreaMeasurement","href":"/api/@thatopen/components-front/classes/AreaMeasurement","docId":"api/@thatopen/components-front/classes/AreaMeasurement","unlisted":false},{"type":"link","label":"Civil3DNavigator","href":"/api/@thatopen/components-front/classes/Civil3DNavigator","docId":"api/@thatopen/components-front/classes/Civil3DNavigator","unlisted":false},{"type":"link","label":"CivilCrossSectionNavigator","href":"/api/@thatopen/components-front/classes/CivilCrossSectionNavigator","docId":"api/@thatopen/components-front/classes/CivilCrossSectionNavigator","unlisted":false},{"type":"link","label":"CivilElevationNavigator","href":"/api/@thatopen/components-front/classes/CivilElevationNavigator","docId":"api/@thatopen/components-front/classes/CivilElevationNavigator","unlisted":false},{"type":"link","label":"abstract CivilNavigator","href":"/api/@thatopen/components-front/classes/CivilNavigator","docId":"api/@thatopen/components-front/classes/CivilNavigator","unlisted":false},{"type":"link","label":"CivilPlanNavigator","href":"/api/@thatopen/components-front/classes/CivilPlanNavigator","docId":"api/@thatopen/components-front/classes/CivilPlanNavigator","unlisted":false},{"type":"link","label":"ClipEdges","href":"/api/@thatopen/components-front/classes/ClipEdges","docId":"api/@thatopen/components-front/classes/ClipEdges","unlisted":false},{"type":"link","label":"ClippingEdges","href":"/api/@thatopen/components-front/classes/ClippingEdges","docId":"api/@thatopen/components-front/classes/ClippingEdges","unlisted":false},{"type":"link","label":"ClippingFills","href":"/api/@thatopen/components-front/classes/ClippingFills","docId":"api/@thatopen/components-front/classes/ClippingFills","unlisted":false},{"type":"link","label":"EdgeMeasurement","href":"/api/@thatopen/components-front/classes/EdgeMeasurement","docId":"api/@thatopen/components-front/classes/EdgeMeasurement","unlisted":false},{"type":"link","label":"EdgesPlane","href":"/api/@thatopen/components-front/classes/EdgesPlane","docId":"api/@thatopen/components-front/classes/EdgesPlane","unlisted":false},{"type":"link","label":"EdgesStyles","href":"/api/@thatopen/components-front/classes/EdgesStyles","docId":"api/@thatopen/components-front/classes/EdgesStyles","unlisted":false},{"type":"link","label":"FaceMeasurement","href":"/api/@thatopen/components-front/classes/FaceMeasurement","docId":"api/@thatopen/components-front/classes/FaceMeasurement","unlisted":false},{"type":"link","label":"GeometryCullerRenderer","href":"/api/@thatopen/components-front/classes/GeometryCullerRenderer","docId":"api/@thatopen/components-front/classes/GeometryCullerRenderer","unlisted":false},{"type":"link","label":"GraphicVertexPicker","href":"/api/@thatopen/components-front/classes/GraphicVertexPicker","docId":"api/@thatopen/components-front/classes/GraphicVertexPicker","unlisted":false},{"type":"link","label":"Highlighter","href":"/api/@thatopen/components-front/classes/Highlighter","docId":"api/@thatopen/components-front/classes/Highlighter","unlisted":false},{"type":"link","label":"IfcStreamer","href":"/api/@thatopen/components-front/classes/IfcStreamer","docId":"api/@thatopen/components-front/classes/IfcStreamer","unlisted":false},{"type":"link","label":"LengthMeasurement","href":"/api/@thatopen/components-front/classes/LengthMeasurement","docId":"api/@thatopen/components-front/classes/LengthMeasurement","unlisted":false},{"type":"link","label":"Mark","href":"/api/@thatopen/components-front/classes/Mark","docId":"api/@thatopen/components-front/classes/Mark","unlisted":false},{"type":"link","label":"Marker","href":"/api/@thatopen/components-front/classes/Marker","docId":"api/@thatopen/components-front/classes/Marker","unlisted":false},{"type":"link","label":"Outliner","href":"/api/@thatopen/components-front/classes/Outliner","docId":"api/@thatopen/components-front/classes/Outliner","unlisted":false},{"type":"link","label":"Plans","href":"/api/@thatopen/components-front/classes/Plans","docId":"api/@thatopen/components-front/classes/Plans","unlisted":false},{"type":"link","label":"Postproduction","href":"/api/@thatopen/components-front/classes/Postproduction","docId":"api/@thatopen/components-front/classes/Postproduction","unlisted":false},{"type":"link","label":"PostproductionRenderer","href":"/api/@thatopen/components-front/classes/PostproductionRenderer","docId":"api/@thatopen/components-front/classes/PostproductionRenderer","unlisted":false},{"type":"link","label":"RendererWith2D","href":"/api/@thatopen/components-front/classes/RendererWith2D","docId":"api/@thatopen/components-front/classes/RendererWith2D","unlisted":false},{"type":"link","label":"Sections","href":"/api/@thatopen/components-front/classes/Sections","docId":"api/@thatopen/components-front/classes/Sections","unlisted":false},{"type":"link","label":"ShadowDropper","href":"/api/@thatopen/components-front/classes/ShadowDropper","docId":"api/@thatopen/components-front/classes/ShadowDropper","unlisted":false},{"type":"link","label":"SimpleDimensionLine","href":"/api/@thatopen/components-front/classes/SimpleDimensionLine","docId":"api/@thatopen/components-front/classes/SimpleDimensionLine","unlisted":false},{"type":"link","label":"VolumeMeasurement","href":"/api/@thatopen/components-front/classes/VolumeMeasurement","docId":"api/@thatopen/components-front/classes/VolumeMeasurement","unlisted":false}]},{"type":"category","label":"interfaces","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AreaSelection","href":"/api/@thatopen/components-front/interfaces/AreaSelection","docId":"api/@thatopen/components-front/interfaces/AreaSelection","unlisted":false},{"type":"link","label":"BvhLineSegmentsGeometry","href":"/api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry","docId":"api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry","unlisted":false},{"type":"link","label":"ClipStyle","href":"/api/@thatopen/components-front/interfaces/ClipStyle","docId":"api/@thatopen/components-front/interfaces/ClipStyle","unlisted":false},{"type":"link","label":"DimensionData","href":"/api/@thatopen/components-front/interfaces/DimensionData","docId":"api/@thatopen/components-front/interfaces/DimensionData","unlisted":false},{"type":"link","label":"Edge","href":"/api/@thatopen/components-front/interfaces/Edge","docId":"api/@thatopen/components-front/interfaces/Edge","unlisted":false},{"type":"link","label":"HighlightEvents","href":"/api/@thatopen/components-front/interfaces/HighlightEvents","docId":"api/@thatopen/components-front/interfaces/HighlightEvents","unlisted":false},{"type":"link","label":"HighlighterConfig","href":"/api/@thatopen/components-front/interfaces/HighlighterConfig","docId":"api/@thatopen/components-front/interfaces/HighlighterConfig","unlisted":false},{"type":"link","label":"IGroupedMarkers","href":"/api/@thatopen/components-front/interfaces/IGroupedMarkers","docId":"api/@thatopen/components-front/interfaces/IGroupedMarkers","unlisted":false},{"type":"link","label":"IMarker","href":"/api/@thatopen/components-front/interfaces/IMarker","docId":"api/@thatopen/components-front/interfaces/IMarker","unlisted":false},{"type":"link","label":"PlanView","href":"/api/@thatopen/components-front/interfaces/PlanView","docId":"api/@thatopen/components-front/interfaces/PlanView","unlisted":false},{"type":"link","label":"PostproductionSettings","href":"/api/@thatopen/components-front/interfaces/PostproductionSettings","docId":"api/@thatopen/components-front/interfaces/PostproductionSettings","unlisted":false},{"type":"link","label":"Section","href":"/api/@thatopen/components-front/interfaces/Section","docId":"api/@thatopen/components-front/interfaces/Section","unlisted":false},{"type":"link","label":"SerializedAreaMeasure","href":"/api/@thatopen/components-front/interfaces/SerializedAreaMeasure","docId":"api/@thatopen/components-front/interfaces/SerializedAreaMeasure","unlisted":false},{"type":"link","label":"Shadow","href":"/api/@thatopen/components-front/interfaces/Shadow","docId":"api/@thatopen/components-front/interfaces/Shadow","unlisted":false},{"type":"link","label":"Shadows","href":"/api/@thatopen/components-front/interfaces/Shadows","docId":"api/@thatopen/components-front/interfaces/Shadows","unlisted":false},{"type":"link","label":"StreamLoaderSettings","href":"/api/@thatopen/components-front/interfaces/StreamLoaderSettings","docId":"api/@thatopen/components-front/interfaces/StreamLoaderSettings","unlisted":false},{"type":"link","label":"StreamPropertiesSettings","href":"/api/@thatopen/components-front/interfaces/StreamPropertiesSettings","docId":"api/@thatopen/components-front/interfaces/StreamPropertiesSettings","unlisted":false},{"type":"link","label":"StreamedInstance","href":"/api/@thatopen/components-front/interfaces/StreamedInstance","docId":"api/@thatopen/components-front/interfaces/StreamedInstance","unlisted":false}]},{"type":"category","label":"type-aliases","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"CivilMarkerType","href":"/api/@thatopen/components-front/type-aliases/CivilMarkerType","docId":"api/@thatopen/components-front/type-aliases/CivilMarkerType","unlisted":false},{"type":"link","label":"Edges","href":"/api/@thatopen/components-front/type-aliases/Edges","docId":"api/@thatopen/components-front/type-aliases/Edges","unlisted":false},{"type":"link","label":"IndexFragmentMap","href":"/api/@thatopen/components-front/type-aliases/IndexFragmentMap","docId":"api/@thatopen/components-front/type-aliases/IndexFragmentMap","unlisted":false},{"type":"link","label":"LineStyles","href":"/api/@thatopen/components-front/type-aliases/LineStyles","docId":"api/@thatopen/components-front/type-aliases/LineStyles","unlisted":false},{"type":"link","label":"StreamedInstances","href":"/api/@thatopen/components-front/type-aliases/StreamedInstances","docId":"api/@thatopen/components-front/type-aliases/StreamedInstances","unlisted":false}]}],"href":"/api/@thatopen/components-front/"},{"type":"category","label":"@thatopen/ui","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"classes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Button","href":"/api/@thatopen/ui/classes/Button","docId":"api/@thatopen/ui/classes/Button","unlisted":false},{"type":"link","label":"Checkbox","href":"/api/@thatopen/ui/classes/Checkbox","docId":"api/@thatopen/ui/classes/Checkbox","unlisted":false},{"type":"link","label":"ColorInput","href":"/api/@thatopen/ui/classes/ColorInput","docId":"api/@thatopen/ui/classes/ColorInput","unlisted":false},{"type":"link","label":"Component","href":"/api/@thatopen/ui/classes/Component","docId":"api/@thatopen/ui/classes/Component","unlisted":false},{"type":"link","label":"Dropdown","href":"/api/@thatopen/ui/classes/Dropdown","docId":"api/@thatopen/ui/classes/Dropdown","unlisted":false},{"type":"link","label":"Grid\\\\","href":"/api/@thatopen/ui/classes/Grid","docId":"api/@thatopen/ui/classes/Grid","unlisted":false},{"type":"link","label":"Icon","href":"/api/@thatopen/ui/classes/Icon","docId":"api/@thatopen/ui/classes/Icon","unlisted":false},{"type":"link","label":"Input","href":"/api/@thatopen/ui/classes/Input","docId":"api/@thatopen/ui/classes/Input","unlisted":false},{"type":"link","label":"Label","href":"/api/@thatopen/ui/classes/Label","docId":"api/@thatopen/ui/classes/Label","unlisted":false},{"type":"link","label":"Manager","href":"/api/@thatopen/ui/classes/Manager","docId":"api/@thatopen/ui/classes/Manager","unlisted":false},{"type":"link","label":"NumberInput","href":"/api/@thatopen/ui/classes/NumberInput","docId":"api/@thatopen/ui/classes/NumberInput","unlisted":false},{"type":"link","label":"Option","href":"/api/@thatopen/ui/classes/Option","docId":"api/@thatopen/ui/classes/Option","unlisted":false},{"type":"link","label":"Panel","href":"/api/@thatopen/ui/classes/Panel","docId":"api/@thatopen/ui/classes/Panel","unlisted":false},{"type":"link","label":"PanelSection","href":"/api/@thatopen/ui/classes/PanelSection","docId":"api/@thatopen/ui/classes/PanelSection","unlisted":false},{"type":"link","label":"Selector","href":"/api/@thatopen/ui/classes/Selector","docId":"api/@thatopen/ui/classes/Selector","unlisted":false},{"type":"link","label":"Tab","href":"/api/@thatopen/ui/classes/Tab","docId":"api/@thatopen/ui/classes/Tab","unlisted":false},{"type":"link","label":"Table\\\\","href":"/api/@thatopen/ui/classes/Table","docId":"api/@thatopen/ui/classes/Table","unlisted":false},{"type":"link","label":"Tabs","href":"/api/@thatopen/ui/classes/Tabs","docId":"api/@thatopen/ui/classes/Tabs","unlisted":false},{"type":"link","label":"TextInput","href":"/api/@thatopen/ui/classes/TextInput","docId":"api/@thatopen/ui/classes/TextInput","unlisted":false},{"type":"link","label":"Toolbar","href":"/api/@thatopen/ui/classes/Toolbar","docId":"api/@thatopen/ui/classes/Toolbar","unlisted":false},{"type":"link","label":"ToolbarGroup","href":"/api/@thatopen/ui/classes/ToolbarGroup","docId":"api/@thatopen/ui/classes/ToolbarGroup","unlisted":false},{"type":"link","label":"ToolbarSection","href":"/api/@thatopen/ui/classes/ToolbarSection","docId":"api/@thatopen/ui/classes/ToolbarSection","unlisted":false},{"type":"link","label":"Viewport","href":"/api/@thatopen/ui/classes/Viewport","docId":"api/@thatopen/ui/classes/Viewport","unlisted":false}]},{"type":"category","label":"functions","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"getElementValue()","href":"/api/@thatopen/ui/functions/getElementValue","docId":"api/@thatopen/ui/functions/getElementValue","unlisted":false}]},{"type":"category","label":"interfaces","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"CellCreatedEventDetail\\\\","href":"/api/@thatopen/ui/interfaces/CellCreatedEventDetail","docId":"api/@thatopen/ui/interfaces/CellCreatedEventDetail","unlisted":false},{"type":"link","label":"ColumnData\\\\","href":"/api/@thatopen/ui/interfaces/ColumnData","docId":"api/@thatopen/ui/interfaces/ColumnData","unlisted":false},{"type":"link","label":"EntryQuery","href":"/api/@thatopen/ui/interfaces/EntryQuery","docId":"api/@thatopen/ui/interfaces/EntryQuery","unlisted":false},{"type":"link","label":"HasName","href":"/api/@thatopen/ui/interfaces/HasName","docId":"api/@thatopen/ui/interfaces/HasName","unlisted":false},{"type":"link","label":"HasValue","href":"/api/@thatopen/ui/interfaces/HasValue","docId":"api/@thatopen/ui/interfaces/HasValue","unlisted":false},{"type":"link","label":"ManagerConfig","href":"/api/@thatopen/ui/interfaces/ManagerConfig","docId":"api/@thatopen/ui/interfaces/ManagerConfig","unlisted":false},{"type":"link","label":"QueryGroup","href":"/api/@thatopen/ui/interfaces/QueryGroup","docId":"api/@thatopen/ui/interfaces/QueryGroup","unlisted":false},{"type":"link","label":"RowCreatedEventDetail\\\\","href":"/api/@thatopen/ui/interfaces/RowCreatedEventDetail","docId":"api/@thatopen/ui/interfaces/RowCreatedEventDetail","unlisted":false},{"type":"link","label":"RowDeselectedEventDetail\\\\","href":"/api/@thatopen/ui/interfaces/RowDeselectedEventDetail","docId":"api/@thatopen/ui/interfaces/RowDeselectedEventDetail","unlisted":false},{"type":"link","label":"RowSelectedEventDetail\\\\","href":"/api/@thatopen/ui/interfaces/RowSelectedEventDetail","docId":"api/@thatopen/ui/interfaces/RowSelectedEventDetail","unlisted":false},{"type":"link","label":"TableGroupData\\\\","href":"/api/@thatopen/ui/interfaces/TableGroupData","docId":"api/@thatopen/ui/interfaces/TableGroupData","unlisted":false},{"type":"link","label":"TableGroupTemplate\\\\","href":"/api/@thatopen/ui/interfaces/TableGroupTemplate","docId":"api/@thatopen/ui/interfaces/TableGroupTemplate","unlisted":false}]},{"type":"category","label":"type-aliases","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ConditionFunctions","href":"/api/@thatopen/ui/type-aliases/ConditionFunctions","docId":"api/@thatopen/ui/type-aliases/ConditionFunctions","unlisted":false},{"type":"link","label":"GridLayoutsDefinition\\\\","href":"/api/@thatopen/ui/type-aliases/GridLayoutsDefinition","docId":"api/@thatopen/ui/type-aliases/GridLayoutsDefinition","unlisted":false},{"type":"link","label":"Query","href":"/api/@thatopen/ui/type-aliases/Query","docId":"api/@thatopen/ui/type-aliases/Query","unlisted":false},{"type":"link","label":"QueryCondition","href":"/api/@thatopen/ui/type-aliases/QueryCondition","docId":"api/@thatopen/ui/type-aliases/QueryCondition","unlisted":false},{"type":"link","label":"QueryOperators","href":"/api/@thatopen/ui/type-aliases/QueryOperators","docId":"api/@thatopen/ui/type-aliases/QueryOperators","unlisted":false},{"type":"link","label":"StatefullComponent()\\\\","href":"/api/@thatopen/ui/type-aliases/StatefullComponent","docId":"api/@thatopen/ui/type-aliases/StatefullComponent","unlisted":false},{"type":"link","label":"StatelessComponent()","href":"/api/@thatopen/ui/type-aliases/StatelessComponent","docId":"api/@thatopen/ui/type-aliases/StatelessComponent","unlisted":false},{"type":"link","label":"TableDataTransform\\\\","href":"/api/@thatopen/ui/type-aliases/TableDataTransform","docId":"api/@thatopen/ui/type-aliases/TableDataTransform","unlisted":false},{"type":"link","label":"TableRowData\\\\","href":"/api/@thatopen/ui/type-aliases/TableRowData","docId":"api/@thatopen/ui/type-aliases/TableRowData","unlisted":false},{"type":"link","label":"TableRowTemplate\\\\","href":"/api/@thatopen/ui/type-aliases/TableRowTemplate","docId":"api/@thatopen/ui/type-aliases/TableRowTemplate","unlisted":false}]}],"href":"/api/@thatopen/ui/"},{"type":"category","label":"@thatopen/ui-obc","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"classes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Manager","href":"/api/@thatopen/ui-obc/classes/Manager","docId":"api/@thatopen/ui-obc/classes/Manager","unlisted":false},{"type":"link","label":"ViewCube","href":"/api/@thatopen/ui-obc/classes/ViewCube","docId":"api/@thatopen/ui-obc/classes/ViewCube","unlisted":false},{"type":"link","label":"World","href":"/api/@thatopen/ui-obc/classes/World","docId":"api/@thatopen/ui-obc/classes/World","unlisted":false},{"type":"link","label":"World2D","href":"/api/@thatopen/ui-obc/classes/World2D","docId":"api/@thatopen/ui-obc/classes/World2D","unlisted":false}]}],"href":"/api/@thatopen/ui-obc/"}]}],"href":"/api/"}]},"docs":{"api/@thatopen/components-front/classes/AngleMeasurement":{"id":"api/@thatopen/components-front/classes/AngleMeasurement","title":"AngleMeasurement","description":"This component allows users to measure angles in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/AreaMeasurement":{"id":"api/@thatopen/components-front/classes/AreaMeasurement","title":"AreaMeasurement","description":"This component allows users to measure areas in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Civil3DNavigator":{"id":"api/@thatopen/components-front/classes/Civil3DNavigator","title":"Civil3DNavigator","description":"This component provides functionality for navigating and interacting with civil engineering data in a 3D environment. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/CivilCrossSectionNavigator":{"id":"api/@thatopen/components-front/classes/CivilCrossSectionNavigator","title":"CivilCrossSectionNavigator","description":"This component is used to navigate and visualize cross sections of a 3D model. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/CivilElevationNavigator":{"id":"api/@thatopen/components-front/classes/CivilElevationNavigator","title":"CivilElevationNavigator","description":"This component is responsible for navigating and visualizing elevation data of infra/civil models (vertical alignments). \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/CivilNavigator":{"id":"api/@thatopen/components-front/classes/CivilNavigator","title":"abstract CivilNavigator","description":"Abstract class representing a Civil Navigator. It provides functionality to navigate and interact with civil engineering data.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/CivilPlanNavigator":{"id":"api/@thatopen/components-front/classes/CivilPlanNavigator","title":"CivilPlanNavigator","description":"This component is responsible for navigating and visualizing plan data of infra/civil models (horizontal alignments). \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/ClipEdges":{"id":"api/@thatopen/components-front/classes/ClipEdges","title":"ClipEdges","description":"A component that can add fills and outlines to the Clipper. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/ClippingEdges":{"id":"api/@thatopen/components-front/classes/ClippingEdges","title":"ClippingEdges","description":"Class representing the ClippingEdges component. This is responsible for managing and rendering the edges of clipped objects.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/ClippingFills":{"id":"api/@thatopen/components-front/classes/ClippingFills","title":"ClippingFills","description":"Class for managing and rendering the fills of a clipping plane.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/EdgeMeasurement":{"id":"api/@thatopen/components-front/classes/EdgeMeasurement","title":"EdgeMeasurement","description":"This component allows users to measure geometry edges in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/EdgesPlane":{"id":"api/@thatopen/components-front/classes/EdgesPlane","title":"EdgesPlane","description":"A more advanced version of Clipper planes that also includes edges and fills.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/EdgesStyles":{"id":"api/@thatopen/components-front/classes/EdgesStyles","title":"EdgesStyles","description":"A class representing styles for clipping edges in a 3D scene.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/FaceMeasurement":{"id":"api/@thatopen/components-front/classes/FaceMeasurement","title":"FaceMeasurement","description":"This component allows users to measure geometry faces in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/GeometryCullerRenderer":{"id":"api/@thatopen/components-front/classes/GeometryCullerRenderer","title":"GeometryCullerRenderer","description":"A renderer to determine a geometry visibility on screen","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/GraphicVertexPicker":{"id":"api/@thatopen/components-front/classes/GraphicVertexPicker","title":"GraphicVertexPicker","description":"A class that extends OBC.VertexPicker to provide a graphical marker for picking vertices in a 3D scene.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Highlighter":{"id":"api/@thatopen/components-front/classes/Highlighter","title":"Highlighter","description":"This component allows highlighting and selecting fragments in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/IfcStreamer":{"id":"api/@thatopen/components-front/classes/IfcStreamer","title":"IfcStreamer","description":"The IfcStreamer component is responsible for managing and streaming tiled IFC data. It provides methods for loading, removing, and managing IFC models, as well as handling visibility and caching. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/LengthMeasurement":{"id":"api/@thatopen/components-front/classes/LengthMeasurement","title":"LengthMeasurement","description":"A basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Mark":{"id":"api/@thatopen/components-front/classes/Mark","title":"Mark","description":"Represents a marker in the 3D world.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Marker":{"id":"api/@thatopen/components-front/classes/Marker","title":"Marker","description":"Component for Managing Markers along with creating different types of markers. Every marker is a Simple2DMarker. For every marker that needs to be added, you can use the Manager to add the marker and change its look and feel. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Outliner":{"id":"api/@thatopen/components-front/classes/Outliner","title":"Outliner","description":"This component allows adding a colored outline with thickness to fragments in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Plans":{"id":"api/@thatopen/components-front/classes/Plans","title":"Plans","description":"Component to easily define and navigate 2D floor plans. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Postproduction":{"id":"api/@thatopen/components-front/classes/Postproduction","title":"Postproduction","description":"Class representing a post-processing effect manager for a 3D scene. It uses the EffectComposer from three.js to apply various post-processing effects. Thanks to this.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/PostproductionRenderer":{"id":"api/@thatopen/components-front/classes/PostproductionRenderer","title":"PostproductionRenderer","description":"A class that extends RendererWith2D and adds post-processing capabilities. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/RendererWith2D":{"id":"api/@thatopen/components-front/classes/RendererWith2D","title":"RendererWith2D","description":"A basic renderer capable of rendering 3D and 2D objects (Objec3Ds and CSS2DObjects respectively).","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/Sections":{"id":"api/@thatopen/components-front/classes/Sections","title":"Sections","description":"A component to create and manage arbitrary sections for BIM models.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/ShadowDropper":{"id":"api/@thatopen/components-front/classes/ShadowDropper","title":"ShadowDropper","description":"This component drops shadows on meshes in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/SimpleDimensionLine":{"id":"api/@thatopen/components-front/classes/SimpleDimensionLine","title":"SimpleDimensionLine","description":"A class representing a simple dimension line in a 3D space.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/classes/VolumeMeasurement":{"id":"api/@thatopen/components-front/classes/VolumeMeasurement","title":"VolumeMeasurement","description":"This component allows users to measure geometry volumes in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/index":{"id":"api/@thatopen/components-front/index","title":"@thatopen/components-front","description":"Classes","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/AreaSelection":{"id":"api/@thatopen/components-front/interfaces/AreaSelection","title":"AreaSelection","description":"Represents a selection made by the user, containing area, perimeter, mesh, and label.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry":{"id":"api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry","title":"BvhLineSegmentsGeometry","description":"A line segments geometry whose BVH has been computed.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/ClipStyle":{"id":"api/@thatopen/components-front/interfaces/ClipStyle","title":"ClipStyle","description":"A style defines the appearance of the lines of the ClippingEdges for a set of meshes.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/DimensionData":{"id":"api/@thatopen/components-front/interfaces/DimensionData","title":"DimensionData","description":"Interface representing the data required to create a dimension line.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/Edge":{"id":"api/@thatopen/components-front/interfaces/Edge","title":"Edge","description":"The lines that are drawn when the clipping plane cuts the geometry specified by the ClipStyle.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/HighlighterConfig":{"id":"api/@thatopen/components-front/interfaces/HighlighterConfig","title":"HighlighterConfig","description":"Interface defining the configuration options for the Highlighter class.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/HighlightEvents":{"id":"api/@thatopen/components-front/interfaces/HighlightEvents","title":"HighlightEvents","description":"Interface defining the events that the Highlighter class can trigger. Each highlighter has its own set of events, identified by the highlighter name.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/IGroupedMarkers":{"id":"api/@thatopen/components-front/interfaces/IGroupedMarkers","title":"IGroupedMarkers","description":"Interface representing a group of markers.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/IMarker":{"id":"api/@thatopen/components-front/interfaces/IMarker","title":"IMarker","description":"Interface representing a marker object.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/PlanView":{"id":"api/@thatopen/components-front/interfaces/PlanView","title":"PlanView","description":"The data that describes a plan view.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/PostproductionSettings":{"id":"api/@thatopen/components-front/interfaces/PostproductionSettings","title":"PostproductionSettings","description":"Interface defining the settings for the post-processing effects.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/Section":{"id":"api/@thatopen/components-front/interfaces/Section","title":"Section","description":"The data that describes a section view.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/SerializedAreaMeasure":{"id":"api/@thatopen/components-front/interfaces/SerializedAreaMeasure","title":"SerializedAreaMeasure","description":"Represents a serialized version of an AreaSelection, used for saving and loading measurements.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/Shadow":{"id":"api/@thatopen/components-front/interfaces/Shadow","title":"Shadow","description":"Represents a shadow object used in the application.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/Shadows":{"id":"api/@thatopen/components-front/interfaces/Shadows","title":"Shadows","description":"Represents a collection of shadows, where each shadow is identified by a unique ID. The keys of the object are the IDs, and the values are the corresponding Shadow objects.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/StreamedInstance":{"id":"api/@thatopen/components-front/interfaces/StreamedInstance","title":"StreamedInstance","description":"Represents an instance of a streamed object.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/StreamLoaderSettings":{"id":"api/@thatopen/components-front/interfaces/StreamLoaderSettings","title":"StreamLoaderSettings","description":"Settings for the stream loader.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/interfaces/StreamPropertiesSettings":{"id":"api/@thatopen/components-front/interfaces/StreamPropertiesSettings","title":"StreamPropertiesSettings","description":"Settings for the stream properties.","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/type-aliases/CivilMarkerType":{"id":"api/@thatopen/components-front/type-aliases/CivilMarkerType","title":"CivilMarkerType","description":"CivilMarkerType: \\"hover\\" \\\\| \\"select\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/type-aliases/Edges":{"id":"api/@thatopen/components-front/type-aliases/Edges","title":"Edges","description":"Edges: object","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/type-aliases/IndexFragmentMap":{"id":"api/@thatopen/components-front/type-aliases/IndexFragmentMap","title":"IndexFragmentMap","description":"IndexFragmentMap: Map\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/type-aliases/LineStyles":{"id":"api/@thatopen/components-front/type-aliases/LineStyles","title":"LineStyles","description":"LineStyles: object","sidebar":"tutorialSidebar"},"api/@thatopen/components-front/type-aliases/StreamedInstances":{"id":"api/@thatopen/components-front/type-aliases/StreamedInstances","title":"StreamedInstances","description":"StreamedInstances: Map\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/AsyncEvent":{"id":"api/@thatopen/components/classes/AsyncEvent","title":"AsyncEvent\\\\","description":"Simple event handler by Jason Kleban. Keep in mind that if you want to remove it later, you might want to declare the callback as an object. If you want to maintain the reference to this, you will need to declare the callback as an arrow function.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Base":{"id":"api/@thatopen/components/classes/Base","title":"abstract Base","description":"Base class of the library. Useful for finding out the interfaces something implements.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BaseCamera":{"id":"api/@thatopen/components/classes/BaseCamera","title":"abstract BaseCamera","description":"Abstract class representing a camera in a 3D world. All cameras should use this class as a base.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BaseRenderer":{"id":"api/@thatopen/components/classes/BaseRenderer","title":"abstract BaseRenderer","description":"Abstract class representing a renderer for a 3D world. All renderers should use this class as a base.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BaseScene":{"id":"api/@thatopen/components/classes/BaseScene","title":"abstract BaseScene","description":"Abstract class representing a base scene in the application. All scenes should use this class as a base.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BaseWorldItem":{"id":"api/@thatopen/components/classes/BaseWorldItem","title":"abstract BaseWorldItem","description":"One of the elements that make a world. It can be either a scene, a camera or a renderer.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BCFTopics":{"id":"api/@thatopen/components/classes/BCFTopics","title":"BCFTopics","description":"BCFTopics manages Building Collaboration Format (BCF) data the engine. It provides functionality for importing, exporting, and manipulating BCF data.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/BoundingBoxer":{"id":"api/@thatopen/components/classes/BoundingBoxer","title":"BoundingBoxer","description":"A simple implementation of bounding box that works for fragments. The resulting bbox is not 100% precise, but it\'s fast, and should suffice for general use cases such as camera zooming or general boundary determination. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Classifier":{"id":"api/@thatopen/components/classes/Classifier","title":"Classifier","description":"The Classifier component is responsible for classifying and categorizing fragments based on various criteria. It provides methods to add, remove, find, and filter fragments based on their classification. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Clipper":{"id":"api/@thatopen/components/classes/Clipper","title":"Clipper","description":"A lightweight component to easily create, delete and handle clipping planes. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Comment":{"id":"api/@thatopen/components/classes/Comment","title":"Comment","description":"Represents a comment in a BCF Topic.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Component":{"id":"api/@thatopen/components/classes/Component","title":"abstract Component","description":"Components are the building blocks of this library. Components are singleton elements that contain specific functionality. For instance, the Clipper Component can create, delete and handle 3D clipping planes. Components must be unique (they can\'t be instanced more than once per Components instance), and have a static UUID that identifies them uniquely. The can be accessed globally using the Components instance.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Components":{"id":"api/@thatopen/components/classes/Components","title":"Components","description":"The entry point of the Components library. It can create, delete and access all the components of the library globally, update all the updatable components automatically and dispose all the components, preventing memory leaks.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/ConfigManager":{"id":"api/@thatopen/components/classes/ConfigManager","title":"ConfigManager","description":"A tool to manage all the configuration from the app centrally.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/CullerRenderer":{"id":"api/@thatopen/components/classes/CullerRenderer","title":"CullerRenderer","description":"A base renderer to determine visibility on screen.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Cullers":{"id":"api/@thatopen/components/classes/Cullers","title":"Cullers","description":"A component that provides culling functionality for meshes in a 3D scene. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/DataMap":{"id":"api/@thatopen/components/classes/DataMap","title":"DataMap\\\\","description":"A class that extends the built-in Map class and provides additional events for item set, update, delete, and clear operations.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/DataSet":{"id":"api/@thatopen/components/classes/DataSet","title":"DataSet\\\\","description":"A class that extends the built-in Set class and provides additional functionality. It triggers events when items are added, deleted, or the set is cleared.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Disposer":{"id":"api/@thatopen/components/classes/Disposer","title":"Disposer","description":"A tool to safely remove meshes, geometries, materials and other items from memory to prevent memory leaks.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Event":{"id":"api/@thatopen/components/classes/Event","title":"Event\\\\","description":"Simple event handler by Jason Kleban. Keep in mind that if you want to remove it later, you might want to declare the callback as an object. If you want to maintain the reference to this, you will need to declare the callback as an arrow function.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/EventManager":{"id":"api/@thatopen/components/classes/EventManager","title":"EventManager","description":"Simple class to easily toggle and reset event lists.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Exploder":{"id":"api/@thatopen/components/classes/Exploder","title":"Exploder","description":"The Exploder component is responsible for managing the explosion of 3D model fragments (generally by floor). \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/FirstPersonMode":{"id":"api/@thatopen/components/classes/FirstPersonMode","title":"FirstPersonMode","description":"A NavigationMode that allows first person navigation, simulating FPS video games.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/FragmentsManager":{"id":"api/@thatopen/components/classes/FragmentsManager","title":"FragmentsManager","description":"Component to load, delete and manage fragments efficiently. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Grids":{"id":"api/@thatopen/components/classes/Grids","title":"Grids","description":"A component that manages grid instances. Each grid is associated with a unique world. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Hider":{"id":"api/@thatopen/components/classes/Hider","title":"Hider","description":"A component that hides or isolates fragments within a 3D scene. It extends the base Component class and provides methods to control fragment visibility and isolation. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IDSSpecification":{"id":"api/@thatopen/components/classes/IDSSpecification","title":"IDSSpecification","description":"Represents a single specification from the Information Delivery Specification (IDS) standard.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IDSSpecifications":{"id":"api/@thatopen/components/classes/IDSSpecifications","title":"IDSSpecifications","description":"Component that manages Information Delivery Specification (IDS) data. It provides functionality for importing, exporting, and manipulating IDS data.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcBasicQuery":{"id":"api/@thatopen/components/classes/IfcBasicQuery","title":"IfcBasicQuery","description":"A query that checks the direct attributes of IFC items.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcFinder":{"id":"api/@thatopen/components/classes/IfcFinder","title":"IfcFinder","description":"Component to make text queries in the IFC.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcFinderQuery":{"id":"api/@thatopen/components/classes/IfcFinderQuery","title":"abstract IfcFinderQuery","description":"The base class for all queries used by the IfcFinder.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcFragmentSettings":{"id":"api/@thatopen/components/classes/IfcFragmentSettings","title":"IfcFragmentSettings","description":"Configuration of the IFC-fragment conversion.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcGeometryTiler":{"id":"api/@thatopen/components/classes/IfcGeometryTiler","title":"IfcGeometryTiler","description":"A component that handles the tiling of IFC geometries for efficient streaming. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcIsolator":{"id":"api/@thatopen/components/classes/IfcIsolator","title":"IfcIsolator","description":"Component to isolate certain elements from an IFC and export to another IFC. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcJsonExporter":{"id":"api/@thatopen/components/classes/IfcJsonExporter","title":"IfcJsonExporter","description":"Component to export all the properties from an IFC to a JS object. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcLoader":{"id":"api/@thatopen/components/classes/IfcLoader","title":"IfcLoader","description":"The IfcLoader component is responsible for loading and processing IFC files. It utilizes the Web-IFC library to handle the IFC data and the Three.js library for 3D rendering. The class provides methods for setting up, loading, and cleaning up IFC files. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcPropertiesManager":{"id":"api/@thatopen/components/classes/IfcPropertiesManager","title":"IfcPropertiesManager","description":"Component to manage and edit properties and Psets in IFC files.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcPropertiesTiler":{"id":"api/@thatopen/components/classes/IfcPropertiesTiler","title":"IfcPropertiesTiler","description":"A component that converts the properties of an IFC file to tiles. It uses the Web-IFC library to read and process the IFC data. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcPropertyQuery":{"id":"api/@thatopen/components/classes/IfcPropertyQuery","title":"IfcPropertyQuery","description":"A query that checks the properties in the property sets assigned to IFC items.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcRelationsIndexer":{"id":"api/@thatopen/components/classes/IfcRelationsIndexer","title":"IfcRelationsIndexer","description":"Indexer component for IFC entities, facilitating the indexing and retrieval of IFC entity relationships. It is designed to process models properties by indexing their IFC entities\' relations based on predefined inverse attributes, and provides methods to query these relations. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/IfcStreamingSettings":{"id":"api/@thatopen/components/classes/IfcStreamingSettings","title":"IfcStreamingSettings","description":"Settings for streaming IFC geometry and assets. Extends IfcFragmentSettings to inherit common settings.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/MeasurementUtils":{"id":"api/@thatopen/components/classes/MeasurementUtils","title":"MeasurementUtils","description":"Utility component for performing measurements on 3D meshes by providing methods for measuring distances between edges and faces. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/MeshCullerRenderer":{"id":"api/@thatopen/components/classes/MeshCullerRenderer","title":"MeshCullerRenderer","description":"A renderer to hide/show meshes depending on their visibility from the user\'s point of view.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/MiniMap":{"id":"api/@thatopen/components/classes/MiniMap","title":"MiniMap","description":"A class representing a 2D minimap of a 3D world.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/MiniMaps":{"id":"api/@thatopen/components/classes/MiniMaps","title":"MiniMaps","description":"A component that manages multiple MiniMap instances, each associated with a unique world ID. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Mouse":{"id":"api/@thatopen/components/classes/Mouse","title":"Mouse","description":"A helper to easily get the real position of the mouse in the Three.js canvas to work with tools like the raycaster, even if it has been transformed through CSS or doesn\'t occupy the whole screen.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/OrbitMode":{"id":"api/@thatopen/components/classes/OrbitMode","title":"OrbitMode","description":"A NavigationMode that allows 3D navigation and panning like in many 3D and CAD softwares.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/OrthoPerspectiveCamera":{"id":"api/@thatopen/components/classes/OrthoPerspectiveCamera","title":"OrthoPerspectiveCamera","description":"A flexible camera that uses yomotsu\'s cameracontrols to control the camera in 2D and 3D. It supports multiple navigation modes, such as 2D floor plan navigation, first person and 3D orbit. This class extends the SimpleCamera class and adds additional functionality for managing different camera projections and navigation modes. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/PlanMode":{"id":"api/@thatopen/components/classes/PlanMode","title":"PlanMode","description":"A NavigationMode that allows to navigate floorplans in 2D, like many BIM tools.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/ProjectionManager":{"id":"api/@thatopen/components/classes/ProjectionManager","title":"ProjectionManager","description":"Object to control the CameraProjection of the OrthoPerspectiveCamera.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/PropertiesStreamingSettings":{"id":"api/@thatopen/components/classes/PropertiesStreamingSettings","title":"PropertiesStreamingSettings","description":"Settings for streaming properties. Extends IfcFragmentSettings to inherit common settings.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Raycasters":{"id":"api/@thatopen/components/classes/Raycasters","title":"Raycasters","description":"A component that manages a raycaster for each world and automatically disposes it when its corresponding world is disposed. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/ShadowedScene":{"id":"api/@thatopen/components/classes/ShadowedScene","title":"ShadowedScene","description":"A scene that supports efficient cast shadows. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleCamera":{"id":"api/@thatopen/components/classes/SimpleCamera","title":"SimpleCamera","description":"A basic camera that uses yomotsu\'s cameracontrols to control the camera in 2D and 3D. Check out it\'s API to find out what features it offers.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleGrid":{"id":"api/@thatopen/components/classes/SimpleGrid","title":"SimpleGrid","description":"An infinite grid. Created by fyrestar and translated to typescript by dkaraush.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimplePlane":{"id":"api/@thatopen/components/classes/SimplePlane","title":"SimplePlane","description":"Each of the clipping planes created by the clipper.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleRaycaster":{"id":"api/@thatopen/components/classes/SimpleRaycaster","title":"SimpleRaycaster","description":"A simple raycaster that allows to easily get items from the scene using the mouse and touch events.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleRenderer":{"id":"api/@thatopen/components/classes/SimpleRenderer","title":"SimpleRenderer","description":"A basic renderer capable of rendering Objec3Ds.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleScene":{"id":"api/@thatopen/components/classes/SimpleScene","title":"SimpleScene","description":"A basic 3D scene to add objects hierarchically, and easily dispose them when you are finished with it.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/SimpleWorld":{"id":"api/@thatopen/components/classes/SimpleWorld","title":"SimpleWorld\\\\","description":"A class representing a simple world in a 3D environment. It extends the Base class and implements the World interface.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/VertexPicker":{"id":"api/@thatopen/components/classes/VertexPicker","title":"VertexPicker","description":"A class that provides functionality for picking vertices in a 3D scene.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Viewpoint":{"id":"api/@thatopen/components/classes/Viewpoint","title":"Viewpoint","description":"Represents a BCF compliant viewpoint from BuildingSMART.","sidebar":"tutorialSidebar"},"api/@thatopen/components/classes/Worlds":{"id":"api/@thatopen/components/classes/Worlds","title":"Worlds","description":"A class representing a collection of worlds within a game engine. It manages the creation, deletion, and update of worlds. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.","sidebar":"tutorialSidebar"},"api/@thatopen/components/index":{"id":"api/@thatopen/components/index","title":"@thatopen/components","description":"Classes","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/AttributeListener":{"id":"api/@thatopen/components/interfaces/AttributeListener","title":"AttributeListener","description":"Interface representing a map of attribute listeners. The keys are model UUIDs, and the values are objects with express IDs as keys, and objects with attribute names as keys, and Event objects as values.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/BCFTopicsConfig":{"id":"api/@thatopen/components/interfaces/BCFTopicsConfig","title":"BCFTopicsConfig","description":"Configuration settings for managing BCF topics. This interface defines the properties and their meanings used to control the behavior of exporting and importing BCF topics.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/BCFViewpoint":{"id":"api/@thatopen/components/interfaces/BCFViewpoint","title":"BCFViewpoint","description":"Represents a viewpoint in a BCF file.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/CameraControllable":{"id":"api/@thatopen/components/interfaces/CameraControllable","title":"CameraControllable","description":"Whether a camera uses the Camera Controls library.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/ChangeMap":{"id":"api/@thatopen/components/interfaces/ChangeMap","title":"ChangeMap","description":"Interface representing a map of changed entities in a model. The keys are model UUIDs, and the values are sets of express IDs of changed entities.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Classification":{"id":"api/@thatopen/components/interfaces/Classification","title":"Classification","description":"Interface representing a classification system. The classification is organized by system and class name, and each class contains a map of fragment IDs with extra information.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Configurable":{"id":"api/@thatopen/components/interfaces/Configurable","title":"Configurable\\\\","description":"Whether this component supports to be configured.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Createable":{"id":"api/@thatopen/components/interfaces/Createable","title":"Createable","description":"Whether this component supports create and destroy operations. This generally applies for components that work with instances, such as clipping planes or dimensions.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Disposable":{"id":"api/@thatopen/components/interfaces/Disposable","title":"Disposable","description":"Whether this component has to be manually destroyed once you are done with it to prevent memory leaks. This also ensures that the DOM events created by that component will be cleaned up.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/EntitiesRelatedEvent":{"id":"api/@thatopen/components/interfaces/EntitiesRelatedEvent","title":"EntitiesRelatedEvent","description":"Interface definition of an Entities Related Event from the IfcRelationsIndexer. This event gets triggered when two or more entities has been related with each other.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Eventable":{"id":"api/@thatopen/components/interfaces/Eventable","title":"Eventable","description":"Whether it has events or not.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Hideable":{"id":"api/@thatopen/components/interfaces/Hideable","title":"Hideable","description":"Whether the geometric representation of this component can be hidden or shown in the Three.js scene.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/IDSCheckResult":{"id":"api/@thatopen/components/interfaces/IDSCheckResult","title":"IDSCheckResult","description":"Represents the result of a check performed by an IDSFacet test.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/IfcCategoryRule":{"id":"api/@thatopen/components/interfaces/IfcCategoryRule","title":"IfcCategoryRule","description":"A rule for the IfcFinder to search items based on their category.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/IfcOperatorRule":{"id":"api/@thatopen/components/interfaces/IfcOperatorRule","title":"IfcOperatorRule","description":"A rule for the IfcFinder to search items based on the value of a numeric property defined in their property sets.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/IfcPropertyRule":{"id":"api/@thatopen/components/interfaces/IfcPropertyRule","title":"IfcPropertyRule","description":"A rule for the IfcFinder to search items based on the properties defined in their property sets.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/MeasureEdge":{"id":"api/@thatopen/components/interfaces/MeasureEdge","title":"MeasureEdge","description":"Represents an edge measurement result.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/MiniMapConfig":{"id":"api/@thatopen/components/interfaces/MiniMapConfig","title":"MiniMapConfig","description":"Configuration interface for the MiniMap.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/NavigationMode":{"id":"api/@thatopen/components/interfaces/NavigationMode","title":"NavigationMode","description":"An object that determines the behavior of the camera controls and the user input (e.g. 2D floor plan mode, first person mode, etc).","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Progress":{"id":"api/@thatopen/components/interfaces/Progress","title":"Progress","description":"Basic type to describe the progress of any kind of process.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Resizeable":{"id":"api/@thatopen/components/interfaces/Resizeable","title":"Resizeable","description":"Whether this component can be resized. The meaning of this can vary depending on the component: resizing a Renderer component could mean changing its resolution, whereas resizing a Mesh would change its scale.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/ShadowedSceneConfig":{"id":"api/@thatopen/components/interfaces/ShadowedSceneConfig","title":"ShadowedSceneConfig","description":"Configuration interface for the ShadowedScene. Defines properties for directional and ambient lights, as well as shadows.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/SimpleGridConfig":{"id":"api/@thatopen/components/interfaces/SimpleGridConfig","title":"SimpleGridConfig","description":"Configuration interface for the SimpleGrid.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/SimpleSceneConfig":{"id":"api/@thatopen/components/interfaces/SimpleSceneConfig","title":"SimpleSceneConfig","description":"Configuration interface for the SimpleScene.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/StreamedAsset":{"id":"api/@thatopen/components/interfaces/StreamedAsset","title":"StreamedAsset","description":"A streamed asset, which consists of multiple geometries. Each geometry in the asset is identified by a unique number (geometryID), and contains information about its transformation and color.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/StreamedGeometries":{"id":"api/@thatopen/components/interfaces/StreamedGeometries","title":"StreamedGeometries","description":"A dictionary of geometries streamed from a server. Each geometry is identified by a unique number (id), and contains information about its bounding box, whether it has holes, and an optional file path for the geometry data.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/Updateable":{"id":"api/@thatopen/components/interfaces/Updateable","title":"Updateable","description":"Whether this component should be updated each frame.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/VertexPickerConfig":{"id":"api/@thatopen/components/interfaces/VertexPickerConfig","title":"VertexPickerConfig","description":"Configuration interface for the VertexPicker component.","sidebar":"tutorialSidebar"},"api/@thatopen/components/interfaces/World":{"id":"api/@thatopen/components/interfaces/World","title":"World","description":"Represents a 3D world with meshes, scene, camera, renderer, and other properties.","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/BooleanPropTypes":{"id":"api/@thatopen/components/type-aliases/BooleanPropTypes","title":"BooleanPropTypes","description":"BooleanPropTypes: \\"IfcBoolean\\" \\\\| \\"IfcLogical\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/CameraProjection":{"id":"api/@thatopen/components/type-aliases/CameraProjection","title":"CameraProjection","description":"CameraProjection: \\"Perspective\\" \\\\| \\"Orthographic\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/IfcFinderRule":{"id":"api/@thatopen/components/type-aliases/IfcFinderRule","title":"IfcFinderRule","description":"IfcFinderRule: IfcCategoryRule \\\\| IfcPropertyRule \\\\| IfcOperatorRule","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/IfcRelations":{"id":"api/@thatopen/components/type-aliases/IfcRelations","title":"IfcRelations","description":"IfcRelations: [typeof WEBIFC.IFCRELAGGREGATES, typeof WEBIFC.IFCRELASSOCIATESMATERIAL, typeof WEBIFC.IFCRELASSOCIATESCLASSIFICATION, typeof WEBIFC.IFCRELASSIGNSTOGROUP, typeof WEBIFC.IFCRELDEFINESBYPROPERTIES, typeof WEBIFC.IFCRELDEFINESBYTYPE, typeof WEBIFC.IFCRELDEFINESBYTEMPLATE, typeof WEBIFC.IFCRELCONTAINEDINSPATIALSTRUCTURE, typeof WEBIFC.IFCRELFLOWCONTROLELEMENTS, typeof WEBIFC.IFCRELCONNECTSELEMENTS, typeof WEBIFC.IFCRELASSIGNSTOPRODUCT, typeof WEBIFC.IFCRELDECLARES, typeof WEBIFC.IFCRELASSIGNSTOCONTROL, typeof WEBIFC.IFCRELNESTS, typeof WEBIFC.IFCRELASSOCIATESDOCUMENT]","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/InverseAttributes":{"id":"api/@thatopen/components/type-aliases/InverseAttributes","title":"InverseAttributes","description":"InverseAttributes: [\\"IsDecomposedBy\\", \\"Decomposes\\", \\"AssociatedTo\\", \\"HasAssociations\\", \\"ClassificationForObjects\\", \\"IsGroupedBy\\", \\"HasAssignments\\", \\"IsDefinedBy\\", \\"DefinesOcurrence\\", \\"IsTypedBy\\", \\"Types\\", \\"Defines\\", \\"ContainedInStructure\\", \\"ContainsElements\\", \\"HasControlElements\\", \\"AssignedToFlowElement\\", \\"ConnectedTo\\", \\"ConnectedFrom\\", \\"ReferencedBy\\", \\"Declares\\", \\"HasContext\\", \\"Controls\\", \\"IsNestedBy\\", \\"Nests\\", \\"DocumentRefForObjects\\"]","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/NavModeID":{"id":"api/@thatopen/components/type-aliases/NavModeID","title":"NavModeID","description":"NavModeID: \\"Orbit\\" \\\\| \\"FirstPerson\\" \\\\| \\"Plan\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/NumericPropTypes":{"id":"api/@thatopen/components/type-aliases/NumericPropTypes","title":"NumericPropTypes","description":"NumericPropTypes: \\"IfcInteger\\" \\\\| \\"IfcReal\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/SerializedQuery":{"id":"api/@thatopen/components/type-aliases/SerializedQuery","title":"SerializedQuery","description":"SerializedQuery: object","sidebar":"tutorialSidebar"},"api/@thatopen/components/type-aliases/StringPropTypes":{"id":"api/@thatopen/components/type-aliases/StringPropTypes","title":"StringPropTypes","description":"StringPropTypes: \\"IfcText\\" \\\\| \\"IfcLabel\\" \\\\| \\"IfcIdentifier\\"","sidebar":"tutorialSidebar"},"api/@thatopen/components/variables/GeometryTypes":{"id":"api/@thatopen/components/variables/GeometryTypes","title":"GeometryTypes","description":"const GeometryTypes: Set\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/components/variables/IfcCategoryMap":{"id":"api/@thatopen/components/variables/IfcCategoryMap","title":"IfcCategoryMap","description":"const IfcCategoryMap: object","sidebar":"tutorialSidebar"},"api/@thatopen/components/variables/IfcElements":{"id":"api/@thatopen/components/variables/IfcElements","title":"IfcElements","description":"const IfcElements: object","sidebar":"tutorialSidebar"},"api/@thatopen/ui-obc/classes/Manager":{"id":"api/@thatopen/ui-obc/classes/Manager","title":"Manager","description":"Manager class is responsible for initializing the custom elements for the BIM application. It uses the BUIManager from \\"@thatopen/ui\\" to define custom elements for 2D and 3D views.","sidebar":"tutorialSidebar"},"api/@thatopen/ui-obc/classes/ViewCube":{"id":"api/@thatopen/ui-obc/classes/ViewCube","title":"ViewCube","description":"A custom 3D view cube component for BIM applications. HTML tag: bim-view-cube","sidebar":"tutorialSidebar"},"api/@thatopen/ui-obc/classes/World":{"id":"api/@thatopen/ui-obc/classes/World","title":"World","description":"A world for BIM Apps.","sidebar":"tutorialSidebar"},"api/@thatopen/ui-obc/classes/World2D":{"id":"api/@thatopen/ui-obc/classes/World2D","title":"World2D","description":"A custom 2D Scene component for BIM applications. HTML tag: bim-world-2d","sidebar":"tutorialSidebar"},"api/@thatopen/ui-obc/index":{"id":"api/@thatopen/ui-obc/index","title":"@thatopen/ui-obc","description":"Classes","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Button":{"id":"api/@thatopen/ui/classes/Button","title":"Button","description":"A custom button web component for BIM applications. HTML tag: bim-button","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Checkbox":{"id":"api/@thatopen/ui/classes/Checkbox","title":"Checkbox","description":"A custom checkbox web component for BIM applications. HTML tag: bim-checkbox","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/ColorInput":{"id":"api/@thatopen/ui/classes/ColorInput","title":"ColorInput","description":"A custom color input web component for BIM applications. HTML tag: bim-color-input","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Component":{"id":"api/@thatopen/ui/classes/Component","title":"Component","description":"A base class for UI components that utilizes the LitElement library. Provides functionality for rendering stateless and stateful components, as well as lazy loading of elements using Intersection Observer.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Dropdown":{"id":"api/@thatopen/ui/classes/Dropdown","title":"Dropdown","description":"A custom dropdown web component for BIM applications.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Grid":{"id":"api/@thatopen/ui/classes/Grid","title":"Grid\\\\","description":"A custom grid component for web applications.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Icon":{"id":"api/@thatopen/ui/classes/Icon","title":"Icon","description":"A custom icon web component for BIM applications. HTML tag: bim-icon","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Input":{"id":"api/@thatopen/ui/classes/Input","title":"Input","description":"A custom input web component for BIM applications. HTML tag: bim-input","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Label":{"id":"api/@thatopen/ui/classes/Label","title":"Label","description":"A custom label web component for BIM applications. HTML tag: bim-label","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Manager":{"id":"api/@thatopen/ui/classes/Manager","title":"Manager","description":"Manager class is responsible for initializing the BIM UI library, defining custom elements, and providing configuration options.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/NumberInput":{"id":"api/@thatopen/ui/classes/NumberInput","title":"NumberInput","description":"A custom number input web component for BIM applications. HTML tag: bim-number-input","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Option":{"id":"api/@thatopen/ui/classes/Option","title":"Option","description":"A custom option web component for BIM applications. HTML tag: bim-option","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Panel":{"id":"api/@thatopen/ui/classes/Panel","title":"Panel","description":"A custom panel web component for BIM applications. HTML tag: bim-panel","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/PanelSection":{"id":"api/@thatopen/ui/classes/PanelSection","title":"PanelSection","description":"A custom panel section web component for BIM applications. HTML tag: bim-panel-section","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Selector":{"id":"api/@thatopen/ui/classes/Selector","title":"Selector","description":"A custom selector web component for BIM applications. HTML tag: bim-selector","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Tab":{"id":"api/@thatopen/ui/classes/Tab","title":"Tab","description":"A custom tab web component for BIM applications. HTML tag: bim-tab","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Table":{"id":"api/@thatopen/ui/classes/Table","title":"Table\\\\","description":"A custom table web component for BIM applications. HTML tag: bim-table","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Tabs":{"id":"api/@thatopen/ui/classes/Tabs","title":"Tabs","description":"A custom tabs web component for BIM applications. HTML tag: bim-tabs","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/TextInput":{"id":"api/@thatopen/ui/classes/TextInput","title":"TextInput","description":"A custom text input web component for BIM applications. HTML tag: bim-text-input","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Toolbar":{"id":"api/@thatopen/ui/classes/Toolbar","title":"Toolbar","description":"A custom toolbar web component for BIM applications. HTML tag: bim-toolbar","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/ToolbarGroup":{"id":"api/@thatopen/ui/classes/ToolbarGroup","title":"ToolbarGroup","description":"A custom toolbar group web component for BIM applications. HTML tag: bim-toolbar-group","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/ToolbarSection":{"id":"api/@thatopen/ui/classes/ToolbarSection","title":"ToolbarSection","description":"A custom toolbar section web component for BIM applications. HTML tag: bim-toolbar-section","sidebar":"tutorialSidebar"},"api/@thatopen/ui/classes/Viewport":{"id":"api/@thatopen/ui/classes/Viewport","title":"Viewport","description":"A custom viewport web component for BIM applications. HTML tag: bim-viewport","sidebar":"tutorialSidebar"},"api/@thatopen/ui/functions/getElementValue":{"id":"api/@thatopen/ui/functions/getElementValue","title":"getElementValue()","description":"getElementValue(child, transform, recursive): Record\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/ui/index":{"id":"api/@thatopen/ui/index","title":"@thatopen/ui","description":"Classes","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/CellCreatedEventDetail":{"id":"api/@thatopen/ui/interfaces/CellCreatedEventDetail","title":"CellCreatedEventDetail\\\\","description":"Represents the detail of a cell created event.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/ColumnData":{"id":"api/@thatopen/ui/interfaces/ColumnData","title":"ColumnData\\\\","description":"Represents a column in the table.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/EntryQuery":{"id":"api/@thatopen/ui/interfaces/EntryQuery","title":"EntryQuery","description":"Represents a single query condition.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/HasName":{"id":"api/@thatopen/ui/interfaces/HasName","title":"HasName","description":"Represents an object that has a name and an optional label.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/HasValue":{"id":"api/@thatopen/ui/interfaces/HasValue","title":"HasValue","description":"Represents an object that has a value and an event for value changes.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/ManagerConfig":{"id":"api/@thatopen/ui/interfaces/ManagerConfig","title":"ManagerConfig","description":"Configuration interface for the Manager class. Defines the properties and their types that can be configured for the Manager.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/QueryGroup":{"id":"api/@thatopen/ui/interfaces/QueryGroup","title":"QueryGroup","description":"Represents a group of queries with an operator.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/RowCreatedEventDetail":{"id":"api/@thatopen/ui/interfaces/RowCreatedEventDetail","title":"RowCreatedEventDetail\\\\","description":"Represents the detail of a row created event.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/RowDeselectedEventDetail":{"id":"api/@thatopen/ui/interfaces/RowDeselectedEventDetail","title":"RowDeselectedEventDetail\\\\","description":"Represents the detail of a row deselected event.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/RowSelectedEventDetail":{"id":"api/@thatopen/ui/interfaces/RowSelectedEventDetail","title":"RowSelectedEventDetail\\\\","description":"Represents the detail of a row selected event.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/TableGroupData":{"id":"api/@thatopen/ui/interfaces/TableGroupData","title":"TableGroupData\\\\","description":"Represents a group of table rows with optional children.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/interfaces/TableGroupTemplate":{"id":"api/@thatopen/ui/interfaces/TableGroupTemplate","title":"TableGroupTemplate\\\\","description":"Represents a template for rendering a group of table rows in a table.","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/ConditionFunctions":{"id":"api/@thatopen/ui/type-aliases/ConditionFunctions","title":"ConditionFunctions","description":"ConditionFunctions Function }","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/GridLayoutsDefinition":{"id":"api/@thatopen/ui/type-aliases/GridLayoutsDefinition","title":"GridLayoutsDefinition\\\\","description":"GridLayoutsDefinition\\\\ Object }","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/Query":{"id":"api/@thatopen/ui/type-aliases/Query","title":"Query","description":"Query: (EntryQuery \\\\| QueryGroup)[]","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/QueryCondition":{"id":"api/@thatopen/ui/type-aliases/QueryCondition","title":"QueryCondition","description":"QueryCondition: \\"=\\" \\\\| \\">\\" \\\\| \\">=\\" \\\\| \\"<\\" \\\\| \\"<=\\" \\\\| \\"?\\" \\\\| \\"/\\" \\\\| \\"#\\"","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/QueryOperators":{"id":"api/@thatopen/ui/type-aliases/QueryOperators","title":"QueryOperators","description":"QueryOperators: \\"&\\" \\\\| \\"\\\\|\\"","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/StatefullComponent":{"id":"api/@thatopen/ui/type-aliases/StatefullComponent","title":"StatefullComponent()\\\\","description":"StatefullComponent\\\\: (state, update) => TemplateResult","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/StatelessComponent":{"id":"api/@thatopen/ui/type-aliases/StatelessComponent","title":"StatelessComponent()","description":"StatelessComponent: () => TemplateResult","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/TableDataTransform":{"id":"api/@thatopen/ui/type-aliases/TableDataTransform","title":"TableDataTransform\\\\","description":"TableDataTransform\\\\ Function }","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/TableRowData":{"id":"api/@thatopen/ui/type-aliases/TableRowData","title":"TableRowData\\\\","description":"TableRowData\\\\: Record\\\\","sidebar":"tutorialSidebar"},"api/@thatopen/ui/type-aliases/TableRowTemplate":{"id":"api/@thatopen/ui/type-aliases/TableRowTemplate","title":"TableRowTemplate\\\\","description":"TableRowTemplate\\\\: Partial\\\\\\\\>","sidebar":"tutorialSidebar"},"api/index":{"id":"api/index","title":"\ud83d\udccb API","description":"Packages","sidebar":"tutorialSidebar"},"components/clean-components-guide":{"id":"components/clean-components-guide","title":"\ud83e\uddf9 Keeping them clean","description":"\ud83e\uddfd Basics","sidebar":"tutorialSidebar"},"components/creating-components":{"id":"components/creating-components","title":"\ud83e\uddbe Making your own","description":"\ud83d\udc6a Create it","sidebar":"tutorialSidebar"},"components/getting-started":{"id":"components/getting-started","title":"\ud83d\ude80 Getting started","description":"\ud83d\udc69\ud83c\udffb\u200d\ud83c\udfeb Component ABC","sidebar":"tutorialSidebar"},"components/tutorial-paths":{"id":"components/tutorial-paths","title":"\ud83e\udded Tutorial paths","description":"As you can see, we have tons of tutorials in this documentations, and we will keep adding more as new features come out. If you\'re not looking for anything specific, it can be a little difficult to know where to start. For that reason, here are some interesting itineraries to take your first steps in the library! \ud83d\udd25\ud83d\udd25\ud83d\ude80","sidebar":"tutorialSidebar"},"contributing":{"id":"contributing","title":"\ud83e\udd1d Get involved","description":"Want to help us make this project even more amazing? Great! Contributing is easy, and on this page you\'ll find a quick guide on how to do it. \ud83d\udc47\ud83c\udffb","sidebar":"tutorialSidebar"},"intro":{"id":"intro","title":"\ud83d\udc68\ud83c\udffb\u200d\ud83d\udcbb Introduction","description":"Welcome to That Open Docs! Have you ever wanted to create your own BIM software, but don\'t know where to start? Here you will find everything you need to go from zero to hero! \ud83c\udfe2\ud83d\udc69\u200d\ud83d\udcbb","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/BCFTopics":{"id":"Tutorials/Components/Core/BCFTopics","title":"BCFTopics","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/BCFTopics\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/BoundingBoxer":{"id":"Tutorials/Components/Core/BoundingBoxer","title":"BoundingBoxer","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/BoundingBoxer\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Classifier":{"id":"Tutorials/Components/Core/Classifier","title":"Classifier","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Classifier\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Clipper":{"id":"Tutorials/Components/Core/Clipper","title":"Clipper","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Clipper\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Cullers":{"id":"Tutorials/Components/Core/Cullers","title":"Cullers","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Cullers\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Exploder":{"id":"Tutorials/Components/Core/Exploder","title":"Exploder","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Exploder\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/FragmentsManager":{"id":"Tutorials/Components/Core/FragmentsManager","title":"FragmentsManager","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/FragmentsManager\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Grids":{"id":"Tutorials/Components/Core/Grids","title":"Grids","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Grids\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Hider":{"id":"Tutorials/Components/Core/Hider","title":"Hider","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Hider\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcFinder":{"id":"Tutorials/Components/Core/IfcFinder","title":"IfcFinder","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcFinder\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcGeometryTiler":{"id":"Tutorials/Components/Core/IfcGeometryTiler","title":"IfcGeometryTiler","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcGeometryTiler\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcIsolator":{"id":"Tutorials/Components/Core/IfcIsolator","title":"IfcIsolator","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcIsolator\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcJsonExporter":{"id":"Tutorials/Components/Core/IfcJsonExporter","title":"IfcJsonExporter","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcJsonExporter\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcLoader":{"id":"Tutorials/Components/Core/IfcLoader","title":"IfcLoader","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcLoader\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcPropertiesManager":{"id":"Tutorials/Components/Core/IfcPropertiesManager","title":"IfcPropertiesManager","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcPropertiesManager\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcPropertiesTiler":{"id":"Tutorials/Components/Core/IfcPropertiesTiler","title":"IfcPropertiesTiler","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcPropertiesTiler\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcRelationsIndexer":{"id":"Tutorials/Components/Core/IfcRelationsIndexer","title":"IfcRelationsIndexer","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcRelationsIndexer\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/MeasurementUtils":{"id":"Tutorials/Components/Core/MeasurementUtils","title":"MeasurementUtils","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/MeasurementUtils\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/MiniMap":{"id":"Tutorials/Components/Core/MiniMap","title":"MiniMap","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/MiniMap\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/OrthoPerspectiveCamera":{"id":"Tutorials/Components/Core/OrthoPerspectiveCamera","title":"OrthoPerspectiveCamera","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/OrthoPerspectiveCamera\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Raycasters":{"id":"Tutorials/Components/Core/Raycasters","title":"Raycasters","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Raycasters\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/ShadowedScene":{"id":"Tutorials/Components/Core/ShadowedScene","title":"ShadowedScene","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/ShadowedScene\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Viewpoints":{"id":"Tutorials/Components/Core/Viewpoints","title":"Viewpoints","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Viewpoints\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Worlds":{"id":"Tutorials/Components/Core/Worlds","title":"Worlds","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Worlds\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/AngleMeasurement":{"id":"Tutorials/Components/Front/AngleMeasurement","title":"AngleMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/AngleMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/AreaMeasurement":{"id":"Tutorials/Components/Front/AreaMeasurement","title":"AreaMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/AreaMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/Civil3DNavigator":{"id":"Tutorials/Components/Front/Civil3DNavigator","title":"Civil3DNavigator","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Civil3DNavigator\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/CivilCrossSectionNavigator":{"id":"Tutorials/Components/Front/CivilCrossSectionNavigator","title":"CivilCrossSectionNavigator","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/CivilCrossSectionNavigator\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/CivilElevationNavigator":{"id":"Tutorials/Components/Front/CivilElevationNavigator","title":"CivilElevationNavigator","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/CivilElevationNavigator\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/CivilPlanNavigator":{"id":"Tutorials/Components/Front/CivilPlanNavigator","title":"CivilPlanNavigator","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/CivilPlanNavigator\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/ClipEdges":{"id":"Tutorials/Components/Front/ClipEdges","title":"ClipEdges","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/ClipEdges\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/EdgeMeasurement":{"id":"Tutorials/Components/Front/EdgeMeasurement","title":"EdgeMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/EdgeMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/FaceMeasurement":{"id":"Tutorials/Components/Front/FaceMeasurement","title":"FaceMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/FaceMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/Highlighter":{"id":"Tutorials/Components/Front/Highlighter","title":"Highlighter","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Highlighter\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/IfcStreamer":{"id":"Tutorials/Components/Front/IfcStreamer","title":"IfcStreamer","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/IfcStreamer\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/LengthMeasurement":{"id":"Tutorials/Components/Front/LengthMeasurement","title":"LengthMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/LengthMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/Marker":{"id":"Tutorials/Components/Front/Marker","title":"Marker","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Marker\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/Plans":{"id":"Tutorials/Components/Front/Plans","title":"Plans","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Plans\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/PostproductionRenderer":{"id":"Tutorials/Components/Front/PostproductionRenderer","title":"PostproductionRenderer","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/PostproductionRenderer\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/Sections":{"id":"Tutorials/Components/Front/Sections","title":"Sections","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/Sections\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/ShadowDropper":{"id":"Tutorials/Components/Front/ShadowDropper","title":"ShadowDropper","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/ShadowDropper\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/VolumeMeasurement":{"id":"Tutorials/Components/Front/VolumeMeasurement","title":"VolumeMeasurement","description":"window.open(\\"https://thatopen.github.io/engine_components/examples/VolumeMeasurement\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/Components/index":{"id":"Tutorials/Components/index","title":"Components","description":"TOC","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Component":{"id":"Tutorials/UserInterface/Core/Component","title":"Component","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Component\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Table/DataTransform":{"id":"Tutorials/UserInterface/Core/Table/DataTransform","title":"DataTransform","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Table/DataTransform\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Table/ExportingData":{"id":"Tutorials/UserInterface/Core/Table/ExportingData","title":"ExportingData","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Table/ExportingData\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Table/LoadFunction":{"id":"Tutorials/UserInterface/Core/Table/LoadFunction","title":"LoadFunction","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Table/LoadFunction\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Table/Searching":{"id":"Tutorials/UserInterface/Core/Table/Searching","title":"Searching","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Table/Searching\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/Core/Table/Table":{"id":"Tutorials/UserInterface/Core/Table/Table","title":"Table","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/Table\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/index":{"id":"Tutorials/UserInterface/index","title":"UserInterface","description":"TOC","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/ClassificationsTree":{"id":"Tutorials/UserInterface/OBC/ClassificationsTree","title":"ClassificationsTree","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/ClassificationsTree\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/ElementProperties":{"id":"Tutorials/UserInterface/OBC/ElementProperties","title":"ElementProperties","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/ElementProperties\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/EntityAttributes":{"id":"Tutorials/UserInterface/OBC/EntityAttributes","title":"EntityAttributes","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/EntityAttributes\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/ModelsList":{"id":"Tutorials/UserInterface/OBC/ModelsList","title":"ModelsList","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/ModelsList\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/RelationsTree":{"id":"Tutorials/UserInterface/OBC/RelationsTree","title":"RelationsTree","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/RelationsTree\\")} >Go Full Screen","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/TopicsUI":{"id":"Tutorials/UserInterface/OBC/TopicsUI","title":"TopicsUI","description":"window.open(\\"https://thatopen.github.io/engine_ui-components/examples/TopicsList\\")} >Go Full Screen","sidebar":"tutorialSidebar"}}}}')}}]); \ No newline at end of file diff --git a/build/assets/js/375bbe41.0c17abbe.js b/build/assets/js/375bbe41.055de79d.js similarity index 69% rename from build/assets/js/375bbe41.0c17abbe.js rename to build/assets/js/375bbe41.055de79d.js index 6d43d37a9..5f7c2b552 100644 --- a/build/assets/js/375bbe41.0c17abbe.js +++ b/build/assets/js/375bbe41.055de79d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8706],{9428:(e,n,l)=>{l.r(n),l.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>a,frontMatter:()=>i,metadata:()=>d,toc:()=>o});var s=l(4848),t=l(8453);const i={},r="LengthMeasurement",d={id:"api/@thatopen/components-front/classes/LengthMeasurement",title:"LengthMeasurement",description:"A basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.",source:"@site/docs/api/@thatopen/components-front/classes/LengthMeasurement.md",sourceDirName:"api/@thatopen/components-front/classes",slug:"/api/@thatopen/components-front/classes/LengthMeasurement",permalink:"/api/@thatopen/components-front/classes/LengthMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcStreamer",permalink:"/api/@thatopen/components-front/classes/IfcStreamer"},next:{title:"Mark",permalink:"/api/@thatopen/components-front/classes/Mark"}},c={},o=[{value:"Extends",id:"extends",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"list",id:"list",level:3},{value:"onAfterUpdate",id:"onafterupdate",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"onBeforeUpdate",id:"onbeforeupdate",level:3},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of-2",level:4},{value:"snapDistance",id:"snapdistance",level:3},{value:"world?",id:"world",level:3},{value:"uuid",id:"uuid",level:3},{value:"Accessors",id:"accessors",level:2},{value:"color",id:"color",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"enabled",id:"enabled",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"visible",id:"visible",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Methods",id:"methods",level:2},{value:"cancelCreation()",id:"cancelcreation",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Implementation of",id:"implementation-of-3",level:4},{value:"create()",id:"create",level:3},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-4",level:4},{value:"Implementation of",id:"implementation-of-4",level:4},{value:"createOnPoints()",id:"createonpoints",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-5",level:4},{value:"delete()",id:"delete",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Implementation of",id:"implementation-of-5",level:4},{value:"deleteAll()",id:"deleteall",level:3},{value:"Returns",id:"returns-7",level:4},{value:"deleteMeasurement()",id:"deletemeasurement",level:3},{value:"Parameters",id:"parameters-5",level:4},{value:"Returns",id:"returns-8",level:4},{value:"Remarks",id:"remarks",level:4},{value:"dispose()",id:"dispose",level:3},{value:"Returns",id:"returns-9",level:4},{value:"Implementation of",id:"implementation-of-6",level:4},{value:"endCreation()",id:"endcreation",level:3},{value:"Returns",id:"returns-10",level:4},{value:"Implementation of",id:"implementation-of-7",level:4},{value:"update()",id:"update",level:3},{value:"Parameters",id:"parameters-6",level:4},{value:"Returns",id:"returns-11",level:4},{value:"Implementation of",id:"implementation-of-8",level:4}];function h(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"lengthmeasurement",children:"LengthMeasurement"}),"\n",(0,s.jsxs)(n.p,{children:["A basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. \ud83d\udcd5 ",(0,s.jsx)(n.a,{href:"https://docs.thatopen.com/Tutorials/Components/Front/LengthMeasurement",children:"Tutorial"}),". \ud83d\udcd8 ",(0,s.jsx)(n.a,{href:"https://docs.thatopen.com/api/@thatopen/components-front/classes/LengthMeasurement",children:"API"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"extends",children:"Extends"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"Component"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"implements",children:"Implements"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"Createable"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"Hideable"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"Disposable"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"Updateable"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(n.h3,{id:"list",children:"list"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"list"}),": ",(0,s.jsx)(n.a,{href:"/api/@thatopen/components-front/classes/SimpleDimensionLine",children:(0,s.jsx)(n.code,{children:"SimpleDimensionLine"})}),"[] = ",(0,s.jsx)(n.code,{children:"[]"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"A list of all the measurement elements created by this component."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"onafterupdate",children:"onAfterUpdate"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"readonly"})," ",(0,s.jsx)(n.strong,{children:"onAfterUpdate"}),": ",(0,s.jsx)(n.code,{children:"Event"})," <",(0,s.jsx)(n.a,{href:"/api/@thatopen/components-front/classes/LengthMeasurement",children:(0,s.jsx)(n.code,{children:"LengthMeasurement"})}),">"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Updateable.onAfterUpdate"}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Updateable.onAfterUpdate"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"onbeforeupdate",children:"onBeforeUpdate"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"readonly"})," ",(0,s.jsx)(n.strong,{children:"onBeforeUpdate"}),": ",(0,s.jsx)(n.code,{children:"Event"})," <",(0,s.jsx)(n.a,{href:"/api/@thatopen/components-front/classes/LengthMeasurement",children:(0,s.jsx)(n.code,{children:"LengthMeasurement"})}),">"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Updateable.onBeforeUpdate"}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-1",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Updateable.onBeforeUpdate"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"ondisposed",children:"onDisposed"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"readonly"})," ",(0,s.jsx)(n.strong,{children:"onDisposed"}),": ",(0,s.jsx)(n.code,{children:"Event"}),"<",(0,s.jsx)(n.code,{children:"unknown"}),">"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Disposable.onDisposed"}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-2",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Disposable.onDisposed"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"snapdistance",children:"snapDistance"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"snapDistance"}),": ",(0,s.jsx)(n.code,{children:"number"})," = ",(0,s.jsx)(n.code,{children:"0.25"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The minimum distance to force the dimension cursor to a vertex."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"world",children:"world?"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"optional"})," ",(0,s.jsx)(n.strong,{children:"world"}),": ",(0,s.jsx)(n.code,{children:"World"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The world in which the angle measurements are performed.\r\nThis property is optional and can be set to null if no world is available."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"uuid",children:"uuid"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"static"})," ",(0,s.jsx)(n.code,{children:"readonly"})," ",(0,s.jsx)(n.strong,{children:"uuid"}),": ",(0,s.jsx)(n.code,{children:'"2f9bcacf-18a9-4be6-a293-e898eae64ea1"'})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"A unique identifier for the component.\r\nThis UUID is used to register the component within the Components system."}),"\n",(0,s.jsx)(n.h2,{id:"accessors",children:"Accessors"}),"\n",(0,s.jsx)(n.h3,{id:"color",children:"color"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"get"})," ",(0,s.jsx)(n.strong,{children:"color"}),"(): ",(0,s.jsx)(n.code,{children:"Color"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Getter for the color of the dimension lines.\r\nReturns the color of the line material used for the dimension lines."}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"set"})," ",(0,s.jsx)(n.strong,{children:"color"}),"(",(0,s.jsx)(n.code,{children:"color"}),"): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Setter for the color of the dimension lines.\r\nSets the color of the line material used for the dimension lines."}),"\n",(0,s.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"color"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"Color"})})]})})]}),"\n",(0,s.jsx)(n.h4,{id:"returns",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"Color"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"enabled",children:"enabled"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"get"})," ",(0,s.jsx)(n.strong,{children:"enabled"}),"(): ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Component.enabled"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"set"})," ",(0,s.jsx)(n.strong,{children:"enabled"}),"(",(0,s.jsx)(n.code,{children:"value"}),"): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Component.enabled"}),"\n",(0,s.jsx)(n.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"value"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"boolean"})})]})})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"boolean"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"visible",children:"visible"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"get"})," ",(0,s.jsx)(n.strong,{children:"visible"}),"(): ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Hideable.visible"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"set"})," ",(0,s.jsx)(n.strong,{children:"visible"}),"(",(0,s.jsx)(n.code,{children:"value"}),"): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Hideable.visible"}),"\n",(0,s.jsx)(n.h4,{id:"parameters-2",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"value"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"boolean"})})]})})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-2",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"boolean"})}),"\n",(0,s.jsx)(n.h2,{id:"methods",children:"Methods"}),"\n",(0,s.jsx)(n.h3,{id:"cancelcreation",children:"cancelCreation()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"cancelCreation"}),"(): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Createable.cancelCreation"}),"\n",(0,s.jsx)(n.h4,{id:"returns-3",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-3",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Createable.cancelCreation"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"create",children:"create()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"create"}),"(",(0,s.jsx)(n.code,{children:"data"}),"?): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Starts or finishes drawing a new dimension line."}),"\n",(0,s.jsx)(n.h4,{id:"parameters-3",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsxs)(n.td,{style:{textAlign:"left"},children:[(0,s.jsx)(n.code,{children:"data"}),"?"]}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"any"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"forces the dimension to be drawn on a plane. Use this if you are drawing"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"dimensions in floor plan navigation."}),(0,s.jsx)(n.td,{style:{textAlign:"left"}}),(0,s.jsx)(n.td,{style:{textAlign:"left"}})]})]})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-4",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-4",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Createable.create"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"createonpoints",children:"createOnPoints()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"createOnPoints"}),"(",(0,s.jsx)(n.code,{children:"p1"}),", ",(0,s.jsx)(n.code,{children:"p2"}),"): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Creates a new dimension line between two given points."}),"\n",(0,s.jsx)(n.h4,{id:"parameters-4",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"p1"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"Vector3"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"The start point of the dimension line."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"p2"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"Vector3"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"The end point of the dimension line."})]})]})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-5",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"delete",children:"delete()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"delete"}),"(): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Createable.delete"}),"\n",(0,s.jsx)(n.h4,{id:"returns-6",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-5",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Createable.delete"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"deleteall",children:"deleteAll()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"deleteAll"}),"(): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Deletes all the dimensions that have been previously created."}),"\n",(0,s.jsx)(n.h4,{id:"returns-7",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"deletemeasurement",children:"deleteMeasurement()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"deleteMeasurement"}),"(",(0,s.jsx)(n.code,{children:"measurement"}),"): ",(0,s.jsx)(n.code,{children:"Promise"}),"<",(0,s.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Deletes a specific measurement from the list."}),"\n",(0,s.jsx)(n.h4,{id:"parameters-5",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"measurement"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.a,{href:"/api/@thatopen/components-front/classes/SimpleDimensionLine",children:(0,s.jsx)(n.code,{children:"SimpleDimensionLine"})})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"The measurement to be deleted."})]})})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-8",children:"Returns"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Promise"}),"<",(0,s.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,s.jsx)(n.h4,{id:"remarks",children:"Remarks"}),"\n",(0,s.jsx)(n.p,{children:"If the measurement does not exist in the list, no action is taken."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"dispose",children:"dispose()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"dispose"}),"(): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Disposable.dispose"}),"\n",(0,s.jsx)(n.h4,{id:"returns-9",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-6",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Disposable.dispose"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"endcreation",children:"endCreation()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"endCreation"}),"(): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Createable.endCreation"}),"\n",(0,s.jsx)(n.h4,{id:"returns-10",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-7",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Createable.endCreation"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"update",children:"update()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"update"}),"(",(0,s.jsx)(n.code,{children:"_delta"}),"): ",(0,s.jsx)(n.code,{children:"Promise"}),"<",(0,s.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Updateable.update"}),"\n",(0,s.jsx)(n.h4,{id:"parameters-6",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"_delta"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"number"})})]})})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-11",children:"Returns"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Promise"}),"<",(0,s.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-8",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Updateable.update"})})]})}function a(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},8453:(e,n,l)=>{l.d(n,{R:()=>r,x:()=>d});var s=l(6540);const t={},i=s.createContext(t);function r(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8706],{9428:(e,n,l)=>{l.r(n),l.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>a,frontMatter:()=>i,metadata:()=>d,toc:()=>o});var s=l(4848),t=l(8453);const i={},r="LengthMeasurement",d={id:"api/@thatopen/components-front/classes/LengthMeasurement",title:"LengthMeasurement",description:"A basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. \ud83d\udcd5 Tutorial. \ud83d\udcd8 API.",source:"@site/docs/api/@thatopen/components-front/classes/LengthMeasurement.md",sourceDirName:"api/@thatopen/components-front/classes",slug:"/api/@thatopen/components-front/classes/LengthMeasurement",permalink:"/api/@thatopen/components-front/classes/LengthMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcStreamer",permalink:"/api/@thatopen/components-front/classes/IfcStreamer"},next:{title:"Mark",permalink:"/api/@thatopen/components-front/classes/Mark"}},c={},o=[{value:"Extends",id:"extends",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"list",id:"list",level:3},{value:"onAfterUpdate",id:"onafterupdate",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"onBeforeUpdate",id:"onbeforeupdate",level:3},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of-2",level:4},{value:"snapDistance",id:"snapdistance",level:3},{value:"world?",id:"world",level:3},{value:"uuid",id:"uuid",level:3},{value:"Accessors",id:"accessors",level:2},{value:"color",id:"color",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"enabled",id:"enabled",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"visible",id:"visible",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Methods",id:"methods",level:2},{value:"cancelCreation()",id:"cancelcreation",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Implementation of",id:"implementation-of-3",level:4},{value:"create()",id:"create",level:3},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-4",level:4},{value:"Implementation of",id:"implementation-of-4",level:4},{value:"createOnPoints()",id:"createonpoints",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-5",level:4},{value:"delete()",id:"delete",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Implementation of",id:"implementation-of-5",level:4},{value:"deleteAll()",id:"deleteall",level:3},{value:"Returns",id:"returns-7",level:4},{value:"deleteMeasurement()",id:"deletemeasurement",level:3},{value:"Parameters",id:"parameters-5",level:4},{value:"Returns",id:"returns-8",level:4},{value:"Remarks",id:"remarks",level:4},{value:"dispose()",id:"dispose",level:3},{value:"Returns",id:"returns-9",level:4},{value:"Implementation of",id:"implementation-of-6",level:4},{value:"endCreation()",id:"endcreation",level:3},{value:"Returns",id:"returns-10",level:4},{value:"Implementation of",id:"implementation-of-7",level:4},{value:"update()",id:"update",level:3},{value:"Parameters",id:"parameters-6",level:4},{value:"Returns",id:"returns-11",level:4},{value:"Implementation of",id:"implementation-of-8",level:4}];function h(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"lengthmeasurement",children:"LengthMeasurement"}),"\n",(0,s.jsxs)(n.p,{children:["A basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. \ud83d\udcd5 ",(0,s.jsx)(n.a,{href:"https://docs.thatopen.com/Tutorials/Components/Front/LengthMeasurement",children:"Tutorial"}),". \ud83d\udcd8 ",(0,s.jsx)(n.a,{href:"https://docs.thatopen.com/api/@thatopen/components-front/classes/LengthMeasurement",children:"API"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"extends",children:"Extends"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"Component"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"implements",children:"Implements"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"Createable"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"Hideable"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"Disposable"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"Updateable"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(n.h3,{id:"list",children:"list"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"list"}),": ",(0,s.jsx)(n.a,{href:"/api/@thatopen/components-front/classes/SimpleDimensionLine",children:(0,s.jsx)(n.code,{children:"SimpleDimensionLine"})}),"[] = ",(0,s.jsx)(n.code,{children:"[]"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"A list of all the measurement elements created by this component."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"onafterupdate",children:"onAfterUpdate"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"readonly"})," ",(0,s.jsx)(n.strong,{children:"onAfterUpdate"}),": ",(0,s.jsx)(n.code,{children:"Event"})," <",(0,s.jsx)(n.a,{href:"/api/@thatopen/components-front/classes/LengthMeasurement",children:(0,s.jsx)(n.code,{children:"LengthMeasurement"})}),">"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Updateable.onAfterUpdate"}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Updateable.onAfterUpdate"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"onbeforeupdate",children:"onBeforeUpdate"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"readonly"})," ",(0,s.jsx)(n.strong,{children:"onBeforeUpdate"}),": ",(0,s.jsx)(n.code,{children:"Event"})," <",(0,s.jsx)(n.a,{href:"/api/@thatopen/components-front/classes/LengthMeasurement",children:(0,s.jsx)(n.code,{children:"LengthMeasurement"})}),">"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Updateable.onBeforeUpdate"}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-1",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Updateable.onBeforeUpdate"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"ondisposed",children:"onDisposed"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"readonly"})," ",(0,s.jsx)(n.strong,{children:"onDisposed"}),": ",(0,s.jsx)(n.code,{children:"Event"}),"<",(0,s.jsx)(n.code,{children:"unknown"}),">"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Disposable.onDisposed"}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-2",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Disposable.onDisposed"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"snapdistance",children:"snapDistance"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"snapDistance"}),": ",(0,s.jsx)(n.code,{children:"number"})," = ",(0,s.jsx)(n.code,{children:"0.25"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The minimum distance to force the dimension cursor to a vertex."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"world",children:"world?"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"optional"})," ",(0,s.jsx)(n.strong,{children:"world"}),": ",(0,s.jsx)(n.code,{children:"World"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The world in which the angle measurements are performed.\r\nThis property is optional and can be set to null if no world is available."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"uuid",children:"uuid"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"static"})," ",(0,s.jsx)(n.code,{children:"readonly"})," ",(0,s.jsx)(n.strong,{children:"uuid"}),": ",(0,s.jsx)(n.code,{children:'"2f9bcacf-18a9-4be6-a293-e898eae64ea1"'})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"A unique identifier for the component.\r\nThis UUID is used to register the component within the Components system."}),"\n",(0,s.jsx)(n.h2,{id:"accessors",children:"Accessors"}),"\n",(0,s.jsx)(n.h3,{id:"color",children:"color"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"get"})," ",(0,s.jsx)(n.strong,{children:"color"}),"(): ",(0,s.jsx)(n.code,{children:"Color"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Getter for the color of the dimension lines.\r\nReturns the color of the line material used for the dimension lines."}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"set"})," ",(0,s.jsx)(n.strong,{children:"color"}),"(",(0,s.jsx)(n.code,{children:"color"}),"): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Setter for the color of the dimension lines.\r\nSets the color of the line material used for the dimension lines."}),"\n",(0,s.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"color"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"Color"})})]})})]}),"\n",(0,s.jsx)(n.h4,{id:"returns",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"Color"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"enabled",children:"enabled"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"get"})," ",(0,s.jsx)(n.strong,{children:"enabled"}),"(): ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Component.enabled"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"set"})," ",(0,s.jsx)(n.strong,{children:"enabled"}),"(",(0,s.jsx)(n.code,{children:"value"}),"): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Component.enabled"}),"\n",(0,s.jsx)(n.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"value"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"boolean"})})]})})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"boolean"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"visible",children:"visible"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"get"})," ",(0,s.jsx)(n.strong,{children:"visible"}),"(): ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Hideable.visible"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"set"})," ",(0,s.jsx)(n.strong,{children:"visible"}),"(",(0,s.jsx)(n.code,{children:"value"}),"): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Hideable.visible"}),"\n",(0,s.jsx)(n.h4,{id:"parameters-2",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"value"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"boolean"})})]})})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-2",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"boolean"})}),"\n",(0,s.jsx)(n.h2,{id:"methods",children:"Methods"}),"\n",(0,s.jsx)(n.h3,{id:"cancelcreation",children:"cancelCreation()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"cancelCreation"}),"(): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Createable.cancelCreation"}),"\n",(0,s.jsx)(n.h4,{id:"returns-3",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-3",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Createable.cancelCreation"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"create",children:"create()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"create"}),"(",(0,s.jsx)(n.code,{children:"data"}),"?): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Starts or finishes drawing a new dimension line."}),"\n",(0,s.jsx)(n.h4,{id:"parameters-3",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsxs)(n.td,{style:{textAlign:"left"},children:[(0,s.jsx)(n.code,{children:"data"}),"?"]}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"any"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"forces the dimension to be drawn on a plane. Use this if you are drawing"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"dimensions in floor plan navigation."}),(0,s.jsx)(n.td,{style:{textAlign:"left"}}),(0,s.jsx)(n.td,{style:{textAlign:"left"}})]})]})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-4",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-4",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Createable.create"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"createonpoints",children:"createOnPoints()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"createOnPoints"}),"(",(0,s.jsx)(n.code,{children:"p1"}),", ",(0,s.jsx)(n.code,{children:"p2"}),"): ",(0,s.jsx)(n.a,{href:"/api/@thatopen/components-front/classes/SimpleDimensionLine",children:(0,s.jsx)(n.code,{children:"SimpleDimensionLine"})})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Creates a new dimension line between two given points."}),"\n",(0,s.jsx)(n.h4,{id:"parameters-4",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"p1"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"Vector3"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"The start point of the dimension line."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"p2"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"Vector3"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"The end point of the dimension line."})]})]})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-5",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"/api/@thatopen/components-front/classes/SimpleDimensionLine",children:(0,s.jsx)(n.code,{children:"SimpleDimensionLine"})})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"delete",children:"delete()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"delete"}),"(): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Createable.delete"}),"\n",(0,s.jsx)(n.h4,{id:"returns-6",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-5",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Createable.delete"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"deleteall",children:"deleteAll()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"deleteAll"}),"(): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Deletes all the dimensions that have been previously created."}),"\n",(0,s.jsx)(n.h4,{id:"returns-7",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"deletemeasurement",children:"deleteMeasurement()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"deleteMeasurement"}),"(",(0,s.jsx)(n.code,{children:"measurement"}),"): ",(0,s.jsx)(n.code,{children:"Promise"}),"<",(0,s.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Deletes a specific measurement from the list."}),"\n",(0,s.jsx)(n.h4,{id:"parameters-5",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"measurement"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.a,{href:"/api/@thatopen/components-front/classes/SimpleDimensionLine",children:(0,s.jsx)(n.code,{children:"SimpleDimensionLine"})})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:"The measurement to be deleted."})]})})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-8",children:"Returns"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Promise"}),"<",(0,s.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,s.jsx)(n.h4,{id:"remarks",children:"Remarks"}),"\n",(0,s.jsx)(n.p,{children:"If the measurement does not exist in the list, no action is taken."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"dispose",children:"dispose()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"dispose"}),"(): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Disposable.dispose"}),"\n",(0,s.jsx)(n.h4,{id:"returns-9",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-6",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Disposable.dispose"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"endcreation",children:"endCreation()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"endCreation"}),"(): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Createable.endCreation"}),"\n",(0,s.jsx)(n.h4,{id:"returns-10",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-7",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Createable.endCreation"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"update",children:"update()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"update"}),"(",(0,s.jsx)(n.code,{children:"_delta"}),"): ",(0,s.jsx)(n.code,{children:"Promise"}),"<",(0,s.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"OBC.Updateable.update"}),"\n",(0,s.jsx)(n.h4,{id:"parameters-6",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"_delta"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"number"})})]})})]}),"\n",(0,s.jsx)(n.h4,{id:"returns-11",children:"Returns"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Promise"}),"<",(0,s.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,s.jsx)(n.h4,{id:"implementation-of-8",children:"Implementation of"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"OBC.Updateable.update"})})]})}function a(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},8453:(e,n,l)=>{l.d(n,{R:()=>r,x:()=>d});var s=l(6540);const t={},i=s.createContext(t);function r(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/37b2843d.a0e8bd60.js b/build/assets/js/37b2843d.a0e8bd60.js deleted file mode 100644 index c5f20b9da..000000000 --- a/build/assets/js/37b2843d.a0e8bd60.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[4100],{1861:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>o,contentTitle:()=>c,default:()=>p,frontMatter:()=>r,metadata:()=>i,toc:()=>l});var s=n(4848),a=n(8453);const r={},c="IfcSchema",i={id:"api/@thatopen/fragments/type-aliases/IfcSchema",title:"IfcSchema",description:'IfcSchema: "IFC2X3" \\| "IFC4" \\| "IFC4X3"',source:"@site/docs/api/@thatopen/fragments/type-aliases/IfcSchema.md",sourceDirName:"api/@thatopen/fragments/type-aliases",slug:"/api/@thatopen/fragments/type-aliases/IfcSchema",permalink:"/api/@thatopen/fragments/type-aliases/IfcSchema",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"AlignmentType",permalink:"/api/@thatopen/fragments/type-aliases/AlignmentType"},next:{title:"StreamedGeometries",permalink:"/api/@thatopen/fragments/type-aliases/StreamedGeometries"}},o={},l=[{value:"Remarks",id:"remarks",level:2}];function h(e){const t={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"ifcschema",children:"IfcSchema"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"IfcSchema"}),": ",(0,s.jsx)(t.code,{children:'"IFC2X3"'})," | ",(0,s.jsx)(t.code,{children:'"IFC4"'})," | ",(0,s.jsx)(t.code,{children:'"IFC4X3"'})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Represents the version of the IFC schema used in the model."}),"\n",(0,s.jsx)(t.h2,{id:"remarks",children:"Remarks"}),"\n",(0,s.jsx)(t.p,{children:"The supported IFC schemas are:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"IFC2X3"}),"\n",(0,s.jsx)(t.li,{children:"IFC4"}),"\n",(0,s.jsx)(t.li,{children:"IFC4X3"}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>i});var s=n(6540);const a={},r=s.createContext(a);function c(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:c(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/3eac639e.95b704cc.js b/build/assets/js/3eac639e.95b704cc.js deleted file mode 100644 index 8f089b1f7..000000000 --- a/build/assets/js/3eac639e.95b704cc.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[6280],{9268:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var s=t(4848),i=t(8453);const a={},o=void 0,r={id:"Tutorials/UserInterface/OBC/ClassificationsTree",title:"ClassificationsTree",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/ClassificationsTree")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/ClassificationsTree.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/ClassificationsTree",permalink:"/Tutorials/UserInterface/OBC/ClassificationsTree",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Searching",permalink:"/Tutorials/UserInterface/Core/Table/Searching"},next:{title:"ElementProperties",permalink:"/Tutorials/UserInterface/OBC/ElementProperties"}},c={},l=[{value:"Displaying elements grouping \ud83d\udce6",id:"displaying-elements-grouping-",level:2},{value:"Creating the classifications tree",id:"creating-the-classifications-tree",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{style:{position:"relative"},children:[(0,s.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/ClassificationsTree"}),(0,s.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/ClassificationsTree"),children:"Go Full Screen"})]}),"\n",(0,s.jsx)(n.admonition,{title:"Source",type:"info",children:(0,s.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,s.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/ClassificationsTree/example.ts",children:"here"}),"."]})}),"\n",(0,s.jsx)(n.h2,{id:"displaying-elements-grouping-",children:"Displaying elements grouping \ud83d\udce6"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["One of the greatest things we can make using BIM models is to group elements based on their properties. This has many use cases! Like grouping elements to check their collisions \ud83d\udca5, grouping elements based on their construction activities \ud83d\udd28, or grouping fininshed elements during the construction phase \u2705.\nOther than grouping the elements, the next most important thing is to show them to your user in an easy way... well, here is where it comes the ",(0,s.jsx)(n.code,{children:"ClassificationsTree"})," functional component!"]}),"\n",(0,s.jsx)(n.h3,{id:"creating-the-classifications-tree",children:"Creating the classifications tree"}),"\n",(0,s.jsx)(n.p,{children:"First things first, let's create an instance of the functional component, like this:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const [classificationsTree, updateClassificationsTree] =\n CUI.tables.classificationTree({\n components,\n classifications: [],\n });\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Now that we have the classifications tree created, let's tell the ",(0,s.jsx)(n.code,{children:"FragmentsManager"})," that each time a model is loaded it needs to classify the model based on some conditions, but more importantly is that right after those classifications are made it needs to update the classifications tree!"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const classifier = components.get(OBC.Classifier);\n\nfragmentsManager.onFragmentsLoaded.add(async (model) => {\n // This creates a classification system named "entities"\n classifier.byEntity(model);\n\n // This creates a classification system named "predefinedTypes"\n await classifier.byPredefinedType(model);\n\n // This classifications in the state of the classifications tree.\n // Is an array with the classification systems to be shown.\n // You can pass the system name directly, or an object with system and label keys.\n // The system key is the name in the classifier, and the label is how you want it to be shown in the table.\n const classifications = [\n { system: "entities", label: "Entities" },\n { system: "predefinedTypes", label: "Predefined Types" },\n ];\n\n updateClassificationsTree({ classifications });\n});\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"classifications"})," value is just an array of the classification systems from the Classifier that you want to display in the user interface, where ",(0,s.jsx)(n.code,{children:"system"})," is the name in ",(0,s.jsx)(n.code,{children:"classifier.list"})," and ",(0,s.jsx)(n.code,{children:"label"})," is the name you want to use to display in the UI. Needless to say, the classifications need to be computed before they can be used on the tree.\nGreat! As we already told the UI when it needs to update, let's add the classifications tree to the HTML page. For it, let's create simple BIM panel component where we include the tree and also a pre-made IFC load button \ud83d\udc47"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n const [loadIfcBtn] = CUI.buttons.loadIfc({ components });\n\n return BUI.html`\n \n \n ${loadIfcBtn}\n \n \n ${classificationsTree}\n \n \n `;\n});\n'})}),"\n",(0,s.jsx)(n.p,{children:"Finally, let's append the BIM Panel to the page to see the classifications tree working \ud83d\ude09"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const app = document.createElement("bim-grid");\napp.layouts = {\n main: {\n template: `\n "panel viewport"\n / 23rem 1fr\n `,\n elements: { panel, viewport },\n },\n};\n\napp.layout = "main";\ndocument.body.append(app);\n'})}),"\n",(0,s.jsx)(n.p,{children:"Congratulations! You've now a ready to go user interface that let's you show your model classifications. \ud83e\udd73"})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>r});var s=t(6540);const i={},a=s.createContext(i);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/3eac639e.d4f2b88e.js b/build/assets/js/3eac639e.d4f2b88e.js new file mode 100644 index 000000000..257ee038f --- /dev/null +++ b/build/assets/js/3eac639e.d4f2b88e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[6280],{9268:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var s=t(4848),i=t(8453);const o={},a=void 0,r={id:"Tutorials/UserInterface/OBC/ClassificationsTree",title:"ClassificationsTree",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/ClassificationsTree")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/ClassificationsTree.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/ClassificationsTree",permalink:"/Tutorials/UserInterface/OBC/ClassificationsTree",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Searching",permalink:"/Tutorials/UserInterface/Core/Table/Searching"},next:{title:"ElementProperties",permalink:"/Tutorials/UserInterface/OBC/ElementProperties"}},l={},c=[{value:"Displaying elements grouping \ud83d\udce6",id:"displaying-elements-grouping-",level:2},{value:"\ud83d\udd96 Importing our Libraries",id:"-importing-our-libraries",level:3},{value:"\ud83d\udccb Initializing the UI",id:"-initializing-the-ui",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"Managing your loaded models \ud83c\udfe2",id:"managing-your-loaded-models-",level:2},{value:"Setting up the components",id:"setting-up-the-components",level:3},{value:"Creating the classifications tree",id:"creating-the-classifications-tree",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{style:{position:"relative"},children:[(0,s.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/ClassificationsTree"}),(0,s.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/ClassificationsTree"),children:"Go Full Screen"})]}),"\n",(0,s.jsx)(n.admonition,{title:"Source",type:"info",children:(0,s.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,s.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/ClassificationsTree/example.ts",children:"here"}),"."]})}),"\n",(0,s.jsx)(n.h2,{id:"displaying-elements-grouping-",children:"Displaying elements grouping \ud83d\udce6"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["One of the greatest things we can make using BIM models is to group elements based on their properties. This has many use cases! Like grouping elements to check their collisions \ud83d\udca5, grouping elements based on their construction activities \ud83d\udd28, or grouping fininshed elements during the construction phase \u2705.\nOther than grouping the elements, the next most important thing is to show them to your user in an easy way... well, here is where it comes the ",(0,s.jsx)(n.code,{children:"ClassificationsTree"})," functional component!"]}),"\n",(0,s.jsx)(n.h3,{id:"-importing-our-libraries",children:"\ud83d\udd96 Importing our Libraries"}),"\n",(0,s.jsx)(n.p,{children:"In this tutorial, we will import:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"@thatopen/components to set up the barebone of our app."}),"\n",(0,s.jsx)(n.li,{children:"@thatopen/ui to add some simple and cool UI menus."}),"\n",(0,s.jsx)(n.li,{children:"@thatopen/ui-obc to add some cool pre-made UI menus for components."}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'import * as OBC from "@thatopen/components";\nimport * as BUI from "@thatopen/ui";\n// You have to import from "@thatopen/ui-obc"\nimport * as BUIC from "../..";\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-initializing-the-ui",children:"\ud83d\udccb Initializing the UI"}),"\n",(0,s.jsx)(n.p,{children:"As always, let's first initialize the UI library. Remember you only have to do it once in your entire app."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const components = new OBC.Components();\n\nconst viewport = document.createElement("bim-viewport");\nviewport.name = "viewer";\n\nconst worlds = components.get(OBC.Worlds);\nconst world = worlds.create();\n\nconst sceneComponent = new OBC.SimpleScene(components);\nsceneComponent.setup();\nworld.scene = sceneComponent;\n\nconst rendererComponent = new OBC.SimpleRenderer(components, viewport);\nworld.renderer = rendererComponent;\n\nconst cameraComponent = new OBC.SimpleCamera(components);\nworld.camera = cameraComponent;\n\nviewport.addEventListener("resize", () => {\n rendererComponent.resize();\n cameraComponent.updateAspect();\n});\n\nconst viewerGrids = components.get(OBC.Grids);\nviewerGrids.create(world);\n\ncomponents.init();\n'})}),"\n",(0,s.jsx)(n.h2,{id:"managing-your-loaded-models-",children:"Managing your loaded models \ud83c\udfe2"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"What else can we say? The task is really simple: we need to see a list of the loaded models in the app. Let's get into it!"}),"\n",(0,s.jsx)(n.h3,{id:"setting-up-the-components",children:"Setting up the components"}),"\n",(0,s.jsxs)(n.p,{children:["First of all, we're going to get the ",(0,s.jsx)(n.code,{children:"FragmentIfcLoader"})," from an existing components instance:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\n"})}),"\n",(0,s.jsxs)(n.p,{children:["The step above is super important as none of the existing functional components setup any tool, they just get it as they are! So, if we don't setup the ",(0,s.jsx)(n.code,{children:"FragmentIfcLoader"})," then the wasm path is not going to be defined and an error will arise \ud83e\udd13. Just after we have setup the loader, let's then configure the ",(0,s.jsx)(n.code,{children:"FragmentManager"})," so any time a model is loaded it gets added to some world scene created before:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const fragmentsManager = components.get(OBC.FragmentsManager);\n"})}),"\n",(0,s.jsx)(n.p,{children:"If you want to get the resulted model every time a new model is loaded, you can subscribe to the following event anywhere in your app:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"fragmentsManager.onFragmentsLoaded.add((model) => {\n if (world.scene) world.scene.three.add(model);\n});\n"})}),"\n",(0,s.jsx)(n.h3,{id:"creating-the-classifications-tree",children:"Creating the classifications tree"}),"\n",(0,s.jsx)(n.p,{children:"First things first, let's create an instance of the functional component, like this:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const [classificationsTree, updateClassificationsTree] =\n BUIC.tables.classificationTree({\n components,\n classifications: [],\n });\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Now that we have the classifications tree created, let's tell the ",(0,s.jsx)(n.code,{children:"FragmentsManager"})," that each time a model is loaded it needs to classify the model based on some conditions, but more importantly is that right after those classifications are made it needs to update the classifications tree!"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const classifier = components.get(OBC.Classifier);\n\nfragmentsManager.onFragmentsLoaded.add(async (model) => {\n // This creates a classification system named "entities"\n classifier.byEntity(model);\n\n // This creates a classification system named "predefinedTypes"\n await classifier.byPredefinedType(model);\n\n // This classifications in the state of the classifications tree.\n // Is an array with the classification systems to be shown.\n // You can pass the system name directly, or an object with system and label keys.\n // The system key is the name in the classifier, and the label is how you want it to be shown in the table.\n const classifications = [\n { system: "entities", label: "Entities" },\n { system: "predefinedTypes", label: "Predefined Types" },\n ];\n\n updateClassificationsTree({ classifications });\n});\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"classifications"})," value is just an array of the classification systems from the Classifier that you want to display in the user interface, where ",(0,s.jsx)(n.code,{children:"system"})," is the name in ",(0,s.jsx)(n.code,{children:"classifier.list"})," and ",(0,s.jsx)(n.code,{children:"label"})," is the name you want to use to display in the UI. Needless to say, the classifications need to be computed before they can be used on the tree.\nGreat! As we already told the UI when it needs to update, let's add the classifications tree to the HTML page. For it, let's create simple BIM panel component where we include the tree and also a pre-made IFC load button \ud83d\udc47"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n const [loadIfcBtn] = BUIC.buttons.loadIfc({ components });\n\n return BUI.html`\n \n \n ${loadIfcBtn}\n \n \n ${classificationsTree}\n \n \n `;\n});\n'})}),"\n",(0,s.jsx)(n.p,{children:"Finally, let's append the BIM Panel to the page to see the classifications tree working \ud83d\ude09"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const app = document.createElement("bim-grid");\napp.layouts = {\n main: {\n template: `\n "panel viewport"\n / 23rem 1fr\n `,\n elements: { panel, viewport },\n },\n};\n\napp.layout = "main";\ndocument.body.append(app);\n'})}),"\n",(0,s.jsx)(n.p,{children:"Congratulations! You've now a ready to go user interface that let's you show your model classifications. \ud83e\udd73"})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>r});var s=t(6540);const i={},o=s.createContext(i);function a(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/4b44f7a2.8ef622bf.js b/build/assets/js/4b44f7a2.8ef622bf.js deleted file mode 100644 index 41f4287be..000000000 --- a/build/assets/js/4b44f7a2.8ef622bf.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8081],{2548:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var o=t(4848),s=t(8453);const r={},i=void 0,a={id:"Tutorials/Components/Front/VolumeMeasurement",title:"VolumeMeasurement",description:'window.open("https://thatopen.github.io/engine_components/examples/VolumeMeasurement")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Front/VolumeMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/VolumeMeasurement",permalink:"/Tutorials/Components/Front/VolumeMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ShadowDropper",permalink:"/Tutorials/Components/Front/ShadowDropper"},next:{title:"UserInterface",permalink:"/Tutorials/UserInterface/"}},l={},c=[{value:"\ud83d\udcd0 Measuring volumes",id:"-measuring-volumes",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddf3 Loading a BIM model",id:"-loading-a-bim-model",level:3},{value:"\ud83d\udee0\ufe0f Getting the volume measurements",id:"\ufe0f-getting-the-volume-measurements",level:3},{value:"\ud83d\udd26 Getting the highlighter",id:"-getting-the-highlighter",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/VolumeMeasurement"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/VolumeMeasurement"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/VolumeMeasurement/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"-measuring-volumes",children:"\ud83d\udcd0 Measuring volumes"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an volume measurement tool to your end users.\nWe will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components-front"})," to use some frontend-oriented components."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as OBC from "@thatopen/components";\nimport * as OBCF from "@thatopen/components-front";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBCF.PostproductionRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.PostproductionRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-loading-a-bim-model",children:"\ud83e\uddf3 Loading a BIM model"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file."}),"\n",(0,o.jsx)(n.admonition,{title:"Fragments?",type:"tip",children:(0,o.jsx)(n.p,{children:"If you are not familiar with fragments, check out the IfcLoader tutorial!"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const fragments = new OBC.FragmentsManager(components);\nconst file = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.frag",\n);\nconst data = await file.arrayBuffer();\nconst buffer = new Uint8Array(data);\nconst model = fragments.load(buffer);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-getting-the-volume-measurements",children:"\ud83d\udee0\ufe0f Getting the volume measurements"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"First, let's get an instance of the volume measurement component and initialize it."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const dimensions = components.get(OBCF.VolumeMeasurement);\ndimensions.world = world;\ndimensions.enabled = true;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-getting-the-highlighter",children:"\ud83d\udd26 Getting the highlighter"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now, let's get an instance of the highlighter component and initialize it to be able to highlight the computed volume."}),"\n",(0,o.jsx)(n.admonition,{title:"Highlighter?",type:"tip",children:(0,o.jsx)(n.p,{children:"If you are not familiar with the highlighter component, check out the highlighter tutorial!"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const highlighter = components.get(OBCF.Highlighter);\nhighlighter.setup({ world });\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we'll simply take the computed volume and log it in the console. Also, when the highlighter is cleared, we'll also clear the volume dimension."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"highlighter.events.select.onHighlight.add((event) => {\n const volume = dimensions.getVolumeFromFragments(event);\n console.log(volume);\n});\n\nhighlighter.events.select.onClear.add(() => {\n dimensions.clear();\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We'll use the ",(0,o.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"That's it! You have created an app that can create and delete volume dimensions on any 3D object. Congratulations!"})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var o=t(6540);const s={},r=o.createContext(s);function i(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/4b44f7a2.eaf23bfd.js b/build/assets/js/4b44f7a2.eaf23bfd.js new file mode 100644 index 000000000..2ea6f0cb1 --- /dev/null +++ b/build/assets/js/4b44f7a2.eaf23bfd.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8081],{2548:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>m,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var o=t(4848),s=t(8453);const i={},l=void 0,a={id:"Tutorials/Components/Front/VolumeMeasurement",title:"VolumeMeasurement",description:'window.open("https://thatopen.github.io/engine_components/examples/VolumeMeasurement")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Front/VolumeMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/VolumeMeasurement",permalink:"/Tutorials/Components/Front/VolumeMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ShadowDropper",permalink:"/Tutorials/Components/Front/ShadowDropper"},next:{title:"UserInterface",permalink:"/Tutorials/UserInterface/"}},r={},c=[{value:"\ud83d\udcd0 Measuring volumes",id:"-measuring-volumes",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddf3 Loading a BIM model",id:"-loading-a-bim-model",level:3},{value:"\ud83d\udee0\ufe0f Getting the volume measurements",id:"\ufe0f-getting-the-volume-measurements",level:3},{value:"\ud83d\udd26 Getting the highlighter",id:"-getting-the-highlighter",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/VolumeMeasurement"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/VolumeMeasurement"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/VolumeMeasurement/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"-measuring-volumes",children:"\ud83d\udcd0 Measuring volumes"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an volume measurement tool to your end users.\nWe will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components-front"})," to use some frontend-oriented components."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as OBC from "@thatopen/components";\nimport * as BUI from "@thatopen/ui";\nimport * as OBCF from "@thatopen/components-front";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBCF.PostproductionRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.PostproductionRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-loading-a-bim-model",children:"\ud83e\uddf3 Loading a BIM model"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file."}),"\n",(0,o.jsx)(n.admonition,{title:"Fragments?",type:"tip",children:(0,o.jsx)(n.p,{children:"If you are not familiar with fragments, check out the IfcLoader tutorial!"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const fragments = new OBC.FragmentsManager(components);\nconst file = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.frag",\n);\nconst data = await file.arrayBuffer();\nconst buffer = new Uint8Array(data);\nconst model = fragments.load(buffer);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-getting-the-volume-measurements",children:"\ud83d\udee0\ufe0f Getting the volume measurements"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"First, let's get an instance of the volume measurement component and initialize it."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const dimensions = components.get(OBCF.VolumeMeasurement);\ndimensions.world = world;\ndimensions.enabled = true;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-getting-the-highlighter",children:"\ud83d\udd26 Getting the highlighter"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now, let's get an instance of the highlighter component and initialize it to be able to highlight the computed volume."}),"\n",(0,o.jsx)(n.admonition,{title:"Highlighter?",type:"tip",children:(0,o.jsx)(n.p,{children:"If you are not familiar with the highlighter component, check out the highlighter tutorial!"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const highlighter = components.get(OBCF.Highlighter);\nhighlighter.setup({ world });\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we'll simply take the computed volume and log it in the console. Also, when the highlighter is cleared, we'll also clear the volume dimension."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"highlighter.events.select.onHighlight.add((event) => {\n const volume = dimensions.getVolumeFromFragments(event);\n console.log(volume);\n});\n\nhighlighter.events.select.onClear.add(() => {\n dimensions.clear();\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We'll use the ",(0,o.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We will use the ",(0,o.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,o.jsx)(n.code,{children:"init"})," method of the ",(0,o.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we will add some UI to have some control over the dimensions we create. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n Create dimension: Left click \n Delete dimension: Left click el \n \n \n \n \n \n \n\n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,o.jsx)(n.p,{children:"And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const button = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n});\n\ndocument.body.append(button);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"That's it! You have created an app that can create and delete volume dimensions on any 3D object. Congratulations!"})]})}function m(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>l,x:()=>a});var o=t(6540);const s={},i=o.createContext(s);function l(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/5a57a3ff.1ea9b90f.js b/build/assets/js/5a57a3ff.1ea9b90f.js deleted file mode 100644 index 7aaaf7e6e..000000000 --- a/build/assets/js/5a57a3ff.1ea9b90f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[4905],{589:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>o,frontMatter:()=>i,metadata:()=>d,toc:()=>h});var s=n(4848),r=n(8453);const i={},l="Fragment",d={id:"api/@thatopen/fragments/classes/Fragment",title:"Fragment",description:"Class representing a fragment of a 3D model. Fragments are just a simple wrapper around THREE.InstancedMesh. Each fragment can contain Items (identified by ItemID) which are mapped to one or many instances inside this THREE.InstancedMesh. Fragments also implement features like instance buffer resizing and hiding out of the box.",source:"@site/docs/api/@thatopen/fragments/classes/Fragment.md",sourceDirName:"api/@thatopen/fragments/classes",slug:"/api/@thatopen/fragments/classes/Fragment",permalink:"/api/@thatopen/fragments/classes/Fragment",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"CurveMesh\\",permalink:"/api/@thatopen/fragments/classes/CurveMesh"},next:{title:"FragmentMesh",permalink:"/api/@thatopen/fragments/classes/FragmentMesh"}},c={},h=[{value:"Constructors",id:"constructors",level:2},{value:"new Fragment()",id:"new-fragment",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Properties",id:"properties",level:2},{value:"capacity",id:"capacity",level:3},{value:"capacityOffset",id:"capacityoffset",level:3},{value:"group?",id:"group",level:3},{value:"hiddenItems",id:"hiddenitems",level:3},{value:"id",id:"id",level:3},{value:"ids",id:"ids",level:3},{value:"instanceToItem",id:"instancetoitem",level:3},{value:"itemToInstances",id:"itemtoinstances",level:3},{value:"mesh",id:"mesh",level:3},{value:"Accessors",id:"accessors",level:2},{value:"uniqueVertices",id:"uniquevertices",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Methods",id:"methods",level:2},{value:"add()",id:"add",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-2",level:4},{value:"applyTransform()",id:"applytransform",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-3",level:4},{value:"Remarks",id:"remarks",level:4},{value:"Example",id:"example",level:4},{value:"clear()",id:"clear",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Remarks",id:"remarks-1",level:4},{value:"Example",id:"example-1",level:4},{value:"clone()",id:"clone",level:3},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-5",level:4},{value:"dispose()",id:"dispose",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-6",level:4},{value:"exportData()",id:"exportdata",level:3},{value:"Returns",id:"returns-7",level:4},{value:"colors",id:"colors",level:5},{value:"groups",id:"groups",level:5},{value:"id",id:"id-1",level:5},{value:"ids",id:"ids-1",level:5},{value:"index",id:"index",level:5},{value:"materials",id:"materials",level:5},{value:"matrices",id:"matrices",level:5},{value:"normal",id:"normal",level:5},{value:"position",id:"position",level:5},{value:"Remarks",id:"remarks-2",level:4},{value:"Example",id:"example-2",level:4},{value:"get()",id:"get",level:3},{value:"Parameters",id:"parameters-5",level:4},{value:"Returns",id:"returns-8",level:4},{value:"Throws",id:"throws",level:4},{value:"getInstancesIDs()",id:"getinstancesids",level:3},{value:"Parameters",id:"parameters-6",level:4},{value:"Returns",id:"returns-9",level:4},{value:"getItemID()",id:"getitemid",level:3},{value:"Parameters",id:"parameters-7",level:4},{value:"Returns",id:"returns-10",level:4},{value:"remove()",id:"remove",level:3},{value:"Parameters",id:"parameters-8",level:4},{value:"Returns",id:"returns-11",level:4},{value:"Throws",id:"throws-1",level:4},{value:"resetColor()",id:"resetcolor",level:3},{value:"Parameters",id:"parameters-9",level:4},{value:"Returns",id:"returns-12",level:4},{value:"Example",id:"example-3",level:4},{value:"setColor()",id:"setcolor",level:3},{value:"Parameters",id:"parameters-10",level:4},{value:"Returns",id:"returns-13",level:4},{value:"Example",id:"example-4",level:4},{value:"setVisibility()",id:"setvisibility",level:3},{value:"Parameters",id:"parameters-11",level:4},{value:"Returns",id:"returns-14",level:4},{value:"Remarks",id:"remarks-3",level:4},{value:"Example",id:"example-5",level:4},{value:"update()",id:"update",level:3},{value:"Returns",id:"returns-15",level:4}];function a(e){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",hr:"hr",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"fragment",children:"Fragment"}),"\n",(0,s.jsx)(t.p,{children:"Class representing a fragment of a 3D model. Fragments are just a simple wrapper around THREE.InstancedMesh. Each fragment can contain Items (identified by ItemID) which are mapped to one or many instances inside this THREE.InstancedMesh. Fragments also implement features like instance buffer resizing and hiding out of the box."}),"\n",(0,s.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsx)(t.h3,{id:"new-fragment",children:"new Fragment()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"new Fragment"}),"(",(0,s.jsx)(t.code,{children:"geometry"}),", ",(0,s.jsx)(t.code,{children:"material"}),", ",(0,s.jsx)(t.code,{children:"count"}),"): ",(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/Fragment",children:(0,s.jsx)(t.code,{children:"Fragment"})})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Constructs a new Fragment."}),"\n",(0,s.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"geometry"})}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"BufferGeometry"}),"<",(0,s.jsx)(t.code,{children:"NormalBufferAttributes"}),">"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The geometry of the fragment."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"material"})}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"Material"})," | ",(0,s.jsx)(t.code,{children:"Material"}),"[]"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The material(s) of the fragment."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"count"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The initial number of instances in the fragment."})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"returns",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/Fragment",children:(0,s.jsx)(t.code,{children:"Fragment"})})}),"\n",(0,s.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(t.h3,{id:"capacity",children:"capacity"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"capacity"}),": ",(0,s.jsx)(t.code,{children:"number"})," = ",(0,s.jsx)(t.code,{children:"0"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The amount of instances that this fragment can contain."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"capacityoffset",children:"capacityOffset"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"capacityOffset"}),": ",(0,s.jsx)(t.code,{children:"number"})," = ",(0,s.jsx)(t.code,{children:"10"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The amount by which to increase the capacity when necessary."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"group",children:"group?"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"optional"})," ",(0,s.jsx)(t.strong,{children:"group"}),": ",(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/FragmentsGroup",children:(0,s.jsx)(t.code,{children:"FragmentsGroup"})})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The group of fragments to which this fragment belongs."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"hiddenitems",children:"hiddenItems"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"hiddenItems"}),": ",(0,s.jsx)(t.code,{children:"Set"}),"<",(0,s.jsx)(t.code,{children:"number"}),">"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"A set of item IDs of instances that are currently hidden."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"id",children:"id"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"id"}),": ",(0,s.jsx)(t.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The unique identifier of this fragment."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"ids",children:"ids"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"ids"}),": ",(0,s.jsx)(t.code,{children:"Set"}),"<",(0,s.jsx)(t.code,{children:"number"}),">"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"A set of unique item IDs associated with this fragment."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"instancetoitem",children:"instanceToItem"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"instanceToItem"}),": ",(0,s.jsx)(t.code,{children:"Map"}),"<",(0,s.jsx)(t.code,{children:"number"}),", ",(0,s.jsx)(t.code,{children:"number"}),">"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"A map of instance IDs to item IDs."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"itemtoinstances",children:"itemToInstances"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"itemToInstances"}),": ",(0,s.jsx)(t.code,{children:"Map"}),"<",(0,s.jsx)(t.code,{children:"number"}),", ",(0,s.jsx)(t.code,{children:"Set"}),"<",(0,s.jsx)(t.code,{children:"number"}),">>"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"A map of item IDs to sets of instance IDs."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"mesh",children:"mesh"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"mesh"}),": ",(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/FragmentMesh",children:(0,s.jsx)(t.code,{children:"FragmentMesh"})})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The mesh associated with this fragment."}),"\n",(0,s.jsx)(t.h2,{id:"accessors",children:"Accessors"}),"\n",(0,s.jsx)(t.h3,{id:"uniquevertices",children:"uniqueVertices"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"get"})," ",(0,s.jsx)(t.strong,{children:"uniqueVertices"}),"(): ",(0,s.jsx)(t.code,{children:"Vector3"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"A getter property that returns the unique vertices of the fragment's geometry.\r\nThe unique vertices are determined by comparing the vertex positions."}),"\n",(0,s.jsx)(t.h4,{id:"returns-1",children:"Returns"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"Vector3"}),"[]"]}),"\n",(0,s.jsx)(t.p,{children:"An array of unique vertices."}),"\n",(0,s.jsx)(t.h2,{id:"methods",children:"Methods"}),"\n",(0,s.jsx)(t.h3,{id:"add",children:"add()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"add"}),"(",(0,s.jsx)(t.code,{children:"items"}),"): ",(0,s.jsx)(t.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Adds items to the fragment."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"items"})}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/interfaces/Item",children:(0,s.jsx)(t.code,{children:"Item"})}),"[]"]}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)("p",{children:"An array of items to be added. Each item contains an ID, an array of transform matrices, and an optional array of colors."}),(0,s.jsx)("p",{children:" If the necessary capacity to accommodate the new items exceeds the current capacity,"})]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)("p",{children:" a new mesh with a larger capacity is created, and the old mesh is disposed."}),(0,s.jsx)("p",{children:" The transform matrices and colors of the items are added to the respective attributes of the mesh."}),(0,s.jsx)("p",{children:" The instance IDs, item IDs, and associations between instance IDs and item IDs are updated accordingly."}),(0,s.jsx)("p",{children:" The instance color and matrix attributes of the mesh are updated."})]}),(0,s.jsx)(t.td,{style:{textAlign:"left"}}),(0,s.jsx)(t.td,{style:{textAlign:"left"}})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-2",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"void"})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"applytransform",children:"applyTransform()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"applyTransform"}),"(",(0,s.jsx)(t.code,{children:"itemIDs"}),", ",(0,s.jsx)(t.code,{children:"transform"}),"): ",(0,s.jsx)(t.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Applies a transformation matrix to instances associated with given item IDs."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-2",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"itemIDs"})}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"Iterable"}),"<",(0,s.jsx)(t.code,{children:"number"}),">"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"An iterable of item IDs to be affected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"transform"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"Matrix4"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The transformation matrix to be applied."})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-3",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"void"})}),"\n",(0,s.jsx)(t.h4,{id:"remarks",children:"Remarks"}),"\n",(0,s.jsx)(t.p,{children:"This method applies the provided transformation matrix to the instances associated with the given item IDs."}),"\n",(0,s.jsx)(t.h4,{id:"example",children:"Example"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typescript",children:"fragment.applyTransform([1, 2, 3], new THREE.Matrix4().makeTranslation(1, 0, 0)); // Applies a translation of (1, 0, 0) to instances with IDs 1, 2, and 3.\n"})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"clear",children:"clear()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"clear"}),"(): ",(0,s.jsx)(t.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Clears the fragment by resetting the hidden items, item IDs, instance-to-item associations,\r\ninstance-to-item map, and the count of instances in the fragment's mesh."}),"\n",(0,s.jsx)(t.h4,{id:"returns-4",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"void"})}),"\n",(0,s.jsx)(t.h4,{id:"remarks-1",children:"Remarks"}),"\n",(0,s.jsx)(t.p,{children:"This method is used to reset the fragment to its initial state."}),"\n",(0,s.jsx)(t.h4,{id:"example-1",children:"Example"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typescript",children:"fragment.clear();\n"})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"clone",children:"clone()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"clone"}),"(",(0,s.jsx)(t.code,{children:"itemIDs"}),"): ",(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/Fragment",children:(0,s.jsx)(t.code,{children:"Fragment"})})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Creates a copy of the whole fragment or a part of it. It shares the geometry with the original fragment, but has its own InstancedMesh data, so it also needs to be disposed."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-3",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"itemIDs"})}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"Iterable"}),"<",(0,s.jsx)(t.code,{children:"number"}),">"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"An iterable of item IDs to be included in the clone."})]})})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-5",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/Fragment",children:(0,s.jsx)(t.code,{children:"Fragment"})})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"dispose",children:"dispose()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"dispose"}),"(",(0,s.jsx)(t.code,{children:"disposeResources"}),"): ",(0,s.jsx)(t.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Disposes of the fragment and its associated resources."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-4",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Default value"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"disposeResources"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"true"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"If true, disposes geometries and materials associated with the fragment. If false, only disposes of the fragment itself."})]})})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-6",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"void"})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"exportdata",children:"exportData()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"exportData"}),"(): ",(0,s.jsx)(t.code,{children:"object"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Exports the fragment's geometry and associated data."}),"\n",(0,s.jsx)(t.h4,{id:"returns-7",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"object"})}),"\n",(0,s.jsx)(t.p,{children:"An object containing the exported geometry, an array of IDs associated with the fragment, and the fragment's ID."}),"\n",(0,s.jsx)(t.h5,{id:"colors",children:"colors"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"colors"}),": ",(0,s.jsx)(t.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"groups",children:"groups"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"groups"}),": ",(0,s.jsx)(t.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"id-1",children:"id"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"id"}),": ",(0,s.jsx)(t.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"ids-1",children:"ids"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"ids"}),": ",(0,s.jsx)(t.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"index",children:"index"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"index"}),": ",(0,s.jsx)(t.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"materials",children:"materials"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"materials"}),": ",(0,s.jsx)(t.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"matrices",children:"matrices"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"matrices"}),": ",(0,s.jsx)(t.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"normal",children:"normal"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"normal"}),": ",(0,s.jsx)(t.code,{children:"Float32Array"})]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"position",children:"position"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"position"}),": ",(0,s.jsx)(t.code,{children:"Float32Array"})]}),"\n"]}),"\n",(0,s.jsx)(t.h4,{id:"remarks-2",children:"Remarks"}),"\n",(0,s.jsx)(t.p,{children:"This method is used to export the fragment's geometry and associated data for further processing or storage."}),"\n",(0,s.jsx)(t.h4,{id:"example-2",children:"Example"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typescript",children:"const exportedData = fragment.exportData();\r\n// Use the exportedData object for further processing or storage\n"})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"get",children:"get()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"get"}),"(",(0,s.jsx)(t.code,{children:"itemID"}),"): ",(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/interfaces/Item",children:(0,s.jsx)(t.code,{children:"Item"})})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Retrieves the transform matrices and colors of instances associated with a given item ID."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-5",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"itemID"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The unique identifier of the item."})]})})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-8",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/interfaces/Item",children:(0,s.jsx)(t.code,{children:"Item"})})}),"\n",(0,s.jsx)(t.p,{children:"An object containing the item ID, an array of transform matrices, and an optional array of colors.\r\nIf no colors are found, the colors array will be undefined."}),"\n",(0,s.jsx)(t.h4,{id:"throws",children:"Throws"}),"\n",(0,s.jsx)(t.p,{children:"Will throw an error if the item is not found."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"getinstancesids",children:"getInstancesIDs()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"getInstancesIDs"}),"(",(0,s.jsx)(t.code,{children:"itemID"}),"): ",(0,s.jsx)(t.code,{children:"null"})," | ",(0,s.jsx)(t.code,{children:"Set"}),"<",(0,s.jsx)(t.code,{children:"number"}),">"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Retrieves the instance IDs associated with a given item ID."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-6",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"itemID"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The unique identifier of the item."})]})})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-9",children:"Returns"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"null"})," | ",(0,s.jsx)(t.code,{children:"Set"}),"<",(0,s.jsx)(t.code,{children:"number"}),">"]}),"\n",(0,s.jsx)(t.p,{children:"The set of instance IDs associated with the item, or null if no association exists."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"getitemid",children:"getItemID()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"getItemID"}),"(",(0,s.jsx)(t.code,{children:"instanceID"}),"): ",(0,s.jsx)(t.code,{children:"null"})," | ",(0,s.jsx)(t.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Retrieves the item ID associated with a given instance ID."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-7",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"instanceID"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The unique identifier of the instance."})]})})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-10",children:"Returns"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"null"})," | ",(0,s.jsx)(t.code,{children:"number"})]}),"\n",(0,s.jsx)(t.p,{children:"The item ID associated with the instance, or null if no association exists."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"remove",children:"remove()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"remove"}),"(",(0,s.jsx)(t.code,{children:"itemsIDs"}),"): ",(0,s.jsx)(t.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Removes items from the fragment."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-8",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"itemsIDs"})}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"Iterable"}),"<",(0,s.jsx)(t.code,{children:"number"}),">"]}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)("p",{children:"An iterable of item IDs to be removed."}),(0,s.jsx)("p",{children:" The instance IDs, item IDs, and associations between instance IDs and item IDs are updated accordingly."}),(0,s.jsx)("p",{children:" The instance color and matrix attributes of the mesh are updated."})]})]})})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-11",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"void"})}),"\n",(0,s.jsx)(t.h4,{id:"throws-1",children:"Throws"}),"\n",(0,s.jsx)(t.p,{children:"Will throw an error if the instances are not found."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"resetcolor",children:"resetColor()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"resetColor"}),"(",(0,s.jsx)(t.code,{children:"itemIDs"}),"): ",(0,s.jsx)(t.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Resets the color of items in the fragment to their original colors."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-9",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"itemIDs"})}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"Iterable"}),"<",(0,s.jsx)(t.code,{children:"number"}),">"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"An iterable of item IDs to be affected. If not provided, all items in the fragment will be affected."})]})})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-12",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"void"})}),"\n",(0,s.jsx)(t.h4,{id:"example-3",children:"Example"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typescript",children:"fragment.resetColor([1, 2, 3]); // Resets the color of items with IDs 1, 2, and 3 to their original colors.\r\nfragment.resetColor(); // Resets the color of all items in the fragment to their original colors.\n"})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"setcolor",children:"setColor()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"setColor"}),"(",(0,s.jsx)(t.code,{children:"color"}),", ",(0,s.jsx)(t.code,{children:"itemIDs"}),", ",(0,s.jsx)(t.code,{children:"override"}),"): ",(0,s.jsx)(t.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Sets the color of items in the fragment."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-10",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Default value"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"color"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"Color"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"undefined"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The color to be set for the items."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"itemIDs"})}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"Iterable"}),"<",(0,s.jsx)(t.code,{children:"number"}),">"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"undefined"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"An iterable of item IDs to be affected. If not provided, all items in the fragment will be affected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"override"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"false"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"A boolean indicating whether the original color should be overridden. If true, the original color will be replaced with the new color."})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-13",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"void"})}),"\n",(0,s.jsx)(t.h4,{id:"example-4",children:"Example"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typescript",children:"fragment.setColor(new THREE.Color(0xff0000), [1, 2, 3], true); // Sets the color of items with IDs 1, 2, and 3 to red, overriding their original colors.\r\nfragment.setColor(new THREE.Color(0x00ff00)); // Sets the color of all items in the fragment to green.\n"})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"setvisibility",children:"setVisibility()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"setVisibility"}),"(",(0,s.jsx)(t.code,{children:"visible"}),", ",(0,s.jsx)(t.code,{children:"itemIDs"}),"): ",(0,s.jsx)(t.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Sets the visibility of items in the fragment."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-11",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"visible"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"A boolean indicating whether the items should be visible or hidden."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"itemIDs"})}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"Iterable"}),"<",(0,s.jsx)(t.code,{children:"number"}),">"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"An iterable of item IDs to be affected. If not provided, all items in the fragment will be affected."})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-14",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"void"})}),"\n",(0,s.jsx)(t.h4,{id:"remarks-3",children:"Remarks"}),"\n",(0,s.jsx)(t.p,{children:"This method updates the visibility of items in the fragment based on the provided visibility flag."}),"\n",(0,s.jsx)(t.h4,{id:"example-5",children:"Example"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typescript",children:"fragment.setVisibility(true, [1, 2, 3]); // Makes items with IDs 1, 2, and 3 visible.\r\nfragment.setVisibility(false); // Makes all items in the fragment hidden.\n"})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"update",children:"update()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"update"}),"(): ",(0,s.jsx)(t.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Updates the instance color and matrix attributes of the fragment's mesh.\r\nThis method should be called whenever the instance color or matrix attributes\r\nneed to be updated."}),"\n",(0,s.jsx)(t.h4,{id:"returns-15",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"void"})})]})}function o(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>d});var s=n(6540);const r={},i=s.createContext(r);function l(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/5e8c322a.6df29e60.js b/build/assets/js/5e8c322a.6df29e60.js new file mode 100644 index 000000000..a5c58973d --- /dev/null +++ b/build/assets/js/5e8c322a.6df29e60.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[594],{3478:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var s=n(4848),i=n(8453);const o={},l="\ud83d\udccb API",r={id:"api/index",title:"\ud83d\udccb API",description:"Packages",source:"@site/docs/api/index.md",sourceDirName:"api",slug:"/api/",permalink:"/api/",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"TopicsUI",permalink:"/Tutorials/UserInterface/OBC/TopicsUI"},next:{title:"@thatopen/components",permalink:"/api/@thatopen/components/"}},c={},a=[{value:"Packages",id:"packages",level:2}];function d(t){const e={a:"a",h1:"h1",h2:"h2",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...t.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h1,{id:"-api",children:"\ud83d\udccb API"}),"\n",(0,s.jsx)(e.h2,{id:"packages",children:"Packages"}),"\n",(0,s.jsxs)(e.table,{children:[(0,s.jsx)(e.thead,{children:(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.th,{style:{textAlign:"left"},children:"Name"}),(0,s.jsx)(e.th,{style:{textAlign:"left"},children:"Version"}),(0,s.jsx)(e.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(e.tbody,{children:[(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.td,{style:{textAlign:"left"},children:(0,s.jsx)(e.a,{href:"/api/@thatopen/components/",children:"@thatopen/components"})}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"2.4.4"}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"Collection of core functionalities to author BIM apps."})]}),(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.td,{style:{textAlign:"left"},children:(0,s.jsx)(e.a,{href:"/api/@thatopen/components-front/",children:"@thatopen/components-front"})}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"2.4.4"}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"Collection of frontend tools to author BIM apps."})]}),(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.td,{style:{textAlign:"left"},children:(0,s.jsx)(e.a,{href:"/api/@thatopen/ui/",children:"@thatopen/ui"})}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"2.4.2"}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"Collection of web components (UI components) meant to be used, but not limited to, BIM applications."})]}),(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.td,{style:{textAlign:"left"},children:(0,s.jsx)(e.a,{href:"/api/@thatopen/ui-obc/",children:"@thatopen/ui-obc"})}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"2.4.1"}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"Collection of web components (UI components) implementations to use with @thatopen/components."})]})]})]})]})}function h(t={}){const{wrapper:e}={...(0,i.R)(),...t.components};return e?(0,s.jsx)(e,{...t,children:(0,s.jsx)(d,{...t})}):d(t)}},8453:(t,e,n)=>{n.d(e,{R:()=>l,x:()=>r});var s=n(6540);const i={},o=s.createContext(i);function l(t){const e=s.useContext(o);return s.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function r(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(i):t.components||i:l(t.components),s.createElement(o.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/5e8c322a.8faa1a23.js b/build/assets/js/5e8c322a.8faa1a23.js deleted file mode 100644 index 1cb0f95c9..000000000 --- a/build/assets/js/5e8c322a.8faa1a23.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[594],{3478:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>a});var s=n(4848),i=n(8453);const l={},o="\ud83d\udccb API",r={id:"api/index",title:"\ud83d\udccb API",description:"Packages",source:"@site/docs/api/index.md",sourceDirName:"api",slug:"/api/",permalink:"/api/",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"TopicsUI",permalink:"/Tutorials/UserInterface/OBC/TopicsUI"},next:{title:"@thatopen/components",permalink:"/api/@thatopen/components/"}},c={},a=[{value:"Packages",id:"packages",level:2}];function d(t){const e={a:"a",h1:"h1",h2:"h2",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...t.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h1,{id:"-api",children:"\ud83d\udccb API"}),"\n",(0,s.jsx)(e.h2,{id:"packages",children:"Packages"}),"\n",(0,s.jsxs)(e.table,{children:[(0,s.jsx)(e.thead,{children:(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.th,{style:{textAlign:"left"},children:"Name"}),(0,s.jsx)(e.th,{style:{textAlign:"left"},children:"Version"}),(0,s.jsx)(e.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(e.tbody,{children:[(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.td,{style:{textAlign:"left"},children:(0,s.jsx)(e.a,{href:"/api/@thatopen/components/",children:"@thatopen/components"})}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"2.4.2"}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"Collection of core functionalities to author BIM apps."})]}),(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.td,{style:{textAlign:"left"},children:(0,s.jsx)(e.a,{href:"/api/@thatopen/components-front/",children:"@thatopen/components-front"})}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"2.4.2"}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"Collection of frontend tools to author BIM apps."})]}),(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.td,{style:{textAlign:"left"},children:(0,s.jsx)(e.a,{href:"/api/@thatopen/fragments/",children:"@thatopen/fragments"})}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"2.4.0"}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"Simple geometric system built on top of Three.js to display 3D BIM data efficiently."})]}),(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.td,{style:{textAlign:"left"},children:(0,s.jsx)(e.a,{href:"/api/@thatopen/ui/",children:"@thatopen/ui"})}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"2.4.1"}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"Collection of web components (UI components) meant to be used, but not limited to, BIM applications."})]}),(0,s.jsxs)(e.tr,{children:[(0,s.jsx)(e.td,{style:{textAlign:"left"},children:(0,s.jsx)(e.a,{href:"/api/@thatopen/ui-obc/",children:"@thatopen/ui-obc"})}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"2.4.1"}),(0,s.jsx)(e.td,{style:{textAlign:"left"},children:"Collection of web components (UI components) implementations to use with @thatopen/components."})]})]})]})]})}function h(t={}){const{wrapper:e}={...(0,i.R)(),...t.components};return e?(0,s.jsx)(e,{...t,children:(0,s.jsx)(d,{...t})}):d(t)}},8453:(t,e,n)=>{n.d(e,{R:()=>o,x:()=>r});var s=n(6540);const i={},l=s.createContext(i);function o(t){const e=s.useContext(l);return s.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function r(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(i):t.components||i:o(t.components),s.createElement(l.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/77f6bc4a.78fce30d.js b/build/assets/js/77f6bc4a.78fce30d.js deleted file mode 100644 index bf0dc9a6c..000000000 --- a/build/assets/js/77f6bc4a.78fce30d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[6637],{63:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>o,frontMatter:()=>l,metadata:()=>d,toc:()=>h});var s=r(4848),n=r(8453);const l={},i="CurveMesh",d={id:"api/@thatopen/fragments/classes/CurveMesh",title:"CurveMesh\\",description:"Represents an alignment 3D curve mesh with additional civil engineering properties. Extends THREE.LineSegments to provide geometry and material for the curve.",source:"@site/docs/api/@thatopen/fragments/classes/CurveMesh.md",sourceDirName:"api/@thatopen/fragments/classes",slug:"/api/@thatopen/fragments/classes/CurveMesh",permalink:"/api/@thatopen/fragments/classes/CurveMesh",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"CivilCurve",permalink:"/api/@thatopen/fragments/classes/CivilCurve"},next:{title:"Fragment",permalink:"/api/@thatopen/fragments/classes/Fragment"}},c={},h=[{value:"Extends",id:"extends",level:2},{value:"Type parameters",id:"type-parameters",level:2},{value:"Constructors",id:"constructors",level:2},{value:"new CurveMesh()",id:"new-curvemesh",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Overrides",id:"overrides",level:4},{value:"Properties",id:"properties",level:2},{value:"curve",id:"curve",level:3}];function a(e){const t={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,n.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"curvemeshtgeometry-tmaterial",children:"CurveMesh"}),"\n",(0,s.jsx)(t.p,{children:"Represents an alignment 3D curve mesh with additional civil engineering properties. Extends THREE.LineSegments to provide geometry and material for the curve."}),"\n",(0,s.jsx)(t.h2,{id:"extends",children:"Extends"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"LineSegments"}),"<",(0,s.jsx)(t.code,{children:"TGeometry"}),", ",(0,s.jsx)(t.code,{children:"TMaterial"}),">"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"type-parameters",children:"Type parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Value"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"TGeometry"})," ",(0,s.jsx)(t.em,{children:"extends"})," ",(0,s.jsx)(t.code,{children:"THREE.BufferGeometry"})]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"THREE.BufferGeometry"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The type of geometry for the curve mesh. Default is THREE.BufferGeometry."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"TMaterial"})," ",(0,s.jsx)(t.em,{children:"extends"})," ",(0,s.jsx)(t.code,{children:"THREE.Material"})," | ",(0,s.jsx)(t.code,{children:"THREE.Material"}),"[]"]}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"THREE.Material"})," | ",(0,s.jsx)(t.code,{children:"THREE.Material"}),"[]"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The type of material(s) for the curve mesh. Default is THREE.Material or THREE.Material[]."})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsx)(t.h3,{id:"new-curvemesh",children:"new CurveMesh()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"new CurveMesh"}),"<",(0,s.jsx)(t.code,{children:"TGeometry"}),", ",(0,s.jsx)(t.code,{children:"TMaterial"}),">(",(0,s.jsx)(t.code,{children:"index"}),", ",(0,s.jsx)(t.code,{children:"data"}),", ",(0,s.jsx)(t.code,{children:"alignment"}),", ",(0,s.jsx)(t.code,{children:"geometry"}),"?, ",(0,s.jsx)(t.code,{children:"material"}),"?): ",(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CurveMesh",children:(0,s.jsx)(t.code,{children:"CurveMesh"})}),"<",(0,s.jsx)(t.code,{children:"TGeometry"}),", ",(0,s.jsx)(t.code,{children:"TMaterial"}),">"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Constructs a new instance of CurveMesh."}),"\n",(0,s.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"index"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The index of the curve mesh."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"data"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"object"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The data associated with the curve mesh."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"alignment"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/Alignment",children:(0,s.jsx)(t.code,{children:"Alignment"})})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The alignment of the curve mesh."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"geometry"}),"?"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"TGeometry"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The geometry for the curve mesh. Optional."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.code,{children:"material"}),"?"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"TMaterial"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The material(s) for the curve mesh. Optional."})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"returns",children:"Returns"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CurveMesh",children:(0,s.jsx)(t.code,{children:"CurveMesh"})}),"<",(0,s.jsx)(t.code,{children:"TGeometry"}),", ",(0,s.jsx)(t.code,{children:"TMaterial"}),">"]}),"\n",(0,s.jsx)(t.h4,{id:"overrides",children:"Overrides"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"THREE.LineSegments.constructor"})}),"\n",(0,s.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(t.h3,{id:"curve",children:"curve"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"curve"}),": ",(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CivilCurve",children:(0,s.jsx)(t.code,{children:"CivilCurve"})})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The civil curve associated with this curve mesh."})]})}function o(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},8453:(e,t,r)=>{r.d(t,{R:()=>i,x:()=>d});var s=r(6540);const n={},l=s.createContext(n);function i(e){const t=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(l.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/7cc95c1b.64f1c38e.js b/build/assets/js/7cc95c1b.64f1c38e.js new file mode 100644 index 000000000..4f58f4f5b --- /dev/null +++ b/build/assets/js/7cc95c1b.64f1c38e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[152],{1112:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>s,default:()=>d,frontMatter:()=>r,metadata:()=>a,toc:()=>p});var o=t(4848),i=t(8453);const r={},s=void 0,a={id:"Tutorials/UserInterface/OBC/ElementProperties",title:"ElementProperties",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/ElementProperties")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/ElementProperties.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/ElementProperties",permalink:"/Tutorials/UserInterface/OBC/ElementProperties",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ClassificationsTree",permalink:"/Tutorials/UserInterface/OBC/ClassificationsTree"},next:{title:"EntityAttributes",permalink:"/Tutorials/UserInterface/OBC/EntityAttributes"}},l={},p=[{value:"Displaying data the simplest way \ud83d\udd25\ud83d\udd25",id:"displaying-data-the-simplest-way-",level:2},{value:"\ud83d\udd96 Importing our Libraries",id:"-importing-our-libraries",level:3},{value:"\ud83d\udccb Initializing the UI",id:"-initializing-the-ui",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"Loading a model and computing it's relations",id:"loading-a-model-and-computing-its-relations",level:3},{value:"Creating the properties table",id:"creating-the-properties-table",level:3},{value:"Creating a panel to append the table",id:"creating-a-panel-to-append-the-table",level:3}];function c(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/ElementProperties"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/ElementProperties"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/ElementProperties/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h2,{id:"displaying-data-the-simplest-way-",children:"Displaying data the simplest way \ud83d\udd25\ud83d\udd25"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"What is a good BIM app if you don't give users a nice way to visualize its model properties, right? Well, hold tight as here you will learn all you need to know in order to use the power of UI Components to accomplish that!"}),"\n",(0,o.jsx)(n.h3,{id:"-importing-our-libraries",children:"\ud83d\udd96 Importing our Libraries"}),"\n",(0,o.jsx)(n.p,{children:"In this tutorial, we will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"@thatopen/ui to add some simple and cool UI menus."}),"\n",(0,o.jsx)(n.li,{children:"@thatopen/components to set up the barebone of our app."}),"\n",(0,o.jsx)(n.li,{children:"@thatopen/components-front to use some frontend-oriented components."}),"\n",(0,o.jsx)(n.li,{children:"@thatopen/ui-obc to add some cool pre-made UI menus for components."}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import * as BUI from "@thatopen/ui";\nimport * as OBC from "@thatopen/components";\nimport * as OBCF from "@thatopen/components-front";\n// You have to import from "@thatopen/ui-obc"\nimport * as BUIC from "../..";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-initializing-the-ui",children:"\ud83d\udccb Initializing the UI"}),"\n",(0,o.jsx)(n.p,{children:"As always, let's first initialize the UI library. Remember you only have to do it once in your entire app."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const viewport = document.createElement("bim-viewport");\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create();\nconst sceneComponent = new OBC.SimpleScene(components);\nsceneComponent.setup();\nworld.scene = sceneComponent;\n\nconst rendererComponent = new OBC.SimpleRenderer(components, viewport);\nworld.renderer = rendererComponent;\n\nconst cameraComponent = new OBC.SimpleCamera(components);\nworld.camera = cameraComponent;\ncameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);\n\nviewport.addEventListener("resize", () => {\n rendererComponent.resize();\n cameraComponent.updateAspect();\n});\n\ncomponents.init();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"loading-a-model-and-computing-its-relations",children:"Loading a model and computing it's relations"}),"\n",(0,o.jsx)(n.p,{children:"First things first... let's load a model \ud83d\udc47"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\nconst file = await fetch(\n "https://thatopen.github.io/engine_ui-components/resources/small.ifc",\n);\nconst buffer = await file.arrayBuffer();\nconst typedArray = new Uint8Array(buffer);\nconst model = await ifcLoader.load(typedArray);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsx)(n.p,{children:"You don't need to add the model into the scene to display its properties. However, as we are going to display the properties for each selected element, then having the model into the scene is obvious, right?"})}),"\n",(0,o.jsxs)(n.p,{children:["Now, in order to get the most out of the properties table, you need to calculate the relations index of your model. To do it, you will need to use the ",(0,o.jsx)(n.a,{href:"/Tutorials/Components/Core/IfcRelationsIndexer",children:"IfcRelationsIndexer"})," component from ",(0,o.jsx)(n.code,{children:"@thatopen/components"})," to speed up the process."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const indexer = components.get(OBC.IfcRelationsIndexer);\nawait indexer.process(model);\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Once the relations are processed, the ",(0,o.jsx)(n.code,{children:"Element Properties"})," component has everything it needs in order to display the properties in a cool way \ud83d\ude0e."]}),"\n",(0,o.jsx)(n.h3,{id:"creating-the-properties-table",children:"Creating the properties table"}),"\n",(0,o.jsx)(n.p,{children:"Let's create an instance of the functional component, like this:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const [propertiesTable, updatePropertiesTable] = BUIC.tables.elementProperties({\n components,\n fragmentIdMap: {},\n});\n\npropertiesTable.preserveStructureOnFilter = true;\npropertiesTable.indentationInText = false;\n"})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"elementProperties"})," functional component is a simplified version that shows any model entity data. However, if you like a more complete properties table, use the ",(0,o.jsx)(n.code,{children:"entityAttributes"})," component."]})}),"\n",(0,o.jsxs)(n.p,{children:["Cool! properties table created. Then after, let's tell the properties table to update each time the user makes a selection over the model. For it, we will use the highlighter from ",(0,o.jsx)(n.code,{children:"@thatopen/components-front"}),":"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const highlighter = components.get(OBCF.Highlighter);\nhighlighter.setup({ world });\n\nhighlighter.events.select.onHighlight.add((fragmentIdMap) => {\n updatePropertiesTable({ fragmentIdMap });\n});\n\nhighlighter.events.select.onClear.add(() =>\n updatePropertiesTable({ fragmentIdMap: {} }),\n);\n"})}),"\n",(0,o.jsx)(n.h3,{id:"creating-a-panel-to-append-the-table",children:"Creating a panel to append the table"}),"\n",(0,o.jsx)(n.p,{children:"Allright! Let's now create a BIM Panel to control some aspects of the properties table and to trigger some functionalities like expanding the rows children and copying the values to TSV, so you can paste your element values inside a spreadsheet application \ud83d\ude09"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const propertiesPanel = BUI.Component.create(() => {\n const onTextInput = (e: Event) => {\n const input = e.target as BUI.TextInput;\n propertiesTable.queryString = input.value !== "" ? input.value : null;\n };\n\n const expandTable = (e: Event) => {\n const button = e.target as BUI.Button;\n propertiesTable.expanded = !propertiesTable.expanded;\n button.label = propertiesTable.expanded ? "Collapse" : "Expand";\n };\n\n const copyAsTSV = async () => {\n await navigator.clipboard.writeText(propertiesTable.tsv);\n };\n\n return BUI.html`\n \n \n
    \n \n \n
    \n \n ${propertiesTable}\n     \n     \n `;\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const app = document.createElement("bim-grid");\napp.layouts = {\n main: {\n template: `\n "propertiesPanel viewport"\n /25rem 1fr\n `,\n elements: { propertiesPanel, viewport },\n },\n};\n\napp.layout = "main";\ndocument.body.append(app);\n'})}),"\n",(0,o.jsx)(n.p,{children:"Congratulations! You have now created a fully working properties table for your app in less than 5 minutes of work. Keep going with more tutorials! \ud83d\udcaa"})]})}function d(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>a});var o=t(6540);const i={},r=o.createContext(i);function s(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/7cc95c1b.ad372333.js b/build/assets/js/7cc95c1b.ad372333.js deleted file mode 100644 index 02f588b8c..000000000 --- a/build/assets/js/7cc95c1b.ad372333.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[152],{1112:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>d,frontMatter:()=>a,metadata:()=>s,toc:()=>p});var o=n(4848),i=n(8453);const a={},r=void 0,s={id:"Tutorials/UserInterface/OBC/ElementProperties",title:"ElementProperties",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/ElementProperties")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/ElementProperties.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/ElementProperties",permalink:"/Tutorials/UserInterface/OBC/ElementProperties",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ClassificationsTree",permalink:"/Tutorials/UserInterface/OBC/ClassificationsTree"},next:{title:"EntityAttributes",permalink:"/Tutorials/UserInterface/OBC/EntityAttributes"}},l={},p=[{value:"Displaying data the simplest way \ud83d\udd25\ud83d\udd25",id:"displaying-data-the-simplest-way-",level:2},{value:"Loading a model and computing it's relations",id:"loading-a-model-and-computing-its-relations",level:3},{value:"Creating the properties table",id:"creating-the-properties-table",level:3},{value:"Creating a panel to append the table",id:"creating-a-panel-to-append-the-table",level:3}];function c(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/ElementProperties"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/ElementProperties"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(t.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(t.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(t.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/ElementProperties/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(t.h2,{id:"displaying-data-the-simplest-way-",children:"Displaying data the simplest way \ud83d\udd25\ud83d\udd25"}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsx)(t.p,{children:"What is a good BIM app if you don't give users a nice way to visualize its model properties, right? Well, hold tight as here you will learn all you need to know in order to use the power of UI Components to accomplish that!"}),"\n",(0,o.jsx)(t.h3,{id:"loading-a-model-and-computing-its-relations",children:"Loading a model and computing it's relations"}),"\n",(0,o.jsx)(t.p,{children:"First things first... let's load a model \ud83d\udc47"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\nconst file = await fetch(\n "https://thatopen.github.io/engine_ui-components/resources/small.ifc",\n);\nconst buffer = await file.arrayBuffer();\nconst typedArray = new Uint8Array(buffer);\nconst model = await ifcLoader.load(typedArray);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsx)(t.p,{children:"You don't need to add the model into the scene to display its properties. However, as we are going to display the properties for each selected element, then having the model into the scene is obvious, right?"})}),"\n",(0,o.jsxs)(t.p,{children:["Now, in order to get the most out of the properties table, you need to calculate the relations index of your model. To do it, you will need to use the ",(0,o.jsx)(t.a,{href:"/Tutorials/Components/Core/IfcRelationsIndexer",children:"IfcRelationsIndexer"})," component from ",(0,o.jsx)(t.code,{children:"@thatopen/components"})," to speed up the process."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"const indexer = components.get(OBC.IfcRelationsIndexer);\nawait indexer.process(model);\n"})}),"\n",(0,o.jsxs)(t.p,{children:["Once the relations are processed, the ",(0,o.jsx)(t.code,{children:"Element Properties"})," component has everything it needs in order to display the properties in a cool way \ud83d\ude0e."]}),"\n",(0,o.jsx)(t.h3,{id:"creating-the-properties-table",children:"Creating the properties table"}),"\n",(0,o.jsx)(t.p,{children:"Let's create an instance of the functional component, like this:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"const [propertiesTable, updatePropertiesTable] = CUI.tables.elementProperties({\n components,\n fragmentIdMap: {},\n});\n\npropertiesTable.preserveStructureOnFilter = true;\npropertiesTable.indentationInText = false;\n"})}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"elementProperties"})," functional component is a simplified version that shows any model entity data. However, if you like a more complete properties table, use the ",(0,o.jsx)(t.code,{children:"entityAttributes"})," component."]})}),"\n",(0,o.jsxs)(t.p,{children:["Cool! properties table created. Then after, let's tell the properties table to update each time the user makes a selection over the model. For it, we will use the highlighter from ",(0,o.jsx)(t.code,{children:"@thatopen/components-front"}),":"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"const highlighter = components.get(OBF.Highlighter);\nhighlighter.setup({ world });\n\nhighlighter.events.select.onHighlight.add((fragmentIdMap) => {\n updatePropertiesTable({ fragmentIdMap });\n});\n\nhighlighter.events.select.onClear.add(() =>\n updatePropertiesTable({ fragmentIdMap: {} }),\n);\n"})}),"\n",(0,o.jsx)(t.h3,{id:"creating-a-panel-to-append-the-table",children:"Creating a panel to append the table"}),"\n",(0,o.jsx)(t.p,{children:"Allright! Let's now create a BIM Panel to control some aspects of the properties table and to trigger some functionalities like expanding the rows children and copying the values to TSV, so you can paste your element values inside a spreadsheet application \ud83d\ude09"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const propertiesPanel = BUI.Component.create(() => {\n const onTextInput = (e: Event) => {\n const input = e.target as BUI.TextInput;\n propertiesTable.queryString = input.value !== "" ? input.value : null;\n };\n\n const expandTable = (e: Event) => {\n const button = e.target as BUI.Button;\n propertiesTable.expanded = !propertiesTable.expanded;\n button.label = propertiesTable.expanded ? "Collapse" : "Expand";\n };\n\n const copyAsTSV = async () => {\n await navigator.clipboard.writeText(propertiesTable.tsv);\n };\n\n return BUI.html`\n \n \n
    \n \n \n
    \n \n ${propertiesTable}\n     \n     \n `;\n});\n'})}),"\n",(0,o.jsx)(t.p,{children:"Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const app = document.createElement("bim-grid");\napp.layouts = {\n main: {\n template: `\n "propertiesPanel viewport"\n /25rem 1fr\n `,\n elements: { propertiesPanel, viewport },\n },\n};\n\napp.layout = "main";\ndocument.body.append(app);\n'})}),"\n",(0,o.jsx)(t.p,{children:"Congratulations! You have now created a fully working properties table for your app in less than 5 minutes of work. Keep going with more tutorials! \ud83d\udcaa"})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>r,x:()=>s});var o=n(6540);const i={},a=o.createContext(i);function r(e){const t=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/7deff3d6.376711c5.js b/build/assets/js/7deff3d6.376711c5.js new file mode 100644 index 000000000..340258add --- /dev/null +++ b/build/assets/js/7deff3d6.376711c5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8560],{6266:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>r,default:()=>l,frontMatter:()=>a,metadata:()=>c,toc:()=>p});var s=n(4848),o=n(8453);const a={},r="StreamedInstances",c={id:"api/@thatopen/components-front/type-aliases/StreamedInstances",title:"StreamedInstances",description:"StreamedInstances: Map\\",source:"@site/docs/api/@thatopen/components-front/type-aliases/StreamedInstances.md",sourceDirName:"api/@thatopen/components-front/type-aliases",slug:"/api/@thatopen/components-front/type-aliases/StreamedInstances",permalink:"/api/@thatopen/components-front/type-aliases/StreamedInstances",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LineStyles",permalink:"/api/@thatopen/components-front/type-aliases/LineStyles"},next:{title:"@thatopen/ui",permalink:"/api/@thatopen/ui/"}},i={},p=[];function d(e){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",p:"p",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"streamedinstances",children:"StreamedInstances"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"StreamedInstances"}),": ",(0,s.jsx)(t.code,{children:"Map"}),"<",(0,s.jsx)(t.code,{children:"number"}),", ",(0,s.jsx)(t.a,{href:"/api/@thatopen/components-front/interfaces/StreamedInstance",children:(0,s.jsx)(t.code,{children:"StreamedInstance"})}),"[]>"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"A map of streamed instances, grouped by their unique identifier."})]})}function l(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>r,x:()=>c});var s=n(6540);const o={},a=s.createContext(o);function r(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/7deff3d6.b4839bd9.js b/build/assets/js/7deff3d6.b4839bd9.js deleted file mode 100644 index 54acfab16..000000000 --- a/build/assets/js/7deff3d6.b4839bd9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8560],{6266:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>r,default:()=>l,frontMatter:()=>o,metadata:()=>c,toc:()=>p});var s=n(4848),a=n(8453);const o={},r="StreamedInstances",c={id:"api/@thatopen/components-front/type-aliases/StreamedInstances",title:"StreamedInstances",description:"StreamedInstances: Map\\",source:"@site/docs/api/@thatopen/components-front/type-aliases/StreamedInstances.md",sourceDirName:"api/@thatopen/components-front/type-aliases",slug:"/api/@thatopen/components-front/type-aliases/StreamedInstances",permalink:"/api/@thatopen/components-front/type-aliases/StreamedInstances",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LineStyles",permalink:"/api/@thatopen/components-front/type-aliases/LineStyles"},next:{title:"@thatopen/fragments",permalink:"/api/@thatopen/fragments/"}},i={},p=[];function d(e){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",p:"p",strong:"strong",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"streamedinstances",children:"StreamedInstances"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"StreamedInstances"}),": ",(0,s.jsx)(t.code,{children:"Map"}),"<",(0,s.jsx)(t.code,{children:"number"}),", ",(0,s.jsx)(t.a,{href:"/api/@thatopen/components-front/interfaces/StreamedInstance",children:(0,s.jsx)(t.code,{children:"StreamedInstance"})}),"[]>"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"A map of streamed instances, grouped by their unique identifier."})]})}function l(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>r,x:()=>c});var s=n(6540);const a={},o=s.createContext(a);function r(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/815af0b8.4bf3b06e.js b/build/assets/js/815af0b8.4bf3b06e.js deleted file mode 100644 index 82151e4c3..000000000 --- a/build/assets/js/815af0b8.4bf3b06e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[6224],{9911:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var s=n(4848),o=n(8453);const a={},i="AlignmentType",r={id:"api/@thatopen/fragments/type-aliases/AlignmentType",title:"AlignmentType",description:'AlignmentType: "vertical" \\| "horizontal" \\| "absolute"',source:"@site/docs/api/@thatopen/fragments/type-aliases/AlignmentType.md",sourceDirName:"api/@thatopen/fragments/type-aliases",slug:"/api/@thatopen/fragments/type-aliases/AlignmentType",permalink:"/api/@thatopen/fragments/type-aliases/AlignmentType",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Item",permalink:"/api/@thatopen/fragments/interfaces/Item"},next:{title:"IfcSchema",permalink:"/api/@thatopen/fragments/type-aliases/IfcSchema"}},c={},l=[];function p(e){const t={blockquote:"blockquote",code:"code",h1:"h1",p:"p",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"alignmenttype",children:"AlignmentType"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"AlignmentType"}),": ",(0,s.jsx)(t.code,{children:'"vertical"'})," | ",(0,s.jsx)(t.code,{children:'"horizontal"'})," | ",(0,s.jsx)(t.code,{children:'"absolute"'})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Represents the type of alignment, which can be vertical, horizontal, or absolute."})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>r});var s=n(6540);const o={},a=s.createContext(o);function i(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/86328980.0a9babae.js b/build/assets/js/86328980.0a9babae.js new file mode 100644 index 000000000..aca81470c --- /dev/null +++ b/build/assets/js/86328980.0a9babae.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8939],{1216:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>s,metadata:()=>a,toc:()=>c});var o=t(4848),r=t(8453);const s={},i=void 0,a={id:"Tutorials/UserInterface/OBC/RelationsTree",title:"RelationsTree",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/RelationsTree")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/RelationsTree.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/RelationsTree",permalink:"/Tutorials/UserInterface/OBC/RelationsTree",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ModelsList",permalink:"/Tutorials/UserInterface/OBC/ModelsList"},next:{title:"TopicsUI",permalink:"/Tutorials/UserInterface/OBC/TopicsUI"}},l={},c=[{value:"Showing your model tree \ud83c\udf32",id:"showing-your-model-tree-",level:2},{value:"\ud83d\udd96 Importing our Libraries",id:"-importing-our-libraries",level:3},{value:"\ud83d\udccb Initializing the UI",id:"-initializing-the-ui",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"Setting up the components",id:"setting-up-the-components",level:3},{value:"Creating the tree",id:"creating-the-tree",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/RelationsTree"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/RelationsTree"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/RelationsTree/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h2,{id:"showing-your-model-tree-",children:"Showing your model tree \ud83c\udf32"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Among the most common things to do with BIM models, is to show their spatial structure. This is really important, because then you can know better the model and see how elements are hierarchized between them. \ud83d\udd17\nHowever, the IFC schema is not always that intuitive when it comes to create a model tree. Why? You may wonder... and it's because IfcRelContainedInSpatialStructure is not the only IFC relation that takes play in a real model tree. \ud83e\udd2f Luckily, this is already taken into account by That Open Engine's UI when creating a model tree. Let's learn how you can use the Relations Tree!"}),"\n",(0,o.jsx)(n.h3,{id:"-importing-our-libraries",children:"\ud83d\udd96 Importing our Libraries"}),"\n",(0,o.jsx)(n.p,{children:"In this tutorial, we will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"@thatopen/components to set up the barebone of our app."}),"\n",(0,o.jsx)(n.li,{children:"@thatopen/components-front to use some frontend-oriented components."}),"\n",(0,o.jsx)(n.li,{children:"@thatopen/ui to add some simple and cool UI menus."}),"\n",(0,o.jsx)(n.li,{children:"@thatopen/ui-obc to add some cool pre-made UI menus for components."}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import * as OBC from "@thatopen/components";\nimport * as OBCF from "@thatopen/components-front";\nimport * as BUI from "@thatopen/ui";\n// You have to import from "@thatopen/ui-obc"\nimport * as BUIC from "../..";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-initializing-the-ui",children:"\ud83d\udccb Initializing the UI"}),"\n",(0,o.jsx)(n.p,{children:"As always, let's first initialize the UI library. Remember you only have to do it once in your entire app."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\nconst world = worlds.create();\n\nconst sceneComponent = new OBC.SimpleScene(components);\nsceneComponent.setup();\nworld.scene = sceneComponent;\n\nconst viewport = document.createElement("bim-viewport");\nconst rendererComponent = new OBC.SimpleRenderer(components, viewport);\nworld.renderer = rendererComponent;\n\nconst cameraComponent = new OBC.SimpleCamera(components);\nworld.camera = cameraComponent;\n\nviewport.addEventListener("resize", () => {\n rendererComponent.resize();\n cameraComponent.updateAspect();\n});\n\nconst viewerGrids = components.get(OBC.Grids);\nviewerGrids.create(world);\n\ncomponents.init();\n'})}),"\n",(0,o.jsx)(n.h3,{id:"setting-up-the-components",children:"Setting up the components"}),"\n",(0,o.jsxs)(n.p,{children:["First of all, we're going to get the ",(0,o.jsx)(n.code,{children:"FragmentIfcLoader"})," from an existing components instance:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\n"})}),"\n",(0,o.jsx)(n.p,{children:"###\ud83d\udca1 Getting the highlighter\nNow, we will basically get the highlighter and set it up. This will create and configure 2 things:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Selecting: when clicking on an element."}),"\n",(0,o.jsx)(n.li,{children:"Hovering: when hovering the mouse over an element."}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const highlighter = components.get(OBCF.Highlighter);\nhighlighter.setup({ world });\nhighlighter.zoomToSelection = true;\n"})}),"\n",(0,o.jsxs)(n.p,{children:["The step above is super important as none of the existing functional components setup any tool, they just get it as they are! So, if we don't setup the ",(0,o.jsx)(n.code,{children:"FragmentIfcLoader"})," then the wasm path is not going to be defined and an error will arise \ud83e\udd13. Just after we have setup the loader, let's then configure the ",(0,o.jsx)(n.code,{children:"FragmentManager"})," so any time a model is loaded it gets added to some world scene created before:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const fragmentsManager = components.get(OBC.FragmentsManager);\nfragmentsManager.onFragmentsLoaded.add(async (model) => {\n if (world.scene) world.scene.three.add(model);\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"creating-the-tree",children:"Creating the tree"}),"\n",(0,o.jsx)(n.p,{children:"Before using the Relations Tree, you must have the relations of your model indexed. This will ensure the Relations Tree have access to the required information to create the tree. \ud83c\udf32"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const indexer = components.get(OBC.IfcRelationsIndexer);\n\nfragmentsManager.onFragmentsLoaded.add(async (model) => {\n if (model.hasProperties) await indexer.process(model);\n});\n"})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsxs)(n.p,{children:["If you're unsure about how the indexer works, you can take a look at the corresponding ",(0,o.jsx)(n.a,{href:"https://docs.thatopen.com/Tutorials/Components/Core/IfcRelationsIndexer",children:"IfcRelationsIndexer"})," tutorial!"]})}),"\n",(0,o.jsx)(n.p,{children:"Now the model has their relations indexed, we can safely create the corresponding tree. \ud83d\udcaa"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const [relationsTree] = BUIC.tables.relationsTree({\n components,\n models: [],\n});\n\nrelationsTree.preserveStructureOnFilter = true;\n"})}),"\n",(0,o.jsx)(n.p,{children:"As you see, we've passed an empty models list because in the first place there are no models. However, the Relations Tree updates it-self each time a new model comes into the scene! Which makes it really handy to work with.\nGreat! As we already created the Relations Tree instance, let's add it to the HTML page. For it, let's create simple BIM panel component where we include the tree and also a pre-made IFC load button \ud83d\udc47"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n const [loadIfcBtn] = BUIC.buttons.loadIfc({ components });\n\n const onSearch = (e: Event) => {\n const input = e.target as BUI.TextInput;\n relationsTree.queryString = input.value;\n };\n\n return BUI.html`\n \n \n ${loadIfcBtn}\n \n ${relationsTree}\n \n \n `;\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"Finally, let's append the BIM Panel to the page to see the Relations Tree working \ud83d\ude09"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const app = document.getElementById("app") as BUI.Grid;\napp.layouts = {\n main: {\n template: `\n "panel viewport"\n / 30rem 1fr\n `,\n elements: { panel, viewport },\n },\n};\n\napp.layout = "main";\n'})}),"\n",(0,o.jsx)(n.p,{children:"Congratulations! You've now a ready to go user interface that let's you show your model tree. \ud83e\udd73"})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var o=t(6540);const r={},s=o.createContext(r);function i(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/86328980.3502d6fe.js b/build/assets/js/86328980.3502d6fe.js deleted file mode 100644 index a443188f4..000000000 --- a/build/assets/js/86328980.3502d6fe.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8939],{1216:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>i,toc:()=>c});var o=t(4848),r=t(8453);const s={},a=void 0,i={id:"Tutorials/UserInterface/OBC/RelationsTree",title:"RelationsTree",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/RelationsTree")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/RelationsTree.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/RelationsTree",permalink:"/Tutorials/UserInterface/OBC/RelationsTree",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ModelsList",permalink:"/Tutorials/UserInterface/OBC/ModelsList"},next:{title:"TopicsUI",permalink:"/Tutorials/UserInterface/OBC/TopicsUI"}},l={},c=[{value:"Showing your model tree \ud83c\udf32",id:"showing-your-model-tree-",level:2},{value:"Creating the tree",id:"creating-the-tree",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/RelationsTree"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/RelationsTree"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/RelationsTree/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h2,{id:"showing-your-model-tree-",children:"Showing your model tree \ud83c\udf32"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Among the most common things to do with BIM models, is to show their spatial structure. This is really important, because then you can know better the model and see how elements are hierarchized between them. \ud83d\udd17\nHowever, the IFC schema is not always that intuitive when it comes to create a model tree. Why? You may wonder... and it's because IfcRelContainedInSpatialStructure is not the only IFC relation that takes play in a real model tree. \ud83e\udd2f Luckily, this is already taken into account by That Open Engine's UI when creating a model tree. Let's learn how you can use the Relations Tree!"}),"\n",(0,o.jsx)(n.h3,{id:"creating-the-tree",children:"Creating the tree"}),"\n",(0,o.jsx)(n.p,{children:"Before using the Relations Tree, you must have the relations of your model indexed. This will ensure the Relations Tree have access to the required information to create the tree. \ud83c\udf32"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const indexer = components.get(OBC.IfcRelationsIndexer);\n\nfragmentsManager.onFragmentsLoaded.add(async (model) => {\n if (model.hasProperties) await indexer.process(model);\n});\n"})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsxs)(n.p,{children:["If you're unsure about how the indexer works, you can take a look at the corresponding ",(0,o.jsx)(n.a,{href:"https://docs.thatopen.com/Tutorials/Components/Core/IfcRelationsIndexer",children:"IfcRelationsIndexer"})," tutorial!"]})}),"\n",(0,o.jsx)(n.p,{children:"Now the model has their relations indexed, we can safely create the corresponding tree. \ud83d\udcaa"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const [relationsTree] = CUI.tables.relationsTree({\n components,\n models: [],\n});\n\nrelationsTree.preserveStructureOnFilter = true;\n"})}),"\n",(0,o.jsx)(n.p,{children:"As you see, we've passed an empty models list because in the first place there are no models. However, the Relations Tree updates it-self each time a new model comes into the scene! Which makes it really handy to work with.\nGreat! As we already created the Relations Tree instance, let's add it to the HTML page. For it, let's create simple BIM panel component where we include the tree and also a pre-made IFC load button \ud83d\udc47"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n const [loadIfcBtn] = CUI.buttons.loadIfc({ components });\n\n const onSearch = (e: Event) => {\n const input = e.target as BUI.TextInput;\n relationsTree.queryString = input.value;\n };\n\n return BUI.html`\n \n \n ${loadIfcBtn}\n \n ${relationsTree}\n \n \n `;\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"Finally, let's append the BIM Panel to the page to see the Relations Tree working \ud83d\ude09"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const app = document.getElementById("app") as BUI.Grid;\napp.layouts = {\n main: {\n template: `\n "panel viewport"\n / 30rem 1fr\n `,\n elements: { panel, viewport },\n },\n};\n\napp.layout = "main";\n'})}),"\n",(0,o.jsx)(n.p,{children:"Congratulations! You've now a ready to go user interface that let's you show your model tree. \ud83e\udd73"})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>i});var o=t(6540);const r={},s=o.createContext(r);function a(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/87654e65.448f3424.js b/build/assets/js/87654e65.448f3424.js deleted file mode 100644 index 4382feea2..000000000 --- a/build/assets/js/87654e65.448f3424.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[529],{9141:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var o=t(4848),s=t(8453);const r={},i=void 0,a={id:"Tutorials/Components/Core/Worlds",title:"Worlds",description:'window.open("https://thatopen.github.io/engine_components/examples/Worlds")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Core/Worlds.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/Worlds",permalink:"/Tutorials/Components/Core/Worlds",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Viewpoints",permalink:"/Tutorials/Components/Core/Viewpoints"},next:{title:"AngleMeasurement",permalink:"/Tutorials/Components/Front/AngleMeasurement"}},l={},c=[{value:"\ud83c\udf0e Creating our 3D world",id:"-creating-our-3d-world",level:3},{value:"\ud83d\uddbc\ufe0f Getting the container",id:"\ufe0f-getting-the-container",level:3},{value:"\ud83d\ude80 Creating a components instance",id:"-creating-a-components-instance",level:3},{value:"\ud83c\udf0e Setting up the world",id:"-setting-up-the-world",level:3},{value:"\ud83d\udc84 Adding things to our scene",id:"-adding-things-to-our-scene",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/Worlds"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/Worlds"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/Worlds/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"-creating-our-3d-world",children:"\ud83c\udf0e Creating our 3D world"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["In this tutorial you'll learn how to create a simple scene using ",(0,o.jsx)(n.code,{children:"@thatopen/components"}),"."]}),"\n",(0,o.jsx)(n.admonition,{title:"Hello world!",type:"tip",children:(0,o.jsx)(n.p,{children:"A world represents a 3D environment in your application. It consists of a scene, a camera and (optionally) a renderer. You can create multiple worlds and show them in multiple viewports at the same time."})}),"\n",(0,o.jsx)(n.p,{children:"In this tutorial, we will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Three.js"})," to get some 3D entities for our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/ui"})," to add some simple and cool UI menus."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import * as THREE from "three";\nimport * as BUI from "@thatopen/ui";\nimport Stats from "stats.js";\nimport * as OBC from "@thatopen/components";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-getting-the-container",children:"\ud83d\uddbc\ufe0f Getting the container"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Next, we need to tell the library where do we want to render the 3D scene. We have added an DIV element to this HTML page that occupies the whole width and height of the viewport. Let's fetch it by its ID:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-creating-a-components-instance",children:"\ud83d\ude80 Creating a components instance"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["Now we will create a new instance of the ",(0,o.jsx)(n.code,{children:"Components"})," class. This class is the main entry point of the library. It will be used to register and manage all the components in your application."]}),"\n",(0,o.jsx)(n.admonition,{title:"Don't forget to dispose it when you are done!",type:"tip",children:(0,o.jsxs)(n.p,{children:["Once you are done with your application, you need to dispose the ",(0,o.jsx)(n.code,{children:"Components"})," instance to free up the memory. This is a requirement of Three.js, which can't dispose the memory of 3D related elements automatically."]})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const components = new OBC.Components();\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-the-world",children:"\ud83c\udf0e Setting up the world"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["Now we are ready to create our first world. We will use the ",(0,o.jsx)(n.code,{children:"Worlds"})," component to manage all the worlds in your application. Instead of instancing it, we can get it from the ",(0,o.jsx)(n.code,{children:"Components"})," instance. All components are singleton, so this is always a better way to get them."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const worlds = components.get(OBC.Worlds);\n"})}),"\n",(0,o.jsxs)(n.p,{children:["We can create a new world by calling the ",(0,o.jsx)(n.code,{children:"create"})," method of the ",(0,o.jsx)(n.code,{children:"Worlds"})," component. It's a generic method, so we can specify the type of the scene, the camera and the renderer we want to use."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBC.SimpleRenderer\n>();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we can set the scene, the camera and the renderer of the world, and call the init method to start the rendering process."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBC.SimpleRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n"})}),"\n",(0,o.jsxs)(n.p,{children:["We could add some lights, but the SimpleScene class can do that easier for us using its ",(0,o.jsx)(n.code,{children:"setup"})," method:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.setup();\n"})}),"\n",(0,o.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-things-to-our-scene",children:"\ud83d\udc84 Adding things to our scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now we are ready to start adding some 3D entities to our scene. We will add a simple cube:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });\nconst geometry = new THREE.BoxGeometry();\nconst cube = new THREE.Mesh(geometry, material);\nworld.scene.three.add(cube);\n'})}),"\n",(0,o.jsx)(n.p,{children:"Finally, we will make the camera look at the cube:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);\n"})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We'll use the ",(0,o.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We will use the ",(0,o.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,o.jsx)(n.code,{children:"init"})," method of the ",(0,o.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we will create a new panel with some inputs to change the background color of the scene and the intensity of the directional and ambient lights. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,o.jsx)(n.p,{children:"And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const button = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n});\n\ndocument.body.append(button);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"That's it! You have created your first 3D world and added some UI elements to it. You can now play with the inputs to see how the scene changes."})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var o=t(6540);const s={},r=o.createContext(s);function i(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/87654e65.763b4e52.js b/build/assets/js/87654e65.763b4e52.js new file mode 100644 index 000000000..e0bc4f1a3 --- /dev/null +++ b/build/assets/js/87654e65.763b4e52.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[529],{9141:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var o=t(4848),s=t(8453);const r={},i=void 0,a={id:"Tutorials/Components/Core/Worlds",title:"Worlds",description:'window.open("https://thatopen.github.io/engine_components/examples/Worlds")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Core/Worlds.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/Worlds",permalink:"/Tutorials/Components/Core/Worlds",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Viewpoints",permalink:"/Tutorials/Components/Core/Viewpoints"},next:{title:"AngleMeasurement",permalink:"/Tutorials/Components/Front/AngleMeasurement"}},l={},c=[{value:"\ud83c\udf0e Creating our 3D world",id:"-creating-our-3d-world",level:3},{value:"\ud83d\uddbc\ufe0f Getting the container",id:"\ufe0f-getting-the-container",level:3},{value:"\ud83d\ude80 Creating a components instance",id:"-creating-a-components-instance",level:3},{value:"\ud83c\udf0e Setting up the world",id:"-setting-up-the-world",level:3},{value:"\ud83d\udc84 Adding things to our scene",id:"-adding-things-to-our-scene",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/Worlds"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/Worlds"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/Worlds/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"-creating-our-3d-world",children:"\ud83c\udf0e Creating our 3D world"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["In this tutorial you'll learn how to create a simple scene using ",(0,o.jsx)(n.code,{children:"@thatopen/components"}),"."]}),"\n",(0,o.jsx)(n.admonition,{title:"Hello world!",type:"tip",children:(0,o.jsx)(n.p,{children:"A world represents a 3D environment in your application. It consists of a scene, a camera and (optionally) a renderer. You can create multiple worlds and show them in multiple viewports at the same time."})}),"\n",(0,o.jsx)(n.p,{children:"In this tutorial, we will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Three.js"})," to get some 3D entities for our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/ui"})," to add some simple and cool UI menus."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import * as THREE from "three";\nimport * as BUI from "@thatopen/ui";\nimport Stats from "stats.js";\nimport * as OBC from "../..";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-getting-the-container",children:"\ud83d\uddbc\ufe0f Getting the container"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Next, we need to tell the library where do we want to render the 3D scene. We have added an DIV element to this HTML page that occupies the whole width and height of the viewport. Let's fetch it by its ID:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-creating-a-components-instance",children:"\ud83d\ude80 Creating a components instance"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["Now we will create a new instance of the ",(0,o.jsx)(n.code,{children:"Components"})," class. This class is the main entry point of the library. It will be used to register and manage all the components in your application."]}),"\n",(0,o.jsx)(n.admonition,{title:"Don't forget to dispose it when you are done!",type:"tip",children:(0,o.jsxs)(n.p,{children:["Once you are done with your application, you need to dispose the ",(0,o.jsx)(n.code,{children:"Components"})," instance to free up the memory. This is a requirement of Three.js, which can't dispose the memory of 3D related elements automatically."]})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const components = new OBC.Components();\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-the-world",children:"\ud83c\udf0e Setting up the world"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["Now we are ready to create our first world. We will use the ",(0,o.jsx)(n.code,{children:"Worlds"})," component to manage all the worlds in your application. Instead of instancing it, we can get it from the ",(0,o.jsx)(n.code,{children:"Components"})," instance. All components are singleton, so this is always a better way to get them."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const worlds = components.get(OBC.Worlds);\n"})}),"\n",(0,o.jsxs)(n.p,{children:["We can create a new world by calling the ",(0,o.jsx)(n.code,{children:"create"})," method of the ",(0,o.jsx)(n.code,{children:"Worlds"})," component. It's a generic method, so we can specify the type of the scene, the camera and the renderer we want to use."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBC.SimpleRenderer\n>();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we can set the scene, the camera and the renderer of the world, and call the init method to start the rendering process."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBC.SimpleRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n"})}),"\n",(0,o.jsxs)(n.p,{children:["We could add some lights, but the SimpleScene class can do that easier for us using its ",(0,o.jsx)(n.code,{children:"setup"})," method:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.setup();\n"})}),"\n",(0,o.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-things-to-our-scene",children:"\ud83d\udc84 Adding things to our scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now we are ready to start adding some 3D entities to our scene. We will add a simple cube:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const material = new THREE.MeshLambertMaterial({\n color: "#6528D7",\n transparent: true,\n opacity: 0.2,\n});\nconst geometry = new THREE.BoxGeometry();\nconst cube = new THREE.Mesh(geometry, material);\nworld.scene.three.add(cube);\n\ncube.rotation.x += Math.PI / 4.2;\ncube.rotation.y += Math.PI / 4.2;\ncube.rotation.z += Math.PI / 4.2;\ncube.updateMatrixWorld();\n'})}),"\n",(0,o.jsx)(n.p,{children:"Finally, we will make the camera look at the cube:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);\n"})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We'll use the ",(0,o.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We will use the ",(0,o.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,o.jsx)(n.code,{children:"init"})," method of the ",(0,o.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we will create a new panel with some inputs to change the background color of the scene and the intensity of the directional and ambient lights. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,o.jsx)(n.p,{children:"And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const button = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n});\n\ndocument.body.append(button);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"That's it! You have created your first 3D world and added some UI elements to it. You can now play with the inputs to see how the scene changes."})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var o=t(6540);const s={},r=o.createContext(s);function i(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/929d4cd2.4df405f9.js b/build/assets/js/929d4cd2.4df405f9.js deleted file mode 100644 index 4059ddc60..000000000 --- a/build/assets/js/929d4cd2.4df405f9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8836],{2023:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>m,frontMatter:()=>a,metadata:()=>i,toc:()=>c});var s=t(4848),o=t(8453);const a={},r=void 0,i={id:"Tutorials/Components/Front/FaceMeasurement",title:"FaceMeasurement",description:'window.open("https://thatopen.github.io/engine_components/examples/FaceMeasurement")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Front/FaceMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/FaceMeasurement",permalink:"/Tutorials/Components/Front/FaceMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"EdgeMeasurement",permalink:"/Tutorials/Components/Front/EdgeMeasurement"},next:{title:"Highlighter",permalink:"/Tutorials/Components/Front/Highlighter"}},l={},c=[{value:"\ud83d\udcd0 Measuring faces",id:"-measuring-faces",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddf3 Loading a BIM model",id:"-loading-a-bim-model",level:3},{value:"\ud83d\udee0\ufe0f Getting the face measurements",id:"\ufe0f-getting-the-face-measurements",level:3},{value:"\ud83d\uddb1\ufe0f Setting up mouse events",id:"\ufe0f-setting-up-mouse-events",level:3},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{style:{position:"relative"},children:[(0,s.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/FaceMeasurement"}),(0,s.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/FaceMeasurement"),children:"Go Full Screen"})]}),"\n",(0,s.jsx)(n.admonition,{title:"Source",type:"info",children:(0,s.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,s.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/FaceMeasurement/example.ts",children:"here"}),"."]})}),"\n",(0,s.jsx)(n.h3,{id:"-measuring-faces",children:"\ud83d\udcd0 Measuring faces"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an face measurement tool to your end users.\nWe will import:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"three"})," to create some 3D items."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components-front"})," to use some frontend-oriented components."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as THREE from "three";\nimport * as OBC from "@thatopen/components";\nimport * as OBCF from "@thatopen/components-front";\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBCF.PostproductionRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.PostproductionRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,s.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-loading-a-bim-model",children:"\ud83e\uddf3 Loading a BIM model"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file."}),"\n",(0,s.jsx)(n.admonition,{title:"Fragments?",type:"tip",children:(0,s.jsx)(n.p,{children:"If you are not familiar with fragments, check out the IfcLoader tutorial!"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const fragments = new OBC.FragmentsManager(components);\nconst file = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.frag",\n);\nconst data = await file.arrayBuffer();\nconst buffer = new Uint8Array(data);\nconst model = fragments.load(buffer);\nworld.scene.three.add(model);\n\nfor (const child of model.children) {\n if (child instanceof THREE.Mesh) {\n world.meshes.add(child);\n }\n}\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-getting-the-face-measurements",children:"\ud83d\udee0\ufe0f Getting the face measurements"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"First, let's get an instance of the face measurement component and initialize it:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const dimensions = components.get(OBCF.FaceMeasurement);\ndimensions.world = world;\ndimensions.enabled = true;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-setting-up-mouse-events",children:"\ud83d\uddb1\ufe0f Setting up mouse events"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Now, we'll define how to create the edge dimensions. In this case, we'll keep it simple and use the double click event of the container HTML element."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"container.ondblclick = () => dimensions.create();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-deleting-the-dimensions",children:"\ud83e\uddf9 Deleting the Dimensions"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["Now that we know how to make multiple dimensions, we'll learn how to delete them when necessary. Dimensions can be removed using the ",(0,s.jsx)(n.code,{children:"deleteAll()"})," method, which deletes all the created dimensions. You can also use the ",(0,s.jsx)(n.code,{children:"delete()"})," method to just delete one dimension (the one under the mouse cursor). Let's set up some basic key events that allow us to delete, save and recover the dimensions:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'let saved: OBCF.SerializedAreaMeasure[];\n\nwindow.addEventListener("keydown", (event) => {\n if (event.code === "KeyO") {\n dimensions.delete();\n } else if (event.code === "KeyS") {\n saved = dimensions.get();\n dimensions.deleteAll();\n } else if (event.code === "KeyL") {\n if (saved) {\n dimensions.set(saved);\n }\n }\n});\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["We'll use the ",(0,s.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"That's it! You have created an app that can create and delete face dimensions on any 3D object. Congratulations!"})]})}function m(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>i});var s=t(6540);const o={},a=s.createContext(o);function r(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/929d4cd2.fdaaf864.js b/build/assets/js/929d4cd2.fdaaf864.js new file mode 100644 index 000000000..020e9bbf4 --- /dev/null +++ b/build/assets/js/929d4cd2.fdaaf864.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8836],{2023:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>a,default:()=>m,frontMatter:()=>i,metadata:()=>l,toc:()=>c});var s=t(4848),o=t(8453);const i={},a=void 0,l={id:"Tutorials/Components/Front/FaceMeasurement",title:"FaceMeasurement",description:'window.open("https://thatopen.github.io/engine_components/examples/FaceMeasurement")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Front/FaceMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/FaceMeasurement",permalink:"/Tutorials/Components/Front/FaceMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"EdgeMeasurement",permalink:"/Tutorials/Components/Front/EdgeMeasurement"},next:{title:"Highlighter",permalink:"/Tutorials/Components/Front/Highlighter"}},r={},c=[{value:"\ud83d\udcd0 Measuring faces",id:"-measuring-faces",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddf3 Loading a BIM model",id:"-loading-a-bim-model",level:3},{value:"\ud83d\udee0\ufe0f Getting the face measurements",id:"\ufe0f-getting-the-face-measurements",level:3},{value:"\ud83d\uddb1\ufe0f Setting up mouse events",id:"\ufe0f-setting-up-mouse-events",level:3},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{style:{position:"relative"},children:[(0,s.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/FaceMeasurement"}),(0,s.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/FaceMeasurement"),children:"Go Full Screen"})]}),"\n",(0,s.jsx)(n.admonition,{title:"Source",type:"info",children:(0,s.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,s.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/FaceMeasurement/example.ts",children:"here"}),"."]})}),"\n",(0,s.jsx)(n.h3,{id:"-measuring-faces",children:"\ud83d\udcd0 Measuring faces"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an face measurement tool to your end users.\nWe will import:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"three"})," to create some 3D items."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components-front"})," to use some frontend-oriented components."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as THREE from "three";\nimport * as OBC from "@thatopen/components";\nimport * as BUI from "@thatopen/ui";\nimport * as OBCF from "@thatopen/components-front";\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBCF.PostproductionRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.PostproductionRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,s.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-loading-a-bim-model",children:"\ud83e\uddf3 Loading a BIM model"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file."}),"\n",(0,s.jsx)(n.admonition,{title:"Fragments?",type:"tip",children:(0,s.jsx)(n.p,{children:"If you are not familiar with fragments, check out the IfcLoader tutorial!"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const fragments = new OBC.FragmentsManager(components);\nconst file = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.frag",\n);\nconst data = await file.arrayBuffer();\nconst buffer = new Uint8Array(data);\nconst model = fragments.load(buffer);\nworld.scene.three.add(model);\n\nfor (const child of model.children) {\n if (child instanceof THREE.Mesh) {\n world.meshes.add(child);\n }\n}\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-getting-the-face-measurements",children:"\ud83d\udee0\ufe0f Getting the face measurements"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"First, let's get an instance of the face measurement component and initialize it:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const dimensions = components.get(OBCF.FaceMeasurement);\ndimensions.world = world;\ndimensions.enabled = true;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-setting-up-mouse-events",children:"\ud83d\uddb1\ufe0f Setting up mouse events"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Now, we'll define how to create the edge dimensions. In this case, we'll keep it simple and use the double click event of the container HTML element."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"container.ondblclick = () => dimensions.create();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-deleting-the-dimensions",children:"\ud83e\uddf9 Deleting the Dimensions"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["Now that we know how to make multiple dimensions, we'll learn how to delete them when necessary. Dimensions can be removed using the ",(0,s.jsx)(n.code,{children:"deleteAll()"})," method, which deletes all the created dimensions. You can also use the ",(0,s.jsx)(n.code,{children:"delete()"})," method to just delete one dimension (the one under the mouse cursor). Let's set up some basic key events that allow us to delete, save and recover the dimensions:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'let saved: OBCF.SerializedAreaMeasure[];\n\nwindow.addEventListener("keydown", (event) => {\n if (event.code === "KeyO") {\n dimensions.delete();\n } else if (event.code === "KeyS") {\n saved = dimensions.get();\n dimensions.deleteAll();\n } else if (event.code === "KeyL") {\n if (saved) {\n dimensions.set(saved);\n }\n }\n});\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["We'll use the ",(0,s.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["We will use the ",(0,s.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,s.jsx)(n.code,{children:"init"})," method of the ",(0,s.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,s.jsx)(n.p,{children:"Now we will add some UI to have some control over the dimensions we create. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n Create dimension: Double click \n Delete dimension: Press O \n Delete all dimensions: Press S \n Set/Show saved dimensions: Press L \n \n \n \n \n \n \n \n \n\n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,s.jsx)(n.p,{children:"And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const button = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n});\n\ndocument.body.append(button);\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"That's it! You have created an app that can create and delete face dimensions on any 3D object. Congratulations!"})]})}function m(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>l});var s=t(6540);const o={},i=s.createContext(o);function a(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/974d60c2.28a3b1b7.js b/build/assets/js/974d60c2.86cc0465.js similarity index 99% rename from build/assets/js/974d60c2.28a3b1b7.js rename to build/assets/js/974d60c2.86cc0465.js index 84e16c753..7eaa6173d 100644 --- a/build/assets/js/974d60c2.28a3b1b7.js +++ b/build/assets/js/974d60c2.86cc0465.js @@ -1 +1 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[1166],{3460:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>a,frontMatter:()=>l,metadata:()=>r,toc:()=>c});var t=s(4848),i=s(8453);const l={},o="Components",r={id:"api/@thatopen/components/classes/Components",title:"Components",description:"The entry point of the Components library. It can create, delete and access all the components of the library globally, update all the updatable components automatically and dispose all the components, preventing memory leaks.",source:"@site/docs/api/@thatopen/components/classes/Components.md",sourceDirName:"api/@thatopen/components/classes",slug:"/api/@thatopen/components/classes/Components",permalink:"/api/@thatopen/components/classes/Components",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"abstract Component",permalink:"/api/@thatopen/components/classes/Component"},next:{title:"ConfigManager",permalink:"/api/@thatopen/components/classes/ConfigManager"}},d={},c=[{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"list",id:"list",level:3},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"onInit",id:"oninit",level:3},{value:"Remarks",id:"remarks",level:4},{value:"Example",id:"example",level:4},{value:"release",id:"release",level:3},{value:"Methods",id:"methods",level:2},{value:"add()",id:"add",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Throws",id:"throws",level:4},{value:"dispose()",id:"dispose",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"get()",id:"get",level:3},{value:"Type parameters",id:"type-parameters",level:4},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Throws",id:"throws-1",level:4},{value:"init()",id:"init",level:3},{value:"Returns",id:"returns-3",level:4}];function h(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"components",children:"Components"}),"\n",(0,t.jsx)(n.p,{children:"The entry point of the Components library. It can create, delete and access all the components of the library globally, update all the updatable components automatically and dispose all the components, preventing memory leaks."}),"\n",(0,t.jsx)(n.h2,{id:"implements",children:"Implements"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable",children:(0,t.jsx)(n.code,{children:"Disposable"})})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,t.jsx)(n.h3,{id:"enabled",children:"enabled"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"enabled"}),": ",(0,t.jsx)(n.code,{children:"boolean"})," = ",(0,t.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"If disabled, the animation loop will be stopped.\r\nDefault value is false."}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"list",children:"list"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"readonly"})," ",(0,t.jsx)(n.strong,{children:"list"}),": ",(0,t.jsx)(n.code,{children:"Map"}),"<",(0,t.jsx)(n.code,{children:"string"}),", ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Component",children:(0,t.jsx)(n.code,{children:"Component"})}),">"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"The list of components created in this app.\r\nThe keys are UUIDs and the values are instances of the components."}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"ondisposed",children:"onDisposed"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"readonly"})," ",(0,t.jsx)(n.strong,{children:"onDisposed"}),": ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Event",children:(0,t.jsx)(n.code,{children:"Event"})}),"<",(0,t.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable#ondisposed",children:"Disposable.onDisposed"})}),"\n",(0,t.jsx)(n.h4,{id:"implementation-of",children:"Implementation of"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable",children:(0,t.jsx)(n.code,{children:"Disposable"})})," . ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable#ondisposed",children:(0,t.jsx)(n.code,{children:"onDisposed"})})]}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"oninit",children:"onInit"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"readonly"})," ",(0,t.jsx)(n.strong,{children:"onInit"}),": ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Event",children:(0,t.jsx)(n.code,{children:"Event"})}),"<",(0,t.jsx)(n.code,{children:"undefined"}),">"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Event that triggers the Components instance is initialized."}),"\n",(0,t.jsx)(n.h4,{id:"remarks",children:"Remarks"}),"\n",(0,t.jsxs)(n.p,{children:["This event is triggered once when the ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Components#init",children:"Components.init"})," method has been called and finish processing.\r\nThis is useful to set configuration placeholders that need to be executed when the components instance is initialized.\r\nFor example, enabling and configuring custom effects in a post-production renderer."]}),"\n",(0,t.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"const components = new Components();\r\ncomponents.onInit.add(() => {\r\n // Enable custom effects in the post-production renderer\r\n // or any other operation dependant on the component initialization\r\n});\r\ncomponents.init();\n"})}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"release",children:"release"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"static"})," ",(0,t.jsx)(n.code,{children:"readonly"})," ",(0,t.jsx)(n.strong,{children:"release"}),": ",(0,t.jsx)(n.code,{children:'"2.4.2"'})," = ",(0,t.jsx)(n.code,{children:'"2.4.2"'})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"The version of the @thatopen/components library."}),"\n",(0,t.jsx)(n.h2,{id:"methods",children:"Methods"}),"\n",(0,t.jsx)(n.h3,{id:"add",children:"add()"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"Internal"})}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"add"}),"(",(0,t.jsx)(n.code,{children:"uuid"}),", ",(0,t.jsx)(n.code,{children:"instance"}),"): ",(0,t.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Adds a component to the list of components.\r\nThrows an error if a component with the same UUID already exists."}),"\n",(0,t.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.code,{children:"uuid"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.code,{children:"string"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"The unique identifier of the component."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.code,{children:"instance"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Component",children:(0,t.jsx)(n.code,{children:"Component"})})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"The instance of the component to be added."})]})]})]}),"\n",(0,t.jsx)(n.h4,{id:"returns",children:"Returns"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"void"})}),"\n",(0,t.jsx)(n.h4,{id:"throws",children:"Throws"}),"\n",(0,t.jsx)(n.p,{children:"Will throw an error if a component with the same UUID already exists."}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"dispose",children:"dispose()"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"dispose"}),"(): ",(0,t.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Disposes the memory of all the components and tools of this instance of\r\nthe library. A memory leak will be created if:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"An instance of the library ends up out of scope and this function isn't\r\ncalled. This is especially relevant in Single Page Applications (React,\r\nAngular, Vue, etc)."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Any of the objects of this instance (meshes, geometries,materials, etc) is\r\nreferenced by a reference type (object or array)."}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["You can learn more about how Three.js handles memory leaks\r\n",(0,t.jsx)(n.a,{href:"https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects",children:"here"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"void"})}),"\n",(0,t.jsx)(n.h4,{id:"implementation-of-1",children:"Implementation of"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable",children:(0,t.jsx)(n.code,{children:"Disposable"})})," . ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable#dispose",children:(0,t.jsx)(n.code,{children:"dispose"})})]}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"get",children:"get()"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"Internal"})}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"get"}),"<",(0,t.jsx)(n.code,{children:"U"}),">(",(0,t.jsx)(n.code,{children:"Component"}),"): ",(0,t.jsx)(n.code,{children:"U"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Retrieves a component instance by its constructor function.\r\nIf the component does not exist in the list, it will be created and added."}),"\n",(0,t.jsx)(n.h4,{id:"type-parameters",children:"Type parameters"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Type parameter"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,t.jsx)(n.tbody,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{style:{textAlign:"left"},children:[(0,t.jsx)(n.code,{children:"U"})," ",(0,t.jsx)(n.em,{children:"extends"})," ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Component",children:(0,t.jsx)(n.code,{children:"Component"})})]}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"The type of the component to retrieve."})]})})]}),"\n",(0,t.jsx)(n.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,t.jsx)(n.tbody,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.code,{children:"Component"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.code,{children:"Object"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"The constructor function of the component to retrieve."})]})})]}),"\n",(0,t.jsx)(n.h4,{id:"returns-2",children:"Returns"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"U"})}),"\n",(0,t.jsx)(n.p,{children:"The instance of the requested component."}),"\n",(0,t.jsx)(n.h4,{id:"throws-1",children:"Throws"}),"\n",(0,t.jsx)(n.p,{children:"Will throw an error if a component with the same UUID already exists."}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"init",children:"init()"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"init"}),"(): ",(0,t.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Initializes the Components instance.\r\nThis method starts the animation loop, sets the enabled flag to true,\r\nand calls the update method."}),"\n",(0,t.jsx)(n.h4,{id:"returns-3",children:"Returns"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"void"})})]})}function a(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(h,{...e})}):h(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>r});var t=s(6540);const i={},l=t.createContext(i);function o(e){const n=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),t.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[1166],{3460:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>a,frontMatter:()=>l,metadata:()=>r,toc:()=>c});var t=s(4848),i=s(8453);const l={},o="Components",r={id:"api/@thatopen/components/classes/Components",title:"Components",description:"The entry point of the Components library. It can create, delete and access all the components of the library globally, update all the updatable components automatically and dispose all the components, preventing memory leaks.",source:"@site/docs/api/@thatopen/components/classes/Components.md",sourceDirName:"api/@thatopen/components/classes",slug:"/api/@thatopen/components/classes/Components",permalink:"/api/@thatopen/components/classes/Components",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"abstract Component",permalink:"/api/@thatopen/components/classes/Component"},next:{title:"ConfigManager",permalink:"/api/@thatopen/components/classes/ConfigManager"}},d={},c=[{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"list",id:"list",level:3},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"onInit",id:"oninit",level:3},{value:"Remarks",id:"remarks",level:4},{value:"Example",id:"example",level:4},{value:"release",id:"release",level:3},{value:"Methods",id:"methods",level:2},{value:"add()",id:"add",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Throws",id:"throws",level:4},{value:"dispose()",id:"dispose",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"get()",id:"get",level:3},{value:"Type parameters",id:"type-parameters",level:4},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Throws",id:"throws-1",level:4},{value:"init()",id:"init",level:3},{value:"Returns",id:"returns-3",level:4}];function h(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"components",children:"Components"}),"\n",(0,t.jsx)(n.p,{children:"The entry point of the Components library. It can create, delete and access all the components of the library globally, update all the updatable components automatically and dispose all the components, preventing memory leaks."}),"\n",(0,t.jsx)(n.h2,{id:"implements",children:"Implements"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable",children:(0,t.jsx)(n.code,{children:"Disposable"})})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,t.jsx)(n.h3,{id:"enabled",children:"enabled"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"enabled"}),": ",(0,t.jsx)(n.code,{children:"boolean"})," = ",(0,t.jsx)(n.code,{children:"false"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"If disabled, the animation loop will be stopped.\r\nDefault value is false."}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"list",children:"list"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"readonly"})," ",(0,t.jsx)(n.strong,{children:"list"}),": ",(0,t.jsx)(n.code,{children:"Map"}),"<",(0,t.jsx)(n.code,{children:"string"}),", ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Component",children:(0,t.jsx)(n.code,{children:"Component"})}),">"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"The list of components created in this app.\r\nThe keys are UUIDs and the values are instances of the components."}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"ondisposed",children:"onDisposed"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"readonly"})," ",(0,t.jsx)(n.strong,{children:"onDisposed"}),": ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Event",children:(0,t.jsx)(n.code,{children:"Event"})}),"<",(0,t.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable#ondisposed",children:"Disposable.onDisposed"})}),"\n",(0,t.jsx)(n.h4,{id:"implementation-of",children:"Implementation of"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable",children:(0,t.jsx)(n.code,{children:"Disposable"})})," . ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable#ondisposed",children:(0,t.jsx)(n.code,{children:"onDisposed"})})]}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"oninit",children:"onInit"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"readonly"})," ",(0,t.jsx)(n.strong,{children:"onInit"}),": ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Event",children:(0,t.jsx)(n.code,{children:"Event"})}),"<",(0,t.jsx)(n.code,{children:"undefined"}),">"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Event that triggers the Components instance is initialized."}),"\n",(0,t.jsx)(n.h4,{id:"remarks",children:"Remarks"}),"\n",(0,t.jsxs)(n.p,{children:["This event is triggered once when the ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Components#init",children:"Components.init"})," method has been called and finish processing.\r\nThis is useful to set configuration placeholders that need to be executed when the components instance is initialized.\r\nFor example, enabling and configuring custom effects in a post-production renderer."]}),"\n",(0,t.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"const components = new Components();\r\ncomponents.onInit.add(() => {\r\n // Enable custom effects in the post-production renderer\r\n // or any other operation dependant on the component initialization\r\n});\r\ncomponents.init();\n"})}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"release",children:"release"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"static"})," ",(0,t.jsx)(n.code,{children:"readonly"})," ",(0,t.jsx)(n.strong,{children:"release"}),": ",(0,t.jsx)(n.code,{children:'"2.4.4"'})," = ",(0,t.jsx)(n.code,{children:'"2.4.4"'})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"The version of the @thatopen/components library."}),"\n",(0,t.jsx)(n.h2,{id:"methods",children:"Methods"}),"\n",(0,t.jsx)(n.h3,{id:"add",children:"add()"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"Internal"})}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"add"}),"(",(0,t.jsx)(n.code,{children:"uuid"}),", ",(0,t.jsx)(n.code,{children:"instance"}),"): ",(0,t.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Adds a component to the list of components.\r\nThrows an error if a component with the same UUID already exists."}),"\n",(0,t.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.code,{children:"uuid"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.code,{children:"string"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"The unique identifier of the component."})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.code,{children:"instance"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Component",children:(0,t.jsx)(n.code,{children:"Component"})})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"The instance of the component to be added."})]})]})]}),"\n",(0,t.jsx)(n.h4,{id:"returns",children:"Returns"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"void"})}),"\n",(0,t.jsx)(n.h4,{id:"throws",children:"Throws"}),"\n",(0,t.jsx)(n.p,{children:"Will throw an error if a component with the same UUID already exists."}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"dispose",children:"dispose()"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"dispose"}),"(): ",(0,t.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Disposes the memory of all the components and tools of this instance of\r\nthe library. A memory leak will be created if:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"An instance of the library ends up out of scope and this function isn't\r\ncalled. This is especially relevant in Single Page Applications (React,\r\nAngular, Vue, etc)."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Any of the objects of this instance (meshes, geometries,materials, etc) is\r\nreferenced by a reference type (object or array)."}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["You can learn more about how Three.js handles memory leaks\r\n",(0,t.jsx)(n.a,{href:"https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects",children:"here"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"void"})}),"\n",(0,t.jsx)(n.h4,{id:"implementation-of-1",children:"Implementation of"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable",children:(0,t.jsx)(n.code,{children:"Disposable"})})," . ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/interfaces/Disposable#dispose",children:(0,t.jsx)(n.code,{children:"dispose"})})]}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"get",children:"get()"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"Internal"})}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"get"}),"<",(0,t.jsx)(n.code,{children:"U"}),">(",(0,t.jsx)(n.code,{children:"Component"}),"): ",(0,t.jsx)(n.code,{children:"U"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Retrieves a component instance by its constructor function.\r\nIf the component does not exist in the list, it will be created and added."}),"\n",(0,t.jsx)(n.h4,{id:"type-parameters",children:"Type parameters"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Type parameter"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,t.jsx)(n.tbody,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{style:{textAlign:"left"},children:[(0,t.jsx)(n.code,{children:"U"})," ",(0,t.jsx)(n.em,{children:"extends"})," ",(0,t.jsx)(n.a,{href:"/api/@thatopen/components/classes/Component",children:(0,t.jsx)(n.code,{children:"Component"})})]}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"The type of the component to retrieve."})]})})]}),"\n",(0,t.jsx)(n.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,t.jsx)(n.tbody,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.code,{children:"Component"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.code,{children:"Object"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"The constructor function of the component to retrieve."})]})})]}),"\n",(0,t.jsx)(n.h4,{id:"returns-2",children:"Returns"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"U"})}),"\n",(0,t.jsx)(n.p,{children:"The instance of the requested component."}),"\n",(0,t.jsx)(n.h4,{id:"throws-1",children:"Throws"}),"\n",(0,t.jsx)(n.p,{children:"Will throw an error if a component with the same UUID already exists."}),"\n",(0,t.jsx)(n.hr,{}),"\n",(0,t.jsx)(n.h3,{id:"init",children:"init()"}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"init"}),"(): ",(0,t.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Initializes the Components instance.\r\nThis method starts the animation loop, sets the enabled flag to true,\r\nand calls the update method."}),"\n",(0,t.jsx)(n.h4,{id:"returns-3",children:"Returns"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"void"})})]})}function a(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(h,{...e})}):h(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>r});var t=s(6540);const i={},l=t.createContext(i);function o(e){const n=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),t.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/9f1bf482.5b2eb7e4.js b/build/assets/js/9f1bf482.5b2eb7e4.js deleted file mode 100644 index 1b2270810..000000000 --- a/build/assets/js/9f1bf482.5b2eb7e4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[6423],{4263:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>l,toc:()=>r});var o=n(4848),a=n(8453);const s={},i=void 0,l={id:"Tutorials/UserInterface/Core/Component",title:"Component",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/Component")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/Core/Component.mdx",sourceDirName:"Tutorials/UserInterface/Core",slug:"/Tutorials/UserInterface/Core/Component",permalink:"/Tutorials/UserInterface/Core/Component",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"UserInterface",permalink:"/Tutorials/UserInterface/"},next:{title:"Table",permalink:"/Tutorials/UserInterface/Core/Table/"}},c={},r=[{value:"Leveling up your app with custom components! \ud83d\udd0c",id:"leveling-up-your-app-with-custom-components-",level:2},{value:"Creating an stateless component",id:"creating-an-stateless-component",level:3},{value:"Creating a statefull component",id:"creating-a-statefull-component",level:3},{value:"Nesting components",id:"nesting-components",level:3}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/Component"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/Component"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(t.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(t.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(t.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/core/src/core/Component/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(t.h2,{id:"leveling-up-your-app-with-custom-components-",children:"Leveling up your app with custom components! \ud83d\udd0c"}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsxs)(t.p,{children:["One of the greatest things about the library is that you can create your own reactive and non reactive elements (statefull and stateless components respectively) in a very simple and efficient way, all thanks to the power of ",(0,o.jsx)(t.a,{href:"https://lit.dev/docs/libraries/standalone-templates/",children:"lit-html"})," \ud83d\udcaa.\nThe ",(0,o.jsx)(t.code,{children:"Component"})," class has a static method to create functional components (UI defined as a function) that can be updated anytime. The method is ",(0,o.jsx)(t.code,{children:"Component.create"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"note",children:(0,o.jsxs)(t.p,{children:["Despite the ",(0,o.jsx)(t.code,{children:"Component"})," is a class that can be instantiated or extended, from a developer perspective using the library is most likely it will only use the create method."]})}),"\n",(0,o.jsx)(t.h3,{id:"creating-an-stateless-component",children:"Creating an stateless component"}),"\n",(0,o.jsx)(t.p,{children:"To start learning how to create custom components, let's create a custom component that uses the panel section:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const statelessPanelSection = BUI.Component.create(() => {\n return BUI.html`\n \n \n \n `;\n});\n'})}),"\n",(0,o.jsx)(t.admonition,{type:"warning",children:(0,o.jsxs)(t.p,{children:["Remember to first call ",(0,o.jsx)(t.code,{children:"Manager.init()"})," before anything else!"]})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"Component.create"})," requires you to provide a function declaration that returns an HTML string made with the ",(0,o.jsx)(t.code,{children:"html"})," tag function, and the result of the function is the HTMLElement it self."]}),"\n",(0,o.jsx)(t.admonition,{type:"note",children:(0,o.jsx)(t.p,{children:"Tag functions are special declarations that are always set before a template literal to process the string."})}),"\n",(0,o.jsxs)(t.p,{children:["Did you notice the component is named ",(0,o.jsx)(t.code,{children:"statelessPanelSection"}),"? Well, the reason is because components can have an optional state. Technically speaking, that makes the create method to have two overloads: one for components with state (statefull) and another for components without state (stateless).\nThe main difference is that statefull components lets you update them with new states (so the UI component will efficiently re-render and display new data) while stateless components never needs to be updated as they are static.\nThe component we just created is stateless, because it doesn't have any state in which its user interface depends on."]}),"\n",(0,o.jsx)(t.h3,{id:"creating-a-statefull-component",children:"Creating a statefull component"}),"\n",(0,o.jsx)(t.p,{children:"Now, let's take a look at how to create a component that can be updated based on state changes:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'interface PanelSectionUIState {\n label: string;\n counter: number;\n}\n\nconst [statefullPanelSection, updateStatefullPanelSection] =\n BUI.Component.create(\n (state: PanelSectionUIState) => {\n const { label, counter } = state;\n const msg = `This panel section has been updated ${counter} ${counter === 1 ? "time" : "times"}`;\n return BUI.html`\n \n ${msg}\n \n `;\n },\n { label: "Statefull Panel Section", counter: 0 },\n );\n'})}),"\n",(0,o.jsx)(t.p,{children:"When you pass an object as the argument in your create function, the component has now become statefull. As you see, there are a couple of differences between the stateless and statefull components:"}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsx)(t.li,{children:"The statefull component requires an state object (it must be an object) to be passed in the function declaration. Think on this as the classic properties object you pass to a component in a framework like React."}),"\n",(0,o.jsxs)(t.li,{children:["When the component is statefull, ",(0,o.jsx)(t.code,{children:"Component.create"})," must have a second argument to specify the initial state of the component."]}),"\n",(0,o.jsxs)(t.li,{children:["Now, ",(0,o.jsx)(t.code,{children:"Component.create"})," does not return the HTMLElement it self, but an array where the first item is the HTMLElement and second is a function to update the component based on an updated state. Think on this as when you use the useState hook in frameworks like React."]}),"\n"]}),"\n",(0,o.jsx)(t.admonition,{type:"note",children:(0,o.jsx)(t.p,{children:"As for now, a statefull component can't update itself! However, you can nest other components that updates the state of some other."})}),"\n",(0,o.jsx)(t.h3,{id:"nesting-components",children:"Nesting components"}),"\n",(0,o.jsx)(t.p,{children:"Now, in order to see the two components in action, let's create a third component to integrate (nest) the two previous:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n let counter = 0;\n const onUpdateBtnClick = () => {\n counter++;\n if (counter >= 5) {\n updateStatefullPanelSection({\n label: "Powered Statefull Panel Section \ud83d\udcaa",\n counter,\n });\n } else {\n updateStatefullPanelSection({ counter });\n }\n };\n\n return BUI.html`\n \n \n \n \n ${statelessPanelSection}\n ${statefullPanelSection}\n \n `;\n});\n'})}),"\n",(0,o.jsxs)(t.p,{children:["As you see, the create function doesn't need to immediately return the HTML, but you can also do any other logic you want inside. In this case, the logic adds a listener to ",(0,o.jsx)(t.code,{children:"bim-button"})," in order to update the state of the statefullPanelSection we created earlier. A couple of things to notice here:"]}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsx)(t.li,{children:"You're not forced to update the whole component state, but just the things you need. In this case, we just updated the panel section label in case the counter is greater than or equals to 5. However, in this case the counter is always updated."}),"\n",(0,o.jsx)(t.li,{children:"Despite we updated the component inside the logic of the panel, you can update your statefull components from anywhere in your code by just using the update function."}),"\n",(0,o.jsx)(t.li,{children:"You can nest any component in any other: statefull in stateless, stateless in stateless, etc. In this case, panel is a stateless component, but it has an statefull component inside. That means contents of a stateless component can be updated but because that content is a statefull component."}),"\n",(0,o.jsxs)(t.li,{children:["You see how we integrated the two previous components into the panel? Yes, its as easy as adding them as an expression (",(0,o.jsx)(t.code,{children:"${statelessPanelSection}"})," and ",(0,o.jsx)(t.code,{children:"${statefullPanelSection}"})," in this case)."]}),"\n"]}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["In order to know the syntax you can write inside the template literal tagged by the html function, look at the ",(0,o.jsx)(t.a,{href:"https://lit.dev/docs/templates/overview/",children:"lit-html"})," documentation."]})}),"\n",(0,o.jsx)(t.p,{children:"Finally, you can add your panel component anywhere you want as its an HTMLElement just like any other!"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"document.body.append(panel);\n"})}),"\n",(0,o.jsx)(t.p,{children:"Congratulations! You already know how to create your own custom reactive components. Don't stop learning! Take a look at more tutorials in the documentation \ud83d\ude42."}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["The complementary packages of the library such as ",(0,o.jsx)(t.code,{children:"@thatopen/ui-obc"})," have premade functional components just like the ones we've learned to create in this tutorial, so you don't need to bother to create them by yourself \ud83d\ude09"]})})]})}function d(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>l});var o=n(6540);const a={},s=o.createContext(a);function i(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/9f1bf482.66272c3c.js b/build/assets/js/9f1bf482.66272c3c.js new file mode 100644 index 000000000..6d3e889ae --- /dev/null +++ b/build/assets/js/9f1bf482.66272c3c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[6423],{4263:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>l,toc:()=>r});var o=n(4848),a=n(8453);const s={},i=void 0,l={id:"Tutorials/UserInterface/Core/Component",title:"Component",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/Component")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/Core/Component.mdx",sourceDirName:"Tutorials/UserInterface/Core",slug:"/Tutorials/UserInterface/Core/Component",permalink:"/Tutorials/UserInterface/Core/Component",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"UserInterface",permalink:"/Tutorials/UserInterface/"},next:{title:"Table",permalink:"/Tutorials/UserInterface/Core/Table/"}},c={},r=[{value:"Leveling up your app with custom components! \ud83d\udd0c",id:"leveling-up-your-app-with-custom-components-",level:2},{value:"Importing the libraries:",id:"importing-the-libraries",level:3},{value:"\ud83d\udccb Initialising the UI",id:"-initialising-the-ui",level:3},{value:"Creating an stateless component",id:"creating-an-stateless-component",level:3},{value:"Creating a statefull component",id:"creating-a-statefull-component",level:3},{value:"Nesting components",id:"nesting-components",level:3}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/Component"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/Component"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(t.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(t.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(t.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/core/src/core/Component/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(t.h2,{id:"leveling-up-your-app-with-custom-components-",children:"Leveling up your app with custom components! \ud83d\udd0c"}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsxs)(t.p,{children:["One of the greatest things about the library is that you can create your own reactive and non reactive elements (statefull and stateless components respectively) in a very simple and efficient way, all thanks to the power of ",(0,o.jsx)(t.a,{href:"https://lit.dev/docs/libraries/standalone-templates/",children:"lit-html"})," \ud83d\udcaa.\nThe ",(0,o.jsx)(t.code,{children:"Component"})," class has a static method to create functional components (UI defined as a function) that can be updated anytime. The method is ",(0,o.jsx)(t.code,{children:"Component.create"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"note",children:(0,o.jsxs)(t.p,{children:["Despite the ",(0,o.jsx)(t.code,{children:"Component"})," is a class that can be instantiated or extended, from a developer perspective using the library is most likely it will only use the create method."]})}),"\n",(0,o.jsx)(t.h3,{id:"importing-the-libraries",children:"Importing the libraries:"}),"\n",(0,o.jsx)(t.p,{children:"In this tutorial, we will import:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"@thatopen/ui to add some simple and cool UI menus."}),"\n"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'// You have to import from "@thatopen/ui"\nimport * as BUI from "../..";\n'})}),"\n",(0,o.jsx)(t.h3,{id:"-initialising-the-ui",children:"\ud83d\udccb Initialising the UI"}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsxs)(t.p,{children:["We will use the ",(0,o.jsx)(t.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. For that, we need to call the ",(0,o.jsx)(t.code,{children:"init"})," method of the ",(0,o.jsx)(t.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(t.h3,{id:"creating-an-stateless-component",children:"Creating an stateless component"}),"\n",(0,o.jsx)(t.p,{children:"To start learning how to create custom components, let's create a custom component that uses the panel section:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const statelessPanelSection = BUI.Component.create(() => {\n return BUI.html`\n \n \n \n `;\n});\n'})}),"\n",(0,o.jsx)(t.admonition,{type:"warning",children:(0,o.jsxs)(t.p,{children:["Remember to first call ",(0,o.jsx)(t.code,{children:"Manager.init()"})," before anything else!"]})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"Component.create"})," requires you to provide a function declaration that returns an HTML string made with the ",(0,o.jsx)(t.code,{children:"html"})," tag function, and the result of the function is the HTMLElement it self."]}),"\n",(0,o.jsx)(t.admonition,{type:"note",children:(0,o.jsx)(t.p,{children:"Tag functions are special declarations that are always set before a template literal to process the string."})}),"\n",(0,o.jsxs)(t.p,{children:["Did you notice the component is named ",(0,o.jsx)(t.code,{children:"statelessPanelSection"}),"? Well, the reason is because components can have an optional state. Technically speaking, that makes the create method to have two overloads: one for components with state (statefull) and another for components without state (stateless).\nThe main difference is that statefull components lets you update them with new states (so the UI component will efficiently re-render and display new data) while stateless components never needs to be updated as they are static.\nThe component we just created is stateless, because it doesn't have any state in which its user interface depends on."]}),"\n",(0,o.jsx)(t.h3,{id:"creating-a-statefull-component",children:"Creating a statefull component"}),"\n",(0,o.jsx)(t.p,{children:"Now, let's take a look at how to create a component that can be updated based on state changes:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'interface PanelSectionUIState {\n label: string;\n counter: number;\n}\n\nconst [statefullPanelSection, updateStatefullPanelSection] =\n BUI.Component.create(\n (state: PanelSectionUIState) => {\n const { label, counter } = state;\n const msg = `This panel section has been updated ${counter} ${counter === 1 ? "time" : "times"}`;\n return BUI.html`\n \n ${msg}\n \n `;\n },\n { label: "Statefull Panel Section", counter: 0 },\n );\n'})}),"\n",(0,o.jsx)(t.p,{children:"When you pass an object as the argument in your create function, the component has now become statefull. As you see, there are a couple of differences between the stateless and statefull components:"}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsx)(t.li,{children:"The statefull component requires an state object (it must be an object) to be passed in the function declaration. Think on this as the classic properties object you pass to a component in a framework like React."}),"\n",(0,o.jsxs)(t.li,{children:["When the component is statefull, ",(0,o.jsx)(t.code,{children:"Component.create"})," must have a second argument to specify the initial state of the component."]}),"\n",(0,o.jsxs)(t.li,{children:["Now, ",(0,o.jsx)(t.code,{children:"Component.create"})," does not return the HTMLElement it self, but an array where the first item is the HTMLElement and second is a function to update the component based on an updated state. Think on this as when you use the useState hook in frameworks like React."]}),"\n"]}),"\n",(0,o.jsx)(t.admonition,{type:"note",children:(0,o.jsx)(t.p,{children:"As for now, a statefull component can't update itself! However, you can nest other components that updates the state of some other."})}),"\n",(0,o.jsx)(t.h3,{id:"nesting-components",children:"Nesting components"}),"\n",(0,o.jsx)(t.p,{children:"Now, in order to see the two components in action, let's create a third component to integrate (nest) the two previous:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n let counter = 0;\n const onUpdateBtnClick = () => {\n counter++;\n if (counter >= 5) {\n updateStatefullPanelSection({\n label: "Powered Statefull Panel Section \ud83d\udcaa",\n counter,\n });\n } else {\n updateStatefullPanelSection({ counter });\n }\n };\n\n return BUI.html`\n \n \n \n \n ${statelessPanelSection}\n ${statefullPanelSection}\n \n `;\n});\n'})}),"\n",(0,o.jsxs)(t.p,{children:["As you see, the create function doesn't need to immediately return the HTML, but you can also do any other logic you want inside. In this case, the logic adds a listener to ",(0,o.jsx)(t.code,{children:"bim-button"})," in order to update the state of the statefullPanelSection we created earlier. A couple of things to notice here:"]}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsx)(t.li,{children:"You're not forced to update the whole component state, but just the things you need. In this case, we just updated the panel section label in case the counter is greater than or equals to 5. However, in this case the counter is always updated."}),"\n",(0,o.jsx)(t.li,{children:"Despite we updated the component inside the logic of the panel, you can update your statefull components from anywhere in your code by just using the update function."}),"\n",(0,o.jsx)(t.li,{children:"You can nest any component in any other: statefull in stateless, stateless in stateless, etc. In this case, panel is a stateless component, but it has an statefull component inside. That means contents of a stateless component can be updated but because that content is a statefull component."}),"\n",(0,o.jsxs)(t.li,{children:["You see how we integrated the two previous components into the panel? Yes, its as easy as adding them as an expression (",(0,o.jsx)(t.code,{children:"${statelessPanelSection}"})," and ",(0,o.jsx)(t.code,{children:"${statefullPanelSection}"})," in this case)."]}),"\n"]}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["In order to know the syntax you can write inside the template literal tagged by the html function, look at the ",(0,o.jsx)(t.a,{href:"https://lit.dev/docs/templates/overview/",children:"lit-html"})," documentation."]})}),"\n",(0,o.jsx)(t.p,{children:"Finally, you can add your panel component anywhere you want as its an HTMLElement just like any other!"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"document.body.append(panel);\n"})}),"\n",(0,o.jsx)(t.p,{children:"Congratulations! You already know how to create your own custom reactive components. Don't stop learning! Take a look at more tutorials in the documentation \ud83d\ude42."}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["The complementary packages of the library such as ",(0,o.jsx)(t.code,{children:"@thatopen/ui-obc"})," have premade functional components just like the ones we've learned to create in this tutorial, so you don't need to bother to create them by yourself \ud83d\ude09"]})})]})}function d(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>l});var o=n(6540);const a={},s=o.createContext(a);function i(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/a0020ecd.3d707323.js b/build/assets/js/a0020ecd.3d707323.js deleted file mode 100644 index 2d25ac317..000000000 --- a/build/assets/js/a0020ecd.3d707323.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[3618],{5409:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>l,toc:()=>o});var n=r(4848),s=r(8453);const i={},a="StreamSerializer",l={id:"api/@thatopen/fragments/classes/StreamSerializer",title:"StreamSerializer",description:"A class for serializing and deserializing geometry data in a streamed format.",source:"@site/docs/api/@thatopen/fragments/classes/StreamSerializer.md",sourceDirName:"api/@thatopen/fragments/classes",slug:"/api/@thatopen/fragments/classes/StreamSerializer",permalink:"/api/@thatopen/fragments/classes/StreamSerializer",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Serializer",permalink:"/api/@thatopen/fragments/classes/Serializer"},next:{title:"FragmentIdMap",permalink:"/api/@thatopen/fragments/interfaces/FragmentIdMap"}},d={},o=[{value:"Methods",id:"methods",level:2},{value:"export()",id:"export",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"import()",id:"import",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Throws",id:"throws",level:4}];function c(e){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"streamserializer",children:"StreamSerializer"}),"\n",(0,n.jsx)(t.p,{children:"A class for serializing and deserializing geometry data in a streamed format."}),"\n",(0,n.jsx)(t.h2,{id:"methods",children:"Methods"}),"\n",(0,n.jsx)(t.h3,{id:"export",children:"export()"}),"\n",(0,n.jsxs)(t.blockquote,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"export"}),"(",(0,n.jsx)(t.code,{children:"geometries"}),"): ",(0,n.jsx)(t.code,{children:"Uint8Array"})]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"Exports geometry data to a byte array in a streamed format."}),"\n",(0,n.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsx)(t.tbody,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.code,{children:"geometries"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/type-aliases/StreamedGeometries",children:(0,n.jsx)(t.code,{children:"StreamedGeometries"})})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"A Map of geometry IDs to their respective position, normal, and index arrays."})]})})]}),"\n",(0,n.jsx)(t.h4,{id:"returns",children:"Returns"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.code,{children:"Uint8Array"})}),"\n",(0,n.jsx)(t.p,{children:"A Uint8Array containing the serialized geometry data."}),"\n",(0,n.jsx)(t.hr,{}),"\n",(0,n.jsx)(t.h3,{id:"import",children:"import()"}),"\n",(0,n.jsxs)(t.blockquote,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"import"}),"(",(0,n.jsx)(t.code,{children:"bytes"}),"): ",(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/type-aliases/StreamedGeometries",children:(0,n.jsx)(t.code,{children:"StreamedGeometries"})})]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"Imports geometry data from a byte array in a streamed format."}),"\n",(0,n.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,n.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsx)(t.tbody,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.code,{children:"bytes"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:(0,n.jsx)(t.code,{children:"Uint8Array"})}),(0,n.jsx)(t.td,{style:{textAlign:"left"},children:"The byte array containing the serialized geometry data."})]})})]}),"\n",(0,n.jsx)(t.h4,{id:"returns-1",children:"Returns"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"/api/@thatopen/fragments/type-aliases/StreamedGeometries",children:(0,n.jsx)(t.code,{children:"StreamedGeometries"})})}),"\n",(0,n.jsx)(t.p,{children:"A Map of geometry IDs to their respective position, normal, and index arrays."}),"\n",(0,n.jsx)(t.h4,{id:"throws",children:"Throws"}),"\n",(0,n.jsx)(t.p,{children:"Will throw an error if the geometry ID is not found."})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},8453:(e,t,r)=>{r.d(t,{R:()=>a,x:()=>l});var n=r(6540);const s={},i=n.createContext(s);function a(e){const t=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/a599bc11.2fd61a8e.js b/build/assets/js/a599bc11.d50c6f8f.js similarity index 87% rename from build/assets/js/a599bc11.2fd61a8e.js rename to build/assets/js/a599bc11.d50c6f8f.js index 769563954..8e0ce69df 100644 --- a/build/assets/js/a599bc11.2fd61a8e.js +++ b/build/assets/js/a599bc11.d50c6f8f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[1248],{4817:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var o=t(4848),s=t(8453);const r={},i=void 0,a={id:"Tutorials/Components/Core/IfcPropertiesTiler",title:"IfcPropertiesTiler",description:'window.open("https://thatopen.github.io/engine_components/examples/IfcPropertiesTiler")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Core/IfcPropertiesTiler.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/IfcPropertiesTiler",permalink:"/Tutorials/Components/Core/IfcPropertiesTiler",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcPropertiesManager",permalink:"/Tutorials/Components/Core/IfcPropertiesManager"},next:{title:"IfcRelationsIndexer",permalink:"/Tutorials/Components/Core/IfcRelationsIndexer"}},l={},c=[{value:"\ud83e\udde9 Tiling BIM properties",id:"-tiling-bim-properties",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddf3 Loading a BIM model",id:"-loading-a-bim-model",level:3},{value:"\u2198\ufe0f Setting up downloads",id:"\ufe0f-setting-up-downloads",level:3},{value:"\ud83d\udccb Getting the streamer",id:"-getting-the-streamer",level:3},{value:"\ud83d\udcc5 Setting up the events",id:"-setting-up-the-events",level:3},{value:"\ud83d\udd25 Generating the tiles",id:"-generating-the-tiles",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/IfcPropertiesTiler"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/IfcPropertiesTiler"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/fragments/IfcPropertiesTiler/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"-tiling-bim-properties",children:"\ud83e\udde9 Tiling BIM properties"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.admonition,{title:"Tiles?",type:"tip",children:(0,o.jsx)(n.p,{children:"If you haven't checked out the geometry tiling tutorial, we recommend that you do it first! This tutorial assumes that you already have done it."})}),"\n",(0,o.jsx)(n.p,{children:"You can also stream the properties of an IFC file. Why? Because some files can have\nmillions of properties, and trying to save them naively in a normal DB is not very\nscalable/affordable. Using this system, you'll be able to store and retrieve the\ndata of models of any size without big cloud costs.\nIn this tutorial, we will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"web-ifc"})," to get some IFC items."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "@thatopen/components";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBC.SimpleRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBC.SimpleRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-loading-a-bim-model",children:"\ud83e\uddf3 Loading a BIM model"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file."}),"\n",(0,o.jsx)(n.admonition,{title:"Fragments?",type:"tip",children:(0,o.jsx)(n.p,{children:"If you are not familiar with fragments, check out the IfcLoader tutorial!"})}),"\n",(0,o.jsx)(n.p,{children:"This is not compulsory, as the data will come from an .ifc file, not from fragments. But at least we'll see the model whose properties we will be converting to tiles!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const fragments = new OBC.FragmentsManager(components);\nconst fragFile = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.frag",\n);\nconst fragData = await fragFile.arrayBuffer();\nconst fragBuffer = new Uint8Array(fragData);\nconst model = fragments.load(fragBuffer);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-setting-up-downloads",children:"\u2198\ufe0f Setting up downloads"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now we will define some helper download functions that will allow us to get the property tiles that we generate in our computer."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'function downloadFile(name: string, bits: Blob) {\n const file = new File([bits], name);\n const anchor = document.createElement("a");\n const url = URL.createObjectURL(file);\n anchor.href = url;\n anchor.download = file.name;\n anchor.click();\n URL.revokeObjectURL(url);\n}\n\nasync function downloadFilesSequentially(\n fileList: { name: string; bits: Blob }[],\n) {\n for (const { name, bits } of fileList) {\n downloadFile(name, bits);\n await new Promise((resolve) => {\n setTimeout(resolve, 100);\n });\n }\n}\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-getting-the-streamer",children:"\ud83d\udccb Getting the streamer"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now we will get the property streamer component from the library and initialize it."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const propsStreamer = components.get(OBC.IfcPropertiesTiler);\n\npropsStreamer.settings.wasm = {\n path: "https://unpkg.com/web-ifc@0.0.66/",\n absolute: true,\n};\n'})}),"\n",(0,o.jsx)(n.p,{children:"We need to generate properties JSON with the following structure:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"interface StreamedProperties {\n types: {\n [typeID: number]: number[];\n };\n\n ids: {\n [id: number]: number;\n };\n\n indexesFile: string;\n}\n"})}),"\n",(0,o.jsx)(n.p,{children:"So we will define an object where we will store the tiles as we generate them."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const jsonFile: StreamedProperties = {\n types: {},\n ids: {},\n indexesFile: "small.ifc-processed-properties-indexes",\n};\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-the-events",children:"\ud83d\udcc5 Setting up the events"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["Similarly to geometries, here you will also get data and progress notification using events. In addition to properties, you will get ",(0,o.jsx)(n.code,{children:"indices"}),", which is an indexation data of the properties to be able to use them effectively when streamed. Let's set up those events now!"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'let counter = 0;\n\nconst files: { name: string; bits: Blob }[] = [];\n\npropsStreamer.onPropertiesStreamed.add(async (props) => {\n if (!jsonFile.types[props.type]) {\n jsonFile.types[props.type] = [];\n }\n jsonFile.types[props.type].push(counter);\n\n for (const id in props.data) {\n jsonFile.ids[id] = counter;\n }\n\n const name = `small.ifc-processed-properties-${counter}`;\n const bits = new Blob([JSON.stringify(props.data)]);\n files.push({ bits, name });\n\n counter++;\n});\n\npropsStreamer.onProgress.add(async (progress) => {\n console.log(progress);\n});\n\npropsStreamer.onIndicesStreamed.add(async (props) => {\n files.push({\n name: `small.ifc-processed-properties.json`,\n bits: new Blob([JSON.stringify(jsonFile)]),\n });\n\n const relations = components.get(OBC.IfcRelationsIndexer);\n const serializedRels = relations.serializeRelations(props);\n\n files.push({\n name: "small.ifc-processed-properties-indexes",\n bits: new Blob([serializedRels]),\n });\n\n await downloadFilesSequentially(files);\n});\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-generating-the-tiles",children:"\ud83d\udd25 Generating the tiles"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Great! Now that we have everything setup, is time to finally convert the IFC file. In order to trigger the conversion, we can just do the following:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'async function processFile() {\n const fetchedIfc = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.ifc",\n );\n const ifcBuffer = await fetchedIfc.arrayBuffer();\n // We will need this information later to also convert the properties\n const ifcArrayBuffer = new Uint8Array(ifcBuffer);\n // This triggers the conversion, so the listeners start to be called\n await propsStreamer.streamFromBuffer(ifcArrayBuffer);\n}\n'})}),"\n",(0,o.jsx)(n.p,{children:"If everything went as expected, you should now be seeing some files being downloaded from your app \ud83e\udd2f Do not get scary if they're a lot, as big models tend to have many files! All of that is the information the streaming uses in order to display the geometry in the most efficient way possible. \ud83d\udcaa"}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We'll use the ",(0,o.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We will use the ",(0,o.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,o.jsx)(n.code,{children:"init"})," method of the ",(0,o.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we will add some UI to generate and download the tiles to our computer. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n \n \n \n \n \n \n \n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,o.jsx)(n.p,{children:"And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const button = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n});\n\ndocument.body.append(button);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"That's it! You have created an app that can generate the property BIM tiles for an IFC and download them to your computer. Now you have the power to process big IFC files! To consume these tiles, check out the IFC streamer tutorial."})]})}function p(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var o=t(6540);const s={},r=o.createContext(s);function i(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[1248],{4817:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var o=t(4848),s=t(8453);const r={},i=void 0,a={id:"Tutorials/Components/Core/IfcPropertiesTiler",title:"IfcPropertiesTiler",description:'window.open("https://thatopen.github.io/engine_components/examples/IfcPropertiesTiler")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Core/IfcPropertiesTiler.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/IfcPropertiesTiler",permalink:"/Tutorials/Components/Core/IfcPropertiesTiler",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcPropertiesManager",permalink:"/Tutorials/Components/Core/IfcPropertiesManager"},next:{title:"IfcRelationsIndexer",permalink:"/Tutorials/Components/Core/IfcRelationsIndexer"}},l={},c=[{value:"\ud83e\udde9 Tiling BIM properties",id:"-tiling-bim-properties",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddf3 Loading a BIM model",id:"-loading-a-bim-model",level:3},{value:"\u2198\ufe0f Setting up downloads",id:"\ufe0f-setting-up-downloads",level:3},{value:"\ud83d\udccb Getting the streamer",id:"-getting-the-streamer",level:3},{value:"\ud83d\udcc5 Setting up the events",id:"-setting-up-the-events",level:3},{value:"\ud83d\udd25 Generating the tiles",id:"-generating-the-tiles",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/IfcPropertiesTiler"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/IfcPropertiesTiler"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/fragments/IfcPropertiesTiler/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"-tiling-bim-properties",children:"\ud83e\udde9 Tiling BIM properties"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.admonition,{title:"Tiles?",type:"tip",children:(0,o.jsx)(n.p,{children:"If you haven't checked out the geometry tiling tutorial, we recommend that you do it first! This tutorial assumes that you already have done it."})}),"\n",(0,o.jsx)(n.p,{children:"You can also stream the properties of an IFC file. Why? Because some files can have\nmillions of properties, and trying to save them naively in a normal DB is not very\nscalable/affordable. Using this system, you'll be able to store and retrieve the\ndata of models of any size without big cloud costs.\nIn this tutorial, we will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"web-ifc"})," to get some IFC items."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "@thatopen/components";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBC.SimpleRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBC.SimpleRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-loading-a-bim-model",children:"\ud83e\uddf3 Loading a BIM model"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file."}),"\n",(0,o.jsx)(n.admonition,{title:"Fragments?",type:"tip",children:(0,o.jsx)(n.p,{children:"If you are not familiar with fragments, check out the IfcLoader tutorial!"})}),"\n",(0,o.jsx)(n.p,{children:"This is not compulsory, as the data will come from an .ifc file, not from fragments. But at least we'll see the model whose properties we will be converting to tiles!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const fragments = new OBC.FragmentsManager(components);\nconst fragFile = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.frag",\n);\nconst fragData = await fragFile.arrayBuffer();\nconst fragBuffer = new Uint8Array(fragData);\nconst model = fragments.load(fragBuffer);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-setting-up-downloads",children:"\u2198\ufe0f Setting up downloads"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now we will define some helper download functions that will allow us to get the property tiles that we generate in our computer."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'function downloadFile(name: string, bits: Blob) {\n const file = new File([bits], name);\n const anchor = document.createElement("a");\n const url = URL.createObjectURL(file);\n anchor.href = url;\n anchor.download = file.name;\n anchor.click();\n URL.revokeObjectURL(url);\n}\n\nasync function downloadFilesSequentially(\n fileList: { name: string; bits: Blob }[],\n) {\n for (const { name, bits } of fileList) {\n downloadFile(name, bits);\n await new Promise((resolve) => {\n setTimeout(resolve, 100);\n });\n }\n}\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-getting-the-streamer",children:"\ud83d\udccb Getting the streamer"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now we will get the property streamer component from the library and initialize it."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const propsStreamer = components.get(OBC.IfcPropertiesTiler);\n\npropsStreamer.settings.wasm = {\n path: "https://unpkg.com/web-ifc@0.0.66/",\n absolute: true,\n};\n'})}),"\n",(0,o.jsx)(n.p,{children:"We need to generate properties JSON with the following structure:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"interface StreamedProperties {\n types: {\n [typeID: number]: number[];\n };\n\n ids: {\n [id: number]: number;\n };\n\n indexesFile: string;\n}\n"})}),"\n",(0,o.jsx)(n.p,{children:"So we will define an object where we will store the tiles as we generate them."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const jsonFile: StreamedProperties = {\n types: {},\n ids: {},\n indexesFile: "small.ifc-processed-properties-indexes",\n};\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-the-events",children:"\ud83d\udcc5 Setting up the events"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["Similarly to geometries, here you will also get data and progress notification using events. In addition to properties, you will get ",(0,o.jsx)(n.code,{children:"indices"}),", which is an indexation data of the properties to be able to use them effectively when streamed. Let's set up those events now!"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'let counter = 0;\n\nconst files: { name: string; bits: Blob }[] = [];\n\npropsStreamer.onPropertiesStreamed.add(async (props) => {\n if (!jsonFile.types[props.type]) {\n jsonFile.types[props.type] = [];\n }\n jsonFile.types[props.type].push(counter);\n\n for (const id in props.data) {\n jsonFile.ids[id] = counter;\n }\n\n const name = `small.ifc-processed-properties-${counter}`;\n const bits = new Blob([JSON.stringify(props.data)]);\n files.push({ bits, name });\n\n counter++;\n});\n\npropsStreamer.onProgress.add(async (progress) => {\n console.log(progress);\n});\n\npropsStreamer.onIndicesStreamed.add(async (props) => {\n files.push({\n name: `small.ifc-processed-properties.json`,\n bits: new Blob([JSON.stringify(jsonFile)]),\n });\n\n const relations = components.get(OBC.IfcRelationsIndexer);\n const serializedRels = relations.serializeRelations(props);\n\n files.push({\n name: "small.ifc-processed-properties-indexes",\n bits: new Blob([serializedRels]),\n });\n\n await downloadFilesSequentially(files);\n});\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-generating-the-tiles",children:"\ud83d\udd25 Generating the tiles"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Great! Now that we have everything setup, is time to finally convert the IFC file. In order to trigger the conversion, we can just do the following:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'async function processFile() {\n const fetchedIfc = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.ifc",\n );\n const ifcBuffer = await fetchedIfc.arrayBuffer();\n // We will need this information later to also convert the properties\n const ifcArrayBuffer = new Uint8Array(ifcBuffer);\n // This triggers the conversion, so the listeners start to be called\n await propsStreamer.streamFromBuffer(ifcArrayBuffer);\n}\n'})}),"\n",(0,o.jsx)(n.p,{children:"If everything went as expected, you should now be seeing some files being downloaded from your app \ud83e\udd2f Do not get scary if they're a lot, as big models tend to have many files! All of that is the information the streaming uses in order to display the geometry in the most efficient way possible. \ud83d\udcaa"}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We'll use the ",(0,o.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We will use the ",(0,o.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,o.jsx)(n.code,{children:"init"})," method of the ",(0,o.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we will add some UI to generate and download the tiles to our computer. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n \n \n \n \n \n \n \n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,o.jsx)(n.p,{children:"And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const button = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n});\n\ndocument.body.append(button);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"That's it! You have created an app that can generate the property BIM tiles for an IFC and download them to your computer. Now you have the power to process big IFC files! To consume these tiles, check out the IFC streamer tutorial."})]})}function p(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var o=t(6540);const s={},r=o.createContext(s);function i(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/ab5f11bf.06bb45de.js b/build/assets/js/ab5f11bf.06bb45de.js deleted file mode 100644 index cb7da0f2c..000000000 --- a/build/assets/js/ab5f11bf.06bb45de.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[6141],{9145:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>o});var n=t(4848),s=t(8453);const i={},l="Serializer",a={id:"api/@thatopen/fragments/classes/Serializer",title:"Serializer",description:"Serializer class for handling the serialization and deserialization of 3D model data. It uses the flatbuffers library for efficient data serialization and deserialization.",source:"@site/docs/api/@thatopen/fragments/classes/Serializer.md",sourceDirName:"api/@thatopen/fragments/classes",slug:"/api/@thatopen/fragments/classes/Serializer",permalink:"/api/@thatopen/fragments/classes/Serializer",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FragmentsGroup",permalink:"/api/@thatopen/fragments/classes/FragmentsGroup"},next:{title:"StreamSerializer",permalink:"/api/@thatopen/fragments/classes/StreamSerializer"}},d={},o=[{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"version",id:"version",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Methods",id:"methods",level:2},{value:"export()",id:"export",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"import()",id:"import",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Implementation of",id:"implementation-of-2",level:4}];function c(e){const r={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.h1,{id:"serializer",children:"Serializer"}),"\n",(0,n.jsxs)(r.p,{children:["Serializer class for handling the serialization and deserialization of 3D model data. It uses the ",(0,n.jsx)(r.a,{href:"https://flatbuffers.dev/",children:"flatbuffers library"})," for efficient data serialization and deserialization."]}),"\n",(0,n.jsx)(r.h2,{id:"implements",children:"Implements"}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.code,{children:"FragmentParser"})}),"\n"]}),"\n",(0,n.jsx)(r.h2,{id:"properties",children:"Properties"}),"\n",(0,n.jsx)(r.h3,{id:"version",children:"version"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"version"}),": ",(0,n.jsx)(r.code,{children:"number"})," | ",(0,n.jsx)(r.code,{children:'"auto"'})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"FragmentParser.version"}),"\n",(0,n.jsx)(r.h4,{id:"implementation-of",children:"Implementation of"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.code,{children:"FragmentParser.version"})}),"\n",(0,n.jsx)(r.h2,{id:"methods",children:"Methods"}),"\n",(0,n.jsx)(r.h3,{id:"export",children:"export()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"export"}),"(",(0,n.jsx)(r.code,{children:"group"}),"): ",(0,n.jsx)(r.code,{children:"Uint8Array"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"FragmentParser.export"}),"\n",(0,n.jsx)(r.h4,{id:"parameters",children:"Parameters"}),"\n",(0,n.jsxs)(r.table,{children:[(0,n.jsx)(r.thead,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,n.jsx)(r.tbody,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"group"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/classes/FragmentsGroup",children:(0,n.jsx)(r.code,{children:"FragmentsGroup"})})})]})})]}),"\n",(0,n.jsx)(r.h4,{id:"returns",children:"Returns"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.code,{children:"Uint8Array"})}),"\n",(0,n.jsx)(r.h4,{id:"implementation-of-1",children:"Implementation of"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.code,{children:"FragmentParser.export"})}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"import",children:"import()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"import"}),"(",(0,n.jsx)(r.code,{children:"bytes"}),"): ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/classes/FragmentsGroup",children:(0,n.jsx)(r.code,{children:"FragmentsGroup"})})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"FragmentParser.import"}),"\n",(0,n.jsx)(r.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,n.jsxs)(r.table,{children:[(0,n.jsx)(r.thead,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,n.jsx)(r.tbody,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"bytes"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"Uint8Array"})})]})})]}),"\n",(0,n.jsx)(r.h4,{id:"returns-1",children:"Returns"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/classes/FragmentsGroup",children:(0,n.jsx)(r.code,{children:"FragmentsGroup"})})}),"\n",(0,n.jsx)(r.h4,{id:"implementation-of-2",children:"Implementation of"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.code,{children:"FragmentParser.import"})})]})}function h(e={}){const{wrapper:r}={...(0,s.R)(),...e.components};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},8453:(e,r,t)=>{t.d(r,{R:()=>l,x:()=>a});var n=t(6540);const s={},i=n.createContext(s);function l(e){const r=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function a(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),n.createElement(i.Provider,{value:r},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/b1bac509.f4654e76.js b/build/assets/js/b1bac509.f4654e76.js deleted file mode 100644 index 26349df6a..000000000 --- a/build/assets/js/b1bac509.f4654e76.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[5749],{7549:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>o,toc:()=>p});var a=n(4848),r=n(8453);const s={},i="StreamedGeometries",o={id:"api/@thatopen/fragments/type-aliases/StreamedGeometries",title:"StreamedGeometries",description:"StreamedGeometries: Map\\",source:"@site/docs/api/@thatopen/fragments/type-aliases/StreamedGeometries.md",sourceDirName:"api/@thatopen/fragments/type-aliases",slug:"/api/@thatopen/fragments/type-aliases/StreamedGeometries",permalink:"/api/@thatopen/fragments/type-aliases/StreamedGeometries",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcSchema",permalink:"/api/@thatopen/fragments/type-aliases/IfcSchema"},next:{title:"@thatopen/ui",permalink:"/api/@thatopen/ui/"}},l={},p=[{value:"Remarks",id:"remarks",level:2},{value:"Example",id:"example",level:2},{value:"Template",id:"template",level:2},{value:"Template",id:"template-1",level:2},{value:"Template",id:"template-2",level:2},{value:"Template",id:"template-3",level:2},{value:"Template",id:"template-4",level:2}];function m(e){const t={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h1,{id:"streamedgeometries",children:"StreamedGeometries"}),"\n",(0,a.jsxs)(t.blockquote,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"StreamedGeometries"}),": ",(0,a.jsx)(t.code,{children:"Map"}),"<",(0,a.jsx)(t.code,{children:"number"}),", ",(0,a.jsx)(t.code,{children:"object"}),">"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Represents a map of streamed geometries."}),"\n",(0,a.jsx)(t.h2,{id:"remarks",children:"Remarks"}),"\n",(0,a.jsx)(t.p,{children:"This map is used to store the position, normal, and index arrays of each geometry.\r\nEach geometry is associated with a unique identifier (number) which usually corresponds to the ExpressID of the geometry in the IFC file that was used to generate the fragments."}),"\n",(0,a.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-typescript",children:"const streamedGeometries: StreamedGeometries = new Map([\r\n [1, { position: new Float32Array([0, 0, 0]), normal: new Float32Array([0, 1, 0]), index: new Uint32Array([0, 1, 2]) }],\r\n [2, { position: new Float32Array([1, 0, 0]), normal: new Float32Array([0, 1, 0]), index: new Uint32Array([3, 4, 5]) }],\r\n]);\n"})}),"\n",(0,a.jsx)(t.h2,{id:"template",children:"Template"}),"\n",(0,a.jsx)(t.p,{children:"The type of the geometry identifier. In this case, it is a number."}),"\n",(0,a.jsx)(t.h2,{id:"template-1",children:"Template"}),"\n",(0,a.jsx)(t.p,{children:"The type of the geometry data. It contains position, normal, and index arrays."}),"\n",(0,a.jsx)(t.h2,{id:"template-2",children:"Template"}),"\n",(0,a.jsx)(t.p,{children:"The type of the position array."}),"\n",(0,a.jsx)(t.h2,{id:"template-3",children:"Template"}),"\n",(0,a.jsx)(t.p,{children:"The type of the normal array."}),"\n",(0,a.jsx)(t.h2,{id:"template-4",children:"Template"}),"\n",(0,a.jsx)(t.p,{children:"The type of the index array."})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>o});var a=n(6540);const r={},s=a.createContext(r);function i(e){const t=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),a.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/b4f219e8.ff948d22.js b/build/assets/js/b4f219e8.ff948d22.js deleted file mode 100644 index b8e551cb1..000000000 --- a/build/assets/js/b4f219e8.ff948d22.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[6676],{8384:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>l});var r=t(4848),s=t(8453);const i={},o="Item",a={id:"api/@thatopen/fragments/interfaces/Item",title:"Item",description:"Represents an item in the 3D model.",source:"@site/docs/api/@thatopen/fragments/interfaces/Item.md",sourceDirName:"api/@thatopen/fragments/interfaces",slug:"/api/@thatopen/fragments/interfaces/Item",permalink:"/api/@thatopen/fragments/interfaces/Item",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IndexedGeometry",permalink:"/api/@thatopen/fragments/interfaces/IndexedGeometry"},next:{title:"AlignmentType",permalink:"/api/@thatopen/fragments/type-aliases/AlignmentType"}},c={},l=[{value:"Remarks",id:"remarks",level:2},{value:"Properties",id:"properties",level:2},{value:"colors?",id:"colors",level:3},{value:"id",id:"id",level:3},{value:"transforms",id:"transforms",level:3}];function d(e){const n={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",hr:"hr",p:"p",strong:"strong",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"item",children:"Item"}),"\n",(0,r.jsx)(n.p,{children:"Represents an item in the 3D model."}),"\n",(0,r.jsx)(n.h2,{id:"remarks",children:"Remarks"}),"\n",(0,r.jsx)(n.p,{children:"Each item has a unique identifier, a list of transformation matrices, and optionally, a list of colors."}),"\n",(0,r.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsx)(n.h3,{id:"colors",children:"colors?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"colors"}),": ",(0,r.jsx)(n.code,{children:"Color"}),"[]"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"An optional list of colors associated with the item."}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"id",children:"id"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"id"}),": ",(0,r.jsx)(n.code,{children:"number"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"The unique identifier of the item."}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"transforms",children:"transforms"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"transforms"}),": ",(0,r.jsx)(n.code,{children:"Matrix4"}),"[]"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"A list of transformation matrices representing the position, rotation, and scale of the item."})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>a});var r=t(6540);const s={},i=r.createContext(s);function o(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/c03ff2b0.62be73c7.js b/build/assets/js/c03ff2b0.62be73c7.js new file mode 100644 index 000000000..73f675735 --- /dev/null +++ b/build/assets/js/c03ff2b0.62be73c7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[9967],{8209:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>d,frontMatter:()=>s,metadata:()=>c,toc:()=>r});var o=t(4848),i=t(8453);const s={},a=void 0,c={id:"Tutorials/UserInterface/OBC/TopicsUI",title:"TopicsUI",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/TopicsList")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/TopicsUI.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/TopicsUI",permalink:"/Tutorials/UserInterface/OBC/TopicsUI",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"RelationsTree",permalink:"/Tutorials/UserInterface/OBC/RelationsTree"},next:{title:"\ud83d\udccb API",permalink:"/api/"}},l={},r=[{value:"Showing BCF Topics the Easy Way \u2728",id:"showing-bcf-topics-the-easy-way-",level:2},{value:"\ud83c\udfd7 Scaffolding the Application",id:"-scaffolding-the-application",level:3},{value:"\ud83c\udfe6 Loading a Model and Setting the BCFTopics",id:"-loading-a-model-and-setting-the-bcftopics",level:3},{value:"\ud83d\udd28 Displaying the Topics List in a Table",id:"-displaying-the-topics-list-in-a-table",level:3},{value:"\ud83d\udcc3 Using the Topics Form UI",id:"-using-the-topics-form-ui",level:3},{value:"\ud83c\udfab Creating a Custom Topic Panel",id:"-creating-a-custom-topic-panel",level:3},{value:"\u23ec Creating a Button to Download BCFs",id:"-creating-a-button-to-download-bcfs",level:3},{value:"\ud83e\udd45 Creating a Panel to Hold the Table",id:"-creating-a-panel-to-hold-the-table",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/TopicsList"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/TopicsList"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/TopicsList/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h2,{id:"showing-bcf-topics-the-easy-way-",children:"Showing BCF Topics the Easy Way \u2728"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Integration with BIM Collaboration Format is probably one of those features you want to have in your app sooner than later. Problem is, many UIs are needed (one to display the topics, another to create them, another to edit everything, etc). Well, hold tight as here you will learn all you need to know in order to use the power of UI Components to accomplish a fully working user interface for your next BCF integration!"}),"\n",(0,o.jsx)(n.h3,{id:"-scaffolding-the-application",children:"\ud83c\udfd7 Scaffolding the Application"}),"\n",(0,o.jsx)(n.p,{children:"First of all, let's import the dependencies we need to get this working:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"@thatopen/ui-obc to add some cool pre-made UI menus for components."}),"\n",(0,o.jsx)(n.li,{children:"@thatopen/ui to add some simple and cool UI menus."}),"\n",(0,o.jsx)(n.li,{children:"@thatopen/components to set up the barebone of our app."}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'// eslint-disable-next-line import/no-extraneous-dependencies\nimport * as BUIC from "@thatopen/ui-obc";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "@thatopen/components";\n'})}),"\n",(0,o.jsxs)(n.p,{children:["Next, it's always necessary to initialize the core UI library no matter if you're using functional components from ",(0,o.jsx)(n.code,{children:"@thatopen/ui-obc"}),". Also, let's setup ",(0,o.jsx)(n.code,{children:"@thatopen/components"})," with the minimum things to get a ",(0,o.jsx)(n.a,{href:"/Tutorials/Components/Core/Worlds",children:"World"})," up and running to load models."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'BUI.Manager.init();\n\nconst viewport = document.createElement("bim-viewport");\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create();\nconst sceneComponent = new OBC.SimpleScene(components);\nsceneComponent.setup();\nworld.scene = sceneComponent;\n\nconst rendererComponent = new OBC.SimpleRenderer(components, viewport);\nworld.renderer = rendererComponent;\n\nconst cameraComponent = new OBC.SimpleCamera(components);\nworld.camera = cameraComponent;\ncameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);\n\nviewport.addEventListener("resize", () => {\n rendererComponent.resize();\n cameraComponent.updateAspect();\n});\n\ncomponents.init();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-loading-a-model-and-setting-the-bcftopics",children:"\ud83c\udfe6 Loading a Model and Setting the BCFTopics"}),"\n",(0,o.jsx)(n.p,{children:"Just after setting up the world, let's programatically load a model \ud83d\udc47"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\nconst file = await fetch(\n "https://thatopen.github.io/engine_ui-components/resources/small.ifc",\n);\nconst buffer = await file.arrayBuffer();\nconst typedArray = new Uint8Array(buffer);\nconst model = await ifcLoader.load(typedArray);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsx)(n.p,{children:"You don't need to add the model into the scene to create topics! We just add it for demostration purposes."})}),"\n",(0,o.jsx)(n.p,{children:"Before creating the table to display topics to the user, let's do some initial setup of the BCFTopics component. If you're unsure about the basics of working with the BCFTopics component, first check the corresponding tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const users: BUIC.TopicUserStyles = {\n "jhon.doe@example.com": {\n name: "Jhon Doe",\n picture:\n "https://www.profilebakery.com/wp-content/uploads/2023/04/Profile-Image-AI.jpg",\n },\n "user_a@something.com": {\n name: "User A",\n picture:\n "https://www.profilebakery.com/wp-content/uploads/2023/04/Portrait-Photography.jpg",\n },\n "user_b@something.com": {\n name: "User B",\n picture:\n "https://www.profilebakery.com/wp-content/uploads/2023/04/AI-Portrait.jpg",\n },\n};\n\nconst topics = components.get(OBC.BCFTopics);\n\n// We setup the component to create a list of users.\n// This list will appear automatically in the topics form.\n// The recommendation is always set an email (as per the BCF standard).\ntopics.setup({\n users: new Set(Object.keys(users)),\n labels: new Set(["Architecture", "Structure", "MEP"]),\n});\n\n// Add a default viewpoint to the topics each time they get created.\nconst viewpoints = components.get(OBC.Viewpoints);\ntopics.list.onItemSet.add(({ value: topic }) => {\n const viewpoint = viewpoints.create(world);\n topic.viewpoints.add(viewpoint.guid);\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"Once the BCFTopics component has been initialized, let's see how to setup a plug-n-play UI for it! The BIM Components UI package (@thatopen/ui-obc) comes with some UIs to support the usage of the BCFTopics component. Among the components you got:\n\ud83d\udc49 TopicsList: a table to display the topics created with the component (or the ones you choose to see).\n\ud83d\udc49 TopicForm: a form to create new or update existing topics.\n\ud83d\udc49 TopicComments: a table to display the list of comments for a single topic.\n\ud83d\udc49 TopicCommentsSection: an element to display the comments for a single topic and also a text area to add them.\n\ud83d\udc49 TopicInformationSection: an element to display the topic markup information and a button with the form included to update it.\n\ud83d\udc49 TopicRelationsSection: an element to display the topics related with another and the functionality to link them.\n\ud83d\udc49 TopicViewpointsSection: an element to display the topics viewpoints with the functionality create new or link existing viewpoints.\nIs entirely up to you what to use, but using them together gives you a ready to go UI with everything you need to have a production ready BCF integration in your BIM app! Let's start with the topics list table."}),"\n",(0,o.jsx)(n.h3,{id:"-displaying-the-topics-list-in-a-table",children:"\ud83d\udd28 Displaying the Topics List in a Table"}),"\n",(0,o.jsx)(n.p,{children:"The topics list table is the easiest way to display all topics created in the app using the BCFTopics component. Creating it is really simple, as you just need to write the following:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const [topicsList, updateTopicsList] = BUIC.tables.topicsList({\n components,\n dataStyles: { users },\n});\n\n// Let's make row selection possible so we can decide which topics to download.\ntopicsList.selectableRows = true;\n"})}),"\n",(0,o.jsx)(n.p,{children:"That's it. You don't need anything else other than creating an instance of the UI component and place it anywhere you want in the app. The table updates by it-self anytime a new topic has been created or modified!"}),"\n",(0,o.jsx)(n.h3,{id:"-using-the-topics-form-ui",children:"\ud83d\udcc3 Using the Topics Form UI"}),"\n",(0,o.jsx)(n.p,{children:"Let's now define a topic form so creating them is easier than ever:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const [topicForm, updateTopicForm] = BUIC.forms.topic({\n components,\n styles: { users },\n});\n\n// We won\'t add the form directly to the page, but will wrap it inside a dialog element to show it as a modal.\nconst topicsModal = BUI.Component.create(() => {\n return BUI.html`\n \n \n ${topicForm}\n \n \n `;\n});\n\ndocument.body.append(topicsModal);\n'})}),"\n",(0,o.jsx)(n.p,{children:"As the modal is already on the page, lets create a very simple button to display the modal on demand:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const showFormBtn = BUI.Component.create(() => {\n const onClick = () => {\n topicsModal.showModal();\n };\n\n return BUI.html`\n \n `;\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"The form component already includes the classic submit and cancel buttons. You can access them from the element by using querySelectors, but its more cumbersome than it should be. For that reason, the form state includes one callback for each button, so you decide what happens when they are clicked. In this case, the most logical thing is to close the modal when the user clicks them. Let's update the form state to include the callbacks:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"updateTopicForm({\n onCancel: () => {\n topicsModal.close();\n },\n onSubmit: () => {\n // There is no need to create the topic, it happens automatically inside the form component.\n topicsModal.close();\n },\n});\n"})}),"\n",(0,o.jsx)(n.p,{children:"Awesome! Topic form setup correctly \ud83d\ude0e"}),"\n",(0,o.jsx)(n.h3,{id:"-creating-a-custom-topic-panel",children:"\ud83c\udfab Creating a Custom Topic Panel"}),"\n",(0,o.jsx)(n.p,{children:"With the form set up, what if we use the topic panel to see it's full information? Typically, you will display the full information for one topic at the same time; in such case, you only need to create one topic panel component. However, you can create as many panels as you need. In this tutorial we will create one as follows:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'// You don\'t have to create this interface, it\'s made just for demonstration purposes.\n// This interface allows you to update the actions in each functional section of the topics UI.\n// This is great when you have an app with user permission settings.\ninterface TopicPanelActions {\n information: Partial;\n viewpoints: Partial;\n relatedTopics: Partial;\n comments: Partial;\n}\n\ninterface TopicPanelUI {\n components: OBC.Components;\n topic?: OBC.Topic;\n styles?: Partial;\n actions?: Partial;\n world?: OBC.World;\n}\n\n// By default, it doesn\'t know which topic to display, so will show a default message of not topic selected.\nconst [topicPanel, updateTopicPanel] = BUI.Component.create(\n (state: TopicPanelUI) => {\n const { components, topic, world, actions, styles } = state;\n\n let topicSections: BUI.TemplateResult | undefined;\n let missingTopicSection: BUI.TemplateResult | undefined;\n\n if (topic) {\n const [information] = BUIC.sections.topicInformation({\n components,\n topic,\n actions: actions?.information,\n styles,\n });\n\n const [viewpoints] = BUIC.sections.topicViewpoints({\n components,\n topic,\n world,\n actions: actions?.viewpoints,\n });\n\n const [relatedTopics] = BUIC.sections.topicRelations({\n components,\n topic,\n actions: actions?.relatedTopics,\n });\n\n const [comments] = BUIC.sections.topicComments({\n topic,\n actions: actions?.comments,\n styles: styles?.users,\n });\n\n const onReminderClick = () => {\n // eslint-disable-next-line no-alert\n window.alert(\n `An email will be sent to ${topic.assignedTo}! (obviosuly not, this is just for demo purposes)`,\n );\n };\n\n topicSections = BUI.html`\n \n ${information}\n \n \n ${comments}\n \n \n ${viewpoints}\n \n \n ${relatedTopics}\n \n \x3c!-- This is a custom section where you can add any functionality you like --\x3e\n \n ${\n topic.assignedTo\n ? BUI.html`\n \n `\n : BUI.html`\n The topic must have an assignee to use the communication tools. Update the topic with a new assignee!\n `\n }\n \n `;\n } else {\n missingTopicSection = BUI.html`\n \n ${!topic ? BUI.html`There is no topic to display in this panel!` : null}\n \n `;\n }\n\n return BUI.html`\n \n ${missingTopicSection}\n ${topicSections}\n \n `;\n },\n { components, world, styles: { users } },\n);\n\n// Lets update the topic panel in case the topic information gets update somewhere else in the app.\ntopics.list.onItemUpdated.add(() => updateTopicPanel());\n'})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsxs)(n.p,{children:["If you're unsure about how to create custom functional UI components just like the panel above, take a look at the dedicated ",(0,o.jsx)(n.a,{href:"/Tutorials/UserInterface/Core/Component",children:"Component"})," tutorial."]})}),"\n",(0,o.jsx)(n.p,{children:"It looks scarier than what it actually is! We give you the functional pieces, then is entirely up to you how to stack them together to define your UIs. If we give you a pre-made panel with everything, it would be easier to implement but harder to customize. The way its made let you create a panel with all the functional pieces already working, but then you have the chance to keep adding custom UIs for other functionalities you may create on top of topics.\nWhen you know which topic data to display in the panel, then you can update the topic data component. What need to happen to update the topic data panel entirely depends on your app! However, the topics list table includes a callback that gets triggered each time a topic is clicked with a button located next to its title, lets use that in this case! For it, set the callback to update the topic panel with the clicked topic as follows:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"updateTopicsList({\n onTopicEnter: (topic) => {\n updateTopicPanel({ topic });\n },\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-creating-a-button-to-download-bcfs",children:"\u23ec Creating a Button to Download BCFs"}),"\n",(0,o.jsx)(n.p,{children:"To complete our BCF integration, let's create a button to download the topics created using the BCFTopics component:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const downloadBtn = BUI.Component.create(() => {\n const onDownload = async () => {\n const selectedTopics = [...topicsList.selection]\n .map(({ Guid }) => {\n if (!(Guid && typeof Guid === "string")) return null;\n const topic = topics.list.get(Guid);\n return topic;\n })\n .filter((topic) => topic) as OBC.Topic[];\n\n const topicsToExport =\n selectedTopics.length > 0 ? selectedTopics : [...topics.list.values()];\n\n if (topicsToExport.length === 0) return;\n\n const bcfData = await topics.export(topicsToExport);\n const bcfFile = new File([bcfData], "topics.bcf");\n\n const a = document.createElement("a");\n a.href = URL.createObjectURL(bcfFile);\n a.download = bcfFile.name;\n a.click();\n URL.revokeObjectURL(a.href);\n };\n\n return BUI.html` `;\n});\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-creating-a-panel-to-hold-the-table",children:"\ud83e\udd45 Creating a Panel to Hold the Table"}),"\n",(0,o.jsx)(n.p,{children:"Let's now create a BIM Panel to hold the topics list while also adding the corresponding buttons to trigger the functionalities like showing the form and downloading the BCF file:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const bcfPanel = BUI.Component.create(() => {\n const onTextInput = (e: Event) => {\n const input = e.target as BUI.TextInput;\n topicsList.queryString = input.value;\n };\n\n return BUI.html`\n \n \n
    \n \n
    \n ${showFormBtn}\n ${downloadBtn}\n
    \n
    \n ${topicsList}\n     \n     \n `;\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"Finally, let's create a BIM Grid element and provide the panels to the viewport to display everything."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const app = document.createElement("bim-grid");\napp.layouts = {\n main: {\n template: `\n "customTopicPanel viewport"\n "customTopicPanel bcfPanel" 25rem\n /24rem 1fr\n `,\n elements: { bcfPanel, viewport, customTopicPanel: topicPanel },\n },\n};\n\napp.layout = "main";\ndocument.body.append(app);\n'})}),"\n",(0,o.jsx)(n.p,{children:"Congratulations! You have now created a fully working BCF user interface for your app in less than 10 minutes of work. Keep going with more tutorials! \ud83d\udcaa"})]})}function d(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>c});var o=t(6540);const i={},s=o.createContext(i);function a(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/c03ff2b0.782844b6.js b/build/assets/js/c03ff2b0.782844b6.js deleted file mode 100644 index fb4bef95e..000000000 --- a/build/assets/js/c03ff2b0.782844b6.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[9967],{8209:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>d,frontMatter:()=>s,metadata:()=>c,toc:()=>r});var o=t(4848),i=t(8453);const s={},a=void 0,c={id:"Tutorials/UserInterface/OBC/TopicsUI",title:"TopicsUI",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/TopicsList")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/TopicsUI.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/TopicsUI",permalink:"/Tutorials/UserInterface/OBC/TopicsUI",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"RelationsTree",permalink:"/Tutorials/UserInterface/OBC/RelationsTree"},next:{title:"\ud83d\udccb API",permalink:"/api/"}},l={},r=[{value:"Showing BCF Topics the Easy Way \u2728",id:"showing-bcf-topics-the-easy-way-",level:2},{value:"\ud83c\udfd7 Scaffolding the Application",id:"-scaffolding-the-application",level:3},{value:"\ud83c\udfe6 Loading a Model and Setting the BCFTopics",id:"-loading-a-model-and-setting-the-bcftopics",level:3},{value:"\ud83d\udd28 Displaying the Topics List in a Table",id:"-displaying-the-topics-list-in-a-table",level:3},{value:"\ud83d\udcc3 Using the Topics Form UI",id:"-using-the-topics-form-ui",level:3},{value:"\ud83c\udfab Creating a Custom Topic Panel",id:"-creating-a-custom-topic-panel",level:3},{value:"\u23ec Creating a Button to Download BCFs",id:"-creating-a-button-to-download-bcfs",level:3},{value:"\ud83e\udd45 Creating a Panel to Hold the Table",id:"-creating-a-panel-to-hold-the-table",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/TopicsList"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/TopicsList"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/TopicsList/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h2,{id:"showing-bcf-topics-the-easy-way-",children:"Showing BCF Topics the Easy Way \u2728"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Integration with BIM Collaboration Format is probably one of those features you want to have in your app sooner than later. Problem is, many UIs are needed (one to display the topics, another to create them, another to edit everything, etc). Well, hold tight as here you will learn all you need to know in order to use the power of UI Components to accomplish a fully working user interface for your next BCF integration!"}),"\n",(0,o.jsx)(n.h3,{id:"-scaffolding-the-application",children:"\ud83c\udfd7 Scaffolding the Application"}),"\n",(0,o.jsx)(n.p,{children:"First of all, let's import the dependencies we need to get this working:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'// eslint-disable-next-line import/no-extraneous-dependencies\nimport * as CUI from "@thatopen/ui-obc";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "@thatopen/components";\n'})}),"\n",(0,o.jsxs)(n.p,{children:["Next, it's always necessary to initialize the core UI library no matter if you're using functional components from ",(0,o.jsx)(n.code,{children:"@thatopen/ui-obc"}),". Also, let's setup ",(0,o.jsx)(n.code,{children:"@thatopen/components"})," with the minimum things to get a ",(0,o.jsx)(n.a,{href:"/Tutorials/Components/Core/Worlds",children:"World"})," up and running to load models."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'BUI.Manager.init();\n\nconst viewport = document.createElement("bim-viewport");\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create();\nconst sceneComponent = new OBC.SimpleScene(components);\nsceneComponent.setup();\nworld.scene = sceneComponent;\n\nconst rendererComponent = new OBC.SimpleRenderer(components, viewport);\nworld.renderer = rendererComponent;\n\nconst cameraComponent = new OBC.SimpleCamera(components);\nworld.camera = cameraComponent;\ncameraComponent.controls.setLookAt(10, 5.5, 5, -4, -1, -6.5);\n\nviewport.addEventListener("resize", () => {\n rendererComponent.resize();\n cameraComponent.updateAspect();\n});\n\ncomponents.init();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-loading-a-model-and-setting-the-bcftopics",children:"\ud83c\udfe6 Loading a Model and Setting the BCFTopics"}),"\n",(0,o.jsx)(n.p,{children:"Just after setting up the world, let's programatically load a model \ud83d\udc47"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\nconst file = await fetch(\n "https://thatopen.github.io/engine_ui-components/resources/small.ifc",\n);\nconst buffer = await file.arrayBuffer();\nconst typedArray = new Uint8Array(buffer);\nconst model = await ifcLoader.load(typedArray);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsx)(n.p,{children:"You don't need to add the model into the scene to create topics! We just add it for demostration purposes."})}),"\n",(0,o.jsx)(n.p,{children:"Before creating the table to display topics to the user, let's do some initial setup of the BCFTopics component. If you're unsure about the basics of working with the BCFTopics component, first check the corresponding tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const users: CUI.TopicUserStyles = {\n "jhon.doe@example.com": {\n name: "Jhon Doe",\n picture:\n "https://www.profilebakery.com/wp-content/uploads/2023/04/Profile-Image-AI.jpg",\n },\n "user_a@something.com": {\n name: "User A",\n picture:\n "https://www.profilebakery.com/wp-content/uploads/2023/04/Portrait-Photography.jpg",\n },\n "user_b@something.com": {\n name: "User B",\n picture:\n "https://www.profilebakery.com/wp-content/uploads/2023/04/AI-Portrait.jpg",\n },\n};\n\nconst topics = components.get(OBC.BCFTopics);\n\n// We setup the component to create a list of users.\n// This list will appear automatically in the topics form.\n// The recommendation is always set an email (as per the BCF standard).\ntopics.setup({\n users: new Set(Object.keys(users)),\n labels: new Set(["Architecture", "Structure", "MEP"]),\n});\n\n// Add a default viewpoint to the topics each time they get created.\nconst viewpoints = components.get(OBC.Viewpoints);\ntopics.list.onItemSet.add(({ value: topic }) => {\n const viewpoint = viewpoints.create(world);\n topic.viewpoints.add(viewpoint.guid);\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"Once the BCFTopics component has been initialized, let's see how to setup a plug-n-play UI for it! The BIM Components UI package (@thatopen/ui-obc) comes with some UIs to support the usage of the BCFTopics component. Among the components you got:\n\ud83d\udc49 TopicsList: a table to display the topics created with the component (or the ones you choose to see).\n\ud83d\udc49 TopicForm: a form to create new or update existing topics.\n\ud83d\udc49 TopicComments: a table to display the list of comments for a single topic.\n\ud83d\udc49 TopicCommentsSection: an element to display the comments for a single topic and also a text area to add them.\n\ud83d\udc49 TopicInformationSection: an element to display the topic markup information and a button with the form included to update it.\n\ud83d\udc49 TopicRelationsSection: an element to display the topics related with another and the functionality to link them.\n\ud83d\udc49 TopicViewpointsSection: an element to display the topics viewpoints with the functionality create new or link existing viewpoints.\nIs entirely up to you what to use, but using them together gives you a ready to go UI with everything you need to have a production ready BCF integration in your BIM app! Let's start with the topics list table."}),"\n",(0,o.jsx)(n.h3,{id:"-displaying-the-topics-list-in-a-table",children:"\ud83d\udd28 Displaying the Topics List in a Table"}),"\n",(0,o.jsx)(n.p,{children:"The topics list table is the easiest way to display all topics created in the app using the BCFTopics component. Creating it is really simple, as you just need to write the following:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const [topicsList, updateTopicsList] = CUI.tables.topicsList({\n components,\n dataStyles: { users },\n});\n\n// Let's make row selection possible so we can decide which topics to download.\ntopicsList.selectableRows = true;\n"})}),"\n",(0,o.jsx)(n.p,{children:"That's it. You don't need anything else other than creating an instance of the UI component and place it anywhere you want in the app. The table updates by it-self anytime a new topic has been created or modified!"}),"\n",(0,o.jsx)(n.h3,{id:"-using-the-topics-form-ui",children:"\ud83d\udcc3 Using the Topics Form UI"}),"\n",(0,o.jsx)(n.p,{children:"Let's now define a topic form so creating them is easier than ever:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const [topicForm, updateTopicForm] = CUI.forms.topic({\n components,\n styles: { users },\n});\n\n// We won\'t add the form directly to the page, but will wrap it inside a dialog element to show it as a modal.\nconst topicsModal = BUI.Component.create(() => {\n return BUI.html`\n \n \n ${topicForm}\n \n \n `;\n});\n\ndocument.body.append(topicsModal);\n'})}),"\n",(0,o.jsx)(n.p,{children:"As the modal is already on the page, lets create a very simple button to display the modal on demand:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const showFormBtn = BUI.Component.create(() => {\n const onClick = () => {\n topicsModal.showModal();\n };\n\n return BUI.html`\n \n `;\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"The form component already includes the classic submit and cancel buttons. You can access them from the element by using querySelectors, but its more cumbersome than it should be. For that reason, the form state includes one callback for each button, so you decide what happens when they are clicked. In this case, the most logical thing is to close the modal when the user clicks them. Let's update the form state to include the callbacks:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"updateTopicForm({\n onCancel: () => {\n topicsModal.close();\n },\n onSubmit: () => {\n // There is no need to create the topic, it happens automatically inside the form component.\n topicsModal.close();\n },\n});\n"})}),"\n",(0,o.jsx)(n.p,{children:"Awesome! Topic form setup correctly \ud83d\ude0e"}),"\n",(0,o.jsx)(n.h3,{id:"-creating-a-custom-topic-panel",children:"\ud83c\udfab Creating a Custom Topic Panel"}),"\n",(0,o.jsx)(n.p,{children:"With the form set up, what if we use the topic panel to see it's full information? Typically, you will display the full information for one topic at the same time; in such case, you only need to create one topic panel component. However, you can create as many panels as you need. In this tutorial we will create one as follows:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'// You don\'t have to create this interface, it\'s made just for demonstration purposes.\n// This interface allows you to update the actions in each functional section of the topics UI.\n// This is great when you have an app with user permission settings.\ninterface TopicPanelActions {\n information: Partial;\n viewpoints: Partial;\n relatedTopics: Partial;\n comments: Partial;\n}\n\ninterface TopicPanelUI {\n components: OBC.Components;\n topic?: OBC.Topic;\n styles?: Partial;\n actions?: Partial;\n world?: OBC.World;\n}\n\n// By default, it doesn\'t know which topic to display, so will show a default message of not topic selected.\nconst [topicPanel, updateTopicPanel] = BUI.Component.create(\n (state: TopicPanelUI) => {\n const { components, topic, world, actions, styles } = state;\n\n let topicSections: BUI.TemplateResult | undefined;\n let missingTopicSection: BUI.TemplateResult | undefined;\n\n if (topic) {\n const [information] = CUI.sections.topicInformation({\n components,\n topic,\n actions: actions?.information,\n styles,\n });\n\n const [viewpoints] = CUI.sections.topicViewpoints({\n components,\n topic,\n world,\n actions: actions?.viewpoints,\n });\n\n const [relatedTopics] = CUI.sections.topicRelations({\n components,\n topic,\n actions: actions?.relatedTopics,\n });\n\n const [comments] = CUI.sections.topicComments({\n topic,\n actions: actions?.comments,\n styles: styles?.users,\n });\n\n const onReminderClick = () => {\n // eslint-disable-next-line no-alert\n window.alert(\n `An email will be sent to ${topic.assignedTo}! (obviosuly not, this is just for demo purposes)`,\n );\n };\n\n topicSections = BUI.html`\n \n ${information}\n \n \n ${comments}\n \n \n ${viewpoints}\n \n \n ${relatedTopics}\n \n \x3c!-- This is a custom section where you can add any functionality you like --\x3e\n \n ${\n topic.assignedTo\n ? BUI.html`\n \n `\n : BUI.html`\n The topic must have an assignee to use the communication tools. Update the topic with a new assignee!\n `\n }\n \n `;\n } else {\n missingTopicSection = BUI.html`\n \n ${!topic ? BUI.html`There is no topic to display in this panel!` : null}\n \n `;\n }\n\n return BUI.html`\n \n ${missingTopicSection}\n ${topicSections}\n \n `;\n },\n { components, world, styles: { users } },\n);\n\n// Lets update the topic panel in case the topic information gets update somewhere else in the app.\ntopics.list.onItemUpdated.add(() => updateTopicPanel());\n'})}),"\n",(0,o.jsx)(n.admonition,{type:"tip",children:(0,o.jsxs)(n.p,{children:["If you're unsure about how to create custom functional UI components just like the panel above, take a look at the dedicated ",(0,o.jsx)(n.a,{href:"/Tutorials/UserInterface/Core/Component",children:"Component"})," tutorial."]})}),"\n",(0,o.jsx)(n.p,{children:"It looks scarier than what it actually is! We give you the functional pieces, then is entirely up to you how to stack them together to define your UIs. If we give you a pre-made panel with everything, it would be easier to implement but harder to customize. The way its made let you create a panel with all the functional pieces already working, but then you have the chance to keep adding custom UIs for other functionalities you may create on top of topics.\nWhen you know which topic data to display in the panel, then you can update the topic data component. What need to happen to update the topic data panel entirely depends on your app! However, the topics list table includes a callback that gets triggered each time a topic is clicked with a button located next to its title, lets use that in this case! For it, set the callback to update the topic panel with the clicked topic as follows:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"updateTopicsList({\n onTopicEnter: (topic) => {\n updateTopicPanel({ topic });\n },\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-creating-a-button-to-download-bcfs",children:"\u23ec Creating a Button to Download BCFs"}),"\n",(0,o.jsx)(n.p,{children:"To complete our BCF integration, let's create a button to download the topics created using the BCFTopics component:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const downloadBtn = BUI.Component.create(() => {\n const onDownload = async () => {\n const selectedTopics = [...topicsList.selection]\n .map(({ Guid }) => {\n if (!(Guid && typeof Guid === "string")) return null;\n const topic = topics.list.get(Guid);\n return topic;\n })\n .filter((topic) => topic) as OBC.Topic[];\n\n const topicsToExport =\n selectedTopics.length > 0 ? selectedTopics : [...topics.list.values()];\n\n if (topicsToExport.length === 0) return;\n\n const bcfData = await topics.export(topicsToExport);\n const bcfFile = new File([bcfData], "topics.bcf");\n\n const a = document.createElement("a");\n a.href = URL.createObjectURL(bcfFile);\n a.download = bcfFile.name;\n a.click();\n URL.revokeObjectURL(a.href);\n };\n\n return BUI.html` `;\n});\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-creating-a-panel-to-hold-the-table",children:"\ud83e\udd45 Creating a Panel to Hold the Table"}),"\n",(0,o.jsx)(n.p,{children:"Let's now create a BIM Panel to hold the topics list while also adding the corresponding buttons to trigger the functionalities like showing the form and downloading the BCF file:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const bcfPanel = BUI.Component.create(() => {\n const onTextInput = (e: Event) => {\n const input = e.target as BUI.TextInput;\n topicsList.queryString = input.value;\n };\n\n return BUI.html`\n \n \n
    \n \n
    \n ${showFormBtn}\n ${downloadBtn}\n
    \n
    \n ${topicsList}\n     \n     \n `;\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"Finally, let's create a BIM Grid element and provide the panels to the viewport to display everything."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const app = document.createElement("bim-grid");\napp.layouts = {\n main: {\n template: `\n "customTopicPanel viewport"\n "customTopicPanel bcfPanel" 25rem\n /24rem 1fr\n `,\n elements: { bcfPanel, viewport, customTopicPanel: topicPanel },\n },\n};\n\napp.layout = "main";\ndocument.body.append(app);\n'})}),"\n",(0,o.jsx)(n.p,{children:"Congratulations! You have now created a fully working BCF user interface for your app in less than 10 minutes of work. Keep going with more tutorials! \ud83d\udcaa"})]})}function d(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>c});var o=t(6540);const i={},s=o.createContext(i);function a(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/c1b3b982.a0f83a44.js b/build/assets/js/c1b3b982.a0f83a44.js new file mode 100644 index 000000000..9072bd5e9 --- /dev/null +++ b/build/assets/js/c1b3b982.a0f83a44.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8383],{7207:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>m,frontMatter:()=>a,metadata:()=>i,toc:()=>c});var o=t(4848),s=t(8453);const a={},r=void 0,i={id:"Tutorials/Components/Front/AreaMeasurement",title:"AreaMeasurement",description:'window.open("https://thatopen.github.io/engine_components/examples/AreaMeasurement")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Front/AreaMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/AreaMeasurement",permalink:"/Tutorials/Components/Front/AreaMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"AngleMeasurement",permalink:"/Tutorials/Components/Front/AngleMeasurement"},next:{title:"Civil3DNavigator",permalink:"/Tutorials/Components/Front/Civil3DNavigator"}},l={},c=[{value:"\ud83d\udcd0 Measuring areas",id:"-measuring-areas",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83c\udfb2 Creating a Cube Mesh",id:"-creating-a-cube-mesh",level:3},{value:"\ud83d\udee0\ufe0f Getting the area measurements",id:"\ufe0f-getting-the-area-measurements",level:3},{value:"\ud83d\uddb1\ufe0f Setting up mouse events",id:"\ufe0f-setting-up-mouse-events",level:3},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/AreaMeasurement"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/AreaMeasurement"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/AreaMeasurement/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"-measuring-areas",children:"\ud83d\udcd0 Measuring areas"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an area measurement tool to your end users.\nWe will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"three"})," to create some 3D items."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components-front"})," to use some frontend-oriented components."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as OBC from "@thatopen/components";\nimport * as BUI from "@thatopen/ui";\nimport * as THREE from "three";\nimport * as OBCF from "@thatopen/components-front";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBCF.PostproductionRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.PostproductionRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-creating-a-cube-mesh",children:"\ud83c\udfb2 Creating a Cube Mesh"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["For this tutorial we will use a Cube, you can add any geometry as per your preference. We will create a ",(0,o.jsx)(n.a,{href:"https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry",children:"Cube"})," with ",(0,o.jsx)(n.code,{children:"3x3x3"})," dimensions and use red color for the material."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);\nconst cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });\nconst cube = new THREE.Mesh(cubeGeometry, cubeMaterial);\ncube.position.set(0, 1.5, 0);\nworld.scene.three.add(cube);\nworld.meshes.add(cube);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-getting-the-area-measurements",children:"\ud83d\udee0\ufe0f Getting the area measurements"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"First, let's get an instance of the area measurement component and initialize it:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const areaDims = components.get(OBCF.AreaMeasurement);\nareaDims.world = world;\nareaDims.enabled = true;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-setting-up-mouse-events",children:"\ud83d\uddb1\ufe0f Setting up mouse events"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now, we'll define how to create the area dimensions. In this case, we'll keep it simple and use the double click event of the container HTML element. We'll also use the right mouse button to end the creation of the area."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"container.ondblclick = () => areaDims.create();\ncontainer.oncontextmenu = () => areaDims.endCreation();\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-deleting-the-dimensions",children:"\ud83e\uddf9 Deleting the Dimensions"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["Now that we know how to make multiple dimensions, we'll learn how to delete them when necessary. Dimensions can be removed using the ",(0,o.jsx)(n.code,{children:"deleteAll()"})," method, which deletes all the created dimensions. Again, we'll keep it simple and bind this event to the keydown event. Specifically, it will fire when the user presses the ",(0,o.jsx)(n.code,{children:"Delete"})," or ",(0,o.jsx)(n.code,{children:"Backspace"})," key."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'window.onkeydown = (event) => {\n if (event.code === "Delete" || event.code === "Backspace") {\n areaDims.deleteAll();\n }\n};\n'})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We'll use the ",(0,o.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We will use the ",(0,o.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,o.jsx)(n.code,{children:"init"})," method of the ",(0,o.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we will add some UI to have some control over the dimensions we create. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n Create area dimension: Double click \n Calculate selected area: Right click \n Delete dimension: Delete \n \n \n \n \n \n \n \n \n \n \n\n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,o.jsx)(n.p,{children:"And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const button = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n});\n\ndocument.body.append(button);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"That's it! You have created an app that can create and delete area dimensions on any 3D object. Congratulations!"})]})}function m(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>i});var o=t(6540);const s={},a=o.createContext(s);function r(e){const n=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/c1b3b982.e5348c0d.js b/build/assets/js/c1b3b982.e5348c0d.js deleted file mode 100644 index 1a6caea4c..000000000 --- a/build/assets/js/c1b3b982.e5348c0d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8383],{7207:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>c});var s=t(4848),o=t(8453);const r={},a=void 0,i={id:"Tutorials/Components/Front/AreaMeasurement",title:"AreaMeasurement",description:'window.open("https://thatopen.github.io/engine_components/examples/AreaMeasurement")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Front/AreaMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/AreaMeasurement",permalink:"/Tutorials/Components/Front/AreaMeasurement",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"AngleMeasurement",permalink:"/Tutorials/Components/Front/AngleMeasurement"},next:{title:"Civil3DNavigator",permalink:"/Tutorials/Components/Front/Civil3DNavigator"}},l={},c=[{value:"\ud83d\udcd0 Measuring areas",id:"-measuring-areas",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83c\udfb2 Creating a Cube Mesh",id:"-creating-a-cube-mesh",level:3},{value:"\ud83d\udee0\ufe0f Getting the area measurements",id:"\ufe0f-getting-the-area-measurements",level:3},{value:"\ud83d\uddb1\ufe0f Setting up mouse events",id:"\ufe0f-setting-up-mouse-events",level:3},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{style:{position:"relative"},children:[(0,s.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/AreaMeasurement"}),(0,s.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/AreaMeasurement"),children:"Go Full Screen"})]}),"\n",(0,s.jsx)(n.admonition,{title:"Source",type:"info",children:(0,s.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,s.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/AreaMeasurement/example.ts",children:"here"}),"."]})}),"\n",(0,s.jsx)(n.h3,{id:"-measuring-areas",children:"\ud83d\udcd0 Measuring areas"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an area measurement tool to your end users.\nWe will import:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"three"})," to create some 3D items."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"@thatopen/components-front"})," to use some frontend-oriented components."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as OBC from "@thatopen/components";\nimport * as THREE from "three";\nimport * as OBCF from "@thatopen/components-front";\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBCF.PostproductionRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.PostproductionRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,s.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-creating-a-cube-mesh",children:"\ud83c\udfb2 Creating a Cube Mesh"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["For this tutorial we will use a Cube, you can add any geometry as per your preference. We will create a ",(0,s.jsx)(n.a,{href:"https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry",children:"Cube"})," with ",(0,s.jsx)(n.code,{children:"3x3x3"})," dimensions and use red color for the material."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);\nconst cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });\nconst cube = new THREE.Mesh(cubeGeometry, cubeMaterial);\ncube.position.set(0, 1.5, 0);\nworld.scene.three.add(cube);\nworld.meshes.add(cube);\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-getting-the-area-measurements",children:"\ud83d\udee0\ufe0f Getting the area measurements"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"First, let's get an instance of the area measurement component and initialize it:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const areaDims = components.get(OBCF.AreaMeasurement);\nareaDims.world = world;\nareaDims.enabled = true;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-setting-up-mouse-events",children:"\ud83d\uddb1\ufe0f Setting up mouse events"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"Now, we'll define how to create the area dimensions. In this case, we'll keep it simple and use the double click event of the container HTML element. We'll also use the right mouse button to end the creation of the area."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"container.ondblclick = () => areaDims.create();\ncontainer.oncontextmenu = () => areaDims.endCreation();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"-deleting-the-dimensions",children:"\ud83e\uddf9 Deleting the Dimensions"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["Now that we know how to make multiple dimensions, we'll learn how to delete them when necessary. Dimensions can be removed using the ",(0,s.jsx)(n.code,{children:"deleteAll()"})," method, which deletes all the created dimensions. Again, we'll keep it simple and bind this event to the keydown event. Specifically, it will fire when the user presses the ",(0,s.jsx)(n.code,{children:"Delete"})," or ",(0,s.jsx)(n.code,{children:"Backspace"})," key."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'window.onkeydown = (event) => {\n if (event.code === "Delete" || event.code === "Backspace") {\n areaDims.deleteAll();\n }\n};\n'})}),"\n",(0,s.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.p,{children:["We'll use the ",(0,s.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,s.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.p,{children:"That's it! You have created an app that can create and delete area dimensions on any 3D object. Congratulations!"})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>i});var s=t(6540);const o={},r=s.createContext(o);function a(e){const n=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/cc65862f.7da3e807.js b/build/assets/js/cc65862f.7da3e807.js deleted file mode 100644 index d1cfd5366..000000000 --- a/build/assets/js/cc65862f.7da3e807.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[2188],{1074:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>m,contentTitle:()=>i,default:()=>l,frontMatter:()=>s,metadata:()=>p,toc:()=>o});var n=a(4848),r=a(8453);const s={},i="FragmentIdMap",p={id:"api/@thatopen/fragments/interfaces/FragmentIdMap",title:"FragmentIdMap",description:"A map that associates each fragmentID with a set of item IDs.",source:"@site/docs/api/@thatopen/fragments/interfaces/FragmentIdMap.md",sourceDirName:"api/@thatopen/fragments/interfaces",slug:"/api/@thatopen/fragments/interfaces/FragmentIdMap",permalink:"/api/@thatopen/fragments/interfaces/FragmentIdMap",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"StreamSerializer",permalink:"/api/@thatopen/fragments/classes/StreamSerializer"},next:{title:"IfcMetadata",permalink:"/api/@thatopen/fragments/interfaces/IfcMetadata"}},m={},o=[{value:"Remarks",id:"remarks",level:2},{value:"Example",id:"example",level:2},{value:"Template",id:"template",level:2},{value:"Template",id:"template-1",level:2}];function c(e){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"fragmentidmap",children:"FragmentIdMap"}),"\n",(0,n.jsx)(t.p,{children:"A map that associates each fragmentID with a set of item IDs."}),"\n",(0,n.jsx)(t.h2,{id:"remarks",children:"Remarks"}),"\n",(0,n.jsx)(t.p,{children:"This map is used to efficiently retrieve the item IDs associated with a given fragmentID.\r\nEach fragmentID is a unique identifier for a 3D model fragment, and the corresponding set of item IDs\r\nrepresents the items that are part of that fragment. Generally, the item ID correspond to the express ID of the IFC used to generate the fragments."}),"\n",(0,n.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typescript",children:'const fragmentIdMap: FragmentIdMap = {\r\n "fragment1": new Set([1, 2, 3]),\r\n "fragment2": new Set([4, 5]),\r\n};\n'})}),"\n",(0,n.jsx)(t.h2,{id:"template",children:"Template"}),"\n",(0,n.jsx)(t.p,{children:"The type of the fragmentID. In this case, it is a string."}),"\n",(0,n.jsx)(t.h2,{id:"template-1",children:"Template"}),"\n",(0,n.jsx)(t.p,{children:"The type of the itemID. In this case, it is a number."})]})}function l(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},8453:(e,t,a)=>{a.d(t,{R:()=>i,x:()=>p});var n=a(6540);const r={},s=n.createContext(r);function i(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function p(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/cc861d23.2b274bba.js b/build/assets/js/cc861d23.2b274bba.js deleted file mode 100644 index a4f56c9de..000000000 --- a/build/assets/js/cc861d23.2b274bba.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[1957],{148:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>h,contentTitle:()=>s,default:()=>o,frontMatter:()=>r,metadata:()=>c,toc:()=>d});var l=n(4848),i=n(8453);const r={},s="Alignment",c={id:"api/@thatopen/fragments/classes/Alignment",title:"Alignment",description:"Represents an alignment in a civil engineering project. An alignment consists of vertical, horizontal, and absolute civil curves.",source:"@site/docs/api/@thatopen/fragments/classes/Alignment.md",sourceDirName:"api/@thatopen/fragments/classes",slug:"/api/@thatopen/fragments/classes/Alignment",permalink:"/api/@thatopen/fragments/classes/Alignment",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"@thatopen/fragments",permalink:"/api/@thatopen/fragments/"},next:{title:"CivilCurve",permalink:"/api/@thatopen/fragments/classes/CivilCurve"}},h={},d=[{value:"Properties",id:"properties",level:2},{value:"absolute",id:"absolute",level:3},{value:"horizontal",id:"horizontal",level:3},{value:"initialKP",id:"initialkp",level:3},{value:"vertical",id:"vertical",level:3},{value:"Methods",id:"methods",level:2},{value:"getCurveAt()",id:"getcurveat",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"curve",id:"curve",level:5},{value:"percentage",id:"percentage",level:5},{value:"Throws",id:"throws",level:4},{value:"getLength()",id:"getlength",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"getPointAt()",id:"getpointat",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Throws",id:"throws-1",level:4}];function a(e){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",hr:"hr",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.h1,{id:"alignment",children:"Alignment"}),"\n",(0,l.jsx)(t.p,{children:"Represents an alignment in a civil engineering project. An alignment consists of vertical, horizontal, and absolute civil curves."}),"\n",(0,l.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,l.jsx)(t.h3,{id:"absolute",children:"absolute"}),"\n",(0,l.jsxs)(t.blockquote,{children:["\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"absolute"}),": ",(0,l.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CivilCurve",children:(0,l.jsx)(t.code,{children:"CivilCurve"})}),"[] = ",(0,l.jsx)(t.code,{children:"[]"})]}),"\n"]}),"\n",(0,l.jsx)(t.p,{children:"Absolute civil curves in the alignment."}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h3,{id:"horizontal",children:"horizontal"}),"\n",(0,l.jsxs)(t.blockquote,{children:["\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"horizontal"}),": ",(0,l.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CivilCurve",children:(0,l.jsx)(t.code,{children:"CivilCurve"})}),"[] = ",(0,l.jsx)(t.code,{children:"[]"})]}),"\n"]}),"\n",(0,l.jsx)(t.p,{children:"Horizontal civil curves in the alignment."}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h3,{id:"initialkp",children:"initialKP"}),"\n",(0,l.jsxs)(t.blockquote,{children:["\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"initialKP"}),": ",(0,l.jsx)(t.code,{children:"number"})," = ",(0,l.jsx)(t.code,{children:"0"})]}),"\n"]}),"\n",(0,l.jsx)(t.p,{children:"Initial KP (Kilometer Point) of the alignment."}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h3,{id:"vertical",children:"vertical"}),"\n",(0,l.jsxs)(t.blockquote,{children:["\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"vertical"}),": ",(0,l.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CivilCurve",children:(0,l.jsx)(t.code,{children:"CivilCurve"})}),"[] = ",(0,l.jsx)(t.code,{children:"[]"})]}),"\n"]}),"\n",(0,l.jsx)(t.p,{children:"Vertical civil curves in the alignment."}),"\n",(0,l.jsx)(t.h2,{id:"methods",children:"Methods"}),"\n",(0,l.jsx)(t.h3,{id:"getcurveat",children:"getCurveAt()"}),"\n",(0,l.jsxs)(t.blockquote,{children:["\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"getCurveAt"}),"(",(0,l.jsx)(t.code,{children:"percentage"}),", ",(0,l.jsx)(t.code,{children:"type"}),"): ",(0,l.jsx)(t.code,{children:"object"})]}),"\n"]}),"\n",(0,l.jsx)(t.p,{children:"Returns the curve and the percentage at the specified percentage along the specified alignment type.\r\nIf the percentage is out of range, it will be clamped to the nearest valid value (0 or 1).\r\nIf the point cannot be computed, an error will be thrown."}),"\n",(0,l.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(t.tbody,{children:[(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.code,{children:"percentage"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.code,{children:"number"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"The percentage along the alignment type (between zero and one)."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.code,{children:"type"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/fragments/type-aliases/AlignmentType",children:(0,l.jsx)(t.code,{children:"AlignmentType"})})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"The type of alignment (vertical, horizontal, or absolute)."})]})]})]}),"\n",(0,l.jsx)(t.h4,{id:"returns",children:"Returns"}),"\n",(0,l.jsx)(t.p,{children:(0,l.jsx)(t.code,{children:"object"})}),"\n",(0,l.jsx)(t.p,{children:"An object containing the curve and the percentage along the curve."}),"\n",(0,l.jsx)(t.h5,{id:"curve",children:"curve"}),"\n",(0,l.jsxs)(t.blockquote,{children:["\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"curve"}),": ",(0,l.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CivilCurve",children:(0,l.jsx)(t.code,{children:"CivilCurve"})})]}),"\n"]}),"\n",(0,l.jsx)(t.h5,{id:"percentage",children:"percentage"}),"\n",(0,l.jsxs)(t.blockquote,{children:["\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"percentage"}),": ",(0,l.jsx)(t.code,{children:"number"})]}),"\n"]}),"\n",(0,l.jsx)(t.h4,{id:"throws",children:"Throws"}),"\n",(0,l.jsx)(t.p,{children:"Will throw an error if the percentage is out of range or if the point cannot be computed."}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h3,{id:"getlength",children:"getLength()"}),"\n",(0,l.jsxs)(t.blockquote,{children:["\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"getLength"}),"(",(0,l.jsx)(t.code,{children:"type"}),"): ",(0,l.jsx)(t.code,{children:"number"})]}),"\n"]}),"\n",(0,l.jsx)(t.p,{children:"Returns the total length of the specified alignment type."}),"\n",(0,l.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsx)(t.tbody,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.code,{children:"type"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/fragments/type-aliases/AlignmentType",children:(0,l.jsx)(t.code,{children:"AlignmentType"})})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"The type of alignment (vertical, horizontal, or absolute)."})]})})]}),"\n",(0,l.jsx)(t.h4,{id:"returns-1",children:"Returns"}),"\n",(0,l.jsx)(t.p,{children:(0,l.jsx)(t.code,{children:"number"})}),"\n",(0,l.jsx)(t.p,{children:"The total length of the specified alignment type."}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h3,{id:"getpointat",children:"getPointAt()"}),"\n",(0,l.jsxs)(t.blockquote,{children:["\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"getPointAt"}),"(",(0,l.jsx)(t.code,{children:"percentage"}),", ",(0,l.jsx)(t.code,{children:"type"}),"): ",(0,l.jsx)(t.code,{children:"Vector3"})]}),"\n"]}),"\n",(0,l.jsx)(t.p,{children:"Returns the point at the specified percentage along the specified alignment type."}),"\n",(0,l.jsx)(t.h4,{id:"parameters-2",children:"Parameters"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(t.tbody,{children:[(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.code,{children:"percentage"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.code,{children:"number"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"The percentage along the alignment type (between zero and one)."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.code,{children:"type"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/fragments/type-aliases/AlignmentType",children:(0,l.jsx)(t.code,{children:"AlignmentType"})})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"The type of alignment (vertical, horizontal, or absolute)."})]})]})]}),"\n",(0,l.jsx)(t.h4,{id:"returns-2",children:"Returns"}),"\n",(0,l.jsx)(t.p,{children:(0,l.jsx)(t.code,{children:"Vector3"})}),"\n",(0,l.jsx)(t.p,{children:"The point at the specified percentage along the specified alignment type."}),"\n",(0,l.jsx)(t.h4,{id:"throws-1",children:"Throws"}),"\n",(0,l.jsx)(t.p,{children:"Will throw an error if the percentage is out of range or if the point cannot be computed."})]})}function o(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(a,{...e})}):a(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>c});var l=n(6540);const i={},r=l.createContext(i);function s(e){const t=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),l.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/d4de7b83.1b840e17.js b/build/assets/js/d4de7b83.1b840e17.js new file mode 100644 index 000000000..3768778b7 --- /dev/null +++ b/build/assets/js/d4de7b83.1b840e17.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8318],{3287:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>o,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>c});var l=n(4848),s=n(8453);const i={},a="@thatopen/ui",r={id:"api/@thatopen/ui/index",title:"@thatopen/ui",description:"Classes",source:"@site/docs/api/@thatopen/ui/index.md",sourceDirName:"api/@thatopen/ui",slug:"/api/@thatopen/ui/",permalink:"/api/@thatopen/ui/",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"StreamedInstances",permalink:"/api/@thatopen/components-front/type-aliases/StreamedInstances"},next:{title:"Button",permalink:"/api/@thatopen/ui/classes/Button"}},o={},c=[{value:"Classes",id:"classes",level:2},{value:"Interfaces",id:"interfaces",level:2},{value:"Type Aliases",id:"type-aliases",level:2},{value:"Functions",id:"functions",level:2}];function d(e){const t={a:"a",h1:"h1",h2:"h2",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.h1,{id:"thatopenui",children:"@thatopen/ui"}),"\n",(0,l.jsx)(t.h2,{id:"classes",children:"Classes"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Class"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(t.tbody,{children:[(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Button",children:"Button"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom button web component for BIM applications. HTML tag: bim-button"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Checkbox",children:"Checkbox"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom checkbox web component for BIM applications. HTML tag: bim-checkbox"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/ColorInput",children:"ColorInput"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom color input web component for BIM applications. HTML tag: bim-color-input"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Component",children:"Component"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A base class for UI components that utilizes the LitElement library. Provides functionality for rendering stateless and stateful components, as well as lazy loading of elements using Intersection Observer."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Dropdown",children:"Dropdown"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom dropdown web component for BIM applications."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Grid",children:"Grid"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom grid component for web applications."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Icon",children:"Icon"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom icon web component for BIM applications. HTML tag: bim-icon"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Input",children:"Input"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom input web component for BIM applications. HTML tag: bim-input"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Label",children:"Label"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom label web component for BIM applications. HTML tag: bim-label"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Manager",children:"Manager"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Manager class is responsible for initializing the BIM UI library, defining custom elements, and providing configuration options."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/NumberInput",children:"NumberInput"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom number input web component for BIM applications. HTML tag: bim-number-input"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Option",children:"Option"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom option web component for BIM applications. HTML tag: bim-option"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Panel",children:"Panel"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom panel web component for BIM applications. HTML tag: bim-panel"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/PanelSection",children:"PanelSection"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom panel section web component for BIM applications. HTML tag: bim-panel-section"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Selector",children:"Selector"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom selector web component for BIM applications. HTML tag: bim-selector"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Tab",children:"Tab"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom tab web component for BIM applications. HTML tag: bim-tab"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Table",children:"Table"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom table web component for BIM applications. HTML tag: bim-table"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Tabs",children:"Tabs"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom tabs web component for BIM applications. HTML tag: bim-tabs"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/TextInput",children:"TextInput"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom text input web component for BIM applications. HTML tag: bim-text-input"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Toolbar",children:"Toolbar"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom toolbar web component for BIM applications. HTML tag: bim-toolbar"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/ToolbarGroup",children:"ToolbarGroup"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom toolbar group web component for BIM applications. HTML tag: bim-toolbar-group"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/ToolbarSection",children:"ToolbarSection"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom toolbar section web component for BIM applications. HTML tag: bim-toolbar-section"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Viewport",children:"Viewport"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom viewport web component for BIM applications. HTML tag: bim-viewport"})]})]})]}),"\n",(0,l.jsx)(t.h2,{id:"interfaces",children:"Interfaces"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Interface"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(t.tbody,{children:[(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/CellCreatedEventDetail",children:"CellCreatedEventDetail"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents the detail of a cell created event."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/ColumnData",children:"ColumnData"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a column in the table."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/EntryQuery",children:"EntryQuery"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a single query condition."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/HasName",children:"HasName"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents an object that has a name and an optional label."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/HasValue",children:"HasValue"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents an object that has a value and an event for value changes."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/ManagerConfig",children:"ManagerConfig"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Configuration interface for the Manager class. Defines the properties and their types that can be configured for the Manager."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/QueryGroup",children:"QueryGroup"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a group of queries with an operator."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/RowCreatedEventDetail",children:"RowCreatedEventDetail"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents the detail of a row created event."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/RowDeselectedEventDetail",children:"RowDeselectedEventDetail"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents the detail of a row deselected event."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/RowSelectedEventDetail",children:"RowSelectedEventDetail"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents the detail of a row selected event."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/TableGroupData",children:"TableGroupData"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a group of table rows with optional children."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/TableGroupTemplate",children:"TableGroupTemplate"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a template for rendering a group of table rows in a table."})]})]})]}),"\n",(0,l.jsx)(t.h2,{id:"type-aliases",children:"Type Aliases"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Type alias"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(t.tbody,{children:[(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/ConditionFunctions",children:"ConditionFunctions"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a map of condition functions, where the key is a QueryCondition and the value is a function that evaluates the condition."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/GridLayoutsDefinition",children:"GridLayoutsDefinition"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a collection of predefined grid layouts for the Grid component. Each layout is defined by a unique name, a grid template string, and a map of area names to HTMLElement instances. The grid template string defines the structure of the grid, and the area names correspond to the grid-area property of the HTMLElement instances. The HTMLElement instances are used to populate the grid with content."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/Query",children:"Query"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a query, which can be a single query or a group of queries."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/QueryCondition",children:"QueryCondition"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a condition used in query building."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/QueryOperators",children:"QueryOperators"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents an operator used in query building."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/StatefullComponent",children:"StatefullComponent"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a function that returns a TemplateResult for a stateful component."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/StatelessComponent",children:"StatelessComponent"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a function that returns a TemplateResult for a stateless component."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/TableDataTransform",children:"TableDataTransform"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a transformation function for table data."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/TableRowData",children:"TableRowData"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a row of data for a table."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/TableRowTemplate",children:"TableRowTemplate"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a template for rendering a row of data in a table."})]})]})]}),"\n",(0,l.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Function"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsx)(t.tbody,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/functions/getElementValue",children:"getElementValue"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Extracts and returns the value of an HTML element's attributes."})]})})]})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>r});var l=n(6540);const s={},i=l.createContext(s);function a(e){const t=l.useContext(i);return l.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),l.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/d4de7b83.d26abe89.js b/build/assets/js/d4de7b83.d26abe89.js deleted file mode 100644 index d9f964e63..000000000 --- a/build/assets/js/d4de7b83.d26abe89.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8318],{3287:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>o,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>c});var l=n(4848),s=n(8453);const i={},a="@thatopen/ui",r={id:"api/@thatopen/ui/index",title:"@thatopen/ui",description:"Classes",source:"@site/docs/api/@thatopen/ui/index.md",sourceDirName:"api/@thatopen/ui",slug:"/api/@thatopen/ui/",permalink:"/api/@thatopen/ui/",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"StreamedGeometries",permalink:"/api/@thatopen/fragments/type-aliases/StreamedGeometries"},next:{title:"Button",permalink:"/api/@thatopen/ui/classes/Button"}},o={},c=[{value:"Classes",id:"classes",level:2},{value:"Interfaces",id:"interfaces",level:2},{value:"Type Aliases",id:"type-aliases",level:2},{value:"Functions",id:"functions",level:2}];function d(e){const t={a:"a",h1:"h1",h2:"h2",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.h1,{id:"thatopenui",children:"@thatopen/ui"}),"\n",(0,l.jsx)(t.h2,{id:"classes",children:"Classes"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Class"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(t.tbody,{children:[(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Button",children:"Button"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom button web component for BIM applications. HTML tag: bim-button"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Checkbox",children:"Checkbox"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom checkbox web component for BIM applications. HTML tag: bim-checkbox"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/ColorInput",children:"ColorInput"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom color input web component for BIM applications. HTML tag: bim-color-input"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Component",children:"Component"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A base class for UI components that utilizes the LitElement library. Provides functionality for rendering stateless and stateful components, as well as lazy loading of elements using Intersection Observer."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Dropdown",children:"Dropdown"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom dropdown web component for BIM applications."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Grid",children:"Grid"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom grid component for web applications."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Icon",children:"Icon"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom icon web component for BIM applications. HTML tag: bim-icon"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Input",children:"Input"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom input web component for BIM applications. HTML tag: bim-input"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Label",children:"Label"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom label web component for BIM applications. HTML tag: bim-label"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Manager",children:"Manager"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Manager class is responsible for initializing the BIM UI library, defining custom elements, and providing configuration options."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/NumberInput",children:"NumberInput"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom number input web component for BIM applications. HTML tag: bim-number-input"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Option",children:"Option"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom option web component for BIM applications. HTML tag: bim-option"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Panel",children:"Panel"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom panel web component for BIM applications. HTML tag: bim-panel"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/PanelSection",children:"PanelSection"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom panel section web component for BIM applications. HTML tag: bim-panel-section"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Selector",children:"Selector"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom selector web component for BIM applications. HTML tag: bim-selector"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Tab",children:"Tab"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom tab web component for BIM applications. HTML tag: bim-tab"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Table",children:"Table"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom table web component for BIM applications. HTML tag: bim-table"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Tabs",children:"Tabs"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom tabs web component for BIM applications. HTML tag: bim-tabs"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/TextInput",children:"TextInput"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom text input web component for BIM applications. HTML tag: bim-text-input"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Toolbar",children:"Toolbar"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom toolbar web component for BIM applications. HTML tag: bim-toolbar"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/ToolbarGroup",children:"ToolbarGroup"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom toolbar group web component for BIM applications. HTML tag: bim-toolbar-group"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/ToolbarSection",children:"ToolbarSection"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom toolbar section web component for BIM applications. HTML tag: bim-toolbar-section"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/classes/Viewport",children:"Viewport"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"A custom viewport web component for BIM applications. HTML tag: bim-viewport"})]})]})]}),"\n",(0,l.jsx)(t.h2,{id:"interfaces",children:"Interfaces"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Interface"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(t.tbody,{children:[(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/CellCreatedEventDetail",children:"CellCreatedEventDetail"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents the detail of a cell created event."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/ColumnData",children:"ColumnData"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a column in the table."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/EntryQuery",children:"EntryQuery"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a single query condition."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/HasName",children:"HasName"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents an object that has a name and an optional label."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/HasValue",children:"HasValue"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents an object that has a value and an event for value changes."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/ManagerConfig",children:"ManagerConfig"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Configuration interface for the Manager class. Defines the properties and their types that can be configured for the Manager."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/QueryGroup",children:"QueryGroup"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a group of queries with an operator."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/RowCreatedEventDetail",children:"RowCreatedEventDetail"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents the detail of a row created event."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/RowDeselectedEventDetail",children:"RowDeselectedEventDetail"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents the detail of a row deselected event."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/RowSelectedEventDetail",children:"RowSelectedEventDetail"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents the detail of a row selected event."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/TableGroupData",children:"TableGroupData"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a group of table rows with optional children."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/interfaces/TableGroupTemplate",children:"TableGroupTemplate"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a template for rendering a group of table rows in a table."})]})]})]}),"\n",(0,l.jsx)(t.h2,{id:"type-aliases",children:"Type Aliases"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Type alias"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsxs)(t.tbody,{children:[(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/ConditionFunctions",children:"ConditionFunctions"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a map of condition functions, where the key is a QueryCondition and the value is a function that evaluates the condition."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/GridLayoutsDefinition",children:"GridLayoutsDefinition"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a collection of predefined grid layouts for the Grid component. Each layout is defined by a unique name, a grid template string, and a map of area names to HTMLElement instances. The grid template string defines the structure of the grid, and the area names correspond to the grid-area property of the HTMLElement instances. The HTMLElement instances are used to populate the grid with content."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/Query",children:"Query"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a query, which can be a single query or a group of queries."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/QueryCondition",children:"QueryCondition"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a condition used in query building."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/QueryOperators",children:"QueryOperators"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents an operator used in query building."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/StatefullComponent",children:"StatefullComponent"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a function that returns a TemplateResult for a stateful component."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/StatelessComponent",children:"StatelessComponent"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a function that returns a TemplateResult for a stateless component."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/TableDataTransform",children:"TableDataTransform"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a transformation function for table data."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/TableRowData",children:"TableRowData"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a row of data for a table."})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/type-aliases/TableRowTemplate",children:"TableRowTemplate"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Represents a template for rendering a row of data in a table."})]})]})]}),"\n",(0,l.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Function"}),(0,l.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,l.jsx)(t.tbody,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"/api/@thatopen/ui/functions/getElementValue",children:"getElementValue"})}),(0,l.jsx)(t.td,{style:{textAlign:"left"},children:"Extracts and returns the value of an HTML element's attributes."})]})})]})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>r});var l=n(6540);const s={},i=l.createContext(s);function a(e){const t=l.useContext(i);return l.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),l.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/da45e96b.bf1b8e1d.js b/build/assets/js/da45e96b.bf1b8e1d.js deleted file mode 100644 index 2c7611f1a..000000000 --- a/build/assets/js/da45e96b.bf1b8e1d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[233],{2309:(e,r,s)=>{s.r(r),s.d(r,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>d,toc:()=>o});var n=s(4848),t=s(8453);const i={},l="FragmentsGroup",d={id:"api/@thatopen/fragments/classes/FragmentsGroup",title:"FragmentsGroup",description:"A class representing a group of 3D fragments. This class extends THREE.Group and adds additional properties and methods for managing and interacting with the fragments it contains.",source:"@site/docs/api/@thatopen/fragments/classes/FragmentsGroup.md",sourceDirName:"api/@thatopen/fragments/classes",slug:"/api/@thatopen/fragments/classes/FragmentsGroup",permalink:"/api/@thatopen/fragments/classes/FragmentsGroup",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FragmentMesh",permalink:"/api/@thatopen/fragments/classes/FragmentMesh"},next:{title:"Serializer",permalink:"/api/@thatopen/fragments/classes/Serializer"}},c={},o=[{value:"Extends",id:"extends",level:2},{value:"Constructors",id:"constructors",level:2},{value:"new FragmentsGroup()",id:"new-fragmentsgroup",level:3},{value:"Returns",id:"returns",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Properties",id:"properties",level:2},{value:"boundingBox",id:"boundingbox",level:3},{value:"civilData?",id:"civildata",level:3},{value:"alignments",id:"alignments",level:4},{value:"coordinationMatrix",id:"coordinationmatrix",level:4},{value:"coordinationMatrix",id:"coordinationmatrix-1",level:3},{value:"data",id:"data",level:3},{value:"geometryIDs",id:"geometryids",level:3},{value:"opaque",id:"opaque",level:4},{value:"transparent",id:"transparent",level:4},{value:"globalToExpressIDs",id:"globaltoexpressids",level:3},{value:"ifcMetadata",id:"ifcmetadata",level:3},{value:"isStreamed",id:"isstreamed",level:3},{value:"items",id:"items",level:3},{value:"keyFragments",id:"keyfragments",level:3},{value:"streamSettings",id:"streamsettings",level:3},{value:"baseFileName",id:"basefilename",level:4},{value:"baseUrl?",id:"baseurl",level:4},{value:"Deprecated",id:"deprecated",level:5},{value:"ids",id:"ids",level:4},{value:"types",id:"types",level:4},{value:"propertiesDB",id:"propertiesdb",level:3},{value:"url",id:"url",level:3},{value:"useCache",id:"usecache",level:3},{value:"Accessors",id:"accessors",level:2},{value:"hasProperties",id:"hasproperties",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Methods",id:"methods",level:2},{value:"cloneGroup()",id:"clonegroup",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-2",level:4},{value:"dispose()",id:"dispose",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-3",level:4},{value:"getAllPropertiesIDs()",id:"getallpropertiesids",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Example",id:"example",level:4},{value:"getAllPropertiesOfType()",id:"getallpropertiesoftype",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-5",level:4},{value:"Example",id:"example-1",level:4},{value:"getAllPropertiesTypes()",id:"getallpropertiestypes",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Example",id:"example-2",level:4},{value:"getFragmentMap()",id:"getfragmentmap",level:3},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-7",level:4},{value:"getItemVertices()",id:"getitemvertices",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-8",level:4},{value:"Example",id:"example-3",level:4},{value:"getLocalProperties()",id:"getlocalproperties",level:3},{value:"Returns",id:"returns-9",level:4},{value:"Example",id:"example-4",level:4},{value:"setLocalProperties()",id:"setlocalproperties",level:3},{value:"Parameters",id:"parameters-5",level:4},{value:"Returns",id:"returns-10",level:4},{value:"Example",id:"example-5",level:4},{value:"setProperties()",id:"setproperties",level:3},{value:"Parameters",id:"parameters-6",level:4},{value:"Returns",id:"returns-11",level:4},{value:"Throws",id:"throws",level:4},{value:"Example",id:"example-6",level:4},{value:"setPropertiesDB()",id:"setpropertiesdb",level:3},{value:"Parameters",id:"parameters-7",level:4},{value:"Returns",id:"returns-12",level:4}];function a(e){const r={a:"a",blockquote:"blockquote",code:"code",del:"del",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.h1,{id:"fragmentsgroup",children:"FragmentsGroup"}),"\n",(0,n.jsx)(r.p,{children:"A class representing a group of 3D fragments. This class extends THREE.Group and adds additional properties and methods for managing and interacting with the fragments it contains."}),"\n",(0,n.jsx)(r.h2,{id:"extends",children:"Extends"}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.code,{children:"Group"})}),"\n"]}),"\n",(0,n.jsx)(r.h2,{id:"constructors",children:"Constructors"}),"\n",(0,n.jsx)(r.h3,{id:"new-fragmentsgroup",children:"new FragmentsGroup()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"new FragmentsGroup"}),"(): ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/classes/FragmentsGroup",children:(0,n.jsx)(r.code,{children:"FragmentsGroup"})})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Creates a new Group."}),"\n",(0,n.jsx)(r.h4,{id:"returns",children:"Returns"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/classes/FragmentsGroup",children:(0,n.jsx)(r.code,{children:"FragmentsGroup"})})}),"\n",(0,n.jsx)(r.h4,{id:"inherited-from",children:"Inherited from"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.code,{children:"THREE.Group.constructor"})}),"\n",(0,n.jsx)(r.h2,{id:"properties",children:"Properties"}),"\n",(0,n.jsx)(r.h3,{id:"boundingbox",children:"boundingBox"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"boundingBox"}),": ",(0,n.jsx)(r.code,{children:"Box3"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"A THREE.Box3 object representing the bounding box of all fragments in this group."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"civildata",children:"civilData?"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"optional"})," ",(0,n.jsx)(r.strong,{children:"civilData"}),": ",(0,n.jsx)(r.code,{children:"object"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"An optional object containing civil engineering data."}),"\n",(0,n.jsx)(r.h4,{id:"alignments",children:"alignments"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"alignments"}),": ",(0,n.jsx)(r.code,{children:"Map"}),"<",(0,n.jsx)(r.code,{children:"number"}),", ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/classes/Alignment",children:(0,n.jsx)(r.code,{children:"Alignment"})}),">"]}),"\n"]}),"\n",(0,n.jsx)(r.h4,{id:"coordinationmatrix",children:"coordinationMatrix"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"coordinationMatrix"}),": ",(0,n.jsx)(r.code,{children:"Matrix4"})]}),"\n"]}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"coordinationmatrix-1",children:"coordinationMatrix"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"coordinationMatrix"}),": ",(0,n.jsx)(r.code,{children:"Matrix4"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"A THREE.Matrix4 object representing the coordination matrix of this group."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"data",children:"data"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"data"}),": ",(0,n.jsx)(r.code,{children:"Map"}),"<",(0,n.jsx)(r.code,{children:"number"}),", [",(0,n.jsx)(r.code,{children:"number"}),"[], ",(0,n.jsx)(r.code,{children:"number"}),"[]]>"]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"A Map object where the keys are express IDs and the values are arrays of two arrays.\r\nThe first array contains fragment keys to which this asset belongs, and the second array contains floor and category IDs."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"geometryids",children:"geometryIDs"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"geometryIDs"}),": ",(0,n.jsx)(r.code,{children:"object"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"An object with two Map properties, 'opaque' and 'transparent', representing the geometry IDs and keys of opaque and transparent fragments. They must be distinguished because THREE.js doesn't support transparency per instance in InstancedMesh."}),"\n",(0,n.jsx)(r.h4,{id:"opaque",children:"opaque"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"opaque"}),": ",(0,n.jsx)(r.code,{children:"Map"}),"<",(0,n.jsx)(r.code,{children:"number"}),", ",(0,n.jsx)(r.code,{children:"number"}),">"]}),"\n"]}),"\n",(0,n.jsx)(r.h4,{id:"transparent",children:"transparent"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"transparent"}),": ",(0,n.jsx)(r.code,{children:"Map"}),"<",(0,n.jsx)(r.code,{children:"number"}),", ",(0,n.jsx)(r.code,{children:"number"}),">"]}),"\n"]}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"globaltoexpressids",children:"globalToExpressIDs"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"globalToExpressIDs"}),": ",(0,n.jsx)(r.code,{children:"Map"}),"<",(0,n.jsx)(r.code,{children:"string"}),", ",(0,n.jsx)(r.code,{children:"number"}),">"]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"A Map object where the keys are global IDs and the values are expressIDs."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"ifcmetadata",children:"ifcMetadata"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"ifcMetadata"}),": ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/interfaces/IfcMetadata",children:(0,n.jsx)(r.code,{children:"IfcMetadata"})})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"An object representing metadata about the IFC model defined by the IFC schema."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"isstreamed",children:"isStreamed"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"isStreamed"}),": ",(0,n.jsx)(r.code,{children:"boolean"})," = ",(0,n.jsx)(r.code,{children:"false"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Whether this fragments group is being streamed or not."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"items",children:"items"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"items"}),": ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/classes/Fragment",children:(0,n.jsx)(r.code,{children:"Fragment"})}),"[] = ",(0,n.jsx)(r.code,{children:"[]"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"An array of Fragment objects that are part of this group."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"keyfragments",children:"keyFragments"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"keyFragments"}),": ",(0,n.jsx)(r.code,{children:"Map"}),"<",(0,n.jsx)(r.code,{children:"number"}),", ",(0,n.jsx)(r.code,{children:"string"}),">"]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"A Map object where the keys are uints and the values are strings representing fragment IDs.\r\nThis is used to save memory by mapping keys to fragment IDs."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"streamsettings",children:"streamSettings"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"streamSettings"}),": ",(0,n.jsx)(r.code,{children:"object"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"An object containing settings for streaming data, including base URL, base file name, IDs, and types."}),"\n",(0,n.jsx)(r.h4,{id:"basefilename",children:"baseFileName"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"baseFileName"}),": ",(0,n.jsx)(r.code,{children:"string"})]}),"\n"]}),"\n",(0,n.jsx)(r.h4,{id:"baseurl",children:(0,n.jsx)(r.del,{children:"baseUrl?"})}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"optional"})," ",(0,n.jsx)(r.strong,{children:"baseUrl"}),": ",(0,n.jsx)(r.code,{children:"string"})]}),"\n"]}),"\n",(0,n.jsx)(r.h5,{id:"deprecated",children:"Deprecated"}),"\n",(0,n.jsx)(r.p,{children:"use FragmentsGroup.baseUrl instead"}),"\n",(0,n.jsx)(r.h4,{id:"ids",children:"ids"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"ids"}),": ",(0,n.jsx)(r.code,{children:"Map"}),"<",(0,n.jsx)(r.code,{children:"number"}),", ",(0,n.jsx)(r.code,{children:"number"}),">"]}),"\n"]}),"\n",(0,n.jsx)(r.h4,{id:"types",children:"types"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"types"}),": ",(0,n.jsx)(r.code,{children:"Map"}),"<",(0,n.jsx)(r.code,{children:"number"}),", ",(0,n.jsx)(r.code,{children:"number"}),"[]>"]}),"\n"]}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"propertiesdb",children:"propertiesDB"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"static"})," ",(0,n.jsx)(r.strong,{children:"propertiesDB"}),": ",(0,n.jsx)(r.code,{children:"null"})," | ",(0,n.jsx)(r.code,{children:"StreamerFileDb"})," = ",(0,n.jsx)(r.code,{children:"null"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"The object in charge of caching property files locally to save requests over the network."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"url",children:"url"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"static"})," ",(0,n.jsx)(r.strong,{children:"url"}),": ",(0,n.jsx)(r.code,{children:"string"})," = ",(0,n.jsx)(r.code,{children:'""'})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Default URL for requesting property tiles. Feel free to change this, or override the FragmentsGroup.fetch method for more granular control."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"usecache",children:"useCache"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"static"})," ",(0,n.jsx)(r.strong,{children:"useCache"}),": ",(0,n.jsx)(r.code,{children:"boolean"})," = ",(0,n.jsx)(r.code,{children:"true"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Whether to use local cache when streaming properties."}),"\n",(0,n.jsx)(r.h2,{id:"accessors",children:"Accessors"}),"\n",(0,n.jsx)(r.h3,{id:"hasproperties",children:"hasProperties"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"get"})," ",(0,n.jsx)(r.strong,{children:"hasProperties"}),"(): ",(0,n.jsx)(r.code,{children:"boolean"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"A getter that checks if this group has properties, either locally defined or streamed from a data source."}),"\n",(0,n.jsx)(r.h4,{id:"returns-1",children:"Returns"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.code,{children:"boolean"})}),"\n",(0,n.jsx)(r.h2,{id:"methods",children:"Methods"}),"\n",(0,n.jsx)(r.h3,{id:"clonegroup",children:"cloneGroup()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"cloneGroup"}),"(",(0,n.jsx)(r.code,{children:"items"}),"?): ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/classes/FragmentsGroup",children:(0,n.jsx)(r.code,{children:"FragmentsGroup"})})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Creates a copy of the whole group or a part of it. Each fragment clone shares the geometry of with its respective original fragment, but has its own InstancedMesh data, so it also needs to be disposed."}),"\n",(0,n.jsx)(r.h4,{id:"parameters",children:"Parameters"}),"\n",(0,n.jsxs)(r.table,{children:[(0,n.jsx)(r.thead,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Type"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsx)(r.tbody,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsxs)(r.td,{style:{textAlign:"left"},children:[(0,n.jsx)(r.code,{children:"items"}),"?"]}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/interfaces/FragmentIdMap",children:(0,n.jsx)(r.code,{children:"FragmentIdMap"})})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:"Optional - The part of the group to be cloned. If not given, the whole group is cloned."})]})})]}),"\n",(0,n.jsx)(r.h4,{id:"returns-2",children:"Returns"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/classes/FragmentsGroup",children:(0,n.jsx)(r.code,{children:"FragmentsGroup"})})}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"dispose",children:"dispose()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"dispose"}),"(",(0,n.jsx)(r.code,{children:"disposeResources"}),"): ",(0,n.jsx)(r.code,{children:"void"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Method to dispose of the resources used by the FragmentsGroup."}),"\n",(0,n.jsx)(r.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,n.jsxs)(r.table,{children:[(0,n.jsx)(r.thead,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Type"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Default value"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsx)(r.tbody,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"disposeResources"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"boolean"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"true"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:"If true, also dispose of the resources used by the fragments (geometries and materials). Default is true."})]})})]}),"\n",(0,n.jsx)(r.h4,{id:"returns-3",children:"Returns"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.code,{children:"void"})}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"getallpropertiesids",children:"getAllPropertiesIDs()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"getAllPropertiesIDs"}),"(): ",(0,n.jsx)(r.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Method to retrieve all property IDs from either local properties or streamed properties."}),"\n",(0,n.jsx)(r.h4,{id:"returns-4",children:"Returns"}),"\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"number"}),"[]"]}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsx)(r.li,{children:"An array of property IDs."}),"\n"]}),"\n",(0,n.jsx)(r.h4,{id:"example",children:"Example"}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-typescript",children:"const propertyIDs = fragmentsGroup.getAllPropertiesIDs();\r\nconsole.log(propertyIDs); // Output: [12345, 67890,...]\n"})}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"getallpropertiesoftype",children:"getAllPropertiesOfType()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"getAllPropertiesOfType"}),"(",(0,n.jsx)(r.code,{children:"type"}),"): ",(0,n.jsx)(r.code,{children:"Promise"}),"<",(0,n.jsx)(r.code,{children:"null"})," | ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/interfaces/IfcProperties",children:(0,n.jsx)(r.code,{children:"IfcProperties"})}),">"]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Method to retrieve all properties of a specific type from either local properties or streamed properties."}),"\n",(0,n.jsx)(r.h4,{id:"parameters-2",children:"Parameters"}),"\n",(0,n.jsxs)(r.table,{children:[(0,n.jsx)(r.thead,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Type"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsx)(r.tbody,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"type"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"number"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:"The type of properties to retrieve."})]})})]}),"\n",(0,n.jsx)(r.h4,{id:"returns-5",children:"Returns"}),"\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"Promise"}),"<",(0,n.jsx)(r.code,{children:"null"})," | ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/interfaces/IfcProperties",children:(0,n.jsx)(r.code,{children:"IfcProperties"})}),">"]}),"\n",(0,n.jsx)(r.p,{children:"A Promise that resolves to an object containing properties of type IfcProperties, or null if no properties of the specified type are found."}),"\n",(0,n.jsx)(r.h4,{id:"example-1",children:"Example"}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-typescript",children:"const type = 1001; // Example type\r\nfragmentsGroup.getAllPropertiesOfType(type).then((properties) => {\r\n if (properties) {\r\n for (const id in properties) {\r\n const property = properties[id];\r\n console.log(`ID: ${id}, Name: ${property.name}, Type: ${property.type}`);\r\n }\r\n } else {\r\n console.log(`No properties of type ${type} found.`);\r\n }\r\n});\n"})}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"getallpropertiestypes",children:"getAllPropertiesTypes()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"getAllPropertiesTypes"}),"(): ",(0,n.jsx)(r.code,{children:"number"}),"[]"]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Method to retrieve all property types from either local properties or streamed properties."}),"\n",(0,n.jsx)(r.h4,{id:"returns-6",children:"Returns"}),"\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"number"}),"[]"]}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsx)(r.li,{children:"An array of unique property types."}),"\n"]}),"\n",(0,n.jsx)(r.h4,{id:"example-2",children:"Example"}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-typescript",children:"const propertyTypes = fragmentsGroup.getAllPropertiesTypes();\r\nconsole.log(propertyTypes); // Output: [1001, 1002,...]\n"})}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"getfragmentmap",children:"getFragmentMap()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"getFragmentMap"}),"(",(0,n.jsx)(r.code,{children:"expressIDs"}),"): ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/interfaces/FragmentIdMap",children:(0,n.jsx)(r.code,{children:"FragmentIdMap"})})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:'A method to create a map of fragment IDs and express IDs contained within them. This is useful because if you want to get "a chair", it might be made of 4 different geometries, and thus the subsets of 4 different fragments. Using this method, you would get exactly the fragments of where that chair is.'}),"\n",(0,n.jsx)(r.h4,{id:"parameters-3",children:"Parameters"}),"\n",(0,n.jsxs)(r.table,{children:[(0,n.jsx)(r.thead,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Type"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsx)(r.tbody,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"expressIDs"})}),(0,n.jsxs)(r.td,{style:{textAlign:"left"},children:[(0,n.jsx)(r.code,{children:"Iterable"}),"<",(0,n.jsx)(r.code,{children:"number"}),">"]}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:"An iterable of express IDs to create the map for. If not provided, returns the fragment ID map for the whole group."})]})})]}),"\n",(0,n.jsx)(r.h4,{id:"returns-7",children:"Returns"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/interfaces/FragmentIdMap",children:(0,n.jsx)(r.code,{children:"FragmentIdMap"})})}),"\n",(0,n.jsx)(r.p,{children:"A map where the keys are fragment IDs and the values are sets of express IDs."}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"getitemvertices",children:"getItemVertices()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"getItemVertices"}),"(",(0,n.jsx)(r.code,{children:"itemID"}),"): ",(0,n.jsx)(r.code,{children:"Vector3"}),"[]"]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Method to retrieve the vertices of a specific item within the fragments.\r\nThis method finds the fragments that contain the specified item,\r\nthen retrieves the vertices of those fragments."}),"\n",(0,n.jsx)(r.h4,{id:"parameters-4",children:"Parameters"}),"\n",(0,n.jsxs)(r.table,{children:[(0,n.jsx)(r.thead,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Type"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsx)(r.tbody,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"itemID"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"number"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:"The ID of the item for which to retrieve vertices. Usually, an IFC expressID."})]})})]}),"\n",(0,n.jsx)(r.h4,{id:"returns-8",children:"Returns"}),"\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"Vector3"}),"[]"]}),"\n",(0,n.jsx)(r.p,{children:"An array of THREE.Vector3 objects representing the vertices of the specified item."}),"\n",(0,n.jsx)(r.h4,{id:"example-3",children:"Example"}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-typescript",children:"const itemVertices = fragmentsGroup.getItemVertices(12345);\r\nfor (const vertex of itemVertices) {\r\n console.log(`Vertex: ${vertex.x}, ${vertex.y}, ${vertex.z}`);\r\n}\n"})}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"getlocalproperties",children:"getLocalProperties()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"getLocalProperties"}),"(): ",(0,n.jsx)(r.code,{children:"undefined"})," | ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/interfaces/IfcProperties",children:(0,n.jsx)(r.code,{children:"IfcProperties"})})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Method to retrieve the local properties of the fragments in this group."}),"\n",(0,n.jsx)(r.h4,{id:"returns-9",children:"Returns"}),"\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"undefined"})," | ",(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/interfaces/IfcProperties",children:(0,n.jsx)(r.code,{children:"IfcProperties"})})]}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsxs)(r.li,{children:["An object containing properties of type IfcProperties.\r\nThe keys of the object are express IDs as strings, and the values are objects representing the properties of the corresponding express ID.\r\nIf no local properties are set, it returns ",(0,n.jsx)(r.code,{children:"undefined"}),"."]}),"\n"]}),"\n",(0,n.jsx)(r.h4,{id:"example-4",children:"Example"}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-typescript",children:"const properties = fragmentsGroup.getLocalProperties();\r\nif (properties) {\r\n for (const id in properties) {\r\n const property = properties[id];\r\n console.log(`ID: ${id}, Name: ${property.name}, Type: ${property.type}`);\r\n }\r\n}\n"})}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"setlocalproperties",children:"setLocalProperties()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"setLocalProperties"}),"(",(0,n.jsx)(r.code,{children:"properties"}),"): ",(0,n.jsx)(r.code,{children:"void"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Method to set local properties of the fragments in this group."}),"\n",(0,n.jsx)(r.h4,{id:"parameters-5",children:"Parameters"}),"\n",(0,n.jsxs)(r.table,{children:[(0,n.jsx)(r.thead,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Type"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsxs)(r.tbody,{children:[(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"properties"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.a,{href:"/api/@thatopen/fragments/interfaces/IfcProperties",children:(0,n.jsx)(r.code,{children:"IfcProperties"})})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:"An object containing properties of type IfcProperties."})]}),(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:"The keys of the object are express IDs as strings, and the values are objects representing the properties of the corresponding express ID."}),(0,n.jsx)(r.td,{style:{textAlign:"left"}}),(0,n.jsx)(r.td,{style:{textAlign:"left"}})]})]})]}),"\n",(0,n.jsx)(r.h4,{id:"returns-10",children:"Returns"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.code,{children:"void"})}),"\n",(0,n.jsx)(r.h4,{id:"example-5",children:"Example"}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-typescript",children:'const properties: IfcProperties = {\r\n "12345": {\r\n name: "Chair",\r\n type: 1001,\r\n color: [0.5, 0.5, 0.5],\r\n //... other properties\r\n },\r\n "67890": {\r\n name: "Table",\r\n type: 1002,\r\n color: [0.8, 0.8, 0.8],\r\n //... other properties\r\n },\r\n //... more properties\r\n};\n\nfragmentsGroup.setLocalProperties(properties);\n'})}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"setproperties",children:"setProperties()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.strong,{children:"setProperties"}),"(",(0,n.jsx)(r.code,{children:"id"}),", ",(0,n.jsx)(r.code,{children:"value"}),"): ",(0,n.jsx)(r.code,{children:"Promise"}),"<",(0,n.jsx)(r.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Method to set properties of a specific fragment in this group."}),"\n",(0,n.jsx)(r.h4,{id:"parameters-6",children:"Parameters"}),"\n",(0,n.jsxs)(r.table,{children:[(0,n.jsx)(r.thead,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Type"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsxs)(r.tbody,{children:[(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"id"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"number"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:"The ID of the fragment for which to set properties."})]}),(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"value"})}),(0,n.jsxs)(r.td,{style:{textAlign:"left"},children:[(0,n.jsx)(r.code,{children:"null"})," | ",(0,n.jsx)(r.code,{children:"object"})]}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:"The new properties to set for the fragment. If null, it deletes the properties for the fragment."})]})]})]}),"\n",(0,n.jsx)(r.h4,{id:"returns-11",children:"Returns"}),"\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"Promise"}),"<",(0,n.jsx)(r.code,{children:"void"}),">"]}),"\n",(0,n.jsx)(r.h4,{id:"throws",children:"Throws"}),"\n",(0,n.jsx)(r.p,{children:"Will throw an error if writing streamed properties, as it is not supported yet."}),"\n",(0,n.jsx)(r.h4,{id:"example-6",children:"Example"}),"\n",(0,n.jsx)(r.pre,{children:(0,n.jsx)(r.code,{className:"language-typescript",children:'const properties: IfcProperties = {\r\n "12345": {\r\n name: "Chair",\r\n type: 1001,\r\n color: [0.5, 0.5, 0.5],\r\n //... other properties\r\n },\r\n};\n\nfragmentsGroup.setProperties(12345, properties[12345]);\n'})}),"\n",(0,n.jsx)(r.hr,{}),"\n",(0,n.jsx)(r.h3,{id:"setpropertiesdb",children:"setPropertiesDB()"}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.code,{children:"static"})," ",(0,n.jsx)(r.strong,{children:"setPropertiesDB"}),"(",(0,n.jsx)(r.code,{children:"enabled"}),"): ",(0,n.jsx)(r.code,{children:"void"})]}),"\n"]}),"\n",(0,n.jsx)(r.p,{children:"Enables or disables the local property caching system."}),"\n",(0,n.jsx)(r.h4,{id:"parameters-7",children:"Parameters"}),"\n",(0,n.jsxs)(r.table,{children:[(0,n.jsx)(r.thead,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Parameter"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Type"}),(0,n.jsx)(r.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,n.jsx)(r.tbody,{children:(0,n.jsxs)(r.tr,{children:[(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"enabled"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:(0,n.jsx)(r.code,{children:"boolean"})}),(0,n.jsx)(r.td,{style:{textAlign:"left"},children:"Whether to enable or disable it."})]})})]}),"\n",(0,n.jsx)(r.h4,{id:"returns-12",children:"Returns"}),"\n",(0,n.jsx)(r.p,{children:(0,n.jsx)(r.code,{children:"void"})})]})}function h(e={}){const{wrapper:r}={...(0,t.R)(),...e.components};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(a,{...e})}):a(e)}},8453:(e,r,s)=>{s.d(r,{R:()=>l,x:()=>d});var n=s(6540);const t={},i=n.createContext(t);function l(e){const r=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function d(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:l(e.components),n.createElement(i.Provider,{value:r},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/e19f46cf.36036eb7.js b/build/assets/js/e19f46cf.36036eb7.js deleted file mode 100644 index 1af539d7e..000000000 --- a/build/assets/js/e19f46cf.36036eb7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[7422],{1263:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>h,contentTitle:()=>l,default:()=>a,frontMatter:()=>i,metadata:()=>d,toc:()=>c});var s=n(4848),r=n(8453);const i={},l="CivilCurve",d={id:"api/@thatopen/fragments/classes/CivilCurve",title:"CivilCurve",description:"Represents an alignment curve of a civil engineering model.",source:"@site/docs/api/@thatopen/fragments/classes/CivilCurve.md",sourceDirName:"api/@thatopen/fragments/classes",slug:"/api/@thatopen/fragments/classes/CivilCurve",permalink:"/api/@thatopen/fragments/classes/CivilCurve",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Alignment",permalink:"/api/@thatopen/fragments/classes/Alignment"},next:{title:"CurveMesh\\",permalink:"/api/@thatopen/fragments/classes/CurveMesh"}},h={},c=[{value:"Constructors",id:"constructors",level:2},{value:"new CivilCurve()",id:"new-civilcurve",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Properties",id:"properties",level:2},{value:"alignment",id:"alignment",level:3},{value:"data",id:"data",level:3},{value:"Index signature",id:"index-signature",level:4},{value:"index",id:"index",level:3},{value:"mesh",id:"mesh",level:3},{value:"Methods",id:"methods",level:2},{value:"getLength()",id:"getlength",level:3},{value:"Returns",id:"returns-1",level:4},{value:"getPercentageAt()",id:"getpercentageat",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Remarks",id:"remarks",level:4},{value:"getPointAt()",id:"getpointat",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-3",level:4},{value:"Remarks",id:"remarks-1",level:4},{value:"Throws",id:"throws",level:4},{value:"getSegment()",id:"getsegment",level:3},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-4",level:4},{value:"endPoint",id:"endpoint",level:5},{value:"startPoint",id:"startpoint",level:5},{value:"Remarks",id:"remarks-2",level:4},{value:"Throws",id:"throws-1",level:4},{value:"getSegmentAt()",id:"getsegmentat",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-5",level:4},{value:"distanceToStart",id:"distancetostart",level:5},{value:"endPoint",id:"endpoint-1",level:5},{value:"index",id:"index-1",level:5},{value:"startPoint",id:"startpoint-1",level:5},{value:"Remarks",id:"remarks-3",level:4},{value:"Throws",id:"throws-2",level:4}];function o(e){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",hr:"hr",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"civilcurve",children:"CivilCurve"}),"\n",(0,s.jsx)(t.p,{children:"Represents an alignment curve of a civil engineering model."}),"\n",(0,s.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsx)(t.h3,{id:"new-civilcurve",children:"new CivilCurve()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"new CivilCurve"}),"(",(0,s.jsx)(t.code,{children:"index"}),", ",(0,s.jsx)(t.code,{children:"mesh"}),", ",(0,s.jsx)(t.code,{children:"data"}),", ",(0,s.jsx)(t.code,{children:"alignment"}),"): ",(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CivilCurve",children:(0,s.jsx)(t.code,{children:"CivilCurve"})})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Constructs a new instance of CivilCurve."}),"\n",(0,s.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"index"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The index of the curve."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"mesh"})}),(0,s.jsxs)(t.td,{style:{textAlign:"left"},children:[(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CurveMesh",children:(0,s.jsx)(t.code,{children:"CurveMesh"})}),"<",(0,s.jsx)(t.code,{children:"BufferGeometry"}),"<",(0,s.jsx)(t.code,{children:"NormalBufferAttributes"}),">, ",(0,s.jsx)(t.code,{children:"Material"})," | ",(0,s.jsx)(t.code,{children:"Material"}),"[]>"]}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The mesh associated with the curve."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"data"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"object"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Additional data associated with the curve."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"alignment"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/Alignment",children:(0,s.jsx)(t.code,{children:"Alignment"})})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The alignment of the curve."})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"returns",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CivilCurve",children:(0,s.jsx)(t.code,{children:"CivilCurve"})})}),"\n",(0,s.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(t.h3,{id:"alignment",children:"alignment"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"alignment"}),": ",(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/Alignment",children:(0,s.jsx)(t.code,{children:"Alignment"})})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The alignment to which this curve belongs."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"data",children:"data"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"data"}),": ",(0,s.jsx)(t.code,{children:"object"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Additional data associated with the curve."}),"\n",(0,s.jsx)(t.h4,{id:"index-signature",children:"Index signature"}),"\n",(0,s.jsxs)(t.p,{children:["[",(0,s.jsx)(t.code,{children:"name"}),": ",(0,s.jsx)(t.code,{children:"string"}),"]: ",(0,s.jsx)(t.code,{children:"any"})]}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"index",children:"index"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"index"}),": ",(0,s.jsx)(t.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The index of the curve. An alignment is a sequence of ordered curves, and this is the index of this curve in that sequence."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"mesh",children:"mesh"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"mesh"}),": ",(0,s.jsx)(t.a,{href:"/api/@thatopen/fragments/classes/CurveMesh",children:(0,s.jsx)(t.code,{children:"CurveMesh"})}),"<",(0,s.jsx)(t.code,{children:"BufferGeometry"}),"<",(0,s.jsx)(t.code,{children:"NormalBufferAttributes"}),">, ",(0,s.jsx)(t.code,{children:"Material"})," | ",(0,s.jsx)(t.code,{children:"Material"}),"[]>"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The THREE.js mesh containing the vertices of the curve."}),"\n",(0,s.jsx)(t.h2,{id:"methods",children:"Methods"}),"\n",(0,s.jsx)(t.h3,{id:"getlength",children:"getLength()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"getLength"}),"(): ",(0,s.jsx)(t.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Calculates the total length of the curve by summing up the lengths of all segments."}),"\n",(0,s.jsx)(t.h4,{id:"returns-1",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"number"})}),"\n",(0,s.jsx)(t.p,{children:"The total length of the curve."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"getpercentageat",children:"getPercentageAt()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"getPercentageAt"}),"(",(0,s.jsx)(t.code,{children:"point"}),", ",(0,s.jsx)(t.code,{children:"tolerance"}),"): ",(0,s.jsx)(t.code,{children:"null"})," | ",(0,s.jsx)(t.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Calculates the percentage of the curve that corresponds to the given point."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Default value"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"point"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"Vector3"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"undefined"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The point for which to calculate the percentage."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"tolerance"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"0.01"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The tolerance for determining if a point is on the curve. Default is 0.01."})]})]})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-2",children:"Returns"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"null"})," | ",(0,s.jsx)(t.code,{children:"number"})]}),"\n",(0,s.jsx)(t.p,{children:"The percentage of the curve that corresponds to the given point, or null if the point is not contained in this curve."}),"\n",(0,s.jsx)(t.h4,{id:"remarks",children:"Remarks"}),"\n",(0,s.jsx)(t.p,{children:"The method works by iterating over each segment of the curve and checking if the given point is within the tolerance of the segment.\r\nIf a point is found, it calculates the percentage of the curve that corresponds to the point.\r\nIf no point is found, it returns null."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"getpointat",children:"getPointAt()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"getPointAt"}),"(",(0,s.jsx)(t.code,{children:"percentage"}),"): ",(0,s.jsx)(t.code,{children:"Vector3"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Calculates a point on the curve based on the given percentage."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-2",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"percentage"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The percentage along the curve (between zero and one)."})]})})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-3",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"Vector3"})}),"\n",(0,s.jsx)(t.p,{children:"A new THREE.Vector3 representing the point on the curve."}),"\n",(0,s.jsx)(t.h4,{id:"remarks-1",children:"Remarks"}),"\n",(0,s.jsx)(t.p,{children:"The method works by first finding the segment that corresponds to the given percentage.\r\nIt then normalizes the direction of the segment, multiplies it by the distance to the start of the segment,\r\nand adds it to the start point of the segment."}),"\n",(0,s.jsx)(t.h4,{id:"throws",children:"Throws"}),"\n",(0,s.jsx)(t.p,{children:"Will throw an error if the percentage is outside the range [0, 1]."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"getsegment",children:"getSegment()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"getSegment"}),"(",(0,s.jsx)(t.code,{children:"index"}),"): ",(0,s.jsx)(t.code,{children:"object"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Retrieves a segment of the curve based on the given index."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-3",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"index"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The index of the segment."})]})})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-4",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"object"})}),"\n",(0,s.jsx)(t.p,{children:"An object containing the start and end points of the segment."}),"\n",(0,s.jsx)(t.h5,{id:"endpoint",children:"endPoint"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"endPoint"}),": ",(0,s.jsx)(t.code,{children:"Vector3"})]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"startpoint",children:"startPoint"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"startPoint"}),": ",(0,s.jsx)(t.code,{children:"Vector3"})]}),"\n"]}),"\n",(0,s.jsx)(t.h4,{id:"remarks-2",children:"Remarks"}),"\n",(0,s.jsx)(t.p,{children:"The method calculates the start and end points of the segment based on the given index.\r\nIt uses the index array and position attribute of the curve's geometry to determine the start and end points."}),"\n",(0,s.jsx)(t.h4,{id:"throws-1",children:"Throws"}),"\n",(0,s.jsx)(t.p,{children:"Will throw an error if the index is out of range."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h3,{id:"getsegmentat",children:"getSegmentAt()"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"getSegmentAt"}),"(",(0,s.jsx)(t.code,{children:"percentage"}),"): ",(0,s.jsx)(t.code,{children:"object"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Calculates a segment of the curve based on the given percentage."}),"\n",(0,s.jsx)(t.h4,{id:"parameters-4",children:"Parameters"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(t.tbody,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"percentage"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The percentage along the curve (between zero and one)."})]})})]}),"\n",(0,s.jsx)(t.h4,{id:"returns-5",children:"Returns"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.code,{children:"object"})}),"\n",(0,s.jsx)(t.p,{children:"An object containing the distance to the start of the segment, the index of the segment, and the start and end points of the segment."}),"\n",(0,s.jsx)(t.h5,{id:"distancetostart",children:"distanceToStart"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"distanceToStart"}),": ",(0,s.jsx)(t.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"endpoint-1",children:"endPoint"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"endPoint"}),": ",(0,s.jsx)(t.code,{children:"Vector3"})]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"index-1",children:"index"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"index"}),": ",(0,s.jsx)(t.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsx)(t.h5,{id:"startpoint-1",children:"startPoint"}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"startPoint"}),": ",(0,s.jsx)(t.code,{children:"Vector3"})]}),"\n"]}),"\n",(0,s.jsx)(t.h4,{id:"remarks-3",children:"Remarks"}),"\n",(0,s.jsx)(t.p,{children:"The method works by first finding the segment that corresponds to the given percentage.\r\nIt then returns an object containing the distance to the start of the segment, the index of the segment, and the start and end points of the segment."}),"\n",(0,s.jsx)(t.h4,{id:"throws-2",children:"Throws"}),"\n",(0,s.jsx)(t.p,{children:"Will throw an error if the percentage is outside the range [0, 1]."})]})}function a(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>d});var s=n(6540);const r={},i=s.createContext(r);function l(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/efedca67.c493fcab.js b/build/assets/js/efedca67.c493fcab.js deleted file mode 100644 index 9b2b2dedd..000000000 --- a/build/assets/js/efedca67.c493fcab.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[7736],{6538:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>l,frontMatter:()=>a,metadata:()=>o,toc:()=>p});var r=n(4848),s=n(8453);const a={},i="IfcProperties",o={id:"api/@thatopen/fragments/interfaces/IfcProperties",title:"IfcProperties",description:"Represents a map of IFC properties.",source:"@site/docs/api/@thatopen/fragments/interfaces/IfcProperties.md",sourceDirName:"api/@thatopen/fragments/interfaces",slug:"/api/@thatopen/fragments/interfaces/IfcProperties",permalink:"/api/@thatopen/fragments/interfaces/IfcProperties",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcMetadata",permalink:"/api/@thatopen/fragments/interfaces/IfcMetadata"},next:{title:"IndexedGeometry",permalink:"/api/@thatopen/fragments/interfaces/IndexedGeometry"}},c={},p=[{value:"Remarks",id:"remarks",level:2},{value:"Example",id:"example",level:2},{value:"Indexable",id:"indexable",level:2}];function d(e){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"ifcproperties",children:"IfcProperties"}),"\n",(0,r.jsx)(t.p,{children:"Represents a map of IFC properties."}),"\n",(0,r.jsx)(t.h2,{id:"remarks",children:"Remarks"}),"\n",(0,r.jsx)(t.p,{children:"Each property is associated with an expressID, which is a unique identifier for the IFC entity.\r\nThe properties are stored as an object with attribute names as keys and their corresponding values."}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-typescript",children:'const ifcProperties: IfcProperties = {\r\n 123: { name: "Wall", color: "red" },\r\n 456: { name: "Door", height: 2.1 },\r\n};\n'})}),"\n",(0,r.jsx)(t.h2,{id:"indexable",children:"Indexable"}),"\n",(0,r.jsxs)(t.p,{children:["[",(0,r.jsx)(t.code,{children:"expressID"}),": ",(0,r.jsx)(t.code,{children:"number"}),"]: ",(0,r.jsx)(t.code,{children:"object"})]})]})}function l(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function i(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/f30d8a80.307369be.js b/build/assets/js/f30d8a80.307369be.js deleted file mode 100644 index 202c066f9..000000000 --- a/build/assets/js/f30d8a80.307369be.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[7679],{9898:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>l,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var r=n(4848),s=n(8453);const i={},o="IndexedGeometry",a={id:"api/@thatopen/fragments/interfaces/IndexedGeometry",title:"IndexedGeometry",description:"Represents a THREE.js geometry with an index attribute. We always work with indexed geometries, and this allows us to not check the existence of the index attribute each time we access it.",source:"@site/docs/api/@thatopen/fragments/interfaces/IndexedGeometry.md",sourceDirName:"api/@thatopen/fragments/interfaces",slug:"/api/@thatopen/fragments/interfaces/IndexedGeometry",permalink:"/api/@thatopen/fragments/interfaces/IndexedGeometry",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcProperties",permalink:"/api/@thatopen/fragments/interfaces/IfcProperties"},next:{title:"Item",permalink:"/api/@thatopen/fragments/interfaces/Item"}},d={},c=[{value:"Remarks",id:"remarks",level:2},{value:"Extends",id:"extends",level:2}];function h(e){const t={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"indexedgeometry",children:"IndexedGeometry"}),"\n",(0,r.jsx)(t.p,{children:"Represents a THREE.js geometry with an index attribute. We always work with indexed geometries, and this allows us to not check the existence of the index attribute each time we access it."}),"\n",(0,r.jsx)(t.h2,{id:"remarks",children:"Remarks"}),"\n",(0,r.jsxs)(t.p,{children:["This interface extends the ",(0,r.jsx)(t.code,{children:"THREE.BufferGeometry"})," class and adds an ",(0,r.jsx)(t.code,{children:"index"})," attribute of type ",(0,r.jsx)(t.code,{children:"THREE.BufferAttribute"}),".\r\nThe ",(0,r.jsx)(t.code,{children:"index"})," attribute is used to define the order of vertices in the geometry."]}),"\n",(0,r.jsx)(t.h2,{id:"extends",children:"Extends"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.code,{children:"BufferGeometry"})}),"\n"]})]})}function l(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var r=n(6540);const s={},i=r.createContext(s);function o(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/f45379a9.fd849a2e.js b/build/assets/js/f45379a9.0b230e7f.js similarity index 89% rename from build/assets/js/f45379a9.fd849a2e.js rename to build/assets/js/f45379a9.0b230e7f.js index 33ae15bf2..b72f26c6f 100644 --- a/build/assets/js/f45379a9.fd849a2e.js +++ b/build/assets/js/f45379a9.0b230e7f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[3991],{4536:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var o=t(4848),s=t(8453);const i={},r=void 0,a={id:"Tutorials/Components/Core/IfcGeometryTiler",title:"IfcGeometryTiler",description:'window.open("https://thatopen.github.io/engine_components/examples/IfcGeometryTiler")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Core/IfcGeometryTiler.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/IfcGeometryTiler",permalink:"/Tutorials/Components/Core/IfcGeometryTiler",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcFinder",permalink:"/Tutorials/Components/Core/IfcFinder"},next:{title:"IfcIsolator",permalink:"/Tutorials/Components/Core/IfcIsolator"}},l={},c=[{value:"\ud83e\udde9 Tiling BIM geometry",id:"-tiling-bim-geometry",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddf3 Loading a BIM model",id:"-loading-a-bim-model",level:3},{value:"\ud83d\udd2a Getting the geometry tiler",id:"-getting-the-geometry-tiler",level:3},{value:"\ud83d\udcc5 Setting up the events",id:"-setting-up-the-events",level:3},{value:"\u2198\ufe0f Downloading the tiles",id:"\ufe0f-downloading-the-tiles",level:3},{value:"\ud83d\udd25 Generating the tiles",id:"-generating-the-tiles",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/IfcGeometryTiler"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/IfcGeometryTiler"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/fragments/IfcGeometryTiler/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"-tiling-bim-geometry",children:"\ud83e\udde9 Tiling BIM geometry"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Opening big BIM models is hard because of 2 reasons: they have a lot of data and the geometry has to be computed to implicit (e.g. extrusion) to explicit (triangles). Our library allows to tile IFC files, solving both problems. This allows to open quite big IFC models in seconds and consuming minimal resources by just opening the parts of the model that are visible to the user. In this tutorial you'll learn to convert the geometry of an IFC model into tiles."}),"\n",(0,o.jsx)(n.admonition,{title:"Tiles?",type:"tip",children:(0,o.jsx)(n.p,{children:"Tiles are very simple. We just take a bunch of geometries within the IFC file, convert them into triangles and store them in a binary file. These files are then loaded as a stream into the scen as the user moves around and discovers them."})}),"\n",(0,o.jsx)(n.p,{children:"In this tutorial, we will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"web-ifc"})," to get some IFC items."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "@thatopen/components";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBC.SimpleRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBC.SimpleRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-loading-a-bim-model",children:"\ud83e\uddf3 Loading a BIM model"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file."}),"\n",(0,o.jsx)(n.admonition,{title:"Fragments?",type:"tip",children:(0,o.jsx)(n.p,{children:"If you are not familiar with fragments, check out the IfcLoader tutorial!"})}),"\n",(0,o.jsx)(n.p,{children:"This is not compulsory, as the data will come from an .ifc file, not from fragments. But at least we'll see the model whose geometry we will be converting to tiles!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const fragments = new OBC.FragmentsManager(components);\nconst fragFile = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.frag",\n);\nconst fragData = await fragFile.arrayBuffer();\nconst fragBuffer = new Uint8Array(fragData);\nconst model = fragments.load(fragBuffer);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-getting-the-geometry-tiler",children:"\ud83d\udd2a Getting the geometry tiler"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"The way the streaming works is by fetching files based on the visible things in the viewer. Those files contain pieces of geometry information (geometry chunks) that the engine uses in order to create and display the geometry. But, where do we get those files from? Easy! From the IFC conversion to tiles. So the first step is to transform the IFC model into BIM tiles."}),"\n",(0,o.jsx)(n.admonition,{type:"note",children:(0,o.jsx)(n.p,{children:"As you know, IFC files contains two things: geometries and properties. We need to convert both things if we want to take full advantage of streaming! For tiling properties, check out the Property Tiling tutorial."})}),"\n",(0,o.jsx)(n.p,{children:"So, let's start converting the IFC geometry to tiles and getting those files so the streamer can do its job:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const tiler = components.get(OBC.IfcGeometryTiler);\n\nconst wasm = {\n path: "https://unpkg.com/web-ifc@0.0.66/",\n absolute: true,\n};\n\ntiler.settings.wasm = wasm;\ntiler.settings.minGeometrySize = 20;\ntiler.settings.minAssetsSize = 1000;\n'})}),"\n",(0,o.jsx)(n.p,{children:"This component takes IFC files and transform their geometry into tiles."}),"\n",(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsx)(n.p,{children:"The converter doesn't give you the files needed to streaming right away, just the data that must be contained in those files. Is your job to create the files! Why? Because then you can have full control over when, where and how to create them."})}),"\n",(0,o.jsx)(n.p,{children:"The first file we need is a JSON which is the entry point of the geometries streaming. That JSON must have the following structure:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'interface GeometriesStreaming {\n assets: {\n id: number;\n geometries: {\n color: number[];\n geometryID: number;\n transformation: number[];\n }[];\n }[];\n\n geometries: {\n [id: number]: {\n boundingBox: { [id: number]: number };\n hasHoles: boolean;\n geometryFile: "url-to-geometry-file-in-your-backend";\n };\n };\n\n globalDataFileId: "url-to-fragments-group-file-in-your-backend";\n}\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-the-events",children:"\ud83d\udcc5 Setting up the events"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"The second file is actually not just a single file, but X number of files (depends on how big is your model) that contains the required information to generate the geometry while streaming.\nIn order to create the JSON file and get the information with the geometry, these components, emits events that let you get the processed data from the conversion process."}),"\n",(0,o.jsx)(n.admonition,{type:"important",children:(0,o.jsx)(n.p,{children:"Nedless to say, you need to set up your event listeners before triggering the conversion!"})}),"\n",(0,o.jsx)(n.p,{children:"Let's start with the first event:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"let files: { name: string; bits: (Uint8Array | string)[] }[] = [];\nlet geometriesData: OBC.StreamedGeometries = {};\nlet geometryFilesCount = 1;\n\ntiler.onGeometryStreamed.add((geometry) => {\n const { buffer, data } = geometry;\n const bufferFileName = `small.ifc-processed-geometries-${geometryFilesCount}`;\n for (const expressID in data) {\n const value = data[expressID];\n value.geometryFile = bufferFileName;\n geometriesData[expressID] = value;\n }\n files.push({ name: bufferFileName, bits: [buffer] });\n geometryFilesCount++;\n});\n"})}),"\n",(0,o.jsxs)(n.p,{children:['One of the most important things to keep in mind is that the event we just setup will get fired as many times as per the "chunk" data generated by the converted. Simply put, the event will get fired several times \u23f2 and per each time we will produce one file data that is stored in the ',(0,o.jsx)(n.code,{children:"geometryFiles"})," array. Later on, we will download the geometry files \u23ec."]}),"\n",(0,o.jsx)(n.admonition,{type:"note",children:(0,o.jsxs)(n.p,{children:["As you see, ",(0,o.jsx)(n.code,{children:"geometriesData"})," is not being stored as a file to be downloaded. The reason is because that is part of the information we need to create the entry JSON file \ud83d\ude80."]})}),"\n",(0,o.jsx)(n.p,{children:"Nice! Let's go with the second event that will give us more information to create the required files:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"let assetsData: OBC.StreamedAsset[] = [];\n\ntiler.onAssetStreamed.add((assets) => {\n assetsData = [...assetsData, ...assets];\n});\n"})}),"\n",(0,o.jsx)(n.p,{children:"This one is easier as the event doesn't produce binary data, but information we need to create the JSON file."}),"\n",(0,o.jsx)(n.admonition,{title:"Are you familiar with Fragments?",type:"note",children:(0,o.jsx)(n.p,{children:"If you're familiar with That Open Engine (our libraries), you should recall fragments. Fragments are just a fancy word we use to refer to ThreeJS geometry efficiently created from IFC files which are the things you end up see in the viewer... one IFC file is usually composed of many fragments and all of them are grouped in a FragmentsGroup, which is the final processed IFC model."})}),"\n",(0,o.jsx)(n.p,{children:"Why do we remind you about FragmentsGroup? Because streaming also works with them! So yes, when you convert an IFC to tiles, the converter also creates a FragmentsGroup in the background, and that information is extremely important for the streamer in order to display the streamed file as everything gets grouped there. So, there is another event that gives you the FragmentsGroup binary data and we also need to create a file with that information."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'tiler.onIfcLoaded.add((groupBuffer) => {\n files.push({\n name: "small.ifc-processed-global",\n bits: [groupBuffer],\n });\n});\n'})}),"\n",(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsxs)(n.p,{children:["You can name the file whatever you want, but is ",(0,o.jsx)(n.em,{children:"extremely important"})," you finish the file name with ",(0,o.jsx)(n.code,{children:"-global"}),"!"]})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-downloading-the-tiles",children:"\u2198\ufe0f Downloading the tiles"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now that we've setup the main listeners, the last thing is to download all the data once the conversion has fininshed. To do so, we can use the progress event:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'function downloadFile(name: string, ...bits: (Uint8Array | string)[]) {\n const file = new File(bits, name);\n const anchor = document.createElement("a");\n const url = URL.createObjectURL(file);\n anchor.href = url;\n anchor.download = file.name;\n anchor.click();\n URL.revokeObjectURL(url);\n}\n\nasync function downloadFilesSequentially(\n fileList: { name: string; bits: (Uint8Array | string)[] }[],\n) {\n for (const { name, bits } of fileList) {\n downloadFile(name, ...bits);\n await new Promise((resolve) => {\n setTimeout(resolve, 100);\n });\n }\n}\n\ntiler.onProgress.add((progress) => {\n if (progress !== 1) return;\n setTimeout(async () => {\n const processedData = {\n geometries: geometriesData,\n assets: assetsData,\n globalDataFileId: "small.ifc-processed-global",\n };\n files.push({\n name: "small.ifc-processed.json",\n bits: [JSON.stringify(processedData)],\n });\n await downloadFilesSequentially(files);\n assetsData = [];\n geometriesData = {};\n files = [];\n geometryFilesCount = 1;\n });\n});\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-generating-the-tiles",children:"\ud83d\udd25 Generating the tiles"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Great! Now that we have everything setup, is time to finally convert the IFC file. In order to trigger the conversion, we can just do the following:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'async function processFile() {\n const fetchedIfc = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.ifc",\n );\n const ifcBuffer = await fetchedIfc.arrayBuffer();\n // We will need this information later to also convert the properties\n const ifcArrayBuffer = new Uint8Array(ifcBuffer);\n // This triggers the conversion, so the listeners start to be called\n await tiler.streamFromBuffer(ifcArrayBuffer);\n}\n'})}),"\n",(0,o.jsx)(n.p,{children:"If everything went as expected, you should now be seeing some files being downloaded from your app \ud83e\udd2f Do not get scary if they're a lot, as big models tend to have many files! All of that is the information the streaming uses in order to display the geometry in the most efficient way possible \ud83d\udcaa"}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We'll use the ",(0,o.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We will use the ",(0,o.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,o.jsx)(n.code,{children:"init"})," method of the ",(0,o.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we will add some UI to generate and download the tiles to our computer. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n \n \n \n \n \n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,o.jsx)(n.p,{children:"And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const button = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n});\n\ndocument.body.append(button);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"That's it! You have created an app that can generate the geometry BIM tiles for an IFC and download them to your computer. Now you have the power to process big IFC files! Don't forget to check out the IFC property tiler tutorial. To consume these tiles, check out the IFC streamer tutorial."})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>a});var o=t(6540);const s={},i=o.createContext(s);function r(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[3991],{4536:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var o=t(4848),s=t(8453);const i={},r=void 0,a={id:"Tutorials/Components/Core/IfcGeometryTiler",title:"IfcGeometryTiler",description:'window.open("https://thatopen.github.io/engine_components/examples/IfcGeometryTiler")} >Go Full Screen',source:"@site/docs/Tutorials/Components/Core/IfcGeometryTiler.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/IfcGeometryTiler",permalink:"/Tutorials/Components/Core/IfcGeometryTiler",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcFinder",permalink:"/Tutorials/Components/Core/IfcFinder"},next:{title:"IfcIsolator",permalink:"/Tutorials/Components/Core/IfcIsolator"}},l={},c=[{value:"\ud83e\udde9 Tiling BIM geometry",id:"-tiling-bim-geometry",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddf3 Loading a BIM model",id:"-loading-a-bim-model",level:3},{value:"\ud83d\udd2a Getting the geometry tiler",id:"-getting-the-geometry-tiler",level:3},{value:"\ud83d\udcc5 Setting up the events",id:"-setting-up-the-events",level:3},{value:"\u2198\ufe0f Downloading the tiles",id:"\ufe0f-downloading-the-tiles",level:3},{value:"\ud83d\udd25 Generating the tiles",id:"-generating-the-tiles",level:3},{value:"\u23f1\ufe0f Measuring the performance (optional)",id:"\ufe0f-measuring-the-performance-optional",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",level:3},{value:"\ud83c\udf89 Wrap up",id:"-wrap-up",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_components/examples/IfcGeometryTiler"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_components/examples/IfcGeometryTiler"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/fragments/IfcGeometryTiler/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"-tiling-bim-geometry",children:"\ud83e\udde9 Tiling BIM geometry"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Opening big BIM models is hard because of 2 reasons: they have a lot of data and the geometry has to be computed to implicit (e.g. extrusion) to explicit (triangles). Our library allows to tile IFC files, solving both problems. This allows to open quite big IFC models in seconds and consuming minimal resources by just opening the parts of the model that are visible to the user. In this tutorial you'll learn to convert the geometry of an IFC model into tiles."}),"\n",(0,o.jsx)(n.admonition,{title:"Tiles?",type:"tip",children:(0,o.jsx)(n.p,{children:"Tiles are very simple. We just take a bunch of geometries within the IFC file, convert them into triangles and store them in a binary file. These files are then loaded as a stream into the scen as the user moves around and discovers them."})}),"\n",(0,o.jsx)(n.p,{children:"In this tutorial, we will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"web-ifc"})," to get some IFC items."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"@thatopen/components"})," to set up the barebone of our app."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"Stats.js"})," (optional) to measure the performance of our app."]}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "@thatopen/components";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\n\nconst world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBC.SimpleRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBC.SimpleRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n'})}),"\n",(0,o.jsx)(n.p,{children:"We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"world.scene.three.background = null;\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-loading-a-bim-model",children:"\ud83e\uddf3 Loading a BIM model"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file."}),"\n",(0,o.jsx)(n.admonition,{title:"Fragments?",type:"tip",children:(0,o.jsx)(n.p,{children:"If you are not familiar with fragments, check out the IfcLoader tutorial!"})}),"\n",(0,o.jsx)(n.p,{children:"This is not compulsory, as the data will come from an .ifc file, not from fragments. But at least we'll see the model whose geometry we will be converting to tiles!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const fragments = new OBC.FragmentsManager(components);\nconst fragFile = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.frag",\n);\nconst fragData = await fragFile.arrayBuffer();\nconst fragBuffer = new Uint8Array(fragData);\nconst model = fragments.load(fragBuffer);\nworld.scene.three.add(model);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-getting-the-geometry-tiler",children:"\ud83d\udd2a Getting the geometry tiler"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"The way the streaming works is by fetching files based on the visible things in the viewer. Those files contain pieces of geometry information (geometry chunks) that the engine uses in order to create and display the geometry. But, where do we get those files from? Easy! From the IFC conversion to tiles. So the first step is to transform the IFC model into BIM tiles."}),"\n",(0,o.jsx)(n.admonition,{type:"note",children:(0,o.jsx)(n.p,{children:"As you know, IFC files contains two things: geometries and properties. We need to convert both things if we want to take full advantage of streaming! For tiling properties, check out the Property Tiling tutorial."})}),"\n",(0,o.jsx)(n.p,{children:"So, let's start converting the IFC geometry to tiles and getting those files so the streamer can do its job:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const tiler = components.get(OBC.IfcGeometryTiler);\n\nconst wasm = {\n path: "https://unpkg.com/web-ifc@0.0.66/",\n absolute: true,\n};\n\ntiler.settings.wasm = wasm;\ntiler.settings.minGeometrySize = 20;\ntiler.settings.minAssetsSize = 1000;\n'})}),"\n",(0,o.jsx)(n.p,{children:"This component takes IFC files and transform their geometry into tiles."}),"\n",(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsx)(n.p,{children:"The converter doesn't give you the files needed to streaming right away, just the data that must be contained in those files. Is your job to create the files! Why? Because then you can have full control over when, where and how to create them."})}),"\n",(0,o.jsx)(n.p,{children:"The first file we need is a JSON which is the entry point of the geometries streaming. That JSON must have the following structure:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'interface GeometriesStreaming {\n assets: {\n id: number;\n geometries: {\n color: number[];\n geometryID: number;\n transformation: number[];\n }[];\n }[];\n\n geometries: {\n [id: number]: {\n boundingBox: { [id: number]: number };\n hasHoles: boolean;\n geometryFile: "url-to-geometry-file-in-your-backend";\n };\n };\n\n globalDataFileId: "url-to-fragments-group-file-in-your-backend";\n}\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-the-events",children:"\ud83d\udcc5 Setting up the events"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"The second file is actually not just a single file, but X number of files (depends on how big is your model) that contains the required information to generate the geometry while streaming.\nIn order to create the JSON file and get the information with the geometry, these components, emits events that let you get the processed data from the conversion process."}),"\n",(0,o.jsx)(n.admonition,{type:"important",children:(0,o.jsx)(n.p,{children:"Nedless to say, you need to set up your event listeners before triggering the conversion!"})}),"\n",(0,o.jsx)(n.p,{children:"Let's start with the first event:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"let files: { name: string; bits: (Uint8Array | string)[] }[] = [];\nlet geometriesData: OBC.StreamedGeometries = {};\nlet geometryFilesCount = 1;\n\ntiler.onGeometryStreamed.add((geometry) => {\n const { buffer, data } = geometry;\n const bufferFileName = `small.ifc-processed-geometries-${geometryFilesCount}`;\n for (const expressID in data) {\n const value = data[expressID];\n value.geometryFile = bufferFileName;\n geometriesData[expressID] = value;\n }\n files.push({ name: bufferFileName, bits: [buffer] });\n geometryFilesCount++;\n});\n"})}),"\n",(0,o.jsxs)(n.p,{children:['One of the most important things to keep in mind is that the event we just setup will get fired as many times as per the "chunk" data generated by the converted. Simply put, the event will get fired several times \u23f2 and per each time we will produce one file data that is stored in the ',(0,o.jsx)(n.code,{children:"geometryFiles"})," array. Later on, we will download the geometry files \u23ec."]}),"\n",(0,o.jsx)(n.admonition,{type:"note",children:(0,o.jsxs)(n.p,{children:["As you see, ",(0,o.jsx)(n.code,{children:"geometriesData"})," is not being stored as a file to be downloaded. The reason is because that is part of the information we need to create the entry JSON file \ud83d\ude80."]})}),"\n",(0,o.jsx)(n.p,{children:"Nice! Let's go with the second event that will give us more information to create the required files:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"let assetsData: OBC.StreamedAsset[] = [];\n\ntiler.onAssetStreamed.add((assets) => {\n assetsData = [...assetsData, ...assets];\n});\n"})}),"\n",(0,o.jsx)(n.p,{children:"This one is easier as the event doesn't produce binary data, but information we need to create the JSON file."}),"\n",(0,o.jsx)(n.admonition,{title:"Are you familiar with Fragments?",type:"note",children:(0,o.jsx)(n.p,{children:"If you're familiar with That Open Engine (our libraries), you should recall fragments. Fragments are just a fancy word we use to refer to ThreeJS geometry efficiently created from IFC files which are the things you end up see in the viewer... one IFC file is usually composed of many fragments and all of them are grouped in a FragmentsGroup, which is the final processed IFC model."})}),"\n",(0,o.jsx)(n.p,{children:"Why do we remind you about FragmentsGroup? Because streaming also works with them! So yes, when you convert an IFC to tiles, the converter also creates a FragmentsGroup in the background, and that information is extremely important for the streamer in order to display the streamed file as everything gets grouped there. So, there is another event that gives you the FragmentsGroup binary data and we also need to create a file with that information."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'tiler.onIfcLoaded.add((groupBuffer) => {\n files.push({\n name: "small.ifc-processed-global",\n bits: [groupBuffer],\n });\n});\n'})}),"\n",(0,o.jsx)(n.admonition,{type:"warning",children:(0,o.jsxs)(n.p,{children:["You can name the file whatever you want, but is ",(0,o.jsx)(n.em,{children:"extremely important"})," you finish the file name with ",(0,o.jsx)(n.code,{children:"-global"}),"!"]})}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-downloading-the-tiles",children:"\u2198\ufe0f Downloading the tiles"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Now that we've setup the main listeners, the last thing is to download all the data once the conversion has fininshed. To do so, we can use the progress event:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'function downloadFile(name: string, ...bits: (Uint8Array | string)[]) {\n const file = new File(bits, name);\n const anchor = document.createElement("a");\n const url = URL.createObjectURL(file);\n anchor.href = url;\n anchor.download = file.name;\n anchor.click();\n URL.revokeObjectURL(url);\n}\n\nasync function downloadFilesSequentially(\n fileList: { name: string; bits: (Uint8Array | string)[] }[],\n) {\n for (const { name, bits } of fileList) {\n downloadFile(name, ...bits);\n await new Promise((resolve) => {\n setTimeout(resolve, 100);\n });\n }\n}\n\ntiler.onProgress.add((progress) => {\n if (progress !== 1) return;\n setTimeout(async () => {\n const processedData = {\n geometries: geometriesData,\n assets: assetsData,\n globalDataFileId: "small.ifc-processed-global",\n };\n files.push({\n name: "small.ifc-processed.json",\n bits: [JSON.stringify(processedData)],\n });\n await downloadFilesSequentially(files);\n assetsData = [];\n geometriesData = {};\n files = [];\n geometryFilesCount = 1;\n });\n});\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-generating-the-tiles",children:"\ud83d\udd25 Generating the tiles"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"Great! Now that we have everything setup, is time to finally convert the IFC file. In order to trigger the conversion, we can just do the following:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'async function processFile() {\n const fetchedIfc = await fetch(\n "https://thatopen.github.io/engine_components/resources/small.ifc",\n );\n const ifcBuffer = await fetchedIfc.arrayBuffer();\n // We will need this information later to also convert the properties\n const ifcArrayBuffer = new Uint8Array(ifcBuffer);\n // This triggers the conversion, so the listeners start to be called\n await tiler.streamFromBuffer(ifcArrayBuffer);\n}\n'})}),"\n",(0,o.jsx)(n.p,{children:"If everything went as expected, you should now be seeing some files being downloaded from your app \ud83e\udd2f Do not get scary if they're a lot, as big models tend to have many files! All of that is the information the streaming uses in order to display the geometry in the most efficient way possible \ud83d\udcaa"}),"\n",(0,o.jsx)(n.h3,{id:"\ufe0f-measuring-the-performance-optional",children:"\u23f1\ufe0f Measuring the performance (optional)"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We'll use the ",(0,o.jsx)(n.a,{href:"https://github.com/mrdoob/stats.js",children:"Stats.js"})," to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nstats.dom.style.zIndex = "unset";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-adding-some-ui",children:"\ud83e\udde9 Adding some UI"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsxs)(n.p,{children:["We will use the ",(0,o.jsx)(n.code,{children:"@thatopen/ui"})," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,o.jsx)(n.code,{children:"init"})," method of the ",(0,o.jsx)(n.code,{children:"BUI.Manager"})," class to initialize the library:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now we will add some UI to generate and download the tiles to our computer. For more information about the UI library, you can check the specific documentation for it!"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n \n \n \n \n \n \n \n `;\n});\n\ndocument.body.append(panel);\n'})}),"\n",(0,o.jsx)(n.p,{children:"And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const button = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n});\n\ndocument.body.append(button);\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-wrap-up",children:"\ud83c\udf89 Wrap up"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"That's it! You have created an app that can generate the geometry BIM tiles for an IFC and download them to your computer. Now you have the power to process big IFC files! Don't forget to check out the IFC property tiler tutorial. To consume these tiles, check out the IFC streamer tutorial."})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>a});var o=t(6540);const s={},i=o.createContext(s);function r(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/f70643aa.0e7300f8.js b/build/assets/js/f70643aa.0e7300f8.js deleted file mode 100644 index cca805a93..000000000 --- a/build/assets/js/f70643aa.0e7300f8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[7701],{793:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>i,default:()=>p,frontMatter:()=>a,metadata:()=>l,toc:()=>d});var o=t(4848),s=t(8453);const a={},i=void 0,l={id:"Tutorials/UserInterface/OBC/ModelsList",title:"ModelsList",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/ModelsList")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/ModelsList.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/ModelsList",permalink:"/Tutorials/UserInterface/OBC/ModelsList",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"EntityAttributes",permalink:"/Tutorials/UserInterface/OBC/EntityAttributes"},next:{title:"RelationsTree",permalink:"/Tutorials/UserInterface/OBC/RelationsTree"}},r={},d=[{value:"Managing your loaded models \ud83c\udfe2",id:"managing-your-loaded-models-",level:2},{value:"Setting up the components",id:"setting-up-the-components",level:3},{value:"Creating the models list component",id:"creating-the-models-list-component",level:3}];function c(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/ModelsList"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/ModelsList"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/ModelsList/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h2,{id:"managing-your-loaded-models-",children:"Managing your loaded models \ud83c\udfe2"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"What else can we say? The task is really simple: we need to see a list of the loaded models in the app. Let's get into it!"}),"\n",(0,o.jsx)(n.h3,{id:"setting-up-the-components",children:"Setting up the components"}),"\n",(0,o.jsxs)(n.p,{children:["First of all, we're going to get the ",(0,o.jsx)(n.code,{children:"FragmentIfcLoader"})," from an existing components instance:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\n"})}),"\n",(0,o.jsxs)(n.p,{children:["The step above is super important as none of the existing functional components setup any tool, they just get it as they are! So, if we don't setup the ",(0,o.jsx)(n.code,{children:"FragmentIfcLoader"})," then the wasm path is not going to be defined and an error will arise \ud83e\udd13. Just after we have setup the loader, let's then configure the ",(0,o.jsx)(n.code,{children:"FragmentManager"})," so any time a model is loaded it gets added to some world scene created before:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const fragmentsManager = components.get(OBC.FragmentsManager);\nfragmentsManager.onFragmentsLoaded.add((model) => {\n if (world.scene) world.scene.three.add(model);\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"creating-the-models-list-component",children:"Creating the models list component"}),"\n",(0,o.jsx)(n.p,{children:"Allright! Now that some basic events are setup, it's time to create a new fresh models list component:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const [modelsList] = CUI.tables.modelsList({\n components,\n tags: { schema: true, viewDefinition: false },\n actions: { download: false },\n});\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now that we have a brand new models list created, we need to add it to the HTML page. For it, let's create simple BIM panel component where we include the models list and also a pre-made IFC load button \ud83d\udc47"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n const [loadIfcBtn] = CUI.buttons.loadIfc({ components });\n\n return BUI.html`\n \n \n ${loadIfcBtn}\n \n \n ${modelsList}\n \n \n `;\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"Finally, let's append the BIM Panel to the page to see the models list working \ud83d\ude09"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const app = document.createElement("bim-grid");\napp.layouts = {\n main: {\n template: `\n "panel viewport"\n / 23rem 1fr\n `,\n elements: { panel, viewport },\n },\n};\n\napp.layout = "main";\ndocument.body.append(app);\n'})}),"\n",(0,o.jsx)(n.p,{children:"Congratulations! You've now a ready to go user interface that let's you show and dispose IFC models loaded into your app \ud83e\udd73"})]})}function p(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>l});var o=t(6540);const s={},a=o.createContext(s);function i(e){const n=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/f70643aa.5c5645a4.js b/build/assets/js/f70643aa.5c5645a4.js new file mode 100644 index 000000000..de475fefa --- /dev/null +++ b/build/assets/js/f70643aa.5c5645a4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[7701],{793:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>r,toc:()=>c});var o=t(4848),s=t(8453);const i={},a=void 0,r={id:"Tutorials/UserInterface/OBC/ModelsList",title:"ModelsList",description:'window.open("https://thatopen.github.io/engine_ui-components/examples/ModelsList")} >Go Full Screen',source:"@site/docs/Tutorials/UserInterface/OBC/ModelsList.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/ModelsList",permalink:"/Tutorials/UserInterface/OBC/ModelsList",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"EntityAttributes",permalink:"/Tutorials/UserInterface/OBC/EntityAttributes"},next:{title:"RelationsTree",permalink:"/Tutorials/UserInterface/OBC/RelationsTree"}},l={},c=[{value:"Managing your loaded models \ud83c\udfe2",id:"managing-your-loaded-models-",level:2},{value:"\ud83d\udd96 Importing our Libraries",id:"-importing-our-libraries",level:3},{value:"\ud83d\udccb Initializing the UI",id:"-initializing-the-ui",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"Setting up the components",id:"setting-up-the-components",level:3},{value:"Creating the models list component",id:"creating-the-models-list-component",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{style:{position:"relative"},children:[(0,o.jsx)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/ModelsList"}),(0,o.jsx)("button",{class:"full-screen-btn",onClick:()=>window.open("https://thatopen.github.io/engine_ui-components/examples/ModelsList"),children:"Go Full Screen"})]}),"\n",(0,o.jsx)(n.admonition,{title:"Source",type:"info",children:(0,o.jsxs)(n.p,{children:["Copying and pasting? We've got you covered! You can find the full source code of this tutorial ",(0,o.jsx)(n.a,{href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/ModelsList/example.ts",children:"here"}),"."]})}),"\n",(0,o.jsx)(n.h2,{id:"managing-your-loaded-models-",children:"Managing your loaded models \ud83c\udfe2"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"What else can we say? The task is really simple: we need to see a list of the loaded models in the app. Let's get into it!"}),"\n",(0,o.jsx)(n.h3,{id:"-importing-our-libraries",children:"\ud83d\udd96 Importing our Libraries"}),"\n",(0,o.jsx)(n.p,{children:"In this tutorial, we will import:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"@thatopen/components to set up the barebone of our app."}),"\n",(0,o.jsx)(n.li,{children:"@thatopen/ui to add some simple and cool UI menus."}),"\n",(0,o.jsx)(n.li,{children:"@thatopen/ui-obc to add some cool pre-made UI menus for components."}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import * as OBC from "@thatopen/components";\nimport * as BUI from "@thatopen/ui";\n// You have to import from "@thatopen/ui-obc"\nimport * as BUIC from "../..";\n'})}),"\n",(0,o.jsx)(n.h3,{id:"-initializing-the-ui",children:"\ud83d\udccb Initializing the UI"}),"\n",(0,o.jsx)(n.p,{children:"As always, let's first initialize the UI library. Remember you only have to do it once in your entire app."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"BUI.Manager.init();\n"})}),"\n",(0,o.jsx)(n.h3,{id:"-setting-up-a-simple-scene",children:"\ud83c\udf0e Setting up a simple scene"}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.p,{children:"We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\nconst world = worlds.create();\n\nconst sceneComponent = new OBC.SimpleScene(components);\nsceneComponent.setup();\nworld.scene = sceneComponent;\n\nconst viewport = document.createElement("bim-viewport");\nconst rendererComponent = new OBC.SimpleRenderer(components, viewport);\nworld.renderer = rendererComponent;\n\nconst cameraComponent = new OBC.SimpleCamera(components);\nworld.camera = cameraComponent;\n\nviewport.addEventListener("resize", () => {\n rendererComponent.resize();\n cameraComponent.updateAspect();\n});\n\nconst viewerGrids = components.get(OBC.Grids);\nviewerGrids.create(world);\n\ncomponents.init();\n'})}),"\n",(0,o.jsx)(n.h3,{id:"setting-up-the-components",children:"Setting up the components"}),"\n",(0,o.jsxs)(n.p,{children:["First of all, we're going to get the ",(0,o.jsx)(n.code,{children:"FragmentIfcLoader"})," from an existing components instance:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\n"})}),"\n",(0,o.jsxs)(n.p,{children:["The step above is super important as none of the existing functional components setup any tool, they just get it as they are! So, if we don't setup the ",(0,o.jsx)(n.code,{children:"FragmentIfcLoader"})," then the wasm path is not going to be defined and an error will arise \ud83e\udd13. Just after we have setup the loader, let's then configure the ",(0,o.jsx)(n.code,{children:"FragmentManager"})," so any time a model is loaded it gets added to some world scene created before:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const fragmentsManager = components.get(OBC.FragmentsManager);\nfragmentsManager.onFragmentsLoaded.add((model) => {\n if (world.scene) world.scene.three.add(model);\n});\n"})}),"\n",(0,o.jsx)(n.h3,{id:"creating-the-models-list-component",children:"Creating the models list component"}),"\n",(0,o.jsx)(n.p,{children:"Allright! Now that some basic events are setup, it's time to create a new fresh models list component:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const [modelsList] = BUIC.tables.modelsList({\n components,\n tags: { schema: true, viewDefinition: false },\n actions: { download: false },\n});\n"})}),"\n",(0,o.jsx)(n.p,{children:"Now that we have a brand new models list created, we need to add it to the HTML page. For it, let's create simple BIM panel component where we include the models list and also a pre-made IFC load button \ud83d\udc47"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const panel = BUI.Component.create(() => {\n const [loadIfcBtn] = BUIC.buttons.loadIfc({ components });\n\n return BUI.html`\n \n \n ${loadIfcBtn}\n \n \n ${modelsList}\n \n \n `;\n});\n'})}),"\n",(0,o.jsx)(n.p,{children:"Finally, let's append the BIM Panel to the page to see the models list working \ud83d\ude09"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'const app = document.createElement("bim-grid");\napp.layouts = {\n main: {\n template: `\n "panel viewport"\n / 23rem 1fr\n `,\n elements: { panel, viewport },\n },\n};\n\napp.layout = "main";\ndocument.body.append(app);\n'})}),"\n",(0,o.jsx)(n.p,{children:"Congratulations! You've now a ready to go user interface that let's you show and dispose IFC models loaded into your app \ud83e\udd73"})]})}function p(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>r});var o=t(6540);const s={},i=o.createContext(s);function a(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/fcb6e505.36f6f1a3.js b/build/assets/js/fcb6e505.36f6f1a3.js deleted file mode 100644 index 54e1b5560..000000000 --- a/build/assets/js/fcb6e505.36f6f1a3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[3393],{2583:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>a});var s=t(4848),l=t(8453);const i={},d="Tab",r={id:"api/@thatopen/ui/classes/Tab",title:"Tab",description:"A custom tab web component for BIM applications. HTML tag: bim-tab",source:"@site/docs/api/@thatopen/ui/classes/Tab.md",sourceDirName:"api/@thatopen/ui/classes",slug:"/api/@thatopen/ui/classes/Tab",permalink:"/api/@thatopen/ui/classes/Tab",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Selector",permalink:"/api/@thatopen/ui/classes/Selector"},next:{title:"Table\\",permalink:"/api/@thatopen/ui/classes/Table"}},c={},a=[{value:"Extends",id:"extends",level:2},{value:"Properties",id:"properties",level:2},{value:"icon?",id:"icon",level:3},{value:"label?",id:"label",level:3},{value:"name",id:"name",level:3},{value:"styles",id:"styles",level:3},{value:"Overrides",id:"overrides",level:4},{value:"Accessors",id:"accessors",level:2},{value:"hidden",id:"hidden",level:3},{value:"Fires",id:"fires",level:4},{value:"Example",id:"example",level:4},{value:"Parameters",id:"parameters",level:4}];function o(e){const n={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"tab",children:"Tab"}),"\n",(0,s.jsx)(n.p,{children:"A custom tab web component for BIM applications. HTML tag: bim-tab"}),"\n",(0,s.jsx)(n.h2,{id:"extends",children:"Extends"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"LitElement"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(n.h3,{id:"icon",children:"icon?"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"optional"})," ",(0,s.jsx)(n.strong,{children:"icon"}),": ",(0,s.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The icon of the tab. This property is optional and can be used to display an icon next to the tab's label or name."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"label",children:"label?"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"optional"})," ",(0,s.jsx)(n.strong,{children:"label"}),": ",(0,s.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The label of the tab. This property is optional and can be used to display a custom label instead of the tab's name."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"name",children:"name"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"name"}),": ",(0,s.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The name of the tab. If not provided, a default name will be assigned based on its position in the parent element."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"styles",children:"styles"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"static"})," ",(0,s.jsx)(n.strong,{children:"styles"}),": ",(0,s.jsx)(n.code,{children:"CSSResult"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"CSS styles for the component."}),"\n",(0,s.jsx)(n.h4,{id:"overrides",children:"Overrides"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"LitElement.styles"})}),"\n",(0,s.jsx)(n.h2,{id:"accessors",children:"Accessors"}),"\n",(0,s.jsx)(n.h3,{id:"hidden",children:"hidden"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"set"})," ",(0,s.jsx)(n.strong,{children:"hidden"}),"(",(0,s.jsx)(n.code,{children:"value"}),"): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Sets the hidden state of the tab."}),"\n",(0,s.jsx)(n.h4,{id:"fires",children:"Fires"}),"\n",(0,s.jsx)(n.p,{children:"hiddenchange - Dispatched when the hidden state changes."}),"\n",(0,s.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"const tab = document.querySelector('bim-tab');\r\ntab.hidden = true; // hides the tab\n"})}),"\n",(0,s.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"value"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsxs)(n.td,{style:{textAlign:"left"},children:["The new hidden state. If ",(0,s.jsx)(n.code,{children:"true"}),", the tab will be hidden. If ",(0,s.jsx)(n.code,{children:"false"}),", the tab will be visible."]})]})})]})]})}function h(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>d,x:()=>r});var s=t(6540);const l={},i=s.createContext(l);function d(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:d(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/fcb6e505.54f5638f.js b/build/assets/js/fcb6e505.54f5638f.js new file mode 100644 index 000000000..9c417b440 --- /dev/null +++ b/build/assets/js/fcb6e505.54f5638f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[3393],{2583:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>o,frontMatter:()=>i,metadata:()=>r,toc:()=>a});var s=t(4848),l=t(8453);const i={},d="Tab",r={id:"api/@thatopen/ui/classes/Tab",title:"Tab",description:"A custom tab web component for BIM applications. HTML tag: bim-tab",source:"@site/docs/api/@thatopen/ui/classes/Tab.md",sourceDirName:"api/@thatopen/ui/classes",slug:"/api/@thatopen/ui/classes/Tab",permalink:"/api/@thatopen/ui/classes/Tab",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Selector",permalink:"/api/@thatopen/ui/classes/Selector"},next:{title:"Table\\",permalink:"/api/@thatopen/ui/classes/Table"}},c={},a=[{value:"Extends",id:"extends",level:2},{value:"Properties",id:"properties",level:2},{value:"icon?",id:"icon",level:3},{value:"name",id:"name",level:3},{value:"styles",id:"styles",level:3},{value:"Overrides",id:"overrides",level:4},{value:"Accessors",id:"accessors",level:2},{value:"hidden",id:"hidden",level:3},{value:"Fires",id:"fires",level:4},{value:"Example",id:"example",level:4},{value:"Parameters",id:"parameters",level:4},{value:"label",id:"label",level:3},{value:"Parameters",id:"parameters-1",level:4}];function h(e){const n={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"tab",children:"Tab"}),"\n",(0,s.jsx)(n.p,{children:"A custom tab web component for BIM applications. HTML tag: bim-tab"}),"\n",(0,s.jsx)(n.h2,{id:"extends",children:"Extends"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"LitElement"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(n.h3,{id:"icon",children:"icon?"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"optional"})," ",(0,s.jsx)(n.strong,{children:"icon"}),": ",(0,s.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The icon of the tab. This property is optional and can be used to display an icon next to the tab's label or name."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"name",children:"name"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"name"}),": ",(0,s.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The name of the tab. If not provided, a default name will be assigned based on its position in the parent element."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"styles",children:"styles"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"static"})," ",(0,s.jsx)(n.strong,{children:"styles"}),": ",(0,s.jsx)(n.code,{children:"CSSResult"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"CSS styles for the component."}),"\n",(0,s.jsx)(n.h4,{id:"overrides",children:"Overrides"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"LitElement.styles"})}),"\n",(0,s.jsx)(n.h2,{id:"accessors",children:"Accessors"}),"\n",(0,s.jsx)(n.h3,{id:"hidden",children:"hidden"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"set"})," ",(0,s.jsx)(n.strong,{children:"hidden"}),"(",(0,s.jsx)(n.code,{children:"value"}),"): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Sets the hidden state of the tab."}),"\n",(0,s.jsx)(n.h4,{id:"fires",children:"Fires"}),"\n",(0,s.jsx)(n.p,{children:"hiddenchange - Dispatched when the hidden state changes."}),"\n",(0,s.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"const tab = document.querySelector('bim-tab');\r\ntab.hidden = true; // hides the tab\n"})}),"\n",(0,s.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"value"})}),(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"boolean"})}),(0,s.jsxs)(n.td,{style:{textAlign:"left"},children:["The new hidden state. If ",(0,s.jsx)(n.code,{children:"true"}),", the tab will be hidden. If ",(0,s.jsx)(n.code,{children:"false"}),", the tab will be visible."]})]})})]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"label",children:"label"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"set"})," ",(0,s.jsx)(n.strong,{children:"label"}),"(",(0,s.jsx)(n.code,{children:"value"}),"): ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The label of the tab. This property is optional and can be used to display a custom label instead of the tab's name."}),"\n",(0,s.jsx)(n.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,s.jsx)(n.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,s.jsx)(n.tbody,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{style:{textAlign:"left"},children:(0,s.jsx)(n.code,{children:"value"})}),(0,s.jsxs)(n.td,{style:{textAlign:"left"},children:[(0,s.jsx)(n.code,{children:"undefined"})," | ",(0,s.jsx)(n.code,{children:"string"})]})]})})]})]})}function o(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>d,x:()=>r});var s=t(6540);const l={},i=s.createContext(l);function d(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:d(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/build/assets/js/main.42438226.js b/build/assets/js/main.42438226.js deleted file mode 100644 index e6fc4cc7b..000000000 --- a/build/assets/js/main.42438226.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see main.42438226.js.LICENSE.txt */ -(self.webpackChunkengine_docs=self.webpackChunkengine_docs||[]).push([[8792],{9188:(e,t,n)=>{"use strict";n.d(t,{W:()=>o});var a=n(6540);function o(){return a.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20","aria-hidden":"true"},a.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},8328:(e,t,n)=>{"use strict";n.d(t,{A:()=>d});n(6540);var a=n(3259),o=n.n(a),r=n(4054);const i={"0129a812":[()=>n.e(5547).then(n.bind(n,6143)),"@site/docs/api/@thatopen/ui/classes/Dropdown.md",6143],"01976200":[()=>n.e(2998).then(n.bind(n,2599)),"@site/docs/Tutorials/Components/Front/EdgeMeasurement.mdx",2599],"021484e5":[()=>n.e(9828).then(n.bind(n,8812)),"@site/docs/api/@thatopen/components/classes/FragmentsManager.md",8812],"02e85b7e":[()=>n.e(883).then(n.bind(n,90)),"@site/docs/api/@thatopen/fragments/interfaces/IfcMetadata.md",90],"035e0bbb":[()=>n.e(4232).then(n.bind(n,9255)),"@site/docs/Tutorials/Components/Core/OrthoPerspectiveCamera.mdx",9255],"05c8767d":[()=>n.e(9585).then(n.bind(n,6659)),"@site/docs/api/@thatopen/ui/classes/PanelSection.md",6659],"06ebe74e":[()=>n.e(8945).then(n.bind(n,3388)),"@site/docs/api/@thatopen/ui/functions/getElementValue.md",3388],"07285760":[()=>n.e(5648).then(n.bind(n,2163)),"@site/docs/Tutorials/Components/Front/Highlighter.mdx",2163],"0bd070de":[()=>n.e(9765).then(n.bind(n,7106)),"@site/docs/api/@thatopen/components/classes/IfcGeometryTiler.md",7106],"0cd43766":[()=>n.e(8654).then(n.bind(n,8645)),"@site/docs/api/@thatopen/components/classes/IfcLoader.md",8645],"0dcd76a4":[()=>n.e(1230).then(n.bind(n,4553)),"@site/docs/Tutorials/UserInterface/OBC/EntityAttributes.mdx",4553],"0e167b3b":[()=>n.e(8675).then(n.bind(n,2357)),"@site/docs/api/@thatopen/components/interfaces/StreamedGeometries.md",2357],"0e384e19":[()=>n.e(3976).then(n.bind(n,619)),"@site/docs/intro.md",619],"111e5424":[()=>n.e(4478).then(n.bind(n,4491)),"@site/docs/api/@thatopen/components-front/type-aliases/IndexFragmentMap.md",4491],"11609d9c":[()=>n.e(8588).then(n.bind(n,6982)),"@site/docs/api/@thatopen/fragments/index.md",6982],"1322ea3a":[()=>n.e(9905).then(n.bind(n,2999)),"@site/docs/api/@thatopen/components-front/index.md",2999],"140c5f61":[()=>n.e(4657).then(n.bind(n,9251)),"@site/docs/Tutorials/Components/Front/AngleMeasurement.mdx",9251],"154fa21f":[()=>n.e(5259).then(n.bind(n,6672)),"@site/docs/api/@thatopen/components-front/classes/ClipEdges.md",6672],"15db49d8":[()=>n.e(558).then(n.bind(n,9943)),"@site/docs/api/@thatopen/components-front/interfaces/Section.md",9943],17896441:[()=>Promise.all([n.e(1869),n.e(8401)]).then(n.bind(n,3409)),"@theme/DocItem",3409],"18259d44":[()=>n.e(5664).then(n.bind(n,1807)),"@site/docs/api/@thatopen/components-front/classes/EdgeMeasurement.md",1807],"1862aa2c":[()=>n.e(9731).then(n.bind(n,268)),"@site/docs/api/@thatopen/components-front/interfaces/StreamLoaderSettings.md",268],"18642b58":[()=>n.e(2789).then(n.bind(n,5443)),"@site/docs/api/@thatopen/components/classes/Viewpoint.md",5443],"1a4e3797":[()=>Promise.all([n.e(1869),n.e(2138)]).then(n.bind(n,9057)),"@theme/SearchPage",9057],"1bab50c0":[()=>n.e(4357).then(n.bind(n,5384)),"@site/docs/api/@thatopen/ui-obc/classes/Manager.md",5384],"1c283959":[()=>n.e(9271).then(n.bind(n,8884)),"@site/docs/api/@thatopen/fragments/classes/FragmentMesh.md",8884],"1d610e8d":[()=>n.e(4314).then(n.bind(n,1903)),"@site/docs/api/@thatopen/ui/classes/Selector.md",1903],"1df93b7f":[()=>n.e(4583).then(n.bind(n,6866)),"@site/src/pages/index.tsx",6866],"1ebc048b":[()=>n.e(6598).then(n.bind(n,2093)),"@site/docs/api/@thatopen/components-front/interfaces/SerializedAreaMeasure.md",2093],"1f287bd8":[()=>n.e(7439).then(n.bind(n,8302)),"@site/docs/api/@thatopen/components/interfaces/Disposable.md",8302],"1f35a145":[()=>n.e(2309).then(n.bind(n,9802)),"@site/docs/api/@thatopen/components/variables/GeometryTypes.md",9802],"1faa3b26":[()=>n.e(4699).then(n.bind(n,3308)),"@site/docs/api/@thatopen/components-front/classes/GraphicVertexPicker.md",3308],"2052912a":[()=>n.e(1321).then(n.bind(n,6097)),"@site/docs/api/@thatopen/components/classes/Worlds.md",6097],"20a8d056":[()=>n.e(3515).then(n.bind(n,1469)),"@site/docs/api/@thatopen/components/classes/Mouse.md",1469],"21bca064":[()=>n.e(2048).then(n.bind(n,3313)),"@site/docs/api/@thatopen/components/type-aliases/BooleanPropTypes.md",3313],"22dd74f7":[()=>n.e(1567).then(n.t.bind(n,5226,19)),"@generated/docusaurus-plugin-content-docs/default/p/index-466.json",5226],"2317552d":[()=>n.e(5098).then(n.bind(n,5614)),"@site/docs/api/@thatopen/components/classes/IfcRelationsIndexer.md",5614],"277d3d1f":[()=>n.e(8231).then(n.bind(n,3601)),"@site/docs/api/@thatopen/components/interfaces/Updateable.md",3601],"289e56e5":[()=>n.e(7272).then(n.bind(n,3194)),"@site/docs/api/@thatopen/components-front/classes/CivilNavigator.md",3194],"28eadf98":[()=>n.e(1738).then(n.bind(n,9233)),"@site/docs/api/@thatopen/components/interfaces/Configurable.md",9233],"2a9a2072":[()=>n.e(1175).then(n.bind(n,3174)),"@site/docs/Tutorials/Components/Core/BoundingBoxer.mdx",3174],"2aba4d5d":[()=>n.e(7064).then(n.bind(n,5932)),"@site/docs/Tutorials/Components/Core/Cullers.mdx",5932],"2b98c8b8":[()=>n.e(4431).then(n.bind(n,3818)),"@site/docs/api/@thatopen/components/type-aliases/IfcRelations.md",3818],"2cccc130":[()=>n.e(1513).then(n.bind(n,4165)),"@site/docs/api/@thatopen/components/type-aliases/CameraProjection.md",4165],"2e55cd48":[()=>n.e(1495).then(n.bind(n,4345)),"@site/docs/api/@thatopen/components-front/interfaces/IMarker.md",4345],"2f3b9650":[()=>n.e(1858).then(n.bind(n,4100)),"@site/docs/api/@thatopen/components-front/interfaces/StreamedInstance.md",4100],"308c405f":[()=>n.e(9392).then(n.bind(n,488)),"@site/docs/Tutorials/Components/Core/IfcRelationsIndexer.mdx",488],"3167543d":[()=>n.e(2496).then(n.bind(n,9801)),"@site/docs/Tutorials/Components/Core/BCFTopics.mdx",9801],"3378f535":[()=>n.e(2331).then(n.bind(n,6945)),"@site/docs/api/@thatopen/components/classes/BaseScene.md",6945],"35bc646f":[()=>n.e(5740).then(n.bind(n,1307)),"@site/docs/Tutorials/Components/Core/Clipper.mdx",1307],"365a7573":[()=>n.e(7124).then(n.bind(n,9272)),"@site/docs/api/@thatopen/ui/classes/Table.md",9272],"375bbe41":[()=>n.e(8706).then(n.bind(n,9428)),"@site/docs/api/@thatopen/components-front/classes/LengthMeasurement.md",9428],"37729f53":[()=>n.e(7311).then(n.bind(n,2233)),"@site/docs/Tutorials/Components/Core/MeasurementUtils.mdx",2233],"37b2843d":[()=>n.e(4100).then(n.bind(n,1861)),"@site/docs/api/@thatopen/fragments/type-aliases/IfcSchema.md",1861],"37f92c4b":[()=>n.e(3905).then(n.bind(n,4787)),"@site/docs/api/@thatopen/components-front/classes/Civil3DNavigator.md",4787],"38b25c42":[()=>n.e(6688).then(n.bind(n,2377)),"@site/docs/api/@thatopen/ui/classes/TextInput.md",2377],"3984db2b":[()=>n.e(673).then(n.bind(n,5574)),"@site/docs/api/@thatopen/components-front/interfaces/IGroupedMarkers.md",5574],"3dc8cfe6":[()=>n.e(8289).then(n.bind(n,4551)),"@site/docs/api/@thatopen/components/interfaces/ShadowedSceneConfig.md",4551],"3eac639e":[()=>n.e(6280).then(n.bind(n,9268)),"@site/docs/Tutorials/UserInterface/OBC/ClassificationsTree.mdx",9268],"3f68d459":[()=>n.e(2412).then(n.bind(n,609)),"@site/docs/Tutorials/Components/Core/ShadowedScene.mdx",609],"3faecb4d":[()=>n.e(9925).then(n.bind(n,2830)),"@site/docs/Tutorials/Components/Front/Marker.mdx",2830],"41337f10":[()=>n.e(9684).then(n.bind(n,7446)),"@site/docs/api/@thatopen/components/classes/Cullers.md",7446],"413ac913":[()=>n.e(198).then(n.bind(n,1871)),"@site/docs/Tutorials/Components/Front/Civil3DNavigator.mdx",1871],"41e4f119":[()=>n.e(7196).then(n.bind(n,3801)),"@site/docs/api/@thatopen/components-front/type-aliases/LineStyles.md",3801],42025824:[()=>n.e(9454).then(n.bind(n,9891)),"@site/docs/Tutorials/UserInterface/Core/Table/Searching.mdx",9891],"43cf7f3d":[()=>n.e(3453).then(n.bind(n,9502)),"@site/docs/api/@thatopen/components/classes/BaseCamera.md",9502],"43d9c4c9":[()=>n.e(7600).then(n.bind(n,7277)),"@site/docs/api/@thatopen/components/classes/Classifier.md",7277],"4619d7dd":[()=>n.e(40).then(n.bind(n,2633)),"@site/docs/api/@thatopen/components-front/interfaces/HighlighterConfig.md",2633],"463f6372":[()=>n.e(4936).then(n.bind(n,4102)),"@site/docs/api/@thatopen/components-front/classes/EdgesPlane.md",4102],"466db7b6":[()=>n.e(8130).then(n.bind(n,7734)),"@site/docs/api/@thatopen/ui/interfaces/EntryQuery.md",7734],"49f9cca7":[()=>n.e(1207).then(n.bind(n,5734)),"@site/docs/api/@thatopen/components/classes/BaseRenderer.md",5734],"4ae5e07e":[()=>n.e(4231).then(n.bind(n,409)),"@site/docs/api/@thatopen/components/variables/IfcCategoryMap.md",409],"4b44f7a2":[()=>n.e(8081).then(n.bind(n,2548)),"@site/docs/Tutorials/Components/Front/VolumeMeasurement.mdx",2548],"4c4c2199":[()=>n.e(8206).then(n.bind(n,1069)),"@site/docs/Tutorials/Components/Core/Classifier.mdx",1069],"4cd236f7":[()=>n.e(660).then(n.bind(n,8562)),"@site/docs/api/@thatopen/components-front/interfaces/PostproductionSettings.md",8562],"4d54d076":[()=>n.e(1459).then(n.bind(n,913)),"@site/docs/contributing.md",913],"4f731321":[()=>n.e(8320).then(n.bind(n,1848)),"@site/docs/api/@thatopen/ui-obc/index.md",1848],"5094df0e":[()=>n.e(4640).then(n.bind(n,7007)),"@site/docs/components/tutorial-paths.md",7007],"52c77013":[()=>n.e(6137).then(n.bind(n,4402)),"@site/docs/api/@thatopen/components-front/interfaces/StreamPropertiesSettings.md",4402],53326157:[()=>n.e(6255).then(n.bind(n,8760)),"@site/docs/api/@thatopen/components-front/classes/ClippingFills.md",8760],"5363cd25":[()=>n.e(312).then(n.bind(n,8305)),"@site/docs/api/@thatopen/ui/type-aliases/Query.md",8305],"5427f572":[()=>n.e(7157).then(n.bind(n,160)),"@site/docs/api/@thatopen/components/classes/VertexPicker.md",160],"5559f2bc":[()=>n.e(266).then(n.bind(n,9896)),"@site/docs/api/@thatopen/ui/interfaces/RowSelectedEventDetail.md",9896],"5813db83":[()=>n.e(6277).then(n.bind(n,6995)),"@site/docs/Tutorials/Components/Front/CivilPlanNavigator.mdx",6995],"58e51885":[()=>n.e(6664).then(n.bind(n,2168)),"@site/docs/api/@thatopen/components/classes/MiniMaps.md",2168],"5a161d45":[()=>n.e(4486).then(n.bind(n,2145)),"@site/docs/api/@thatopen/components/index.md",2145],"5a37a46b":[()=>n.e(1320).then(n.bind(n,4098)),"@site/docs/api/@thatopen/components/classes/SimpleGrid.md",4098],"5a57a3ff":[()=>n.e(4905).then(n.bind(n,589)),"@site/docs/api/@thatopen/fragments/classes/Fragment.md",589],"5b0fd4cf":[()=>n.e(3291).then(n.bind(n,1455)),"@site/docs/api/@thatopen/components-front/classes/Highlighter.md",1455],"5b323c0d":[()=>n.e(7787).then(n.bind(n,2643)),"@site/docs/api/@thatopen/ui/interfaces/HasName.md",2643],"5c3ba3b5":[()=>n.e(2799).then(n.bind(n,8756)),"@site/docs/api/@thatopen/components-front/classes/ClippingEdges.md",8756],"5c500910":[()=>n.e(658).then(n.bind(n,6213)),"@site/docs/api/@thatopen/components/classes/Disposer.md",6213],"5c7b714e":[()=>n.e(4221).then(n.bind(n,3182)),"@site/docs/Tutorials/Components/Core/FragmentsManager.mdx",3182],"5c9472e2":[()=>n.e(230).then(n.bind(n,7854)),"@site/docs/api/@thatopen/components/type-aliases/StringPropTypes.md",7854],"5e8c322a":[()=>n.e(594).then(n.bind(n,3478)),"@site/docs/api/index.md",3478],"5e95c892":[()=>n.e(9647).then(n.bind(n,7121)),"@theme/DocsRoot",7121],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,4784)),"@generated/docusaurus.config",4784],"6010802d":[()=>n.e(5380).then(n.bind(n,9360)),"@site/docs/api/@thatopen/components/classes/AsyncEvent.md",9360],"605f2b91":[()=>n.e(6154).then(n.bind(n,3471)),"@site/docs/api/@thatopen/components/classes/IfcPropertyQuery.md",3471],"60f3e948":[()=>n.e(2206).then(n.bind(n,3377)),"@site/docs/Tutorials/Components/Core/MiniMap.mdx",3377],"6180ab48":[()=>n.e(4741).then(n.bind(n,9510)),"@site/docs/api/@thatopen/components/interfaces/Eventable.md",9510],"61edb951":[()=>n.e(5414).then(n.bind(n,5109)),"@site/docs/api/@thatopen/components/classes/MeasurementUtils.md",5109],"62293fe9":[()=>n.e(2889).then(n.bind(n,5664)),"@site/docs/api/@thatopen/ui/interfaces/ColumnData.md",5664],"65b6eeb2":[()=>n.e(2074).then(n.bind(n,11)),"@site/docs/api/@thatopen/ui/classes/ColorInput.md",11],"65c4cb23":[()=>n.e(4103).then(n.bind(n,3289)),"@site/docs/api/@thatopen/components/classes/IfcJsonExporter.md",3289],"665fbaa3":[()=>n.e(1893).then(n.bind(n,2906)),"@site/docs/api/@thatopen/components-front/classes/GeometryCullerRenderer.md",2906],"66863a1d":[()=>n.e(7226).then(n.bind(n,6381)),"@site/docs/api/@thatopen/components-front/interfaces/AreaSelection.md",6381],"6753a5bd":[()=>n.e(158).then(n.bind(n,408)),"@site/docs/api/@thatopen/ui/classes/ToolbarGroup.md",408],"6b589d5b":[()=>n.e(1342).then(n.bind(n,9696)),"@site/docs/api/@thatopen/components/classes/SimpleWorld.md",9696],"6ccd6ae8":[()=>n.e(5459).then(n.bind(n,4272)),"@site/docs/api/@thatopen/components/classes/Hider.md",4272],"6e9c3009":[()=>n.e(6780).then(n.bind(n,1377)),"@site/docs/api/@thatopen/components/type-aliases/SerializedQuery.md",1377],"6f005a44":[()=>n.e(745).then(n.bind(n,3031)),"@site/docs/api/@thatopen/components-front/interfaces/ClipStyle.md",3031],"6f3f8a76":[()=>n.e(2910).then(n.bind(n,5844)),"@site/docs/api/@thatopen/ui/type-aliases/QueryOperators.md",5844],"6fb69558":[()=>n.e(7662).then(n.bind(n,6948)),"@site/docs/Tutorials/Components/Front/Sections.mdx",6948],"703f0851":[()=>n.e(7447).then(n.bind(n,716)),"@site/docs/api/@thatopen/components-front/classes/EdgesStyles.md",716],"72d46929":[()=>n.e(6020).then(n.bind(n,9181)),"@site/docs/Tutorials/Components/Core/Raycasters.mdx",9181],"73c1b274":[()=>n.e(7308).then(n.bind(n,5571)),"@site/docs/api/@thatopen/components/classes/Comment.md",5571],"748d53f0":[()=>n.e(3924).then(n.bind(n,9688)),"@site/docs/Tutorials/Components/Core/IfcFinder.mdx",9688],"75c9f5a7":[()=>n.e(5384).then(n.bind(n,8720)),"@site/docs/Tutorials/Components/Core/Viewpoints.mdx",8720],"7600ec35":[()=>n.e(3920).then(n.bind(n,151)),"@site/docs/api/@thatopen/components/classes/Clipper.md",151],"7669d240":[()=>n.e(7521).then(n.bind(n,6259)),"@site/docs/api/@thatopen/ui/interfaces/CellCreatedEventDetail.md",6259],"7780d7d8":[()=>n.e(334).then(n.bind(n,5999)),"@site/docs/api/@thatopen/components/classes/IfcFinderQuery.md",5999],"77f6bc4a":[()=>n.e(6637).then(n.bind(n,63)),"@site/docs/api/@thatopen/fragments/classes/CurveMesh.md",63],"7899e7db":[()=>n.e(8214).then(n.bind(n,2769)),"@site/docs/Tutorials/Components/Core/Exploder.mdx",2769],"79535aa6":[()=>n.e(2484).then(n.bind(n,4251)),"@site/docs/api/@thatopen/components/interfaces/MeasureEdge.md",4251],"79ddb75d":[()=>n.e(6861).then(n.bind(n,522)),"@site/docs/api/@thatopen/ui/classes/Label.md",522],"7a0e30bf":[()=>n.e(1195).then(n.bind(n,5476)),"@site/docs/api/@thatopen/components-front/classes/PostproductionRenderer.md",5476],"7b0627ae":[()=>n.e(5373).then(n.bind(n,4607)),"@site/docs/api/@thatopen/components-front/classes/IfcStreamer.md",4607],"7b9547e5":[()=>n.e(7031).then(n.bind(n,6830)),"@site/docs/api/@thatopen/ui/classes/Grid.md",6830],"7bbb74f9":[()=>n.e(7582).then(n.bind(n,634)),"@site/docs/api/@thatopen/components/interfaces/VertexPickerConfig.md",634],"7c213f25":[()=>n.e(1010).then(n.bind(n,9410)),"@site/docs/api/@thatopen/components/classes/DataSet.md",9410],"7cc95c1b":[()=>n.e(152).then(n.bind(n,1112)),"@site/docs/Tutorials/UserInterface/OBC/ElementProperties.mdx",1112],"7d516a78":[()=>n.e(5338).then(n.bind(n,8726)),"@site/docs/Tutorials/Components/index.md",8726],"7d9ad963":[()=>n.e(3812).then(n.bind(n,9109)),"@site/docs/api/@thatopen/components/classes/Raycasters.md",9109],"7deff3d6":[()=>n.e(8560).then(n.bind(n,6266)),"@site/docs/api/@thatopen/components-front/type-aliases/StreamedInstances.md",6266],"7f9f1956":[()=>n.e(1034).then(n.bind(n,5692)),"@site/docs/api/@thatopen/components/interfaces/CameraControllable.md",5692],"8068fabe":[()=>n.e(8741).then(n.bind(n,6637)),"@site/docs/api/@thatopen/ui-obc/classes/World2D.md",6637],"8075b353":[()=>n.e(2890).then(n.bind(n,4837)),"@site/docs/Tutorials/Components/Core/IfcIsolator.mdx",4837],"80bb5c14":[()=>n.e(4556).then(n.bind(n,1230)),"@site/docs/Tutorials/Components/Front/PostproductionRenderer.mdx",1230],"812ff96c":[()=>n.e(9032).then(n.bind(n,3288)),"@site/docs/api/@thatopen/components/interfaces/Resizeable.md",3288],"815af0b8":[()=>n.e(6224).then(n.bind(n,9911)),"@site/docs/api/@thatopen/fragments/type-aliases/AlignmentType.md",9911],"81a7c521":[()=>n.e(5041).then(n.bind(n,8055)),"@site/docs/api/@thatopen/components-front/classes/CivilElevationNavigator.md",8055],82142225:[()=>n.e(9081).then(n.bind(n,415)),"@site/docs/api/@thatopen/ui/classes/Icon.md",415],"82c425bb":[()=>n.e(955).then(n.bind(n,5070)),"@site/docs/components/getting-started.md",5070],"8394e073":[()=>n.e(8410).then(n.bind(n,1735)),"@site/docs/api/@thatopen/ui-obc/classes/World.md",1735],"8414dade":[()=>n.e(8336).then(n.bind(n,5153)),"@site/docs/api/@thatopen/ui/interfaces/RowDeselectedEventDetail.md",5153],"8532e885":[()=>n.e(1515).then(n.bind(n,947)),"@site/docs/api/@thatopen/ui/classes/Option.md",947],86328980:[()=>n.e(8939).then(n.bind(n,1216)),"@site/docs/Tutorials/UserInterface/OBC/RelationsTree.mdx",1216],"86756d51":[()=>n.e(4669).then(n.bind(n,3813)),"@site/docs/api/@thatopen/components-front/interfaces/HighlightEvents.md",3813],"87654e65":[()=>n.e(529).then(n.bind(n,9141)),"@site/docs/Tutorials/Components/Core/Worlds.mdx",9141],"8831e6a1":[()=>n.e(6508).then(n.bind(n,3188)),"@site/docs/api/@thatopen/components-front/interfaces/PlanView.md",3188],"891ff3cc":[()=>n.e(2676).then(n.bind(n,9054)),"@site/docs/api/@thatopen/components/type-aliases/InverseAttributes.md",9054],89744073:[()=>n.e(7613).then(n.bind(n,5911)),"@site/docs/api/@thatopen/components-front/classes/Postproduction.md",5911],"8a5feacb":[()=>n.e(5833).then(n.bind(n,6581)),"@site/docs/Tutorials/Components/Core/IfcJsonExporter.mdx",6581],"8b5cf146":[()=>n.e(8544).then(n.bind(n,6102)),"@site/docs/Tutorials/Components/Front/ClipEdges.mdx",6102],"8d17812b":[()=>n.e(3562).then(n.bind(n,6079)),"@site/docs/api/@thatopen/components-front/classes/RendererWith2D.md",6079],91048590:[()=>n.e(287).then(n.bind(n,606)),"@site/docs/api/@thatopen/components-front/interfaces/Shadow.md",606],"91847d5b":[()=>n.e(9869).then(n.bind(n,3302)),"@site/docs/api/@thatopen/components/interfaces/World.md",3302],"920c7aa2":[()=>n.e(6092).then(n.bind(n,3091)),"@site/docs/api/@thatopen/components-front/type-aliases/Edges.md",3091],"929d4cd2":[()=>n.e(8836).then(n.bind(n,2023)),"@site/docs/Tutorials/Components/Front/FaceMeasurement.mdx",2023],93387336:[()=>n.e(6927).then(n.bind(n,3945)),"@site/docs/api/@thatopen/components/interfaces/StreamedAsset.md",3945],"933e260b":[()=>n.e(9793).then(n.bind(n,4086)),"@site/docs/api/@thatopen/components/classes/ProjectionManager.md",4086],"93d93575":[()=>n.e(7142).then(n.bind(n,4823)),"@site/docs/Tutorials/Components/Front/CivilElevationNavigator.mdx",4823],"9629a8e7":[()=>n.e(5566).then(n.bind(n,5003)),"@site/docs/api/@thatopen/components/classes/Grids.md",5003],"964fd942":[()=>n.e(7928).then(n.bind(n,5563)),"@site/docs/api/@thatopen/ui/classes/NumberInput.md",5563],"974d60c2":[()=>n.e(1166).then(n.bind(n,3460)),"@site/docs/api/@thatopen/components/classes/Components.md",3460],"97ffe74a":[()=>n.e(4702).then(n.bind(n,1363)),"@site/docs/api/@thatopen/ui/classes/Component.md",1363],"980edba3":[()=>n.e(655).then(n.bind(n,4089)),"@site/docs/Tutorials/UserInterface/Core/Table/ExportingData.mdx",4089],"981448f8":[()=>n.e(1225).then(n.bind(n,7524)),"@site/docs/api/@thatopen/components/type-aliases/NumericPropTypes.md",7524],"9a679a6d":[()=>n.e(9656).then(n.bind(n,3580)),"@site/docs/api/@thatopen/ui/classes/Viewport.md",3580],"9a9290c7":[()=>n.e(9305).then(n.bind(n,5834)),"@site/docs/api/@thatopen/components-front/classes/VolumeMeasurement.md",5834],"9ac8f8d2":[()=>n.e(4891).then(n.bind(n,2867)),"@site/docs/api/@thatopen/components-front/classes/AngleMeasurement.md",2867],"9c72e710":[()=>n.e(1815).then(n.bind(n,4465)),"@site/docs/api/@thatopen/components/classes/ShadowedScene.md",4465],"9cc8bf47":[()=>n.e(5001).then(n.bind(n,7844)),"@site/docs/api/@thatopen/components/classes/PlanMode.md",7844],"9d575eb0":[()=>n.e(876).then(n.bind(n,2886)),"@site/docs/api/@thatopen/components/classes/Event.md",2886],"9d7eea47":[()=>n.e(1813).then(n.bind(n,8968)),"@site/docs/components/creating-components.md",8968],"9ecb64fb":[()=>n.e(6620).then(n.bind(n,9003)),"@site/docs/api/@thatopen/components/classes/EventManager.md",9003],"9f1bf482":[()=>n.e(6423).then(n.bind(n,4263)),"@site/docs/Tutorials/UserInterface/Core/Component.mdx",4263],"9fb24410":[()=>n.e(3513).then(n.bind(n,3503)),"@site/docs/api/@thatopen/ui/classes/Manager.md",3503],a0020ecd:[()=>n.e(3618).then(n.bind(n,5409)),"@site/docs/api/@thatopen/fragments/classes/StreamSerializer.md",5409],a004cb4f:[()=>n.e(3033).then(n.bind(n,3796)),"@site/docs/api/@thatopen/components-front/classes/ShadowDropper.md",3796],a19215ee:[()=>n.e(5576).then(n.bind(n,9724)),"@site/docs/api/@thatopen/components/type-aliases/NavModeID.md",9724],a198b8fb:[()=>n.e(5676).then(n.bind(n,4379)),"@site/docs/api/@thatopen/components-front/classes/FaceMeasurement.md",4379],a2e958f8:[()=>n.e(5101).then(n.bind(n,6048)),"@site/docs/api/@thatopen/components/interfaces/BCFViewpoint.md",6048],a3f6485e:[()=>n.e(6417).then(n.bind(n,5083)),"@site/docs/api/@thatopen/ui/type-aliases/TableRowTemplate.md",5083],a599bc11:[()=>n.e(1248).then(n.bind(n,4817)),"@site/docs/Tutorials/Components/Core/IfcPropertiesTiler.mdx",4817],a7456010:[()=>n.e(1235).then(n.t.bind(n,8552,19)),"@generated/docusaurus-plugin-content-pages/default/__plugin.json",8552],a7bd4aaa:[()=>n.e(7098).then(n.bind(n,4532)),"@theme/DocVersionRoot",4532],a7f5133b:[()=>n.e(8291).then(n.bind(n,4741)),"@site/docs/api/@thatopen/components/classes/IfcIsolator.md",4741],a86c020f:[()=>n.e(7601).then(n.bind(n,1582)),"@site/docs/api/@thatopen/ui/interfaces/RowCreatedEventDetail.md",1582],a94703ab:[()=>Promise.all([n.e(1869),n.e(9048)]).then(n.bind(n,2559)),"@theme/DocRoot",2559],a97be2f4:[()=>n.e(6081).then(n.bind(n,3272)),"@site/docs/api/@thatopen/components/classes/IfcPropertiesManager.md",3272],aabc5d6d:[()=>n.e(3445).then(n.bind(n,2520)),"@site/docs/api/@thatopen/components/classes/SimpleRaycaster.md",2520],aaf02d6d:[()=>n.e(3575).then(n.bind(n,7744)),"@site/docs/api/@thatopen/components/classes/CullerRenderer.md",7744],ab5353a3:[()=>n.e(994).then(n.bind(n,2329)),"@site/docs/api/@thatopen/components/classes/MeshCullerRenderer.md",2329],ab5f11bf:[()=>n.e(6141).then(n.bind(n,9145)),"@site/docs/api/@thatopen/fragments/classes/Serializer.md",9145],ab991a90:[()=>n.e(4181).then(n.bind(n,854)),"@site/docs/api/@thatopen/components/classes/IDSSpecifications.md",854],aba21aa0:[()=>n.e(5742).then(n.t.bind(n,7093,19)),"@generated/docusaurus-plugin-content-docs/default/__plugin.json",7093],ac8bbf91:[()=>n.e(4911).then(n.bind(n,8376)),"@site/docs/Tutorials/UserInterface/index.md",8376],aeb76930:[()=>n.e(2922).then(n.bind(n,6635)),"@site/docs/api/@thatopen/ui/type-aliases/GridLayoutsDefinition.md",6635],af33d720:[()=>n.e(4997).then(n.bind(n,6548)),"@site/docs/api/@thatopen/components-front/interfaces/DimensionData.md",6548],af41a79f:[()=>n.e(9254).then(n.bind(n,8676)),"@site/docs/api/@thatopen/components/interfaces/Createable.md",8676],b147a7a4:[()=>n.e(8348).then(n.bind(n,6715)),"@site/docs/api/@thatopen/components-front/classes/CivilCrossSectionNavigator.md",6715],b1bac509:[()=>n.e(5749).then(n.bind(n,7549)),"@site/docs/api/@thatopen/fragments/type-aliases/StreamedGeometries.md",7549],b3a8b157:[()=>n.e(2094).then(n.bind(n,8371)),"@site/docs/api/@thatopen/components/classes/OrthoPerspectiveCamera.md",8371],b4f219e8:[()=>n.e(6676).then(n.bind(n,8384)),"@site/docs/api/@thatopen/fragments/interfaces/Item.md",8384],b644f464:[()=>n.e(9691).then(n.bind(n,2861)),"@site/docs/api/@thatopen/ui/type-aliases/TableRowData.md",2861],b647a403:[()=>n.e(7788).then(n.bind(n,9452)),"@site/docs/api/@thatopen/ui/classes/Input.md",9452],b6ed21d5:[()=>n.e(4374).then(n.bind(n,1691)),"@site/docs/api/@thatopen/components-front/classes/Mark.md",1691],b7a247ba:[()=>n.e(7859).then(n.bind(n,2446)),"@site/docs/api/@thatopen/components/classes/SimplePlane.md",2446],b901c018:[()=>n.e(767).then(n.bind(n,7601)),"@site/docs/api/@thatopen/components/classes/BCFTopics.md",7601],ba2d65a5:[()=>n.e(6667).then(n.bind(n,9438)),"@site/docs/api/@thatopen/components/classes/FirstPersonMode.md",9438],bb084856:[()=>n.e(5738).then(n.bind(n,9098)),"@site/docs/api/@thatopen/ui/classes/Tabs.md",9098],bb31c526:[()=>n.e(9095).then(n.bind(n,3219)),"@site/docs/api/@thatopen/components/interfaces/IfcOperatorRule.md",3219],bbbd24fa:[()=>n.e(1352).then(n.bind(n,5643)),"@site/docs/api/@thatopen/components/classes/IDSSpecification.md",5643],bbca7ecd:[()=>n.e(7598).then(n.bind(n,6173)),"@site/docs/api/@thatopen/components/classes/IfcStreamingSettings.md",6173],bbe9aba3:[()=>n.e(7484).then(n.bind(n,3339)),"@site/docs/api/@thatopen/components/interfaces/IDSCheckResult.md",3339],bc725c21:[()=>n.e(2134).then(n.bind(n,8697)),"@site/docs/api/@thatopen/components/classes/Base.md",8697],bcf1c6aa:[()=>n.e(3628).then(n.bind(n,6936)),"@site/docs/api/@thatopen/components-front/classes/SimpleDimensionLine.md",6936],bd3873d8:[()=>n.e(9618).then(n.bind(n,6459)),"@site/docs/Tutorials/UserInterface/Core/Table/Table.mdx",6459],bfb74b8f:[()=>n.e(7998).then(n.bind(n,7478)),"@site/docs/api/@thatopen/ui/type-aliases/StatefullComponent.md",7478],c03ff2b0:[()=>n.e(9967).then(n.bind(n,8209)),"@site/docs/Tutorials/UserInterface/OBC/TopicsUI.mdx",8209],c0c84d70:[()=>n.e(2406).then(n.bind(n,3871)),"@site/docs/api/@thatopen/ui/type-aliases/ConditionFunctions.md",3871],c141421f:[()=>n.e(957).then(n.t.bind(n,936,19)),"@generated/docusaurus-theme-search-algolia/default/__plugin.json",936],c1b3b982:[()=>n.e(8383).then(n.bind(n,7207)),"@site/docs/Tutorials/Components/Front/AreaMeasurement.mdx",7207],c2ed691f:[()=>n.e(2353).then(n.bind(n,4592)),"@site/docs/api/@thatopen/components/classes/IfcBasicQuery.md",4592],c3fa778d:[()=>n.e(556).then(n.bind(n,6409)),"@site/docs/api/@thatopen/components/type-aliases/IfcFinderRule.md",6409],c59a7f4a:[()=>n.e(6035).then(n.bind(n,4341)),"@site/docs/api/@thatopen/components/classes/Exploder.md",4341],c5eca5d6:[()=>n.e(167).then(n.bind(n,1154)),"@site/docs/api/@thatopen/components/classes/BaseWorldItem.md",1154],c62bb28c:[()=>n.e(8287).then(n.bind(n,4826)),"@site/docs/Tutorials/Components/Front/LengthMeasurement.mdx",4826],c694b8d2:[()=>n.e(4159).then(n.bind(n,8728)),"@site/docs/Tutorials/UserInterface/Core/Table/DataTransform.mdx",8728],c6b2dae7:[()=>n.e(7377).then(n.bind(n,2020)),"@site/docs/api/@thatopen/components/interfaces/IfcCategoryRule.md",2020],c841d004:[()=>n.e(3551).then(n.bind(n,2812)),"@site/docs/api/@thatopen/components-front/classes/Marker.md",2812],c8eb6001:[()=>n.e(7316).then(n.bind(n,513)),"@site/docs/api/@thatopen/components/classes/IfcPropertiesTiler.md",513],ca57013d:[()=>n.e(5275).then(n.bind(n,8462)),"@site/docs/Tutorials/Components/Front/ShadowDropper.mdx",8462],cab0aaf7:[()=>n.e(7278).then(n.bind(n,7076)),"@site/docs/api/@thatopen/components-front/type-aliases/CivilMarkerType.md",7076],cb1bbd23:[()=>n.e(5142).then(n.bind(n,5224)),"@site/docs/api/@thatopen/ui/type-aliases/QueryCondition.md",5224],cbfd7658:[()=>n.e(2690).then(n.bind(n,4656)),"@site/docs/api/@thatopen/components/classes/SimpleScene.md",4656],cc2135d3:[()=>n.e(1173).then(n.bind(n,9951)),"@site/docs/api/@thatopen/ui/classes/Checkbox.md",9951],cc65862f:[()=>n.e(2188).then(n.bind(n,1074)),"@site/docs/api/@thatopen/fragments/interfaces/FragmentIdMap.md",1074],cc861d23:[()=>n.e(1957).then(n.bind(n,148)),"@site/docs/api/@thatopen/fragments/classes/Alignment.md",148],cccf32cd:[()=>n.e(9940).then(n.bind(n,928)),"@site/docs/api/@thatopen/components/interfaces/Classification.md",928],cd2a2db6:[()=>n.e(7771).then(n.bind(n,8678)),"@site/docs/api/@thatopen/components-front/classes/Sections.md",8678],cd4c7385:[()=>n.e(8442).then(n.bind(n,8830)),"@site/docs/api/@thatopen/components/variables/IfcElements.md",8830],cdf177fd:[()=>n.e(5525).then(n.bind(n,1351)),"@site/docs/api/@thatopen/ui-obc/classes/ViewCube.md",1351],cf2b6f49:[()=>n.e(9153).then(n.bind(n,1242)),"@site/docs/api/@thatopen/ui/classes/Button.md",1242],cf9aea31:[()=>n.e(2916).then(n.bind(n,2401)),"@site/docs/api/@thatopen/components/interfaces/NavigationMode.md",2401],d0337ccc:[()=>n.e(3221).then(n.bind(n,7476)),"@site/docs/api/@thatopen/components/classes/PropertiesStreamingSettings.md",7476],d2f9f8f0:[()=>n.e(4334).then(n.bind(n,701)),"@site/docs/api/@thatopen/components/classes/MiniMap.md",701],d30a5746:[()=>n.e(2415).then(n.bind(n,7434)),"@site/docs/api/@thatopen/ui/classes/Panel.md",7434],d4de7b83:[()=>n.e(8318).then(n.bind(n,3287)),"@site/docs/api/@thatopen/ui/index.md",3287],d7622d88:[()=>n.e(7110).then(n.bind(n,2639)),"@site/docs/api/@thatopen/components-front/classes/AreaMeasurement.md",2639],d7881993:[()=>n.e(2842).then(n.bind(n,6330)),"@site/docs/api/@thatopen/components/interfaces/AttributeListener.md",6330],d98048c4:[()=>n.e(7191).then(n.bind(n,593)),"@site/docs/api/@thatopen/ui/interfaces/ManagerConfig.md",593],da19a474:[()=>n.e(8646).then(n.bind(n,1515)),"@site/docs/Tutorials/Components/Front/IfcStreamer.mdx",1515],da45e96b:[()=>n.e(233).then(n.bind(n,2309)),"@site/docs/api/@thatopen/fragments/classes/FragmentsGroup.md",2309],db5b3467:[()=>n.e(4116).then(n.bind(n,1519)),"@site/docs/api/@thatopen/ui/classes/Toolbar.md",1519],dbc536f0:[()=>n.e(9232).then(n.bind(n,2978)),"@site/docs/Tutorials/Components/Front/Plans.mdx",2978],dc2a58ea:[()=>n.e(3254).then(n.bind(n,9411)),"@site/docs/Tutorials/Components/Core/Grids.mdx",9411],dc5ba380:[()=>n.e(3401).then(n.bind(n,3241)),"@site/docs/api/@thatopen/components/classes/OrbitMode.md",3241],dd39d547:[()=>n.e(6433).then(n.bind(n,2119)),"@site/docs/api/@thatopen/components-front/interfaces/Edge.md",2119],ddf030d9:[()=>n.e(1301).then(n.bind(n,1215)),"@site/docs/api/@thatopen/components/classes/IfcFragmentSettings.md",1215],de5a1b2f:[()=>n.e(9577).then(n.bind(n,9632)),"@site/docs/api/@thatopen/components-front/classes/Plans.md",9632],df1f6170:[()=>n.e(8806).then(n.bind(n,5298)),"@site/docs/api/@thatopen/components/classes/IfcFinder.md",5298],df322933:[()=>n.e(4979).then(n.bind(n,9089)),"@site/docs/api/@thatopen/components/classes/Component.md",9089],e1742e01:[()=>n.e(9922).then(n.bind(n,3925)),"@site/docs/api/@thatopen/components/interfaces/IfcPropertyRule.md",3925],e19f46cf:[()=>n.e(7422).then(n.bind(n,1263)),"@site/docs/api/@thatopen/fragments/classes/CivilCurve.md",1263],e1d72daf:[()=>n.e(4661).then(n.bind(n,8524)),"@site/docs/api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry.md",8524],e24f28d7:[()=>n.e(3333).then(n.bind(n,2204)),"@site/docs/api/@thatopen/components/classes/DataMap.md",2204],e2bafd46:[()=>n.e(9901).then(n.bind(n,7825)),"@site/docs/api/@thatopen/components/classes/SimpleRenderer.md",7825],e34c19ea:[()=>n.e(4927).then(n.bind(n,2016)),"@site/docs/api/@thatopen/components/classes/BoundingBoxer.md",2016],e3702cd4:[()=>n.e(9359).then(n.bind(n,6313)),"@site/docs/components/clean-components-guide.md",6313],e4477f93:[()=>n.e(624).then(n.bind(n,1930)),"@site/docs/api/@thatopen/ui/type-aliases/StatelessComponent.md",1930],e4857e4d:[()=>n.e(3225).then(n.bind(n,8087)),"@site/docs/Tutorials/Components/Front/CivilCrossSectionNavigator.mdx",8087],e4f9526a:[()=>n.e(5145).then(n.bind(n,8977)),"@site/docs/api/@thatopen/ui/interfaces/TableGroupData.md",8977],e7902667:[()=>n.e(4649).then(n.bind(n,531)),"@site/docs/api/@thatopen/components/classes/ConfigManager.md",531],e8059868:[()=>n.e(8184).then(n.bind(n,1829)),"@site/docs/api/@thatopen/components-front/interfaces/Shadows.md",1829],e81d001f:[()=>n.e(6074).then(n.bind(n,5121)),"@site/docs/api/@thatopen/components/classes/SimpleCamera.md",5121],ec1e15a5:[()=>n.e(6625).then(n.bind(n,3135)),"@site/docs/api/@thatopen/ui/interfaces/HasValue.md",3135],ec23e004:[()=>n.e(2173).then(n.bind(n,8363)),"@site/docs/api/@thatopen/components/interfaces/MiniMapConfig.md",8363],ef4d88ec:[()=>n.e(246).then(n.bind(n,8949)),"@site/docs/api/@thatopen/ui/interfaces/QueryGroup.md",8949],efedca67:[()=>n.e(7736).then(n.bind(n,6538)),"@site/docs/api/@thatopen/fragments/interfaces/IfcProperties.md",6538],f02943fa:[()=>n.e(8682).then(n.bind(n,1698)),"@site/docs/api/@thatopen/components/interfaces/EntitiesRelatedEvent.md",1698],f0d87bf4:[()=>n.e(8444).then(n.bind(n,8117)),"@site/docs/Tutorials/Components/Core/IfcLoader.mdx",8117],f2099014:[()=>n.e(4942).then(n.bind(n,6559)),"@site/docs/api/@thatopen/components/interfaces/BCFTopicsConfig.md",6559],f249f794:[()=>n.e(7260).then(n.bind(n,5766)),"@site/docs/api/@thatopen/components-front/classes/Outliner.md",5766],f2554377:[()=>n.e(8208).then(n.bind(n,9948)),"@site/docs/api/@thatopen/components/interfaces/Hideable.md",9948],f27de35f:[()=>n.e(8203).then(n.bind(n,2543)),"@site/docs/api/@thatopen/components-front/classes/CivilPlanNavigator.md",2543],f30d8a80:[()=>n.e(7679).then(n.bind(n,9898)),"@site/docs/api/@thatopen/fragments/interfaces/IndexedGeometry.md",9898],f45379a9:[()=>n.e(3991).then(n.bind(n,4536)),"@site/docs/Tutorials/Components/Core/IfcGeometryTiler.mdx",4536],f70643aa:[()=>n.e(7701).then(n.bind(n,793)),"@site/docs/Tutorials/UserInterface/OBC/ModelsList.mdx",793],f75f81bf:[()=>n.e(5794).then(n.bind(n,1253)),"@site/docs/api/@thatopen/ui/type-aliases/TableDataTransform.md",1253],fa3a76b7:[()=>n.e(966).then(n.bind(n,1728)),"@site/docs/api/@thatopen/ui/classes/ToolbarSection.md",1728],fb334a9e:[()=>n.e(3038).then(n.bind(n,2462)),"@site/docs/Tutorials/Components/Core/IfcPropertiesManager.mdx",2462],fb3ecf5a:[()=>n.e(2678).then(n.bind(n,5786)),"@site/docs/api/@thatopen/components/interfaces/SimpleSceneConfig.md",5786],fba9713b:[()=>n.e(3766).then(n.bind(n,1386)),"@site/docs/Tutorials/Components/Core/Hider.mdx",1386],fbf5076e:[()=>n.e(7468).then(n.bind(n,2664)),"@site/docs/api/@thatopen/components/interfaces/ChangeMap.md",2664],fc883a52:[()=>n.e(5839).then(n.bind(n,1711)),"@site/docs/api/@thatopen/ui/interfaces/TableGroupTemplate.md",1711],fcb3671e:[()=>n.e(2100).then(n.bind(n,8911)),"@site/docs/api/@thatopen/components/interfaces/Progress.md",8911],fcb6e505:[()=>n.e(3393).then(n.bind(n,2583)),"@site/docs/api/@thatopen/ui/classes/Tab.md",2583],fec1cb9d:[()=>n.e(7816).then(n.bind(n,9043)),"@site/docs/Tutorials/UserInterface/Core/Table/LoadFunction.mdx",9043],ff77d064:[()=>n.e(6383).then(n.bind(n,2944)),"@site/docs/api/@thatopen/components/interfaces/SimpleGridConfig.md",2944]};var s=n(4848);function l(e){let{error:t,retry:n,pastDelay:a}=e;return t?(0,s.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,s.jsx)("p",{children:String(t)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):a?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(6921),p=n(3102);function u(e,t){if("*"===e)return o()({loading:l,loader:()=>n.e(2237).then(n.bind(n,2237)),modules:["@theme/NotFound"],webpack:()=>[2237],render(e,t){const n=e.default;return(0,s.jsx)(p.W,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(n,{...t})})}});const a=r[`${e}-${t}`],u={},d=[],f=[],m=(0,c.A)(a);return Object.entries(m).forEach((e=>{let[t,n]=e;const a=i[n];a&&(u[t]=a[0],d.push(a[1]),f.push(a[2]))})),o().Map({loading:l,loader:u,modules:d,webpack:()=>f,render(t,n){const o=JSON.parse(JSON.stringify(a));Object.entries(t).forEach((t=>{let[n,a]=t;const r=a.default;if(!r)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof r&&"function"!=typeof r||Object.keys(a).filter((e=>"default"!==e)).forEach((e=>{r[e]=a[e]}));let i=o;const s=n.split(".");s.slice(0,-1).forEach((e=>{i=i[e]})),i[s[s.length-1]]=r}));const r=o.__comp;delete o.__comp;const i=o.__context;delete o.__context;const l=o.__props;return delete o.__props,(0,s.jsx)(p.W,{value:i,children:(0,s.jsx)(r,{...o,...l,...n})})}})}const d=[{path:"/search",component:u("/search","5de"),exact:!0},{path:"/",component:u("/","e5f"),exact:!0},{path:"/",component:u("/","ff8"),routes:[{path:"/",component:u("/","a99"),routes:[{path:"/",component:u("/","fbe"),routes:[{path:"/api/",component:u("/api/","1c0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/",component:u("/api/@thatopen/components-front/","fad"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/AngleMeasurement",component:u("/api/@thatopen/components-front/classes/AngleMeasurement","ba7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/AreaMeasurement",component:u("/api/@thatopen/components-front/classes/AreaMeasurement","26c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/Civil3DNavigator",component:u("/api/@thatopen/components-front/classes/Civil3DNavigator","56d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/CivilCrossSectionNavigator",component:u("/api/@thatopen/components-front/classes/CivilCrossSectionNavigator","187"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/CivilElevationNavigator",component:u("/api/@thatopen/components-front/classes/CivilElevationNavigator","ce6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/CivilNavigator",component:u("/api/@thatopen/components-front/classes/CivilNavigator","8ad"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/CivilPlanNavigator",component:u("/api/@thatopen/components-front/classes/CivilPlanNavigator","9dc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/ClipEdges",component:u("/api/@thatopen/components-front/classes/ClipEdges","40a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/ClippingEdges",component:u("/api/@thatopen/components-front/classes/ClippingEdges","d8f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/ClippingFills",component:u("/api/@thatopen/components-front/classes/ClippingFills","9b6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/EdgeMeasurement",component:u("/api/@thatopen/components-front/classes/EdgeMeasurement","b93"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/EdgesPlane",component:u("/api/@thatopen/components-front/classes/EdgesPlane","990"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/EdgesStyles",component:u("/api/@thatopen/components-front/classes/EdgesStyles","e99"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/FaceMeasurement",component:u("/api/@thatopen/components-front/classes/FaceMeasurement","81d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/GeometryCullerRenderer",component:u("/api/@thatopen/components-front/classes/GeometryCullerRenderer","a23"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/GraphicVertexPicker",component:u("/api/@thatopen/components-front/classes/GraphicVertexPicker","f49"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/Highlighter",component:u("/api/@thatopen/components-front/classes/Highlighter","e9b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/IfcStreamer",component:u("/api/@thatopen/components-front/classes/IfcStreamer","f47"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/LengthMeasurement",component:u("/api/@thatopen/components-front/classes/LengthMeasurement","422"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/Mark",component:u("/api/@thatopen/components-front/classes/Mark","80b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/Marker",component:u("/api/@thatopen/components-front/classes/Marker","3ae"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/Outliner",component:u("/api/@thatopen/components-front/classes/Outliner","c67"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/Plans",component:u("/api/@thatopen/components-front/classes/Plans","140"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/Postproduction",component:u("/api/@thatopen/components-front/classes/Postproduction","a05"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/PostproductionRenderer",component:u("/api/@thatopen/components-front/classes/PostproductionRenderer","a09"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/RendererWith2D",component:u("/api/@thatopen/components-front/classes/RendererWith2D","49f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/Sections",component:u("/api/@thatopen/components-front/classes/Sections","d55"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/ShadowDropper",component:u("/api/@thatopen/components-front/classes/ShadowDropper","ad0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/SimpleDimensionLine",component:u("/api/@thatopen/components-front/classes/SimpleDimensionLine","5c1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/classes/VolumeMeasurement",component:u("/api/@thatopen/components-front/classes/VolumeMeasurement","e3d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/AreaSelection",component:u("/api/@thatopen/components-front/interfaces/AreaSelection","a8d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry",component:u("/api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry","781"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/ClipStyle",component:u("/api/@thatopen/components-front/interfaces/ClipStyle","8d4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/DimensionData",component:u("/api/@thatopen/components-front/interfaces/DimensionData","fd5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/Edge",component:u("/api/@thatopen/components-front/interfaces/Edge","ab6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/HighlighterConfig",component:u("/api/@thatopen/components-front/interfaces/HighlighterConfig","5ee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/HighlightEvents",component:u("/api/@thatopen/components-front/interfaces/HighlightEvents","e8d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/IGroupedMarkers",component:u("/api/@thatopen/components-front/interfaces/IGroupedMarkers","b09"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/IMarker",component:u("/api/@thatopen/components-front/interfaces/IMarker","9ea"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/PlanView",component:u("/api/@thatopen/components-front/interfaces/PlanView","37e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/PostproductionSettings",component:u("/api/@thatopen/components-front/interfaces/PostproductionSettings","249"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/Section",component:u("/api/@thatopen/components-front/interfaces/Section","789"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/SerializedAreaMeasure",component:u("/api/@thatopen/components-front/interfaces/SerializedAreaMeasure","24d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/Shadow",component:u("/api/@thatopen/components-front/interfaces/Shadow","4e5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/Shadows",component:u("/api/@thatopen/components-front/interfaces/Shadows","eab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/StreamedInstance",component:u("/api/@thatopen/components-front/interfaces/StreamedInstance","62d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/StreamLoaderSettings",component:u("/api/@thatopen/components-front/interfaces/StreamLoaderSettings","d5d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/interfaces/StreamPropertiesSettings",component:u("/api/@thatopen/components-front/interfaces/StreamPropertiesSettings","ba0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/type-aliases/CivilMarkerType",component:u("/api/@thatopen/components-front/type-aliases/CivilMarkerType","7a1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/type-aliases/Edges",component:u("/api/@thatopen/components-front/type-aliases/Edges","fa9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/type-aliases/IndexFragmentMap",component:u("/api/@thatopen/components-front/type-aliases/IndexFragmentMap","ffb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/type-aliases/LineStyles",component:u("/api/@thatopen/components-front/type-aliases/LineStyles","5b0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components-front/type-aliases/StreamedInstances",component:u("/api/@thatopen/components-front/type-aliases/StreamedInstances","4a9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/",component:u("/api/@thatopen/components/","8b2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/AsyncEvent",component:u("/api/@thatopen/components/classes/AsyncEvent","d79"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Base",component:u("/api/@thatopen/components/classes/Base","c12"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/BaseCamera",component:u("/api/@thatopen/components/classes/BaseCamera","b2f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/BaseRenderer",component:u("/api/@thatopen/components/classes/BaseRenderer","852"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/BaseScene",component:u("/api/@thatopen/components/classes/BaseScene","51a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/BaseWorldItem",component:u("/api/@thatopen/components/classes/BaseWorldItem","27a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/BCFTopics",component:u("/api/@thatopen/components/classes/BCFTopics","a3a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/BoundingBoxer",component:u("/api/@thatopen/components/classes/BoundingBoxer","37b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Classifier",component:u("/api/@thatopen/components/classes/Classifier","7fd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Clipper",component:u("/api/@thatopen/components/classes/Clipper","24e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Comment",component:u("/api/@thatopen/components/classes/Comment","d81"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Component",component:u("/api/@thatopen/components/classes/Component","484"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Components",component:u("/api/@thatopen/components/classes/Components","e0f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/ConfigManager",component:u("/api/@thatopen/components/classes/ConfigManager","a78"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/CullerRenderer",component:u("/api/@thatopen/components/classes/CullerRenderer","1cc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Cullers",component:u("/api/@thatopen/components/classes/Cullers","f8d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/DataMap",component:u("/api/@thatopen/components/classes/DataMap","245"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/DataSet",component:u("/api/@thatopen/components/classes/DataSet","c50"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Disposer",component:u("/api/@thatopen/components/classes/Disposer","af7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Event",component:u("/api/@thatopen/components/classes/Event","7fe"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/EventManager",component:u("/api/@thatopen/components/classes/EventManager","d64"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Exploder",component:u("/api/@thatopen/components/classes/Exploder","42d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/FirstPersonMode",component:u("/api/@thatopen/components/classes/FirstPersonMode","38d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/FragmentsManager",component:u("/api/@thatopen/components/classes/FragmentsManager","48f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Grids",component:u("/api/@thatopen/components/classes/Grids","a40"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Hider",component:u("/api/@thatopen/components/classes/Hider","d4c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IDSSpecification",component:u("/api/@thatopen/components/classes/IDSSpecification","557"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IDSSpecifications",component:u("/api/@thatopen/components/classes/IDSSpecifications","850"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcBasicQuery",component:u("/api/@thatopen/components/classes/IfcBasicQuery","612"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcFinder",component:u("/api/@thatopen/components/classes/IfcFinder","663"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcFinderQuery",component:u("/api/@thatopen/components/classes/IfcFinderQuery","358"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcFragmentSettings",component:u("/api/@thatopen/components/classes/IfcFragmentSettings","015"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcGeometryTiler",component:u("/api/@thatopen/components/classes/IfcGeometryTiler","55a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcIsolator",component:u("/api/@thatopen/components/classes/IfcIsolator","136"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcJsonExporter",component:u("/api/@thatopen/components/classes/IfcJsonExporter","c00"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcLoader",component:u("/api/@thatopen/components/classes/IfcLoader","a0f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcPropertiesManager",component:u("/api/@thatopen/components/classes/IfcPropertiesManager","f63"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcPropertiesTiler",component:u("/api/@thatopen/components/classes/IfcPropertiesTiler","2be"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcPropertyQuery",component:u("/api/@thatopen/components/classes/IfcPropertyQuery","847"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcRelationsIndexer",component:u("/api/@thatopen/components/classes/IfcRelationsIndexer","f18"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/IfcStreamingSettings",component:u("/api/@thatopen/components/classes/IfcStreamingSettings","8d0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/MeasurementUtils",component:u("/api/@thatopen/components/classes/MeasurementUtils","ada"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/MeshCullerRenderer",component:u("/api/@thatopen/components/classes/MeshCullerRenderer","858"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/MiniMap",component:u("/api/@thatopen/components/classes/MiniMap","71c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/MiniMaps",component:u("/api/@thatopen/components/classes/MiniMaps","263"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Mouse",component:u("/api/@thatopen/components/classes/Mouse","c61"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/OrbitMode",component:u("/api/@thatopen/components/classes/OrbitMode","80d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/OrthoPerspectiveCamera",component:u("/api/@thatopen/components/classes/OrthoPerspectiveCamera","1ef"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/PlanMode",component:u("/api/@thatopen/components/classes/PlanMode","7df"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/ProjectionManager",component:u("/api/@thatopen/components/classes/ProjectionManager","cfa"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/PropertiesStreamingSettings",component:u("/api/@thatopen/components/classes/PropertiesStreamingSettings","2e8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Raycasters",component:u("/api/@thatopen/components/classes/Raycasters","c6f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/ShadowedScene",component:u("/api/@thatopen/components/classes/ShadowedScene","0a4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/SimpleCamera",component:u("/api/@thatopen/components/classes/SimpleCamera","097"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/SimpleGrid",component:u("/api/@thatopen/components/classes/SimpleGrid","bb0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/SimplePlane",component:u("/api/@thatopen/components/classes/SimplePlane","d5c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/SimpleRaycaster",component:u("/api/@thatopen/components/classes/SimpleRaycaster","3a7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/SimpleRenderer",component:u("/api/@thatopen/components/classes/SimpleRenderer","09d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/SimpleScene",component:u("/api/@thatopen/components/classes/SimpleScene","5a9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/SimpleWorld",component:u("/api/@thatopen/components/classes/SimpleWorld","5d0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/VertexPicker",component:u("/api/@thatopen/components/classes/VertexPicker","831"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Viewpoint",component:u("/api/@thatopen/components/classes/Viewpoint","80a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/classes/Worlds",component:u("/api/@thatopen/components/classes/Worlds","7ff"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/AttributeListener",component:u("/api/@thatopen/components/interfaces/AttributeListener","b27"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/BCFTopicsConfig",component:u("/api/@thatopen/components/interfaces/BCFTopicsConfig","bf8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/BCFViewpoint",component:u("/api/@thatopen/components/interfaces/BCFViewpoint","066"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/CameraControllable",component:u("/api/@thatopen/components/interfaces/CameraControllable","8c8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/ChangeMap",component:u("/api/@thatopen/components/interfaces/ChangeMap","c3e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/Classification",component:u("/api/@thatopen/components/interfaces/Classification","a18"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/Configurable",component:u("/api/@thatopen/components/interfaces/Configurable","739"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/Createable",component:u("/api/@thatopen/components/interfaces/Createable","263"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/Disposable",component:u("/api/@thatopen/components/interfaces/Disposable","8be"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/EntitiesRelatedEvent",component:u("/api/@thatopen/components/interfaces/EntitiesRelatedEvent","30f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/Eventable",component:u("/api/@thatopen/components/interfaces/Eventable","04b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/Hideable",component:u("/api/@thatopen/components/interfaces/Hideable","723"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/IDSCheckResult",component:u("/api/@thatopen/components/interfaces/IDSCheckResult","aad"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/IfcCategoryRule",component:u("/api/@thatopen/components/interfaces/IfcCategoryRule","5d1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/IfcOperatorRule",component:u("/api/@thatopen/components/interfaces/IfcOperatorRule","4ae"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/IfcPropertyRule",component:u("/api/@thatopen/components/interfaces/IfcPropertyRule","94f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/MeasureEdge",component:u("/api/@thatopen/components/interfaces/MeasureEdge","19b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/MiniMapConfig",component:u("/api/@thatopen/components/interfaces/MiniMapConfig","744"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/NavigationMode",component:u("/api/@thatopen/components/interfaces/NavigationMode","049"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/Progress",component:u("/api/@thatopen/components/interfaces/Progress","151"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/Resizeable",component:u("/api/@thatopen/components/interfaces/Resizeable","6c9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/ShadowedSceneConfig",component:u("/api/@thatopen/components/interfaces/ShadowedSceneConfig","a3f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/SimpleGridConfig",component:u("/api/@thatopen/components/interfaces/SimpleGridConfig","ad8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/SimpleSceneConfig",component:u("/api/@thatopen/components/interfaces/SimpleSceneConfig","3b2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/StreamedAsset",component:u("/api/@thatopen/components/interfaces/StreamedAsset","f47"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/StreamedGeometries",component:u("/api/@thatopen/components/interfaces/StreamedGeometries","172"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/Updateable",component:u("/api/@thatopen/components/interfaces/Updateable","c13"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/VertexPickerConfig",component:u("/api/@thatopen/components/interfaces/VertexPickerConfig","fb1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/interfaces/World",component:u("/api/@thatopen/components/interfaces/World","cb0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/type-aliases/BooleanPropTypes",component:u("/api/@thatopen/components/type-aliases/BooleanPropTypes","337"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/type-aliases/CameraProjection",component:u("/api/@thatopen/components/type-aliases/CameraProjection","9da"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/type-aliases/IfcFinderRule",component:u("/api/@thatopen/components/type-aliases/IfcFinderRule","505"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/type-aliases/IfcRelations",component:u("/api/@thatopen/components/type-aliases/IfcRelations","20a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/type-aliases/InverseAttributes",component:u("/api/@thatopen/components/type-aliases/InverseAttributes","f8a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/type-aliases/NavModeID",component:u("/api/@thatopen/components/type-aliases/NavModeID","907"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/type-aliases/NumericPropTypes",component:u("/api/@thatopen/components/type-aliases/NumericPropTypes","781"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/type-aliases/SerializedQuery",component:u("/api/@thatopen/components/type-aliases/SerializedQuery","ee9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/type-aliases/StringPropTypes",component:u("/api/@thatopen/components/type-aliases/StringPropTypes","fb9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/variables/GeometryTypes",component:u("/api/@thatopen/components/variables/GeometryTypes","c55"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/variables/IfcCategoryMap",component:u("/api/@thatopen/components/variables/IfcCategoryMap","9e2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/components/variables/IfcElements",component:u("/api/@thatopen/components/variables/IfcElements","3eb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/",component:u("/api/@thatopen/fragments/","2a0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/classes/Alignment",component:u("/api/@thatopen/fragments/classes/Alignment","dce"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/classes/CivilCurve",component:u("/api/@thatopen/fragments/classes/CivilCurve","cdf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/classes/CurveMesh",component:u("/api/@thatopen/fragments/classes/CurveMesh","274"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/classes/Fragment",component:u("/api/@thatopen/fragments/classes/Fragment","d41"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/classes/FragmentMesh",component:u("/api/@thatopen/fragments/classes/FragmentMesh","e75"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/classes/FragmentsGroup",component:u("/api/@thatopen/fragments/classes/FragmentsGroup","6d8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/classes/Serializer",component:u("/api/@thatopen/fragments/classes/Serializer","692"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/classes/StreamSerializer",component:u("/api/@thatopen/fragments/classes/StreamSerializer","dc3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/interfaces/FragmentIdMap",component:u("/api/@thatopen/fragments/interfaces/FragmentIdMap","205"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/interfaces/IfcMetadata",component:u("/api/@thatopen/fragments/interfaces/IfcMetadata","743"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/interfaces/IfcProperties",component:u("/api/@thatopen/fragments/interfaces/IfcProperties","6bb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/interfaces/IndexedGeometry",component:u("/api/@thatopen/fragments/interfaces/IndexedGeometry","026"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/interfaces/Item",component:u("/api/@thatopen/fragments/interfaces/Item","df5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/type-aliases/AlignmentType",component:u("/api/@thatopen/fragments/type-aliases/AlignmentType","94b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/type-aliases/IfcSchema",component:u("/api/@thatopen/fragments/type-aliases/IfcSchema","cee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/fragments/type-aliases/StreamedGeometries",component:u("/api/@thatopen/fragments/type-aliases/StreamedGeometries","d6d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui-obc/",component:u("/api/@thatopen/ui-obc/","1ee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui-obc/classes/Manager",component:u("/api/@thatopen/ui-obc/classes/Manager","46f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui-obc/classes/ViewCube",component:u("/api/@thatopen/ui-obc/classes/ViewCube","c0b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui-obc/classes/World",component:u("/api/@thatopen/ui-obc/classes/World","b2f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui-obc/classes/World2D",component:u("/api/@thatopen/ui-obc/classes/World2D","f6e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/",component:u("/api/@thatopen/ui/","ec4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Button",component:u("/api/@thatopen/ui/classes/Button","f11"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Checkbox",component:u("/api/@thatopen/ui/classes/Checkbox","6cb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/ColorInput",component:u("/api/@thatopen/ui/classes/ColorInput","445"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Component",component:u("/api/@thatopen/ui/classes/Component","4cb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Dropdown",component:u("/api/@thatopen/ui/classes/Dropdown","97f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Grid",component:u("/api/@thatopen/ui/classes/Grid","d7a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Icon",component:u("/api/@thatopen/ui/classes/Icon","bb8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Input",component:u("/api/@thatopen/ui/classes/Input","581"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Label",component:u("/api/@thatopen/ui/classes/Label","2a5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Manager",component:u("/api/@thatopen/ui/classes/Manager","1da"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/NumberInput",component:u("/api/@thatopen/ui/classes/NumberInput","59b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Option",component:u("/api/@thatopen/ui/classes/Option","16e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Panel",component:u("/api/@thatopen/ui/classes/Panel","77c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/PanelSection",component:u("/api/@thatopen/ui/classes/PanelSection","66d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Selector",component:u("/api/@thatopen/ui/classes/Selector","d28"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Tab",component:u("/api/@thatopen/ui/classes/Tab","bf9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Table",component:u("/api/@thatopen/ui/classes/Table","51b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Tabs",component:u("/api/@thatopen/ui/classes/Tabs","bab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/TextInput",component:u("/api/@thatopen/ui/classes/TextInput","fbf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Toolbar",component:u("/api/@thatopen/ui/classes/Toolbar","8d8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/ToolbarGroup",component:u("/api/@thatopen/ui/classes/ToolbarGroup","24c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/ToolbarSection",component:u("/api/@thatopen/ui/classes/ToolbarSection","dd3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/classes/Viewport",component:u("/api/@thatopen/ui/classes/Viewport","261"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/functions/getElementValue",component:u("/api/@thatopen/ui/functions/getElementValue","7e8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/CellCreatedEventDetail",component:u("/api/@thatopen/ui/interfaces/CellCreatedEventDetail","1fe"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/ColumnData",component:u("/api/@thatopen/ui/interfaces/ColumnData","7d9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/EntryQuery",component:u("/api/@thatopen/ui/interfaces/EntryQuery","77d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/HasName",component:u("/api/@thatopen/ui/interfaces/HasName","e37"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/HasValue",component:u("/api/@thatopen/ui/interfaces/HasValue","75f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/ManagerConfig",component:u("/api/@thatopen/ui/interfaces/ManagerConfig","28a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/QueryGroup",component:u("/api/@thatopen/ui/interfaces/QueryGroup","1d9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/RowCreatedEventDetail",component:u("/api/@thatopen/ui/interfaces/RowCreatedEventDetail","b16"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/RowDeselectedEventDetail",component:u("/api/@thatopen/ui/interfaces/RowDeselectedEventDetail","bdf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/RowSelectedEventDetail",component:u("/api/@thatopen/ui/interfaces/RowSelectedEventDetail","a3c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/TableGroupData",component:u("/api/@thatopen/ui/interfaces/TableGroupData","3bf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/interfaces/TableGroupTemplate",component:u("/api/@thatopen/ui/interfaces/TableGroupTemplate","462"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/type-aliases/ConditionFunctions",component:u("/api/@thatopen/ui/type-aliases/ConditionFunctions","0c1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/type-aliases/GridLayoutsDefinition",component:u("/api/@thatopen/ui/type-aliases/GridLayoutsDefinition","abf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/type-aliases/Query",component:u("/api/@thatopen/ui/type-aliases/Query","11a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/type-aliases/QueryCondition",component:u("/api/@thatopen/ui/type-aliases/QueryCondition","637"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/type-aliases/QueryOperators",component:u("/api/@thatopen/ui/type-aliases/QueryOperators","52b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/type-aliases/StatefullComponent",component:u("/api/@thatopen/ui/type-aliases/StatefullComponent","0f1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/type-aliases/StatelessComponent",component:u("/api/@thatopen/ui/type-aliases/StatelessComponent","d5d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/type-aliases/TableDataTransform",component:u("/api/@thatopen/ui/type-aliases/TableDataTransform","a5c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/type-aliases/TableRowData",component:u("/api/@thatopen/ui/type-aliases/TableRowData","8a8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/@thatopen/ui/type-aliases/TableRowTemplate",component:u("/api/@thatopen/ui/type-aliases/TableRowTemplate","ec7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/components/clean-components-guide",component:u("/components/clean-components-guide","655"),exact:!0,sidebar:"tutorialSidebar"},{path:"/components/creating-components",component:u("/components/creating-components","1bb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/components/getting-started",component:u("/components/getting-started","79b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/components/tutorial-paths",component:u("/components/tutorial-paths","5b5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/contributing",component:u("/contributing","641"),exact:!0,sidebar:"tutorialSidebar"},{path:"/intro",component:u("/intro","9fa"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/",component:u("/Tutorials/Components/","1d1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/BCFTopics",component:u("/Tutorials/Components/Core/BCFTopics","d76"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/BoundingBoxer",component:u("/Tutorials/Components/Core/BoundingBoxer","473"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Classifier",component:u("/Tutorials/Components/Core/Classifier","b7c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Clipper",component:u("/Tutorials/Components/Core/Clipper","ee3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Cullers",component:u("/Tutorials/Components/Core/Cullers","083"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Exploder",component:u("/Tutorials/Components/Core/Exploder","ef9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/FragmentsManager",component:u("/Tutorials/Components/Core/FragmentsManager","a50"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Grids",component:u("/Tutorials/Components/Core/Grids","90d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Hider",component:u("/Tutorials/Components/Core/Hider","b07"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcFinder",component:u("/Tutorials/Components/Core/IfcFinder","95a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcGeometryTiler",component:u("/Tutorials/Components/Core/IfcGeometryTiler","6bd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcIsolator",component:u("/Tutorials/Components/Core/IfcIsolator","0f8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcJsonExporter",component:u("/Tutorials/Components/Core/IfcJsonExporter","910"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcLoader",component:u("/Tutorials/Components/Core/IfcLoader","fe0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcPropertiesManager",component:u("/Tutorials/Components/Core/IfcPropertiesManager","f86"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcPropertiesTiler",component:u("/Tutorials/Components/Core/IfcPropertiesTiler","c60"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcRelationsIndexer",component:u("/Tutorials/Components/Core/IfcRelationsIndexer","98b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/MeasurementUtils",component:u("/Tutorials/Components/Core/MeasurementUtils","981"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/MiniMap",component:u("/Tutorials/Components/Core/MiniMap","9f6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/OrthoPerspectiveCamera",component:u("/Tutorials/Components/Core/OrthoPerspectiveCamera","007"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Raycasters",component:u("/Tutorials/Components/Core/Raycasters","a15"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/ShadowedScene",component:u("/Tutorials/Components/Core/ShadowedScene","5d0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Viewpoints",component:u("/Tutorials/Components/Core/Viewpoints","b59"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Worlds",component:u("/Tutorials/Components/Core/Worlds","f48"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/AngleMeasurement",component:u("/Tutorials/Components/Front/AngleMeasurement","b84"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/AreaMeasurement",component:u("/Tutorials/Components/Front/AreaMeasurement","415"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/Civil3DNavigator",component:u("/Tutorials/Components/Front/Civil3DNavigator","ebc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/CivilCrossSectionNavigator",component:u("/Tutorials/Components/Front/CivilCrossSectionNavigator","5a2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/CivilElevationNavigator",component:u("/Tutorials/Components/Front/CivilElevationNavigator","de0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/CivilPlanNavigator",component:u("/Tutorials/Components/Front/CivilPlanNavigator","f6f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/ClipEdges",component:u("/Tutorials/Components/Front/ClipEdges","ca1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/EdgeMeasurement",component:u("/Tutorials/Components/Front/EdgeMeasurement","e35"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/FaceMeasurement",component:u("/Tutorials/Components/Front/FaceMeasurement","04d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/Highlighter",component:u("/Tutorials/Components/Front/Highlighter","b63"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/IfcStreamer",component:u("/Tutorials/Components/Front/IfcStreamer","917"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/LengthMeasurement",component:u("/Tutorials/Components/Front/LengthMeasurement","0a9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/Marker",component:u("/Tutorials/Components/Front/Marker","a4a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/Plans",component:u("/Tutorials/Components/Front/Plans","372"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/PostproductionRenderer",component:u("/Tutorials/Components/Front/PostproductionRenderer","999"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/Sections",component:u("/Tutorials/Components/Front/Sections","e62"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/ShadowDropper",component:u("/Tutorials/Components/Front/ShadowDropper","d28"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/VolumeMeasurement",component:u("/Tutorials/Components/Front/VolumeMeasurement","566"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/",component:u("/Tutorials/UserInterface/","1c1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/Core/Component",component:u("/Tutorials/UserInterface/Core/Component","3c9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/Core/Table/",component:u("/Tutorials/UserInterface/Core/Table/","b12"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/Core/Table/DataTransform",component:u("/Tutorials/UserInterface/Core/Table/DataTransform","a24"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/Core/Table/ExportingData",component:u("/Tutorials/UserInterface/Core/Table/ExportingData","110"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/Core/Table/LoadFunction",component:u("/Tutorials/UserInterface/Core/Table/LoadFunction","3d6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/Core/Table/Searching",component:u("/Tutorials/UserInterface/Core/Table/Searching","ef7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/OBC/ClassificationsTree",component:u("/Tutorials/UserInterface/OBC/ClassificationsTree","8e7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/OBC/ElementProperties",component:u("/Tutorials/UserInterface/OBC/ElementProperties","112"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/OBC/EntityAttributes",component:u("/Tutorials/UserInterface/OBC/EntityAttributes","59e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/OBC/ModelsList",component:u("/Tutorials/UserInterface/OBC/ModelsList","e89"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/OBC/RelationsTree",component:u("/Tutorials/UserInterface/OBC/RelationsTree","4d9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/OBC/TopicsUI",component:u("/Tutorials/UserInterface/OBC/TopicsUI","25b"),exact:!0,sidebar:"tutorialSidebar"}]}]}]},{path:"*",component:u("*")}]},6125:(e,t,n)=>{"use strict";n.d(t,{o:()=>r,x:()=>i});var a=n(6540),o=n(4848);const r=a.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,a.useState)(!1);return(0,a.useEffect)((()=>{i(!0)}),[]),(0,o.jsx)(r.Provider,{value:n,children:t})}},8536:(e,t,n)=>{"use strict";var a=n(6540),o=n(5338),r=n(545),i=n(4625),s=n(4784),l=n(8193);const c=[n(119),n(6134),n(6294),n(1043)];var p=n(8328),u=n(6347),d=n(2831),f=n(4848);function m(e){let{children:t}=e;return(0,f.jsx)(f.Fragment,{children:t})}var h=n(5260),b=n(4586),g=n(6025),y=n(6342),v=n(9024),S=n(2131),w=n(4090),x=n(2967),C=n(440),k=n(1463);function T(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,b.A)(),a=(0,S.o)(),o=n[e].htmlLang,r=e=>e.replace("-","_");return(0,f.jsxs)(h.A,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,f.jsx)("link",{rel:"alternate",href:a.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,f.jsx)("link",{rel:"alternate",href:a.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,f.jsx)("meta",{property:"og:locale",content:r(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,f.jsx)("meta",{property:"og:locale:alternate",content:r(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function _(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,b.A)(),a=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,b.A)(),{pathname:a}=(0,u.zy)();return e+(0,C.applyTrailingSlash)((0,g.Ay)(a),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:a;return(0,f.jsxs)(h.A,{children:[(0,f.jsx)("meta",{property:"og:url",content:o}),(0,f.jsx)("link",{rel:"canonical",href:o})]})}function E(){const{i18n:{currentLocale:e}}=(0,b.A)(),{metadata:t,image:n}=(0,y.p)();return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsxs)(h.A,{children:[(0,f.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,f.jsx)("body",{className:w.w})]}),n&&(0,f.jsx)(v.be,{image:n}),(0,f.jsx)(_,{}),(0,f.jsx)(T,{}),(0,f.jsx)(k.A,{tag:x.Cy,locale:e}),(0,f.jsx)(h.A,{children:t.map(((e,t)=>(0,f.jsx)("meta",{...e},t)))})]})}const A=new Map;var I=n(6125),P=n(6988),M=n(205);function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a{const a=t.default?.[e]??t[e];return a?.(...n)}));return()=>o.forEach((e=>e?.()))}const L=function(e){let{children:t,location:n,previousLocation:a}=e;return(0,M.A)((()=>{a!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const a=t.pathname===n.pathname,o=t.hash===n.hash,r=t.search===n.search;if(a&&o&&!r)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:a}),R("onRouteDidUpdate",{previousLocation:a,location:n}))}),[a,n]),t};function N(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.u)(p.A,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class j extends a.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.A.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),N(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,f.jsx)(L,{previousLocation:this.previousLocation,location:t,children:(0,f.jsx)(u.qh,{location:t,render:()=>e})})}}const D=j,F="__docusaurus-base-url-issue-banner-container",O="__docusaurus-base-url-issue-banner",B="__docusaurus-base-url-issue-banner-suggestion-container";function z(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${F}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n
    \n

    Your Docusaurus site did not load properly.

    \n

    A very common reason is a wrong site baseUrl configuration.

    \n

    Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

    \n

    We suggest trying baseUrl =

    \n
    \n`}(e)).replace(/{let{route:t}=e;return!0===t.exact})))return A.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return A.set(e.pathname,t),{...e,pathname:t}}((0,u.zy)());return(0,f.jsx)(D,{location:e,children:W})}function K(){return(0,f.jsx)(V.A,{children:(0,f.jsx)(P.l,{children:(0,f.jsxs)(I.x,{children:[(0,f.jsxs)(m,{children:[(0,f.jsx)(G,{}),(0,f.jsx)(E,{}),(0,f.jsx)($,{}),(0,f.jsx)(Q,{})]}),(0,f.jsx)(q,{})]})})})}var Y=n(4054);const Z=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const a=document.createElement("link");a.setAttribute("rel","prefetch"),a.setAttribute("href",e),a.onload=()=>t(),a.onerror=()=>n();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(a)}))}:function(e){return new Promise(((t,n)=>{const a=new XMLHttpRequest;a.open("GET",e,!0),a.withCredentials=!0,a.onload=()=>{200===a.status?t():n()},a.send(null)}))};var J=n(6921);const X=new Set,ee=new Set,te=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ne={prefetch:e=>{if(!(e=>!te()&&!ee.has(e)&&!X.has(e))(e))return!1;X.add(e);const t=(0,d.u)(p.A,e).flatMap((e=>{return t=e.route.path,Object.entries(Y).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,J.A)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Z(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!te()&&!ee.has(e))(e)&&(ee.add(e),N(e))},ae=Object.freeze(ne);function oe(e){let{children:t}=e;return"hash"===s.default.future.experimental_router?(0,f.jsx)(i.I9,{children:t}):(0,f.jsx)(i.Kd,{children:t})}const re=Boolean(!0);if(l.A.canUseDOM){window.docusaurus=ae;const e=document.getElementById("__docusaurus"),t=(0,f.jsx)(r.vd,{children:(0,f.jsx)(oe,{children:(0,f.jsx)(K,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},i=()=>{if(window.docusaurusRoot)window.docusaurusRoot.render(t);else if(re)window.docusaurusRoot=o.hydrateRoot(e,t,{onRecoverableError:n});else{const a=o.createRoot(e,{onRecoverableError:n});a.render(t),window.docusaurusRoot=a}};N(window.location.pathname).then((()=>{(0,a.startTransition)(i)}))}},6988:(e,t,n)=>{"use strict";n.d(t,{o:()=>u,l:()=>d});var a=n(6540),o=n(4784);const r=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/","versions":[{"name":"current","label":"Next","isLast":true,"path":"/","mainDocId":"intro","docs":[{"id":"api/@thatopen/components-front/classes/AngleMeasurement","path":"/api/@thatopen/components-front/classes/AngleMeasurement","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/AreaMeasurement","path":"/api/@thatopen/components-front/classes/AreaMeasurement","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/Civil3DNavigator","path":"/api/@thatopen/components-front/classes/Civil3DNavigator","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/CivilCrossSectionNavigator","path":"/api/@thatopen/components-front/classes/CivilCrossSectionNavigator","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/CivilElevationNavigator","path":"/api/@thatopen/components-front/classes/CivilElevationNavigator","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/CivilNavigator","path":"/api/@thatopen/components-front/classes/CivilNavigator","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/CivilPlanNavigator","path":"/api/@thatopen/components-front/classes/CivilPlanNavigator","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/ClipEdges","path":"/api/@thatopen/components-front/classes/ClipEdges","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/ClippingEdges","path":"/api/@thatopen/components-front/classes/ClippingEdges","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/ClippingFills","path":"/api/@thatopen/components-front/classes/ClippingFills","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/EdgeMeasurement","path":"/api/@thatopen/components-front/classes/EdgeMeasurement","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/EdgesPlane","path":"/api/@thatopen/components-front/classes/EdgesPlane","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/EdgesStyles","path":"/api/@thatopen/components-front/classes/EdgesStyles","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/FaceMeasurement","path":"/api/@thatopen/components-front/classes/FaceMeasurement","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/GeometryCullerRenderer","path":"/api/@thatopen/components-front/classes/GeometryCullerRenderer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/GraphicVertexPicker","path":"/api/@thatopen/components-front/classes/GraphicVertexPicker","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/Highlighter","path":"/api/@thatopen/components-front/classes/Highlighter","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/IfcStreamer","path":"/api/@thatopen/components-front/classes/IfcStreamer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/LengthMeasurement","path":"/api/@thatopen/components-front/classes/LengthMeasurement","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/Mark","path":"/api/@thatopen/components-front/classes/Mark","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/Marker","path":"/api/@thatopen/components-front/classes/Marker","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/Outliner","path":"/api/@thatopen/components-front/classes/Outliner","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/Plans","path":"/api/@thatopen/components-front/classes/Plans","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/Postproduction","path":"/api/@thatopen/components-front/classes/Postproduction","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/PostproductionRenderer","path":"/api/@thatopen/components-front/classes/PostproductionRenderer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/RendererWith2D","path":"/api/@thatopen/components-front/classes/RendererWith2D","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/Sections","path":"/api/@thatopen/components-front/classes/Sections","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/ShadowDropper","path":"/api/@thatopen/components-front/classes/ShadowDropper","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/SimpleDimensionLine","path":"/api/@thatopen/components-front/classes/SimpleDimensionLine","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/classes/VolumeMeasurement","path":"/api/@thatopen/components-front/classes/VolumeMeasurement","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/index","path":"/api/@thatopen/components-front/","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/AreaSelection","path":"/api/@thatopen/components-front/interfaces/AreaSelection","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry","path":"/api/@thatopen/components-front/interfaces/BvhLineSegmentsGeometry","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/ClipStyle","path":"/api/@thatopen/components-front/interfaces/ClipStyle","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/DimensionData","path":"/api/@thatopen/components-front/interfaces/DimensionData","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/Edge","path":"/api/@thatopen/components-front/interfaces/Edge","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/HighlighterConfig","path":"/api/@thatopen/components-front/interfaces/HighlighterConfig","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/HighlightEvents","path":"/api/@thatopen/components-front/interfaces/HighlightEvents","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/IGroupedMarkers","path":"/api/@thatopen/components-front/interfaces/IGroupedMarkers","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/IMarker","path":"/api/@thatopen/components-front/interfaces/IMarker","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/PlanView","path":"/api/@thatopen/components-front/interfaces/PlanView","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/PostproductionSettings","path":"/api/@thatopen/components-front/interfaces/PostproductionSettings","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/Section","path":"/api/@thatopen/components-front/interfaces/Section","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/SerializedAreaMeasure","path":"/api/@thatopen/components-front/interfaces/SerializedAreaMeasure","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/Shadow","path":"/api/@thatopen/components-front/interfaces/Shadow","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/Shadows","path":"/api/@thatopen/components-front/interfaces/Shadows","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/StreamedInstance","path":"/api/@thatopen/components-front/interfaces/StreamedInstance","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/StreamLoaderSettings","path":"/api/@thatopen/components-front/interfaces/StreamLoaderSettings","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/interfaces/StreamPropertiesSettings","path":"/api/@thatopen/components-front/interfaces/StreamPropertiesSettings","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/type-aliases/CivilMarkerType","path":"/api/@thatopen/components-front/type-aliases/CivilMarkerType","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/type-aliases/Edges","path":"/api/@thatopen/components-front/type-aliases/Edges","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/type-aliases/IndexFragmentMap","path":"/api/@thatopen/components-front/type-aliases/IndexFragmentMap","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/type-aliases/LineStyles","path":"/api/@thatopen/components-front/type-aliases/LineStyles","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components-front/type-aliases/StreamedInstances","path":"/api/@thatopen/components-front/type-aliases/StreamedInstances","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/AsyncEvent","path":"/api/@thatopen/components/classes/AsyncEvent","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Base","path":"/api/@thatopen/components/classes/Base","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/BaseCamera","path":"/api/@thatopen/components/classes/BaseCamera","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/BaseRenderer","path":"/api/@thatopen/components/classes/BaseRenderer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/BaseScene","path":"/api/@thatopen/components/classes/BaseScene","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/BaseWorldItem","path":"/api/@thatopen/components/classes/BaseWorldItem","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/BCFTopics","path":"/api/@thatopen/components/classes/BCFTopics","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/BoundingBoxer","path":"/api/@thatopen/components/classes/BoundingBoxer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Classifier","path":"/api/@thatopen/components/classes/Classifier","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Clipper","path":"/api/@thatopen/components/classes/Clipper","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Comment","path":"/api/@thatopen/components/classes/Comment","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Component","path":"/api/@thatopen/components/classes/Component","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Components","path":"/api/@thatopen/components/classes/Components","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/ConfigManager","path":"/api/@thatopen/components/classes/ConfigManager","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/CullerRenderer","path":"/api/@thatopen/components/classes/CullerRenderer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Cullers","path":"/api/@thatopen/components/classes/Cullers","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/DataMap","path":"/api/@thatopen/components/classes/DataMap","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/DataSet","path":"/api/@thatopen/components/classes/DataSet","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Disposer","path":"/api/@thatopen/components/classes/Disposer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Event","path":"/api/@thatopen/components/classes/Event","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/EventManager","path":"/api/@thatopen/components/classes/EventManager","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Exploder","path":"/api/@thatopen/components/classes/Exploder","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/FirstPersonMode","path":"/api/@thatopen/components/classes/FirstPersonMode","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/FragmentsManager","path":"/api/@thatopen/components/classes/FragmentsManager","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Grids","path":"/api/@thatopen/components/classes/Grids","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Hider","path":"/api/@thatopen/components/classes/Hider","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IDSSpecification","path":"/api/@thatopen/components/classes/IDSSpecification","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IDSSpecifications","path":"/api/@thatopen/components/classes/IDSSpecifications","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcBasicQuery","path":"/api/@thatopen/components/classes/IfcBasicQuery","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcFinder","path":"/api/@thatopen/components/classes/IfcFinder","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcFinderQuery","path":"/api/@thatopen/components/classes/IfcFinderQuery","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcFragmentSettings","path":"/api/@thatopen/components/classes/IfcFragmentSettings","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcGeometryTiler","path":"/api/@thatopen/components/classes/IfcGeometryTiler","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcIsolator","path":"/api/@thatopen/components/classes/IfcIsolator","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcJsonExporter","path":"/api/@thatopen/components/classes/IfcJsonExporter","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcLoader","path":"/api/@thatopen/components/classes/IfcLoader","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcPropertiesManager","path":"/api/@thatopen/components/classes/IfcPropertiesManager","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcPropertiesTiler","path":"/api/@thatopen/components/classes/IfcPropertiesTiler","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcPropertyQuery","path":"/api/@thatopen/components/classes/IfcPropertyQuery","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcRelationsIndexer","path":"/api/@thatopen/components/classes/IfcRelationsIndexer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/IfcStreamingSettings","path":"/api/@thatopen/components/classes/IfcStreamingSettings","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/MeasurementUtils","path":"/api/@thatopen/components/classes/MeasurementUtils","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/MeshCullerRenderer","path":"/api/@thatopen/components/classes/MeshCullerRenderer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/MiniMap","path":"/api/@thatopen/components/classes/MiniMap","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/MiniMaps","path":"/api/@thatopen/components/classes/MiniMaps","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Mouse","path":"/api/@thatopen/components/classes/Mouse","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/OrbitMode","path":"/api/@thatopen/components/classes/OrbitMode","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/OrthoPerspectiveCamera","path":"/api/@thatopen/components/classes/OrthoPerspectiveCamera","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/PlanMode","path":"/api/@thatopen/components/classes/PlanMode","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/ProjectionManager","path":"/api/@thatopen/components/classes/ProjectionManager","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/PropertiesStreamingSettings","path":"/api/@thatopen/components/classes/PropertiesStreamingSettings","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Raycasters","path":"/api/@thatopen/components/classes/Raycasters","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/ShadowedScene","path":"/api/@thatopen/components/classes/ShadowedScene","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/SimpleCamera","path":"/api/@thatopen/components/classes/SimpleCamera","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/SimpleGrid","path":"/api/@thatopen/components/classes/SimpleGrid","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/SimplePlane","path":"/api/@thatopen/components/classes/SimplePlane","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/SimpleRaycaster","path":"/api/@thatopen/components/classes/SimpleRaycaster","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/SimpleRenderer","path":"/api/@thatopen/components/classes/SimpleRenderer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/SimpleScene","path":"/api/@thatopen/components/classes/SimpleScene","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/SimpleWorld","path":"/api/@thatopen/components/classes/SimpleWorld","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/VertexPicker","path":"/api/@thatopen/components/classes/VertexPicker","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Viewpoint","path":"/api/@thatopen/components/classes/Viewpoint","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/classes/Worlds","path":"/api/@thatopen/components/classes/Worlds","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/index","path":"/api/@thatopen/components/","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/AttributeListener","path":"/api/@thatopen/components/interfaces/AttributeListener","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/BCFTopicsConfig","path":"/api/@thatopen/components/interfaces/BCFTopicsConfig","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/BCFViewpoint","path":"/api/@thatopen/components/interfaces/BCFViewpoint","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/CameraControllable","path":"/api/@thatopen/components/interfaces/CameraControllable","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/ChangeMap","path":"/api/@thatopen/components/interfaces/ChangeMap","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/Classification","path":"/api/@thatopen/components/interfaces/Classification","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/Configurable","path":"/api/@thatopen/components/interfaces/Configurable","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/Createable","path":"/api/@thatopen/components/interfaces/Createable","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/Disposable","path":"/api/@thatopen/components/interfaces/Disposable","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/EntitiesRelatedEvent","path":"/api/@thatopen/components/interfaces/EntitiesRelatedEvent","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/Eventable","path":"/api/@thatopen/components/interfaces/Eventable","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/Hideable","path":"/api/@thatopen/components/interfaces/Hideable","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/IDSCheckResult","path":"/api/@thatopen/components/interfaces/IDSCheckResult","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/IfcCategoryRule","path":"/api/@thatopen/components/interfaces/IfcCategoryRule","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/IfcOperatorRule","path":"/api/@thatopen/components/interfaces/IfcOperatorRule","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/IfcPropertyRule","path":"/api/@thatopen/components/interfaces/IfcPropertyRule","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/MeasureEdge","path":"/api/@thatopen/components/interfaces/MeasureEdge","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/MiniMapConfig","path":"/api/@thatopen/components/interfaces/MiniMapConfig","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/NavigationMode","path":"/api/@thatopen/components/interfaces/NavigationMode","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/Progress","path":"/api/@thatopen/components/interfaces/Progress","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/Resizeable","path":"/api/@thatopen/components/interfaces/Resizeable","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/ShadowedSceneConfig","path":"/api/@thatopen/components/interfaces/ShadowedSceneConfig","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/SimpleGridConfig","path":"/api/@thatopen/components/interfaces/SimpleGridConfig","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/SimpleSceneConfig","path":"/api/@thatopen/components/interfaces/SimpleSceneConfig","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/StreamedAsset","path":"/api/@thatopen/components/interfaces/StreamedAsset","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/StreamedGeometries","path":"/api/@thatopen/components/interfaces/StreamedGeometries","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/Updateable","path":"/api/@thatopen/components/interfaces/Updateable","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/VertexPickerConfig","path":"/api/@thatopen/components/interfaces/VertexPickerConfig","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/interfaces/World","path":"/api/@thatopen/components/interfaces/World","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/type-aliases/BooleanPropTypes","path":"/api/@thatopen/components/type-aliases/BooleanPropTypes","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/type-aliases/CameraProjection","path":"/api/@thatopen/components/type-aliases/CameraProjection","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/type-aliases/IfcFinderRule","path":"/api/@thatopen/components/type-aliases/IfcFinderRule","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/type-aliases/IfcRelations","path":"/api/@thatopen/components/type-aliases/IfcRelations","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/type-aliases/InverseAttributes","path":"/api/@thatopen/components/type-aliases/InverseAttributes","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/type-aliases/NavModeID","path":"/api/@thatopen/components/type-aliases/NavModeID","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/type-aliases/NumericPropTypes","path":"/api/@thatopen/components/type-aliases/NumericPropTypes","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/type-aliases/SerializedQuery","path":"/api/@thatopen/components/type-aliases/SerializedQuery","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/type-aliases/StringPropTypes","path":"/api/@thatopen/components/type-aliases/StringPropTypes","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/variables/GeometryTypes","path":"/api/@thatopen/components/variables/GeometryTypes","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/variables/IfcCategoryMap","path":"/api/@thatopen/components/variables/IfcCategoryMap","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/components/variables/IfcElements","path":"/api/@thatopen/components/variables/IfcElements","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/classes/Alignment","path":"/api/@thatopen/fragments/classes/Alignment","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/classes/CivilCurve","path":"/api/@thatopen/fragments/classes/CivilCurve","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/classes/CurveMesh","path":"/api/@thatopen/fragments/classes/CurveMesh","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/classes/Fragment","path":"/api/@thatopen/fragments/classes/Fragment","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/classes/FragmentMesh","path":"/api/@thatopen/fragments/classes/FragmentMesh","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/classes/FragmentsGroup","path":"/api/@thatopen/fragments/classes/FragmentsGroup","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/classes/Serializer","path":"/api/@thatopen/fragments/classes/Serializer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/classes/StreamSerializer","path":"/api/@thatopen/fragments/classes/StreamSerializer","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/index","path":"/api/@thatopen/fragments/","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/interfaces/FragmentIdMap","path":"/api/@thatopen/fragments/interfaces/FragmentIdMap","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/interfaces/IfcMetadata","path":"/api/@thatopen/fragments/interfaces/IfcMetadata","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/interfaces/IfcProperties","path":"/api/@thatopen/fragments/interfaces/IfcProperties","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/interfaces/IndexedGeometry","path":"/api/@thatopen/fragments/interfaces/IndexedGeometry","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/interfaces/Item","path":"/api/@thatopen/fragments/interfaces/Item","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/type-aliases/AlignmentType","path":"/api/@thatopen/fragments/type-aliases/AlignmentType","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/type-aliases/IfcSchema","path":"/api/@thatopen/fragments/type-aliases/IfcSchema","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/fragments/type-aliases/StreamedGeometries","path":"/api/@thatopen/fragments/type-aliases/StreamedGeometries","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui-obc/classes/Manager","path":"/api/@thatopen/ui-obc/classes/Manager","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui-obc/classes/ViewCube","path":"/api/@thatopen/ui-obc/classes/ViewCube","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui-obc/classes/World","path":"/api/@thatopen/ui-obc/classes/World","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui-obc/classes/World2D","path":"/api/@thatopen/ui-obc/classes/World2D","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui-obc/index","path":"/api/@thatopen/ui-obc/","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Button","path":"/api/@thatopen/ui/classes/Button","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Checkbox","path":"/api/@thatopen/ui/classes/Checkbox","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/ColorInput","path":"/api/@thatopen/ui/classes/ColorInput","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Component","path":"/api/@thatopen/ui/classes/Component","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Dropdown","path":"/api/@thatopen/ui/classes/Dropdown","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Grid","path":"/api/@thatopen/ui/classes/Grid","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Icon","path":"/api/@thatopen/ui/classes/Icon","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Input","path":"/api/@thatopen/ui/classes/Input","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Label","path":"/api/@thatopen/ui/classes/Label","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Manager","path":"/api/@thatopen/ui/classes/Manager","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/NumberInput","path":"/api/@thatopen/ui/classes/NumberInput","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Option","path":"/api/@thatopen/ui/classes/Option","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Panel","path":"/api/@thatopen/ui/classes/Panel","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/PanelSection","path":"/api/@thatopen/ui/classes/PanelSection","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Selector","path":"/api/@thatopen/ui/classes/Selector","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Tab","path":"/api/@thatopen/ui/classes/Tab","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Table","path":"/api/@thatopen/ui/classes/Table","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Tabs","path":"/api/@thatopen/ui/classes/Tabs","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/TextInput","path":"/api/@thatopen/ui/classes/TextInput","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Toolbar","path":"/api/@thatopen/ui/classes/Toolbar","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/ToolbarGroup","path":"/api/@thatopen/ui/classes/ToolbarGroup","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/ToolbarSection","path":"/api/@thatopen/ui/classes/ToolbarSection","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/classes/Viewport","path":"/api/@thatopen/ui/classes/Viewport","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/functions/getElementValue","path":"/api/@thatopen/ui/functions/getElementValue","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/index","path":"/api/@thatopen/ui/","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/CellCreatedEventDetail","path":"/api/@thatopen/ui/interfaces/CellCreatedEventDetail","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/ColumnData","path":"/api/@thatopen/ui/interfaces/ColumnData","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/EntryQuery","path":"/api/@thatopen/ui/interfaces/EntryQuery","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/HasName","path":"/api/@thatopen/ui/interfaces/HasName","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/HasValue","path":"/api/@thatopen/ui/interfaces/HasValue","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/ManagerConfig","path":"/api/@thatopen/ui/interfaces/ManagerConfig","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/QueryGroup","path":"/api/@thatopen/ui/interfaces/QueryGroup","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/RowCreatedEventDetail","path":"/api/@thatopen/ui/interfaces/RowCreatedEventDetail","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/RowDeselectedEventDetail","path":"/api/@thatopen/ui/interfaces/RowDeselectedEventDetail","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/RowSelectedEventDetail","path":"/api/@thatopen/ui/interfaces/RowSelectedEventDetail","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/TableGroupData","path":"/api/@thatopen/ui/interfaces/TableGroupData","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/interfaces/TableGroupTemplate","path":"/api/@thatopen/ui/interfaces/TableGroupTemplate","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/type-aliases/ConditionFunctions","path":"/api/@thatopen/ui/type-aliases/ConditionFunctions","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/type-aliases/GridLayoutsDefinition","path":"/api/@thatopen/ui/type-aliases/GridLayoutsDefinition","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/type-aliases/Query","path":"/api/@thatopen/ui/type-aliases/Query","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/type-aliases/QueryCondition","path":"/api/@thatopen/ui/type-aliases/QueryCondition","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/type-aliases/QueryOperators","path":"/api/@thatopen/ui/type-aliases/QueryOperators","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/type-aliases/StatefullComponent","path":"/api/@thatopen/ui/type-aliases/StatefullComponent","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/type-aliases/StatelessComponent","path":"/api/@thatopen/ui/type-aliases/StatelessComponent","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/type-aliases/TableDataTransform","path":"/api/@thatopen/ui/type-aliases/TableDataTransform","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/type-aliases/TableRowData","path":"/api/@thatopen/ui/type-aliases/TableRowData","sidebar":"tutorialSidebar"},{"id":"api/@thatopen/ui/type-aliases/TableRowTemplate","path":"/api/@thatopen/ui/type-aliases/TableRowTemplate","sidebar":"tutorialSidebar"},{"id":"api/index","path":"/api/","sidebar":"tutorialSidebar"},{"id":"components/clean-components-guide","path":"/components/clean-components-guide","sidebar":"tutorialSidebar"},{"id":"components/creating-components","path":"/components/creating-components","sidebar":"tutorialSidebar"},{"id":"components/getting-started","path":"/components/getting-started","sidebar":"tutorialSidebar"},{"id":"components/tutorial-paths","path":"/components/tutorial-paths","sidebar":"tutorialSidebar"},{"id":"contributing","path":"/contributing","sidebar":"tutorialSidebar"},{"id":"intro","path":"/intro","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/BCFTopics","path":"/Tutorials/Components/Core/BCFTopics","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/BoundingBoxer","path":"/Tutorials/Components/Core/BoundingBoxer","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/Classifier","path":"/Tutorials/Components/Core/Classifier","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/Clipper","path":"/Tutorials/Components/Core/Clipper","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/Cullers","path":"/Tutorials/Components/Core/Cullers","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/Exploder","path":"/Tutorials/Components/Core/Exploder","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/FragmentsManager","path":"/Tutorials/Components/Core/FragmentsManager","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/Grids","path":"/Tutorials/Components/Core/Grids","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/Hider","path":"/Tutorials/Components/Core/Hider","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/IfcFinder","path":"/Tutorials/Components/Core/IfcFinder","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/IfcGeometryTiler","path":"/Tutorials/Components/Core/IfcGeometryTiler","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/IfcIsolator","path":"/Tutorials/Components/Core/IfcIsolator","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/IfcJsonExporter","path":"/Tutorials/Components/Core/IfcJsonExporter","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/IfcLoader","path":"/Tutorials/Components/Core/IfcLoader","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/IfcPropertiesManager","path":"/Tutorials/Components/Core/IfcPropertiesManager","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/IfcPropertiesTiler","path":"/Tutorials/Components/Core/IfcPropertiesTiler","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/IfcRelationsIndexer","path":"/Tutorials/Components/Core/IfcRelationsIndexer","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/MeasurementUtils","path":"/Tutorials/Components/Core/MeasurementUtils","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/MiniMap","path":"/Tutorials/Components/Core/MiniMap","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/OrthoPerspectiveCamera","path":"/Tutorials/Components/Core/OrthoPerspectiveCamera","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/Raycasters","path":"/Tutorials/Components/Core/Raycasters","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/ShadowedScene","path":"/Tutorials/Components/Core/ShadowedScene","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/Viewpoints","path":"/Tutorials/Components/Core/Viewpoints","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/Worlds","path":"/Tutorials/Components/Core/Worlds","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/AngleMeasurement","path":"/Tutorials/Components/Front/AngleMeasurement","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/AreaMeasurement","path":"/Tutorials/Components/Front/AreaMeasurement","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/Civil3DNavigator","path":"/Tutorials/Components/Front/Civil3DNavigator","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/CivilCrossSectionNavigator","path":"/Tutorials/Components/Front/CivilCrossSectionNavigator","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/CivilElevationNavigator","path":"/Tutorials/Components/Front/CivilElevationNavigator","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/CivilPlanNavigator","path":"/Tutorials/Components/Front/CivilPlanNavigator","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/ClipEdges","path":"/Tutorials/Components/Front/ClipEdges","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/EdgeMeasurement","path":"/Tutorials/Components/Front/EdgeMeasurement","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/FaceMeasurement","path":"/Tutorials/Components/Front/FaceMeasurement","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/Highlighter","path":"/Tutorials/Components/Front/Highlighter","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/IfcStreamer","path":"/Tutorials/Components/Front/IfcStreamer","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/LengthMeasurement","path":"/Tutorials/Components/Front/LengthMeasurement","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/Marker","path":"/Tutorials/Components/Front/Marker","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/Plans","path":"/Tutorials/Components/Front/Plans","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/PostproductionRenderer","path":"/Tutorials/Components/Front/PostproductionRenderer","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/Sections","path":"/Tutorials/Components/Front/Sections","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/ShadowDropper","path":"/Tutorials/Components/Front/ShadowDropper","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/VolumeMeasurement","path":"/Tutorials/Components/Front/VolumeMeasurement","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/index","path":"/Tutorials/Components/","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/Core/Component","path":"/Tutorials/UserInterface/Core/Component","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/Core/Table/DataTransform","path":"/Tutorials/UserInterface/Core/Table/DataTransform","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/Core/Table/ExportingData","path":"/Tutorials/UserInterface/Core/Table/ExportingData","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/Core/Table/LoadFunction","path":"/Tutorials/UserInterface/Core/Table/LoadFunction","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/Core/Table/Searching","path":"/Tutorials/UserInterface/Core/Table/Searching","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/Core/Table/Table","path":"/Tutorials/UserInterface/Core/Table/","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/index","path":"/Tutorials/UserInterface/","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/OBC/ClassificationsTree","path":"/Tutorials/UserInterface/OBC/ClassificationsTree","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/OBC/ElementProperties","path":"/Tutorials/UserInterface/OBC/ElementProperties","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/OBC/EntityAttributes","path":"/Tutorials/UserInterface/OBC/EntityAttributes","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/OBC/ModelsList","path":"/Tutorials/UserInterface/OBC/ModelsList","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/OBC/RelationsTree","path":"/Tutorials/UserInterface/OBC/RelationsTree","sidebar":"tutorialSidebar"},{"id":"Tutorials/UserInterface/OBC/TopicsUI","path":"/Tutorials/UserInterface/OBC/TopicsUI","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/intro","label":"intro"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var s=n(2654);const l=JSON.parse('{"docusaurusVersion":"3.4.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.4.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.4.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.4.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.4.0"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"3.4.0"},"docusaurus-plugin-typedoc":{"type":"package","name":"docusaurus-plugin-typedoc","version":"1.0.1"}}}');var c=n(4848);const p={siteConfig:o.default,siteMetadata:l,globalData:r,i18n:i,codeTranslations:s},u=a.createContext(p);function d(e){let{children:t}=e;return(0,c.jsx)(u.Provider,{value:p,children:t})}},7489:(e,t,n)=>{"use strict";n.d(t,{A:()=>h});var a=n(6540),o=n(8193),r=n(5260),i=n(440),s=n(9201),l=n(3102),c=n(4848);function p(e){let{error:t,tryAgain:n}=e;return(0,c.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,c.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,c.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,c.jsx)(u,{error:t})]})}function u(e){let{error:t}=e;const n=(0,i.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,c.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function d(e){let{children:t}=e;return(0,c.jsx)(l.W,{value:{plugin:{name:"docusaurus-core-error-boundary",id:"default"}},children:t})}function f(e){let{error:t,tryAgain:n}=e;return(0,c.jsx)(d,{children:(0,c.jsxs)(h,{fallback:()=>(0,c.jsx)(p,{error:t,tryAgain:n}),children:[(0,c.jsx)(r.A,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(s.A,{children:(0,c.jsx)(p,{error:t,tryAgain:n})})]})})}const m=e=>(0,c.jsx)(f,{...e});class h extends a.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.A.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??m)(e)}return e??null}}},8193:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const a="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:a,canUseEventListeners:a&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:a&&"IntersectionObserver"in window,canUseViewport:a&&"screen"in window}},5260:(e,t,n)=>{"use strict";n.d(t,{A:()=>r});n(6540);var a=n(545),o=n(4848);function r(e){return(0,o.jsx)(a.mg,{...e})}},8774:(e,t,n)=>{"use strict";n.d(t,{A:()=>f});var a=n(6540),o=n(4625),r=n(440),i=n(4586),s=n(6654),l=n(8193),c=n(3427),p=n(6025),u=n(4848);function d(e,t){let{isNavLink:n,to:d,href:f,activeClassName:m,isActive:h,"data-noBrokenLinkCheck":b,autoAddBaseUrl:g=!0,...y}=e;const{siteConfig:v}=(0,i.A)(),{trailingSlash:S,baseUrl:w}=v,x=v.future.experimental_router,{withBaseUrl:C}=(0,p.hH)(),k=(0,c.A)(),T=(0,a.useRef)(null);(0,a.useImperativeHandle)(t,(()=>T.current));const _=d||f;const E=(0,s.A)(_),A=_?.replace("pathname://","");let I=void 0!==A?(P=A,g&&(e=>e.startsWith("/"))(P)?C(P):P):void 0;var P;"hash"===x&&I?.startsWith("./")&&(I=I?.slice(1)),I&&E&&(I=(0,r.applyTrailingSlash)(I,{trailingSlash:S,baseUrl:w}));const M=(0,a.useRef)(!1),R=n?o.k2:o.N_,L=l.A.canUseIntersectionObserver,N=(0,a.useRef)(),j=()=>{M.current||null==I||(window.docusaurus.preload(I),M.current=!0)};(0,a.useEffect)((()=>(!L&&E&&null!=I&&window.docusaurus.prefetch(I),()=>{L&&N.current&&N.current.disconnect()})),[N,I,L,E]);const D=I?.startsWith("#")??!1,F=!y.target||"_self"===y.target,O=!I||!E||!F;return b||!D&&O||k.collectLink(I),y.id&&k.collectAnchor(y.id),O?(0,u.jsx)("a",{ref:T,href:I,..._&&!E&&{target:"_blank",rel:"noopener noreferrer"},...y}):(0,u.jsx)(R,{...y,onMouseEnter:j,onTouchStart:j,innerRef:e=>{T.current=e,L&&e&&E&&(N.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(N.current.unobserve(e),N.current.disconnect(),null!=I&&window.docusaurus.prefetch(I))}))})),N.current.observe(e))},to:I,...n&&{isActive:h,activeClassName:m}})}const f=a.forwardRef(d)},1312:(e,t,n)=>{"use strict";n.d(t,{A:()=>c,T:()=>l});var a=n(6540),o=n(4848);function r(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,a.isValidElement)(e)))?n.map(((e,t)=>(0,a.isValidElement)(e)?a.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var i=n(2654);function s(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[t??n]??n??t}function l(e,t){let{message:n,id:a}=e;return r(s({message:n,id:a}),t)}function c(e){let{children:t,id:n,values:a}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const i=s({message:t,id:n});return(0,o.jsx)(o.Fragment,{children:r(i,a)})}},7065:(e,t,n)=>{"use strict";n.d(t,{W:()=>a});const a="default"},6654:(e,t,n)=>{"use strict";function a(e){return/^(?:\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!a(e)}n.d(t,{A:()=>o,z:()=>a})},6025:(e,t,n)=>{"use strict";n.d(t,{Ay:()=>s,hH:()=>i});var a=n(6540),o=n(4586),r=n(6654);function i(){const{siteConfig:e}=(0,o.A)(),{baseUrl:t,url:n}=e,i=e.future.experimental_router,s=(0,a.useCallback)(((e,a)=>function(e){let{siteUrl:t,baseUrl:n,url:a,options:{forcePrependBaseUrl:o=!1,absolute:i=!1}={},router:s}=e;if(!a||a.startsWith("#")||(0,r.z)(a))return a;if("hash"===s)return a.startsWith("/")?`.${a}`:`./${a}`;if(o)return n+a.replace(/^\//,"");if(a===n.replace(/\/$/,""))return n;const l=a.startsWith(n)?a:n+a.replace(/^\//,"");return i?t+l:l}({siteUrl:n,baseUrl:t,url:e,options:a,router:i})),[n,t,i]);return{withBaseUrl:s}}function s(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},3427:(e,t,n)=>{"use strict";n.d(t,{A:()=>i});var a=n(6540);n(4848);const o=a.createContext({collectAnchor:()=>{},collectLink:()=>{}}),r=()=>(0,a.useContext)(o);function i(){return r()}},4586:(e,t,n)=>{"use strict";n.d(t,{A:()=>r});var a=n(6540),o=n(6988);function r(){return(0,a.useContext)(o.o)}},2303:(e,t,n)=>{"use strict";n.d(t,{A:()=>r});var a=n(6540),o=n(6125);function r(){return(0,a.useContext)(o.o)}},205:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});var a=n(6540);const o=n(8193).A.canUseDOM?a.useLayoutEffect:a.useEffect},6921:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const a=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function o(e){const t={};return function e(n,o){Object.entries(n).forEach((n=>{let[r,i]=n;const s=o?`${o}.${r}`:r;a(i)?e(i,s):t[s]=i}))}(e),t}},3102:(e,t,n)=>{"use strict";n.d(t,{W:()=>i,o:()=>r});var a=n(6540),o=n(4848);const r=a.createContext(null);function i(e){let{children:t,value:n}=e;const i=a.useContext(r),s=(0,a.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const a={...t.data,...n?.data};return{plugin:t.plugin,data:a}}({parent:i,value:n})),[i,n]);return(0,o.jsx)(r.Provider,{value:s,children:t})}},4070:(e,t,n)=>{"use strict";n.d(t,{zK:()=>g,vT:()=>f,gk:()=>m,Gy:()=>u,HW:()=>y,ht:()=>d,r7:()=>b,jh:()=>h});var a=n(6347),o=n(4586),r=n(7065);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,o.A)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const s=e=>e.versions.find((e=>e.isLast));function l(e,t){const n=s(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,a.B6)(t,{path:e.path,exact:!1,strict:!1})))}function c(e,t){const n=l(e,t),o=n?.docs.find((e=>!!(0,a.B6)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:o,alternateDocVersions:o?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((a=>{a.id===t&&(n[e.name]=a)}))})),n}(o.id):{}}}const p={},u=()=>i("docusaurus-plugin-content-docs")??p,d=e=>{try{return function(e,t,n){void 0===t&&(t=r.W),void 0===n&&(n={});const a=i(e),o=a?.[t];if(!o&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return o}("docusaurus-plugin-content-docs",e,{failfast:!0})}catch(t){throw new Error("You are using a feature of the Docusaurus docs plugin, but this plugin does not seem to be enabled"+("Default"===e?"":` (pluginId=${e}`),{cause:t})}};function f(e){void 0===e&&(e={});const t=u(),{pathname:n}=(0,a.zy)();return function(e,t,n){void 0===n&&(n={});const o=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,a.B6)(t,{path:n.path,exact:!1,strict:!1})})),r=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!r&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return r}(t,n,e)}function m(e){void 0===e&&(e={});const t=f(e),{pathname:n}=(0,a.zy)();if(!t)return;return{activePlugin:t,activeVersion:l(t.pluginData,n)}}function h(e){return d(e).versions}function b(e){const t=d(e);return s(t)}function g(e){const t=d(e),{pathname:n}=(0,a.zy)();return c(t,n)}function y(e){const t=d(e),{pathname:n}=(0,a.zy)();return function(e,t){const n=s(e);return{latestDocSuggestion:c(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},6294:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>r});var a=n(5947),o=n.n(a);o().configure({showSpinner:!1});const r={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{o().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){o().done()}}},6134:(e,t,n)=>{"use strict";n.r(t);var a=n(1765),o=n(4784);!function(e){const{themeConfig:{prism:t}}=o.default,{additionalLanguages:a}=t;globalThis.Prism=e,a.forEach((e=>{"php"===e&&n(9700),n(8692)(`./prism-${e}`)})),delete globalThis.Prism}(a.My)},1107:(e,t,n)=>{"use strict";n.d(t,{A:()=>p});n(6540);var a=n(4164),o=n(1312),r=n(6342),i=n(8774),s=n(3427);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=n(4848);function p(e){let{as:t,id:n,...p}=e;const u=(0,s.A)(),{navbar:{hideOnScroll:d}}=(0,r.p)();if("h1"===t||!n)return(0,c.jsx)(t,{...p,id:void 0});u.collectAnchor(n);const f=(0,o.T)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof p.children?p.children:n});return(0,c.jsxs)(t,{...p,className:(0,a.A)("anchor",d?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,p.className),id:n,children:[p.children,(0,c.jsx)(i.A,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},3186:(e,t,n)=>{"use strict";n.d(t,{A:()=>r});n(6540);const a={iconExternalLink:"iconExternalLink_nPIU"};var o=n(4848);function r(e){let{width:t=13.5,height:n=13.5}=e;return(0,o.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:a.iconExternalLink,children:(0,o.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},9201:(e,t,n)=>{"use strict";n.d(t,{A:()=>Lt});var a=n(6540),o=n(4164),r=n(7489),i=n(9024),s=n(6347),l=n(1312),c=n(5062),p=n(4848);const u="__docusaurus_skipToContent_fallback";function d(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,a.useRef)(null),{action:t}=(0,s.W6)(),n=(0,a.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(u);t&&d(t)}),[]);return(0,c.$)((n=>{let{location:a}=n;e.current&&!a.hash&&"PUSH"===t&&d(e.current)})),{containerRef:e,onClick:n}}const m=(0,l.T)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function h(e){const t=e.children??m,{containerRef:n,onClick:a}=f();return(0,p.jsx)("div",{ref:n,role:"region","aria-label":m,children:(0,p.jsx)("a",{...e,href:`#${u}`,onClick:a,children:t})})}var b=n(7559),g=n(4090);const y={skipToContent:"skipToContent_fXgn"};function v(){return(0,p.jsx)(h,{className:y.skipToContent})}var S=n(6342),w=n(5041);function x(e){let{width:t=21,height:n=21,color:a="currentColor",strokeWidth:o=1.2,className:r,...i}=e;return(0,p.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...i,children:(0,p.jsx)("g",{stroke:a,strokeWidth:o,children:(0,p.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const C={closeButton:"closeButton_CVFx"};function k(e){return(0,p.jsx)("button",{type:"button","aria-label":(0,l.T)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,o.A)("clean-btn close",C.closeButton,e.className),children:(0,p.jsx)(x,{width:14,height:14,strokeWidth:3.1})})}const T={content:"content_knG7"};function _(e){const{announcementBar:t}=(0,S.p)(),{content:n}=t;return(0,p.jsx)("div",{...e,className:(0,o.A)(T.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const E={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function A(){const{announcementBar:e}=(0,S.p)(),{isActive:t,close:n}=(0,w.M)();if(!t)return null;const{backgroundColor:a,textColor:o,isCloseable:r}=e;return(0,p.jsxs)("div",{className:E.announcementBar,style:{backgroundColor:a,color:o},role:"banner",children:[r&&(0,p.jsx)("div",{className:E.announcementBarPlaceholder}),(0,p.jsx)(_,{className:E.announcementBarContent}),r&&(0,p.jsx)(k,{onClick:n,className:E.announcementBarClose})]})}var I=n(2069),P=n(3104);var M=n(9532),R=n(5600);const L=a.createContext(null);function N(e){let{children:t}=e;const n=function(){const e=(0,I.M)(),t=(0,R.YL)(),[n,o]=(0,a.useState)(!1),r=null!==t.component,i=(0,M.ZC)(r);return(0,a.useEffect)((()=>{r&&!i&&o(!0)}),[r,i]),(0,a.useEffect)((()=>{r?e.shown||o(!0):o(!1)}),[e.shown,r]),(0,a.useMemo)((()=>[n,o]),[n])}();return(0,p.jsx)(L.Provider,{value:n,children:t})}function j(e){if(e.component){const t=e.component;return(0,p.jsx)(t,{...e.props})}}function D(){const e=(0,a.useContext)(L);if(!e)throw new M.dV("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,o=(0,a.useCallback)((()=>n(!1)),[n]),r=(0,R.YL)();return(0,a.useMemo)((()=>({shown:t,hide:o,content:j(r)})),[o,r,t])}function F(e){let{header:t,primaryMenu:n,secondaryMenu:a}=e;const{shown:r}=D();return(0,p.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,p.jsxs)("div",{className:(0,o.A)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":r}),children:[(0,p.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,p.jsx)("div",{className:"navbar-sidebar__item menu",children:a})]})]})}var O=n(5293),B=n(2303);function z(e){return(0,p.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,p.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function U(e){return(0,p.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,p.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const $={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function G(e){let{className:t,buttonClassName:n,value:a,onChange:r}=e;const i=(0,B.A)(),s=(0,l.T)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===a?(0,l.T)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.T)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,p.jsx)("div",{className:(0,o.A)($.toggle,t),children:(0,p.jsxs)("button",{className:(0,o.A)("clean-btn",$.toggleButton,!i&&$.toggleButtonDisabled,n),type:"button",onClick:()=>r("dark"===a?"light":"dark"),disabled:!i,title:s,"aria-label":s,"aria-live":"polite",children:[(0,p.jsx)(z,{className:(0,o.A)($.toggleIcon,$.lightToggleIcon)}),(0,p.jsx)(U,{className:(0,o.A)($.toggleIcon,$.darkToggleIcon)})]})})}const V=a.memo(G),H={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function q(e){let{className:t}=e;const n=(0,S.p)().navbar.style,a=(0,S.p)().colorMode.disableSwitch,{colorMode:o,setColorMode:r}=(0,O.G)();return a?null:(0,p.jsx)(V,{className:t,buttonClassName:"dark"===n?H.darkNavbarColorModeToggle:void 0,value:o,onChange:r})}var W=n(3465);function Q(){return(0,p.jsx)(W.A,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,I.M)();return(0,p.jsx)("button",{type:"button","aria-label":(0,l.T)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,p.jsx)(x,{color:"var(--ifm-color-emphasis-600)"})})}function Y(){return(0,p.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,p.jsx)(Q,{}),(0,p.jsx)(q,{className:"margin-right--md"}),(0,p.jsx)(K,{})]})}var Z=n(8774),J=n(6025),X=n(6654),ee=n(1252),te=n(3186);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:a,href:o,label:r,html:i,isDropdownLink:s,prependBaseUrlToHref:l,...c}=e;const u=(0,J.Ay)(a),d=(0,J.Ay)(t),f=(0,J.Ay)(o,{forcePrependBaseUrl:!0}),m=r&&o&&!(0,X.A)(o),h=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,p.jsxs)(p.Fragment,{children:[r,m&&(0,p.jsx)(te.A,{...s&&{width:12,height:12}})]})};return o?(0,p.jsx)(Z.A,{href:l?f:o,...c,...h}):(0,p.jsx)(Z.A,{to:u,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?(0,ee.G)(n,t.pathname):t.pathname.startsWith(d)},...c,...h})}function ae(e){let{className:t,isDropdownItem:n=!1,...a}=e;const r=(0,p.jsx)(ne,{className:(0,o.A)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...a});return n?(0,p.jsx)("li",{children:r}):r}function oe(e){let{className:t,isDropdownItem:n,...a}=e;return(0,p.jsx)("li",{className:"menu__list-item",children:(0,p.jsx)(ne,{className:(0,o.A)("menu__link",t),...a})})}function re(e){let{mobile:t=!1,position:n,...a}=e;const o=t?oe:ae;return(0,p.jsx)(o,{...a,activeClassName:a.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ie=n(1422),se=n(9169),le=n(4586);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_S0Fm"};function pe(e,t){return e.some((e=>function(e,t){return!!(0,se.ys)(e.to,t)||!!(0,ee.G)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function ue(e){let{items:t,position:n,className:r,onClick:i,...s}=e;const l=(0,a.useRef)(null),[c,u]=(0,a.useState)(!1);return(0,a.useEffect)((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&u(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[l]),(0,p.jsxs)("div",{ref:l,className:(0,o.A)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,p.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,o.A)("navbar__link",r),...s,onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),u(!c))},children:s.children??s.label}),(0,p.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,a.createElement)(He,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function de(e){let{items:t,className:n,position:r,onClick:i,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,le.A)(),{pathname:t}=(0,s.zy)();return t.replace(e,"/")}(),u=pe(t,c),{collapsed:d,toggleCollapsed:f,setCollapsed:m}=(0,ie.u)({initialState:()=>!u});return(0,a.useEffect)((()=>{u&&m(!u)}),[c,u,m]),(0,p.jsxs)("li",{className:(0,o.A)("menu__list-item",{"menu__list-item--collapsed":d}),children:[(0,p.jsx)(ne,{role:"button",className:(0,o.A)(ce.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",n),...l,onClick:e=>{e.preventDefault(),f()},children:l.children??l.label}),(0,p.jsx)(ie.N,{lazy:!0,as:"ul",className:"menu__list",collapsed:d,children:t.map(((e,t)=>(0,a.createElement)(He,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const a=t?de:ue;return(0,p.jsx)(a,{...n})}var me=n(2131);function he(e){let{width:t=20,height:n=20,...a}=e;return(0,p.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...a,children:(0,p.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const be="iconLanguage_nlXk";var ge=n(961);function ye(){return a.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},a.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var ve=n(9188),Se=["translations"];function we(){return we=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,a=new Array(t);n=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var Te="Ctrl";var _e=a.forwardRef((function(e,t){var n=e.translations,o=void 0===n?{}:n,r=ke(e,Se),i=o.buttonText,s=void 0===i?"Search":i,l=o.buttonAriaLabel,c=void 0===l?"Search":l,p=xe((0,a.useState)(null),2),u=p[0],d=p[1];return(0,a.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?d("\u2318"):d(Te))}),[]),a.createElement("button",we({type:"button",className:"DocSearch DocSearch-Button","aria-label":c},r,{ref:t}),a.createElement("span",{className:"DocSearch-Button-Container"},a.createElement(ve.W,null),a.createElement("span",{className:"DocSearch-Button-Placeholder"},s)),a.createElement("span",{className:"DocSearch-Button-Keys"},null!==u&&a.createElement(a.Fragment,null,a.createElement(Ee,{reactsToKey:u===Te?Te:"Meta"},u===Te?a.createElement(ye,null):u),a.createElement(Ee,{reactsToKey:"k"},"K"))))}));function Ee(e){var t=e.reactsToKey,n=e.children,o=xe((0,a.useState)(!1),2),r=o[0],i=o[1];return(0,a.useEffect)((function(){if(t)return window.addEventListener("keydown",e),window.addEventListener("keyup",n),function(){window.removeEventListener("keydown",e),window.removeEventListener("keyup",n)};function e(e){e.key===t&&i(!0)}function n(e){e.key!==t&&"Meta"!==e.key||i(!1)}}),[t]),a.createElement("kbd",{className:r?"DocSearch-Button-Key DocSearch-Button-Key--pressed":"DocSearch-Button-Key"},n)}var Ae=n(5260),Ie=n(4255),Pe=n(1062),Me=n(2967);const Re={button:{buttonText:(0,l.T)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,l.T)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,l.T)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,l.T)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,l.T)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,l.T)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,l.T)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,l.T)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,l.T)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,l.T)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,l.T)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,l.T)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,l.T)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,l.T)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,l.T)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,l.T)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,l.T)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,l.T)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,l.T)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,l.T)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,l.T)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,l.T)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,l.T)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,l.T)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,l.T)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,l.T)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,l.T)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Le=null;function Ne(e){let{hit:t,children:n}=e;return(0,p.jsx)(Z.A,{to:t.url,children:n})}function je(e){let{state:t,onClose:n}=e;const a=(0,Ie.w)();return(0,p.jsx)(Z.A,{to:a(t.query),onClick:n,children:(0,p.jsx)(l.A,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits},children:"See all {count} results"})})}function De(e){let{contextualSearch:t,externalUrlRegex:o,...r}=e;const{siteMetadata:i}=(0,le.A)(),l=(0,Pe.C)(),c=function(){const{locale:e,tags:t}=(0,Me.af)();return[`language:${e}`,t.map((e=>`docusaurus_tag:${e}`))]}(),u=r.searchParameters?.facetFilters??[],d=t?function(e,t){const n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(c,u):u,f={...r.searchParameters,facetFilters:d},m=(0,s.W6)(),h=(0,a.useRef)(null),b=(0,a.useRef)(null),[g,y]=(0,a.useState)(!1),[v,S]=(0,a.useState)(void 0),w=(0,a.useCallback)((()=>Le?Promise.resolve():Promise.all([n.e(9462).then(n.bind(n,9462)),Promise.all([n.e(1869),n.e(8913)]).then(n.bind(n,8913)),Promise.all([n.e(1869),n.e(416)]).then(n.bind(n,416))]).then((e=>{let[{DocSearchModal:t}]=e;Le=t}))),[]),x=(0,a.useCallback)((()=>{if(!h.current){const e=document.createElement("div");h.current=e,document.body.insertBefore(e,document.body.firstChild)}}),[]),C=(0,a.useCallback)((()=>{x(),w().then((()=>y(!0)))}),[w,x]),k=(0,a.useCallback)((()=>{y(!1),b.current?.focus()}),[]),T=(0,a.useCallback)((e=>{e.preventDefault(),S(e.key),C()}),[C]),_=(0,a.useRef)({navigate(e){let{itemUrl:t}=e;(0,ee.G)(o,t)?window.location.href=t:m.push(t)}}).current,E=(0,a.useRef)((e=>r.transformItems?r.transformItems(e):e.map((e=>({...e,url:l(e.url)}))))).current,A=(0,a.useMemo)((()=>e=>(0,p.jsx)(je,{...e,onClose:k})),[k]),I=(0,a.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",i.docusaurusVersion),e)),[i.docusaurusVersion]);return function(e){var t=e.isOpen,n=e.onOpen,o=e.onClose,r=e.onInput,i=e.searchButtonRef;a.useEffect((function(){function e(e){var a;(27===e.keyCode&&t||"k"===(null===(a=e.key)||void 0===a?void 0:a.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?o():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),i&&i.current===document.activeElement&&r&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&r(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,o,r,i])}({isOpen:g,onOpen:C,onClose:k,onInput:T,searchButtonRef:b}),(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(Ae.A,{children:(0,p.jsx)("link",{rel:"preconnect",href:`https://${r.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})}),(0,p.jsx)(_e,{onTouchStart:w,onFocus:w,onMouseOver:w,onClick:C,ref:b,translations:Re.button}),g&&Le&&h.current&&(0,ge.createPortal)((0,p.jsx)(Le,{onClose:k,initialScrollY:window.scrollY,initialQuery:v,navigator:_,transformItems:E,hitComponent:Ne,transformSearchClient:I,...r.searchPagePath&&{resultsFooterComponent:A},...r,searchParameters:f,placeholder:Re.placeholder,translations:Re.modal}),h.current)]})}function Fe(){const{siteConfig:e}=(0,le.A)();return(0,p.jsx)(De,{...e.themeConfig.algolia})}const Oe={navbarSearchContainer:"navbarSearchContainer_Bca1"};function Be(e){let{children:t,className:n}=e;return(0,p.jsx)("div",{className:(0,o.A)(n,Oe.navbarSearchContainer),children:t})}var ze=n(4070),Ue=n(1754);var $e=n(5597);const Ge=e=>e.docs.find((t=>t.id===e.mainDocId));const Ve={default:re,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:a,queryString:o="",...r}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:u}}=(0,le.A)(),d=(0,me.o)(),{search:f,hash:m}=(0,s.zy)(),h=[...n,...c.map((e=>{const n=`${`pathname://${d.createUrl({locale:e,fullyQualified:!1})}`}${f}${m}${o}`;return{label:u[e].label,lang:u[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...a],b=t?(0,l.T)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):u[i].label;return(0,p.jsx)(fe,{...r,mobile:t,label:(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(he,{className:be}),b]}),items:h})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,p.jsx)(Be,{className:n,children:(0,p.jsx)(Fe,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:a=!1,isDropdownItem:r=!1}=e;const i=r?"li":"div";return(0,p.jsx)(i,{className:(0,o.A)({navbar__item:!a&&!r,"menu__list-item":a},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:r}=(0,ze.zK)(a),i=(0,Ue.QB)(t,a),s=r?.path===i?.path;return null===i||i.unlisted&&!s?null:(0,p.jsx)(re,{exact:!0,...o,isActive:()=>s||!!r?.sidebar&&r.sidebar===i.sidebar,label:n??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:r}=(0,ze.zK)(a),i=(0,Ue.fW)(t,a).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,p.jsx)(re,{exact:!0,...o,isActive:()=>r?.sidebar===t,label:n??i.label,to:i.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:a,...o}=e;const r=(0,Ue.Vd)(a)[0],i=t??r.label,s=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(r).path;return(0,p.jsx)(re,{...o,label:i,to:s})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:a,dropdownItemsBefore:o,dropdownItemsAfter:r,...i}=e;const{search:c,hash:u}=(0,s.zy)(),d=(0,ze.zK)(n),f=(0,ze.jh)(n),{savePreferredVersionName:m}=(0,$e.g1)(n),h=[...o,...f.map((e=>{const t=d.alternateDocVersions[e.name]??Ge(e);return{label:e.label,to:`${t.path}${c}${u}`,isActive:()=>e===d.activeVersion,onClick:()=>m(e.name)}})),...r],b=(0,Ue.Vd)(n)[0],g=t&&h.length>1?(0,l.T)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):b.label,y=t&&h.length>1?void 0:Ge(b).path;return h.length<=1?(0,p.jsx)(re,{...i,mobile:t,label:g,to:y,isActive:a?()=>!1:void 0}):(0,p.jsx)(fe,{...i,mobile:t,label:g,to:y,items:h,isActive:a?()=>!1:void 0})}};function He(e){let{type:t,...n}=e;const a=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=Ve[a];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,p.jsx)(o,{...n})}function qe(){const e=(0,I.M)(),t=(0,S.p)().navbar.items;return(0,p.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,a.createElement)(He,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function We(e){return(0,p.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,p.jsx)(l.A,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function Qe(){const e=0===(0,S.p)().navbar.items.length,t=D();return(0,p.jsxs)(p.Fragment,{children:[!e&&(0,p.jsx)(We,{onClick:()=>t.hide()}),t.content]})}function Ke(){const e=(0,I.M)();var t;return void 0===(t=e.shown)&&(t=!0),(0,a.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,p.jsx)(F,{header:(0,p.jsx)(Y,{}),primaryMenu:(0,p.jsx)(qe,{}),secondaryMenu:(0,p.jsx)(Qe,{})}):null}const Ye={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Ze(e){return(0,p.jsx)("div",{role:"presentation",...e,className:(0,o.A)("navbar-sidebar__backdrop",e.className)})}function Je(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:r}}=(0,S.p)(),i=(0,I.M)(),{navbarRef:s,isNavbarVisible:u}=function(e){const[t,n]=(0,a.useState)(e),o=(0,a.useRef)(!1),r=(0,a.useRef)(0),i=(0,a.useCallback)((e=>{null!==e&&(r.current=e.getBoundingClientRect().height)}),[]);return(0,P.Mq)(((t,a)=>{let{scrollY:i}=t;if(!e)return;if(i=s?n(!1):i+c{if(!e)return;const a=t.location.hash;if(a?document.getElementById(a.substring(1)):void 0)return o.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return(0,p.jsxs)("nav",{ref:s,"aria-label":(0,l.T)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,o.A)("navbar","navbar--fixed-top",n&&[Ye.navbarHideable,!u&&Ye.navbarHidden],{"navbar--dark":"dark"===r,"navbar--primary":"primary"===r,"navbar-sidebar--show":i.shown}),children:[t,(0,p.jsx)(Ze,{onClick:i.toggle}),(0,p.jsx)(Ke,{})]})}var Xe=n(440);const et={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function tt(e){return(0,p.jsx)("button",{type:"button",...e,children:(0,p.jsx)(l.A,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function nt(e){let{error:t}=e;const n=(0,Xe.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,p.jsx)("p",{className:et.errorBoundaryError,children:n})}class at extends a.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const ot="right";function rt(e){let{width:t=30,height:n=30,className:a,...o}=e;return(0,p.jsx)("svg",{className:a,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,p.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function it(){const{toggle:e,shown:t}=(0,I.M)();return(0,p.jsx)("button",{onClick:e,"aria-label":(0,l.T)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,p.jsx)(rt,{})})}const st={colorModeToggle:"colorModeToggle_DEke"};function lt(e){let{items:t}=e;return(0,p.jsx)(p.Fragment,{children:t.map(((e,t)=>(0,p.jsx)(at,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,p.jsx)(He,{...e})},t)))})}function ct(e){let{left:t,right:n}=e;return(0,p.jsxs)("div",{className:"navbar__inner",children:[(0,p.jsx)("div",{className:"navbar__items",children:t}),(0,p.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function pt(){const e=(0,I.M)(),t=(0,S.p)().navbar.items,[n,a]=function(e){function t(e){return"left"===(e.position??ot)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return(0,p.jsx)(ct,{left:(0,p.jsxs)(p.Fragment,{children:[!e.disabled&&(0,p.jsx)(it,{}),(0,p.jsx)(Q,{}),(0,p.jsx)(lt,{items:n})]}),right:(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(lt,{items:a}),(0,p.jsx)(q,{className:st.colorModeToggle}),!o&&(0,p.jsx)(Be,{children:(0,p.jsx)(Fe,{})})]})})}function ut(){return(0,p.jsx)(Je,{children:(0,p.jsx)(pt,{})})}function dt(e){let{item:t}=e;const{to:n,href:a,label:o,prependBaseUrlToHref:r,...i}=t,s=(0,J.Ay)(n),l=(0,J.Ay)(a,{forcePrependBaseUrl:!0});return(0,p.jsxs)(Z.A,{className:"footer__link-item",...a?{href:r?l:a}:{to:s},...i,children:[o,a&&!(0,X.A)(a)&&(0,p.jsx)(te.A,{})]})}function ft(e){let{item:t}=e;return t.html?(0,p.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,p.jsx)("li",{className:"footer__item",children:(0,p.jsx)(dt,{item:t})},t.href??t.to)}function mt(e){let{column:t}=e;return(0,p.jsxs)("div",{className:"col footer__col",children:[(0,p.jsx)("div",{className:"footer__title",children:t.title}),(0,p.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,p.jsx)(ft,{item:e},t)))})]})}function ht(e){let{columns:t}=e;return(0,p.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,p.jsx)(mt,{column:e},t)))})}function bt(){return(0,p.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function gt(e){let{item:t}=e;return t.html?(0,p.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,p.jsx)(dt,{item:t})}function yt(e){let{links:t}=e;return(0,p.jsx)("div",{className:"footer__links text--center",children:(0,p.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,p.jsxs)(a.Fragment,{children:[(0,p.jsx)(gt,{item:e}),t.length!==n+1&&(0,p.jsx)(bt,{})]},n)))})})}function vt(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,p.jsx)(ht,{columns:t}):(0,p.jsx)(yt,{links:t})}var St=n(1122);const wt={footerLogoLink:"footerLogoLink_BH7S"};function xt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,J.hH)(),a={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,p.jsx)(St.A,{className:(0,o.A)("footer__logo",t.className),alt:t.alt,sources:a,width:t.width,height:t.height,style:t.style})}function Ct(e){let{logo:t}=e;return t.href?(0,p.jsx)(Z.A,{href:t.href,className:wt.footerLogoLink,target:t.target,children:(0,p.jsx)(xt,{logo:t})}):(0,p.jsx)(xt,{logo:t})}function kt(e){let{copyright:t}=e;return(0,p.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function Tt(e){let{style:t,links:n,logo:a,copyright:r}=e;return(0,p.jsx)("footer",{className:(0,o.A)("footer",{"footer--dark":"dark"===t}),children:(0,p.jsxs)("div",{className:"container container-fluid",children:[n,(a||r)&&(0,p.jsxs)("div",{className:"footer__bottom text--center",children:[a&&(0,p.jsx)("div",{className:"margin-bottom--sm",children:a}),r]})]})})}function _t(){const{footer:e}=(0,S.p)();if(!e)return null;const{copyright:t,links:n,logo:a,style:o}=e;return(0,p.jsx)(Tt,{style:o,links:n&&n.length>0&&(0,p.jsx)(vt,{links:n}),logo:a&&(0,p.jsx)(Ct,{logo:a}),copyright:t&&(0,p.jsx)(kt,{copyright:t})})}const Et=a.memo(_t),At=(0,M.fM)([O.a,w.o,P.Tv,$e.VQ,i.Jx,function(e){let{children:t}=e;return(0,p.jsx)(R.y_,{children:(0,p.jsx)(I.e,{children:(0,p.jsx)(N,{children:t})})})}]);function It(e){let{children:t}=e;return(0,p.jsx)(At,{children:t})}var Pt=n(1107);function Mt(e){let{error:t,tryAgain:n}=e;return(0,p.jsx)("main",{className:"container margin-vert--xl",children:(0,p.jsx)("div",{className:"row",children:(0,p.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,p.jsx)(Pt.A,{as:"h1",className:"hero__title",children:(0,p.jsx)(l.A,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,p.jsx)("div",{className:"margin-vert--lg",children:(0,p.jsx)(tt,{onClick:n,className:"button button--primary shadow--lw"})}),(0,p.jsx)("hr",{}),(0,p.jsx)("div",{className:"margin-vert--md",children:(0,p.jsx)(nt,{error:t})})]})})})}const Rt={mainWrapper:"mainWrapper_z2l0"};function Lt(e){const{children:t,noFooter:n,wrapperClassName:a,title:s,description:l}=e;return(0,g.J)(),(0,p.jsxs)(It,{children:[(0,p.jsx)(i.be,{title:s,description:l}),(0,p.jsx)(v,{}),(0,p.jsx)(A,{}),(0,p.jsx)(ut,{}),(0,p.jsx)("div",{id:u,className:(0,o.A)(b.G.wrapper.main,Rt.mainWrapper,a),children:(0,p.jsx)(r.A,{fallback:e=>(0,p.jsx)(Mt,{...e}),children:t})}),!n&&(0,p.jsx)(Et,{})]})}},3465:(e,t,n)=>{"use strict";n.d(t,{A:()=>p});n(6540);var a=n(8774),o=n(6025),r=n(4586),i=n(6342),s=n(1122),l=n(4848);function c(e){let{logo:t,alt:n,imageClassName:a}=e;const r={light:(0,o.Ay)(t.src),dark:(0,o.Ay)(t.srcDark||t.src)},i=(0,l.jsx)(s.A,{className:t.className,sources:r,height:t.height,width:t.width,alt:n,style:t.style});return a?(0,l.jsx)("div",{className:a,children:i}):i}function p(e){const{siteConfig:{title:t}}=(0,r.A)(),{navbar:{title:n,logo:s}}=(0,i.p)(),{imageClassName:p,titleClassName:u,...d}=e,f=(0,o.Ay)(s?.href||"/"),m=n?"":t,h=s?.alt??m;return(0,l.jsxs)(a.A,{to:f,...d,...s?.target&&{target:s.target},children:[s&&(0,l.jsx)(c,{logo:s,alt:h,imageClassName:p}),null!=n&&(0,l.jsx)("b",{className:u,children:n})]})}},1463:(e,t,n)=>{"use strict";n.d(t,{A:()=>r});n(6540);var a=n(5260),o=n(4848);function r(e){let{locale:t,version:n,tag:r}=e;const i=t;return(0,o.jsxs)(a.A,{children:[t&&(0,o.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,o.jsx)("meta",{name:"docusaurus_version",content:n}),r&&(0,o.jsx)("meta",{name:"docusaurus_tag",content:r}),i&&(0,o.jsx)("meta",{name:"docsearch:language",content:i}),n&&(0,o.jsx)("meta",{name:"docsearch:version",content:n}),r&&(0,o.jsx)("meta",{name:"docsearch:docusaurus_tag",content:r})]})}},1122:(e,t,n)=>{"use strict";n.d(t,{A:()=>p});var a=n(6540),o=n(4164),r=n(2303),i=n(5293);const s={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var l=n(4848);function c(e){let{className:t,children:n}=e;const c=(0,r.A)(),{colorMode:p}=(0,i.G)();return(0,l.jsx)(l.Fragment,{children:(c?"dark"===p?["dark"]:["light"]:["light","dark"]).map((e=>{const r=n({theme:e,className:(0,o.A)(t,s.themedComponent,s[`themedComponent--${e}`])});return(0,l.jsx)(a.Fragment,{children:r},e)}))})}function p(e){const{sources:t,className:n,alt:a,...o}=e;return(0,l.jsx)(c,{className:n,children:e=>{let{theme:n,className:r}=e;return(0,l.jsx)("img",{src:t[n],alt:a,className:r,...o})}})}},1422:(e,t,n)=>{"use strict";n.d(t,{N:()=>g,u:()=>c});var a=n(6540),o=n(8193),r=n(205),i=n(3109),s=n(4848);const l="ease-in-out";function c(e){let{initialState:t}=e;const[n,o]=(0,a.useState)(t??!1),r=(0,a.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:n,setCollapsed:o,toggleCollapsed:r}}const p={display:"none",overflow:"hidden",height:"0px"},u={display:"block",overflow:"visible",height:"auto"};function d(e,t){const n=t?p:u;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:o}=e;const r=(0,a.useRef)(!1);(0,a.useEffect)((()=>{const e=t.current;function a(){const t=e.scrollHeight,n=o?.duration??function(e){if((0,i.O)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${o?.easing??l}`,height:`${t}px`}}function s(){const t=a();e.style.transition=t.transition,e.style.height=t.height}if(!r.current)return d(e,n),void(r.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(s(),requestAnimationFrame((()=>{e.style.height=p.height,e.style.overflow=p.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,o])}function m(e){if(!o.A.canUseDOM)return e?p:u}function h(e){let{as:t="div",collapsed:n,children:o,animation:r,onCollapseTransitionEnd:i,className:l,disableSSRStyle:c}=e;const p=(0,a.useRef)(null);return f({collapsibleRef:p,collapsed:n,animation:r}),(0,s.jsx)(t,{ref:p,style:c?void 0:m(n),onTransitionEnd:e=>{"height"===e.propertyName&&(d(p.current,n),i?.(n))},className:l,children:o})}function b(e){let{collapsed:t,...n}=e;const[o,i]=(0,a.useState)(!t),[l,c]=(0,a.useState)(t);return(0,r.A)((()=>{t||i(!0)}),[t]),(0,r.A)((()=>{o&&c(t)}),[o,t]),o?(0,s.jsx)(h,{...n,collapsed:l}):null}function g(e){let{lazy:t,...n}=e;const a=t?b:h;return(0,s.jsx)(a,{...n})}},5041:(e,t,n)=>{"use strict";n.d(t,{M:()=>h,o:()=>m});var a=n(6540),o=n(2303),r=n(679),i=n(9532),s=n(6342),l=n(4848);const c=(0,r.Wf)("docusaurus.announcement.dismiss"),p=(0,r.Wf)("docusaurus.announcement.id"),u=()=>"true"===c.get(),d=e=>c.set(String(e)),f=a.createContext(null);function m(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,s.p)(),t=(0,o.A)(),[n,r]=(0,a.useState)((()=>!!t&&u()));(0,a.useEffect)((()=>{r(u())}),[]);const i=(0,a.useCallback)((()=>{d(!0),r(!0)}),[]);return(0,a.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=p.get();"annoucement-bar"===n&&(n="announcement-bar");const a=t!==n;p.set(t),a&&d(!1),!a&&u()||r(!1)}),[e]),(0,a.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,l.jsx)(f.Provider,{value:n,children:t})}function h(){const e=(0,a.useContext)(f);if(!e)throw new i.dV("AnnouncementBarProvider");return e}},5293:(e,t,n)=>{"use strict";n.d(t,{G:()=>g,a:()=>b});var a=n(6540),o=n(8193),r=n(9532),i=n(679),s=n(6342),l=n(4848);const c=a.createContext(void 0),p="theme",u=(0,i.Wf)(p),d={light:"light",dark:"dark"},f=e=>e===d.dark?d.dark:d.light,m=e=>o.A.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),h=e=>{u.set(f(e))};function b(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,s.p)(),[o,r]=(0,a.useState)(m(e));(0,a.useEffect)((()=>{t&&u.del()}),[t]);const i=(0,a.useCallback)((function(t,a){void 0===a&&(a={});const{persist:o=!0}=a;t?(r(t),o&&h(t)):(r(n?window.matchMedia("(prefers-color-scheme: dark)").matches?d.dark:d.light:e),u.del())}),[n,e]);(0,a.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(o))}),[o]),(0,a.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==p)return;const t=u.get();null!==t&&i(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const l=(0,a.useRef)(!1);return(0,a.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>{window.matchMedia("print").matches||l.current?l.current=window.matchMedia("print").matches:i(null)};return e.addListener(a),()=>e.removeListener(a)}),[i,t,n]),(0,a.useMemo)((()=>({colorMode:o,setColorMode:i,get isDarkTheme(){return o===d.dark},setLightTheme(){i(d.light)},setDarkTheme(){i(d.dark)}})),[o,i])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function g(){const e=(0,a.useContext)(c);if(null==e)throw new r.dV("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},5597:(e,t,n)=>{"use strict";n.d(t,{VQ:()=>g,XK:()=>S,g1:()=>v});var a=n(6540),o=n(4070),r=n(7065),i=n(6342),s=n(1754),l=n(9532),c=n(679),p=n(4848);const u=e=>`docs-preferred-version-${e}`,d={save:(e,t,n)=>{(0,c.Wf)(u(e),{persistence:t}).set(n)},read:(e,t)=>(0,c.Wf)(u(e),{persistence:t}).get(),clear:(e,t)=>{(0,c.Wf)(u(e),{persistence:t}).del()}},f=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const m=a.createContext(null);function h(){const e=(0,o.Gy)(),t=(0,i.p)().docs.versionPersistence,n=(0,a.useMemo)((()=>Object.keys(e)),[e]),[r,s]=(0,a.useState)((()=>f(n)));(0,a.useEffect)((()=>{s(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:a}=e;function o(e){const t=d.read(e,n);return a[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(d.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,o(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[r,(0,a.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),s((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function b(e){let{children:t}=e;const n=h();return(0,p.jsx)(m.Provider,{value:n,children:t})}function g(e){let{children:t}=e;return s.C5?(0,p.jsx)(b,{children:t}):(0,p.jsx)(p.Fragment,{children:t})}function y(){const e=(0,a.useContext)(m);if(!e)throw new l.dV("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=r.W);const t=(0,o.ht)(e),[n,i]=y(),{preferredVersionName:s}=n[e];return{preferredVersion:t.versions.find((e=>e.name===s))??null,savePreferredVersionName:(0,a.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}function S(){const e=(0,o.Gy)(),[t]=y();function n(n){const a=e[n],{preferredVersionName:o}=t[n];return a.versions.find((e=>e.name===o))??null}const a=Object.keys(e);return Object.fromEntries(a.map((e=>[e,n(e)])))}},6588:(e,t,n)=>{"use strict";n.d(t,{V:()=>l,t:()=>c});var a=n(6540),o=n(9532),r=n(4848);const i=Symbol("EmptyContext"),s=a.createContext(i);function l(e){let{children:t,name:n,items:o}=e;const i=(0,a.useMemo)((()=>n&&o?{name:n,items:o}:null),[n,o]);return(0,r.jsx)(s.Provider,{value:i,children:t})}function c(){const e=(0,a.useContext)(s);if(e===i)throw new o.dV("DocsSidebarProvider");return e}},2252:(e,t,n)=>{"use strict";n.d(t,{n:()=>s,r:()=>l});var a=n(6540),o=n(9532),r=n(4848);const i=a.createContext(null);function s(e){let{children:t,version:n}=e;return(0,r.jsx)(i.Provider,{value:n,children:t})}function l(){const e=(0,a.useContext)(i);if(null===e)throw new o.dV("DocsVersionProvider");return e}},2069:(e,t,n)=>{"use strict";n.d(t,{M:()=>f,e:()=>d});var a=n(6540),o=n(5600),r=n(4581),i=n(7485),s=n(6342),l=n(9532),c=n(4848);const p=a.createContext(void 0);function u(){const e=function(){const e=(0,o.YL)(),{items:t}=(0,s.p)().navbar;return 0===t.length&&!e.component}(),t=(0,r.l)(),n=!e&&"mobile"===t,[l,c]=(0,a.useState)(!1);(0,i.$Z)((()=>{if(l)return c(!1),!1}));const p=(0,a.useCallback)((()=>{c((e=>!e))}),[]);return(0,a.useEffect)((()=>{"desktop"===t&&c(!1)}),[t]),(0,a.useMemo)((()=>({disabled:e,shouldRender:n,toggle:p,shown:l})),[e,n,p,l])}function d(e){let{children:t}=e;const n=u();return(0,c.jsx)(p.Provider,{value:n,children:t})}function f(){const e=a.useContext(p);if(void 0===e)throw new l.dV("NavbarMobileSidebarProvider");return e}},5600:(e,t,n)=>{"use strict";n.d(t,{GX:()=>c,YL:()=>l,y_:()=>s});var a=n(6540),o=n(9532),r=n(4848);const i=a.createContext(null);function s(e){let{children:t}=e;const n=(0,a.useState)({component:null,props:null});return(0,r.jsx)(i.Provider,{value:n,children:t})}function l(){const e=(0,a.useContext)(i);if(!e)throw new o.dV("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const r=(0,a.useContext)(i);if(!r)throw new o.dV("NavbarSecondaryMenuContentProvider");const[,s]=r,l=(0,o.Be)(n);return(0,a.useEffect)((()=>{s({component:t,props:l})}),[s,t,l]),(0,a.useEffect)((()=>()=>s({component:null,props:null})),[s]),null}},4090:(e,t,n)=>{"use strict";n.d(t,{w:()=>o,J:()=>r});var a=n(6540);const o="navigation-with-keyboard";function r(){(0,a.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(o),"mousedown"===e.type&&document.body.classList.remove(o)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(o),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},4255:(e,t,n)=>{"use strict";n.d(t,{b:()=>s,w:()=>l});var a=n(6540),o=n(4586),r=n(7485);const i="q";function s(){return(0,r.l)(i)}function l(){const{siteConfig:{baseUrl:e,themeConfig:t}}=(0,o.A)(),{algolia:{searchPagePath:n}}=t;return(0,a.useCallback)((t=>`${e}${n}?${i}=${encodeURIComponent(t)}`),[e,n])}},4581:(e,t,n)=>{"use strict";n.d(t,{l:()=>s});var a=n(6540),o=n(8193);const r={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function s(e){let{desktopBreakpoint:t=i}=void 0===e?{}:e;const[n,s]=(0,a.useState)((()=>"ssr"));return(0,a.useEffect)((()=>{function e(){s(function(e){if(!o.A.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?r.desktop:r.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},7559:(e,t,n)=>{"use strict";n.d(t,{G:()=>a});const a={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{blogFooterTagsRow:"theme-blog-footer-tags-row",blogFooterEditMetaRow:"theme-blog-footer-edit-meta-row"},pages:{pageFooterEditMetaRow:"theme-pages-footer-edit-meta-row"}}},3109:(e,t,n)=>{"use strict";function a(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{O:()=>a})},1754:(e,t,n)=>{"use strict";n.d(t,{Nr:()=>f,w8:()=>b,C5:()=>d,B5:()=>k,Vd:()=>w,QB:()=>C,fW:()=>x,OF:()=>S,Y:()=>y});var a=n(6540),o=n(6347),r=n(2831),i=n(4070),s=n(5597),l=n(2252),c=n(6588);function p(e){return Array.from(new Set(e))}var u=n(9169);const d=!!i.Gy;function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=f(t);if(e)return e}}(e):void 0:e.href}const m=(e,t)=>void 0!==e&&(0,u.ys)(e,t),h=(e,t)=>e.some((e=>b(e,t)));function b(e,t){return"link"===e.type?m(e.href,t):"category"===e.type&&(m(e.href,t)||h(e.items,t))}function g(e,t){switch(e.type){case"category":return b(e,t)||e.items.some((e=>g(e,t)));case"link":return!e.unlisted||b(e,t);default:return!0}}function y(e,t){return(0,a.useMemo)((()=>e.filter((e=>g(e,t)))),[e,t])}function v(e){let{sidebarItems:t,pathname:n,onlyCategories:a=!1}=e;const o=[];return function e(t){for(const r of t)if("category"===r.type&&((0,u.ys)(r.href,n)||e(r.items))||"link"===r.type&&(0,u.ys)(r.href,n)){return a&&"category"!==r.type||o.unshift(r),!0}return!1}(t),o}function S(){const e=(0,c.t)(),{pathname:t}=(0,o.zy)(),n=(0,i.vT)()?.pluginData.breadcrumbs;return!1!==n&&e?v({sidebarItems:e.items,pathname:t}):null}function w(e){const{activeVersion:t}=(0,i.zK)(e),{preferredVersion:n}=(0,s.g1)(e),o=(0,i.r7)(e);return(0,a.useMemo)((()=>p([t,n,o].filter(Boolean))),[t,n,o])}function x(e,t){const n=w(t);return(0,a.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),a=t.find((t=>t[0]===e));if(!a)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return a[1]}),[e,n])}function C(e,t){const n=w(t);return(0,a.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),a=t.find((t=>t.id===e));if(!a){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${p(t.map((e=>e.id))).join("\n- ")}`)}return a}),[e,n])}function k(e){let{route:t}=e;const n=(0,o.zy)(),a=(0,l.r)(),i=t.routes,s=i.find((e=>(0,o.B6)(n.pathname,e)));if(!s)return null;const c=s.sidebar,p=c?a.docsSidebars[c]:void 0;return{docElement:(0,r.v)(i),sidebarName:c,sidebarItems:p}}},481:(e,t,n)=>{"use strict";n.d(t,{s:()=>o});var a=n(4586);function o(e){const{siteConfig:t}=(0,a.A)(),{title:n,titleDelimiter:o}=t;return e?.trim().length?`${e.trim()} ${o} ${n}`:n}},7485:(e,t,n)=>{"use strict";n.d(t,{$Z:()=>i,l:()=>l});var a=n(6540),o=n(6347),r=n(9532);function i(e){!function(e){const t=(0,o.W6)(),n=(0,r._q)(e);(0,a.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function s(e){const t=(0,o.W6)();return(0,a.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}function l(e){const t=function(e){return s((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}(e)??"",n=function(e){const t=(0,o.W6)();return(0,a.useCallback)(((n,a)=>{const o=new URLSearchParams(t.location.search);n?o.set(e,n):o.delete(e),(a?.push?t.push:t.replace)({search:o.toString()})}),[e,t])}(e);return[t,n]}},9024:(e,t,n)=>{"use strict";n.d(t,{e3:()=>f,be:()=>u,Jx:()=>m});var a=n(6540),o=n(4164),r=n(5260),i=n(3102);function s(){const e=a.useContext(i.o);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var l=n(6025),c=n(481),p=n(4848);function u(e){let{title:t,description:n,keywords:a,image:o,children:i}=e;const s=(0,c.s)(t),{withBaseUrl:u}=(0,l.hH)(),d=o?u(o,{absolute:!0}):void 0;return(0,p.jsxs)(r.A,{children:[t&&(0,p.jsx)("title",{children:s}),t&&(0,p.jsx)("meta",{property:"og:title",content:s}),n&&(0,p.jsx)("meta",{name:"description",content:n}),n&&(0,p.jsx)("meta",{property:"og:description",content:n}),a&&(0,p.jsx)("meta",{name:"keywords",content:Array.isArray(a)?a.join(","):a}),d&&(0,p.jsx)("meta",{property:"og:image",content:d}),d&&(0,p.jsx)("meta",{name:"twitter:image",content:d}),i]})}const d=a.createContext(void 0);function f(e){let{className:t,children:n}=e;const i=a.useContext(d),s=(0,o.A)(i,t);return(0,p.jsxs)(d.Provider,{value:s,children:[(0,p.jsx)(r.A,{children:(0,p.jsx)("html",{className:s})}),n]})}function m(e){let{children:t}=e;const n=s(),a=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const r=`plugin-id-${n.plugin.id}`;return(0,p.jsx)(f,{className:(0,o.A)(a,r),children:t})}},9532:(e,t,n)=>{"use strict";n.d(t,{Be:()=>c,ZC:()=>s,_q:()=>i,dV:()=>l,fM:()=>p});var a=n(6540),o=n(205),r=n(4848);function i(e){const t=(0,a.useRef)(e);return(0,o.A)((()=>{t.current=e}),[e]),(0,a.useCallback)((function(){return t.current(...arguments)}),[])}function s(e){const t=(0,a.useRef)();return(0,o.A)((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,a.useMemo)((()=>e),t.flat())}function p(e){return t=>{let{children:n}=t;return(0,r.jsx)(r.Fragment,{children:e.reduceRight(((e,t)=>(0,r.jsx)(t,{children:e})),n)})}}},1252:(e,t,n)=>{"use strict";function a(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{G:()=>a})},9169:(e,t,n)=>{"use strict";n.d(t,{Dt:()=>s,ys:()=>i});var a=n(6540),o=n(8328),r=n(4586);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function s(){const{baseUrl:e}=(0,r.A)().siteConfig;return(0,a.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function a(e){return e.path===t&&!0===e.exact}function o(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(a)||e(t.filter(o).flatMap((e=>e.routes??[])))}(n)}({routes:o.A,baseUrl:e})),[e])}},3104:(e,t,n)=>{"use strict";n.d(t,{Mq:()=>d,Tv:()=>c,gk:()=>f});var a=n(6540),o=n(8193),r=n(2303),i=(n(205),n(9532)),s=n(4848);const l=a.createContext(void 0);function c(e){let{children:t}=e;const n=function(){const e=(0,a.useRef)(!0);return(0,a.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,s.jsx)(l.Provider,{value:n,children:t})}function p(){const e=(0,a.useContext)(l);if(null==e)throw new i.dV("ScrollControllerProvider");return e}const u=()=>o.A.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function d(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=p(),o=(0,a.useRef)(u()),r=(0,i._q)(e);(0,a.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=u();r(e,o.current),o.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[r,n,...t])}function f(){const e=(0,a.useRef)(null),t=(0,r.A)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function a(){const o=document.documentElement.scrollTop;(n&&o>e||!n&&ot&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},2967:(e,t,n)=>{"use strict";n.d(t,{Cy:()=>i,af:()=>l,tU:()=>s});var a=n(4070),o=n(4586),r=n(5597);const i="default";function s(e,t){return`docs-${e}-${t}`}function l(){const{i18n:e}=(0,o.A)(),t=(0,a.Gy)(),n=(0,a.gk)(),l=(0,r.XK)();const c=[i,...Object.keys(t).map((function(e){const a=n?.activePlugin.pluginId===e?n.activeVersion:void 0,o=l[e],r=t[e].versions.find((e=>e.isLast));return s(e,(a??o??r).name)}))];return{locale:e.currentLocale,tags:c}}},679:(e,t,n)=>{"use strict";n.d(t,{Wf:()=>c});n(6540);const a=JSON.parse('{"N":"localStorage","M":""}'),o=a.N;function r(e){let{key:t,oldValue:n,newValue:a,storage:o}=e;if(n===a)return;const r=document.createEvent("StorageEvent");r.initStorageEvent("storage",!1,!1,t,n,a,window.location.href,o),window.dispatchEvent(r)}function i(e){if(void 0===e&&(e=o),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,s||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),s=!0),null}var t}let s=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function c(e,t){const n=`${e}${a.M}`;if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(n);const o=i(t?.persistence);return null===o?l:{get:()=>{try{return o.getItem(n)}catch(e){return console.error(`Docusaurus storage error, can't get key=${n}`,e),null}},set:e=>{try{const t=o.getItem(n);o.setItem(n,e),r({key:n,oldValue:t,newValue:e,storage:o})}catch(t){console.error(`Docusaurus storage error, can't set ${n}=${e}`,t)}},del:()=>{try{const e=o.getItem(n);o.removeItem(n),r({key:n,oldValue:e,newValue:null,storage:o})}catch(e){console.error(`Docusaurus storage error, can't delete key=${n}`,e)}},listen:e=>{try{const t=t=>{t.storageArea===o&&t.key===n&&e(t)};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)}catch(t){return console.error(`Docusaurus storage error, can't listen for changes of key=${n}`,t),()=>{}}}}}},2131:(e,t,n)=>{"use strict";n.d(t,{o:()=>i});var a=n(4586),o=n(6347),r=n(440);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:s}}=(0,a.A)(),{pathname:l}=(0,o.zy)(),c=(0,r.applyTrailingSlash)(l,{trailingSlash:n,baseUrl:e}),p=s===i?e:e.replace(`/${s}/`,"/"),u=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:a}=e;return`${a?t:""}${function(e){return e===i?`${p}`:`${p}${e}/`}(n)}${u}`}}}},5062:(e,t,n)=>{"use strict";n.d(t,{$:()=>i});var a=n(6540),o=n(6347),r=n(9532);function i(e){const t=(0,o.zy)(),n=(0,r.ZC)(t),i=(0,r._q)(e);(0,a.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},6342:(e,t,n)=>{"use strict";n.d(t,{p:()=>o});var a=n(4586);function o(){return(0,a.A)().siteConfig.themeConfig}},8126:(e,t,n)=>{"use strict";n.d(t,{c:()=>o});var a=n(4586);function o(){const{siteConfig:{themeConfig:e}}=(0,a.A)();return e}},1062:(e,t,n)=>{"use strict";n.d(t,{C:()=>s});var a=n(6540),o=n(1252),r=n(6025),i=n(8126);function s(){const{withBaseUrl:e}=(0,r.hH)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,i.c)();return(0,a.useCallback)((a=>{const r=new URL(a);if((0,o.G)(t,r.href))return a;const i=`${r.pathname+r.hash}`;return e(function(e,t){return t?e.replaceAll(new RegExp(t.from,"g"),t.to):e}(i,n))}),[e,t,n])}},2983:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removeTrailingSlash=t.addLeadingSlash=t.addTrailingSlash=void 0;const a=n(2566);function o(e){return e.endsWith("/")?e:`${e}/`}function r(e){return(0,a.removeSuffix)(e,"/")}t.addTrailingSlash=o,t.default=function(e,t){const{trailingSlash:n,baseUrl:a}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[i]=e.split(/[#?]/),s="/"===i||i===a?i:(l=i,n?o(l):r(l));var l;return e.replace(i,s)},t.addLeadingSlash=function(e){return(0,a.addPrefix)(e,"/")},t.removeTrailingSlash=r},253:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},440:function(e,t,n){"use strict";var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.removePrefix=t.addSuffix=t.removeSuffix=t.addPrefix=t.removeTrailingSlash=t.addLeadingSlash=t.addTrailingSlash=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var o=n(2983);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return a(o).default}}),Object.defineProperty(t,"addTrailingSlash",{enumerable:!0,get:function(){return o.addTrailingSlash}}),Object.defineProperty(t,"addLeadingSlash",{enumerable:!0,get:function(){return o.addLeadingSlash}}),Object.defineProperty(t,"removeTrailingSlash",{enumerable:!0,get:function(){return o.removeTrailingSlash}});var r=n(2566);Object.defineProperty(t,"addPrefix",{enumerable:!0,get:function(){return r.addPrefix}}),Object.defineProperty(t,"removeSuffix",{enumerable:!0,get:function(){return r.removeSuffix}}),Object.defineProperty(t,"addSuffix",{enumerable:!0,get:function(){return r.addSuffix}}),Object.defineProperty(t,"removePrefix",{enumerable:!0,get:function(){return r.removePrefix}});var i=n(253);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return i.getErrorCausalChain}})},2566:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removePrefix=t.addSuffix=t.removeSuffix=t.addPrefix=void 0,t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){return""===t?e:e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},9231:(e,t,n)=>{"use strict";n.d(t,{zR:()=>C,TM:()=>I,yJ:()=>h,sC:()=>M,AO:()=>m,Fu:()=>b});var a=n(8168);function o(e){return"/"===e.charAt(0)}function r(e,t){for(var n=t,a=n+1,o=e.length;a=0;d--){var f=i[d];"."===f?r(i,d):".."===f?(r(i,d),u++):u&&(r(i,d),u--)}if(!c)for(;u--;u)i.unshift("..");!c||""===i[0]||i[0]&&o(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};function s(e){return e.valueOf?e.valueOf():Object.prototype.valueOf.call(e)}const l=function e(t,n){if(t===n)return!0;if(null==t||null==n)return!1;if(Array.isArray(t))return Array.isArray(n)&&t.length===n.length&&t.every((function(t,a){return e(t,n[a])}));if("object"==typeof t||"object"==typeof n){var a=s(t),o=s(n);return a!==t||o!==n?e(a,o):Object.keys(Object.assign({},t,n)).every((function(a){return e(t[a],n[a])}))}return!1};var c=n(1561);function p(e){return"/"===e.charAt(0)?e:"/"+e}function u(e){return"/"===e.charAt(0)?e.substr(1):e}function d(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function f(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function m(e){var t=e.pathname,n=e.search,a=e.hash,o=t||"/";return n&&"?"!==n&&(o+="?"===n.charAt(0)?n:"?"+n),a&&"#"!==a&&(o+="#"===a.charAt(0)?a:"#"+a),o}function h(e,t,n,o){var r;"string"==typeof e?(r=function(e){var t=e||"/",n="",a="",o=t.indexOf("#");-1!==o&&(a=t.substr(o),t=t.substr(0,o));var r=t.indexOf("?");return-1!==r&&(n=t.substr(r),t=t.substr(0,r)),{pathname:t,search:"?"===n?"":n,hash:"#"===a?"":a}}(e),r.state=t):(void 0===(r=(0,a.A)({},e)).pathname&&(r.pathname=""),r.search?"?"!==r.search.charAt(0)&&(r.search="?"+r.search):r.search="",r.hash?"#"!==r.hash.charAt(0)&&(r.hash="#"+r.hash):r.hash="",void 0!==t&&void 0===r.state&&(r.state=t));try{r.pathname=decodeURI(r.pathname)}catch(s){throw s instanceof URIError?new URIError('Pathname "'+r.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):s}return n&&(r.key=n),o?r.pathname?"/"!==r.pathname.charAt(0)&&(r.pathname=i(r.pathname,o.pathname)):r.pathname=o.pathname:r.pathname||(r.pathname="/"),r}function b(e,t){return e.pathname===t.pathname&&e.search===t.search&&e.hash===t.hash&&e.key===t.key&&l(e.state,t.state)}function g(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,a,o){if(null!=e){var r="function"==typeof e?e(t,n):e;"string"==typeof r?"function"==typeof a?a(r,o):o(!0):o(!1!==r)}else o(!0)},appendListener:function(e){var n=!0;function a(){n&&e.apply(void 0,arguments)}return t.push(a),function(){n=!1,t=t.filter((function(e){return e!==a}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),a=0;at?n.splice(t,n.length-t,o):n.push(o),u({action:a,location:o,index:t,entries:n})}}))},replace:function(e,t){var a="REPLACE",o=h(e,t,d(),S.location);p.confirmTransitionTo(o,a,n,(function(e){e&&(S.entries[S.index]=o,u({action:a,location:o}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var t=S.index+e;return t>=0&&t{"use strict";var a=n(4363),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},r={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},s={};function l(e){return a.isMemo(e)?i:s[e.$$typeof]||o}s[a.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},s[a.Memo]=i;var c=Object.defineProperty,p=Object.getOwnPropertyNames,u=Object.getOwnPropertySymbols,d=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,a){if("string"!=typeof n){if(m){var o=f(n);o&&o!==m&&e(t,o,a)}var i=p(n);u&&(i=i.concat(u(n)));for(var s=l(t),h=l(n),b=0;b{"use strict";e.exports=function(e,t,n,a,o,r,i,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,a,o,r,i,s],p=0;(l=new Error(t.replace(/%s/g,(function(){return c[p++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},4634:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},119:(e,t,n)=>{"use strict";n.r(t)},1043:(e,t,n)=>{"use strict";n.r(t)},5947:function(e,t,n){var a,o;a=function(){var e,t,n={version:"0.2.0"},a=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
    '};function o(e,t,n){return en?n:e}function r(e){return 100*(-1+e)}function i(e,t,n){var o;return(o="translate3d"===a.positionUsing?{transform:"translate3d("+r(e)+"%,0,0)"}:"translate"===a.positionUsing?{transform:"translate("+r(e)+"%,0)"}:{"margin-left":r(e)+"%"}).transition="all "+t+"ms "+n,o}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(a[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=o(e,a.minimum,1),n.status=1===e?null:e;var r=n.render(!t),c=r.querySelector(a.barSelector),p=a.speed,u=a.easing;return r.offsetWidth,s((function(t){""===a.positionUsing&&(a.positionUsing=n.getPositioningCSS()),l(c,i(e,p,u)),1===e?(l(r,{transition:"none",opacity:1}),r.offsetWidth,setTimeout((function(){l(r,{transition:"all "+p+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),p)}),p)):setTimeout(t,p)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),a.trickleSpeed)};return a.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*a.trickleRate)},e=0,t=0,n.promise=function(a){return a&&"resolved"!==a.state()?(0===t&&n.start(),e++,t++,a.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");p(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=a.template;var o,i=t.querySelector(a.barSelector),s=e?"-100":r(n.status||0),c=document.querySelector(a.parent);return l(i,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),a.showSpinner||(o=t.querySelector(a.spinnerSelector))&&f(o),c!=document.body&&p(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){u(document.documentElement,"nprogress-busy"),u(document.querySelector(a.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var s=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),l=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function a(t){var n=document.body.style;if(t in n)return t;for(var a,o=e.length,r=t.charAt(0).toUpperCase()+t.slice(1);o--;)if((a=e[o]+r)in n)return a;return t}function o(e){return e=n(e),t[e]||(t[e]=a(e))}function r(e,t,n){t=o(t),e.style[t]=n}return function(e,t){var n,a,o=arguments;if(2==o.length)for(n in t)void 0!==(a=t[n])&&t.hasOwnProperty(n)&&r(e,n,a);else r(e,o[1],o[2])}}();function c(e,t){return("string"==typeof e?e:d(e)).indexOf(" "+t+" ")>=0}function p(e,t){var n=d(e),a=n+t;c(n,t)||(e.className=a.substring(1))}function u(e,t){var n,a=d(e);c(e,t)&&(n=a.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function d(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(o="function"==typeof a?a.call(t,n,t,e):a)||(e.exports=o)},6969:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},8722:(e,t,n)=>{const a=n(6969),o=n(8380),r=new Set;function i(e){void 0===e?e=Object.keys(a.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...r,...Object.keys(Prism.languages)];o(a,e,t).load((e=>{if(!(e in a.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(3157).resolve(t)],delete Prism.languages[e],n(3157)(t),r.add(e)}))}i.silent=!1,e.exports=i},9700:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,a,o,r){if(n.language===a){var i=n.tokenStack=[];n.code=n.code.replace(o,(function(e){if("function"==typeof r&&!r(e))return e;for(var o,s=i.length;-1!==n.code.indexOf(o=t(a,s));)++s;return i[s]=e,o})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,a){if(n.language===a&&n.tokenStack){n.grammar=e.languages[a];var o=0,r=Object.keys(n.tokenStack);!function i(s){for(var l=0;l=r.length);l++){var c=s[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var p=r[o],u=n.tokenStack[p],d="string"==typeof c?c:c.content,f=t(a,p),m=d.indexOf(f);if(m>-1){++o;var h=d.substring(0,m),b=new e.Token(a,e.tokenize(u,n.grammar),"language-"+a,u),g=d.substring(m+f.length),y=[];h&&y.push.apply(y,i([h])),y.push(b),g&&y.push.apply(y,i([g])),"string"==typeof c?s.splice.apply(s,[l,1].concat(y)):c.content=y}}else c.content&&i(c.content)}return s}(n.tokens)}}}})}(Prism)},8692:(e,t,n)=>{var a={"./":8722};function o(e){var t=r(e);return n(t)}function r(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}o.keys=function(){return Object.keys(a)},o.resolve=r,e.exports=o,o.id=8692},3157:(e,t,n)=>{var a={"./":8722};function o(e){var t=r(e);return n(t)}function r(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}o.keys=function(){return Object.keys(a)},o.resolve=r,e.exports=o,o.id=3157},8380:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,a=e.length;n "));var s={},l=e[a];if(l){function c(t){if(!(t in e))throw new Error(a+" depends on an unknown component "+t);if(!(t in s))for(var i in o(t,r),s[t]=!0,n[t])s[i]=!0}t(l.require,c),t(l.optional,c),t(l.modify,c)}n[a]=s,r.pop()}}return function(e){var t=n[e];return t||(o(e,a),t=n[e]),t}}function o(e){for(var t in e)return!0;return!1}return function(r,i,s){var l=function(e){var t={};for(var n in e){var a=e[n];for(var o in a)if("meta"!=o){var r=a[o];t[o]="string"==typeof r?{title:r}:r}}return t}(r),c=function(e){var n;return function(a){if(a in e)return a;if(!n)for(var o in n={},e){var r=e[o];t(r&&r.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+o+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+o+" because it is a component.");n[t]=o}))}return n[a]||a}}(l);i=i.map(c),s=(s||[]).map(c);var p=n(i),u=n(s);i.forEach((function e(n){var a=l[n];t(a&&a.require,(function(t){t in u||(p[t]=!0,e(t))}))}));for(var d,f=a(l),m=p;o(m);){for(var h in d={},m){var b=l[h];t(b&&b.modify,(function(e){e in u&&(d[e]=!0)}))}for(var g in u)if(!(g in p))for(var y in f(g))if(y in p){d[g]=!0;break}for(var v in m=d)p[v]=!0}var S={getIds:function(){var e=[];return S.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,a,o){var r=o?o.series:void 0,i=o?o.parallel:e,s={},l={};function c(e){if(e in s)return s[e];l[e]=!0;var o,p=[];for(var u in t(e))u in n&&p.push(u);if(0===p.length)o=a(e);else{var d=i(p.map((function(e){var t=c(e);return delete l[e],t})));r?o=r(d,(function(){return a(e)})):a(e)}return s[e]=o}for(var p in n)c(p);var u=[];for(var d in l)u.push(s[d]);return i(u)}(f,p,t,n)}};return S}}();e.exports=t},2694:(e,t,n)=>{"use strict";var a=n(6925);function o(){}function r(){}r.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,r,i){if(i!==a){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:o};return n.PropTypes=n,n}},5556:(e,t,n)=>{e.exports=n(2694)()},6925:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},2551:(e,t,n)=>{"use strict";var a=n(6540),o=n(9982);function r(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n