@thatopen/services 0.0.6 → 0.1.3

package/src/cli/templates/app/src/bim-components/CloudRunner/index.ts

@@ -1,91 +1,87 @@
-import * as OBC from "@thatopen/components";
-import { AppManager } from "@thatopen/services";
-import { CloudRunnerStatus } from "./src";
-
-export class CloudRunner extends OBC.Component {
-  static readonly uuid = "7c4e5d3b-2a1f-4e8d-9b6c-0a3f7e2c5d1b" as const;
-
-  enabled = true;
-
-  readonly onExecutionUpdated = new OBC.Event<CloudRunnerStatus>();
-
-  // TODO: Replace with your actual component ID after publishing.
-  componentId = "your-component-id";
-  localServerUrl = "http://localhost:4001";
-
-  // Reactive state — read by the UI template on each render.
-  status = "Idle";
-  progress = 0;
-  messages: string[] = [];
-
-  constructor(components: OBC.Components) {
-    super(components);
-    components.add(CloudRunner.uuid, this);
-  }
-
-  async run(useLocal: boolean) {
-    // Resolve client at call time via AppManager — never store it as a field.
-    const app = this.components.get(AppManager);
-    const client = app.client;
-
-    client.localServerUrl = useLocal ? this.localServerUrl : null;
-
-    this.status = useLocal ? "Starting (local)..." : "Starting (deployed)...";
-    this.progress = 0;
-    this.messages = [];
-    this._trigger();
-
-    try {
-      const { executionId } = await client.executeComponent(this.componentId, {
-        greeting: "Hello from the BIM app!",
-      });
-
-      this.status = `Running (${executionId.slice(0, 8)}...)`;
-      this._trigger();
-
-      // Subscribe to real-time progress updates via WebSocket.
-      client.onExecutionProgress(executionId, (data) => {
-        if (data.progressUpdate) {
-          this.progress = data.progressUpdate.progress;
-          if (data.progressUpdate.result) {
-            this.status = `${data.progressUpdate.result}: ${data.progressUpdate.resultMessage ?? "Done"}`;
-          }
-        }
-        if (data.messageUpdate) {
-          this.messages.push(data.messageUpdate.content);
-        }
-        this._trigger();
-      });
-
-      // Poll once after a short delay to catch fast executions that complete
-      // before the WebSocket subscription is established.
-      setTimeout(async () => {
-        try {
-          const exec = await client.getExecution(executionId);
-          if (exec.result) {
-            this.progress = exec.progress;
-            this.status = `${exec.result}: ${exec.resultMessage ?? "Done"}`;
-            this._trigger();
-          }
-        } catch {
-          /* WebSocket handles it */
-        }
-      }, 2000);
-    } catch (err) {
-      this.status = `Error: ${err}`;
-      this._trigger();
-    } finally {
-      client.localServerUrl = null;
-    }
-  }
-
-  private _trigger() {
-    this.onExecutionUpdated.trigger({
-      status: this.status,
-      progress: this.progress,
-      messages: [...this.messages],
-    });
-  }
-}
-
-export * from "./src";
+import * as OBC from "@thatopen/components";
+import { EngineServicesClient } from "@thatopen/services";
+import { CloudRunnerStatus } from "./src";
+
+export class CloudRunner extends OBC.Component {
+  static readonly uuid = "7c4e5d3b-2a1f-4e8d-9b6c-0a3f7e2c5d1b" as const;
+
+  enabled = true;
+
+  readonly onExecutionUpdated = new OBC.Event<CloudRunnerStatus>();
+
+  // TODO: Replace with your actual component ID after publishing.
+  componentId = "your-component-id";
+  localServerUrl = "http://localhost:4001";
+
+  // Reactive state — read by the UI template on each render.
+  status = "Idle";
+  progress = 0;
+  messages: string[] = [];
+
+  // Set this before calling run() — injected from the app setup.
+  client!: EngineServicesClient;
+
+  constructor(components: OBC.Components) {
+    super(components);
+    components.add(CloudRunner.uuid, this);
+  }
+
+  async run(useLocal: boolean) {
+    this.client.localServerUrl = useLocal ? this.localServerUrl : null;
+
+    this.status = useLocal ? "Starting (local)..." : "Starting (deployed)...";
+    this.progress = 0;
+    this.messages = [];
+    this._trigger();
+
+    try {
+      const { executionId } = await this.client.executeComponent(this.componentId, {
+        greeting: "Hello from the BIM app!",
+      });
+
+      this.status = `Running (${executionId.slice(0, 8)}...)`;
+      this._trigger();
+
+      this.client.onExecutionProgress(executionId, (data) => {
+        if (data.progressUpdate) {
+          this.progress = data.progressUpdate.progress;
+          if (data.progressUpdate.result) {
+            this.status = `${data.progressUpdate.result}: ${data.progressUpdate.resultMessage ?? "Done"}`;
+          }
+        }
+        if (data.messageUpdate) {
+          this.messages.push(data.messageUpdate.content);
+        }
+        this._trigger();
+      });
+
+      setTimeout(async () => {
+        try {
+          const exec = await this.client.getExecution(executionId);
+          if (exec.result) {
+            this.progress = exec.progress;
+            this.status = `${exec.result}: ${exec.resultMessage ?? "Done"}`;
+            this._trigger();
+          }
+        } catch {
+          /* WebSocket handles it */
+        }
+      }, 2000);
+    } catch (err) {
+      this.status = `Error: ${err}`;
+      this._trigger();
+    } finally {
+      this.client.localServerUrl = null;
+    }
+  }
+
+  private _trigger() {
+    this.onExecutionUpdated.trigger({
+      status: this.status,
+      progress: this.progress,
+      messages: [...this.messages],
+    });
+  }
+}
+
+export * from "./src";

