@thatopen/services 0.5.0 → 0.7.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";

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

@@ -1,159 +1,159 @@
-/* MD
-  ## Persistent banners with top:banner
-  ---
-  Some application states need a persistent, visible indicator that stays on
-  screen until the state is explicitly cleared — an archived-files mode, a
-  read-only permission warning, a degraded-connectivity notice. A toast
-  auto-dismisses after a few seconds, which is wrong for these cases. A modal
-  blocks interaction entirely, which is too heavy.
-
-  top-app provides a banner slot at the top of the layout that occupies real
-  space (pushes content down) and stays visible until dismissed programmatically.
-  Any descendant component can show or hide it by dispatching standard DOM events
-  — no reference to the root element required.
-
-  This tutorial covers showing a banner from a child component by dispatching
-  top:banner; customising the banner type, icon, message, and description;
-  making a banner user-dismissible with the dismissible flag; and hiding it
-  programmatically with top:banner:hide.
-
-  By the end, you'll have an app where a panel can activate and deactivate a
-  persistent banner that pushes the layout content down while it is visible.
-*/
-
-import { html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
-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";
-
-// A child component that controls a banner without holding a reference to top-app.
-// It dispatches top:banner to show and top:banner:hide to remove it.
-@customElement("banner-controller")
-class BannerController extends LitElement {
-  @state() private _active = false;
-
-  private _showReadOnly() {
-    this._active = true;
-
-    // top:banner shows a persistent bar at the top of the nearest top-app ancestor.
-    // It replaces any existing banner — only one banner is shown at a time.
-    this.dispatchEvent(
-      new CustomEvent("top:banner", {
-        bubbles: true,
-        composed: true,
-        detail: {
-          type: "warning",
-          icon: "tabler:lock",
-          message: "Read-only mode",
-          description: "You do not have write permissions on this project.",
-          // dismissible:true adds a close button on the banner itself.
-          // Omit it (or set false) when the banner must only be cleared by code.
-          dismissible: true,
-        },
-      }),
-    );
-  }
-
-  private _showArchived() {
-    this._active = true;
-
-    // Calling top:banner again replaces the previous banner immediately.
-    this.dispatchEvent(
-      new CustomEvent("top:banner", {
-        bubbles: true,
-        composed: true,
-        detail: {
-          type: "warning",
-          icon: "tabler:archive",
-          message: "Viewing archived files",
-          description: "Archived items are permanently deleted after 30 days.",
-          // No dismissible — this banner should only be cleared when the mode exits.
-        },
-      }),
-    );
-  }
-
-  private _hide() {
-    this._active = false;
-
-    // top:banner:hide clears the current banner unconditionally.
-    this.dispatchEvent(
-      new CustomEvent("top:banner:hide", { bubbles: true, composed: true }),
-    );
-  }
-
-  render() {
-    return html`
-      <bim-panel label="Banner Controller">
-        <bim-panel-section label="Banners" icon="tabler:message">
-          <bim-button
-            label="Show read-only banner (dismissible)"
-            icon="tabler:lock"
-            @click=${this._showReadOnly}
-          ></bim-button>
-          <bim-button
-            label="Show archived banner (programmatic only)"
-            icon="tabler:archive"
-            @click=${this._showArchived}
-          ></bim-button>
-          <bim-button
-            label="Hide banner"
-            icon="tabler:x"
-            ?disabled=${!this._active}
-            @click=${this._hide}
-          ></bim-button>
-        </bim-panel-section>
-      </bim-panel>
-    `;
-  }
-}
-
-// ---- 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;
-
-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 = {
-  viewer: () =>
-    html`<top-viewer><top-viewer-tools></top-viewer-tools></top-viewer>`,
-  panel: () => html`<banner-controller></banner-controller>`,
-};
-
-app.base = "viewer";
-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
+  ## Persistent banners with top:banner
+  ---
+  Some application states need a persistent, visible indicator that stays on
+  screen until the state is explicitly cleared — an archived-files mode, a
+  read-only permission warning, a degraded-connectivity notice. A toast
+  auto-dismisses after a few seconds, which is wrong for these cases. A modal
+  blocks interaction entirely, which is too heavy.
+
+  top-app provides a banner slot at the top of the layout that occupies real
+  space (pushes content down) and stays visible until dismissed programmatically.
+  Any descendant component can show or hide it by dispatching standard DOM events
+  — no reference to the root element required.
+
+  This tutorial covers showing a banner from a child component by dispatching
+  top:banner; customising the banner type, icon, message, and description;
+  making a banner user-dismissible with the dismissible flag; and hiding it
+  programmatically with top:banner:hide.
+
+  By the end, you'll have an app where a panel can activate and deactivate a
+  persistent banner that pushes the layout content down while it is visible.
+*/
+
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+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";
+
+// A child component that controls a banner without holding a reference to top-app.
+// It dispatches top:banner to show and top:banner:hide to remove it.
+@customElement("banner-controller")
+class BannerController extends LitElement {
+  @state() private _active = false;
+
+  private _showReadOnly() {
+    this._active = true;
+
+    // top:banner shows a persistent bar at the top of the nearest top-app ancestor.
+    // It replaces any existing banner — only one banner is shown at a time.
+    this.dispatchEvent(
+      new CustomEvent("top:banner", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          type: "warning",
+          icon: "tabler:lock",
+          message: "Read-only mode",
+          description: "You do not have write permissions on this project.",
+          // dismissible:true adds a close button on the banner itself.
+          // Omit it (or set false) when the banner must only be cleared by code.
+          dismissible: true,
+        },
+      }),
+    );
+  }
+
+  private _showArchived() {
+    this._active = true;
+
+    // Calling top:banner again replaces the previous banner immediately.
+    this.dispatchEvent(
+      new CustomEvent("top:banner", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          type: "warning",
+          icon: "tabler:archive",
+          message: "Viewing archived files",
+          description: "Archived items are permanently deleted after 30 days.",
+          // No dismissible — this banner should only be cleared when the mode exits.
+        },
+      }),
+    );
+  }
+
+  private _hide() {
+    this._active = false;
+
+    // top:banner:hide clears the current banner unconditionally.
+    this.dispatchEvent(
+      new CustomEvent("top:banner:hide", { bubbles: true, composed: true }),
+    );
+  }
+
+  render() {
+    return html`
+      <bim-panel label="Banner Controller">
+        <bim-panel-section label="Banners" icon="tabler:message">
+          <bim-button
+            label="Show read-only banner (dismissible)"
+            icon="tabler:lock"
+            @click=${this._showReadOnly}
+          ></bim-button>
+          <bim-button
+            label="Show archived banner (programmatic only)"
+            icon="tabler:archive"
+            @click=${this._showArchived}
+          ></bim-button>
+          <bim-button
+            label="Hide banner"
+            icon="tabler:x"
+            ?disabled=${!this._active}
+            @click=${this._hide}
+          ></bim-button>
+        </bim-panel-section>
+      </bim-panel>
+    `;
+  }
+}
+
+// ---- 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;
+
+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 = {
+  viewer: () =>
+    html`<top-viewer><top-viewer-tools></top-viewer-tools></top-viewer>`,
+  panel: () => html`<banner-controller></banner-controller>`,
+};
+
+app.base = "viewer";
+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";