@thatopen/services 0.1.3 → 0.3.0

package/src/built-in/ViewportsManager/example.ts

@@ -1,106 +0,0 @@
-import * as THREE from "three";
-import * as OBC from "@thatopen/components";
-import * as BUI from "@thatopen/ui";
-
-import appManagerDef from "../AppManager/index";
-import viewportManagerDef from "./index";
-
-const AppManager = appManagerDef.componentDefinition;
-const ViewportManager = viewportManagerDef.componentDefinition;
-
-// ── App type ──────────────────────────────────────────────────────────
-
-type PanelState = { components: OBC.Components };
-
-interface ViewportApp {
-  icons: ["LOAD", "VIEW", "SPLIT"];
-  grid: BUI.Grid<
-    ["Viewer", "Split"],
-    [
-      { name: "viewer"; state: null },
-      { name: "panel"; state: PanelState }
-    ]
-  >;
-}
-
-// ── Initialise OBC & BUI ──────────────────────────────────────────────
-
-BUI.Manager.init();
-const components = new OBC.Components();
-
-const app = components.get(AppManager<ViewportApp>);
-const viewports = components.get(ViewportManager);
-
-// ── Create a viewport ─────────────────────────────────────────────────
-
-const { element: viewerElement, world } = await viewports.create({
-  backgroundColor: "#202932",
-});
-
-// ── Add a simple cube to the scene ────────────────────────────────────
-
-const geometry = new THREE.BoxGeometry(3, 3, 3);
-const material = new THREE.MeshStandardMaterial({ color: "#6528D7" });
-const cube = new THREE.Mesh(geometry, material);
-cube.position.set(0, 1.5, 0);
-world.scene.three.add(cube);
-
-await world.camera.controls.setLookAt(10, 8, 10, 0, 1.5, 0);
-
-// Load a sample model
-const loadModel = async () => {
-  const fragments = components.get(OBC.FragmentsManager);
-  const file = await fetch(
-    "https://thatopen.github.io/engine_components/resources/frags/school_arq.frag",
-  );
-  const buffer = await file.arrayBuffer();
-  await fragments.core.load(buffer, { modelId: "school_arq" });
-  await fragments.core.update(true);
-};
-
-// ── Templates ─────────────────────────────────────────────────────────
-
-const panelTemplate: BUI.StatefullComponent<PanelState> = (_state) => {
-  return BUI.html`
-    <bim-panel active label="App Info">
-      <bim-panel-section label="Actions">
-        <bim-button @click=${loadModel} label="Load School Model"></bim-button>
-      </bim-panel-section>
-      <bim-panel-section label="Info">
-        <bim-label>Use the sidebar to switch layouts.</bim-label>
-      </bim-panel-section>
-    </bim-panel>
-  `;
-};
-
-// ── Init ──────────────────────────────────────────────────────────────
-
-app.init({
-  icons: {
-    LOAD: "solar:upload-bold",
-    VIEW: "mdi:monitor",
-    SPLIT: "solar:settings-bold",
-  },
-  grid: (grid) => {
-    grid.elements = {
-      viewer: viewerElement,
-      panel: { template: panelTemplate, initialState: { components } },
-    };
-    grid.layouts = {
-      Viewer: {
-        template: `"viewer" 1fr / 1fr`,
-        icon: app.icons.VIEW,
-      },
-      Split: {
-        template: `"panel viewer" 1fr / 20rem 1fr`,
-        icon: app.icons.SPLIT,
-      },
-    };
-    grid.layout = "Viewer";
-  },
-  container: document.getElementById("container")!,
-});
-
-app.showSidebar = true;
-
-components.init();

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

@@ -1,18 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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/ui-components/AppPanel/index.ts

@@ -1,160 +0,0 @@
-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);