feat(front): test platform component

ThatOpen · Oct 24, 2024 · 12b8e93 · 12b8e93
1 parent f5694d1
commit 12b8e93
Show file tree

Hide file tree

Showing 7 changed files with 229 additions and 9 deletions.
diff --git a/packages/front/package.json b/packages/front/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@thatopen/components-front",
   "description": "Collection of frontend tools to author BIM apps.",
-  "version": "2.4.0-alpha.12",
+  "version": "2.4.0-alpha.13",
   "author": "That Open Company",
   "contributors": [
     "Antonio Gonzalez Viegas (https://github.com/agviegas)",

diff --git a/packages/front/src/core/PlatformComponents/index.ts b/packages/front/src/core/PlatformComponents/index.ts
@@ -0,0 +1,55 @@
+import * as OBC from "@thatopen/components";
+
+export class PlatformComponents extends OBC.Component {
+  /**
+   * A unique identifier for the component.
+   * This UUID is used to register the component within the Components system.
+   */
+  static readonly uuid = "74c0c370-1af8-4ca9-900a-4a4196c0f2f5" as const;
+
+  enabled = true;
+
+  private readonly _requestEventID = "thatOpenCompanyComponentRequested";
+
+  private readonly _createEventID = "thatOpenCompanyComponentCreated";
+
+  async import(componentSource: string) {
+    return new Promise<OBC.ComponentWithUI>((resolve) => {
+      const script = document.createElement("script");
+
+      const src = `
+        const { OBC, BUI } = window.ThatOpenCompany;
+      
+        ${componentSource}
+      
+        const onComponentRequested = () => {
+          window.removeEventListener("${this._requestEventID}", onComponentRequested);
+          const event = new CustomEvent("${this._createEventID}", { detail: main });
+          window.dispatchEvent(event);
+        };
+        
+        window.addEventListener("${this._requestEventID}", onComponentRequested);
+      `;
+
+      const onCreated = (event: any) => {
+        window.removeEventListener(this._createEventID, onCreated);
+
+        const ComponentClass = event.detail as new (
+          components: OBC.Components,
+        ) => OBC.ComponentWithUI;
+
+        const component = this.components.get(ComponentClass);
+        script.remove();
+        resolve(component);
+      };
+
+      script.addEventListener("load", () => {
+        window.addEventListener(this._createEventID, onCreated);
+        window.dispatchEvent(new Event(this._requestEventID));
+      });
+
+      script.src = URL.createObjectURL(new File([src], "temp.js"));
+      document.head.appendChild(script);
+    });
+  }
+}
diff --git a/packages/front/src/core/PlatformComponents/test.html b/packages/front/src/core/PlatformComponents/test.html
@@ -0,0 +1,67 @@
+<!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="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="icon" type="image/x-icon" href="https://thatopen.github.io/engine_components/resources/favicon.ico">
+  <title>CloudComponents</title>
+  <style>
+      body {
+          margin: 0;
+          padding: 0;
+          font-family: "Plus Jakarta Sans", sans-serif;
+          overflow: hidden;
+      }
+
+      .full-screen {
+          width: 100vw;
+          height: 100vh;
+          position: relative;
+          overflow: hidden;
+      }
+
+      .options-menu {
+          position: fixed;
+          min-width: unset;
+          top: 5px;
+          right: 5px;
+          max-height: calc(100vh - 10px);
+      }
+
+      .phone-menu-toggler {
+          visibility: hidden;
+      }
+
+      @media (max-width: 480px) {
+          .options-menu {
+              visibility: hidden;
+              bottom: 5px;
+              left: 5px;
+          }
+
+          .options-menu-visible {
+              visibility: visible;
+          }
+
+          .phone-menu-toggler {
+              visibility: visible;
+              position: fixed;
+              top: 5px;
+              right: 5px;
+          }
+      }
+
+  </style>
+</head>
+
+<body>
+<div class="full-screen" id="container"></div>
+<script type="module" src="./test.ts"></script>
+</body>
+
+</html>
diff --git a/packages/front/src/core/PlatformComponents/test.ts b/packages/front/src/core/PlatformComponents/test.ts
@@ -0,0 +1,50 @@
+import * as OBC from "@thatopen/components";
+import Stats from "stats.js";
+import * as BUI from "@thatopen/ui";
+import * as OBCF from "../..";
+
+BUI.Manager.init();
+
+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);
+
+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.create(world);
+
+world.scene.three.background = null;
+
+const stats = new Stats();
+stats.showPanel(2);
+document.body.append(stats.dom);
+stats.dom.style.left = "0px";
+stats.dom.style.zIndex = "unset";
+world.renderer.onBeforeUpdate.add(() => stats.begin());
+world.renderer.onAfterUpdate.add(() => stats.end());
+
+(window as any).ThatOpenCompany = { OBC, BUI };
+
+const cloudComponents = components.get(OBCF.PlatformComponents);
+const fetched = await fetch("../../../../../resources/mock-cloud-component.js");
+const componentData = await fetched.text();
+const test = await cloudComponents.import(componentData);
+const ui = test.getUI();
+document.body.appendChild(ui[0].get());
diff --git a/packages/front/src/core/index.ts b/packages/front/src/core/index.ts
@@ -2,3 +2,4 @@ export * from "./Marker";
 export * from "./ClipEdges";
 export * from "./ShadowDropper";
 export * from "./PostproductionRenderer";
