feat(front): support multiple test platform components

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

Hide file tree

Showing 4 changed files with 72 additions and 16 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.13",
+  "version": "2.4.0-alpha.14",
   "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
@@ -18,17 +18,21 @@ export class PlatformComponents extends OBC.Component {
       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);
-        };
+        function main() {
+          const { OBC, BUI } = window.ThatOpenCompany;
         
-        window.addEventListener("${this._requestEventID}", onComponentRequested);
+          ${componentSource}
+        
+          const onComponentRequested = () => {
+            window.removeEventListener("${this._requestEventID}", onComponentRequested);
+            const event = new CustomEvent("${this._createEventID}", { detail: main });
+            window.dispatchEvent(event);
+          };
+          
+          window.addEventListener("${this._requestEventID}", onComponentRequested);
+        }
+        
+        main();
       `;
 
       const onCreated = (event: any) => {

diff --git a/packages/front/src/core/PlatformComponents/test.ts b/packages/front/src/core/PlatformComponents/test.ts
@@ -43,8 +43,13 @@ 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());
+
+async function importComponent(url: string) {
+  const fetched = await fetch(url);
+  const componentData = await fetched.text();
+  const test = await cloudComponents.import(componentData);
+  console.log(test);
+}
+
+await importComponent("../../../../../resources/mock-cloud-component.js");
+await importComponent("../../../../../resources/mock-cloud-component-2.js");
diff --git a/resources/mock-cloud-component-2.js b/resources/mock-cloud-component-2.js
@@ -0,0 +1,47 @@
+class PlatformComponent extends OBC.ComponentWithUI {
+  static uuid = "cfac4902-0e43-4897-acf2-e3fdc518cac3";
+
+  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;