package/src/cli/templates/app/src/bim-components/CloudRunner/src/index.ts

@@ -1 +1 @@
-export * from "./types";
+export * from "./types";

package/src/cli/templates/app/src/bim-components/CloudRunner/src/types.ts

@@ -1,5 +1,5 @@
-export interface CloudRunnerStatus {
-  status: string;
-  progress: number;
-  messages: string[];
-}
+export interface CloudRunnerStatus {
+  status: string;
+  progress: number;
+  messages: string[];
+}

package/src/cli/templates/app/src/bim-components/index.ts

@@ -1 +1 @@
-export * from "./CloudRunner";
+export * from "./CloudRunner";

package/src/cli/templates/app/src/main.ts

@@ -1,89 +1,56 @@
-import * as THREE from "three";
-import * as OBC from "@thatopen/components";
-import * as OBF from "@thatopen/components-front";
-import * as FRAGS from "@thatopen/fragments";
-import * as BUI from "@thatopen/ui";
-import * as MARKERJS from "@markerjs/markerjs3"
-import {
-  PlatformClient,
-  AppManager,
-  ViewportsManager,
-  UIManager,
-} from "@thatopen/services";
-
-import { getAppManager } from "./app";
-import { uiManager, cloudRunner, viewportsManager, getUIManager } from "./setups";
-
-// Wrap in async function since IIFE format does not support top-level await.
-async function main() {
-  // ─── Platform Client ──────────────────────────────────────────
-  // Reads auth context from window.__THATOPEN_CONTEXT__ (injected by the
-  // platform) and creates a client with Bearer auth.
-  const client = PlatformClient.fromPlatformContext();
-
-  // ─── Built-in Components ──────────────────────────────────────
-  // First argument: library globals used by the engine.
-  // Subsequent arguments: platform built-in components to initialise.
-  const { components } = await client.setup<OBC.Components>(
-    { OBC, OBF, BUI, THREE, FRAGS, MARKERJS },
-    { uuid: ViewportsManager.uuid },
-    { uuid: AppManager.uuid },
-    { uuid: UIManager.uuid },
-  );
-
-  // ─── Viewport ─────────────────────────────────────────────────
-  // Must run before app.init() so the element is ready for the grid.
-  const viewerElement = await viewportsManager(components);
-
-  // ─── App Init ─────────────────────────────────────────────────
-  const app = getAppManager(components);
-
-  await app.init({
-    client,
-    icons: [],
-    componentSetups: {
-      // core: runs in parallel before the grid mounts.
-      core: [uiManager, cloudRunner],
-    },
-    grid: (grid) => {
-      const uis = getUIManager(components);
-
-      grid.elements = {
-        viewer: viewerElement,
-        appInfoSection: {
-          template: uis.custom.get("appInfoSection").template,
-          initialState: { components },
-          label: "App Info",
-          icon: "solar:info-circle-bold",
-        },
-        cloudRunnerSection: {
-          template: uis.custom.get("cloudRunnerSection").template,
-          initialState: { components },
-          label: "Cloud Component",
-          icon: "solar:code-bold",
-        },
-      };
-
-      grid.layouts = {
-        Viewer: {
-          template: `"viewer" 1fr / 1fr`,
-        },
-        Split: {
-          template: `
-            "tabs:left(appInfoSection, cloudRunnerSection) viewer" 1fr
-            / 24rem 1fr
-          `,
-          icon: "solar:info-circle-bold",
-        },
-      };
-
-      grid.areaGroups = {
-        left: { switchersFull: true },
-      };
-
-      grid.layout = "Split";
-    },
-  });
-}
-
-main().catch(console.error);
+import { html } from "lit";
+import * as THREE from "three";
+import * as OBC from "@thatopen/components";
+import * as OBF from "@thatopen/components-front";
+import * as FRAGS from "@thatopen/fragments";
+import * as BUI from "@thatopen/ui";
+import { PlatformClient, UIManager } from "@thatopen/services";
+import { initFragments } from "./setups/fragments";
+import { initIfcLoader } from "./setups/ifc-loader";
+import "./ui-components";
+
+async function main() {
+  const client = PlatformClient.fromPlatformContext();
+
+  const { components } = await client.setup(
+    { OBC, OBF, BUI, THREE, FRAGS },
+    { uuid: UIManager.uuid },
+  ) as { components: OBC.Components };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (components.get(UIManager as any) as any).init();
+
+  const app = document.createElement("top-app") as any;
+
+  app.setup = (waitUntil: (promise: Promise<unknown>, label: string) => void) => {
+    waitUntil(initFragments(components), "Fragments Core");
+    waitUntil(initIfcLoader(components), "IFC Loader");
+    return { components, client };
+  };
+
+  app.elements = {
+    viewer: () => html`<top-viewer><top-viewer-tools></top-viewer-tools></top-viewer>`,
+    panel: () => html`<app-panel></app-panel>`,
+  };
+
+  app.layouts = {
+    main: {
+      label: "Main",
+      icon: "solar:home-bold",
+      template: `"panel" 1fr / 22rem`,
+    },
+  };
+
+  app.base = "viewer";
+  app.layout = "main";
+
+  app.addEventListener("thatopen:app-ready", () => {
+    app.showToast("App ready", "success");
+  });
+
+  const container = document.getElementById("that-open-app") ?? document.body;
+  container.appendChild(app);
+  document.body.style.margin = "0";
+}
+
+main().catch(console.error);

