diff --git a/build/.nojekyll b/build/.nojekyll new file mode 100644 index 00000000..e69de29b diff --git a/build/404.html b/build/404.html new file mode 100644 index 00000000..4fb2631a --- /dev/null +++ b/build/404.html @@ -0,0 +1,16 @@ + + + + + +Page Not Found | 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.

+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/BoundingBoxer/index.html b/build/Tutorials/Components/Core/BoundingBoxer/index.html new file mode 100644 index 00000000..039f9c36 --- /dev/null +++ b/build/Tutorials/Components/Core/BoundingBoxer/index.html @@ -0,0 +1,27 @@ + + + + + +BoundingBoxer | That Open Docs + + + + +
+
Skip to main content

BoundingBoxer

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🧳 Gathering BIM Data​

Fragment help you to render your BIM files faster than ever.🚅 Fragment is a group of FragmentMeshes +which are clubbed together to visualize the BIM model. +When working with large BIM models, you may need to quit the navigation to see the whole model.📌 +To accomplish this, we must extract Mesh data from the Fragment and use control APIs to display the complete Fragment.

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

For this tutorial, we'll use the FragmentBoundingBox component, which will provide us with the mesh by using the Fragment Model.

🧩 Adding Fragments​

We'll start by adding a Fragment to our scene using FragmentManager. +We'll use a simple fragment for the purposes of this tutorial, but the code is capable of handling big files as well.🏗️

// Set up scene (see SimpleScene tutorial)

// @ts-ignore
import * as dat from "three/examples/jsm/libs/lil-gui.module.min";
import Stats from "stats.js";
import * as BUI from "@thatopen/ui";
import * as OBC from "openbim-components";

const container = document.getElementById("container")!;

const components = new OBC.Components();

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

const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

world.scene.setup();

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

🎲 Creation of Bounding Boxes​

Now that our setup is done, lets see how you can use FragmentBoundingBox(). +You will be amazed to see how easy it is to create bounding box using components.💪 +We will use OBC.FragmentBoundingBox() and add the Fragment model to it using add(model).

const fragments = new OBC.FragmentsManager(components);

const file = await fetch("../../../../../resources/small.frag");
const data = await file.arrayBuffer();
const buffer = new Uint8Array(data);
const model = fragments.load(buffer);
world.scene.three.add(model);

👓 Reading the Mesh Data​

After adding the model, we can now read the mesh from bounding box using getMesh()

const fragmentBbox = components.get(OBC.BoundingBoxer);
fragmentBbox.add(model);

🎮 Managing Zoom Events​

Now that all the setup is done, we need to trigger the zoom event on a button click.🖱 +We will use fitToSphere from camera.controls, +which takes the mesh as a parameter and zooms to it. +Also, we will enable a nice transition effect while zooming to the mesh by setting the last parameter as true

const bbox = fragmentBbox.getMesh();
fragmentBbox.reset();

Congratulations 🎉 on completing this short yet useful tutorial! +You can now easily zoom to Fragment Mesh using FragmentBoundingBox😎 +Let's keep it up and check out another tutorial! 🎓

BUI.Manager.init();

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel active label="Bounding Boxes Tutorial" 
      style="position: fixed; top: 5px; right: 5px">
      <bim-panel-section style="padding-top: 10px;">
         
        <bim-button 
          label="Fit BIM model" 
          @click="${() => {
            world.camera.controls.fitToSphere(bbox, true);
          }}">  
        </bim-button>  

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

document.body.append(panel);
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Clipper/index.html b/build/Tutorials/Components/Core/Clipper/index.html new file mode 100644 index 00000000..1cf50db8 --- /dev/null +++ b/build/Tutorials/Components/Core/Clipper/index.html @@ -0,0 +1,37 @@ + + + + + +Clipper | That Open Docs + + + + +
+
Skip to main content

Clipper

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

✂️ Clipping Tool​

The Clipping Tool is a powerful feature in 3D modelling that helps you dissect 3D objects. +Clipping Tool is useful for inspecting and analyzing objects in detail.💪 +In this tutorial, we will use the Clipping Tool to dissect a Cube using planes and transformation controls. +This tutorial will help you add Clipping functionality to your project easily.🚀

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

🎲 Creating a Cube Mesh​

Let's start by adding a Cube, which we can dissect. +We will create a Cube +with 3x3x3 dimensions and use red color for the material.

import * as THREE from "three";
import Stats from "stats.js";
import * as BUI from "@thatopen/ui";
import * as OBC from "openbim-components";

const container = document.getElementById("container")!;

const components = new OBC.Components();

const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

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

world.scene.setup();

Now, we will add the Cube to the Scene. We must also add the cube to components.meshes, +which is simply an array of all the meshes in the Scene 🗄️.

const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1.5, 0);

⚙️ Adding Simple Clipper​

Here comes the interesting part, we will add a Simple Clipper to our scene 🥁 +A Simple Clipper requires two things: components and Simple Plane

world.scene.three.add(cube);
world.meshes.add(cube);

const casters = components.get(OBC.Raycasters);
casters.get(world);
PLANE WITH TRANSFORMATION CONTROLS AND MORE

Simple Plane is useful in generating planes along with +customizations.

SimpleClipper includes everything needed to provide clipping capabilities, +including the ability to build numerous clipping planes. +SimpleClipper also controls the SimplePlane internally, +allowing you to execute clipping on any 3D object by just dragging the planes.

const clipper = new OBC.Clipper(components);

🤝 Performing Clipping Events​

Now, we need a way to create a Clipping Plane on demand, you can do it with a Single Click or +Double Click of a mouse. +For this tutorial, we will use Double Click, to create a Clipper that will generate a +plane on the 3D object's face.

clipper.enabled = true;
Raycaster below the hood 🎩

We use the Simple Raycaster to determine if the intersection has occurred. +The clipper places a plane after detecting the face on which the mouse was clicked. +Here, the SimpleClipper handles everything for you 😎

🧹 Deleting the Clipping Planes​

Now that we know how to make multiple clippers, we must also know how to delete them when necessary. +Clipping planes can be removed using clipper.delete() or clipper.delete(plane), which deletes a single plane. +clipper.delete() deletes the plane on which your mouse pointer is now located.

container.ondblclick = () => clipper.create(world);
Delete all the Clipping Planes

❎ If you want to safely delete all the clipping planes that were created you can simply call +clipper.deleteAll()

Congratulations 🎉 on completing this tutorial! Now you can inspect BIM Models or any 3D Object easily using +Clipper Component 🧐 +Let's keep it up and check out another tutorial! 🎓

window.onkeydown = (event) => {
  if (event.code === "Delete" || event.code === "Backspace") {
    clipper.delete(world);
  }
};
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Cullers/index.html b/build/Tutorials/Components/Core/Cullers/index.html new file mode 100644 index 00000000..ffa58d15 --- /dev/null +++ b/build/Tutorials/Components/Core/Cullers/index.html @@ -0,0 +1,39 @@ + + + + + +Cullers | That Open Docs + + + + +
+
Skip to main content

Cullers

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🚅 Managing Performance​

There are occasions when your scene has too many components. +Multiple components being rendered simultaneously lengthens computation time⌛️ and degrades performance.🌡️

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

In this tutorial, we will use ScreenCuller to improve performance by reducing unnecessary computations.🚀 +This tutorial will show you how to manage a complex scenario with a lot of elements in an effective way.🦾

🧰 Creating Screen Culler​

Although adding Screen Culler to your project can appear difficult, it is actually rather easy. +Now, we will add Screen Culler Component. +This will create a Screen Culler which is now ready to be used.

import * as THREE from "three";
import Stats from "stats.js";
import * as OBC from "openbim-components";

const container = document.getElementById("container")!;

const components = new OBC.Components();

const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

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

world.scene.setup();

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

You can also use the threshold property to control the minimum size of an element in screen in order +for it to be revealed by the culler. Higher numbers result in less objects visible, but more performance:

const cullers = new OBC.Cullers(components);
const culler = cullers.create(world);

Additionally, we will activate the culler.renderDebugFrame +so that we can see the 2D screen of the elements that are not occluded.💻 +Also, we will get the domElement and attach it to the body so that we can see this frame in real-time.📊

culler.threshold = 200;
Randomising the Cube Placement

We'll write a quick utility function that returns a random number between 0 and the specified upper limit. +You can use this for a variety of purposes, but for this tutorial +it will be used to generate random positions for cube placement.📌

culler.renderDebugFrame = true;
const debugFrame = culler.renderer.domElement;
document.body.appendChild(debugFrame);
debugFrame.style.position = "fixed";
debugFrame.style.left = "0";
debugFrame.style.bottom = "0";
debugFrame.style.visibility = "collapse";

🧱 Adding a lot of 3D Objects​

We'll add the Simple 3D Cube and do it 300 times!🤯 +Components are built using Three.js, making it simple to use any three.js code. +For our cube, we'll generate box geometry and use basic material.

function getRandomNumber(limit: number) {
  return Math.random() * limit;
}

🧪 Generate Multiple Cubes​

Now, using the getRandomNumber() method we previously created, we will add the 300 cube meshes to our scene +and randomly position them. We'll add the cube to the scene and adjust its position between 0 and 10. +Additionally, we will add meshes to the culler object, which will help SimpleCuller to recognize and +draw the elements that are visible to the camera. To do this, culler.add(cube) will be used. +Also, now that we can create multiple cubes, we will write a function to remove the cubes from scene on demand. +resetCubes() iteratively removes the cubes using cube.removeFromParent.

const cubes: THREE.Mesh[] = [];
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });

📢 Rendering Cubes​

With everything ready, we will call regenerateCubes() which will generate cubes and add them to scene.

function resetCubes() {
  for (const cube of cubes) {
    cube.removeFromParent();
  }
  cubes.length = 0;
}

function regenerateCubes() {
  resetCubes();
  for (let i = 0; i < 300; i++) {
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = getRandomNumber(10);
    cube.position.y = getRandomNumber(10);
    cube.position.z = getRandomNumber(10);
    cube.updateMatrix();
    world.scene.three.add(cube);
    culler.add(cube);
    cubes.push(cube);
  }
}

Here comes the most crucial part! The core aim of ScreenCuller is to output just those components that are +visible to the camera. +culler.needsUpdate = true instructs the ScreenCuller to render the updated view. + Remember to update culler every time the camera is updated ❕ +In this tutorial we are updating it each time the camera stops moving.

regenerateCubes();

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. 🚀 +Let's keep it up and check out another tutorials!

culler.needsUpdate = true;
world.camera.controls.addEventListener("controlend", () => {
  culler.needsUpdate = true;
});
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/FragmentsManager/index.html b/build/Tutorials/Components/Core/FragmentsManager/index.html new file mode 100644 index 00000000..30e50e77 --- /dev/null +++ b/build/Tutorials/Components/Core/FragmentsManager/index.html @@ -0,0 +1,32 @@ + + + + + +FragmentsManager | That Open Docs + + + + +
+
Skip to main content

FragmentsManager

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🧶 Managing Fragment Efficiently​

Until recently, we had been adding 3D objects to the Scene with the traditional scene.add API. +We will now use Fragment to work with large BIM models.🏗️ +Fragment are faster and easier to use Geometric API, which reduces draw calls and speeds up the processing of 3D objects. +In this tutorial, we will load and render .frag files using Fragment Manager.

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

🧭 Fragment Powerhouse​

Let's begin by including Fragment Manager, +which requires the parameter component to be provided to it. +In terms of capabilities, Fragment Manager is a true powerhouse.🏭

const fragments = new OBC.FragmentsManager(components);

🧩 Add Fragment To Scene​

Using a single API, a Fragment can be quickly added to the scene. +Everything else is taken care of by fragment.load, which makes it easier to render a Fragment file.💪💪

let uuid: string = "";

async function loadFragments() {
  if (fragments.groups.size) {
    return;
  }
  const file = await fetch("../../../resources/small.frag");
  const data = await file.arrayBuffer();
  const buffer = new Uint8Array(data);
  const group = fragments.load(buffer);
  world.scene.three.add(group);
  uuid = group.uuid;
  console.log(group);
}
Loading IFC files as Fragment

You're probably wondering how IFC files can be loaded as Fragment. +The same approach can be used to load an IFC file with a fragment; +view its own tutorial for further information.

📤 Storing Fragment​

Fragment Manager provides us with option to export the Fragment we have used in our Scene. +Fragment are exported to Blob, +which can be used to generate a File and then download it.↗️ +Let's see how you can use fragment.export in your code.

function download(file: File) {
  const link = document.createElement("a");
  link.href = URL.createObjectURL(file);
  link.download = file.name;
  document.body.appendChild(link);
  link.click();
  link.remove();
}

function exportFragments() {
  if (!fragments.groups.size) {
    return;
  }
  const group = fragments.groups.get(uuid);
  if (!group) {
    return;
  }
  const data = fragments.export(group);
  const blob = new Blob([data]);
  const file = new File([blob], "small.frag");
  download(file);
}
Creating Dynamic URLs

URL.createObjectURL() comes handy when you want to generate a URL for files that were generated programmatically. +You can read more about it here.

🧹 Discard Fragment and Clean the Scene​

At some point, you will require to render numerous Fragment and discard them when not needed. +You can use dispose() method which will remove the Fragment Meshes from the Scene.✂️ +After using fragments.dispose(), you should reinitialize Fragment Manager to maintain it's original state for further uses.

function disposeFragments() {
  fragments.dispose();
}

Loading a .zip fragment that you have locally is also quite easy:

function importExternalFragment() {
  if (fragments.groups.size) {
    return;
  }
  const input = document.createElement("input");
  input.type = "file";
  input.onchange = async () => {
    if (!(input.files && input.files[0])) return;
    const file = input.files[0];
    if (file.name.includes(".frag")) {
      const url = URL.createObjectURL(file);
      const result = await fetch(url);
      const data = await result.arrayBuffer();
      const buffer = new Uint8Array(data);
      fragments.load(buffer);
    }
    input.remove();
  };
  input.click();
}

const gui = new dat.GUI();

const actions = {
  loadFragments: () => loadFragments(),
  disposeFragments: () => disposeFragments(),
  exportFragments: () => exportFragments(),
  importExternalFragment: () => importExternalFragment(),
};

gui.add(actions, "loadFragments").name("Load Fragments");
gui.add(actions, "disposeFragments").name("Dispose Fragments");
gui.add(actions, "exportFragments").name("Export Fragments");
gui.add(actions, "importExternalFragment").name("Import External Fragment");

Congratulations 🎉 on completing this short yet powerful tutorial! +Now you can render or export Fragment files in your BIM Apps using Fragment Manager 🎯 +Let's keep it up and check out 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 new file mode 100644 index 00000000..63400c2e --- /dev/null +++ b/build/Tutorials/Components/Core/Grids/index.html @@ -0,0 +1,16 @@ + + + + + +Grids | That Open Docs + + + + +
+
Skip to main content

Grids

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🕸️ Adding a fancy grid to our scene​

In this tutorial you'll learn how to add a fancy grid to your scene. It's super easy and will make your app look much more professional!

Why a grid?

Grids are very common in 3D apps, and it's a great way to have a reference point for your users to navigate around, even when there are no visible objects around.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
import * as THREE from "three";
import * as OBC from "openbim-components";

🌎 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 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 cube = new THREE.Mesh(new THREE.BoxGeometry());
world.scene.three.add(cube);

🕷️ Adding the grid to the world​

To add the grid to the world, we will use the Grids component. Instead of instantiating it, we will get it directly from the components object. Remember that all components are meant to be singletons. Then, we will call the create method to add a grid to the scene.

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

⏱️ 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";
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!

+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Hider/index.html b/build/Tutorials/Components/Core/Hider/index.html new file mode 100644 index 00000000..572a73c7 --- /dev/null +++ b/build/Tutorials/Components/Core/Hider/index.html @@ -0,0 +1,38 @@ + + + + + +Hider | That Open Docs + + + + +
+
Skip to main content

Hider

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🔎 Custom filters for your BIM models​

BIM models are complex, and finding what we are looking for is not +always easy. Luckily, the components library has tools to make +it easier, and one of them is the 'FragmentHider'. Let's +check it out!

Complex IFC, complex filters

Each IFC is a world. Data is always defined slightly differently, +and defining pre-made filters only works for very basic things +like categories. With the FragmentHider, you'll be able to find +anything, even things defined in custom categories!

First, let's start by creating a FragmentManager instance and +loading a simple fragment. If you haven't checked out the tutorial +for that component yet, do it before going forward!

import Stats from "stats.js";
import * as BUI from "@thatopen/ui";
import * as OBC from "openbim-components";

const container = document.getElementById("container")!;

const components = new OBC.Components();

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

const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

world.scene.setup();

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

Now that we have our model, let's start the FragmentHider. You +can use the loadCached method if you had used it before: it will +automatically load all the filters you created in previous sessions, +even after closing the browser and opening it again:

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

📕📗📘 Setting up simple filters​

Next, we will classify data by category and by level using the +FragmentClassifier. This will allow us to create a simple +filter for both classifications. Don't worry: we'll get to +the more complex filters later!

const hider = new OBC.FragmentHider(components);

Next, we will create a simple object that we will use as the +base for the floors filter. It will just be a JS object with +the name of each storey as key and a boolean (true/false) as +value:

const classifier = new OBC.Classifier(components);
classifier.byStorey(model);
classifier.byEntity(model);

Now, let's do the same for categories:

const storeys: Record<string, any> = {};
const storeyNames = Object.keys(classifier.list.storeys);
for (const name of storeyNames) {
  storeys[name] = true;
}

Finally, we will set up a simple menu to control +the visibility of storeys:

const classes: Record<string, any> = {};
const classNames = Object.keys(classifier.list.entities);
for (const name of classNames) {
  classes[name] = true;
}

That's it! That button will open a floating menu that will allow +you to create custom multi-filters that work even for custom +property sets and quantity sets, including logical operators. +Try them out in the example below, and check out more tutorials +to bring your BIM apps to the next level!

BUI.Manager.init();

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel active label="Hider Tutorial" 
      style="position: fixed; top: 5px; right: 5px">
      
      <bim-panel-section fixed name="Floors" style="padding-top: 10px;">
      </bim-panel-section>
      
      <bim-panel-section fixed name="Categories" style="padding-top: 10px;">
      </bim-panel-section>
      
    </bim-panel>
  `;
});

document.body.append(panel);

const floorSection = panel.querySelector(
  "bim-panel-section[name='Floors']",
) as BUI.PanelSection;

const categorySection = panel.querySelector(
  "bim-panel-section[name='Categories']",
) as BUI.PanelSection;

for (const name in storeys) {
  const panel = BUI.Component.create<BUI.Checkbox>(() => {
    return BUI.html`
      <bim-checkbox checked label="${name}"
        @change="${({ target }: { target: BUI.Checkbox }) => {
          const found = classifier.find({ storeys: [name] });
          hider.set(target.value, found);
        }}">
      </bim-checkbox>
    `;
  });
  floorSection.append(panel);
}

for (const name in classes) {
  const checkbox = BUI.Component.create<BUI.Checkbox>(() => {
    return BUI.html`
      <bim-checkbox checked label="${name}"
        @change="${({ target }: { target: BUI.Checkbox }) => {
          const found = classifier.find({ entities: [name] });
          hider.set(target.value, found);
        }}">
      </bim-checkbox>
    `;
  });
  categorySection.append(checkbox);
}
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcGeometryTiler/index.html b/build/Tutorials/Components/Core/IfcGeometryTiler/index.html new file mode 100644 index 00000000..6794ff22 --- /dev/null +++ b/build/Tutorials/Components/Core/IfcGeometryTiler/index.html @@ -0,0 +1,17 @@ + + + + + +IfcGeometryTiler | That Open Docs + + + + +
+
Skip to main content

IfcGeometryTiler

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

💪 Let's go BIG​

Do you need to open huge big IFC files fast, even on more modest devices? If so, you are in luck! We can open virtually any model on any device in seconds thanks to BIM TILES!

BIM tiles?

The idea behind BIM tiles is pretty simple! Instead of loading the whole BIM model at once, we just load the explicit geometries that are seen by the user. It's way faster than opening the IFC directly, but for this you'll need a backend (or to rely on the file system of the user if you are building a desktop or mobile app).

Let's see how to do this step by step!

🧩 Converting the IFC model to tiles​

The first step is to transform the IFC model into BIM tiles. The reason why we have to do this is pretty simple: geometry in IFC is implicit (e.g. a wall is defined as an extrusion). This means that it needs to be computed and converted to explicit geometry (triangles) so that it can be displayed in 3D.

note

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!

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, let's start converting the IFC geometry to tiles and getting those files so the streamer can do its job. In order to do it, we need the first component from the collection of streaming components: FragmentIfcStreamConverter:

import Stats from "stats.js";
// @ts-ignore
import * as dat from "three/examples/jsm/libs/lil-gui.module.min";
import * as BUI from "@thatopen/ui";
import * as OBC from "openbim-components";

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

// rendererComponent.postproduction.enabled = true;

world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

const grids = components.get(OBC.Grids);
grids.create(world);
// customEffects.excludedMeshes.push(grid.get());

// rendererComponent.postproduction.enabled = true;

The FragmentIfcStreamConverter class takes IFC files and transform their geometry into tiles.

danger

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.

The first file we need is a JSON which is the entry point of the geometries streaming. That JSON must have the following structure:

// We need this wasm configuration later to convert properties
const wasm = {
  path: "https://unpkg.com/web-ifc@0.0.53/",
  absolute: true,
};

const tiler = new OBC.IfcGeometryTiler(components);
tiler.settings.wasm = wasm;
tiler.settings.minGeometrySize = 20;
tiler.settings.minAssetsSize = 1000;

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. +In order to create the JSON file and get the information with the geometry, the FragmentIfcStreamConverter as well as other components in the collection of streaming components, emits events that let you get the processed data from the conversion process.

info

Nedless to say, you need to set up your event listeners before triggering the conversion!

Let's start with the first event:

// @ts-ignore
interface GeometriesStreaming {
  assets: {
    id: number;
    geometries: {
      color: number[];
      geometryID: number;
      transformation: number[];
    }[];
  }[];

  geometries: {
    [id: number]: {
      boundingBox: { [id: number]: number };
      hasHoles: boolean;
      geometryFile: "url-to-geometry-file-in-your-backend";
    };
  };

  globalDataFileId: "url-to-fragments-group-file-in-your-backend";
}

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 ⏲ and per each time we will produce one file data that is stored in the geometryFiles array. Later on, we will download the geometry files ⏬.

note

As you see, 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 🚀.

Nice! Let's go with the second event that will give us more information to create the required files:

let files: { name: string; bits: (Uint8Array | string)[] }[] = [];

let geometriesData: OBC.StreamedGeometries = {};
let geometryFilesCount = 1;

tiler.onGeometryStreamed.add((geometry) => {
  const { buffer, data } = geometry;
  const bufferFileName = `small.ifc-processed-geometries-${geometryFilesCount}`;
  for (const expressID in data) {
    const value = data[expressID];
    value.geometryFile = bufferFileName;
    geometriesData[expressID] = value;
  }
  files.push({ name: bufferFileName, bits: [buffer] });
  geometryFilesCount++;
});

This one is easier as the event doesn't produce binary data, but information we need to create the JSON file.

Are you familiar with That Open Engine?

If you're familiar with That Open Engine, 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.

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.

let assetsData: OBC.StreamedAsset[] = [];

tiler.onAssetStreamed.add((assets) => {
  assetsData = [...assetsData, ...assets];
});
danger

You can name the file whatever you want, but is extremely important you finish the file name with -global!

This is pretty much it! 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:

tiler.onIfcLoaded.add((groupBuffer) => {
  files.push({
    name: "small.ifc-processed-global",
    bits: [groupBuffer],
  });
});

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:

function downloadFile(name: string, ...bits: (Uint8Array | string)[]) {
  const file = new File(bits, name);
  const anchor = document.createElement("a");
  const url = URL.createObjectURL(file);
  anchor.href = url;
  anchor.download = file.name;
  anchor.click();
  URL.revokeObjectURL(url);
}

async function downloadFilesSequentially(
  fileList: { name: string; bits: (Uint8Array | string)[] }[],
) {
  for (const { name, bits } of fileList) {
    downloadFile(name, ...bits);
    await new Promise((resolve) => {
      setTimeout(resolve, 100);
    });
  }
}

tiler.onProgress.add((progress) => {
  if (progress !== 1) return;
  setTimeout(async () => {
    const processedData = {
      geometries: geometriesData,
      assets: assetsData,
      globalDataFileId: "small.ifc-processed-global",
    };
    files.push({
      name: "small.ifc-processed.json",
      bits: [JSON.stringify(processedData)],
    });
    await downloadFilesSequentially(files);
    assetsData = [];
    geometriesData = {};
    files = [];
    geometryFilesCount = 1;
  });
});

If everything went as expected, you should now be seeing some files being downloaded from your app 🤯 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 💪

async function processFile() {
  const fetchedIfc = await fetch("../../../../../resources/small.ifc");
  const ifcBuffer = await fetchedIfc.arrayBuffer();
  // We will need this information later to also convert the properties
  const ifcArrayBuffer = new Uint8Array(ifcBuffer);
  // This triggers the conversion, so the listeners start to be called
  await tiler.streamFromBuffer(ifcArrayBuffer);
}
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcLoader/index.html b/build/Tutorials/Components/Core/IfcLoader/index.html new file mode 100644 index 00000000..510c6bb0 --- /dev/null +++ b/build/Tutorials/Components/Core/IfcLoader/index.html @@ -0,0 +1,53 @@ + + + + + +IfcLoader | That Open Docs + + + + +
+
Skip to main content

IfcLoader

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🏠👉🤖 From IFC to fragment in 1 minute​

Fragments are great: they are lightweight, they are fast and we +have tons of tools to work with them. But fragments are not used +outside our libraries. So how can we convert an IFC file to fragments? +Easy: with the FragmentIfcLoader! Let's start by creating it.

import * as WEBIFC from "web-ifc";
import * as BUI from "@thatopen/ui";
import Stats from "stats.js";
import * as OBC from "openbim-components";

const container = document.getElementById("container")!;

const components = new OBC.Components();

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

const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

world.scene.setup();

const grids = components.get(OBC.Grids);
grids.create(world);
Why not just IFC?

IFC is nice because it lets us exchange data with many tools in the +AECO industry. But it also has some limitations. In a nutshell, +data coming from IFC needs to be processed and converted to triangles +to be able to draw it in 3D, and that requires processing power +and time! That's why we convert it to fragments to display it. +Once you have the fragments, you can store them and load them +directly the next time your user tries to load that IFC: it will +load 10 times faster!

🔭🔧 Calibrating the converter​

Now, we need to configure the path of the WASM files. What's WASM? +It's a technology that lets us run C++ on the browser, which means +that we can load IFCs super fast! These files are the compilation of +our web-ifc library. You can find them in the github repo and in NPM. +These files need to be available to our app, so you have 2 options:

  • Download them and serve them statically.
  • Get them from a remote server. +The easiest way is getting them from unpkg, and the cool thing is that +you don't need to do it manually! It can be done directly by the tool +just by writing the following:
const fragments = components.get(OBC.FragmentsManager);
const fragmentIfcLoader = components.get(OBC.IfcLoader);

Awesome! Optionally, we can exclude categories that we don't want +to convert to fragments like very easily:

await fragmentIfcLoader.setup();

/* If you want to the path to unpkg manually, then you can skip the line
  above and set them manually as below:
  fragmentIfcLoader.settings.wasm = {
      path: "https://unpkg.com/web-ifc@0.0.53/",
      absolute: true
  }

We can further configure the conversion using the webIfc object. +In this example, we will make the IFC model go to the origin of +the scene (don't worry, this supports model federation) and +optimize the profiles geometry so that it generates very +efficient geometry for certain geometries (e.g. HVAC):

const excludedCats = [
  WEBIFC.IFCTENDONANCHOR,
  WEBIFC.IFCREINFORCINGBAR,
  WEBIFC.IFCREINFORCINGELEMENT,
];

for (const cat of excludedCats) {
  fragmentIfcLoader.settings.excludedCategories.add(cat);
}

🚗🔥 Loading the IFC​

Next, let's define a function to load the IFC programmatically. +We have hardcoded the path to one of our IFC files, but feel free +to do this with any of your own files!

Opening local IFCs

Keep in mind that the browser can't access the file of your +computer directly, so you will need to use the Open File API to +open local files.

fragmentIfcLoader.settings.webIfc.COORDINATE_TO_ORIGIN = true;
fragmentIfcLoader.settings.webIfc.OPTIMIZE_PROFILES = true;

🎁 Exporting the result​

Once you have your precious fragments, you might want to save them +so that you don't need to open this IFC file each time your user +gets into your app. Instead, the next time you can load the +fragments directly. Defining a function to export fragments +is as easy as this:

// const cullers = components.get(OBC.Cullers);
// const culler = cullers.create(world);
// culler.enabled = true;

async function loadIfc() {
  const file = await fetch("../../../../../resources/small.ifc");
  const data = await file.arrayBuffer();
  const buffer = new Uint8Array(data);
  const model = await fragmentIfcLoader.load(buffer);
  model.name = "example";
  world.scene.three.add(model);
  // for (const mesh of model.children) {
  //   culler.add(mesh as any);
  // }
}

// world.camera.controls.addEventListener("sleep", () => {
//   culler.needsUpdate = true
// })

🧠🧼 Cleaning memory​

Now, just like in the FragmentManager tutorial, you will need +to dispose the memory if your user wants to reset the state of the +scene, especially if you are using Single Page Application +technologies like React, Angular, Vue, etc. To do that, you +can simply call the dispose method:

function download(file: File) {
  const link = document.createElement("a");
  link.href = URL.createObjectURL(file);
  link.download = file.name;
  document.body.appendChild(link);
  link.click();
  link.remove();
}

async function exportFragments() {
  if (!fragments.groups.size) {
    return;
  }
  const group = Array.from(fragments.groups.values())[0];
  const data = fragments.export(group);
  download(new File([new Blob([data])], "small.frag"));

  const properties = group.getLocalProperties();
  if (properties) {
    download(new File([JSON.stringify(properties)], "small.json"));
  }
}

That's it! Congrats, now you can load IFC files into your app, +generate the 3D geometry and property data for them and navigate +them in 3D. In other tutorials, you'll find tons of tools to +work with them and create amazing BIM apps! See you there 💪

function disposeFragments() {
  fragments.dispose();
}
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html b/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html new file mode 100644 index 00000000..96e345b3 --- /dev/null +++ b/build/Tutorials/Components/Core/IfcPropertiesTiler/index.html @@ -0,0 +1,23 @@ + + + + + +IfcPropertiesTiler | That Open Docs + + + + +
+
Skip to main content

IfcPropertiesTiler

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

📋 Streaming the properties​

You can also stream the properties of an IFC file. Why? Because some files can have +millions of properties, and trying to save them naively in a normal DB is not very +scalable/affordable. Using this system, you'll be able to store and retrieve the +data of models of any size without big cloud costs. We can do this conversion +using the FragmentPropsStreamConverter:

import Stats from "stats.js";
// @ts-ignore
import * as dat from "three/examples/jsm/libs/lil-gui.module.min";
import * as BUI from "@thatopen/ui";
import * as OBC from "openbim-components";

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

// rendererComponent.postproduction.enabled = true;

world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

const grids = components.get(OBC.Grids);
grids.create(world);
// customEffects.excludedMeshes.push(grid.get());

function downloadFile(name: string, bits: Blob) {
  const file = new File([bits], name);
  const anchor = document.createElement("a");
  const url = URL.createObjectURL(file);
  anchor.href = url;
  anchor.download = file.name;
  anchor.click();
  URL.revokeObjectURL(url);
}

async function downloadFilesSequentially(
  fileList: { name: string; bits: Blob }[],
) {
  for (const { name, bits } of fileList) {
    downloadFile(name, bits);
    await new Promise((resolve) => {
      setTimeout(resolve, 100);
    });
  }
}

// rendererComponent.postproduction.enabled = true;

We need to generate properties JSON with the following structure

const propsStreamer = new OBC.IfcPropertiesTiler(components);

propsStreamer.settings.wasm = {
  path: "https://unpkg.com/web-ifc@0.0.53/",
  absolute: true,
};

Similarly to geometries, here you will also get data and progress notification +using events. In addition to properties, you will get indices, which is an +indexation data of the properties to be able to use them effectively when +streamed.

// @ts-ignore
interface StreamedProperties {
  types: {
    [typeID: number]: number[];
  };

  ids: {
    [id: number]: number;
  };

  indexesFile: string;
}

const jsonFile: StreamedProperties = {
  types: {},
  ids: {},
  indexesFile: "small.ifc-processed-properties-indexes",
};

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:

let counter = 0;

const files: { name: string; bits: Blob }[] = [];

propsStreamer.onPropertiesStreamed.add(async (props) => {
  if (!jsonFile.types[props.type]) {
    jsonFile.types[props.type] = [];
  }
  jsonFile.types[props.type].push(counter);

  for (const id in props.data) {
    jsonFile.ids[id] = counter;
  }

  const name = `small.ifc-processed-properties-${counter}`;
  const bits = new Blob([JSON.stringify(props.data)]);
  files.push({ bits, name });

  counter++;
});

propsStreamer.onProgress.add(async (progress) => {
  console.log(progress);
});

propsStreamer.onIndicesStreamed.add(async (props) => {
  files.push({
    name: `small.ifc-processed-properties.json`,
    bits: new Blob([JSON.stringify(jsonFile)]),
  });

  const relations = components.get(OBC.IfcRelationsIndexer);
  const serializedRels = relations.serializeRelations(props);

  files.push({
    name: "small.ifc-processed-properties-indexes",
    bits: new Blob([serializedRels]),
  });

  await downloadFilesSequentially(files);
});

If everything went as expected, you should now be seeing some files being downloaded from your app 🤯 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 💪

async function processFile() {
  const fetchedIfc = await fetch("../../../../../resources/small.ifc");
  const ifcBuffer = await fetchedIfc.arrayBuffer();
  // We will need this information later to also convert the properties
  const ifcArrayBuffer = new Uint8Array(ifcBuffer);
  // This triggers the conversion, so the listeners start to be called
  await propsStreamer.streamFromBuffer(ifcArrayBuffer);
}
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html b/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html new file mode 100644 index 00000000..a6452eb3 --- /dev/null +++ b/build/Tutorials/Components/Core/IfcRelationsIndexer/index.html @@ -0,0 +1,17 @@ + + + + + +IfcRelationsIndexer | That Open Docs + + + + +
+
Skip to main content

IfcRelationsIndexer

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

Getting entity relations the easy way 💪​

If you're aware of the IFC schema, you should know that all the possible information an entity have is not directly inside its attributes. For example, the property sets, classifications, materials, etc, of a wall (or any other element) are not directly in the wall attributes 🤯 but in other entities which are related to the wall using relations. +Now, that is perfect for an schema like the IFC which aims to store all the building data within a single text file in the easiest way possible. However, is not that easy to work just because you need to find the relations you want to get to the element data you're looking for 😪. Luckily for you, the IfcRelationsIndexer already gives you an easy way to get the entities which are related with your elements thanks to the inverse attributes! 🔥🔥

Loading a model 🏦​

First things first, lets load an IFC model to process its relations.

tip

If you're unsure on the details to load a model, just tool at the IfcLoader tutorial!

// @ts-ignore
import * as dat from "three/examples/jsm/libs/lil-gui.module.min";
// import Stats from "stats.js";
// import * as BUI from "@thatopen/ui";
import * as BUI from "@thatopen/ui";
import * as OBC from "openbim-components";

const container = document.getElementById("container")!;

const components = new OBC.Components();

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

const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

world.scene.setup();

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

Once the model is loaded in memory, you just need to get an instance of the IfcRelationsIndexer and process the model... it's as easy as that! 😎

const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();
const file = await fetch("/resources/small.ifc");
const buffer = await file.arrayBuffer();
const typedArray = new Uint8Array(buffer);
const model = await ifcLoader.load(typedArray);
world.scene.three.add(model);

The result of that is basically a map where the keys are the expressIDs and the values are other expressIDs related to the first one and grouped by the type of relation. You don't need to worry too much about the details of that, as the usage is pretty straighforward 🔝. The only thing that matters is you've now an easy way to access the entities related to your element 🙂

Getting element psets 📄​

One of the most important relations between different entities is the IfcRelDefinesByProperties. That relation links together an arbitrary entity with a set of IfcPropertySet entities that applies properties. Getting them with the IfcRelationsIndexer once the model is indexed is pretty easy:

const indexer = components.get(OBC.IfcRelationsIndexer);
await indexer.process(model);
tip

IsDefinedBy is the inverse attribute name in the IFC Schema that holds the relations with property sets 😉

Awesome! really easy right?

Exporting the indexation​

In bigger models, the process to calculate the relations index may take some time. The important thing is that there is no reason to calculate over and over the relations index every time you load a model. If the model hasn't change, their properties shouldn't neither! So, let's download the relations index to load it later.

const psets = indexer.getEntityRelations(model, 6518, "IsDefinedBy");
if (psets) {
  for (const expressID of psets) {
    // You can get the pset attributes like this
    const pset = await model.getProperties(expressID);
    console.log(pset);
    // You can get the pset props like this or iterate over pset.HasProperties yourself
    await OBC.IfcPropertiesUtils.getPsetProps(
      model,
      expressID,
      async (propExpressID) => {
        const prop = await model.getProperties(propExpressID);
        console.log(prop);
      },
    );
  }
}
tip

As @thatopen/components can be used in either NodeJS and Browser environments, the logic to generate a JSON file may vary!

Now, in case you've loaded several models and want to get all the computed relations, there is also a handy method to do it.

const downloadJSON = (json: string, name: string) => {
  const file = new File([json], name);
  const a = document.createElement("a");
  a.href = URL.createObjectURL(file);
  a.download = file.name;
  a.click();
  URL.revokeObjectURL(a.href);
};

const json = indexer.serializeModelRelations(model);
console.log(json);

Loading back the relations index​

What do we gain with having a pre-processed relations index if we can't use it again, right? Well, let's use the downloaded relations index 😎

const allRelationsJSON = indexer.serializeAllRelations();

Great! Now try to get again the property sets and you will see everything working nice and neat. In fact, lets try to get the building storey of one element in the IFC 👇

// Lets first delete the existing model relations
delete indexer.relationMaps[model.uuid];
const relationsIndexFile = await fetch("/resources/small-relations.json");
const relationsIndex = indexer.getRelationsMapFromJSON(
  await relationsIndexFile.text(),
);
indexer.setRelationMap(model, relationsIndex);
tip

Despite there are some relations that corresponds to only one element (e.g., an element can only have one associated building storey) the getEntityRelations will always return an array. That's the reason we take the first buildingStorey relation despite it will always be the only one.

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

const buildingStorey = indexer.getEntityRelations(
  model,
  6518,
  "ContainedInStructure",
);

if (buildingStorey && buildingStorey[0]) {
  const storey = await model.getProperties(buildingStorey[0]);
  console.log(storey);
}
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/MiniMap/index.html b/build/Tutorials/Components/Core/MiniMap/index.html new file mode 100644 index 00000000..bc4f3636 --- /dev/null +++ b/build/Tutorials/Components/Core/MiniMap/index.html @@ -0,0 +1,17 @@ + + + + + +MiniMap | That Open Docs + + + + +
+
Skip to main content

MiniMap

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🗺️ Orientating your user in the scene​

In this tutorial you'll learn how to use the Minimap, which is a small 2D representation of the 3D world.

Do you mean a floorplans?

Not quite. The minimap is a simple 2D representation of the 3D world. It is useful to help your user understand where they are, and to have a simple top view of their surrounding.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
  • @thatopen/ui to add some simple and cool UI menus.
  • Stats.js (optional) to measure the performance of our app.
import Stats from "stats.js";
import * as BUI from "@thatopen/ui";
import * as THREE from "three";
import * as OBC from "openbim-components";

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

world.scene.setup();

components.init();

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

world.camera.controls.setLookAt(1, 2, -2, -2, 0, -5);

🏠 Loading a model​

Now that we have a scene, let's load a model. We will use the Fragment Manager for it.

Showing Fragments in the Scene

🏔️ There is a dedicated tutorial on how to use Fragment Manager to load IFC files, check it out if you haven't already!

const fragments = new OBC.FragmentsManager(components);

const file = await fetch("../../../../../resources/small.frag");
const dataBlob = await file.arrayBuffer();
const buffer = new Uint8Array(dataBlob);
const model = fragments.load(buffer);
world.scene.three.add(model);

🗺 Setting up the map​

Now, that we have our setup ready. Let's start with the exciting stuff. +We will use MiniMap component, which does all the work for us.🔮

const maps = new OBC.MiniMaps(components);
const map = maps.create(world);

We have already created a simple DIV element with id minimap in our HTML file. We need to fetch it to add the canvas where our minimap is rendered to it. We'll also add a rounded border to make it look better.

const mapContainer = document.getElementById("minimap") as HTMLDivElement;
const canvas = map.renderer.domElement;
canvas.style.borderRadius = "12px";
mapContainer.append(canvas);

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

we'll also need a reference to the size of the minimap to control it:

const mapSize = map.getSize();

Now we will create a new panel with some inputs to control the different parameters of the MiniMap, like zoom, size and front offset. 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 label="Minimap Tutorial" style="position: fixed; top: 5px; right: 5px" active>
      <bim-panel-section style="padding-top: 10px">
      
        <bim-checkbox checked="true" label="Enabled" 
          @change="${({ target }: { target: BUI.Checkbox }) => {
            map.enabled = target.value;
          }}">  
        </bim-checkbox>
        
        <bim-checkbox label="Lock rotation" 
          @change="${({ target }: { target: BUI.Checkbox }) => {
            map.lockRotation = target.value;
          }}">  
        </bim-checkbox>
      
        <bim-color-input 
          label="Background Color" color="#202932" 
          @input="${({ target }: { target: BUI.ColorInput }) => {
            world.scene.three.background = new THREE.Color(target.color);
          }}">
        </bim-color-input>
        
        
        <bim-number-input 
          slider label="Zoom" value="${map.zoom}" min="0.01" max="0.5" step="0.01" 
          @change="${({ target }: { target: BUI.NumberInput }) => {
            map.frontOffset = target.value;
          }}">
        </bim-number-input>
                
        <div style="display: flex; gap: 12px">
        
          <bim-number-input slider value="${mapSize.x}" pref="Size X" min="100" max="500" step="10"              
            @change="${({ target }: { target: BUI.NumberInput }) => {
              const size = map.getSize();
              size.x = target.value;
              map.resize(size);
            }}">
          </bim-number-input>        
        
          <bim-number-input slider value="${mapSize.y}" pref="Size Y" min="100" max="500" step="10"            
            @change="${({ target }: { target: BUI.NumberInput }) => {
              const size = map.getSize();
              size.y = target.value;
              map.resize(size);
            }}">
          </bim-number-input>
        </div>
  
        
      </bim-panel-section>
    </bim-panel>
    `;
});

document.body.append(panel);

⏱️ 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";
world.renderer.onBeforeUpdate.add(() => stats.begin());
world.renderer.onAfterUpdate.add(() => stats.end());

🎉 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.

+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html b/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html new file mode 100644 index 00000000..b0ee6754 --- /dev/null +++ b/build/Tutorials/Components/Core/OrthoPerspectiveCamera/index.html @@ -0,0 +1,16 @@ + + + + + +OrthoPerspectiveCamera | That Open Docs + + + + +
+
Skip to main content

OrthoPerspectiveCamera

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

📹 How to handle a fancy camera​

Sometimes, you need perspective for depth and realism. Other times, you need an orthographic camera to get precise measurements and proportions. Luckily for you, we have a camera that has both of those projections at the same time! It also has some cool functionality for navigation. In this tutorial, you'll learn to use it.

Orthographic and Perspective cameras

The difference between Orthographic and Perspective cameras is that Orthographic cameras don't see things smaller when they are further away. This has some implications, like the camera being always "outside" of your scene. You can't see the interior of a room with an orthographic camera. The most common use for orthographic cameras are 2D floor plans and sections, but they can also be used to create cool-looking 3D scenes.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
  • @thatopen/ui to add some simple and cool UI menus.
  • Stats.js (optional) to measure the performance of our app.
import Stats from "stats.js";
import * as THREE from "three";
import * as BUI from "@thatopen/ui";
import * as OBC from "openbim-components";

🌎 Setting up the world AND the camera​

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. But there's one difference: we will use the OrthoPerspectiveCamera for initializing the world.

const container = document.getElementById("container")!;
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);

const world = worlds.create<
  OBC.SimpleScene,
  OBC.OrthoPerspectiveCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.OrthoPerspectiveCamera(components);

world.scene.setup();

async function test() {
  await world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
  await world.camera.projection.set("Orthographic");
}

test();

// await world.camera.projection.set("Perspective");
// await world.camera.projection.set("Orthographic");

components.init();

Easy, right? Believe it or not, this is all you need to use the OrthoPerspectiveCamera. Now, let's see it in action!

🧊 Creating a cube​

We will start by creating a simple cube and a grid that will serve as a reference point for our camera.

const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 0.5, 0);

world.scene.three.add(cube);
world.meshes.add(cube);

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

🎟️ Using camera events​

The OrthoPerspectiveCamera has a few events that you can use to manage the your scene. We will use the camera.projection.onChanged event to update the grid, so that when using the Orthographic camera, the grid will fade out if the camera zooms away a lot.

world.camera.projection.onChanged.add(() => {
  const projection = world.camera.projection.current;
  grid.fade = projection === "Perspective";
});

🧩 Building a camera UI​

Now we will use @thatopen/ui to create a simple UI for the OrthoPerspectiveCamera. It will have 4 elements:

🎛️ Navigation mode​

This will control the navigation mode of the OrthoPerspectiveCamera. It will have 3 options:

  • Orbit: for 3D orbiting around the scene.
  • FirstPerson: for navigating the scene in with the mouse wheel in first person.
  • Plan: for navigating 2d plans (blocking the orbit).

📐 Projections​

Like its name implies, the OrthoPerspectiveCamera has 2 projections, and it's really easy to toggle between them. The camera position will remain the same, which is really convenient when you switch between different projections!

❌ Toggling user input​

Sometimes you might want to remove control from the user. For example, imagine you are animating the camera and you don't want the user to move the camera around. You can use the setUserInput method to toggle this.

🔎 Focusing objects​

The OrthoPerspectiveCamera has a fit method that will fit the camera to a list of meshes. This is really useful when you want to bring attention to a specific part of the scene, or for allowing your user to navigate the scene by focusing objects.

BUI.Manager.init();

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel active label="Orthoperspective Camera Tutorial" 
      style="position: fixed; top: 5px; right: 5px">
      <bim-panel-section style="padding-top: 10px;">
         
          <bim-dropdown required label="Navigation mode" 
            @change="${({ target }: { target: BUI.Dropdown }) => {
              const selected = target.value[0] as OBC.NavModeID;

              const { current } = world.camera.projection;
              const isOrtho = current === "Orthographic";
              const isFirstPerson = selected === "FirstPerson";
              if (isOrtho && isFirstPerson) {
                alert("First person is not compatible with ortho!");
                target.value[0] = world.camera.mode.id;
                return;
              }
              world.camera.set(selected);
            }}">

          <bim-option checked label="Orbit"></bim-option>
          <bim-option label="FirstPerson"></bim-option>
          <bim-option label="Plan"></bim-option>
        </bim-dropdown>
         
      
        <bim-dropdown required label="Camera projection" 
            @change="${({ target }: { target: BUI.Dropdown }) => {
              const selected = target.value[0] as OBC.CameraProjection;
              const isOrtho = selected === "Orthographic";
              const isFirstPerson = world.camera.mode.id === "FirstPerson";
              if (isOrtho && isFirstPerson) {
                alert("First person is not compatible with ortho!");
                target.value[0] = world.camera.projection.current;
                return;
              }
              world.camera.projection.set(selected);
            }}">
          <bim-option checked label="Perspective"></bim-option>
          <bim-option label="Orthographic"></bim-option>
        </bim-dropdown>

        <bim-checkbox 
          label="Allow user input" checked 
          @change="${({ target }: { target: BUI.Checkbox }) => {
            world.camera.setUserInput(target.checked);
          }}">  
        </bim-checkbox>  
        
        <bim-button 
          label="Fit cube" 
          @click="${() => {
            world.camera.fit([cube]);
          }}">  
        </bim-button>  

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

document.body.append(panel);

⏱️ 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";
world.renderer.onBeforeUpdate.add(() => stats.begin());
world.renderer.onAfterUpdate.add(() => stats.end());

🎉 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!

+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Raycasters/index.html b/build/Tutorials/Components/Core/Raycasters/index.html new file mode 100644 index 00000000..3a52c396 --- /dev/null +++ b/build/Tutorials/Components/Core/Raycasters/index.html @@ -0,0 +1,16 @@ + + + + + +Raycasters | That Open Docs + + + + +
+
Skip to main content

Raycasters

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🐁 Picking things with the mouse​

In this tutorial you'll learn how to use the Raycaster to pick objects in the scene with the mouse.

What's ray casting?

Ray casting is the process of casting a ray from a point in space to another point in space. We will cast a ray from the mouse position to the 3D world and check if there is an object in its way. That way, when you hover or click on an object, we can know which one it is and do something with it.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
  • Stats.js (optional) to measure the performance of our app.
import * as THREE from "three";
import Stats from "stats.js";
import * as OBC from "openbim-components";

🌎 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 container = document.getElementById("container")!;

const components = new OBC.Components();

const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

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

world.scene.setup();

🧊 Adding some cubes to the scene​

Now we will add some cubes to the scene and create some materials. The idea for this app is simple: when you click on a cube, it will change its color to green.

const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const greenMaterial = new THREE.MeshStandardMaterial({ color: "#BCF124" });

const boxGeometry = new THREE.BoxGeometry(3, 3, 3);

const cube1 = new THREE.Mesh(boxGeometry, cubeMaterial);
const cube2 = new THREE.Mesh(boxGeometry, cubeMaterial);
const cube3 = new THREE.Mesh(boxGeometry, cubeMaterial);
world.scene.three.add(cube1, cube2, cube3);
const cubes = [cube1, cube2, cube3];

cube2.position.x = 5;
cube3.position.x = -5;

To make this more interesting, we will add a rotation to the cubes. We can do it by subscribing to the onBeforeUpdate event of the world, which fires 60 times per second.

const oneDegree = Math.PI / 180;

function rotateCubes() {
  cube1.rotation.x += oneDegree;
  cube1.rotation.y += oneDegree;
  cube2.rotation.x += oneDegree;
  cube2.rotation.z += oneDegree;
  cube3.rotation.y += oneDegree;
  cube3.rotation.z += oneDegree;
}

world.renderer.onBeforeUpdate.add(rotateCubes);

⚡ Setting up the raycaster​

Next, we will set up the raycaster. We will use the Raycasters component. Instead of instantiating it, we will get it from the components object, which is usually safer, as all components are meant to be singletons.

const casters = components.get(OBC.Raycasters);

Each raycaster is bound to a specific world. In this case, we will get the raycaster from the world we are using for our scene:

const caster = casters.get(world);

Finally, we will subscribe to the mousemove event of the window. We will use the castRay method of the raycaster to find out if the mouse is over a cube. If it is, we will change its color to green. Otherwise, we will change its color to the original color.

let previousSelection: THREE.Mesh | null = null;

window.onmousemove = () => {
  const result = caster.castRay(cubes);
  if (previousSelection) {
    previousSelection.material = cubeMaterial;
  }
  if (!result || !(result.object instanceof THREE.Mesh)) {
    return;
  }
  result.object.material = greenMaterial;
  previousSelection = result.object;
};

⏱️ 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";
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.

+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Core/Worlds/index.html b/build/Tutorials/Components/Core/Worlds/index.html new file mode 100644 index 00000000..ac034638 --- /dev/null +++ b/build/Tutorials/Components/Core/Worlds/index.html @@ -0,0 +1,16 @@ + + + + + +Worlds | That Open Docs + + + + +
+
Skip to main content

Worlds

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🌎 Creating our 3D world​

In this tutorial you'll learn how to create a simple scene using @thatopen/components.

Hello world!

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.

In this tutorial, we will import:

  • Three.js to get some 3D entities for our app.
  • @thatopen/components to set up the barebone of our app.
  • @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 * as OBC from "openbim-components";
import Stats from "stats.js";

🖼️ 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:

const container = document.getElementById("container")!;

🚀 Creating a components instance​

Now we will create a new instance of the 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.

Don't forget to dispose it when you are done!

Once you are done with your application, you need to dispose the 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.

const components = new OBC.Components();

🌎 Setting up the world​

Now we are ready to create our first world. We will use the Worlds component to manage all the worlds in your application. Instead of instancing it, we can get it from the Components instance. All components are singleton, so this is always a better way to get them.

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

We can create a new world by calling the create method of the 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.

const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

Now we can set the scene, the camera and the renderer of the world, and call the init method to start the rendering process.

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

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

We could also add some lights, but the SimpleScene class can do that easier for us using its setup method:

world.scene.setup();

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

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

🧩 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 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!

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel label="Worlds Tutorial" style="position: fixed; top: 5px; right: 5px" active>
      <bim-panel-section style="padding-top: 10px">
      
        <bim-color-input 
          label="Background Color" color="#202932" 
          @input="${({ target }: { target: BUI.ColorInput }) => {
            world.scene.three.background = new THREE.Color(target.color);
          }}">
        </bim-color-input>
        
        <bim-number-input 
          slider step="0.1" label="Directional lights intensity" value="1.5" min="0.1" max="10"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            for (const child of world.scene.three.children) {
              if (child instanceof THREE.DirectionalLight) {
                child.intensity = target.value;
              }
            }
          }}">
        </bim-number-input>
        
        <bim-number-input 
          slider step="0.1" label="Ambient light intensity" value="1" min="0.1" max="5"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            for (const child of world.scene.three.children) {
              if (child instanceof THREE.AmbientLight) {
                child.intensity = target.value;
              }
            }
          }}">
        </bim-number-input>
        
      </bim-panel-section>
    </bim-panel>
    `;
});

document.body.append(panel);

⏱️ 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";
world.renderer.onBeforeUpdate.add(() => stats.begin());
world.renderer.onAfterUpdate.add(() => stats.end());

🎉 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.

+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/AngleMeasurement/index.html b/build/Tutorials/Components/Front/AngleMeasurement/index.html new file mode 100644 index 00000000..3c9e7b4e --- /dev/null +++ b/build/Tutorials/Components/Front/AngleMeasurement/index.html @@ -0,0 +1,36 @@ + + + + + +AngleMeasurement | That Open Docs + + + + +
+
Skip to main content

AngleMeasurement

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

📏 Dimensions Tool​

At times, you may need to compute the dimensions of an object or measure the distance between two elements. +Elements must be precisely aligned when working on complex models. +Dimension Tool allows you to perform measurements effortlessly.

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

This tutorial will show you how to add Dimension Tool to your projects, +which can be used to acquire accurate dimensions for any 3D Object.🔭

🎲 Creating a Cube Mesh​

For this tutorial we will use a Cube, you can add any geometry as per your preference. +We will create a Cube +with 3x3x3 dimensions and use red color for the material.

import Stats from "stats.js";
import * as OBC from "openbim-components";
import * as THREE from "three";
import * as OBCF 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,
  OBCF.PostproductionRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBCF.PostproductionRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

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

world.scene.setup();

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

Now, we will add the Cube to the Scene. We must also add the cube to components.meshes, +which is simply an array of all the meshes in the Scene.🗄️

const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1.5, 0);
Collection of Meshes

📦 Components.meshes keeps all your meshes including IFC Models, Fragments in +one place.

🛠️ Creating Dimension Tool​

A lot of logic is usually needed to compute dimensions for any item, beginning with ray casting, +finding the vertices to snap to, and rendering the UI for every line element.🙄 +This may appear to be a lot of effort, but we are handling all the heavy lifting for you, +and you only need to write a few lines for creating the Dimension Tool.💪

world.scene.three.add(cube);
world.meshes.add(cube);

We will build dimensions by supplying the components to OBC.SimpleDimensions.

DIMENSIONS AND UI

Read the Simple Dimensions API for more on this. +The Simple Dimensions API provides you with a compact UI as well to display the measurements.

🎨 SimpleDimensions has several properties that help you to customize the behaviour of the Line Element. +One such property which you can use is dimensions.color which modifies the color of the Line Element.

const angles = components.get(OBCF.AngleMeasurement);
angles.world = world;

🖱️ Managing Events​

You can use the Dimension Tool to construct several dimension lines. Let's see how you handle them.

✍️ Creating the Dimensions​

Now that we've generated the dimensions object, we need to attach the line tooltip to a vertex of the 3D object. +We'll use the double click event to invoke dimensions.create(). +When this event occurs, a line element is generated, +and the distance is calculated in real-time inside the label associated with that line.🏷️

angles.enabled = true;

🧹 Deleting the Dimensions​

Now that we know how to make multiple dimension lines, we must also know how to delete them when necessary. +Dimensions can be removed using dimensions.delete(). +dimensions.delete() deletes the dimension on which your mouse pointer is now located.

Deleting all the Dimensions

❎ If you want to safely delete all the dimensions that were created you can simply call +dimensions.deleteAll()

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

🎛️ Check Toolbar and UIManager tutorial if you have any doubts!

🖌️ Adding Styles​

Few final things, we need to add styles for the labels which display the measurement information.

  • ifcjs-dimension-label - The label which is used to show the metric value after both the tooltips are attached.
  • ifcjs-dimension-label:hover - Changing the styling when someone hovers on the dimension label.
  • ifcjs-dimension-preview - The label which shows the measurement when the tooltip is not yet attached.
style
.ifcjs-dimension-label {
background-color: black;
font-family: sans-serif;
color: white;
padding: 8px;
border-radius: 8px;
pointer-events: all;
transition: background-color 200ms ease-in-out;
}
.ifcjs-dimension-label:hover {
background-color: grey;
}
.ifcjs-dimension-preview {
background-color: #ffffff;
width: 2rem;
height: 2rem;
opacity: 0.3;
padding: 8px;
border-radius: 100%;
}

Congratulations 🎉 on completing this tutorial! Now you can measure any BIM Model or any 3D Object easily using +Simple Dimension Component 📐 +Let's keep it up and check out another tutorial! 🎓

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

// const mainToolbar = new OBC.Toolbar(components, {
//   name: "Main Toolbar",
//   position: "bottom",
// });
// mainToolbar.addChild(dimensions.uiElement.get("main"));
// components.ui.addToolbar(mainToolbar);
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/AreaMeasurement/index.html b/build/Tutorials/Components/Front/AreaMeasurement/index.html new file mode 100644 index 00000000..de77ccb8 --- /dev/null +++ b/build/Tutorials/Components/Front/AreaMeasurement/index.html @@ -0,0 +1,36 @@ + + + + + +AreaMeasurement | That Open Docs + + + + +
+
Skip to main content

AreaMeasurement

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

📏 Dimensions Tool​

At times, you may need to compute the dimensions of an object or measure the distance between two elements. +Elements must be precisely aligned when working on complex models. +Dimension Tool allows you to perform measurements effortlessly.

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

This tutorial will show you how to add Dimension Tool to your projects, +which can be used to acquire accurate dimensions for any 3D Object.🔭

🎲 Creating a Cube Mesh​

For this tutorial we will use a Cube, you can add any geometry as per your preference. +We will create a Cube +with 3x3x3 dimensions and use red color for the material.

import Stats from "stats.js";
import * as OBC from "openbim-components";
import * as THREE from "three";
import * as OBCF 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,
  OBCF.PostproductionRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBCF.PostproductionRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

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

world.scene.setup();

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

Now, we will add the Cube to the Scene. We must also add the cube to components.meshes, +which is simply an array of all the meshes in the Scene.🗄️

const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1.5, 0);
Collection of Meshes

📦 Components.meshes keeps all your meshes including IFC Models, Fragments in +one place.

🛠️ Creating Dimension Tool​

A lot of logic is usually needed to compute dimensions for any item, beginning with ray casting, +finding the vertices to snap to, and rendering the UI for every line element.🙄 +This may appear to be a lot of effort, but we are handling all the heavy lifting for you, +and you only need to write a few lines for creating the Dimension Tool.💪

world.scene.three.add(cube);
world.meshes.add(cube);

We will build dimensions by supplying the components to OBC.SimpleDimensions.

DIMENSIONS AND UI

Read the Simple Dimensions API for more on this. +The Simple Dimensions API provides you with a compact UI as well to display the measurements.

🎨 SimpleDimensions has several properties that help you to customize the behaviour of the Line Element. +One such property which you can use is dimensions.color which modifies the color of the Line Element.

const areaDims = new OBCF.AreaMeasurement(components);
areaDims.world = world;

🖱️ Managing Events​

You can use the Dimension Tool to construct several dimension lines. Let's see how you handle them.

✍️ Creating the Dimensions​

Now that we've generated the dimensions object, we need to attach the line tooltip to a vertex of the 3D object. +We'll use the double click event to invoke dimensions.create(). +When this event occurs, a line element is generated, +and the distance is calculated in real-time inside the label associated with that line.🏷️

areaDims.enabled = true;

🧹 Deleting the Dimensions​

Now that we know how to make multiple dimension lines, we must also know how to delete them when necessary. +Dimensions can be removed using dimensions.delete(). +dimensions.delete() deletes the dimension on which your mouse pointer is now located.

Deleting all the Dimensions

❎ If you want to safely delete all the dimensions that were created you can simply call +dimensions.deleteAll()

container.ondblclick = () => areaDims.create();
container.oncontextmenu = () => areaDims.endCreation();

🎛️ Check Toolbar and UIManager tutorial if you have any doubts!

🖌️ Adding Styles​

Few final things, we need to add styles for the labels which display the measurement information.

  • ifcjs-dimension-label - The label which is used to show the metric value after both the tooltips are attached.
  • ifcjs-dimension-label:hover - Changing the styling when someone hovers on the dimension label.
  • ifcjs-dimension-preview - The label which shows the measurement when the tooltip is not yet attached.
style
.ifcjs-dimension-label {
background-color: black;
font-family: sans-serif;
color: white;
padding: 8px;
border-radius: 8px;
pointer-events: all;
transition: background-color 200ms ease-in-out;
}
.ifcjs-dimension-label:hover {
background-color: grey;
}
.ifcjs-dimension-preview {
background-color: #ffffff;
width: 2rem;
height: 2rem;
opacity: 0.3;
padding: 8px;
border-radius: 100%;
}

Congratulations 🎉 on completing this tutorial! Now you can measure any BIM Model or any 3D Object easily using +Simple Dimension Component 📐 +Let's keep it up and check out another tutorial! 🎓

window.onkeydown = (event) => {
  if (event.code === "Delete" || event.code === "Backspace") {
    // WORK IN PROGRESS
    // dimensions.delete();
  }
};
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/EdgesClipper/index.html b/build/Tutorials/Components/Front/EdgesClipper/index.html new file mode 100644 index 00000000..4542d163 --- /dev/null +++ b/build/Tutorials/Components/Front/EdgesClipper/index.html @@ -0,0 +1,35 @@ + + + + + +EdgesClipper | That Open Docs + + + + +
+
Skip to main content

EdgesClipper

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

⭕️ Aesthetic Clipping Edges​

You can build whole BIM application using Components.💪 +One such essential component is Edges Clipper which helps you to add Clipping Planes along +with beautiful yet functional edges.🖍️

Advanced but Simple to use

⚡️ Simple Clipper and Edges Clipper are similar, but Edges Clipper offers more advanced options. +If you want to learn more about Simple Clipper, visit the tutorial.

In this tutorial, we'll use the EdgesClipper to slice two distinct Cubes that each have a unique set of edge effects. +With the help of this tutorial, you can quickly add Clipping Planes and Configurable Edges to your project.🚀

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

🧩 Adding Objects to Scene​

Let's start by adding two Cubes, we will create a Box Geometry and use it for both Meshes.

import Stats from "stats.js";
import * as BUI from "@thatopen/ui";
import * as THREE from "three";
import * as OBC from "openbim-components";
import * as OBCF 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,
  OBCF.PostproductionRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBCF.PostproductionRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

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

components.init();

world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

world.scene.setup();

const grids = components.get(OBC.Grids);
grids.config.color.setHex(0x666666);
const grid = grids.create(world);
world.renderer.postproduction.customEffects.excludedMeshes.push(grid.three);
Storing Components

🧰 After adding cubes to the scene, we must also add them to components.meshes, +which is just an array of all the meshes in the scene.🗄️

⚔️ Slicing Some Cubes​

Now that the setup is complete. Let's get started with the interesting part! +We will create Edges Clipper and pass the components and +Edges Plane to the constructor.

const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);

const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-2, 1.5, 0);
world.scene.three.add(cube);
world.meshes.add(cube);

const cube2 = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube2.position.set(2, 1.5, 0);
world.scene.three.add(cube2);
world.meshes.add(cube2);
PLANE WITH EDGES and TRANSFORMATION CONTROLS

🟦 Edges Plane helps us in adding Clipping Planes to the Clipper Component.

🖌️ Creating Fine Edges​

Let's now prepare the materials that will be visible on the cube edges. +We will use LineMaterial for creating edges.

💫 Using Line Material​

After creating the Line Material we will add it to the clipper +using clipper.styles.create(styleName: string, mesh: Mesh[], material: LineMaterial)

const casters = components.get(OBC.Raycasters);
casters.get(world);

const clipper = components.get(OBC.Clipper);
clipper.enabled = true;

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

🤝 Performing Clipping Events​

We need a method for instantly producing a clipping plane; +this can be accomplished with either a single click or a double click of the mouse. +For this tutorial, we will use Double Click, to create a Clipper that will generate a +plane on the 3D object's face.

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

edges.styles.create(
  "Red lines",
  new Set([cube]),
  world,
  blueLine,
  blueFill,
  blueOutline,
);

const salmonFill = new THREE.MeshBasicMaterial({ color: "salmon", side: 2 });
const redLine = new THREE.LineBasicMaterial({ color: "red" });
const redOutline = new THREE.MeshBasicMaterial({
  color: "red",
  opacity: 0.5,
  side: 2,
  transparent: true,
});

edges.styles.create(
  "Blue lines",
  new Set([cube2]),
  world,
  redLine,
  salmonFill,
  redOutline,
);
Raycaster below the hood 🎩

We use the Simple Raycaster to determine if the intersection has occurred. +The clipper places a plane after detecting the face on which the mouse was clicked. +Here, the EdgesClipper handles everything for you 😎

🧹 Deleting the Clipping Planes​

Now that we know how to make multiple clippers, we must also know how to delete them when necessary. +Clipping Edges can be removed using clipper.delete() or clipper.delete(plane), which deletes a single plane. +clipper.delete() deletes the plane on which your mouse pointer is now located.

container.ondblclick = () => clipper.create(world);
Delete all Clipping Planes

❎ If you want to safely delete all the clipping edges that were created you can simply call +clipper.deleteAll()

Great job! 🎉 Using the Clipper Component, +you can now effortlessly check BIM models or any other 3D objects with stunning edges.🧐 +Let's keep it up and check out another tutorial! 🎓

window.onkeydown = (event) => {
  if (event.code === "Delete" || event.code === "Backspace") {
    clipper.delete(world);
  }
};
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/IfcStreamer/index.html b/build/Tutorials/Components/Front/IfcStreamer/index.html new file mode 100644 index 00000000..22caf8d8 --- /dev/null +++ b/build/Tutorials/Components/Front/IfcStreamer/index.html @@ -0,0 +1,25 @@ + + + + + +IfcStreamer | That Open Docs + + + + +
+
Skip to main content

IfcStreamer

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

Now, streaming works by updating the scene depending on the user's perspective +and getting the necessary geometries from the backend. A simple way to achieve +this is by updating the scene each time the user stops the camera:

import Stats from "stats.js";
// @ts-ignore
import * as dat from "three/examples/jsm/libs/lil-gui.module.min";
import * as OBC from "openbim-components";
import * as OBCF from "../..";

// customEffects.excludedMeshes.push(grid.get());

// rendererComponent.postproduction.enabled = true;

// Set up scene (see SimpleScene tutorial)

const container = document.getElementById("container")!;

const components = new OBC.Components();

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

const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

world.scene.setup();

// rendererComponent.postproduction.enabled = true;

world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

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

const loader = new OBCF.IfcStreamer(components);
loader.world = world;
loader.url = "../../../../../resources/streaming/";
// const fragments = components.get(OBC.FragmentsManager);

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

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

  console.log(model);
  const props = await model.getProperties(186);
  console.log(props);
}

await loadModel(
  "../../../../../resources/streaming/small.ifc-processed.json",
  "../../../../../resources/streaming/small.ifc-processed-properties.json",
);

As you can imagine, downloading the geometries from the server each time can +take time, especially for heavier geometries. This is why the stream loader +automatically caches the files locally to get them much faster. This means that +the loading experience the first time might be a bit slower, but then later +it will be much better. You can control this using the useCache property +and clear the cache using the clearCache() method:

world.camera.controls.addEventListener("sleep", () => {
  loader.culler.needsUpdate = true;
});

You can also customize the loader through the culler property:

  • Threshold determines how bit an object must be in the screen to stream it.
  • maxHiddenTime determines how long an object must be lost to remove it from the scene.
  • maxLostTime determines how long an object must be lost to remove it from memory.
loader.useCache = true;

async function clearCache() {
  await loader.clearCache();
  window.location.reload();
}

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.

loader.culler.threshold = 10;
loader.culler.maxHiddenTime = 1000;
loader.culler.maxLostTime = 40000;
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/LengthMeasurement/index.html b/build/Tutorials/Components/Front/LengthMeasurement/index.html new file mode 100644 index 00000000..a6a482b6 --- /dev/null +++ b/build/Tutorials/Components/Front/LengthMeasurement/index.html @@ -0,0 +1,37 @@ + + + + + +LengthMeasurement | That Open Docs + + + + +
+
Skip to main content

LengthMeasurement

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

📏 Dimensions Tool​

At times, you may need to compute the dimensions of an object or measure the distance between two elements. +Elements must be precisely aligned when working on complex models. +Dimension Tool allows you to perform measurements effortlessly.

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

This tutorial will show you how to add Dimension Tool to your projects, +which can be used to acquire accurate dimensions for any 3D Object.🔭

🎲 Creating a Cube Mesh​

For this tutorial we will use a Cube, you can add any geometry as per your preference. +We will create a Cube +with 3x3x3 dimensions and use red color for the material.

import Stats from "stats.js";

import * as OBC from "openbim-components";
import * as THREE from "three";
import * as BUI from "@thatopen/ui";
import * as OBCF 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,
  OBCF.PostproductionRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBCF.PostproductionRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

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

world.scene.setup();

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

Now, we will add the Cube to the Scene. We must also add the cube to components.meshes, +which is simply an array of all the meshes in the Scene.🗄️

const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1.5, 0);
Collection of Meshes

📦 Components.meshes keeps all your meshes including IFC Models, Fragments in +one place.

🛠️ Creating Dimension Tool​

A lot of logic is usually needed to compute dimensions for any item, beginning with ray casting, +finding the vertices to snap to, and rendering the UI for every line element.🙄 +This may appear to be a lot of effort, but we are handling all the heavy lifting for you, +and you only need to write a few lines for creating the Dimension Tool.💪

world.scene.three.add(cube);
world.meshes.add(cube);

We will build dimensions by supplying the components to OBC.SimpleDimensions.

DIMENSIONS AND UI

Read the Simple Dimensions API for more on this. +The Simple Dimensions API provides you with a compact UI as well to display the measurements.

🎨 SimpleDimensions has several properties that help you to customize the behaviour of the Line Element. +One such property which you can use is dimensions.color which modifies the color of the Line Element. +Now, let's enable dimensions and tell them to be snapped at a distance of one unit. +snapDistance helps in attaching the tooltip temporarily at regular intervals, +making it easier to interact with items.📍

const dimensions = new OBCF.LengthMeasurement(components);
dimensions.world = world;

🖱️ Managing Events​

You can use the Dimension Tool to construct several dimension lines. Let's see how you handle them.

✍️ Creating the Dimensions​

Now that we've generated the dimensions object, we need to attach the line tooltip to a vertex of the 3D object. +We'll use the double click event to invoke dimensions.create(). +When this event occurs, a line element is generated, +and the distance is calculated in real-time inside the label associated with that line.🏷️

dimensions.enabled = true;
dimensions.snapDistance = 1;

🧹 Deleting the Dimensions​

Now that we know how to make multiple dimension lines, we must also know how to delete them when necessary. +Dimensions can be removed using dimensions.delete(). +dimensions.delete() deletes the dimension on which your mouse pointer is now located.

Deleting all the Dimensions

❎ If you want to safely delete all the dimensions that were created you can simply call +dimensions.deleteAll()

container.ondblclick = () => dimensions.create();
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/PostproductionRenderer/index.html b/build/Tutorials/Components/Front/PostproductionRenderer/index.html new file mode 100644 index 00000000..e7575857 --- /dev/null +++ b/build/Tutorials/Components/Front/PostproductionRenderer/index.html @@ -0,0 +1,22 @@ + + + + + +PostproductionRenderer | That Open Docs + + + + +
+
Skip to main content

PostproductionRenderer

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🧪 Cool Post-Production Effects​

Post-production effects enrich your 3D scenes. There are several post-production effects, such as +adding shadows, rendering outlines, adding ambient occlusion and applying bloom, that can enhance +and make your scene look cool.🍹

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

In this tutorial we will use Post-Production Renderer to add neat Outlines and Ambient Occlusion to the 3D Model.🦾

🏢 Adding Fragments​

We'll start by adding a Fragment to our scene using Fragment Manager. +We'll use a simple fragment for the purposes of this tutorial, but the code is capable of handling big files as well.🏗️

Using Fragment Manager!

🏋️ There is a dedicated tutorial on how to use Fragment Manager to load IFC files!

import * as THREE from "three";
import Stats from "stats.js";
import * as BUI from "@thatopen/ui";
import * as OBC from "openbim-components";
import * as OBCF from "../..";

// @ts-ignore

const container = document.getElementById("container")!;

const components = new OBC.Components();

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

const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBCF.PostproductionRenderer
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBCF.PostproductionRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);

components.init();

world.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);

world.scene.setup();

const grids = components.get(OBC.Grids);
grids.config.color.set(0x666666);
const grid = grids.create(world);

// Set up stats

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

🎬 Activating the Post-Production​

We will activate the post-production effect. +Also, we will enable the visibility for post-production layer.

  • postproduction.active - Enable or Disable the active status of the post-processing effect
  • postproduction.visible - Toggle the visibility of post-processing layer that is created to display the effect.
const fragments = new OBC.FragmentsManager(components);
const file = await fetch("../../../../../resources/small.frag");
const data = await file.arrayBuffer();
const buffer = new Uint8Array(data);
const model = fragments.load(buffer);
world.scene.three.add(model);

// const meshes = [];

// const culler = new OBC.ScreenCuller(components);
// culler.setup();

// for (const fragment of model.items) {
//   meshes.push(fragment.mesh);
//   culler.elements.add(fragment.mesh);
// }
// culler.elements.needsUpdate = true;

// const controls = cameraComponent.controls;
// controls.addEventListener("controlend", () => {
//   culler.elements.needsUpdate = true;
// });

Congratulations 🎉 on completing this tutorial! Now you know how to add cool effects easily using +Post Production 🖼️ +Let's keep it up and check out another tutorial! 🎓

const { postproduction } = world.renderer;
postproduction.enabled = true;
postproduction.customEffects.excludedMeshes.push(grid.three);

const ao = postproduction.n8ao.configuration;

BUI.Manager.init();

const panel = BUI.Component.create<BUI.PanelSection>(() => {
  return BUI.html`
    <bim-panel label="Clipper Tutorial" style="position: fixed; top: 5px; right: 5px; max-height: 80vh" active>
    
      <bim-panel-section fixed label="Gamma" style="padding-top: 10px">
        <bim-checkbox checked label="Gamma Correction"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            postproduction.setPasses({ gamma: target.value });
          }}">
        </bim-checkbox>
      </bim-panel-section>
      
      <bim-panel-section fixed label="Custom effects" style="padding-top: 10px">
        <bim-checkbox checked label="Custom effects"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            postproduction.setPasses({ custom: target.value });
          }}">
        </bim-checkbox>    
        
        <bim-checkbox checked label="Gamma Correction"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            postproduction.customEffects.glossEnabled = target.value;
          }}">
        </bim-checkbox>   
      
        <bim-number-input 
          slider step="0.01" label="Opacity" 
          value="${postproduction.customEffects.opacity}" min="0" max="1"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            postproduction.customEffects.opacity = target.value;
          }}">
        </bim-number-input>  
            
        <bim-number-input 
          slider step="0.1" label="Tolerance" 
          value="${postproduction.customEffects.tolerance}" min="0" max="6"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            postproduction.customEffects.tolerance = target.value;
          }}">
        </bim-number-input> 
                      
        <bim-color-input label="Line color" 
          @input="${({ target }: { target: BUI.ColorInput }) => {
            const color = new THREE.Color(target.value.color);
            postproduction.customEffects.lineColor = color.getHex();
          }}">
        </bim-color-input>  
      
        <bim-number-input 
          slider label="Gloss exponent" step="0.1" 
          value="${postproduction.customEffects.glossExponent}" min="0" max="5"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            postproduction.customEffects.glossExponent = target.value;
          }}">
        </bim-number-input>    
           
        <bim-number-input 
          slider label="Max gloss" step="0.05" 
          value="${postproduction.customEffects.maxGloss}" min="-2" max="2"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            postproduction.customEffects.maxGloss = target.value;
          }}">
        </bim-number-input>  
                  
        <bim-number-input 
          slider label="Min gloss" step="0.05" 
          value="${postproduction.customEffects.minGloss}" min="-2" max="2"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            postproduction.customEffects.minGloss = target.value;
          }}">
        </bim-number-input> 
        
      </bim-panel-section>
      
      <bim-panel-section fixed label="Ambient Oclussion">
      
        <bim-checkbox label="AO enabled"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            postproduction.setPasses({ ao: target.value });
          }}">
        </bim-checkbox>  
                
        <bim-checkbox checked label="Half resolution"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            ao.halfRes = target.value;
          }}">
        </bim-checkbox>  
                      
        <bim-checkbox label="Screen space radius"
          @change="${({ target }: { target: BUI.Checkbox }) => {
            ao.screenSpaceRadius = target.value;
          }}">
        </bim-checkbox>
        
                              
        <bim-color-input label="AO color" 
          @input="${({ target }: { target: BUI.ColorInput }) => {
            const color = new THREE.Color(target.value.color);
            ao.color.r = color.r;
            ao.color.g = color.g;
            ao.color.b = color.b;
          }}">
        </bim-color-input>     
        
        <bim-number-input 
          slider label="AO Samples" step="1" 
          value="${ao.aoSamples}" min="1" max="16"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.aoSamples = target.value;
          }}">
        </bim-number-input>    
            
        <bim-number-input 
          slider label="Denoise Samples" step="1" 
          value="${ao.denoiseSamples}" min="1" max="16"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.denoiseSamples = target.value;
          }}">
        </bim-number-input>   
                  
        <bim-number-input 
          slider label="Denoise Radius" step="1" 
          value="${ao.denoiseRadius}" min="0" max="100"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.denoiseRadius = target.value;
          }}">
        </bim-number-input>   
                       
        <bim-number-input 
          slider label="AO Radius" step="1" 
          value="${ao.aoRadius}" min="0" max="16"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.aoRadius = target.value;
          }}">
        </bim-number-input>  
                              
        <bim-number-input 
          slider label="Distance falloff" step="1" 
          value="${ao.distanceFalloff}" min="0" max="16"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.distanceFalloff = target.value;
          }}">
        </bim-number-input> 
                                      
        <bim-number-input 
          slider label="Intensity" step="1" 
          value="${ao.intensity}" min="0" max="16"
          @change="${({ target }: { target: BUI.NumberInput }) => {
            ao.intensity = target.value;
          }}">
        </bim-number-input> 
        
      </bim-panel-section>
      
    </bim-panel>
    `;
});

document.body.append(panel);
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/Front/ShadowDropper/index.html b/build/Tutorials/Components/Front/ShadowDropper/index.html new file mode 100644 index 00000000..7ae9d93e --- /dev/null +++ b/build/Tutorials/Components/Front/ShadowDropper/index.html @@ -0,0 +1,32 @@ + + + + + +ShadowDropper | That Open Docs + + + + +
+
Skip to main content

ShadowDropper

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

🌒 Adding Realism​

Have you ever wondered what makes a scene look realistic? +Adding Shadow to 3D objects may quickly add depth to your creations.😎 +In this tutorial, we'll show you how to use Shadow Dropper to quickly apply shadows. +In less than 5 minutes, you can create realistic shadows for all the meshes inside your scene.⏱️

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

🎲 Creating a Cube Mesh​

Let's start by adding a Cube, which we can dissect. +We will create a Cube +with 3x3x3 dimensions and use red color for the material.

import * as THREE from "three";
import * as OBC from "openbim-components";
import Stats from "stats.js";
import * as BUI from "@thatopen/ui";
import * as OBCF 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,
  OBCF.RendererWith2D
>();

world.scene = new OBC.SimpleScene(components);
world.renderer = new OBCF.RendererWith2D(components, container);
world.camera = new OBC.SimpleCamera(components);

world.scene.setup();

components.init();

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

container.appendChild(world.renderer.three2D.domElement);

const grids = components.get(OBC.Grids);
grids.config.color.setHex(0xdddddd);
grids.create(world);

Now, we will add the Cube to the Scene. We must also add the cube to components.meshes, +which is simply an array of all the meshes in the Scene 🗄️. +components.meshes acts as a store to help you manage your elements centrally.

const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1.5, 0);

🌚 Adding Beautiful Shadow​

This completes our scene setup. Let's now include Shadows, +we'll use ShadowDropper and pass components as an argument to it.🔗

world.scene.three.background = new THREE.Color("white");
world.scene.three.add(cube);
world.meshes.add(cube);

Shadow Dropper Component not only adds shadows to the scene, but it also helps you manage the Shadows. +To obtain the required results, you can alter the ShadowDropper parameters.🔧

const shadows = new OBCF.ShadowDropper(components);
  • shadowExtraScalarFactor - With this, the shadow's area of impact can be adjusted.
  • darkness - This is used to increase or decrease the intensity of Shadow.
    SHADOW and realism ✨

    Read the Shadow Dropper API for more on this. +The Shadow Dropper API offers more configuration options to render realistic shadows.

🎨 Rendering Shadow​

Now, we will use Shadow Dropper to create shadows for the element. +We will use renderShadow() to generate shadow for the cube we created.

shadows.shadowExtraScaleFactor = 15;
shadows.shadowOffset = 0.1;

renderShadow requires two parameter, the element and a shadowID. +shadowID needs to be unique for the entire scene.

Deleting Shadows

❎ If you want to safely delete the shadow using shadowID you can call +shadows.deleteShadow(shadowId);

Congratulations 🎉 on completing this tutorial! +Now you can add shadows to BIM Models or any 3D Object in minutes using +Shadow Dropper 🌗 +Let's keep it up and check out another tutorial! 🎓

const shadowID = "example";
shadows.create([cube], shadowID, world);
+ + + + \ No newline at end of file diff --git a/build/Tutorials/Components/index.html b/build/Tutorials/Components/index.html new file mode 100644 index 00000000..31b40334 --- /dev/null +++ b/build/Tutorials/Components/index.html @@ -0,0 +1,18 @@ + + + + + +Components | That Open Docs + + + + +
+
Skip to main content

Components

TOC|documentation|demo|community|npm package

cover

Open BIM Components

NPM Package +NPM Package +Tests

This library is a collection of BIM tools based on Three.js and other libraries. It includes pre-made features to easily build browser-based 3D BIM applications, such as postproduction, dimensions, floorplan navigation, DXF export and much more.

Packages​

This library contains 2 packages:

@thatopen/components - The core functionality. Compatible both with browser and Node.js environments.

@thatopen/components-front - Features exclusive for browser environments.

Usage​

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);
+ + + + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/Core/Component/index.html b/build/Tutorials/UserInterface/Core/Component/index.html new file mode 100644 index 00000000..78e78171 --- /dev/null +++ b/build/Tutorials/UserInterface/Core/Component/index.html @@ -0,0 +1,19 @@ + + + + + +Component | That Open Docs + + + + +
+
Skip to main content

Component

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

Leveling up your app with custom components! 🔌​

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 lit-html 💪. +The UIComponent class has a static method to create functional components (UI defined as a function) that can be updated anytime. The method is UIComponent.create.

note

Despite the UIComponent 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.

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>
  `;
});
danger

Remember to first call UIManager.init() before anything else!

UIComponent.create requires you to provide a function declaration that returns an HTML string made with the html tag function, and the result of the function is the HTMLElement it self.

note

Tag functions are special declarations that are always set before a template literals to process the string.

Did you notice the component is named 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). +The 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. +The component we just created is stateless, because it doesn't have any state in which its data depends on.

Creating a statefull component​

Now, let's take a look at how to create a component that can be updated based on state changes:

interface PanelSectionUIState {
  label: string;
  counter: number;
}

const [statefullPanelSection, updateStatefullPanelSection] =
  BUI.Component.create<BUI.PanelSection, PanelSectionUIState>(
    (state: PanelSectionUIState) => {
      const { label, counter } = state;
      const msg = `This panel section has been updated ${counter} ${counter === 1 ? "time" : "times"}`;
      return BUI.html`
      <bim-panel-section label=${label}>
        <bim-label label=${msg}></bim-label>
      </bim-panel-section>
    `;
    },
    { label: "Statefull Panel Section", counter: 0 },
  );

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:

  1. 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.
  2. When the component is statefull, UIComponent.create must have a second argument to specify the initial state of the component.
  3. Now, UIComponent.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.
    note

    As for now, a statefull component can't update itself! However, you can nest other components that updates the state of some other.

Nesting components​

Now, in order to see the two components in action, let's create a third component to integrate (nest) the two previous:

const panel = BUI.Component.create<BUI.Panel>(() => {
  let counter = 0;
  const onUpdateBtnClick = () => {
    counter++;
    if (counter >= 5) {
      updateStatefullPanelSection({
        label: "Powered Statefull Panel Section 💪",
        counter,
      });
    } else {
      updateStatefullPanelSection({ counter });
    }
  };

  return BUI.html`
    <bim-panel label="My Panel">
      <bim-panel-section label="Update Functions">
        <bim-button @click=${onUpdateBtnClick} label="Update Statefull Section"></bim-button>
      </bim-panel-section>
      ${statelessPanelSection}
      ${statefullPanelSection}
    </bim-panel>
  `;
});

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 bim-button in order to update the state of the statefullPanelSection we created earlier. A couple of things to notice here:

  1. 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.
  2. 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.
  3. 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.
  4. You see how we integrated the two previous components into the panel? Yes, its as easy as adding them as an expression (${statelessPanelSection} and ${statefullPanelSection} in this case).
    tip

    In order to know the syntax you can write inside the template literal tagged by the html function, look at the lit-html documentation.

    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-components-obc or @thatopen/ui-components-three 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/OBC/ClassificationsTree/index.html b/build/Tutorials/UserInterface/OBC/ClassificationsTree/index.html new file mode 100644 index 00000000..217f44bf --- /dev/null +++ b/build/Tutorials/UserInterface/OBC/ClassificationsTree/index.html @@ -0,0 +1,18 @@ + + + + + +ClassificationsTree | That Open Docs + + + + +
+
Skip to main content

ClassificationsTree

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

Displaying elements grouping 📦​

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 💥, grouping elements based on their construction activities 🔨, or grouping fininshed elements during the construction phase ✅. +Other 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 ClassificationsTree functional component!

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: {},
  });

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

  const classifications = {
    Entities: ["entities", "predefinedTypes"],
    "Predefined Types": ["predefinedTypes"],
  };

  updateClassificationsTree({ classifications });
});

The classifications value is just an object where they keys are the names in the tree, and the values are the orders in which you want to group the elements. So, for example, "Entities" groups the elements based on their entities and then based on their predefined types. Needless to say, the classifications need to be computed before they can be used on the tree. You can check the system names from classifier.list. +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> 
  `;
});

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. 🥳

+ + + + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/ElementProperties/index.html b/build/Tutorials/UserInterface/OBC/ElementProperties/index.html new file mode 100644 index 00000000..4fe5cfcc --- /dev/null +++ b/build/Tutorials/UserInterface/OBC/ElementProperties/index.html @@ -0,0 +1,16 @@ + + + + + +ElementProperties | That Open Docs + + + + +
+
Skip to main content

ElementProperties

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

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!

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("/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 properties for each selected element, then having the model into the scene is obvious, right?

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 IfcRelationsIndexer component from @thatopen/components to speed up the process.

const indexer = components.get(OBC.IfcRelationsIndexer);
await indexer.process(model);

Once the relations are processed, the Element Properties component has everything it needs in order to display the properties in a cool way 😎.

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;
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: {} }),
);

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"></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! 💪

+ + + + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html b/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html new file mode 100644 index 00000000..a3eeaad3 --- /dev/null +++ b/build/Tutorials/UserInterface/OBC/EntityAttributes/index.html @@ -0,0 +1,16 @@ + + + + + +EntityAttributes | That Open Docs + + + + +
+
Skip to main content

EntityAttributes

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

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!

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 "openbim-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);
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("/resources/small.ifc");
const buffer = await file.arrayBuffer();
const typedArray = new Uint8Array(buffer);
const model = await ifcLoader.load(typedArray);
world.scene.three.add(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);

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.TableDefinition = {
  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 label=${entity} style=${BUI.styleMap(style)}></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 label=${type} style=${BUI.styleMap(style)}></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 label=${value} style=${BUI.styleMap(style)}></bim-label>`;
  },
};

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;

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);
+ + + + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/OBC/ModelsList/index.html b/build/Tutorials/UserInterface/OBC/ModelsList/index.html new file mode 100644 index 00000000..4d135627 --- /dev/null +++ b/build/Tutorials/UserInterface/OBC/ModelsList/index.html @@ -0,0 +1,16 @@ + + + + + +ModelsList | That Open Docs + + + + +
+
Skip to main content

ModelsList

Source

Copying and pasting? We got you covered! You can find the full source code of this tutorial here.

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

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> 
  `;
});

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 🥳

+ + + + \ No newline at end of file diff --git a/build/Tutorials/UserInterface/index.html b/build/Tutorials/UserInterface/index.html new file mode 100644 index 00000000..c6d63d52 --- /dev/null +++ b/build/Tutorials/UserInterface/index.html @@ -0,0 +1,19 @@ + + + + + +UserInterface | That Open Docs + + + + +
+
Skip to main content

UserInterface

TOC|Documentation|Demo|Community|NPM Package

cover

BIM UI Components

BIM UI Components is the ultimate set of user interface elements you need to create fully featured BIM applications 🚀


How it works? 🤓​

This library is a monorepo where separate but correlated repositories exists in the packages folder. The main repository resides in core.


* **@thatopen/ui:** This is the core library. Here, you will find all the core components needed to build your user interfaces, so you can expect a button, panel, toolbar, table, inputs, and some other components.

Now, from the @thatopen/ui you can't expect to have functionalities in your components. In other words, if you need a button component to load an IFC file from @thatopen/components you will need to code that by yourself 🙁. However, as the goal of the library is to save you as much time as possible, we've created implementations of the components based on things we know you're probably going to need at some point 💪. Here is were it comes the other repository in the monorepo.


Think on the following repository as plug-n-play functional components that uses the core library to build ready to go pieces of UI with the functionalities to work nice and neat:

  • @thatopen/ui-obc: Here you will find pre-made functional components for many things in @thatopen/components (the entry point of That Open Engine). You can expect to have from a button that loads an IFC file, to a table to configure your app tools or a panel to view all your model classifications. Basically, @thatopen/components gives you the functionality, while @thatopen/ui-obc gives you the UI to interact with those functionalities.

[!IMPORTANT] +All the implementation libraries need @thatopen/ui to be installed along with the respective packages they are giving UIs to. See the respective package.json files in each repository.

Why a monorepo? 🤷‍♀️​

Easy, because we care about your final app bundle size. You see, the repositories that contains implementations of the UIComponents for different libraries, relies on the libraries to be installed in the project because they're required as peerDependencies. So, if we included all the pre-built UIComponents from @thatopen/ui-obc in the core library, you will always need to have @thatopen/components and @thatopen/components-front installed in your project even tough you're not using it.


Does these components works in my favorite framework? 🤔​

Well... yes! You name it, React? Angular? Vue? Svelte? The answer is absolutely yes. Basically, you can use these componentes anywhere HTML is accepted. If you're wondering how is that possible, is becase we're using Web Components 🔥

If you're new to Web Components, no worries! Simply put, Web Components is a browser API that let's you define your own HTML tags (DOM Elements) to be used in the document. They define the look and behavior of the elements. Have you ever seen an HTML that looks something like this?

<div>
  <unknown-tag />
</div>

As you may recall from your HTML knowledge, <unkown-tag /> is not somethings built-in in HTML... well, that's because is a Web Component! So the developer created it's own tag to use it in the document.

Web Components are extremely powerfull because they do mostly the same as the components you create in any framework, just they are framework agnostic and feel way more built-in. In other words, if you create a component in your framework you're not allowed to write the following directly in your HTML file:

<my-framework-component />

You always need to rely on your framework tools in order to render your component, so you must use JavaScript. However, if you create a Web Component you can use it in your HTML with nothing else needed.


[!IMPORTANT] +Despite Web Components is a browser API, we used Lit to create the components as it makes the process way much easier. Also, we recommend checking your favorite framework documentation to implement web components, some of them needs a pretty basic setup to get up and running.

Getting Started​

To use the UIComponents, you need to install at least the core library from your terminal like this:

npm i @thatopen/ui

Then, you need to tell the library to register the components, so you can use them in any HTML syntax. To do it, in your entry JavaScript file execute the following:

import { UIManager } from "@thatopen/ui"

UIManager.init()

Finally, in your HTML file you can start to use the components! 

<bim-grid id="grid">
  <bim-toolbars-container style="grid-area: header">
    <bim-toolbar label="Toolbar A" active>
      <bim-toolbar-section label="Build">
        <bim-button vertical label="My Button" icon="solar:bookmark-square-minimalistic-bold"></bim-button>
        <bim-toolbar-group>
          <bim-button icon="solar:album-bold"></bim-button>
          <bim-button icon="solar:archive-linear"></bim-button>
          <bim-button icon="solar:battery-charge-minimalistic-broken"></bim-button>
          <bim-button icon="solar:bluetooth-square-outline"></bim-button>
        </bim-toolbar-group>
      </bim-toolbar-section>
    </bim-toolbar>
    <bim-toolbar label="Toolbar B">
      <bim-toolbar-section label="Section">
        <bim-button vertical label="Button A" icon="bx:command"></bim-button>
        <bim-button vertical label="Button B" icon="bx:fast-forward-circle"></bim-button>
        <bim-button vertical label="Button C" icon="bx:support"></bim-button>
      </bim-toolbar-section>
    </bim-toolbar>
  </bim-toolbars-container>
  <div id="my-panel" style="grid-area: sidebar; background-color: var(--bim-ui_bg-base)">
    <bim-panel label="Panel A">
      <bim-panel-section label="Build">
        <bim-text-input label="Tool Name" value="BCFManager"></bim-text-input>
        <bim-input label="Position" vertical>
          <bim-number-input pref="X" min="1" value="10" max="50" suffix="m" slider></bim-number-input>
          <bim-number-input pref="X" min="1" value="20" max="50" suffix="m" slider></bim-number-input>
          <bim-number-input pref="X" min="1" value="30" max="50" suffix="m" slider></bim-number-input>
        </bim-input>
        <bim-dropdown label="IFC Entity">
          <bim-option label="IFCWALL"></bim-option>
          <bim-option label="IFCWINDOW"></bim-option>
          <bim-option label="IFCSLAB"></bim-option>
        </bim-dropdown>
      </bim-panel-section>
    </bim-panel>
  </div>
</bim-grid>

[!TIP] +You can get any icon from Iconify!

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.

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.AsyncEvent/index.html b/build/api/classes/thatopen_components.AsyncEvent/index.html new file mode 100644 index 00000000..1f43ce36 --- /dev/null +++ b/build/api/classes/thatopen_components.AsyncEvent/index.html @@ -0,0 +1,20 @@ + + + + + +Class: AsyncEvent<T> | That Open Docs + + + + +
+
Skip to main content

Class: AsyncEvent<T>

@thatopen/components.AsyncEvent

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​

Name
T

Methods​

add​

▸ add(handler): void

Add a callback to this event instance.

Parameters​

NameTypeDescription
handlerT extends void ? () => Promise<void> : (data: T) => Promise<void>the callback to be added to this event.

Returns​

void

Defined in​

packages/core/src/core/Types/src/async-event.ts:15

remove​

▸ remove(handler): void

Removes a callback from this event instance.

Parameters​

NameTypeDescription
handlerT extends void ? () => Promise<void> : (data: T) => Promise<void>the callback to be removed from this event.

Returns​

void

Defined in​

packages/core/src/core/Types/src/async-event.ts:27

reset​

▸ reset(): void

Gets rid of all the suscribed events.

Returns​

void

Defined in​

packages/core/src/core/Types/src/async-event.ts:44

trigger​

▸ trigger(data?): Promise<void>

Triggers all the callbacks assigned to this event.

Parameters​

NameType
data?T

Returns​

Promise<void>

Defined in​

packages/core/src/core/Types/src/async-event.ts:36

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Base/index.html b/build/api/classes/thatopen_components.Base/index.html new file mode 100644 index 00000000..c747864b --- /dev/null +++ b/build/api/classes/thatopen_components.Base/index.html @@ -0,0 +1,16 @@ + + + + + +Class: Base | That Open Docs + + + + +
+
Skip to main content

Class: Base

@thatopen/components.Base

Base class of the library. Useful for finding out the interfaces it implements.

Hierarchy​

Methods​

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.BaseWorldItem/index.html b/build/api/classes/thatopen_components.BaseWorldItem/index.html new file mode 100644 index 00000000..df97c162 --- /dev/null +++ b/build/api/classes/thatopen_components.BaseWorldItem/index.html @@ -0,0 +1,17 @@ + + + + + +Class: BaseWorldItem | That Open Docs + + + + +
+
Skip to main content

Class: BaseWorldItem

@thatopen/components.BaseWorldItem

One of the elements that make a world. It can be either a scene, a camera +or a renderer.

Hierarchy​

  • Base

    ↳ BaseWorldItem

Methods​

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

Base.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

Base.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

Base.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

Base.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

Base.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.BoundingBoxer/index.html b/build/api/classes/thatopen_components.BoundingBoxer/index.html new file mode 100644 index 00000000..1298e241 --- /dev/null +++ b/build/api/classes/thatopen_components.BoundingBoxer/index.html @@ -0,0 +1,17 @@ + + + + + +Class: BoundingBoxer | That Open Docs + + + + +
+
Skip to main content

Class: BoundingBoxer

@thatopen/components.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.

Hierarchy​

Implements​

Properties​

enabled​

• enabled: boolean = true

Component.enabled

Overrides​

Component.enabled

Defined in​

packages/core/src/fragments/BoundingBoxer/index.ts:14

onDisposed​

• Readonly onDisposed: Event<unknown>

Disposable.onDisposed

Implementation of​

Disposable.onDisposed

Defined in​

packages/core/src/fragments/BoundingBoxer/index.ts:17

Methods​

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Implementation of​

Disposable.dispose

Defined in​

packages/core/src/fragments/BoundingBoxer/index.ts:68

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

Component.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

Component.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

Component.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

Component.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

Component.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Clipper/index.html b/build/api/classes/thatopen_components.Clipper/index.html new file mode 100644 index 00000000..9ea4104a --- /dev/null +++ b/build/api/classes/thatopen_components.Clipper/index.html @@ -0,0 +1,24 @@ + + + + + +Class: Clipper | That Open Docs + + + + +
+
Skip to main content

Class: Clipper

@thatopen/components.Clipper

A lightweight component to easily create and handle +clipping planes.

Param

the instance of Components used. +E.g. SimplePlane.

Hierarchy​

Implements​

Properties​

onAfterCreate​

• Readonly onAfterCreate: Event<SimplePlane>

Createable.onAfterCreate

Defined in​

packages/core/src/core/Clipper/index.ts:31

onAfterDelete​

• Readonly onAfterDelete: Event<SimplePlane>

Createable.onAfterDelete

Defined in​

packages/core/src/core/Clipper/index.ts:34

onAfterDrag​

• Readonly onAfterDrag: Event<void>

Event that fires when the user stops dragging a clipping plane.

Defined in​

packages/core/src/core/Clipper/index.ts:40

onBeforeDrag​

• Readonly onBeforeDrag: Event<void>

Event that fires when the user starts dragging a clipping plane.

Defined in​

packages/core/src/core/Clipper/index.ts:37

onDisposed​

• Readonly onDisposed: Event<string>

Disposable.onDisposed

Implementation of​

Disposable.onDisposed

Defined in​

packages/core/src/core/Clipper/index.ts:51

orthogonalY​

• orthogonalY: boolean = false

Whether to force the clipping plane to be orthogonal in the Y direction +(up). This is desirable when clipping a building horizontally and a +clipping plane is created in its roof, which might have a slight +slope for draining purposes.

Defined in​

packages/core/src/core/Clipper/index.ts:59

toleranceOrthogonalY​

• toleranceOrthogonalY: number = 0.7

The tolerance that determines whether an almost-horizontal clipping plane +will be forced to be orthogonal to the Y direction. orthogonalY +has to be true for this to apply.

Defined in​

packages/core/src/core/Clipper/index.ts:66

Accessors​

enabled​

• get enabled(): boolean

Component.enabled

Returns​

boolean

Overrides​

Component.enabled

Defined in​

packages/core/src/core/Clipper/index.ts:85

• set enabled(state): void

Component.enabled

Parameters​

NameType
stateboolean

Returns​

void

Overrides​

Component.enabled

Defined in​

packages/core/src/core/Clipper/index.ts:90

material​

• get material(): MeshBasicMaterial

The material of the clipping plane representation.

Returns​

MeshBasicMaterial

Defined in​

packages/core/src/core/Clipper/index.ts:112

• set material(material): void

The material of the clipping plane representation.

Parameters​

NameType
materialMeshBasicMaterial

Returns​

void

Defined in​

packages/core/src/core/Clipper/index.ts:117

size​

• get size(): number

The size of the geometric representation of the clippings planes.

Returns​

number

Defined in​

packages/core/src/core/Clipper/index.ts:125

• set size(size): void

The size of the geometric representation of the clippings planes.

Parameters​

NameType
sizenumber

Returns​

void

Defined in​

packages/core/src/core/Clipper/index.ts:130

visible​

• get visible(): boolean

Hideable.visible

Returns​

boolean

Implementation of​

Hideable.visible

Defined in​

packages/core/src/core/Clipper/index.ts:99

• set visible(state): void

Hideable.visible

Parameters​

NameType
stateboolean

Returns​

void

Implementation of​

Hideable.visible

Defined in​

packages/core/src/core/Clipper/index.ts:104

Methods​

create​

▸ create(world): void

Createable.create

Parameters​

NameType
worldWorld

Returns​

void

Implementation of​

Createable.create

Defined in​

packages/core/src/core/Clipper/index.ts:163

createFromNormalAndCoplanarPoint​

▸ createFromNormalAndCoplanarPoint(world, normal, point): SimplePlane

Creates a plane in a certain place and with a certain orientation, +without the need of the mouse.

Parameters​

NameTypeDescription
worldWorldthe world where this plane should be created.
normalVector3the orientation of the clipping plane.
pointVector3the position of the clipping plane. navigation.

Returns​

SimplePlane

Defined in​

packages/core/src/core/Clipper/index.ts:184

delete​

▸ delete(world, plane?): void

Createable.delete

Parameters​

NameTypeDescription
worldWorldthe world where the plane to delete is.
plane?SimplePlanethe plane to delete. If undefined, the first plane found under the cursor will be deleted.

Returns​

void

Implementation of​

Createable.delete

Defined in​

packages/core/src/core/Clipper/index.ts:201

deleteAll​

▸ deleteAll(): void

Deletes all the existing clipping planes.

Returns​

void

Defined in​

packages/core/src/core/Clipper/index.ts:213

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Implementation of​

Disposable.dispose

Defined in​

packages/core/src/core/Clipper/index.ts:143

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

Component.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

Component.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

Component.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

Component.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

Component.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Component/index.html b/build/api/classes/thatopen_components.Component/index.html new file mode 100644 index 00000000..515dde93 --- /dev/null +++ b/build/api/classes/thatopen_components.Component/index.html @@ -0,0 +1,24 @@ + + + + + +Class: Component | That Open Docs + + + + +
+
Skip to main content

Class: Component

@thatopen/components.Component

Components are the building blocks of this library. Components are singleton +elements that contain specific functionality. For instance, the SimpleClipper +Component can create, delete and handle 3D clipping planes. Components must be +unique (they can't be instanced more than once), and have a static UUID that +identifies them uniquely. The can be accessed globally using the Components +instance.

Hierarchy​

Properties​

enabled​

• Abstract enabled: boolean

Whether this component is active or not. The behaviour can vary depending +on the type of component. E.g. a disabled dimension tool will stop creating +dimensions, while a disabled camera will stop moving. A disabled component +will not be updated automatically each frame.

Defined in​

packages/core/src/core/Types/src/component.ts:19

Methods​

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

Base.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

Base.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

Base.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

Base.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

Base.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Components/index.html b/build/api/classes/thatopen_components.Components/index.html new file mode 100644 index 00000000..74795ffb --- /dev/null +++ b/build/api/classes/thatopen_components.Components/index.html @@ -0,0 +1,26 @@ + + + + + +Class: Components | That Open Docs + + + + +
+
Skip to main content

Class: Components

@thatopen/components.Components

The entry point of the Components library. +It can:

  • Create and access all the components of the library.
  • Update all the updatable components automatically.
  • Dispose all the components, preventing memory leaks.

Implements​

Properties​

enabled​

• enabled: boolean = false

If disabled, the animation loop will be stopped.

Defined in​

packages/core/src/core/Components/index.ts:27

list​

• Readonly list: Map<string, Component>

The list of components created in this app.

Defined in​

packages/core/src/core/Components/index.ts:24

onDisposed​

• Readonly onDisposed: Event<void>

Disposable.onDisposed

Implementation of​

Disposable.onDisposed

Defined in​

packages/core/src/core/Components/index.ts:21

Methods​

dispose​

▸ dispose(): void

Disposes the memory of all the components and tools of this instance of +the library. A memory leak will be created if:

  • An instance of the library ends up out of scope and this function isn't +called. This is especially relevant in Single Page Applications (React, +Angular, Vue, etc).

  • Any of the objects of this instance (meshes, geometries, etc) is +referenced by a reference type (object or array).

You can learn more about how Three.js handles memory leaks +here.

Returns​

void

Implementation of​

Disposable.dispose

Defined in​

packages/core/src/core/Components/index.ts:91

get​

▸ get<U>(Component): U

Retrieves a component. If it already exists in this app, it returns the instance of the component. If it +doesn't exist, it will instance it automatically.

Type parameters​

NameType
Uextends Component

Parameters​

NameTypeDescription
ComponentObjectThe component to get or create.

Returns​

U

Defined in​

packages/core/src/core/Components/index.ts:46

init​

▸ init(): void

Initializes the library. It should be called at the start of the app after +initializing the scene, the renderer and the +camera. Additionally, if any component that need a raycaster is +used, the raycaster will need to be initialized.

Returns​

void

Defined in​

packages/core/src/core/Components/index.ts:70

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.CullerRenderer/index.html b/build/api/classes/thatopen_components.CullerRenderer/index.html new file mode 100644 index 00000000..568bf943 --- /dev/null +++ b/build/api/classes/thatopen_components.CullerRenderer/index.html @@ -0,0 +1,21 @@ + + + + + +Class: CullerRenderer | That Open Docs + + + + +
+
Skip to main content

Class: CullerRenderer

@thatopen/components.CullerRenderer

A base renderer to determine visibility on screen

Hierarchy​

Properties​

enabled​

• enabled: boolean = true

Component.enabled

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:28

needsUpdate​

• needsUpdate: boolean = false

Needs to check whether there are objects that need to be hidden or shown. +You can bind this to the camera movement, to a certain interval, etc.

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:34

onDisposed​

• Readonly onDisposed: Event<string>

Disposable.onDisposed

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:18

onViewUpdated​

• Readonly onViewUpdated: Event<any> | AsyncEvent<any>

Fires after making the visibility check to the meshes. It lists the +meshes that are currently visible, and the ones that were visible +just before but not anymore.

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:25

renderDebugFrame​

• renderDebugFrame: boolean = false

Render the internal scene used to determine the object visibility. Used +for debugging purposes.

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:40

Methods​

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:116

updateVisibility​

▸ updateVisibility(force?): Promise<void>

The function that the culler uses to reprocess the scene. Generally it's +better to call needsUpdate, but you can also call this to force it.

Parameters​

NameTypeDescription
force?booleanif true, it will refresh the scene even if needsUpdate is not true.

Returns​

Promise<void>

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:135

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Cullers/index.html b/build/api/classes/thatopen_components.Cullers/index.html new file mode 100644 index 00000000..d00fb7a0 --- /dev/null +++ b/build/api/classes/thatopen_components.Cullers/index.html @@ -0,0 +1,19 @@ + + + + + +Class: Cullers | That Open Docs + + + + +
+
Skip to main content

Class: Cullers

@thatopen/components.Cullers

A tool to handle big scenes efficiently by automatically hiding the objects +that are not visible to the camera.

Hierarchy​

Implements​

Properties​

list​

• list: Map<string, MeshCullerRenderer>

A map of MeshCullerRenderer instances, keyed by their world UUIDs.

Defined in​

packages/core/src/core/Cullers/index.ts:26

onDisposed​

• Readonly onDisposed: Event<unknown>

An event that is triggered when the Cullers component is disposed.

Implementation of​

Disposable.onDisposed

Defined in​

packages/core/src/core/Cullers/index.ts:31

uuid​

▪ Static Readonly uuid: "69f2a50d-c266-44fc-b1bd-fa4d34be89e6"

A unique identifier for the Cullers component.

Defined in​

packages/core/src/core/Cullers/index.ts:16

Accessors​

enabled​

• get enabled(): boolean

Gets the enabled state of the Cullers component.

Returns​

boolean

The current enabled state.

Overrides​

Component.enabled

Defined in​

packages/core/src/core/Cullers/index.ts:38

• set enabled(value): void

Sets the enabled state of the Cullers component. +Also sets the enabled state of all MeshCullerRenderer instances.

Parameters​

NameTypeDescription
valuebooleanThe new enabled state.

Returns​

void

Overrides​

Component.enabled

Defined in​

packages/core/src/core/Cullers/index.ts:48

Methods​

create​

▸ create(world, config?): MeshCullerRenderer

Creates a new MeshCullerRenderer for the given world. +If a MeshCullerRenderer already exists for the world, it will return the existing one.

Parameters​

NameTypeDescription
worldWorldThe world for which to create the MeshCullerRenderer.
config?Partial<CullerRendererSettings>Optional configuration settings for the MeshCullerRenderer.

Returns​

MeshCullerRenderer

The newly created or existing MeshCullerRenderer for the given world.

Defined in​

packages/core/src/core/Cullers/index.ts:69

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Implementation of​

Disposable.dispose

Defined in​

packages/core/src/core/Cullers/index.ts:87

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

Component.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

Component.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

Component.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

Component.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

Component.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Disposer/index.html b/build/api/classes/thatopen_components.Disposer/index.html new file mode 100644 index 00000000..40b159bf --- /dev/null +++ b/build/api/classes/thatopen_components.Disposer/index.html @@ -0,0 +1,19 @@ + + + + + +Class: Disposer | That Open Docs + + + + +
+
Skip to main content

Class: Disposer

@thatopen/components.Disposer

A tool to safely remove meshes and geometries from memory to +prevent memory leaks.

Hierarchy​

Properties​

enabled​

• enabled: boolean = true

Component.enabled

Overrides​

Component.enabled

Defined in​

packages/core/src/core/Disposer/index.ts:13

Methods​

destroy​

▸ destroy(object, materials?, recursive?): void

Removes a mesh, its geometry and its materials from memory. If you are +using any of these in other parts of the application, make sure that you +remove them from the mesh before disposing it.

Parameters​

NameTypeDefault valueDescription
objectObject3D<Object3DEventMap>undefinedthe object to remove.
materialsbooleantruewhether to dispose the materials of the mesh.
recursivebooleantruewhether to recursively dispose the children of the mesh.

Returns​

void

Defined in​

packages/core/src/core/Disposer/index.ts:42

disposeGeometry​

▸ disposeGeometry(geometry): void

Disposes a geometry from memory.

Parameters​

NameTypeDescription
geometryBufferGeometry<NormalBufferAttributes>the geometry to remove.

Returns​

void

Defined in​

packages/core/src/core/Disposer/index.ts:63

get​

▸ get(): Set<string>

Component.uuid.

Returns​

Set<string>

the list of UUIDs of deleted components.

Defined in​

packages/core/src/core/Disposer/index.ts:26

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

Component.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

Component.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

Component.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

Component.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

Component.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.Event/index.html b/build/api/classes/thatopen_components.Event/index.html new file mode 100644 index 00000000..711345cb --- /dev/null +++ b/build/api/classes/thatopen_components.Event/index.html @@ -0,0 +1,20 @@ + + + + + +Class: Event<T> | That Open Docs + + + + +
+
Skip to main content

Class: Event<T>

@thatopen/components.Event

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​

Name
T

Methods​

add​

▸ add(handler): void

Add a callback to this event instance.

Parameters​

NameTypeDescription
handlerT extends void ? () => void : (data: T) => voidthe callback to be added to this event.

Returns​

void

Defined in​

packages/core/src/core/Types/src/event.ts:15

remove​

▸ remove(handler): void

Removes a callback from this event instance.

Parameters​

NameTypeDescription
handlerT extends void ? () => void : (data: T) => voidthe callback to be removed from this event.

Returns​

void

Defined in​

packages/core/src/core/Types/src/event.ts:23

reset​

▸ reset(): void

Gets rid of all the suscribed events.

Returns​

void

Defined in​

packages/core/src/core/Types/src/event.ts:36

trigger​

▸ trigger(data?): void

Triggers all the callbacks assigned to this event.

Parameters​

NameType
data?T

Returns​

void

Defined in​

packages/core/src/core/Types/src/event.ts:28

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.FirstPersonMode/index.html b/build/api/classes/thatopen_components.FirstPersonMode/index.html new file mode 100644 index 00000000..2bdc46a9 --- /dev/null +++ b/build/api/classes/thatopen_components.FirstPersonMode/index.html @@ -0,0 +1,17 @@ + + + + + +Class: FirstPersonMode | That Open Docs + + + + +
+
Skip to main content

Class: FirstPersonMode

@thatopen/components.FirstPersonMode

A NavigationMode that allows first person navigation, +simulating FPS video games.

Implements​

Properties​

enabled​

• enabled: boolean = false

NavigationMode.enabled

Implementation of​

NavigationMode.enabled

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts:12

id​

• Readonly id: "FirstPerson"

NavigationMode.id

Implementation of​

NavigationMode.id

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts:15

Methods​

set​

▸ set(active): void

NavigationMode.set

Parameters​

NameType
activeboolean

Returns​

void

Implementation of​

NavigationMode.set

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts:20

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.FragmentsManager/index.html b/build/api/classes/thatopen_components.FragmentsManager/index.html new file mode 100644 index 00000000..c45bae3a --- /dev/null +++ b/build/api/classes/thatopen_components.FragmentsManager/index.html @@ -0,0 +1,17 @@ + + + + + +Class: FragmentsManager | That Open Docs + + + + +
+
Skip to main content

Class: FragmentsManager

@thatopen/components.FragmentsManager

Object that can efficiently load binary files that contain +fragment geometry.

Hierarchy​

Implements​

Properties​

enabled​

• enabled: boolean = true

Component.enabled

Overrides​

Component.enabled

Defined in​

packages/core/src/fragments/FragmentsManager/index.ts:31

list​

• Readonly list: Map<string, Fragment>

All the created fragments.

Defined in​

packages/core/src/fragments/FragmentsManager/index.ts:26

onDisposed​

• Readonly onDisposed: Event<unknown>

Disposable.onDisposed

Implementation of​

Disposable.onDisposed

Defined in​

packages/core/src/fragments/FragmentsManager/index.ts:16

Accessors​

meshes​

• get meshes(): Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>[]

The list of meshes of the created fragments.

Returns​

Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>[]

Defined in​

packages/core/src/fragments/FragmentsManager/index.ts:38

Methods​

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Implementation of​

Disposable.dispose

Defined in​

packages/core/src/fragments/FragmentsManager/index.ts:52

export​

▸ export(group): Uint8Array

Export the specified fragments.

Parameters​

NameTypeDescription
groupFragmentsGroupthe fragments group to be exported.

Returns​

Uint8Array

the exported data as binary buffer.

Defined in​

packages/core/src/fragments/FragmentsManager/index.ts:129

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

Component.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

Component.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

Component.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

Component.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

Component.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

load​

▸ load(data, config?): FragmentsGroup

Loads a binar file that contain fragment geometry.

Parameters​

NameTypeDescription
dataUint8ArrayThe binary data to load.
config?Partial<{ coordinate: boolean ; properties: IfcProperties ; relationsMap: RelationsMap }>Optional configuration for loading.

Returns​

FragmentsGroup

The loaded FragmentsGroup.

Defined in​

packages/core/src/fragments/FragmentsManager/index.ts:89

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.IfcJsonExporter/index.html b/build/api/classes/thatopen_components.IfcJsonExporter/index.html new file mode 100644 index 00000000..4eb6d4ac --- /dev/null +++ b/build/api/classes/thatopen_components.IfcJsonExporter/index.html @@ -0,0 +1,16 @@ + + + + + +Class: IfcJsonExporter | That Open Docs + + + + +
+
Skip to main content

Class: IfcJsonExporter

@thatopen/components.IfcJsonExporter

Object to export all the properties from an IFC to a JS object.

Hierarchy​

Properties​

enabled​

• enabled: boolean = true

Component.enabled

Overrides​

Component.enabled

Defined in​

packages/core/src/ifc/IfcJsonExporter/index.ts:13

Methods​

export​

▸ export(webIfc, modelID, indirect?, recursiveSpatial?): Promise<IfcProperties>

Exports all the properties of an IFC into an array of JS objects.

Parameters​

NameTypeDefault valueDescription
webIfcIfcAPIundefinedThe instance of [web-ifc][https://github.com/ThatOpen/engine_web-ifc](https://github.com/ThatOpen/engine_web-ifc) to use.
modelIDnumberundefinedID of the IFC model whose properties to extract.
indirectbooleanfalsewhether to get the indirect relationships as well.
recursiveSpatialbooleantruewhether to get the properties of spatial items recursively to make the location data available (e.g. absolute position of building).

Returns​

Promise<IfcProperties>

Defined in​

packages/core/src/ifc/IfcJsonExporter/index.ts:28

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

Component.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

Component.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

Component.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

Component.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

Component.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.IfcRelationsIndexer/index.html b/build/api/classes/thatopen_components.IfcRelationsIndexer/index.html new file mode 100644 index 00000000..9a838017 --- /dev/null +++ b/build/api/classes/thatopen_components.IfcRelationsIndexer/index.html @@ -0,0 +1,54 @@ + + + + + +Class: IfcRelationsIndexer | That Open Docs + + + + +
+
Skip to main content

Class: IfcRelationsIndexer

@thatopen/components.IfcRelationsIndexer

Indexer 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.

Hierarchy​

Implements​

Properties​

onDisposed​

• Readonly onDisposed: Event<string>

Disposable.onDisposed

Implementation of​

Disposable.onDisposed

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:24

relationMaps​

• Readonly relationMaps: ModelsRelationMap = {}

Holds the relationship mappings for each model processed by the indexer. +The structure is a map where each key is a model's UUID, and the value is another map. +This inner map's keys are entity expressIDs, and its values are maps where each key is an index +representing a specific relation type, and the value is an array of expressIDs of entities +that are related through that relation type. This structure allows for efficient querying +of entity relationships within a model.

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:70

Methods​

dispose​

▸ dispose(): void

Disposes the component, cleaning up resources and detaching event listeners. +This ensures that the component is properly cleaned up and does not leave behind any +references that could prevent garbage collection.

Returns​

void

Implementation of​

Disposable.dispose

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:348

getEntityRelations​

▸ getEntityRelations(model, expressID, relationName): null | number[]

Retrieves the relations of a specific entity within a model based on the given relation name. +This method searches the indexed relation maps for the specified model and entity, +returning the IDs of related entities if a match is found.

Parameters​

NameTypeDescription
modelFragmentsGroupThe FragmentsGroup model containing the entity.
expressIDnumberThe unique identifier of the entity within the model.
relationName"IsDecomposedBy" | "Decomposes" | "AssociatedTo" | "HasAssociations" | "ClassificationForObjects" | "IsGroupedBy" | "HasAssignments" | "IsDefinedBy" | "DefinesOcurrence" | "IsTypedBy" | "Types" | "Defines" | "ContainedInStructure" | "ContainsElements"The IFC schema inverse attribute of the relation to search for (e.g., "IsDefinedBy", "ContainsElements").

Returns​

null | number[]

An array of express IDs representing the related entities, or null if no relations are found +or the specified relation name is not indexed.

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:235

getRelationsMapFromJSON​

▸ getRelationsMapFromJSON(json): RelationsMap

Converts a JSON string representing relations between entities into a structured map. +This method parses the JSON string to reconstruct the relations map that indexes +entity relations by their express IDs. The outer map keys are the express IDs of entities, +and the values are maps where each key is a relation type ID and its value is an array +of express IDs of entities related through that relation type.

Parameters​

NameTypeDescription
jsonstringThe JSON string to be parsed into the relations map.

Returns​

RelationsMap

A Map where the key is the express ID of an entity as a number, and the value +is another Map. This inner map's key is the relation type ID as a number, and its value +is an array of express IDs (as numbers) of entities related through that relation type.

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:329

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

Component.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

Component.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

Component.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

Component.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

Component.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

process​

▸ process(model): Promise<RelationsMap>

Processes a given model to index its IFC entities relations based on predefined inverse attributes. +This method iterates through each specified inverse attribute, retrieves the corresponding relations, +and maps them in a structured way to facilitate quick access to related entities.

The process involves querying the model for each relation type associated with the inverse attributes +and updating the internal relationMaps with the relationships found. This map is keyed by the model's UUID +and contains a nested map where each key is an entity's expressID and its value is another map. +This inner map's keys are the indices of the inverse attributes, and its values are arrays of expressIDs +of entities that are related through that attribute.

Parameters​

NameTypeDescription
modelFragmentsGroupThe FragmentsGroup model to be processed. It must have properties loaded.

Returns​

Promise<RelationsMap>

A promise that resolves to the relations map for the processed model. This map is a detailed +representation of the relations indexed by entity expressIDs and relation types.

Throws

An error if the model does not have properties loaded.

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:119

processFromWebIfc​

▸ processFromWebIfc(ifcApi, modelID): Promise<RelationsMap>

Processes a given model from a WebIfc API to index its IFC entities relations.

Parameters​

NameTypeDescription
ifcApiIfcAPIThe WebIfc API instance from which to retrieve the model's properties.
modelIDnumberThe unique identifier of the model within the WebIfc API.

Returns​

Promise<RelationsMap>

A promise that resolves to the relations map for the processed model. +This map is a detailed representation of the relations indexed by entity expressIDs and relation types.

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:172

serializeAllRelations​

▸ serializeAllRelations(): string

Serializes all relations of every model processed by the indexer into a JSON string. +This method iterates through each model's relations indexed in relationMaps, organizing them +into a structured JSON object. Each top-level key in this object corresponds to a model's UUID, +and its value is another object mapping entity expressIDs to their related entities, categorized +by relation types. The structure facilitates easy access to any entity's relations across all models.

Returns​

string

A JSON string representing the serialized relations of all models processed by the indexer. +If no relations have been indexed, an empty object is returned as a JSON string.

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:298

serializeModelRelations​

▸ serializeModelRelations(model): null | string

Serializes the relations of a specific model into a JSON string. +This method iterates through the relations indexed for the given model, +organizing them into a structured object where each key is an expressID of an entity, +and its value is another object mapping relation indices to arrays of related entity expressIDs. +The resulting object is then serialized into a JSON string.

Parameters​

NameTypeDescription
modelFragmentsGroupThe FragmentsGroup model whose relations are to be serialized.

Returns​

null | string

A JSON string representing the serialized relations of the specified model. +If the model has no indexed relations, null is returned.

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:281

serializeRelations​

▸ serializeRelations(relationMap): string

Serializes the relations of a given relation map into a JSON string. +This method iterates through the relations in the given map, organizing them into a structured object where each key is an expressID of an entity, +and its value is another object mapping relation indices to arrays of related entity expressIDs. +The resulting object is then serialized into a JSON string.

Parameters​

NameTypeDescription
relationMapRelationsMapThe map of relations to be serialized. The map keys are expressIDs of entities, and the values are maps where each key is a relation type ID and its value is an array of expressIDs of entities related through that relation type.

Returns​

string

A JSON string representing the serialized relations of the given relation map.

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:259

setRelationMap​

▸ setRelationMap(model, relationMap): void

Adds a relation map to the model's relations map.

Parameters​

NameTypeDescription
modelFragmentsGroupThe FragmentsGroup model to which the relation map will be added.
relationMapRelationsMapThe RelationsMap to be added to the model's relations map.

Returns​

void

Fires

onRelationsIndexed - Triggers an event with the model's UUID and the added relation map.

Defined in​

packages/core/src/ifc/IfcRelationsIndexer/index.ts:95

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.IfcStreamingSettings/index.html b/build/api/classes/thatopen_components.IfcStreamingSettings/index.html new file mode 100644 index 00000000..fc031830 --- /dev/null +++ b/build/api/classes/thatopen_components.IfcStreamingSettings/index.html @@ -0,0 +1,17 @@ + + + + + +Class: IfcStreamingSettings | That Open Docs + + + + +
+
Skip to main content

Class: IfcStreamingSettings

@thatopen/components.IfcStreamingSettings

Configuration of the IFC-fragment streaming.

Hierarchy​

  • IfcFragmentSettings

    ↳ IfcStreamingSettings

Properties​

coordinate​

• coordinate: boolean = true

Whether to use the coordination data coming from the IFC files.

Inherited from​

IfcFragmentSettings.coordinate

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:15

excludedCategories​

• excludedCategories: Set<number>

List of categories that won't be converted to fragments.

Inherited from​

IfcFragmentSettings.excludedCategories

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:29

includeProperties​

• includeProperties: boolean = true

Whether to extract the IFC properties into a JSON.

Inherited from​

IfcFragmentSettings.includeProperties

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:6

optionalCategories​

• optionalCategories: number[]

Generate the geometry for categories that are not included by default, +like IFCSPACE.

Inherited from​

IfcFragmentSettings.optionalCategories

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:12

saveLocations​

• saveLocations: boolean = false

Whether to save the absolute location of all IFC items.

Inherited from​

IfcFragmentSettings.saveLocations

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:32

wasm​

• wasm: Object

Path of the WASM for web-ifc.

Type declaration​

NameType
absoluteboolean
logLevel?LogLevel
pathstring

Inherited from​

IfcFragmentSettings.wasm

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:18

webIfc​

• webIfc: LoaderSettings

Loader settings for web-ifc.

Inherited from​

IfcFragmentSettings.webIfc

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:35

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.MeshCullerRenderer/index.html b/build/api/classes/thatopen_components.MeshCullerRenderer/index.html new file mode 100644 index 00000000..ba4379be --- /dev/null +++ b/build/api/classes/thatopen_components.MeshCullerRenderer/index.html @@ -0,0 +1,19 @@ + + + + + +Class: MeshCullerRenderer | That Open Docs + + + + +
+
Skip to main content

Class: MeshCullerRenderer

@thatopen/components.MeshCullerRenderer

A renderer to determine a mesh visibility on screen

Hierarchy​

Properties​

enabled​

• enabled: boolean = true

Component.enabled

Inherited from​

CullerRenderer.enabled

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:28

needsUpdate​

• needsUpdate: boolean = false

Needs to check whether there are objects that need to be hidden or shown. +You can bind this to the camera movement, to a certain interval, etc.

Inherited from​

CullerRenderer.needsUpdate

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:34

onDisposed​

• Readonly onDisposed: Event<string>

Disposable.onDisposed

Inherited from​

CullerRenderer.onDisposed

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:18

renderDebugFrame​

• renderDebugFrame: boolean = false

Render the internal scene used to determine the object visibility. Used +for debugging purposes.

Inherited from​

CullerRenderer.renderDebugFrame

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:40

Methods​

updateVisibility​

▸ updateVisibility(force?): Promise<void>

The function that the culler uses to reprocess the scene. Generally it's +better to call needsUpdate, but you can also call this to force it.

Parameters​

NameTypeDescription
force?booleanif true, it will refresh the scene even if needsUpdate is not true.

Returns​

Promise<void>

Inherited from​

CullerRenderer.updateVisibility

Defined in​

packages/core/src/core/Cullers/src/culler-renderer.ts:135

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.OrbitMode/index.html b/build/api/classes/thatopen_components.OrbitMode/index.html new file mode 100644 index 00000000..8709d8f1 --- /dev/null +++ b/build/api/classes/thatopen_components.OrbitMode/index.html @@ -0,0 +1,17 @@ + + + + + +Class: OrbitMode | That Open Docs + + + + +
+
Skip to main content

Class: OrbitMode

@thatopen/components.OrbitMode

A NavigationMode that allows 3D navigation and panning +like in many 3D and CAD softwares.

Implements​

Properties​

enabled​

• enabled: boolean = true

NavigationMode.enabled

Implementation of​

NavigationMode.enabled

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts:11

id​

• Readonly id: "Orbit"

NavigationMode.id

Implementation of​

NavigationMode.id

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts:14

Methods​

set​

▸ set(active): void

NavigationMode.set

Parameters​

NameType
activeboolean

Returns​

void

Implementation of​

NavigationMode.set

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts:21

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.OrthoPerspectiveCamera/index.html b/build/api/classes/thatopen_components.OrthoPerspectiveCamera/index.html new file mode 100644 index 00000000..0e4e28c1 --- /dev/null +++ b/build/api/classes/thatopen_components.OrthoPerspectiveCamera/index.html @@ -0,0 +1,23 @@ + + + + + +Class: OrthoPerspectiveCamera | That Open Docs + + + + +
+
Skip to main content

Class: OrthoPerspectiveCamera

@thatopen/components.OrthoPerspectiveCamera

A flexible camera that uses +yomotsu's cameracontrols to +easily control the camera in 2D and 3D. It supports multiple navigation +modes, such as 2D floor plan navigation, first person and 3D orbit.

Hierarchy​

Properties​

_mode​

• _mode: null | NavigationMode = null

The current NavigationMode.

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/index.ts:26

onAfterUpdate​

• Readonly onAfterUpdate: Event<SimpleCamera>

Updateable.onAfterUpdate

Inherited from​

SimpleCamera.onAfterUpdate

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:23

onBeforeUpdate​

• Readonly onBeforeUpdate: Event<SimpleCamera>

Updateable.onBeforeUpdate

Inherited from​

SimpleCamera.onBeforeUpdate

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:20

onDisposed​

• Readonly onDisposed: Event<string>

Disposable.onDisposed

Inherited from​

SimpleCamera.onDisposed

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:28

Accessors​

controls​

• get controls(): CameraControls

The object that controls the camera. An instance of +yomotsu's cameracontrols. +Transforming the camera directly will have no effect: you need to use this +object to move, rotate, look at objects, etc.

Returns​

CameraControls

Inherited from​

SimpleCamera.controls

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:40

enabled​

• get enabled(): boolean

Component.enabled

Returns​

boolean

Inherited from​

SimpleCamera.enabled

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:52

• set enabled(enabled): void

Component.enabled

Parameters​

NameType
enabledboolean

Returns​

void

Inherited from​

SimpleCamera.enabled

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:60

Methods​

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Overrides​

SimpleCamera.dispose

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/index.ts:80

fit​

▸ fit(meshes, offset?): Promise<void>

Make the camera view fit all the specified meshes.

Parameters​

NameTypeDefault valueDescription
meshesIterable<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>>undefinedthe meshes to fit. If it is not defined, it will evaluate Components.meshes.
offsetnumber1.5the distance to the fit object

Returns​

Promise<void>

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/index.ts:108

hasCameraControls​

▸ hasCameraControls(): this is CameraControllable

Whether is instance is CameraControllable.

Returns​

this is CameraControllable

Inherited from​

SimpleCamera.hasCameraControls

Defined in​

packages/core/src/core/Types/src/base-camera.ts:13

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

SimpleCamera.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

SimpleCamera.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

SimpleCamera.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

SimpleCamera.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

SimpleCamera.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

set​

▸ set(mode): void

Sets a new NavigationMode and disables the previous one.

Parameters​

NameTypeDescription
modeNavModeIDThe NavigationMode to set.

Returns​

void

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/index.ts:90

setUserInput​

▸ setUserInput(active): void

Allows or prevents all user input.

Parameters​

NameTypeDescription
activebooleanwhether to enable or disable user inputs.

Returns​

void

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/index.ts:142

update​

▸ update(_delta): void

Updateable.update

Parameters​

NameType
_deltanumber

Returns​

void

Inherited from​

SimpleCamera.update

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:105

updateAspect​

▸ updateAspect(): void

Updates the aspect of the camera to match the size of the +Components.renderer.

Returns​

void

Inherited from​

SimpleCamera.updateAspect

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:117

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.PlanMode/index.html b/build/api/classes/thatopen_components.PlanMode/index.html new file mode 100644 index 00000000..ddd468e2 --- /dev/null +++ b/build/api/classes/thatopen_components.PlanMode/index.html @@ -0,0 +1,17 @@ + + + + + +Class: PlanMode | That Open Docs + + + + +
+
Skip to main content

Class: PlanMode

@thatopen/components.PlanMode

A NavigationMode that allows to navigate floorplans in 2D, +like many BIM tools.

Implements​

Properties​

enabled​

• enabled: boolean = false

NavigationMode.enabled

Implementation of​

NavigationMode.enabled

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts:11

id​

• Readonly id: "Plan"

NavigationMode.id

Implementation of​

NavigationMode.id

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts:14

Methods​

set​

▸ set(active): void

NavigationMode.set

Parameters​

NameType
activeboolean

Returns​

void

Implementation of​

NavigationMode.set

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts:29

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.ProjectionManager/index.html b/build/api/classes/thatopen_components.ProjectionManager/index.html new file mode 100644 index 00000000..ec9f0cab --- /dev/null +++ b/build/api/classes/thatopen_components.ProjectionManager/index.html @@ -0,0 +1,17 @@ + + + + + +Class: ProjectionManager | That Open Docs + + + + +
+
Skip to main content

Class: ProjectionManager

@thatopen/components.ProjectionManager

Object to control the CameraProjection of the OrthoPerspectiveCamera.

Properties​

matchOrthoDistanceEnabled​

• matchOrthoDistanceEnabled: boolean = false

Match Ortho zoom with Perspective distance when changing projection mode

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:27

onChanged​

• Readonly onChanged: Event<PerspectiveCamera | OrthographicCamera>

Event that fires when the CameraProjection changes.

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:14

Methods​

set​

▸ set(projection): Promise<void>

Sets the CameraProjection of the OrthoPerspectiveCamera.

Parameters​

NameTypeDescription
projectionCameraProjectionthe new projection to set. If it is the current projection, it will have no effect.

Returns​

Promise<void>

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:40

toggle​

▸ toggle(): Promise<void>

Changes the current CameraProjection from Ortographic to Perspective +and vice versa.

Returns​

Promise<void>

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:54

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.PropertiesStreamingSettings/index.html b/build/api/classes/thatopen_components.PropertiesStreamingSettings/index.html new file mode 100644 index 00000000..18860409 --- /dev/null +++ b/build/api/classes/thatopen_components.PropertiesStreamingSettings/index.html @@ -0,0 +1,17 @@ + + + + + +Class: PropertiesStreamingSettings | That Open Docs + + + + +
+
Skip to main content

Class: PropertiesStreamingSettings

@thatopen/components.PropertiesStreamingSettings

Configuration of the IFC-fragment streaming.

Hierarchy​

  • IfcFragmentSettings

    ↳ PropertiesStreamingSettings

Properties​

coordinate​

• coordinate: boolean = true

Whether to use the coordination data coming from the IFC files.

Inherited from​

IfcFragmentSettings.coordinate

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:15

excludedCategories​

• excludedCategories: Set<number>

List of categories that won't be converted to fragments.

Inherited from​

IfcFragmentSettings.excludedCategories

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:29

includeProperties​

• includeProperties: boolean = true

Whether to extract the IFC properties into a JSON.

Inherited from​

IfcFragmentSettings.includeProperties

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:6

optionalCategories​

• optionalCategories: number[]

Generate the geometry for categories that are not included by default, +like IFCSPACE.

Inherited from​

IfcFragmentSettings.optionalCategories

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:12

saveLocations​

• saveLocations: boolean = false

Whether to save the absolute location of all IFC items.

Inherited from​

IfcFragmentSettings.saveLocations

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:32

wasm​

• wasm: Object

Path of the WASM for web-ifc.

Type declaration​

NameType
absoluteboolean
logLevel?LogLevel
pathstring

Inherited from​

IfcFragmentSettings.wasm

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:18

webIfc​

• webIfc: LoaderSettings

Loader settings for web-ifc.

Inherited from​

IfcFragmentSettings.webIfc

Defined in​

packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:35

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.SimpleCamera/index.html b/build/api/classes/thatopen_components.SimpleCamera/index.html new file mode 100644 index 00000000..dfebe02f --- /dev/null +++ b/build/api/classes/thatopen_components.SimpleCamera/index.html @@ -0,0 +1,23 @@ + + + + + +Class: SimpleCamera | That Open Docs + + + + +
+
Skip to main content

Class: SimpleCamera

@thatopen/components.SimpleCamera

A basic camera that uses +yomotsu's cameracontrols to +easily control the camera in 2D and 3D. Check out it's API to find out +what features it offers.

Hierarchy​

Implements​

Properties​

onAfterUpdate​

• Readonly onAfterUpdate: Event<SimpleCamera>

Updateable.onAfterUpdate

Implementation of​

Updateable.onAfterUpdate

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:23

onBeforeUpdate​

• Readonly onBeforeUpdate: Event<SimpleCamera>

Updateable.onBeforeUpdate

Implementation of​

Updateable.onBeforeUpdate

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:20

onDisposed​

• Readonly onDisposed: Event<string>

Disposable.onDisposed

Implementation of​

Disposable.onDisposed

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:28

Accessors​

controls​

• get controls(): CameraControls

The object that controls the camera. An instance of +yomotsu's cameracontrols. +Transforming the camera directly will have no effect: you need to use this +object to move, rotate, look at objects, etc.

Returns​

CameraControls

Overrides​

BaseCamera.controls

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:40

enabled​

• get enabled(): boolean

Component.enabled

Returns​

boolean

Overrides​

BaseCamera.enabled

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:52

• set enabled(enabled): void

Component.enabled

Parameters​

NameType
enabledboolean

Returns​

void

Overrides​

BaseCamera.enabled

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:60

Methods​

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Implementation of​

Disposable.dispose

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:90

hasCameraControls​

▸ hasCameraControls(): this is CameraControllable

Whether is instance is CameraControllable.

Returns​

this is CameraControllable

Inherited from​

BaseCamera.hasCameraControls

Defined in​

packages/core/src/core/Types/src/base-camera.ts:13

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

BaseCamera.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

BaseCamera.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

BaseCamera.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

BaseCamera.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

BaseCamera.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

update​

▸ update(_delta): void

Updateable.update

Parameters​

NameType
_deltanumber

Returns​

void

Implementation of​

Updateable.update

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:105

updateAspect​

▸ updateAspect(): void

Updates the aspect of the camera to match the size of the +Components.renderer.

Returns​

void

Defined in​

packages/core/src/core/Worlds/src/simple-camera.ts:117

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.SimplePlane/index.html b/build/api/classes/thatopen_components.SimplePlane/index.html new file mode 100644 index 00000000..6e01e6b5 --- /dev/null +++ b/build/api/classes/thatopen_components.SimplePlane/index.html @@ -0,0 +1,16 @@ + + + + + +Class: SimplePlane | That Open Docs + + + + +
+
Skip to main content

Class: SimplePlane

@thatopen/components.SimplePlane

Each of the planes created by SimpleClipper.

Implements​

Properties​

onDisposed​

• Readonly onDisposed: Event<unknown>

Disposable.onDisposed

Implementation of​

Disposable.onDisposed

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:17

onDraggingEnded​

• Readonly onDraggingEnded: Event<unknown>

Event that fires when the user stops dragging a clipping plane.

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:14

onDraggingStarted​

• Readonly onDraggingStarted: Event<unknown>

Event that fires when the user starts dragging a clipping plane.

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:11

Accessors​

enabled​

• set enabled(state): void

Component.enabled

Parameters​

NameType
stateboolean

Returns​

void

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:52

meshes​

• get meshes(): Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>[]

The meshes used for raycasting

Returns​

Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>[]

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:74

planeMaterial​

• get planeMaterial(): Material | Material[]

The material of the clipping plane representation.

Returns​

Material | Material[]

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:79

• set planeMaterial(material): void

The material of the clipping plane representation.

Parameters​

NameType
materialMaterial | Material[]

Returns​

void

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:84

size​

• get size(): number

The size of the clipping plane representation.

Returns​

number

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:89

• set size(size): void

Sets the size of the clipping plane representation.

Parameters​

NameType
sizenumber

Returns​

void

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:94

visible​

• get visible(): boolean

Hideable.visible

Returns​

boolean

Implementation of​

Hideable.visible

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:61

• set visible(state): void

Hideable.visible

Parameters​

NameType
stateboolean

Returns​

void

Implementation of​

Hideable.visible

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:66

Methods​

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Implementation of​

Disposable.dispose

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:155

update​

▸ update(): void

Updateable.update

Returns​

void

Defined in​

packages/core/src/core/Clipper/src/simple-plane.ts:146

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.SimpleRenderer/index.html b/build/api/classes/thatopen_components.SimpleRenderer/index.html new file mode 100644 index 00000000..f6640864 --- /dev/null +++ b/build/api/classes/thatopen_components.SimpleRenderer/index.html @@ -0,0 +1,22 @@ + + + + + +Class: SimpleRenderer | That Open Docs + + + + +
+
Skip to main content

Class: SimpleRenderer

@thatopen/components.SimpleRenderer

A basic renderer capable of rendering +(Objec3Ds.

Hierarchy​

  • BaseRenderer

    ↳ SimpleRenderer

Properties​

clippingPlanes​

• clippingPlanes: Plane[] = []

The list of clipping planes used by this +instance of the renderer.

Inherited from​

BaseRenderer.clippingPlanes

Defined in​

packages/core/src/core/Types/src/base-renderer.ts:42

container​

• container: HTMLElement

The HTML container of the THREE.js canvas where the scene is rendered.

Defined in​

packages/core/src/core/Worlds/src/simple-renderer.ts:19

onAfterUpdate​

• onAfterUpdate: Event<unknown>

Updateable.onBeforeUpdate

Inherited from​

BaseRenderer.onAfterUpdate

Defined in​

packages/core/src/core/Types/src/base-renderer.ts:14

onBeforeUpdate​

• onBeforeUpdate: Event<unknown>

Updateable.onAfterUpdate

Inherited from​

BaseRenderer.onBeforeUpdate

Defined in​

packages/core/src/core/Types/src/base-renderer.ts:17

onClippingPlanesUpdated​

• Readonly onClippingPlanesUpdated: Event<unknown>

Event that fires when there has been a change to the list of clipping +planes used by the active renderer.

Inherited from​

BaseRenderer.onClippingPlanesUpdated

Defined in​

packages/core/src/core/Types/src/base-renderer.ts:28

onDisposed​

• Readonly onDisposed: Event<undefined>

Disposable.onDisposed

Inherited from​

BaseRenderer.onDisposed

Defined in​

packages/core/src/core/Types/src/base-renderer.ts:20

Methods​

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Overrides​

BaseRenderer.dispose

Defined in​

packages/core/src/core/Worlds/src/simple-renderer.ts:74

getSize​

▸ getSize(): Vector2

Resizeable.getSize.

Returns​

Vector2

Overrides​

BaseRenderer.getSize

Defined in​

packages/core/src/core/Worlds/src/simple-renderer.ts:88

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

BaseRenderer.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

BaseRenderer.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

BaseRenderer.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

BaseRenderer.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

BaseRenderer.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

resize​

▸ resize(size?): void

Resizeable.resize

Parameters​

NameType
size?Vector2

Returns​

void

Overrides​

BaseRenderer.resize

Defined in​

packages/core/src/core/Worlds/src/simple-renderer.ts:96

setPlane​

▸ setPlane(active, plane, isLocal?): void

Adds or removes a +clipping plane +to the renderer.

Parameters​

NameType
activeboolean
planePlane
isLocal?boolean

Returns​

void

Inherited from​

BaseRenderer.setPlane

Defined in​

packages/core/src/core/Types/src/base-renderer.ts:57

update​

▸ update(): void

Updateable.update

Returns​

void

Overrides​

BaseRenderer.update

Defined in​

packages/core/src/core/Worlds/src/simple-renderer.ts:61

updateClippingPlanes​

▸ updateClippingPlanes(): void

Forces the update of the clipping planes and all components that depend +on them that are subscribed to onClippingPlanesUpdated.

Returns​

void

Inherited from​

BaseRenderer.updateClippingPlanes

Defined in​

packages/core/src/core/Types/src/base-renderer.ts:48

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components.SimpleScene/index.html b/build/api/classes/thatopen_components.SimpleScene/index.html new file mode 100644 index 00000000..fa18ebaf --- /dev/null +++ b/build/api/classes/thatopen_components.SimpleScene/index.html @@ -0,0 +1,17 @@ + + + + + +Class: SimpleScene | That Open Docs + + + + +
+
Skip to main content

Class: SimpleScene

@thatopen/components.SimpleScene

A basic 3D scene to add +objects hierarchically, and easily dispose them when you are finished with it.

No Inherit Doc

Hierarchy​

  • BaseScene

    ↳ SimpleScene

Implements​

Properties​

isSetup​

• isSetup: boolean = false

Configurable.isSetup

Implementation of​

Configurable.isSetup

Defined in​

packages/core/src/core/Worlds/src/simple-scene.ts:24

onDisposed​

• Readonly onDisposed: Event<unknown>

Disposable.onDisposed

Inherited from​

BaseScene.onDisposed

Defined in​

packages/core/src/core/Types/src/base-scene.ts:10

onSetup​

• Readonly onSetup: Event<SimpleScene>

Configurable.onSetup

Implementation of​

Configurable.onSetup

Defined in​

packages/core/src/core/Worlds/src/simple-scene.ts:29

Methods​

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Inherited from​

BaseScene.dispose

Defined in​

packages/core/src/core/Types/src/base-scene.ts:19

isConfigurable​

▸ isConfigurable(): this is Configurable<any>

Whether is component is Configurable.

Returns​

this is Configurable<any>

Inherited from​

BaseScene.isConfigurable

Defined in​

packages/core/src/core/Types/src/base.ts:39

isDisposeable​

▸ isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns​

this is Disposable

Inherited from​

BaseScene.isDisposeable

Defined in​

packages/core/src/core/Types/src/base.ts:17

isHideable​

▸ isHideable(): this is Hideable

Whether is component is Hideable.

Returns​

this is Hideable

Inherited from​

BaseScene.isHideable

Defined in​

packages/core/src/core/Types/src/base.ts:34

isResizeable​

▸ isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns​

this is Resizeable

Inherited from​

BaseScene.isResizeable

Defined in​

packages/core/src/core/Types/src/base.ts:22

isUpdateable​

▸ isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns​

this is Updateable

Inherited from​

BaseScene.isUpdateable

Defined in​

packages/core/src/core/Types/src/base.ts:27

setup​

▸ setup(config?): void

Creates a simple and nice default set up for the scene (e.g. lighting).

Parameters​

NameType
config?Partial<SimpleSceneConfig>

Returns​

void

Implementation of​

Configurable.setup

Defined in​

packages/core/src/core/Worlds/src/simple-scene.ts:50

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.ClipEdges/index.html b/build/api/classes/thatopen_components_front.ClipEdges/index.html new file mode 100644 index 00000000..bf758b69 --- /dev/null +++ b/build/api/classes/thatopen_components_front.ClipEdges/index.html @@ -0,0 +1,17 @@ + + + + + +Class: ClipEdges | That Open Docs + + + + +
+
Skip to main content

Class: ClipEdges

@thatopen/components-front.ClipEdges

A more advanced version of SimpleClipper that also supports +ClippingEdges with customizable lines.

Hierarchy​

  • Component

    ↳ ClipEdges

Implements​

  • Disposable

Properties​

styles​

• styles: EdgesStyles

The list of defined LineStyle instances.

Defined in​

packages/front/src/core/EdgesClipper/index.ts:19

Methods​

update​

▸ update(updateFills?): Promise<void>

Updates all the lines of the ClippingEdges.

Parameters​

NameTypeDefault value
updateFillsbooleanfalse

Returns​

Promise<void>

Defined in​

packages/front/src/core/EdgesClipper/index.ts:54

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.EdgesPlane/index.html b/build/api/classes/thatopen_components_front.EdgesPlane/index.html new file mode 100644 index 00000000..9a7fbfcf --- /dev/null +++ b/build/api/classes/thatopen_components_front.EdgesPlane/index.html @@ -0,0 +1,18 @@ + + + + + +Class: EdgesPlane | That Open Docs + + + + +
+
Skip to main content
+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.LengthMeasurement/index.html b/build/api/classes/thatopen_components_front.LengthMeasurement/index.html new file mode 100644 index 00000000..26f1a1eb --- /dev/null +++ b/build/api/classes/thatopen_components_front.LengthMeasurement/index.html @@ -0,0 +1,17 @@ + + + + + +Class: LengthMeasurement | That Open Docs + + + + +
+
Skip to main content

Class: LengthMeasurement

@thatopen/components-front.LengthMeasurement

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

Hierarchy​

  • Component

    ↳ LengthMeasurement

Implements​

  • Createable
  • Hideable
  • Disposable
  • Updateable

Properties​

snapDistance​

• snapDistance: number = 0.25

The minimum distance to force the dimension cursor to a vertex.

Defined in​

packages/front/src/measurement/LengthMeasurement/index.ts:24

Methods​

cancelCreation​

▸ cancelCreation(): void

Cancels the drawing of the current dimension.

Returns​

void

Implementation of​

OBC.Createable.cancelCreation

Defined in​

packages/front/src/measurement/LengthMeasurement/index.ts:178

create​

▸ create(data?): void

Starts or finishes drawing a new dimension line.

Parameters​

NameTypeDescription
data?anyforces the dimension to be drawn on a plane. Use this if you are drawing dimensions in floor plan navigation.

Returns​

void

Implementation of​

OBC.Createable.create

Defined in​

packages/front/src/measurement/LengthMeasurement/index.ts:119

delete​

▸ delete(): void

Deletes the dimension that the user is hovering over with the mouse or touch event.

Returns​

void

Implementation of​

OBC.Createable.delete

Defined in​

packages/front/src/measurement/LengthMeasurement/index.ts:138

deleteAll​

▸ deleteAll(): void

Deletes all the dimensions that have been previously created.

Returns​

void

Defined in​

packages/front/src/measurement/LengthMeasurement/index.ts:170

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Implementation of​

OBC.Disposable.dispose

Defined in​

packages/front/src/measurement/LengthMeasurement/index.ts:93

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.Marker/index.html b/build/api/classes/thatopen_components_front.Marker/index.html new file mode 100644 index 00000000..daf6cd98 --- /dev/null +++ b/build/api/classes/thatopen_components_front.Marker/index.html @@ -0,0 +1,18 @@ + + + + + +Class: Marker | That Open Docs + + + + +
+
Skip to main content

Class: Marker

@thatopen/components-front.Marker

Class 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

Hierarchy​

  • Component

    ↳ Marker

Implements​

  • Disposable
+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.Plans/index.html b/build/api/classes/thatopen_components_front.Plans/index.html new file mode 100644 index 00000000..be76fc98 --- /dev/null +++ b/build/api/classes/thatopen_components_front.Plans/index.html @@ -0,0 +1,16 @@ + + + + + +Class: Plans | That Open Docs + + + + +
+
Skip to main content

Class: Plans

@thatopen/components-front.Plans

Helper to control the camera and easily define and navigate 2D floor plans.

Hierarchy​

  • Component

    ↳ Plans

Implements​

  • Disposable

Properties​

currentPlan​

• currentPlan: null | PlanView = null

The floorplan that is currently selected.

Defined in​

packages/front/src/fragments/Plans/index.ts:25

defaultCameraOffset​

• defaultCameraOffset: number = 30

The offset of the 2D camera to the floor plan elevation.

Defined in​

packages/front/src/fragments/Plans/index.ts:31

defaultSectionOffset​

• defaultSectionOffset: number = 1.5

The offset from the clipping planes to their respective floor plan elevation.

Defined in​

packages/front/src/fragments/Plans/index.ts:28

onDisposed​

• Readonly onDisposed: Event<unknown>

Disposable.onDisposed

Implementation of​

OBC.Disposable.onDisposed

Defined in​

packages/front/src/fragments/Plans/index.ts:16

Methods​

create​

▸ create(config): void

Creates a new floor plan in the navigator.

Parameters​

NameTypeDescription
configPlanViewNecessary data to initialize the floor plan.

Returns​

void

Defined in​

packages/front/src/fragments/Plans/index.ts:97

dispose​

▸ dispose(): void

Disposable.dispose

Returns​

void

Implementation of​

OBC.Disposable.dispose

Defined in​

packages/front/src/fragments/Plans/index.ts:48

exitPlanView​

▸ exitPlanView(animate?): Promise<void>

Deactivate navigator and go back to the previous view.

Parameters​

NameTypeDefault valueDescription
animatebooleanfalseWhether to animate the camera transition.

Returns​

Promise<void>

Defined in​

packages/front/src/fragments/Plans/index.ts:141

goTo​

▸ goTo(id, animate?): Promise<void>

Make the navigator go to the specified floor plan.

Parameters​

NameTypeDefault valueDescription
idstringundefinedFloor plan to go to.
animatebooleanfalseWhether to animate the camera transition.

Returns​

Promise<void>

Defined in​

packages/front/src/fragments/Plans/index.ts:119

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.PostproductionRenderer/index.html b/build/api/classes/thatopen_components_front.PostproductionRenderer/index.html new file mode 100644 index 00000000..7a0b2def --- /dev/null +++ b/build/api/classes/thatopen_components_front.PostproductionRenderer/index.html @@ -0,0 +1,16 @@ + + + + + +Class: PostproductionRenderer | That Open Docs + + + + +
+
Skip to main content

Class: PostproductionRenderer

@thatopen/components-front.PostproductionRenderer

Renderer that uses efficient postproduction effects (e.g. Ambient Occlusion).

Hierarchy​

Accessors​

postproduction​

• get postproduction(): Postproduction

Helper object to handle the postproduction effects applied.

Returns​

Postproduction

Defined in​

packages/front/src/core/PostproductionRenderer/index.ts:13

Methods​

dispose​

▸ dispose(): void

Disposable.dispose.

Returns​

void

Overrides​

RendererWith2D.dispose

Defined in​

packages/front/src/core/PostproductionRenderer/index.ts:67

+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_components_front.RendererWith2D/index.html b/build/api/classes/thatopen_components_front.RendererWith2D/index.html new file mode 100644 index 00000000..8e92a2f8 --- /dev/null +++ b/build/api/classes/thatopen_components_front.RendererWith2D/index.html @@ -0,0 +1,19 @@ + + + + + +Class: RendererWith2D | That Open Docs + + + + +
+
Skip to main content
+ + + + \ No newline at end of file diff --git a/build/api/classes/thatopen_fragments.Serializer/index.html b/build/api/classes/thatopen_fragments.Serializer/index.html new file mode 100644 index 00000000..0c40f792 --- /dev/null +++ b/build/api/classes/thatopen_fragments.Serializer/index.html @@ -0,0 +1,17 @@ + + + + + +Class: Serializer | That Open Docs + + + + +
+
Skip to main content
+ + + + \ No newline at end of file diff --git a/build/api/index.html b/build/api/index.html new file mode 100644 index 00000000..df4ffade --- /dev/null +++ b/build/api/index.html @@ -0,0 +1,16 @@ + + + + + +Open BIM Docs | That Open Docs + + + + +
+
Skip to main content

Open BIM Docs

TOC|documentation|demo|community|npm package

cover

That Open Docs

This library contains the official docs for all the libraries of That Open Company.

  • It uses docusaurus to build them.
  • It gathers code from our repos and build the API docs using TypeDoc.
  • It gathers the HTML examples from our repos and build the tutorials.

If you see anything outdated in the docs page, feel free to open an issue. If the issue is specific to a specific repository, please open the issue in that repository!

If you have any questions, you can also ask around in our community.

Local development​

Requirements

Install all dependencies

yarn install

Run docusaurus local devserver

yarn start

Generating tutorials and api docs

This script clonse both openbim-components and bim-fragments repos into a temp/ folder and generates the api docs.

yarn build:remote
+ + + + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.BVHGeometry/index.html b/build/api/interfaces/thatopen_components.BVHGeometry/index.html new file mode 100644 index 00000000..b576f35a --- /dev/null +++ b/build/api/interfaces/thatopen_components.BVHGeometry/index.html @@ -0,0 +1,16 @@ + + + + + +Interface: BVHGeometry | That Open Docs + + + + +
+
Skip to main content
+ + + + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.CameraControllable/index.html b/build/api/interfaces/thatopen_components.CameraControllable/index.html new file mode 100644 index 00000000..4c7501a6 --- /dev/null +++ b/build/api/interfaces/thatopen_components.CameraControllable/index.html @@ -0,0 +1,16 @@ + + + + + +Interface: CameraControllable | That Open Docs + + + + +
+
Skip to main content

Interface: CameraControllable

@thatopen/components.CameraControllable

Whether a camera uses the Camera Controls library.

+ + + + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Configurable/index.html b/build/api/interfaces/thatopen_components.Configurable/index.html new file mode 100644 index 00000000..0169f444 --- /dev/null +++ b/build/api/interfaces/thatopen_components.Configurable/index.html @@ -0,0 +1,17 @@ + + + + + +Interface: Configurable<T> | That Open Docs + + + + +
+
Skip to main content

Interface: Configurable<T>

@thatopen/components.Configurable

Whether this component supports to be configured.

Type parameters​

NameType
Textends Record<string, any>

Implemented by​

Properties​

config​

• config: Required<T>

Object holding the tool configuration. Is not meant to be edited directly, if you need +to make changes to this object, use () just after the tool is instantiated.

Defined in​

packages/core/src/core/Types/src/interfaces.ts:128

isSetup​

• isSetup: boolean

Wether this components has been already configured.

Defined in​

packages/core/src/core/Types/src/interfaces.ts:117

onSetup​

• Readonly onSetup: Event<any>

Fired after successfully calling ()

Defined in​

packages/core/src/core/Types/src/interfaces.ts:123

setup​

• setup: (config?: Partial<T>) => void | Promise<void>

Type declaration​

▸ (config?): void | Promise<void>

Use the provided configuration to setup the tool.

Parameters​
NameType
config?Partial<T>
Returns​

void | Promise<void>

Defined in​

packages/core/src/core/Types/src/interfaces.ts:120

+ + + + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Createable/index.html b/build/api/interfaces/thatopen_components.Createable/index.html new file mode 100644 index 00000000..13cc4b66 --- /dev/null +++ b/build/api/interfaces/thatopen_components.Createable/index.html @@ -0,0 +1,20 @@ + + + + + +Interface: Createable | That Open Docs + + + + +
+
Skip to main content

Interface: Createable

@thatopen/components.Createable

Whether this component supports create and destroy operations. This generally +applies for components that work with instances, such as clipping planes or +dimensions.

Implemented by​

Properties​

cancelCreation​

• Optional cancelCreation: (data: any) => void

Type declaration​

▸ (data): void

Cancels the creation process of the component, going back to the state +before starting to create.

Parameters​
NameType
dataany
Returns​

void

Defined in​

packages/core/src/core/Types/src/interfaces.ts:106

create​

• create: (data: any) => void

Type declaration​

▸ (data): void

Creates a new instance of an element (e.g. a new Dimension).

Parameters​
NameType
dataany
Returns​

void

Defined in​

packages/core/src/core/Types/src/interfaces.ts:94

delete​

• delete: (data: any) => void

Type declaration​

▸ (data): void

Deletes an existing instance of an element (e.g. a Dimension).

Parameters​
NameType
dataany
Returns​

void

Defined in​

packages/core/src/core/Types/src/interfaces.ts:109

endCreation​

• Optional endCreation: (data: any) => void

Type declaration​

▸ (data): void

Finish the creation process of the component, successfully creating an +instance of whatever the component creates.

Parameters​
NameType
dataany
Returns​

void

Defined in​

packages/core/src/core/Types/src/interfaces.ts:100

+ + + + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Disposable/index.html b/build/api/interfaces/thatopen_components.Disposable/index.html new file mode 100644 index 00000000..54f1f215 --- /dev/null +++ b/build/api/interfaces/thatopen_components.Disposable/index.html @@ -0,0 +1,21 @@ + + + + + +Interface: Disposable | That Open Docs + + + + +
+
Skip to main content

Interface: Disposable

@thatopen/components.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.

Implemented by​

Properties​

dispose​

• dispose: () => void | Promise<void>

Type declaration​

▸ (): void | Promise<void>

Destroys the object from memory to prevent a +memory leak.

Returns​

void | Promise<void>

Defined in​

packages/core/src/core/Types/src/interfaces.ts:17

onDisposed​

• Readonly onDisposed: Event<any>

Fired after the tool has been ()

Defined in​

packages/core/src/core/Types/src/interfaces.ts:20

+ + + + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Hideable/index.html b/build/api/interfaces/thatopen_components.Hideable/index.html new file mode 100644 index 00000000..99c63da1 --- /dev/null +++ b/build/api/interfaces/thatopen_components.Hideable/index.html @@ -0,0 +1,20 @@ + + + + + +Interface: Hideable | That Open Docs + + + + +
+
Skip to main content
+ + + + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.NavigationMode/index.html b/build/api/interfaces/thatopen_components.NavigationMode/index.html new file mode 100644 index 00000000..ba678f82 --- /dev/null +++ b/build/api/interfaces/thatopen_components.NavigationMode/index.html @@ -0,0 +1,19 @@ + + + + + +Interface: NavigationMode | That Open Docs + + + + +
+
Skip to main content

Interface: NavigationMode

@thatopen/components.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).

Implemented by​

Properties​

enabled​

• enabled: boolean

Whether this navigation mode is active or not.

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:30

id​

• id: NavModeID

The unique ID of this navigation mode.

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:17

set​

• set: (active: boolean, options?: any) => void

Type declaration​

▸ (active, options?): void

Enable or disable this navigation mode. +When a new navigation mode is enabled, the previous navigation mode +must be disabled.

Parameters​
NameTypeDescription
activebooleanwhether to enable or disable this mode.
options?anyany additional data required to enable or disable it.
Returns​

void

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:27

+ + + + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Progress/index.html b/build/api/interfaces/thatopen_components.Progress/index.html new file mode 100644 index 00000000..688ceda3 --- /dev/null +++ b/build/api/interfaces/thatopen_components.Progress/index.html @@ -0,0 +1,16 @@ + + + + + +Interface: Progress | That Open Docs + + + + +
+
Skip to main content
+ + + + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Resizeable/index.html b/build/api/interfaces/thatopen_components.Resizeable/index.html new file mode 100644 index 00000000..09c5baac --- /dev/null +++ b/build/api/interfaces/thatopen_components.Resizeable/index.html @@ -0,0 +1,24 @@ + + + + + +Interface: Resizeable | That Open Docs + + + + +
+
Skip to main content

Interface: Resizeable

@thatopen/components.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​

• getSize: () => Vector2

Type declaration​

▸ (): Vector2

Gets the current size of this component (e.g. the resolution of a +Renderer +component.

Returns​

Vector2

Defined in​

packages/core/src/core/Types/src/interfaces.ts:60

onResize​

• onResize: Event<Vector2>

Event that fires when the component has been resized.

Defined in​

packages/core/src/core/Types/src/interfaces.ts:53

resize​

• resize: (size?: Vector2) => void

Type declaration​

▸ (size?): void

Sets size of this component (e.g. the resolution of a +Renderer +component.

Parameters​
NameType
size?Vector2
Returns​

void

Defined in​

packages/core/src/core/Types/src/interfaces.ts:50

+ + + + \ No newline at end of file diff --git a/build/api/interfaces/thatopen_components.Updateable/index.html b/build/api/interfaces/thatopen_components.Updateable/index.html new file mode 100644 index 00000000..f11b4f4d --- /dev/null +++ b/build/api/interfaces/thatopen_components.Updateable/index.html @@ -0,0 +1,17 @@ + + + + + +Interface: Updateable | That Open Docs + + + + +
+
Skip to main content

Interface: Updateable

@thatopen/components.Updateable

Whether this component should be updated each frame.

Implemented by​

Properties​

onAfterUpdate​

• onAfterUpdate: Event<any>

Actions that should be executed after updating the component.

Defined in​

packages/core/src/core/Types/src/interfaces.ts:66

onBeforeUpdate​

• onBeforeUpdate: Event<any>

Actions that should be executed before updating the component.

Defined in​

packages/core/src/core/Types/src/interfaces.ts:69

Methods​

update​

▸ update(delta?): void

Function used to update the state of this component each frame. For +instance, a renderer component will make a render each frame.

Parameters​

NameType
delta?number

Returns​

void

Defined in​

packages/core/src/core/Types/src/interfaces.ts:75

+ + + + \ No newline at end of file diff --git a/build/api/modules/index.html b/build/api/modules/index.html new file mode 100644 index 00000000..1d4671fb --- /dev/null +++ b/build/api/modules/index.html @@ -0,0 +1,16 @@ + + + + + +Open BIM Docs | That Open Docs + + + + +
+
Skip to main content

Open BIM Docs

+ + + + \ No newline at end of file diff --git a/build/api/modules/thatopen_components/index.html b/build/api/modules/thatopen_components/index.html new file mode 100644 index 00000000..98eaef49 --- /dev/null +++ b/build/api/modules/thatopen_components/index.html @@ -0,0 +1,16 @@ + + + + + +Module: @thatopen/components | That Open Docs + + + + +
+
Skip to main content

Module: @thatopen/components

Classes​

Interfaces​

Type Aliases​

CameraProjection​

Ƭ CameraProjection: "Perspective" | "Orthographic"

The projection system of the camera.

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:4

Ƭ NavModeID: "Orbit" | "FirstPerson" | "Plan"

The extensible list of supported navigation modes.

Defined in​

packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:9

+ + + + \ No newline at end of file diff --git a/build/api/modules/thatopen_components_front/index.html b/build/api/modules/thatopen_components_front/index.html new file mode 100644 index 00000000..891d3d9c --- /dev/null +++ b/build/api/modules/thatopen_components_front/index.html @@ -0,0 +1,16 @@ + + + + + +Module: @thatopen/components-front | That Open Docs + + + + +
+
Skip to main content
+ + + + \ No newline at end of file diff --git a/build/api/modules/thatopen_fragments/index.html b/build/api/modules/thatopen_fragments/index.html new file mode 100644 index 00000000..e754ad7f --- /dev/null +++ b/build/api/modules/thatopen_fragments/index.html @@ -0,0 +1,16 @@ + + + + + +Module: @thatopen/fragments | That Open Docs + + + + +
+
Skip to main content

Module: @thatopen/fragments

Classes​

+ + + + \ No newline at end of file diff --git a/build/assets/css/styles.bab952e3.css b/build/assets/css/styles.bab952e3.css new file mode 100644 index 00000000..46794c73 --- /dev/null +++ b/build/assets/css/styles.bab952e3.css @@ -0,0 +1 @@ +@import url(https://fonts.googleapis.com/css2?family=Sora:wght@400;600&display=auto);.col,.container{padding:0 var(--ifm-spacing-horizontal);width:100%}.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown li,body{word-wrap:break-word}body,ol ol,ol ul,ul ol,ul ul{margin:0}pre,table{overflow:auto}blockquote,pre{margin:0 0 var(--ifm-spacing-vertical)}.breadcrumbs__link,.button{transition-timing-function:var(--ifm-transition-timing-default)}.button,code{vertical-align:middle}.button--outline.button--active,.button--outline:active,.button--outline:hover,:root{--ifm-button-color:var(--ifm-font-color-base-inverse)}.menu__link:hover,a{transition:color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.navbar--dark,:root{--ifm-navbar-link-hover-color:var(--ifm-color-primary)}.menu,.navbar-sidebar{overflow-x:hidden}:root,html[data-theme=dark]{--ifm-color-emphasis-500:var(--ifm-color-gray-500)}.toggleButton_gllP,html{-webkit-tap-highlight-color:transparent}.clean-list,.containsTaskList_mC6p,.details_lb9f>summary,.dropdown__menu,.menu__list{list-style:none}:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-white:#fff;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:transparent;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:0.4rem;--ifm-hover-overlay:rgba(0,0,0,.05);--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-base:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--ifm-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ifm-font-size-base:100%;--ifm-font-weight-light:300;--ifm-font-weight-normal:400;--ifm-font-weight-semibold:500;--ifm-font-weight-bold:700;--ifm-font-weight-base:var(--ifm-font-weight-normal);--ifm-line-height-base:1.65;--ifm-global-spacing:1rem;--ifm-spacing-vertical:var(--ifm-global-spacing);--ifm-spacing-horizontal:var(--ifm-global-spacing);--ifm-transition-fast:200ms;--ifm-transition-slow:400ms;--ifm-transition-timing-default:cubic-bezier(0.08,0.52,0.52,1);--ifm-global-shadow-lw:0 1px 2px 0 rgba(0,0,0,.1);--ifm-global-shadow-md:0 5px 40px rgba(0,0,0,.2);--ifm-global-shadow-tl:0 12px 28px 0 rgba(0,0,0,.2),0 2px 4px 0 rgba(0,0,0,.1);--ifm-z-index-dropdown:100;--ifm-z-index-fixed:200;--ifm-z-index-overlay:400;--ifm-container-width:1140px;--ifm-container-width-xl:1320px;--ifm-code-background:#f6f7f8;--ifm-code-border-radius:var(--ifm-global-radius);--ifm-code-font-size:90%;--ifm-code-padding-horizontal:0.1rem;--ifm-code-padding-vertical:0.1rem;--ifm-pre-background:var(--ifm-code-background);--ifm-pre-border-radius:var(--ifm-code-border-radius);--ifm-pre-color:inherit;--ifm-pre-line-height:1.45;--ifm-pre-padding:1rem;--ifm-heading-color:inherit;--ifm-heading-margin-top:0;--ifm-heading-margin-bottom:var(--ifm-spacing-vertical);--ifm-heading-font-family:var(--ifm-font-family-base);--ifm-heading-font-weight:var(--ifm-font-weight-bold);--ifm-heading-line-height:1.25;--ifm-h1-font-size:2rem;--ifm-h2-font-size:1.5rem;--ifm-h3-font-size:1.25rem;--ifm-h4-font-size:1rem;--ifm-h5-font-size:0.875rem;--ifm-h6-font-size:0.85rem;--ifm-image-alignment-padding:1.25rem;--ifm-leading-desktop:1.25;--ifm-leading:calc(var(--ifm-leading-desktop)*1rem);--ifm-list-left-padding:2rem;--ifm-list-margin:1rem;--ifm-list-item-margin:0.25rem;--ifm-list-paragraph-margin:1rem;--ifm-table-cell-padding:0.75rem;--ifm-table-background:transparent;--ifm-table-stripe-background:rgba(0,0,0,.03);--ifm-table-border-width:1px;--ifm-table-border-color:var(--ifm-color-emphasis-300);--ifm-table-head-background:inherit;--ifm-table-head-color:inherit;--ifm-table-head-font-weight:var(--ifm-font-weight-bold);--ifm-table-cell-color:inherit;--ifm-link-color:var(--ifm-color-primary);--ifm-link-decoration:none;--ifm-link-hover-color:var(--ifm-link-color);--ifm-link-hover-decoration:underline;--ifm-paragraph-margin-bottom:var(--ifm-leading);--ifm-blockquote-font-size:var(--ifm-font-size-base);--ifm-blockquote-border-left-width:2px;--ifm-blockquote-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-blockquote-padding-vertical:0;--ifm-blockquote-shadow:none;--ifm-blockquote-color:var(--ifm-color-emphasis-800);--ifm-blockquote-border-color:var(--ifm-color-emphasis-300);--ifm-hr-background-color:var(--ifm-color-emphasis-500);--ifm-hr-height:1px;--ifm-hr-margin-vertical:1.5rem;--ifm-scrollbar-size:7px;--ifm-scrollbar-track-background-color:#f1f1f1;--ifm-scrollbar-thumb-background-color:silver;--ifm-scrollbar-thumb-hover-background-color:#a7a7a7;--ifm-alert-background-color:inherit;--ifm-alert-border-color:inherit;--ifm-alert-border-radius:var(--ifm-global-radius);--ifm-alert-border-width:0px;--ifm-alert-border-left-width:5px;--ifm-alert-color:var(--ifm-font-color-base);--ifm-alert-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-alert-padding-vertical:var(--ifm-spacing-vertical);--ifm-alert-shadow:var(--ifm-global-shadow-lw);--ifm-avatar-intro-margin:1rem;--ifm-avatar-intro-alignment:inherit;--ifm-avatar-photo-size:3rem;--ifm-badge-background-color:inherit;--ifm-badge-border-color:inherit;--ifm-badge-border-radius:var(--ifm-global-radius);--ifm-badge-border-width:var(--ifm-global-border-width);--ifm-badge-color:var(--ifm-color-white);--ifm-badge-padding-horizontal:calc(var(--ifm-spacing-horizontal)*0.5);--ifm-badge-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-breadcrumb-border-radius:1.5rem;--ifm-breadcrumb-spacing:0.5rem;--ifm-breadcrumb-color-active:var(--ifm-color-primary);--ifm-breadcrumb-item-background-active:var(--ifm-hover-overlay);--ifm-breadcrumb-padding-horizontal:0.8rem;--ifm-breadcrumb-padding-vertical:0.4rem;--ifm-breadcrumb-size-multiplier:1;--ifm-breadcrumb-separator:url('data:image/svg+xml;utf8,');--ifm-breadcrumb-separator-filter:none;--ifm-breadcrumb-separator-size:0.5rem;--ifm-breadcrumb-separator-size-multiplier:1.25;--ifm-button-background-color:inherit;--ifm-button-border-color:var(--ifm-button-background-color);--ifm-button-border-width:var(--ifm-global-border-width);--ifm-button-font-weight:var(--ifm-font-weight-bold);--ifm-button-padding-horizontal:1.5rem;--ifm-button-padding-vertical:0.375rem;--ifm-button-size-multiplier:1;--ifm-button-transition-duration:var(--ifm-transition-fast);--ifm-button-border-radius:calc(var(--ifm-global-radius)*var(--ifm-button-size-multiplier));--ifm-button-group-spacing:2px;--ifm-card-background-color:var(--ifm-background-surface-color);--ifm-card-border-radius:calc(var(--ifm-global-radius)*2);--ifm-card-horizontal-spacing:var(--ifm-global-spacing);--ifm-card-vertical-spacing:var(--ifm-global-spacing);--ifm-toc-border-color:var(--ifm-color-emphasis-300);--ifm-toc-link-color:var(--ifm-color-content-secondary);--ifm-toc-padding-vertical:0.5rem;--ifm-toc-padding-horizontal:0.5rem;--ifm-dropdown-background-color:var(--ifm-background-surface-color);--ifm-dropdown-font-weight:var(--ifm-font-weight-semibold);--ifm-dropdown-link-color:var(--ifm-font-color-base);--ifm-dropdown-hover-background-color:var(--ifm-hover-overlay);--ifm-footer-background-color:var(--ifm-color-emphasis-100);--ifm-footer-color:inherit;--ifm-footer-link-color:var(--ifm-color-emphasis-700);--ifm-footer-link-hover-color:var(--ifm-color-primary);--ifm-footer-link-horizontal-spacing:0.5rem;--ifm-footer-padding-horizontal:calc(var(--ifm-spacing-horizontal)*2);--ifm-footer-padding-vertical:calc(var(--ifm-spacing-vertical)*2);--ifm-footer-title-color:inherit;--ifm-footer-logo-max-width:min(30rem,90vw);--ifm-hero-background-color:var(--ifm-background-surface-color);--ifm-hero-text-color:var(--ifm-color-emphasis-800);--ifm-menu-color:var(--ifm-color-emphasis-700);--ifm-menu-color-active:var(--ifm-color-primary);--ifm-menu-color-background-active:var(--ifm-hover-overlay);--ifm-menu-color-background-hover:var(--ifm-hover-overlay);--ifm-menu-link-padding-horizontal:0.75rem;--ifm-menu-link-padding-vertical:0.375rem;--ifm-menu-link-sublist-icon:url('data:image/svg+xml;utf8,');--ifm-menu-link-sublist-icon-filter:none;--ifm-navbar-background-color:var(--ifm-background-surface-color);--ifm-navbar-height:3.75rem;--ifm-navbar-item-padding-horizontal:0.75rem;--ifm-navbar-item-padding-vertical:0.25rem;--ifm-navbar-link-color:var(--ifm-font-color-base);--ifm-navbar-link-active-color:var(--ifm-link-color);--ifm-navbar-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-navbar-padding-vertical:calc(var(--ifm-spacing-vertical)*0.5);--ifm-navbar-shadow:var(--ifm-global-shadow-lw);--ifm-navbar-search-input-background-color:var(--ifm-color-emphasis-200);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-800);--ifm-navbar-search-input-placeholder-color:var(--ifm-color-emphasis-500);--ifm-navbar-search-input-icon:url('data:image/svg+xml;utf8,');--ifm-navbar-sidebar-width:83vw;--ifm-pagination-border-radius:var(--ifm-global-radius);--ifm-pagination-color-active:var(--ifm-color-primary);--ifm-pagination-font-size:1rem;--ifm-pagination-item-active-background:var(--ifm-hover-overlay);--ifm-pagination-page-spacing:0.2em;--ifm-pagination-padding-horizontal:calc(var(--ifm-spacing-horizontal)*1);--ifm-pagination-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-pagination-nav-border-radius:var(--ifm-global-radius);--ifm-pagination-nav-color-hover:var(--ifm-color-primary);--ifm-pills-color-active:var(--ifm-color-primary);--ifm-pills-color-background-active:var(--ifm-hover-overlay);--ifm-pills-spacing:0.125rem;--ifm-tabs-color:var(--ifm-font-color-secondary);--ifm-tabs-color-active:var(--ifm-color-primary);--ifm-tabs-color-active-border:var(--ifm-tabs-color-active);--ifm-tabs-padding-horizontal:1rem;--ifm-tabs-padding-vertical:1rem;--docusaurus-progress-bar-color:var(--ifm-color-primary);--light-gray:#d3cbe1;--dark-gray:#202932;--ifm-color-primary:#bcf124;--ifm-color-content:#fff;--ifm-heading-font-family:"Sora";--docusaurus-announcement-bar-height:auto;--docusaurus-tag-list-border:var(--ifm-color-emphasis-300);--docusaurus-collapse-button-bg:transparent;--docusaurus-collapse-button-bg-hover:rgba(0,0,0,.1);--doc-sidebar-width:300px;--doc-sidebar-hidden-width:30px}.badge--danger,.badge--info,.badge--primary,.badge--secondary,.badge--success,.badge--warning{--ifm-badge-border-color:var(--ifm-badge-background-color)}.button--link,.button--outline{--ifm-button-background-color:transparent}*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--ifm-background-color);color:var(--ifm-font-color-base);color-scheme:var(--ifm-color-scheme);font:var(--ifm-font-size-base)/var(--ifm-line-height-base) var(--ifm-font-family-base);text-rendering:optimizelegibility}iframe{border:0;color-scheme:auto;height:25rem;margin:1rem;width:calc(100% - 2rem)}.container{margin:0 auto;max-width:var(--ifm-container-width)}.container--fluid{max-width:inherit}.row{display:flex;flex-wrap:wrap;margin:0 calc(var(--ifm-spacing-horizontal)*-1)}.margin-bottom--none,.margin-vert--none,.markdown>:last-child{margin-bottom:0!important}.margin-top--none,.margin-vert--none{margin-top:0!important}.row--no-gutters{margin-left:0;margin-right:0}.margin-horiz--none,.margin-right--none{margin-right:0!important}.row--no-gutters>.col{padding-left:0;padding-right:0}.row--align-top{align-items:flex-start}.row--align-bottom{align-items:flex-end}.menuExternalLink_NmtK,.row--align-center{align-items:center}.row--align-stretch{align-items:stretch}.row--align-baseline{align-items:baseline}.col{--ifm-col-width:100%;flex:1 0;margin-left:0;max-width:var(--ifm-col-width)}.padding-bottom--none,.padding-vert--none{padding-bottom:0!important}.padding-top--none,.padding-vert--none{padding-top:0!important}.padding-horiz--none,.padding-left--none{padding-left:0!important}.padding-horiz--none,.padding-right--none{padding-right:0!important}.col[class*=col--]{flex:0 0 var(--ifm-col-width)}.col--1{--ifm-col-width:8.33333%}.col--offset-1{margin-left:8.33333%}.col--2{--ifm-col-width:16.66667%}.col--offset-2{margin-left:16.66667%}.col--3{--ifm-col-width:25%}.col--offset-3{margin-left:25%}.col--4{--ifm-col-width:33.33333%}.col--offset-4{margin-left:33.33333%}.col--5{--ifm-col-width:41.66667%}.col--offset-5{margin-left:41.66667%}.col--6{--ifm-col-width:50%}.col--offset-6{margin-left:50%}.col--7{--ifm-col-width:58.33333%}.col--offset-7{margin-left:58.33333%}.col--8{--ifm-col-width:66.66667%}.col--offset-8{margin-left:66.66667%}.col--9{--ifm-col-width:75%}.col--offset-9{margin-left:75%}.col--10{--ifm-col-width:83.33333%}.col--offset-10{margin-left:83.33333%}.col--11{--ifm-col-width:91.66667%}.col--offset-11{margin-left:91.66667%}.col--12{--ifm-col-width:100%}.col--offset-12{margin-left:100%}.margin-horiz--none,.margin-left--none{margin-left:0!important}.margin--none{margin:0!important}.margin-bottom--xs,.margin-vert--xs{margin-bottom:.25rem!important}.margin-top--xs,.margin-vert--xs{margin-top:.25rem!important}.margin-horiz--xs,.margin-left--xs{margin-left:.25rem!important}.margin-horiz--xs,.margin-right--xs{margin-right:.25rem!important}.margin--xs{margin:.25rem!important}.margin-bottom--sm,.margin-vert--sm{margin-bottom:.5rem!important}.margin-top--sm,.margin-vert--sm{margin-top:.5rem!important}.margin-horiz--sm,.margin-left--sm{margin-left:.5rem!important}.margin-horiz--sm,.margin-right--sm{margin-right:.5rem!important}.margin--sm{margin:.5rem!important}.margin-bottom--md,.margin-vert--md{margin-bottom:1rem!important}.margin-top--md,.margin-vert--md{margin-top:1rem!important}.margin-horiz--md,.margin-left--md{margin-left:1rem!important}.margin-horiz--md,.margin-right--md{margin-right:1rem!important}.margin--md{margin:1rem!important}.margin-bottom--lg,.margin-vert--lg{margin-bottom:2rem!important}.margin-top--lg,.margin-vert--lg{margin-top:2rem!important}.margin-horiz--lg,.margin-left--lg{margin-left:2rem!important}.margin-horiz--lg,.margin-right--lg{margin-right:2rem!important}.margin--lg{margin:2rem!important}.margin-bottom--xl,.margin-vert--xl{margin-bottom:5rem!important}.margin-top--xl,.margin-vert--xl{margin-top:5rem!important}.margin-horiz--xl,.margin-left--xl{margin-left:5rem!important}.margin-horiz--xl,.margin-right--xl{margin-right:5rem!important}.margin--xl{margin:5rem!important}.padding--none{padding:0!important}.padding-bottom--xs,.padding-vert--xs{padding-bottom:.25rem!important}.padding-top--xs,.padding-vert--xs{padding-top:.25rem!important}.padding-horiz--xs,.padding-left--xs{padding-left:.25rem!important}.padding-horiz--xs,.padding-right--xs{padding-right:.25rem!important}.padding--xs{padding:.25rem!important}.padding-bottom--sm,.padding-vert--sm{padding-bottom:.5rem!important}.padding-top--sm,.padding-vert--sm{padding-top:.5rem!important}.padding-horiz--sm,.padding-left--sm{padding-left:.5rem!important}.padding-horiz--sm,.padding-right--sm{padding-right:.5rem!important}.padding--sm{padding:.5rem!important}.padding-bottom--md,.padding-vert--md{padding-bottom:1rem!important}.padding-top--md,.padding-vert--md{padding-top:1rem!important}.padding-horiz--md,.padding-left--md{padding-left:1rem!important}.padding-horiz--md,.padding-right--md{padding-right:1rem!important}.padding--md{padding:1rem!important}.padding-bottom--lg,.padding-vert--lg{padding-bottom:2rem!important}.padding-top--lg,.padding-vert--lg{padding-top:2rem!important}.padding-horiz--lg,.padding-left--lg{padding-left:2rem!important}.padding-horiz--lg,.padding-right--lg{padding-right:2rem!important}.padding--lg{padding:2rem!important}.padding-bottom--xl,.padding-vert--xl{padding-bottom:5rem!important}.padding-top--xl,.padding-vert--xl{padding-top:5rem!important}.padding-horiz--xl,.padding-left--xl{padding-left:5rem!important}.padding-horiz--xl,.padding-right--xl{padding-right:5rem!important}.padding--xl{padding:5rem!important}code{background-color:var(--ifm-code-background);border:.1rem solid rgba(0,0,0,.1);border-radius:var(--ifm-code-border-radius);font-family:var(--ifm-font-family-monospace);font-size:var(--ifm-code-font-size);padding:var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal)}a code{color:inherit}pre{background-color:var(--ifm-pre-background);border-radius:var(--ifm-pre-border-radius);color:var(--ifm-pre-color);font:var(--ifm-code-font-size)/var(--ifm-pre-line-height) var(--ifm-font-family-monospace);padding:var(--ifm-pre-padding)}pre code{background-color:transparent;border:none;font-size:100%;line-height:inherit;padding:0}kbd{background-color:var(--ifm-color-emphasis-0);border:1px solid var(--ifm-color-emphasis-400);border-radius:.2rem;box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-400);color:var(--ifm-color-emphasis-800);font:80% var(--ifm-font-family-monospace);padding:.15rem .3rem}h1,h2,h3,h4,h5,h6{color:var(--ifm-heading-color);font-family:var(--ifm-heading-font-family);font-weight:var(--ifm-heading-font-weight);line-height:var(--ifm-heading-line-height);margin:var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0}h1{font-size:var(--ifm-h1-font-size)}h2{font-size:var(--ifm-h2-font-size)}h3{font-size:var(--ifm-h3-font-size)}h4{font-size:var(--ifm-h4-font-size)}h5{font-size:var(--ifm-h5-font-size)}h6{font-size:var(--ifm-h6-font-size)}img{max-width:100%}img[align=right]{padding-left:var(--image-alignment-padding)}img[align=left]{padding-right:var(--image-alignment-padding)}.markdown{--ifm-h1-vertical-rhythm-top:3;--ifm-h2-vertical-rhythm-top:2;--ifm-h3-vertical-rhythm-top:1.5;--ifm-heading-vertical-rhythm-top:1.25;--ifm-h1-vertical-rhythm-bottom:1.25;--ifm-heading-vertical-rhythm-bottom:1}.markdown:after,.markdown:before{content:"";display:table}.markdown:after{clear:both}.markdown h1:first-child{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-h1-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown>h2{--ifm-h2-font-size:2rem;margin-top:calc(var(--ifm-h2-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h3{--ifm-h3-font-size:1.5rem;margin-top:calc(var(--ifm-h3-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h4,.markdown>h5,.markdown>h6{margin-top:calc(var(--ifm-heading-vertical-rhythm-top)*var(--ifm-leading))}.markdown>p,.markdown>pre,.markdown>ul{margin-bottom:var(--ifm-leading)}.markdown li>p{margin-top:var(--ifm-list-paragraph-margin)}.markdown li+li{margin-top:var(--ifm-list-item-margin)}ol,ul{margin:0 0 var(--ifm-list-margin);padding-left:var(--ifm-list-left-padding)}ol ol,ul ol{list-style-type:lower-roman}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}table{border-collapse:collapse;display:block;margin-bottom:var(--ifm-spacing-vertical)}table thead tr{border-bottom:2px solid var(--ifm-table-border-color)}table thead,table tr:nth-child(2n){background-color:var(--ifm-table-stripe-background)}table tr{background-color:var(--ifm-table-background);border-top:var(--ifm-table-border-width) solid var(--ifm-table-border-color)}table td,table th{border:var(--ifm-table-border-width) solid var(--ifm-table-border-color);padding:var(--ifm-table-cell-padding)}table th{background-color:var(--ifm-table-head-background);color:var(--ifm-table-head-color);font-weight:var(--ifm-table-head-font-weight)}table td{color:var(--ifm-table-cell-color)}strong{font-weight:var(--ifm-font-weight-bold);color:#fff}a{color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}a:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.button:hover,.text--no-decoration,.text--no-decoration:hover,a:not([href]){text-decoration:none}p{margin:0 0 var(--ifm-paragraph-margin-bottom)}blockquote{border-left:var(--ifm-blockquote-border-left-width) solid var(--ifm-blockquote-border-color);box-shadow:var(--ifm-blockquote-shadow);color:var(--ifm-blockquote-color);font-size:var(--ifm-blockquote-font-size);padding:var(--ifm-blockquote-padding-vertical) var(--ifm-blockquote-padding-horizontal)}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}hr{background-color:var(--ifm-hr-background-color);border:0;height:var(--ifm-hr-height);margin:var(--ifm-hr-margin-vertical) 0}.shadow--lw{box-shadow:var(--ifm-global-shadow-lw)!important}.shadow--md{box-shadow:var(--ifm-global-shadow-md)!important}.shadow--tl{box-shadow:var(--ifm-global-shadow-tl)!important}.text--primary,.wordWrapButtonEnabled_EoeP .wordWrapButtonIcon_Bwma{color:var(--ifm-color-primary)}.text--secondary{color:var(--ifm-color-secondary)}.text--success{color:var(--ifm-color-success)}.text--info{color:var(--ifm-color-info)}.text--warning{color:var(--ifm-color-warning)}.text--danger{color:var(--ifm-color-danger)}.text--center{text-align:center}.text--left{text-align:left}.text--justify{text-align:justify}.text--right{text-align:right}.text--capitalize{text-transform:capitalize}.text--lowercase{text-transform:lowercase}.admonitionHeading_tbUL,.alert__heading,.text--uppercase{text-transform:uppercase}.text--light{font-weight:var(--ifm-font-weight-light)}.text--normal{font-weight:var(--ifm-font-weight-normal)}.text--semibold{font-weight:var(--ifm-font-weight-semibold)}.text--bold{font-weight:var(--ifm-font-weight-bold)}.text--italic{font-style:italic}.text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--break{word-wrap:break-word!important;word-break:break-word!important}.clean-btn{background:none;border:none;color:inherit;cursor:pointer;font-family:inherit;padding:0}.alert,.alert .close{color:var(--ifm-alert-foreground-color)}.clean-list{padding-left:0}.alert--primary{--ifm-alert-background-color:var(--ifm-color-primary-contrast-background);--ifm-alert-background-color-highlight:rgba(53,120,229,.15);--ifm-alert-foreground-color:var(--ifm-color-primary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-primary-dark)}.alert--secondary{--ifm-alert-background-color:var(--ifm-color-secondary-contrast-background);--ifm-alert-background-color-highlight:rgba(235,237,240,.15);--ifm-alert-foreground-color:var(--ifm-color-secondary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-secondary-dark)}.alert--success{--ifm-alert-background-color:var(--ifm-color-success-contrast-background);--ifm-alert-background-color-highlight:rgba(0,164,0,.15);--ifm-alert-foreground-color:var(--ifm-color-success-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-success-dark)}.alert--info{--ifm-alert-background-color:var(--ifm-color-info-contrast-background);--ifm-alert-background-color-highlight:rgba(84,199,236,.15);--ifm-alert-foreground-color:var(--ifm-color-info-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-info-dark)}.alert--warning{--ifm-alert-background-color:var(--ifm-color-warning-contrast-background);--ifm-alert-background-color-highlight:rgba(255,186,0,.15);--ifm-alert-foreground-color:var(--ifm-color-warning-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-warning-dark)}.alert--danger{--ifm-alert-background-color:var(--ifm-color-danger-contrast-background);--ifm-alert-background-color-highlight:rgba(250,56,62,.15);--ifm-alert-foreground-color:var(--ifm-color-danger-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-danger-dark)}.alert{--ifm-code-background:var(--ifm-alert-background-color-highlight);--ifm-link-color:var(--ifm-alert-foreground-color);--ifm-link-hover-color:var(--ifm-alert-foreground-color);--ifm-link-decoration:underline;--ifm-tabs-color:var(--ifm-alert-foreground-color);--ifm-tabs-color-active:var(--ifm-alert-foreground-color);--ifm-tabs-color-active-border:var(--ifm-alert-border-color);background-color:var(--ifm-alert-background-color);border:var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);border-left-width:var(--ifm-alert-border-left-width);border-radius:var(--ifm-alert-border-radius);box-shadow:var(--ifm-alert-shadow);padding:var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal)}.alert__heading{align-items:center;display:flex;font:700 var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family);margin-bottom:.5rem}.alert__icon{display:inline-flex;margin-right:.4em}.alert__icon svg{fill:var(--ifm-alert-foreground-color);stroke:var(--ifm-alert-foreground-color);stroke-width:0}.alert .close{margin:calc(var(--ifm-alert-padding-vertical)*-1) calc(var(--ifm-alert-padding-horizontal)*-1) 0 0;opacity:.75}.alert .close:focus,.alert .close:hover{opacity:1}.alert a{text-decoration-color:var(--ifm-alert-border-color)}.alert a:hover{text-decoration-thickness:2px}.avatar{-moz-column-gap:var(--ifm-avatar-intro-margin);column-gap:var(--ifm-avatar-intro-margin);display:flex}.avatar__photo{border-radius:50%;display:block;height:var(--ifm-avatar-photo-size);overflow:hidden;width:var(--ifm-avatar-photo-size)}.card--full-height,.navbar__logo img,body,html{height:100%}.avatar__photo--sm{--ifm-avatar-photo-size:2rem}.avatar__photo--lg{--ifm-avatar-photo-size:4rem}.avatar__photo--xl{--ifm-avatar-photo-size:6rem}.avatar__intro{display:flex;flex:1 1;flex-direction:column;justify-content:center;text-align:var(--ifm-avatar-intro-alignment)}.badge,.breadcrumbs__item,.breadcrumbs__link,.button,.dropdown>.navbar__link:after{display:inline-block}.avatar__name{font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base)}.avatar__subtitle{margin-top:.25rem}.avatar--vertical{--ifm-avatar-intro-alignment:center;--ifm-avatar-intro-margin:0.5rem;align-items:center;flex-direction:column}.badge{background-color:var(--ifm-badge-background-color);border:var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);border-radius:var(--ifm-badge-border-radius);color:var(--ifm-badge-color);font-size:75%;font-weight:var(--ifm-font-weight-bold);line-height:1;padding:var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal)}.badge--primary{--ifm-badge-background-color:var(--ifm-color-primary)}.badge--secondary{--ifm-badge-background-color:var(--ifm-color-secondary);color:var(--ifm-color-black)}.breadcrumbs__link,.button.button--secondary.button--outline:not(.button--active):not(:hover){color:var(--ifm-font-color-base)}.badge--success{--ifm-badge-background-color:var(--ifm-color-success)}.badge--info{--ifm-badge-background-color:var(--ifm-color-info)}.badge--warning{--ifm-badge-background-color:var(--ifm-color-warning)}.badge--danger{--ifm-badge-background-color:var(--ifm-color-danger)}.breadcrumbs{margin-bottom:0;padding-left:0}.breadcrumbs__item:not(:last-child):after{background:var(--ifm-breadcrumb-separator) center;content:" ";display:inline-block;filter:var(--ifm-breadcrumb-separator-filter);height:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));margin:0 var(--ifm-breadcrumb-spacing);opacity:.5;width:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier))}.breadcrumbs__item--active .breadcrumbs__link{background:var(--ifm-breadcrumb-item-background-active);color:var(--ifm-breadcrumb-color-active)}.breadcrumbs__link{border-radius:var(--ifm-breadcrumb-border-radius);font-size:calc(1rem*var(--ifm-breadcrumb-size-multiplier));padding:calc(var(--ifm-breadcrumb-padding-vertical)*var(--ifm-breadcrumb-size-multiplier)) calc(var(--ifm-breadcrumb-padding-horizontal)*var(--ifm-breadcrumb-size-multiplier));transition-duration:var(--ifm-transition-fast);transition-property:background,color}.breadcrumbs__link:link:hover,.breadcrumbs__link:visited:hover,area[href].breadcrumbs__link:hover{background:var(--ifm-breadcrumb-item-background-active);text-decoration:none}.breadcrumbs__link:-moz-any-link:hover{background:var(--ifm-breadcrumb-item-background-active);text-decoration:none}.breadcrumbs__link:any-link:hover{background:var(--ifm-breadcrumb-item-background-active);text-decoration:none}.breadcrumbs--sm{--ifm-breadcrumb-size-multiplier:0.8}.breadcrumbs--lg{--ifm-breadcrumb-size-multiplier:1.2}.button{background-color:var(--ifm-button-background-color);border:var(--ifm-button-border-width) solid var(--ifm-button-border-color);border-radius:var(--ifm-button-border-radius);cursor:pointer;font-size:calc(.875rem*var(--ifm-button-size-multiplier));font-weight:var(--ifm-button-font-weight);line-height:1.5;padding:calc(var(--ifm-button-padding-vertical)*var(--ifm-button-size-multiplier)) calc(var(--ifm-button-padding-horizontal)*var(--ifm-button-size-multiplier));text-align:center;transition-duration:var(--ifm-button-transition-duration);transition-property:color,background,border-color;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.button,.button:hover{color:var(--ifm-button-color)}.button--outline{--ifm-button-color:var(--ifm-button-border-color)}.button--outline:hover{--ifm-button-background-color:var(--ifm-button-border-color)}.button--link{--ifm-button-border-color:transparent;color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}.button--link.button--active,.button--link:active,.button--link:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.button.disabled,.button:disabled,.button[disabled]{opacity:.65;pointer-events:none}.button--sm{--ifm-button-size-multiplier:0.8}.button--lg{--ifm-button-size-multiplier:1.35}.button--block{display:block;width:100%}.button.button--secondary{color:var(--ifm-color-gray-900)}:where(.button--primary){--ifm-button-background-color:var(--ifm-color-primary);--ifm-button-border-color:var(--ifm-color-primary)}:where(.button--primary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-primary-dark);--ifm-button-border-color:var(--ifm-color-primary-dark)}.button--primary.button--active,.button--primary:active{--ifm-button-background-color:var(--ifm-color-primary-darker);--ifm-button-border-color:var(--ifm-color-primary-darker)}:where(.button--secondary){--ifm-button-background-color:var(--ifm-color-secondary);--ifm-button-border-color:var(--ifm-color-secondary)}:where(.button--secondary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-secondary-dark);--ifm-button-border-color:var(--ifm-color-secondary-dark)}.button--secondary.button--active,.button--secondary:active{--ifm-button-background-color:var(--ifm-color-secondary-darker);--ifm-button-border-color:var(--ifm-color-secondary-darker)}:where(.button--success){--ifm-button-background-color:var(--ifm-color-success);--ifm-button-border-color:var(--ifm-color-success)}:where(.button--success):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-success-dark);--ifm-button-border-color:var(--ifm-color-success-dark)}.button--success.button--active,.button--success:active{--ifm-button-background-color:var(--ifm-color-success-darker);--ifm-button-border-color:var(--ifm-color-success-darker)}:where(.button--info){--ifm-button-background-color:var(--ifm-color-info);--ifm-button-border-color:var(--ifm-color-info)}:where(.button--info):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-info-dark);--ifm-button-border-color:var(--ifm-color-info-dark)}.button--info.button--active,.button--info:active{--ifm-button-background-color:var(--ifm-color-info-darker);--ifm-button-border-color:var(--ifm-color-info-darker)}:where(.button--warning){--ifm-button-background-color:var(--ifm-color-warning);--ifm-button-border-color:var(--ifm-color-warning)}:where(.button--warning):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-warning-dark);--ifm-button-border-color:var(--ifm-color-warning-dark)}.button--warning.button--active,.button--warning:active{--ifm-button-background-color:var(--ifm-color-warning-darker);--ifm-button-border-color:var(--ifm-color-warning-darker)}:where(.button--danger){--ifm-button-background-color:var(--ifm-color-danger);--ifm-button-border-color:var(--ifm-color-danger)}:where(.button--danger):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-danger-dark);--ifm-button-border-color:var(--ifm-color-danger-dark)}.button--danger.button--active,.button--danger:active{--ifm-button-background-color:var(--ifm-color-danger-darker);--ifm-button-border-color:var(--ifm-color-danger-darker)}.button-group{display:inline-flex;gap:var(--ifm-button-group-spacing)}.button-group>.button:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.button-group>.button:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.button-group--block{display:flex;justify-content:stretch}.button-group--block>.button{flex-grow:1}.card{background-color:var(--ifm-card-background-color);border-radius:var(--ifm-card-border-radius);box-shadow:var(--ifm-global-shadow-lw);display:flex;flex-direction:column;overflow:hidden}.card__image{padding-top:var(--ifm-card-vertical-spacing)}.card__image:first-child{padding-top:0}.card__body,.card__footer,.card__header{padding:var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing)}.card__body:not(:last-child),.card__footer:not(:last-child),.card__header:not(:last-child){padding-bottom:0}.card__body>:last-child,.card__footer>:last-child,.card__header>:last-child{margin-bottom:0}.card__footer{margin-top:auto}.table-of-contents{font-size:.8rem;margin-bottom:0;padding:var(--ifm-toc-padding-vertical) 0}.table-of-contents,.table-of-contents ul{list-style:none;padding-left:var(--ifm-toc-padding-horizontal)}.table-of-contents li{margin:var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal)}.table-of-contents__left-border{border-left:1px solid var(--ifm-toc-border-color)}.table-of-contents__link{color:var(--ifm-toc-link-color);display:block}.table-of-contents__link--active,.table-of-contents__link--active code,.table-of-contents__link:hover,.table-of-contents__link:hover code{color:var(--ifm-color-primary);text-decoration:none}.close{color:var(--ifm-color-black);float:right;font-size:1.5rem;font-weight:var(--ifm-font-weight-bold);line-height:1;opacity:.5;padding:1rem;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.close:hover{opacity:.7}.close:focus,.theme-code-block-highlighted-line .codeLineNumber_Tfdd:before{opacity:.8}.dropdown{display:inline-flex;font-weight:var(--ifm-dropdown-font-weight);position:relative;vertical-align:top}.dropdown--hoverable:hover .dropdown__menu,.dropdown--show .dropdown__menu{opacity:1;pointer-events:all;transform:translateY(-1px);visibility:visible}#nprogress,.dropdown__menu,.navbar__item.dropdown .navbar__link:not([href]){pointer-events:none}.dropdown--right .dropdown__menu{left:inherit;right:0}.dropdown--nocaret .navbar__link:after{content:none!important}.dropdown__menu{background-color:var(--ifm-dropdown-background-color);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-md);left:0;max-height:80vh;min-width:10rem;opacity:0;overflow-y:auto;padding:.5rem;position:absolute;top:calc(100% - var(--ifm-navbar-item-padding-vertical) + .3rem);transform:translateY(-.625rem);transition-duration:var(--ifm-transition-fast);transition-property:opacity,transform,visibility;transition-timing-function:var(--ifm-transition-timing-default);visibility:hidden;z-index:var(--ifm-z-index-dropdown)}.menu__caret,.menu__link,.menu__list-item-collapsible{border-radius:.25rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.dropdown__link{border-radius:.25rem;color:var(--ifm-dropdown-link-color);display:block;font-size:.875rem;margin-top:.2rem;padding:.25rem .5rem;white-space:nowrap}.dropdown__link--active,.dropdown__link:hover{background-color:var(--ifm-dropdown-hover-background-color);color:var(--ifm-dropdown-link-color);text-decoration:none}.dropdown__link--active,.dropdown__link--active:hover{--ifm-dropdown-link-color:var(--ifm-link-color)}.dropdown>.navbar__link:after{border-color:currentcolor transparent;border-style:solid;border-width:.4em .4em 0;content:"";margin-left:.3em;position:relative;top:2px;transform:translateY(-50%)}.footer{background-color:var(--ifm-footer-background-color);color:var(--ifm-footer-color);padding:var(--ifm-footer-padding-vertical) var(--ifm-footer-padding-horizontal)}.footer--dark{--ifm-footer-background-color:#303846;--ifm-footer-color:var(--ifm-footer-link-color);--ifm-footer-link-color:var(--ifm-color-secondary);--ifm-footer-title-color:var(--ifm-color-white)}.footer__links{margin-bottom:1rem}.footer__link-item{color:var(--ifm-footer-link-color);line-height:2}.footer__link-item:hover{color:var(--ifm-footer-link-hover-color)}.footer__link-separator{margin:0 var(--ifm-footer-link-horizontal-spacing)}.footer__logo{margin-top:1rem;max-width:var(--ifm-footer-logo-max-width)}.footer__title{color:var(--ifm-footer-title-color);font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base);margin-bottom:var(--ifm-heading-margin-bottom)}.menu,.navbar__link{font-weight:var(--ifm-font-weight-semibold)}.docItemContainer_Djhp article>:first-child,.docItemContainer_Djhp header+*,.footer__item{margin-top:0}.admonitionContent_S0QG>:last-child,.collapsibleContent_i85q>:last-child,.footer__items{margin-bottom:0}.codeBlockStandalone_MEMb,[type=checkbox]{padding:0}.hero{align-items:center;background-color:var(--ifm-hero-background-color);color:var(--ifm-hero-text-color);display:flex;padding:4rem 2rem}.hero--primary{--ifm-hero-background-color:var(--ifm-color-primary);--ifm-hero-text-color:var(--ifm-font-color-base-inverse)}.hero--dark{--ifm-hero-background-color:#303846;--ifm-hero-text-color:var(--ifm-color-white)}.hero__title{font-size:3rem}.hero__subtitle{font-size:1.5rem}.menu__list{margin:0;padding-left:0}.menu__caret,.menu__link{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu__list .menu__list{flex:0 0 100%;margin-top:.25rem;padding-left:var(--ifm-menu-link-padding-horizontal)}.menu__list-item:not(:first-child){margin-top:.25rem}.menu__list-item--collapsed .menu__list{height:0;overflow:hidden}.details_lb9f[data-collapsed=false].isBrowser_bmU9>summary:before,.details_lb9f[open]:not(.isBrowser_bmU9)>summary:before,.menu__list-item--collapsed .menu__caret:before,.menu__list-item--collapsed .menu__link--sublist:after{transform:rotate(90deg)}.menu__list-item-collapsible{display:flex;flex-wrap:wrap;position:relative}.menu__caret:hover,.menu__link:hover,.menu__list-item-collapsible--active,.menu__list-item-collapsible:hover{background:var(--ifm-menu-color-background-hover)}.menu__list-item-collapsible .menu__link--active,.menu__list-item-collapsible .menu__link:hover{background:none!important}.menu__caret,.menu__link{align-items:center;display:flex}.menu__link{color:var(--ifm-menu-color);flex:1;line-height:1.25}.menu__link:hover{color:var(--ifm-menu-color);text-decoration:none}.menu__caret:before,.menu__link--sublist-caret:after{height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast) linear;width:1.25rem;filter:var(--ifm-menu-link-sublist-icon-filter);content:""}.menu__link--sublist-caret:after{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;margin-left:auto;min-width:1.25rem}.menu__link--active,.menu__link--active:hover{color:var(--ifm-menu-color-active)}.navbar__brand,.navbar__link{color:var(--ifm-navbar-link-color)}.menu__link--active:not(.menu__link--sublist){background-color:var(--ifm-menu-color-background-active)}.menu__caret:before{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem}.navbar--dark,html[data-theme=dark]{--ifm-menu-link-sublist-icon-filter:invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%)}.navbar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar,.navbar>.container,.navbar>.container-fluid{display:flex}.navbar--fixed-top{position:sticky;top:0;z-index:var(--ifm-z-index-fixed)}.navbar-sidebar,.navbar-sidebar__backdrop{bottom:0;opacity:0;position:fixed;transition-duration:var(--ifm-transition-fast);transition-timing-function:ease-in-out;left:0;top:0;visibility:hidden}.navbar__inner{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}.navbar__brand{align-items:center;display:flex;margin-right:1rem;min-width:0}.navbar__brand:hover{color:var(--ifm-navbar-link-hover-color);text-decoration:none}.announcementBarContent_xLdY,.navbar__title{flex:1 1 auto}.navbar__toggle{display:none;margin-right:.5rem}.navbar__logo{flex:0 0 auto;height:2rem;margin-right:.5rem}.navbar__items{align-items:center;display:flex;flex:1;min-width:0}.navbar__items--center{flex:0 0 auto}.navbar__items--center .navbar__brand{margin:0}.navbar__items--center+.navbar__items--right{flex:1}.navbar__items--right{flex:0 0 auto;justify-content:flex-end}.navbar__items--right>:last-child{padding-right:0}.navbar__item{display:inline-block;padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}.navbar__link--active,.navbar__link:hover{color:var(--ifm-navbar-link-hover-color);text-decoration:none}.navbar--dark,.navbar--primary{--ifm-menu-color:var(--ifm-color-gray-300);--ifm-navbar-link-color:var(--ifm-color-gray-100);--ifm-navbar-search-input-background-color:hsla(0,0%,100%,.1);--ifm-navbar-search-input-placeholder-color:hsla(0,0%,100%,.5);color:var(--ifm-color-white)}.navbar--dark{--ifm-navbar-background-color:#242526;--ifm-menu-color-background-active:hsla(0,0%,100%,.05);--ifm-navbar-search-input-color:var(--ifm-color-white)}.navbar--primary{--ifm-navbar-background-color:var(--ifm-color-primary);--ifm-navbar-link-hover-color:var(--ifm-color-white);--ifm-menu-color-active:var(--ifm-color-white);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-500)}.navbar__search-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat .75rem center/1rem 1rem;border:none;border-radius:2rem;color:var(--ifm-navbar-search-input-color);cursor:text;display:inline-block;font-size:.9rem;height:2rem;padding:0 .5rem 0 2.25rem;width:12.5rem}.navbar__search-input::-moz-placeholder{color:var(--ifm-navbar-search-input-placeholder-color)}.navbar__search-input::placeholder{color:var(--ifm-navbar-search-input-placeholder-color)}.navbar-sidebar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-global-shadow-md);transform:translate3d(-100%,0,0);transition-property:opacity,visibility,transform;width:var(--ifm-navbar-sidebar-width)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar__items{transform:translateZ(0)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar--show .navbar-sidebar__backdrop{opacity:1;visibility:visible}.navbar-sidebar__backdrop{background-color:rgba(0,0,0,.6);right:0;transition-property:opacity,visibility}.navbar-sidebar__brand{align-items:center;box-shadow:var(--ifm-navbar-shadow);display:flex;flex:1;height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar-sidebar__items{display:flex;height:calc(100% - var(--ifm-navbar-height));transition:transform var(--ifm-transition-fast) ease-in-out}.navbar-sidebar__items--show-secondary{transform:translate3d(calc((var(--ifm-navbar-sidebar-width))*-1),0,0)}.navbar-sidebar__item{flex-shrink:0;padding:.5rem;width:calc(var(--ifm-navbar-sidebar-width))}.navbar-sidebar__back{background:var(--ifm-menu-color-background-active);font-size:15px;font-weight:var(--ifm-button-font-weight);margin:0 0 .2rem -.5rem;padding:.6rem 1.5rem;position:relative;text-align:left;top:-.5rem;width:calc(100% + 1rem)}.accentGradient_xnKm,.mainGradient_BHIB{width:200%;height:200%;position:absolute}.navbar-sidebar__close{display:flex;margin-left:auto}.pagination{-moz-column-gap:var(--ifm-pagination-page-spacing);column-gap:var(--ifm-pagination-page-spacing);display:flex;font-size:var(--ifm-pagination-font-size);padding-left:0}.pagination--sm{--ifm-pagination-font-size:0.8rem;--ifm-pagination-padding-horizontal:0.8rem;--ifm-pagination-padding-vertical:0.2rem}.pagination--lg{--ifm-pagination-font-size:1.2rem;--ifm-pagination-padding-horizontal:1.2rem;--ifm-pagination-padding-vertical:0.3rem}.pagination__item{display:inline-flex}.pagination__item>span{padding:var(--ifm-pagination-padding-vertical)}.pagination__item--active .pagination__link{color:var(--ifm-pagination-color-active)}.pagination__item--active .pagination__link,.pagination__item:not(.pagination__item--active):hover .pagination__link{background:var(--ifm-pagination-item-active-background)}.pagination__item--disabled,.pagination__item[disabled]{opacity:.25;pointer-events:none}.pagination__link{border-radius:var(--ifm-pagination-border-radius);color:var(--ifm-font-color-base);display:inline-block;padding:var(--ifm-pagination-padding-vertical) var(--ifm-pagination-padding-horizontal);transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination__link:hover{text-decoration:none}.pagination-nav{grid-gap:var(--ifm-spacing-horizontal);display:grid;gap:var(--ifm-spacing-horizontal);grid-template-columns:repeat(2,1fr)}.pagination-nav__link{border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-pagination-nav-border-radius);display:block;height:100%;line-height:var(--ifm-heading-line-height);padding:var(--ifm-global-spacing);transition:border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination-nav__link:hover{border-color:var(--ifm-pagination-nav-color-hover);text-decoration:none}.pagination-nav__link--next{grid-column:2/3;text-align:right}.pagination-nav__label{font-size:var(--ifm-h4-font-size);font-weight:var(--ifm-heading-font-weight);word-break:break-word}.pagination-nav__link--prev .pagination-nav__label:before{content:"« "}.pagination-nav__link--next .pagination-nav__label:after{content:" »"}.pagination-nav__sublabel{color:var(--ifm-color-content-secondary);font-size:var(--ifm-h5-font-size);font-weight:var(--ifm-font-weight-semibold);margin-bottom:.25rem}.pills__item,.tabs{font-weight:var(--ifm-font-weight-bold)}.pills{display:flex;gap:var(--ifm-pills-spacing);padding-left:0}.pills__item{border-radius:.5rem;cursor:pointer;display:inline-block;padding:.25rem 1rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.tabs,:not(.containsTaskList_mC6p>li)>.containsTaskList_mC6p{padding-left:0}.pills__item--active{color:var(--ifm-pills-color-active)}.pills__item--active,.pills__item:not(.pills__item--active):hover{background:var(--ifm-pills-color-background-active)}.pills--block{justify-content:stretch}.pills--block .pills__item{flex-grow:1;text-align:center}.tabs{color:var(--ifm-tabs-color);display:flex;margin-bottom:0;overflow-x:auto}.tabs__item{border-bottom:3px solid transparent;border-radius:var(--ifm-global-radius);cursor:pointer;display:inline-flex;padding:var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal);transition:background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.tabs__item--active{border-bottom-color:var(--ifm-tabs-color-active-border);border-bottom-left-radius:0;border-bottom-right-radius:0;color:var(--ifm-tabs-color-active)}.tabs__item:hover{background-color:var(--ifm-hover-overlay)}.tabs--block{justify-content:stretch}.tabs--block .tabs__item{flex-grow:1;justify-content:center}html[data-theme=dark]{--ifm-color-scheme:dark;--ifm-color-emphasis-0:var(--ifm-color-gray-1000);--ifm-color-emphasis-100:var(--ifm-color-gray-900);--ifm-color-emphasis-200:var(--ifm-color-gray-800);--ifm-color-emphasis-300:var(--ifm-color-gray-700);--ifm-color-emphasis-400:var(--ifm-color-gray-600);--ifm-color-emphasis-600:var(--ifm-color-gray-400);--ifm-color-emphasis-700:var(--ifm-color-gray-300);--ifm-color-emphasis-800:var(--ifm-color-gray-200);--ifm-color-emphasis-900:var(--ifm-color-gray-100);--ifm-color-emphasis-1000:var(--ifm-color-gray-0);--ifm-background-color:#1b1b1d;--ifm-background-surface-color:#242526;--ifm-hover-overlay:hsla(0,0%,100%,.05);--ifm-color-content:#e3e3e3;--ifm-color-content-secondary:#fff;--ifm-breadcrumb-separator-filter:invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);--ifm-code-background:hsla(0,0%,100%,.1);--ifm-scrollbar-track-background-color:#444;--ifm-scrollbar-thumb-background-color:#686868;--ifm-scrollbar-thumb-hover-background-color:#7a7a7a;--ifm-table-stripe-background:hsla(0,0%,100%,.07);--ifm-toc-border-color:var(--ifm-color-emphasis-200);--ifm-color-primary-contrast-background:#102445;--ifm-color-primary-contrast-foreground:#ebf2fc;--ifm-color-secondary-contrast-background:#474748;--ifm-color-secondary-contrast-foreground:#fdfdfe;--ifm-color-success-contrast-background:#003100;--ifm-color-success-contrast-foreground:#e6f6e6;--ifm-color-info-contrast-background:#193c47;--ifm-color-info-contrast-foreground:#eef9fd;--ifm-color-warning-contrast-background:#4d3800;--ifm-color-warning-contrast-foreground:#fff8e6;--ifm-color-danger-contrast-background:#4b1113;--ifm-color-danger-contrast-foreground:#ffebec}#nprogress .bar{background:var(--docusaurus-progress-bar-color);height:2px;left:0;position:fixed;top:0;width:100%;z-index:1031}#nprogress .peg{box-shadow:0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color);height:100%;opacity:1;position:absolute;right:0;transform:rotate(3deg) translateY(-4px);width:100px}h1{font-weight:300}}.prism-code{border:1px solid hsla(0,0%,100%,.1)}.gradientBackground_W6vG{background-color:var(--dark-gray);inset:0;opacity:.35;overflow:hidden;position:fixed;z-index:-1}@keyframes a{0%{bottom:-100%;right:-100%}40%{right:0}55%{bottom:0}85%{right:-100%}to{bottom:-100%}}.accentGradient_xnKm{animation:60s infinite a;background-color:var(--dark-gray);background:radial-gradient(circle,#6528d750 0,transparent 70%);bottom:-100%;right:-100%}@keyframes b{0%{left:-100%;top:-100%}40%{left:0}55%{top:0}85%{left:-100%}to{top:-100%}}.mainGradient_BHIB{animation:60s infinite b;background-color:var(--dark-gray);background:radial-gradient(circle,#bcf12450 0,transparent 70%);left:-100%;top:-100%}body:not(.navigation-with-keyboard) :not(input):focus{outline:0}#__docusaurus-base-url-issue-banner-container,.themedImage_ToTc,[data-theme=dark] .lightToggleIcon_pyhR,[data-theme=light] .darkToggleIcon_wfgR,html[data-announcement-bar-initially-dismissed=true] .announcementBar_mb4j{display:none}.skipToContent_fXgn{background-color:var(--ifm-background-surface-color);color:var(--ifm-color-emphasis-900);left:100%;padding:calc(var(--ifm-global-spacing)/2) var(--ifm-global-spacing);position:fixed;top:1rem;z-index:calc(var(--ifm-z-index-fixed) + 1)}.skipToContent_fXgn:focus{box-shadow:var(--ifm-global-shadow-md);left:1rem}.closeButton_CVFx{line-height:0;padding:0}.content_knG7{font-size:85%;padding:5px 0;text-align:center}.content_knG7 a{color:inherit;text-decoration:underline}.announcementBar_mb4j{align-items:center;background-color:var(--ifm-color-white);border-bottom:1px solid var(--ifm-color-emphasis-100);color:var(--ifm-color-black);display:flex;height:var(--docusaurus-announcement-bar-height)}.announcementBarPlaceholder_vyr4{flex:0 0 10px}.announcementBarClose_gvF7{align-self:stretch;flex:0 0 30px}.toggle_vylO{height:2rem;width:2rem}.toggleButton_gllP{align-items:center;border-radius:50%;display:flex;height:100%;justify-content:center;transition:background var(--ifm-transition-fast);width:100%}.toggleButton_gllP:hover{background:var(--ifm-color-emphasis-200)}.toggleButtonDisabled_aARS{cursor:not-allowed}.darkNavbarColorModeToggle_X3D1:hover{background:var(--ifm-color-gray-800)}[data-theme=dark] .themedImage--dark_i4oU,[data-theme=light] .themedImage--light_HNdA,html:not([data-theme]) .themedComponent--light_NU7w{display:initial}.iconExternalLink_nPIU{margin-left:.3rem}.iconLanguage_nlXk{margin-right:5px;vertical-align:text-bottom}.navbarHideable_m1mJ{transition:transform var(--ifm-transition-fast) ease}.navbarHidden_jGov{transform:translate3d(0,calc(-100% - 2px),0)}.errorBoundaryError_a6uf{color:red;white-space:pre-wrap}.footerLogoLink_BH7S{opacity:.5;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.footerLogoLink_BH7S:hover,.hash-link:focus,:hover>.hash-link{opacity:1}.mainWrapper_z2l0{display:flex;flex:1 0 auto;flex-direction:column}.docusaurus-mt-lg{margin-top:3rem}#__docusaurus{display:flex;flex-direction:column;min-height:100%}.iconEdit_Z9Sw{margin-right:.3em;vertical-align:sub}.tag_zVej{border:1px solid var(--docusaurus-tag-list-border);transition:border var(--ifm-transition-fast)}.tag_zVej:hover{--docusaurus-tag-list-border:var(--ifm-link-color);text-decoration:none}.tagRegular_sFm0{border-radius:var(--ifm-global-radius);font-size:90%;padding:.2rem .5rem .3rem}.tagWithCount_h2kH{align-items:center;border-left:0;display:flex;padding:0 .5rem 0 1rem;position:relative}.tagWithCount_h2kH:after,.tagWithCount_h2kH:before{border:1px solid var(--docusaurus-tag-list-border);content:"";position:absolute;top:50%;transition:inherit}.tagWithCount_h2kH:before{border-bottom:0;border-right:0;height:1.18rem;right:100%;transform:translate(50%,-50%) rotate(-45deg);width:1.18rem}.tagWithCount_h2kH:after{border-radius:50%;height:.5rem;left:0;transform:translateY(-50%);width:.5rem}.tagWithCount_h2kH span{background:var(--ifm-color-secondary);border-radius:var(--ifm-global-radius);color:var(--ifm-color-black);font-size:.7rem;line-height:1.2;margin-left:.3rem;padding:.1rem .4rem}.tags_jXut{display:inline}.tag_QGVx{display:inline-block;margin:0 .4rem .5rem 0}.lastUpdated_vwxv{font-size:smaller;font-style:italic;margin-top:.2rem}.tocCollapsibleButton_TO0P{align-items:center;display:flex;font-size:inherit;justify-content:space-between;padding:.4rem .8rem;width:100%}.tocCollapsibleButton_TO0P:after{background:var(--ifm-menu-link-sublist-icon) 50% 50%/2rem 2rem no-repeat;content:"";filter:var(--ifm-menu-link-sublist-icon-filter);height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast);width:1.25rem}.tocCollapsibleButtonExpanded_MG3E:after,.tocCollapsibleExpanded_sAul{transform:none}.tocCollapsible_ETCw{background-color:var(--ifm-menu-color-background-active);border-radius:var(--ifm-global-radius);margin:1rem 0}.buttonGroup__atx button,.codeBlockContainer_Ckt0{background:var(--prism-background-color);color:var(--prism-color)}.tocCollapsibleContent_vkbj>ul{border-left:none;border-top:1px solid var(--ifm-color-emphasis-300);font-size:15px;padding:.2rem 0}.tocCollapsibleContent_vkbj ul li{margin:.4rem .8rem}.tocCollapsibleContent_vkbj a{display:block}.tableOfContents_bqdL{max-height:calc(100vh - var(--ifm-navbar-height) - 2rem);overflow-y:auto;position:sticky;top:calc(var(--ifm-navbar-height) + 1rem)}.anchorWithStickyNavbar_LWe7{scroll-margin-top:calc(var(--ifm-navbar-height) + .5rem)}.anchorWithHideOnScrollNavbar_WYt5{scroll-margin-top:.5rem}.hash-link{opacity:0;padding-left:.5rem;transition:opacity var(--ifm-transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none}.hash-link:before{content:"#"}.codeBlockContainer_Ckt0{border-radius:var(--ifm-code-border-radius);box-shadow:var(--ifm-global-shadow-lw);margin-bottom:var(--ifm-leading)}.codeBlockContent_biex{border-radius:inherit;direction:ltr;position:relative}.codeBlockTitle_Ktv7{border-bottom:1px solid var(--ifm-color-emphasis-300);border-top-left-radius:inherit;border-top-right-radius:inherit;font-size:var(--ifm-code-font-size);font-weight:500;padding:.75rem var(--ifm-pre-padding)}.codeBlock_bY9V{--ifm-pre-background:var(--prism-background-color);margin:0;padding:0}.codeBlockTitle_Ktv7+.codeBlockContent_biex .codeBlock_bY9V{border-top-left-radius:0;border-top-right-radius:0}.codeBlockLines_e6Vv{float:left;font:inherit;min-width:100%;padding:var(--ifm-pre-padding)}.codeBlockLinesWithNumbering_o6Pm{display:table;padding:var(--ifm-pre-padding) 0}.buttonGroup__atx{-moz-column-gap:.2rem;column-gap:.2rem;display:flex;position:absolute;right:calc(var(--ifm-pre-padding)/2);top:calc(var(--ifm-pre-padding)/2)}.buttonGroup__atx button{align-items:center;border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-global-radius);display:flex;line-height:0;opacity:0;padding:.4rem;transition:opacity var(--ifm-transition-fast) ease-in-out}.buttonGroup__atx button:focus-visible,.buttonGroup__atx button:hover{opacity:1!important}.theme-code-block:hover .buttonGroup__atx button{opacity:.4}:where(:root){--docusaurus-highlighted-code-line-bg:#484d5b}:where([data-theme=dark]){--docusaurus-highlighted-code-line-bg:#646464}.theme-code-block-highlighted-line{background-color:var(--docusaurus-highlighted-code-line-bg);display:block;margin:0 calc(var(--ifm-pre-padding)*-1);padding:0 var(--ifm-pre-padding)}.codeLine_lJS_{counter-increment:a;display:table-row}.codeLineNumber_Tfdd{background:var(--ifm-pre-background);display:table-cell;left:0;overflow-wrap:normal;padding:0 var(--ifm-pre-padding);position:sticky;text-align:right;width:1%}.codeLineNumber_Tfdd:before{content:counter(a);opacity:.4}.codeLineContent_feaV{padding-right:var(--ifm-pre-padding)}.theme-code-block:hover .copyButtonCopied_obH4{opacity:1!important}.copyButtonIcons_eSgA{height:1.125rem;position:relative;width:1.125rem}.copyButtonIcon_y97N,.copyButtonSuccessIcon_LjdS{fill:currentColor;height:inherit;left:0;opacity:inherit;position:absolute;top:0;transition:all var(--ifm-transition-fast) ease;width:inherit}.copyButtonSuccessIcon_LjdS{color:#00d600;left:50%;opacity:0;top:50%;transform:translate(-50%,-50%) scale(.33)}.copyButtonCopied_obH4 .copyButtonIcon_y97N{opacity:0;transform:scale(.33)}.copyButtonCopied_obH4 .copyButtonSuccessIcon_LjdS{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:75ms}.wordWrapButtonIcon_Bwma{height:1.2rem;width:1.2rem}.details_lb9f{--docusaurus-details-summary-arrow-size:0.38rem;--docusaurus-details-transition:transform 200ms ease;--docusaurus-details-decoration-color:grey}.details_lb9f>summary{cursor:pointer;padding-left:1rem;position:relative}.details_lb9f>summary::-webkit-details-marker{display:none}.details_lb9f>summary:before{border-color:transparent transparent transparent var(--docusaurus-details-decoration-color);border-style:solid;border-width:var(--docusaurus-details-summary-arrow-size);content:"";left:0;position:absolute;top:.45rem;transform:rotate(0);transform-origin:calc(var(--docusaurus-details-summary-arrow-size)/2) 50%;transition:var(--docusaurus-details-transition)}.collapsibleContent_i85q{border-top:1px solid var(--docusaurus-details-decoration-color);margin-top:1rem;padding-top:1rem}.details_b_Ee{--docusaurus-details-decoration-color:var(--ifm-alert-border-color);--docusaurus-details-transition:transform var(--ifm-transition-fast) ease;border:1px solid var(--ifm-alert-border-color);margin:0 0 var(--ifm-spacing-vertical)}.img_ev3q{height:auto}.admonition_LlT9{margin-bottom:1em}.admonitionHeading_tbUL{font:var(--ifm-heading-font-weight) var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family);margin-bottom:.3rem}.admonitionHeading_tbUL code{text-transform:none}.admonitionIcon_kALy{display:inline-block;margin-right:.4em;vertical-align:middle}.admonitionIcon_kALy svg{fill:var(--ifm-alert-foreground-color);display:inline-block;height:1.6em;width:1.6em}.breadcrumbHomeIcon_YNFT{height:1.1rem;position:relative;top:1px;vertical-align:top;width:1.1rem}.breadcrumbsContainer_Z_bl{--ifm-breadcrumb-size-multiplier:0.8;margin-bottom:.8rem}.backToTopButton_sjWU{background-color:var(--ifm-color-emphasis-200);border-radius:50%;bottom:1.3rem;box-shadow:var(--ifm-global-shadow-lw);height:3rem;opacity:0;position:fixed;right:1.3rem;transform:scale(0);transition:all var(--ifm-transition-fast) var(--ifm-transition-timing-default);visibility:hidden;width:3rem;z-index:calc(var(--ifm-z-index-fixed) - 1)}.backToTopButton_sjWU:after{background-color:var(--ifm-color-emphasis-1000);content:" ";display:inline-block;height:100%;-webkit-mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;width:100%}.backToTopButtonShow_xfvO{opacity:1;transform:scale(1);visibility:visible}[data-theme=dark]:root{--docusaurus-collapse-button-bg:hsla(0,0%,100%,.05);--docusaurus-collapse-button-bg-hover:hsla(0,0%,100%,.1)}.collapseSidebarButton_PEFL{display:none;margin:0}.docSidebarContainer_b6E3,.sidebarLogo_isFc{display:none}.docMainContainer_gTbr,.docPage__5DB{display:flex;width:100%}.docPage__5DB{flex:1 0}.docsWrapper_BCFX{display:flex;flex:1 0 auto}@media (min-width:997px){.collapseSidebarButton_PEFL,.expandButton_m80_{background-color:var(--docusaurus-collapse-button-bg)}:root{--docusaurus-announcement-bar-height:30px}.announcementBarClose_gvF7,.announcementBarPlaceholder_vyr4{flex-basis:50px}.searchBox_ZlJk{padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}.lastUpdated_vwxv{text-align:right}.tocMobile_ITEo{display:none}.docItemCol_VOVn{max-width:75%!important}.collapseSidebarButton_PEFL{border:1px solid var(--ifm-toc-border-color);border-radius:0;bottom:0;display:block!important;height:40px;position:sticky}.collapseSidebarButtonIcon_kv0_{margin-top:4px;transform:rotate(180deg)}.expandButtonIcon_BlDH,[dir=rtl] .collapseSidebarButtonIcon_kv0_{transform:rotate(0)}.collapseSidebarButton_PEFL:focus,.collapseSidebarButton_PEFL:hover,.expandButton_m80_:focus,.expandButton_m80_:hover{background-color:var(--docusaurus-collapse-button-bg-hover)}.menuHtmlItem_M9Kj{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu_SIkG{flex-grow:1;padding:.5rem}@supports (scrollbar-gutter:stable){.menu_SIkG{padding:.5rem 0 .5rem .5rem;scrollbar-gutter:stable}}.menuWithAnnouncementBar_GW3s{margin-bottom:var(--docusaurus-announcement-bar-height)}.sidebar_njMd{display:flex;flex-direction:column;height:100%;padding-top:var(--ifm-navbar-height);width:var(--doc-sidebar-width)}.sidebarWithHideableNavbar_wUlq{padding-top:0}.sidebarHidden_VK0M{opacity:0;visibility:hidden}.sidebarLogo_isFc{align-items:center;color:inherit!important;display:flex!important;margin:0 var(--ifm-navbar-padding-horizontal);max-height:var(--ifm-navbar-height);min-height:var(--ifm-navbar-height);text-decoration:none!important}.sidebarLogo_isFc img{height:2rem;margin-right:.5rem}.expandButton_m80_{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;transition:background-color var(--ifm-transition-fast) ease;width:100%}[dir=rtl] .expandButtonIcon_BlDH{transform:rotate(180deg)}.docSidebarContainer_b6E3{border-right:1px solid var(--ifm-toc-border-color);-webkit-clip-path:inset(0);clip-path:inset(0);display:block;margin-top:calc(var(--ifm-navbar-height)*-1);transition:width var(--ifm-transition-fast) ease;width:var(--doc-sidebar-width);will-change:width}.docSidebarContainerHidden_b3ry{cursor:pointer;width:var(--doc-sidebar-hidden-width)}.sidebarViewport_Xe31{height:100%;max-height:100vh;position:sticky;top:0}.docMainContainer_gTbr{flex-grow:1;max-width:calc(100% - var(--doc-sidebar-width))}.docMainContainerEnhanced_Uz_u{max-width:calc(100% - var(--doc-sidebar-hidden-width))}.docItemWrapperEnhanced_czyv{max-width:calc(var(--ifm-container-width) + var(--doc-sidebar-width))!important}}@media (min-width:1440px){.container{max-width:var(--ifm-container-width-xl)}}@media (max-width:996px){.col{--ifm-col-width:100%;flex-basis:var(--ifm-col-width);margin-left:0}.footer{--ifm-footer-padding-horizontal:0}.colorModeToggle_DEke,.footer__link-separator,.navbar__item,.tableOfContents_bqdL{display:none}.footer__col{margin-bottom:calc(var(--ifm-spacing-vertical)*3)}.footer__link-item{display:block}.hero{padding-left:0;padding-right:0}.navbar>.container,.navbar>.container-fluid{padding:0}.navbar__toggle{display:inherit}.navbar__search-input{width:9rem}.pills--block,.tabs--block{flex-direction:column}.searchBox_ZlJk{position:absolute;right:var(--ifm-navbar-padding-horizontal)}.docItemContainer_F8PC{padding:0 .3rem}}@media (max-width:576px){.markdown h1:first-child{--ifm-h1-font-size:2rem}.markdown>h2{--ifm-h2-font-size:1.5rem}.markdown>h3{--ifm-h3-font-size:1.25rem}}@media (hover:hover){.backToTopButton_sjWU:hover{background-color:var(--ifm-color-emphasis-300)}}@media (pointer:fine){.thin-scrollbar{scrollbar-width:thin}.thin-scrollbar::-webkit-scrollbar{height:var(--ifm-scrollbar-size);width:var(--ifm-scrollbar-size)}.thin-scrollbar::-webkit-scrollbar-track{background:var(--ifm-scrollbar-track-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb{background:var(--ifm-scrollbar-thumb-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--ifm-scrollbar-thumb-hover-background-color)}}@media (prefers-reduced-motion:reduce){:root{--ifm-transition-fast:0ms;--ifm-transition-slow:0ms}}@media print{.announcementBar_mb4j,.footer,.menu,.navbar,.pagination-nav,.table-of-contents,.tocMobile_ITEo{display:none}.tabs{page-break-inside:avoid}.codeBlockLines_e6Vv{white-space:pre-wrap}} \ No newline at end of file diff --git a/build/assets/js/02b3ccc6.27a59e49.js b/build/assets/js/02b3ccc6.27a59e49.js new file mode 100644 index 00000000..33769998 --- /dev/null +++ b/build/assets/js/02b3ccc6.27a59e49.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[440],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>b});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),p=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},s=function(e){var t=p(e.components);return n.createElement(i.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),m=p(r),f=a,b=m["".concat(i,".").concat(f)]||m[f]||u[f]||o;return r?n.createElement(b,l(l({ref:t},s),{},{components:r})):n.createElement(b,l({ref:t},s))}));function b(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=f;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[m]="string"==typeof e?e:a,l[1]=c;for(var p=2;p{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>b,frontMatter:()=>c,metadata:()=>p,toc:()=>m});var n=r(7462),a=r(3366),o=(r(7294),r(3905)),l=["components"],c={id:"thatopen_components.CameraControllable",title:"Interface: CameraControllable",sidebar_label:"CameraControllable",custom_edit_url:null},i=void 0,p={unversionedId:"api/interfaces/thatopen_components.CameraControllable",id:"api/interfaces/thatopen_components.CameraControllable",title:"Interface: CameraControllable",description:"@thatopen/components.CameraControllable",source:"@site/docs/api/interfaces/thatopen_components.CameraControllable.md",sourceDirName:"api/interfaces",slug:"/api/interfaces/thatopen_components.CameraControllable",permalink:"/api/interfaces/thatopen_components.CameraControllable",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.CameraControllable",title:"Interface: CameraControllable",sidebar_label:"CameraControllable",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"BVHGeometry",permalink:"/api/interfaces/thatopen_components.BVHGeometry"},next:{title:"Configurable",permalink:"/api/interfaces/thatopen_components.Configurable"}},s={},m=[],u={toc:m},f="wrapper";function b(e){var t=e.components,r=(0,a.Z)(e,l);return(0,o.kt)(f,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".CameraControllable"),(0,o.kt)("p",null,"Whether a camera uses the Camera Controls library."))}b.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/02cb068a.3e8b832a.js b/build/assets/js/02cb068a.3e8b832a.js new file mode 100644 index 00000000..796bf33f --- /dev/null +++ b/build/assets/js/02cb068a.3e8b832a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9098],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a=r.createContext({}),l=function(e){var t=r.useContext(a),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},c=function(e){var t=l(e.components);return r.createElement(a.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,a=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),d=l(n),f=o,m=d["".concat(a,".").concat(f)]||d[f]||u[f]||i;return n?r.createElement(m,s(s({ref:t},c),{},{components:n})):r.createElement(m,s({ref:t},c))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,s=new Array(i);s[0]=f;var p={};for(var a in t)hasOwnProperty.call(t,a)&&(p[a]=t[a]);p.originalType=e,p[d]="string"==typeof e?e:o,s[1]=p;for(var l=2;l{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>m,frontMatter:()=>p,metadata:()=>l,toc:()=>d});var r=n(7462),o=n(3366),i=(n(7294),n(3905)),s=["components"],p={id:"thatopen_components_front.PostproductionRenderer",title:"Class: PostproductionRenderer",sidebar_label:"PostproductionRenderer",custom_edit_url:null},a=void 0,l={unversionedId:"api/classes/thatopen_components_front.PostproductionRenderer",id:"api/classes/thatopen_components_front.PostproductionRenderer",title:"Class: PostproductionRenderer",description:"@thatopen/components-front.PostproductionRenderer",source:"@site/docs/api/classes/thatopen_components_front.PostproductionRenderer.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components_front.PostproductionRenderer",permalink:"/api/classes/thatopen_components_front.PostproductionRenderer",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components_front.PostproductionRenderer",title:"Class: PostproductionRenderer",sidebar_label:"PostproductionRenderer",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Plans",permalink:"/api/classes/thatopen_components_front.Plans"},next:{title:"RendererWith2D",permalink:"/api/classes/thatopen_components_front.RendererWith2D"}},c={},d=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Accessors",id:"accessors",level:2},{value:"postproduction",id:"postproduction",level:3},{value:"Returns",id:"returns",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Overrides",id:"overrides",level:4},{value:"Defined in",id:"defined-in-1",level:4}],u={toc:d},f="wrapper";function m(e){var t=e.components,n=(0,o.Z)(e,s);return(0,i.kt)(f,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components_front"},"@thatopen/components-front"),".PostproductionRenderer"),(0,i.kt)("p",null,"Renderer that uses efficient postproduction effects (e.g. Ambient Occlusion)."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components_front.RendererWith2D"},(0,i.kt)("inlineCode",{parentName:"a"},"RendererWith2D"))),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"PostproductionRenderer"))))),(0,i.kt)("h2",{id:"accessors"},"Accessors"),(0,i.kt)("h3",{id:"postproduction"},"postproduction"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"get")," ",(0,i.kt)("strong",{parentName:"p"},"postproduction"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"Postproduction")),(0,i.kt)("p",null,"Helper object to handle the postproduction effects applied."),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"Postproduction")),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/core/PostproductionRenderer/index.ts#L13"},"packages/front/src/core/PostproductionRenderer/index.ts:13")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"dispose"},"dispose"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Disposable.dispose."),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"overrides"},"Overrides"),(0,i.kt)("p",null,"RendererWith2D.dispose"),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/core/PostproductionRenderer/index.ts#L67"},"packages/front/src/core/PostproductionRenderer/index.ts:67")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/035e0bbb.7a717101.js b/build/assets/js/035e0bbb.7a717101.js new file mode 100644 index 00000000..6da6a710 --- /dev/null +++ b/build/assets/js/035e0bbb.7a717101.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5269],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>h});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),m=c(n),d=o,h=m["".concat(l,".").concat(d)]||m[d]||u[d]||a;return n?r.createElement(h,i(i({ref:t},p),{},{components:n})):r.createElement(h,i({ref:t},p))}));function h(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[m]="string"==typeof e?e:o,i[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>c,toc:()=>m});var r=n(7462),o=n(3366),a=(n(7294),n(3905)),i=["components"],s={},l=void 0,c={unversionedId:"Tutorials/Components/Core/OrthoPerspectiveCamera",id:"Tutorials/Components/Core/OrthoPerspectiveCamera",title:"OrthoPerspectiveCamera",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/OrthoPerspectiveCamera.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/OrthoPerspectiveCamera",permalink:"/Tutorials/Components/Core/OrthoPerspectiveCamera",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"MiniMap",permalink:"/Tutorials/Components/Core/MiniMap"},next:{title:"Raycasters",permalink:"/Tutorials/Components/Core/Raycasters"}},p={},m=[{value:"\ud83d\udcf9 How to handle a fancy camera",id:"-how-to-handle-a-fancy-camera",level:3},{value:"\ud83c\udf0e Setting up the world AND the camera",id:"-setting-up-the-world-and-the-camera",level:3},{value:"\ud83e\uddca Creating a cube",id:"-creating-a-cube",level:3},{value:"\ud83c\udf9f\ufe0f Using camera events",id:"\ufe0f-using-camera-events",level:3},{value:"\ud83e\udde9 Building a camera UI",id:"-building-a-camera-ui",level:3},{value:"\ud83c\udf9b\ufe0f Navigation mode",id:"\ufe0f-navigation-mode",level:4},{value:"\ud83d\udcd0 Projections",id:"-projections",level:4},{value:"\u274c Toggling user input",id:"-toggling-user-input",level:4},{value:"\ud83d\udd0e Focusing objects",id:"-focusing-objects",level:4},{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}],u={toc:m},d="wrapper";function h(e){var t=e.components,n=(0,o.Z)(e,i);return(0,a.kt)(d,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/OrthoPerspectiveCamera/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"-how-to-handle-a-fancy-camera"},"\ud83d\udcf9 How to handle a fancy camera"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Sometimes, you need perspective for depth and realism. Other times, you need an orthographic camera to get precise measurements and proportions. Luckily for you, we have a camera that has both of those projections at the same time! It also has some cool functionality for navigation. In this tutorial, you'll learn to use it. "),(0,a.kt)("admonition",{title:"Orthographic and Perspective cameras",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"The difference between Orthographic and Perspective cameras is that Orthographic cameras don't see things smaller when they are further away. This has some implications, like the camera being always \"outside\" of your scene. You can't see the interior of a room with an orthographic camera. The most common use for orthographic cameras are 2D floor plans and sections, but they can also be used to create cool-looking 3D scenes.")),(0,a.kt)("p",null,"In this tutorial, we will import:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Three.js")," to get some 3D entities for our app."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"@thatopen/components")," to set up the barebone of our app."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"@thatopen/ui")," to add some simple and cool UI menus."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Stats.js")," (optional) to measure the performance of our app.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import Stats from "stats.js";\nimport * as THREE from "three";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "openbim-components";\n')),(0,a.kt)("h3",{id:"-setting-up-the-world-and-the-camera"},"\ud83c\udf0e Setting up the world AND the camera"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"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. But there's one difference: we will use the OrthoPerspectiveCamera for initializing the world."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'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.OrthoPerspectiveCamera,\n OBC.SimpleRenderer\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBC.SimpleRenderer(components, container);\nworld.camera = new OBC.OrthoPerspectiveCamera(components);\n\nworld.scene.setup();\n\nasync function test() {\n await world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);\n await world.camera.projection.set("Orthographic");\n}\n\ntest();\n\n// await world.camera.projection.set("Perspective");\n// await world.camera.projection.set("Orthographic");\n\ncomponents.init();\n')),(0,a.kt)("p",null,"Easy, right? Believe it or not, this is all you need to use the OrthoPerspectiveCamera. Now, let's see it in action!"),(0,a.kt)("h3",{id:"-creating-a-cube"},"\ud83e\uddca Creating a cube"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"We will start by creating a simple cube and a grid that will serve as a reference point for our camera."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const cubeGeometry = new THREE.BoxGeometry();\nconst cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });\nconst cube = new THREE.Mesh(cubeGeometry, cubeMaterial);\ncube.position.set(0, 0.5, 0);\n\nworld.scene.three.add(cube);\nworld.meshes.add(cube);\n\nconst grids = components.get(OBC.Grids);\nconst grid = grids.create(world);\n')),(0,a.kt)("h3",{id:"\ufe0f-using-camera-events"},"\ud83c\udf9f\ufe0f Using camera events"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"The OrthoPerspectiveCamera has a few events that you can use to manage the your scene. We will use the ",(0,a.kt)("inlineCode",{parentName:"p"},"camera.projection.onChanged")," event to update the grid, so that when using the Orthographic camera, the grid will fade out if the camera zooms away a lot."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'world.camera.projection.onChanged.add(() => {\n const projection = world.camera.projection.current;\n grid.fade = projection === "Perspective";\n});\n')),(0,a.kt)("h3",{id:"-building-a-camera-ui"},"\ud83e\udde9 Building a camera UI"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now we will use @thatopen/ui to create a simple UI for the OrthoPerspectiveCamera. It will have 4 elements: "),(0,a.kt)("h4",{id:"\ufe0f-navigation-mode"},"\ud83c\udf9b\ufe0f Navigation mode"),(0,a.kt)("p",null,"This will control the navigation mode of the OrthoPerspectiveCamera. It will have 3 options: "),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Orbit"),": for 3D orbiting around the scene."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"FirstPerson"),": for navigating the scene in with the mouse wheel in first person."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Plan"),": for navigating 2d plans (blocking the orbit).")),(0,a.kt)("h4",{id:"-projections"},"\ud83d\udcd0 Projections"),(0,a.kt)("p",null,"Like its name implies, the OrthoPerspectiveCamera has 2 projections, and it's really easy to toggle between them. The camera position will remain the same, which is really convenient when you switch between different projections!"),(0,a.kt)("h4",{id:"-toggling-user-input"},"\u274c Toggling user input"),(0,a.kt)("p",null,"Sometimes you might want to remove control from the user. For example, imagine you are animating the camera and you don't want the user to move the camera around. You can use the ",(0,a.kt)("inlineCode",{parentName:"p"},"setUserInput")," method to toggle this."),(0,a.kt)("h4",{id:"-focusing-objects"},"\ud83d\udd0e Focusing objects"),(0,a.kt)("p",null,"The OrthoPerspectiveCamera has a ",(0,a.kt)("inlineCode",{parentName:"p"},"fit")," method that will fit the camera to a list of meshes. This is really useful when you want to bring attention to a specific part of the scene, or for allowing your user to navigate the scene by focusing objects."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'BUI.Manager.init();\n\nconst 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 \n \n \n \n \n\n \n \n `;\n});\n\ndocument.body.append(panel);\n')),(0,a.kt)("h3",{id:"\ufe0f-measuring-the-performance-optional"},"\u23f1\ufe0f Measuring the performance (optional)"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"We'll use the ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/mrdoob/stats.js"},"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."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n')),(0,a.kt)("h3",{id:"-wrap-up"},"\ud83c\udf89 Wrap up"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"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!"),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/OrthoPerspectiveCamera"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/070f01c0.47f9b41f.js b/build/assets/js/070f01c0.47f9b41f.js new file mode 100644 index 00000000..85133947 --- /dev/null +++ b/build/assets/js/070f01c0.47f9b41f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8092],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>u});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},m="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},k=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),m=s(n),k=r,u=m["".concat(p,".").concat(k)]||m[k]||f[k]||l;return n?a.createElement(u,i(i({ref:t},d),{},{components:n})):a.createElement(u,i({ref:t},d))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=k;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o[m]="string"==typeof e?e:r,i[1]=o;for(var s=2;s{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>m});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={id:"thatopen_components_front.Plans",title:"Class: Plans",sidebar_label:"Plans",custom_edit_url:null},p=void 0,s={unversionedId:"api/classes/thatopen_components_front.Plans",id:"api/classes/thatopen_components_front.Plans",title:"Class: Plans",description:"@thatopen/components-front.Plans",source:"@site/docs/api/classes/thatopen_components_front.Plans.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components_front.Plans",permalink:"/api/classes/thatopen_components_front.Plans",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components_front.Plans",title:"Class: Plans",sidebar_label:"Plans",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Marker",permalink:"/api/classes/thatopen_components_front.Marker"},next:{title:"PostproductionRenderer",permalink:"/api/classes/thatopen_components_front.PostproductionRenderer"}},d={},m=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"currentPlan",id:"currentplan",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"defaultCameraOffset",id:"defaultcameraoffset",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"defaultSectionOffset",id:"defaultsectionoffset",level:3},{value:"Defined in",id:"defined-in-2",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"Methods",id:"methods",level:2},{value:"create",id:"create",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Defined in",id:"defined-in-4",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:"Defined in",id:"defined-in-5",level:4},{value:"exitPlanView",id:"exitplanview",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"goTo",id:"goto",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-3",level:4},{value:"Defined in",id:"defined-in-7",level:4}],f={toc:m},k="wrapper";function u(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)(k,(0,a.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components_front"},"@thatopen/components-front"),".Plans"),(0,l.kt)("p",null,"Helper to control the camera and easily define and navigate 2D floor plans."),(0,l.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("inlineCode",{parentName:"p"},"Component")),(0,l.kt)("p",{parentName:"li"},"\u21b3 ",(0,l.kt)("strong",{parentName:"p"},(0,l.kt)("inlineCode",{parentName:"strong"},"Plans"))))),(0,l.kt)("h2",{id:"implements"},"Implements"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"Disposable"))),(0,l.kt)("h2",{id:"properties"},"Properties"),(0,l.kt)("h3",{id:"currentplan"},"currentPlan"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"currentPlan"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"null")," ","|"," ",(0,l.kt)("inlineCode",{parentName:"p"},"PlanView")," = ",(0,l.kt)("inlineCode",{parentName:"p"},"null")),(0,l.kt)("p",null,"The floorplan that is currently selected."),(0,l.kt)("h4",{id:"defined-in"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/fragments/Plans/index.ts#L25"},"packages/front/src/fragments/Plans/index.ts:25")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"defaultcameraoffset"},"defaultCameraOffset"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"defaultCameraOffset"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"number")," = ",(0,l.kt)("inlineCode",{parentName:"p"},"30")),(0,l.kt)("p",null,"The offset of the 2D camera to the floor plan elevation."),(0,l.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/fragments/Plans/index.ts#L31"},"packages/front/src/fragments/Plans/index.ts:31")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"defaultsectionoffset"},"defaultSectionOffset"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"defaultSectionOffset"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"number")," = ",(0,l.kt)("inlineCode",{parentName:"p"},"1.5")),(0,l.kt)("p",null,"The offset from the clipping planes to their respective floor plan elevation."),(0,l.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/fragments/Plans/index.ts#L28"},"packages/front/src/fragments/Plans/index.ts:28")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,l.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"Event"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,l.kt)("p",null,"Disposable.onDisposed"),(0,l.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,l.kt)("p",null,"OBC.Disposable.onDisposed"),(0,l.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/fragments/Plans/index.ts#L16"},"packages/front/src/fragments/Plans/index.ts:16")),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)("h3",{id:"create"},"create"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"create"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"config"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,"Creates a new floor plan in the navigator."),(0,l.kt)("h4",{id:"parameters"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"config")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"PlanView")),(0,l.kt)("td",{parentName:"tr",align:"left"},"Necessary data to initialize the floor plan.")))),(0,l.kt)("h4",{id:"returns"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/fragments/Plans/index.ts#L97"},"packages/front/src/fragments/Plans/index.ts:97")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"dispose"},"dispose"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,"Disposable.dispose"),(0,l.kt)("h4",{id:"returns-1"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,l.kt)("p",null,"OBC.Disposable.dispose"),(0,l.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/fragments/Plans/index.ts#L48"},"packages/front/src/fragments/Plans/index.ts:48")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"exitplanview"},"exitPlanView"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"exitPlanView"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"animate?"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("p",null,"Deactivate navigator and go back to the previous view."),(0,l.kt)("h4",{id:"parameters-1"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Default value"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"animate")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"boolean")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"false")),(0,l.kt)("td",{parentName:"tr",align:"left"},"Whether to animate the camera transition.")))),(0,l.kt)("h4",{id:"returns-2"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/fragments/Plans/index.ts#L141"},"packages/front/src/fragments/Plans/index.ts:141")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"goto"},"goTo"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"goTo"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"id"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"animate?"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("p",null,"Make the navigator go to the specified floor plan."),(0,l.kt)("h4",{id:"parameters-2"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Default value"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"id")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"string")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"undefined")),(0,l.kt)("td",{parentName:"tr",align:"left"},"Floor plan to go to.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"animate")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"boolean")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"false")),(0,l.kt)("td",{parentName:"tr",align:"left"},"Whether to animate the camera transition.")))),(0,l.kt)("h4",{id:"returns-3"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/fragments/Plans/index.ts#L119"},"packages/front/src/fragments/Plans/index.ts:119")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/072af5be.0acc5b4e.js b/build/assets/js/072af5be.0acc5b4e.js new file mode 100644 index 00000000..32bab7ee --- /dev/null +++ b/build/assets/js/072af5be.0acc5b4e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9170],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>d});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),i=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},c=function(e){var t=i(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=i(n),f=o,d=u["".concat(l,".").concat(f)]||u[f]||m[f]||a;return n?r.createElement(d,p(p({ref:t},c),{},{components:n})):r.createElement(d,p({ref:t},c))}));function d(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,p=new Array(a);p[0]=f;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:o,p[1]=s;for(var i=2;i{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>s,metadata:()=>i,toc:()=>u});var r=n(7462),o=n(3366),a=(n(7294),n(3905)),p=["components"],s={id:"thatopen_components_front",title:"Module: @thatopen/components-front",sidebar_label:"@thatopen/components-front",sidebar_position:0,custom_edit_url:null},l=void 0,i={unversionedId:"api/modules/thatopen_components_front",id:"api/modules/thatopen_components_front",title:"Module: @thatopen/components-front",description:"Classes",source:"@site/docs/api/modules/thatopen_components_front.md",sourceDirName:"api/modules",slug:"/api/modules/thatopen_components_front",permalink:"/api/modules/thatopen_components_front",draft:!1,editUrl:null,tags:[],version:"current",sidebarPosition:0,frontMatter:{id:"thatopen_components_front",title:"Module: @thatopen/components-front",sidebar_label:"@thatopen/components-front",sidebar_position:0,custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"@thatopen/components",permalink:"/api/modules/thatopen_components"},next:{title:"@thatopen/fragments",permalink:"/api/modules/thatopen_fragments"}},c={},u=[{value:"Classes",id:"classes",level:2}],m={toc:u},f="wrapper";function d(e){var t=e.components,n=(0,o.Z)(e,p);return(0,a.kt)(f,(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"classes"},"Classes"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components_front.ClipEdges"},"ClipEdges")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components_front.EdgesPlane"},"EdgesPlane")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components_front.LengthMeasurement"},"LengthMeasurement")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components_front.Marker"},"Marker")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components_front.Plans"},"Plans")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components_front.PostproductionRenderer"},"PostproductionRenderer")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components_front.RendererWith2D"},"RendererWith2D"))))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/0849f8a0.4781b459.js b/build/assets/js/0849f8a0.4781b459.js new file mode 100644 index 00000000..7eab6b1f --- /dev/null +++ b/build/assets/js/0849f8a0.4781b459.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3659],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var a=n(7294);function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var o=a.createContext({}),p=function(e){var t=a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(o.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},h=a.forwardRef((function(e,t){var n=e.components,s=e.mdxType,r=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=p(n),h=s,m=u["".concat(o,".").concat(h)]||u[h]||d[h]||r;return n?a.createElement(m,i(i({ref:t},c),{},{components:n})):a.createElement(m,i({ref:t},c))}));function m(e,t){var n=arguments,s=t&&t.mdxType;if("string"==typeof e||s){var r=n.length,i=new Array(r);i[0]=h;var l={};for(var o in t)hasOwnProperty.call(t,o)&&(l[o]=t[o]);l.originalType=e,l[u]="string"==typeof e?e:s,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>m,frontMatter:()=>l,metadata:()=>p,toc:()=>u});var a=n(7462),s=n(3366),r=(n(7294),n(3905)),i=["components"],l={id:"thatopen_components.Base",title:"Class: Base",sidebar_label:"Base",custom_edit_url:null},o=void 0,p={unversionedId:"api/classes/thatopen_components.Base",id:"api/classes/thatopen_components.Base",title:"Class: Base",description:"@thatopen/components.Base",source:"@site/docs/api/classes/thatopen_components.Base.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.Base",permalink:"/api/classes/thatopen_components.Base",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Base",title:"Class: Base",sidebar_label:"Base",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"AsyncEvent",permalink:"/api/classes/thatopen_components.AsyncEvent"},next:{title:"BaseWorldItem",permalink:"/api/classes/thatopen_components.BaseWorldItem"}},c={},u=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Methods",id:"methods",level:2},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Defined in",id:"defined-in-4",level:4}],d={toc:u},h="wrapper";function m(e){var t=e.components,n=(0,s.Z)(e,i);return(0,r.kt)(h,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Base"),(0,r.kt)("p",null,"Base class of the library. Useful for finding out the interfaces it implements."),(0,r.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"Base"))),(0,r.kt)("p",{parentName:"li"},"\u21b3 ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},(0,r.kt)("inlineCode",{parentName:"a"},"Component"))),(0,r.kt)("p",{parentName:"li"},"\u21b3 ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.BaseWorldItem"},(0,r.kt)("inlineCode",{parentName:"a"},"BaseWorldItem"))))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,r.kt)("h4",{id:"returns"},"Returns"),(0,r.kt)("p",null,"this is Configurable"),(0,r.kt)("h4",{id:"defined-in"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,r.kt)("h4",{id:"returns-1"},"Returns"),(0,r.kt)("p",null,"this is Disposable"),(0,r.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"ishideable"},"isHideable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,r.kt)("h4",{id:"returns-2"},"Returns"),(0,r.kt)("p",null,"this is Hideable"),(0,r.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,r.kt)("h4",{id:"returns-3"},"Returns"),(0,r.kt)("p",null,"this is Resizeable"),(0,r.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,r.kt)("h4",{id:"returns-4"},"Returns"),(0,r.kt)("p",null,"this is Updateable"),(0,r.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/0d0787b6.d065a635.js b/build/assets/js/0d0787b6.d065a635.js new file mode 100644 index 00000000..272020eb --- /dev/null +++ b/build/assets/js/0d0787b6.d065a635.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8509],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>u});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var o=a.createContext({}),d=function(e){var t=a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=d(e.components);return a.createElement(o.Provider,{value:t},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},k=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),s=d(n),k=r,u=s["".concat(o,".").concat(k)]||s[k]||m[k]||i;return n?a.createElement(u,l(l({ref:t},c),{},{components:n})):a.createElement(u,l({ref:t},c))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,l=new Array(i);l[0]=k;var p={};for(var o in t)hasOwnProperty.call(t,o)&&(p[o]=t[o]);p.originalType=e,p[s]="string"==typeof e?e:r,l[1]=p;for(var d=2;d{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>u,frontMatter:()=>p,metadata:()=>d,toc:()=>s});var a=n(7462),r=n(3366),i=(n(7294),n(3905)),l=["components"],p={id:"thatopen_components.Createable",title:"Interface: Createable",sidebar_label:"Createable",custom_edit_url:null},o=void 0,d={unversionedId:"api/interfaces/thatopen_components.Createable",id:"api/interfaces/thatopen_components.Createable",title:"Interface: Createable",description:"@thatopen/components.Createable",source:"@site/docs/api/interfaces/thatopen_components.Createable.md",sourceDirName:"api/interfaces",slug:"/api/interfaces/thatopen_components.Createable",permalink:"/api/interfaces/thatopen_components.Createable",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Createable",title:"Interface: Createable",sidebar_label:"Createable",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Configurable",permalink:"/api/interfaces/thatopen_components.Configurable"},next:{title:"Disposable",permalink:"/api/interfaces/thatopen_components.Disposable"}},c={},s=[{value:"Implemented by",id:"implemented-by",level:2},{value:"Properties",id:"properties",level:2},{value:"cancelCreation",id:"cancelcreation",level:3},{value:"Type declaration",id:"type-declaration",level:4},{value:"Parameters",id:"parameters",level:5},{value:"Returns",id:"returns",level:5},{value:"Defined in",id:"defined-in",level:4},{value:"create",id:"create",level:3},{value:"Type declaration",id:"type-declaration-1",level:4},{value:"Parameters",id:"parameters-1",level:5},{value:"Returns",id:"returns-1",level:5},{value:"Defined in",id:"defined-in-1",level:4},{value:"delete",id:"delete",level:3},{value:"Type declaration",id:"type-declaration-2",level:4},{value:"Parameters",id:"parameters-2",level:5},{value:"Returns",id:"returns-2",level:5},{value:"Defined in",id:"defined-in-2",level:4},{value:"endCreation",id:"endcreation",level:3},{value:"Type declaration",id:"type-declaration-3",level:4},{value:"Parameters",id:"parameters-3",level:5},{value:"Returns",id:"returns-3",level:5},{value:"Defined in",id:"defined-in-3",level:4}],m={toc:s},k="wrapper";function u(e){var t=e.components,n=(0,r.Z)(e,l);return(0,i.kt)(k,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Createable"),(0,i.kt)("p",null,"Whether this component supports create and destroy operations. This generally\napplies for components that work with instances, such as clipping planes or\ndimensions."),(0,i.kt)("h2",{id:"implemented-by"},"Implemented by"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Clipper"},(0,i.kt)("inlineCode",{parentName:"a"},"Clipper")))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"cancelcreation"},"cancelCreation"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Optional")," ",(0,i.kt)("strong",{parentName:"p"},"cancelCreation"),": (",(0,i.kt)("inlineCode",{parentName:"p"},"data"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"any"),") => ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"type-declaration"},"Type declaration"),(0,i.kt)("p",null,"\u25b8 (",(0,i.kt)("inlineCode",{parentName:"p"},"data"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Cancels the creation process of the component, going back to the state\nbefore starting to create."),(0,i.kt)("h5",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"data")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"any"))))),(0,i.kt)("h5",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L106"},"packages/core/src/core/Types/src/interfaces.ts:106")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"create"},"create"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"create"),": (",(0,i.kt)("inlineCode",{parentName:"p"},"data"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"any"),") => ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"type-declaration-1"},"Type declaration"),(0,i.kt)("p",null,"\u25b8 (",(0,i.kt)("inlineCode",{parentName:"p"},"data"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Creates a new instance of an element (e.g. a new Dimension)."),(0,i.kt)("h5",{id:"parameters-1"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"data")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"any"))))),(0,i.kt)("h5",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L94"},"packages/core/src/core/Types/src/interfaces.ts:94")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"delete"},"delete"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"delete"),": (",(0,i.kt)("inlineCode",{parentName:"p"},"data"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"any"),") => ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"type-declaration-2"},"Type declaration"),(0,i.kt)("p",null,"\u25b8 (",(0,i.kt)("inlineCode",{parentName:"p"},"data"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Deletes an existing instance of an element (e.g. a Dimension)."),(0,i.kt)("h5",{id:"parameters-2"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"data")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"any"))))),(0,i.kt)("h5",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L109"},"packages/core/src/core/Types/src/interfaces.ts:109")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"endcreation"},"endCreation"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Optional")," ",(0,i.kt)("strong",{parentName:"p"},"endCreation"),": (",(0,i.kt)("inlineCode",{parentName:"p"},"data"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"any"),") => ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"type-declaration-3"},"Type declaration"),(0,i.kt)("p",null,"\u25b8 (",(0,i.kt)("inlineCode",{parentName:"p"},"data"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Finish the creation process of the component, successfully creating an\ninstance of whatever the component creates."),(0,i.kt)("h5",{id:"parameters-3"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"data")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"any"))))),(0,i.kt)("h5",{id:"returns-3"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L100"},"packages/core/src/core/Types/src/interfaces.ts:100")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/0dcd76a4.db954def.js b/build/assets/js/0dcd76a4.db954def.js new file mode 100644 index 00000000..b951cf31 --- /dev/null +++ b/build/assets/js/0dcd76a4.db954def.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7116],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>b});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=o.createContext({}),p=function(e){var t=o.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return o.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},m=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=p(n),m=a,b=u["".concat(s,".").concat(m)]||u[m]||d[m]||r;return n?o.createElement(b,i(i({ref:t},c),{},{components:n})):o.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,i=new Array(r);i[0]=m;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[u]="string"==typeof e?e:a,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>b,frontMatter:()=>l,metadata:()=>p,toc:()=>u});var o=n(7462),a=n(3366),r=(n(7294),n(3905)),i=["components"],l={},s=void 0,p={unversionedId:"Tutorials/UserInterface/OBC/EntityAttributes",id:"Tutorials/UserInterface/OBC/EntityAttributes",title:"EntityAttributes",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/UserInterface/OBC/EntityAttributes.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/EntityAttributes",permalink:"/Tutorials/UserInterface/OBC/EntityAttributes",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ElementProperties",permalink:"/Tutorials/UserInterface/OBC/ElementProperties"},next:{title:"ModelsList",permalink:"/Tutorials/UserInterface/OBC/ModelsList"}},c={},u=[{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}],d={toc:u},m="wrapper";function b(e){var t=e.components,n=(0,a.Z)(e,i);return(0,r.kt)(m,(0,o.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("admonition",{title:"Source",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/EntityAttributes/example.ts"},"here"),".")),(0,r.kt)("h2",{id:"displaying-data-the-advanced-way-"},"Displaying data the advanced way \ud83d\udd25\ud83d\udd25"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"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!"),(0,r.kt)("h3",{id:"loading-a-model-and-computing-its-relations"},"Loading a model and computing it's relations"),(0,r.kt)("p",null,"First things first... let's load a model \ud83d\udc47"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'import * as WEBIFC from "web-ifc";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "openbim-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')),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"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?")),(0,r.kt)("p",null,"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,r.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/IfcRelationsIndexer"},"IfcRelationsIndexer")," component from ",(0,r.kt)("inlineCode",{parentName:"p"},"@thatopen/components")," to speed up the process."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\nconst file = await fetch("/resources/small.ifc");\nconst buffer = await file.arrayBuffer();\nconst typedArray = new Uint8Array(buffer);\nconst model = await ifcLoader.load(typedArray);\nworld.scene.three.add(model);\n')),(0,r.kt)("h3",{id:"preconfiguring-the-table"},"Preconfiguring the table"),(0,r.kt)("p",null,"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:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const indexer = components.get(OBC.IfcRelationsIndexer);\nawait indexer.process(model);\n")),(0,r.kt)("p",null,"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,r.kt)("inlineCode",{parentName:"p"},"html")," template result."),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"If you want to learn more about the ",(0,r.kt)("inlineCode",{parentName:"p"},"html")," template tag and how to use it, just take a look at the tutorial on how to make a custom component.")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const baseStyle: Record = {\n padding: "0.25rem",\n borderRadius: "0.25rem",\n};\n')),(0,r.kt)("p",null,"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"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const tableDefinition: BUI.TableDefinition = {\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``;\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``;\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``;\n },\n};\n')),(0,r.kt)("p",null,"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,r.kt)("a",{parentName:"p",href:"/Tutorials/Components/Front/Highlighter"},"Highlighter"),":"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,r.kt)("h3",{id:"creating-a-panel-to-append-the-table"},"Creating a panel to append the table"),(0,r.kt)("p",null,"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"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"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")),(0,r.kt)("p",null,"Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,r.kt)("p",null,"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"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,r.kt)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/EntityAttributes"}))}b.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/0e384e19.6695c4ef.js b/build/assets/js/0e384e19.6695c4ef.js new file mode 100644 index 00000000..b6e92f7b --- /dev/null +++ b/build/assets/js/0e384e19.6695c4ef.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9671],{3905:(e,t,a)=>{a.d(t,{Zo:()=>u,kt:()=>c});var n=a(7294);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function i(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=n.createContext({}),p=function(e){var t=n.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},u=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},h=n.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),d=p(a),h=r,c=d["".concat(s,".").concat(h)]||d[h]||m[h]||o;return a?n.createElement(c,i(i({ref:t},u),{},{components:a})):n.createElement(c,i({ref:t},u))}));function c(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=h;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[d]="string"==typeof e?e:r,i[1]=l;for(var p=2;p{a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>s,default:()=>c,frontMatter:()=>l,metadata:()=>p,toc:()=>d});var n=a(7462),r=a(3366),o=(a(7294),a(3905)),i=["components"],l={sidebar_position:-3},s="Introduction",p={unversionedId:"intro",id:"intro",title:"Introduction",description:"Welcome to That Open Docs! Have you ever wanted to create your own BIM software, but don't know",source:"@site/docs/intro.md",sourceDirName:".",slug:"/intro",permalink:"/intro",draft:!1,tags:[],version:"current",sidebarPosition:-3,frontMatter:{sidebar_position:-3},sidebar:"tutorialSidebar",next:{title:"Getting started",permalink:"/components/getting-started"}},u={},d=[{value:"Getting Started",id:"getting-started",level:2},{value:"What you can do",id:"what-you-can-do",level:3},{value:"What you'll need",id:"what-youll-need",level:3},{value:"BIM...",id:"bim",level:4},{value:"...Software",id:"software",level:4},{value:"Reporting bugs",id:"reporting-bugs",level:2},{value:"Navigating the docs",id:"navigating-the-docs",level:2},{value:"Components",id:"components",level:3},{value:"That open platform",id:"that-open-platform",level:3},{value:"API",id:"api",level:3},{value:"Tutorials",id:"tutorials",level:3}],m={toc:d},h="wrapper";function c(e){var t=e.components,a=(0,r.Z)(e,i);return(0,o.kt)(h,(0,n.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"introduction"},"Introduction"),(0,o.kt)("p",null,"Welcome to ",(0,o.kt)("strong",{parentName:"p"},"That Open Docs"),"! Have you ever wanted to create your own ",(0,o.kt)("strong",{parentName:"p"},"BIM software"),", but don't know\nwhere to start? Here you will find everything you need to go from zero to hero! \ud83c\udfe2\ud83d\udc69\u200d\ud83d\udcbb"),(0,o.kt)("h2",{id:"getting-started"},"Getting Started"),(0,o.kt)("h3",{id:"what-you-can-do"},"What you can do"),(0,o.kt)("p",null,"You can use all the libraries covered in this documentation to ",(0,o.kt)("strong",{parentName:"p"},"create your own 3D BIM software in minutes"),". All the technology is free and open source, so you are free to distribute and sell anything you create."),(0,o.kt)("p",null,"These libraries are written in ",(0,o.kt)("strong",{parentName:"p"},"JavaScript"),", so you can use them to build BIM applications for:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"\ud83c\udf0d ",(0,o.kt)("strong",{parentName:"li"},"Web"),": using HTML, CSS and (optionally) React, Angular, Vue, etc. "),(0,o.kt)("li",{parentName:"ul"},"\ud83d\udcc1",(0,o.kt)("strong",{parentName:"li"},"Servers"),": using ",(0,o.kt)("a",{parentName:"li",href:"https://nodejs.org/en"},"Node.js"),"."),(0,o.kt)("li",{parentName:"ul"},"\ud83d\udcbb ",(0,o.kt)("strong",{parentName:"li"},"Desktop"),": using ",(0,o.kt)("a",{parentName:"li",href:"https://www.electronjs.org/"},"Electron"),"."),(0,o.kt)("li",{parentName:"ul"},"\ud83d\udcf1 ",(0,o.kt)("strong",{parentName:"li"},"Mobile"),": using ",(0,o.kt)("a",{parentName:"li",href:"https://reactnative.dev/"},"React Native")," or importing them as iframes (e.g. in ",(0,o.kt)("a",{parentName:"li",href:"https://flutter.dev/?gclid=Cj0KCQjwla-hBhD7ARIsAM9tQKtnYys_qfZzrZnef2XC9CgX4ior2PT7sankU4BxHD_MrcGgySEUOgUaAvsbEALw_wcB&gclsrc=aw.ds"},"Flutter"),").")),(0,o.kt)("p",null,"In terms of features, these libraries offer you a wide set of handy tools to create BIM software, such as:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"\ud83c\udfe2 ",(0,o.kt)("strong",{parentName:"li"},"IFC")," import, display, navigate, edit and export."),(0,o.kt)("li",{parentName:"ul"},"\ud83c\udf33 Import, display and navigate ",(0,o.kt)("strong",{parentName:"li"},"other 3D formats"),"."),(0,o.kt)("li",{parentName:"ul"},"\ud83d\ude80 3D+2D ",(0,o.kt)("strong",{parentName:"li"},"modelling and editing")," (",(0,o.kt)("a",{parentName:"li",href:"https://github.com/ThatOpen/engine_clay"},"work in progress!"),")."),(0,o.kt)("li",{parentName:"ul"},"\ud83d\udce6 ",(0,o.kt)("strong",{parentName:"li"},"Store"),", ",(0,o.kt)("strong",{parentName:"li"},"process")," and ",(0,o.kt)("strong",{parentName:"li"},"distribute")," BIM models and files."),(0,o.kt)("li",{parentName:"ul"},"\ud83d\udd0e 3D+2D ",(0,o.kt)("strong",{parentName:"li"},"navigation")," tools"),(0,o.kt)("li",{parentName:"ul"},"\u270d 3D+2D ",(0,o.kt)("strong",{parentName:"li"},"annotations"),"."),(0,o.kt)("li",{parentName:"ul"},"\ud83d\udccf BIM models ",(0,o.kt)("strong",{parentName:"li"},"measurement"),"."),(0,o.kt)("li",{parentName:"ul"},"\ud83d\udccb ",(0,o.kt)("strong",{parentName:"li"},"Documentation")," import and export."),(0,o.kt)("li",{parentName:"ul"},"\ud83e\udd1d Integration with ",(0,o.kt)("strong",{parentName:"li"},"data systems")," (e.g. Sharepoint, PowerBI, Google Drive, etc)."),(0,o.kt)("li",{parentName:"ul"},"\ud83c\udf0e Integration with ",(0,o.kt)("strong",{parentName:"li"},"GIS systems")," (e.g. Mapbox).")),(0,o.kt)("admonition",{title:"Do you need another features?",type:"info"},(0,o.kt)("p",{parentName:"admonition"},"Don't worry! You can check out the ",(0,o.kt)("strong",{parentName:"p"},"marketplace")," to see if someone has already done it. Many of the tools there are free, so don't forget to pass by! Additionally, all these libraries are made by a ",(0,o.kt)("strong",{parentName:"p"},"Components")," system that is extensible and allow you to ",(0,o.kt)("a",{parentName:"p",href:"/components/creating-components"},"make your own custom Components easily"),". \ud83d\ude80")),(0,o.kt)("h3",{id:"what-youll-need"},"What you'll need"),(0,o.kt)("p",null,"The concept ",(0,o.kt)("strong",{parentName:"p"},"BIM software")," has two words, and you'll need some familiarity with both before you can jump into the pool and have fun. \ud83c\udfca\u200d\u2642\ufe0f "),(0,o.kt)("h4",{id:"bim"},"BIM..."),(0,o.kt)("p",null,"You have probably seen architects and engineers in movies ",(0,o.kt)("strong",{parentName:"p"},"drawing 2D blueprints")," and handling them to construction companies to make things like buildings and bridges. That's the way we have built for a long time, but now there's a better way: ",(0,o.kt)("strong",{parentName:"p"},"BIM"),"."),(0,o.kt)("p",null,"BIM stands for ",(0,o.kt)("strong",{parentName:"p"},"Building Information Model"),". In a nutshell, instead of drawing each blueprint one by one, we make a 3D model (",(0,o.kt)("strong",{parentName:"p"},"M"),") with information (",(0,o.kt)("strong",{parentName:"p"},"I"),") of the object to build (",(0,o.kt)("strong",{parentName:"p"},"B"),"). We can then generate all the 2D blueprints automatically from that 3D model. This has many advantages: errors in the design can be detected earlier, the design process is more traceable, we can make simulations, etc."),(0,o.kt)("admonition",{title:"Never heard of BIM before?",type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"Don't worry! ",(0,o.kt)("strong",{parentName:"p"},"You don't be to be an architect/building engineer")," to follow these docs and create BIM software, but keep in mind that this is the domain that we will constantly refer to. Feel free to ",(0,o.kt)("strong",{parentName:"p"},"get to our open community")," and ask around! We'll be happy to help. \ud83c\udf7b")),(0,o.kt)("h4",{id:"software"},"...Software"),(0,o.kt)("p",null,"Programming is a broad topic, so we can't just start from scratch. This documentation assumes some basic knowledge of web development technologies. You will need to be familiar with basic concepts like ",(0,o.kt)("strong",{parentName:"p"},"frontend"),", ",(0,o.kt)("strong",{parentName:"p"},"backend"),", ",(0,o.kt)("strong",{parentName:"p"},"server"),", ",(0,o.kt)("strong",{parentName:"p"},"library")," and ",(0,o.kt)("strong",{parentName:"p"},"debugging"),", as well as some familiarity with:"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:"left"},"Technology"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"HTML")),(0,o.kt)("td",{parentName:"tr",align:"left"},"Markdown langage used to define the structure of any web application.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"CSS")),(0,o.kt)("td",{parentName:"tr",align:"left"},"Styling sheets to define the appearance of all the HTML elements within a web app.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"JavaScript")),(0,o.kt)("td",{parentName:"tr",align:"left"},"Programming language of all frontend web applications, used to define their logic. Naturally, knowing TypeScript is even better, but it's not a requirement!")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"NPM")),(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("a",{parentName:"td",href:"https://npmjs.com/"},"Node Package Manager")," is the most popular repository to import and publish JavaScript libraries.")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"Bundling")),(0,o.kt)("td",{parentName:"tr",align:"left"},"Tools used to pack the code in bundles. Examples are ",(0,o.kt)("a",{parentName:"td",href:"https://rollupjs.org/"},"Rollup")," and ",(0,o.kt)("a",{parentName:"td",href:"https://webpack.js.org/"},"Webpack"),". Alternatively, if you are familiar with a frontend library/framework like ",(0,o.kt)("a",{parentName:"td",href:"https://react.dev/"},"React"),", ",(0,o.kt)("a",{parentName:"td",href:"https://angular.io/"},"Angular")," or ",(0,o.kt)("a",{parentName:"td",href:"https://vuejs.org/"},"Vue"),", that's more than enough!")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"Three.js")),(0,o.kt)("td",{parentName:"tr",align:"left"},"The most popular web ",(0,o.kt)("a",{parentName:"td",href:"https://threejs.org/"},"3D library")," in the world.")))),(0,o.kt)("p",null,"If you have never programmed before, this might sound overwhelming, but it's actually quite easy to learn. Anyone can learn to code, and web programming is one of the best places to start. Look around for some tutorials, get your feet wet there first, and then come back here!"),(0,o.kt)("admonition",{title:"How to become a BIM software developer?",type:"danger"},(0,o.kt)("p",{parentName:"admonition"},"There are many free resources out there to learn to code for the web, although they are not specific to BIM or the construction industry. For that reason, ",(0,o.kt)("strong",{parentName:"p"},"we have made some courses that cover all these topics"),", starting from scratch and oriented to BIM software developer.")),(0,o.kt)("h2",{id:"reporting-bugs"},"Reporting bugs"),(0,o.kt)("p",null,"We work very hard to make this library better every day, and you can help us! If you find any error while using it, don't hesitate to let us know and we will take care of it as soon as possible."),(0,o.kt)("p",null,"This is how you can report a bug:"),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Go to the Github library that has the code you are using. If you are not sure, don't worry: just go to the ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components"},"components repository"),".")),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Go to the ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/issues"},"issues")," tab.")),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("p",{parentName:"li"},"Create a new issue. Try to ellaborate as much as possible, explaining what you are trying to do, the behavior you expect and what the library is doing. Providing a minimal code example we can test is also super useful!"))),(0,o.kt)("p",null,"That's it! If you have questions, you can also get into our community, meet everyone and ask anything! We'll be super happy to see you there. \ud83d\ude0a"),(0,o.kt)("h2",{id:"navigating-the-docs"},"Navigating the docs"),(0,o.kt)("p",null,"These docs are organized in 4 different sections. This is a lot of information and it can be hard to find just what you are looking for, so here's a short guide of where to go from here:"),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"components"},"Components"),(0,o.kt)("p",null,"Everything in these libraries are components. Here, you will learn ",(0,o.kt)("a",{parentName:"p",href:"/components/getting-started"},"the basics")," and how to import, use and even ",(0,o.kt)("a",{parentName:"p",href:"/components/creating-components"},"create your own custom components"),". You will also find some useful ",(0,o.kt)("a",{parentName:"p",href:"/components/tutorial-paths"},"tutorial paths")," that will help you progress throughout these docs!"),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"that-open-platform"},"That open platform"),(0,o.kt)("p",null,"To create BIM apps you need more than just code: authentication, databases, cloud processing, cybersecurity, etc. You could do all of this yourself, but many companies have whole software teams only for this. Luckily, you can find all these services plug-and-play in ",(0,o.kt)("strong",{parentName:"p"},"That Open Platform")," and add them to your apps in minutes!"),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"api"},"API"),(0,o.kt)("p",null,"Here you will find all the description of the classes, properties, methods and interfaces of the libraries. It's automatically generated and corresponds to the docs that you will see in your IDE when using any of the libraries."),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"tutorials"},"Tutorials"),(0,o.kt)("p",null,"Step by step tutorials covering how to use different components, including a live application where you can see it in action. This is the best way to get your feet wet with the libraries. Check out the recommended ",(0,o.kt)("a",{parentName:"p",href:"/components/tutorial-paths"},"tutorial paths"),"! \ud83d\ude80"))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/140c5f61.cdf9d140.js b/build/assets/js/140c5f61.cdf9d140.js new file mode 100644 index 00000000..ea48fb65 --- /dev/null +++ b/build/assets/js/140c5f61.cdf9d140.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3386],{3905:(e,n,t)=>{t.d(n,{Zo:()=>p,kt:()=>h});var o=t(7294);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function r(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=o.createContext({}),m=function(e){var n=o.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=m(e.components);return o.createElement(l.Provider,{value:n},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},u=o.forwardRef((function(e,n){var t=e.components,a=e.mdxType,r=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),c=m(t),u=a,h=c["".concat(l,".").concat(u)]||c[u]||d[u]||r;return t?o.createElement(h,i(i({ref:n},p),{},{components:t})):o.createElement(h,i({ref:n},p))}));function h(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=t.length,i=new Array(r);i[0]=u;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s[c]="string"==typeof e?e:a,i[1]=s;for(var m=2;m{t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>m,toc:()=>c});var o=t(7462),a=t(3366),r=(t(7294),t(3905)),i=["components"],s={},l=void 0,m={unversionedId:"Tutorials/Components/Front/AngleMeasurement",id:"Tutorials/Components/Front/AngleMeasurement",title:"AngleMeasurement",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Front/AngleMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/AngleMeasurement",permalink:"/Tutorials/Components/Front/AngleMeasurement",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Worlds",permalink:"/Tutorials/Components/Core/Worlds"},next:{title:"AreaMeasurement",permalink:"/Tutorials/Components/Front/AreaMeasurement"}},p={},c=[{value:"\ud83d\udccf Dimensions Tool",id:"-dimensions-tool",level:3},{value:"\ud83c\udfb2 Creating a Cube Mesh",id:"-creating-a-cube-mesh",level:3},{value:"\ud83d\udee0\ufe0f Creating Dimension Tool",id:"\ufe0f-creating-dimension-tool",level:3},{value:"\ud83d\uddb1\ufe0f Managing Events",id:"\ufe0f-managing-events",level:3},{value:"\u270d\ufe0f Creating the Dimensions",id:"\ufe0f-creating-the-dimensions",level:4},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:4},{value:"\ud83d\udd8c\ufe0f Adding Styles",id:"\ufe0f-adding-styles",level:3}],d={toc:c},u="wrapper";function h(e){var n=e.components,t=(0,a.Z)(e,i);return(0,r.kt)(u,(0,o.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("admonition",{title:"Source",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/AngleMeasurement/example.ts"},"here"),".")),(0,r.kt)("h3",{id:"-dimensions-tool"},"\ud83d\udccf Dimensions Tool"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"At times, you may need to compute the dimensions of an object or measure the distance between two elements.\nElements must be precisely aligned when working on complex models.\nDimension Tool allows you to perform measurements effortlessly."),(0,r.kt)("admonition",{title:"First, let's set up a simple scene!",type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"\ud83d\udc40 If you haven't started there, check out ",(0,r.kt)("a",{parentName:"p",href:"SimpleScene.mdx"},"that tutorial first"),"!")),(0,r.kt)("p",null,"This tutorial will show you how to add Dimension Tool to your projects,\nwhich can be used to acquire accurate dimensions for any 3D Object.\ud83d\udd2d"),(0,r.kt)("h3",{id:"-creating-a-cube-mesh"},"\ud83c\udfb2 Creating a Cube Mesh"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"For this tutorial we will use a Cube, you can add any geometry as per your preference.\nWe will create a ",(0,r.kt)("a",{parentName:"p",href:"https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry"},"Cube"),"\nwith ",(0,r.kt)("inlineCode",{parentName:"p"},"3x3x3")," dimensions and use red color for the material."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'import Stats from "stats.js";\nimport * as OBC from "openbim-components";\nimport * as THREE from "three";\nimport * as OBCF from "../..";\n\nconst 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')),(0,r.kt)("p",null,"Now, we will add the Cube to the ",(0,r.kt)("inlineCode",{parentName:"p"},"Scene"),". We must also add the ",(0,r.kt)("strong",{parentName:"p"},"cube")," to ",(0,r.kt)("inlineCode",{parentName:"p"},"components.meshes"),",\nwhich is simply an array of all the meshes in the Scene.\ud83d\uddc4\ufe0f"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'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);\n')),(0,r.kt)("admonition",{title:"Collection of Meshes",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"\ud83d\udce6 ",(0,r.kt)("strong",{parentName:"p"},"Components.meshes")," keeps all your meshes including IFC Models, Fragments in\none place.")),(0,r.kt)("h3",{id:"\ufe0f-creating-dimension-tool"},"\ud83d\udee0\ufe0f Creating Dimension Tool"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"A lot of logic is usually needed to compute dimensions for any item, beginning with ray casting,\nfinding the vertices to snap to, and rendering the UI for every line element.\ud83d\ude44\nThis may appear to be a lot of effort, but we are handling all the heavy lifting for you,\nand you only need to write a few lines for creating the Dimension Tool.\ud83d\udcaa"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"world.scene.three.add(cube);\nworld.meshes.add(cube);\n")),(0,r.kt)("p",null,"We will build dimensions by supplying the ",(0,r.kt)("inlineCode",{parentName:"p"},"components")," to ",(0,r.kt)("strong",{parentName:"p"},"OBC.SimpleDimensions"),"."),(0,r.kt)("admonition",{title:"DIMENSIONS AND UI",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"Read the ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("a",{parentName:"strong",href:"../api/classes/components.SimpleDimensions"},"Simple Dimensions"))," API for more on this.\nThe Simple Dimensions API provides you with a compact UI as well to display the measurements.")),(0,r.kt)("p",null,"\ud83c\udfa8 ",(0,r.kt)("strong",{parentName:"p"},"SimpleDimensions")," has several properties that help you to customize the behaviour of the ",(0,r.kt)("inlineCode",{parentName:"p"},"Line Element"),".\nOne such property which you can use is ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"dimensions.color"))," which modifies the color of the Line Element."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const angles = components.get(OBCF.AngleMeasurement);\nangles.world = world;\n")),(0,r.kt)("h3",{id:"\ufe0f-managing-events"},"\ud83d\uddb1\ufe0f Managing Events"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"You can use the Dimension Tool to construct several dimension lines. Let's see how you handle them."),(0,r.kt)("h4",{id:"\ufe0f-creating-the-dimensions"},"\u270d\ufe0f Creating the Dimensions"),(0,r.kt)("p",null,"Now that we've generated the dimensions object, we need to attach the line tooltip to a vertex of the 3D object.\nWe'll use the double click event to invoke ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"dimensions.create()")),".\nWhen this event occurs, a line element is generated,\nand the distance is calculated in real-time inside the label associated with that line.\ud83c\udff7\ufe0f"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"angles.enabled = true;\n")),(0,r.kt)("h4",{id:"-deleting-the-dimensions"},"\ud83e\uddf9 Deleting the Dimensions"),(0,r.kt)("p",null,"Now that we know how to make multiple dimension lines, we must also know how to delete them when necessary.\nDimensions can be removed using ",(0,r.kt)("inlineCode",{parentName:"p"},"dimensions.delete()"),".\n",(0,r.kt)("strong",{parentName:"p"},"dimensions.delete()")," deletes the dimension on which your mouse pointer is now located."),(0,r.kt)("admonition",{title:"Deleting all the Dimensions",type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"\u274e If you want to safely delete all the ",(0,r.kt)("strong",{parentName:"p"},"dimensions")," that were created you can simply call\n",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"dimensions.deleteAll()")))),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"container.ondblclick = () => angles.create();\n")),(0,r.kt)("p",null,"\ud83c\udf9b\ufe0f Check ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("a",{parentName:"strong",href:"./UIManager.mdx"},"Toolbar and UIManager"))," tutorial if you have any doubts!"),(0,r.kt)("h3",{id:"\ufe0f-adding-styles"},"\ud83d\udd8c\ufe0f Adding Styles"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"Few final things, we need to add styles for the ",(0,r.kt)("inlineCode",{parentName:"p"},"labels")," which display the measurement information."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"strong"},"ifcjs-dimension-label"))," - The label which is used to show the metric value after both the tooltips are attached."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"strong"},"ifcjs-dimension-label:hover"))," - Changing the styling when someone hovers on the dimension label."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"strong"},"ifcjs-dimension-preview"))," - The label which shows the measurement when the tooltip is not yet attached.")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style"',title:'"style"'},".ifcjs-dimension-label {\nbackground-color: black;\nfont-family: sans-serif;\ncolor: white;\npadding: 8px;\nborder-radius: 8px;\npointer-events: all;\ntransition: background-color 200ms ease-in-out;\n}\n.ifcjs-dimension-label:hover {\nbackground-color: grey;\n}\n.ifcjs-dimension-preview {\nbackground-color: #ffffff;\nwidth: 2rem;\nheight: 2rem;\nopacity: 0.3;\npadding: 8px;\nborder-radius: 100%;\n}\n")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"Congratulations")," \ud83c\udf89 on completing this tutorial! Now you can measure any BIM Model or any 3D Object easily using\n",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("a",{parentName:"strong",href:"../api/classes/components.SimpleDimensions"},"Simple Dimension Component"))," \ud83d\udcd0\nLet's keep it up and check out another tutorial! \ud83c\udf93"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'window.onkeydown = (event) => {\n if (event.code === "Delete" || event.code === "Backspace") {\n angles.delete();\n }\n};\n\n// const mainToolbar = new OBC.Toolbar(components, {\n// name: "Main Toolbar",\n// position: "bottom",\n// });\n// mainToolbar.addChild(dimensions.uiElement.get("main"));\n// components.ui.addToolbar(mainToolbar);\n')),(0,r.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/AngleMeasurement"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/14b2fcb7.fbe3f7c1.js b/build/assets/js/14b2fcb7.fbe3f7c1.js new file mode 100644 index 00000000..16614183 --- /dev/null +++ b/build/assets/js/14b2fcb7.fbe3f7c1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[350],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>u});var a=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=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 l=a.createContext({}),s=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(l.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},f=a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,r=e.originalType,l=e.parentName,d=p(e,["components","mdxType","originalType","parentName"]),c=s(n),f=o,u=c["".concat(l,".").concat(f)]||c[f]||m[f]||r;return n?a.createElement(u,i(i({ref:t},d),{},{components:n})):a.createElement(u,i({ref:t},d))}));function u(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=n.length,i=new Array(r);i[0]=f;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[c]="string"==typeof e?e:o,i[1]=p;for(var s=2;s{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>u,frontMatter:()=>p,metadata:()=>s,toc:()=>c});var a=n(7462),o=n(3366),r=(n(7294),n(3905)),i=["components"],p={id:"thatopen_components.PlanMode",title:"Class: PlanMode",sidebar_label:"PlanMode",custom_edit_url:null},l=void 0,s={unversionedId:"api/classes/thatopen_components.PlanMode",id:"api/classes/thatopen_components.PlanMode",title:"Class: PlanMode",description:"@thatopen/components.PlanMode",source:"@site/docs/api/classes/thatopen_components.PlanMode.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.PlanMode",permalink:"/api/classes/thatopen_components.PlanMode",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.PlanMode",title:"Class: PlanMode",sidebar_label:"PlanMode",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"OrthoPerspectiveCamera",permalink:"/api/classes/thatopen_components.OrthoPerspectiveCamera"},next:{title:"ProjectionManager",permalink:"/api/classes/thatopen_components.ProjectionManager"}},d={},c=[{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"id",id:"id",level:3},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"Methods",id:"methods",level:2},{value:"set",id:"set",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Implementation of",id:"implementation-of-2",level:4},{value:"Defined in",id:"defined-in-2",level:4}],m={toc:c},f="wrapper";function u(e){var t=e.components,n=(0,o.Z)(e,i);return(0,r.kt)(f,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".PlanMode"),(0,r.kt)("p",null,"A ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode")," that allows to navigate floorplans in 2D,\nlike many BIM tools."),(0,r.kt)("h2",{id:"implements"},"Implements"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.NavigationMode"},(0,r.kt)("inlineCode",{parentName:"a"},"NavigationMode")))),(0,r.kt)("h2",{id:"properties"},"Properties"),(0,r.kt)("h3",{id:"enabled"},"enabled"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("strong",{parentName:"p"},"enabled"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,r.kt)("inlineCode",{parentName:"p"},"false")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#enabled"},"NavigationMode.enabled")),(0,r.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#enabled"},"enabled")),(0,r.kt)("h4",{id:"defined-in"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts#L11"},"packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts:11")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"id"},"id"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,r.kt)("strong",{parentName:"p"},"id"),": ",(0,r.kt)("inlineCode",{parentName:"p"},'"Plan"')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#id"},"NavigationMode.id")),(0,r.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#id"},"id")),(0,r.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts#L14"},"packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts:14")),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("h3",{id:"set"},"set"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"set"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"active"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#set"},"NavigationMode.set")),(0,r.kt)("h4",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"active")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"boolean"))))),(0,r.kt)("h4",{id:"returns"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"implementation-of-2"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#set"},"set")),(0,r.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts#L29"},"packages/core/src/core/OrthoPerspectiveCamera/src/plan-mode.ts:29")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/1567e004.9f3fc591.js b/build/assets/js/1567e004.9f3fc591.js new file mode 100644 index 00000000..0f8b9f50 --- /dev/null +++ b/build/assets/js/1567e004.9f3fc591.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2238],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>u});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),l=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=l(e.components);return a.createElement(p.Provider,{value:t},e.children)},m="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},h=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,p=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),m=l(n),h=r,u=m["".concat(p,".").concat(h)]||m[h]||c[h]||i;return n?a.createElement(u,s(s({ref:t},d),{},{components:n})):a.createElement(u,s({ref:t},d))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,s=new Array(i);s[0]=h;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o[m]="string"==typeof e?e:r,s[1]=o;for(var l=2;l{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>m});var a=n(7462),r=n(3366),i=(n(7294),n(3905)),s=["components"],o={id:"thatopen_components.Disposer",title:"Class: Disposer",sidebar_label:"Disposer",custom_edit_url:null},p=void 0,l={unversionedId:"api/classes/thatopen_components.Disposer",id:"api/classes/thatopen_components.Disposer",title:"Class: Disposer",description:"@thatopen/components.Disposer",source:"@site/docs/api/classes/thatopen_components.Disposer.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.Disposer",permalink:"/api/classes/thatopen_components.Disposer",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Disposer",title:"Class: Disposer",sidebar_label:"Disposer",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Cullers",permalink:"/api/classes/thatopen_components.Cullers"},next:{title:"Event",permalink:"/api/classes/thatopen_components.Event"}},d={},m=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Overrides",id:"overrides",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"Methods",id:"methods",level:2},{value:"destroy",id:"destroy",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"disposeGeometry",id:"disposegeometry",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"get",id:"get",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-5",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-7",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-8",level:4}],c={toc:m},h="wrapper";function u(e){var t=e.components,n=(0,r.Z)(e,s);return(0,i.kt)(h,(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Disposer"),(0,i.kt)("p",null,"A tool to safely remove meshes and geometries from memory to\n",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects"},"prevent memory leaks"),"."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},(0,i.kt)("inlineCode",{parentName:"a"},"Component"))),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"Disposer"))))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"enabled"},"enabled"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"enabled"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"true")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,i.kt)("h4",{id:"overrides"},"Overrides"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"enabled")),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Disposer/index.ts#L13"},"packages/core/src/core/Disposer/index.ts:13")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"destroy"},"destroy"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"destroy"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"object"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"materials?"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"recursive?"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Removes a mesh, its geometry and its materials from memory. If you are\nusing any of these in other parts of the application, make sure that you\nremove them from the mesh before disposing it."),(0,i.kt)("h4",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Default value"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"object")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Object3D"),"<",(0,i.kt)("inlineCode",{parentName:"td"},"Object3DEventMap"),">"),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"undefined")),(0,i.kt)("td",{parentName:"tr",align:"left"},"the ",(0,i.kt)("a",{parentName:"td",href:"https://threejs.org/docs/#api/en/core/Object3D"},"object")," to remove.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"materials")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"true")),(0,i.kt)("td",{parentName:"tr",align:"left"},"whether to dispose the materials of the mesh.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"recursive")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"true")),(0,i.kt)("td",{parentName:"tr",align:"left"},"whether to recursively dispose the children of the mesh.")))),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Disposer/index.ts#L42"},"packages/core/src/core/Disposer/index.ts:42")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"disposegeometry"},"disposeGeometry"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"disposeGeometry"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"geometry"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Disposes a geometry from memory."),(0,i.kt)("h4",{id:"parameters-1"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"geometry")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"BufferGeometry"),"<",(0,i.kt)("inlineCode",{parentName:"td"},"NormalBufferAttributes"),">"),(0,i.kt)("td",{parentName:"tr",align:"left"},"the ",(0,i.kt)("a",{parentName:"td",href:"https://threejs.org/docs/#api/en/core/BufferGeometry"},"geometry")," to remove.")))),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Disposer/index.ts#L63"},"packages/core/src/core/Disposer/index.ts:63")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"get"},"get"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"get"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"Set"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"string"),">"),(0,i.kt)("p",null,"Component.uuid."),(0,i.kt)("h4",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"Set"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"string"),">"),(0,i.kt)("p",null,"the list of UUIDs of deleted components."),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Disposer/index.ts#L26"},"packages/core/src/core/Disposer/index.ts:26")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,i.kt)("h4",{id:"returns-3"},"Returns"),(0,i.kt)("p",null,"this is Configurable"),(0,i.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isconfigurable"},"isConfigurable")),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,i.kt)("h4",{id:"returns-4"},"Returns"),(0,i.kt)("p",null,"this is Disposable"),(0,i.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isdisposeable"},"isDisposeable")),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ishideable"},"isHideable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,i.kt)("h4",{id:"returns-5"},"Returns"),(0,i.kt)("p",null,"this is Hideable"),(0,i.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#ishideable"},"isHideable")),(0,i.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,i.kt)("h4",{id:"returns-6"},"Returns"),(0,i.kt)("p",null,"this is Resizeable"),(0,i.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isresizeable"},"isResizeable")),(0,i.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,i.kt)("h4",{id:"returns-7"},"Returns"),(0,i.kt)("p",null,"this is Updateable"),(0,i.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isupdateable"},"isUpdateable")),(0,i.kt)("h4",{id:"defined-in-8"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/17896441.2a0ca96b.js b/build/assets/js/17896441.2a0ca96b.js new file mode 100644 index 00000000..e499db3a --- /dev/null +++ b/build/assets/js/17896441.2a0ca96b.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7918],{3905:(e,t,n)=>{"use strict";n.d(t,{Zo:()=>u,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=a.createContext({}),s=function(e){var t=a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.createElement(c.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},p=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),d=s(n),p=r,f=d["".concat(c,".").concat(p)]||d[p]||m[p]||o;return n?a.createElement(f,l(l({ref:t},u),{},{components:n})):a.createElement(f,l({ref:t},u))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=p;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[d]="string"==typeof e?e:r,l[1]=i;for(var s=2;s{"use strict";n.r(t),n.d(t,{default:()=>Rt});var a=n(7294),r=n(1944),o=n(9688),l=a.createContext(null);function i(e){var t=e.children,n=function(e){return(0,a.useMemo)((function(){return{metadata:e.metadata,frontMatter:e.frontMatter,assets:e.assets,contentTitle:e.contentTitle,toc:e.toc}}),[e])}(e.content);return a.createElement(l.Provider,{value:n},t)}function c(){var e=(0,a.useContext)(l);if(null===e)throw new o.i6("DocProvider");return e}function s(){var e,t=c(),n=t.metadata,o=t.frontMatter,l=t.assets;return a.createElement(r.d,{title:n.title,description:n.description,keywords:o.keywords,image:null!=(e=l.image)?e:o.image})}var u=n(6010),d=n(7524),m=n(7462),p=n(5999),f=n(9960);function v(e){var t=e.permalink,n=e.title,r=e.subLabel,o=e.isNext;return a.createElement(f.Z,{className:(0,u.Z)("pagination-nav__link",o?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t},r&&a.createElement("div",{className:"pagination-nav__sublabel"},r),a.createElement("div",{className:"pagination-nav__label"},n))}function h(e){var t=e.previous,n=e.next;return a.createElement("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,p.I)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"})},t&&a.createElement(v,(0,m.Z)({},t,{subLabel:a.createElement(p.Z,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc"},"Previous")})),n&&a.createElement(v,(0,m.Z)({},n,{subLabel:a.createElement(p.Z,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc"},"Next"),isNext:!0})))}function g(){var e=c().metadata;return a.createElement(h,{previous:e.previous,next:e.next})}var b=n(2263),E=n(143),y=n(5281),k=n(373),N=n(4477);var C={unreleased:function(e){var t=e.siteTitle,n=e.versionMetadata;return a.createElement(p.Z,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:t,versionLabel:a.createElement("b",null,n.label)}},"This is unreleased documentation for {siteTitle} {versionLabel} version.")},unmaintained:function(e){var t=e.siteTitle,n=e.versionMetadata;return a.createElement(p.Z,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:t,versionLabel:a.createElement("b",null,n.label)}},"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.")}};function L(e){var t=C[e.versionMetadata.banner];return a.createElement(t,e)}function Z(e){var t=e.versionLabel,n=e.to,r=e.onClick;return a.createElement(p.Z,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:t,latestVersionLink:a.createElement("b",null,a.createElement(f.Z,{to:n,onClick:r},a.createElement(p.Z,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label"},"latest version")))}},"For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).")}function T(e){var t,n=e.className,r=e.versionMetadata,o=(0,b.Z)().siteConfig.title,l=(0,E.gA)({failfast:!0}).pluginId,i=(0,k.J)(l).savePreferredVersionName,c=(0,E.Jo)(l),s=c.latestDocSuggestion,d=c.latestVersionSuggestion,m=null!=s?s:(t=d).docs.find((function(e){return e.id===t.mainDocId}));return a.createElement("div",{className:(0,u.Z)(n,y.k.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert"},a.createElement("div",null,a.createElement(L,{siteTitle:o,versionMetadata:r})),a.createElement("div",{className:"margin-top--md"},a.createElement(Z,{versionLabel:d.label,to:m.path,onClick:function(){return i(d.name)}})))}function w(e){var t=e.className,n=(0,N.E)();return n.banner?a.createElement(T,{className:t,versionMetadata:n}):null}function _(e){var t=e.className,n=(0,N.E)();return n.badge?a.createElement("span",{className:(0,u.Z)(t,y.k.docs.docVersionBadge,"badge badge--secondary")},a.createElement(p.Z,{id:"theme.docs.versionBadge.label",values:{versionLabel:n.label}},"Version: {versionLabel}")):null}function x(e){var t=e.lastUpdatedAt,n=e.formattedLastUpdatedAt;return a.createElement(p.Z,{id:"theme.lastUpdated.atDate",description:"The words used to describe on which date a page has been last updated",values:{date:a.createElement("b",null,a.createElement("time",{dateTime:new Date(1e3*t).toISOString()},n))}}," on {date}")}function B(e){var t=e.lastUpdatedBy;return a.createElement(p.Z,{id:"theme.lastUpdated.byUser",description:"The words used to describe by who the page has been last updated",values:{user:a.createElement("b",null,t)}}," by {user}")}function O(e){var t=e.lastUpdatedAt,n=e.formattedLastUpdatedAt,r=e.lastUpdatedBy;return a.createElement("span",{className:y.k.common.lastUpdated},a.createElement(p.Z,{id:"theme.lastUpdated.lastUpdatedAtBy",description:"The sentence used to display when a page has been last updated, and by who",values:{atDate:t&&n?a.createElement(x,{lastUpdatedAt:t,formattedLastUpdatedAt:n}):"",byUser:r?a.createElement(B,{lastUpdatedBy:r}):""}},"Last updated{atDate}{byUser}"),!1)}var H=n(3366);const j={iconEdit:"iconEdit_Z9Sw"};var A=["className"];function I(e){var t=e.className,n=(0,H.Z)(e,A);return a.createElement("svg",(0,m.Z)({fill:"currentColor",height:"20",width:"20",viewBox:"0 0 40 40",className:(0,u.Z)(j.iconEdit,t),"aria-hidden":"true"},n),a.createElement("g",null,a.createElement("path",{d:"m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"})))}function S(e){var t=e.editUrl;return a.createElement("a",{href:t,target:"_blank",rel:"noreferrer noopener",className:y.k.common.editThisPage},a.createElement(I,null),a.createElement(p.Z,{id:"theme.common.editThisPage",description:"The link label to edit the current page"},"Edit this page"))}const M={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};function P(e){var t=e.permalink,n=e.label,r=e.count;return a.createElement(f.Z,{href:t,className:(0,u.Z)(M.tag,r?M.tagWithCount:M.tagRegular)},n,r&&a.createElement("span",null,r))}const U={tags:"tags_jXut",tag:"tag_QGVx"};function z(e){var t=e.tags;return a.createElement(a.Fragment,null,a.createElement("b",null,a.createElement(p.Z,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list"},"Tags:")),a.createElement("ul",{className:(0,u.Z)(U.tags,"padding--none","margin-left--sm")},t.map((function(e){var t=e.label,n=e.permalink;return a.createElement("li",{key:n,className:U.tag},a.createElement(P,{label:t,permalink:n}))}))))}const V={lastUpdated:"lastUpdated_vwxv"};function D(e){return a.createElement("div",{className:(0,u.Z)(y.k.docs.docFooterTagsRow,"row margin-bottom--sm")},a.createElement("div",{className:"col"},a.createElement(z,e)))}function R(e){var t=e.editUrl,n=e.lastUpdatedAt,r=e.lastUpdatedBy,o=e.formattedLastUpdatedAt;return a.createElement("div",{className:(0,u.Z)(y.k.docs.docFooterEditMetaRow,"row")},a.createElement("div",{className:"col"},t&&a.createElement(S,{editUrl:t})),a.createElement("div",{className:(0,u.Z)("col",V.lastUpdated)},(n||r)&&a.createElement(O,{lastUpdatedAt:n,formattedLastUpdatedAt:o,lastUpdatedBy:r})))}function W(){var e=c().metadata,t=e.editUrl,n=e.lastUpdatedAt,r=e.formattedLastUpdatedAt,o=e.lastUpdatedBy,l=e.tags,i=l.length>0,s=!!(t||n||o);return i||s?a.createElement("footer",{className:(0,u.Z)(y.k.docs.docFooter,"docusaurus-mt-lg")},i&&a.createElement(D,{tags:l}),s&&a.createElement(R,{editUrl:t,lastUpdatedAt:n,lastUpdatedBy:o,formattedLastUpdatedAt:r})):null}var F=n(6043),q=n(6668),G=["parentIndex"];function $(e){var t=e.map((function(e){return Object.assign({},e,{parentIndex:-1,children:[]})})),n=Array(7).fill(-1);t.forEach((function(e,t){var a=n.slice(2,e.level);e.parentIndex=Math.max.apply(Math,a),n[e.level]=t}));var a=[];return t.forEach((function(e){var n=e.parentIndex,r=(0,H.Z)(e,G);n>=0?t[n].children.push(r):a.push(r)})),a}function Y(e){var t=e.toc,n=e.minHeadingLevel,a=e.maxHeadingLevel;return t.flatMap((function(e){var t=Y({toc:e.children,minHeadingLevel:n,maxHeadingLevel:a});return function(e){return e.level>=n&&e.level<=a}(e)?[Object.assign({},e,{children:t})]:t}))}function J(e){var t=e.getBoundingClientRect();return t.top===t.bottom?J(e.parentNode):t}function Q(e,t){var n,a,r=t.anchorTopOffset,o=e.find((function(e){return J(e).top>=r}));return o?function(e){return e.top>0&&e.bottom0})).map((function(e){return[e-1,[i]]}));return{lineClassNames:Object.fromEntries(c),code:n}}if(void 0===a)return{lineClassNames:{},code:n};for(var s=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return He(["js","jsBlock"],t);case"jsx":case"tsx":return He(["js","jsBlock","jsx"],t);case"html":return He(["js","jsBlock","html"],t);case"python":case"py":case"bash":return He(["bash"],t);case"markdown":case"md":return He(["html","jsx","bash"],t);default:return He(Object.keys(Oe),t)}}(a,r),u=n.split("\n"),d=Object.fromEntries(r.map((function(e){return[e.className,{start:0,range:""}]}))),m=Object.fromEntries(r.filter((function(e){return e.line})).map((function(e){var t=e.className;return[e.line,t]}))),p=Object.fromEntries(r.filter((function(e){return e.block})).map((function(e){var t=e.className;return[e.block.start,t]}))),f=Object.fromEntries(r.filter((function(e){return e.block})).map((function(e){var t=e.className;return[e.block.end,t]}))),v=0;v0&&e[n-1]===t?e:e.concat(t)};function $e(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&-1===t.indexOf(a)&&(n[a]=e[a]);return n}var Ye=function(e){function t(){for(var t=this,n=[],a=arguments.length;a--;)n[a]=arguments[a];e.apply(this,n),Re(this,"getThemeDict",(function(e){if(void 0!==t.themeDict&&e.theme===t.prevTheme&&e.language===t.prevLanguage)return t.themeDict;t.prevTheme=e.theme,t.prevLanguage=e.language;var n=e.theme?function(e,t){var n=e.plain,a=Object.create(null),r=e.styles.reduce((function(e,n){var a=n.languages,r=n.style;return a&&!a.includes(t)||n.types.forEach((function(t){var n=We({},e[t],r);e[t]=n})),e}),a);return r.root=n,r.plain=We({},n,{backgroundColor:null}),r}(e.theme,e.language):void 0;return t.themeDict=n})),Re(this,"getLineProps",(function(e){var n=e.key,a=e.className,r=e.style,o=We({},$e(e,["key","className","style","line"]),{className:"token-line",style:void 0,key:void 0}),l=t.getThemeDict(t.props);return void 0!==l&&(o.style=l.plain),void 0!==r&&(o.style=void 0!==o.style?We({},o.style,r):r),void 0!==n&&(o.key=n),a&&(o.className+=" "+a),o})),Re(this,"getStyleForToken",(function(e){var n=e.types,a=e.empty,r=n.length,o=t.getThemeDict(t.props);if(void 0!==o){if(1===r&&"plain"===n[0])return a?{display:"inline-block"}:void 0;if(1===r&&!a)return o[n[0]];var l=a?{display:"inline-block"}:{},i=n.map((function(e){return o[e]}));return Object.assign.apply(Object,[l].concat(i))}})),Re(this,"getTokenProps",(function(e){var n=e.key,a=e.className,r=e.style,o=e.token,l=We({},$e(e,["key","className","style","token"]),{className:"token "+o.types.join(" "),children:o.content,style:t.getStyleForToken(o),key:void 0});return void 0!==r&&(l.style=void 0!==l.style?We({},l.style,r):r),void 0!==n&&(l.key=n),a&&(l.className+=" "+a),l})),Re(this,"tokenize",(function(e,t,n,a){var r={code:t,grammar:n,language:a,tokens:[]};e.hooks.run("before-tokenize",r);var o=r.tokens=e.tokenize(r.code,r.grammar,r.language);return e.hooks.run("after-tokenize",r),o}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.render=function(){var e=this.props,t=e.Prism,n=e.language,a=e.code,r=e.children,o=this.getThemeDict(this.props),l=t.languages[n];return r({tokens:function(e){for(var t=[[]],n=[e],a=[0],r=[e.length],o=0,l=0,i=[],c=[i];l>-1;){for(;(o=a[l]++)0?u:["plain"],s=d):(u=Ge(u,d.type),d.alias&&(u=Ge(u,d.alias)),s=d.content),"string"==typeof s){var m=s.split(Fe),p=m.length;i.push({types:u,content:m[0]});for(var f=1;f0&&r.getRangeAt(0);t.append(n),n.select(),n.selectionStart=0,n.selectionEnd=e.length;let l=!1;try{l=document.execCommand("copy")}catch{}n.remove(),o&&(r.removeAllRanges(),r.addRange(o)),a&&a.focus()}(t),l(!0),i.current=window.setTimeout((function(){l(!1)}),1e3)}),[t]);return(0,a.useEffect)((function(){return function(){return window.clearTimeout(i.current)}}),[]),a.createElement("button",{type:"button","aria-label":o?(0,p.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,p.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,p.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,u.Z)("clean-btn",n,tt.copyButton,o&&tt.copyButtonCopied),onClick:c},a.createElement("span",{className:tt.copyButtonIcons,"aria-hidden":"true"},a.createElement(Ke,{className:tt.copyButtonIcon}),a.createElement(et,{className:tt.copyButtonSuccessIcon})))}function at(e){return a.createElement("svg",(0,m.Z)({viewBox:"0 0 24 24"},e),a.createElement("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"}))}const rt={wordWrapButtonIcon:"wordWrapButtonIcon_Bwma",wordWrapButtonEnabled:"wordWrapButtonEnabled_EoeP"};function ot(e){var t=e.className,n=e.onClick,r=e.isEnabled,o=(0,p.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return a.createElement("button",{type:"button",onClick:n,className:(0,u.Z)("clean-btn",t,r&&rt.wordWrapButtonEnabled),"aria-label":o,title:o},a.createElement(at,{className:rt.wordWrapButtonIcon,"aria-hidden":"true"}))}function lt(e){var t,n,r,o,l,i,c,s,d,p,f,v=e.children,h=e.className,g=void 0===h?"":h,b=e.metastring,E=e.title,y=e.showLineNumbers,k=e.language,N=(0,q.L)().prism,C=N.defaultLanguage,L=N.magicComments,Z=null!=(t=null!=k?k:null==(n=g.split(" ").find((function(e){return e.startsWith("language-")})))?void 0:n.replace(/language-/,""))?t:C,T=Ze(),w=(r=(0,a.useState)(!1),o=r[0],l=r[1],i=(0,a.useState)(!1),c=i[0],s=i[1],d=(0,a.useRef)(null),p=(0,a.useCallback)((function(){var e=d.current.querySelector("code");o?e.removeAttribute("style"):(e.style.whiteSpace="pre-wrap",e.style.overflowWrap="anywhere"),l((function(e){return!e}))}),[d,o]),f=(0,a.useCallback)((function(){var e=d.current,t=e.scrollWidth>e.clientWidth||d.current.querySelector("code").hasAttribute("style");s(t)}),[d]),ze(d,f),(0,a.useEffect)((function(){f()}),[o,f]),(0,a.useEffect)((function(){return window.addEventListener("resize",f,{passive:!0}),function(){window.removeEventListener("resize",f)}}),[f]),{codeBlockRef:d,isEnabled:o,isCodeScrollable:c,toggle:p}),_=function(e){var t,n;return null!=(t=null==e||null==(n=e.match(xe))?void 0:n.groups.title)?t:""}(b)||E,x=je(v,{metastring:b,language:Z,magicComments:L}),B=x.lineClassNames,O=x.code,H=null!=y?y:function(e){return Boolean(null==e?void 0:e.includes("showLineNumbers"))}(b);return a.createElement(Se,{as:"div",className:(0,u.Z)(g,Z&&!g.includes("language-"+Z)&&"language-"+Z)},_&&a.createElement("div",{className:Me.codeBlockTitle},_),a.createElement("div",{className:Me.codeBlockContent},a.createElement(Je,(0,m.Z)({},De,{theme:T,code:O,language:null!=Z?Z:"text"}),(function(e){var t=e.className,n=e.tokens,r=e.getLineProps,o=e.getTokenProps;return a.createElement("pre",{tabIndex:0,ref:w.codeBlockRef,className:(0,u.Z)(t,Me.codeBlock,"thin-scrollbar")},a.createElement("code",{className:(0,u.Z)(Me.codeBlockLines,H&&Me.codeBlockLinesWithNumbering)},n.map((function(e,t){return a.createElement(Xe,{key:t,line:e,getLineProps:r,getTokenProps:o,classNames:B[t],showLineNumbers:H})}))))})),a.createElement("div",{className:Me.buttonGroup},(w.isEnabled||w.isCodeScrollable)&&a.createElement(ot,{className:Me.codeButton,onClick:function(){return w.toggle()},isEnabled:w.isEnabled}),a.createElement(nt,{className:Me.codeButton,code:O}))))}var it=["children"];function ct(e){var t=e.children,n=(0,H.Z)(e,it),r=(0,Ce.Z)(),o=function(e){return a.Children.toArray(e).some((function(e){return(0,a.isValidElement)(e)}))?e:Array.isArray(e)?e.join(""):e}(t),l="string"==typeof o?lt:Pe;return a.createElement(l,(0,m.Z)({key:String(r)},n),o)}const st={details:"details_lb9f",isBrowser:"isBrowser_bmU9",collapsibleContent:"collapsibleContent_i85q"};var ut=["summary","children"];function dt(e){return!!e&&("SUMMARY"===e.tagName||dt(e.parentElement))}function mt(e,t){return!!e&&(e===t||mt(e.parentElement,t))}function pt(e){var t=e.summary,n=e.children,r=(0,H.Z)(e,ut),o=(0,Ce.Z)(),l=(0,a.useRef)(null),i=(0,F.u)({initialState:!r.open}),c=i.collapsed,s=i.setCollapsed,d=(0,a.useState)(r.open),p=d[0],f=d[1],v=a.isValidElement(t)?t:a.createElement("summary",null,null!=t?t:"Details");return a.createElement("details",(0,m.Z)({},r,{ref:l,open:p,"data-collapsed":c,className:(0,u.Z)(st.details,o&&st.isBrowser,r.className),onMouseDown:function(e){dt(e.target)&&e.detail>1&&e.preventDefault()},onClick:function(e){e.stopPropagation();var t=e.target;dt(t)&&mt(t,l.current)&&(e.preventDefault(),c?(s(!1),f(!0)):s(!0))}}),v,a.createElement(F.z,{lazy:!1,collapsed:c,disableSSRStyle:!0,onCollapseTransitionEnd:function(e){s(e),f(!e)}},a.createElement("div",{className:st.collapsibleContent},n)))}const ft={details:"details_b_Ee"};var vt="alert alert--info";function ht(e){var t=Object.assign({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(e),e));return a.createElement(pt,(0,m.Z)({},t,{className:(0,u.Z)(vt,ft.details,t.className)}))}function gt(e){return a.createElement(Ee,e)}const bt={containsTaskList:"containsTaskList_mC6p"};function Et(e){if(void 0!==e)return(0,u.Z)(e,(null==e?void 0:e.includes("contains-task-list"))&&bt.containsTaskList)}const yt={img:"img_ev3q"};const kt="admonition_LlT9",Nt="admonitionHeading_tbUL",Ct="admonitionIcon_kALy",Lt="admonitionContent_S0QG";var Zt={note:{infimaClassName:"secondary",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 14 16"},a.createElement("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"}))},label:a.createElement(p.Z,{id:"theme.admonition.note",description:"The default label used for the Note admonition (:::note)"},"note")},tip:{infimaClassName:"success",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 12 16"},a.createElement("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))},label:a.createElement(p.Z,{id:"theme.admonition.tip",description:"The default label used for the Tip admonition (:::tip)"},"tip")},danger:{infimaClassName:"danger",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 12 16"},a.createElement("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"}))},label:a.createElement(p.Z,{id:"theme.admonition.danger",description:"The default label used for the Danger admonition (:::danger)"},"danger")},info:{infimaClassName:"info",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 14 16"},a.createElement("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))},label:a.createElement(p.Z,{id:"theme.admonition.info",description:"The default label used for the Info admonition (:::info)"},"info")},caution:{infimaClassName:"warning",iconComponent:function(){return a.createElement("svg",{viewBox:"0 0 16 16"},a.createElement("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"}))},label:a.createElement(p.Z,{id:"theme.admonition.caution",description:"The default label used for the Caution admonition (:::caution)"},"caution")}},Tt={secondary:"note",important:"info",success:"tip",warning:"danger"};function wt(e){var t,n=function(e){var t=a.Children.toArray(e),n=t.find((function(e){var t;return a.isValidElement(e)&&"mdxAdmonitionTitle"===(null==(t=e.props)?void 0:t.mdxType)})),r=a.createElement(a.Fragment,null,t.filter((function(e){return e!==n})));return{mdxAdmonitionTitle:n,rest:r}}(e.children),r=n.mdxAdmonitionTitle,o=n.rest;return Object.assign({},e,{title:null!=(t=e.title)?t:r,children:o})}const _t={head:function(e){var t=a.Children.map(e.children,(function(e){return a.isValidElement(e)?function(e){var t;if(null!=(t=e.props)&&t.mdxType&&e.props.originalType){var n=e.props,r=(n.mdxType,n.originalType,(0,H.Z)(n,Ne));return a.createElement(e.props.originalType,r)}return e}(e):e}));return a.createElement(ke.Z,e,t)},code:function(e){var t=["a","abbr","b","br","button","cite","code","del","dfn","em","i","img","input","ins","kbd","label","object","output","q","ruby","s","small","span","strong","sub","sup","time","u","var","wbr"];return a.Children.toArray(e.children).every((function(e){var n;return"string"==typeof e&&!e.includes("\n")||(0,a.isValidElement)(e)&&t.includes(null==(n=e.props)?void 0:n.mdxType)}))?a.createElement("code",e):a.createElement(ct,e)},a:function(e){return a.createElement(f.Z,e)},pre:function(e){var t;return a.createElement(ct,(0,a.isValidElement)(e.children)&&"code"===(null==(t=e.children.props)?void 0:t.originalType)?e.children.props:Object.assign({},e))},details:function(e){var t=a.Children.toArray(e.children),n=t.find((function(e){var t;return a.isValidElement(e)&&"summary"===(null==(t=e.props)?void 0:t.mdxType)})),r=a.createElement(a.Fragment,null,t.filter((function(e){return e!==n})));return a.createElement(ht,(0,m.Z)({},e,{summary:n}),r)},ul:function(e){return a.createElement("ul",(0,m.Z)({},e,{className:Et(e.className)}))},img:function(e){return a.createElement("img",(0,m.Z)({loading:"lazy"},e,{className:(t=e.className,(0,u.Z)(t,yt.img))}));var t},h1:function(e){return a.createElement(gt,(0,m.Z)({as:"h1"},e))},h2:function(e){return a.createElement(gt,(0,m.Z)({as:"h2"},e))},h3:function(e){return a.createElement(gt,(0,m.Z)({as:"h3"},e))},h4:function(e){return a.createElement(gt,(0,m.Z)({as:"h4"},e))},h5:function(e){return a.createElement(gt,(0,m.Z)({as:"h5"},e))},h6:function(e){return a.createElement(gt,(0,m.Z)({as:"h6"},e))},admonition:function(e){var t=wt(e),n=t.children,r=t.type,o=t.title,l=t.icon,i=function(e){var t,n=null!=(t=Tt[e])?t:e,a=Zt[n];return a||(console.warn('No admonition config found for admonition type "'+n+'". Using Info as fallback.'),Zt.info)}(r),c=null!=o?o:i.label,s=i.iconComponent,d=null!=l?l:a.createElement(s,null);return a.createElement("div",{className:(0,u.Z)(y.k.common.admonition,y.k.common.admonitionType(e.type),"alert","alert--"+i.infimaClassName,kt)},a.createElement("div",{className:Nt},a.createElement("span",{className:Ct},d),c),a.createElement("div",{className:Lt},n))},mermaid:n(1875).Z};function xt(e){var t=e.children;return a.createElement(ye.Zo,{components:_t},t)}function Bt(e){var t,n,r,o,l=e.children,i=(t=c(),n=t.metadata,r=t.frontMatter,o=t.contentTitle,r.hide_title||void 0!==o?null:n.title);return a.createElement("div",{className:(0,u.Z)(y.k.docs.docMarkdown,"markdown")},i&&a.createElement("header",null,a.createElement(Ee,{as:"h1"},i)),a.createElement(xt,null,l))}var Ot=n(8425),Ht=n(8596),jt=n(4996);function At(e){return a.createElement("svg",(0,m.Z)({viewBox:"0 0 24 24"},e),a.createElement("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"}))}const It={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function St(){var e=(0,jt.Z)("/");return a.createElement("li",{className:"breadcrumbs__item"},a.createElement(f.Z,{"aria-label":(0,p.I)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e},a.createElement(At,{className:It.breadcrumbHomeIcon})))}const Mt={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function Pt(e){var t=e.children,n=e.href,r="breadcrumbs__link";return e.isLast?a.createElement("span",{className:r,itemProp:"name"},t):n?a.createElement(f.Z,{className:r,href:n,itemProp:"item"},a.createElement("span",{itemProp:"name"},t)):a.createElement("span",{className:r},t)}function Ut(e){var t=e.children,n=e.active,r=e.index,o=e.addMicrodata;return a.createElement("li",(0,m.Z)({},o&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},{className:(0,u.Z)("breadcrumbs__item",{"breadcrumbs__item--active":n})}),t,a.createElement("meta",{itemProp:"position",content:String(r+1)}))}function zt(){var e=(0,Ot.s1)(),t=(0,Ht.Ns)();return e?a.createElement("nav",{className:(0,u.Z)(y.k.docs.docBreadcrumbs,Mt.breadcrumbsContainer),"aria-label":(0,p.I)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"})},a.createElement("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList"},t&&a.createElement(St,null),e.map((function(t,n){var r=n===e.length-1;return a.createElement(Ut,{key:n,active:r,index:n,addMicrodata:!!t.href},a.createElement(Pt,{href:t.href,isLast:r},t.label))})))):null}const Vt={docItemContainer:"docItemContainer_Djhp",docItemCol:"docItemCol_VOVn"};function Dt(e){var t,n,r,o,l,i,s=e.children,m=(t=c(),n=t.frontMatter,r=t.toc,o=(0,d.i)(),l=n.hide_table_of_contents,i=!l&&r.length>0,{hidden:l,mobile:i?a.createElement(ue,null):void 0,desktop:!i||"desktop"!==o&&"ssr"!==o?void 0:a.createElement(he,null)});return a.createElement("div",{className:"row"},a.createElement("div",{className:(0,u.Z)("col",!m.hidden&&Vt.docItemCol)},a.createElement(w,null),a.createElement("div",{className:Vt.docItemContainer},a.createElement("article",null,a.createElement(zt,null),a.createElement(_,null),m.mobile,a.createElement(Bt,null,s),a.createElement(W,null)),a.createElement(g,null))),m.desktop&&a.createElement("div",{className:"col col--3"},m.desktop))}function Rt(e){var t="docs-doc-id-"+e.content.metadata.unversionedId,n=e.content;return a.createElement(i,{content:e.content},a.createElement(r.FG,{className:t},a.createElement(s,null),a.createElement(Dt,null,a.createElement(n,null))))}},4477:(e,t,n)=>{"use strict";n.d(t,{E:()=>i,q:()=>l});var a=n(7294),r=n(9688),o=a.createContext(null);function l(e){var t=e.children,n=e.version;return a.createElement(o.Provider,{value:n},t)}function i(){var e=(0,a.useContext)(o);if(null===e)throw new r.i6("DocsVersionProvider");return e}},7594:(e,t)=>{function n(e){let t,n=[];for(let a of e.split(",").map((e=>e.trim())))if(/^-?\d+$/.test(a))n.push(parseInt(a,10));else if(t=a.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,a,r,o]=t;if(a&&o){a=parseInt(a),o=parseInt(o);const e=a{n.r(t),n.d(t,{default:()=>Ie});var a=n(7294),r=n(6010),o=n(1944),l=n(5281),i=n(3320),c=n(8425),d=n(4477),s=n(1116),m=n(7961),u=n(5999),b=n(2466),p=n(5936);const h={backToTopButton:"backToTopButton_sjWU",backToTopButtonShow:"backToTopButtonShow_xfvO"};function v(){var e=function(e){var t=e.threshold,n=(0,a.useState)(!1),r=n[0],o=n[1],l=(0,a.useRef)(!1),i=(0,b.Ct)(),c=i.startScroll,d=i.cancelScroll;return(0,b.RF)((function(e,n){var a=e.scrollY,r=null==n?void 0:n.scrollY;r&&(l.current?l.current=!1:a>=r?(d(),o(!1)):a{n.r(t),n.d(t,{default:()=>i});var a=n(7294),r=n(5999),o=n(1944),l=n(7961);function i(){return a.createElement(a.Fragment,null,a.createElement(o.d,{title:(0,r.I)({id:"theme.NotFound.title",message:"Page Not Found"})}),a.createElement(l.Z,null,a.createElement("main",{className:"container margin-vert--xl"},a.createElement("div",{className:"row"},a.createElement("div",{className:"col col--6 col--offset-3"},a.createElement("h1",{className:"hero__title"},a.createElement(r.Z,{id:"theme.NotFound.title",description:"The title of the 404 page"},"Page Not Found")),a.createElement("p",null,a.createElement(r.Z,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page"},"We could not find what you were looking for.")),a.createElement("p",null,a.createElement(r.Z,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page"},"Please contact the owner of the site that linked you to the original URL and let them know their link is broken.")))))))}},4477:(e,t,n)=>{n.d(t,{E:()=>i,q:()=>l});var a=n(7294),r=n(9688),o=a.createContext(null);function l(e){var t=e.children,n=e.version;return a.createElement(o.Provider,{value:n},t)}function i(){var e=(0,a.useContext)(o);if(null===e)throw new r.i6("DocsVersionProvider");return e}}}]); \ No newline at end of file diff --git a/build/assets/js/1c5bde81.bf8f73be.js b/build/assets/js/1c5bde81.bf8f73be.js new file mode 100644 index 00000000..77c87c46 --- /dev/null +++ b/build/assets/js/1c5bde81.bf8f73be.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[761],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),d=c(n),u=a,f=d["".concat(l,".").concat(u)]||d[u]||m[u]||i;return n?r.createElement(f,o(o({ref:t},s),{},{components:n})):r.createElement(f,o({ref:t},s))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=u;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[d]="string"==typeof e?e:a,o[1]=p;for(var c=2;c{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>f,frontMatter:()=>p,metadata:()=>c,toc:()=>d});var r=n(7462),a=n(3366),i=(n(7294),n(3905)),o=["components"],p={id:"thatopen_components.Hideable",title:"Interface: Hideable",sidebar_label:"Hideable",custom_edit_url:null},l=void 0,c={unversionedId:"api/interfaces/thatopen_components.Hideable",id:"api/interfaces/thatopen_components.Hideable",title:"Interface: Hideable",description:"@thatopen/components.Hideable",source:"@site/docs/api/interfaces/thatopen_components.Hideable.md",sourceDirName:"api/interfaces",slug:"/api/interfaces/thatopen_components.Hideable",permalink:"/api/interfaces/thatopen_components.Hideable",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Hideable",title:"Interface: Hideable",sidebar_label:"Hideable",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Disposable",permalink:"/api/interfaces/thatopen_components.Disposable"},next:{title:"NavigationMode",permalink:"/api/interfaces/thatopen_components.NavigationMode"}},s={},d=[{value:"Implemented by",id:"implemented-by",level:2},{value:"Properties",id:"properties",level:2},{value:"visible",id:"visible",level:3},{value:"Defined in",id:"defined-in",level:4}],m={toc:d},u="wrapper";function f(e){var t=e.components,n=(0,a.Z)(e,o);return(0,i.kt)(u,(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Hideable"),(0,i.kt)("p",null,"Whether the geometric representation of this component can be\nhidden or shown in the\n",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/scenes/Scene"},"Three.js scene"),"."),(0,i.kt)("h2",{id:"implemented-by"},"Implemented by"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Clipper"},(0,i.kt)("inlineCode",{parentName:"a"},"Clipper"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.SimplePlane"},(0,i.kt)("inlineCode",{parentName:"a"},"SimplePlane")))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"visible"},"visible"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"visible"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")),(0,i.kt)("p",null,"Whether the geometric representation of this component is\ncurrently visible or not in the\n",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/scenes/Scene"},"Three.js scene"),"."),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L34"},"packages/core/src/core/Types/src/interfaces.ts:34")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/232409b2.0ed1f941.js b/build/assets/js/232409b2.0ed1f941.js new file mode 100644 index 00000000..51ca9ca7 --- /dev/null +++ b/build/assets/js/232409b2.0ed1f941.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5362],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>h});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=n.createContext({}),s=function(e){var t=n.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},d=function(e){var t=s(e.components);return n.createElement(p.Provider,{value:t},e.children)},c="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,l=e.originalType,p=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),c=s(r),m=a,h=c["".concat(p,".").concat(m)]||c[m]||u[m]||l;return r?n.createElement(h,i(i({ref:t},d),{},{components:r})):n.createElement(h,i({ref:t},d))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=r.length,i=new Array(l);i[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o[c]="string"==typeof e?e:a,i[1]=o;for(var s=2;s{r.r(t),r.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>c});var n=r(7462),a=r(3366),l=(r(7294),r(3905)),i=["components"],o={id:"thatopen_components.MeshCullerRenderer",title:"Class: MeshCullerRenderer",sidebar_label:"MeshCullerRenderer",custom_edit_url:null},p=void 0,s={unversionedId:"api/classes/thatopen_components.MeshCullerRenderer",id:"api/classes/thatopen_components.MeshCullerRenderer",title:"Class: MeshCullerRenderer",description:"@thatopen/components.MeshCullerRenderer",source:"@site/docs/api/classes/thatopen_components.MeshCullerRenderer.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.MeshCullerRenderer",permalink:"/api/classes/thatopen_components.MeshCullerRenderer",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.MeshCullerRenderer",title:"Class: MeshCullerRenderer",sidebar_label:"MeshCullerRenderer",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"IfcStreamingSettings",permalink:"/api/classes/thatopen_components.IfcStreamingSettings"},next:{title:"OrbitMode",permalink:"/api/classes/thatopen_components.OrbitMode"}},d={},c=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"needsUpdate",id:"needsupdate",level:3},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"renderDebugFrame",id:"renderdebugframe",level:3},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"Methods",id:"methods",level:2},{value:"updateVisibility",id:"updatevisibility",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-4",level:4}],u={toc:c},m="wrapper";function h(e){var t=e.components,r=(0,a.Z)(e,i);return(0,l.kt)(m,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".MeshCullerRenderer"),(0,l.kt)("p",null,"A renderer to determine a mesh visibility on screen"),(0,l.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer"},(0,l.kt)("inlineCode",{parentName:"a"},"CullerRenderer"))),(0,l.kt)("p",{parentName:"li"},"\u21b3 ",(0,l.kt)("strong",{parentName:"p"},(0,l.kt)("inlineCode",{parentName:"strong"},"MeshCullerRenderer"))))),(0,l.kt)("h2",{id:"properties"},"Properties"),(0,l.kt)("h3",{id:"enabled"},"enabled"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"enabled"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,l.kt)("inlineCode",{parentName:"p"},"true")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,l.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer"},"CullerRenderer"),".",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer#enabled"},"enabled")),(0,l.kt)("h4",{id:"defined-in"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L28"},"packages/core/src/core/Cullers/src/culler-renderer.ts:28")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"needsupdate"},"needsUpdate"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"needsUpdate"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,l.kt)("inlineCode",{parentName:"p"},"false")),(0,l.kt)("p",null,"Needs to check whether there are objects that need to be hidden or shown.\nYou can bind this to the camera movement, to a certain interval, etc."),(0,l.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer"},"CullerRenderer"),".",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer#needsupdate"},"needsUpdate")),(0,l.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L34"},"packages/core/src/core/Cullers/src/culler-renderer.ts:34")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,l.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,l.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,l.kt)("inlineCode",{parentName:"p"},"string"),">"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,l.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer"},"CullerRenderer"),".",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer#ondisposed"},"onDisposed")),(0,l.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L18"},"packages/core/src/core/Cullers/src/culler-renderer.ts:18")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"renderdebugframe"},"renderDebugFrame"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"renderDebugFrame"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,l.kt)("inlineCode",{parentName:"p"},"false")),(0,l.kt)("p",null,"Render the internal scene used to determine the object visibility. Used\nfor debugging purposes."),(0,l.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer"},"CullerRenderer"),".",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer#renderdebugframe"},"renderDebugFrame")),(0,l.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L40"},"packages/core/src/core/Cullers/src/culler-renderer.ts:40")),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)("h3",{id:"updatevisibility"},"updateVisibility"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"updateVisibility"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"force?"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("p",null,"The function that the culler uses to reprocess the scene. Generally it's\nbetter to call needsUpdate, but you can also call this to force it."),(0,l.kt)("h4",{id:"parameters"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"force?")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"boolean")),(0,l.kt)("td",{parentName:"tr",align:"left"},"if true, it will refresh the scene even if needsUpdate is not true.")))),(0,l.kt)("h4",{id:"returns"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer"},"CullerRenderer"),".",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.CullerRenderer#updatevisibility"},"updateVisibility")),(0,l.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L135"},"packages/core/src/core/Cullers/src/culler-renderer.ts:135")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/23f0a572.857c346d.js b/build/assets/js/23f0a572.857c346d.js new file mode 100644 index 00000000..1d05cc28 --- /dev/null +++ b/build/assets/js/23f0a572.857c346d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[400],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>u});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),d=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=d(e.components);return a.createElement(p.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},k=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),c=d(n),k=r,u=c["".concat(p,".").concat(k)]||c[k]||m[k]||l;return n?a.createElement(u,i(i({ref:t},s),{},{components:n})):a.createElement(u,i({ref:t},s))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=k;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o[c]="string"==typeof e?e:r,i[1]=o;for(var d=2;d{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>p,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>c});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={id:"thatopen_components.Event",title:"Class: Event",sidebar_label:"Event",custom_edit_url:null},p=void 0,d={unversionedId:"api/classes/thatopen_components.Event",id:"api/classes/thatopen_components.Event",title:"Class: Event",description:"@thatopen/components.Event",source:"@site/docs/api/classes/thatopen_components.Event.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.Event",permalink:"/api/classes/thatopen_components.Event",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Event",title:"Class: Event",sidebar_label:"Event",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Disposer",permalink:"/api/classes/thatopen_components.Disposer"},next:{title:"FirstPersonMode",permalink:"/api/classes/thatopen_components.FirstPersonMode"}},s={},c=[{value:"Type parameters",id:"type-parameters",level:2},{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:"Defined in",id:"defined-in",level:4},{value:"remove",id:"remove",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"reset",id:"reset",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"trigger",id:"trigger",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-3",level:4},{value:"Defined in",id:"defined-in-3",level:4}],m={toc:c},k="wrapper";function u(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)(k,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Event"),(0,l.kt)("p",null,"Simple event handler by\n",(0,l.kt)("a",{parentName:"p",href:"https://gist.github.com/JasonKleban/50cee44960c225ac1993c922563aa540"},"Jason Kleban"),".\nKeep in mind that:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"If you want to remove it later, you might want to declare the callback as\nan object."),(0,l.kt)("li",{parentName:"ul"},"If you want to maintain the reference to ",(0,l.kt)("inlineCode",{parentName:"li"},"this"),", you will need to declare\nthe callback as an arrow function.")),(0,l.kt)("h2",{id:"type-parameters"},"Type parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"T"))))),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)("h3",{id:"add"},"add"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"add"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"handler"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,"Add a callback to this event instance."),(0,l.kt)("h4",{id:"parameters"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"handler")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"T")," extends ",(0,l.kt)("inlineCode",{parentName:"td"},"void")," ? () => ",(0,l.kt)("inlineCode",{parentName:"td"},"void")," : (",(0,l.kt)("inlineCode",{parentName:"td"},"data"),": ",(0,l.kt)("inlineCode",{parentName:"td"},"T"),") => ",(0,l.kt)("inlineCode",{parentName:"td"},"void")),(0,l.kt)("td",{parentName:"tr",align:"left"},"the callback to be added to this event.")))),(0,l.kt)("h4",{id:"returns"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"defined-in"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/event.ts#L15"},"packages/core/src/core/Types/src/event.ts:15")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"remove"},"remove"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"remove"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"handler"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,"Removes a callback from this event instance."),(0,l.kt)("h4",{id:"parameters-1"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"handler")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"T")," extends ",(0,l.kt)("inlineCode",{parentName:"td"},"void")," ? () => ",(0,l.kt)("inlineCode",{parentName:"td"},"void")," : (",(0,l.kt)("inlineCode",{parentName:"td"},"data"),": ",(0,l.kt)("inlineCode",{parentName:"td"},"T"),") => ",(0,l.kt)("inlineCode",{parentName:"td"},"void")),(0,l.kt)("td",{parentName:"tr",align:"left"},"the callback to be removed from this event.")))),(0,l.kt)("h4",{id:"returns-1"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/event.ts#L23"},"packages/core/src/core/Types/src/event.ts:23")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"reset"},"reset"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"reset"),"(): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,"Gets rid of all the suscribed events."),(0,l.kt)("h4",{id:"returns-2"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/event.ts#L36"},"packages/core/src/core/Types/src/event.ts:36")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"trigger"},"trigger"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"trigger"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"data?"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,"Triggers all the callbacks assigned to this event."),(0,l.kt)("h4",{id:"parameters-2"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"data?")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"T"))))),(0,l.kt)("h4",{id:"returns-3"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/event.ts#L28"},"packages/core/src/core/Types/src/event.ts:28")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/26cef902.a9405031.js b/build/assets/js/26cef902.a9405031.js new file mode 100644 index 00000000..414cf947 --- /dev/null +++ b/build/assets/js/26cef902.a9405031.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8230],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),l=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=l(e.components);return r.createElement(s.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),d=l(n),m=a,f=d["".concat(s,".").concat(m)]||d[m]||u[m]||i;return n?r.createElement(f,o(o({ref:t},c),{},{components:n})):r.createElement(f,o({ref:t},c))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p[d]="string"==typeof e?e:a,o[1]=p;for(var l=2;l{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>f,frontMatter:()=>p,metadata:()=>l,toc:()=>d});var r=n(7462),a=n(3366),i=(n(7294),n(3905)),o=["components"],p={id:"thatopen_components.Resizeable",title:"Interface: Resizeable",sidebar_label:"Resizeable",custom_edit_url:null},s=void 0,l={unversionedId:"api/interfaces/thatopen_components.Resizeable",id:"api/interfaces/thatopen_components.Resizeable",title:"Interface: Resizeable",description:"@thatopen/components.Resizeable",source:"@site/docs/api/interfaces/thatopen_components.Resizeable.md",sourceDirName:"api/interfaces",slug:"/api/interfaces/thatopen_components.Resizeable",permalink:"/api/interfaces/thatopen_components.Resizeable",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Resizeable",title:"Interface: Resizeable",sidebar_label:"Resizeable",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Progress",permalink:"/api/interfaces/thatopen_components.Progress"},next:{title:"Updateable",permalink:"/api/interfaces/thatopen_components.Updateable"}},c={},d=[{value:"Properties",id:"properties",level:2},{value:"getSize",id:"getsize",level:3},{value:"Type declaration",id:"type-declaration",level:4},{value:"Returns",id:"returns",level:5},{value:"Defined in",id:"defined-in",level:4},{value:"onResize",id:"onresize",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"resize",id:"resize",level:3},{value:"Type declaration",id:"type-declaration-1",level:4},{value:"Parameters",id:"parameters",level:5},{value:"Returns",id:"returns-1",level:5},{value:"Defined in",id:"defined-in-2",level:4}],u={toc:d},m="wrapper";function f(e){var t=e.components,n=(0,a.Z)(e,o);return(0,i.kt)(m,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Resizeable"),(0,i.kt)("p",null,"Whether this component can be resized. The meaning of this can vary depending\non the component: resizing a\n",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/renderers/WebGLRenderer"},"Renderer"),"\ncomponent could mean changing its resolution, whereas resizing a\n",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/objects/Mesh"},"Mesh")," would change its scale."),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"getsize"},"getSize"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"getSize"),": () => ",(0,i.kt)("inlineCode",{parentName:"p"},"Vector2")),(0,i.kt)("h4",{id:"type-declaration"},"Type declaration"),(0,i.kt)("p",null,"\u25b8 (): ",(0,i.kt)("inlineCode",{parentName:"p"},"Vector2")),(0,i.kt)("p",null,"Gets the current size of this component (e.g. the resolution of a\n",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/renderers/WebGLRenderer"},"Renderer"),"\ncomponent."),(0,i.kt)("h5",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"Vector2")),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L60"},"packages/core/src/core/Types/src/interfaces.ts:60")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"onresize"},"onResize"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"onResize"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"Vector2"),">"),(0,i.kt)("p",null,"Event that fires when the component has been resized."),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L53"},"packages/core/src/core/Types/src/interfaces.ts:53")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"resize"},"resize"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"resize"),": (",(0,i.kt)("inlineCode",{parentName:"p"},"size?"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"Vector2"),") => ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"type-declaration-1"},"Type declaration"),(0,i.kt)("p",null,"\u25b8 (",(0,i.kt)("inlineCode",{parentName:"p"},"size?"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Sets size of this component (e.g. the resolution of a\n",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/renderers/WebGLRenderer"},"Renderer"),"\ncomponent."),(0,i.kt)("h5",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"size?")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Vector2"))))),(0,i.kt)("h5",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L50"},"packages/core/src/core/Types/src/interfaces.ts:50")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/2a9a2072.8a61a038.js b/build/assets/js/2a9a2072.8a61a038.js new file mode 100644 index 00000000..0ab4e71f --- /dev/null +++ b/build/assets/js/2a9a2072.8a61a038.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1860],{3905:(e,n,t)=>{t.d(n,{Zo:()=>m,kt:()=>g});var o=t(7294);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function r(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=o.createContext({}),p=function(e){var n=o.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},m=function(e){var n=p(e.components);return o.createElement(l.Provider,{value:n},e.children)},c="mdxType",u={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},d=o.forwardRef((function(e,n){var t=e.components,a=e.mdxType,r=e.originalType,l=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(t),d=a,g=c["".concat(l,".").concat(d)]||c[d]||u[d]||r;return t?o.createElement(g,i(i({ref:n},m),{},{components:t})):o.createElement(g,i({ref:n},m))}));function g(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=t.length,i=new Array(r);i[0]=d;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s[c]="string"==typeof e?e:a,i[1]=s;for(var p=2;p{t.r(n),t.d(n,{assets:()=>m,contentTitle:()=>l,default:()=>g,frontMatter:()=>s,metadata:()=>p,toc:()=>c});var o=t(7462),a=t(3366),r=(t(7294),t(3905)),i=["components"],s={},l=void 0,p={unversionedId:"Tutorials/Components/Core/BoundingBoxer",id:"Tutorials/Components/Core/BoundingBoxer",title:"BoundingBoxer",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/BoundingBoxer.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/BoundingBoxer",permalink:"/Tutorials/Components/Core/BoundingBoxer",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Components",permalink:"/Tutorials/Components/"},next:{title:"Clipper",permalink:"/Tutorials/Components/Core/Clipper"}},m={},c=[{value:"\ud83e\uddf3 Gathering BIM Data",id:"-gathering-bim-data",level:3},{value:"\ud83e\udde9 Adding Fragments",id:"-adding-fragments",level:3},{value:"\ud83c\udfb2 Creation of Bounding Boxes",id:"-creation-of-bounding-boxes",level:3},{value:"\ud83d\udc53 Reading the Mesh Data",id:"-reading-the-mesh-data",level:4},{value:"\ud83c\udfae Managing Zoom Events",id:"-managing-zoom-events",level:3}],u={toc:c},d="wrapper";function g(e){var n=e.components,t=(0,a.Z)(e,i);return(0,r.kt)(d,(0,o.Z)({},u,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("admonition",{title:"Source",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/fragments/BoundingBoxer/example.ts"},"here"),".")),(0,r.kt)("h3",{id:"-gathering-bim-data"},"\ud83e\uddf3 Gathering BIM Data"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"Fragment help you to render your BIM files faster than ever.\ud83d\ude85 ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_fragment"},(0,r.kt)("strong",{parentName:"a"},"Fragment"))," is a group of ",(0,r.kt)("inlineCode",{parentName:"p"},"FragmentMeshes"),"\nwhich are clubbed together to visualize the BIM model.\nWhen working with ",(0,r.kt)("strong",{parentName:"p"},"large")," BIM models, you may need to quit the navigation to see the whole model.\ud83d\udccc\nTo accomplish this, we must extract Mesh data from the Fragment and use ",(0,r.kt)("inlineCode",{parentName:"p"},"control")," APIs to display the complete Fragment."),(0,r.kt)("admonition",{title:"First, let's set up a simple scene!",type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"\ud83d\udc40 If you haven't started there, check out ",(0,r.kt)("a",{parentName:"p",href:"SimpleScene.mdx"},"that tutorial first"),"!")),(0,r.kt)("p",null,"For this tutorial, we'll use the ",(0,r.kt)("inlineCode",{parentName:"p"},"FragmentBoundingBox")," component, which will provide us with the ",(0,r.kt)("strong",{parentName:"p"},"mesh")," by using the Fragment Model."),(0,r.kt)("h3",{id:"-adding-fragments"},"\ud83e\udde9 Adding Fragments"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"We'll start by adding a ",(0,r.kt)("strong",{parentName:"p"},"Fragment")," to our scene using ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("a",{parentName:"strong",href:"../api/classes/components.FragmentManager"},"FragmentManager")),".\nWe'll use a simple fragment for the purposes of this tutorial, but the code is capable of handling big files as well.\ud83c\udfd7\ufe0f"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'// Set up scene (see SimpleScene tutorial)\n\n// @ts-ignore\nimport * as dat from "three/examples/jsm/libs/lil-gui.module.min";\nimport Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "openbim-components";\n\nconst 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')),(0,r.kt)("h3",{id:"-creation-of-bounding-boxes"},"\ud83c\udfb2 Creation of Bounding Boxes"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"Now that our setup is done, lets see how you can use ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("a",{parentName:"strong",href:"../api/classes/components.FragmentBoundingBox"},(0,r.kt)("inlineCode",{parentName:"a"},"FragmentBoundingBox()"))),".\nYou will be amazed to see how easy it is to create ",(0,r.kt)("a",{parentName:"p",href:"https://threejs.org/docs/?q=bound#api/en/math/Box3"},"bounding box")," using ",(0,r.kt)("strong",{parentName:"p"},"components"),".\ud83d\udcaa\nWe will use ",(0,r.kt)("inlineCode",{parentName:"p"},"OBC.FragmentBoundingBox()")," and add the Fragment model to it using ",(0,r.kt)("inlineCode",{parentName:"p"},"add(model)"),"."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const fragments = new OBC.FragmentsManager(components);\n\nconst file = await fetch("../../../../../resources/small.frag");\nconst data = await file.arrayBuffer();\nconst buffer = new Uint8Array(data);\nconst model = fragments.load(buffer);\nworld.scene.three.add(model);\n')),(0,r.kt)("h4",{id:"-reading-the-mesh-data"},"\ud83d\udc53 Reading the Mesh Data"),(0,r.kt)("p",null,"After adding the model, we can now read the mesh from bounding box using ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"getMesh()"))),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const fragmentBbox = components.get(OBC.BoundingBoxer);\nfragmentBbox.add(model);\n")),(0,r.kt)("h3",{id:"-managing-zoom-events"},"\ud83c\udfae Managing Zoom Events"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"Now that all the setup is done, we need to trigger the zoom event on a button click.\ud83d\uddb1\nWe will use ",(0,r.kt)("inlineCode",{parentName:"p"},"fitToSphere")," from ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("a",{parentName:"strong",href:"../api/classes/components.SimpleCamera#controls"},"camera.controls")),",\nwhich takes the ",(0,r.kt)("inlineCode",{parentName:"p"},"mesh")," as a parameter and zooms to it.\nAlso, we will enable a nice transition effect while zooming to the mesh by setting the last parameter as ",(0,r.kt)("strong",{parentName:"p"},"true")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const bbox = fragmentBbox.getMesh();\nfragmentBbox.reset();\n")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"Congratulations")," \ud83c\udf89 on completing this short yet useful tutorial!\nYou can now easily zoom to Fragment ",(0,r.kt)("strong",{parentName:"p"},"Mesh")," using ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("a",{parentName:"strong",href:"../api/classes/components.FragmentBoundingBox"},"FragmentBoundingBox")),"\ud83d\ude0e\nLet's keep it up and check out another tutorial! \ud83c\udf93"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'BUI.Manager.init();\n\nconst panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n \n \n \n\n \n \n `;\n});\n\ndocument.body.append(panel);\n')),(0,r.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/BoundingBoxer"}))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/2aba4d5d.1266d069.js b/build/assets/js/2aba4d5d.1266d069.js new file mode 100644 index 00000000..636bde32 --- /dev/null +++ b/build/assets/js/2aba4d5d.1266d069.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[282],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>g});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=r.createContext({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),p=c(n),d=o,g=p["".concat(s,".").concat(d)]||p[d]||m[d]||a;return n?r.createElement(g,l(l({ref:t},u),{},{components:n})):r.createElement(g,l({ref:t},u))}));function g(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,l=new Array(a);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[p]="string"==typeof e?e:o,l[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>s,default:()=>g,frontMatter:()=>i,metadata:()=>c,toc:()=>p});var r=n(7462),o=n(3366),a=(n(7294),n(3905)),l=["components"],i={},s=void 0,c={unversionedId:"Tutorials/Components/Core/Cullers",id:"Tutorials/Components/Core/Cullers",title:"Cullers",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/Cullers.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/Cullers",permalink:"/Tutorials/Components/Core/Cullers",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Clipper",permalink:"/Tutorials/Components/Core/Clipper"},next:{title:"FragmentsManager",permalink:"/Tutorials/Components/Core/FragmentsManager"}},u={},p=[{value:"\ud83d\ude85 Managing Performance",id:"-managing-performance",level:3},{value:"\ud83e\uddf0 Creating Screen Culler",id:"-creating-screen-culler",level:3},{value:"\ud83e\uddf1 Adding a lot of 3D Objects",id:"-adding-a-lot-of-3d-objects",level:3},{value:"\ud83e\uddea Generate Multiple Cubes",id:"-generate-multiple-cubes",level:4},{value:"\ud83d\udce2 Rendering Cubes",id:"-rendering-cubes",level:4}],m={toc:p},d="wrapper";function g(e){var t=e.components,n=(0,o.Z)(e,l);return(0,a.kt)(d,(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/Cullers/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"-managing-performance"},"\ud83d\ude85 Managing Performance"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"There are occasions when your scene has too many components.\nMultiple components being rendered simultaneously ",(0,a.kt)("strong",{parentName:"p"},"lengthens computation time"),"\u231b\ufe0f and ",(0,a.kt)("strong",{parentName:"p"},"degrades performance"),".\ud83c\udf21\ufe0f"),(0,a.kt)("admonition",{title:"First, let's set up a simple scene!",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"\ud83d\udc40 If you haven't started there, check out ",(0,a.kt)("a",{parentName:"p",href:"SimpleScene.mdx"},"that tutorial first"),"!")),(0,a.kt)("p",null,"In this tutorial, we will use ",(0,a.kt)("strong",{parentName:"p"},"ScreenCuller")," to improve performance by reducing unnecessary computations.\ud83d\ude80\nThis tutorial will show you how to manage a complex scenario with a lot of elements in an effective way.\ud83e\uddbe"),(0,a.kt)("h3",{id:"-creating-screen-culler"},"\ud83e\uddf0 Creating Screen Culler"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Although adding Screen Culler to your project can appear difficult, it is actually rather easy.\nNow, we will add ",(0,a.kt)("strong",{parentName:"p"},"Screen Culler Component"),".\nThis will create a Screen Culler which is now ready to be used."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import * as THREE from "three";\nimport Stats from "stats.js";\nimport * as OBC from "openbim-components";\n\nconst container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\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(13, 13, 13, 0, 0, 0);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n')),(0,a.kt)("p",null,"You can also use the ",(0,a.kt)("inlineCode",{parentName:"p"},"threshold")," property to control the minimum size of an element in screen in order\nfor it to be revealed by the culler. Higher numbers result in less objects visible, but more performance:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const cullers = new OBC.Cullers(components);\nconst culler = cullers.create(world);\n")),(0,a.kt)("p",null,"Additionally, we will activate the ",(0,a.kt)("inlineCode",{parentName:"p"},"culler.renderDebugFrame"),"\nso that we can see the 2D screen of the elements that are not occluded.\ud83d\udcbb\nAlso, we will get the ",(0,a.kt)("strong",{parentName:"p"},"domElement")," and attach it to the body so that we can see this frame in real-time.\ud83d\udcca"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"culler.threshold = 200;\n")),(0,a.kt)("admonition",{title:"Randomising the Cube Placement",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"We'll write a quick ",(0,a.kt)("strong",{parentName:"p"},"utility")," function that returns a random number between 0 and the specified upper limit.\nYou can use this for a variety of purposes, but for this tutorial\nit will be used to generate random positions for cube placement.\ud83d\udccc")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'culler.renderDebugFrame = true;\nconst debugFrame = culler.renderer.domElement;\ndocument.body.appendChild(debugFrame);\ndebugFrame.style.position = "fixed";\ndebugFrame.style.left = "0";\ndebugFrame.style.bottom = "0";\ndebugFrame.style.visibility = "collapse";\n')),(0,a.kt)("h3",{id:"-adding-a-lot-of-3d-objects"},"\ud83e\uddf1 Adding a lot of 3D Objects"),(0,a.kt)("p",null,"We'll add the Simple 3D Cube and do it ",(0,a.kt)("strong",{parentName:"p"},"300 times"),"!\ud83e\udd2f\nComponents are built using ",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/"},"Three.js"),", making it simple to use any three.js code.\nFor our cube, we'll generate box geometry and use basic material."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"function getRandomNumber(limit: number) {\n return Math.random() * limit;\n}\n")),(0,a.kt)("h4",{id:"-generate-multiple-cubes"},"\ud83e\uddea Generate Multiple Cubes"),(0,a.kt)("p",null,"Now, using the ",(0,a.kt)("inlineCode",{parentName:"p"},"getRandomNumber()")," method we previously created, we will add the 300 ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("inlineCode",{parentName:"strong"},"cube"))," meshes to our scene\nand randomly position them. We'll add the cube to the scene and adjust its position between 0 and 10.\nAdditionally, we will add meshes to the ",(0,a.kt)("inlineCode",{parentName:"p"},"culler")," object, which will help ",(0,a.kt)("strong",{parentName:"p"},"SimpleCuller")," to recognize and\ndraw the elements that are visible to the camera. To do this, ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("inlineCode",{parentName:"strong"},"culler.add(cube)"))," will be used.\nAlso, now that we can create multiple cubes, we will write a function to remove the cubes from scene on demand.\n",(0,a.kt)("inlineCode",{parentName:"p"},"resetCubes()")," iteratively removes the ",(0,a.kt)("strong",{parentName:"p"},"cubes")," using ",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/docs/index.html?q=obje#api/en/core/Object3D.removeFromParent"},(0,a.kt)("strong",{parentName:"a"},(0,a.kt)("inlineCode",{parentName:"strong"},"cube.removeFromParent"))),"."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const cubes: THREE.Mesh[] = [];\nconst geometry = new THREE.BoxGeometry(2, 2, 2);\nconst material = new THREE.MeshLambertMaterial({ color: "#6528D7" });\n')),(0,a.kt)("h4",{id:"-rendering-cubes"},"\ud83d\udce2 Rendering Cubes"),(0,a.kt)("p",null,"With everything ready, we will call ",(0,a.kt)("inlineCode",{parentName:"p"},"regenerateCubes()")," which will generate cubes and add them to scene."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"function resetCubes() {\n for (const cube of cubes) {\n cube.removeFromParent();\n }\n cubes.length = 0;\n}\n\nfunction regenerateCubes() {\n resetCubes();\n for (let i = 0; i < 300; i++) {\n const cube = new THREE.Mesh(geometry, material);\n cube.position.x = getRandomNumber(10);\n cube.position.y = getRandomNumber(10);\n cube.position.z = getRandomNumber(10);\n cube.updateMatrix();\n world.scene.three.add(cube);\n culler.add(cube);\n cubes.push(cube);\n }\n}\n")),(0,a.kt)("p",null,"Here comes the most crucial part! The core aim of ",(0,a.kt)("strong",{parentName:"p"},"ScreenCuller")," is to output just those components that are\nvisible to the camera.\n",(0,a.kt)("inlineCode",{parentName:"p"},"culler.needsUpdate = true")," instructs the ScreenCuller to render the updated view.\n",(0,a.kt)("strong",{parentName:"p"}," Remember to update culler every time the camera is updated \u2755 "),"\nIn this tutorial we are updating it each time the camera stops moving."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"regenerateCubes();\n")),(0,a.kt)("p",null,"Great job! \ud83c\udf89 Now you know how to optimise your 3D scene using a\n",(0,a.kt)("strong",{parentName:"p"},"Screen Culler")," component! \ud83d\udcaa\nYour BIM app will now have unmatched performance and can render huge scenes easily. \ud83d\ude80\nLet's keep it up and check out another tutorials!"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'culler.needsUpdate = true;\nworld.camera.controls.addEventListener("controlend", () => {\n culler.needsUpdate = true;\n});\n')),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/Cullers"}))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/308c405f.9a579f8d.js b/build/assets/js/308c405f.9a579f8d.js new file mode 100644 index 00000000..576ed236 --- /dev/null +++ b/build/assets/js/308c405f.9a579f8d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8491],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>h});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=o.createContext({}),p=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=p(e.components);return o.createElement(l.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},u=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,l=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),c=p(n),u=a,h=c["".concat(l,".").concat(u)]||c[u]||m[u]||r;return n?o.createElement(h,i(i({ref:t},d),{},{components:n})):o.createElement(h,i({ref:t},d))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,i=new Array(r);i[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[c]="string"==typeof e?e:a,i[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>p,toc:()=>c});var o=n(7462),a=n(3366),r=(n(7294),n(3905)),i=["components"],s={},l=void 0,p={unversionedId:"Tutorials/Components/Core/IfcRelationsIndexer",id:"Tutorials/Components/Core/IfcRelationsIndexer",title:"IfcRelationsIndexer",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/IfcRelationsIndexer.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/IfcRelationsIndexer",permalink:"/Tutorials/Components/Core/IfcRelationsIndexer",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcPropertiesTiler",permalink:"/Tutorials/Components/Core/IfcPropertiesTiler"},next:{title:"MiniMap",permalink:"/Tutorials/Components/Core/MiniMap"}},d={},c=[{value:"Getting entity relations the easy way \ud83d\udcaa",id:"getting-entity-relations-the-easy-way-",level:2},{value:"Loading a model \ud83c\udfe6",id:"loading-a-model-",level:3},{value:"Getting element psets \ud83d\udcc4",id:"getting-element-psets-",level:3},{value:"Exporting the indexation",id:"exporting-the-indexation",level:3},{value:"Loading back the relations index",id:"loading-back-the-relations-index",level:3}],m={toc:c},u="wrapper";function h(e){var t=e.components,n=(0,a.Z)(e,i);return(0,r.kt)(u,(0,o.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("admonition",{title:"Source",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/ifc/IfcRelationsIndexer/example.ts"},"here"),".")),(0,r.kt)("h2",{id:"getting-entity-relations-the-easy-way-"},"Getting entity relations the easy way \ud83d\udcaa"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"If you're aware of the IFC schema, you should know that all the possible information an entity have is not directly inside its attributes. For example, the property sets, classifications, materials, etc, of a wall (or any other element) are not directly in the wall attributes \ud83e\udd2f but in other entities which are related to the wall using relations.\nNow, that is perfect for an schema like the IFC which aims to store all the building data within a single text file in the easiest way possible. However, is not that easy to work just because you need to find the relations you want to get to the element data you're looking for \ud83d\ude2a. Luckily for you, the ",(0,r.kt)("inlineCode",{parentName:"p"},"IfcRelationsIndexer")," already gives you an easy way to get the entities which are related with your elements thanks to the inverse attributes! \ud83d\udd25\ud83d\udd25"),(0,r.kt)("h3",{id:"loading-a-model-"},"Loading a model \ud83c\udfe6"),(0,r.kt)("p",null,"First things first, lets load an IFC model to process its relations."),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"If you're unsure on the details to load a model, just tool at the ",(0,r.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/IfcLoader"},"IfcLoader")," tutorial!")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'// @ts-ignore\nimport * as dat from "three/examples/jsm/libs/lil-gui.module.min";\n// import Stats from "stats.js";\n// import * as BUI from "@thatopen/ui";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "openbim-components";\n\nconst 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')),(0,r.kt)("p",null,"Once the model is loaded in memory, you just need to get an instance of the IfcRelationsIndexer and process the model... it's as easy as that! \ud83d\ude0e"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\nconst file = await fetch("/resources/small.ifc");\nconst buffer = await file.arrayBuffer();\nconst typedArray = new Uint8Array(buffer);\nconst model = await ifcLoader.load(typedArray);\nworld.scene.three.add(model);\n')),(0,r.kt)("p",null,"The result of that is basically a map where the keys are the expressIDs and the values are other expressIDs related to the first one and grouped by the type of relation. You don't need to worry too much about the details of that, as the usage is pretty straighforward \ud83d\udd1d. The only thing that matters is you've now an easy way to access the entities related to your element \ud83d\ude42"),(0,r.kt)("h3",{id:"getting-element-psets-"},"Getting element psets \ud83d\udcc4"),(0,r.kt)("p",null,"One of the most important relations between different entities is the ",(0,r.kt)("inlineCode",{parentName:"p"},"IfcRelDefinesByProperties"),". That relation links together an arbitrary entity with a set of ",(0,r.kt)("inlineCode",{parentName:"p"},"IfcPropertySet")," entities that applies properties. Getting them with the ",(0,r.kt)("inlineCode",{parentName:"p"},"IfcRelationsIndexer")," once the model is indexed is pretty easy:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const indexer = components.get(OBC.IfcRelationsIndexer);\nawait indexer.process(model);\n")),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"IsDefinedBy is the inverse attribute name in the IFC Schema that holds the relations with property sets \ud83d\ude09")),(0,r.kt)("p",null,"Awesome! really easy right?"),(0,r.kt)("h3",{id:"exporting-the-indexation"},"Exporting the indexation"),(0,r.kt)("p",null,"In bigger models, the process to calculate the relations index may take some time. The important thing is that there is no reason to calculate over and over the relations index every time you load a model. If the model hasn't change, their properties shouldn't neither! So, let's download the relations index to load it later."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const psets = indexer.getEntityRelations(model, 6518, "IsDefinedBy");\nif (psets) {\n for (const expressID of psets) {\n // You can get the pset attributes like this\n const pset = await model.getProperties(expressID);\n console.log(pset);\n // You can get the pset props like this or iterate over pset.HasProperties yourself\n await OBC.IfcPropertiesUtils.getPsetProps(\n model,\n expressID,\n async (propExpressID) => {\n const prop = await model.getProperties(propExpressID);\n console.log(prop);\n },\n );\n }\n}\n')),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"As ",(0,r.kt)("inlineCode",{parentName:"p"},"@thatopen/components")," can be used in either NodeJS and Browser environments, the logic to generate a JSON file may vary!")),(0,r.kt)("p",null,"Now, in case you've loaded several models and want to get all the computed relations, there is also a handy method to do it."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const downloadJSON = (json: string, name: string) => {\n const file = new File([json], name);\n const a = document.createElement("a");\n a.href = URL.createObjectURL(file);\n a.download = file.name;\n a.click();\n URL.revokeObjectURL(a.href);\n};\n\nconst json = indexer.serializeModelRelations(model);\nconsole.log(json);\n')),(0,r.kt)("h3",{id:"loading-back-the-relations-index"},"Loading back the relations index"),(0,r.kt)("p",null,"What do we gain with having a pre-processed relations index if we can't use it again, right? Well, let's use the downloaded relations index \ud83d\ude0e"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const allRelationsJSON = indexer.serializeAllRelations();\n")),(0,r.kt)("p",null,"Great! Now try to get again the property sets and you will see everything working nice and neat. In fact, lets try to get the building storey of one element in the IFC \ud83d\udc47"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'// Lets first delete the existing model relations\ndelete indexer.relationMaps[model.uuid];\nconst relationsIndexFile = await fetch("/resources/small-relations.json");\nconst relationsIndex = indexer.getRelationsMapFromJSON(\n await relationsIndexFile.text(),\n);\nindexer.setRelationMap(model, relationsIndex);\n')),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"Despite there are some relations that corresponds to only one element (e.g., an element can only have one associated building storey) the ",(0,r.kt)("inlineCode",{parentName:"p"},"getEntityRelations")," will always return an array. That's the reason we take the first buildingStorey relation despite it will always be the only one.")),(0,r.kt)("p",null,"Congratulations! Now you know how to get an easy way to get the relations of your model. Keep going with more tutorials! \ud83d\udcaa"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const buildingStorey = indexer.getEntityRelations(\n model,\n 6518,\n "ContainedInStructure",\n);\n\nif (buildingStorey && buildingStorey[0]) {\n const storey = await model.getProperties(buildingStorey[0]);\n console.log(storey);\n}\n')),(0,r.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/IfcRelationsIndexer"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/35bc646f.c980dd29.js b/build/assets/js/35bc646f.c980dd29.js new file mode 100644 index 00000000..384fab97 --- /dev/null +++ b/build/assets/js/35bc646f.c980dd29.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6635],{3905:(e,n,t)=>{t.d(n,{Zo:()=>c,kt:()=>g});var o=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=o.createContext({}),s=function(e){var n=o.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},c=function(e){var n=s(e.components);return o.createElement(p.Provider,{value:n},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},d=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=s(t),d=r,g=m["".concat(p,".").concat(d)]||m[d]||u[d]||a;return t?o.createElement(g,i(i({ref:n},c),{},{components:t})):o.createElement(g,i({ref:n},c))}));function g(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=d;var l={};for(var p in n)hasOwnProperty.call(n,p)&&(l[p]=n[p]);l.originalType=e,l[m]="string"==typeof e?e:r,i[1]=l;for(var s=2;s{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>p,default:()=>g,frontMatter:()=>l,metadata:()=>s,toc:()=>m});var o=t(7462),r=t(3366),a=(t(7294),t(3905)),i=["components"],l={},p=void 0,s={unversionedId:"Tutorials/Components/Core/Clipper",id:"Tutorials/Components/Core/Clipper",title:"Clipper",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/Clipper.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/Clipper",permalink:"/Tutorials/Components/Core/Clipper",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"BoundingBoxer",permalink:"/Tutorials/Components/Core/BoundingBoxer"},next:{title:"Cullers",permalink:"/Tutorials/Components/Core/Cullers"}},c={},m=[{value:"\u2702\ufe0f Clipping Tool",id:"\ufe0f-clipping-tool",level:3},{value:"\ud83c\udfb2 Creating a Cube Mesh",id:"-creating-a-cube-mesh",level:3},{value:"\u2699\ufe0f Adding Simple Clipper",id:"\ufe0f-adding-simple-clipper",level:3},{value:"\ud83e\udd1d Performing Clipping Events",id:"-performing-clipping-events",level:3},{value:"\ud83e\uddf9 Deleting the Clipping Planes",id:"-deleting-the-clipping-planes",level:3}],u={toc:m},d="wrapper";function g(e){var n=e.components,t=(0,r.Z)(e,i);return(0,a.kt)(d,(0,o.Z)({},u,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/Clipper/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"\ufe0f-clipping-tool"},"\u2702\ufe0f Clipping Tool"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"The Clipping Tool is a powerful feature in 3D modelling that helps you dissect 3D objects.\nClipping Tool is useful for inspecting and analyzing objects in detail.\ud83d\udcaa\nIn this tutorial, we will use the Clipping Tool to dissect a Cube using planes and transformation controls.\nThis tutorial will help you add Clipping functionality to your project easily.\ud83d\ude80"),(0,a.kt)("admonition",{title:"First, let's set up a simple scene!",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"\ud83d\udc40 If you haven't started there, check out ",(0,a.kt)("a",{parentName:"p",href:"SimpleScene.mdx"},"that tutorial first"),"!")),(0,a.kt)("h3",{id:"-creating-a-cube-mesh"},"\ud83c\udfb2 Creating a Cube Mesh"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Let's start by adding a Cube, which we can dissect.\nWe will create a ",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry"},"Cube"),"\nwith ",(0,a.kt)("inlineCode",{parentName:"p"},"3x3x3")," dimensions and use red color for the material."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import * as THREE from "three";\nimport Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "openbim-components";\n\nconst container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\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(10, 10, 10, 0, 0, 0);\n\nworld.scene.setup();\n')),(0,a.kt)("p",null,"Now, we will add the Cube to the ",(0,a.kt)("inlineCode",{parentName:"p"},"Scene"),". We must also add the ",(0,a.kt)("strong",{parentName:"p"},"cube")," to ",(0,a.kt)("inlineCode",{parentName:"p"},"components.meshes"),",\nwhich is simply an array of all the meshes in the Scene \ud83d\uddc4\ufe0f."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'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);\n')),(0,a.kt)("h3",{id:"\ufe0f-adding-simple-clipper"},"\u2699\ufe0f Adding Simple Clipper"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Here comes the interesting part, we will add a Simple Clipper to our scene \ud83e\udd41\nA ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"../api/classes/components.SimpleClipper"},"Simple Clipper"))," requires two things: ",(0,a.kt)("inlineCode",{parentName:"p"},"components")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"Simple Plane")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"world.scene.three.add(cube);\nworld.meshes.add(cube);\n\nconst casters = components.get(OBC.Raycasters);\ncasters.get(world);\n")),(0,a.kt)("admonition",{title:"PLANE WITH TRANSFORMATION CONTROLS AND MORE",type:"info"},(0,a.kt)("p",{parentName:"admonition"},(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"../api/classes/components.SimplePlane"},"Simple Plane"))," is useful in generating planes along with\ncustomizations.")),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"SimpleClipper")," includes everything needed to provide clipping capabilities,\nincluding the ability to build numerous clipping planes.\nSimpleClipper also controls the SimplePlane internally,\nallowing you to execute clipping on any 3D object by just dragging the planes."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const clipper = new OBC.Clipper(components);\n")),(0,a.kt)("h3",{id:"-performing-clipping-events"},"\ud83e\udd1d Performing Clipping Events"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now, we need a way to create a Clipping Plane on demand, you can do it with a ",(0,a.kt)("inlineCode",{parentName:"p"},"Single Click")," or\n",(0,a.kt)("inlineCode",{parentName:"p"},"Double Click")," of a mouse.\nFor this tutorial, we will use ",(0,a.kt)("strong",{parentName:"p"},"Double Click"),", to create a Clipper that will generate a\nplane on the 3D object's face."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"clipper.enabled = true;\n")),(0,a.kt)("admonition",{title:"Raycaster below the hood \ud83c\udfa9",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"We use the ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"SimpleRaycaster.mdx"},"Simple Raycaster"))," to determine if the intersection has occurred.\nThe clipper places a plane after detecting the face on which the mouse was clicked.\nHere, the SimpleClipper handles everything for you \ud83d\ude0e")),(0,a.kt)("h3",{id:"-deleting-the-clipping-planes"},"\ud83e\uddf9 Deleting the Clipping Planes"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now that we know how to make multiple clippers, we must also know how to delete them when necessary.\nClipping planes can be removed using ",(0,a.kt)("inlineCode",{parentName:"p"},"clipper.delete()")," or ",(0,a.kt)("inlineCode",{parentName:"p"},"clipper.delete(plane)"),", which deletes a single plane.\n",(0,a.kt)("strong",{parentName:"p"},"clipper.delete()")," deletes the plane on which your mouse pointer is now located."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"container.ondblclick = () => clipper.create(world);\n")),(0,a.kt)("admonition",{title:"Delete all the Clipping Planes",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"\u274e If you want to safely delete all the clipping planes that were created you can simply call\n",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("inlineCode",{parentName:"strong"},"clipper.deleteAll()")))),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"Congratulations")," \ud83c\udf89 on completing this tutorial! Now you can inspect BIM Models or any 3D Object easily using\n",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"../api/classes/components.SimpleClipper"},"Clipper Component"))," \ud83e\uddd0\nLet's keep it up and check out another tutorial! \ud83c\udf93"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'window.onkeydown = (event) => {\n if (event.code === "Delete" || event.code === "Backspace") {\n clipper.delete(world);\n }\n};\n')),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/Clipper"}))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/3834acf5.6d19b762.js b/build/assets/js/3834acf5.6d19b762.js new file mode 100644 index 00000000..470fa05c --- /dev/null +++ b/build/assets/js/3834acf5.6d19b762.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[984],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>u});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),l=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=l(e.components);return a.createElement(s.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},f=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,d=p(e,["components","mdxType","originalType","parentName"]),c=l(n),f=r,u=c["".concat(s,".").concat(f)]||c[f]||m[f]||o;return n?a.createElement(u,i(i({ref:t},d),{},{components:n})):a.createElement(u,i({ref:t},d))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p[c]="string"==typeof e?e:r,i[1]=p;for(var l=2;l{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>u,frontMatter:()=>p,metadata:()=>l,toc:()=>c});var a=n(7462),r=n(3366),o=(n(7294),n(3905)),i=["components"],p={id:"thatopen_components.FirstPersonMode",title:"Class: FirstPersonMode",sidebar_label:"FirstPersonMode",custom_edit_url:null},s=void 0,l={unversionedId:"api/classes/thatopen_components.FirstPersonMode",id:"api/classes/thatopen_components.FirstPersonMode",title:"Class: FirstPersonMode",description:"@thatopen/components.FirstPersonMode",source:"@site/docs/api/classes/thatopen_components.FirstPersonMode.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.FirstPersonMode",permalink:"/api/classes/thatopen_components.FirstPersonMode",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.FirstPersonMode",title:"Class: FirstPersonMode",sidebar_label:"FirstPersonMode",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Event",permalink:"/api/classes/thatopen_components.Event"},next:{title:"FragmentsManager",permalink:"/api/classes/thatopen_components.FragmentsManager"}},d={},c=[{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"id",id:"id",level:3},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"Methods",id:"methods",level:2},{value:"set",id:"set",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Implementation of",id:"implementation-of-2",level:4},{value:"Defined in",id:"defined-in-2",level:4}],m={toc:c},f="wrapper";function u(e){var t=e.components,n=(0,r.Z)(e,i);return(0,o.kt)(f,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".FirstPersonMode"),(0,o.kt)("p",null,"A ",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode")," that allows first person navigation,\nsimulating FPS video games."),(0,o.kt)("h2",{id:"implements"},"Implements"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.NavigationMode"},(0,o.kt)("inlineCode",{parentName:"a"},"NavigationMode")))),(0,o.kt)("h2",{id:"properties"},"Properties"),(0,o.kt)("h3",{id:"enabled"},"enabled"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("strong",{parentName:"p"},"enabled"),": ",(0,o.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,o.kt)("inlineCode",{parentName:"p"},"false")),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#enabled"},"NavigationMode.enabled")),(0,o.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode"),".",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#enabled"},"enabled")),(0,o.kt)("h4",{id:"defined-in"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts#L12"},"packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts:12")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"id"},"id"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,o.kt)("strong",{parentName:"p"},"id"),": ",(0,o.kt)("inlineCode",{parentName:"p"},'"FirstPerson"')),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#id"},"NavigationMode.id")),(0,o.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode"),".",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#id"},"id")),(0,o.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts#L15"},"packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts:15")),(0,o.kt)("h2",{id:"methods"},"Methods"),(0,o.kt)("h3",{id:"set"},"set"),(0,o.kt)("p",null,"\u25b8 ",(0,o.kt)("strong",{parentName:"p"},"set"),"(",(0,o.kt)("inlineCode",{parentName:"p"},"active"),"): ",(0,o.kt)("inlineCode",{parentName:"p"},"void")),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#set"},"NavigationMode.set")),(0,o.kt)("h4",{id:"parameters"},"Parameters"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"active")),(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"boolean"))))),(0,o.kt)("h4",{id:"returns"},"Returns"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"void")),(0,o.kt)("h4",{id:"implementation-of-2"},"Implementation of"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode"),".",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#set"},"set")),(0,o.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts#L20"},"packages/core/src/core/OrthoPerspectiveCamera/src/first-person-mode.ts:20")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/38ed86ac.1aa22dab.js b/build/assets/js/38ed86ac.1aa22dab.js new file mode 100644 index 00000000..0b9faaa8 --- /dev/null +++ b/build/assets/js/38ed86ac.1aa22dab.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9926],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),s=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=s(e.components);return a.createElement(l.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,p=e.originalType,l=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),d=s(n),m=r,f=d["".concat(l,".").concat(m)]||d[m]||u[m]||p;return n?a.createElement(f,o(o({ref:t},c),{},{components:n})):a.createElement(f,o({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var p=n.length,o=new Array(p);o[0]=m;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i[d]="string"==typeof e?e:r,o[1]=i;for(var s=2;s{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>f,frontMatter:()=>i,metadata:()=>s,toc:()=>d});var a=n(7462),r=n(3366),p=(n(7294),n(3905)),o=["components"],i={id:"thatopen_components.Updateable",title:"Interface: Updateable",sidebar_label:"Updateable",custom_edit_url:null},l=void 0,s={unversionedId:"api/interfaces/thatopen_components.Updateable",id:"api/interfaces/thatopen_components.Updateable",title:"Interface: Updateable",description:"@thatopen/components.Updateable",source:"@site/docs/api/interfaces/thatopen_components.Updateable.md",sourceDirName:"api/interfaces",slug:"/api/interfaces/thatopen_components.Updateable",permalink:"/api/interfaces/thatopen_components.Updateable",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Updateable",title:"Interface: Updateable",sidebar_label:"Updateable",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Resizeable",permalink:"/api/interfaces/thatopen_components.Resizeable"},next:{title:"Components",permalink:"/Tutorials/Components/"}},c={},d=[{value:"Implemented by",id:"implemented-by",level:2},{value:"Properties",id:"properties",level:2},{value:"onAfterUpdate",id:"onafterupdate",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"onBeforeUpdate",id:"onbeforeupdate",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"Methods",id:"methods",level:2},{value:"update",id:"update",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Defined in",id:"defined-in-2",level:4}],u={toc:d},m="wrapper";function f(e){var t=e.components,n=(0,r.Z)(e,o);return(0,p.kt)(m,(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,p.kt)("p",null,(0,p.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Updateable"),(0,p.kt)("p",null,"Whether this component should be updated each frame."),(0,p.kt)("h2",{id:"implemented-by"},"Implemented by"),(0,p.kt)("ul",null,(0,p.kt)("li",{parentName:"ul"},(0,p.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.SimpleCamera"},(0,p.kt)("inlineCode",{parentName:"a"},"SimpleCamera")))),(0,p.kt)("h2",{id:"properties"},"Properties"),(0,p.kt)("h3",{id:"onafterupdate"},"onAfterUpdate"),(0,p.kt)("p",null,"\u2022 ",(0,p.kt)("strong",{parentName:"p"},"onAfterUpdate"),": ",(0,p.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,p.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,p.kt)("inlineCode",{parentName:"p"},"any"),">"),(0,p.kt)("p",null,"Actions that should be executed after updating the component."),(0,p.kt)("h4",{id:"defined-in"},"Defined in"),(0,p.kt)("p",null,(0,p.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L66"},"packages/core/src/core/Types/src/interfaces.ts:66")),(0,p.kt)("hr",null),(0,p.kt)("h3",{id:"onbeforeupdate"},"onBeforeUpdate"),(0,p.kt)("p",null,"\u2022 ",(0,p.kt)("strong",{parentName:"p"},"onBeforeUpdate"),": ",(0,p.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,p.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,p.kt)("inlineCode",{parentName:"p"},"any"),">"),(0,p.kt)("p",null,"Actions that should be executed before updating the component."),(0,p.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,p.kt)("p",null,(0,p.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L69"},"packages/core/src/core/Types/src/interfaces.ts:69")),(0,p.kt)("h2",{id:"methods"},"Methods"),(0,p.kt)("h3",{id:"update"},"update"),(0,p.kt)("p",null,"\u25b8 ",(0,p.kt)("strong",{parentName:"p"},"update"),"(",(0,p.kt)("inlineCode",{parentName:"p"},"delta?"),"): ",(0,p.kt)("inlineCode",{parentName:"p"},"void")),(0,p.kt)("p",null,"Function used to update the state of this component each frame. For\ninstance, a renderer component will make a render each frame."),(0,p.kt)("h4",{id:"parameters"},"Parameters"),(0,p.kt)("table",null,(0,p.kt)("thead",{parentName:"table"},(0,p.kt)("tr",{parentName:"thead"},(0,p.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,p.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,p.kt)("tbody",{parentName:"table"},(0,p.kt)("tr",{parentName:"tbody"},(0,p.kt)("td",{parentName:"tr",align:"left"},(0,p.kt)("inlineCode",{parentName:"td"},"delta?")),(0,p.kt)("td",{parentName:"tr",align:"left"},(0,p.kt)("inlineCode",{parentName:"td"},"number"))))),(0,p.kt)("h4",{id:"returns"},"Returns"),(0,p.kt)("p",null,(0,p.kt)("inlineCode",{parentName:"p"},"void")),(0,p.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,p.kt)("p",null,(0,p.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L75"},"packages/core/src/core/Types/src/interfaces.ts:75")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/3eac639e.68f7f14e.js b/build/assets/js/3eac639e.68f7f14e.js new file mode 100644 index 00000000..75676d39 --- /dev/null +++ b/build/assets/js/3eac639e.68f7f14e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8100],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>f});var a=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=a.createContext({}),c=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},p=function(e){var t=c(e.components);return a.createElement(l.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,s=e.originalType,l=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),u=c(n),d=i,f=u["".concat(l,".").concat(d)]||u[d]||m[d]||s;return n?a.createElement(f,r(r({ref:t},p),{},{components:n})):a.createElement(f,r({ref:t},p))}));function f(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var s=n.length,r=new Array(s);r[0]=d;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o[u]="string"==typeof e?e:i,r[1]=o;for(var c=2;c{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>l,default:()=>f,frontMatter:()=>o,metadata:()=>c,toc:()=>u});var a=n(7462),i=n(3366),s=(n(7294),n(3905)),r=["components"],o={},l=void 0,c={unversionedId:"Tutorials/UserInterface/OBC/ClassificationsTree",id:"Tutorials/UserInterface/OBC/ClassificationsTree",title:"ClassificationsTree",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/UserInterface/OBC/ClassificationsTree.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/ClassificationsTree",permalink:"/Tutorials/UserInterface/OBC/ClassificationsTree",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Component",permalink:"/Tutorials/UserInterface/Core/Component"},next:{title:"ElementProperties",permalink:"/Tutorials/UserInterface/OBC/ElementProperties"}},p={},u=[{value:"Displaying elements grouping \ud83d\udce6",id:"displaying-elements-grouping-",level:2},{value:"Creating the classifications tree",id:"creating-the-classifications-tree",level:3}],m={toc:u},d="wrapper";function f(e){var t=e.components,n=(0,i.Z)(e,r);return(0,s.kt)(d,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,s.kt)("admonition",{title:"Source",type:"info"},(0,s.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,s.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/ClassificationsTree/example.ts"},"here"),".")),(0,s.kt)("h2",{id:"displaying-elements-grouping-"},"Displaying elements grouping \ud83d\udce6"),(0,s.kt)("hr",null),(0,s.kt)("p",null,"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.kt)("inlineCode",{parentName:"p"},"ClassificationsTree")," functional component!"),(0,s.kt)("h3",{id:"creating-the-classifications-tree"},"Creating the classifications tree"),(0,s.kt)("p",null,"First things first, let's create an instance of the functional component, like this:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},"const [classificationsTree, updateClassificationsTree] =\n CUI.tables.classificationTree({\n components,\n classifications: {},\n });\n")),(0,s.kt)("p",null,"Now that we have the classifications tree created, let's tell the ",(0,s.kt)("inlineCode",{parentName:"p"},"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!"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},'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 const classifications = {\n Entities: ["entities", "predefinedTypes"],\n "Predefined Types": ["predefinedTypes"],\n };\n\n updateClassificationsTree({ classifications });\n});\n')),(0,s.kt)("p",null,"The ",(0,s.kt)("inlineCode",{parentName:"p"},"classifications"),' value is just an object where they keys are the names in the tree, and the values are the orders in which you want to group the elements. So, for example, "Entities" groups the elements based on their entities and then based on their predefined types. Needless to say, the classifications need to be computed before they can be used on the tree. You can check the system names from ',(0,s.kt)("inlineCode",{parentName:"p"},"classifier.list"),".\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"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,s.kt)("p",null,"Finally, let's append the BIM Panel to the page to see the classifications tree working \ud83d\ude09"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,s.kt)("p",null,"Congratulations! You've now a ready to go user interface that let's you show your model classifications. \ud83e\udd73"),(0,s.kt)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/ClassificationsTree"}))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/416b2475.6f235372.js b/build/assets/js/416b2475.6f235372.js new file mode 100644 index 00000000..25cb4d51 --- /dev/null +++ b/build/assets/js/416b2475.6f235372.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8470],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>g});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},d="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,g=d["".concat(s,".").concat(m)]||d[m]||f[m]||i;return n?r.createElement(g,o(o({ref:t},c),{},{components:n})):r.createElement(g,o({ref:t},c))}));function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[d]="string"==typeof e?e:a,o[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>g,frontMatter:()=>l,metadata:()=>p,toc:()=>d});var r=n(7462),a=n(3366),i=(n(7294),n(3905)),o=["components"],l={id:"thatopen_components.IfcStreamingSettings",title:"Class: IfcStreamingSettings",sidebar_label:"IfcStreamingSettings",custom_edit_url:null},s=void 0,p={unversionedId:"api/classes/thatopen_components.IfcStreamingSettings",id:"api/classes/thatopen_components.IfcStreamingSettings",title:"Class: IfcStreamingSettings",description:"@thatopen/components.IfcStreamingSettings",source:"@site/docs/api/classes/thatopen_components.IfcStreamingSettings.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.IfcStreamingSettings",permalink:"/api/classes/thatopen_components.IfcStreamingSettings",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.IfcStreamingSettings",title:"Class: IfcStreamingSettings",sidebar_label:"IfcStreamingSettings",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"IfcRelationsIndexer",permalink:"/api/classes/thatopen_components.IfcRelationsIndexer"},next:{title:"MeshCullerRenderer",permalink:"/api/classes/thatopen_components.MeshCullerRenderer"}},c={},d=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Properties",id:"properties",level:2},{value:"coordinate",id:"coordinate",level:3},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"excludedCategories",id:"excludedcategories",level:3},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"includeProperties",id:"includeproperties",level:3},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"optionalCategories",id:"optionalcategories",level:3},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"saveLocations",id:"savelocations",level:3},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"wasm",id:"wasm",level:3},{value:"Type declaration",id:"type-declaration",level:4},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"webIfc",id:"webifc",level:3},{value:"Inherited from",id:"inherited-from-6",level:4},{value:"Defined in",id:"defined-in-6",level:4}],f={toc:d},m="wrapper";function g(e){var t=e.components,n=(0,a.Z)(e,o);return(0,i.kt)(m,(0,r.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".IfcStreamingSettings"),(0,i.kt)("p",null,"Configuration of the IFC-fragment streaming."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"IfcFragmentSettings")),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"IfcStreamingSettings"))))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"coordinate"},"coordinate"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"coordinate"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"true")),(0,i.kt)("p",null,"Whether to use the coordination data coming from the IFC files."),(0,i.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.coordinate"),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L15"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:15")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"excludedcategories"},"excludedCategories"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"excludedCategories"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"Set"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"number"),">"),(0,i.kt)("p",null,"List of categories that won't be converted to fragments."),(0,i.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.excludedCategories"),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L29"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:29")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"includeproperties"},"includeProperties"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"includeProperties"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"true")),(0,i.kt)("p",null,"Whether to extract the IFC properties into a JSON."),(0,i.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.includeProperties"),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L6"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:6")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"optionalcategories"},"optionalCategories"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"optionalCategories"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"number"),"[]"),(0,i.kt)("p",null,"Generate the geometry for categories that are not included by default,\nlike IFCSPACE."),(0,i.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.optionalCategories"),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L12"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:12")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"savelocations"},"saveLocations"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"saveLocations"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"false")),(0,i.kt)("p",null,"Whether to save the absolute location of all IFC items."),(0,i.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.saveLocations"),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L32"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:32")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"wasm"},"wasm"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"wasm"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"Object")),(0,i.kt)("p",null,"Path of the WASM for ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_web-ifc"},"web-ifc"),"."),(0,i.kt)("h4",{id:"type-declaration"},"Type declaration"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"absolute")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean"))),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"logLevel?")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"LogLevel"))),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"path")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"string"))))),(0,i.kt)("h4",{id:"inherited-from-5"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.wasm"),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L18"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:18")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"webifc"},"webIfc"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"webIfc"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"LoaderSettings")),(0,i.kt)("p",null,"Loader settings for ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_web-ifc"},"web-ifc"),"."),(0,i.kt)("h4",{id:"inherited-from-6"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.webIfc"),(0,i.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L35"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:35")))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/44d0ab4a.a37673ab.js b/build/assets/js/44d0ab4a.a37673ab.js new file mode 100644 index 00000000..bf385334 --- /dev/null +++ b/build/assets/js/44d0ab4a.a37673ab.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1764],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>h});var a=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var o=a.createContext({}),s=function(e){var t=a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(o.Provider,{value:t},e.children)},m="mdxType",k={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,r=e.originalType,o=e.parentName,d=p(e,["components","mdxType","originalType","parentName"]),m=s(n),c=i,h=m["".concat(o,".").concat(c)]||m[c]||k[c]||r;return n?a.createElement(h,l(l({ref:t},d),{},{components:n})):a.createElement(h,l({ref:t},d))}));function h(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=n.length,l=new Array(r);l[0]=c;var p={};for(var o in t)hasOwnProperty.call(t,o)&&(p[o]=t[o]);p.originalType=e,p[m]="string"==typeof e?e:i,l[1]=p;for(var s=2;s{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>p,metadata:()=>s,toc:()=>m});var a=n(7462),i=n(3366),r=(n(7294),n(3905)),l=["components"],p={id:"thatopen_components.Clipper",title:"Class: Clipper",sidebar_label:"Clipper",custom_edit_url:null},o=void 0,s={unversionedId:"api/classes/thatopen_components.Clipper",id:"api/classes/thatopen_components.Clipper",title:"Class: Clipper",description:"@thatopen/components.Clipper",source:"@site/docs/api/classes/thatopen_components.Clipper.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.Clipper",permalink:"/api/classes/thatopen_components.Clipper",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Clipper",title:"Class: Clipper",sidebar_label:"Clipper",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"BoundingBoxer",permalink:"/api/classes/thatopen_components.BoundingBoxer"},next:{title:"Component",permalink:"/api/classes/thatopen_components.Component"}},d={},m=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"onAfterCreate",id:"onaftercreate",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"onAfterDelete",id:"onafterdelete",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"onAfterDrag",id:"onafterdrag",level:3},{value:"Defined in",id:"defined-in-2",level:4},{value:"onBeforeDrag",id:"onbeforedrag",level:3},{value:"Defined in",id:"defined-in-3",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"orthogonalY",id:"orthogonaly",level:3},{value:"Defined in",id:"defined-in-5",level:4},{value:"toleranceOrthogonalY",id:"toleranceorthogonaly",level:3},{value:"Defined in",id:"defined-in-6",level:4},{value:"Accessors",id:"accessors",level:2},{value:"enabled",id:"enabled",level:3},{value:"Returns",id:"returns",level:4},{value:"Overrides",id:"overrides",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Overrides",id:"overrides-1",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"material",id:"material",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-3",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"size",id:"size",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-5",level:4},{value:"Defined in",id:"defined-in-12",level:4},{value:"visible",id:"visible",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-13",level:4},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-7",level:4},{value:"Implementation of",id:"implementation-of-2",level:4},{value:"Defined in",id:"defined-in-14",level:4},{value:"Methods",id:"methods",level:2},{value:"create",id:"create",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-8",level:4},{value:"Implementation of",id:"implementation-of-3",level:4},{value:"Defined in",id:"defined-in-15",level:4},{value:"createFromNormalAndCoplanarPoint",id:"createfromnormalandcoplanarpoint",level:3},{value:"Parameters",id:"parameters-5",level:4},{value:"Returns",id:"returns-9",level:4},{value:"Defined in",id:"defined-in-16",level:4},{value:"delete",id:"delete",level:3},{value:"Parameters",id:"parameters-6",level:4},{value:"Returns",id:"returns-10",level:4},{value:"Implementation of",id:"implementation-of-4",level:4},{value:"Defined in",id:"defined-in-17",level:4},{value:"deleteAll",id:"deleteall",level:3},{value:"Returns",id:"returns-11",level:4},{value:"Defined in",id:"defined-in-18",level:4},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns-12",level:4},{value:"Implementation of",id:"implementation-of-5",level:4},{value:"Defined in",id:"defined-in-19",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-13",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-20",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-14",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-21",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-15",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-22",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-16",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-23",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-17",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-24",level:4}],k={toc:m},c="wrapper";function h(e){var t=e.components,n=(0,i.Z)(e,l);return(0,r.kt)(c,(0,a.Z)({},k,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Clipper"),(0,r.kt)("p",null,"A lightweight component to easily create and handle\n",(0,r.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/materials/Material.clippingPlanes"},"clipping planes"),"."),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"Param"))),(0,r.kt)("p",null,"the instance of ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Components"},"Components")," used.\nE.g. ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimplePlane"},"SimplePlane"),"."),(0,r.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},(0,r.kt)("inlineCode",{parentName:"a"},"Component"))),(0,r.kt)("p",{parentName:"li"},"\u21b3 ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"Clipper"))))),(0,r.kt)("h2",{id:"implements"},"Implements"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Createable"},(0,r.kt)("inlineCode",{parentName:"a"},"Createable"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Disposable"},(0,r.kt)("inlineCode",{parentName:"a"},"Disposable"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Hideable"},(0,r.kt)("inlineCode",{parentName:"a"},"Hideable")))),(0,r.kt)("h2",{id:"properties"},"Properties"),(0,r.kt)("h3",{id:"onaftercreate"},"onAfterCreate"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,r.kt)("strong",{parentName:"p"},"onAfterCreate"),": ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,r.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimplePlane"},(0,r.kt)("inlineCode",{parentName:"a"},"SimplePlane")),">"),(0,r.kt)("p",null,"Createable.onAfterCreate"),(0,r.kt)("h4",{id:"defined-in"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L31"},"packages/core/src/core/Clipper/index.ts:31")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"onafterdelete"},"onAfterDelete"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,r.kt)("strong",{parentName:"p"},"onAfterDelete"),": ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,r.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimplePlane"},(0,r.kt)("inlineCode",{parentName:"a"},"SimplePlane")),">"),(0,r.kt)("p",null,"Createable.onAfterDelete"),(0,r.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L34"},"packages/core/src/core/Clipper/index.ts:34")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"onafterdrag"},"onAfterDrag"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,r.kt)("strong",{parentName:"p"},"onAfterDrag"),": ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,r.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,r.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,r.kt)("p",null,"Event that fires when the user stops dragging a clipping plane."),(0,r.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L40"},"packages/core/src/core/Clipper/index.ts:40")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"onbeforedrag"},"onBeforeDrag"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,r.kt)("strong",{parentName:"p"},"onBeforeDrag"),": ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,r.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,r.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,r.kt)("p",null,"Event that fires when the user starts dragging a clipping plane."),(0,r.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L37"},"packages/core/src/core/Clipper/index.ts:37")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,r.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,r.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,r.kt)("inlineCode",{parentName:"p"},"string"),">"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,r.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"onDisposed")),(0,r.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L51"},"packages/core/src/core/Clipper/index.ts:51")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"orthogonaly"},"orthogonalY"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("strong",{parentName:"p"},"orthogonalY"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,r.kt)("inlineCode",{parentName:"p"},"false")),(0,r.kt)("p",null,"Whether to force the clipping plane to be orthogonal in the Y direction\n(up). This is desirable when clipping a building horizontally and a\nclipping plane is created in its roof, which might have a slight\nslope for draining purposes."),(0,r.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L59"},"packages/core/src/core/Clipper/index.ts:59")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"toleranceorthogonaly"},"toleranceOrthogonalY"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("strong",{parentName:"p"},"toleranceOrthogonalY"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"number")," = ",(0,r.kt)("inlineCode",{parentName:"p"},"0.7")),(0,r.kt)("p",null,"The tolerance that determines whether an almost-horizontal clipping plane\nwill be forced to be orthogonal to the Y direction. ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Clipper#orthogonaly"},"orthogonalY"),"\nhas to be ",(0,r.kt)("inlineCode",{parentName:"p"},"true")," for this to apply."),(0,r.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L66"},"packages/core/src/core/Clipper/index.ts:66")),(0,r.kt)("h2",{id:"accessors"},"Accessors"),(0,r.kt)("h3",{id:"enabled"},"enabled"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"get")," ",(0,r.kt)("strong",{parentName:"p"},"enabled"),"(): ",(0,r.kt)("inlineCode",{parentName:"p"},"boolean")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,r.kt)("h4",{id:"returns"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"boolean")),(0,r.kt)("h4",{id:"overrides"},"Overrides"),(0,r.kt)("p",null,"Component.enabled"),(0,r.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L85"},"packages/core/src/core/Clipper/index.ts:85")),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"set")," ",(0,r.kt)("strong",{parentName:"p"},"enabled"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"state"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,r.kt)("h4",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"state")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"boolean"))))),(0,r.kt)("h4",{id:"returns-1"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"overrides-1"},"Overrides"),(0,r.kt)("p",null,"Component.enabled"),(0,r.kt)("h4",{id:"defined-in-8"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L90"},"packages/core/src/core/Clipper/index.ts:90")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"material"},"material"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"get")," ",(0,r.kt)("strong",{parentName:"p"},"material"),"(): ",(0,r.kt)("inlineCode",{parentName:"p"},"MeshBasicMaterial")),(0,r.kt)("p",null,"The material of the clipping plane representation."),(0,r.kt)("h4",{id:"returns-2"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"MeshBasicMaterial")),(0,r.kt)("h4",{id:"defined-in-9"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L112"},"packages/core/src/core/Clipper/index.ts:112")),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"set")," ",(0,r.kt)("strong",{parentName:"p"},"material"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"material"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,"The material of the clipping plane representation."),(0,r.kt)("h4",{id:"parameters-1"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"material")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"MeshBasicMaterial"))))),(0,r.kt)("h4",{id:"returns-3"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"defined-in-10"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L117"},"packages/core/src/core/Clipper/index.ts:117")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"size"},"size"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"get")," ",(0,r.kt)("strong",{parentName:"p"},"size"),"(): ",(0,r.kt)("inlineCode",{parentName:"p"},"number")),(0,r.kt)("p",null,"The size of the geometric representation of the clippings planes."),(0,r.kt)("h4",{id:"returns-4"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"number")),(0,r.kt)("h4",{id:"defined-in-11"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L125"},"packages/core/src/core/Clipper/index.ts:125")),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"set")," ",(0,r.kt)("strong",{parentName:"p"},"size"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"size"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,"The size of the geometric representation of the clippings planes."),(0,r.kt)("h4",{id:"parameters-2"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"size")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"number"))))),(0,r.kt)("h4",{id:"returns-5"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"defined-in-12"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L130"},"packages/core/src/core/Clipper/index.ts:130")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"visible"},"visible"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"get")," ",(0,r.kt)("strong",{parentName:"p"},"visible"),"(): ",(0,r.kt)("inlineCode",{parentName:"p"},"boolean")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable#visible"},"Hideable.visible")),(0,r.kt)("h4",{id:"returns-6"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"boolean")),(0,r.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable#visible"},"visible")),(0,r.kt)("h4",{id:"defined-in-13"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L99"},"packages/core/src/core/Clipper/index.ts:99")),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"set")," ",(0,r.kt)("strong",{parentName:"p"},"visible"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"state"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable#visible"},"Hideable.visible")),(0,r.kt)("h4",{id:"parameters-3"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"state")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"boolean"))))),(0,r.kt)("h4",{id:"returns-7"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"implementation-of-2"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable#visible"},"visible")),(0,r.kt)("h4",{id:"defined-in-14"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L104"},"packages/core/src/core/Clipper/index.ts:104")),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("h3",{id:"create"},"create"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"create"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"world"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Createable#create"},"Createable.create")),(0,r.kt)("h4",{id:"parameters-4"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"world")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"World"))))),(0,r.kt)("h4",{id:"returns-8"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"implementation-of-3"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Createable"},"Createable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Createable#create"},"create")),(0,r.kt)("h4",{id:"defined-in-15"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L163"},"packages/core/src/core/Clipper/index.ts:163")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"createfromnormalandcoplanarpoint"},"createFromNormalAndCoplanarPoint"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"createFromNormalAndCoplanarPoint"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"world"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"normal"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"point"),"): ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimplePlane"},(0,r.kt)("inlineCode",{parentName:"a"},"SimplePlane"))),(0,r.kt)("p",null,"Creates a plane in a certain place and with a certain orientation,\nwithout the need of the mouse."),(0,r.kt)("h4",{id:"parameters-5"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"world")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"World")),(0,r.kt)("td",{parentName:"tr",align:"left"},"the world where this plane should be created.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"normal")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Vector3")),(0,r.kt)("td",{parentName:"tr",align:"left"},"the orientation of the clipping plane.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"point")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Vector3")),(0,r.kt)("td",{parentName:"tr",align:"left"},"the position of the clipping plane. navigation.")))),(0,r.kt)("h4",{id:"returns-9"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimplePlane"},(0,r.kt)("inlineCode",{parentName:"a"},"SimplePlane"))),(0,r.kt)("h4",{id:"defined-in-16"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L184"},"packages/core/src/core/Clipper/index.ts:184")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"delete"},"delete"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"delete"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"world"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"plane?"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Createable#delete"},"Createable.delete")),(0,r.kt)("h4",{id:"parameters-6"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"world")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"World")),(0,r.kt)("td",{parentName:"tr",align:"left"},"the world where the plane to delete is.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"plane?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("a",{parentName:"td",href:"/api/classes/thatopen_components.SimplePlane"},(0,r.kt)("inlineCode",{parentName:"a"},"SimplePlane"))),(0,r.kt)("td",{parentName:"tr",align:"left"},"the plane to delete. If undefined, the first plane found under the cursor will be deleted.")))),(0,r.kt)("h4",{id:"returns-10"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"implementation-of-4"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Createable"},"Createable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Createable#delete"},"delete")),(0,r.kt)("h4",{id:"defined-in-17"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L201"},"packages/core/src/core/Clipper/index.ts:201")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"deleteall"},"deleteAll"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"deleteAll"),"(): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,"Deletes all the existing clipping planes."),(0,r.kt)("h4",{id:"returns-11"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"defined-in-18"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L213"},"packages/core/src/core/Clipper/index.ts:213")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"dispose"},"dispose"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"Disposable.dispose")),(0,r.kt)("h4",{id:"returns-12"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"implementation-of-5"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"dispose")),(0,r.kt)("h4",{id:"defined-in-19"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/index.ts#L143"},"packages/core/src/core/Clipper/index.ts:143")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,r.kt)("h4",{id:"returns-13"},"Returns"),(0,r.kt)("p",null,"this is Configurable"),(0,r.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isconfigurable"},"isConfigurable")),(0,r.kt)("h4",{id:"defined-in-20"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,r.kt)("h4",{id:"returns-14"},"Returns"),(0,r.kt)("p",null,"this is Disposable"),(0,r.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isdisposeable"},"isDisposeable")),(0,r.kt)("h4",{id:"defined-in-21"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"ishideable"},"isHideable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,r.kt)("h4",{id:"returns-15"},"Returns"),(0,r.kt)("p",null,"this is Hideable"),(0,r.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#ishideable"},"isHideable")),(0,r.kt)("h4",{id:"defined-in-22"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,r.kt)("h4",{id:"returns-16"},"Returns"),(0,r.kt)("p",null,"this is Resizeable"),(0,r.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isresizeable"},"isResizeable")),(0,r.kt)("h4",{id:"defined-in-23"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,r.kt)("h4",{id:"returns-17"},"Returns"),(0,r.kt)("p",null,"this is Updateable"),(0,r.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isupdateable"},"isUpdateable")),(0,r.kt)("h4",{id:"defined-in-24"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/4972.96c55074.js b/build/assets/js/4972.96c55074.js new file mode 100644 index 00000000..0bbbdbfb --- /dev/null +++ b/build/assets/js/4972.96c55074.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4972],{4972:(e,t,n)=>{n.r(t),n.d(t,{default:()=>c});var a=n(7294),l=n(5999),o=n(1944),r=n(7961);function c(){return a.createElement(a.Fragment,null,a.createElement(o.d,{title:(0,l.I)({id:"theme.NotFound.title",message:"Page Not Found"})}),a.createElement(r.Z,null,a.createElement("main",{className:"container margin-vert--xl"},a.createElement("div",{className:"row"},a.createElement("div",{className:"col col--6 col--offset-3"},a.createElement("h1",{className:"hero__title"},a.createElement(l.Z,{id:"theme.NotFound.title",description:"The title of the 404 page"},"Page Not Found")),a.createElement("p",null,a.createElement(l.Z,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page"},"We could not find what you were looking for.")),a.createElement("p",null,a.createElement(l.Z,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page"},"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/assets/js/4bf8fd60.34002f5e.js b/build/assets/js/4bf8fd60.34002f5e.js new file mode 100644 index 00000000..04248b7d --- /dev/null +++ b/build/assets/js/4bf8fd60.34002f5e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8995],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var o=a.createContext({}),p=function(e){var t=a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(o.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},h=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,s=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),h=r,m=d["".concat(o,".").concat(h)]||d[h]||u[h]||s;return n?a.createElement(m,i(i({ref:t},c),{},{components:n})):a.createElement(m,i({ref:t},c))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var s=n.length,i=new Array(s);i[0]=h;var l={};for(var o in t)hasOwnProperty.call(t,o)&&(l[o]=t[o]);l.originalType=e,l[d]="string"==typeof e?e:r,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>m,frontMatter:()=>l,metadata:()=>p,toc:()=>d});var a=n(7462),r=n(3366),s=(n(7294),n(3905)),i=["components"],l={id:"thatopen_components.BaseWorldItem",title:"Class: BaseWorldItem",sidebar_label:"BaseWorldItem",custom_edit_url:null},o=void 0,p={unversionedId:"api/classes/thatopen_components.BaseWorldItem",id:"api/classes/thatopen_components.BaseWorldItem",title:"Class: BaseWorldItem",description:"@thatopen/components.BaseWorldItem",source:"@site/docs/api/classes/thatopen_components.BaseWorldItem.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.BaseWorldItem",permalink:"/api/classes/thatopen_components.BaseWorldItem",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.BaseWorldItem",title:"Class: BaseWorldItem",sidebar_label:"BaseWorldItem",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Base",permalink:"/api/classes/thatopen_components.Base"},next:{title:"BoundingBoxer",permalink:"/api/classes/thatopen_components.BoundingBoxer"}},c={},d=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Methods",id:"methods",level:2},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-4",level:4}],u={toc:d},h="wrapper";function m(e){var t=e.components,n=(0,r.Z)(e,i);return(0,s.kt)(h,(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".BaseWorldItem"),(0,s.kt)("p",null,"One of the elements that make a world. It can be either a scene, a camera\nor a renderer."),(0,s.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("p",{parentName:"li"},(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},(0,s.kt)("inlineCode",{parentName:"a"},"Base"))),(0,s.kt)("p",{parentName:"li"},"\u21b3 ",(0,s.kt)("strong",{parentName:"p"},(0,s.kt)("inlineCode",{parentName:"strong"},"BaseWorldItem"))))),(0,s.kt)("h2",{id:"methods"},"Methods"),(0,s.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,s.kt)("p",null,"\u25b8 ",(0,s.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,s.kt)("p",null,"Whether is component is ",(0,s.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,s.kt)("h4",{id:"returns"},"Returns"),(0,s.kt)("p",null,"this is Configurable"),(0,s.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},"Base"),".",(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base#isconfigurable"},"isConfigurable")),(0,s.kt)("h4",{id:"defined-in"},"Defined in"),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,s.kt)("hr",null),(0,s.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,s.kt)("p",null,"\u25b8 ",(0,s.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,s.kt)("p",null,"Whether is component is ",(0,s.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,s.kt)("h4",{id:"returns-1"},"Returns"),(0,s.kt)("p",null,"this is Disposable"),(0,s.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},"Base"),".",(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base#isdisposeable"},"isDisposeable")),(0,s.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,s.kt)("hr",null),(0,s.kt)("h3",{id:"ishideable"},"isHideable"),(0,s.kt)("p",null,"\u25b8 ",(0,s.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,s.kt)("p",null,"Whether is component is ",(0,s.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,s.kt)("h4",{id:"returns-2"},"Returns"),(0,s.kt)("p",null,"this is Hideable"),(0,s.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},"Base"),".",(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base#ishideable"},"isHideable")),(0,s.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,s.kt)("hr",null),(0,s.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,s.kt)("p",null,"\u25b8 ",(0,s.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,s.kt)("p",null,"Whether is component is ",(0,s.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,s.kt)("h4",{id:"returns-3"},"Returns"),(0,s.kt)("p",null,"this is Resizeable"),(0,s.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},"Base"),".",(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base#isresizeable"},"isResizeable")),(0,s.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,s.kt)("hr",null),(0,s.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,s.kt)("p",null,"\u25b8 ",(0,s.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,s.kt)("p",null,"Whether is component is ",(0,s.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,s.kt)("h4",{id:"returns-4"},"Returns"),(0,s.kt)("p",null,"this is Updateable"),(0,s.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},"Base"),".",(0,s.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base#isupdateable"},"isUpdateable")),(0,s.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/5094df0e.a09abb95.js b/build/assets/js/5094df0e.a09abb95.js new file mode 100644 index 00000000..fbd93128 --- /dev/null +++ b/build/assets/js/5094df0e.a09abb95.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7621],{3905:(e,t,a)=>{a.d(t,{Zo:()=>m,kt:()=>f});var r=a(7294);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function o(e){for(var t=1;t=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var l=r.createContext({}),s=function(e){var t=r.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},m=function(e){var t=s(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,m=p(e,["components","mdxType","originalType","parentName"]),u=s(a),d=n,f=u["".concat(l,".").concat(d)]||u[d]||c[d]||i;return a?r.createElement(f,o(o({ref:t},m),{},{components:a})):r.createElement(f,o({ref:t},m))}));function f(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=d;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[u]="string"==typeof e?e:n,o[1]=p;for(var s=2;s{a.r(t),a.d(t,{assets:()=>m,contentTitle:()=>l,default:()=>f,frontMatter:()=>p,metadata:()=>s,toc:()=>u});var r=a(7462),n=a(3366),i=(a(7294),a(3905)),o=["components"],p={sidebar_position:4},l="Tutorial paths",s={unversionedId:"components/tutorial-paths",id:"components/tutorial-paths",title:"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!",source:"@site/docs/components/tutorial-paths.md",sourceDirName:"components",slug:"/components/tutorial-paths",permalink:"/components/tutorial-paths",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Clean components ABC",permalink:"/components/clean-components-guide"},next:{title:"Get involved",permalink:"/components/contributing"}},m={},u=[],c={toc:u},d="wrapper";function f(e){var t=e.components,a=(0,n.Z)(e,o);return(0,i.kt)(d,(0,r.Z)({},c,a,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"tutorial-paths"},"Tutorial paths"),(0,i.kt)("p",null,"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!"),(0,i.kt)("admonition",{title:"First steps in the library",type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"The best place to start is playing the core components of our library. These are the basic building blocks you will need in all the apps you build on top of this!"),(0,i.kt)("ul",{parentName:"admonition"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/SimpleScene.mdx"},"Create your first 3D app")," ")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/SimpleRaycaster.mdx"},"Interact with your scene")," ")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/SimpleRaycaster.mdx"},"Create some clipping planes")," ")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd8 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/ToolsComponent.mdx"},"Use some tools"))))),(0,i.kt)("admonition",{title:"Making great 3D apps",type:"danger"},(0,i.kt)("p",{parentName:"admonition"},"Basics are great, but that's not enough to build professional 3D apps. Let's discover some tools that will bring our BIM software to the next level:"),(0,i.kt)("ul",{parentName:"admonition"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/OrthoPerspectiveCamera.mdx"},"Using a fancy camera")," ")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/ScreenCuller.mdx"},"Building scalable 3D scenes"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/PostproductionRenderer.mdx"},"Setting up beatiful graphics"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/UIManager.mdx"},"Creating UI fast"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/MiniMap.mdx"},"Creating a minimap"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/ShadowDropper.mdx"},"Casting shadows"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/EdgesClipper.mdx"},"Clipping edges"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd9 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/LengthMeasurement.mdx"},"Measuring distances"))))),(0,i.kt)("admonition",{title:"Loading and editing BIM data",type:"info"},(0,i.kt)("p",{parentName:"admonition"},"We are here to make BIM apps, and the library has tons of tools to make it super easy! Our library is based on ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_fragment"},"fragments"),", an open source geometric format that can load display big amounts of BIM data super efficiently. Let's learn how to build BIM apps with it!"),(0,i.kt)("ul",{parentName:"admonition"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentManager.mdx"},"Discovering fragments"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentIfcLoader.mdx"},"Loading IFC files"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentHighlighter.mdx"},"Touching BIM models"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentExploder.mdx"},"Exploding models"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentCacher.mdx"},"Caching BIM data"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentPlans.mdx"},"Navigating floorplans"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/IfcPropertiesProcessor.mdx"},"Reading properties"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentTree.mdx"},"Building trees"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/FragmentHider.mdx"},"Filtering geometry"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"\ud83d\udcd5 ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/IfcPropertiesManager.mdx"},"Writing properties"))))),(0,i.kt)("p",null,"Keep in mind that this documentation assumes some basic level of web development and Three.js. If you are just starting or have never coded before in the web, don't worry! Get around our community, say hi, meet other aspiring BIM software developers and start your coding journey with us. \ud83d\ude80"))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/519cde36.3ea114e4.js b/build/assets/js/519cde36.3ea114e4.js new file mode 100644 index 00000000..75a31e0d --- /dev/null +++ b/build/assets/js/519cde36.3ea114e4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6644],{3905:(e,t,n)=>{n.d(t,{Zo:()=>l,kt:()=>u});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=r.createContext({}),s=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},l=function(e){var t=s(e.components);return r.createElement(c.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},h=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=s(n),h=a,u=m["".concat(c,".").concat(h)]||m[h]||d[h]||o;return n?r.createElement(u,i(i({ref:t},l),{},{components:n})):r.createElement(u,i({ref:t},l))}));function u(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=h;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p[m]="string"==typeof e?e:a,i[1]=p;for(var s=2;s{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>c,default:()=>u,frontMatter:()=>p,metadata:()=>s,toc:()=>m});var r=n(7462),a=n(3366),o=(n(7294),n(3905)),i=["components"],p={id:"thatopen_components.ProjectionManager",title:"Class: ProjectionManager",sidebar_label:"ProjectionManager",custom_edit_url:null},c=void 0,s={unversionedId:"api/classes/thatopen_components.ProjectionManager",id:"api/classes/thatopen_components.ProjectionManager",title:"Class: ProjectionManager",description:"@thatopen/components.ProjectionManager",source:"@site/docs/api/classes/thatopen_components.ProjectionManager.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.ProjectionManager",permalink:"/api/classes/thatopen_components.ProjectionManager",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.ProjectionManager",title:"Class: ProjectionManager",sidebar_label:"ProjectionManager",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"PlanMode",permalink:"/api/classes/thatopen_components.PlanMode"},next:{title:"PropertiesStreamingSettings",permalink:"/api/classes/thatopen_components.PropertiesStreamingSettings"}},l={},m=[{value:"Properties",id:"properties",level:2},{value:"matchOrthoDistanceEnabled",id:"matchorthodistanceenabled",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"onChanged",id:"onchanged",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"Methods",id:"methods",level:2},{value:"set",id:"set",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"toggle",id:"toggle",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in-3",level:4}],d={toc:m},h="wrapper";function u(e){var t=e.components,n=(0,a.Z)(e,i);return(0,o.kt)(h,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".ProjectionManager"),(0,o.kt)("p",null,"Object to control the ",(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components#cameraprojection"},"CameraProjection")," of the ",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.OrthoPerspectiveCamera"},"OrthoPerspectiveCamera"),"."),(0,o.kt)("h2",{id:"properties"},"Properties"),(0,o.kt)("h3",{id:"matchorthodistanceenabled"},"matchOrthoDistanceEnabled"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("strong",{parentName:"p"},"matchOrthoDistanceEnabled"),": ",(0,o.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,o.kt)("inlineCode",{parentName:"p"},"false")),(0,o.kt)("p",null,"Match Ortho zoom with Perspective distance when changing projection mode"),(0,o.kt)("h4",{id:"defined-in"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts#L27"},"packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:27")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"onchanged"},"onChanged"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,o.kt)("strong",{parentName:"p"},"onChanged"),": ",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,o.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,o.kt)("inlineCode",{parentName:"p"},"PerspectiveCamera")," ","|"," ",(0,o.kt)("inlineCode",{parentName:"p"},"OrthographicCamera"),">"),(0,o.kt)("p",null,"Event that fires when the ",(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components#cameraprojection"},"CameraProjection")," changes."),(0,o.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts#L14"},"packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:14")),(0,o.kt)("h2",{id:"methods"},"Methods"),(0,o.kt)("h3",{id:"set"},"set"),(0,o.kt)("p",null,"\u25b8 ",(0,o.kt)("strong",{parentName:"p"},"set"),"(",(0,o.kt)("inlineCode",{parentName:"p"},"projection"),"): ",(0,o.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,o.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,o.kt)("p",null,"Sets the ",(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components#cameraprojection"},"CameraProjection")," of the ",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.OrthoPerspectiveCamera"},"OrthoPerspectiveCamera"),"."),(0,o.kt)("h4",{id:"parameters"},"Parameters"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"projection")),(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("a",{parentName:"td",href:"/api/modules/thatopen_components#cameraprojection"},(0,o.kt)("inlineCode",{parentName:"a"},"CameraProjection"))),(0,o.kt)("td",{parentName:"tr",align:"left"},"the new projection to set. If it is the current projection, it will have no effect.")))),(0,o.kt)("h4",{id:"returns"},"Returns"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,o.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,o.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts#L40"},"packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:40")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"toggle"},"toggle"),(0,o.kt)("p",null,"\u25b8 ",(0,o.kt)("strong",{parentName:"p"},"toggle"),"(): ",(0,o.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,o.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,o.kt)("p",null,"Changes the current ",(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components#cameraprojection"},"CameraProjection")," from Ortographic to Perspective\nand vice versa."),(0,o.kt)("h4",{id:"returns-1"},"Returns"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,o.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,o.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts#L54"},"packages/core/src/core/OrthoPerspectiveCamera/src/projections.ts:54")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/5251865f.2c36c65b.js b/build/assets/js/5251865f.2c36c65b.js new file mode 100644 index 00000000..bade7526 --- /dev/null +++ b/build/assets/js/5251865f.2c36c65b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3156],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),d=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=d(e.components);return a.createElement(l.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),c=d(n),u=r,f=c["".concat(l,".").concat(u)]||c[u]||m[u]||i;return n?a.createElement(f,o(o({ref:t},s),{},{components:n})):a.createElement(f,o({ref:t},s))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=u;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[c]="string"==typeof e?e:r,o[1]=p;for(var d=2;d{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>f,frontMatter:()=>p,metadata:()=>d,toc:()=>c});var a=n(7462),r=n(3366),i=(n(7294),n(3905)),o=["components"],p={id:"thatopen_components.NavigationMode",title:"Interface: NavigationMode",sidebar_label:"NavigationMode",custom_edit_url:null},l=void 0,d={unversionedId:"api/interfaces/thatopen_components.NavigationMode",id:"api/interfaces/thatopen_components.NavigationMode",title:"Interface: NavigationMode",description:"@thatopen/components.NavigationMode",source:"@site/docs/api/interfaces/thatopen_components.NavigationMode.md",sourceDirName:"api/interfaces",slug:"/api/interfaces/thatopen_components.NavigationMode",permalink:"/api/interfaces/thatopen_components.NavigationMode",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.NavigationMode",title:"Interface: NavigationMode",sidebar_label:"NavigationMode",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Hideable",permalink:"/api/interfaces/thatopen_components.Hideable"},next:{title:"Progress",permalink:"/api/interfaces/thatopen_components.Progress"}},s={},c=[{value:"Implemented by",id:"implemented-by",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"id",id:"id",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"set",id:"set",level:3},{value:"Type declaration",id:"type-declaration",level:4},{value:"Parameters",id:"parameters",level:5},{value:"Returns",id:"returns",level:5},{value:"Defined in",id:"defined-in-2",level:4}],m={toc:c},u="wrapper";function f(e){var t=e.components,n=(0,r.Z)(e,o);return(0,i.kt)(u,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".NavigationMode"),(0,i.kt)("p",null,"An object that determines the behavior of the camera controls\nand the user input (e.g. 2D floor plan mode, first person mode, etc)."),(0,i.kt)("h2",{id:"implemented-by"},"Implemented by"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.FirstPersonMode"},(0,i.kt)("inlineCode",{parentName:"a"},"FirstPersonMode"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.OrbitMode"},(0,i.kt)("inlineCode",{parentName:"a"},"OrbitMode"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.PlanMode"},(0,i.kt)("inlineCode",{parentName:"a"},"PlanMode")))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"enabled"},"enabled"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"enabled"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")),(0,i.kt)("p",null,"Whether this navigation mode is active or not."),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/types.ts#L30"},"packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:30")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"id"},"id"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"id"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components#navmodeid"},(0,i.kt)("inlineCode",{parentName:"a"},"NavModeID"))),(0,i.kt)("p",null,"The unique ID of this navigation mode."),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/types.ts#L17"},"packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:17")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"set"},"set"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"set"),": (",(0,i.kt)("inlineCode",{parentName:"p"},"active"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"options?"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"any"),") => ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"type-declaration"},"Type declaration"),(0,i.kt)("p",null,"\u25b8 (",(0,i.kt)("inlineCode",{parentName:"p"},"active"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"options?"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Enable or disable this navigation mode.\nWhen a new navigation mode is enabled, the previous navigation mode\nmust be disabled."),(0,i.kt)("h5",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"active")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean")),(0,i.kt)("td",{parentName:"tr",align:"left"},"whether to enable or disable this mode.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"options?")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"any")),(0,i.kt)("td",{parentName:"tr",align:"left"},"any additional data required to enable or disable it.")))),(0,i.kt)("h5",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/types.ts#L27"},"packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:27")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/57f3dce9.79f3a14b.js b/build/assets/js/57f3dce9.79f3a14b.js new file mode 100644 index 00000000..88d8d0c2 --- /dev/null +++ b/build/assets/js/57f3dce9.79f3a14b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7027],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>d});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),p=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},c=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},f="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),f=p(r),m=a,d=f["".concat(s,".").concat(m)]||f[m]||u[m]||i;return r?n.createElement(d,o(o({ref:t},c),{},{components:r})):n.createElement(d,o({ref:t},c))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=m;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[f]="string"==typeof e?e:a,o[1]=l;for(var p=2;p{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>d,frontMatter:()=>l,metadata:()=>p,toc:()=>f});var n=r(7462),a=r(3366),i=(r(7294),r(3905)),o=["components"],l={id:"thatopen_fragments.Serializer",title:"Class: Serializer",sidebar_label:"Serializer",custom_edit_url:null},s=void 0,p={unversionedId:"api/classes/thatopen_fragments.Serializer",id:"api/classes/thatopen_fragments.Serializer",title:"Class: Serializer",description:"@thatopen/fragments.Serializer",source:"@site/docs/api/classes/thatopen_fragments.Serializer.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_fragments.Serializer",permalink:"/api/classes/thatopen_fragments.Serializer",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_fragments.Serializer",title:"Class: Serializer",sidebar_label:"Serializer",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"RendererWith2D",permalink:"/api/classes/thatopen_components_front.RendererWith2D"},next:{title:"BVHGeometry",permalink:"/api/interfaces/thatopen_components.BVHGeometry"}},c={},f=[],u={toc:f},m="wrapper";function d(e){var t=e.components,r=(0,a.Z)(e,o);return(0,i.kt)(m,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_fragments"},"@thatopen/fragments"),".Serializer"),(0,i.kt)("p",null,"Object to export and import sets of fragments efficiently using the library\n",(0,i.kt)("a",{parentName:"p",href:"https://flatbuffers.dev/"},"flatbuffers"),"."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/5a3844a3.5e2d2c06.js b/build/assets/js/5a3844a3.5e2d2c06.js new file mode 100644 index 00000000..22464760 --- /dev/null +++ b/build/assets/js/5a3844a3.5e2d2c06.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6162],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>d});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),s=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},c=function(e){var t=s(e.components);return n.createElement(i.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=a,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return r?n.createElement(d,l(l({ref:t},c),{},{components:r})):n.createElement(d,l({ref:t},c))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=f;var p={};for(var i in t)hasOwnProperty.call(t,i)&&(p[i]=t[i]);p.originalType=e,p[u]="string"==typeof e?e:a,l[1]=p;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>p,metadata:()=>s,toc:()=>u});var n=r(7462),a=r(3366),o=(r(7294),r(3905)),l=["components"],p={id:"thatopen_components_front.Marker",title:"Class: Marker",sidebar_label:"Marker",custom_edit_url:null},i=void 0,s={unversionedId:"api/classes/thatopen_components_front.Marker",id:"api/classes/thatopen_components_front.Marker",title:"Class: Marker",description:"@thatopen/components-front.Marker",source:"@site/docs/api/classes/thatopen_components_front.Marker.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components_front.Marker",permalink:"/api/classes/thatopen_components_front.Marker",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components_front.Marker",title:"Class: Marker",sidebar_label:"Marker",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"LengthMeasurement",permalink:"/api/classes/thatopen_components_front.LengthMeasurement"},next:{title:"Plans",permalink:"/api/classes/thatopen_components_front.Plans"}},c={},u=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2}],m={toc:u},f="wrapper";function d(e){var t=e.components,r=(0,a.Z)(e,l);return(0,o.kt)(f,(0,n.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components_front"},"@thatopen/components-front"),".Marker"),(0,o.kt)("p",null,"Class for Managing Markers along with creating different types of markers\nEvery marker is a Simple2DMarker\nFor every marker that needs to be added, you can use the Manager to add the marker and change its look and feel"),(0,o.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},(0,o.kt)("inlineCode",{parentName:"p"},"Component")),(0,o.kt)("p",{parentName:"li"},"\u21b3 ",(0,o.kt)("strong",{parentName:"p"},(0,o.kt)("inlineCode",{parentName:"strong"},"Marker"))))),(0,o.kt)("h2",{id:"implements"},"Implements"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"Disposable"))))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/5c7b714e.7585764e.js b/build/assets/js/5c7b714e.7585764e.js new file mode 100644 index 00000000..27b876ff --- /dev/null +++ b/build/assets/js/5c7b714e.7585764e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4283],{3905:(e,n,t)=>{t.d(n,{Zo:()=>m,kt:()=>d});var a=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=a.createContext({}),p=function(e){var n=a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},m=function(e){var n=p(e.components);return a.createElement(l.Provider,{value:n},e.children)},c="mdxType",u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.createElement(a.Fragment,{},n)}},g=a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(t),g=r,d=c["".concat(l,".").concat(g)]||c[g]||u[g]||o;return t?a.createElement(d,i(i({ref:n},m),{},{components:t})):a.createElement(d,i({ref:n},m))}));function d(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=g;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s[c]="string"==typeof e?e:r,i[1]=s;for(var p=2;p{t.r(n),t.d(n,{assets:()=>m,contentTitle:()=>l,default:()=>d,frontMatter:()=>s,metadata:()=>p,toc:()=>c});var a=t(7462),r=t(3366),o=(t(7294),t(3905)),i=["components"],s={},l=void 0,p={unversionedId:"Tutorials/Components/Core/FragmentsManager",id:"Tutorials/Components/Core/FragmentsManager",title:"FragmentsManager",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/FragmentsManager.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/FragmentsManager",permalink:"/Tutorials/Components/Core/FragmentsManager",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Cullers",permalink:"/Tutorials/Components/Core/Cullers"},next:{title:"Grids",permalink:"/Tutorials/Components/Core/Grids"}},m={},c=[{value:"\ud83e\uddf6 Managing Fragment Efficiently",id:"-managing-fragment-efficiently",level:3},{value:"\ud83e\udded Fragment Powerhouse",id:"-fragment-powerhouse",level:3},{value:"\ud83e\udde9 Add Fragment To Scene",id:"-add-fragment-to-scene",level:3},{value:"\ud83d\udce4 Storing Fragment",id:"-storing-fragment",level:3},{value:"\ud83e\uddf9 Discard Fragment and Clean the Scene",id:"-discard-fragment-and-clean-the-scene",level:3}],u={toc:c},g="wrapper";function d(e){var n=e.components,t=(0,r.Z)(e,i);return(0,o.kt)(g,(0,a.Z)({},u,t,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("admonition",{title:"Source",type:"info"},(0,o.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/fragments/FragmentsManager/example.ts"},"here"),".")),(0,o.kt)("h3",{id:"-managing-fragment-efficiently"},"\ud83e\uddf6 Managing Fragment Efficiently"),(0,o.kt)("hr",null),(0,o.kt)("p",null,"Until recently, we had been adding 3D objects to the ",(0,o.kt)("strong",{parentName:"p"},"Scene")," with the traditional ",(0,o.kt)("inlineCode",{parentName:"p"},"scene.add")," API.\nWe will now use ",(0,o.kt)("strong",{parentName:"p"},(0,o.kt)("a",{parentName:"strong",href:"https://github.com/ThatOpen/engine_fragment"},"Fragment"))," to work with large BIM models.\ud83c\udfd7\ufe0f\nFragment are faster and easier to use Geometric API, which reduces draw calls and speeds up the processing of 3D objects.\nIn this tutorial, we will load and render ",(0,o.kt)("inlineCode",{parentName:"p"},".frag")," files using ",(0,o.kt)("strong",{parentName:"p"},"Fragment Manager"),"."),(0,o.kt)("admonition",{title:"First, let's set up a simple scene!",type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"\ud83d\udc40 If you haven't started there, check out ",(0,o.kt)("a",{parentName:"p",href:"SimpleScene.mdx"},"that tutorial first"),"!")),(0,o.kt)("h3",{id:"-fragment-powerhouse"},"\ud83e\udded Fragment Powerhouse"),(0,o.kt)("hr",null),(0,o.kt)("p",null,"Let's begin by including ",(0,o.kt)("a",{parentName:"p",href:"../api/classes/components.FragmentManager"},"Fragment Manager"),",\nwhich requires the parameter ",(0,o.kt)("inlineCode",{parentName:"p"},"component")," to be provided to it.\nIn terms of capabilities, Fragment Manager is a true powerhouse.\ud83c\udfed"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"const fragments = new OBC.FragmentsManager(components);\n")),(0,o.kt)("h3",{id:"-add-fragment-to-scene"},"\ud83e\udde9 Add Fragment To Scene"),(0,o.kt)("hr",null),(0,o.kt)("p",null,"Using a single API, a Fragment can be quickly added to the scene.\nEverything else is taken care of by ",(0,o.kt)("inlineCode",{parentName:"p"},"fragment.load"),", which makes it easier to render a ",(0,o.kt)("strong",{parentName:"p"},"Fragment")," file.\ud83d\udcaa\ud83d\udcaa"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},'let uuid: string = "";\n\nasync function loadFragments() {\n if (fragments.groups.size) {\n return;\n }\n const file = await fetch("../../../resources/small.frag");\n const data = await file.arrayBuffer();\n const buffer = new Uint8Array(data);\n const group = fragments.load(buffer);\n world.scene.three.add(group);\n uuid = group.uuid;\n console.log(group);\n}\n')),(0,o.kt)("admonition",{title:"Loading IFC files as Fragment",type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"You're probably wondering how IFC files can be loaded as Fragment.\nThe same approach can be used to load an IFC file with a fragment;\n",(0,o.kt)("a",{parentName:"p",href:"./FragmentIfcLoader.mdx"},"view its own tutorial")," for further information.")),(0,o.kt)("h3",{id:"-storing-fragment"},"\ud83d\udce4 Storing Fragment"),(0,o.kt)("hr",null),(0,o.kt)("p",null,(0,o.kt)("strong",{parentName:"p"},"Fragment Manager")," provides us with option to export the Fragment we have used in our Scene.\nFragment are exported to ",(0,o.kt)("strong",{parentName:"p"},(0,o.kt)("a",{parentName:"strong",href:"https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob"},"Blob")),",\nwhich can be used to generate a File and then download it.\u2197\ufe0f\nLet's see how you can use ",(0,o.kt)("inlineCode",{parentName:"p"},"fragment.export")," in your code."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},'function download(file: File) {\n const link = document.createElement("a");\n link.href = URL.createObjectURL(file);\n link.download = file.name;\n document.body.appendChild(link);\n link.click();\n link.remove();\n}\n\nfunction exportFragments() {\n if (!fragments.groups.size) {\n return;\n }\n const group = fragments.groups.get(uuid);\n if (!group) {\n return;\n }\n const data = fragments.export(group);\n const blob = new Blob([data]);\n const file = new File([blob], "small.frag");\n download(file);\n}\n')),(0,o.kt)("admonition",{title:"Creating Dynamic URLs",type:"info"},(0,o.kt)("p",{parentName:"admonition"},(0,o.kt)("inlineCode",{parentName:"p"},"URL.createObjectURL()")," comes handy when you want to generate a URL for files that were generated programmatically.\nYou can read more about it ",(0,o.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static"},"here"),".")),(0,o.kt)("h3",{id:"-discard-fragment-and-clean-the-scene"},"\ud83e\uddf9 Discard Fragment and Clean the Scene"),(0,o.kt)("hr",null),(0,o.kt)("p",null,"At some point, you will require to render numerous Fragment and discard them when not needed.\nYou can use ",(0,o.kt)("inlineCode",{parentName:"p"},"dispose()")," method which will remove the Fragment Meshes from the Scene.\u2702\ufe0f\nAfter using ",(0,o.kt)("inlineCode",{parentName:"p"},"fragments.dispose()"),", you should reinitialize ",(0,o.kt)("strong",{parentName:"p"},"Fragment Manager")," to maintain it's original state for further uses."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"function disposeFragments() {\n fragments.dispose();\n}\n")),(0,o.kt)("p",null,"Loading a .zip fragment that you have locally is also quite easy:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},'function importExternalFragment() {\n if (fragments.groups.size) {\n return;\n }\n const input = document.createElement("input");\n input.type = "file";\n input.onchange = async () => {\n if (!(input.files && input.files[0])) return;\n const file = input.files[0];\n if (file.name.includes(".frag")) {\n const url = URL.createObjectURL(file);\n const result = await fetch(url);\n const data = await result.arrayBuffer();\n const buffer = new Uint8Array(data);\n fragments.load(buffer);\n }\n input.remove();\n };\n input.click();\n}\n\nconst gui = new dat.GUI();\n\nconst actions = {\n loadFragments: () => loadFragments(),\n disposeFragments: () => disposeFragments(),\n exportFragments: () => exportFragments(),\n importExternalFragment: () => importExternalFragment(),\n};\n\ngui.add(actions, "loadFragments").name("Load Fragments");\ngui.add(actions, "disposeFragments").name("Dispose Fragments");\ngui.add(actions, "exportFragments").name("Export Fragments");\ngui.add(actions, "importExternalFragment").name("Import External Fragment");\n')),(0,o.kt)("p",null,(0,o.kt)("strong",{parentName:"p"},"Congratulations")," \ud83c\udf89 on completing this short yet powerful tutorial!\nNow you can render or export Fragment files in your BIM Apps using ",(0,o.kt)("strong",{parentName:"p"},(0,o.kt)("a",{parentName:"strong",href:"../api/classes/components.FragmentManager"},"Fragment Manager"))," \ud83c\udfaf\nLet's keep it up and check out another tutorial! \ud83c\udf93"),(0,o.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/FragmentsManager"}))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/5e8c322a.1ab4294c.js b/build/assets/js/5e8c322a.1ab4294c.js new file mode 100644 index 00000000..e24c1040 --- /dev/null +++ b/build/assets/js/5e8c322a.1ab4294c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7597],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=r.createContext({}),s=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=s(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=s(n),d=a,h=u["".concat(p,".").concat(d)]||u[d]||m[d]||o;return n?r.createElement(h,i(i({ref:t},c),{},{components:n})):r.createElement(h,i({ref:t},c))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[u]="string"==typeof e?e:a,i[1]=l;for(var s=2;s{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>p,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>u});var r=n(7462),a=n(3366),o=(n(7294),n(3905)),i=["components"],l={id:"index",title:"Open BIM Docs",sidebar_label:"Readme",sidebar_position:0,custom_edit_url:null},p=void 0,s={unversionedId:"api/index",id:"api/index",title:"Open BIM Docs",description:"TOC",source:"@site/docs/api/index.md",sourceDirName:"api",slug:"/api/",permalink:"/api/",draft:!1,editUrl:null,tags:[],version:"current",sidebarPosition:0,frontMatter:{id:"index",title:"Open BIM Docs",sidebar_label:"Readme",sidebar_position:0,custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Getting started",permalink:"/that-open-platform/getting-started"},next:{title:"Exports",permalink:"/api/modules"}},c={},u=[{value:"Local development",id:"local-development",level:2}],m={toc:u},d="wrapper";function h(e){var t=e.components,n=(0,a.Z)(e,i);return(0,o.kt)(d,(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",{align:"center"},(0,o.kt)("a",{href:"https://thatopen.com/"},"TOC"),"|",(0,o.kt)("a",{href:"https://docs.thatopen.com/intro"},"documentation"),"|",(0,o.kt)("a",{href:"https://platform.thatopen.com/app"},"demo"),"|",(0,o.kt)("a",{href:"https://people.thatopen.com/"},"community"),"|",(0,o.kt)("a",{href:"https://www.npmjs.com/package/bim-fragment"},"npm package")),(0,o.kt)("p",null,(0,o.kt)("img",{parentName:"p",src:"https://thatopen.github.io/engine_components/resources/cover.png",alt:"cover"})),(0,o.kt)("h1",{id:"that-open-docs-"},"That Open Docs ",(0,o.kt)("img",{src:"https://thatopen.github.io/engine_components/resources/favicon.ico",width:"32"})),(0,o.kt)("p",null,"This library contains the official docs for all the libraries of That Open Company."),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"It uses ",(0,o.kt)("a",{parentName:"li",href:"https://docusaurus.io/"},"docusaurus")," to build them."),(0,o.kt)("li",{parentName:"ul"},"It gathers code from our repos and build the API docs using ",(0,o.kt)("a",{parentName:"li",href:"https://typedoc.org/"},"TypeDoc"),"."),(0,o.kt)("li",{parentName:"ul"},"It gathers the HTML examples from our repos and build the tutorials.")),(0,o.kt)("p",null,"If you see anything outdated in the ",(0,o.kt)("a",{parentName:"p",href:"https://docs.thatopen.com/intro"},"docs page"),", feel free to open an issue. If the issue is specific to a specific repository, please open the issue in that repository!"),(0,o.kt)("p",null,"If you have any questions, you can also ask around in our ",(0,o.kt)("a",{parentName:"p",href:"https://people.thatopen.com/"},"community"),"."),(0,o.kt)("h2",{id:"local-development"},"Local development"),(0,o.kt)("p",null,"Requirements"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"yarn@4")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://github.com/cli/cli#installation"},(0,o.kt)("inlineCode",{parentName:"a"},"gh")," - github cli")," (make sure you've logged in with ",(0,o.kt)("inlineCode",{parentName:"li"},"gh auth login")," once)")),(0,o.kt)("p",null,"Install all dependencies"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"yarn install\n")),(0,o.kt)("p",null,"Run docusaurus local devserver"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"yarn start\n")),(0,o.kt)("p",null,(0,o.kt)("strong",{parentName:"p"},"Generating tutorials and api docs")),(0,o.kt)("p",null,"This script clonse both ",(0,o.kt)("inlineCode",{parentName:"p"},"openbim-components")," and ",(0,o.kt)("inlineCode",{parentName:"p"},"bim-fragments")," repos into a ",(0,o.kt)("inlineCode",{parentName:"p"},"temp/")," folder and generates the api docs."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"yarn build:remote\n")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/60f3e948.c7b1a83f.js b/build/assets/js/60f3e948.c7b1a83f.js new file mode 100644 index 00000000..7c98bd3c --- /dev/null +++ b/build/assets/js/60f3e948.c7b1a83f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1513],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>h});var a=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=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 p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},m=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},u="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,r=e.originalType,p=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),u=s(n),d=o,h=u["".concat(p,".").concat(d)]||u[d]||c[d]||r;return n?a.createElement(h,i(i({ref:t},m),{},{components:n})):a.createElement(h,i({ref:t},m))}));function h(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=n.length,i=new Array(r);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[u]="string"==typeof e?e:o,i[1]=l;for(var s=2;s{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>p,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>u});var a=n(7462),o=n(3366),r=(n(7294),n(3905)),i=["components"],l={},p=void 0,s={unversionedId:"Tutorials/Components/Core/MiniMap",id:"Tutorials/Components/Core/MiniMap",title:"MiniMap",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/MiniMap.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/MiniMap",permalink:"/Tutorials/Components/Core/MiniMap",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcRelationsIndexer",permalink:"/Tutorials/Components/Core/IfcRelationsIndexer"},next:{title:"OrthoPerspectiveCamera",permalink:"/Tutorials/Components/Core/OrthoPerspectiveCamera"}},m={},u=[{value:"\ud83d\uddfa\ufe0f Orientating your user in the scene",id:"\ufe0f-orientating-your-user-in-the-scene",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83c\udfe0 Loading a model",id:"-loading-a-model",level:3},{value:"\ud83d\uddfa Setting up the map",id:"-setting-up-the-map",level:3},{value:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",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}],c={toc:u},d="wrapper";function h(e){var t=e.components,n=(0,o.Z)(e,i);return(0,r.kt)(d,(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("admonition",{title:"Source",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/MiniMap/example.ts"},"here"),".")),(0,r.kt)("h3",{id:"\ufe0f-orientating-your-user-in-the-scene"},"\ud83d\uddfa\ufe0f Orientating your user in the scene"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"In this tutorial you'll learn how to use the Minimap, which is a small 2D representation of the 3D world."),(0,r.kt)("admonition",{title:"Do you mean a floorplans?",type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"Not quite. The minimap is a simple 2D representation of the 3D world. It is useful to help your user understand where they are, and to have a simple top view of their surrounding. ")),(0,r.kt)("p",null,"In this tutorial, we will import:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"Three.js")," to get some 3D entities for our app."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"@thatopen/components")," to set up the barebone of our app."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"@thatopen/ui")," to add some simple and cool UI menus."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"Stats.js")," (optional) to measure the performance of our app.")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'import Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as THREE from "three";\nimport * as OBC from "openbim-components";\n')),(0,r.kt)("h3",{id:"-setting-up-a-simple-scene"},"\ud83c\udf0e Setting up a simple scene"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"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."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\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\nworld.scene.setup();\n\ncomponents.init();\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n\nworld.camera.controls.setLookAt(1, 2, -2, -2, 0, -5);\n')),(0,r.kt)("h3",{id:"-loading-a-model"},"\ud83c\udfe0 Loading a model"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"Now that we have a scene, let's load a model. We will use the Fragment Manager for it. "),(0,r.kt)("admonition",{title:"Showing Fragments in the Scene",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"\ud83c\udfd4\ufe0f There is a dedicated tutorial on how to use Fragment Manager to load ",(0,r.kt)("strong",{parentName:"p"},"IFC files"),", check it out if you haven't already!")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const fragments = new OBC.FragmentsManager(components);\n\nconst file = await fetch("../../../../../resources/small.frag");\nconst dataBlob = await file.arrayBuffer();\nconst buffer = new Uint8Array(dataBlob);\nconst model = fragments.load(buffer);\nworld.scene.three.add(model);\n')),(0,r.kt)("h3",{id:"-setting-up-the-map"},"\ud83d\uddfa Setting up the map"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"Now, that we have our setup ready. Let's start with the exciting stuff.\nWe will use MiniMap component, which does all the work for us.\ud83d\udd2e"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const maps = new OBC.MiniMaps(components);\nconst map = maps.create(world);\n")),(0,r.kt)("p",null,"We have already created a simple DIV element with id ",(0,r.kt)("inlineCode",{parentName:"p"},"minimap")," in our HTML file. We need to fetch it to add the canvas where our minimap is rendered to it. We'll also add a rounded border to make it look better."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const mapContainer = document.getElementById("minimap") as HTMLDivElement;\nconst canvas = map.renderer.domElement;\ncanvas.style.borderRadius = "12px";\nmapContainer.append(canvas);\n')),(0,r.kt)("h3",{id:"-adding-some-ui"},"\ud83e\udde9 Adding some UI"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"We will use the ",(0,r.kt)("inlineCode",{parentName:"p"},"@thatopen/ui")," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,r.kt)("inlineCode",{parentName:"p"},"init")," method of the ",(0,r.kt)("inlineCode",{parentName:"p"},"BUI.Manager")," class to initialize the library:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"BUI.Manager.init();\n")),(0,r.kt)("p",null,"we'll also need a reference to the size of the minimap to control it:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const mapSize = map.getSize();\n")),(0,r.kt)("p",null,"Now we will create a new panel with some inputs to control the different parameters of the MiniMap, like zoom, size and front offset. For more information about the UI library, you can check the specific documentation for it!"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'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
\n \n \n \n \n \n \n
\n \n \n \n \n `;\n});\n\ndocument.body.append(panel);\n')),(0,r.kt)("h3",{id:"\ufe0f-measuring-the-performance-optional"},"\u23f1\ufe0f Measuring the performance (optional)"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"We'll use the ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/mrdoob/stats.js"},"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."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n')),(0,r.kt)("h3",{id:"-wrap-up"},"\ud83c\udf89 Wrap up"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"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."),(0,r.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/MiniMap"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/63603fbd.c1cdcce9.js b/build/assets/js/63603fbd.c1cdcce9.js new file mode 100644 index 00000000..b5c91395 --- /dev/null +++ b/build/assets/js/63603fbd.c1cdcce9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9763],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>h});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function a(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=o.createContext({}),p=function(e){var t=o.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},u=function(e){var t=p(e.components);return o.createElement(s.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),c=p(n),d=r,h=c["".concat(s,".").concat(d)]||c[d]||m[d]||i;return n?o.createElement(h,a(a({ref:t},u),{},{components:n})):o.createElement(h,a({ref:t},u))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,a=new Array(i);a[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:r,a[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>s,default:()=>h,frontMatter:()=>l,metadata:()=>p,toc:()=>c});var o=n(7462),r=n(3366),i=(n(7294),n(3905)),a=["components"],l={sidebar_position:5},s="Get involved",p={unversionedId:"components/contributing",id:"components/contributing",title:"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.",source:"@site/docs/components/contributing.md",sourceDirName:"components",slug:"/components/contributing",permalink:"/components/contributing",draft:!1,tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Tutorial paths",permalink:"/components/tutorial-paths"},next:{title:"Getting started",permalink:"/that-open-platform/getting-started"}},u={},c=[{value:"Spotting bugs",id:"spotting-bugs",level:2},{value:"Visiting the community",id:"visiting-the-community",level:2},{value:"Coding",id:"coding",level:2},{value:"Pick a repository",id:"pick-a-repository",level:3},{value:"Pick or create an issue",id:"pick-or-create-an-issue",level:3},{value:"Start coding",id:"start-coding",level:3}],m={toc:c},d="wrapper";function h(e){var t=e.components,n=(0,r.Z)(e,a);return(0,i.kt)(d,(0,o.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"get-involved"},"Get involved"),(0,i.kt)("p",null,"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."),(0,i.kt)("p",null,"There are basically 3 places where you can help:"),(0,i.kt)("h2",{id:"spotting-bugs"},"Spotting bugs"),(0,i.kt)("p",null,"Have you found a bug / something to improve? Create an issue (if it doesn't exist yet) so that we can start working on it!"),(0,i.kt)("h2",{id:"visiting-the-community"},"Visiting the community"),(0,i.kt)("p",null,"Our ",(0,i.kt)("a",{parentName:"p",href:"https://people.thatopen.com/"},"community")," is the heart of our project. It's the place where all BIM software developers meet, share their wins and learn from each other."),(0,i.kt)("p",null,"You can be part of it by:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Showing us what you built with IFC.js!")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Answer questions of other BIM software developers.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Sharing resources / tutorials")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Starting interesting debates and conversations"))),(0,i.kt)("h2",{id:"coding"},"Coding"),(0,i.kt)("admonition",{title:"What you'll need",type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"The knowledge you need to help us depend on which part of the libraries you want to help us with. In general, basic knowledge of web development, TypeScript and Three.js should suffice. If you are not sure, don't hesitate to ask us!")),(0,i.kt)("p",null,"This includes adding features that you miss, enhancing existing features, fixing bugs or writing tests. The steps to contribute are the following:"),(0,i.kt)("h3",{id:"pick-a-repository"},"Pick a repository"),(0,i.kt)("p",null,"We have ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/"},"multiple libraries"),", and you might be interested in contributing in a specific one. Some of them are:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/"},"components"),": our main library. It contains a bunch of tools to create 3D BIM software in no time, like 3D measurements, clipping planes, DXF exporters, etc. If you like fun 3D features and Three.js, start here!")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_web-ifc/"},"web-ifc"),": our IFC engine. It's written in C++ and compiled with WebAssembly. It's pretty low level, but not hard at all once you get started. If you are interested in the details of reading and writing IFC, C++ or WebAssembly, start here!"))),(0,i.kt)("h3",{id:"pick-or-create-an-issue"},"Pick or create an issue"),(0,i.kt)("p",null,"Create a new issue telling us what you want to do, or pick an existing issue and tell us that you will do it. That way, we'll make sure that nobody else is working on it. We'll also give you some pointers to help you get started!"),(0,i.kt)("p",null,"We'll also make sure to include it in the roadmap."),(0,i.kt)("h3",{id:"start-coding"},"Start coding"),(0,i.kt)("p",null,"To add / edit code of the library, you will need to:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Create a fork of the repository")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Work on your fork of the repository locally. Please follow the ",(0,i.kt)("a",{parentName:"p",href:"/components/clean-components-guide"},"basic clean rules"),"!")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},"Create a pull request. The name should follow the ",(0,i.kt)("a",{parentName:"p",href:"https://www.conventionalcommits.org/en/v1.0.0/"},"conventional commits")," convention. If you are not sure, check out the title past pull requests!"))),(0,i.kt)("p",null,"Then, someone from our team will reviewed it and, if everything is ok, merge it. That's it! Easy, right? \ud83d\ude0b We'll help you get started and give you anything you needs, so don't hesitate to reach out!"))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/63ea579c.ad7d04eb.js b/build/assets/js/63ea579c.ad7d04eb.js new file mode 100644 index 00000000..befd4a52 --- /dev/null +++ b/build/assets/js/63ea579c.ad7d04eb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8648],{3905:(e,t,a)=>{a.d(t,{Zo:()=>m,kt:()=>f});var n=a(7294);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function p(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var l=n.createContext({}),s=function(e){var t=n.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):p(p({},t),e)),a},m=function(e){var t=s(e.components);return n.createElement(l.Provider,{value:t},e.children)},c="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},h=n.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,m=i(e,["components","mdxType","originalType","parentName"]),c=s(a),h=r,f=c["".concat(l,".").concat(h)]||c[h]||u[h]||o;return a?n.createElement(f,p(p({ref:t},m),{},{components:a})):n.createElement(f,p({ref:t},m))}));function f(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,p=new Array(o);p[0]=h;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i[c]="string"==typeof e?e:r,p[1]=i;for(var s=2;s{a.r(t),a.d(t,{assets:()=>m,contentTitle:()=>l,default:()=>f,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var n=a(7462),r=a(3366),o=(a(7294),a(3905)),p=["components"],i={id:"thatopen_components",title:"Module: @thatopen/components",sidebar_label:"@thatopen/components",sidebar_position:0,custom_edit_url:null},l=void 0,s={unversionedId:"api/modules/thatopen_components",id:"api/modules/thatopen_components",title:"Module: @thatopen/components",description:"Classes",source:"@site/docs/api/modules/thatopen_components.md",sourceDirName:"api/modules",slug:"/api/modules/thatopen_components",permalink:"/api/modules/thatopen_components",draft:!1,editUrl:null,tags:[],version:"current",sidebarPosition:0,frontMatter:{id:"thatopen_components",title:"Module: @thatopen/components",sidebar_label:"@thatopen/components",sidebar_position:0,custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Exports",permalink:"/api/modules"},next:{title:"@thatopen/components-front",permalink:"/api/modules/thatopen_components_front"}},m={},c=[{value:"Classes",id:"classes",level:2},{value:"Interfaces",id:"interfaces",level:2},{value:"Type Aliases",id:"type-aliases",level:2},{value:"CameraProjection",id:"cameraprojection",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"NavModeID",id:"navmodeid",level:3},{value:"Defined in",id:"defined-in-1",level:4}],u={toc:c},h="wrapper";function f(e){var t=e.components,a=(0,r.Z)(e,p);return(0,o.kt)(h,(0,n.Z)({},u,a,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h2",{id:"classes"},"Classes"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.AsyncEvent"},"AsyncEvent")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Base"},"Base")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.BaseWorldItem"},"BaseWorldItem")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.BoundingBoxer"},"BoundingBoxer")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Clipper"},"Clipper")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Component"},"Component")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Components"},"Components")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.CullerRenderer"},"CullerRenderer")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Cullers"},"Cullers")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Disposer"},"Disposer")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Event"},"Event")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.FirstPersonMode"},"FirstPersonMode")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.FragmentsManager"},"FragmentsManager")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.IfcJsonExporter"},"IfcJsonExporter")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.IfcRelationsIndexer"},"IfcRelationsIndexer")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.IfcStreamingSettings"},"IfcStreamingSettings")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.MeshCullerRenderer"},"MeshCullerRenderer")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.OrbitMode"},"OrbitMode")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.OrthoPerspectiveCamera"},"OrthoPerspectiveCamera")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.PlanMode"},"PlanMode")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.ProjectionManager"},"ProjectionManager")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.PropertiesStreamingSettings"},"PropertiesStreamingSettings")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.SimplePlane"},"SimplePlane")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.SimpleRenderer"},"SimpleRenderer")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.SimpleScene"},"SimpleScene"))),(0,o.kt)("h2",{id:"interfaces"},"Interfaces"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.BVHGeometry"},"BVHGeometry")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.CameraControllable"},"CameraControllable")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Createable"},"Createable")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Progress"},"Progress")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"))),(0,o.kt)("h2",{id:"type-aliases"},"Type Aliases"),(0,o.kt)("h3",{id:"cameraprojection"},"CameraProjection"),(0,o.kt)("p",null,"\u01ac ",(0,o.kt)("strong",{parentName:"p"},"CameraProjection"),": ",(0,o.kt)("inlineCode",{parentName:"p"},'"Perspective"')," ","|"," ",(0,o.kt)("inlineCode",{parentName:"p"},'"Orthographic"')),(0,o.kt)("p",null,"The projection system of the camera."),(0,o.kt)("h4",{id:"defined-in"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/types.ts#L4"},"packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:4")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"navmodeid"},"NavModeID"),(0,o.kt)("p",null,"\u01ac ",(0,o.kt)("strong",{parentName:"p"},"NavModeID"),": ",(0,o.kt)("inlineCode",{parentName:"p"},'"Orbit"')," ","|"," ",(0,o.kt)("inlineCode",{parentName:"p"},'"FirstPerson"')," ","|"," ",(0,o.kt)("inlineCode",{parentName:"p"},'"Plan"')),(0,o.kt)("p",null,"The extensible list of supported navigation modes."),(0,o.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/types.ts#L9"},"packages/core/src/core/OrthoPerspectiveCamera/src/types.ts:9")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/6aecd34e.d59b49b4.js b/build/assets/js/6aecd34e.d59b49b4.js new file mode 100644 index 00000000..8ad89dd7 --- /dev/null +++ b/build/assets/js/6aecd34e.d59b49b4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5260],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),p=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=p(e.components);return a.createElement(s.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),m=p(n),c=r,f=m["".concat(s,".").concat(c)]||m[c]||u[c]||i;return n?a.createElement(f,l(l({ref:t},d),{},{components:n})):a.createElement(f,l({ref:t},d))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,l=new Array(i);l[0]=c;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o[m]="string"==typeof e?e:r,l[1]=o;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>f,frontMatter:()=>o,metadata:()=>p,toc:()=>m});var a=n(7462),r=n(3366),i=(n(7294),n(3905)),l=["components"],o={id:"thatopen_components_front.LengthMeasurement",title:"Class: LengthMeasurement",sidebar_label:"LengthMeasurement",custom_edit_url:null},s=void 0,p={unversionedId:"api/classes/thatopen_components_front.LengthMeasurement",id:"api/classes/thatopen_components_front.LengthMeasurement",title:"Class: LengthMeasurement",description:"@thatopen/components-front.LengthMeasurement",source:"@site/docs/api/classes/thatopen_components_front.LengthMeasurement.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components_front.LengthMeasurement",permalink:"/api/classes/thatopen_components_front.LengthMeasurement",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components_front.LengthMeasurement",title:"Class: LengthMeasurement",sidebar_label:"LengthMeasurement",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"EdgesPlane",permalink:"/api/classes/thatopen_components_front.EdgesPlane"},next:{title:"Marker",permalink:"/api/classes/thatopen_components_front.Marker"}},d={},m=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"snapDistance",id:"snapdistance",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"Methods",id:"methods",level:2},{value:"cancelCreation",id:"cancelcreation",level:3},{value:"Returns",id:"returns",level:4},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"create",id:"create",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"delete",id:"delete",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Implementation of",id:"implementation-of-2",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"deleteAll",id:"deleteall",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Implementation of",id:"implementation-of-3",level:4},{value:"Defined in",id:"defined-in-5",level:4}],u={toc:m},c="wrapper";function f(e){var t=e.components,n=(0,r.Z)(e,l);return(0,i.kt)(c,(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components_front"},"@thatopen/components-front"),".LengthMeasurement"),(0,i.kt)("p",null,"A basic dimension tool to measure distances between 2 points in 3D and\ndisplay a 3D symbol displaying the numeric value."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"Component")),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"LengthMeasurement"))))),(0,i.kt)("h2",{id:"implements"},"Implements"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"Createable")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"Hideable")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"Disposable")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"Updateable"))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"snapdistance"},"snapDistance"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"snapDistance"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"number")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"0.25")),(0,i.kt)("p",null,"The minimum distance to force the dimension cursor to a vertex."),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/measurement/LengthMeasurement/index.ts#L24"},"packages/front/src/measurement/LengthMeasurement/index.ts:24")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"cancelcreation"},"cancelCreation"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"cancelCreation"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Cancels the drawing of the current dimension."),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,i.kt)("p",null,"OBC.Createable.cancelCreation"),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/measurement/LengthMeasurement/index.ts#L178"},"packages/front/src/measurement/LengthMeasurement/index.ts:178")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"create"},"create"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"create"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"data?"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Starts or finishes drawing a new dimension line."),(0,i.kt)("h4",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"data?")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"any")),(0,i.kt)("td",{parentName:"tr",align:"left"},"forces the dimension to be drawn on a plane. Use this if you are drawing dimensions in floor plan navigation.")))),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,i.kt)("p",null,"OBC.Createable.create"),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/measurement/LengthMeasurement/index.ts#L119"},"packages/front/src/measurement/LengthMeasurement/index.ts:119")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"delete"},"delete"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"delete"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Deletes the dimension that the user is hovering over with the mouse or touch event."),(0,i.kt)("h4",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"implementation-of-2"},"Implementation of"),(0,i.kt)("p",null,"OBC.Createable.delete"),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/measurement/LengthMeasurement/index.ts#L138"},"packages/front/src/measurement/LengthMeasurement/index.ts:138")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"deleteall"},"deleteAll"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"deleteAll"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Deletes all the dimensions that have been previously created."),(0,i.kt)("h4",{id:"returns-3"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/measurement/LengthMeasurement/index.ts#L170"},"packages/front/src/measurement/LengthMeasurement/index.ts:170")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"dispose"},"dispose"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Disposable.dispose"),(0,i.kt)("h4",{id:"returns-4"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"implementation-of-3"},"Implementation of"),(0,i.kt)("p",null,"OBC.Disposable.dispose"),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/measurement/LengthMeasurement/index.ts#L93"},"packages/front/src/measurement/LengthMeasurement/index.ts:93")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/6ff4b68b.6518a81b.js b/build/assets/js/6ff4b68b.6518a81b.js new file mode 100644 index 00000000..b3a6d0b4 --- /dev/null +++ b/build/assets/js/6ff4b68b.6518a81b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6015],{3905:(e,n,t)=>{t.d(n,{Zo:()=>d,kt:()=>h});var a=t(7294);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function s(e){for(var n=1;n=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var p=a.createContext({}),l=function(e){var n=a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):s(s({},n),e)),t},d=function(e){var n=l(e.components);return a.createElement(p.Provider,{value:n},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.createElement(a.Fragment,{},n)}},u=a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,o=e.originalType,p=e.parentName,d=r(e,["components","mdxType","originalType","parentName"]),c=l(t),u=i,h=c["".concat(p,".").concat(u)]||c[u]||m[u]||o;return t?a.createElement(h,s(s({ref:n},d),{},{components:t})):a.createElement(h,s({ref:n},d))}));function h(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var o=t.length,s=new Array(o);s[0]=u;var r={};for(var p in n)hasOwnProperty.call(n,p)&&(r[p]=n[p]);r.originalType=e,r[c]="string"==typeof e?e:i,s[1]=r;for(var l=2;l{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>p,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>c});var a=t(7462),i=t(3366),o=(t(7294),t(3905)),s=["components"],r={id:"thatopen_components.BoundingBoxer",title:"Class: BoundingBoxer",sidebar_label:"BoundingBoxer",custom_edit_url:null},p=void 0,l={unversionedId:"api/classes/thatopen_components.BoundingBoxer",id:"api/classes/thatopen_components.BoundingBoxer",title:"Class: BoundingBoxer",description:"@thatopen/components.BoundingBoxer",source:"@site/docs/api/classes/thatopen_components.BoundingBoxer.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.BoundingBoxer",permalink:"/api/classes/thatopen_components.BoundingBoxer",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.BoundingBoxer",title:"Class: BoundingBoxer",sidebar_label:"BoundingBoxer",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"BaseWorldItem",permalink:"/api/classes/thatopen_components.BaseWorldItem"},next:{title:"Clipper",permalink:"/api/classes/thatopen_components.Clipper"}},d={},c=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Overrides",id:"overrides",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-5",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-7",level:4}],m={toc:c},u="wrapper";function h(e){var n=e.components,t=(0,i.Z)(e,s);return(0,o.kt)(u,(0,a.Z)({},m,t,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".BoundingBoxer"),(0,o.kt)("p",null,"A simple implementation of bounding box that works for fragments. The resulting bbox is not 100% precise, but\nit's fast, and should suffice for general use cases such as camera zooming or general boundary determination."),(0,o.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},(0,o.kt)("inlineCode",{parentName:"a"},"Component"))),(0,o.kt)("p",{parentName:"li"},"\u21b3 ",(0,o.kt)("strong",{parentName:"p"},(0,o.kt)("inlineCode",{parentName:"strong"},"BoundingBoxer"))))),(0,o.kt)("h2",{id:"implements"},"Implements"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Disposable"},(0,o.kt)("inlineCode",{parentName:"a"},"Disposable")))),(0,o.kt)("h2",{id:"properties"},"Properties"),(0,o.kt)("h3",{id:"enabled"},"enabled"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("strong",{parentName:"p"},"enabled"),": ",(0,o.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,o.kt)("inlineCode",{parentName:"p"},"true")),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,o.kt)("h4",{id:"overrides"},"Overrides"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"enabled")),(0,o.kt)("h4",{id:"defined-in"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/BoundingBoxer/index.ts#L14"},"packages/core/src/fragments/BoundingBoxer/index.ts:14")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,o.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,o.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,o.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,o.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"onDisposed")),(0,o.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/BoundingBoxer/index.ts#L17"},"packages/core/src/fragments/BoundingBoxer/index.ts:17")),(0,o.kt)("h2",{id:"methods"},"Methods"),(0,o.kt)("h3",{id:"dispose"},"dispose"),(0,o.kt)("p",null,"\u25b8 ",(0,o.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,o.kt)("inlineCode",{parentName:"p"},"void")),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"Disposable.dispose")),(0,o.kt)("h4",{id:"returns"},"Returns"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"void")),(0,o.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"dispose")),(0,o.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/BoundingBoxer/index.ts#L68"},"packages/core/src/fragments/BoundingBoxer/index.ts:68")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,o.kt)("p",null,"\u25b8 ",(0,o.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,o.kt)("p",null,"Whether is component is ",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,o.kt)("h4",{id:"returns-1"},"Returns"),(0,o.kt)("p",null,"this is Configurable"),(0,o.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isconfigurable"},"isConfigurable")),(0,o.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,o.kt)("p",null,"\u25b8 ",(0,o.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,o.kt)("p",null,"Whether is component is ",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,o.kt)("h4",{id:"returns-2"},"Returns"),(0,o.kt)("p",null,"this is Disposable"),(0,o.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isdisposeable"},"isDisposeable")),(0,o.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"ishideable"},"isHideable"),(0,o.kt)("p",null,"\u25b8 ",(0,o.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,o.kt)("p",null,"Whether is component is ",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,o.kt)("h4",{id:"returns-3"},"Returns"),(0,o.kt)("p",null,"this is Hideable"),(0,o.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#ishideable"},"isHideable")),(0,o.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,o.kt)("p",null,"\u25b8 ",(0,o.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,o.kt)("p",null,"Whether is component is ",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,o.kt)("h4",{id:"returns-4"},"Returns"),(0,o.kt)("p",null,"this is Resizeable"),(0,o.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isresizeable"},"isResizeable")),(0,o.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,o.kt)("p",null,"\u25b8 ",(0,o.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,o.kt)("p",null,"Whether is component is ",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,o.kt)("h4",{id:"returns-5"},"Returns"),(0,o.kt)("p",null,"this is Updateable"),(0,o.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isupdateable"},"isUpdateable")),(0,o.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/72d46929.e87dbb52.js b/build/assets/js/72d46929.e87dbb52.js new file mode 100644 index 00000000..eba87129 --- /dev/null +++ b/build/assets/js/72d46929.e87dbb52.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6811],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>h});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function s(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=o.createContext({}),c=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},p=function(e){var t=c(e.components);return o.createElement(l.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=c(n),d=r,h=u["".concat(l,".").concat(d)]||u[d]||m[d]||a;return n?o.createElement(h,s(s({ref:t},p),{},{components:n})):o.createElement(h,s({ref:t},p))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,s=new Array(a);s[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i[u]="string"==typeof e?e:r,s[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>c,toc:()=>u});var o=n(7462),r=n(3366),a=(n(7294),n(3905)),s=["components"],i={},l=void 0,c={unversionedId:"Tutorials/Components/Core/Raycasters",id:"Tutorials/Components/Core/Raycasters",title:"Raycasters",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/Raycasters.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/Raycasters",permalink:"/Tutorials/Components/Core/Raycasters",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"OrthoPerspectiveCamera",permalink:"/Tutorials/Components/Core/OrthoPerspectiveCamera"},next:{title:"Worlds",permalink:"/Tutorials/Components/Core/Worlds"}},p={},u=[{value:"\ud83d\udc01 Picking things with the mouse",id:"-picking-things-with-the-mouse",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83e\uddca Adding some cubes to the scene",id:"-adding-some-cubes-to-the-scene",level:3},{value:"\u26a1 Setting up the raycaster",id:"-setting-up-the-raycaster",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}],m={toc:u},d="wrapper";function h(e){var t=e.components,n=(0,r.Z)(e,s);return(0,a.kt)(d,(0,o.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/Raycasters/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"-picking-things-with-the-mouse"},"\ud83d\udc01 Picking things with the mouse"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"In this tutorial you'll learn how to use the Raycaster to pick objects in the scene with the mouse."),(0,a.kt)("admonition",{title:"What's ray casting?",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"Ray casting is the process of casting a ray from a point in space to another point in space. We will cast a ray from the mouse position to the 3D world and check if there is an object in its way. That way, when you hover or click on an object, we can know which one it is and do something with it.")),(0,a.kt)("p",null,"In this tutorial, we will import:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Three.js")," to get some 3D entities for our app."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"@thatopen/components")," to set up the barebone of our app."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Stats.js")," (optional) to measure the performance of our app.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import * as THREE from "three";\nimport Stats from "stats.js";\nimport * as OBC from "openbim-components";\n')),(0,a.kt)("h3",{id:"-setting-up-a-simple-scene"},"\ud83c\udf0e Setting up a simple scene"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"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."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\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(10, 10, 10, 0, 0, 0);\n\nworld.scene.setup();\n')),(0,a.kt)("h3",{id:"-adding-some-cubes-to-the-scene"},"\ud83e\uddca Adding some cubes to the scene"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now we will add some cubes to the scene and create some materials. The idea for this app is simple: when you click on a cube, it will change its color to green."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });\nconst greenMaterial = new THREE.MeshStandardMaterial({ color: "#BCF124" });\n\nconst boxGeometry = new THREE.BoxGeometry(3, 3, 3);\n\nconst cube1 = new THREE.Mesh(boxGeometry, cubeMaterial);\nconst cube2 = new THREE.Mesh(boxGeometry, cubeMaterial);\nconst cube3 = new THREE.Mesh(boxGeometry, cubeMaterial);\nworld.scene.three.add(cube1, cube2, cube3);\nconst cubes = [cube1, cube2, cube3];\n\ncube2.position.x = 5;\ncube3.position.x = -5;\n')),(0,a.kt)("p",null,"To make this more interesting, we will add a rotation to the cubes. We can do it by subscribing to the ",(0,a.kt)("inlineCode",{parentName:"p"},"onBeforeUpdate")," event of the world, which fires 60 times per second."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const oneDegree = Math.PI / 180;\n\nfunction rotateCubes() {\n cube1.rotation.x += oneDegree;\n cube1.rotation.y += oneDegree;\n cube2.rotation.x += oneDegree;\n cube2.rotation.z += oneDegree;\n cube3.rotation.y += oneDegree;\n cube3.rotation.z += oneDegree;\n}\n\nworld.renderer.onBeforeUpdate.add(rotateCubes);\n")),(0,a.kt)("h3",{id:"-setting-up-the-raycaster"},"\u26a1 Setting up the raycaster"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Next, we will set up the raycaster. We will use the ",(0,a.kt)("inlineCode",{parentName:"p"},"Raycasters")," component. Instead of instantiating it, we will get it from the ",(0,a.kt)("inlineCode",{parentName:"p"},"components")," object, which is usually safer, as all components are meant to be singletons."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const casters = components.get(OBC.Raycasters);\n")),(0,a.kt)("p",null,"Each raycaster is bound to a specific world. In this case, we will get the raycaster from the ",(0,a.kt)("inlineCode",{parentName:"p"},"world")," we are using for our scene:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const caster = casters.get(world);\n")),(0,a.kt)("p",null,"Finally, we will subscribe to the mousemove event of the window. We will use the ",(0,a.kt)("inlineCode",{parentName:"p"},"castRay")," method of the raycaster to find out if the mouse is over a cube. If it is, we will change its color to green. Otherwise, we will change its color to the original color."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"let previousSelection: THREE.Mesh | null = null;\n\nwindow.onmousemove = () => {\n const result = caster.castRay(cubes);\n if (previousSelection) {\n previousSelection.material = cubeMaterial;\n }\n if (!result || !(result.object instanceof THREE.Mesh)) {\n return;\n }\n result.object.material = greenMaterial;\n previousSelection = result.object;\n};\n")),(0,a.kt)("h3",{id:"\ufe0f-measuring-the-performance-optional"},"\u23f1\ufe0f Measuring the performance (optional)"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"We'll use the ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/mrdoob/stats.js"},"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."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n')),(0,a.kt)("h3",{id:"-wrap-up"},"\ud83c\udf89 Wrap up"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"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."),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/Raycasters"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/733d79ef.d0ee394f.js b/build/assets/js/733d79ef.d0ee394f.js new file mode 100644 index 00000000..3ccefac8 --- /dev/null +++ b/build/assets/js/733d79ef.d0ee394f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2720],{3905:(e,t,a)=>{a.d(t,{Zo:()=>d,kt:()=>h});var n=a(7294);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=n.createContext({}),o=function(e){var t=n.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},d=function(e){var t=o(e.components);return n.createElement(s.Provider,{value:t},e.children)},m="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},u=n.forwardRef((function(e,t){var a=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,d=p(e,["components","mdxType","originalType","parentName"]),m=o(a),u=r,h=m["".concat(s,".").concat(u)]||m[u]||c[u]||i;return a?n.createElement(h,l(l({ref:t},d),{},{components:a})):n.createElement(h,l({ref:t},d))}));function h(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=a.length,l=new Array(i);l[0]=u;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p[m]="string"==typeof e?e:r,l[1]=p;for(var o=2;o{a.r(t),a.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>p,metadata:()=>o,toc:()=>m});var n=a(7462),r=a(3366),i=(a(7294),a(3905)),l=["components"],p={id:"thatopen_components.SimpleCamera",title:"Class: SimpleCamera",sidebar_label:"SimpleCamera",custom_edit_url:null},s=void 0,o={unversionedId:"api/classes/thatopen_components.SimpleCamera",id:"api/classes/thatopen_components.SimpleCamera",title:"Class: SimpleCamera",description:"@thatopen/components.SimpleCamera",source:"@site/docs/api/classes/thatopen_components.SimpleCamera.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.SimpleCamera",permalink:"/api/classes/thatopen_components.SimpleCamera",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.SimpleCamera",title:"Class: SimpleCamera",sidebar_label:"SimpleCamera",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"PropertiesStreamingSettings",permalink:"/api/classes/thatopen_components.PropertiesStreamingSettings"},next:{title:"SimplePlane",permalink:"/api/classes/thatopen_components.SimplePlane"}},d={},m=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"onAfterUpdate",id:"onafterupdate",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"onBeforeUpdate",id:"onbeforeupdate",level:3},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"Accessors",id:"accessors",level:2},{value:"controls",id:"controls",level:3},{value:"Returns",id:"returns",level:4},{value:"Overrides",id:"overrides",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"enabled",id:"enabled",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Overrides",id:"overrides-1",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Overrides",id:"overrides-2",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Implementation of",id:"implementation-of-3",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"hasCameraControls",id:"hascameracontrols",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-5",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-7",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-8",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-9",level:4},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"Defined in",id:"defined-in-12",level:4},{value:"update",id:"update",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-10",level:4},{value:"Implementation of",id:"implementation-of-4",level:4},{value:"Defined in",id:"defined-in-13",level:4},{value:"updateAspect",id:"updateaspect",level:3},{value:"Returns",id:"returns-11",level:4},{value:"Defined in",id:"defined-in-14",level:4}],c={toc:m},u="wrapper";function h(e){var t=e.components,a=(0,r.Z)(e,l);return(0,i.kt)(u,(0,n.Z)({},c,a,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".SimpleCamera"),(0,i.kt)("p",null,"A basic camera that uses\n",(0,i.kt)("a",{parentName:"p",href:"https://github.com/yomotsu/camera-controls"},"yomotsu's cameracontrols")," to\neasily control the camera in 2D and 3D. Check out it's API to find out\nwhat features it offers."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"BaseCamera")),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"SimpleCamera"))),(0,i.kt)("p",{parentName:"li"},"\u21b3\u21b3 ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.OrthoPerspectiveCamera"},(0,i.kt)("inlineCode",{parentName:"a"},"OrthoPerspectiveCamera"))))),(0,i.kt)("h2",{id:"implements"},"Implements"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Updateable"},(0,i.kt)("inlineCode",{parentName:"a"},"Updateable"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Disposable"},(0,i.kt)("inlineCode",{parentName:"a"},"Disposable")))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"onafterupdate"},"onAfterUpdate"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onAfterUpdate"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},(0,i.kt)("inlineCode",{parentName:"a"},"SimpleCamera")),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#onafterupdate"},"Updateable.onAfterUpdate")),(0,i.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#onafterupdate"},"onAfterUpdate")),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L23"},"packages/core/src/core/Worlds/src/simple-camera.ts:23")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"onbeforeupdate"},"onBeforeUpdate"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onBeforeUpdate"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},(0,i.kt)("inlineCode",{parentName:"a"},"SimpleCamera")),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#onbeforeupdate"},"Updateable.onBeforeUpdate")),(0,i.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#onbeforeupdate"},"onBeforeUpdate")),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L20"},"packages/core/src/core/Worlds/src/simple-camera.ts:20")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"string"),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,i.kt)("h4",{id:"implementation-of-2"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"onDisposed")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L28"},"packages/core/src/core/Worlds/src/simple-camera.ts:28")),(0,i.kt)("h2",{id:"accessors"},"Accessors"),(0,i.kt)("h3",{id:"controls"},"controls"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"get")," ",(0,i.kt)("strong",{parentName:"p"},"controls"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"CameraControls")),(0,i.kt)("p",null,"The object that controls the camera. An instance of\n",(0,i.kt)("a",{parentName:"p",href:"https://github.com/yomotsu/camera-controls"},"yomotsu's cameracontrols"),".\nTransforming the camera directly will have no effect: you need to use this\nobject to move, rotate, look at objects, etc."),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"CameraControls")),(0,i.kt)("h4",{id:"overrides"},"Overrides"),(0,i.kt)("p",null,"BaseCamera.controls"),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L40"},"packages/core/src/core/Worlds/src/simple-camera.ts:40")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"enabled"},"enabled"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"get")," ",(0,i.kt)("strong",{parentName:"p"},"enabled"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"boolean")),(0,i.kt)("h4",{id:"overrides-1"},"Overrides"),(0,i.kt)("p",null,"BaseCamera.enabled"),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L52"},"packages/core/src/core/Worlds/src/simple-camera.ts:52")),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"set")," ",(0,i.kt)("strong",{parentName:"p"},"enabled"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"enabled"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,i.kt)("h4",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"enabled")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean"))))),(0,i.kt)("h4",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"overrides-2"},"Overrides"),(0,i.kt)("p",null,"BaseCamera.enabled"),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L60"},"packages/core/src/core/Worlds/src/simple-camera.ts:60")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"dispose"},"dispose"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"Disposable.dispose")),(0,i.kt)("h4",{id:"returns-3"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"implementation-of-3"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"dispose")),(0,i.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L90"},"packages/core/src/core/Worlds/src/simple-camera.ts:90")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"hascameracontrols"},"hasCameraControls"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"hasCameraControls"),"(): this is CameraControllable"),(0,i.kt)("p",null,"Whether is instance is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.CameraControllable"},"CameraControllable"),"."),(0,i.kt)("h4",{id:"returns-4"},"Returns"),(0,i.kt)("p",null,"this is CameraControllable"),(0,i.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,i.kt)("p",null,"BaseCamera.hasCameraControls"),(0,i.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-camera.ts#L13"},"packages/core/src/core/Types/src/base-camera.ts:13")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,i.kt)("h4",{id:"returns-5"},"Returns"),(0,i.kt)("p",null,"this is Configurable"),(0,i.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,i.kt)("p",null,"BaseCamera.isConfigurable"),(0,i.kt)("h4",{id:"defined-in-8"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,i.kt)("h4",{id:"returns-6"},"Returns"),(0,i.kt)("p",null,"this is Disposable"),(0,i.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,i.kt)("p",null,"BaseCamera.isDisposeable"),(0,i.kt)("h4",{id:"defined-in-9"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ishideable"},"isHideable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,i.kt)("h4",{id:"returns-7"},"Returns"),(0,i.kt)("p",null,"this is Hideable"),(0,i.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,i.kt)("p",null,"BaseCamera.isHideable"),(0,i.kt)("h4",{id:"defined-in-10"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,i.kt)("h4",{id:"returns-8"},"Returns"),(0,i.kt)("p",null,"this is Resizeable"),(0,i.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,i.kt)("p",null,"BaseCamera.isResizeable"),(0,i.kt)("h4",{id:"defined-in-11"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,i.kt)("h4",{id:"returns-9"},"Returns"),(0,i.kt)("p",null,"this is Updateable"),(0,i.kt)("h4",{id:"inherited-from-5"},"Inherited from"),(0,i.kt)("p",null,"BaseCamera.isUpdateable"),(0,i.kt)("h4",{id:"defined-in-12"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"update"},"update"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"update"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"_delta"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#update"},"Updateable.update")),(0,i.kt)("h4",{id:"parameters-1"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"_delta")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"number"))))),(0,i.kt)("h4",{id:"returns-10"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"implementation-of-4"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#update"},"update")),(0,i.kt)("h4",{id:"defined-in-13"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L105"},"packages/core/src/core/Worlds/src/simple-camera.ts:105")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"updateaspect"},"updateAspect"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"updateAspect"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Updates the aspect of the camera to match the size of the\nComponents.renderer."),(0,i.kt)("h4",{id:"returns-11"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-14"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L117"},"packages/core/src/core/Worlds/src/simple-camera.ts:117")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/746b65d1.0f610a0c.js b/build/assets/js/746b65d1.0f610a0c.js new file mode 100644 index 00000000..953d3f7e --- /dev/null +++ b/build/assets/js/746b65d1.0f610a0c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1625],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>g});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},d="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,g=d["".concat(s,".").concat(m)]||d[m]||f[m]||i;return n?r.createElement(g,o(o({ref:t},c),{},{components:n})):r.createElement(g,o({ref:t},c))}));function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[d]="string"==typeof e?e:a,o[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>g,frontMatter:()=>l,metadata:()=>p,toc:()=>d});var r=n(7462),a=n(3366),i=(n(7294),n(3905)),o=["components"],l={id:"thatopen_components.PropertiesStreamingSettings",title:"Class: PropertiesStreamingSettings",sidebar_label:"PropertiesStreamingSettings",custom_edit_url:null},s=void 0,p={unversionedId:"api/classes/thatopen_components.PropertiesStreamingSettings",id:"api/classes/thatopen_components.PropertiesStreamingSettings",title:"Class: PropertiesStreamingSettings",description:"@thatopen/components.PropertiesStreamingSettings",source:"@site/docs/api/classes/thatopen_components.PropertiesStreamingSettings.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.PropertiesStreamingSettings",permalink:"/api/classes/thatopen_components.PropertiesStreamingSettings",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.PropertiesStreamingSettings",title:"Class: PropertiesStreamingSettings",sidebar_label:"PropertiesStreamingSettings",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"ProjectionManager",permalink:"/api/classes/thatopen_components.ProjectionManager"},next:{title:"SimpleCamera",permalink:"/api/classes/thatopen_components.SimpleCamera"}},c={},d=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Properties",id:"properties",level:2},{value:"coordinate",id:"coordinate",level:3},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"excludedCategories",id:"excludedcategories",level:3},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"includeProperties",id:"includeproperties",level:3},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"optionalCategories",id:"optionalcategories",level:3},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"saveLocations",id:"savelocations",level:3},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"wasm",id:"wasm",level:3},{value:"Type declaration",id:"type-declaration",level:4},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"webIfc",id:"webifc",level:3},{value:"Inherited from",id:"inherited-from-6",level:4},{value:"Defined in",id:"defined-in-6",level:4}],f={toc:d},m="wrapper";function g(e){var t=e.components,n=(0,a.Z)(e,o);return(0,i.kt)(m,(0,r.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".PropertiesStreamingSettings"),(0,i.kt)("p",null,"Configuration of the IFC-fragment streaming."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"IfcFragmentSettings")),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"PropertiesStreamingSettings"))))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"coordinate"},"coordinate"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"coordinate"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"true")),(0,i.kt)("p",null,"Whether to use the coordination data coming from the IFC files."),(0,i.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.coordinate"),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L15"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:15")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"excludedcategories"},"excludedCategories"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"excludedCategories"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"Set"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"number"),">"),(0,i.kt)("p",null,"List of categories that won't be converted to fragments."),(0,i.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.excludedCategories"),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L29"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:29")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"includeproperties"},"includeProperties"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"includeProperties"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"true")),(0,i.kt)("p",null,"Whether to extract the IFC properties into a JSON."),(0,i.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.includeProperties"),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L6"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:6")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"optionalcategories"},"optionalCategories"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"optionalCategories"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"number"),"[]"),(0,i.kt)("p",null,"Generate the geometry for categories that are not included by default,\nlike IFCSPACE."),(0,i.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.optionalCategories"),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L12"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:12")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"savelocations"},"saveLocations"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"saveLocations"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"false")),(0,i.kt)("p",null,"Whether to save the absolute location of all IFC items."),(0,i.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.saveLocations"),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L32"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:32")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"wasm"},"wasm"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"wasm"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"Object")),(0,i.kt)("p",null,"Path of the WASM for ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_web-ifc"},"web-ifc"),"."),(0,i.kt)("h4",{id:"type-declaration"},"Type declaration"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"absolute")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean"))),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"logLevel?")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"LogLevel"))),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"path")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"string"))))),(0,i.kt)("h4",{id:"inherited-from-5"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.wasm"),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L18"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:18")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"webifc"},"webIfc"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"webIfc"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"LoaderSettings")),(0,i.kt)("p",null,"Loader settings for ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_web-ifc"},"web-ifc"),"."),(0,i.kt)("h4",{id:"inherited-from-6"},"Inherited from"),(0,i.kt)("p",null,"IfcFragmentSettings.webIfc"),(0,i.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts#L35"},"packages/core/src/fragments/IfcLoader/src/ifc-fragment-settings.ts:35")))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/7887f5d5.ffa6a7f0.js b/build/assets/js/7887f5d5.ffa6a7f0.js new file mode 100644 index 00000000..5cabb4df --- /dev/null +++ b/build/assets/js/7887f5d5.ffa6a7f0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3893],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var o=r.createContext({}),s=function(e){var t=r.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return r.createElement(o.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,o=e.parentName,d=p(e,["components","mdxType","originalType","parentName"]),c=s(n),u=a,f=c["".concat(o,".").concat(u)]||c[u]||m[u]||l;return n?r.createElement(f,i(i({ref:t},d),{},{components:n})):r.createElement(f,i({ref:t},d))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,i=new Array(l);i[0]=u;var p={};for(var o in t)hasOwnProperty.call(t,o)&&(p[o]=t[o]);p.originalType=e,p[c]="string"==typeof e?e:a,i[1]=p;for(var s=2;s{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>f,frontMatter:()=>p,metadata:()=>s,toc:()=>c});var r=n(7462),a=n(3366),l=(n(7294),n(3905)),i=["components"],p={id:"thatopen_components_front.ClipEdges",title:"Class: ClipEdges",sidebar_label:"ClipEdges",custom_edit_url:null},o=void 0,s={unversionedId:"api/classes/thatopen_components_front.ClipEdges",id:"api/classes/thatopen_components_front.ClipEdges",title:"Class: ClipEdges",description:"@thatopen/components-front.ClipEdges",source:"@site/docs/api/classes/thatopen_components_front.ClipEdges.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components_front.ClipEdges",permalink:"/api/classes/thatopen_components_front.ClipEdges",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components_front.ClipEdges",title:"Class: ClipEdges",sidebar_label:"ClipEdges",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"SimpleScene",permalink:"/api/classes/thatopen_components.SimpleScene"},next:{title:"EdgesPlane",permalink:"/api/classes/thatopen_components_front.EdgesPlane"}},d={},c=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"styles",id:"styles",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"Methods",id:"methods",level:2},{value:"update",id:"update",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Defined in",id:"defined-in-1",level:4}],m={toc:c},u="wrapper";function f(e){var t=e.components,n=(0,a.Z)(e,i);return(0,l.kt)(u,(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components_front"},"@thatopen/components-front"),".ClipEdges"),(0,l.kt)("p",null,"A more advanced version of SimpleClipper that also supports\nClippingEdges with customizable lines."),(0,l.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("inlineCode",{parentName:"p"},"Component")),(0,l.kt)("p",{parentName:"li"},"\u21b3 ",(0,l.kt)("strong",{parentName:"p"},(0,l.kt)("inlineCode",{parentName:"strong"},"ClipEdges"))))),(0,l.kt)("h2",{id:"implements"},"Implements"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"Disposable"))),(0,l.kt)("h2",{id:"properties"},"Properties"),(0,l.kt)("h3",{id:"styles"},"styles"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"styles"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"EdgesStyles")),(0,l.kt)("p",null,"The list of defined LineStyle instances."),(0,l.kt)("h4",{id:"defined-in"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/core/EdgesClipper/index.ts#L19"},"packages/front/src/core/EdgesClipper/index.ts:19")),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)("h3",{id:"update"},"update"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"update"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"updateFills?"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("p",null,"Updates all the lines of the ClippingEdges."),(0,l.kt)("h4",{id:"parameters"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Default value"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"updateFills")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"boolean")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"false"))))),(0,l.kt)("h4",{id:"returns"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/core/EdgesClipper/index.ts#L54"},"packages/front/src/core/EdgesClipper/index.ts:54")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/7cc95c1b.4a360fcc.js b/build/assets/js/7cc95c1b.4a360fcc.js new file mode 100644 index 00000000..b6e5ea46 --- /dev/null +++ b/build/assets/js/7cc95c1b.4a360fcc.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9595],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=r.createContext({}),s=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=s(e.components);return r.createElement(p.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=s(n),m=a,h=d["".concat(p,".").concat(m)]||d[m]||u[m]||o;return n?r.createElement(h,i(i({ref:t},c),{},{components:n})):r.createElement(h,i({ref:t},c))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[d]="string"==typeof e?e:a,i[1]=l;for(var s=2;s{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>p,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>d});var r=n(7462),a=n(3366),o=(n(7294),n(3905)),i=["components"],l={},p=void 0,s={unversionedId:"Tutorials/UserInterface/OBC/ElementProperties",id:"Tutorials/UserInterface/OBC/ElementProperties",title:"ElementProperties",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/UserInterface/OBC/ElementProperties.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/ElementProperties",permalink:"/Tutorials/UserInterface/OBC/ElementProperties",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ClassificationsTree",permalink:"/Tutorials/UserInterface/OBC/ClassificationsTree"},next:{title:"EntityAttributes",permalink:"/Tutorials/UserInterface/OBC/EntityAttributes"}},c={},d=[{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}],u={toc:d},m="wrapper";function h(e){var t=e.components,n=(0,a.Z)(e,i);return(0,o.kt)(m,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("admonition",{title:"Source",type:"info"},(0,o.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/ElementProperties/example.ts"},"here"),".")),(0,o.kt)("h2",{id:"displaying-data-the-simplest-way-"},"Displaying data the simplest way \ud83d\udd25\ud83d\udd25"),(0,o.kt)("hr",null),(0,o.kt)("p",null,"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!"),(0,o.kt)("h3",{id:"loading-a-model-and-computing-its-relations"},"Loading a model and computing it's relations"),(0,o.kt)("p",null,"First things first... let's load a model \ud83d\udc47"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},'const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\nconst file = await fetch("/resources/small.ifc");\nconst buffer = await file.arrayBuffer();\nconst typedArray = new Uint8Array(buffer);\nconst model = await ifcLoader.load(typedArray);\nworld.scene.three.add(model);\n')),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"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?")),(0,o.kt)("p",null,"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.kt)("a",{parentName:"p",href:"/Tutorials/Components/Core/IfcRelationsIndexer"},"IfcRelationsIndexer")," component from ",(0,o.kt)("inlineCode",{parentName:"p"},"@thatopen/components")," to speed up the process."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"const indexer = components.get(OBC.IfcRelationsIndexer);\nawait indexer.process(model);\n")),(0,o.kt)("p",null,"Once the relations are processed, the ",(0,o.kt)("inlineCode",{parentName:"p"},"Element Properties")," component has everything it needs in order to display the properties in a cool way \ud83d\ude0e."),(0,o.kt)("h3",{id:"creating-the-properties-table"},"Creating the properties table"),(0,o.kt)("p",null,"Let's create an instance of the functional component, like this:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"const [propertiesTable, updatePropertiesTable] = CUI.tables.elementProperties({\n components,\n fragmentIdMap: {},\n});\n\npropertiesTable.preserveStructureOnFilter = true;\npropertiesTable.indentationInText = false;\n")),(0,o.kt)("admonition",{type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"The ",(0,o.kt)("inlineCode",{parentName:"p"},"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.kt)("inlineCode",{parentName:"p"},"entityAttributes")," component.")),(0,o.kt)("p",null,"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.kt)("inlineCode",{parentName:"p"},"@thatopen/components-front"),":"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"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")),(0,o.kt)("h3",{id:"creating-a-panel-to-append-the-table"},"Creating a panel to append the table"),(0,o.kt)("p",null,"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"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,o.kt)("p",null,"Finally, let's create a BIM Grid element and provide both the panel and the viewport to display everything."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,o.kt)("p",null,"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"),(0,o.kt)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/ElementProperties"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/7d516a78.9f63d037.js b/build/assets/js/7d516a78.9f63d037.js new file mode 100644 index 00000000..7663146d --- /dev/null +++ b/build/assets/js/7d516a78.9f63d037.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4847],{3905:(e,t,n)=>{n.d(t,{Zo:()=>l,kt:()=>d});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function p(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=o.createContext({}),c=function(e){var t=o.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},l=function(e){var t=c(e.components);return o.createElement(i.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},h=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),m=c(n),h=r,d=m["".concat(i,".").concat(h)]||m[h]||u[h]||a;return n?o.createElement(d,p(p({ref:t},l),{},{components:n})):o.createElement(d,p({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,p=new Array(a);p[0]=h;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[m]="string"==typeof e?e:r,p[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>c,toc:()=>m});var o=n(7462),r=n(3366),a=(n(7294),n(3905)),p=["components"],s={title:"Components"},i=void 0,c={unversionedId:"Tutorials/Components/index",id:"Tutorials/Components/index",title:"Components",description:"TOC",source:"@site/docs/Tutorials/Components/index.md",sourceDirName:"Tutorials/Components",slug:"/Tutorials/Components/",permalink:"/Tutorials/Components/",draft:!1,tags:[],version:"current",frontMatter:{title:"Components"},sidebar:"tutorialSidebar",previous:{title:"Updateable",permalink:"/api/interfaces/thatopen_components.Updateable"},next:{title:"BoundingBoxer",permalink:"/Tutorials/Components/Core/BoundingBoxer"}},l={},m=[{value:"Packages",id:"packages",level:3},{value:"Usage",id:"usage",level:3}],u={toc:m},h="wrapper";function d(e){var t=e.components,n=(0,r.Z)(e,p);return(0,a.kt)(h,(0,o.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",{align:"center"},(0,a.kt)("a",{href:"https://thatopen.com/"},"TOC"),"|",(0,a.kt)("a",{href:"https://docs.thatopen.com/intro"},"documentation"),"|",(0,a.kt)("a",{href:"https://thatopen.github.io/engine_componentspackages/core/src/fragments/IfcLoader/example.html"},"demo"),"|",(0,a.kt)("a",{href:"https://people.thatopen.com/"},"community"),"|",(0,a.kt)("a",{href:"https://www.npmjs.com/org/thatopen"},"npm package")),(0,a.kt)("p",null,(0,a.kt)("img",{parentName:"p",src:"https://thatopen.github.io/engine_components/resources/cover.png",alt:"cover"})),(0,a.kt)("h1",null,"Open BIM Components ",(0,a.kt)("img",{src:"https://thatopen.github.io/engine_components/resources/favicon.ico",width:"32"})),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://www.npmjs.com/package/@thatopen/components"},(0,a.kt)("img",{parentName:"a",src:"https://img.shields.io/npm/v/@thatopen/components",alt:"NPM Package"})),"\n",(0,a.kt)("a",{parentName:"p",href:"https://www.npmjs.com/package/@thatopen/components"},(0,a.kt)("img",{parentName:"a",src:"https://img.shields.io/npm/dw/@thatopen/components",alt:"NPM Package"})),"\n",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/actions/workflows/tests.yml"},(0,a.kt)("img",{parentName:"a",src:"https://github.com/ThatOpen/engine_components/actions/workflows/tests.yml/badge.svg",alt:"Tests"}))),(0,a.kt)("p",null,"This library is a collection of BIM tools based on ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/mrdoob/three.js/"},"Three.js")," and other libraries. It includes pre-made features to easily build browser-based 3D BIM applications, such as postproduction, dimensions, floorplan navigation, DXF export and much more. "),(0,a.kt)("h3",{id:"packages"},"Packages"),(0,a.kt)("p",null,"This library contains 2 packages:"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"@thatopen/components")," - The core functionality. Compatible both with browser and Node.js environments."),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"@thatopen/components-front")," - Features exclusive for browser environments."),(0,a.kt)("h3",{id:"usage"},"Usage"),(0,a.kt)("p",null,"You need to be familiar with ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/mrdoob/three.js/"},"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 ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/src/core/SimpleScene/index.html"},"here")," and the deployed app ",(0,a.kt)("a",{parentName:"p",href:"https://thatopen.github.io/engine_components/src/core/SimpleScene/index.html"},"here"),"."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'/* eslint import/no-extraneous-dependencies: 0 */\n\nimport * as THREE from "three";\nimport * as OBC from "../..";\n\nconst 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\nconst material = new THREE.MeshLambertMaterial({ color: "#6528D7" });\nconst geometry = new THREE.BoxGeometry();\nconst cube = new THREE.Mesh(geometry, material);\nworld.scene.three.add(cube);\n\nworld.scene.setup();\n\nworld.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);\n')))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/7f370fb4.58c85c9a.js b/build/assets/js/7f370fb4.58c85c9a.js new file mode 100644 index 00000000..754daa65 --- /dev/null +++ b/build/assets/js/7f370fb4.58c85c9a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4591],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>g});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),u=o,g=d["".concat(s,".").concat(u)]||d[u]||m[u]||a;return n?r.createElement(g,i(i({ref:t},c),{},{components:n})):r.createElement(g,i({ref:t},c))}));function g(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=u;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[d]="string"==typeof e?e:o,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>g,frontMatter:()=>l,metadata:()=>p,toc:()=>d});var r=n(7462),o=n(3366),a=(n(7294),n(3905)),i=["components"],l={},s=void 0,p={unversionedId:"Tutorials/Components/Front/EdgesClipper",id:"Tutorials/Components/Front/EdgesClipper",title:"EdgesClipper",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Front/EdgesClipper.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/EdgesClipper",permalink:"/Tutorials/Components/Front/EdgesClipper",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"AreaMeasurement",permalink:"/Tutorials/Components/Front/AreaMeasurement"},next:{title:"IfcStreamer",permalink:"/Tutorials/Components/Front/IfcStreamer"}},c={},d=[{value:"\u2b55\ufe0f Aesthetic Clipping Edges",id:"\ufe0f-aesthetic-clipping-edges",level:3},{value:"\ud83e\udde9 Adding Objects to Scene",id:"-adding-objects-to-scene",level:3},{value:"\u2694\ufe0f Slicing Some Cubes",id:"\ufe0f-slicing-some-cubes",level:3},{value:"\ud83d\udd8c\ufe0f Creating Fine Edges",id:"\ufe0f-creating-fine-edges",level:3},{value:"\ud83d\udcab Using Line Material",id:"-using-line-material",level:4},{value:"\ud83e\udd1d Performing Clipping Events",id:"-performing-clipping-events",level:3},{value:"\ud83e\uddf9 Deleting the Clipping Planes",id:"-deleting-the-clipping-planes",level:3}],m={toc:d},u="wrapper";function g(e){var t=e.components,n=(0,o.Z)(e,i);return(0,a.kt)(u,(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/core/EdgesClipper/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"\ufe0f-aesthetic-clipping-edges"},"\u2b55\ufe0f Aesthetic Clipping Edges"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"You can build whole BIM application using Components.\ud83d\udcaa\nOne such essential component is ",(0,a.kt)("strong",{parentName:"p"},"Edges Clipper")," which helps you to add Clipping Planes along\nwith beautiful yet functional edges.\ud83d\udd8d\ufe0f"),(0,a.kt)("admonition",{title:"Advanced but Simple to use",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"\u26a1\ufe0f ",(0,a.kt)("strong",{parentName:"p"},"Simple Clipper")," and ",(0,a.kt)("strong",{parentName:"p"},"Edges Clipper")," are similar, but ",(0,a.kt)("inlineCode",{parentName:"p"},"Edges Clipper")," offers more advanced options.\nIf you want to learn more about ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"SimpleClipper.mdx"},"Simple Clipper")),", visit the tutorial.")),(0,a.kt)("p",null,"In this tutorial, we'll use the ",(0,a.kt)("inlineCode",{parentName:"p"},"EdgesClipper")," to slice two distinct Cubes that each have a unique set of edge effects.\nWith the help of this tutorial, you can quickly add ",(0,a.kt)("strong",{parentName:"p"},"Clipping Planes")," and ",(0,a.kt)("strong",{parentName:"p"},"Configurable Edges")," to your project.\ud83d\ude80"),(0,a.kt)("admonition",{title:"First, let's set up a simple scene!",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"\ud83d\udc40 If you haven't started there, check out ",(0,a.kt)("a",{parentName:"p",href:"SimpleScene.mdx"},"that tutorial first"),"!")),(0,a.kt)("h3",{id:"-adding-objects-to-scene"},"\ud83e\udde9 Adding Objects to Scene"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Let's start by adding two Cubes, we will create a ",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry"},"Box Geometry")," and use it for both Meshes."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as THREE from "three";\nimport * as OBC from "openbim-components";\nimport * as OBCF from "../..";\n\nconst 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\nworld.renderer.postproduction.enabled = true;\nworld.renderer.postproduction.customEffects.outlineEnabled = true;\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.config.color.setHex(0x666666);\nconst grid = grids.create(world);\nworld.renderer.postproduction.customEffects.excludedMeshes.push(grid.three);\n')),(0,a.kt)("admonition",{title:"Storing Components",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"\ud83e\uddf0 After adding cubes to the scene, we must also add them to ",(0,a.kt)("inlineCode",{parentName:"p"},"components.meshes"),",\nwhich is just an array of all the meshes in the scene.\ud83d\uddc4\ufe0f")),(0,a.kt)("h3",{id:"\ufe0f-slicing-some-cubes"},"\u2694\ufe0f Slicing Some Cubes"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now that the setup is complete. Let's get started with the interesting part!\nWe will create ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"../api/classes/components.EdgesClipper"},"Edges Clipper"))," and pass the ",(0,a.kt)("strong",{parentName:"p"},"components")," and\n",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"../api/classes/components.EdgesPlane"},"Edges Plane"))," to the constructor."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);\n\nconst cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });\nconst cube = new THREE.Mesh(cubeGeometry, cubeMaterial);\ncube.position.set(-2, 1.5, 0);\nworld.scene.three.add(cube);\nworld.meshes.add(cube);\n\nconst cube2 = new THREE.Mesh(cubeGeometry, cubeMaterial);\ncube2.position.set(2, 1.5, 0);\nworld.scene.three.add(cube2);\nworld.meshes.add(cube2);\n')),(0,a.kt)("admonition",{title:"PLANE WITH EDGES and TRANSFORMATION CONTROLS",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"\ud83d\udfe6 ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"../api/classes/components.EdgesPlane"},"Edges Plane"))," helps us in adding Clipping Planes to the Clipper Component.")),(0,a.kt)("h3",{id:"\ufe0f-creating-fine-edges"},"\ud83d\udd8c\ufe0f Creating Fine Edges"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Let's now prepare the materials that will be visible on the cube edges.\nWe will use ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"https://threejs.org/examples/?q=line#webgl_lines_fat"},"LineMaterial"))," for creating edges."),(0,a.kt)("h4",{id:"-using-line-material"},"\ud83d\udcab Using Line Material"),(0,a.kt)("p",null,"After creating the Line Material we will add it to the ",(0,a.kt)("strong",{parentName:"p"},"clipper"),"\nusing ",(0,a.kt)("inlineCode",{parentName:"p"},"clipper.styles.create(styleName: string, mesh: Mesh[], material: LineMaterial)")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const casters = components.get(OBC.Raycasters);\ncasters.get(world);\n\nconst clipper = components.get(OBC.Clipper);\nclipper.enabled = true;\n\nconst edges = components.get(OBCF.ClipEdges);\nclipper.Type = OBCF.EdgesPlane;\n")),(0,a.kt)("h3",{id:"-performing-clipping-events"},"\ud83e\udd1d Performing Clipping Events"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"We need a method for instantly producing a clipping plane;\nthis can be accomplished with either a ",(0,a.kt)("inlineCode",{parentName:"p"},"single click")," or a ",(0,a.kt)("inlineCode",{parentName:"p"},"double click")," of the mouse.\nFor this tutorial, we will use ",(0,a.kt)("strong",{parentName:"p"},"Double Click"),", to create a Clipper that will generate a\nplane on the 3D object's face."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const blueFill = new THREE.MeshBasicMaterial({ color: "lightblue", side: 2 });\nconst blueLine = new THREE.LineBasicMaterial({ color: "blue" });\nconst blueOutline = new THREE.MeshBasicMaterial({\n color: "blue",\n opacity: 0.5,\n side: 2,\n transparent: true,\n});\n\nedges.styles.create(\n "Red lines",\n new Set([cube]),\n world,\n blueLine,\n blueFill,\n blueOutline,\n);\n\nconst salmonFill = new THREE.MeshBasicMaterial({ color: "salmon", side: 2 });\nconst redLine = new THREE.LineBasicMaterial({ color: "red" });\nconst redOutline = new THREE.MeshBasicMaterial({\n color: "red",\n opacity: 0.5,\n side: 2,\n transparent: true,\n});\n\nedges.styles.create(\n "Blue lines",\n new Set([cube2]),\n world,\n redLine,\n salmonFill,\n redOutline,\n);\n')),(0,a.kt)("admonition",{title:"Raycaster below the hood \ud83c\udfa9",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"We use the ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"SimpleRaycaster.mdx"},"Simple Raycaster"))," to determine if the intersection has occurred.\nThe clipper places a plane after detecting the face on which the mouse was clicked.\nHere, the ",(0,a.kt)("strong",{parentName:"p"},"EdgesClipper")," handles everything for you \ud83d\ude0e")),(0,a.kt)("h3",{id:"-deleting-the-clipping-planes"},"\ud83e\uddf9 Deleting the Clipping Planes"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now that we know how to make multiple clippers, we must also know how to delete them when necessary.\nClipping Edges can be removed using ",(0,a.kt)("inlineCode",{parentName:"p"},"clipper.delete()")," or ",(0,a.kt)("inlineCode",{parentName:"p"},"clipper.delete(plane)"),", which deletes a single plane.\n",(0,a.kt)("strong",{parentName:"p"},"clipper.delete()")," deletes the plane on which your mouse pointer is now located."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"container.ondblclick = () => clipper.create(world);\n")),(0,a.kt)("admonition",{title:"Delete all Clipping Planes",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"\u274e If you want to safely delete all the clipping edges that were created you can simply call\n",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("inlineCode",{parentName:"strong"},"clipper.deleteAll()")))),(0,a.kt)("p",null,"Great job! \ud83c\udf89 Using the ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("a",{parentName:"strong",href:"../api/classes/components.SimpleClipper"},"Clipper Component")),",\nyou can now effortlessly check BIM models or any other 3D objects with stunning edges.\ud83e\uddd0\nLet's keep it up and check out another tutorial! \ud83c\udf93"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'window.onkeydown = (event) => {\n if (event.code === "Delete" || event.code === "Backspace") {\n clipper.delete(world);\n }\n};\n')),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/EdgesClipper"}))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/8004d10c.3082051c.js b/build/assets/js/8004d10c.3082051c.js new file mode 100644 index 00000000..e4bc6ead --- /dev/null +++ b/build/assets/js/8004d10c.3082051c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8892],{3769:s=>{s.exports=JSON.parse('{"name":"docusaurus-plugin-content-docs","id":"default"}')}}]); \ No newline at end of file diff --git a/build/assets/js/80bb5c14.66936fd7.js b/build/assets/js/80bb5c14.66936fd7.js new file mode 100644 index 00000000..925e4d27 --- /dev/null +++ b/build/assets/js/80bb5c14.66936fd7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4125],{3905:(e,n,t)=>{t.d(n,{Zo:()=>p,kt:()=>g});var o=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function s(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=o.createContext({}),c=function(e){var n=o.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):s(s({},n),e)),t},p=function(e){var n=c(e.components);return o.createElement(l.Provider,{value:n},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},d=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=c(t),d=r,g=u["".concat(l,".").concat(d)]||u[d]||m[d]||a;return t?o.createElement(g,s(s({ref:n},p),{},{components:t})):o.createElement(g,s({ref:n},p))}));function g(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,s=new Array(a);s[0]=d;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i[u]="string"==typeof e?e:r,s[1]=i;for(var c=2;c{t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>l,default:()=>g,frontMatter:()=>i,metadata:()=>c,toc:()=>u});var o=t(7462),r=t(3366),a=(t(7294),t(3905)),s=["components"],i={},l=void 0,c={unversionedId:"Tutorials/Components/Front/PostproductionRenderer",id:"Tutorials/Components/Front/PostproductionRenderer",title:"PostproductionRenderer",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Front/PostproductionRenderer.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/PostproductionRenderer",permalink:"/Tutorials/Components/Front/PostproductionRenderer",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LengthMeasurement",permalink:"/Tutorials/Components/Front/LengthMeasurement"},next:{title:"ShadowDropper",permalink:"/Tutorials/Components/Front/ShadowDropper"}},p={},u=[{value:"\ud83e\uddea Cool Post-Production Effects",id:"-cool-post-production-effects",level:3},{value:"\ud83c\udfe2 Adding Fragments",id:"-adding-fragments",level:3},{value:"\ud83c\udfac Activating the Post-Production",id:"-activating-the-post-production",level:3}],m={toc:u},d="wrapper";function g(e){var n=e.components,t=(0,r.Z)(e,s);return(0,a.kt)(d,(0,o.Z)({},m,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/core/PostproductionRenderer/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"-cool-post-production-effects"},"\ud83e\uddea Cool Post-Production Effects"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Post-production effects enrich your 3D scenes. There are several post-production effects, such as\nadding shadows, rendering outlines, adding ambient occlusion and applying bloom, that can enhance\nand make your scene look cool.\ud83c\udf79"),(0,a.kt)("admonition",{title:"First, let's set up a simple scene!",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"\ud83d\udc40 If you haven't started there, check out ",(0,a.kt)("a",{parentName:"p",href:"SimpleScene.mdx"},"that tutorial first"),"!")),(0,a.kt)("p",null,"In this tutorial we will use ",(0,a.kt)("strong",{parentName:"p"},"Post-Production Renderer")," to add neat ",(0,a.kt)("strong",{parentName:"p"},"Outlines")," and ",(0,a.kt)("strong",{parentName:"p"},"Ambient Occlusion")," to the 3D Model.\ud83e\uddbe"),(0,a.kt)("h3",{id:"-adding-fragments"},"\ud83c\udfe2 Adding Fragments"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"We'll start by adding a ",(0,a.kt)("strong",{parentName:"p"},"Fragment")," to our scene using Fragment Manager.\nWe'll use a simple fragment for the purposes of this tutorial, but the code is capable of handling big files as well.\ud83c\udfd7\ufe0f"),(0,a.kt)("admonition",{title:"Using Fragment Manager!",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"\ud83c\udfcb\ufe0f There is a dedicated tutorial on how to use Fragment Manager to load ",(0,a.kt)("strong",{parentName:"p"},"IFC")," files!")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import * as THREE from "three";\nimport Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "openbim-components";\nimport * as OBCF from "../..";\n\n// @ts-ignore\n\nconst 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(12, 6, 8, 0, 0, -10);\n\nworld.scene.setup();\n\nconst grids = components.get(OBC.Grids);\ngrids.config.color.set(0x666666);\nconst grid = grids.create(world);\n\n// Set up stats\n\nconst stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n')),(0,a.kt)("h3",{id:"-activating-the-post-production"},"\ud83c\udfac Activating the Post-Production"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"We will activate the post-production effect.\nAlso, we will enable the visibility for post-production layer."),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"postproduction.active")," - Enable or Disable the active status of the post-processing effect"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"postproduction.visible")," - Toggle the visibility of post-processing layer that is created to display the effect.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const fragments = new OBC.FragmentsManager(components);\nconst file = await fetch("../../../../../resources/small.frag");\nconst data = await file.arrayBuffer();\nconst buffer = new Uint8Array(data);\nconst model = fragments.load(buffer);\nworld.scene.three.add(model);\n\n// const meshes = [];\n\n// const culler = new OBC.ScreenCuller(components);\n// culler.setup();\n\n// for (const fragment of model.items) {\n// meshes.push(fragment.mesh);\n// culler.elements.add(fragment.mesh);\n// }\n// culler.elements.needsUpdate = true;\n\n// const controls = cameraComponent.controls;\n// controls.addEventListener("controlend", () => {\n// culler.elements.needsUpdate = true;\n// });\n')),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"Congratulations")," \ud83c\udf89 on completing this tutorial! Now you know how to add cool effects easily using\nPost Production \ud83d\uddbc\ufe0f\nLet's keep it up and check out another tutorial! \ud83c\udf93"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const { postproduction } = world.renderer;\npostproduction.enabled = true;\npostproduction.customEffects.excludedMeshes.push(grid.three);\n\nconst ao = postproduction.n8ao.configuration;\n\nBUI.Manager.init();\n\nconst 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 \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 \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\ndocument.body.append(panel);\n')),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/PostproductionRenderer"}))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/82c425bb.7d4f693b.js b/build/assets/js/82c425bb.7d4f693b.js new file mode 100644 index 00000000..c4c0ee94 --- /dev/null +++ b/build/assets/js/82c425bb.7d4f693b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8604],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>d});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function r(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=o.createContext({}),p=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},c=function(e){var t=p(e.components);return o.createElement(l.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},h=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),m=p(n),h=a,d=m["".concat(l,".").concat(h)]||m[h]||u[h]||i;return n?o.createElement(d,r(r({ref:t},c),{},{components:n})):o.createElement(d,r({ref:t},c))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,r=new Array(i);r[0]=h;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[m]="string"==typeof e?e:a,r[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>s,metadata:()=>p,toc:()=>m});var o=n(7462),a=n(3366),i=(n(7294),n(3905)),r=["components"],s={sidebar_position:1},l="Getting started",p={unversionedId:"components/getting-started",id:"components/getting-started",title:"Getting started",description:"Component ABC",source:"@site/docs/components/getting-started.md",sourceDirName:"components",slug:"/components/getting-started",permalink:"/components/getting-started",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Introduction",permalink:"/intro"},next:{title:"Creating new components",permalink:"/components/creating-components"}},c={},m=[{value:"Component ABC",id:"component-abc",level:2},{value:"Try them!",id:"try-them",level:2},{value:"Tools",id:"tools",level:2},{value:"Compatibility",id:"compatibility",level:2},{value:"Testability",id:"testability",level:2},{value:"Unit tests",id:"unit-tests",level:4},{value:"Community tests",id:"community-tests",level:4}],u={toc:m},h="wrapper";function d(e){var t=e.components,n=(0,a.Z)(e,r);return(0,i.kt)(h,(0,o.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"getting-started"},"Getting started"),(0,i.kt)("h2",{id:"component-abc"},"Component ABC"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Components")," are the building blocks of all our libraries. In short, a component is a bunch of tested code that has a\nspecific set of features and can be used through a documented API. Components can do anything: viewing a 3D scene,\nloading an IFC, exporting floor plans, and even 3D modelling."),(0,i.kt)("admonition",{title:"Why components?",type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"Our goal is to allow everyone to create BIM software. But that's not enough; creating a BIM software is no easy task, especially when doing it alone (as a company or individual). "),(0,i.kt)("p",{parentName:"admonition"},"Wouldn't it be nice if all the software that we develop spoke the same language? That way, we could all share, buy and sell it to solve each other's problem, creating a decentralised ecosystem. That's exactly what ",(0,i.kt)("strong",{parentName:"p"},"Components")," are: a very basic set of rules that allows everyone to build their own tools on top of the same foundations, so that everything is compatible.")),(0,i.kt)("p",null,"The cool thing about components is that they are extensible. We provide a wide set of components that cover the basic features of any BIM app, but buildings are complex and there are many use cases. Using our technology as a basis, you'll be able to create your own components in no time. We also cover this in this documentation. \ud83d\ude09"),(0,i.kt)("p",null,"But first, let's get our feet wet with the basics: start using components in one of your projects!"),(0,i.kt)("h2",{id:"try-them"},"Try them!"),(0,i.kt)("p",null,"We have many libraries of components. The reason is that some of those components are big, and having everything in a single repository would be a mess! However, the main one is ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components"},"this one"),". You can import it in your project using ",(0,i.kt)("inlineCode",{parentName:"p"},"npm"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"yarn")," or any other package manager of your choice:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"npm i openbim-components\n")),(0,i.kt)("p",null,"Most of our libraries are based on ",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/"},"Three.js"),", so you'll also need to import it. Make sure it's the ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/package.json"},"same version")," as the one used by openbim-components!"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"npm i three\n")),(0,i.kt)("p",null,"Finally, you also need to install some peer dependencies. These are other libraries we made and didn't include as regular dependencies to enable more flexible bundling scenarios. Again, make sure it's the ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/package.json"},"same version")," as the one used by openbim-components:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"npm i bim-fragment\nnpm i web-ifc\n")),(0,i.kt)("p",null,"That's it! Now you are ready to start using components. But where to start? Here you have a nice tutorial to make your first steps and build a 3D app that looks like this in less than 5 minutes:"),(0,i.kt)("iframe",{src:"https://thatopen.github.io/engine_components/src/core/SimpleScene/index.html"}),(0,i.kt)("p",null,"Cool, right? But of course, as you can imagine, there's a long way between this simple app and a full-fledged BIM application. If you need some guidance in your journey to discover all the components that we offer, check out the ",(0,i.kt)("a",{parentName:"p",href:"/components/tutorial-paths"},"tutorial paths"),". If you want to know more about components, keep reading! \ud83d\udc47"),(0,i.kt)("h2",{id:"tools"},"Tools"),(0,i.kt)("p",null,"Components are great, and soon you will learn how to use the ones in this library and create your own components. However, BIM applications are complex, and the components have several limitations:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Cloud-native behavior"),": we want to democratize BIM software, and for that it is imperative that software can be easily shared between applications through the cloud.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Globally availability"),": BIM applications have many parts, and in many occasions we will need to access logic from several places in our app easily and in a decoupled manner.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Lifecycle management"),": 3D applications need to be able to update their parts at every frame. In addition, Three.js applications need to manage memory to ensure that we don't have memory leaks, especially when using technologies like React, Angular, etc."))),(0,i.kt)("p",null,"For this reason we have created a special type of component that is capable of all this and more: the ",(0,i.kt)("strong",{parentName:"p"},"Tools"),". Don't worry, in the tutorials of these docs you will learn how to use the ",(0,i.kt)("a",{parentName:"p",href:"../Tutorials/ToolsComponent.mdx"},"tools provided by the library")," and how to ",(0,i.kt)("a",{parentName:"p",href:"/components/creating-components"},"create your own tools")," and share them through That Open Platform."),(0,i.kt)("h2",{id:"compatibility"},"Compatibility"),(0,i.kt)("p",null,"You might be wondering where you can use these components. In short, anywhere that runs JavaScript! You can use them on vanilla web apps, on any library/framework (Vue, React, Angular, Svelte, etc). Most of them are also compatible with Node.js (for backend apps), React Native (for mobile apps) and Electron (for desktop apps)."),(0,i.kt)("admonition",{title:"What about types?",type:"danger"},(0,i.kt)("p",{parentName:"admonition"},"We write all our code in TypeScript and document it with TSDoc. That means that our code is natively type-safe and that you'll get the same documentation that you'll find in the API section of these docs.")),(0,i.kt)("h2",{id:"testability"},"Testability"),(0,i.kt)("h4",{id:"unit-tests"},"Unit tests"),(0,i.kt)("p",null,"All our components are guaranteed to work while using their APIs directly or extending them, and our testing system guarantees that. All the code of all our libraries is unit-tested using AI, Jest, Typescript and human beings \ud83d\ude42. You can check it for each repository in real time looking at the badge:"),(0,i.kt)("img",{src:"https://github.com/ThatOpen/engine_components/actions/workflows/tests.yml/badge.svg"}),(0,i.kt)("p",null,"Regarding the coverage, each component in our repositories is contained in a folder that follows the following structure:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"index.ts"),": the entry point for the logic."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"index.d.ts"),": the typed tests."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"index.html"),": a tutorial app showing how to use it.")),(0,i.kt)("p",null,"Following this structure, it's easy to check that all the components in the library are fully tested."),(0,i.kt)("h4",{id:"community-tests"},"Community tests"),(0,i.kt)("p",null,"All the 3D apps that you see in these docs are not hardcoded: they are automatically deployed from the latest version of the code of our repositories and imported here. Any change in the repositories will automatically show up here."),(0,i.kt)("p",null,"Each component has a minimal, self-contained tutorial app exposing all its features. That means that each person looking at a tutorial of a specific component and trying it in the 3D app is actually testing that component. Having thousands of users navigating through these docs, if anything breaks, we'll know it right away!"))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/8368d781.ac800a77.js b/build/assets/js/8368d781.ac800a77.js new file mode 100644 index 00000000..1c6d5af6 --- /dev/null +++ b/build/assets/js/8368d781.ac800a77.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8985],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>h});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function p(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),o=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},d=function(e){var t=o(e.components);return a.createElement(l.Provider,{value:t},e.children)},m="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},k=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),m=o(n),k=r,h=m["".concat(l,".").concat(k)]||m[k]||c[k]||i;return n?a.createElement(h,p(p({ref:t},d),{},{components:n})):a.createElement(h,p({ref:t},d))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,p=new Array(i);p[0]=k;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[m]="string"==typeof e?e:r,p[1]=s;for(var o=2;o{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>o,toc:()=>m});var a=n(7462),r=n(3366),i=(n(7294),n(3905)),p=["components"],s={id:"thatopen_components.FragmentsManager",title:"Class: FragmentsManager",sidebar_label:"FragmentsManager",custom_edit_url:null},l=void 0,o={unversionedId:"api/classes/thatopen_components.FragmentsManager",id:"api/classes/thatopen_components.FragmentsManager",title:"Class: FragmentsManager",description:"@thatopen/components.FragmentsManager",source:"@site/docs/api/classes/thatopen_components.FragmentsManager.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.FragmentsManager",permalink:"/api/classes/thatopen_components.FragmentsManager",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.FragmentsManager",title:"Class: FragmentsManager",sidebar_label:"FragmentsManager",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"FirstPersonMode",permalink:"/api/classes/thatopen_components.FirstPersonMode"},next:{title:"IfcJsonExporter",permalink:"/api/classes/thatopen_components.IfcJsonExporter"}},d={},m=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Overrides",id:"overrides",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"list",id:"list",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"Accessors",id:"accessors",level:2},{value:"meshes",id:"meshes",level:3},{value:"Returns",id:"returns",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"export",id:"export",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-5",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-7",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"load",id:"load",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-8",level:4},{value:"Defined in",id:"defined-in-11",level:4}],c={toc:m},k="wrapper";function h(e){var t=e.components,n=(0,r.Z)(e,p);return(0,i.kt)(k,(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".FragmentsManager"),(0,i.kt)("p",null,"Object that can efficiently load binary files that contain\n",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_fragment"},"fragment geometry"),"."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},(0,i.kt)("inlineCode",{parentName:"a"},"Component"))),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"FragmentsManager"))))),(0,i.kt)("h2",{id:"implements"},"Implements"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Disposable"},(0,i.kt)("inlineCode",{parentName:"a"},"Disposable")))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"enabled"},"enabled"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"enabled"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"true")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,i.kt)("h4",{id:"overrides"},"Overrides"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"enabled")),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/FragmentsManager/index.ts#L31"},"packages/core/src/fragments/FragmentsManager/index.ts:31")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"list"},"list"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"list"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"Map"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"string"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"Fragment"),">"),(0,i.kt)("p",null,"All the created ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_fragment"},"fragments"),"."),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/FragmentsManager/index.ts#L26"},"packages/core/src/fragments/FragmentsManager/index.ts:26")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,i.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"onDisposed")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/FragmentsManager/index.ts#L16"},"packages/core/src/fragments/FragmentsManager/index.ts:16")),(0,i.kt)("h2",{id:"accessors"},"Accessors"),(0,i.kt)("h3",{id:"meshes"},"meshes"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"get")," ",(0,i.kt)("strong",{parentName:"p"},"meshes"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"Mesh"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"BufferGeometry"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"NormalBufferAttributes"),">",", ",(0,i.kt)("inlineCode",{parentName:"p"},"Material")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"p"},"Material"),"[], ",(0,i.kt)("inlineCode",{parentName:"p"},"Object3DEventMap"),">","[]"),(0,i.kt)("p",null,"The list of meshes of the created fragments."),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"Mesh"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"BufferGeometry"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"NormalBufferAttributes"),">",", ",(0,i.kt)("inlineCode",{parentName:"p"},"Material")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"p"},"Material"),"[], ",(0,i.kt)("inlineCode",{parentName:"p"},"Object3DEventMap"),">","[]"),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/FragmentsManager/index.ts#L38"},"packages/core/src/fragments/FragmentsManager/index.ts:38")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"dispose"},"dispose"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"Disposable.dispose")),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"dispose")),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/FragmentsManager/index.ts#L52"},"packages/core/src/fragments/FragmentsManager/index.ts:52")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"export"},"export"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"export"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"group"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"Uint8Array")),(0,i.kt)("p",null,"Export the specified fragments."),(0,i.kt)("h4",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"group")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"FragmentsGroup")),(0,i.kt)("td",{parentName:"tr",align:"left"},"the fragments group to be exported.")))),(0,i.kt)("h4",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"Uint8Array")),(0,i.kt)("p",null,"the exported data as binary buffer."),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/FragmentsManager/index.ts#L129"},"packages/core/src/fragments/FragmentsManager/index.ts:129")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,i.kt)("h4",{id:"returns-3"},"Returns"),(0,i.kt)("p",null,"this is Configurable"),(0,i.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isconfigurable"},"isConfigurable")),(0,i.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,i.kt)("h4",{id:"returns-4"},"Returns"),(0,i.kt)("p",null,"this is Disposable"),(0,i.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isdisposeable"},"isDisposeable")),(0,i.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ishideable"},"isHideable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,i.kt)("h4",{id:"returns-5"},"Returns"),(0,i.kt)("p",null,"this is Hideable"),(0,i.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#ishideable"},"isHideable")),(0,i.kt)("h4",{id:"defined-in-8"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,i.kt)("h4",{id:"returns-6"},"Returns"),(0,i.kt)("p",null,"this is Resizeable"),(0,i.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isresizeable"},"isResizeable")),(0,i.kt)("h4",{id:"defined-in-9"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,i.kt)("h4",{id:"returns-7"},"Returns"),(0,i.kt)("p",null,"this is Updateable"),(0,i.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isupdateable"},"isUpdateable")),(0,i.kt)("h4",{id:"defined-in-10"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"load"},"load"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"load"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"data"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"config?"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"FragmentsGroup")),(0,i.kt)("p",null,"Loads a binar file that contain fragment geometry."),(0,i.kt)("h4",{id:"parameters-1"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"data")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Uint8Array")),(0,i.kt)("td",{parentName:"tr",align:"left"},"The binary data to load.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"config?")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Partial"),"<{ ",(0,i.kt)("inlineCode",{parentName:"td"},"coordinate"),": ",(0,i.kt)("inlineCode",{parentName:"td"},"boolean")," ; ",(0,i.kt)("inlineCode",{parentName:"td"},"properties"),": ",(0,i.kt)("inlineCode",{parentName:"td"},"IfcProperties")," ; ",(0,i.kt)("inlineCode",{parentName:"td"},"relationsMap"),": ",(0,i.kt)("inlineCode",{parentName:"td"},"RelationsMap")," }",">"),(0,i.kt)("td",{parentName:"tr",align:"left"},"Optional configuration for loading.")))),(0,i.kt)("h4",{id:"returns-8"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"FragmentsGroup")),(0,i.kt)("p",null,"The loaded FragmentsGroup."),(0,i.kt)("h4",{id:"defined-in-11"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/fragments/FragmentsManager/index.ts#L89"},"packages/core/src/fragments/FragmentsManager/index.ts:89")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/87654e65.8b937c81.js b/build/assets/js/87654e65.8b937c81.js new file mode 100644 index 00000000..0a1697b7 --- /dev/null +++ b/build/assets/js/87654e65.8b937c81.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8655],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=o.createContext({}),p=function(e){var t=o.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=p(e.components);return o.createElement(s.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},u=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),d=p(n),u=r,h=d["".concat(s,".").concat(u)]||d[u]||m[u]||a;return n?o.createElement(h,l(l({ref:t},c),{},{components:n})):o.createElement(h,l({ref:t},c))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,l=new Array(a);l[0]=u;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[d]="string"==typeof e?e:r,l[1]=i;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>p,toc:()=>d});var o=n(7462),r=n(3366),a=(n(7294),n(3905)),l=["components"],i={},s=void 0,p={unversionedId:"Tutorials/Components/Core/Worlds",id:"Tutorials/Components/Core/Worlds",title:"Worlds",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/Worlds.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/Worlds",permalink:"/Tutorials/Components/Core/Worlds",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Raycasters",permalink:"/Tutorials/Components/Core/Raycasters"},next:{title:"AngleMeasurement",permalink:"/Tutorials/Components/Front/AngleMeasurement"}},c={},d=[{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:"\ud83e\udde9 Adding some UI",id:"-adding-some-ui",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}],m={toc:d},u="wrapper";function h(e){var t=e.components,n=(0,r.Z)(e,l);return(0,a.kt)(u,(0,o.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/Worlds/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"-creating-our-3d-world"},"\ud83c\udf0e Creating our 3D world"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"In this tutorial you'll learn how to create a simple scene using ",(0,a.kt)("inlineCode",{parentName:"p"},"@thatopen/components"),"."),(0,a.kt)("admonition",{title:"Hello world!",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"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.")),(0,a.kt)("p",null,"In this tutorial, we will import:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Three.js")," to get some 3D entities for our app."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"@thatopen/components")," to set up the barebone of our app."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"@thatopen/ui")," to add some simple and cool UI menus."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Stats.js")," (optional) to measure the performance of our app.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import * as THREE from "three";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "openbim-components";\nimport Stats from "stats.js";\n')),(0,a.kt)("h3",{id:"\ufe0f-getting-the-container"},"\ud83d\uddbc\ufe0f Getting the container"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"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:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const container = document.getElementById("container")!;\n')),(0,a.kt)("h3",{id:"-creating-a-components-instance"},"\ud83d\ude80 Creating a components instance"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now we will create a new instance of the ",(0,a.kt)("inlineCode",{parentName:"p"},"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."),(0,a.kt)("admonition",{title:"Don't forget to dispose it when you are done!",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"Once you are done with your application, you need to dispose the ",(0,a.kt)("inlineCode",{parentName:"p"},"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.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const components = new OBC.Components();\n")),(0,a.kt)("h3",{id:"-setting-up-the-world"},"\ud83c\udf0e Setting up the world"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now we are ready to create our first world. We will use the ",(0,a.kt)("inlineCode",{parentName:"p"},"Worlds")," component to manage all the worlds in your application. Instead of instancing it, we can get it from the ",(0,a.kt)("inlineCode",{parentName:"p"},"Components")," instance. All components are singleton, so this is always a better way to get them."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const worlds = components.get(OBC.Worlds);\n")),(0,a.kt)("p",null,"We can create a new world by calling the ",(0,a.kt)("inlineCode",{parentName:"p"},"create")," method of the ",(0,a.kt)("inlineCode",{parentName:"p"},"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."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const world = worlds.create<\n OBC.SimpleScene,\n OBC.SimpleCamera,\n OBC.SimpleRenderer\n>();\n")),(0,a.kt)("p",null,"Now we can set the scene, the camera and the renderer of the world, and call the init method to start the rendering process."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"world.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBC.SimpleRenderer(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\ncomponents.init();\n")),(0,a.kt)("h3",{id:"-adding-things-to-our-scene"},"\ud83d\udc84 Adding things to our scene"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now we are ready to start adding some 3D entities to our scene. We will add a simple cube:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,a.kt)("p",null,"We could also add some lights, but the SimpleScene class can do that easier for us using its ",(0,a.kt)("inlineCode",{parentName:"p"},"setup")," method:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"world.scene.setup();\n")),(0,a.kt)("p",null,"Finally, we will make the camera look at the cube:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);\n")),(0,a.kt)("h3",{id:"-adding-some-ui"},"\ud83e\udde9 Adding some UI"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"We will use the ",(0,a.kt)("inlineCode",{parentName:"p"},"@thatopen/ui")," library to add some simple and cool UI elements to our app. First, we need to call the ",(0,a.kt)("inlineCode",{parentName:"p"},"init")," method of the ",(0,a.kt)("inlineCode",{parentName:"p"},"BUI.Manager")," class to initialize the library:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"BUI.Manager.init();\n")),(0,a.kt)("p",null,"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!"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,a.kt)("h3",{id:"\ufe0f-measuring-the-performance-optional"},"\u23f1\ufe0f Measuring the performance (optional)"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"We'll use the ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/mrdoob/stats.js"},"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."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n')),(0,a.kt)("h3",{id:"-wrap-up"},"\ud83c\udf89 Wrap up"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"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."),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/Worlds"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/8e79a5c7.e71a9d9a.js b/build/assets/js/8e79a5c7.e71a9d9a.js new file mode 100644 index 00000000..2ba141cf --- /dev/null +++ b/build/assets/js/8e79a5c7.e71a9d9a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[638],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>y});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),l=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},m=function(e){var t=l(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,m=p(e,["components","mdxType","originalType","parentName"]),s=l(r),f=o,y=s["".concat(c,".").concat(f)]||s[f]||u[f]||a;return r?n.createElement(y,i(i({ref:t},m),{},{components:r})):n.createElement(y,i({ref:t},m))}));function y(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=f;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p[s]="string"==typeof e?e:o,i[1]=p;for(var l=2;l{r.r(t),r.d(t,{assets:()=>m,contentTitle:()=>c,default:()=>y,frontMatter:()=>p,metadata:()=>l,toc:()=>s});var n=r(7462),o=r(3366),a=(r(7294),r(3905)),i=["components"],p={id:"thatopen_components.BVHGeometry",title:"Interface: BVHGeometry",sidebar_label:"BVHGeometry",custom_edit_url:null},c=void 0,l={unversionedId:"api/interfaces/thatopen_components.BVHGeometry",id:"api/interfaces/thatopen_components.BVHGeometry",title:"Interface: BVHGeometry",description:"@thatopen/components.BVHGeometry",source:"@site/docs/api/interfaces/thatopen_components.BVHGeometry.md",sourceDirName:"api/interfaces",slug:"/api/interfaces/thatopen_components.BVHGeometry",permalink:"/api/interfaces/thatopen_components.BVHGeometry",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.BVHGeometry",title:"Interface: BVHGeometry",sidebar_label:"BVHGeometry",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Serializer",permalink:"/api/classes/thatopen_fragments.Serializer"},next:{title:"CameraControllable",permalink:"/api/interfaces/thatopen_components.CameraControllable"}},m={},s=[{value:"Hierarchy",id:"hierarchy",level:2}],u={toc:s},f="wrapper";function y(e){var t=e.components,r=(0,o.Z)(e,i);return(0,a.kt)(f,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".BVHGeometry"),(0,a.kt)("p",null,"An interface to make ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/gkjohnson/three-mesh-bvh"},"three-mesh-bvh")," compatible with typescript."),(0,a.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("inlineCode",{parentName:"p"},"BufferGeometry")),(0,a.kt)("p",{parentName:"li"},"\u21b3 ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("inlineCode",{parentName:"strong"},"BVHGeometry"))))))}y.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/9064555a.f1cab61a.js b/build/assets/js/9064555a.f1cab61a.js new file mode 100644 index 00000000..b106af8e --- /dev/null +++ b/build/assets/js/9064555a.f1cab61a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3738],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>k});var a=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var o=a.createContext({}),p=function(e){var t=a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=p(e.components);return a.createElement(o.Provider,{value:t},e.children)},m="mdxType",h={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,r=e.originalType,o=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),m=p(n),c=i,k=m["".concat(o,".").concat(c)]||m[c]||h[c]||r;return n?a.createElement(k,s(s({ref:t},d),{},{components:n})):a.createElement(k,s({ref:t},d))}));function k(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=n.length,s=new Array(r);s[0]=c;var l={};for(var o in t)hasOwnProperty.call(t,o)&&(l[o]=t[o]);l.originalType=e,l[m]="string"==typeof e?e:i,s[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>k,frontMatter:()=>l,metadata:()=>p,toc:()=>m});var a=n(7462),i=n(3366),r=(n(7294),n(3905)),s=["components"],l={id:"thatopen_components.IfcRelationsIndexer",title:"Class: IfcRelationsIndexer",sidebar_label:"IfcRelationsIndexer",custom_edit_url:null},o=void 0,p={unversionedId:"api/classes/thatopen_components.IfcRelationsIndexer",id:"api/classes/thatopen_components.IfcRelationsIndexer",title:"Class: IfcRelationsIndexer",description:"@thatopen/components.IfcRelationsIndexer",source:"@site/docs/api/classes/thatopen_components.IfcRelationsIndexer.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.IfcRelationsIndexer",permalink:"/api/classes/thatopen_components.IfcRelationsIndexer",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.IfcRelationsIndexer",title:"Class: IfcRelationsIndexer",sidebar_label:"IfcRelationsIndexer",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"IfcJsonExporter",permalink:"/api/classes/thatopen_components.IfcJsonExporter"},next:{title:"IfcStreamingSettings",permalink:"/api/classes/thatopen_components.IfcStreamingSettings"}},d={},m=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"relationMaps",id:"relationmaps",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"getEntityRelations",id:"getentityrelations",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"getRelationsMapFromJSON",id:"getrelationsmapfromjson",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-5",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-7",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"process",id:"process",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-8",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"processFromWebIfc",id:"processfromwebifc",level:3},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-9",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"serializeAllRelations",id:"serializeallrelations",level:3},{value:"Returns",id:"returns-10",level:4},{value:"Defined in",id:"defined-in-12",level:4},{value:"serializeModelRelations",id:"serializemodelrelations",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-11",level:4},{value:"Defined in",id:"defined-in-13",level:4},{value:"serializeRelations",id:"serializerelations",level:3},{value:"Parameters",id:"parameters-5",level:4},{value:"Returns",id:"returns-12",level:4},{value:"Defined in",id:"defined-in-14",level:4},{value:"setRelationMap",id:"setrelationmap",level:3},{value:"Parameters",id:"parameters-6",level:4},{value:"Returns",id:"returns-13",level:4},{value:"Defined in",id:"defined-in-15",level:4}],h={toc:m},c="wrapper";function k(e){var t=e.components,n=(0,i.Z)(e,s);return(0,r.kt)(c,(0,a.Z)({},h,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".IfcRelationsIndexer"),(0,r.kt)("p",null,"Indexer for IFC entities, facilitating the indexing and retrieval of IFC entity relationships.\nIt is designed to process models properties by indexing their IFC entities' relations based on predefined inverse attributes, and provides methods to query these relations."),(0,r.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},(0,r.kt)("inlineCode",{parentName:"a"},"Component"))),(0,r.kt)("p",{parentName:"li"},"\u21b3 ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"IfcRelationsIndexer"))))),(0,r.kt)("h2",{id:"implements"},"Implements"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Disposable"},(0,r.kt)("inlineCode",{parentName:"a"},"Disposable")))),(0,r.kt)("h2",{id:"properties"},"Properties"),(0,r.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,r.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,r.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,r.kt)("inlineCode",{parentName:"p"},"string"),">"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,r.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"onDisposed")),(0,r.kt)("h4",{id:"defined-in"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L24"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:24")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"relationmaps"},"relationMaps"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,r.kt)("strong",{parentName:"p"},"relationMaps"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"ModelsRelationMap")," = ",(0,r.kt)("inlineCode",{parentName:"p"},"{}")),(0,r.kt)("p",null,"Holds the relationship mappings for each model processed by the indexer.\nThe structure is a map where each key is a model's UUID, and the value is another map.\nThis inner map's keys are entity expressIDs, and its values are maps where each key is an index\nrepresenting a specific relation type, and the value is an array of expressIDs of entities\nthat are related through that relation type. This structure allows for efficient querying\nof entity relationships within a model."),(0,r.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L70"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:70")),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("h3",{id:"dispose"},"dispose"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,"Disposes the component, cleaning up resources and detaching event listeners.\nThis ensures that the component is properly cleaned up and does not leave behind any\nreferences that could prevent garbage collection."),(0,r.kt)("h4",{id:"returns"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"dispose")),(0,r.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L348"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:348")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"getentityrelations"},"getEntityRelations"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"getEntityRelations"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"model"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"expressID"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"relationName"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"null")," ","|"," ",(0,r.kt)("inlineCode",{parentName:"p"},"number"),"[]"),(0,r.kt)("p",null,"Retrieves the relations of a specific entity within a model based on the given relation name.\nThis method searches the indexed relation maps for the specified model and entity,\nreturning the IDs of related entities if a match is found."),(0,r.kt)("h4",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"model")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"FragmentsGroup")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The ",(0,r.kt)("inlineCode",{parentName:"td"},"FragmentsGroup")," model containing the entity.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"expressID")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"number")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The unique identifier of the entity within the model.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"relationName")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},'"IsDecomposedBy"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"Decomposes"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"AssociatedTo"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"HasAssociations"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"ClassificationForObjects"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"IsGroupedBy"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"HasAssignments"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"IsDefinedBy"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"DefinesOcurrence"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"IsTypedBy"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"Types"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"Defines"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"ContainedInStructure"')," ","|"," ",(0,r.kt)("inlineCode",{parentName:"td"},'"ContainsElements"')),(0,r.kt)("td",{parentName:"tr",align:"left"},'The IFC schema inverse attribute of the relation to search for (e.g., "IsDefinedBy", "ContainsElements").')))),(0,r.kt)("h4",{id:"returns-1"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"null")," ","|"," ",(0,r.kt)("inlineCode",{parentName:"p"},"number"),"[]"),(0,r.kt)("p",null,"An array of express IDs representing the related entities, or ",(0,r.kt)("inlineCode",{parentName:"p"},"null")," if no relations are found\nor the specified relation name is not indexed."),(0,r.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L235"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:235")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"getrelationsmapfromjson"},"getRelationsMapFromJSON"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"getRelationsMapFromJSON"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"json"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"RelationsMap")),(0,r.kt)("p",null,"Converts a JSON string representing relations between entities into a structured map.\nThis method parses the JSON string to reconstruct the relations map that indexes\nentity relations by their express IDs. The outer map keys are the express IDs of entities,\nand the values are maps where each key is a relation type ID and its value is an array\nof express IDs of entities related through that relation type."),(0,r.kt)("h4",{id:"parameters-1"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"json")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The JSON string to be parsed into the relations map.")))),(0,r.kt)("h4",{id:"returns-2"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"RelationsMap")),(0,r.kt)("p",null,"A ",(0,r.kt)("inlineCode",{parentName:"p"},"Map")," where the key is the express ID of an entity as a number, and the value\nis another ",(0,r.kt)("inlineCode",{parentName:"p"},"Map"),". This inner map's key is the relation type ID as a number, and its value\nis an array of express IDs (as numbers) of entities related through that relation type."),(0,r.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L329"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:329")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,r.kt)("h4",{id:"returns-3"},"Returns"),(0,r.kt)("p",null,"this is Configurable"),(0,r.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isconfigurable"},"isConfigurable")),(0,r.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,r.kt)("h4",{id:"returns-4"},"Returns"),(0,r.kt)("p",null,"this is Disposable"),(0,r.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isdisposeable"},"isDisposeable")),(0,r.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"ishideable"},"isHideable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,r.kt)("h4",{id:"returns-5"},"Returns"),(0,r.kt)("p",null,"this is Hideable"),(0,r.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#ishideable"},"isHideable")),(0,r.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,r.kt)("h4",{id:"returns-6"},"Returns"),(0,r.kt)("p",null,"this is Resizeable"),(0,r.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isresizeable"},"isResizeable")),(0,r.kt)("h4",{id:"defined-in-8"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,r.kt)("h4",{id:"returns-7"},"Returns"),(0,r.kt)("p",null,"this is Updateable"),(0,r.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isupdateable"},"isUpdateable")),(0,r.kt)("h4",{id:"defined-in-9"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"process"},"process"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"process"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"model"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,r.kt)("inlineCode",{parentName:"p"},"RelationsMap"),">"),(0,r.kt)("p",null,"Processes a given model to index its IFC entities relations based on predefined inverse attributes.\nThis method iterates through each specified inverse attribute, retrieves the corresponding relations,\nand maps them in a structured way to facilitate quick access to related entities."),(0,r.kt)("p",null,"The process involves querying the model for each relation type associated with the inverse attributes\nand updating the internal relationMaps with the relationships found. This map is keyed by the model's UUID\nand contains a nested map where each key is an entity's expressID and its value is another map.\nThis inner map's keys are the indices of the inverse attributes, and its values are arrays of expressIDs\nof entities that are related through that attribute."),(0,r.kt)("h4",{id:"parameters-2"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"model")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"FragmentsGroup")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The ",(0,r.kt)("inlineCode",{parentName:"td"},"FragmentsGroup")," model to be processed. It must have properties loaded.")))),(0,r.kt)("h4",{id:"returns-8"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,r.kt)("inlineCode",{parentName:"p"},"RelationsMap"),">"),(0,r.kt)("p",null,"A promise that resolves to the relations map for the processed model. This map is a detailed\nrepresentation of the relations indexed by entity expressIDs and relation types."),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"Throws"))),(0,r.kt)("p",null,"An error if the model does not have properties loaded."),(0,r.kt)("h4",{id:"defined-in-10"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L119"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:119")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"processfromwebifc"},"processFromWebIfc"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"processFromWebIfc"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"ifcApi"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"modelID"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,r.kt)("inlineCode",{parentName:"p"},"RelationsMap"),">"),(0,r.kt)("p",null,"Processes a given model from a WebIfc API to index its IFC entities relations."),(0,r.kt)("h4",{id:"parameters-3"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ifcApi")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"IfcAPI")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The WebIfc API instance from which to retrieve the model's properties.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"modelID")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"number")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The unique identifier of the model within the WebIfc API.")))),(0,r.kt)("h4",{id:"returns-9"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,r.kt)("inlineCode",{parentName:"p"},"RelationsMap"),">"),(0,r.kt)("p",null,"A promise that resolves to the relations map for the processed model.\nThis map is a detailed representation of the relations indexed by entity expressIDs and relation types."),(0,r.kt)("h4",{id:"defined-in-11"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L172"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:172")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"serializeallrelations"},"serializeAllRelations"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"serializeAllRelations"),"(): ",(0,r.kt)("inlineCode",{parentName:"p"},"string")),(0,r.kt)("p",null,"Serializes all relations of every model processed by the indexer into a JSON string.\nThis method iterates through each model's relations indexed in ",(0,r.kt)("inlineCode",{parentName:"p"},"relationMaps"),", organizing them\ninto a structured JSON object. Each top-level key in this object corresponds to a model's UUID,\nand its value is another object mapping entity expressIDs to their related entities, categorized\nby relation types. The structure facilitates easy access to any entity's relations across all models."),(0,r.kt)("h4",{id:"returns-10"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"string")),(0,r.kt)("p",null,"A JSON string representing the serialized relations of all models processed by the indexer.\nIf no relations have been indexed, an empty object is returned as a JSON string."),(0,r.kt)("h4",{id:"defined-in-12"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L298"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:298")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"serializemodelrelations"},"serializeModelRelations"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"serializeModelRelations"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"model"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"null")," ","|"," ",(0,r.kt)("inlineCode",{parentName:"p"},"string")),(0,r.kt)("p",null,"Serializes the relations of a specific model into a JSON string.\nThis method iterates through the relations indexed for the given model,\norganizing them into a structured object where each key is an expressID of an entity,\nand its value is another object mapping relation indices to arrays of related entity expressIDs.\nThe resulting object is then serialized into a JSON string."),(0,r.kt)("h4",{id:"parameters-4"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"model")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"FragmentsGroup")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The ",(0,r.kt)("inlineCode",{parentName:"td"},"FragmentsGroup")," model whose relations are to be serialized.")))),(0,r.kt)("h4",{id:"returns-11"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"null")," ","|"," ",(0,r.kt)("inlineCode",{parentName:"p"},"string")),(0,r.kt)("p",null,"A JSON string representing the serialized relations of the specified model.\nIf the model has no indexed relations, ",(0,r.kt)("inlineCode",{parentName:"p"},"null")," is returned."),(0,r.kt)("h4",{id:"defined-in-13"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L281"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:281")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"serializerelations"},"serializeRelations"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"serializeRelations"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"relationMap"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"string")),(0,r.kt)("p",null,"Serializes the relations of a given relation map into a JSON string.\nThis method iterates through the relations in the given map, organizing them into a structured object where each key is an expressID of an entity,\nand its value is another object mapping relation indices to arrays of related entity expressIDs.\nThe resulting object is then serialized into a JSON string."),(0,r.kt)("h4",{id:"parameters-5"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"relationMap")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"RelationsMap")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The map of relations to be serialized. The map keys are expressIDs of entities, and the values are maps where each key is a relation type ID and its value is an array of expressIDs of entities related through that relation type.")))),(0,r.kt)("h4",{id:"returns-12"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"string")),(0,r.kt)("p",null,"A JSON string representing the serialized relations of the given relation map."),(0,r.kt)("h4",{id:"defined-in-14"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L259"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:259")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"setrelationmap"},"setRelationMap"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"setRelationMap"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"model"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"relationMap"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,"Adds a relation map to the model's relations map."),(0,r.kt)("h4",{id:"parameters-6"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"model")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"FragmentsGroup")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The ",(0,r.kt)("inlineCode",{parentName:"td"},"FragmentsGroup")," model to which the relation map will be added.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"relationMap")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"RelationsMap")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The ",(0,r.kt)("inlineCode",{parentName:"td"},"RelationsMap")," to be added to the model's relations map.")))),(0,r.kt)("h4",{id:"returns-13"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"Fires"))),(0,r.kt)("p",null,"onRelationsIndexed - Triggers an event with the model's UUID and the added relation map."),(0,r.kt)("h4",{id:"defined-in-15"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcRelationsIndexer/index.ts#L95"},"packages/core/src/ifc/IfcRelationsIndexer/index.ts:95")))}k.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/935f2afb.662b97c9.js b/build/assets/js/935f2afb.662b97c9.js new file mode 100644 index 00000000..8282c239 --- /dev/null +++ b/build/assets/js/935f2afb.662b97c9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduction","href":"/intro","docId":"intro"},{"type":"category","label":"Components","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Getting started","href":"/components/getting-started","docId":"components/getting-started"},{"type":"link","label":"Creating new components","href":"/components/creating-components","docId":"components/creating-components"},{"type":"link","label":"Clean components ABC","href":"/components/clean-components-guide","docId":"components/clean-components-guide"},{"type":"link","label":"Tutorial paths","href":"/components/tutorial-paths","docId":"components/tutorial-paths"},{"type":"link","label":"Get involved","href":"/components/contributing","docId":"components/contributing"}]},{"type":"category","label":"That open platform","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Getting started","href":"/that-open-platform/getting-started","docId":"that-open-platform/getting-started"}]},{"type":"category","label":"API","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Exports","href":"/api/modules","docId":"api/modules"},{"type":"category","label":"Modules","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"@thatopen/components","href":"/api/modules/thatopen_components","docId":"api/modules/thatopen_components"},{"type":"link","label":"@thatopen/components-front","href":"/api/modules/thatopen_components_front","docId":"api/modules/thatopen_components_front"},{"type":"link","label":"@thatopen/fragments","href":"/api/modules/thatopen_fragments","docId":"api/modules/thatopen_fragments"}]},{"type":"category","label":"Classes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AsyncEvent","href":"/api/classes/thatopen_components.AsyncEvent","docId":"api/classes/thatopen_components.AsyncEvent"},{"type":"link","label":"Base","href":"/api/classes/thatopen_components.Base","docId":"api/classes/thatopen_components.Base"},{"type":"link","label":"BaseWorldItem","href":"/api/classes/thatopen_components.BaseWorldItem","docId":"api/classes/thatopen_components.BaseWorldItem"},{"type":"link","label":"BoundingBoxer","href":"/api/classes/thatopen_components.BoundingBoxer","docId":"api/classes/thatopen_components.BoundingBoxer"},{"type":"link","label":"Clipper","href":"/api/classes/thatopen_components.Clipper","docId":"api/classes/thatopen_components.Clipper"},{"type":"link","label":"Component","href":"/api/classes/thatopen_components.Component","docId":"api/classes/thatopen_components.Component"},{"type":"link","label":"Components","href":"/api/classes/thatopen_components.Components","docId":"api/classes/thatopen_components.Components"},{"type":"link","label":"CullerRenderer","href":"/api/classes/thatopen_components.CullerRenderer","docId":"api/classes/thatopen_components.CullerRenderer"},{"type":"link","label":"Cullers","href":"/api/classes/thatopen_components.Cullers","docId":"api/classes/thatopen_components.Cullers"},{"type":"link","label":"Disposer","href":"/api/classes/thatopen_components.Disposer","docId":"api/classes/thatopen_components.Disposer"},{"type":"link","label":"Event","href":"/api/classes/thatopen_components.Event","docId":"api/classes/thatopen_components.Event"},{"type":"link","label":"FirstPersonMode","href":"/api/classes/thatopen_components.FirstPersonMode","docId":"api/classes/thatopen_components.FirstPersonMode"},{"type":"link","label":"FragmentsManager","href":"/api/classes/thatopen_components.FragmentsManager","docId":"api/classes/thatopen_components.FragmentsManager"},{"type":"link","label":"IfcJsonExporter","href":"/api/classes/thatopen_components.IfcJsonExporter","docId":"api/classes/thatopen_components.IfcJsonExporter"},{"type":"link","label":"IfcRelationsIndexer","href":"/api/classes/thatopen_components.IfcRelationsIndexer","docId":"api/classes/thatopen_components.IfcRelationsIndexer"},{"type":"link","label":"IfcStreamingSettings","href":"/api/classes/thatopen_components.IfcStreamingSettings","docId":"api/classes/thatopen_components.IfcStreamingSettings"},{"type":"link","label":"MeshCullerRenderer","href":"/api/classes/thatopen_components.MeshCullerRenderer","docId":"api/classes/thatopen_components.MeshCullerRenderer"},{"type":"link","label":"OrbitMode","href":"/api/classes/thatopen_components.OrbitMode","docId":"api/classes/thatopen_components.OrbitMode"},{"type":"link","label":"OrthoPerspectiveCamera","href":"/api/classes/thatopen_components.OrthoPerspectiveCamera","docId":"api/classes/thatopen_components.OrthoPerspectiveCamera"},{"type":"link","label":"PlanMode","href":"/api/classes/thatopen_components.PlanMode","docId":"api/classes/thatopen_components.PlanMode"},{"type":"link","label":"ProjectionManager","href":"/api/classes/thatopen_components.ProjectionManager","docId":"api/classes/thatopen_components.ProjectionManager"},{"type":"link","label":"PropertiesStreamingSettings","href":"/api/classes/thatopen_components.PropertiesStreamingSettings","docId":"api/classes/thatopen_components.PropertiesStreamingSettings"},{"type":"link","label":"SimpleCamera","href":"/api/classes/thatopen_components.SimpleCamera","docId":"api/classes/thatopen_components.SimpleCamera"},{"type":"link","label":"SimplePlane","href":"/api/classes/thatopen_components.SimplePlane","docId":"api/classes/thatopen_components.SimplePlane"},{"type":"link","label":"SimpleRenderer","href":"/api/classes/thatopen_components.SimpleRenderer","docId":"api/classes/thatopen_components.SimpleRenderer"},{"type":"link","label":"SimpleScene","href":"/api/classes/thatopen_components.SimpleScene","docId":"api/classes/thatopen_components.SimpleScene"},{"type":"link","label":"ClipEdges","href":"/api/classes/thatopen_components_front.ClipEdges","docId":"api/classes/thatopen_components_front.ClipEdges"},{"type":"link","label":"EdgesPlane","href":"/api/classes/thatopen_components_front.EdgesPlane","docId":"api/classes/thatopen_components_front.EdgesPlane"},{"type":"link","label":"LengthMeasurement","href":"/api/classes/thatopen_components_front.LengthMeasurement","docId":"api/classes/thatopen_components_front.LengthMeasurement"},{"type":"link","label":"Marker","href":"/api/classes/thatopen_components_front.Marker","docId":"api/classes/thatopen_components_front.Marker"},{"type":"link","label":"Plans","href":"/api/classes/thatopen_components_front.Plans","docId":"api/classes/thatopen_components_front.Plans"},{"type":"link","label":"PostproductionRenderer","href":"/api/classes/thatopen_components_front.PostproductionRenderer","docId":"api/classes/thatopen_components_front.PostproductionRenderer"},{"type":"link","label":"RendererWith2D","href":"/api/classes/thatopen_components_front.RendererWith2D","docId":"api/classes/thatopen_components_front.RendererWith2D"},{"type":"link","label":"Serializer","href":"/api/classes/thatopen_fragments.Serializer","docId":"api/classes/thatopen_fragments.Serializer"}]},{"type":"category","label":"Interfaces","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"BVHGeometry","href":"/api/interfaces/thatopen_components.BVHGeometry","docId":"api/interfaces/thatopen_components.BVHGeometry"},{"type":"link","label":"CameraControllable","href":"/api/interfaces/thatopen_components.CameraControllable","docId":"api/interfaces/thatopen_components.CameraControllable"},{"type":"link","label":"Configurable","href":"/api/interfaces/thatopen_components.Configurable","docId":"api/interfaces/thatopen_components.Configurable"},{"type":"link","label":"Createable","href":"/api/interfaces/thatopen_components.Createable","docId":"api/interfaces/thatopen_components.Createable"},{"type":"link","label":"Disposable","href":"/api/interfaces/thatopen_components.Disposable","docId":"api/interfaces/thatopen_components.Disposable"},{"type":"link","label":"Hideable","href":"/api/interfaces/thatopen_components.Hideable","docId":"api/interfaces/thatopen_components.Hideable"},{"type":"link","label":"NavigationMode","href":"/api/interfaces/thatopen_components.NavigationMode","docId":"api/interfaces/thatopen_components.NavigationMode"},{"type":"link","label":"Progress","href":"/api/interfaces/thatopen_components.Progress","docId":"api/interfaces/thatopen_components.Progress"},{"type":"link","label":"Resizeable","href":"/api/interfaces/thatopen_components.Resizeable","docId":"api/interfaces/thatopen_components.Resizeable"},{"type":"link","label":"Updateable","href":"/api/interfaces/thatopen_components.Updateable","docId":"api/interfaces/thatopen_components.Updateable"}]}],"href":"/api/"},{"type":"category","label":"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":"BoundingBoxer","href":"/Tutorials/Components/Core/BoundingBoxer","docId":"Tutorials/Components/Core/BoundingBoxer"},{"type":"link","label":"Clipper","href":"/Tutorials/Components/Core/Clipper","docId":"Tutorials/Components/Core/Clipper"},{"type":"link","label":"Cullers","href":"/Tutorials/Components/Core/Cullers","docId":"Tutorials/Components/Core/Cullers"},{"type":"link","label":"FragmentsManager","href":"/Tutorials/Components/Core/FragmentsManager","docId":"Tutorials/Components/Core/FragmentsManager"},{"type":"link","label":"Grids","href":"/Tutorials/Components/Core/Grids","docId":"Tutorials/Components/Core/Grids"},{"type":"link","label":"Hider","href":"/Tutorials/Components/Core/Hider","docId":"Tutorials/Components/Core/Hider"},{"type":"link","label":"IfcGeometryTiler","href":"/Tutorials/Components/Core/IfcGeometryTiler","docId":"Tutorials/Components/Core/IfcGeometryTiler"},{"type":"link","label":"IfcLoader","href":"/Tutorials/Components/Core/IfcLoader","docId":"Tutorials/Components/Core/IfcLoader"},{"type":"link","label":"IfcPropertiesTiler","href":"/Tutorials/Components/Core/IfcPropertiesTiler","docId":"Tutorials/Components/Core/IfcPropertiesTiler"},{"type":"link","label":"IfcRelationsIndexer","href":"/Tutorials/Components/Core/IfcRelationsIndexer","docId":"Tutorials/Components/Core/IfcRelationsIndexer"},{"type":"link","label":"MiniMap","href":"/Tutorials/Components/Core/MiniMap","docId":"Tutorials/Components/Core/MiniMap"},{"type":"link","label":"OrthoPerspectiveCamera","href":"/Tutorials/Components/Core/OrthoPerspectiveCamera","docId":"Tutorials/Components/Core/OrthoPerspectiveCamera"},{"type":"link","label":"Raycasters","href":"/Tutorials/Components/Core/Raycasters","docId":"Tutorials/Components/Core/Raycasters"},{"type":"link","label":"Worlds","href":"/Tutorials/Components/Core/Worlds","docId":"Tutorials/Components/Core/Worlds"}]},{"type":"category","label":"Front","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AngleMeasurement","href":"/Tutorials/Components/Front/AngleMeasurement","docId":"Tutorials/Components/Front/AngleMeasurement"},{"type":"link","label":"AreaMeasurement","href":"/Tutorials/Components/Front/AreaMeasurement","docId":"Tutorials/Components/Front/AreaMeasurement"},{"type":"link","label":"EdgesClipper","href":"/Tutorials/Components/Front/EdgesClipper","docId":"Tutorials/Components/Front/EdgesClipper"},{"type":"link","label":"IfcStreamer","href":"/Tutorials/Components/Front/IfcStreamer","docId":"Tutorials/Components/Front/IfcStreamer"},{"type":"link","label":"LengthMeasurement","href":"/Tutorials/Components/Front/LengthMeasurement","docId":"Tutorials/Components/Front/LengthMeasurement"},{"type":"link","label":"PostproductionRenderer","href":"/Tutorials/Components/Front/PostproductionRenderer","docId":"Tutorials/Components/Front/PostproductionRenderer"},{"type":"link","label":"ShadowDropper","href":"/Tutorials/Components/Front/ShadowDropper","docId":"Tutorials/Components/Front/ShadowDropper"}]}],"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"}]},{"type":"category","label":"OBC","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ClassificationsTree","href":"/Tutorials/UserInterface/OBC/ClassificationsTree","docId":"Tutorials/UserInterface/OBC/ClassificationsTree"},{"type":"link","label":"ElementProperties","href":"/Tutorials/UserInterface/OBC/ElementProperties","docId":"Tutorials/UserInterface/OBC/ElementProperties"},{"type":"link","label":"EntityAttributes","href":"/Tutorials/UserInterface/OBC/EntityAttributes","docId":"Tutorials/UserInterface/OBC/EntityAttributes"},{"type":"link","label":"ModelsList","href":"/Tutorials/UserInterface/OBC/ModelsList","docId":"Tutorials/UserInterface/OBC/ModelsList"}]}],"href":"/Tutorials/UserInterface/"}]}]},"docs":{"api/classes/thatopen_components_front.ClipEdges":{"id":"api/classes/thatopen_components_front.ClipEdges","title":"Class: ClipEdges","description":"@thatopen/components-front.ClipEdges","sidebar":"tutorialSidebar"},"api/classes/thatopen_components_front.EdgesPlane":{"id":"api/classes/thatopen_components_front.EdgesPlane","title":"Class: EdgesPlane","description":"@thatopen/components-front.EdgesPlane","sidebar":"tutorialSidebar"},"api/classes/thatopen_components_front.LengthMeasurement":{"id":"api/classes/thatopen_components_front.LengthMeasurement","title":"Class: LengthMeasurement","description":"@thatopen/components-front.LengthMeasurement","sidebar":"tutorialSidebar"},"api/classes/thatopen_components_front.Marker":{"id":"api/classes/thatopen_components_front.Marker","title":"Class: Marker","description":"@thatopen/components-front.Marker","sidebar":"tutorialSidebar"},"api/classes/thatopen_components_front.Plans":{"id":"api/classes/thatopen_components_front.Plans","title":"Class: Plans","description":"@thatopen/components-front.Plans","sidebar":"tutorialSidebar"},"api/classes/thatopen_components_front.PostproductionRenderer":{"id":"api/classes/thatopen_components_front.PostproductionRenderer","title":"Class: PostproductionRenderer","description":"@thatopen/components-front.PostproductionRenderer","sidebar":"tutorialSidebar"},"api/classes/thatopen_components_front.RendererWith2D":{"id":"api/classes/thatopen_components_front.RendererWith2D","title":"Class: RendererWith2D","description":"@thatopen/components-front.RendererWith2D","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.AsyncEvent":{"id":"api/classes/thatopen_components.AsyncEvent","title":"Class: AsyncEvent","description":"@thatopen/components.AsyncEvent","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.Base":{"id":"api/classes/thatopen_components.Base","title":"Class: Base","description":"@thatopen/components.Base","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.BaseWorldItem":{"id":"api/classes/thatopen_components.BaseWorldItem","title":"Class: BaseWorldItem","description":"@thatopen/components.BaseWorldItem","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.BoundingBoxer":{"id":"api/classes/thatopen_components.BoundingBoxer","title":"Class: BoundingBoxer","description":"@thatopen/components.BoundingBoxer","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.Clipper":{"id":"api/classes/thatopen_components.Clipper","title":"Class: Clipper","description":"@thatopen/components.Clipper","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.Component":{"id":"api/classes/thatopen_components.Component","title":"Class: Component","description":"@thatopen/components.Component","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.Components":{"id":"api/classes/thatopen_components.Components","title":"Class: Components","description":"@thatopen/components.Components","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.CullerRenderer":{"id":"api/classes/thatopen_components.CullerRenderer","title":"Class: CullerRenderer","description":"@thatopen/components.CullerRenderer","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.Cullers":{"id":"api/classes/thatopen_components.Cullers","title":"Class: Cullers","description":"@thatopen/components.Cullers","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.Disposer":{"id":"api/classes/thatopen_components.Disposer","title":"Class: Disposer","description":"@thatopen/components.Disposer","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.Event":{"id":"api/classes/thatopen_components.Event","title":"Class: Event","description":"@thatopen/components.Event","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.FirstPersonMode":{"id":"api/classes/thatopen_components.FirstPersonMode","title":"Class: FirstPersonMode","description":"@thatopen/components.FirstPersonMode","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.FragmentsManager":{"id":"api/classes/thatopen_components.FragmentsManager","title":"Class: FragmentsManager","description":"@thatopen/components.FragmentsManager","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.IfcJsonExporter":{"id":"api/classes/thatopen_components.IfcJsonExporter","title":"Class: IfcJsonExporter","description":"@thatopen/components.IfcJsonExporter","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.IfcRelationsIndexer":{"id":"api/classes/thatopen_components.IfcRelationsIndexer","title":"Class: IfcRelationsIndexer","description":"@thatopen/components.IfcRelationsIndexer","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.IfcStreamingSettings":{"id":"api/classes/thatopen_components.IfcStreamingSettings","title":"Class: IfcStreamingSettings","description":"@thatopen/components.IfcStreamingSettings","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.MeshCullerRenderer":{"id":"api/classes/thatopen_components.MeshCullerRenderer","title":"Class: MeshCullerRenderer","description":"@thatopen/components.MeshCullerRenderer","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.OrbitMode":{"id":"api/classes/thatopen_components.OrbitMode","title":"Class: OrbitMode","description":"@thatopen/components.OrbitMode","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.OrthoPerspectiveCamera":{"id":"api/classes/thatopen_components.OrthoPerspectiveCamera","title":"Class: OrthoPerspectiveCamera","description":"@thatopen/components.OrthoPerspectiveCamera","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.PlanMode":{"id":"api/classes/thatopen_components.PlanMode","title":"Class: PlanMode","description":"@thatopen/components.PlanMode","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.ProjectionManager":{"id":"api/classes/thatopen_components.ProjectionManager","title":"Class: ProjectionManager","description":"@thatopen/components.ProjectionManager","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.PropertiesStreamingSettings":{"id":"api/classes/thatopen_components.PropertiesStreamingSettings","title":"Class: PropertiesStreamingSettings","description":"@thatopen/components.PropertiesStreamingSettings","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.SimpleCamera":{"id":"api/classes/thatopen_components.SimpleCamera","title":"Class: SimpleCamera","description":"@thatopen/components.SimpleCamera","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.SimplePlane":{"id":"api/classes/thatopen_components.SimplePlane","title":"Class: SimplePlane","description":"@thatopen/components.SimplePlane","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.SimpleRenderer":{"id":"api/classes/thatopen_components.SimpleRenderer","title":"Class: SimpleRenderer","description":"@thatopen/components.SimpleRenderer","sidebar":"tutorialSidebar"},"api/classes/thatopen_components.SimpleScene":{"id":"api/classes/thatopen_components.SimpleScene","title":"Class: SimpleScene","description":"@thatopen/components.SimpleScene","sidebar":"tutorialSidebar"},"api/classes/thatopen_fragments.Serializer":{"id":"api/classes/thatopen_fragments.Serializer","title":"Class: Serializer","description":"@thatopen/fragments.Serializer","sidebar":"tutorialSidebar"},"api/index":{"id":"api/index","title":"Open BIM Docs","description":"TOC","sidebar":"tutorialSidebar"},"api/interfaces/thatopen_components.BVHGeometry":{"id":"api/interfaces/thatopen_components.BVHGeometry","title":"Interface: BVHGeometry","description":"@thatopen/components.BVHGeometry","sidebar":"tutorialSidebar"},"api/interfaces/thatopen_components.CameraControllable":{"id":"api/interfaces/thatopen_components.CameraControllable","title":"Interface: CameraControllable","description":"@thatopen/components.CameraControllable","sidebar":"tutorialSidebar"},"api/interfaces/thatopen_components.Configurable":{"id":"api/interfaces/thatopen_components.Configurable","title":"Interface: Configurable","description":"@thatopen/components.Configurable","sidebar":"tutorialSidebar"},"api/interfaces/thatopen_components.Createable":{"id":"api/interfaces/thatopen_components.Createable","title":"Interface: Createable","description":"@thatopen/components.Createable","sidebar":"tutorialSidebar"},"api/interfaces/thatopen_components.Disposable":{"id":"api/interfaces/thatopen_components.Disposable","title":"Interface: Disposable","description":"@thatopen/components.Disposable","sidebar":"tutorialSidebar"},"api/interfaces/thatopen_components.Hideable":{"id":"api/interfaces/thatopen_components.Hideable","title":"Interface: Hideable","description":"@thatopen/components.Hideable","sidebar":"tutorialSidebar"},"api/interfaces/thatopen_components.NavigationMode":{"id":"api/interfaces/thatopen_components.NavigationMode","title":"Interface: NavigationMode","description":"@thatopen/components.NavigationMode","sidebar":"tutorialSidebar"},"api/interfaces/thatopen_components.Progress":{"id":"api/interfaces/thatopen_components.Progress","title":"Interface: Progress","description":"@thatopen/components.Progress","sidebar":"tutorialSidebar"},"api/interfaces/thatopen_components.Resizeable":{"id":"api/interfaces/thatopen_components.Resizeable","title":"Interface: Resizeable","description":"@thatopen/components.Resizeable","sidebar":"tutorialSidebar"},"api/interfaces/thatopen_components.Updateable":{"id":"api/interfaces/thatopen_components.Updateable","title":"Interface: Updateable","description":"@thatopen/components.Updateable","sidebar":"tutorialSidebar"},"api/modules":{"id":"api/modules","title":"Open BIM Docs","description":"","sidebar":"tutorialSidebar"},"api/modules/thatopen_components":{"id":"api/modules/thatopen_components","title":"Module: @thatopen/components","description":"Classes","sidebar":"tutorialSidebar"},"api/modules/thatopen_components_front":{"id":"api/modules/thatopen_components_front","title":"Module: @thatopen/components-front","description":"Classes","sidebar":"tutorialSidebar"},"api/modules/thatopen_fragments":{"id":"api/modules/thatopen_fragments","title":"Module: @thatopen/fragments","description":"Classes","sidebar":"tutorialSidebar"},"components/clean-components-guide":{"id":"components/clean-components-guide","title":"Clean components ABC","description":"Basics","sidebar":"tutorialSidebar"},"components/contributing":{"id":"components/contributing","title":"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.","sidebar":"tutorialSidebar"},"components/creating-components":{"id":"components/creating-components","title":"Creating new components","description":"Components","sidebar":"tutorialSidebar"},"components/getting-started":{"id":"components/getting-started","title":"Getting started","description":"Component ABC","sidebar":"tutorialSidebar"},"components/tutorial-paths":{"id":"components/tutorial-paths","title":"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!","sidebar":"tutorialSidebar"},"intro":{"id":"intro","title":"Introduction","description":"Welcome to That Open Docs! Have you ever wanted to create your own BIM software, but don\'t know","sidebar":"tutorialSidebar"},"that-open-platform/getting-started":{"id":"that-open-platform/getting-started","title":"Getting started","description":"That Open Platform is a cloud app where we bring the features of our libraries to the next level! One of the things you will find in the platform is a free IFC viewer and editor that you can extend with your own custom tools. How cool is that? Let\'s see how to do that: \ud83d\udc47","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/BoundingBoxer":{"id":"Tutorials/Components/Core/BoundingBoxer","title":"BoundingBoxer","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Clipper":{"id":"Tutorials/Components/Core/Clipper","title":"Clipper","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Cullers":{"id":"Tutorials/Components/Core/Cullers","title":"Cullers","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/FragmentsManager":{"id":"Tutorials/Components/Core/FragmentsManager","title":"FragmentsManager","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Grids":{"id":"Tutorials/Components/Core/Grids","title":"Grids","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Hider":{"id":"Tutorials/Components/Core/Hider","title":"Hider","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcGeometryTiler":{"id":"Tutorials/Components/Core/IfcGeometryTiler","title":"IfcGeometryTiler","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcLoader":{"id":"Tutorials/Components/Core/IfcLoader","title":"IfcLoader","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcPropertiesTiler":{"id":"Tutorials/Components/Core/IfcPropertiesTiler","title":"IfcPropertiesTiler","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/IfcRelationsIndexer":{"id":"Tutorials/Components/Core/IfcRelationsIndexer","title":"IfcRelationsIndexer","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/MiniMap":{"id":"Tutorials/Components/Core/MiniMap","title":"MiniMap","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/OrthoPerspectiveCamera":{"id":"Tutorials/Components/Core/OrthoPerspectiveCamera","title":"OrthoPerspectiveCamera","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Raycasters":{"id":"Tutorials/Components/Core/Raycasters","title":"Raycasters","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Core/Worlds":{"id":"Tutorials/Components/Core/Worlds","title":"Worlds","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/AngleMeasurement":{"id":"Tutorials/Components/Front/AngleMeasurement","title":"AngleMeasurement","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/AreaMeasurement":{"id":"Tutorials/Components/Front/AreaMeasurement","title":"AreaMeasurement","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/EdgesClipper":{"id":"Tutorials/Components/Front/EdgesClipper","title":"EdgesClipper","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/IfcStreamer":{"id":"Tutorials/Components/Front/IfcStreamer","title":"IfcStreamer","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/LengthMeasurement":{"id":"Tutorials/Components/Front/LengthMeasurement","title":"LengthMeasurement","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/PostproductionRenderer":{"id":"Tutorials/Components/Front/PostproductionRenderer","title":"PostproductionRenderer","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/Components/Front/ShadowDropper":{"id":"Tutorials/Components/Front/ShadowDropper","title":"ShadowDropper","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","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":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","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":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/ElementProperties":{"id":"Tutorials/UserInterface/OBC/ElementProperties","title":"ElementProperties","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/EntityAttributes":{"id":"Tutorials/UserInterface/OBC/EntityAttributes","title":"EntityAttributes","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"},"Tutorials/UserInterface/OBC/ModelsList":{"id":"Tutorials/UserInterface/OBC/ModelsList","title":"ModelsList","description":"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/build/assets/js/98508be6.19c326f7.js b/build/assets/js/98508be6.19c326f7.js new file mode 100644 index 00000000..cff9ca68 --- /dev/null +++ b/build/assets/js/98508be6.19c326f7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3991],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>h});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),o=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=o(e.components);return a.createElement(p.Provider,{value:t},e.children)},c="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),c=o(n),m=r,h=c["".concat(p,".").concat(m)]||c[m]||u[m]||l;return n?a.createElement(h,i(i({ref:t},d),{},{components:n})):a.createElement(h,i({ref:t},d))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=m;var s={};for(var p in t)hasOwnProperty.call(t,p)&&(s[p]=t[p]);s.originalType=e,s[c]="string"==typeof e?e:r,i[1]=s;for(var o=2;o{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>h,frontMatter:()=>s,metadata:()=>o,toc:()=>c});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],s={id:"thatopen_components.Cullers",title:"Class: Cullers",sidebar_label:"Cullers",custom_edit_url:null},p=void 0,o={unversionedId:"api/classes/thatopen_components.Cullers",id:"api/classes/thatopen_components.Cullers",title:"Class: Cullers",description:"@thatopen/components.Cullers",source:"@site/docs/api/classes/thatopen_components.Cullers.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.Cullers",permalink:"/api/classes/thatopen_components.Cullers",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Cullers",title:"Class: Cullers",sidebar_label:"Cullers",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"CullerRenderer",permalink:"/api/classes/thatopen_components.CullerRenderer"},next:{title:"Disposer",permalink:"/api/classes/thatopen_components.Disposer"}},d={},c=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"list",id:"list",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"uuid",id:"uuid",level:3},{value:"Defined in",id:"defined-in-2",level:4},{value:"Accessors",id:"accessors",level:2},{value:"enabled",id:"enabled",level:3},{value:"Returns",id:"returns",level:4},{value:"Overrides",id:"overrides",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Overrides",id:"overrides-1",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"Methods",id:"methods",level:2},{value:"create",id:"create",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-5",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-7",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-8",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-11",level:4}],u={toc:c},m="wrapper";function h(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)(m,(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Cullers"),(0,l.kt)("p",null,"A tool to handle big scenes efficiently by automatically hiding the objects\nthat are not visible to the camera."),(0,l.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},(0,l.kt)("inlineCode",{parentName:"a"},"Component"))),(0,l.kt)("p",{parentName:"li"},"\u21b3 ",(0,l.kt)("strong",{parentName:"p"},(0,l.kt)("inlineCode",{parentName:"strong"},"Cullers"))))),(0,l.kt)("h2",{id:"implements"},"Implements"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Disposable"},(0,l.kt)("inlineCode",{parentName:"a"},"Disposable")))),(0,l.kt)("h2",{id:"properties"},"Properties"),(0,l.kt)("h3",{id:"list"},"list"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"list"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"Map"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"string"),", ",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.MeshCullerRenderer"},(0,l.kt)("inlineCode",{parentName:"a"},"MeshCullerRenderer")),">"),(0,l.kt)("p",null,"A map of MeshCullerRenderer instances, keyed by their world UUIDs."),(0,l.kt)("h4",{id:"defined-in"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/index.ts#L26"},"packages/core/src/core/Cullers/index.ts:26")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,l.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,l.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,l.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,l.kt)("p",null,"An event that is triggered when the Cullers component is disposed."),(0,l.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"onDisposed")),(0,l.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/index.ts#L31"},"packages/core/src/core/Cullers/index.ts:31")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"uuid"},"uuid"),(0,l.kt)("p",null,"\u25aa ",(0,l.kt)("inlineCode",{parentName:"p"},"Static")," ",(0,l.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,l.kt)("strong",{parentName:"p"},"uuid"),": ",(0,l.kt)("inlineCode",{parentName:"p"},'"69f2a50d-c266-44fc-b1bd-fa4d34be89e6"')),(0,l.kt)("p",null,"A unique identifier for the Cullers component."),(0,l.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/index.ts#L16"},"packages/core/src/core/Cullers/index.ts:16")),(0,l.kt)("h2",{id:"accessors"},"Accessors"),(0,l.kt)("h3",{id:"enabled"},"enabled"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("inlineCode",{parentName:"p"},"get")," ",(0,l.kt)("strong",{parentName:"p"},"enabled"),"(): ",(0,l.kt)("inlineCode",{parentName:"p"},"boolean")),(0,l.kt)("p",null,"Gets the enabled state of the Cullers component."),(0,l.kt)("h4",{id:"returns"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"boolean")),(0,l.kt)("p",null,"The current enabled state."),(0,l.kt)("h4",{id:"overrides"},"Overrides"),(0,l.kt)("p",null,"Component.enabled"),(0,l.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/index.ts#L38"},"packages/core/src/core/Cullers/index.ts:38")),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("inlineCode",{parentName:"p"},"set")," ",(0,l.kt)("strong",{parentName:"p"},"enabled"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"value"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,"Sets the enabled state of the Cullers component.\nAlso sets the enabled state of all MeshCullerRenderer instances."),(0,l.kt)("h4",{id:"parameters"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"value")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"boolean")),(0,l.kt)("td",{parentName:"tr",align:"left"},"The new enabled state.")))),(0,l.kt)("h4",{id:"returns-1"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"overrides-1"},"Overrides"),(0,l.kt)("p",null,"Component.enabled"),(0,l.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/index.ts#L48"},"packages/core/src/core/Cullers/index.ts:48")),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)("h3",{id:"create"},"create"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"create"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"world"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"config?"),"): ",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.MeshCullerRenderer"},(0,l.kt)("inlineCode",{parentName:"a"},"MeshCullerRenderer"))),(0,l.kt)("p",null,"Creates a new MeshCullerRenderer for the given world.\nIf a MeshCullerRenderer already exists for the world, it will return the existing one."),(0,l.kt)("h4",{id:"parameters-1"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"world")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"World")),(0,l.kt)("td",{parentName:"tr",align:"left"},"The world for which to create the MeshCullerRenderer.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"config?")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"Partial"),"<",(0,l.kt)("inlineCode",{parentName:"td"},"CullerRendererSettings"),">"),(0,l.kt)("td",{parentName:"tr",align:"left"},"Optional configuration settings for the MeshCullerRenderer.")))),(0,l.kt)("h4",{id:"returns-2"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.MeshCullerRenderer"},(0,l.kt)("inlineCode",{parentName:"a"},"MeshCullerRenderer"))),(0,l.kt)("p",null,"The newly created or existing MeshCullerRenderer for the given world."),(0,l.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/index.ts#L69"},"packages/core/src/core/Cullers/index.ts:69")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"dispose"},"dispose"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"Disposable.dispose")),(0,l.kt)("h4",{id:"returns-3"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"dispose")),(0,l.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/index.ts#L87"},"packages/core/src/core/Cullers/index.ts:87")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,l.kt)("p",null,"Whether is component is ",(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,l.kt)("h4",{id:"returns-4"},"Returns"),(0,l.kt)("p",null,"this is Configurable"),(0,l.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isconfigurable"},"isConfigurable")),(0,l.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,l.kt)("p",null,"Whether is component is ",(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,l.kt)("h4",{id:"returns-5"},"Returns"),(0,l.kt)("p",null,"this is Disposable"),(0,l.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isdisposeable"},"isDisposeable")),(0,l.kt)("h4",{id:"defined-in-8"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"ishideable"},"isHideable"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,l.kt)("p",null,"Whether is component is ",(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,l.kt)("h4",{id:"returns-6"},"Returns"),(0,l.kt)("p",null,"this is Hideable"),(0,l.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#ishideable"},"isHideable")),(0,l.kt)("h4",{id:"defined-in-9"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,l.kt)("p",null,"Whether is component is ",(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,l.kt)("h4",{id:"returns-7"},"Returns"),(0,l.kt)("p",null,"this is Resizeable"),(0,l.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isresizeable"},"isResizeable")),(0,l.kt)("h4",{id:"defined-in-10"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,l.kt)("p",null,"Whether is component is ",(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,l.kt)("h4",{id:"returns-8"},"Returns"),(0,l.kt)("p",null,"this is Updateable"),(0,l.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isupdateable"},"isUpdateable")),(0,l.kt)("h4",{id:"defined-in-11"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/9b7b7fda.db949411.js b/build/assets/js/9b7b7fda.db949411.js new file mode 100644 index 00000000..ab7fd66f --- /dev/null +++ b/build/assets/js/9b7b7fda.db949411.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5499],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=r.createContext({}),i=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},c=function(e){var t=i(e.components);return r.createElement(p.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=i(n),m=a,f=d["".concat(p,".").concat(m)]||d[m]||u[m]||o;return n?r.createElement(f,s(s({ref:t},c),{},{components:n})):r.createElement(f,s({ref:t},c))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,s=new Array(o);s[0]=m;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[d]="string"==typeof e?e:a,s[1]=l;for(var i=2;i{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>p,default:()=>f,frontMatter:()=>l,metadata:()=>i,toc:()=>d});var r=n(7462),a=n(3366),o=(n(7294),n(3905)),s=["components"],l={id:"thatopen_components_front.EdgesPlane",title:"Class: EdgesPlane",sidebar_label:"EdgesPlane",custom_edit_url:null},p=void 0,i={unversionedId:"api/classes/thatopen_components_front.EdgesPlane",id:"api/classes/thatopen_components_front.EdgesPlane",title:"Class: EdgesPlane",description:"@thatopen/components-front.EdgesPlane",source:"@site/docs/api/classes/thatopen_components_front.EdgesPlane.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components_front.EdgesPlane",permalink:"/api/classes/thatopen_components_front.EdgesPlane",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components_front.EdgesPlane",title:"Class: EdgesPlane",sidebar_label:"EdgesPlane",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"ClipEdges",permalink:"/api/classes/thatopen_components_front.ClipEdges"},next:{title:"LengthMeasurement",permalink:"/api/classes/thatopen_components_front.LengthMeasurement"}},c={},d=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Properties",id:"properties",level:2},{value:"edgesMaxUpdateRate",id:"edgesmaxupdaterate",level:3},{value:"Defined in",id:"defined-in",level:4}],u={toc:d},m="wrapper";function f(e){var t=e.components,n=(0,a.Z)(e,s);return(0,o.kt)(m,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components_front"},"@thatopen/components-front"),".EdgesPlane"),(0,o.kt)("p",null,"A more advanced version of SimpleClipper that also includes\nClippingEdges with customizable lines."),(0,o.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("p",{parentName:"li"},(0,o.kt)("inlineCode",{parentName:"p"},"SimplePlane")),(0,o.kt)("p",{parentName:"li"},"\u21b3 ",(0,o.kt)("strong",{parentName:"p"},(0,o.kt)("inlineCode",{parentName:"strong"},"EdgesPlane"))))),(0,o.kt)("h2",{id:"properties"},"Properties"),(0,o.kt)("h3",{id:"edgesmaxupdaterate"},"edgesMaxUpdateRate"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("strong",{parentName:"p"},"edgesMaxUpdateRate"),": ",(0,o.kt)("inlineCode",{parentName:"p"},"number")," = ",(0,o.kt)("inlineCode",{parentName:"p"},"50")),(0,o.kt)("p",null,"The max rate in milliseconds at which edges can be regenerated.\nTo disable this behaviour set this to 0."),(0,o.kt)("h4",{id:"defined-in"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/front/src/core/EdgesClipper/src/edges-plane.ts#L16"},"packages/front/src/core/EdgesClipper/src/edges-plane.ts:16")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/9bd74671.cb668da0.js b/build/assets/js/9bd74671.cb668da0.js new file mode 100644 index 00000000..d3c2de74 --- /dev/null +++ b/build/assets/js/9bd74671.cb668da0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6061],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>u});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},k=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),c=s(n),k=r,u=c["".concat(p,".").concat(k)]||c[k]||m[k]||l;return n?a.createElement(u,i(i({ref:t},d),{},{components:n})):a.createElement(u,i({ref:t},d))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=k;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o[c]="string"==typeof e?e:r,i[1]=o;for(var s=2;s{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>c});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={id:"thatopen_components.AsyncEvent",title:"Class: AsyncEvent",sidebar_label:"AsyncEvent",custom_edit_url:null},p=void 0,s={unversionedId:"api/classes/thatopen_components.AsyncEvent",id:"api/classes/thatopen_components.AsyncEvent",title:"Class: AsyncEvent",description:"@thatopen/components.AsyncEvent",source:"@site/docs/api/classes/thatopen_components.AsyncEvent.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.AsyncEvent",permalink:"/api/classes/thatopen_components.AsyncEvent",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.AsyncEvent",title:"Class: AsyncEvent",sidebar_label:"AsyncEvent",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"@thatopen/fragments",permalink:"/api/modules/thatopen_fragments"},next:{title:"Base",permalink:"/api/classes/thatopen_components.Base"}},d={},c=[{value:"Type parameters",id:"type-parameters",level:2},{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:"Defined in",id:"defined-in",level:4},{value:"remove",id:"remove",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"reset",id:"reset",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"trigger",id:"trigger",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-3",level:4},{value:"Defined in",id:"defined-in-3",level:4}],m={toc:c},k="wrapper";function u(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)(k,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".AsyncEvent"),(0,l.kt)("p",null,"Simple event handler by\n",(0,l.kt)("a",{parentName:"p",href:"https://gist.github.com/JasonKleban/50cee44960c225ac1993c922563aa540"},"Jason Kleban"),".\nKeep in mind that:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"If you want to remove it later, you might want to declare the callback as\nan object."),(0,l.kt)("li",{parentName:"ul"},"If you want to maintain the reference to ",(0,l.kt)("inlineCode",{parentName:"li"},"this"),", you will need to declare\nthe callback as an arrow function.")),(0,l.kt)("h2",{id:"type-parameters"},"Type parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"T"))))),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)("h3",{id:"add"},"add"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"add"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"handler"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,"Add a callback to this event instance."),(0,l.kt)("h4",{id:"parameters"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"handler")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"T")," extends ",(0,l.kt)("inlineCode",{parentName:"td"},"void")," ? () => ",(0,l.kt)("inlineCode",{parentName:"td"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"td"},"void"),">"," : (",(0,l.kt)("inlineCode",{parentName:"td"},"data"),": ",(0,l.kt)("inlineCode",{parentName:"td"},"T"),") => ",(0,l.kt)("inlineCode",{parentName:"td"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"td"},"void"),">"),(0,l.kt)("td",{parentName:"tr",align:"left"},"the callback to be added to this event.")))),(0,l.kt)("h4",{id:"returns"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"defined-in"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/async-event.ts#L15"},"packages/core/src/core/Types/src/async-event.ts:15")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"remove"},"remove"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"remove"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"handler"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,"Removes a callback from this event instance."),(0,l.kt)("h4",{id:"parameters-1"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"handler")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"T")," extends ",(0,l.kt)("inlineCode",{parentName:"td"},"void")," ? () => ",(0,l.kt)("inlineCode",{parentName:"td"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"td"},"void"),">"," : (",(0,l.kt)("inlineCode",{parentName:"td"},"data"),": ",(0,l.kt)("inlineCode",{parentName:"td"},"T"),") => ",(0,l.kt)("inlineCode",{parentName:"td"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"td"},"void"),">"),(0,l.kt)("td",{parentName:"tr",align:"left"},"the callback to be removed from this event.")))),(0,l.kt)("h4",{id:"returns-1"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/async-event.ts#L27"},"packages/core/src/core/Types/src/async-event.ts:27")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"reset"},"reset"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"reset"),"(): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,"Gets rid of all the suscribed events."),(0,l.kt)("h4",{id:"returns-2"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/async-event.ts#L44"},"packages/core/src/core/Types/src/async-event.ts:44")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"trigger"},"trigger"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"trigger"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"data?"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("p",null,"Triggers all the callbacks assigned to this event."),(0,l.kt)("h4",{id:"parameters-2"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"data?")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"T"))))),(0,l.kt)("h4",{id:"returns-3"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/async-event.ts#L36"},"packages/core/src/core/Types/src/async-event.ts:36")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/9cc62e14.0ba3ef58.js b/build/assets/js/9cc62e14.0ba3ef58.js new file mode 100644 index 00000000..7a2e8925 --- /dev/null +++ b/build/assets/js/9cc62e14.0ba3ef58.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3208],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>u});var a=n(7294);function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(p[n]=e[n]);return p}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(p[n]=e[n])}return p}var o=a.createContext({}),s=function(e){var t=a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(o.Provider,{value:t},e.children)},m="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},k=a.forwardRef((function(e,t){var n=e.components,p=e.mdxType,i=e.originalType,o=e.parentName,d=r(e,["components","mdxType","originalType","parentName"]),m=s(n),k=p,u=m["".concat(o,".").concat(k)]||m[k]||c[k]||i;return n?a.createElement(u,l(l({ref:t},d),{},{components:n})):a.createElement(u,l({ref:t},d))}));function u(e,t){var n=arguments,p=t&&t.mdxType;if("string"==typeof e||p){var i=n.length,l=new Array(i);l[0]=k;var r={};for(var o in t)hasOwnProperty.call(t,o)&&(r[o]=t[o]);r.originalType=e,r[m]="string"==typeof e?e:p,l[1]=r;for(var s=2;s{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>u,frontMatter:()=>r,metadata:()=>s,toc:()=>m});var a=n(7462),p=n(3366),i=(n(7294),n(3905)),l=["components"],r={id:"thatopen_components.SimplePlane",title:"Class: SimplePlane",sidebar_label:"SimplePlane",custom_edit_url:null},o=void 0,s={unversionedId:"api/classes/thatopen_components.SimplePlane",id:"api/classes/thatopen_components.SimplePlane",title:"Class: SimplePlane",description:"@thatopen/components.SimplePlane",source:"@site/docs/api/classes/thatopen_components.SimplePlane.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.SimplePlane",permalink:"/api/classes/thatopen_components.SimplePlane",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.SimplePlane",title:"Class: SimplePlane",sidebar_label:"SimplePlane",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"SimpleCamera",permalink:"/api/classes/thatopen_components.SimpleCamera"},next:{title:"SimpleRenderer",permalink:"/api/classes/thatopen_components.SimpleRenderer"}},d={},m=[{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"onDraggingEnded",id:"ondraggingended",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"onDraggingStarted",id:"ondraggingstarted",level:3},{value:"Defined in",id:"defined-in-2",level:4},{value:"Accessors",id:"accessors",level:2},{value:"enabled",id:"enabled",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"meshes",id:"meshes",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"planeMaterial",id:"planematerial",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-3",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"size",id:"size",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-5",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"visible",id:"visible",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-7",level:4},{value:"Implementation of",id:"implementation-of-2",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns-8",level:4},{value:"Implementation of",id:"implementation-of-3",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"update",id:"update",level:3},{value:"Returns",id:"returns-9",level:4},{value:"Defined in",id:"defined-in-12",level:4}],c={toc:m},k="wrapper";function u(e){var t=e.components,n=(0,p.Z)(e,l);return(0,i.kt)(k,(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".SimplePlane"),(0,i.kt)("p",null,"Each of the planes created by SimpleClipper."),(0,i.kt)("h2",{id:"implements"},"Implements"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Disposable"},(0,i.kt)("inlineCode",{parentName:"a"},"Disposable"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Hideable"},(0,i.kt)("inlineCode",{parentName:"a"},"Hideable")))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,i.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"onDisposed")),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L17"},"packages/core/src/core/Clipper/src/simple-plane.ts:17")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ondraggingended"},"onDraggingEnded"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onDraggingEnded"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,i.kt)("p",null,"Event that fires when the user stops dragging a clipping plane."),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L14"},"packages/core/src/core/Clipper/src/simple-plane.ts:14")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ondraggingstarted"},"onDraggingStarted"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onDraggingStarted"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,i.kt)("p",null,"Event that fires when the user starts dragging a clipping plane."),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L11"},"packages/core/src/core/Clipper/src/simple-plane.ts:11")),(0,i.kt)("h2",{id:"accessors"},"Accessors"),(0,i.kt)("h3",{id:"enabled"},"enabled"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"set")," ",(0,i.kt)("strong",{parentName:"p"},"enabled"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"state"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,i.kt)("h4",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"state")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean"))))),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L52"},"packages/core/src/core/Clipper/src/simple-plane.ts:52")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"meshes"},"meshes"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"get")," ",(0,i.kt)("strong",{parentName:"p"},"meshes"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"Mesh"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"BufferGeometry"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"NormalBufferAttributes"),">",", ",(0,i.kt)("inlineCode",{parentName:"p"},"Material")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"p"},"Material"),"[], ",(0,i.kt)("inlineCode",{parentName:"p"},"Object3DEventMap"),">","[]"),(0,i.kt)("p",null,"The meshes used for raycasting"),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"Mesh"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"BufferGeometry"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"NormalBufferAttributes"),">",", ",(0,i.kt)("inlineCode",{parentName:"p"},"Material")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"p"},"Material"),"[], ",(0,i.kt)("inlineCode",{parentName:"p"},"Object3DEventMap"),">","[]"),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L74"},"packages/core/src/core/Clipper/src/simple-plane.ts:74")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"planematerial"},"planeMaterial"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"get")," ",(0,i.kt)("strong",{parentName:"p"},"planeMaterial"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"Material")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"p"},"Material"),"[]"),(0,i.kt)("p",null,"The material of the clipping plane representation."),(0,i.kt)("h4",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"Material")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"p"},"Material"),"[]"),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L79"},"packages/core/src/core/Clipper/src/simple-plane.ts:79")),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"set")," ",(0,i.kt)("strong",{parentName:"p"},"planeMaterial"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"material"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"The material of the clipping plane representation."),(0,i.kt)("h4",{id:"parameters-1"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"material")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Material")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"td"},"Material"),"[]")))),(0,i.kt)("h4",{id:"returns-3"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L84"},"packages/core/src/core/Clipper/src/simple-plane.ts:84")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"size"},"size"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"get")," ",(0,i.kt)("strong",{parentName:"p"},"size"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"number")),(0,i.kt)("p",null,"The size of the clipping plane representation."),(0,i.kt)("h4",{id:"returns-4"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"number")),(0,i.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L89"},"packages/core/src/core/Clipper/src/simple-plane.ts:89")),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"set")," ",(0,i.kt)("strong",{parentName:"p"},"size"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"size"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Sets the size of the clipping plane representation."),(0,i.kt)("h4",{id:"parameters-2"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"size")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"number"))))),(0,i.kt)("h4",{id:"returns-5"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-8"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L94"},"packages/core/src/core/Clipper/src/simple-plane.ts:94")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"visible"},"visible"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"get")," ",(0,i.kt)("strong",{parentName:"p"},"visible"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable#visible"},"Hideable.visible")),(0,i.kt)("h4",{id:"returns-6"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"boolean")),(0,i.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable#visible"},"visible")),(0,i.kt)("h4",{id:"defined-in-9"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L61"},"packages/core/src/core/Clipper/src/simple-plane.ts:61")),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"set")," ",(0,i.kt)("strong",{parentName:"p"},"visible"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"state"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable#visible"},"Hideable.visible")),(0,i.kt)("h4",{id:"parameters-3"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"state")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean"))))),(0,i.kt)("h4",{id:"returns-7"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"implementation-of-2"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable#visible"},"visible")),(0,i.kt)("h4",{id:"defined-in-10"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L66"},"packages/core/src/core/Clipper/src/simple-plane.ts:66")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"dispose"},"dispose"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"Disposable.dispose")),(0,i.kt)("h4",{id:"returns-8"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"implementation-of-3"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"dispose")),(0,i.kt)("h4",{id:"defined-in-11"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L155"},"packages/core/src/core/Clipper/src/simple-plane.ts:155")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"update"},"update"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"update"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#update"},"Updateable.update")),(0,i.kt)("h4",{id:"returns-9"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-12"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Clipper/src/simple-plane.ts#L146"},"packages/core/src/core/Clipper/src/simple-plane.ts:146")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/9d7eea47.716daa9f.js b/build/assets/js/9d7eea47.716daa9f.js new file mode 100644 index 00000000..d3509351 --- /dev/null +++ b/build/assets/js/9d7eea47.716daa9f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3941],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function s(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var i=o.createContext({}),p=function(e){var t=o.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},c=function(e){var t=p(e.components);return o.createElement(i.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=p(n),d=a,h=m["".concat(i,".").concat(d)]||m[d]||u[d]||r;return n?o.createElement(h,s(s({ref:t},c),{},{components:n})):o.createElement(h,s({ref:t},c))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,s=new Array(r);s[0]=d;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l[m]="string"==typeof e?e:a,s[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>p,toc:()=>m});var o=n(7462),a=n(3366),r=(n(7294),n(3905)),s=["components"],l={sidebar_position:3},i="Creating new components",p={unversionedId:"components/creating-components",id:"components/creating-components",title:"Creating new components",description:"Components",source:"@site/docs/components/creating-components.md",sourceDirName:"components",slug:"/components/creating-components",permalink:"/components/creating-components",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Getting started",permalink:"/components/getting-started"},next:{title:"Clean components ABC",permalink:"/components/clean-components-guide"}},c={},m=[{value:"Components",id:"components",level:2},{value:"User Interface",id:"user-interface",level:3},{value:"Keep it clean",id:"keep-it-clean",level:3},{value:"Tools",id:"tools",level:2},{value:"Availability",id:"availability",level:3},{value:"Lifecycle",id:"lifecycle",level:3},{value:"Cloud native",id:"cloud-native",level:3}],u={toc:m},d="wrapper";function h(e){var t=e.components,n=(0,a.Z)(e,s);return(0,r.kt)(d,(0,o.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"creating-new-components"},"Creating new components"),(0,r.kt)("h2",{id:"components"},"Components"),(0,r.kt)("p",null,"Our libraries have many components, but the BIM world is vast and it's impossible to cover all use cases.\nBut that's the biggest power of components: they are flexible and can be extended to cover all use cases."),(0,r.kt)("admonition",{title:"We like types, but you don't have to",type:"danger"},(0,r.kt)("p",{parentName:"admonition"},"We are going to do the examples in TypeScript, but don't worry if you only know JavaScript! Translating these examples to JavaScript would be exactly the same but removing all the type definitions.")),(0,r.kt)("p",null,"Creating a component is as simple as creating a class that extends the basic Component class. It is a generic class, which means that you can specify a type when defining it. This type is what we call the ",(0,r.kt)("inlineCode",{parentName:"p"},"core")," of the component: the type of data it stores inside that best represents what the component does. "),(0,r.kt)("p",null,'For example, let\'s create a "Hello world" component, whose only mission is to log a greeting message in the console. '),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},'import * as OBC from "openbim-components";\n\n/**\n * A basic component to say hello in the console.\n */\nexport class HelloWorldComponent extends OBC.Component {\n enabled = true;\n\n private readonly _message = "Hello";\n\n constructor(components: OBC.Components) {\n super(components);\n }\n\n get() {\n return this._message;\n }\n\n greet(name: string) {\n const message = `${this._message} ${name}!`;\n console.log(message);\n }\n}\n')),(0,r.kt)("p",null,"As you can see, the structure of the component is very simple. The Component base class requires it to have certain things:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"A constructor where at least one of the arguments will be the main object ",(0,r.kt)("inlineCode",{parentName:"p"},"components"),". This ",(0,r.kt)("inlineCode",{parentName:"p"},"components")," object will be available as a public property of the class.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"An ",(0,r.kt)("inlineCode",{parentName:"p"},"enabled")," property that indicates whether the component is active or not.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"A ",(0,r.kt)("inlineCode",{parentName:"p"},"get()")," method that returns the main data of the component."))),(0,r.kt)("p",null,"Now, you can use this component just as any of the components you will get to know in the ",(0,r.kt)("a",{parentName:"p",href:"../Tutorials/SimpleScene.mdx"},"tutorials"),"! "),(0,r.kt)("h3",{id:"user-interface"},"User Interface"),(0,r.kt)("p",null,"Creating the UI of a whole BIM application can be a pain, even if you have a BIM library that does the heavy lifting for you. Luckily, the components library also comes with a set of pre-made UI elements that you can use to build it in minutes!"),(0,r.kt)("admonition",{title:"UI Components",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"You don't need to use them if you don't want to, but it will allow you to build the same UI that you see in our editor and in some tools of our library.")),(0,r.kt)("p",null,"You can check out the UIComponents tutorial for a more in-depth look of what you can do with them, or simply check out the code of some of our components. "),(0,r.kt)("p",null,"To add them to your component, you just need to use the ",(0,r.kt)("inlineCode",{parentName:"p"},"UI")," interface and use the ",(0,r.kt)("inlineCode",{parentName:"p"},"UIElement")," object: "),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},'import * as OBC from "openbim-components";\n\n/**\n * A basic component to say hello in the console.\n */\nexport class HelloWorldComponent extends OBC.Component \n implements OBC.UI {\n enabled = true;\n \n uiElement = new OBC.UIElement<{greet: OBC.Button}>(); \n\n private readonly _message = "Hello";\n\n constructor(components: OBC.Components) {\n super(components);\n \n const greet = new OBC.Button(components);\n greet.materialIcon = "handshake";\n greet.tooltip = "Greet";\n greet.onClick.add(() => this.greet("stranger"));\n this.uiElement.set({ greet });\n }\n\n get() {\n return this._message;\n }\n\n greet(name: string) {\n const message = `${this._message} ${name}!`;\n console.log(message);\n }\n}\n')),(0,r.kt)("p",null,"Great! Now you can use them like this:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},'const greetButton = helloWorldTool.uiElement.get("greet");\nconst toolbar = new OBC.Toolbar(components);\ncomponents.ui.addToolbar(toolbar);\ntoolbar.addChild(greetButton);\n')),(0,r.kt)("h3",{id:"keep-it-clean"},"Keep it clean"),(0,r.kt)("p",null,"It's important that you keep your components clean and tidy! To do that, check out the short guide for ",(0,r.kt)("a",{parentName:"p",href:"/components/clean-components-guide"},"avoiding smells when creating components"),"."),(0,r.kt)("h2",{id:"tools"},"Tools"),(0,r.kt)("p",null,"Creating a tool is very similar to creating a component. It just has a bunch of extra requirements:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},'import * as OBC from "openbim-components";\n\n/**\n * A basic component to say hello in the console.\n */\nexport class HelloWorldTool extends OBC.Component {\n static readonly uuid = "0f89b34b-fc6b-4b97-b56d-1edeb0a308a2";\n \n enabled = true;\n\n private readonly _message = "Hello";\n\n constructor(components: OBC.Components) {\n super(components);\n components.tools.add(HelloWorldTool.uuid, this); \n }\n\n get() {\n return this._message;\n }\n\n greet(name: string) {\n const message = `${this._message} ${name}!`;\n console.log(message);\n }\n}\n')),(0,r.kt)("p",null,"Let's see the benefits we get for making a tool instead of a simple component:"),(0,r.kt)("h3",{id:"availability"},"Availability"),(0,r.kt)("p",null,"As you can see, tools have a static UUID (v4) and are registered in the ",(0,r.kt)("a",{parentName:"p",href:"../Tutorials/ToolsComponent.mdx"},"ToolsComponent"),". That way, we\nmake sure that they are unique and globally available through your entire application. If you want to access that tool anywhere else in your application like this:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},"// Somewhere in your app:\n\nconst helloWorldTool = new HelloWorldTool(components);\n\n// Somewhere else in your app:\n\nconst hwTool = await components.get(HelloWorldTool.uuid);\n")),(0,r.kt)("h3",{id:"lifecycle"},"Lifecycle"),(0,r.kt)("p",null,"The library will take care of updating your tools (if needed) and releasing their memory when your 3D app is diposed, preventing memory leaks. You can set up your tool easily using the interfaces provided by the library. For example:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"With ",(0,r.kt)("inlineCode",{parentName:"p"},"updateable"),", the library will automatically update your component every frame.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"With ",(0,r.kt)("inlineCode",{parentName:"p"},"disposable"),", the library will release the memory of your component when the application is disposed, preventing memory leaks. "))),(0,r.kt)("p",null,"Let's see them in action!"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},'import * as THREE from "three";\nimport * as OBC from "openbim-components";\n\n/**\n * A basic component to say hello in the console.\n */\nexport class HelloWorldTool extends OBC.Component \n implements OBC.Disposable, OBC.Updateable {\n static readonly uuid = "0f89b34b-fc6b-4b97-b56d-1edeb0a308a2";\n\n readonly onAfterUpdate = new OBC.Event();\n\n readonly onBeforeUpdate = new OBC.Event();\n\n enabled = true;\n someMesh = new THREE.Mesh(); \n\n private readonly _message = "Hello";\n\n constructor(components: OBC.Components) {\n super(components);\n components.tools.add(HelloWorldTool.uuid, this);\n }\n \n get() {\n return this._message;\n }\n\n greet(name: string) {\n const message = `${this._message} ${name}!`;\n console.log(message);\n }\n\n async dispose() {\n this.enabled = false;\n // Make sure to clean up the events\n this.onBeforeUpdate.reset();\n this.onAfterUpdate.reset();\n // Use the disposer tool to easily dispose THREE.js objects\n const disposer = await this.components.tool.get(OBC.Disposer);\n disposer.destroy(this.someMesh);\n }\n\n async update() {\n this.onBeforeUpdate.trigger();\n console.log("Updated!");\n this.onAfterUpdate.trigger();\n }\n}\n')),(0,r.kt)("p",null,"This is it! Now, the library will take care of updating and disposing your component automatically."),(0,r.kt)("h3",{id:"cloud-native"},"Cloud native"),(0,r.kt)("p",null,"To find out how to bring your tools to the cloud, check out the ",(0,r.kt)("a",{parentName:"p",href:"/that-open-platform/getting-started"},"cloud tools tutorial"),"!"),(0,r.kt)("p",null,"\ud83d\ude80\ud83d\ude80\ud83d\ude80"))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/9dd8a0d2.32165b2d.js b/build/assets/js/9dd8a0d2.32165b2d.js new file mode 100644 index 00000000..fc28f0fc --- /dev/null +++ b/build/assets/js/9dd8a0d2.32165b2d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7054],{7275:(e,t,c)=>{c.r(t),c.d(t,{default:()=>s});var n=c(7294),r=c(6550);function s(){return n.createElement(r.l_,{to:"/intro"})}}}]); \ No newline at end of file diff --git a/build/assets/js/9f1bf482.6e2cb770.js b/build/assets/js/9f1bf482.6e2cb770.js new file mode 100644 index 00000000..cd37f0e3 --- /dev/null +++ b/build/assets/js/9f1bf482.6e2cb770.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9311],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>h});var a=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=a.createContext({}),c=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},p=function(e){var t=c(e.components);return a.createElement(l.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(n),d=o,h=u["".concat(l,".").concat(d)]||u[d]||m[d]||i;return n?a.createElement(h,r(r({ref:t},p),{},{components:n})):a.createElement(h,r({ref:t},p))}));function h(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,r=new Array(i);r[0]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:o,r[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>c,toc:()=>u});var a=n(7462),o=n(3366),i=(n(7294),n(3905)),r=["components"],s={},l=void 0,c={unversionedId:"Tutorials/UserInterface/Core/Component",id:"Tutorials/UserInterface/Core/Component",title:"Component",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/UserInterface/Core/Component.mdx",sourceDirName:"Tutorials/UserInterface/Core",slug:"/Tutorials/UserInterface/Core/Component",permalink:"/Tutorials/UserInterface/Core/Component",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"UserInterface",permalink:"/Tutorials/UserInterface/"},next:{title:"ClassificationsTree",permalink:"/Tutorials/UserInterface/OBC/ClassificationsTree"}},p={},u=[{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}],m={toc:u},d="wrapper";function h(e){var t=e.components,n=(0,o.Z)(e,r);return(0,i.kt)(d,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("admonition",{title:"Source",type:"info"},(0,i.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/core/src/core/Component/example.ts"},"here"),".")),(0,i.kt)("h2",{id:"leveling-up-your-app-with-custom-components-"},"Leveling up your app with custom components! \ud83d\udd0c"),(0,i.kt)("hr",null),(0,i.kt)("p",null,"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,i.kt)("a",{parentName:"p",href:"https://lit.dev/docs/libraries/standalone-templates/"},"lit-html")," \ud83d\udcaa.\nThe UIComponent class has a static method to create functional components (UI defined as a function) that can be updated anytime. The method is ",(0,i.kt)("inlineCode",{parentName:"p"},"UIComponent.create"),"."),(0,i.kt)("admonition",{type:"note"},(0,i.kt)("p",{parentName:"admonition"},"Despite the UIComponent 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.")),(0,i.kt)("h3",{id:"creating-an-stateless-component"},"Creating an stateless component"),(0,i.kt)("p",null,"To start learning how to create custom components, let's create a custom component that uses the panel section:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'const statelessPanelSection = BUI.Component.create(() => {\n return BUI.html`\n \n \n \n `;\n});\n')),(0,i.kt)("admonition",{type:"warning"},(0,i.kt)("p",{parentName:"admonition"},"Remember to first call ",(0,i.kt)("inlineCode",{parentName:"p"},"UIManager.init()")," before anything else!")),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"UIComponent.create")," requires you to provide a function declaration that returns an HTML string made with the ",(0,i.kt)("inlineCode",{parentName:"p"},"html")," tag function, and the result of the function is the HTMLElement it self. "),(0,i.kt)("admonition",{type:"note"},(0,i.kt)("p",{parentName:"admonition"},"Tag functions are special declarations that are always set before a template literals to process the string.")),(0,i.kt)("p",null,"Did you notice the component is named ",(0,i.kt)("inlineCode",{parentName:"p"},"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 data depends on. "),(0,i.kt)("h3",{id:"creating-a-statefull-component"},"Creating a statefull component"),(0,i.kt)("p",null,"Now, let's take a look at how to create a component that can be updated based on state changes:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'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 \n \n `;\n },\n { label: "Statefull Panel Section", counter: 0 },\n );\n')),(0,i.kt)("p",null,"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:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"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."),(0,i.kt)("li",{parentName:"ol"},"When the component is statefull, ",(0,i.kt)("inlineCode",{parentName:"li"},"UIComponent.create")," must have a second argument to specify the initial state of the component."),(0,i.kt)("li",{parentName:"ol"},"Now, ",(0,i.kt)("inlineCode",{parentName:"li"},"UIComponent.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.",(0,i.kt)("admonition",{parentName:"li",type:"note"},(0,i.kt)("p",{parentName:"admonition"},"As for now, a statefull component can't update itself! However, you can nest other components that updates the state of some other.")))),(0,i.kt)("h3",{id:"nesting-components"},"Nesting components"),(0,i.kt)("p",null,"Now, in order to see the two components in action, let's create a third component to integrate (nest) the two previous:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,i.kt)("p",null,"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,i.kt)("inlineCode",{parentName:"p"},"bim-button")," in order to update the state of the statefullPanelSection we created earlier. A couple of things to notice here: "),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"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."),(0,i.kt)("li",{parentName:"ol"},"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."),(0,i.kt)("li",{parentName:"ol"},"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."),(0,i.kt)("li",{parentName:"ol"},"You see how we integrated the two previous components into the panel? Yes, its as easy as adding them as an expression (",(0,i.kt)("inlineCode",{parentName:"li"},"${statelessPanelSection}")," and ",(0,i.kt)("inlineCode",{parentName:"li"},"${statefullPanelSection}")," in this case).",(0,i.kt)("admonition",{parentName:"li",type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"In order to know the syntax you can write inside the template literal tagged by the html function, look at the ",(0,i.kt)("a",{parentName:"p",href:"https://lit.dev/docs/templates/overview/"},"lit-html")," documentation.")),"Finally, you can add your panel component anywhere you want as its an HTMLElement just like any other!")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"document.body.append(panel);\n")),(0,i.kt)("p",null,"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."),(0,i.kt)("admonition",{type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"The complementary packages of the library such as ",(0,i.kt)("inlineCode",{parentName:"p"},"@thatopen/ui-components-obc")," or ",(0,i.kt)("inlineCode",{parentName:"p"},"@thatopen/ui-components-three")," 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 ")),(0,i.kt)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/Component"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/a19b4c2c.8b2e4894.js b/build/assets/js/a19b4c2c.8b2e4894.js new file mode 100644 index 00000000..e7768af4 --- /dev/null +++ b/build/assets/js/a19b4c2c.8b2e4894.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[372],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>h});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),l=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},d=function(e){var t=l(e.components);return a.createElement(s.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},f=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,d=p(e,["components","mdxType","originalType","parentName"]),c=l(n),f=r,h=c["".concat(s,".").concat(f)]||c[f]||m[f]||i;return n?a.createElement(h,o(o({ref:t},d),{},{components:n})):a.createElement(h,o({ref:t},d))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=f;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p[c]="string"==typeof e?e:r,o[1]=p;for(var l=2;l{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>p,metadata:()=>l,toc:()=>c});var a=n(7462),r=n(3366),i=(n(7294),n(3905)),o=["components"],p={id:"thatopen_components.IfcJsonExporter",title:"Class: IfcJsonExporter",sidebar_label:"IfcJsonExporter",custom_edit_url:null},s=void 0,l={unversionedId:"api/classes/thatopen_components.IfcJsonExporter",id:"api/classes/thatopen_components.IfcJsonExporter",title:"Class: IfcJsonExporter",description:"@thatopen/components.IfcJsonExporter",source:"@site/docs/api/classes/thatopen_components.IfcJsonExporter.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.IfcJsonExporter",permalink:"/api/classes/thatopen_components.IfcJsonExporter",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.IfcJsonExporter",title:"Class: IfcJsonExporter",sidebar_label:"IfcJsonExporter",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"FragmentsManager",permalink:"/api/classes/thatopen_components.FragmentsManager"},next:{title:"IfcRelationsIndexer",permalink:"/api/classes/thatopen_components.IfcRelationsIndexer"}},d={},c=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Overrides",id:"overrides",level:4},{value:"Defined in",id:"defined-in",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:"Defined in",id:"defined-in-1",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-5",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-6",level:4}],m={toc:c},f="wrapper";function h(e){var t=e.components,n=(0,r.Z)(e,o);return(0,i.kt)(f,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".IfcJsonExporter"),(0,i.kt)("p",null,"Object to export all the properties from an IFC to a JS object."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},(0,i.kt)("inlineCode",{parentName:"a"},"Component"))),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"IfcJsonExporter"))))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"enabled"},"enabled"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"enabled"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"true")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,i.kt)("h4",{id:"overrides"},"Overrides"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"enabled")),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcJsonExporter/index.ts#L13"},"packages/core/src/ifc/IfcJsonExporter/index.ts:13")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"export"},"export"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"export"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"webIfc"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"modelID"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"indirect?"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"recursiveSpatial?"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"IfcProperties"),">"),(0,i.kt)("p",null,"Exports all the properties of an IFC into an array of JS objects."),(0,i.kt)("h4",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Default value"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"webIfc")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"IfcAPI")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"undefined")),(0,i.kt)("td",{parentName:"tr",align:"left"},"The instance of ","[web-ifc][https://github.com/ThatOpen/engine_web-ifc]","(",(0,i.kt)("a",{parentName:"td",href:"https://github.com/ThatOpen/engine_web-ifc"},"https://github.com/ThatOpen/engine_web-ifc"),") to use.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"modelID")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"undefined")),(0,i.kt)("td",{parentName:"tr",align:"left"},"ID of the IFC model whose properties to extract.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"indirect")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"false")),(0,i.kt)("td",{parentName:"tr",align:"left"},"whether to get the indirect relationships as well.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"recursiveSpatial")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"true")),(0,i.kt)("td",{parentName:"tr",align:"left"},"whether to get the properties of spatial items recursively to make the location data available (e.g. absolute position of building).")))),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"IfcProperties"),">"),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/ifc/IfcJsonExporter/index.ts#L28"},"packages/core/src/ifc/IfcJsonExporter/index.ts:28")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,"this is Configurable"),(0,i.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isconfigurable"},"isConfigurable")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,i.kt)("h4",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,"this is Disposable"),(0,i.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isdisposeable"},"isDisposeable")),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ishideable"},"isHideable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,i.kt)("h4",{id:"returns-3"},"Returns"),(0,i.kt)("p",null,"this is Hideable"),(0,i.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#ishideable"},"isHideable")),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,i.kt)("h4",{id:"returns-4"},"Returns"),(0,i.kt)("p",null,"this is Resizeable"),(0,i.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isresizeable"},"isResizeable")),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,i.kt)("h4",{id:"returns-5"},"Returns"),(0,i.kt)("p",null,"this is Updateable"),(0,i.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},"Component"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#isupdateable"},"isUpdateable")),(0,i.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/a599bc11.f1ff9c5b.js b/build/assets/js/a599bc11.f1ff9c5b.js new file mode 100644 index 00000000..84f150ae --- /dev/null +++ b/build/assets/js/a599bc11.f1ff9c5b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[835],{3905:(e,n,t)=>{t.d(n,{Zo:()=>c,kt:()=>f});var r=t(7294);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var l=r.createContext({}),p=function(e){var n=r.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},c=function(e){var n=p(e.components);return r.createElement(l.Provider,{value:n},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},u=r.forwardRef((function(e,n){var t=e.components,o=e.mdxType,s=e.originalType,l=e.parentName,c=a(e,["components","mdxType","originalType","parentName"]),m=p(t),u=o,f=m["".concat(l,".").concat(u)]||m[u]||d[u]||s;return t?r.createElement(f,i(i({ref:n},c),{},{components:t})):r.createElement(f,i({ref:n},c))}));function f(e,n){var t=arguments,o=n&&n.mdxType;if("string"==typeof e||o){var s=t.length,i=new Array(s);i[0]=u;var a={};for(var l in n)hasOwnProperty.call(n,l)&&(a[l]=n[l]);a.originalType=e,a[m]="string"==typeof e?e:o,i[1]=a;for(var p=2;p{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>f,frontMatter:()=>a,metadata:()=>p,toc:()=>m});var r=t(7462),o=t(3366),s=(t(7294),t(3905)),i=["components"],a={},l=void 0,p={unversionedId:"Tutorials/Components/Core/IfcPropertiesTiler",id:"Tutorials/Components/Core/IfcPropertiesTiler",title:"IfcPropertiesTiler",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/IfcPropertiesTiler.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/IfcPropertiesTiler",permalink:"/Tutorials/Components/Core/IfcPropertiesTiler",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcLoader",permalink:"/Tutorials/Components/Core/IfcLoader"},next:{title:"IfcRelationsIndexer",permalink:"/Tutorials/Components/Core/IfcRelationsIndexer"}},c={},m=[{value:"\ud83d\udccb Streaming the properties",id:"-streaming-the-properties",level:3}],d={toc:m},u="wrapper";function f(e){var n=e.components,t=(0,o.Z)(e,i);return(0,s.kt)(u,(0,r.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("admonition",{title:"Source",type:"info"},(0,s.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,s.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/fragments/IfcPropertiesTiler/example.ts"},"here"),".")),(0,s.kt)("h3",{id:"-streaming-the-properties"},"\ud83d\udccb Streaming the properties"),(0,s.kt)("hr",null),(0,s.kt)("p",null,"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. We can do this conversion\nusing the ",(0,s.kt)("inlineCode",{parentName:"p"},"FragmentPropsStreamConverter"),":"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},'import Stats from "stats.js";\n// @ts-ignore\nimport * as dat from "three/examples/jsm/libs/lil-gui.module.min";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "openbim-components";\n\nconst 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\n// rendererComponent.postproduction.enabled = true;\n\nworld.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n// customEffects.excludedMeshes.push(grid.get());\n\nfunction 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// rendererComponent.postproduction.enabled = true;\n')),(0,s.kt)("p",null,"We need to generate properties JSON with the following structure"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},'const propsStreamer = new OBC.IfcPropertiesTiler(components);\n\npropsStreamer.settings.wasm = {\n path: "https://unpkg.com/web-ifc@0.0.53/",\n absolute: true,\n};\n')),(0,s.kt)("p",null,"Similarly to geometries, here you will also get data and progress notification\nusing events. In addition to properties, you will get ",(0,s.kt)("inlineCode",{parentName:"p"},"indices"),", which is an\nindexation data of the properties to be able to use them effectively when\nstreamed."),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},'// @ts-ignore\ninterface StreamedProperties {\n types: {\n [typeID: number]: number[];\n };\n\n ids: {\n [id: number]: number;\n };\n\n indexesFile: string;\n}\n\nconst jsonFile: StreamedProperties = {\n types: {},\n ids: {},\n indexesFile: "small.ifc-processed-properties-indexes",\n};\n')),(0,s.kt)("p",null,"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:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,s.kt)("p",null,"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"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},'async function processFile() {\n const fetchedIfc = await fetch("../../../../../resources/small.ifc");\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')),(0,s.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/IfcPropertiesTiler"}))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/ac8bbf91.3c97ce41.js b/build/assets/js/ac8bbf91.3c97ce41.js new file mode 100644 index 00000000..f848e397 --- /dev/null +++ b/build/assets/js/ac8bbf91.3c97ce41.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5446],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>d});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=o.createContext({}),u=function(e){var t=o.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=u(e.components);return o.createElement(s.Provider,{value:t},e.children)},m="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},b=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),m=u(n),b=r,d=m["".concat(s,".").concat(b)]||m[b]||c[b]||a;return n?o.createElement(d,i(i({ref:t},p),{},{components:n})):o.createElement(d,i({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[m]="string"==typeof e?e:r,i[1]=l;for(var u=2;u{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>d,frontMatter:()=>l,metadata:()=>u,toc:()=>m});var o=n(7462),r=n(3366),a=(n(7294),n(3905)),i=["components"],l={title:"UserInterface"},s=void 0,u={unversionedId:"Tutorials/UserInterface/index",id:"Tutorials/UserInterface/index",title:"UserInterface",description:"TOC",source:"@site/docs/Tutorials/UserInterface/index.md",sourceDirName:"Tutorials/UserInterface",slug:"/Tutorials/UserInterface/",permalink:"/Tutorials/UserInterface/",draft:!1,tags:[],version:"current",frontMatter:{title:"UserInterface"},sidebar:"tutorialSidebar",previous:{title:"ShadowDropper",permalink:"/Tutorials/Components/Front/ShadowDropper"},next:{title:"Component",permalink:"/Tutorials/UserInterface/Core/Component"}},p={},m=[{value:"How it works? \ud83e\udd13",id:"how-it-works-",level:2},{value:"Why a monorepo? \ud83e\udd37\u200d\u2640\ufe0f",id:"why-a-monorepo-\ufe0f",level:3},{value:"Does these components works in my favorite framework? \ud83e\udd14",id:"does-these-components-works-in-my-favorite-framework-",level:3},{value:"Getting Started",id:"getting-started",level:2}],c={toc:m},b="wrapper";function d(e){var t=e.components,n=(0,r.Z)(e,i);return(0,a.kt)(b,(0,o.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",{align:"center"},(0,a.kt)("a",{href:"https://thatopen.com/"},"TOC"),"|",(0,a.kt)("a",{href:"https://docs.thatopen.com/intro"},"Documentation"),"|",(0,a.kt)("a",{href:""},"Demo"),"|",(0,a.kt)("a",{href:"https://people.thatopen.com/"},"Community"),"|",(0,a.kt)("a",{href:""},"NPM Package")),(0,a.kt)("p",null,(0,a.kt)("img",{parentName:"p",src:"https://thatopen.github.io/engine_ui-components/resources/cover.png",alt:"cover"})),(0,a.kt)("h1",null,"BIM UI Components ",(0,a.kt)("img",{src:"https://thatopen.github.io/engine_ui-components/resources/favicon.ico",width:"22"})),(0,a.kt)("p",null,"BIM UI Components is the ultimate set of user interface elements you need to create fully featured BIM applications \ud83d\ude80"),(0,a.kt)("br",null),(0,a.kt)("h2",{id:"how-it-works-"},"How it works? \ud83e\udd13"),(0,a.kt)("p",null,"This library is a monorepo where separate but correlated repositories exists in the packages folder. The main repository resides in ",(0,a.kt)("inlineCode",{parentName:"p"},"core"),"."),(0,a.kt)("br",null),"* **@thatopen/ui:** This is the core library. Here, you will find all the core components needed to build your user interfaces, so you can expect a button, panel, toolbar, table, inputs, and some other components.",(0,a.kt)("br",null),(0,a.kt)("p",null,"Now, from the ",(0,a.kt)("inlineCode",{parentName:"p"},"@thatopen/ui")," you can't expect to have functionalities in your components. In other words, if you need a button component to load an IFC file from ",(0,a.kt)("inlineCode",{parentName:"p"},"@thatopen/components")," you will need to code that by yourself \ud83d\ude41. However, as the goal of the library is to save you as much time as possible, we've created implementations of the components based on things we know you're probably going to need at some point \ud83d\udcaa. Here is were it comes the other repository in the monorepo."),(0,a.kt)("br",null),(0,a.kt)("p",null,"Think on the following repository as plug-n-play functional components that uses the core library to build ready to go pieces of UI with the functionalities to work nice and neat:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},"@thatopen/ui-obc:")," Here you will find pre-made functional components for many things in ",(0,a.kt)("a",{parentName:"li",href:"https://github.com/thatopen/engine_components"},"@thatopen/components")," (the entry point of That Open Engine). You can expect to have from a button that loads an IFC file, to a table to configure your app tools or a panel to view all your model classifications. Basically, @thatopen/components gives you the functionality, while @thatopen/ui-obc gives you the UI to interact with those functionalities.",(0,a.kt)("br",null))),(0,a.kt)("blockquote",null,(0,a.kt)("p",{parentName:"blockquote"},"[!IMPORTANT]","\nAll the implementation libraries need ",(0,a.kt)("inlineCode",{parentName:"p"},"@thatopen/ui")," to be installed along with the respective packages they are giving UIs to. See the respective package.json files in each repository.")),(0,a.kt)("h3",{id:"why-a-monorepo-\ufe0f"},"Why a monorepo? \ud83e\udd37\u200d\u2640\ufe0f"),(0,a.kt)("p",null,"Easy, because we care about your final app bundle size. You see, the repositories that contains implementations of the UIComponents for different libraries, relies on the libraries to be installed in the project because they're required as peerDependencies. So, if we included all the pre-built UIComponents from ",(0,a.kt)("inlineCode",{parentName:"p"},"@thatopen/ui-obc")," in the core library, you will always need to have ",(0,a.kt)("inlineCode",{parentName:"p"},"@thatopen/components")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"@thatopen/components-front")," installed in your project even tough you're not using it."),(0,a.kt)("br",null),(0,a.kt)("h3",{id:"does-these-components-works-in-my-favorite-framework-"},"Does these components works in my favorite framework? \ud83e\udd14"),(0,a.kt)("p",null,"Well... yes! You name it, React? Angular? Vue? Svelte? The answer is absolutely yes. Basically, you can use these componentes anywhere HTML is accepted. If you're wondering how is that possible, is becase we're using ",(0,a.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/Web_Components"},"Web Components")," \ud83d\udd25"),(0,a.kt)("p",null,"If you're new to Web Components, no worries! Simply put, Web Components is a browser API that let's you define your own HTML tags (DOM Elements) to be used in the document. They define the look and behavior of the elements. Have you ever seen an HTML that looks something like this?"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},"
\n \n
\n")),(0,a.kt)("p",null,"As you may recall from your HTML knowledge, ",(0,a.kt)("inlineCode",{parentName:"p"},"")," is not somethings built-in in HTML... well, that's because is a Web Component! So the developer created it's own tag to use it in the document."),(0,a.kt)("p",null,"Web Components are extremely powerfull because they do mostly the same as the components you create in any framework, just they are framework agnostic and feel way more built-in. In other words, if you create a component in your framework you're not allowed to write the following directly in your HTML file:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},"\n")),(0,a.kt)("p",null,"You always need to rely on your framework tools in order to render your component, so you must use JavaScript. However, if you create a Web Component you can use it in your HTML with nothing else needed."),(0,a.kt)("br",null),(0,a.kt)("blockquote",null,(0,a.kt)("p",{parentName:"blockquote"},"[!IMPORTANT]","\nDespite Web Components is a browser API, we used ",(0,a.kt)("a",{parentName:"p",href:"https://lit.dev/"},"Lit")," to create the components as it makes the process way much easier. Also, we recommend checking your favorite framework documentation to implement web components, some of them needs a pretty basic setup to get up and running.")),(0,a.kt)("h2",{id:"getting-started"},"Getting Started"),(0,a.kt)("p",null,"To use the UIComponents, you need to install at least the core library from your terminal like this:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre"},"npm i @thatopen/ui\n")),(0,a.kt)("p",null,"Then, you need to tell the library to register the components, so you can use them in any HTML syntax. To do it, in your entry JavaScript file execute the following:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'import { UIManager } from "@thatopen/ui"\n\nUIManager.init()\n')),(0,a.kt)("p",null,"Finally, in your HTML file you can start to use the components! "),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-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 \n \n \n \n \n \n \n \n
\n\n')),(0,a.kt)("blockquote",null,(0,a.kt)("p",{parentName:"blockquote"},"[!TIP]","\nYou can get any icon from ",(0,a.kt)("a",{parentName:"p",href:"https://icon-sets.iconify.design/"},"Iconify"),"!")),(0,a.kt)("p",null,"And, in your JavaScript file:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const grid = document.getElementById("grid")\n\ngrid.layouts = {\n main: `\n "header header" auto\n "sidebar content" 1fr\n "sidebar content" 1fr\n / auto 1fr\n `\n}\n\ngrid.setLayout("main")\n')),(0,a.kt)("p",null,"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."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/bb95e244.f28c28f6.js b/build/assets/js/bb95e244.f28c28f6.js new file mode 100644 index 00000000..9acdec52 --- /dev/null +++ b/build/assets/js/bb95e244.f28c28f6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1160],{3905:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>m});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var p=n.createContext({}),c=function(e){var t=n.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},l=function(e){var t=c(e.components);return n.createElement(p.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,p=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),u=c(r),d=o,m=u["".concat(p,".").concat(d)]||u[d]||f[d]||a;return r?n.createElement(m,i(i({ref:t},l),{},{components:r})):n.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=d;var s={};for(var p in t)hasOwnProperty.call(t,p)&&(s[p]=t[p]);s.originalType=e,s[u]="string"==typeof e?e:o,i[1]=s;for(var c=2;c{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>p,default:()=>m,frontMatter:()=>s,metadata:()=>c,toc:()=>u});var n=r(7462),o=r(3366),a=(r(7294),r(3905)),i=["components"],s={id:"thatopen_components.Progress",title:"Interface: Progress",sidebar_label:"Progress",custom_edit_url:null},p=void 0,c={unversionedId:"api/interfaces/thatopen_components.Progress",id:"api/interfaces/thatopen_components.Progress",title:"Interface: Progress",description:"@thatopen/components.Progress",source:"@site/docs/api/interfaces/thatopen_components.Progress.md",sourceDirName:"api/interfaces",slug:"/api/interfaces/thatopen_components.Progress",permalink:"/api/interfaces/thatopen_components.Progress",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Progress",title:"Interface: Progress",sidebar_label:"Progress",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"NavigationMode",permalink:"/api/interfaces/thatopen_components.NavigationMode"},next:{title:"Resizeable",permalink:"/api/interfaces/thatopen_components.Resizeable"}},l={},u=[{value:"Properties",id:"properties",level:2},{value:"current",id:"current",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"total",id:"total",level:3},{value:"Defined in",id:"defined-in-1",level:4}],f={toc:u},d="wrapper";function m(e){var t=e.components,r=(0,o.Z)(e,i);return(0,a.kt)(d,(0,n.Z)({},f,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Progress"),(0,a.kt)("p",null,"Basic type to describe the progress of any kind of process."),(0,a.kt)("h2",{id:"properties"},"Properties"),(0,a.kt)("h3",{id:"current"},"current"),(0,a.kt)("p",null,"\u2022 ",(0,a.kt)("strong",{parentName:"p"},"current"),": ",(0,a.kt)("inlineCode",{parentName:"p"},"number")),(0,a.kt)("p",null,"The amount of things that have been done already."),(0,a.kt)("h4",{id:"defined-in"},"Defined in"),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L81"},"packages/core/src/core/Types/src/interfaces.ts:81")),(0,a.kt)("hr",null),(0,a.kt)("h3",{id:"total"},"total"),(0,a.kt)("p",null,"\u2022 ",(0,a.kt)("strong",{parentName:"p"},"total"),": ",(0,a.kt)("inlineCode",{parentName:"p"},"number")),(0,a.kt)("p",null,"The total amount of things to be done by the process."),(0,a.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L84"},"packages/core/src/core/Types/src/interfaces.ts:84")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/bbb18ae5.7acd3cd4.js b/build/assets/js/bbb18ae5.7acd3cd4.js new file mode 100644 index 00000000..6232db61 --- /dev/null +++ b/build/assets/js/bbb18ae5.7acd3cd4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9231],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>k});var a=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function p(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=a.createContext({}),s=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(l.Provider,{value:t},e.children)},m="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,l=e.parentName,d=r(e,["components","mdxType","originalType","parentName"]),m=s(n),u=o,k=m["".concat(l,".").concat(u)]||m[u]||c[u]||i;return n?a.createElement(k,p(p({ref:t},d),{},{components:n})):a.createElement(k,p({ref:t},d))}));function k(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,p=new Array(i);p[0]=u;var r={};for(var l in t)hasOwnProperty.call(t,l)&&(r[l]=t[l]);r.originalType=e,r[m]="string"==typeof e?e:o,p[1]=r;for(var s=2;s{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>k,frontMatter:()=>r,metadata:()=>s,toc:()=>m});var a=n(7462),o=n(3366),i=(n(7294),n(3905)),p=["components"],r={id:"thatopen_components.Components",title:"Class: Components",sidebar_label:"Components",custom_edit_url:null},l=void 0,s={unversionedId:"api/classes/thatopen_components.Components",id:"api/classes/thatopen_components.Components",title:"Class: Components",description:"@thatopen/components.Components",source:"@site/docs/api/classes/thatopen_components.Components.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.Components",permalink:"/api/classes/thatopen_components.Components",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Components",title:"Class: Components",sidebar_label:"Components",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Component",permalink:"/api/classes/thatopen_components.Component"},next:{title:"CullerRenderer",permalink:"/api/classes/thatopen_components.CullerRenderer"}},d={},m=[{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"list",id:"list",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns",level:4},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"get",id:"get",level:3},{value:"Type parameters",id:"type-parameters",level:4},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"init",id:"init",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Defined in",id:"defined-in-5",level:4}],c={toc:m},u="wrapper";function k(e){var t=e.components,n=(0,o.Z)(e,p);return(0,i.kt)(u,(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Components"),(0,i.kt)("p",null,"The entry point of the Components library.\nIt can:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Create and access all the components of the library."),(0,i.kt)("li",{parentName:"ul"},"Update all the updatable components automatically."),(0,i.kt)("li",{parentName:"ul"},"Dispose all the components, preventing memory leaks.")),(0,i.kt)("h2",{id:"implements"},"Implements"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Disposable"},(0,i.kt)("inlineCode",{parentName:"a"},"Disposable")))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"enabled"},"enabled"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"enabled"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,i.kt)("inlineCode",{parentName:"p"},"false")),(0,i.kt)("p",null,"If disabled, the animation loop will be stopped."),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Components/index.ts#L27"},"packages/core/src/core/Components/index.ts:27")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"list"},"list"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"list"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"Map"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"string"),", ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component"},(0,i.kt)("inlineCode",{parentName:"a"},"Component")),">"),(0,i.kt)("p",null,"The list of components created in this app."),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Components/index.ts#L24"},"packages/core/src/core/Components/index.ts:24")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,i.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"onDisposed")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Components/index.ts#L21"},"packages/core/src/core/Components/index.ts:21")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"dispose"},"dispose"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Disposes the memory of all the components and tools of this instance of\nthe library. A memory leak will be created if:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"An instance of the library ends up out of scope and this function isn't\ncalled. This is especially relevant in Single Page Applications (React,\nAngular, Vue, etc).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Any of the objects of this instance (meshes, geometries, etc) is\nreferenced by a reference type (object or array)."))),(0,i.kt)("p",null,"You can learn more about how Three.js handles memory leaks\n",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects"},"here"),"."),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),".",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"dispose")),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Components/index.ts#L91"},"packages/core/src/core/Components/index.ts:91")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"get"},"get"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"get"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"U"),">","(",(0,i.kt)("inlineCode",{parentName:"p"},"Component"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"U")),(0,i.kt)("p",null,"Retrieves a component. If it already exists in this app, it returns the instance of the component. If it\ndoesn't exist, it will instance it automatically."),(0,i.kt)("h4",{id:"type-parameters"},"Type parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"U")),(0,i.kt)("td",{parentName:"tr",align:"left"},"extends ",(0,i.kt)("a",{parentName:"td",href:"/api/classes/thatopen_components.Component"},(0,i.kt)("inlineCode",{parentName:"a"},"Component")))))),(0,i.kt)("h4",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Component")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Object")),(0,i.kt)("td",{parentName:"tr",align:"left"},"The component to get or create.")))),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"U")),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Components/index.ts#L46"},"packages/core/src/core/Components/index.ts:46")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"init"},"init"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"init"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Initializes the library. It should be called at the start of the app after\ninitializing the scene, the renderer and the\ncamera. Additionally, if any component that need a raycaster is\nused, the raycaster will need to be initialized."),(0,i.kt)("h4",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Components/index.ts#L70"},"packages/core/src/core/Components/index.ts:70")))}k.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/bf390c76.f5f57613.js b/build/assets/js/bf390c76.f5f57613.js new file mode 100644 index 00000000..9653e67b --- /dev/null +++ b/build/assets/js/bf390c76.f5f57613.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5264],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>u});var a=n(7294);function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e){for(var t=1;t=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var o=a.createContext({}),l=function(e){var t=a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},c=function(e){var t=l(e.components);return a.createElement(o.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},h=a.forwardRef((function(e,t){var n=e.components,s=e.mdxType,i=e.originalType,o=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),d=l(n),h=s,u=d["".concat(o,".").concat(h)]||d[h]||m[h]||i;return n?a.createElement(u,r(r({ref:t},c),{},{components:n})):a.createElement(u,r({ref:t},c))}));function u(e,t){var n=arguments,s=t&&t.mdxType;if("string"==typeof e||s){var i=n.length,r=new Array(i);r[0]=h;var p={};for(var o in t)hasOwnProperty.call(t,o)&&(p[o]=t[o]);p.originalType=e,p[d]="string"==typeof e?e:s,r[1]=p;for(var l=2;l{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>u,frontMatter:()=>p,metadata:()=>l,toc:()=>d});var a=n(7462),s=n(3366),i=(n(7294),n(3905)),r=["components"],p={id:"thatopen_components.Component",title:"Class: Component",sidebar_label:"Component",custom_edit_url:null},o=void 0,l={unversionedId:"api/classes/thatopen_components.Component",id:"api/classes/thatopen_components.Component",title:"Class: Component",description:"@thatopen/components.Component",source:"@site/docs/api/classes/thatopen_components.Component.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.Component",permalink:"/api/classes/thatopen_components.Component",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Component",title:"Class: Component",sidebar_label:"Component",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Clipper",permalink:"/api/classes/thatopen_components.Clipper"},next:{title:"Components",permalink:"/api/classes/thatopen_components.Components"}},c={},d=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"Methods",id:"methods",level:2},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-5",level:4}],m={toc:d},h="wrapper";function u(e){var t=e.components,n=(0,s.Z)(e,r);return(0,i.kt)(h,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Component"),(0,i.kt)("p",null,"Components are the building blocks of this library. Components are singleton\nelements that contain specific functionality. For instance, the SimpleClipper\nComponent can create, delete and handle 3D clipping planes. Components must be\nunique (they can't be instanced more than once), and have a static UUID that\nidentifies them uniquely. The can be accessed globally using the ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Components"},"Components"),"\ninstance."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},(0,i.kt)("inlineCode",{parentName:"a"},"Base"))),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"Component"))),(0,i.kt)("p",{parentName:"li"},"\u21b3\u21b3 ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Disposer"},(0,i.kt)("inlineCode",{parentName:"a"},"Disposer"))),(0,i.kt)("p",{parentName:"li"},"\u21b3\u21b3 ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Clipper"},(0,i.kt)("inlineCode",{parentName:"a"},"Clipper"))),(0,i.kt)("p",{parentName:"li"},"\u21b3\u21b3 ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Cullers"},(0,i.kt)("inlineCode",{parentName:"a"},"Cullers"))),(0,i.kt)("p",{parentName:"li"},"\u21b3\u21b3 ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.BoundingBoxer"},(0,i.kt)("inlineCode",{parentName:"a"},"BoundingBoxer"))),(0,i.kt)("p",{parentName:"li"},"\u21b3\u21b3 ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.FragmentsManager"},(0,i.kt)("inlineCode",{parentName:"a"},"FragmentsManager"))),(0,i.kt)("p",{parentName:"li"},"\u21b3\u21b3 ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.IfcJsonExporter"},(0,i.kt)("inlineCode",{parentName:"a"},"IfcJsonExporter"))),(0,i.kt)("p",{parentName:"li"},"\u21b3\u21b3 ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.IfcRelationsIndexer"},(0,i.kt)("inlineCode",{parentName:"a"},"IfcRelationsIndexer"))))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"enabled"},"enabled"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Abstract")," ",(0,i.kt)("strong",{parentName:"p"},"enabled"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")),(0,i.kt)("p",null,"Whether this component is active or not. The behaviour can vary depending\non the type of component. E.g. a disabled dimension tool will stop creating\ndimensions, while a disabled camera will stop moving. A disabled component\nwill not be updated automatically each frame."),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/component.ts#L19"},"packages/core/src/core/Types/src/component.ts:19")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,"this is Configurable"),(0,i.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},"Base"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base#isconfigurable"},"isConfigurable")),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,"this is Disposable"),(0,i.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},"Base"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base#isdisposeable"},"isDisposeable")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ishideable"},"isHideable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,i.kt)("h4",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,"this is Hideable"),(0,i.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},"Base"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base#ishideable"},"isHideable")),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,i.kt)("h4",{id:"returns-3"},"Returns"),(0,i.kt)("p",null,"this is Resizeable"),(0,i.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},"Base"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base#isresizeable"},"isResizeable")),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,i.kt)("h4",{id:"returns-4"},"Returns"),(0,i.kt)("p",null,"this is Updateable"),(0,i.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base"},"Base"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Base#isupdateable"},"isUpdateable")),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/c1b3b982.60198788.js b/build/assets/js/c1b3b982.60198788.js new file mode 100644 index 00000000..5e1d8b19 --- /dev/null +++ b/build/assets/js/c1b3b982.60198788.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6812],{3905:(e,n,t)=>{t.d(n,{Zo:()=>p,kt:()=>h});var o=t(7294);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function r(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=o.createContext({}),m=function(e){var n=o.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=m(e.components);return o.createElement(l.Provider,{value:n},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},u=o.forwardRef((function(e,n){var t=e.components,a=e.mdxType,r=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),c=m(t),u=a,h=c["".concat(l,".").concat(u)]||c[u]||d[u]||r;return t?o.createElement(h,i(i({ref:n},p),{},{components:t})):o.createElement(h,i({ref:n},p))}));function h(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=t.length,i=new Array(r);i[0]=u;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s[c]="string"==typeof e?e:a,i[1]=s;for(var m=2;m{t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>m,toc:()=>c});var o=t(7462),a=t(3366),r=(t(7294),t(3905)),i=["components"],s={},l=void 0,m={unversionedId:"Tutorials/Components/Front/AreaMeasurement",id:"Tutorials/Components/Front/AreaMeasurement",title:"AreaMeasurement",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Front/AreaMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/AreaMeasurement",permalink:"/Tutorials/Components/Front/AreaMeasurement",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"AngleMeasurement",permalink:"/Tutorials/Components/Front/AngleMeasurement"},next:{title:"EdgesClipper",permalink:"/Tutorials/Components/Front/EdgesClipper"}},p={},c=[{value:"\ud83d\udccf Dimensions Tool",id:"-dimensions-tool",level:3},{value:"\ud83c\udfb2 Creating a Cube Mesh",id:"-creating-a-cube-mesh",level:3},{value:"\ud83d\udee0\ufe0f Creating Dimension Tool",id:"\ufe0f-creating-dimension-tool",level:3},{value:"\ud83d\uddb1\ufe0f Managing Events",id:"\ufe0f-managing-events",level:3},{value:"\u270d\ufe0f Creating the Dimensions",id:"\ufe0f-creating-the-dimensions",level:4},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:4},{value:"\ud83d\udd8c\ufe0f Adding Styles",id:"\ufe0f-adding-styles",level:3}],d={toc:c},u="wrapper";function h(e){var n=e.components,t=(0,a.Z)(e,i);return(0,r.kt)(u,(0,o.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("admonition",{title:"Source",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/AreaMeasurement/example.ts"},"here"),".")),(0,r.kt)("h3",{id:"-dimensions-tool"},"\ud83d\udccf Dimensions Tool"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"At times, you may need to compute the dimensions of an object or measure the distance between two elements.\nElements must be precisely aligned when working on complex models.\nDimension Tool allows you to perform measurements effortlessly."),(0,r.kt)("admonition",{title:"First, let's set up a simple scene!",type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"\ud83d\udc40 If you haven't started there, check out ",(0,r.kt)("a",{parentName:"p",href:"SimpleScene.mdx"},"that tutorial first"),"!")),(0,r.kt)("p",null,"This tutorial will show you how to add Dimension Tool to your projects,\nwhich can be used to acquire accurate dimensions for any 3D Object.\ud83d\udd2d"),(0,r.kt)("h3",{id:"-creating-a-cube-mesh"},"\ud83c\udfb2 Creating a Cube Mesh"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"For this tutorial we will use a Cube, you can add any geometry as per your preference.\nWe will create a ",(0,r.kt)("a",{parentName:"p",href:"https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry"},"Cube"),"\nwith ",(0,r.kt)("inlineCode",{parentName:"p"},"3x3x3")," dimensions and use red color for the material."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'import Stats from "stats.js";\nimport * as OBC from "openbim-components";\nimport * as THREE from "three";\nimport * as OBCF from "../..";\n\nconst 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')),(0,r.kt)("p",null,"Now, we will add the Cube to the ",(0,r.kt)("inlineCode",{parentName:"p"},"Scene"),". We must also add the ",(0,r.kt)("strong",{parentName:"p"},"cube")," to ",(0,r.kt)("inlineCode",{parentName:"p"},"components.meshes"),",\nwhich is simply an array of all the meshes in the Scene.\ud83d\uddc4\ufe0f"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'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);\n')),(0,r.kt)("admonition",{title:"Collection of Meshes",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"\ud83d\udce6 ",(0,r.kt)("strong",{parentName:"p"},"Components.meshes")," keeps all your meshes including IFC Models, Fragments in\none place.")),(0,r.kt)("h3",{id:"\ufe0f-creating-dimension-tool"},"\ud83d\udee0\ufe0f Creating Dimension Tool"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"A lot of logic is usually needed to compute dimensions for any item, beginning with ray casting,\nfinding the vertices to snap to, and rendering the UI for every line element.\ud83d\ude44\nThis may appear to be a lot of effort, but we are handling all the heavy lifting for you,\nand you only need to write a few lines for creating the Dimension Tool.\ud83d\udcaa"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"world.scene.three.add(cube);\nworld.meshes.add(cube);\n")),(0,r.kt)("p",null,"We will build dimensions by supplying the ",(0,r.kt)("inlineCode",{parentName:"p"},"components")," to ",(0,r.kt)("strong",{parentName:"p"},"OBC.SimpleDimensions"),"."),(0,r.kt)("admonition",{title:"DIMENSIONS AND UI",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"Read the ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("a",{parentName:"strong",href:"../api/classes/components.SimpleDimensions"},"Simple Dimensions"))," API for more on this.\nThe Simple Dimensions API provides you with a compact UI as well to display the measurements.")),(0,r.kt)("p",null,"\ud83c\udfa8 ",(0,r.kt)("strong",{parentName:"p"},"SimpleDimensions")," has several properties that help you to customize the behaviour of the ",(0,r.kt)("inlineCode",{parentName:"p"},"Line Element"),".\nOne such property which you can use is ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"dimensions.color"))," which modifies the color of the Line Element."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const areaDims = new OBCF.AreaMeasurement(components);\nareaDims.world = world;\n")),(0,r.kt)("h3",{id:"\ufe0f-managing-events"},"\ud83d\uddb1\ufe0f Managing Events"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"You can use the Dimension Tool to construct several dimension lines. Let's see how you handle them."),(0,r.kt)("h4",{id:"\ufe0f-creating-the-dimensions"},"\u270d\ufe0f Creating the Dimensions"),(0,r.kt)("p",null,"Now that we've generated the dimensions object, we need to attach the line tooltip to a vertex of the 3D object.\nWe'll use the double click event to invoke ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"dimensions.create()")),".\nWhen this event occurs, a line element is generated,\nand the distance is calculated in real-time inside the label associated with that line.\ud83c\udff7\ufe0f"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"areaDims.enabled = true;\n")),(0,r.kt)("h4",{id:"-deleting-the-dimensions"},"\ud83e\uddf9 Deleting the Dimensions"),(0,r.kt)("p",null,"Now that we know how to make multiple dimension lines, we must also know how to delete them when necessary.\nDimensions can be removed using ",(0,r.kt)("inlineCode",{parentName:"p"},"dimensions.delete()"),".\n",(0,r.kt)("strong",{parentName:"p"},"dimensions.delete()")," deletes the dimension on which your mouse pointer is now located."),(0,r.kt)("admonition",{title:"Deleting all the Dimensions",type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"\u274e If you want to safely delete all the ",(0,r.kt)("strong",{parentName:"p"},"dimensions")," that were created you can simply call\n",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"dimensions.deleteAll()")))),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"container.ondblclick = () => areaDims.create();\ncontainer.oncontextmenu = () => areaDims.endCreation();\n")),(0,r.kt)("p",null,"\ud83c\udf9b\ufe0f Check ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("a",{parentName:"strong",href:"./UIManager.mdx"},"Toolbar and UIManager"))," tutorial if you have any doubts!"),(0,r.kt)("h3",{id:"\ufe0f-adding-styles"},"\ud83d\udd8c\ufe0f Adding Styles"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"Few final things, we need to add styles for the ",(0,r.kt)("inlineCode",{parentName:"p"},"labels")," which display the measurement information."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"strong"},"ifcjs-dimension-label"))," - The label which is used to show the metric value after both the tooltips are attached."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"strong"},"ifcjs-dimension-label:hover"))," - Changing the styling when someone hovers on the dimension label."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"strong"},"ifcjs-dimension-preview"))," - The label which shows the measurement when the tooltip is not yet attached.")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style"',title:'"style"'},".ifcjs-dimension-label {\nbackground-color: black;\nfont-family: sans-serif;\ncolor: white;\npadding: 8px;\nborder-radius: 8px;\npointer-events: all;\ntransition: background-color 200ms ease-in-out;\n}\n.ifcjs-dimension-label:hover {\nbackground-color: grey;\n}\n.ifcjs-dimension-preview {\nbackground-color: #ffffff;\nwidth: 2rem;\nheight: 2rem;\nopacity: 0.3;\npadding: 8px;\nborder-radius: 100%;\n}\n")),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},"Congratulations")," \ud83c\udf89 on completing this tutorial! Now you can measure any BIM Model or any 3D Object easily using\n",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("a",{parentName:"strong",href:"../api/classes/components.SimpleDimensions"},"Simple Dimension Component"))," \ud83d\udcd0\nLet's keep it up and check out another tutorial! \ud83c\udf93"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'window.onkeydown = (event) => {\n if (event.code === "Delete" || event.code === "Backspace") {\n // WORK IN PROGRESS\n // dimensions.delete();\n }\n};\n')),(0,r.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/AreaMeasurement"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/c2bbc440.925f93c1.js b/build/assets/js/c2bbc440.925f93c1.js new file mode 100644 index 00000000..a492b0f9 --- /dev/null +++ b/build/assets/js/c2bbc440.925f93c1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3045],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>d});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=n.createContext({}),p=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},c=function(e){var t=p(e.components);return n.createElement(l.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(r),f=a,d=u["".concat(l,".").concat(f)]||u[f]||m[f]||o;return r?n.createElement(d,i(i({ref:t},c),{},{components:r})):n.createElement(d,i({ref:t},c))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=f;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,i[1]=s;for(var p=2;p{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>s,metadata:()=>p,toc:()=>u});var n=r(7462),a=r(3366),o=(r(7294),r(3905)),i=["components"],s={id:"thatopen_fragments",title:"Module: @thatopen/fragments",sidebar_label:"@thatopen/fragments",sidebar_position:0,custom_edit_url:null},l=void 0,p={unversionedId:"api/modules/thatopen_fragments",id:"api/modules/thatopen_fragments",title:"Module: @thatopen/fragments",description:"Classes",source:"@site/docs/api/modules/thatopen_fragments.md",sourceDirName:"api/modules",slug:"/api/modules/thatopen_fragments",permalink:"/api/modules/thatopen_fragments",draft:!1,editUrl:null,tags:[],version:"current",sidebarPosition:0,frontMatter:{id:"thatopen_fragments",title:"Module: @thatopen/fragments",sidebar_label:"@thatopen/fragments",sidebar_position:0,custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"@thatopen/components-front",permalink:"/api/modules/thatopen_components_front"},next:{title:"AsyncEvent",permalink:"/api/classes/thatopen_components.AsyncEvent"}},c={},u=[{value:"Classes",id:"classes",level:2}],m={toc:u},f="wrapper";function d(e){var t=e.components,r=(0,a.Z)(e,i);return(0,o.kt)(f,(0,n.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h2",{id:"classes"},"Classes"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_fragments.Serializer"},"Serializer"))))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/c62bb28c.a1814be5.js b/build/assets/js/c62bb28c.a1814be5.js new file mode 100644 index 00000000..4930d2aa --- /dev/null +++ b/build/assets/js/c62bb28c.a1814be5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5447],{3905:(e,n,t)=>{t.d(n,{Zo:()=>p,kt:()=>h});var o=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function a(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=o.createContext({}),m=function(e){var n=o.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):a(a({},n),e)),t},p=function(e){var n=m(e.components);return o.createElement(l.Provider,{value:n},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},u=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),c=m(t),u=r,h=c["".concat(l,".").concat(u)]||c[u]||d[u]||i;return t?o.createElement(h,a(a({ref:n},p),{},{components:t})):o.createElement(h,a({ref:n},p))}));function h(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var i=t.length,a=new Array(i);a[0]=u;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s[c]="string"==typeof e?e:r,a[1]=s;for(var m=2;m{t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>m,toc:()=>c});var o=t(7462),r=t(3366),i=(t(7294),t(3905)),a=["components"],s={},l=void 0,m={unversionedId:"Tutorials/Components/Front/LengthMeasurement",id:"Tutorials/Components/Front/LengthMeasurement",title:"LengthMeasurement",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Front/LengthMeasurement.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/LengthMeasurement",permalink:"/Tutorials/Components/Front/LengthMeasurement",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcStreamer",permalink:"/Tutorials/Components/Front/IfcStreamer"},next:{title:"PostproductionRenderer",permalink:"/Tutorials/Components/Front/PostproductionRenderer"}},p={},c=[{value:"\ud83d\udccf Dimensions Tool",id:"-dimensions-tool",level:3},{value:"\ud83c\udfb2 Creating a Cube Mesh",id:"-creating-a-cube-mesh",level:3},{value:"\ud83d\udee0\ufe0f Creating Dimension Tool",id:"\ufe0f-creating-dimension-tool",level:3},{value:"\ud83d\uddb1\ufe0f Managing Events",id:"\ufe0f-managing-events",level:3},{value:"\u270d\ufe0f Creating the Dimensions",id:"\ufe0f-creating-the-dimensions",level:4},{value:"\ud83e\uddf9 Deleting the Dimensions",id:"-deleting-the-dimensions",level:4}],d={toc:c},u="wrapper";function h(e){var n=e.components,t=(0,r.Z)(e,a);return(0,i.kt)(u,(0,o.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,i.kt)("admonition",{title:"Source",type:"info"},(0,i.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/LengthMeasurement/example.ts"},"here"),".")),(0,i.kt)("h3",{id:"-dimensions-tool"},"\ud83d\udccf Dimensions Tool"),(0,i.kt)("hr",null),(0,i.kt)("p",null,"At times, you may need to compute the dimensions of an object or measure the distance between two elements.\nElements must be precisely aligned when working on complex models.\nDimension Tool allows you to perform measurements effortlessly."),(0,i.kt)("admonition",{title:"First, let's set up a simple scene!",type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"\ud83d\udc40 If you haven't started there, check out ",(0,i.kt)("a",{parentName:"p",href:"SimpleScene.mdx"},"that tutorial first"),"!")),(0,i.kt)("p",null,"This tutorial will show you how to add Dimension Tool to your projects,\nwhich can be used to acquire accurate dimensions for any 3D Object.\ud83d\udd2d"),(0,i.kt)("h3",{id:"-creating-a-cube-mesh"},"\ud83c\udfb2 Creating a Cube Mesh"),(0,i.kt)("hr",null),(0,i.kt)("p",null,"For this tutorial we will use a Cube, you can add any geometry as per your preference.\nWe will create a ",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry"},"Cube"),"\nwith ",(0,i.kt)("inlineCode",{parentName:"p"},"3x3x3")," dimensions and use red color for the material."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'import Stats from "stats.js";\n\nimport * as OBC from "openbim-components";\nimport * as THREE from "three";\nimport * as BUI from "@thatopen/ui";\nimport * as OBCF from "../..";\n\nconst 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')),(0,i.kt)("p",null,"Now, we will add the Cube to the ",(0,i.kt)("inlineCode",{parentName:"p"},"Scene"),". We must also add the ",(0,i.kt)("strong",{parentName:"p"},"cube")," to ",(0,i.kt)("inlineCode",{parentName:"p"},"components.meshes"),",\nwhich is simply an array of all the meshes in the Scene.\ud83d\uddc4\ufe0f"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'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);\n')),(0,i.kt)("admonition",{title:"Collection of Meshes",type:"info"},(0,i.kt)("p",{parentName:"admonition"},"\ud83d\udce6 ",(0,i.kt)("strong",{parentName:"p"},"Components.meshes")," keeps all your meshes including IFC Models, Fragments in\none place.")),(0,i.kt)("h3",{id:"\ufe0f-creating-dimension-tool"},"\ud83d\udee0\ufe0f Creating Dimension Tool"),(0,i.kt)("hr",null),(0,i.kt)("p",null,"A lot of logic is usually needed to compute dimensions for any item, beginning with ray casting,\nfinding the vertices to snap to, and rendering the UI for every line element.\ud83d\ude44\nThis may appear to be a lot of effort, but we are handling all the heavy lifting for you,\nand you only need to write a few lines for creating the Dimension Tool.\ud83d\udcaa"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"world.scene.three.add(cube);\nworld.meshes.add(cube);\n")),(0,i.kt)("p",null,"We will build dimensions by supplying the ",(0,i.kt)("inlineCode",{parentName:"p"},"components")," to ",(0,i.kt)("strong",{parentName:"p"},"OBC.SimpleDimensions"),"."),(0,i.kt)("admonition",{title:"DIMENSIONS AND UI",type:"info"},(0,i.kt)("p",{parentName:"admonition"},"Read the ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("a",{parentName:"strong",href:"../api/classes/components.SimpleDimensions"},"Simple Dimensions"))," API for more on this.\nThe Simple Dimensions API provides you with a compact UI as well to display the measurements.")),(0,i.kt)("p",null,"\ud83c\udfa8 ",(0,i.kt)("strong",{parentName:"p"},"SimpleDimensions")," has several properties that help you to customize the behaviour of the ",(0,i.kt)("inlineCode",{parentName:"p"},"Line Element"),".\nOne such property which you can use is ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"dimensions.color"))," which modifies the color of the Line Element.\nNow, let's enable dimensions and tell them to be snapped at a distance of one unit.\n",(0,i.kt)("strong",{parentName:"p"},"snapDistance")," helps in attaching the tooltip temporarily at regular intervals,\nmaking it easier to interact with items.\ud83d\udccd"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"const dimensions = new OBCF.LengthMeasurement(components);\ndimensions.world = world;\n")),(0,i.kt)("h3",{id:"\ufe0f-managing-events"},"\ud83d\uddb1\ufe0f Managing Events"),(0,i.kt)("hr",null),(0,i.kt)("p",null,"You can use the Dimension Tool to construct several dimension lines. Let's see how you handle them."),(0,i.kt)("h4",{id:"\ufe0f-creating-the-dimensions"},"\u270d\ufe0f Creating the Dimensions"),(0,i.kt)("p",null,"Now that we've generated the dimensions object, we need to attach the line tooltip to a vertex of the 3D object.\nWe'll use the double click event to invoke ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"dimensions.create()")),".\nWhen this event occurs, a line element is generated,\nand the distance is calculated in real-time inside the label associated with that line.\ud83c\udff7\ufe0f"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"dimensions.enabled = true;\ndimensions.snapDistance = 1;\n")),(0,i.kt)("h4",{id:"-deleting-the-dimensions"},"\ud83e\uddf9 Deleting the Dimensions"),(0,i.kt)("p",null,"Now that we know how to make multiple dimension lines, we must also know how to delete them when necessary.\nDimensions can be removed using ",(0,i.kt)("inlineCode",{parentName:"p"},"dimensions.delete()"),".\n",(0,i.kt)("strong",{parentName:"p"},"dimensions.delete()")," deletes the dimension on which your mouse pointer is now located."),(0,i.kt)("admonition",{title:"Deleting all the Dimensions",type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"\u274e If you want to safely delete all the ",(0,i.kt)("strong",{parentName:"p"},"dimensions")," that were created you can simply call\n",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"dimensions.deleteAll()")))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"container.ondblclick = () => dimensions.create();\n")),(0,i.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/LengthMeasurement"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/c6f50999.6d80854d.js b/build/assets/js/c6f50999.6d80854d.js new file mode 100644 index 00000000..a1bded4a --- /dev/null +++ b/build/assets/js/c6f50999.6d80854d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9773],{3905:(e,t,n)=>{n.d(t,{Zo:()=>o,kt:()=>h});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),d=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},o=function(e){var t=d(e.components);return r.createElement(s.Provider,{value:t},e.children)},c="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},k=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,o=p(e,["components","mdxType","originalType","parentName"]),c=d(n),k=a,h=c["".concat(s,".").concat(k)]||c[k]||u[k]||i;return n?r.createElement(h,l(l({ref:t},o),{},{components:n})):r.createElement(h,l({ref:t},o))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,l=new Array(i);l[0]=k;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p[c]="string"==typeof e?e:a,l[1]=p;for(var d=2;d{n.r(t),n.d(t,{assets:()=>o,contentTitle:()=>s,default:()=>h,frontMatter:()=>p,metadata:()=>d,toc:()=>c});var r=n(7462),a=n(3366),i=(n(7294),n(3905)),l=["components"],p={id:"thatopen_components.SimpleRenderer",title:"Class: SimpleRenderer",sidebar_label:"SimpleRenderer",custom_edit_url:null},s=void 0,d={unversionedId:"api/classes/thatopen_components.SimpleRenderer",id:"api/classes/thatopen_components.SimpleRenderer",title:"Class: SimpleRenderer",description:"@thatopen/components.SimpleRenderer",source:"@site/docs/api/classes/thatopen_components.SimpleRenderer.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.SimpleRenderer",permalink:"/api/classes/thatopen_components.SimpleRenderer",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.SimpleRenderer",title:"Class: SimpleRenderer",sidebar_label:"SimpleRenderer",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"SimplePlane",permalink:"/api/classes/thatopen_components.SimplePlane"},next:{title:"SimpleScene",permalink:"/api/classes/thatopen_components.SimpleScene"}},o={},c=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Properties",id:"properties",level:2},{value:"clippingPlanes",id:"clippingplanes",level:3},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"container",id:"container",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"onAfterUpdate",id:"onafterupdate",level:3},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"onBeforeUpdate",id:"onbeforeupdate",level:3},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"onClippingPlanesUpdated",id:"onclippingplanesupdated",level:3},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns",level:4},{value:"Overrides",id:"overrides",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"getSize",id:"getsize",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Overrides",id:"overrides-1",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Inherited from",id:"inherited-from-6",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from-7",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-5",level:4},{value:"Inherited from",id:"inherited-from-8",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Inherited from",id:"inherited-from-9",level:4},{value:"Defined in",id:"defined-in-12",level:4},{value:"resize",id:"resize",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-7",level:4},{value:"Overrides",id:"overrides-2",level:4},{value:"Defined in",id:"defined-in-13",level:4},{value:"setPlane",id:"setplane",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-8",level:4},{value:"Inherited from",id:"inherited-from-10",level:4},{value:"Defined in",id:"defined-in-14",level:4},{value:"update",id:"update",level:3},{value:"Returns",id:"returns-9",level:4},{value:"Overrides",id:"overrides-3",level:4},{value:"Defined in",id:"defined-in-15",level:4},{value:"updateClippingPlanes",id:"updateclippingplanes",level:3},{value:"Returns",id:"returns-10",level:4},{value:"Inherited from",id:"inherited-from-11",level:4},{value:"Defined in",id:"defined-in-16",level:4}],u={toc:c},k="wrapper";function h(e){var t=e.components,n=(0,a.Z)(e,l);return(0,i.kt)(k,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".SimpleRenderer"),(0,i.kt)("p",null,"A basic renderer capable of rendering\n(",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/core/Object3D"},"Objec3Ds"),"."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"BaseRenderer")),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"SimpleRenderer"))))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"clippingplanes"},"clippingPlanes"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"clippingPlanes"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"Plane"),"[] = ",(0,i.kt)("inlineCode",{parentName:"p"},"[]")),(0,i.kt)("p",null,"The list of ",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/renderers/WebGLRenderer.clippingPlanes"},"clipping planes")," used by this\ninstance of the renderer."),(0,i.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.clippingPlanes"),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-renderer.ts#L42"},"packages/core/src/core/Types/src/base-renderer.ts:42")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"container"},"container"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"container"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"HTMLElement")),(0,i.kt)("p",null,"The HTML container of the THREE.js canvas where the scene is rendered."),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-renderer.ts#L19"},"packages/core/src/core/Worlds/src/simple-renderer.ts:19")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"onafterupdate"},"onAfterUpdate"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"onAfterUpdate"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#onbeforeupdate"},"Updateable.onBeforeUpdate")),(0,i.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.onAfterUpdate"),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-renderer.ts#L14"},"packages/core/src/core/Types/src/base-renderer.ts:14")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"onbeforeupdate"},"onBeforeUpdate"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"onBeforeUpdate"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#onafterupdate"},"Updateable.onAfterUpdate")),(0,i.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.onBeforeUpdate"),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-renderer.ts#L17"},"packages/core/src/core/Types/src/base-renderer.ts:17")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"onclippingplanesupdated"},"onClippingPlanesUpdated"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onClippingPlanesUpdated"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,i.kt)("p",null,"Event that fires when there has been a change to the list of clipping\nplanes used by the active renderer."),(0,i.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.onClippingPlanesUpdated"),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-renderer.ts#L28"},"packages/core/src/core/Types/src/base-renderer.ts:28")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"undefined"),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,i.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.onDisposed"),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-renderer.ts#L20"},"packages/core/src/core/Types/src/base-renderer.ts:20")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"dispose"},"dispose"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"Disposable.dispose")),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"overrides"},"Overrides"),(0,i.kt)("p",null,"BaseRenderer.dispose"),(0,i.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-renderer.ts#L74"},"packages/core/src/core/Worlds/src/simple-renderer.ts:74")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"getsize"},"getSize"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"getSize"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"Vector2")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable#getsize"},"Resizeable.getSize"),"."),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"Vector2")),(0,i.kt)("h4",{id:"overrides-1"},"Overrides"),(0,i.kt)("p",null,"BaseRenderer.getSize"),(0,i.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-renderer.ts#L88"},"packages/core/src/core/Worlds/src/simple-renderer.ts:88")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,i.kt)("h4",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,"this is Configurable"),(0,i.kt)("h4",{id:"inherited-from-5"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.isConfigurable"),(0,i.kt)("h4",{id:"defined-in-8"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,i.kt)("h4",{id:"returns-3"},"Returns"),(0,i.kt)("p",null,"this is Disposable"),(0,i.kt)("h4",{id:"inherited-from-6"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.isDisposeable"),(0,i.kt)("h4",{id:"defined-in-9"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ishideable"},"isHideable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,i.kt)("h4",{id:"returns-4"},"Returns"),(0,i.kt)("p",null,"this is Hideable"),(0,i.kt)("h4",{id:"inherited-from-7"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.isHideable"),(0,i.kt)("h4",{id:"defined-in-10"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,i.kt)("h4",{id:"returns-5"},"Returns"),(0,i.kt)("p",null,"this is Resizeable"),(0,i.kt)("h4",{id:"inherited-from-8"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.isResizeable"),(0,i.kt)("h4",{id:"defined-in-11"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,i.kt)("h4",{id:"returns-6"},"Returns"),(0,i.kt)("p",null,"this is Updateable"),(0,i.kt)("h4",{id:"inherited-from-9"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.isUpdateable"),(0,i.kt)("h4",{id:"defined-in-12"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"resize"},"resize"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"resize"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"size?"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable#resize"},"Resizeable.resize")),(0,i.kt)("h4",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"size?")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Vector2"))))),(0,i.kt)("h4",{id:"returns-7"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"overrides-2"},"Overrides"),(0,i.kt)("p",null,"BaseRenderer.resize"),(0,i.kt)("h4",{id:"defined-in-13"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-renderer.ts#L96"},"packages/core/src/core/Worlds/src/simple-renderer.ts:96")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"setplane"},"setPlane"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"setPlane"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"active"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"plane"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"isLocal?"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Adds or removes a\n",(0,i.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/renderers/WebGLRenderer.clippingPlanes"},"clipping plane"),"\nto the renderer."),(0,i.kt)("h4",{id:"parameters-1"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"active")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean"))),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"plane")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Plane"))),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"isLocal?")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean"))))),(0,i.kt)("h4",{id:"returns-8"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"inherited-from-10"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.setPlane"),(0,i.kt)("h4",{id:"defined-in-14"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-renderer.ts#L57"},"packages/core/src/core/Types/src/base-renderer.ts:57")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"update"},"update"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"update"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#update"},"Updateable.update")),(0,i.kt)("h4",{id:"returns-9"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"overrides-3"},"Overrides"),(0,i.kt)("p",null,"BaseRenderer.update"),(0,i.kt)("h4",{id:"defined-in-15"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-renderer.ts#L61"},"packages/core/src/core/Worlds/src/simple-renderer.ts:61")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"updateclippingplanes"},"updateClippingPlanes"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"updateClippingPlanes"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Forces the update of the clipping planes and all components that depend\non them that are subscribed to ",(0,i.kt)("inlineCode",{parentName:"p"},"onClippingPlanesUpdated"),"."),(0,i.kt)("h4",{id:"returns-10"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"inherited-from-11"},"Inherited from"),(0,i.kt)("p",null,"BaseRenderer.updateClippingPlanes"),(0,i.kt)("h4",{id:"defined-in-16"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-renderer.ts#L48"},"packages/core/src/core/Types/src/base-renderer.ts:48")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/ca57013d.f7530c04.js b/build/assets/js/ca57013d.f7530c04.js new file mode 100644 index 00000000..68cd8f6a --- /dev/null +++ b/build/assets/js/ca57013d.f7530c04.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4394],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>h});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function s(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=o.createContext({}),l=function(e){var t=o.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=l(e.components);return o.createElement(p.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},u=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,p=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),c=l(n),u=r,h=c["".concat(p,".").concat(u)]||c[u]||m[u]||a;return n?o.createElement(h,s(s({ref:t},d),{},{components:n})):o.createElement(h,s({ref:t},d))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,s=new Array(a);s[0]=u;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[c]="string"==typeof e?e:r,s[1]=i;for(var l=2;l{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>h,frontMatter:()=>i,metadata:()=>l,toc:()=>c});var o=n(7462),r=n(3366),a=(n(7294),n(3905)),s=["components"],i={},p=void 0,l={unversionedId:"Tutorials/Components/Front/ShadowDropper",id:"Tutorials/Components/Front/ShadowDropper",title:"ShadowDropper",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Front/ShadowDropper.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/ShadowDropper",permalink:"/Tutorials/Components/Front/ShadowDropper",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"PostproductionRenderer",permalink:"/Tutorials/Components/Front/PostproductionRenderer"},next:{title:"UserInterface",permalink:"/Tutorials/UserInterface/"}},d={},c=[{value:"\ud83c\udf12 Adding Realism",id:"-adding-realism",level:3},{value:"\ud83c\udfb2 Creating a Cube Mesh",id:"-creating-a-cube-mesh",level:3},{value:"\ud83c\udf1a Adding Beautiful Shadow",id:"-adding-beautiful-shadow",level:3},{value:"\ud83c\udfa8 Rendering Shadow",id:"-rendering-shadow",level:3}],m={toc:c},u="wrapper";function h(e){var t=e.components,n=(0,r.Z)(e,s);return(0,a.kt)(u,(0,o.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/core/ShadowDropper/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"-adding-realism"},"\ud83c\udf12 Adding Realism"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Have you ever wondered what makes a scene look realistic?\nAdding ",(0,a.kt)("strong",{parentName:"p"},"Shadow")," to 3D objects may quickly add depth to your creations.\ud83d\ude0e\nIn this tutorial, we'll show you how to use Shadow Dropper to quickly apply shadows.\nIn less than 5 minutes, you can create realistic shadows for all the meshes inside your scene.\u23f1\ufe0f"),(0,a.kt)("admonition",{title:"First, let's set up a simple scene!",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"\ud83d\udc40 If you haven't started there, check out ",(0,a.kt)("a",{parentName:"p",href:"SimpleScene.mdx"},"that tutorial first"),"!")),(0,a.kt)("h3",{id:"-creating-a-cube-mesh"},"\ud83c\udfb2 Creating a Cube Mesh"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Let's start by adding a Cube, which we can dissect.\nWe will create a ",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry"},"Cube"),"\nwith ",(0,a.kt)("inlineCode",{parentName:"p"},"3x3x3")," dimensions and use red color for the material."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import * as THREE from "three";\nimport * as OBC from "openbim-components";\nimport Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as OBCF from "../..";\n\nconst 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.RendererWith2D\n>();\n\nworld.scene = new OBC.SimpleScene(components);\nworld.renderer = new OBCF.RendererWith2D(components, container);\nworld.camera = new OBC.SimpleCamera(components);\n\nworld.scene.setup();\n\ncomponents.init();\n\nworld.camera.controls.setLookAt(5, 5, 5, 0, 0, 0);\n\ncontainer.appendChild(world.renderer.three2D.domElement);\n\nconst grids = components.get(OBC.Grids);\ngrids.config.color.setHex(0xdddddd);\ngrids.create(world);\n')),(0,a.kt)("p",null,"Now, we will add the Cube to the ",(0,a.kt)("inlineCode",{parentName:"p"},"Scene"),". We must also add the ",(0,a.kt)("strong",{parentName:"p"},"cube")," to ",(0,a.kt)("inlineCode",{parentName:"p"},"components.meshes"),",\nwhich is simply an array of all the meshes in the Scene \ud83d\uddc4\ufe0f.\n",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("inlineCode",{parentName:"strong"},"components.meshes"))," acts as a store to help you manage your elements centrally."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'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);\n')),(0,a.kt)("h3",{id:"-adding-beautiful-shadow"},"\ud83c\udf1a Adding Beautiful Shadow"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"This completes our scene setup. Let's now include Shadows,\nwe'll use ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("inlineCode",{parentName:"strong"},"ShadowDropper"))," and pass ",(0,a.kt)("inlineCode",{parentName:"p"},"components")," as an argument to it.\ud83d\udd17"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'world.scene.three.background = new THREE.Color("white");\nworld.scene.three.add(cube);\nworld.meshes.add(cube);\n')),(0,a.kt)("p",null,"Shadow Dropper Component not only adds shadows to the scene, but it also helps you manage the ",(0,a.kt)("strong",{parentName:"p"},"Shadows"),".\nTo obtain the required results, you can alter the ",(0,a.kt)("inlineCode",{parentName:"p"},"ShadowDropper")," parameters.\ud83d\udd27"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const shadows = new OBCF.ShadowDropper(components);\n")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"shadowExtraScalarFactor")," - With this, the shadow's area of impact can be adjusted."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"darkness")," - This is used to increase or decrease the intensity of Shadow.",(0,a.kt)("admonition",{parentName:"li",title:"SHADOW and realism \u2728",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Read the ",(0,a.kt)("strong",{parentName:"p"},"Shadow Dropper")," API for more on this.\nThe Shadow Dropper API offers more configuration options to render realistic shadows.")))),(0,a.kt)("h3",{id:"-rendering-shadow"},"\ud83c\udfa8 Rendering Shadow"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now, we will use Shadow Dropper to create shadows for the element.\nWe will use ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("inlineCode",{parentName:"strong"},"renderShadow()"))," to generate shadow for the ",(0,a.kt)("inlineCode",{parentName:"p"},"cube")," we created."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"shadows.shadowExtraScaleFactor = 15;\nshadows.shadowOffset = 0.1;\n")),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"renderShadow")," requires two parameter, the ",(0,a.kt)("inlineCode",{parentName:"p"},"element")," and a ",(0,a.kt)("inlineCode",{parentName:"p"},"shadowID"),".\n",(0,a.kt)("strong",{parentName:"p"},"shadowID")," needs to be unique for the entire scene."),(0,a.kt)("admonition",{title:"Deleting Shadows",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"\u274e If you want to safely delete the shadow using ",(0,a.kt)("strong",{parentName:"p"},"shadowID")," you can call\n",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("inlineCode",{parentName:"strong"},"shadows.deleteShadow(shadowId);")))),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"Congratulations")," \ud83c\udf89 on completing this tutorial!\nNow you can add shadows to BIM Models or any 3D Object in minutes using\n",(0,a.kt)("strong",{parentName:"p"},"Shadow Dropper")," \ud83c\udf17\nLet's keep it up and check out another tutorial! \ud83c\udf93"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const shadowID = "example";\nshadows.create([cube], shadowID, world);\n')),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/ShadowDropper"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/cd5a87c7.724fe535.js b/build/assets/js/cd5a87c7.724fe535.js new file mode 100644 index 00000000..cb0534c3 --- /dev/null +++ b/build/assets/js/cd5a87c7.724fe535.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9065],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>f});var i=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function s(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=i.createContext({}),o=function(e){var t=i.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=o(e.components);return i.createElement(l.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},u=i.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,l=e.parentName,d=p(e,["components","mdxType","originalType","parentName"]),c=o(n),u=a,f=c["".concat(l,".").concat(u)]||c[u]||m[u]||r;return n?i.createElement(f,s(s({ref:t},d),{},{components:n})):i.createElement(f,s({ref:t},d))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,s=new Array(r);s[0]=u;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[c]="string"==typeof e?e:a,s[1]=p;for(var o=2;o{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>f,frontMatter:()=>p,metadata:()=>o,toc:()=>c});var i=n(7462),a=n(3366),r=(n(7294),n(3905)),s=["components"],p={id:"thatopen_components.SimpleScene",title:"Class: SimpleScene",sidebar_label:"SimpleScene",custom_edit_url:null},l=void 0,o={unversionedId:"api/classes/thatopen_components.SimpleScene",id:"api/classes/thatopen_components.SimpleScene",title:"Class: SimpleScene",description:"@thatopen/components.SimpleScene",source:"@site/docs/api/classes/thatopen_components.SimpleScene.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.SimpleScene",permalink:"/api/classes/thatopen_components.SimpleScene",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.SimpleScene",title:"Class: SimpleScene",sidebar_label:"SimpleScene",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"SimpleRenderer",permalink:"/api/classes/thatopen_components.SimpleRenderer"},next:{title:"ClipEdges",permalink:"/api/classes/thatopen_components_front.ClipEdges"}},d={},c=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"isSetup",id:"issetup",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"onSetup",id:"onsetup",level:3},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-2",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-4",level:4},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-5",level:4},{value:"Inherited from",id:"inherited-from-6",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"setup",id:"setup",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-6",level:4},{value:"Implementation of",id:"implementation-of-2",level:4},{value:"Defined in",id:"defined-in-9",level:4}],m={toc:c},u="wrapper";function f(e){var t=e.components,n=(0,a.Z)(e,s);return(0,r.kt)(u,(0,i.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".SimpleScene"),(0,r.kt)("p",null,"A basic 3D ",(0,r.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/scenes/Scene"},"scene")," to add\nobjects hierarchically, and easily dispose them when you are finished with it."),(0,r.kt)("p",null,(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"No Inherit Doc"))),(0,r.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"p"},"BaseScene")),(0,r.kt)("p",{parentName:"li"},"\u21b3 ",(0,r.kt)("strong",{parentName:"p"},(0,r.kt)("inlineCode",{parentName:"strong"},"SimpleScene"))))),(0,r.kt)("h2",{id:"implements"},"Implements"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.Configurable"},(0,r.kt)("inlineCode",{parentName:"a"},"Configurable")),"<{}",">")),(0,r.kt)("h2",{id:"properties"},"Properties"),(0,r.kt)("h3",{id:"issetup"},"isSetup"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("strong",{parentName:"p"},"isSetup"),": ",(0,r.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,r.kt)("inlineCode",{parentName:"p"},"false")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable#issetup"},"Configurable.isSetup")),(0,r.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable#issetup"},"isSetup")),(0,r.kt)("h4",{id:"defined-in"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-scene.ts#L24"},"packages/core/src/core/Worlds/src/simple-scene.ts:24")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,r.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,r.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,r.kt)("inlineCode",{parentName:"p"},"unknown"),">"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,r.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,r.kt)("p",null,"BaseScene.onDisposed"),(0,r.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-scene.ts#L10"},"packages/core/src/core/Types/src/base-scene.ts:10")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"onsetup"},"onSetup"),(0,r.kt)("p",null,"\u2022 ",(0,r.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,r.kt)("strong",{parentName:"p"},"onSetup"),": ",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,r.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,r.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleScene"},(0,r.kt)("inlineCode",{parentName:"a"},"SimpleScene")),">"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable#onsetup"},"Configurable.onSetup")),(0,r.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable#onsetup"},"onSetup")),(0,r.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-scene.ts#L29"},"packages/core/src/core/Worlds/src/simple-scene.ts:29")),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("h3",{id:"dispose"},"dispose"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"Disposable.dispose")),(0,r.kt)("h4",{id:"returns"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,r.kt)("p",null,"BaseScene.dispose"),(0,r.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-scene.ts#L19"},"packages/core/src/core/Types/src/base-scene.ts:19")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,r.kt)("h4",{id:"returns-1"},"Returns"),(0,r.kt)("p",null,"this is Configurable"),(0,r.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,r.kt)("p",null,"BaseScene.isConfigurable"),(0,r.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,r.kt)("h4",{id:"returns-2"},"Returns"),(0,r.kt)("p",null,"this is Disposable"),(0,r.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,r.kt)("p",null,"BaseScene.isDisposeable"),(0,r.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"ishideable"},"isHideable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,r.kt)("h4",{id:"returns-3"},"Returns"),(0,r.kt)("p",null,"this is Hideable"),(0,r.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,r.kt)("p",null,"BaseScene.isHideable"),(0,r.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,r.kt)("h4",{id:"returns-4"},"Returns"),(0,r.kt)("p",null,"this is Resizeable"),(0,r.kt)("h4",{id:"inherited-from-5"},"Inherited from"),(0,r.kt)("p",null,"BaseScene.isResizeable"),(0,r.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,r.kt)("p",null,"Whether is component is ",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,r.kt)("h4",{id:"returns-5"},"Returns"),(0,r.kt)("p",null,"this is Updateable"),(0,r.kt)("h4",{id:"inherited-from-6"},"Inherited from"),(0,r.kt)("p",null,"BaseScene.isUpdateable"),(0,r.kt)("h4",{id:"defined-in-8"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"setup"},"setup"),(0,r.kt)("p",null,"\u25b8 ",(0,r.kt)("strong",{parentName:"p"},"setup"),"(",(0,r.kt)("inlineCode",{parentName:"p"},"config?"),"): ",(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("p",null,"Creates a simple and nice default set up for the scene (e.g. lighting)."),(0,r.kt)("h4",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"config?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Partial"),"<",(0,r.kt)("inlineCode",{parentName:"td"},"SimpleSceneConfig"),">")))),(0,r.kt)("h4",{id:"returns-6"},"Returns"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"void")),(0,r.kt)("h4",{id:"implementation-of-2"},"Implementation of"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),".",(0,r.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable#setup"},"setup")),(0,r.kt)("h4",{id:"defined-in-9"},"Defined in"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-scene.ts#L50"},"packages/core/src/core/Worlds/src/simple-scene.ts:50")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/d05ab5b9.a01219f1.js b/build/assets/js/d05ab5b9.a01219f1.js new file mode 100644 index 00000000..721e4570 --- /dev/null +++ b/build/assets/js/d05ab5b9.a01219f1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4646],{5745:s=>{s.exports=JSON.parse('{"name":"docusaurus-plugin-content-pages","id":"default"}')}}]); \ No newline at end of file diff --git a/build/assets/js/d3dcb6ee.59f69836.js b/build/assets/js/d3dcb6ee.59f69836.js new file mode 100644 index 00000000..7907021b --- /dev/null +++ b/build/assets/js/d3dcb6ee.59f69836.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8220],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>k});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=r.createContext({}),s=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return r.createElement(p.Provider,{value:t},e.children)},c="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,p=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),c=s(n),m=a,k=c["".concat(p,".").concat(m)]||c[m]||u[m]||l;return n?r.createElement(k,i(i({ref:t},d),{},{components:n})):r.createElement(k,i({ref:t},d))}));function k(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,i=new Array(l);i[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o[c]="string"==typeof e?e:a,i[1]=o;for(var s=2;s{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>k,frontMatter:()=>o,metadata:()=>s,toc:()=>c});var r=n(7462),a=n(3366),l=(n(7294),n(3905)),i=["components"],o={id:"thatopen_components.CullerRenderer",title:"Class: CullerRenderer",sidebar_label:"CullerRenderer",custom_edit_url:null},p=void 0,s={unversionedId:"api/classes/thatopen_components.CullerRenderer",id:"api/classes/thatopen_components.CullerRenderer",title:"Class: CullerRenderer",description:"@thatopen/components.CullerRenderer",source:"@site/docs/api/classes/thatopen_components.CullerRenderer.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.CullerRenderer",permalink:"/api/classes/thatopen_components.CullerRenderer",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.CullerRenderer",title:"Class: CullerRenderer",sidebar_label:"CullerRenderer",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Components",permalink:"/api/classes/thatopen_components.Components"},next:{title:"Cullers",permalink:"/api/classes/thatopen_components.Cullers"}},d={},c=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"needsUpdate",id:"needsupdate",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Defined in",id:"defined-in-2",level:4},{value:"onViewUpdated",id:"onviewupdated",level:3},{value:"Defined in",id:"defined-in-3",level:4},{value:"renderDebugFrame",id:"renderdebugframe",level:3},{value:"Defined in",id:"defined-in-4",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"updateVisibility",id:"updatevisibility",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in-6",level:4}],u={toc:c},m="wrapper";function k(e){var t=e.components,n=(0,a.Z)(e,i);return(0,l.kt)(m,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".CullerRenderer"),(0,l.kt)("p",null,"A base renderer to determine visibility on screen"),(0,l.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},(0,l.kt)("strong",{parentName:"p"},(0,l.kt)("inlineCode",{parentName:"strong"},"CullerRenderer"))),(0,l.kt)("p",{parentName:"li"},"\u21b3 ",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.MeshCullerRenderer"},(0,l.kt)("inlineCode",{parentName:"a"},"MeshCullerRenderer"))))),(0,l.kt)("h2",{id:"properties"},"Properties"),(0,l.kt)("h3",{id:"enabled"},"enabled"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"enabled"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,l.kt)("inlineCode",{parentName:"p"},"true")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,l.kt)("h4",{id:"defined-in"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L28"},"packages/core/src/core/Cullers/src/culler-renderer.ts:28")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"needsupdate"},"needsUpdate"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"needsUpdate"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,l.kt)("inlineCode",{parentName:"p"},"false")),(0,l.kt)("p",null,"Needs to check whether there are objects that need to be hidden or shown.\nYou can bind this to the camera movement, to a certain interval, etc."),(0,l.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L34"},"packages/core/src/core/Cullers/src/culler-renderer.ts:34")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,l.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,l.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,l.kt)("inlineCode",{parentName:"p"},"string"),">"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,l.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L18"},"packages/core/src/core/Cullers/src/culler-renderer.ts:18")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"onviewupdated"},"onViewUpdated"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,l.kt)("strong",{parentName:"p"},"onViewUpdated"),": ",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,l.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,l.kt)("inlineCode",{parentName:"p"},"any"),">"," ","|"," ",(0,l.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.AsyncEvent"},(0,l.kt)("inlineCode",{parentName:"a"},"AsyncEvent")),"<",(0,l.kt)("inlineCode",{parentName:"p"},"any"),">"),(0,l.kt)("p",null,"Fires after making the visibility check to the meshes. It lists the\nmeshes that are currently visible, and the ones that were visible\njust before but not anymore."),(0,l.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L25"},"packages/core/src/core/Cullers/src/culler-renderer.ts:25")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"renderdebugframe"},"renderDebugFrame"),(0,l.kt)("p",null,"\u2022 ",(0,l.kt)("strong",{parentName:"p"},"renderDebugFrame"),": ",(0,l.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,l.kt)("inlineCode",{parentName:"p"},"false")),(0,l.kt)("p",null,"Render the internal scene used to determine the object visibility. Used\nfor debugging purposes."),(0,l.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L40"},"packages/core/src/core/Cullers/src/culler-renderer.ts:40")),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)("h3",{id:"dispose"},"dispose"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"Disposable.dispose")),(0,l.kt)("h4",{id:"returns"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"void")),(0,l.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L116"},"packages/core/src/core/Cullers/src/culler-renderer.ts:116")),(0,l.kt)("hr",null),(0,l.kt)("h3",{id:"updatevisibility"},"updateVisibility"),(0,l.kt)("p",null,"\u25b8 ",(0,l.kt)("strong",{parentName:"p"},"updateVisibility"),"(",(0,l.kt)("inlineCode",{parentName:"p"},"force?"),"): ",(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("p",null,"The function that the culler uses to reprocess the scene. Generally it's\nbetter to call needsUpdate, but you can also call this to force it."),(0,l.kt)("h4",{id:"parameters"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"force?")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"boolean")),(0,l.kt)("td",{parentName:"tr",align:"left"},"if true, it will refresh the scene even if needsUpdate is not true.")))),(0,l.kt)("h4",{id:"returns-1"},"Returns"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,l.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,l.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Cullers/src/culler-renderer.ts#L135"},"packages/core/src/core/Cullers/src/culler-renderer.ts:135")))}k.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/d60cd624.27f53618.js b/build/assets/js/d60cd624.27f53618.js new file mode 100644 index 00000000..7b891179 --- /dev/null +++ b/build/assets/js/d60cd624.27f53618.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6631],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),l=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=l(e.components);return a.createElement(s.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),m=l(n),u=r,f=m["".concat(s,".").concat(u)]||m[u]||d[u]||o;return n?a.createElement(f,i(i({ref:t},c),{},{components:n})):a.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p[m]="string"==typeof e?e:r,i[1]=p;for(var l=2;l{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>f,frontMatter:()=>p,metadata:()=>l,toc:()=>m});var a=n(7462),r=n(3366),o=(n(7294),n(3905)),i=["components"],p={id:"thatopen_components.Disposable",title:"Interface: Disposable",sidebar_label:"Disposable",custom_edit_url:null},s=void 0,l={unversionedId:"api/interfaces/thatopen_components.Disposable",id:"api/interfaces/thatopen_components.Disposable",title:"Interface: Disposable",description:"@thatopen/components.Disposable",source:"@site/docs/api/interfaces/thatopen_components.Disposable.md",sourceDirName:"api/interfaces",slug:"/api/interfaces/thatopen_components.Disposable",permalink:"/api/interfaces/thatopen_components.Disposable",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Disposable",title:"Interface: Disposable",sidebar_label:"Disposable",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Createable",permalink:"/api/interfaces/thatopen_components.Createable"},next:{title:"Hideable",permalink:"/api/interfaces/thatopen_components.Hideable"}},c={},m=[{value:"Implemented by",id:"implemented-by",level:2},{value:"Properties",id:"properties",level:2},{value:"dispose",id:"dispose",level:3},{value:"Type declaration",id:"type-declaration",level:4},{value:"Returns",id:"returns",level:5},{value:"Defined in",id:"defined-in",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Defined in",id:"defined-in-1",level:4}],d={toc:m},u="wrapper";function f(e){var t=e.components,n=(0,r.Z)(e,i);return(0,o.kt)(u,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Disposable"),(0,o.kt)("p",null,"Whether this component has to be manually destroyed once you are done with\nit to prevent\n",(0,o.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects"},"memory leaks"),".\nThis also ensures that the DOM events created by that component will be\ncleaned up."),(0,o.kt)("h2",{id:"implemented-by"},"Implemented by"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.BoundingBoxer"},(0,o.kt)("inlineCode",{parentName:"a"},"BoundingBoxer"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Clipper"},(0,o.kt)("inlineCode",{parentName:"a"},"Clipper"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Components"},(0,o.kt)("inlineCode",{parentName:"a"},"Components"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.Cullers"},(0,o.kt)("inlineCode",{parentName:"a"},"Cullers"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.FragmentsManager"},(0,o.kt)("inlineCode",{parentName:"a"},"FragmentsManager"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.IfcRelationsIndexer"},(0,o.kt)("inlineCode",{parentName:"a"},"IfcRelationsIndexer"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.SimpleCamera"},(0,o.kt)("inlineCode",{parentName:"a"},"SimpleCamera"))),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.SimplePlane"},(0,o.kt)("inlineCode",{parentName:"a"},"SimplePlane")))),(0,o.kt)("h2",{id:"properties"},"Properties"),(0,o.kt)("h3",{id:"dispose"},"dispose"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("strong",{parentName:"p"},"dispose"),": () => ",(0,o.kt)("inlineCode",{parentName:"p"},"void")," ","|"," ",(0,o.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,o.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,o.kt)("h4",{id:"type-declaration"},"Type declaration"),(0,o.kt)("p",null,"\u25b8 (): ",(0,o.kt)("inlineCode",{parentName:"p"},"void")," ","|"," ",(0,o.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,o.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,o.kt)("p",null,"Destroys the object from memory to prevent a\n",(0,o.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects"},"memory leak"),"."),(0,o.kt)("h5",{id:"returns"},"Returns"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"void")," ","|"," ",(0,o.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,o.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,o.kt)("h4",{id:"defined-in"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L17"},"packages/core/src/core/Types/src/interfaces.ts:17")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,o.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,o.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,o.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,o.kt)("inlineCode",{parentName:"p"},"any"),">"),(0,o.kt)("p",null,"Fired after the tool has been ",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"()")),(0,o.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L20"},"packages/core/src/core/Types/src/interfaces.ts:20")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/d9bc4fdf.6bfe57d5.js b/build/assets/js/d9bc4fdf.6bfe57d5.js new file mode 100644 index 00000000..36559a1b --- /dev/null +++ b/build/assets/js/d9bc4fdf.6bfe57d5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[155],{3905:(e,t,a)=>{a.d(t,{Zo:()=>d,kt:()=>k});var n=a(7294);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function p(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=n.createContext({}),o=function(e){var t=n.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):p(p({},t),e)),a},d=function(e){var t=o(e.components);return n.createElement(s.Provider,{value:t},e.children)},m="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},h=n.forwardRef((function(e,t){var a=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),m=o(a),h=r,k=m["".concat(s,".").concat(h)]||m[h]||c[h]||i;return a?n.createElement(k,p(p({ref:t},d),{},{components:a})):n.createElement(k,p({ref:t},d))}));function k(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=a.length,p=new Array(i);p[0]=h;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[m]="string"==typeof e?e:r,p[1]=l;for(var o=2;o{a.r(t),a.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>k,frontMatter:()=>l,metadata:()=>o,toc:()=>m});var n=a(7462),r=a(3366),i=(a(7294),a(3905)),p=["components"],l={id:"thatopen_components.OrthoPerspectiveCamera",title:"Class: OrthoPerspectiveCamera",sidebar_label:"OrthoPerspectiveCamera",custom_edit_url:null},s=void 0,o={unversionedId:"api/classes/thatopen_components.OrthoPerspectiveCamera",id:"api/classes/thatopen_components.OrthoPerspectiveCamera",title:"Class: OrthoPerspectiveCamera",description:"@thatopen/components.OrthoPerspectiveCamera",source:"@site/docs/api/classes/thatopen_components.OrthoPerspectiveCamera.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.OrthoPerspectiveCamera",permalink:"/api/classes/thatopen_components.OrthoPerspectiveCamera",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.OrthoPerspectiveCamera",title:"Class: OrthoPerspectiveCamera",sidebar_label:"OrthoPerspectiveCamera",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"OrbitMode",permalink:"/api/classes/thatopen_components.OrbitMode"},next:{title:"PlanMode",permalink:"/api/classes/thatopen_components.PlanMode"}},d={},m=[{value:"Hierarchy",id:"hierarchy",level:2},{value:"Properties",id:"properties",level:2},{value:"_mode",id:"_mode",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"onAfterUpdate",id:"onafterupdate",level:3},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"onBeforeUpdate",id:"onbeforeupdate",level:3},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"onDisposed",id:"ondisposed",level:3},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"Accessors",id:"accessors",level:2},{value:"controls",id:"controls",level:3},{value:"Returns",id:"returns",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"enabled",id:"enabled",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"Methods",id:"methods",level:2},{value:"dispose",id:"dispose",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Overrides",id:"overrides",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"fit",id:"fit",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-4",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"hasCameraControls",id:"hascameracontrols",level:3},{value:"Returns",id:"returns-5",level:4},{value:"Inherited from",id:"inherited-from-6",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"isConfigurable",id:"isconfigurable",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Inherited from",id:"inherited-from-7",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"isDisposeable",id:"isdisposeable",level:3},{value:"Returns",id:"returns-7",level:4},{value:"Inherited from",id:"inherited-from-8",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"isHideable",id:"ishideable",level:3},{value:"Returns",id:"returns-8",level:4},{value:"Inherited from",id:"inherited-from-9",level:4},{value:"Defined in",id:"defined-in-12",level:4},{value:"isResizeable",id:"isresizeable",level:3},{value:"Returns",id:"returns-9",level:4},{value:"Inherited from",id:"inherited-from-10",level:4},{value:"Defined in",id:"defined-in-13",level:4},{value:"isUpdateable",id:"isupdateable",level:3},{value:"Returns",id:"returns-10",level:4},{value:"Inherited from",id:"inherited-from-11",level:4},{value:"Defined in",id:"defined-in-14",level:4},{value:"set",id:"set",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-11",level:4},{value:"Defined in",id:"defined-in-15",level:4},{value:"setUserInput",id:"setuserinput",level:3},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-12",level:4},{value:"Defined in",id:"defined-in-16",level:4},{value:"update",id:"update",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-13",level:4},{value:"Inherited from",id:"inherited-from-12",level:4},{value:"Defined in",id:"defined-in-17",level:4},{value:"updateAspect",id:"updateaspect",level:3},{value:"Returns",id:"returns-14",level:4},{value:"Inherited from",id:"inherited-from-13",level:4},{value:"Defined in",id:"defined-in-18",level:4}],c={toc:m},h="wrapper";function k(e){var t=e.components,a=(0,r.Z)(e,p);return(0,i.kt)(h,(0,n.Z)({},c,a,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".OrthoPerspectiveCamera"),(0,i.kt)("p",null,"A flexible camera that uses\n",(0,i.kt)("a",{parentName:"p",href:"https://github.com/yomotsu/camera-controls"},"yomotsu's cameracontrols")," to\neasily control the camera in 2D and 3D. It supports multiple navigation\nmodes, such as 2D floor plan navigation, first person and 3D orbit."),(0,i.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},(0,i.kt)("inlineCode",{parentName:"a"},"SimpleCamera"))),(0,i.kt)("p",{parentName:"li"},"\u21b3 ",(0,i.kt)("strong",{parentName:"p"},(0,i.kt)("inlineCode",{parentName:"strong"},"OrthoPerspectiveCamera"))))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"_mode"},"_","mode"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"_","mode"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"null")," ","|"," ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},(0,i.kt)("inlineCode",{parentName:"a"},"NavigationMode"))," = ",(0,i.kt)("inlineCode",{parentName:"p"},"null")),(0,i.kt)("p",null,"The current ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode"),"."),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/index.ts#L26"},"packages/core/src/core/OrthoPerspectiveCamera/index.ts:26")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"onafterupdate"},"onAfterUpdate"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onAfterUpdate"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},(0,i.kt)("inlineCode",{parentName:"a"},"SimpleCamera")),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#onafterupdate"},"Updateable.onAfterUpdate")),(0,i.kt)("h4",{id:"inherited-from"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#onafterupdate"},"onAfterUpdate")),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L23"},"packages/core/src/core/Worlds/src/simple-camera.ts:23")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"onbeforeupdate"},"onBeforeUpdate"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onBeforeUpdate"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},(0,i.kt)("inlineCode",{parentName:"a"},"SimpleCamera")),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#onbeforeupdate"},"Updateable.onBeforeUpdate")),(0,i.kt)("h4",{id:"inherited-from-1"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#onbeforeupdate"},"onBeforeUpdate")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L20"},"packages/core/src/core/Worlds/src/simple-camera.ts:20")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ondisposed"},"onDisposed"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onDisposed"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"string"),">"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#ondisposed"},"Disposable.onDisposed")),(0,i.kt)("h4",{id:"inherited-from-2"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#ondisposed"},"onDisposed")),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L28"},"packages/core/src/core/Worlds/src/simple-camera.ts:28")),(0,i.kt)("h2",{id:"accessors"},"Accessors"),(0,i.kt)("h3",{id:"controls"},"controls"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"get")," ",(0,i.kt)("strong",{parentName:"p"},"controls"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"CameraControls")),(0,i.kt)("p",null,"The object that controls the camera. An instance of\n",(0,i.kt)("a",{parentName:"p",href:"https://github.com/yomotsu/camera-controls"},"yomotsu's cameracontrols"),".\nTransforming the camera directly will have no effect: you need to use this\nobject to move, rotate, look at objects, etc."),(0,i.kt)("h4",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"CameraControls")),(0,i.kt)("h4",{id:"inherited-from-3"},"Inherited from"),(0,i.kt)("p",null,"SimpleCamera.controls"),(0,i.kt)("h4",{id:"defined-in-4"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L40"},"packages/core/src/core/Worlds/src/simple-camera.ts:40")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"enabled"},"enabled"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"get")," ",(0,i.kt)("strong",{parentName:"p"},"enabled"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,i.kt)("h4",{id:"returns-1"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"boolean")),(0,i.kt)("h4",{id:"inherited-from-4"},"Inherited from"),(0,i.kt)("p",null,"SimpleCamera.enabled"),(0,i.kt)("h4",{id:"defined-in-5"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L52"},"packages/core/src/core/Worlds/src/simple-camera.ts:52")),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"set")," ",(0,i.kt)("strong",{parentName:"p"},"enabled"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"enabled"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Component#enabled"},"Component.enabled")),(0,i.kt)("h4",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"enabled")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean"))))),(0,i.kt)("h4",{id:"returns-2"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"inherited-from-5"},"Inherited from"),(0,i.kt)("p",null,"SimpleCamera.enabled"),(0,i.kt)("h4",{id:"defined-in-6"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L60"},"packages/core/src/core/Worlds/src/simple-camera.ts:60")),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("h3",{id:"dispose"},"dispose"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"dispose"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable#dispose"},"Disposable.dispose")),(0,i.kt)("h4",{id:"returns-3"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"overrides"},"Overrides"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#dispose"},"dispose")),(0,i.kt)("h4",{id:"defined-in-7"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/index.ts#L80"},"packages/core/src/core/OrthoPerspectiveCamera/index.ts:80")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"fit"},"fit"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"fit"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"meshes"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"offset?"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,i.kt)("p",null,"Make the camera view fit all the specified meshes."),(0,i.kt)("h4",{id:"parameters-1"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Default value"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"meshes")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Iterable"),"<",(0,i.kt)("inlineCode",{parentName:"td"},"Mesh"),"<",(0,i.kt)("inlineCode",{parentName:"td"},"BufferGeometry"),"<",(0,i.kt)("inlineCode",{parentName:"td"},"NormalBufferAttributes"),">",", ",(0,i.kt)("inlineCode",{parentName:"td"},"Material")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"td"},"Material"),"[], ",(0,i.kt)("inlineCode",{parentName:"td"},"Object3DEventMap"),">",">"),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"undefined")),(0,i.kt)("td",{parentName:"tr",align:"left"},"the meshes to fit. If it is not defined, it will evaluate Components.meshes.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"offset")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"1.5")),(0,i.kt)("td",{parentName:"tr",align:"left"},"the distance to the fit object")))),(0,i.kt)("h4",{id:"returns-4"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,i.kt)("h4",{id:"defined-in-8"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/index.ts#L108"},"packages/core/src/core/OrthoPerspectiveCamera/index.ts:108")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"hascameracontrols"},"hasCameraControls"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"hasCameraControls"),"(): this is CameraControllable"),(0,i.kt)("p",null,"Whether is instance is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.CameraControllable"},"CameraControllable"),"."),(0,i.kt)("h4",{id:"returns-5"},"Returns"),(0,i.kt)("p",null,"this is CameraControllable"),(0,i.kt)("h4",{id:"inherited-from-6"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#hascameracontrols"},"hasCameraControls")),(0,i.kt)("h4",{id:"defined-in-9"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base-camera.ts#L13"},"packages/core/src/core/Types/src/base-camera.ts:13")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isconfigurable"},"isConfigurable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isConfigurable"),"(): this is Configurable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable"},"Configurable"),"."),(0,i.kt)("h4",{id:"returns-6"},"Returns"),(0,i.kt)("p",null,"this is Configurable"),(0,i.kt)("h4",{id:"inherited-from-7"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#isconfigurable"},"isConfigurable")),(0,i.kt)("h4",{id:"defined-in-10"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L39"},"packages/core/src/core/Types/src/base.ts:39")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isdisposeable"},"isDisposeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isDisposeable"),"(): this is Disposable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Disposable"},"Disposable"),"."),(0,i.kt)("h4",{id:"returns-7"},"Returns"),(0,i.kt)("p",null,"this is Disposable"),(0,i.kt)("h4",{id:"inherited-from-8"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#isdisposeable"},"isDisposeable")),(0,i.kt)("h4",{id:"defined-in-11"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L17"},"packages/core/src/core/Types/src/base.ts:17")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"ishideable"},"isHideable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isHideable"),"(): this is Hideable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Hideable"},"Hideable"),"."),(0,i.kt)("h4",{id:"returns-8"},"Returns"),(0,i.kt)("p",null,"this is Hideable"),(0,i.kt)("h4",{id:"inherited-from-9"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#ishideable"},"isHideable")),(0,i.kt)("h4",{id:"defined-in-12"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L34"},"packages/core/src/core/Types/src/base.ts:34")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isresizeable"},"isResizeable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isResizeable"),"(): this is Resizeable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Resizeable"},"Resizeable"),"."),(0,i.kt)("h4",{id:"returns-9"},"Returns"),(0,i.kt)("p",null,"this is Resizeable"),(0,i.kt)("h4",{id:"inherited-from-10"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#isresizeable"},"isResizeable")),(0,i.kt)("h4",{id:"defined-in-13"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L22"},"packages/core/src/core/Types/src/base.ts:22")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"isupdateable"},"isUpdateable"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"isUpdateable"),"(): this is Updateable"),(0,i.kt)("p",null,"Whether is component is ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable"},"Updateable"),"."),(0,i.kt)("h4",{id:"returns-10"},"Returns"),(0,i.kt)("p",null,"this is Updateable"),(0,i.kt)("h4",{id:"inherited-from-11"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#isupdateable"},"isUpdateable")),(0,i.kt)("h4",{id:"defined-in-14"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/base.ts#L27"},"packages/core/src/core/Types/src/base.ts:27")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"set"},"set"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"set"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"mode"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Sets a new ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode")," and disables the previous one."),(0,i.kt)("h4",{id:"parameters-2"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"mode")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("a",{parentName:"td",href:"/api/modules/thatopen_components#navmodeid"},(0,i.kt)("inlineCode",{parentName:"a"},"NavModeID"))),(0,i.kt)("td",{parentName:"tr",align:"left"},"The ",(0,i.kt)("a",{parentName:"td",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode")," to set.")))),(0,i.kt)("h4",{id:"returns-11"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-15"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/index.ts#L90"},"packages/core/src/core/OrthoPerspectiveCamera/index.ts:90")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"setuserinput"},"setUserInput"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"setUserInput"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"active"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Allows or prevents all user input."),(0,i.kt)("h4",{id:"parameters-3"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"active")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"boolean")),(0,i.kt)("td",{parentName:"tr",align:"left"},"whether to enable or disable user inputs.")))),(0,i.kt)("h4",{id:"returns-12"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"defined-in-16"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/index.ts#L142"},"packages/core/src/core/OrthoPerspectiveCamera/index.ts:142")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"update"},"update"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"update"),"(",(0,i.kt)("inlineCode",{parentName:"p"},"_delta"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Updateable#update"},"Updateable.update")),(0,i.kt)("h4",{id:"parameters-4"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"_delta")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"number"))))),(0,i.kt)("h4",{id:"returns-13"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"inherited-from-12"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#update"},"update")),(0,i.kt)("h4",{id:"defined-in-17"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L105"},"packages/core/src/core/Worlds/src/simple-camera.ts:105")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"updateaspect"},"updateAspect"),(0,i.kt)("p",null,"\u25b8 ",(0,i.kt)("strong",{parentName:"p"},"updateAspect"),"(): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("p",null,"Updates the aspect of the camera to match the size of the\nComponents.renderer."),(0,i.kt)("h4",{id:"returns-14"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")),(0,i.kt)("h4",{id:"inherited-from-13"},"Inherited from"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera"},"SimpleCamera"),".",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.SimpleCamera#updateaspect"},"updateAspect")),(0,i.kt)("h4",{id:"defined-in-18"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Worlds/src/simple-camera.ts#L117"},"packages/core/src/core/Worlds/src/simple-camera.ts:117")))}k.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/da19a474.4b230d76.js b/build/assets/js/da19a474.4b230d76.js new file mode 100644 index 00000000..c432e018 --- /dev/null +++ b/build/assets/js/da19a474.4b230d76.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2154],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>h});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},m=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,m=i(e,["components","mdxType","originalType","parentName"]),p=c(n),d=o,h=p["".concat(l,".").concat(d)]||p[d]||u[d]||a;return n?r.createElement(h,s(s({ref:t},m),{},{components:n})):r.createElement(h,s({ref:t},m))}));function h(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,s=new Array(a);s[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i[p]="string"==typeof e?e:o,s[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>c,toc:()=>p});var r=n(7462),o=n(3366),a=(n(7294),n(3905)),s=["components"],i={},l=void 0,c={unversionedId:"Tutorials/Components/Front/IfcStreamer",id:"Tutorials/Components/Front/IfcStreamer",title:"IfcStreamer",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Front/IfcStreamer.mdx",sourceDirName:"Tutorials/Components/Front",slug:"/Tutorials/Components/Front/IfcStreamer",permalink:"/Tutorials/Components/Front/IfcStreamer",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"EdgesClipper",permalink:"/Tutorials/Components/Front/EdgesClipper"},next:{title:"LengthMeasurement",permalink:"/Tutorials/Components/Front/LengthMeasurement"}},m={},p=[],u={toc:p},d="wrapper";function h(e){var t=e.components,n=(0,o.Z)(e,s);return(0,a.kt)(d,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/fragments/IfcStreamer/example.ts"},"here"),".")),(0,a.kt)("p",null,"Now, streaming works by updating the scene depending on the user's perspective\nand getting the necessary geometries from the backend. A simple way to achieve\nthis is by updating the scene each time the user stops the camera:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import Stats from "stats.js";\n// @ts-ignore\nimport * as dat from "three/examples/jsm/libs/lil-gui.module.min";\nimport * as OBC from "openbim-components";\nimport * as OBCF from "../..";\n\n// customEffects.excludedMeshes.push(grid.get());\n\n// rendererComponent.postproduction.enabled = true;\n\n// Set up scene (see SimpleScene tutorial)\n\nconst 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.scene.setup();\n\n// rendererComponent.postproduction.enabled = true;\n\nworld.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n\nconst loader = new OBCF.IfcStreamer(components);\nloader.world = world;\nloader.url = "../../../../../resources/streaming/";\n// const fragments = components.get(OBC.FragmentsManager);\n\nasync function loadModel(geometryURL: string, propertiesURL?: string) {\n const rawGeometryData = await fetch(geometryURL);\n const geometryData = await rawGeometryData.json();\n let propertiesData;\n if (propertiesURL) {\n const rawPropertiesData = await fetch(propertiesURL);\n propertiesData = await rawPropertiesData.json();\n }\n\n const model = await loader.load(geometryData, true, propertiesData);\n\n console.log(model);\n const props = await model.getProperties(186);\n console.log(props);\n}\n\nawait loadModel(\n "../../../../../resources/streaming/small.ifc-processed.json",\n "../../../../../resources/streaming/small.ifc-processed-properties.json",\n);\n')),(0,a.kt)("p",null,"As you can imagine, downloading the geometries from the server each time can\ntake time, especially for heavier geometries. This is why the stream loader\nautomatically caches the files locally to get them much faster. This means that\nthe loading experience the first time might be a bit slower, but then later\nit will be much better. You can control this using the ",(0,a.kt)("inlineCode",{parentName:"p"},"useCache")," property\nand clear the cache using the ",(0,a.kt)("inlineCode",{parentName:"p"},"clearCache()")," method:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'world.camera.controls.addEventListener("sleep", () => {\n loader.culler.needsUpdate = true;\n});\n')),(0,a.kt)("p",null,"You can also customize the loader through the ",(0,a.kt)("inlineCode",{parentName:"p"},"culler")," property:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Threshold determines how bit an object must be in the screen to stream it."),(0,a.kt)("li",{parentName:"ul"},"maxHiddenTime determines how long an object must be lost to remove it from the scene."),(0,a.kt)("li",{parentName:"ul"},"maxLostTime determines how long an object must be lost to remove it from memory.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"loader.useCache = true;\n\nasync function clearCache() {\n await loader.clearCache();\n window.location.reload();\n}\n")),(0,a.kt)("p",null,"This is it! Now you should be able to stream your own IFC models and open them anywhere,\nno matter how big they are! \ud83d\udcaa We will keep improving and making this API more powerful\nto handle any model on any device smoothly."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"loader.culler.threshold = 10;\nloader.culler.maxHiddenTime = 1000;\nloader.culler.maxLostTime = 40000;\n")),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/IfcStreamer"}))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/dc2a58ea.e3d43cf0.js b/build/assets/js/dc2a58ea.e3d43cf0.js new file mode 100644 index 00000000..98808a07 --- /dev/null +++ b/build/assets/js/dc2a58ea.e3d43cf0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4335],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>g});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),m=o,g=d["".concat(s,".").concat(m)]||d[m]||u[m]||a;return n?r.createElement(g,i(i({ref:t},c),{},{components:n})):r.createElement(g,i({ref:t},c))}));function g(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=m;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[d]="string"==typeof e?e:o,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>g,frontMatter:()=>l,metadata:()=>p,toc:()=>d});var r=n(7462),o=n(3366),a=(n(7294),n(3905)),i=["components"],l={},s=void 0,p={unversionedId:"Tutorials/Components/Core/Grids",id:"Tutorials/Components/Core/Grids",title:"Grids",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/Grids.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/Grids",permalink:"/Tutorials/Components/Core/Grids",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FragmentsManager",permalink:"/Tutorials/Components/Core/FragmentsManager"},next:{title:"Hider",permalink:"/Tutorials/Components/Core/Hider"}},c={},d=[{value:"\ud83d\udd78\ufe0f Adding a fancy grid to our scene",id:"\ufe0f-adding-a-fancy-grid-to-our-scene",level:3},{value:"\ud83c\udf0e Setting up a simple scene",id:"-setting-up-a-simple-scene",level:3},{value:"\ud83d\udd77\ufe0f Adding the grid to the world",id:"\ufe0f-adding-the-grid-to-the-world",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}],u={toc:d},m="wrapper";function g(e){var t=e.components,n=(0,o.Z)(e,i);return(0,a.kt)(m,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/Grids/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"\ufe0f-adding-a-fancy-grid-to-our-scene"},"\ud83d\udd78\ufe0f Adding a fancy grid to our scene"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"In this tutorial you'll learn how to add a fancy grid to your scene. It's super easy and will make your app look much more professional!"),(0,a.kt)("admonition",{title:"Why a grid?",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"Grids are very common in 3D apps, and it's a great way to have a reference point for your users to navigate around, even when there are no visible objects around.")),(0,a.kt)("p",null,"In this tutorial, we will import:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Three.js")," to get some 3D entities for our app."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"@thatopen/components")," to set up the barebone of our app.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import * as THREE from "three";\nimport * as OBC from "openbim-components";\n')),(0,a.kt)("h3",{id:"-setting-up-a-simple-scene"},"\ud83c\udf0e Setting up a simple scene"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"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."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const container = document.getElementById("container")!;\n\nconst components = new OBC.Components();\n\nconst worlds = components.get(OBC.Worlds);\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\nconst cube = new THREE.Mesh(new THREE.BoxGeometry());\nworld.scene.three.add(cube);\n')),(0,a.kt)("h3",{id:"\ufe0f-adding-the-grid-to-the-world"},"\ud83d\udd77\ufe0f Adding the grid to the world"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"To add the grid to the world, we will use the ",(0,a.kt)("inlineCode",{parentName:"p"},"Grids")," component. Instead of instantiating it, we will get it directly from the ",(0,a.kt)("inlineCode",{parentName:"p"},"components")," object. Remember that all components are meant to be singletons. Then, we will call the ",(0,a.kt)("inlineCode",{parentName:"p"},"create")," method to add a grid to the scene."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const grids = components.get(OBC.Grids);\nconst grid = grids.create(world);\nconsole.log(grid);\n")),(0,a.kt)("h3",{id:"\ufe0f-measuring-the-performance-optional"},"\u23f1\ufe0f Measuring the performance (optional)"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"We'll use the ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/mrdoob/stats.js"},"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."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const stats = new Stats();\nstats.showPanel(2);\ndocument.body.append(stats.dom);\nstats.dom.style.left = "0px";\nworld.renderer.onBeforeUpdate.add(() => stats.begin());\nworld.renderer.onAfterUpdate.add(() => stats.end());\n')),(0,a.kt)("h3",{id:"-wrap-up"},"\ud83c\udf89 Wrap up"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Congratulations! You have created your first infinite grid in your 3D app. As you can see, it's super easy and it looks great!"),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/Grids"}))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/e3702cd4.899608fd.js b/build/assets/js/e3702cd4.899608fd.js new file mode 100644 index 00000000..84cdee50 --- /dev/null +++ b/build/assets/js/e3702cd4.899608fd.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2232],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>h});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function s(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=o.createContext({}),p=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},m=function(e){var t=p(e.components);return o.createElement(l.Provider,{value:t},e.children)},c="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,l=e.parentName,m=i(e,["components","mdxType","originalType","parentName"]),c=p(n),d=a,h=c["".concat(l,".").concat(d)]||c[d]||u[d]||r;return n?o.createElement(h,s(s({ref:t},m),{},{components:n})):o.createElement(h,s({ref:t},m))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,s=new Array(r);s[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i[c]="string"==typeof e?e:a,s[1]=i;for(var p=2;p{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>p,toc:()=>c});var o=n(7462),a=n(3366),r=(n(7294),n(3905)),s=["components"],i={sidebar_position:4},l="Clean components ABC",p={unversionedId:"components/clean-components-guide",id:"components/clean-components-guide",title:"Clean components ABC",description:"Basics",source:"@site/docs/components/clean-components-guide.md",sourceDirName:"components",slug:"/components/clean-components-guide",permalink:"/components/clean-components-guide",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Creating new components",permalink:"/components/creating-components"},next:{title:"Tutorial paths",permalink:"/components/tutorial-paths"}},m={},c=[{value:"Basics",id:"basics",level:2},{value:"TypeScript",id:"typescript",level:2},{value:"Documentation",id:"documentation",level:2},{value:"Memory management",id:"memory-management",level:2},{value:"3D objects and materials",id:"3d-objects-and-materials",level:3},{value:"UI Components / HTML elements",id:"ui-components--html-elements",level:3},{value:"Events",id:"events",level:3},{value:"Huge objects / arrays",id:"huge-objects--arrays",level:3}],u={toc:c},d="wrapper";function h(e){var t=e.components,n=(0,a.Z)(e,s);return(0,r.kt)(d,(0,o.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"clean-components-abc"},"Clean components ABC"),(0,r.kt)("h2",{id:"basics"},"Basics"),(0,r.kt)("p",null,"Always extend from the base ",(0,r.kt)("inlineCode",{parentName:"p"},"Component")," class."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},'import * as OBC from "openbim-components"\n\nexport MyComponent extends OBC.Component {}\n')),(0,r.kt)("p",null,"If your component has more than one file, name the base file ",(0,r.kt)("inlineCode",{parentName:"p"},"index.ts"),". If you need to include other supporting files for your component, create a ",(0,r.kt)("inlineCode",{parentName:"p"},"src")," folder in the component folder. You can call those supporting file whatever you want. This is a basic folder structure, making sure you name the component folder as the class name:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"MyComponent"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"src"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"supporting-file-1.ts")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"supporting-file-2.ts")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"index.ts"))))))),(0,r.kt)("h2",{id:"typescript"},"TypeScript"),(0,r.kt)("p",null,"Avoid using ",(0,r.kt)("inlineCode",{parentName:"p"},"!")," in property fields. If a property element is not initialized in the constructor, you can either use ",(0,r.kt)("inlineCode",{parentName:"p"},"?"),", or create a getter to assert that it exists before getting it."),(0,r.kt)("p",null,"Always name private members with underscore."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx"},'import {Component} from "src/base-types/component"\n\nexport MyComponent extends Component {\n private _privateProperty: any;\n}\n')),(0,r.kt)("p",null,"Never define private properties in the constructor. Make them explicit beforehand:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},"/*Incorrect*/\nconstructor(private _components: Components)\n\n/*Correct*/\nprivate _components: Components\nconstructor(components: Components) {\n this._components = components\n}\n")),(0,r.kt)("p",null,"Always make events readonly and initialize them directly."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},"readonly onCreated = new Event()\n")),(0,r.kt)("p",null,"Follow the Single Responsibility Principle."),(0,r.kt)("p",null,"Always make sure to know the interfaces you can implement when creating your component (i.e. ",(0,r.kt)("inlineCode",{parentName:"p"},"Creatable"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"Hideable"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"UI"),", etc), that way we keep things uniform in terms of properties and methods naming and types."),(0,r.kt)("h2",{id:"documentation"},"Documentation"),(0,r.kt)("p",null,"In tutorials, try to not reference functions inside paragraphs. That allows to easily update the tutorial code without need to also update the paragraphs."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},"/*Incorrect*/\n/*MD\nTo add a cube to the scene, you need to call scene.add()\n*/\n\nscene.add(cube)\n\n/*Correct*/\n/*MD\nTo add a cube to the scene, just add the following code line!\n*/\n\nscene.add(cube)\n")),(0,r.kt)("h2",{id:"memory-management"},"Memory management"),(0,r.kt)("p",null,"Memory management is critical when using Open BIM components. Not paying attention to this can result in applications that consume more and more memory, up to a point in which it freeze and / or crash. This is especially relevant when using SPA (Single Page Application) libraries and frameworks, like React, Angular, Vue, etc."),(0,r.kt)("p",null,"To make sure your component doesn\u2019t cause any memory leaks and stays efficient, you need to make sure that:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"It is added to the ",(0,r.kt)("inlineCode",{parentName:"p"},"components")," object like this: ",(0,r.kt)("inlineCode",{parentName:"p"},'components.tools.add("name", yourComponent)')," .")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"It implements the ",(0,r.kt)("inlineCode",{parentName:"p"},"Disposable")," interface. This will force you to implement a ",(0,r.kt)("inlineCode",{parentName:"p"},"dispose()")," method that will be called automatically by the library when it\u2019s disposed. You can add all the clean up logic inside this method."))),(0,r.kt)("p",null,"There are some things that you want to clean up inside the ",(0,r.kt)("inlineCode",{parentName:"p"},"dispose")," method:"),(0,r.kt)("h3",{id:"3d-objects-and-materials"},"3D objects and materials"),(0,r.kt)("p",null,"Three.js needs to ",(0,r.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects"},"manually release the memory")," of the geometry and materials that are not used anymore. If your component creates any new geometry or material, you need to keep track of it and get rid of it. You can do this in 2 ways:"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"Using the Three.js ",(0,r.kt)("inlineCode",{parentName:"p"},"dispose")," method to get rid of all geometries and materials, including their children recursively.")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"Using the ",(0,r.kt)("inlineCode",{parentName:"p"},"disposer")," object provided by the components library, which does everything for you."))),(0,r.kt)("p",null,"You can also make sure that the browser gets rid of this memory fast by leaving this data out of scope (e.g. emptying the array where they are after disposing it). For instance, if you are keeping track of all your meshes in an array called ",(0,r.kt)("inlineCode",{parentName:"p"},"meshes"),", you can get rid of it like this:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},'import * as THREE from "three";\nimport * as OBC from "openbim-components";\n\nclass YourComponent extends Component implements Disposable {\n\n // ...\n\n private _meshes: Mesh[];\n private _disposer = new OBC.Disposer();\n\n dispose() {\n // ...\n for(const mesh of this.meshes) {\n this._disposer.dispose(mesh);\n }\n this._meshes = [];\n }\n\n}\n')),(0,r.kt)("h3",{id:"ui-components--html-elements"},"UI Components / HTML elements"),(0,r.kt)("p",null,"If your components has any kind of menu, it\u2019s probably made of UI Components or raw HTML elements. When you dispose your component, you should also get rid of them to make sure that they are not left hidden somewhere consuming memory. You can easily do this by:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Calling the ",(0,r.kt)("inlineCode",{parentName:"p"},"dispose")," method of the UI Components that you create.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Calling the ",(0,r.kt)("inlineCode",{parentName:"p"},"remove")," method of any HTML element that you create."))),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"The only exception to this rule is if your component takes external UI components or HTML elements. In this case, it\u2019s possible that it is used by other components that are not being disposed yet. In that case, you can just de-reference it (e.g. assigning them an empty value).")),(0,r.kt)("h3",{id:"events"},"Events"),(0,r.kt)("p",null,"Events are a nice way of binding HTML elements to JS logic. A common way of doing that is using ",(0,r.kt)("inlineCode",{parentName:"p"},"addEventListener"),". That\u2019s fine if all the events are bound to HTML elements that you create inside your component (and thus are destroyed when your component is disposed)."),(0,r.kt)("p",null,"But in some situations you\u2019ll need to add events to HTML elements outside your components, or even to the global ",(0,r.kt)("inlineCode",{parentName:"p"},"window")," object. In those cases, you will need to make sure that you get rid of these events when your component is disposed. You can do that with ",(0,r.kt)("inlineCode",{parentName:"p"},"removeEventListener"),", and making sure that you keep a reference to the logic as an arrow function."),(0,r.kt)("p",null,"To make sure you don\u2019t forget about getting rid of your events, it\u2019s a good practice to create a ",(0,r.kt)("inlineCode",{parentName:"p"},"setupEvents")," method that allows you to toggle them like this:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},'import * as THREE from "three";\nimport * as OBC from "openbim-components";\n\nclass YourComponent extends Component implements Disposable {\n\n // ...\n\n constructor() {\n this.setupEvents(true);\n }\n\n dispose() {\n // ...\n this.setupEvents(false);\n }\n\n private _setupEvents(active: boolean) {\n if(active) {\n window.addEventListener("mousemove", this.logMessage);\n } else {\n window.removeEventListener("mousemove", this.logMessage);\n }\n }\n\n private logMessage = () => {\n console.log("Hey!");\n }\n}\n')),(0,r.kt)("h3",{id:"huge-objects--arrays"},"Huge objects / arrays"),(0,r.kt)("p",null,"Some components are data-heavy. You should make sure that that memory is released when your component is disposed. To achieve that, you can just assign them an empty value:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},'import * as THREE from "three";\nimport * as OBC from "openbim-components";\n\nclass YourComponent extends Component implements Disposable {\n\n dataArray: any = [];\n dataObject: any = {};\n\n dispose() {\n // ...\n this.dataArray= [];\n this.dataObject= {};\n }\n}\n')))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/e8a4ea3d.e3ed6a35.js b/build/assets/js/e8a4ea3d.e3ed6a35.js new file mode 100644 index 00000000..cdb964c4 --- /dev/null +++ b/build/assets/js/e8a4ea3d.e3ed6a35.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7592],{3905:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},l=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),d=c(r),m=o,f=d["".concat(s,".").concat(m)]||d[m]||u[m]||a;return r?n.createElement(f,i(i({ref:t},l),{},{components:r})):n.createElement(f,i({ref:t},l))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=m;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p[d]="string"==typeof e?e:o,i[1]=p;for(var c=2;c{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>p,metadata:()=>c,toc:()=>d});var n=r(7462),o=r(3366),a=(r(7294),r(3905)),i=["components"],p={id:"thatopen_components_front.RendererWith2D",title:"Class: RendererWith2D",sidebar_label:"RendererWith2D",custom_edit_url:null},s=void 0,c={unversionedId:"api/classes/thatopen_components_front.RendererWith2D",id:"api/classes/thatopen_components_front.RendererWith2D",title:"Class: RendererWith2D",description:"@thatopen/components-front.RendererWith2D",source:"@site/docs/api/classes/thatopen_components_front.RendererWith2D.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components_front.RendererWith2D",permalink:"/api/classes/thatopen_components_front.RendererWith2D",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components_front.RendererWith2D",title:"Class: RendererWith2D",sidebar_label:"RendererWith2D",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"PostproductionRenderer",permalink:"/api/classes/thatopen_components_front.PostproductionRenderer"},next:{title:"Serializer",permalink:"/api/classes/thatopen_fragments.Serializer"}},l={},d=[{value:"Hierarchy",id:"hierarchy",level:2}],u={toc:d},m="wrapper";function f(e){var t=e.components,r=(0,o.Z)(e,i);return(0,a.kt)(m,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components_front"},"@thatopen/components-front"),".RendererWith2D"),(0,a.kt)("p",null,"A basic renderer capable of rendering 3D and 2D objects\n(",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#api/en/core/Object3D"},"Objec3Ds")," and\n",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/docs/#examples/en/renderers/CSS2DRenderer"},"CSS2DObjects"),"\nrespectively)."),(0,a.kt)("h2",{id:"hierarchy"},"Hierarchy"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("inlineCode",{parentName:"p"},"SimpleRenderer")),(0,a.kt)("p",{parentName:"li"},"\u21b3 ",(0,a.kt)("strong",{parentName:"p"},(0,a.kt)("inlineCode",{parentName:"strong"},"RendererWith2D"))),(0,a.kt)("p",{parentName:"li"},"\u21b3\u21b3 ",(0,a.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components_front.PostproductionRenderer"},(0,a.kt)("inlineCode",{parentName:"a"},"PostproductionRenderer"))))))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/f0d87bf4.22ac90d3.js b/build/assets/js/f0d87bf4.22ac90d3.js new file mode 100644 index 00000000..27b5d587 --- /dev/null +++ b/build/assets/js/f0d87bf4.22ac90d3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8553],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>f});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=o.createContext({}),c=function(e){var t=o.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},m=function(e){var t=c(e.components);return o.createElement(s.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),p=c(n),d=r,f=p["".concat(s,".").concat(d)]||p[d]||u[d]||a;return n?o.createElement(f,i(i({ref:t},m),{},{components:n})):o.createElement(f,i({ref:t},m))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:r,i[1]=l;for(var c=2;c{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>s,default:()=>f,frontMatter:()=>l,metadata:()=>c,toc:()=>p});var o=n(7462),r=n(3366),a=(n(7294),n(3905)),i=["components"],l={},s=void 0,c={unversionedId:"Tutorials/Components/Core/IfcLoader",id:"Tutorials/Components/Core/IfcLoader",title:"IfcLoader",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/IfcLoader.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/IfcLoader",permalink:"/Tutorials/Components/Core/IfcLoader",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfcGeometryTiler",permalink:"/Tutorials/Components/Core/IfcGeometryTiler"},next:{title:"IfcPropertiesTiler",permalink:"/Tutorials/Components/Core/IfcPropertiesTiler"}},m={},p=[{value:"\ud83c\udfe0\ud83d\udc49\ud83e\udd16 From IFC to fragment in 1 minute",id:"-from-ifc-to-fragment-in-1-minute",level:3},{value:"\ud83d\udd2d\ud83d\udd27 Calibrating the converter",id:"-calibrating-the-converter",level:3},{value:"\ud83d\ude97\ud83d\udd25 Loading the IFC",id:"-loading-the-ifc",level:3},{value:"\ud83c\udf81 Exporting the result",id:"-exporting-the-result",level:3},{value:"\ud83e\udde0\ud83e\uddfc Cleaning memory",id:"-cleaning-memory",level:3}],u={toc:p},d="wrapper";function f(e){var t=e.components,n=(0,r.Z)(e,i);return(0,a.kt)(d,(0,o.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/fragments/IfcLoader/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"-from-ifc-to-fragment-in-1-minute"},"\ud83c\udfe0\ud83d\udc49\ud83e\udd16 From IFC to fragment in 1 minute"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Fragments are great: they are lightweight, they are fast and we\nhave tons of tools to work with them. But fragments are not used\noutside our libraries. So how can we convert an IFC file to fragments?\nEasy: with the ",(0,a.kt)("inlineCode",{parentName:"p"},"FragmentIfcLoader"),"! Let's start by creating it."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import * as WEBIFC from "web-ifc";\nimport * as BUI from "@thatopen/ui";\nimport Stats from "stats.js";\nimport * as OBC from "openbim-components";\n\nconst 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')),(0,a.kt)("admonition",{title:"Why not just IFC?",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"IFC is nice because it lets us exchange data with many tools in the\nAECO industry. But it also has some limitations. In a nutshell,\ndata coming from IFC needs to be processed and converted to triangles\nto be able to draw it in 3D, and that requires processing power\nand time! That's why we convert it to fragments to display it.\nOnce you have the fragments, you can store them and load them\ndirectly the next time your user tries to load that IFC: it will\nload 10 times faster!")),(0,a.kt)("h3",{id:"-calibrating-the-converter"},"\ud83d\udd2d\ud83d\udd27 Calibrating the converter"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now, we need to configure the path of the WASM files. What's WASM?\nIt's a technology that lets us run C++ on the browser, which means\nthat we can load IFCs super fast! These files are the compilation of\nour ",(0,a.kt)("inlineCode",{parentName:"p"},"web-ifc")," library. You can find them in the github repo and in NPM.\nThese files need to be available to our app, so you have 2 options:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Download them and serve them statically."),(0,a.kt)("li",{parentName:"ul"},"Get them from a remote server.\nThe easiest way is getting them from unpkg, and the cool thing is that\nyou don't need to do it manually! It can be done directly by the tool\njust by writing the following:")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const fragments = components.get(OBC.FragmentsManager);\nconst fragmentIfcLoader = components.get(OBC.IfcLoader);\n")),(0,a.kt)("p",null,"Awesome! Optionally, we can exclude categories that we don't want\nto convert to fragments like very easily:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'await fragmentIfcLoader.setup();\n\n/* If you want to the path to unpkg manually, then you can skip the line\n above and set them manually as below:\n fragmentIfcLoader.settings.wasm = {\n path: "https://unpkg.com/web-ifc@0.0.53/",\n absolute: true\n }\n')),(0,a.kt)("p",null,"We can further configure the conversion using the ",(0,a.kt)("inlineCode",{parentName:"p"},"webIfc")," object.\nIn this example, we will make the IFC model go to the origin of\nthe scene (don't worry, this supports model federation) and\noptimize the profiles geometry so that it generates very\nefficient geometry for certain geometries (e.g. HVAC):"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const excludedCats = [\n WEBIFC.IFCTENDONANCHOR,\n WEBIFC.IFCREINFORCINGBAR,\n WEBIFC.IFCREINFORCINGELEMENT,\n];\n\nfor (const cat of excludedCats) {\n fragmentIfcLoader.settings.excludedCategories.add(cat);\n}\n")),(0,a.kt)("h3",{id:"-loading-the-ifc"},"\ud83d\ude97\ud83d\udd25 Loading the IFC"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Next, let's define a function to load the IFC programmatically.\nWe have hardcoded the path to one of our IFC files, but feel free\nto do this with any of your own files!"),(0,a.kt)("admonition",{title:"Opening local IFCs",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Keep in mind that the browser can't access the file of your\ncomputer directly, so you will need to use the Open File API to\nopen local files.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"fragmentIfcLoader.settings.webIfc.COORDINATE_TO_ORIGIN = true;\nfragmentIfcLoader.settings.webIfc.OPTIMIZE_PROFILES = true;\n")),(0,a.kt)("h3",{id:"-exporting-the-result"},"\ud83c\udf81 Exporting the result"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Once you have your precious fragments, you might want to save them\nso that you don't need to open this IFC file each time your user\ngets into your app. Instead, the next time you can load the\nfragments directly. Defining a function to export fragments\nis as easy as this:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'// const cullers = components.get(OBC.Cullers);\n// const culler = cullers.create(world);\n// culler.enabled = true;\n\nasync function loadIfc() {\n const file = await fetch("../../../../../resources/small.ifc");\n const data = await file.arrayBuffer();\n const buffer = new Uint8Array(data);\n const model = await fragmentIfcLoader.load(buffer);\n model.name = "example";\n world.scene.three.add(model);\n // for (const mesh of model.children) {\n // culler.add(mesh as any);\n // }\n}\n\n// world.camera.controls.addEventListener("sleep", () => {\n// culler.needsUpdate = true\n// })\n')),(0,a.kt)("h3",{id:"-cleaning-memory"},"\ud83e\udde0\ud83e\uddfc Cleaning memory"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Now, just like in the ",(0,a.kt)("inlineCode",{parentName:"p"},"FragmentManager")," tutorial, you will need\nto dispose the memory if your user wants to reset the state of the\nscene, especially if you are using Single Page Application\ntechnologies like React, Angular, Vue, etc. To do that, you\ncan simply call the ",(0,a.kt)("inlineCode",{parentName:"p"},"dispose")," method:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'function download(file: File) {\n const link = document.createElement("a");\n link.href = URL.createObjectURL(file);\n link.download = file.name;\n document.body.appendChild(link);\n link.click();\n link.remove();\n}\n\nasync function exportFragments() {\n if (!fragments.groups.size) {\n return;\n }\n const group = Array.from(fragments.groups.values())[0];\n const data = fragments.export(group);\n download(new File([new Blob([data])], "small.frag"));\n\n const properties = group.getLocalProperties();\n if (properties) {\n download(new File([JSON.stringify(properties)], "small.json"));\n }\n}\n')),(0,a.kt)("p",null,"That's it! Congrats, now you can load IFC files into your app,\ngenerate the 3D geometry and property data for them and navigate\nthem in 3D. In other tutorials, you'll find tons of tools to\nwork with them and create amazing BIM apps! See you there \ud83d\udcaa"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"function disposeFragments() {\n fragments.dispose();\n}\n")),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/IfcLoader"}))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/f45379a9.dc520ac9.js b/build/assets/js/f45379a9.dc520ac9.js new file mode 100644 index 00000000..41a8ad2e --- /dev/null +++ b/build/assets/js/f45379a9.dc520ac9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1842],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var o=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=o.createContext({}),m=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=m(e.components);return o.createElement(l.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},u=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=m(n),u=r,f=p["".concat(l,".").concat(u)]||p[u]||d[u]||a;return n?o.createElement(f,i(i({ref:t},c),{},{components:n})):o.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[p]="string"==typeof e?e:r,i[1]=s;for(var m=2;m{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>f,frontMatter:()=>s,metadata:()=>m,toc:()=>p});var o=n(7462),r=n(3366),a=(n(7294),n(3905)),i=["components"],s={},l=void 0,m={unversionedId:"Tutorials/Components/Core/IfcGeometryTiler",id:"Tutorials/Components/Core/IfcGeometryTiler",title:"IfcGeometryTiler",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/IfcGeometryTiler.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/IfcGeometryTiler",permalink:"/Tutorials/Components/Core/IfcGeometryTiler",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Hider",permalink:"/Tutorials/Components/Core/Hider"},next:{title:"IfcLoader",permalink:"/Tutorials/Components/Core/IfcLoader"}},c={},p=[{value:"\ud83d\udcaa Let's go BIG",id:"-lets-go-big",level:2},{value:"\ud83e\udde9 Converting the IFC model to tiles",id:"-converting-the-ifc-model-to-tiles",level:3}],d={toc:p},u="wrapper";function f(e){var t=e.components,n=(0,r.Z)(e,i);return(0,a.kt)(u,(0,o.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/fragments/IfcGeometryTiler/example.ts"},"here"),".")),(0,a.kt)("h2",{id:"-lets-go-big"},"\ud83d\udcaa Let's go BIG"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Do you need to open huge big IFC files fast, even on more modest devices? If so, you are in luck! We can open virtually any model on any device in seconds thanks to BIM TILES!"),(0,a.kt)("admonition",{title:"BIM tiles?",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"The idea behind BIM tiles is pretty simple! Instead of loading the whole BIM model at once, we just load the explicit geometries that are seen by the user. It's way faster than opening the IFC directly, but for this you'll need a backend (or to rely on the file system of the user if you are building a desktop or mobile app).")),(0,a.kt)("p",null,"Let's see how to do this step by step!"),(0,a.kt)("h3",{id:"-converting-the-ifc-model-to-tiles"},"\ud83e\udde9 Converting the IFC model to tiles"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"The first step is to transform the IFC model into BIM tiles. The reason why we have to do this is pretty simple: geometry in IFC is implicit (e.g. a wall is defined as an extrusion). This means that it needs to be computed and converted to explicit geometry (triangles) so that it can be displayed in 3D. "),(0,a.kt)("admonition",{type:"note"},(0,a.kt)("p",{parentName:"admonition"},"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!")),(0,a.kt)("p",null,"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, let's start converting the IFC geometry to tiles and getting those files so the streamer can do its job. In order to do it, we need the first component from the collection of streaming components: ",(0,a.kt)("inlineCode",{parentName:"p"},"FragmentIfcStreamConverter"),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import Stats from "stats.js";\n// @ts-ignore\nimport * as dat from "three/examples/jsm/libs/lil-gui.module.min";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "openbim-components";\n\nconst 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\n// rendererComponent.postproduction.enabled = true;\n\nworld.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);\n\nconst grids = components.get(OBC.Grids);\ngrids.create(world);\n// customEffects.excludedMeshes.push(grid.get());\n\n// rendererComponent.postproduction.enabled = true;\n')),(0,a.kt)("p",null,"The ",(0,a.kt)("inlineCode",{parentName:"p"},"FragmentIfcStreamConverter")," class takes IFC files and transform their geometry into tiles. "),(0,a.kt)("admonition",{type:"warning"},(0,a.kt)("p",{parentName:"admonition"},"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.")),(0,a.kt)("p",null,"The first file we need is a JSON which is the entry point of the geometries streaming. That JSON must have the following structure:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'// We need this wasm configuration later to convert properties\nconst wasm = {\n path: "https://unpkg.com/web-ifc@0.0.53/",\n absolute: true,\n};\n\nconst tiler = new OBC.IfcGeometryTiler(components);\ntiler.settings.wasm = wasm;\ntiler.settings.minGeometrySize = 20;\ntiler.settings.minAssetsSize = 1000;\n')),(0,a.kt)("p",null,"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, the ",(0,a.kt)("inlineCode",{parentName:"p"},"FragmentIfcStreamConverter")," as well as other components in the collection of streaming components, emits events that let you get the processed data from the conversion process."),(0,a.kt)("admonition",{type:"important"},(0,a.kt)("p",{parentName:"admonition"},"Nedless to say, you need to set up your event listeners before triggering the conversion!")),(0,a.kt)("p",null,"Let's start with the first event:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'// @ts-ignore\ninterface 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')),(0,a.kt)("p",null,'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,a.kt)("inlineCode",{parentName:"p"},"geometryFiles")," array. Later on, we will download the geometry files \u23ec."),(0,a.kt)("admonition",{type:"note"},(0,a.kt)("p",{parentName:"admonition"},"As you see, ",(0,a.kt)("inlineCode",{parentName:"p"},"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.")),(0,a.kt)("p",null,"Nice! Let's go with the second event that will give us more information to create the required files:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"let files: { name: string; bits: (Uint8Array | string)[] }[] = [];\n\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")),(0,a.kt)("p",null,"This one is easier as the event doesn't produce binary data, but information we need to create the JSON file. "),(0,a.kt)("admonition",{title:"Are you familiar with That Open Engine?",type:"note"},(0,a.kt)("p",{parentName:"admonition"},"If you're familiar with That Open Engine, 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.")),(0,a.kt)("p",null,"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."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"let assetsData: OBC.StreamedAsset[] = [];\n\ntiler.onAssetStreamed.add((assets) => {\n assetsData = [...assetsData, ...assets];\n});\n")),(0,a.kt)("admonition",{type:"warning"},(0,a.kt)("p",{parentName:"admonition"},"You can name the file whatever you want, but is ",(0,a.kt)("em",{parentName:"p"},"extremely important")," you finish the file name with ",(0,a.kt)("inlineCode",{parentName:"p"},"-global"),"!")),(0,a.kt)("p",null,"This is pretty much it! 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:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'tiler.onIfcLoaded.add((groupBuffer) => {\n files.push({\n name: "small.ifc-processed-global",\n bits: [groupBuffer],\n });\n});\n')),(0,a.kt)("p",null,"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:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,a.kt)("p",null,"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"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'async function processFile() {\n const fetchedIfc = await fetch("../../../../../resources/small.ifc");\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')),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/IfcGeometryTiler"}))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/f6aebfbf.3b73aec4.js b/build/assets/js/f6aebfbf.3b73aec4.js new file mode 100644 index 00000000..b4efb8f9 --- /dev/null +++ b/build/assets/js/f6aebfbf.3b73aec4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7306],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),p=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},s=function(e){var t=p(e.components);return n.createElement(c.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(r),m=o,f=u["".concat(c,".").concat(m)]||u[m]||d[m]||a;return r?n.createElement(f,i(i({ref:t},s),{},{components:r})):n.createElement(f,i({ref:t},s))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[u]="string"==typeof e?e:o,i[1]=l;for(var p=2;p{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>c,default:()=>f,frontMatter:()=>l,metadata:()=>p,toc:()=>u});var n=r(7462),o=r(3366),a=(r(7294),r(3905)),i=["components"],l={id:"modules",title:"Open BIM Docs",sidebar_label:"Exports",sidebar_position:.5,custom_edit_url:null},c=void 0,p={unversionedId:"api/modules",id:"api/modules",title:"Open BIM Docs",description:"",source:"@site/docs/api/modules.md",sourceDirName:"api",slug:"/api/modules",permalink:"/api/modules",draft:!1,editUrl:null,tags:[],version:"current",sidebarPosition:.5,frontMatter:{id:"modules",title:"Open BIM Docs",sidebar_label:"Exports",sidebar_position:.5,custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"Readme",permalink:"/api/"},next:{title:"@thatopen/components",permalink:"/api/modules/thatopen_components"}},s={},u=[],d={toc:u},m="wrapper";function f(e){var t=e.components,r=(0,o.Z)(e,i);return(0,a.kt)(m,(0,n.Z)({},d,r,{components:t,mdxType:"MDXLayout"}))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/f70643aa.695affec.js b/build/assets/js/f70643aa.695affec.js new file mode 100644 index 00000000..e650e274 --- /dev/null +++ b/build/assets/js/f70643aa.695affec.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8046],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>g});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var i=o.createContext({}),p=function(e){var t=o.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=p(e.components);return o.createElement(i.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},u=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=p(n),u=a,g=d["".concat(i,".").concat(u)]||d[u]||m[u]||r;return n?o.createElement(g,l(l({ref:t},c),{},{components:n})):o.createElement(g,l({ref:t},c))}));function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,l=new Array(r);l[0]=u;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[d]="string"==typeof e?e:a,l[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>s,metadata:()=>p,toc:()=>d});var o=n(7462),a=n(3366),r=(n(7294),n(3905)),l=["components"],s={},i=void 0,p={unversionedId:"Tutorials/UserInterface/OBC/ModelsList",id:"Tutorials/UserInterface/OBC/ModelsList",title:"ModelsList",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/UserInterface/OBC/ModelsList.mdx",sourceDirName:"Tutorials/UserInterface/OBC",slug:"/Tutorials/UserInterface/OBC/ModelsList",permalink:"/Tutorials/UserInterface/OBC/ModelsList",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"EntityAttributes",permalink:"/Tutorials/UserInterface/OBC/EntityAttributes"}},c={},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}],m={toc:d},u="wrapper";function g(e){var t=e.components,n=(0,a.Z)(e,l);return(0,r.kt)(u,(0,o.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("admonition",{title:"Source",type:"info"},(0,r.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/components/tables/ModelsList/example.ts"},"here"),".")),(0,r.kt)("h2",{id:"managing-your-loaded-models-"},"Managing your loaded models \ud83c\udfe2"),(0,r.kt)("hr",null),(0,r.kt)("p",null,"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!"),(0,r.kt)("h3",{id:"setting-up-the-components"},"Setting up the components"),(0,r.kt)("p",null,"First of all, we're going to get the ",(0,r.kt)("inlineCode",{parentName:"p"},"FragmentIfcLoader")," from an existing components instance:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const ifcLoader = components.get(OBC.IfcLoader);\nawait ifcLoader.setup();\n")),(0,r.kt)("p",null,"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,r.kt)("inlineCode",{parentName:"p"},"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,r.kt)("inlineCode",{parentName:"p"},"FragmentManager")," so any time a model is loaded it gets added to some world scene created before: "),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const fragmentsManager = components.get(OBC.FragmentsManager);\nfragmentsManager.onFragmentsLoaded.add((model) => {\n if (world.scene) world.scene.three.add(model);\n});\n")),(0,r.kt)("h3",{id:"creating-the-models-list-component"},"Creating the models list component"),(0,r.kt)("p",null,"Allright! Now that some basic events are setup, it's time to create a new fresh models list component:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const [modelsList] = CUI.tables.modelsList({ components });\n")),(0,r.kt)("p",null,"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"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,r.kt)("p",null,"Finally, let's append the BIM Panel to the page to see the models list working \ud83d\ude09"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'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')),(0,r.kt)("p",null,"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"),(0,r.kt)("iframe",{src:"https://thatopen.github.io/engine_ui-components/examples/ModelsList"}))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/f77615d9.3ebf0476.js b/build/assets/js/f77615d9.3ebf0476.js new file mode 100644 index 00000000..bcd6888d --- /dev/null +++ b/build/assets/js/f77615d9.3ebf0476.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4376],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),s=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=s(e.components);return a.createElement(l.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),d=s(n),m=r,f=d["".concat(l,".").concat(m)]||d[m]||u[m]||i;return n?a.createElement(f,o(o({ref:t},c),{},{components:n})):a.createElement(f,o({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=m;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[d]="string"==typeof e?e:r,o[1]=p;for(var s=2;s{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>f,frontMatter:()=>p,metadata:()=>s,toc:()=>d});var a=n(7462),r=n(3366),i=(n(7294),n(3905)),o=["components"],p={id:"thatopen_components.Configurable",title:"Interface: Configurable",sidebar_label:"Configurable",custom_edit_url:null},l=void 0,s={unversionedId:"api/interfaces/thatopen_components.Configurable",id:"api/interfaces/thatopen_components.Configurable",title:"Interface: Configurable",description:"@thatopen/components.Configurable",source:"@site/docs/api/interfaces/thatopen_components.Configurable.md",sourceDirName:"api/interfaces",slug:"/api/interfaces/thatopen_components.Configurable",permalink:"/api/interfaces/thatopen_components.Configurable",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.Configurable",title:"Interface: Configurable",sidebar_label:"Configurable",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"CameraControllable",permalink:"/api/interfaces/thatopen_components.CameraControllable"},next:{title:"Createable",permalink:"/api/interfaces/thatopen_components.Createable"}},c={},d=[{value:"Type parameters",id:"type-parameters",level:2},{value:"Implemented by",id:"implemented-by",level:2},{value:"Properties",id:"properties",level:2},{value:"config",id:"config",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"isSetup",id:"issetup",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"onSetup",id:"onsetup",level:3},{value:"Defined in",id:"defined-in-2",level:4},{value:"setup",id:"setup",level:3},{value:"Type declaration",id:"type-declaration",level:4},{value:"Parameters",id:"parameters",level:5},{value:"Returns",id:"returns",level:5},{value:"Defined in",id:"defined-in-3",level:4}],u={toc:d},m="wrapper";function f(e){var t=e.components,n=(0,r.Z)(e,o);return(0,i.kt)(m,(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".Configurable"),(0,i.kt)("p",null,"Whether this component supports to be configured."),(0,i.kt)("h2",{id:"type-parameters"},"Type parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"T")),(0,i.kt)("td",{parentName:"tr",align:"left"},"extends ",(0,i.kt)("inlineCode",{parentName:"td"},"Record"),"<",(0,i.kt)("inlineCode",{parentName:"td"},"string"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"any"),">")))),(0,i.kt)("h2",{id:"implemented-by"},"Implemented by"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/api/classes/thatopen_components.SimpleScene"},(0,i.kt)("inlineCode",{parentName:"a"},"SimpleScene")))),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("h3",{id:"config"},"config"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"config"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"Required"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"T"),">"),(0,i.kt)("p",null,"Object holding the tool configuration. Is not meant to be edited directly, if you need\nto make changes to this object, use ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable#setup"},"()")," just after the tool is instantiated."),(0,i.kt)("h4",{id:"defined-in"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L128"},"packages/core/src/core/Types/src/interfaces.ts:128")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"issetup"},"isSetup"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"isSetup"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"boolean")),(0,i.kt)("p",null,"Wether this components has been already configured."),(0,i.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L117"},"packages/core/src/core/Types/src/interfaces.ts:117")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"onsetup"},"onSetup"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,i.kt)("strong",{parentName:"p"},"onSetup"),": ",(0,i.kt)("a",{parentName:"p",href:"/api/classes/thatopen_components.Event"},(0,i.kt)("inlineCode",{parentName:"a"},"Event")),"<",(0,i.kt)("inlineCode",{parentName:"p"},"any"),">"),(0,i.kt)("p",null,"Fired after successfully calling ",(0,i.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.Configurable#setup"},"()")),(0,i.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L123"},"packages/core/src/core/Types/src/interfaces.ts:123")),(0,i.kt)("hr",null),(0,i.kt)("h3",{id:"setup"},"setup"),(0,i.kt)("p",null,"\u2022 ",(0,i.kt)("strong",{parentName:"p"},"setup"),": (",(0,i.kt)("inlineCode",{parentName:"p"},"config?"),": ",(0,i.kt)("inlineCode",{parentName:"p"},"Partial"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"T"),">",") => ",(0,i.kt)("inlineCode",{parentName:"p"},"void")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,i.kt)("h4",{id:"type-declaration"},"Type declaration"),(0,i.kt)("p",null,"\u25b8 (",(0,i.kt)("inlineCode",{parentName:"p"},"config?"),"): ",(0,i.kt)("inlineCode",{parentName:"p"},"void")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,i.kt)("p",null,"Use the provided configuration to setup the tool."),(0,i.kt)("h5",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,i.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"config?")),(0,i.kt)("td",{parentName:"tr",align:"left"},(0,i.kt)("inlineCode",{parentName:"td"},"Partial"),"<",(0,i.kt)("inlineCode",{parentName:"td"},"T"),">")))),(0,i.kt)("h5",{id:"returns"},"Returns"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"void")," ","|"," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise"),"<",(0,i.kt)("inlineCode",{parentName:"p"},"void"),">"),(0,i.kt)("h4",{id:"defined-in-3"},"Defined in"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/Types/src/interfaces.ts#L120"},"packages/core/src/core/Types/src/interfaces.ts:120")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/fa23a143.35c15e8f.js b/build/assets/js/fa23a143.35c15e8f.js new file mode 100644 index 00000000..7e049d9e --- /dev/null +++ b/build/assets/js/fa23a143.35c15e8f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7709],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>u});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),s=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(l.Provider,{value:t},e.children)},c="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},f=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,d=p(e,["components","mdxType","originalType","parentName"]),c=s(n),f=r,u=c["".concat(l,".").concat(f)]||c[f]||m[f]||o;return n?a.createElement(u,i(i({ref:t},d),{},{components:n})):a.createElement(u,i({ref:t},d))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p[c]="string"==typeof e?e:r,i[1]=p;for(var s=2;s{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>u,frontMatter:()=>p,metadata:()=>s,toc:()=>c});var a=n(7462),r=n(3366),o=(n(7294),n(3905)),i=["components"],p={id:"thatopen_components.OrbitMode",title:"Class: OrbitMode",sidebar_label:"OrbitMode",custom_edit_url:null},l=void 0,s={unversionedId:"api/classes/thatopen_components.OrbitMode",id:"api/classes/thatopen_components.OrbitMode",title:"Class: OrbitMode",description:"@thatopen/components.OrbitMode",source:"@site/docs/api/classes/thatopen_components.OrbitMode.md",sourceDirName:"api/classes",slug:"/api/classes/thatopen_components.OrbitMode",permalink:"/api/classes/thatopen_components.OrbitMode",draft:!1,editUrl:null,tags:[],version:"current",frontMatter:{id:"thatopen_components.OrbitMode",title:"Class: OrbitMode",sidebar_label:"OrbitMode",custom_edit_url:null},sidebar:"tutorialSidebar",previous:{title:"MeshCullerRenderer",permalink:"/api/classes/thatopen_components.MeshCullerRenderer"},next:{title:"OrthoPerspectiveCamera",permalink:"/api/classes/thatopen_components.OrthoPerspectiveCamera"}},d={},c=[{value:"Implements",id:"implements",level:2},{value:"Properties",id:"properties",level:2},{value:"enabled",id:"enabled",level:3},{value:"Implementation of",id:"implementation-of",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"id",id:"id",level:3},{value:"Implementation of",id:"implementation-of-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"Methods",id:"methods",level:2},{value:"set",id:"set",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Implementation of",id:"implementation-of-2",level:4},{value:"Defined in",id:"defined-in-2",level:4}],m={toc:c},f="wrapper";function u(e){var t=e.components,n=(0,r.Z)(e,i);return(0,o.kt)(f,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/modules/thatopen_components"},"@thatopen/components"),".OrbitMode"),(0,o.kt)("p",null,"A ",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode")," that allows 3D navigation and panning\nlike in many 3D and CAD softwares."),(0,o.kt)("h2",{id:"implements"},"Implements"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/api/interfaces/thatopen_components.NavigationMode"},(0,o.kt)("inlineCode",{parentName:"a"},"NavigationMode")))),(0,o.kt)("h2",{id:"properties"},"Properties"),(0,o.kt)("h3",{id:"enabled"},"enabled"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("strong",{parentName:"p"},"enabled"),": ",(0,o.kt)("inlineCode",{parentName:"p"},"boolean")," = ",(0,o.kt)("inlineCode",{parentName:"p"},"true")),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#enabled"},"NavigationMode.enabled")),(0,o.kt)("h4",{id:"implementation-of"},"Implementation of"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode"),".",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#enabled"},"enabled")),(0,o.kt)("h4",{id:"defined-in"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts#L11"},"packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts:11")),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"id"},"id"),(0,o.kt)("p",null,"\u2022 ",(0,o.kt)("inlineCode",{parentName:"p"},"Readonly")," ",(0,o.kt)("strong",{parentName:"p"},"id"),": ",(0,o.kt)("inlineCode",{parentName:"p"},'"Orbit"')),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#id"},"NavigationMode.id")),(0,o.kt)("h4",{id:"implementation-of-1"},"Implementation of"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode"),".",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#id"},"id")),(0,o.kt)("h4",{id:"defined-in-1"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts#L14"},"packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts:14")),(0,o.kt)("h2",{id:"methods"},"Methods"),(0,o.kt)("h3",{id:"set"},"set"),(0,o.kt)("p",null,"\u25b8 ",(0,o.kt)("strong",{parentName:"p"},"set"),"(",(0,o.kt)("inlineCode",{parentName:"p"},"active"),"): ",(0,o.kt)("inlineCode",{parentName:"p"},"void")),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#set"},"NavigationMode.set")),(0,o.kt)("h4",{id:"parameters"},"Parameters"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Type"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"active")),(0,o.kt)("td",{parentName:"tr",align:"left"},(0,o.kt)("inlineCode",{parentName:"td"},"boolean"))))),(0,o.kt)("h4",{id:"returns"},"Returns"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"void")),(0,o.kt)("h4",{id:"implementation-of-2"},"Implementation of"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode"},"NavigationMode"),".",(0,o.kt)("a",{parentName:"p",href:"/api/interfaces/thatopen_components.NavigationMode#set"},"set")),(0,o.kt)("h4",{id:"defined-in-2"},"Defined in"),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/7affdb6/packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts#L21"},"packages/core/src/core/OrthoPerspectiveCamera/src/orbit-mode.ts:21")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/fba9713b.38567f18.js b/build/assets/js/fba9713b.38567f18.js new file mode 100644 index 00000000..e5dd87f7 --- /dev/null +++ b/build/assets/js/fba9713b.38567f18.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3132],{3905:(e,n,t)=>{t.d(n,{Zo:()=>p,kt:()=>f});var o=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function s(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=o.createContext({}),c=function(e){var n=o.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):s(s({},n),e)),t},p=function(e){var n=c(e.components);return o.createElement(l.Provider,{value:n},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},d=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=c(t),d=r,f=m["".concat(l,".").concat(d)]||m[d]||u[d]||a;return t?o.createElement(f,s(s({ref:n},p),{},{components:t})):o.createElement(f,s({ref:n},p))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,s=new Array(a);s[0]=d;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i[m]="string"==typeof e?e:r,s[1]=i;for(var c=2;c{t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>l,default:()=>f,frontMatter:()=>i,metadata:()=>c,toc:()=>m});var o=t(7462),r=t(3366),a=(t(7294),t(3905)),s=["components"],i={},l=void 0,c={unversionedId:"Tutorials/Components/Core/Hider",id:"Tutorials/Components/Core/Hider",title:"Hider",description:"Copying and pasting? We got you covered! You can find the full source code of this tutorial here.",source:"@site/docs/Tutorials/Components/Core/Hider.mdx",sourceDirName:"Tutorials/Components/Core",slug:"/Tutorials/Components/Core/Hider",permalink:"/Tutorials/Components/Core/Hider",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Grids",permalink:"/Tutorials/Components/Core/Grids"},next:{title:"IfcGeometryTiler",permalink:"/Tutorials/Components/Core/IfcGeometryTiler"}},p={},m=[{value:"\ud83d\udd0e Custom filters for your BIM models",id:"-custom-filters-for-your-bim-models",level:3},{value:"\ud83d\udcd5\ud83d\udcd7\ud83d\udcd8 Setting up simple filters",id:"-setting-up-simple-filters",level:3}],u={toc:m},d="wrapper";function f(e){var n=e.components,t=(0,r.Z)(e,s);return(0,a.kt)(d,(0,o.Z)({},u,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("admonition",{title:"Source",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Copying and pasting? We got you covered! You can find the full source code of this tutorial ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/fragments/Hider/example.ts"},"here"),".")),(0,a.kt)("h3",{id:"-custom-filters-for-your-bim-models"},"\ud83d\udd0e Custom filters for your BIM models"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"BIM models are complex, and finding what we are looking for is not\nalways easy. Luckily, the components library has tools to make\nit easier, and one of them is the 'FragmentHider'. Let's\ncheck it out!"),(0,a.kt)("admonition",{title:"Complex IFC, complex filters",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"Each IFC is a world. Data is always defined slightly differently,\nand defining pre-made filters only works for very basic things\nlike categories. With the FragmentHider, you'll be able to find\nanything, even things defined in custom categories!")),(0,a.kt)("p",null,"First, let's start by creating a ",(0,a.kt)("inlineCode",{parentName:"p"},"FragmentManager")," instance and\nloading a simple fragment. If you haven't checked out the tutorial\nfor that component yet, do it before going forward!"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import Stats from "stats.js";\nimport * as BUI from "@thatopen/ui";\nimport * as OBC from "openbim-components";\n\nconst 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')),(0,a.kt)("p",null,"Now that we have our model, let's start the ",(0,a.kt)("inlineCode",{parentName:"p"},"FragmentHider"),". You\ncan use the ",(0,a.kt)("inlineCode",{parentName:"p"},"loadCached")," method if you had used it before: it will\nautomatically load all the filters you created in previous sessions,\neven after closing the browser and opening it again:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const fragments = new OBC.FragmentsManager(components);\nconst file = await fetch("../../../../../resources/small.frag");\nconst data = await file.arrayBuffer();\nconst buffer = new Uint8Array(data);\nconst model = fragments.load(buffer);\nworld.scene.three.add(model);\n')),(0,a.kt)("h3",{id:"-setting-up-simple-filters"},"\ud83d\udcd5\ud83d\udcd7\ud83d\udcd8 Setting up simple filters"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"Next, we will classify data by category and by level using the\n",(0,a.kt)("inlineCode",{parentName:"p"},"FragmentClassifier"),". This will allow us to create a simple\nfilter for both classifications. Don't worry: we'll get to\nthe more complex filters later!"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const hider = new OBC.FragmentHider(components);\n")),(0,a.kt)("p",null,"Next, we will create a simple object that we will use as the\nbase for the floors filter. It will just be a JS object with\nthe name of each storey as key and a boolean (true/false) as\nvalue:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const classifier = new OBC.Classifier(components);\nclassifier.byStorey(model);\nclassifier.byEntity(model);\n")),(0,a.kt)("p",null,"Now, let's do the same for categories:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const storeys: Record = {};\nconst storeyNames = Object.keys(classifier.list.storeys);\nfor (const name of storeyNames) {\n storeys[name] = true;\n}\n")),(0,a.kt)("p",null,"Finally, we will set up a simple menu to control\nthe visibility of storeys:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const classes: Record = {};\nconst classNames = Object.keys(classifier.list.entities);\nfor (const name of classNames) {\n classes[name] = true;\n}\n")),(0,a.kt)("p",null,"That's it! That button will open a floating menu that will allow\nyou to create custom multi-filters that work even for custom\nproperty sets and quantity sets, including logical operators.\nTry them out in the example below, and check out more tutorials\nto bring your BIM apps to the next level!"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'BUI.Manager.init();\n\nconst 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\nconst floorSection = panel.querySelector(\n "bim-panel-section[name=\'Floors\']",\n) as BUI.PanelSection;\n\nconst categorySection = panel.querySelector(\n "bim-panel-section[name=\'Categories\']",\n) as BUI.PanelSection;\n\nfor (const name in storeys) {\n const panel = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n });\n floorSection.append(panel);\n}\n\nfor (const name in classes) {\n const checkbox = BUI.Component.create(() => {\n return BUI.html`\n \n \n `;\n });\n categorySection.append(checkbox);\n}\n')),(0,a.kt)("iframe",{src:"https://thatopen.github.io/engine_components/examples/Hider"}))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/fe22553b.6fb1ffc4.js b/build/assets/js/fe22553b.6fb1ffc4.js new file mode 100644 index 00000000..d75d576d --- /dev/null +++ b/build/assets/js/fe22553b.6fb1ffc4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7553],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>m});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=o.createContext({}),p=function(e){var t=o.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=p(e.components);return o.createElement(s.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},h=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),c=p(n),h=a,m=c["".concat(s,".").concat(h)]||c[h]||d[h]||r;return n?o.createElement(m,i(i({ref:t},u),{},{components:n})):o.createElement(m,i({ref:t},u))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,i=new Array(r);i[0]=h;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:a,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>s,default:()=>m,frontMatter:()=>l,metadata:()=>p,toc:()=>c});var o=n(7462),a=n(3366),r=(n(7294),n(3905)),i=["components"],l={sidebar_position:1},s="Getting started",p={unversionedId:"that-open-platform/getting-started",id:"that-open-platform/getting-started",title:"Getting started",description:"That Open Platform is a cloud app where we bring the features of our libraries to the next level! One of the things you will find in the platform is a free IFC viewer and editor that you can extend with your own custom tools. How cool is that? Let's see how to do that: \ud83d\udc47",source:"@site/docs/that-open-platform/getting-started.mdx",sourceDirName:"that-open-platform",slug:"/that-open-platform/getting-started",permalink:"/that-open-platform/getting-started",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Get involved",permalink:"/components/contributing"},next:{title:"Readme",permalink:"/api/"}},u={},c=[{value:"Extending the editor",id:"extending-the-editor",level:2}],d={toc:c},h="wrapper";function m(e){var t=e.components,n=(0,a.Z)(e,i);return(0,r.kt)(h,(0,o.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"getting-started"},"Getting started"),(0,r.kt)("p",null,"That Open Platform is a cloud app where we bring the features of our libraries to the next level! One of the things you will find in the platform is a free IFC viewer and editor that you can extend with your own custom tools. How cool is that? Let's see how to do that: \ud83d\udc47"),(0,r.kt)("h2",{id:"extending-the-editor"},"Extending the editor"),(0,r.kt)("p",null,"A cool thing about Tools is that you can upload them to That Open Platform to extend the online editor or make money with them in the store. Don't worry: this is so easy that you can put your components in the cloud in less than 2 minutes!"),(0,r.kt)("p",null,"First, you'll need to install the library that will set up a cloud tool project for you:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm i -g openbim-tools@latest\n")),(0,r.kt)("p",null,"Now, you can create a new tool by running the command:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"new-open-tool\n")),(0,r.kt)("p",null,"This will start a CLI app that will help you create a tool project. You just have to select which template you want to use and give it a name."),(0,r.kt)("admonition",{title:"Watch out!",type:"danger"},(0,r.kt)("p",{parentName:"admonition"},"The name must be a valid JS class name (e.g. it can't have spaces or start with a number). We recommend\nusing PascalCase as naming convention.")),(0,r.kt)("p",null,"A folder with your tool name will be created. You can open it with your favourite IDE and install all the dependencies like a normal web dev project:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm i\n")),(0,r.kt)("p",null,"Now, you can build it with the build command:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm run build\n")),(0,r.kt)("p",null,"And test it locally with the start command:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm run start\n")),(0,r.kt)("p",null,"Now, to upload it to That Open Platform, check out the ",(0,r.kt)("inlineCode",{parentName:"p"},"Tools")," tab in your dashboard. You just need to upload the .zip file generated in the dist folder of your app project. Then, you can check the"),(0,r.kt)("admonition",{title:"Check the index.json actions",type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"You need to define the name of the ",(0,r.kt)("inlineCode",{parentName:"p"},"Buttons")," defined in the ",(0,r.kt)("inlineCode",{parentName:"p"},"uiElement")," of your tool to be able to add them to the platform editor. Check how the basic template is build and make sure to keep that consistent when you create your own tools.")),(0,r.kt)("p",null,"Once your tool has been uploaded, simply open the editor and load them in a custom Tab. Easy, right? In the future, you'll be able to share this tools with other end users and programmers in the store and even make money out of it. \ud83d\ude80\ud83d\ude80\ud83d\ude80"))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/build/assets/js/main.5fa85e6c.js b/build/assets/js/main.5fa85e6c.js new file mode 100644 index 00000000..993dd2cd --- /dev/null +++ b/build/assets/js/main.5fa85e6c.js @@ -0,0 +1,2 @@ +/*! For license information please see main.5fa85e6c.js.LICENSE.txt */ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[179],{723:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(7294),a=n(7462),o=n(8356),i=n.n(o),l=n(6887);const s={"02b3ccc6":[function(){return n.e(440).then(n.bind(n,6419))},"@site/docs/api/interfaces/thatopen_components.CameraControllable.md",6419],"02cb068a":[function(){return n.e(9098).then(n.bind(n,2620))},"@site/docs/api/classes/thatopen_components_front.PostproductionRenderer.md",2620],"035e0bbb":[function(){return n.e(5269).then(n.bind(n,8923))},"@site/docs/Tutorials/Components/Core/OrthoPerspectiveCamera.mdx",8923],"070f01c0":[function(){return n.e(8092).then(n.bind(n,4736))},"@site/docs/api/classes/thatopen_components_front.Plans.md",4736],"072af5be":[function(){return n.e(9170).then(n.bind(n,1431))},"@site/docs/api/modules/thatopen_components_front.md",1431],"0849f8a0":[function(){return n.e(3659).then(n.bind(n,4586))},"@site/docs/api/classes/thatopen_components.Base.md",4586],"0d0787b6":[function(){return n.e(8509).then(n.bind(n,1831))},"@site/docs/api/interfaces/thatopen_components.Createable.md",1831],"0dcd76a4":[function(){return n.e(7116).then(n.bind(n,396))},"@site/docs/Tutorials/UserInterface/OBC/EntityAttributes.mdx",396],"0e384e19":[function(){return n.e(9671).then(n.bind(n,9881))},"@site/docs/intro.md",9881],"140c5f61":[function(){return n.e(3386).then(n.bind(n,6789))},"@site/docs/Tutorials/Components/Front/AngleMeasurement.mdx",6789],"14b2fcb7":[function(){return n.e(350).then(n.bind(n,6544))},"@site/docs/api/classes/thatopen_components.PlanMode.md",6544],"1567e004":[function(){return n.e(2238).then(n.bind(n,7745))},"@site/docs/api/classes/thatopen_components.Disposer.md",7745],17896441:[function(){return Promise.all([n.e(532),n.e(7918)]).then(n.bind(n,907))},"@theme/DocItem",907],"1be78505":[function(){return Promise.all([n.e(532),n.e(9514)]).then(n.bind(n,9963))},"@theme/DocPage",9963],"1c5bde81":[function(){return n.e(761).then(n.bind(n,8143))},"@site/docs/api/interfaces/thatopen_components.Hideable.md",8143],"232409b2":[function(){return n.e(5362).then(n.bind(n,1747))},"@site/docs/api/classes/thatopen_components.MeshCullerRenderer.md",1747],"23f0a572":[function(){return n.e(400).then(n.bind(n,7502))},"@site/docs/api/classes/thatopen_components.Event.md",7502],"26cef902":[function(){return n.e(8230).then(n.bind(n,6677))},"@site/docs/api/interfaces/thatopen_components.Resizeable.md",6677],"2a9a2072":[function(){return n.e(1860).then(n.bind(n,9859))},"@site/docs/Tutorials/Components/Core/BoundingBoxer.mdx",9859],"2aba4d5d":[function(){return n.e(282).then(n.bind(n,2019))},"@site/docs/Tutorials/Components/Core/Cullers.mdx",2019],"308c405f":[function(){return n.e(8491).then(n.bind(n,9842))},"@site/docs/Tutorials/Components/Core/IfcRelationsIndexer.mdx",9842],"35bc646f":[function(){return n.e(6635).then(n.bind(n,22))},"@site/docs/Tutorials/Components/Core/Clipper.mdx",22],"3834acf5":[function(){return n.e(984).then(n.bind(n,6983))},"@site/docs/api/classes/thatopen_components.FirstPersonMode.md",6983],"38ed86ac":[function(){return n.e(9926).then(n.bind(n,6083))},"@site/docs/api/interfaces/thatopen_components.Updateable.md",6083],"3eac639e":[function(){return n.e(8100).then(n.bind(n,9142))},"@site/docs/Tutorials/UserInterface/OBC/ClassificationsTree.mdx",9142],"416b2475":[function(){return n.e(8470).then(n.bind(n,584))},"@site/docs/api/classes/thatopen_components.IfcStreamingSettings.md",584],"44d0ab4a":[function(){return n.e(1764).then(n.bind(n,1382))},"@site/docs/api/classes/thatopen_components.Clipper.md",1382],"4bf8fd60":[function(){return n.e(8995).then(n.bind(n,5028))},"@site/docs/api/classes/thatopen_components.BaseWorldItem.md",5028],"5094df0e":[function(){return n.e(7621).then(n.bind(n,3263))},"@site/docs/components/tutorial-paths.md",3263],"519cde36":[function(){return n.e(6644).then(n.bind(n,3334))},"@site/docs/api/classes/thatopen_components.ProjectionManager.md",3334],"5251865f":[function(){return n.e(3156).then(n.bind(n,1449))},"@site/docs/api/interfaces/thatopen_components.NavigationMode.md",1449],"57f3dce9":[function(){return n.e(7027).then(n.bind(n,1207))},"@site/docs/api/classes/thatopen_fragments.Serializer.md",1207],"5a3844a3":[function(){return n.e(6162).then(n.bind(n,3121))},"@site/docs/api/classes/thatopen_components_front.Marker.md",3121],"5c7b714e":[function(){return n.e(4283).then(n.bind(n,2778))},"@site/docs/Tutorials/Components/Core/FragmentsManager.mdx",2778],"5e8c322a":[function(){return n.e(7597).then(n.bind(n,7926))},"@site/docs/api/index.md",7926],"5e9f5e1a":[function(){return Promise.resolve().then(n.bind(n,6809))},"@generated/docusaurus.config",6809],"60f3e948":[function(){return n.e(1513).then(n.bind(n,6850))},"@site/docs/Tutorials/Components/Core/MiniMap.mdx",6850],"63603fbd":[function(){return n.e(9763).then(n.bind(n,9257))},"@site/docs/components/contributing.md",9257],"63ea579c":[function(){return n.e(8648).then(n.bind(n,2242))},"@site/docs/api/modules/thatopen_components.md",2242],"6aecd34e":[function(){return n.e(5260).then(n.bind(n,7731))},"@site/docs/api/classes/thatopen_components_front.LengthMeasurement.md",7731],"6ff4b68b":[function(){return n.e(6015).then(n.bind(n,5825))},"@site/docs/api/classes/thatopen_components.BoundingBoxer.md",5825],"72d46929":[function(){return n.e(6811).then(n.bind(n,4774))},"@site/docs/Tutorials/Components/Core/Raycasters.mdx",4774],"733d79ef":[function(){return n.e(2720).then(n.bind(n,5666))},"@site/docs/api/classes/thatopen_components.SimpleCamera.md",5666],"746b65d1":[function(){return n.e(1625).then(n.bind(n,5271))},"@site/docs/api/classes/thatopen_components.PropertiesStreamingSettings.md",5271],"7887f5d5":[function(){return n.e(3893).then(n.bind(n,2193))},"@site/docs/api/classes/thatopen_components_front.ClipEdges.md",2193],"7cc95c1b":[function(){return n.e(9595).then(n.bind(n,6145))},"@site/docs/Tutorials/UserInterface/OBC/ElementProperties.mdx",6145],"7d516a78":[function(){return n.e(4847).then(n.bind(n,4590))},"@site/docs/Tutorials/Components/index.md",4590],"7f370fb4":[function(){return n.e(4591).then(n.bind(n,1531))},"@site/docs/Tutorials/Components/Front/EdgesClipper.mdx",1531],"8004d10c":[function(){return n.e(8892).then(n.t.bind(n,3769,19))},"C:\\Users\\anton\\Desktop\\code\\engine_docs\\.docusaurus\\docusaurus-plugin-content-docs\\default\\plugin-route-context-module-100.json",3769],"80bb5c14":[function(){return n.e(4125).then(n.bind(n,7493))},"@site/docs/Tutorials/Components/Front/PostproductionRenderer.mdx",7493],"82c425bb":[function(){return n.e(8604).then(n.bind(n,3106))},"@site/docs/components/getting-started.md",3106],"8368d781":[function(){return n.e(8985).then(n.bind(n,5400))},"@site/docs/api/classes/thatopen_components.FragmentsManager.md",5400],"87654e65":[function(){return n.e(8655).then(n.bind(n,2640))},"@site/docs/Tutorials/Components/Core/Worlds.mdx",2640],"8e79a5c7":[function(){return n.e(638).then(n.bind(n,6095))},"@site/docs/api/interfaces/thatopen_components.BVHGeometry.md",6095],"9064555a":[function(){return n.e(3738).then(n.bind(n,9889))},"@site/docs/api/classes/thatopen_components.IfcRelationsIndexer.md",9889],"935f2afb":[function(){return n.e(53).then(n.t.bind(n,1109,19))},"~docs/default/version-current-metadata-prop-751.json",1109],"98508be6":[function(){return n.e(3991).then(n.bind(n,1317))},"@site/docs/api/classes/thatopen_components.Cullers.md",1317],"9b7b7fda":[function(){return n.e(5499).then(n.bind(n,6715))},"@site/docs/api/classes/thatopen_components_front.EdgesPlane.md",6715],"9bd74671":[function(){return n.e(6061).then(n.bind(n,337))},"@site/docs/api/classes/thatopen_components.AsyncEvent.md",337],"9cc62e14":[function(){return n.e(3208).then(n.bind(n,8152))},"@site/docs/api/classes/thatopen_components.SimplePlane.md",8152],"9d7eea47":[function(){return n.e(3941).then(n.bind(n,1344))},"@site/docs/components/creating-components.md",1344],"9dd8a0d2":[function(){return n.e(7054).then(n.bind(n,7275))},"@site/src/pages/index.jsx",7275],"9f1bf482":[function(){return n.e(9311).then(n.bind(n,3564))},"@site/docs/Tutorials/UserInterface/Core/Component.mdx",3564],a19b4c2c:[function(){return n.e(372).then(n.bind(n,2970))},"@site/docs/api/classes/thatopen_components.IfcJsonExporter.md",2970],a599bc11:[function(){return n.e(835).then(n.bind(n,7852))},"@site/docs/Tutorials/Components/Core/IfcPropertiesTiler.mdx",7852],ac8bbf91:[function(){return n.e(5446).then(n.bind(n,9759))},"@site/docs/Tutorials/UserInterface/index.md",9759],bb95e244:[function(){return n.e(1160).then(n.bind(n,2648))},"@site/docs/api/interfaces/thatopen_components.Progress.md",2648],bbb18ae5:[function(){return n.e(9231).then(n.bind(n,4442))},"@site/docs/api/classes/thatopen_components.Components.md",4442],bf390c76:[function(){return n.e(5264).then(n.bind(n,8222))},"@site/docs/api/classes/thatopen_components.Component.md",8222],c1b3b982:[function(){return n.e(6812).then(n.bind(n,8045))},"@site/docs/Tutorials/Components/Front/AreaMeasurement.mdx",8045],c2bbc440:[function(){return n.e(3045).then(n.bind(n,8997))},"@site/docs/api/modules/thatopen_fragments.md",8997],c62bb28c:[function(){return n.e(5447).then(n.bind(n,9986))},"@site/docs/Tutorials/Components/Front/LengthMeasurement.mdx",9986],c6f50999:[function(){return n.e(9773).then(n.bind(n,5356))},"@site/docs/api/classes/thatopen_components.SimpleRenderer.md",5356],ca57013d:[function(){return n.e(4394).then(n.bind(n,1671))},"@site/docs/Tutorials/Components/Front/ShadowDropper.mdx",1671],cd5a87c7:[function(){return n.e(9065).then(n.bind(n,8542))},"@site/docs/api/classes/thatopen_components.SimpleScene.md",8542],d05ab5b9:[function(){return n.e(4646).then(n.t.bind(n,5745,19))},"C:\\Users\\anton\\Desktop\\code\\engine_docs\\.docusaurus\\docusaurus-plugin-content-pages\\default\\plugin-route-context-module-100.json",5745],d3dcb6ee:[function(){return n.e(8220).then(n.bind(n,8750))},"@site/docs/api/classes/thatopen_components.CullerRenderer.md",8750],d60cd624:[function(){return n.e(6631).then(n.bind(n,4232))},"@site/docs/api/interfaces/thatopen_components.Disposable.md",4232],d9bc4fdf:[function(){return n.e(155).then(n.bind(n,287))},"@site/docs/api/classes/thatopen_components.OrthoPerspectiveCamera.md",287],da19a474:[function(){return n.e(2154).then(n.bind(n,7765))},"@site/docs/Tutorials/Components/Front/IfcStreamer.mdx",7765],dc2a58ea:[function(){return n.e(4335).then(n.bind(n,711))},"@site/docs/Tutorials/Components/Core/Grids.mdx",711],e3702cd4:[function(){return n.e(2232).then(n.bind(n,186))},"@site/docs/components/clean-components-guide.md",186],e8a4ea3d:[function(){return n.e(7592).then(n.bind(n,5082))},"@site/docs/api/classes/thatopen_components_front.RendererWith2D.md",5082],f0d87bf4:[function(){return n.e(8553).then(n.bind(n,7673))},"@site/docs/Tutorials/Components/Core/IfcLoader.mdx",7673],f45379a9:[function(){return n.e(1842).then(n.bind(n,398))},"@site/docs/Tutorials/Components/Core/IfcGeometryTiler.mdx",398],f6aebfbf:[function(){return n.e(7306).then(n.bind(n,4440))},"@site/docs/api/modules.md",4440],f70643aa:[function(){return n.e(8046).then(n.bind(n,4726))},"@site/docs/Tutorials/UserInterface/OBC/ModelsList.mdx",4726],f77615d9:[function(){return n.e(4376).then(n.bind(n,4441))},"@site/docs/api/interfaces/thatopen_components.Configurable.md",4441],fa23a143:[function(){return n.e(7709).then(n.bind(n,7382))},"@site/docs/api/classes/thatopen_components.OrbitMode.md",7382],fba9713b:[function(){return n.e(3132).then(n.bind(n,8559))},"@site/docs/Tutorials/Components/Core/Hider.mdx",8559],fe22553b:[function(){return n.e(7553).then(n.bind(n,7872))},"@site/docs/that-open-platform/getting-started.mdx",7872]};function u(e){var t=e.error,n=e.retry,a=e.pastDelay;return t?r.createElement("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%"}},r.createElement("p",null,String(t)),r.createElement("div",null,r.createElement("button",{type:"button",onClick:n},"Retry"))):a?r.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},r.createElement("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"},r.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"22",r:"8"},r.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))):null}var c=n(9670),d=n(226);function p(e,t){if("*"===e)return i()({loading:u,loader:function(){return n.e(4972).then(n.bind(n,4972))},modules:["@theme/NotFound"],webpack:function(){return[4972]},render:function(e,t){var n=e.default;return r.createElement(d.z,{value:{plugin:{name:"native",id:"default"}}},r.createElement(n,t))}});var o=l[e+"-"+t],p={},f=[],m=[],h=(0,c.Z)(o);return Object.entries(h).forEach((function(e){var t=e[0],n=e[1],r=s[n];r&&(p[t]=r[0],f.push(r[1]),m.push(r[2]))})),i().Map({loading:u,loader:p,modules:f,webpack:function(){return m},render:function(t,n){var i=JSON.parse(JSON.stringify(o));Object.entries(t).forEach((function(t){var n=t[0],r=t[1],a=r.default;if(!a)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 a&&"function"!=typeof a||Object.keys(r).filter((function(e){return"default"!==e})).forEach((function(e){a[e]=r[e]}));var o=i,l=n.split(".");l.slice(0,-1).forEach((function(e){o=o[e]})),o[l[l.length-1]]=a}));var l=i.__comp;delete i.__comp;var s=i.__context;return delete i.__context,r.createElement(d.z,{value:s},r.createElement(l,(0,a.Z)({},i,n)))}})}const f=[{path:"/",component:p("/","cfc"),exact:!0},{path:"/",component:p("/","5a2"),routes:[{path:"/api/",component:p("/api/","093"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components_front.ClipEdges",component:p("/api/classes/thatopen_components_front.ClipEdges","4db"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components_front.EdgesPlane",component:p("/api/classes/thatopen_components_front.EdgesPlane","d87"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components_front.LengthMeasurement",component:p("/api/classes/thatopen_components_front.LengthMeasurement","a2d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components_front.Marker",component:p("/api/classes/thatopen_components_front.Marker","8a0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components_front.Plans",component:p("/api/classes/thatopen_components_front.Plans","0a9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components_front.PostproductionRenderer",component:p("/api/classes/thatopen_components_front.PostproductionRenderer","e35"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components_front.RendererWith2D",component:p("/api/classes/thatopen_components_front.RendererWith2D","01b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.AsyncEvent",component:p("/api/classes/thatopen_components.AsyncEvent","ce8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.Base",component:p("/api/classes/thatopen_components.Base","c54"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.BaseWorldItem",component:p("/api/classes/thatopen_components.BaseWorldItem","0af"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.BoundingBoxer",component:p("/api/classes/thatopen_components.BoundingBoxer","98f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.Clipper",component:p("/api/classes/thatopen_components.Clipper","133"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.Component",component:p("/api/classes/thatopen_components.Component","afe"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.Components",component:p("/api/classes/thatopen_components.Components","aa3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.CullerRenderer",component:p("/api/classes/thatopen_components.CullerRenderer","f3b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.Cullers",component:p("/api/classes/thatopen_components.Cullers","fca"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.Disposer",component:p("/api/classes/thatopen_components.Disposer","b5b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.Event",component:p("/api/classes/thatopen_components.Event","f8d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.FirstPersonMode",component:p("/api/classes/thatopen_components.FirstPersonMode","d2a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.FragmentsManager",component:p("/api/classes/thatopen_components.FragmentsManager","773"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.IfcJsonExporter",component:p("/api/classes/thatopen_components.IfcJsonExporter","ee1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.IfcRelationsIndexer",component:p("/api/classes/thatopen_components.IfcRelationsIndexer","9c5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.IfcStreamingSettings",component:p("/api/classes/thatopen_components.IfcStreamingSettings","dac"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.MeshCullerRenderer",component:p("/api/classes/thatopen_components.MeshCullerRenderer","579"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.OrbitMode",component:p("/api/classes/thatopen_components.OrbitMode","eff"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.OrthoPerspectiveCamera",component:p("/api/classes/thatopen_components.OrthoPerspectiveCamera","083"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.PlanMode",component:p("/api/classes/thatopen_components.PlanMode","d2f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.ProjectionManager",component:p("/api/classes/thatopen_components.ProjectionManager","beb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.PropertiesStreamingSettings",component:p("/api/classes/thatopen_components.PropertiesStreamingSettings","016"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.SimpleCamera",component:p("/api/classes/thatopen_components.SimpleCamera","93f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.SimplePlane",component:p("/api/classes/thatopen_components.SimplePlane","317"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.SimpleRenderer",component:p("/api/classes/thatopen_components.SimpleRenderer","dfc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_components.SimpleScene",component:p("/api/classes/thatopen_components.SimpleScene","d61"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/classes/thatopen_fragments.Serializer",component:p("/api/classes/thatopen_fragments.Serializer","2c0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/interfaces/thatopen_components.BVHGeometry",component:p("/api/interfaces/thatopen_components.BVHGeometry","211"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/interfaces/thatopen_components.CameraControllable",component:p("/api/interfaces/thatopen_components.CameraControllable","59a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/interfaces/thatopen_components.Configurable",component:p("/api/interfaces/thatopen_components.Configurable","e95"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/interfaces/thatopen_components.Createable",component:p("/api/interfaces/thatopen_components.Createable","4d2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/interfaces/thatopen_components.Disposable",component:p("/api/interfaces/thatopen_components.Disposable","329"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/interfaces/thatopen_components.Hideable",component:p("/api/interfaces/thatopen_components.Hideable","b05"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/interfaces/thatopen_components.NavigationMode",component:p("/api/interfaces/thatopen_components.NavigationMode","5f7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/interfaces/thatopen_components.Progress",component:p("/api/interfaces/thatopen_components.Progress","209"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/interfaces/thatopen_components.Resizeable",component:p("/api/interfaces/thatopen_components.Resizeable","432"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/interfaces/thatopen_components.Updateable",component:p("/api/interfaces/thatopen_components.Updateable","ed0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/modules",component:p("/api/modules","49b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/modules/thatopen_components",component:p("/api/modules/thatopen_components","c05"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/modules/thatopen_components_front",component:p("/api/modules/thatopen_components_front","386"),exact:!0,sidebar:"tutorialSidebar"},{path:"/api/modules/thatopen_fragments",component:p("/api/modules/thatopen_fragments","a42"),exact:!0,sidebar:"tutorialSidebar"},{path:"/components/clean-components-guide",component:p("/components/clean-components-guide","181"),exact:!0,sidebar:"tutorialSidebar"},{path:"/components/contributing",component:p("/components/contributing","6a1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/components/creating-components",component:p("/components/creating-components","bc7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/components/getting-started",component:p("/components/getting-started","8e9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/components/tutorial-paths",component:p("/components/tutorial-paths","97b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/intro",component:p("/intro","283"),exact:!0,sidebar:"tutorialSidebar"},{path:"/that-open-platform/getting-started",component:p("/that-open-platform/getting-started","80c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/",component:p("/Tutorials/Components/","e93"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/BoundingBoxer",component:p("/Tutorials/Components/Core/BoundingBoxer","256"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Clipper",component:p("/Tutorials/Components/Core/Clipper","395"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Cullers",component:p("/Tutorials/Components/Core/Cullers","475"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/FragmentsManager",component:p("/Tutorials/Components/Core/FragmentsManager","591"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Grids",component:p("/Tutorials/Components/Core/Grids","51a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Hider",component:p("/Tutorials/Components/Core/Hider","5fc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcGeometryTiler",component:p("/Tutorials/Components/Core/IfcGeometryTiler","d0c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcLoader",component:p("/Tutorials/Components/Core/IfcLoader","2d5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcPropertiesTiler",component:p("/Tutorials/Components/Core/IfcPropertiesTiler","65a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/IfcRelationsIndexer",component:p("/Tutorials/Components/Core/IfcRelationsIndexer","319"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/MiniMap",component:p("/Tutorials/Components/Core/MiniMap","0f2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/OrthoPerspectiveCamera",component:p("/Tutorials/Components/Core/OrthoPerspectiveCamera","259"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Raycasters",component:p("/Tutorials/Components/Core/Raycasters","e7b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Core/Worlds",component:p("/Tutorials/Components/Core/Worlds","3ad"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/AngleMeasurement",component:p("/Tutorials/Components/Front/AngleMeasurement","052"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/AreaMeasurement",component:p("/Tutorials/Components/Front/AreaMeasurement","1ac"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/EdgesClipper",component:p("/Tutorials/Components/Front/EdgesClipper","fa0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/IfcStreamer",component:p("/Tutorials/Components/Front/IfcStreamer","88f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/LengthMeasurement",component:p("/Tutorials/Components/Front/LengthMeasurement","b69"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/PostproductionRenderer",component:p("/Tutorials/Components/Front/PostproductionRenderer","1a3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/Components/Front/ShadowDropper",component:p("/Tutorials/Components/Front/ShadowDropper","19b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/",component:p("/Tutorials/UserInterface/","a3c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/Core/Component",component:p("/Tutorials/UserInterface/Core/Component","673"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/OBC/ClassificationsTree",component:p("/Tutorials/UserInterface/OBC/ClassificationsTree","e91"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/OBC/ElementProperties",component:p("/Tutorials/UserInterface/OBC/ElementProperties","d6c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/OBC/EntityAttributes",component:p("/Tutorials/UserInterface/OBC/EntityAttributes","d87"),exact:!0,sidebar:"tutorialSidebar"},{path:"/Tutorials/UserInterface/OBC/ModelsList",component:p("/Tutorials/UserInterface/OBC/ModelsList","c22"),exact:!0,sidebar:"tutorialSidebar"}]},{path:"*",component:p("*")}]},8934:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,t:()=>o});var r=n(7294),a=r.createContext(!1);function o(e){var t=e.children,n=(0,r.useState)(!1),o=n[0],i=n[1];return(0,r.useEffect)((function(){i(!0)}),[]),r.createElement(a.Provider,{value:o},t)}},6562:(e,t,n)=>{"use strict";var r=n(7294),a=n(3935),o=n(3727),i=n(405),l=n(412);const s=[n(2497),n(3310),n(8320),n(2295)];var u=n(723),c=n(6550),d=n(8790);const p={gradientBackground:"gradientBackground_W6vG",accentGradient:"accentGradient_xnKm","accent-movement":"accent-movement_uLvs",mainGradient:"mainGradient_BHIB","main-movement":"main-movement_tjJ8"};function f(e){var t=e.children;return r.createElement(r.Fragment,null,r.createElement(m,null),t)}function m(){return r.createElement("div",{className:p.gradientBackground},r.createElement(h,null),r.createElement(g,null))}function h(){return r.createElement("div",{className:p.accentGradient})}function g(){return r.createElement("div",{className:p.mainGradient})}function b(e){var t=e.children;return r.createElement(f,null,t)}var v=n(7462),y=n(5742),w=n(2263),k=n(4996),E=n(6668),S=n(1944),_=n(4711),C=n(9727),x=n(3320),T=n(8780),A=n(197);function P(){var e=(0,w.Z)().i18n,t=e.defaultLocale,n=e.localeConfigs,a=(0,_.l)();return r.createElement(y.Z,null,Object.entries(n).map((function(e){var t=e[0],n=e[1].htmlLang;return r.createElement("link",{key:t,rel:"alternate",href:a.createUrl({locale:t,fullyQualified:!0}),hrefLang:n})})),r.createElement("link",{rel:"alternate",href:a.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}))}function R(e){var t=e.permalink,n=(0,w.Z)().siteConfig.url,a=function(){var e=(0,w.Z)().siteConfig,t=e.url,n=e.baseUrl,r=e.trailingSlash,a=(0,c.TH)().pathname;return t+(0,T.applyTrailingSlash)((0,k.Z)(a),{trailingSlash:r,baseUrl:n})}(),o=t?""+n+t:a;return r.createElement(y.Z,null,r.createElement("meta",{property:"og:url",content:o}),r.createElement("link",{rel:"canonical",href:o}))}function L(){var e=(0,w.Z)().i18n.currentLocale,t=(0,E.L)(),n=t.metadata,a=t.image;return r.createElement(r.Fragment,null,r.createElement(y.Z,null,r.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),r.createElement("body",{className:C.h})),a&&r.createElement(S.d,{image:a}),r.createElement(R,null),r.createElement(P,null),r.createElement(A.Z,{tag:x.HX,locale:e}),r.createElement(y.Z,null,n.map((function(e,t){return r.createElement("meta",(0,v.Z)({key:t},e))}))))}var O=new Map;function I(e){if(O.has(e.pathname))return Object.assign({},e,{pathname:O.get(e.pathname)});if((0,d.f)(u.Z,e.pathname).some((function(e){return!0===e.route.exact})))return O.set(e.pathname,e.pathname),e;var t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return O.set(e.pathname,t),Object.assign({},e,{pathname:t})}var N=n(8934),M=n(8940),D=n(4578);function F(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r\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(/{"use strict";n.d(t,{_:()=>c,M:()=>d});var r=n(7294),a=n(6809);const o=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/","versions":[{"name":"current","label":"Next","isLast":true,"path":"/","mainDocId":"intro","docs":[{"id":"api/classes/thatopen_components_front.ClipEdges","path":"/api/classes/thatopen_components_front.ClipEdges","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components_front.EdgesPlane","path":"/api/classes/thatopen_components_front.EdgesPlane","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components_front.LengthMeasurement","path":"/api/classes/thatopen_components_front.LengthMeasurement","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components_front.Marker","path":"/api/classes/thatopen_components_front.Marker","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components_front.Plans","path":"/api/classes/thatopen_components_front.Plans","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components_front.PostproductionRenderer","path":"/api/classes/thatopen_components_front.PostproductionRenderer","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components_front.RendererWith2D","path":"/api/classes/thatopen_components_front.RendererWith2D","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.AsyncEvent","path":"/api/classes/thatopen_components.AsyncEvent","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.Base","path":"/api/classes/thatopen_components.Base","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.BaseWorldItem","path":"/api/classes/thatopen_components.BaseWorldItem","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.BoundingBoxer","path":"/api/classes/thatopen_components.BoundingBoxer","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.Clipper","path":"/api/classes/thatopen_components.Clipper","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.Component","path":"/api/classes/thatopen_components.Component","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.Components","path":"/api/classes/thatopen_components.Components","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.CullerRenderer","path":"/api/classes/thatopen_components.CullerRenderer","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.Cullers","path":"/api/classes/thatopen_components.Cullers","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.Disposer","path":"/api/classes/thatopen_components.Disposer","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.Event","path":"/api/classes/thatopen_components.Event","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.FirstPersonMode","path":"/api/classes/thatopen_components.FirstPersonMode","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.FragmentsManager","path":"/api/classes/thatopen_components.FragmentsManager","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.IfcJsonExporter","path":"/api/classes/thatopen_components.IfcJsonExporter","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.IfcRelationsIndexer","path":"/api/classes/thatopen_components.IfcRelationsIndexer","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.IfcStreamingSettings","path":"/api/classes/thatopen_components.IfcStreamingSettings","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.MeshCullerRenderer","path":"/api/classes/thatopen_components.MeshCullerRenderer","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.OrbitMode","path":"/api/classes/thatopen_components.OrbitMode","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.OrthoPerspectiveCamera","path":"/api/classes/thatopen_components.OrthoPerspectiveCamera","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.PlanMode","path":"/api/classes/thatopen_components.PlanMode","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.ProjectionManager","path":"/api/classes/thatopen_components.ProjectionManager","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.PropertiesStreamingSettings","path":"/api/classes/thatopen_components.PropertiesStreamingSettings","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.SimpleCamera","path":"/api/classes/thatopen_components.SimpleCamera","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.SimplePlane","path":"/api/classes/thatopen_components.SimplePlane","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.SimpleRenderer","path":"/api/classes/thatopen_components.SimpleRenderer","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_components.SimpleScene","path":"/api/classes/thatopen_components.SimpleScene","sidebar":"tutorialSidebar"},{"id":"api/classes/thatopen_fragments.Serializer","path":"/api/classes/thatopen_fragments.Serializer","sidebar":"tutorialSidebar"},{"id":"api/index","path":"/api/","sidebar":"tutorialSidebar"},{"id":"api/interfaces/thatopen_components.BVHGeometry","path":"/api/interfaces/thatopen_components.BVHGeometry","sidebar":"tutorialSidebar"},{"id":"api/interfaces/thatopen_components.CameraControllable","path":"/api/interfaces/thatopen_components.CameraControllable","sidebar":"tutorialSidebar"},{"id":"api/interfaces/thatopen_components.Configurable","path":"/api/interfaces/thatopen_components.Configurable","sidebar":"tutorialSidebar"},{"id":"api/interfaces/thatopen_components.Createable","path":"/api/interfaces/thatopen_components.Createable","sidebar":"tutorialSidebar"},{"id":"api/interfaces/thatopen_components.Disposable","path":"/api/interfaces/thatopen_components.Disposable","sidebar":"tutorialSidebar"},{"id":"api/interfaces/thatopen_components.Hideable","path":"/api/interfaces/thatopen_components.Hideable","sidebar":"tutorialSidebar"},{"id":"api/interfaces/thatopen_components.NavigationMode","path":"/api/interfaces/thatopen_components.NavigationMode","sidebar":"tutorialSidebar"},{"id":"api/interfaces/thatopen_components.Progress","path":"/api/interfaces/thatopen_components.Progress","sidebar":"tutorialSidebar"},{"id":"api/interfaces/thatopen_components.Resizeable","path":"/api/interfaces/thatopen_components.Resizeable","sidebar":"tutorialSidebar"},{"id":"api/interfaces/thatopen_components.Updateable","path":"/api/interfaces/thatopen_components.Updateable","sidebar":"tutorialSidebar"},{"id":"api/modules","path":"/api/modules","sidebar":"tutorialSidebar"},{"id":"api/modules/thatopen_components","path":"/api/modules/thatopen_components","sidebar":"tutorialSidebar"},{"id":"api/modules/thatopen_components_front","path":"/api/modules/thatopen_components_front","sidebar":"tutorialSidebar"},{"id":"api/modules/thatopen_fragments","path":"/api/modules/thatopen_fragments","sidebar":"tutorialSidebar"},{"id":"components/clean-components-guide","path":"/components/clean-components-guide","sidebar":"tutorialSidebar"},{"id":"components/contributing","path":"/components/contributing","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":"intro","path":"/intro","sidebar":"tutorialSidebar"},{"id":"that-open-platform/getting-started","path":"/that-open-platform/getting-started","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/BoundingBoxer","path":"/Tutorials/Components/Core/BoundingBoxer","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/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/IfcGeometryTiler","path":"/Tutorials/Components/Core/IfcGeometryTiler","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Core/IfcLoader","path":"/Tutorials/Components/Core/IfcLoader","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/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/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/EdgesClipper","path":"/Tutorials/Components/Front/EdgesClipper","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/PostproductionRenderer","path":"/Tutorials/Components/Front/PostproductionRenderer","sidebar":"tutorialSidebar"},{"id":"Tutorials/Components/Front/ShadowDropper","path":"/Tutorials/Components/Front/ShadowDropper","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/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"}],"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 l=n(7529);const s=JSON.parse('{"docusaurusVersion":"2.4.3","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"2.4.3"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"2.4.3"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"2.4.3"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"2.4.3"},"docusaurus-plugin-typedoc":{"type":"package","name":"docusaurus-plugin-typedoc","version":"0.20.2"}}}');var u={siteConfig:a.default,siteMetadata:s,globalData:o,i18n:i,codeTranslations:l},c=r.createContext(u);function d(e){var t=e.children;return r.createElement(c.Provider,{value:u},t)}},4763:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(4578),a=n(7294),o=n(412),i=n(5742),l=n(8780),s=n(7961);function u(e){var t=e.error,n=e.tryAgain;return a.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"}},a.createElement("h1",{style:{fontSize:"3rem"}},"This page crashed"),a.createElement("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"}},"Try again"),a.createElement(c,{error:t}))}function c(e){var t=e.error,n=(0,l.getErrorCausalChain)(t).map((function(e){return e.message})).join("\n\nCause:\n");return a.createElement("p",{style:{whiteSpace:"pre-wrap"}},n)}function d(e){var t=e.error,n=e.tryAgain;return a.createElement(f,{fallback:function(){return a.createElement(u,{error:t,tryAgain:n})}},a.createElement(i.Z,null,a.createElement("title",null,"Page Error")),a.createElement(s.Z,null,a.createElement(u,{error:t,tryAgain:n})))}var p=function(e){return a.createElement(d,e)},f=function(e){function t(t){var n;return(n=e.call(this,t)||this).state={error:null},n}(0,r.Z)(t,e);var n=t.prototype;return n.componentDidCatch=function(e){o.Z.canUseDOM&&this.setState({error:e})},n.render=function(){var e=this,t=this.props.children,n=this.state.error;if(n){var r,a={error:n,tryAgain:function(){return e.setState({error:null})}};return(null!=(r=this.props.fallback)?r:p)(a)}return null!=t?t:null},t}(a.Component)},412:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document;const a={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},5742:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(405);function o(e){return r.createElement(a.ql,e)}},9960:(e,t,n)=>{"use strict";n.d(t,{Z:()=>h});var r=n(7462),a=n(3366),o=n(7294),i=n(3727),l=n(8780),s=n(2263),u=n(3919),c=n(412),d=o.createContext({collectLink:function(){}});var p=n(4996),f=["isNavLink","to","href","activeClassName","isActive","data-noBrokenLinkCheck","autoAddBaseUrl"];function m(e,t){var n,m,h=e.isNavLink,g=e.to,b=e.href,v=e.activeClassName,y=e.isActive,w=e["data-noBrokenLinkCheck"],k=e.autoAddBaseUrl,E=void 0===k||k,S=(0,a.Z)(e,f),_=(0,s.Z)().siteConfig,C=_.trailingSlash,x=_.baseUrl,T=(0,p.C)().withBaseUrl,A=(0,o.useContext)(d),P=(0,o.useRef)(null);(0,o.useImperativeHandle)(t,(function(){return P.current}));var R=g||b;var L,O=(0,u.Z)(R),I=null==R?void 0:R.replace("pathname://",""),N=void 0!==I?(L=I,E&&function(e){return e.startsWith("/")}(L)?T(L):L):void 0;N&&O&&(N=(0,l.applyTrailingSlash)(N,{trailingSlash:C,baseUrl:x}));var M=(0,o.useRef)(!1),D=h?i.OL:i.rU,F=c.Z.canUseIntersectionObserver,B=(0,o.useRef)(),j=function(){M.current||null==N||(window.docusaurus.preload(N),M.current=!0)};(0,o.useEffect)((function(){return!F&&O&&null!=N&&window.docusaurus.prefetch(N),function(){F&&B.current&&B.current.disconnect()}}),[B,N,F,O]);var U=null!=(n=null==(m=N)?void 0:m.startsWith("#"))&&n,z=!N||!O||U;return z||w||A.collectLink(N),z?o.createElement("a",(0,r.Z)({ref:P,href:N},R&&!O&&{target:"_blank",rel:"noopener noreferrer"},S)):o.createElement(D,(0,r.Z)({},S,{onMouseEnter:j,onTouchStart:j,innerRef:function(e){P.current=e,F&&e&&O&&(B.current=new window.IntersectionObserver((function(t){t.forEach((function(t){e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(B.current.unobserve(e),B.current.disconnect(),null!=N&&window.docusaurus.prefetch(N))}))})),B.current.observe(e))},to:N},h&&{isActive:y,activeClassName:v}))}const h=o.forwardRef(m)},1875:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});const r=function(){return null}},5999:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s,I:()=>l});var r=n(7294);function a(e,t){var n=e.split(/(\{\w+\})/).map((function(e,n){if(n%2==1){var r=null==t?void 0:t[e.slice(1,-1)];if(void 0!==r)return r}return e}));return n.some((function(e){return(0,r.isValidElement)(e)}))?n.map((function(e,t){return(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e})).filter((function(e){return""!==e})):n.join("")}var o=n(7529);function i(e){var t,n,r=e.id,a=e.message;if(void 0===r&&void 0===a)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return null!=(t=null!=(n=o[null!=r?r:a])?n:a)?t:r}function l(e,t){return a(i({message:e.message,id:e.id}),t)}function s(e){var t=e.children,n=e.id,o=e.values;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");var l=i({message:t,id:n});return r.createElement(r.Fragment,null,a(l,o))}},9935:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});var r="default"},3919:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>a,b:()=>r})},4996:(e,t,n)=>{"use strict";n.d(t,{C:()=>i,Z:()=>l});var r=n(7294),a=n(2263),o=n(3919);function i(){var e=(0,a.Z)().siteConfig,t=e.baseUrl,n=e.url,i=(0,r.useCallback)((function(e,r){return function(e,t,n,r){var a=void 0===r?{}:r,i=a.forcePrependBaseUrl,l=void 0!==i&&i,s=a.absolute,u=void 0!==s&&s;if(!n||n.startsWith("#")||(0,o.b)(n))return n;if(l)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;var c=n.startsWith(t)?n:t+n.replace(/^\//,"");return u?e+c:c}(n,t,e,r)}),[n,t]);return{withBaseUrl:i}}function l(e,t){return void 0===t&&(t={}),(0,i().withBaseUrl)(e,t)}},2263:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8940);function o(){return(0,r.useContext)(a._)}},2389:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8934);function o(){return(0,r.useContext)(a._)}},9670:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var r=function(e){return"object"==typeof e&&!!e&&Object.keys(e).length>0};function a(e){var t={};return function e(n,a){Object.entries(n).forEach((function(n){var o=n[0],i=n[1],l=a?a+"."+o:o;r(i)?e(i,l):t[l]=i}))}(e),t}},226:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,z:()=>o});var r=n(7294),a=r.createContext(null);function o(e){var t=e.children,n=e.value,o=r.useContext(a),i=(0,r.useMemo)((function(){return function(e){var t=e.parent,n=e.value;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}var r=Object.assign({},t.data,null==n?void 0:n.data);return{plugin:t.plugin,data:r}}({parent:o,value:n})}),[o,n]);return r.createElement(a.Provider,{value:i},t)}},143:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>h,gA:()=>p,_r:()=>c,Jo:()=>g,zh:()=>d,yW:()=>m,gB:()=>f});var r=n(6550),a=n(2263),o=n(9935);function i(e,t){void 0===t&&(t={});var n=(0,a.Z)().globalData[e];if(!n&&t.failfast)throw new Error('Docusaurus plugin global data not found for "'+e+'" plugin.');return n}var l=function(e){return e.versions.find((function(e){return e.isLast}))};function s(e,t){var n,a,o=function(e,t){var n=l(e);return[].concat(e.versions.filter((function(e){return e!==n})),[n]).find((function(e){return!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})}))}(e,t),i=null==o?void 0:o.docs.find((function(e){return!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})}));return{activeVersion:o,activeDoc:i,alternateDocVersions:i?(n=i.id,a={},e.versions.forEach((function(e){e.docs.forEach((function(t){t.id===n&&(a[e.name]=t)}))})),a):{}}}var u={},c=function(){var e;return null!=(e=i("docusaurus-plugin-content-docs"))?e:u},d=function(e){return function(e,t,n){void 0===t&&(t=o.m),void 0===n&&(n={});var r=i(e),a=null==r?void 0:r[t];if(!a&&n.failfast)throw new Error('Docusaurus plugin global data not found for "'+e+'" plugin with id "'+t+'".');return a}("docusaurus-plugin-content-docs",e,{failfast:!0})};function p(e){return void 0===e&&(e={}),function(e,t,n){void 0===n&&(n={});var a=Object.entries(e).sort((function(e,t){return t[1].path.localeCompare(e[1].path)})).find((function(e){var n=e[1];return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&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((function(e){return e.path})).join(", "));return o}(c(),(0,r.TH)().pathname,e)}function f(e){return d(e).versions}function m(e){var t=d(e);return l(t)}function h(e){return s(d(e),(0,r.TH)().pathname)}function g(e){return function(e,t){var n=l(e);return{latestDocSuggestion:s(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(d(e),(0,r.TH)().pathname)}},8320:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});var r=n(4865),a=n.n(r);a().configure({showSpinner:!1});const o={onRouteUpdate:function(e){var t=e.location,n=e.previousLocation;if(n&&t.pathname!==n.pathname){var r=window.setTimeout((function(){a().start()}),200);return function(){return window.clearTimeout(r)}}},onRouteDidUpdate:function(){a().done()}}},3310:(e,t,n)=>{"use strict";n.r(t);var r,a,o=n(7410),i=n(6809);r=o.Z,a=i.default.themeConfig.prism.additionalLanguages,globalThis.Prism=r,a.forEach((function(e){n(6726)("./prism-"+e)})),delete globalThis.Prism},9471:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294);const a={iconExternalLink:"iconExternalLink_nPIU"};function o(e){var t=e.width,n=void 0===t?13.5:t,o=e.height,i=void 0===o?13.5:o;return r.createElement("svg",{width:n,height:i,"aria-hidden":"true",viewBox:"0 0 24 24",className:a.iconExternalLink},r.createElement("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"}))}},7961:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Rt});var r=n(7294),a=n(6010),o=n(4763),i=n(1944),l=n(7462),s=n(6550),u=n(5999),c=n(5936),d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){var e=(0,r.useRef)(null),t=(0,s.k6)().action,n=(0,r.useCallback)((function(e){e.preventDefault();var t,n=null!=(t=document.querySelector("main:first-of-type"))?t:document.getElementById(d);n&&p(n)}),[]);return(0,c.S)((function(n){var r=n.location;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}var m=(0,u.I)({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){var t,n=null!=(t=e.children)?t:m,a=f(),o=a.containerRef,i=a.onClick;return r.createElement("div",{ref:o,role:"region","aria-label":m},r.createElement("a",(0,l.Z)({},e,{href:"#"+d,onClick:i}),n))}var g=n(5281),b=n(9727);const v={skipToContent:"skipToContent_fXgn"};function y(){return r.createElement(h,{className:v.skipToContent})}var w=n(6668),k=n(9689),E=n(3366),S=["width","height","color","strokeWidth","className"];function _(e){var t=e.width,n=void 0===t?21:t,a=e.height,o=void 0===a?21:a,i=e.color,s=void 0===i?"currentColor":i,u=e.strokeWidth,c=void 0===u?1.2:u,d=(e.className,(0,E.Z)(e,S));return r.createElement("svg",(0,l.Z)({viewBox:"0 0 15 15",width:n,height:o},d),r.createElement("g",{stroke:s,strokeWidth:c},r.createElement("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})))}const C={closeButton:"closeButton_CVFx"};function x(e){return r.createElement("button",(0,l.Z)({type:"button","aria-label":(0,u.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"})},e,{className:(0,a.Z)("clean-btn close",C.closeButton,e.className)}),r.createElement(_,{width:14,height:14,strokeWidth:3.1}))}const T={content:"content_knG7"};function A(e){var t=(0,w.L)().announcementBar.content;return r.createElement("div",(0,l.Z)({},e,{className:(0,a.Z)(T.content,e.className),dangerouslySetInnerHTML:{__html:t}}))}const P={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function R(){var e=(0,w.L)().announcementBar,t=(0,k.nT)(),n=t.isActive,a=t.close;if(!n)return null;var o=e.backgroundColor,i=e.textColor,l=e.isCloseable;return r.createElement("div",{className:P.announcementBar,style:{backgroundColor:o,color:i},role:"banner"},l&&r.createElement("div",{className:P.announcementBarPlaceholder}),r.createElement(A,{className:P.announcementBarContent}),l&&r.createElement(x,{onClick:a,className:P.announcementBarClose}))}var L=n(2961),O=n(2466);var I=n(9688),N=n(3102),M=r.createContext(null);function D(e){var t,n,a,o,i,l,s,u=e.children,c=(t=(0,L.e)(),n=(0,N.HY)(),a=(0,r.useState)(!1),o=a[0],i=a[1],l=null!==n.component,s=(0,I.D9)(l),(0,r.useEffect)((function(){l&&!s&&i(!0)}),[l,s]),(0,r.useEffect)((function(){l?t.shown||i(!0):i(!1)}),[t.shown,l]),(0,r.useMemo)((function(){return[o,i]}),[o]));return r.createElement(M.Provider,{value:c},u)}function F(e){if(e.component){var t=e.component;return r.createElement(t,e.props)}}function B(){var e=(0,r.useContext)(M);if(!e)throw new I.i6("NavbarSecondaryMenuDisplayProvider");var t=e[0],n=e[1],a=(0,r.useCallback)((function(){return n(!1)}),[n]),o=(0,N.HY)();return(0,r.useMemo)((function(){return{shown:t,hide:a,content:F(o)}}),[a,o,t])}function j(e){var t=e.header,n=e.primaryMenu,o=e.secondaryMenu,i=B().shown;return r.createElement("div",{className:"navbar-sidebar"},t,r.createElement("div",{className:(0,a.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":i})},r.createElement("div",{className:"navbar-sidebar__item menu"},n),r.createElement("div",{className:"navbar-sidebar__item menu"},o)))}var U=n(2949),z=n(2389);function H(e){return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:24,height:24},e),r.createElement("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 G(e){return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:24,height:24},e),r.createElement("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 Z={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function $(e){var t=e.className,n=e.buttonClassName,o=e.value,i=e.onChange,l=(0,z.Z)(),s=(0,u.I)({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"===o?(0,u.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,u.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return r.createElement("div",{className:(0,a.Z)(Z.toggle,t)},r.createElement("button",{className:(0,a.Z)("clean-btn",Z.toggleButton,!l&&Z.toggleButtonDisabled,n),type:"button",onClick:function(){return i("dark"===o?"light":"dark")},disabled:!l,title:s,"aria-label":s,"aria-live":"polite"},r.createElement(H,{className:(0,a.Z)(Z.toggleIcon,Z.lightToggleIcon)}),r.createElement(G,{className:(0,a.Z)(Z.toggleIcon,Z.darkToggleIcon)})))}const q=r.memo($),W={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function V(e){var t=e.className,n=(0,w.L)().navbar.style,a=(0,w.L)().colorMode.disableSwitch,o=(0,U.I)(),i=o.colorMode,l=o.setColorMode;return a?null:r.createElement(q,{className:t,buttonClassName:"dark"===n?W.darkNavbarColorModeToggle:void 0,value:i,onChange:l})}var Y=n(1327);function K(){return r.createElement(Y.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Q(){var e=(0,L.e)();return r.createElement("button",{type:"button","aria-label":(0,u.I)({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:function(){return e.toggle()}},r.createElement(_,{color:"var(--ifm-color-emphasis-600)"}))}function X(){return r.createElement("div",{className:"navbar-sidebar__brand"},r.createElement(K,null),r.createElement(V,{className:"margin-right--md"}),r.createElement(Q,null))}var J=n(9960),ee=n(4996),te=n(3919);function ne(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var re=n(9471),ae=["activeBasePath","activeBaseRegex","to","href","label","html","isDropdownLink","prependBaseUrlToHref"];function oe(e){var t=e.activeBasePath,n=e.activeBaseRegex,a=e.to,o=e.href,i=e.label,s=e.html,u=e.isDropdownLink,c=e.prependBaseUrlToHref,d=(0,E.Z)(e,ae),p=(0,ee.Z)(a),f=(0,ee.Z)(t),m=(0,ee.Z)(o,{forcePrependBaseUrl:!0}),h=i&&o&&!(0,te.Z)(o),g=s?{dangerouslySetInnerHTML:{__html:s}}:{children:r.createElement(r.Fragment,null,i,h&&r.createElement(re.Z,u&&{width:12,height:12}))};return o?r.createElement(J.Z,(0,l.Z)({href:c?m:o},d,g)):r.createElement(J.Z,(0,l.Z)({to:p,isNavLink:!0},(t||n)&&{isActive:function(e,t){return n?ne(n,t.pathname):t.pathname.startsWith(f)}},d,g))}var ie=["className","isDropdownItem"],le=["className","isDropdownItem"],se=["mobile","position"];function ue(e){var t=e.className,n=e.isDropdownItem,o=void 0!==n&&n,i=(0,E.Z)(e,ie),s=r.createElement(oe,(0,l.Z)({className:(0,a.Z)(o?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:o},i));return o?r.createElement("li",null,s):s}function ce(e){var t=e.className,n=(e.isDropdownItem,(0,E.Z)(e,le));return r.createElement("li",{className:"menu__list-item"},r.createElement(oe,(0,l.Z)({className:(0,a.Z)("menu__link",t)},n)))}function de(e){var t,n=e.mobile,a=void 0!==n&&n,o=(e.position,(0,E.Z)(e,se)),i=a?ce:ue;return r.createElement(i,(0,l.Z)({},o,{activeClassName:null!=(t=o.activeClassName)?t:a?"menu__link--active":"navbar__link--active"}))}var pe=n(6043),fe=n(8596),me=n(2263);var he=["items","position","className","onClick"],ge=["items","className","position","onClick"],be=["mobile"];function ve(e,t){return e.some((function(e){return function(e,t){return!!(0,fe.Mg)(e.to,t)||!!ne(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)}))}function ye(e){var t,n=e.items,o=e.position,i=e.className,s=(e.onClick,(0,E.Z)(e,he)),u=(0,r.useRef)(null),c=(0,r.useState)(!1),d=c[0],p=c[1];return(0,r.useEffect)((function(){var e=function(e){u.current&&!u.current.contains(e.target)&&p(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[u]),r.createElement("div",{ref:u,className:(0,a.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===o,"dropdown--show":d})},r.createElement(oe,(0,l.Z)({"aria-haspopup":"true","aria-expanded":d,role:"button",href:s.to?void 0:"#",className:(0,a.Z)("navbar__link",i)},s,{onClick:s.to?void 0:function(e){return e.preventDefault()},onKeyDown:function(e){"Enter"===e.key&&(e.preventDefault(),p(!d))}}),null!=(t=s.children)?t:s.label),r.createElement("ul",{className:"dropdown__menu"},n.map((function(e,t){return r.createElement(Ue,(0,l.Z)({isDropdownItem:!0,activeClassName:"dropdown__link--active"},e,{key:t}))}))))}function we(e){var t,n,o=e.items,i=e.className,u=(e.position,e.onClick),c=(0,E.Z)(e,ge),d=(n=(0,me.Z)().siteConfig.baseUrl,(0,s.TH)().pathname.replace(n,"/")),p=ve(o,d),f=(0,pe.u)({initialState:function(){return!p}}),m=f.collapsed,h=f.toggleCollapsed,g=f.setCollapsed;return(0,r.useEffect)((function(){p&&g(!p)}),[d,p,g]),r.createElement("li",{className:(0,a.Z)("menu__list-item",{"menu__list-item--collapsed":m})},r.createElement(oe,(0,l.Z)({role:"button",className:(0,a.Z)("menu__link menu__link--sublist menu__link--sublist-caret",i)},c,{onClick:function(e){e.preventDefault(),h()}}),null!=(t=c.children)?t:c.label),r.createElement(pe.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:m},o.map((function(e,t){return r.createElement(Ue,(0,l.Z)({mobile:!0,isDropdownItem:!0,onClick:u,activeClassName:"menu__link--active"},e,{key:t}))}))))}function ke(e){var t=e.mobile,n=void 0!==t&&t,a=(0,E.Z)(e,be),o=n?we:ye;return r.createElement(o,a)}var Ee=n(4711),Se=["width","height"];function _e(e){var t=e.width,n=void 0===t?20:t,a=e.height,o=void 0===a?20:a,i=(0,E.Z)(e,Se);return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:n,height:o,"aria-hidden":!0},i),r.createElement("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 Ce="iconLanguage_nlXk";var xe=["mobile","dropdownItemsBefore","dropdownItemsAfter"];var Te=n(1875);const Ae={searchBox:"searchBox_ZlJk"};function Pe(e){var t=e.children,n=e.className;return r.createElement("div",{className:(0,a.Z)(n,Ae.searchBox)},t)}var Re=n(143),Le=n(8425),Oe=["docId","label","docsPluginId"];var Ie=["sidebarId","label","docsPluginId"];var Ne=["label","to","docsPluginId"];var Me=n(373),De=["mobile","docsPluginId","dropdownActiveClassDisabled","dropdownItemsBefore","dropdownItemsAfter"],Fe=function(e){return e.docs.find((function(t){return t.id===e.mainDocId}))};const Be={default:de,localeDropdown:function(e){var t=e.mobile,n=e.dropdownItemsBefore,a=e.dropdownItemsAfter,o=(0,E.Z)(e,xe),i=(0,me.Z)().i18n,c=i.currentLocale,d=i.locales,p=i.localeConfigs,f=(0,Ee.l)(),m=(0,s.TH)(),h=m.search,g=m.hash,b=d.map((function(e){var n=""+("pathname://"+f.createUrl({locale:e,fullyQualified:!1}))+h+g;return{label:p[e].label,lang:p[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===c?t?"menu__link--active":"dropdown__link--active":""}})),v=[].concat(n,b,a),y=t?(0,u.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):p[c].label;return r.createElement(ke,(0,l.Z)({},o,{mobile:t,label:r.createElement(r.Fragment,null,r.createElement(_e,{className:Ce}),y),items:v}))},search:function(e){var t=e.mobile,n=e.className;return t?null:r.createElement(Pe,{className:n},r.createElement(Te.Z,null))},dropdown:ke,html:function(e){var t=e.value,n=e.className,o=e.mobile,i=void 0!==o&&o,l=e.isDropdownItem,s=void 0!==l&&l,u=s?"li":"div";return r.createElement(u,{className:(0,a.Z)({navbar__item:!i&&!s,"menu__list-item":i},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){var t=e.docId,n=e.label,a=e.docsPluginId,o=(0,E.Z)(e,Oe),i=(0,Re.Iw)(a).activeDoc,s=(0,Le.vY)(t,a);return null===s?null:r.createElement(de,(0,l.Z)({exact:!0},o,{isActive:function(){return(null==i?void 0:i.path)===s.path||!(null==i||!i.sidebar)&&i.sidebar===s.sidebar},label:null!=n?n:s.id,to:s.path}))},docSidebar:function(e){var t=e.sidebarId,n=e.label,a=e.docsPluginId,o=(0,E.Z)(e,Ie),i=(0,Re.Iw)(a).activeDoc,s=(0,Le.oz)(t,a).link;if(!s)throw new Error('DocSidebarNavbarItem: Sidebar with ID "'+t+"\" doesn't have anything to be linked to.");return r.createElement(de,(0,l.Z)({exact:!0},o,{isActive:function(){return(null==i?void 0:i.sidebar)===t},label:null!=n?n:s.label,to:s.path}))},docsVersion:function(e){var t=e.label,n=e.to,a=e.docsPluginId,o=(0,E.Z)(e,Ne),i=(0,Le.lO)(a)[0],s=null!=t?t:i.label,u=null!=n?n:function(e){return e.docs.find((function(t){return t.id===e.mainDocId}))}(i).path;return r.createElement(de,(0,l.Z)({},o,{label:s,to:u}))},docsVersionDropdown:function(e){var t=e.mobile,n=e.docsPluginId,a=e.dropdownActiveClassDisabled,o=e.dropdownItemsBefore,i=e.dropdownItemsAfter,c=(0,E.Z)(e,De),d=(0,s.TH)(),p=d.search,f=d.hash,m=(0,Re.Iw)(n),h=(0,Re.gB)(n),g=(0,Me.J)(n).savePreferredVersionName,b=h.map((function(e){var t,n=null!=(t=m.alternateDocVersions[e.name])?t:Fe(e);return{label:e.label,to:""+n.path+p+f,isActive:function(){return e===m.activeVersion},onClick:function(){return g(e.name)}}})),v=[].concat(o,b,i),y=(0,Le.lO)(n)[0],w=t&&v.length>1?(0,u.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):y.label,k=t&&v.length>1?void 0:Fe(y).path;return v.length<=1?r.createElement(de,(0,l.Z)({},c,{mobile:t,label:w,to:k,isActive:a?function(){return!1}:void 0})):r.createElement(ke,(0,l.Z)({},c,{mobile:t,label:w,to:k,items:v,isActive:a?function(){return!1}:void 0}))}};var je=["type"];function Ue(e){var t=e.type,n=(0,E.Z)(e,je),a=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=Be[a];if(!o)throw new Error('No NavbarItem component found for type "'+t+'".');return r.createElement(o,n)}function ze(){var e=(0,L.e)(),t=(0,w.L)().navbar.items;return r.createElement("ul",{className:"menu__list"},t.map((function(t,n){return r.createElement(Ue,(0,l.Z)({mobile:!0},t,{onClick:function(){return e.toggle()},key:n}))})))}function He(e){return r.createElement("button",(0,l.Z)({},e,{type:"button",className:"clean-btn navbar-sidebar__back"}),r.createElement(u.Z,{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)"},"\u2190 Back to main menu"))}function Ge(){var e=0===(0,w.L)().navbar.items.length,t=B();return r.createElement(r.Fragment,null,!e&&r.createElement(He,{onClick:function(){return t.hide()}}),t.content)}function Ze(){var e,t=(0,L.e)();return void 0===(e=t.shown)&&(e=!0),(0,r.useEffect)((function(){return document.body.style.overflow=e?"hidden":"visible",function(){document.body.style.overflow="visible"}}),[e]),t.shouldRender?r.createElement(j,{header:r.createElement(X,null),primaryMenu:r.createElement(ze,null),secondaryMenu:r.createElement(Ge,null)}):null}const $e={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function qe(e){return r.createElement("div",(0,l.Z)({role:"presentation"},e,{className:(0,a.Z)("navbar-sidebar__backdrop",e.className)}))}function We(e){var t=e.children,n=(0,w.L)().navbar,o=n.hideOnScroll,i=n.style,l=(0,L.e)(),s=function(e){var t=(0,r.useState)(e),n=t[0],a=t[1],o=(0,r.useRef)(!1),i=(0,r.useRef)(0),l=(0,r.useCallback)((function(e){null!==e&&(i.current=e.getBoundingClientRect().height)}),[]);return(0,O.RF)((function(t,n){var r=t.scrollY;if(e)if(r=l?a(!1):r+u0&&r.createElement(bt,{links:n}),logo:a&&r.createElement(kt,{logo:a}),copyright:t&&r.createElement(Et,{copyright:t})})}const Ct=r.memo(_t);var xt=(0,I.Qc)([U.S,k.pl,O.OC,Me.L5,i.VC,function(e){var t=e.children;return r.createElement(N.n2,null,r.createElement(L.M,null,r.createElement(D,null,t)))}]);function Tt(e){var t=e.children;return r.createElement(xt,null,t)}function At(e){var t=e.error,n=e.tryAgain;return r.createElement("main",{className:"container margin-vert--xl"},r.createElement("div",{className:"row"},r.createElement("div",{className:"col col--6 col--offset-3"},r.createElement("h1",{className:"hero__title"},r.createElement(u.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed"},"This page crashed.")),r.createElement("div",{className:"margin-vert--lg"},r.createElement(Qe,{onClick:n,className:"button button--primary shadow--lw"})),r.createElement("hr",null),r.createElement("div",{className:"margin-vert--md"},r.createElement(Xe,{error:t})))))}const Pt={mainWrapper:"mainWrapper_z2l0"};function Rt(e){var t=e.children,n=e.noFooter,l=e.wrapperClassName,s=e.title,u=e.description;return(0,b.t)(),r.createElement(Tt,null,r.createElement(i.d,{title:s,description:u}),r.createElement(y,null),r.createElement(R,null),r.createElement(st,null),r.createElement("div",{id:d,className:(0,a.Z)(g.k.wrapper.main,Pt.mainWrapper,l)},r.createElement(o.Z,{fallback:function(e){return r.createElement(At,e)}},t)),!n&&r.createElement(Ct,null))}},1327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(7462),a=n(3366),o=n(7294),i=n(9960),l=n(4996),s=n(2263),u=n(6668),c=n(941),d=["imageClassName","titleClassName"];function p(e){var t=e.logo,n=e.alt,r=e.imageClassName,a={light:(0,l.Z)(t.src),dark:(0,l.Z)(t.srcDark||t.src)},i=o.createElement(c.Z,{className:t.className,sources:a,height:t.height,width:t.width,alt:n,style:t.style});return r?o.createElement("div",{className:r},i):i}function f(e){var t,n=(0,s.Z)().siteConfig.title,c=(0,u.L)().navbar,f=c.title,m=c.logo,h=e.imageClassName,g=e.titleClassName,b=(0,a.Z)(e,d),v=(0,l.Z)((null==m?void 0:m.href)||"/"),y=f?"":n,w=null!=(t=null==m?void 0:m.alt)?t:y;return o.createElement(i.Z,(0,r.Z)({to:v},b,(null==m?void 0:m.target)&&{target:m.target}),m&&o.createElement(p,{logo:m,alt:w,imageClassName:h}),null!=f&&o.createElement("b",{className:g},f))}},197:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(5742);function o(e){var t=e.locale,n=e.version,o=e.tag,i=t;return r.createElement(a.Z,null,t&&r.createElement("meta",{name:"docusaurus_locale",content:t}),n&&r.createElement("meta",{name:"docusaurus_version",content:n}),o&&r.createElement("meta",{name:"docusaurus_tag",content:o}),i&&r.createElement("meta",{name:"docsearch:language",content:i}),n&&r.createElement("meta",{name:"docsearch:version",content:n}),o&&r.createElement("meta",{name:"docsearch:docusaurus_tag",content:o}))}},941:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d});var r=n(7462),a=n(3366),o=n(7294),i=n(6010),l=n(2389),s=n(2949);const u={themedImage:"themedImage_ToTc","themedImage--light":"themedImage--light_HNdA","themedImage--dark":"themedImage--dark_i4oU"};var c=["sources","className","alt"];function d(e){var t=(0,l.Z)(),n=(0,s.I)().colorMode,d=e.sources,p=e.className,f=e.alt,m=(0,a.Z)(e,c),h=t?"dark"===n?["dark"]:["light"]:["light","dark"];return o.createElement(o.Fragment,null,h.map((function(e){return o.createElement("img",(0,r.Z)({key:e,src:d[e],alt:f,className:(0,i.Z)(u.themedImage,u["themedImage--"+e],p)},m))})))}},6043:(e,t,n)=>{"use strict";n.d(t,{u:()=>d,z:()=>y});var r=n(7462),a=n(3366),o=n(7294),i=n(412),l=n(1442),s=["collapsed"],u=["lazy"],c="ease-in-out";function d(e){var t=e.initialState,n=(0,o.useState)(null!=t&&t),r=n[0],a=n[1],i=(0,o.useCallback)((function(){a((function(e){return!e}))}),[]);return{collapsed:r,setCollapsed:a,toggleCollapsed:i}}var p={display:"none",overflow:"hidden",height:"0px"},f={display:"block",overflow:"visible",height:"auto"};function m(e,t){var n=t?p:f;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function h(e){var t=e.collapsibleRef,n=e.collapsed,r=e.animation,a=(0,o.useRef)(!1);(0,o.useEffect)((function(){var e,o=t.current;function i(){var e,t,n=o.scrollHeight,a=null!=(e=null==r?void 0:r.duration)?e:function(e){if((0,l.n)())return 1;var t=e/36;return Math.round(10*(4+15*Math.pow(t,.25)+t/5))}(n);return{transition:"height "+a+"ms "+(null!=(t=null==r?void 0:r.easing)?t:c),height:n+"px"}}function s(){var e=i();o.style.transition=e.transition,o.style.height=e.height}if(!a.current)return m(o,n),void(a.current=!0);return o.style.willChange="height",e=requestAnimationFrame((function(){n?(s(),requestAnimationFrame((function(){o.style.height=p.height,o.style.overflow=p.overflow}))):(o.style.display="block",requestAnimationFrame((function(){s()})))})),function(){return cancelAnimationFrame(e)}}),[t,n,r])}function g(e){if(!i.Z.canUseDOM)return e?p:f}function b(e){var t=e.as,n=void 0===t?"div":t,r=e.collapsed,a=e.children,i=e.animation,l=e.onCollapseTransitionEnd,s=e.className,u=e.disableSSRStyle,c=(0,o.useRef)(null);return h({collapsibleRef:c,collapsed:r,animation:i}),o.createElement(n,{ref:c,style:u?void 0:g(r),onTransitionEnd:function(e){"height"===e.propertyName&&(m(c.current,r),null==l||l(r))},className:s},a)}function v(e){var t=e.collapsed,n=(0,a.Z)(e,s),i=(0,o.useState)(!t),l=i[0],u=i[1],c=(0,o.useState)(t),d=c[0],p=c[1];return(0,o.useLayoutEffect)((function(){t||u(!0)}),[t]),(0,o.useLayoutEffect)((function(){l&&p(t)}),[l,t]),l?o.createElement(b,(0,r.Z)({},n,{collapsed:d})):null}function y(e){var t=e.lazy,n=(0,a.Z)(e,u),r=t?v:b;return o.createElement(r,n)}},9689:(e,t,n)=>{"use strict";n.d(t,{nT:()=>m,pl:()=>f});var r=n(7294),a=n(2389),o=n(12),i=n(9688),l=n(6668),s=(0,o.WA)("docusaurus.announcement.dismiss"),u=(0,o.WA)("docusaurus.announcement.id"),c=function(){return"true"===s.get()},d=function(e){return s.set(String(e))},p=r.createContext(null);function f(e){var t=e.children,n=function(){var e=(0,l.L)().announcementBar,t=(0,a.Z)(),n=(0,r.useState)((function(){return!!t&&c()})),o=n[0],i=n[1];(0,r.useEffect)((function(){i(c())}),[]);var s=(0,r.useCallback)((function(){d(!0),i(!0)}),[]);return(0,r.useEffect)((function(){if(e){var t=e.id,n=u.get();"annoucement-bar"===n&&(n="announcement-bar");var r=t!==n;u.set(t),r&&d(!1),!r&&c()||i(!1)}}),[e]),(0,r.useMemo)((function(){return{isActive:!!e&&!o,close:s}}),[e,o,s])}();return r.createElement(p.Provider,{value:n},t)}function m(){var e=(0,r.useContext)(p);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},2949:(e,t,n)=>{"use strict";n.d(t,{I:()=>g,S:()=>h});var r=n(7294),a=n(412),o=n(9688),i=n(12),l=n(6668),s=r.createContext(void 0),u="theme",c=(0,i.WA)(u),d={light:"light",dark:"dark"},p=function(e){return e===d.dark?d.dark:d.light},f=function(e){return a.Z.canUseDOM?p(document.documentElement.getAttribute("data-theme")):p(e)},m=function(e){c.set(p(e))};function h(e){var t=e.children,n=function(){var e=(0,l.L)().colorMode,t=e.defaultMode,n=e.disableSwitch,a=e.respectPrefersColorScheme,o=(0,r.useState)(f(t)),i=o[0],s=o[1];(0,r.useEffect)((function(){n&&c.del()}),[n]);var h=(0,r.useCallback)((function(e,n){void 0===n&&(n={});var r=n.persist,o=void 0===r||r;e?(s(e),o&&m(e)):(s(a?window.matchMedia("(prefers-color-scheme: dark)").matches?d.dark:d.light:t),c.del())}),[a,t]);(0,r.useEffect)((function(){document.documentElement.setAttribute("data-theme",p(i))}),[i]),(0,r.useEffect)((function(){if(!n){var e=function(e){if(e.key===u){var t=c.get();null!==t&&h(p(t))}};return window.addEventListener("storage",e),function(){return window.removeEventListener("storage",e)}}}),[n,h]);var g=(0,r.useRef)(!1);return(0,r.useEffect)((function(){if(!n||a){var e=window.matchMedia("(prefers-color-scheme: dark)"),t=function(){window.matchMedia("print").matches||g.current?g.current=window.matchMedia("print").matches:h(null)};return e.addListener(t),function(){return e.removeListener(t)}}}),[h,n,a]),(0,r.useMemo)((function(){return{colorMode:i,setColorMode:h,get isDarkTheme(){return i===d.dark},setLightTheme:function(){h(d.light)},setDarkTheme:function(){h(d.dark)}}}),[i,h])}();return r.createElement(s.Provider,{value:n},t)}function g(){var e=(0,r.useContext)(s);if(null==e)throw new o.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},373:(e,t,n)=>{"use strict";n.d(t,{J:()=>v,L5:()=>g});var r=n(7294),a=n(143),o=n(9935),i=n(6668),l=n(8425),s=n(9688),u=n(12),c=function(e){return"docs-preferred-version-"+e},d={save:function(e,t,n){(0,u.WA)(c(e),{persistence:t}).set(n)},read:function(e,t){return(0,u.WA)(c(e),{persistence:t}).get()},clear:function(e,t){(0,u.WA)(c(e),{persistence:t}).del()}},p=function(e){return Object.fromEntries(e.map((function(e){return[e,{preferredVersionName:null}]})))};var f=r.createContext(null);function m(){var e=(0,a._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,r.useMemo)((function(){return Object.keys(e)}),[e]),o=(0,r.useState)((function(){return p(n)})),l=o[0],s=o[1];return(0,r.useEffect)((function(){s(function(e){var t=e.pluginIds,n=e.versionPersistence,r=e.allDocsData;return Object.fromEntries(t.map((function(e){return[e,(t=e,a=d.read(t,n),r[t].versions.some((function(e){return e.name===a}))?{preferredVersionName:a}:(d.clear(t,n),{preferredVersionName:null}))];var t,a})))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]),[l,(0,r.useMemo)((function(){return{savePreferredVersion:function(e,n){d.save(e,t,n),s((function(t){var r;return Object.assign({},t,((r={})[e]={preferredVersionName:n},r))}))}}}),[t])]}function h(e){var t=e.children,n=m();return r.createElement(f.Provider,{value:n},t)}function g(e){var t=e.children;return l.cE?r.createElement(h,null,t):r.createElement(r.Fragment,null,t)}function b(){var e=(0,r.useContext)(f);if(!e)throw new s.i6("DocsPreferredVersionContextProvider");return e}function v(e){var t;void 0===e&&(e=o.m);var n=(0,a.zh)(e),i=b(),l=i[0],s=i[1],u=l[e].preferredVersionName;return{preferredVersion:null!=(t=n.versions.find((function(e){return e.name===u})))?t:null,savePreferredVersionName:(0,r.useCallback)((function(t){s.savePreferredVersion(e,t)}),[s,e])}}},1116:(e,t,n)=>{"use strict";n.d(t,{V:()=>s,b:()=>l});var r=n(7294),a=n(9688),o=Symbol("EmptyContext"),i=r.createContext(o);function l(e){var t=e.children,n=e.name,a=e.items,o=(0,r.useMemo)((function(){return n&&a?{name:n,items:a}:null}),[n,a]);return r.createElement(i.Provider,{value:o},t)}function s(){var e=(0,r.useContext)(i);if(e===o)throw new a.i6("DocsSidebarProvider");return e}},2961:(e,t,n)=>{"use strict";n.d(t,{M:()=>p,e:()=>f});var r=n(7294),a=n(3102),o=n(7524),i=n(6550),l=(n(1688),n(9688));function s(e){!function(e){var t=(0,i.k6)(),n=(0,l.zX)(e);(0,r.useEffect)((function(){return t.block((function(e,t){return n(e,t)}))}),[t,n])}((function(t,n){if("POP"===n)return e(t,n)}))}var u=n(6668),c=r.createContext(void 0);function d(){var e,t=(e=(0,a.HY)(),0===(0,u.L)().navbar.items.length&&!e.component),n=(0,o.i)(),i=!t&&"mobile"===n,l=(0,r.useState)(!1),c=l[0],d=l[1];s((function(){if(c)return d(!1),!1}));var p=(0,r.useCallback)((function(){d((function(e){return!e}))}),[]);return(0,r.useEffect)((function(){"desktop"===n&&d(!1)}),[n]),(0,r.useMemo)((function(){return{disabled:t,shouldRender:i,toggle:p,shown:c}}),[t,i,p,c])}function p(e){var t=e.children,n=d();return r.createElement(c.Provider,{value:n},t)}function f(){var e=r.useContext(c);if(void 0===e)throw new l.i6("NavbarMobileSidebarProvider");return e}},3102:(e,t,n)=>{"use strict";n.d(t,{HY:()=>l,Zo:()=>s,n2:()=>i});var r=n(7294),a=n(9688),o=r.createContext(null);function i(e){var t=e.children,n=(0,r.useState)({component:null,props:null});return r.createElement(o.Provider,{value:n},t)}function l(){var e=(0,r.useContext)(o);if(!e)throw new a.i6("NavbarSecondaryMenuContentProvider");return e[0]}function s(e){var t=e.component,n=e.props,i=(0,r.useContext)(o);if(!i)throw new a.i6("NavbarSecondaryMenuContentProvider");var l=i[1],s=(0,a.Ql)(n);return(0,r.useEffect)((function(){l({component:t,props:s})}),[l,t,s]),(0,r.useEffect)((function(){return function(){return l({component:null,props:null})}}),[l]),null}},9727:(e,t,n)=>{"use strict";n.d(t,{h:()=>a,t:()=>o});var r=n(7294),a="navigation-with-keyboard";function o(){(0,r.useEffect)((function(){function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),function(){document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},7524:(e,t,n)=>{"use strict";n.d(t,{i:()=>u});var r=n(7294),a=n(412),o={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function l(){return a.Z.canUseDOM?window.innerWidth>i?o.desktop:o.mobile:o.ssr}var s=!1;function u(){var e=(0,r.useState)((function(){return s?"ssr":l()})),t=e[0],n=e[1];return(0,r.useEffect)((function(){function e(){n(l())}var t=s?window.setTimeout(e,1e3):void 0;return window.addEventListener("resize",e),function(){window.removeEventListener("resize",e),clearTimeout(t)}}),[]),t}},5281:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});var r={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",admonitionType:function(e){return"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:function(e){return"theme-doc-sidebar-item-category-level-"+e},docSidebarItemLinkLevel:function(e){return"theme-doc-sidebar-item-link-level-"+e}},blog:{}}},1442:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>r})},8425:(e,t,n)=>{"use strict";function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n=e.length?{done:!0}:{done:!1,value:e[a++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}n.d(t,{Wl:()=>m,_F:()=>b,cE:()=>f,hI:()=>S,lO:()=>w,vY:()=>E,oz:()=>k,s1:()=>y});var o=n(7294),i=n(6550),l=n(8790),s=n(143),u=n(373),c=n(1116);function d(e){return Array.from(new Set(e))}var p=n(8596),f=!!s._r;function m(e){if(e.href)return e.href;for(var t,n=a(e.items);!(t=n()).done;){var r=t.value;if("link"===r.type)return r.href;if("category"===r.type){var o=m(r);if(o)return o}}}var h=function(e,t){return void 0!==e&&(0,p.Mg)(e,t)},g=function(e,t){return e.some((function(e){return b(e,t)}))};function b(e,t){return"link"===e.type?h(e.href,t):"category"===e.type&&(h(e.href,t)||g(e.items,t))}function v(e){var t=e.sidebarItems,n=e.pathname,r=e.onlyCategories,o=void 0!==r&&r,i=[];return function e(t){for(var r,l=a(t);!(r=l()).done;){var s=r.value;if("category"===s.type&&((0,p.Mg)(s.href,n)||e(s.items))||"link"===s.type&&(0,p.Mg)(s.href,n))return o&&"category"!==s.type||i.unshift(s),!0}return!1}(t),i}function y(){var e,t=(0,c.V)(),n=(0,i.TH)().pathname;return!1!==(null==(e=(0,s.gA)())?void 0:e.pluginData.breadcrumbs)&&t?v({sidebarItems:t.items,pathname:n}):null}function w(e){var t=(0,s.Iw)(e).activeVersion,n=(0,u.J)(e).preferredVersion,r=(0,s.yW)(e);return(0,o.useMemo)((function(){return d([t,n,r].filter(Boolean))}),[t,n,r])}function k(e,t){var n=w(t);return(0,o.useMemo)((function(){var t=n.flatMap((function(e){return e.sidebars?Object.entries(e.sidebars):[]})),r=t.find((function(t){return t[0]===e}));if(!r)throw new Error("Can't find any sidebar with id \""+e+'" in version'+(n.length>1?"s":"")+" "+n.map((function(e){return e.name})).join(", ")+'".\nAvailable sidebar ids are:\n- '+t.map((function(e){return e[0]})).join("\n- "));return r[1]}),[e,n])}function E(e,t){var n=w(t);return(0,o.useMemo)((function(){var t=n.flatMap((function(e){return e.docs})),r=t.find((function(t){return t.id===e}));if(!r){if(n.flatMap((function(e){return 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((function(e){return e.name})).join(", ")+'".\nAvailable doc ids are:\n- '+d(t.map((function(e){return e.id}))).join("\n- "))}return r}),[e,n])}function S(e){var t=e.route,n=e.versionMetadata,r=(0,i.TH)(),a=t.routes,o=a.find((function(e){return(0,i.LX)(r.pathname,e)}));if(!o)return null;var s=o.sidebar,u=s?n.docsSidebars[s]:void 0;return{docElement:(0,l.H)(a),sidebarName:s,sidebarItems:u}}},1944:(e,t,n)=>{"use strict";n.d(t,{FG:()=>p,d:()=>c,VC:()=>f});var r=n(7294),a=n(6010),o=n(5742),i=n(226);function l(){var e=r.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var s=n(4996),u=n(2263);function c(e){var t=e.title,n=e.description,a=e.keywords,i=e.image,l=e.children,c=function(e){var t=(0,u.Z)().siteConfig,n=t.title,r=t.titleDelimiter;return null!=e&&e.trim().length?e.trim()+" "+r+" "+n:n}(t),d=(0,s.C)().withBaseUrl,p=i?d(i,{absolute:!0}):void 0;return r.createElement(o.Z,null,t&&r.createElement("title",null,c),t&&r.createElement("meta",{property:"og:title",content:c}),n&&r.createElement("meta",{name:"description",content:n}),n&&r.createElement("meta",{property:"og:description",content:n}),a&&r.createElement("meta",{name:"keywords",content:Array.isArray(a)?a.join(","):a}),p&&r.createElement("meta",{property:"og:image",content:p}),p&&r.createElement("meta",{name:"twitter:image",content:p}),l)}var d=r.createContext(void 0);function p(e){var t=e.className,n=e.children,i=r.useContext(d),l=(0,a.Z)(i,t);return r.createElement(d.Provider,{value:l},r.createElement(o.Z,null,r.createElement("html",{className:l})),n)}function f(e){var t=e.children,n=l(),o="plugin-"+n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,""),i="plugin-id-"+n.plugin.id;return r.createElement(p,{className:(0,a.Z)(o,i)},t)}},9688:(e,t,n)=>{"use strict";n.d(t,{i6:()=>f,Qc:()=>h,zX:()=>d,D9:()=>p,Ql:()=>m});var r=n(6528),a=n(4578);function o(e){return o=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},o(e)}var i=n(9611);function l(e,t,n){return l=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}()?Reflect.construct.bind():function(e,t,n){var r=[null];r.push.apply(r,t);var a=new(Function.bind.apply(e,r));return n&&(0,i.Z)(a,n.prototype),a},l.apply(null,arguments)}function s(e){var t="function"==typeof Map?new Map:void 0;return s=function(e){if(null===e||!function(e){try{return-1!==Function.toString.call(e).indexOf("[native code]")}catch(t){return"function"==typeof e}}(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return l(e,arguments,o(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),(0,i.Z)(n,e)},s(e)}var u=n(7294),c=n(412).Z.canUseDOM?u.useLayoutEffect:u.useEffect;function d(e){var t=(0,u.useRef)(e);return c((function(){t.current=e}),[e]),(0,u.useCallback)((function(){return t.current.apply(t,arguments)}),[])}function p(e){var t=(0,u.useRef)();return c((function(){t.current=e})),t.current}var f=function(e){function t(t,n){var a,o,i;return(i=e.call(this)||this).name="ReactContextError",i.message="Hook "+(null!=(a=null==(o=i.stack)||null==(o=o.split("\n")[1])||null==(o=o.match((0,r.Z)(/at (?:\w+\.)?(\w+)/,{name:1})))?void 0:o.groups.name)?a:"")+" is called outside the <"+t+">. "+(null!=n?n:""),i}return(0,a.Z)(t,e),t}(s(Error));function m(e){var t=Object.entries(e);return t.sort((function(e,t){return e[0].localeCompare(t[0])})),(0,u.useMemo)((function(){return e}),t.flat())}function h(e){return function(t){var n=t.children;return u.createElement(u.Fragment,null,e.reduceRight((function(e,t){return u.createElement(t,null,e)}),n))}}},8596:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>l});var r=n(7294),a=n(723),o=n(2263);function i(e,t){var n=function(e){var t;return null==(t=!e||e.endsWith("/")?e:e+"/")?void 0:t.toLowerCase()};return n(e)===n(t)}function l(){var e=(0,o.Z)().siteConfig.baseUrl;return(0,r.useMemo)((function(){return function(e){var t=e.baseUrl;function n(e){return e.path===t&&!0===e.exact}function r(e){return e.path===t&&!e.exact}return function e(t){if(0!==t.length)return t.find(n)||e(t.filter(r).flatMap((function(e){var t;return null!=(t=e.routes)?t:[]})))}(e.routes)}({routes:a.Z,baseUrl:e})}),[e])}},2466:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>p,OC:()=>s,RF:()=>d});var r=n(7294),a=n(412),o=n(2389),i=n(9688);var l=r.createContext(void 0);function s(e){var t,n=e.children,a=(t=(0,r.useRef)(!0),(0,r.useMemo)((function(){return{scrollEventsEnabledRef:t,enableScrollEvents:function(){t.current=!0},disableScrollEvents:function(){t.current=!1}}}),[]));return r.createElement(l.Provider,{value:a},n)}function u(){var e=(0,r.useContext)(l);if(null==e)throw new i.i6("ScrollControllerProvider");return e}var c=function(){return a.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null};function d(e,t){void 0===t&&(t=[]);var n=u().scrollEventsEnabledRef,a=(0,r.useRef)(c()),o=(0,i.zX)(e);(0,r.useEffect)((function(){var e=function(){if(n.current){var e=c();o(e,a.current),a.current=e}},t={passive:!0};return e(),window.addEventListener("scroll",e,t),function(){return window.removeEventListener("scroll",e,t)}}),[o,n].concat(t))}function p(){var e=(0,r.useRef)(null),t=(0,o.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:function(n){e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),function(){}}(n):function(e){var t=null,n=document.documentElement.scrollTop>e;return function r(){var a=document.documentElement.scrollTop;(n&&a>e||!n&&a{"use strict";n.d(t,{HX:()=>r,os:()=>a});n(2263);var r="default";function a(e,t){return"docs-"+e+"-"+t}},12:(e,t,n)=>{"use strict";n.d(t,{WA:()=>s});n(7294),n(1688);var r="localStorage";function a(e){var t=e.key,n=e.oldValue,r=e.newValue,a=e.storage;if(n!==r){var o=document.createEvent("StorageEvent");o.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,a),window.dispatchEvent(o)}}function o(e){if(void 0===e&&(e=r),"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,i||(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),i=!0),null}var t}var i=!1;var l={get:function(){return null},set:function(){},del:function(){},listen:function(){return function(){}}};function s(e,t){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}}(e);var n=o(null==t?void 0:t.persistence);return null===n?l:{get:function(){try{return n.getItem(e)}catch(t){return console.error("Docusaurus storage error, can't get key="+e,t),null}},set:function(t){try{var r=n.getItem(e);n.setItem(e,t),a({key:e,oldValue:r,newValue:t,storage:n})}catch(o){console.error("Docusaurus storage error, can't set "+e+"="+t,o)}},del:function(){try{var t=n.getItem(e);n.removeItem(e),a({key:e,oldValue:t,newValue:null,storage:n})}catch(r){console.error("Docusaurus storage error, can't delete key="+e,r)}},listen:function(t){try{var r=function(r){r.storageArea===n&&r.key===e&&t(r)};return window.addEventListener("storage",r),function(){return window.removeEventListener("storage",r)}}catch(a){return console.error("Docusaurus storage error, can't listen for changes of key="+e,a),function(){}}}}}},4711:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var r=n(2263),a=n(6550),o=n(8780);function i(){var e=(0,r.Z)(),t=e.siteConfig,n=t.baseUrl,i=t.url,l=t.trailingSlash,s=e.i18n,u=s.defaultLocale,c=s.currentLocale,d=(0,a.TH)().pathname,p=(0,o.applyTrailingSlash)(d,{trailingSlash:l,baseUrl:n}),f=c===u?n:n.replace("/"+c+"/","/"),m=p.replace(n,"");return{createUrl:function(e){var t=e.locale;return""+(e.fullyQualified?i:"")+function(e){return e===u?""+f:""+f+e+"/"}(t)+m}}}},5936:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var r=n(7294),a=n(6550),o=n(9688);function i(e){var t=(0,a.TH)(),n=(0,o.D9)(t),i=(0,o.zX)(e);(0,r.useEffect)((function(){n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},6668:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(2263);function a(){return(0,r.Z)().siteConfig.themeConfig}},8802:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n=t.trailingSlash,r=t.baseUrl;if(e.startsWith("#"))return e;if(void 0===n)return e;var a,o=e.split(/[#?]/)[0],i="/"===o||o===r?o:(a=o,n?function(e){return e.endsWith("/")?e:e+"/"}(a):function(e){return e.endsWith("/")?e.slice(0,-1):e}(a));return e.replace(o,i)}},4143:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t].concat(e(t.cause)):[t]}},8780:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var a=n(8802);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(a).default}});var o=n(4143);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return o.getErrorCausalChain}})},6010:(e,t,n)=>{"use strict";function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;ta});const a=function(){for(var e,t,n=0,a="";n{"use strict";n.d(t,{lX:()=>S,q_:()=>P,ob:()=>h,PP:()=>L,Ep:()=>m,Hp:()=>g});var r=n(7462);function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r=0;p--){var f=i[p];"."===f?o(i,p):".."===f?(o(i,p),d++):d&&(o(i,p),d--)}if(!u)for(;d--;d)i.unshift("..");!u||""===i[0]||i[0]&&a(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};function l(e){return e.valueOf?e.valueOf():Object.prototype.valueOf.call(e)}const s=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,r){return e(t,n[r])}));if("object"==typeof t||"object"==typeof n){var r=l(t),a=l(n);return r!==t||a!==n?e(r,a):Object.keys(Object.assign({},t,n)).every((function(r){return e(t[r],n[r])}))}return!1};var u=n(8776);function c(e){return"/"===e.charAt(0)?e:"/"+e}function d(e){return"/"===e.charAt(0)?e.substr(1):e}function p(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,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function h(e,t,n,a){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),o.state=t):(void 0===(o=(0,r.Z)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=i(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function g(e,t){return e.pathname===t.pathname&&e.search===t.search&&e.hash===t.hash&&e.key===t.key&&s(e.state,t.state)}function b(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;rt?n.splice(t,n.length-t,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=h(e,t,p(),w.location);c.confirmTransitionTo(a,r,n,(function(e){e&&(w.entries[w.index]=a,d({action:r,location:a}))}))},go:y,goBack:function(){y(-1)},goForward:function(){y(1)},canGo:function(e){var t=w.index+e;return t>=0&&t{"use strict";var r=n(9864),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={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},l={};function s(e){return r.isMemo(e)?i:l[e.$$typeof]||a}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var u=Object.defineProperty,c=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var a=f(n);a&&a!==m&&e(t,a,r)}var i=c(n);d&&(i=i.concat(d(n)));for(var l=s(t),h=s(n),g=0;g{"use strict";e.exports=function(e,t,n,r,a,o,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[n,r,a,o,i,l],c=0;(s=new Error(t.replace(/%s/g,(function(){return u[c++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},2497:(e,t,n)=>{"use strict";n.r(t)},2295:(e,t,n)=>{"use strict";n.r(t)},4865:function(e,t,n){var r,a;r=function(){var e,t,n={version:"0.2.0"},r=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 a(e,t,n){return en?n:e}function o(e){return 100*(-1+e)}function i(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,r.minimum,1),n.status=1===e?null:e;var o=n.render(!t),u=o.querySelector(r.barSelector),c=r.speed,d=r.easing;return o.offsetWidth,l((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(u,i(e,c,d)),1===e?(s(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){s(o,{transition:"all "+c+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),c)}),c)):setTimeout(t,c)})),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())}),r.trickleSpeed)};return r.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)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.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");c(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var a,i=t.querySelector(r.barSelector),l=e?"-100":o(n.status||0),u=document.querySelector(r.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&f(a),u!=document.body&&c(u,"nprogress-custom-parent"),u.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.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 l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=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 r(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function o(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&o(e,n,r);else o(e,a[1],a[2])}}();function u(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function c(e,t){var n=p(e),r=n+t;u(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);u(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},7418:e=>{"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(a){return!1}}()?Object.assign:function(e,a){for(var o,i,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),s=1;s{"use strict";n.d(t,{Z:()=>o});var r=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);S+=E.value.length,E=E.next){var _=E.value;if(t.length>e.length)return;if(!(_ instanceof a)){var C,x=1;if(v){if(!(C=o(k,S,e,b))||C.index>=e.length)break;var T=C.index,A=C.index+C[0].length,P=S;for(P+=E.value.length;T>=P;)P+=(E=E.next).value.length;if(S=P-=E.value.length,E.value instanceof a)continue;for(var R=E;R!==t.tail&&(Pd.reach&&(d.reach=N);var M=E.prev;if(O&&(M=s(t,M,O),S+=O.length),u(t,M,x),E=s(t,M,new a(p,g?r.tokenize(L,g):L,y,L)),I&&s(t,E,I),x>1){var D={cause:p+","+m,reach:N};i(e,t,n,E.prev,S,D),d&&D.reach>d.reach&&(d.reach=D.reach)}}}}}}function l(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var r=t.next,a={value:n,prev:t,next:r};return t.next=a,r.prev=a,e.length++,a}function u(e,t,n){for(var r=t.next,a=0;a"+o.content+""},r}(),a=r;r.default=r,a.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.languages.markup.doctype.inside["internal-subset"].inside=a.languages.markup,a.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(a.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:a.languages[t]},n.cdata=/^$/i;var r={"included-cdata":{pattern://i,inside:n}};r["language-"+t]={pattern:/[\s\S]+/,inside:a.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:r},a.languages.insertBefore("markup","cdata",o)}}),Object.defineProperty(a.languages.markup.tag,"addAttribute",{value:function(e,t){a.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:a.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.xml=a.languages.extend("markup",{}),a.languages.ssml=a.languages.xml,a.languages.atom=a.languages.xml,a.languages.rss=a.languages.xml,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},r={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:r},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:r},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:r.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:r.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var a=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=r.variable[1].inside,i=0;i]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},a.languages.c=a.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),a.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),a.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},a.languages.c.string],char:a.languages.c.char,comment:a.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:a.languages.c}}}}),a.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete a.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(a),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(a),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var r={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},a={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:r,number:a,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:r,number:a})}(a),a.languages.javascript=a.languages.extend("clike",{"class-name":[a.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),a.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,a.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:a.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:a.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:a.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:a.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:a.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),a.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),a.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),a.languages.markup&&(a.languages.markup.tag.addInlined("script","javascript"),a.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),a.languages.js=a.languages.javascript,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(a),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",a=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),o=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return"(?:"+a+"|"+o+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(o),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(a),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+a+o+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+o+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},s=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(a),a.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:a.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},a.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n0)){var l=p(/^\{$/,/^\}$/);if(-1===l)continue;for(var s=n;s=0&&f(u,"variable-input")}}}}function c(e){return t[n+e]}function d(e,t){t=t||0;for(var n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,a=r.inside["interpolation-punctuation"],o=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function s(t,n,r){var a={code:t,grammar:n,language:r};return e.hooks.run("before-tokenize",a),a.tokens=e.tokenize(a.code,a.grammar),e.hooks.run("after-tokenize",a),a.tokens}function u(t){var n={};n["interpolation-punctuation"]=a;var o=e.tokenize(t,n);if(3===o.length){var i=[1,1];i.push.apply(i,s(o[1],e.languages.javascript,"javascript")),o.splice.apply(o,i)}return new e.Token("interpolation",o,r.alias,t)}function c(t,n,r){var a=e.tokenize(t,{interpolation:{pattern:RegExp(o),lookbehind:!0}}),i=0,c={},d=s(a.map((function(e){if("string"==typeof e)return e;for(var n,a=e.content;-1!==t.indexOf(n=l(i++,r)););return c[n]=a,n})).join(""),n,r),p=Object.keys(c);return i=0,function e(t){for(var n=0;n=p.length)return;var r=t[n];if("string"==typeof r||"string"==typeof r.content){var a=p[i],o="string"==typeof r?r:r.content,l=o.indexOf(a);if(-1!==l){++i;var s=o.substring(0,l),d=u(c[a]),f=o.substring(l+a.length),m=[];if(s&&m.push(s),m.push(d),f){var h=[f];e(h),m.push.apply(m,h)}"string"==typeof r?(t.splice.apply(t,[n,1].concat(m)),n+=m.length-1):r.content=m}}else{var g=r.content;Array.isArray(g)?e(g):e([g])}}}(d),new e.Token(r,d,"language-"+r,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var d={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function p(e){return"string"==typeof e?e:Array.isArray(e)?e.map(p).join(""):p(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in d&&function t(n){for(var r=0,a=n.length;r]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(a),function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function o(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return r})).replace(//g,(function(){return a})),RegExp(e,t)}a=o(a).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=o(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:o(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:o(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var i=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(i).join(""):""},l=function(t){for(var n=[],r=0;r0&&n[n.length-1].tagName===i(a.content[0].content[1])&&n.pop():"/>"===a.content[a.content.length-1].content||n.push({tagName:i(a.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===a.type&&"{"===a.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===a.type&&"}"===a.content?n[n.length-1].openedBraces--:o=!0),(o||"string"==typeof a)&&n.length>0&&0===n[n.length-1].openedBraces){var s=i(a);r0&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(s=i(t[r-1])+s,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",s,null,s)}a.content&&"string"!=typeof a.content&&l(a.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||l(e.tokens)}))}(a),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var r=t[n],a=[];/^\w+$/.test(n)||a.push(/\w+/.exec(n)[0]),"diff"===n&&a.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+r+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:a,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(a),a.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},a.languages.go=a.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),a.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete a.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof o&&!o(e))return e;for(var a,l=i.length;-1!==n.code.indexOf(a=t(r,l));)++l;return i[l]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function i(l){for(var s=0;s=o.length);s++){var u=l[s];if("string"==typeof u||u.content&&"string"==typeof u.content){var c=o[a],d=n.tokenStack[c],p="string"==typeof u?u:u.content,f=t(r,c),m=p.indexOf(f);if(m>-1){++a;var h=p.substring(0,m),g=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),b=p.substring(m+f.length),v=[];h&&v.push.apply(v,i([h])),v.push(g),b&&v.push.apply(v,i([b])),"string"==typeof u?l.splice.apply(l,[s,1].concat(v)):u.content=v}}else u.content&&i(u.content)}return l}(n.tokens)}}}})}(a),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(a),a.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},a.languages.webmanifest=a.languages.json,a.languages.less=a.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),a.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),a.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},a.languages.objectivec=a.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete a.languages.objectivec["class-name"],a.languages.objc=a.languages.objectivec,a.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},a.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},a.languages.python["string-interpolation"].inside.interpolation.inside.rest=a.languages.python,a.languages.py=a.languages.python,a.languages.reason=a.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),a.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete a.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(a),a.languages.scss=a.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),a.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),a.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),a.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),a.languages.scss.atrule.inside.rest=a.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},r={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};r.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:r}},r.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:r}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:r}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:r}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:r}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:r.interpolation}},rest:r}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:r.interpolation,comment:r.comment,punctuation:/[{},]/}},func:r.func,string:r.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:r.interpolation,punctuation:/[{}()\[\];:.]/}}(a),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(a),a.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/};const o=a},9901: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"}}})},2885:(e,t,n)=>{const r=n(9901),a=n(9642),o=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...o,...Object.keys(Prism.languages)];a(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(6500).resolve(t)],delete Prism.languages[e],n(6500)(t),o.add(e)}))}i.silent=!1,e.exports=i},6726:(e,t,n)=>{var r={"./":2885};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=6726},6500:(e,t,n)=>{var r={"./":2885};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=6500},9642: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,r=e.length;n "));var l={},s=e[r];if(s){function u(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in l))for(var i in a(t,o),l[t]=!0,n[t])l[i]=!0}t(s.require,u),t(s.optional,u),t(s.modify,u)}n[r]=l,o.pop()}}return function(e){var t=n[e];return t||(a(e,r),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(o,i,l){var s=function(e){var t={};for(var n in e){var r=e[n];for(var a in r)if("meta"!=a){var o=r[a];t[a]="string"==typeof o?{title:o}:o}}return t}(o),u=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var a in n={},e){var o=e[a];t(o&&o.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}return n[r]||r}}(s);i=i.map(u),l=(l||[]).map(u);var c=n(i),d=n(l);i.forEach((function e(n){var r=s[n];t(r&&r.require,(function(t){t in d||(c[t]=!0,e(t))}))}));for(var p,f=r(s),m=c;a(m);){for(var h in p={},m){var g=s[h];t(g&&g.modify,(function(e){e in d&&(p[e]=!0)}))}for(var b in d)if(!(b in c))for(var v in f(b))if(v in c){p[b]=!0;break}for(var y in m=p)c[y]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,a){var o=a?a.series:void 0,i=a?a.parallel:e,l={},s={};function u(e){if(e in l)return l[e];s[e]=!0;var a,c=[];for(var d in t(e))d in n&&c.push(d);if(0===c.length)a=r(e);else{var p=i(c.map((function(e){var t=u(e);return delete s[e],t})));o?a=o(p,(function(){return r(e)})):r(e)}return l[e]=a}for(var c in n)u(c);var d=[];for(var p in s)d.push(l[p]);return i(d)}(f,c,t,n)}};return w}}();e.exports=t},2703:(e,t,n)=>{"use strict";var r=n(414);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=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 l.name="Invariant Violation",l}}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:o,resetWarningCache:a};return n.PropTypes=n,n}},5697:(e,t,n)=>{e.exports=n(2703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},4448:(e,t,n)=>{"use strict";var r=n(7294),a=n(7418),o=n(3840);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n