chore: merge branch '1.6.0'

ThatOpen · May 22, 2024 · 2ef5e5e · 2ef5e5e
2 parents 444e81a + 4881618
commit 2ef5e5e
Show file tree

Hide file tree

Showing 558 changed files with 29,747 additions and 152,169 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
@@ -41,7 +41,6 @@ module.exports = {
       "error",
       "ignorePackages",
       {
-        js: "never",
         ts: "never",
       },
     ],

diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/README.md b/README.md
@@ -3,14 +3,14 @@
   |
   <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](resources/cover.png)
+![cover](https://thatopen.github.io/engine_components/resources/cover.png)
 
 <h1>Open BIM Components <img src="https://thatopen.github.io/engine_components/resources/favicon.ico" width="32"/></h1>
 
@@ -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.SimpleRenderer(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
diff --git a/examples/AngleMeasurement/index.html b/examples/AngleMeasurement/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="../../resources/styles.css">
+  <link rel="icon" type="image/x-icon" href="../../resources/favicon.ico">
+  <title>Fragment Highlighter</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    .full-screen {
+      width: 100vw;
+      height: 100vh;
+      position: relative;
+      overflow: hidden;
+    }
+  </style>
+  <script type="module" crossorigin src="../assets/angleMeasurement.js"></script>
+  <link rel="modulepreload" crossorigin href="../assets/web-ifc-api-BiYij3qq.js">
+  <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
+  <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-B3b_h8A8.js">
+  <link rel="modulepreload" crossorigin href="../assets/import-wrapper-prod-vMwJRSad.js">
+  <link rel="modulepreload" crossorigin href="../assets/renderer-with-2d-Dwkf_fcQ.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Cb-lnTew.js">
+  <link rel="modulepreload" crossorigin href="../assets/Line2-Bd8FUlMY.js">
+  <link rel="modulepreload" crossorigin href="../assets/mark-B9TqPH3U.js">
+  <link rel="modulepreload" crossorigin href="../assets/dimension-mark-BiAWnjiH.js">
+  <link rel="modulepreload" crossorigin href="../assets/graphic-vertex-picker-C182o4t3.js">
+</head>
+
+<body>
+  <div class="full-screen" id="container"></div>
+</body>
+
+</html>

diff --git a/examples/AreaMeasurement/index.html b/examples/AreaMeasurement/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="../../resources/styles.css">
+  <link rel="icon" type="image/x-icon" href="../../resources/favicon.ico">
+  <title>Area Measurment</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    .full-screen {
+      width: 100vw;
+      height: 100vh;
+      position: relative;
+      overflow: hidden;
+    }
+  </style>
+  <script type="module" crossorigin src="../assets/areaMeasurement.js"></script>
+  <link rel="modulepreload" crossorigin href="../assets/web-ifc-api-BiYij3qq.js">
+  <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
+  <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-B3b_h8A8.js">
+  <link rel="modulepreload" crossorigin href="../assets/import-wrapper-prod-vMwJRSad.js">
+  <link rel="modulepreload" crossorigin href="../assets/renderer-with-2d-Dwkf_fcQ.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Cb-lnTew.js">
+  <link rel="modulepreload" crossorigin href="../assets/mark-B9TqPH3U.js">
+  <link rel="modulepreload" crossorigin href="../assets/dimension-mark-BiAWnjiH.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Csb2AJ1X.js">
+  <link rel="modulepreload" crossorigin href="../assets/graphic-vertex-picker-C182o4t3.js">
+</head>
+
+<body>
+  <div class="full-screen" id="container"></div>
+</body>
+
+</html>

diff --git a/examples/BoundingBoxer/index.html b/examples/BoundingBoxer/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="../../resources/styles.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="icon" type="image/x-icon" href="../../resources/favicon.ico">
+  <title>Simple 2D Scene</title>
+  <style>
+      body {
+          margin: 0;
+          padding: 0;
+          font-family: "Plus Jakarta Sans", sans-serif;
+      }
+
+      .full-screen {
+          width: 100vw;
+          height: 100vh;
+          position: relative;
+          overflow: hidden;
+      }
+  </style>
+  <script type="module" crossorigin src="../assets/boundingBoxer.js"></script>
+  <link rel="modulepreload" crossorigin href="../assets/web-ifc-api-BiYij3qq.js">
+  <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
+  <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-DyM33b1I.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-DsPLPeA6.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-GK9dObYT.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Ba8czaZS.js">
+</head>
+
+<body>
+<div class="full-screen" id="container"></div>
+</body>
+
+</html>

diff --git a/examples/Civil3DNavigator/index.html b/examples/Civil3DNavigator/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="../../resources/styles.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="icon" type="image/x-icon" href="../../resources/favicon.ico">
+  <title>Simple 2D Scene</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    .full-screen {
+      width: 100vw;
+      height: 100vh;
+      position: relative;
+      overflow: hidden;
+    }
+  </style>
+  <script type="module" crossorigin src="../assets/civil3DNavigator.js"></script>
+  <link rel="modulepreload" crossorigin href="../assets/web-ifc-api-BiYij3qq.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-B3b_h8A8.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-DyM33b1I.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-yV6OCaJD.js">
+  <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
+  <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
+  <link rel="modulepreload" crossorigin href="../assets/renderer-with-2d-Dwkf_fcQ.js">
+  <link rel="modulepreload" crossorigin href="../assets/import-wrapper-prod-vMwJRSad.js">
+  <link rel="modulepreload" crossorigin href="../assets/Line2-Bd8FUlMY.js">
+  <link rel="modulepreload" crossorigin href="../assets/curve-highlighter-B2XYj340.js">
+  <link rel="modulepreload" crossorigin href="../assets/mark-B9TqPH3U.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Bn4wotfq.js">
+</head>
+
+<body>
+  <div class="full-screen" id="container"></div>
+</body>
+
+</html>

diff --git a/examples/CivilCrossSectionNavigator/index.html b/examples/CivilCrossSectionNavigator/index.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="../../resources/styles.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="icon" type="image/x-icon" href="../../resources/favicon.ico">
+  <title>Civil Cross Section Navigator</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    .full-screen {
+      width: 100vw;
+      height: 100vh;
+      position: relative;
+      overflow: hidden;
+    }
+  </style>
+  <script type="module" crossorigin src="../assets/civilCrossSectionNavigator.js"></script>
+  <link rel="modulepreload" crossorigin href="../assets/web-ifc-api-BiYij3qq.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-B3b_h8A8.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-DyM33b1I.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-yV6OCaJD.js">
+  <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
+  <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
+  <link rel="modulepreload" crossorigin href="../assets/Line2-Bd8FUlMY.js">
+  <link rel="modulepreload" crossorigin href="../assets/curve-highlighter-B2XYj340.js">
+  <link rel="modulepreload" crossorigin href="../assets/renderer-with-2d-Dwkf_fcQ.js">
+  <link rel="modulepreload" crossorigin href="../assets/mark-B9TqPH3U.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Bq1KDtuM.js">
+  <link rel="modulepreload" crossorigin href="../assets/import-wrapper-prod-vMwJRSad.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Ca45K5im.js">
+</head>
+
+<body>
+  <div class="full-screen" id="container"></div>
+</body>
+
+</html>

diff --git a/examples/CivilElevationNavigator/index.html b/examples/CivilElevationNavigator/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <link rel="stylesheet" href="../../resources/styles.css" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="icon" type="image/x-icon" href="../../resources/favicon.ico" />
+  <title>Civil Elevation Navigator</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    .full-screen {
+      width: 100vw;
+      height: 100vh;
+      position: relative;
+      overflow: hidden;
+    }
+  </style>
+  <script type="module" crossorigin src="../assets/civilElevationNavigator.js"></script>
+  <link rel="modulepreload" crossorigin href="../assets/web-ifc-api-BiYij3qq.js">
+  <link rel="modulepreload" crossorigin href="../assets/_commonjsHelpers-Cpj98o6Y.js">
+  <link rel="modulepreload" crossorigin href="../assets/stats.min-GTpOrGrX.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-B3b_h8A8.js">
+  <link rel="modulepreload" crossorigin href="../assets/Line2-Bd8FUlMY.js">
+  <link rel="modulepreload" crossorigin href="../assets/curve-highlighter-B2XYj340.js">
+  <link rel="modulepreload" crossorigin href="../assets/renderer-with-2d-Dwkf_fcQ.js">
+  <link rel="modulepreload" crossorigin href="../assets/mark-B9TqPH3U.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Bq1KDtuM.js">
+  <link rel="modulepreload" crossorigin href="../assets/import-wrapper-prod-vMwJRSad.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Ca45K5im.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Cb-lnTew.js">
+  <link rel="modulepreload" crossorigin href="../assets/index-Bn4wotfq.js">
+</head>
+
+<body>
+  <div class="full-screen" id="container"></div>
+</body>
+
+</html>