package/src/cli/templates/app/src/setups/cloud-runner.ts

@@ -1,13 +1,9 @@
-import * as OBC from "@thatopen/components";
-import { CloudRunner } from "../bim-components";
-import { getUIManager } from "./ui-manager";
-
-export const cloudRunner = (components: OBC.Components) => {
-  const runner = components.get(CloudRunner);
-  const uis = getUIManager(components);
-
-  // Re-render all appInfoSection instances whenever execution state changes.
-  runner.onExecutionUpdated.add(() => {
-    uis.custom.get("cloudRunnerSection").updateInstances();
-  });
-};
+import * as OBC from "@thatopen/components";
+import { EngineServicesClient } from "@thatopen/services";
+import { CloudRunner } from "../bim-components";
+
+export const setupCloudRunner = (components: OBC.Components, client: EngineServicesClient) => {
+  const runner = components.get(CloudRunner);
+  runner.client = client;
+  return runner;
+};

package/src/cli/templates/app/src/setups/fragments.ts

@@ -0,0 +1,18 @@
+import * as OBC from "@thatopen/components";
+import * as FRAGS from "@thatopen/fragments";
+
+export const initFragments = async (components: OBC.Components): Promise<void> => {
+  const fragments = components.get(OBC.FragmentsManager);
+
+  const moduleWorkerUrl = await FRAGS.FragmentsModels.getWorker();
+  const workerUrl = await FRAGS.toClassicWorker(moduleWorkerUrl);
+  fragments.init(workerUrl, { classicWorker: true });
+
+  fragments.core.models.materials.list.onItemSet.add(({ value: material }) => {
+    if (!("isLodMaterial" in material && material.isLodMaterial)) {
+      material.polygonOffset = true;
+      material.polygonOffsetUnits = 1;
+      material.polygonOffsetFactor = Math.random();
+    }
+  });
+};