+export * from "./PlatformComponents";
diff --git a/resources/mock-cloud-component.js b/resources/mock-cloud-component.js
@@ -0,0 +1,47 @@
+class PlatformComponent extends OBC.ComponentWithUI {
+  static uuid = "392b7198-0193-4364-8b89-dfad1b386c50";
+
+  onDisposed = new OBC.Event();
+
+  enabled = true;
+
+  name = "Mock Personal Component";
+
+  _uiElements = new Set();
+
+  constructor(components) {
+    super(components);
+    this.components.add(PlatformComponent.uuid, this);
+  }
+
+  getUI() {
+    console.log("Hello from personal component!");
+    return [
+      {
+        name: "Panel",
+        componentID: PlatformComponent.uuid,
+        attributes: {
+          label: "Hello"
+        },
+        get: () => {
+          const panel = BUI.Component.create(() => {
+            return BUI.html`
+          <bim-panel></bim-panel> 
+        `;
+          });
+          this._uiElements.add(panel);
+          return panel;
+        }
+      }
+    ];
+  }
+
+  dispose() {
+    for (const element of this._uiElements) {
+      element.remove();
+    }
+    this._uiElements.clear();
+  }
+}
+
+const main = PlatformComponent;
diff --git a/yarn.lock b/yarn.lock
@@ -690,7 +690,7 @@ __metadata:
   resolution: "@thatopen/components-front@workspace:packages/front"
   dependencies:
     "@thatopen/components": ">=2.4.0-alpha.3"
-    "@thatopen/fragments": ">=2.4.0-alpha.4"
+    "@thatopen/fragments": ">=2.4.0-alpha.8"
     "@thatopen/ui": ~2.3.0
     "@thatopen/ui-obc": ~2.3.0
     "@types/earcut": ^2.1.4
@@ -703,7 +703,7 @@ __metadata:
     three: ^0.160.1
     web-ifc: 0.0.61
   peerDependencies:
-    "@thatopen/fragments": ">=2.4.0-alpha.4"
+    "@thatopen/fragments": ">=2.4.0-alpha.8"
     three: ^0.160.1
     web-ifc: 0.0.61
   languageName: unknown
@@ -713,7 +713,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thatopen/components@workspace:packages/core"
   dependencies:
-    "@thatopen/fragments": ">=2.4.0-alpha.4"
+    "@thatopen/fragments": ">=2.4.0-alpha.8"
     "@thatopen/ui": ~2.3.0
     "@types/three": 0.160.0
     camera-controls: 2.7.3
@@ -724,21 +724,21 @@ __metadata:
     three-mesh-bvh: 0.7.0
     web-ifc: 0.0.61
   peerDependencies:
-    "@thatopen/fragments": ">=2.4.0-alpha.4"
+    "@thatopen/fragments": ">=2.4.0-alpha.8"
     three: ^0.160.1
     web-ifc: 0.0.61
   languageName: unknown
   linkType: soft
 
-"@thatopen/fragments@npm:>=2.4.0-alpha.4":
-  version: 2.4.0-alpha.4
-  resolution: "@thatopen/fragments@npm:2.4.0-alpha.4"
+"@thatopen/fragments@npm:>=2.4.0-alpha.8":
+  version: 2.4.0-alpha.8
+  resolution: "@thatopen/fragments@npm:2.4.0-alpha.8"
   dependencies:
     flatbuffers: 23.3.3
     three-mesh-bvh: 0.7.0
   peerDependencies:
     three: ^0.160.1
-  checksum: 04e81b3e63c4ce72dc4ced943d810c732a4ecd280abf60f0a6190b38dea34331bfd9a32e0e04e934901d71ba02b5f63351ad216cd52ef16c7fd2bc6fe27b26c9
+  checksum: d4be85ef5f96d892be594675192ba037550135f8ba1243a2875dd5c8b9eb72059b7e110a2f8bbbdc6f8d1c696a986c688c7fd70bf410ffadea1dd7b09fc8cb35
   languageName: node
   linkType: hard