feat: progress with civil tutorials

README.md

@@ -3,11 +3,11 @@
   |
   <a href="https://docs.thatopen.com/intro">documentation</a>
   |
-  <a href="https://thatopen.github.io/engine_components/src/fragments/FragmentIfcLoader/index.html">demo</a>
+  <a href="https://thatopen.github.io/engine_componentspackages/core/src/fragments/IfcLoader/example.html">demo</a>
   |
   <a href="https://people.thatopen.com/">community</a>
   |
-  <a href="https://www.npmjs.com/package/openbim-components">npm package</a>
+  <a href="https://www.npmjs.com/org/thatopen">npm package</a>
 </p>
 
 ![cover](https://thatopen.github.io/engine_components/resources/cover.png)
@@ -20,46 +20,53 @@
 
 This library is a collection of BIM tools based on [Three.js](https://github.com/mrdoob/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](https://github.com/mrdoob/three.js/) 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](https://github.com/ThatOpen/engine_components/blob/main/src/core/SimpleScene/index.html) and the deployed app [here](https://thatopen.github.io/engine_components/src/core/SimpleScene/index.html).
 
 ```js
-import * as THREE from "three";
-import * as OBC from "openbim-components";
-
-// Get the <div> element where the scene will be displayed
+/* eslint import/no-extraneous-dependencies: 0 */
 
-const container = document.getElementById('container');
+import * as THREE from "three";
+import * as OBC from "../..";
 
-// Initialize the basic components needed to use this library
+const container = document.getElementById("container")!;
 
 const components = new OBC.Components();
 
-components.scene = new OBC.SimpleScene(components);
-components._renderer = new OBC.Index(components, container);
-components.camera = new OBC.SimpleCamera(components);
-components.raycaster = new OBC.SimpleRaycaster(components);
-
-components.init();
+const worlds = components.get(OBC.Worlds);
 
-// Add some elements to the scene
+const world = worlds.create<
+  OBC.SimpleScene,
+  OBC.SimpleCamera,
+  OBC.SimpleRenderer
+>();
 
-components.scene.setup();
+world.scene = new OBC.SimpleScene(components);
+world.renderer = new OBC.SimpleRenderer(components, container);
+world.camera = new OBC.SimpleCamera(components);
 
-const scene = components.scene.get();
+components.init();
 
-const geometry = new THREE.BoxGeometry(3, 3, 3);
-const material = new THREE.MeshStandardMaterial({ color: "red" });
+const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
+const geometry = new THREE.BoxGeometry();
 const cube = new THREE.Mesh(geometry, material);
-cube.position.set(0, 1.5, 0);
-scene.add(cube);
+world.scene.three.add(cube);
 
-components.meshes.push(cube);
-```
+world.scene.setup();
 
+world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
+```
 
 
-[npm]: https://img.shields.io/npm/v/openbim-components
-[npm-url]: https://www.npmjs.com/package/openbim-components
-[npm-downloads]: https://img.shields.io/npm/dw/openbim-components
+[npm]: https://img.shields.io/npm/v/@thatopen/components
+[npm-url]: https://www.npmjs.com/package/@thatopen/components
+[npm-downloads]: https://img.shields.io/npm/dw/@thatopen/components

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thatopen/components",
   "description": "Collection of core functionalities to author BIM apps.",
-  "version": "2.0.0-alpha.15",
+  "version": "2.0.0-alpha.16",
   "author": "That Open Company",
   "contributors": [
     "Antonio Gonzalez Viegas (https://github.com/agviegas)",
@@ -38,7 +38,8 @@
   },
   "devDependencies": {
     "@thatopen/fragments": "2.0.0-alpha.5",
-    "@thatopen/ui": "2.0.0-alpha.5",
+    "@thatopen/ui": "2.0.0-alpha.12",
+    "@thatopen/ui-obc": "2.0.0-alpha.12",
     "@types/jest": "27.0.0",
     "@types/node": "20.11.30",
     "@types/three": "0.160.0",

packages/core/src/core/Clipper/example.ts

@@ -26,9 +26,6 @@ world.camera.controls.setLookAt(10, 10, 10, 0, 0, 0);
 
 world.scene.setup();
 
-// @ts-ignore
-// const grid = new OBC.SimpleGrid(components);
-
 /* MD
   ### ✂️ Clipping Tool
   ---
@@ -49,7 +46,7 @@ world.scene.setup();
   Let's start by adding a Cube, which we can dissect.
   We will create a [Cube](https://threejs.org/docs/index.html?q=box#api/en/geometries/BoxGeometry)
   with `3x3x3` dimensions and use red color for the material.
-  */
+*/
 
 const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
 const cubeMaterial = new THREE.MeshStandardMaterial({ color: "#6528D7" });
@@ -157,7 +154,7 @@ world.renderer.onAfterUpdate.add(() => stats.end());
 
 // Set up UI
 
-BUI.Manager.registerComponents();
+BUI.Manager.init();
 
 const panel = BUI.Component.create<BUI.PanelSection>(() => {
   return BUI.html`

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

@@ -9,20 +9,42 @@ export * from "./src";
  * that are not visible to the camera.
  */
 export class Cullers extends Component implements Disposable {
+
+  /**
+   * A unique identifier for the Cullers component.
+   */
   static readonly uuid = "69f2a50d-c266-44fc-b1bd-fa4d34be89e6" as const;
 
+  /**
+   * Indicates whether the Cullers component is enabled.
+   */
   private _enabled = true;
 
+  /**
+   * A map of MeshCullerRenderer instances, keyed by their world UUIDs.
+   */
   list = new Map<string, MeshCullerRenderer>();
 
-  /** {@link Disposable.onDisposed} */
+  /**
+   * An event that is triggered when the Cullers component is disposed.
+   */
   readonly onDisposed = new Event();
 
-  /** {@link Component.enabled} */
+  /**
+   * Gets the enabled state of the Cullers component.
+   *
+   * @returns The current enabled state.
+   */
   get enabled() {
     return this._enabled;
   }
 
+  /**
+   * Sets the enabled state of the Cullers component.
+   * Also sets the enabled state of all MeshCullerRenderer instances.
+   *
+   * @param value - The new enabled state.
+   */
   set enabled(value: boolean) {
     this._enabled = value;
     for (const [_id, renderer] of this.list) {
@@ -35,14 +57,23 @@ export class Cullers extends Component implements Disposable {
     components.add(Cullers.uuid, this);
   }
 
-  create(world: World, config?: Partial<CullerRendererSettings>) {
-    if (this.list.has(world.uuid)) {
-      return this.list.get(world.uuid) as MeshCullerRenderer;
-    }
-    const culler = new MeshCullerRenderer(this.components, world, config);
-    this.list.set(world.uuid, culler);
-    return culler;
+  /**
+ * Creates a new MeshCullerRenderer for the given world.
+ * If a MeshCullerRenderer already exists for the world, it will return the existing one.
+ *
+ * @param world - The world for which to create the MeshCullerRenderer.
+ * @param config - Optional configuration settings for the MeshCullerRenderer.
+ *
+ * @returns The newly created or existing MeshCullerRenderer for the given world.
+ */
+create(world: World, config?: Partial<CullerRendererSettings>): MeshCullerRenderer {
+  if (this.list.has(world.uuid)) {
+    return this.list.get(world.uuid) as MeshCullerRenderer;
   }
+  const culler = new MeshCullerRenderer(this.components, world, config);
+  this.list.set(world.uuid, culler);
+  return culler;
+}
 
   delete(world: World) {
     const culler = this.list.get(world.uuid);

packages/core/src/core/MiniMap/example.ts

@@ -123,7 +123,7 @@ stats.dom.style.left = "0px";
 world.renderer.onBeforeUpdate.add(() => stats.begin());
 world.renderer.onAfterUpdate.add(() => stats.end());
 
-BUI.Manager.registerComponents();
+BUI.Manager.init();
 
 const mapSize = map.getSize();