package/src/cli/templates/app/src/setups/ifc-loader.ts

@@ -0,0 +1,12 @@
+import * as OBC from "@thatopen/components";
+
+export const initIfcLoader = async (components: OBC.Components): Promise<void> => {
+  const ifcLoader = components.get(OBC.IfcLoader);
+  await ifcLoader.setup({
+    autoSetWasm: false,
+    wasm: {
+      path: "https://unpkg.com/web-ifc@0.0.77/",
+      absolute: true,
+    },
+  });
+};

package/src/cli/templates/app/src/setups/index.ts

@@ -1,3 +1,3 @@
-export * from "./ui-manager";
-export * from "./viewports-manager";
-export * from "./cloud-runner";
+export * from "./cloud-runner";
+export * from "./fragments";
+export * from "./ifc-loader";

package/src/cli/templates/app/src/ui-components/AppPanel/index.ts

@@ -0,0 +1,160 @@
+import { LitElement, html } from "lit";
+import { state } from "lit/decorators.js";
+import { consume, createContext } from "@lit/context";
+import * as OBC from "@thatopen/components";
+import * as BUI from "@thatopen/ui";
+import { PlatformClient } from "@thatopen/services";
+import type { Item } from "@thatopen/services";
+import { CloudRunner } from "../../bim-components";
+
+const componentsContext = createContext<OBC.Components | undefined>("obc-components");
+const clientContext = createContext<PlatformClient | undefined>("platform-client");
+
+type FileRow = { Name: string; Extension: string; Load: string };
+
+export class AppPanel extends LitElement {
+  @consume({ context: componentsContext, subscribe: true })
+  @state() private _components?: OBC.Components;
+
+  @consume({ context: clientContext, subscribe: true })
+  @state() private _client?: PlatformClient;
+
+  @state() private _files: Item[] = [];
+  @state() private _loaded = new Set<string>();
+  @state() private _loading = new Set<string>();
+
+  @state() private _runnerStatus = "Idle";
+  @state() private _runnerProgress = 0;
+  @state() private _runnerMessages: string[] = [];
+  @state() private _runnerComponentId = "your-component-id";
+  @state() private _running = false;
+
+  private _runner?: CloudRunner;
+
+  async updated(changed: Map<string, unknown>) {
+    if ((changed.has("_components") || changed.has("_client")) && this._components && this._client) {
+      if (!this._runner) {
+        this._runner = this._components.get(CloudRunner);
+        this._runner.client = this._client;
+        this._runner.onExecutionUpdated.add(({ status, progress, messages }) => {
+          this._runnerStatus = status;
+          this._runnerProgress = progress;
+          this._runnerMessages = messages;
+          if (status.startsWith("SUCCESS") || status.startsWith("ERROR") || status.startsWith("WARNING")) {
+            this._running = false;
+          }
+        });
+      } else {
+        this._runner.client = this._client;
+      }
+      await this._fetchFiles();
+    }
+  }
+
+  private async _fetchFiles() {
+    const projectId = (window as any).__THATOPEN_CONTEXT__?.projectId;
+    if (!this._client || !projectId) return;
+    const all = await this._client.listFiles({ projectId });
+    this._files = all.filter(f => f.fileExtension === "ifc" || f.fileExtension === "frag");
+  }
+
+  private async _toggleModel(file: Item) {
+    const id = file._id;
+    if (this._loaded.has(id)) {
+      await this._components!.get(OBC.FragmentsManager).core.disposeModel(id).catch(() => {});
+      this._loaded = new Set([...this._loaded].filter(x => x !== id));
+    } else {
+      this._loading = new Set([...this._loading, id]);
+      try {
+        const response = await this._client!.downloadFile(id);
+        const bytes = new Uint8Array(await response.arrayBuffer());
+        if (file.fileExtension === "frag") {
+          await this._components!.get(OBC.FragmentsManager).core.load(bytes, { modelId: id });
+        } else {
+          await this._components!.get(OBC.IfcLoader).load(bytes, true, id);
+        }
+        this._loaded = new Set([...this._loaded, id]);
+      } finally {
+        this._loading = new Set([...this._loading].filter(x => x !== id));
+      }
+    }
+  }
+
+  private async _run(useLocal: boolean) {
+    if (!this._runner) return;
+    this._runner.componentId = this._runnerComponentId;
+    this._running = true;
+    await this._runner.run(useLocal);
+  }
+
+  private get _tableData(): BUI.TableGroupData<FileRow>[] {
+    return this._files.map(f => ({
+      data: { Name: f.name, Extension: f.fileExtension ?? "", Load: f._id },
+    }));
+  }
+
+  private get _dataTransform(): BUI.TableDataTransform<FileRow> {
+    return {
+      Load: (fileId) => {
+        const file = this._files.find(f => f._id === fileId)!;
+        const loaded = this._loaded.has(fileId);
+        const loading = this._loading.has(fileId);
+        return BUI.html`
+          <bim-button
+            .label=${loaded ? "Unload" : "Load"}
+            .icon=${loaded ? "solar:eye-closed-bold" : "solar:eye-bold"}
+            .loading=${loading}
+            @click=${() => this._toggleModel(file)}
+          ></bim-button>
+        `;
+      },
+    };
+  }
+
+  render() {
+    return html`
+      <bim-tabs>
+        <bim-tab name="models" label="Models" icon="solar:folder-bold">
+          <bim-panel-section label="Project Files">
+            <bim-table
+              .columns=${["Name", "Extension", "Load"]}
+              .data=${this._tableData}
+              .dataTransform=${this._dataTransform}
+            ></bim-table>
+          </bim-panel-section>
+        </bim-tab>
+        <bim-tab name="runner" label="Cloud Runner" icon="solar:code-bold">
+          <bim-panel>
+            <bim-panel-section label="Component">
+              <bim-text-input
+                label="Component ID"
+                value=${this._runnerComponentId}
+                @change=${(e: Event) => { this._runnerComponentId = (e.target as HTMLInputElement).value; }}
+              ></bim-text-input>
+              <div style="display:flex;gap:0.5rem;">
+                <bim-button
+                  label="Run"
+                  .icon=${"solar:play-bold"}
+                  .loading=${this._running}
+                  @click=${() => this._run(false)}
+                ></bim-button>
+                <bim-button
+                  label="Run Local"
+                  .icon=${"solar:server-bold"}
+                  .loading=${this._running}
+                  @click=${() => this._run(true)}
+                ></bim-button>
+              </div>
+            </bim-panel-section>
+            <bim-panel-section label="Status">
+              <bim-label>${this._runnerStatus}</bim-label>
+              ${this._runnerMessages.map(m => html`<bim-label>${m}</bim-label>`)}
+            </bim-panel-section>
+          </bim-panel>
+        </bim-tab>
+      </bim-tabs>
+    `;
+  }
+}
+
+customElements.define("app-panel", AppPanel);

package/src/cli/templates/app/src/ui-components/index.ts

@@ -1,2 +1 @@
-export * from "./app-info-section";
-export * from "./cloud-runner-section";
+export * from "./AppPanel";

package/src/cli/templates/app/tsconfig.json

@@ -1,16 +1,17 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "strict": true
-  },
-  "include": ["src"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "experimentalDecorators": true
+  },
+  "include": ["src"]
+}