@thatopen/services 0.3.16 → 0.4.0

package/src/built-in/UIManager/src/app/example.ts

@@ -1,97 +1,97 @@
-/* MD
-  ## top-app
-  ---
-  Front-end developers building BIM web apps need to coordinate several async
-  initialization steps before the UI can be shown — loading the engine, preparing
-  fragment workers, registering loaders — and users need visible feedback on what
-  is happening during that wait, rather than a blank screen.
-
-  top-app is the platform's root shell element. It manages the full boot sequence,
-  tracks each async setup task individually, shows a labelled loading screen until
-  every task completes, and then mounts the app's visual layout.
-
-  This tutorial covers initializing the platform client and registering all
-  platform web components; registering two async setup tasks — the fragment worker
-  and the IFC loader — each with its own loading-screen label; declaring a named
-  layout area as a CSS grid template; wiring a 3D viewer into that layout; and
-  using a flag to keep the loading screen visible during development.
-
-  By the end, you'll have a working app shell that boots the engine, shows a
-  step-by-step loading screen, and mounts a 3D viewer once every setup task
-  resolves.
-*/
-
-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 type { App } from "./index";
-
-
-const client = PlatformClient.fromPlatformContext();
-
-// UIManager must be in the setup call: it registers all platform web components
-// (top-app, top-viewer, top-viewer-tools, etc.) before the DOM renders.
-const { components } = (await client.setup(
-  { OBC, OBF, BUI, THREE, FRAGS },
-  { uuid: UIManager.uuid },
-)) as { components: OBC.Components };
-
-components.get(UIManager).init();
-
-const app = document.createElement("top-app") as unknown as App;
-
-// setup runs synchronously and returns { components, client }.
-// waitUntil registers async tasks that appear as labelled steps in the loading screen.
-// All tasks run in parallel; top-app mounts only after every promise resolves.
-app.setup = (waitUntil) => {
-  waitUntil(
-    (async () => {
-      const fragments = components.get(OBC.FragmentsManager);
-      const workerUrl = await FRAGS.FragmentsModels.getWorker();
-      fragments.init(await FRAGS.toClassicWorker(workerUrl), {
-        classicWorker: true,
-      });
-    })(),
-    "Fragments Core",
-  );
-
-  waitUntil(
-    (async () => {
-      const loader = components.get(OBC.IfcLoader);
-      await loader.setup();
-    })(),
-    "IFC Loader",
-  );
-
-  return { components, client };
-};
-
-// Each key must match an area name used in at least one layout template.
-app.elements = {
-  viewer: () =>
-    html`<top-viewer><top-viewer-tools></top-viewer-tools></top-viewer>`,
-};
-
-// CSS grid-template shorthand. Area names are the keys for app.elements.
-// "." creates an empty unnamed cell and is never rendered.
-app.layouts = {
-  main: {
-    label: "Main",
-    icon: "solar:3d-square-bold",
-    template: `"viewer" 1fr / 1fr`,
-  },
-};
-
-app.layout = "main";
-
-// forceLoading keeps the boot screen visible even after setup completes.
-// Useful during development to inspect the loading UI without real async tasks.
-// app.forceLoading = true;
-
-const container = document.getElementById("that-open-app") ?? document.body;
-container.appendChild(app);
-document.body.style.margin = "0";
+/* MD
+  ## top-app
+  ---
+  Front-end developers building BIM web apps need to coordinate several async
+  initialization steps before the UI can be shown — loading the engine, preparing
+  fragment workers, registering loaders — and users need visible feedback on what
+  is happening during that wait, rather than a blank screen.
+
+  top-app is the platform's root shell element. It manages the full boot sequence,
+  tracks each async setup task individually, shows a labelled loading screen until
+  every task completes, and then mounts the app's visual layout.
+
+  This tutorial covers initializing the platform client and registering all
+  platform web components; registering two async setup tasks — the fragment worker
+  and the IFC loader — each with its own loading-screen label; declaring a named
+  layout area as a CSS grid template; wiring a 3D viewer into that layout; and
+  using a flag to keep the loading screen visible during development.
+
+  By the end, you'll have a working app shell that boots the engine, shows a
+  step-by-step loading screen, and mounts a 3D viewer once every setup task
+  resolves.
+*/
+
+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 type { App } from "./index";
+
+
+const client = PlatformClient.fromPlatformContext();
+
+// UIManager must be in the setup call: it registers all platform web components
+// (top-app, top-viewer, top-viewer-tools, etc.) before the DOM renders.
+const { components } = (await client.setup(
+  { OBC, OBF, BUI, THREE, FRAGS },
+  { uuid: UIManager.uuid },
+)) as { components: OBC.Components };
+
+components.get(UIManager).init();
+
+const app = document.createElement("top-app") as unknown as App;
+
+// setup runs synchronously and returns { components, client }.
+// waitUntil registers async tasks that appear as labelled steps in the loading screen.
+// All tasks run in parallel; top-app mounts only after every promise resolves.
+app.setup = (waitUntil) => {
+  waitUntil(
+    (async () => {
+      const fragments = components.get(OBC.FragmentsManager);
+      const workerUrl = await FRAGS.FragmentsModels.getWorker();
+      fragments.init(await FRAGS.toClassicWorker(workerUrl), {
+        classicWorker: true,
+      });
+    })(),
+    "Fragments Core",
+  );
+
+  waitUntil(
+    (async () => {
+      const loader = components.get(OBC.IfcLoader);
+      await loader.setup();
+    })(),
+    "IFC Loader",
+  );
+
+  return { components, client };
+};
+
+// Each key must match an area name used in at least one layout template.
+app.elements = {
+  viewer: () =>
+    html`<top-viewer><top-viewer-tools></top-viewer-tools></top-viewer>`,
+};
+
+// CSS grid-template shorthand. Area names are the keys for app.elements.
+// "." creates an empty unnamed cell and is never rendered.
+app.layouts = {
+  main: {
+    label: "Main",
+    icon: "solar:3d-square-bold",
+    template: `"viewer" 1fr / 1fr`,
+  },
+};
+
+app.layout = "main";
+
+// forceLoading keeps the boot screen visible even after setup completes.
+// Useful during development to inspect the loading UI without real async tasks.
+// app.forceLoading = true;
+
+const container = document.getElementById("that-open-app") ?? document.body;
+container.appendChild(app);
+document.body.style.margin = "0";

package/src/built-in/UIManager/src/app/examples/AppState/example.ts

@@ -1,140 +1,140 @@
-/* MD
-  ## Shared reactive state with AppState
-  ---
-  Developers building interactive BIM panels often need sibling components — a
-  filter selector and a results table, for example — to stay in sync without a
-  shared parent. Lifting state to a common ancestor and threading it down as props
-  works for shallow trees but becomes unwieldy as the component tree grows.
-
-  top-app provides a typed reactive state object available to every component in
-  the tree through context. Any component can write to it, and all subscribers
-  re-render automatically — no shared parent required.
-
-  This tutorial covers defining a typed payload for custom app state; building a
-  filter selector that updates shared state on button click; building a results
-  counter that reads the current filter and count from shared state; composing both
-  into a panel inside a top-app layout; and noting when the shared state is
-  available relative to the engine boot sequence.
-
-  By the end, you'll have two independent components that stay in sync through
-  shared reactive state — a filter selector and a results counter that reflect each
-  other's changes without any direct coupling between them.
-*/
-
-import { html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { consume } from "@lit/context";
-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 {
-  appStateContext,
-  AppState,
-  AppStateController,
-  type App,
-} from "../../index";
-
-// Define a typed payload for this app's custom state.
-type MyAppState = { selectedFilter: string; count: number };
-
-// AppStateController subscribes to appStateContext and triggers a re-render
-// on every setCustom call — across any component in the tree that holds one.
-@customElement("filter-selector")
-class FilterSelector extends LitElement {
-  @consume({ context: appStateContext, subscribe: true })
-  @state()
-  private _appState?: AppState;
-
-  // Declare the controller — the LitElement lifecycle handles subscription.
-  private _stateCtrl = new AppStateController<MyAppState>(this, () => this._appState);
-
-  render() {
-    const filters = ["All", "Walls", "Slabs", "Columns"];
-    const active = this._stateCtrl.custom?.selectedFilter ?? "All";
-    return html`
-      <bim-panel-section label="Filter" icon="solar:filter-bold">
-        ${filters.map(
-          (f) => html`
-            <bim-button
-              .label=${f}
-              ?active=${active === f}
-              @click=${() => {
-                this._appState?.setCustom<MyAppState>({ selectedFilter: f, count: 0 });
-              }}
-            ></bim-button>
-          `,
-        )}
-      </bim-panel-section>
-    `;
-  }
-}
-
-@customElement("result-counter")
-class ResultCounter extends LitElement {
-  @consume({ context: appStateContext, subscribe: true })
-  @state()
-  private _appState?: AppState;
-
-  private _stateCtrl = new AppStateController<MyAppState>(this, () => this._appState);
-
-  render() {
-    const { selectedFilter = "All", count = 0 } = this._stateCtrl.custom ?? {};
-    return html`
-      <bim-panel-section label="Results" icon="solar:list-bold">
-        <bim-label>${count} elements match "${selectedFilter}"</bim-label>
-      </bim-panel-section>
-    `;
-  }
-}
-
-// ---- app wiring ----
-
-const client = PlatformClient.fromPlatformContext();
-const { components } = (await client.setup(
-  { OBC, OBF, BUI, THREE, FRAGS },
-  { uuid: UIManager.uuid },
-)) as { components: OBC.Components };
-components.get(UIManager).init();
-
-const app = document.createElement("top-app") as unknown as App;
-
-// appState is available immediately — before setup completes — so components
-// that only consume appStateContext can render while the engine is still booting.
-app.setup = (waitUntil) => {
-  waitUntil(
-    (async () => {
-      const fragments = components.get(OBC.FragmentsManager);
-      const workerUrl = await FRAGS.FragmentsModels.getWorker();
-      fragments.init(await FRAGS.toClassicWorker(workerUrl), {
-        classicWorker: true,
-      });
-    })(),
-    "Fragments Core",
-  );
-  return { components, client };
-};
-
-app.elements = {
-  panel: () => html`
-    <bim-panel label="State Demo">
-      <filter-selector></filter-selector>
-      <result-counter></result-counter>
-    </bim-panel>
-  `,
-};
-
-app.layouts = {
-  main: {
-    label: "Main",
-    icon: "solar:home-bold",
-    template: `"panel" 1fr / 22rem`,
-  },
-};
-app.layout = "main";
-
-const container = document.getElementById("that-open-app") ?? document.body;
-container.appendChild(app);
-document.body.style.margin = "0";
+/* MD
+  ## Shared reactive state with AppState
+  ---
+  Developers building interactive BIM panels often need sibling components — a
+  filter selector and a results table, for example — to stay in sync without a
+  shared parent. Lifting state to a common ancestor and threading it down as props
+  works for shallow trees but becomes unwieldy as the component tree grows.
+
+  top-app provides a typed reactive state object available to every component in
+  the tree through context. Any component can write to it, and all subscribers
+  re-render automatically — no shared parent required.
+
+  This tutorial covers defining a typed payload for custom app state; building a
+  filter selector that updates shared state on button click; building a results
+  counter that reads the current filter and count from shared state; composing both
+  into a panel inside a top-app layout; and noting when the shared state is
+  available relative to the engine boot sequence.
+
+  By the end, you'll have two independent components that stay in sync through
+  shared reactive state — a filter selector and a results counter that reflect each
+  other's changes without any direct coupling between them.
+*/
+
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { consume } from "@lit/context";
+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 {
+  appStateContext,
+  AppState,
+  AppStateController,
+  type App,
+} from "../../index";
+
+// Define a typed payload for this app's custom state.
+type MyAppState = { selectedFilter: string; count: number };
+
+// AppStateController subscribes to appStateContext and triggers a re-render
+// on every setCustom call — across any component in the tree that holds one.
+@customElement("filter-selector")
+class FilterSelector extends LitElement {
+  @consume({ context: appStateContext, subscribe: true })
+  @state()
+  private _appState?: AppState;
+
+  // Declare the controller — the LitElement lifecycle handles subscription.
+  private _stateCtrl = new AppStateController<MyAppState>(this, () => this._appState);
+
+  render() {
+    const filters = ["All", "Walls", "Slabs", "Columns"];
+    const active = this._stateCtrl.custom?.selectedFilter ?? "All";
+    return html`
+      <bim-panel-section label="Filter" icon="solar:filter-bold">
+        ${filters.map(
+          (f) => html`
+            <bim-button
+              .label=${f}
+              ?active=${active === f}
+              @click=${() => {
+                this._appState?.setCustom<MyAppState>({ selectedFilter: f, count: 0 });
+              }}
+            ></bim-button>
+          `,
+        )}
+      </bim-panel-section>
+    `;
+  }
+}
+
+@customElement("result-counter")
+class ResultCounter extends LitElement {
+  @consume({ context: appStateContext, subscribe: true })
+  @state()
+  private _appState?: AppState;
+
+  private _stateCtrl = new AppStateController<MyAppState>(this, () => this._appState);
+
+  render() {
+    const { selectedFilter = "All", count = 0 } = this._stateCtrl.custom ?? {};
+    return html`
+      <bim-panel-section label="Results" icon="solar:list-bold">
+        <bim-label>${count} elements match "${selectedFilter}"</bim-label>
+      </bim-panel-section>
+    `;
+  }
+}
+
+// ---- app wiring ----
+
+const client = PlatformClient.fromPlatformContext();
+const { components } = (await client.setup(
+  { OBC, OBF, BUI, THREE, FRAGS },
+  { uuid: UIManager.uuid },
+)) as { components: OBC.Components };
+components.get(UIManager).init();
+
+const app = document.createElement("top-app") as unknown as App;
+
+// appState is available immediately — before setup completes — so components
+// that only consume appStateContext can render while the engine is still booting.
+app.setup = (waitUntil) => {
+  waitUntil(
+    (async () => {
+      const fragments = components.get(OBC.FragmentsManager);
+      const workerUrl = await FRAGS.FragmentsModels.getWorker();
+      fragments.init(await FRAGS.toClassicWorker(workerUrl), {
+        classicWorker: true,
+      });
+    })(),
+    "Fragments Core",
+  );
+  return { components, client };
+};
+
+app.elements = {
+  panel: () => html`
+    <bim-panel label="State Demo">
+      <filter-selector></filter-selector>
+      <result-counter></result-counter>
+    </bim-panel>
+  `,
+};
+
+app.layouts = {
+  main: {
+    label: "Main",
+    icon: "solar:home-bold",
+    template: `"panel" 1fr / 22rem`,
+  },
+};
+app.layout = "main";
+
+const container = document.getElementById("that-open-app") ?? document.body;
+container.appendChild(app);
+document.body.style.margin = "0";