@thatopen/services 0.3.11 → 0.3.13

package/src/cli/templates/app/src/setups/tool-mode-manager.ts

@@ -1,156 +0,0 @@
-import * as OBC from "@thatopen/components";
-import * as OBF from "@thatopen/components-front";
-
-/**
- * Central single-active-tool manager (explicit-state discipline per the grimoire
- * interaction-editing/modal-tools/state-machine-discipline): exactly ONE modal
- * tool (Section / Measure / future walkthrough …) is active at a time, and while
- * ANY tool is active the viewer's passive interactions — the Hoverer overlay and
- * the Highlighter (hover + click-select) — are suppressed so they don't fight the
- * tool's own picking. Both are restored when the last tool exits.
- *
- * A tool registers a {@link ManagedTool} and calls {@link setActive} on enter /
- * {@link clearActive} on exit. When another tool takes over, the manager calls
- * the previous tool's {@link ManagedTool.onDeactivate} (LOCAL teardown only — it
- * must not call back into the manager, to avoid re-entrancy).
- *
- * Reachable as a per-Components singleton via {@link toolModeManager} so panels
- * (and later walkthrough/others) can route through the same instance. (Flagging:
- * a plain memoised singleton, not an OBC.Component — say if you'd rather it be
- * components.get()-able and I'll wrap it.)
- */
-export interface ManagedTool {
-  readonly id: string;
-  /**
-   * Human-readable description of what the user is doing while this tool is
-   * active (e.g. "Drawing clipping plane", "Measuring length"). Surfaced by the
-   * active-tool HUD — which only reads this, so any future tool that registers a
-   * label shows up there with no HUD changes. May be a function for tools whose
-   * label varies while active (call {@link ToolModeManager.refresh} to update).
-   */
-  readonly label: string | (() => string);
-  /** Optional mdi icon name (e.g. "mdi:scissors-cutting") shown next to the label. */
-  readonly icon?: string;
-  /** Called when another tool takes over; do LOCAL teardown only (no manager calls). */
-  onDeactivate(): void;
-}
-
-export class ToolModeManager {
-  // Always a real tool — the resting default is `selectTool` (never null), so
-  // SELECT is a first-class state: reflected by the HUD, and entered via the same
-  // setActive() exclusivity path as every other tool (so clicking Select
-  // deactivates whatever modal tool was active, just like clip↔measure).
-  private _active: ManagedTool;
-  private _suppressed = false;
-  private _prevHovererEnabled = true;
-  private _prevHighlighterEnabled = true;
-
-  /** Fires whenever the active tool changes (carries the new active tool, which
-   *  is `selectTool` in the default mode). `| null` kept for HUD back-compat. */
-  readonly onActiveChanged = new OBC.Event<ManagedTool | null>();
-
-  /**
-   * The default SELECT tool — plain object hover + click-select. It is the
-   * resting active tool (on load and after any modal tool exits) and is the ONE
-   * tool that does NOT suppress viewer interaction (Select IS that mode).
-   */
-  private readonly selectTool: ManagedTool = {
-    id: ToolModeManager.SELECT_ID,
-    label: "Select",
-    icon: "mdi:cursor-default",
-    onDeactivate: () => {},
-  };
-
-  constructor(private readonly components: OBC.Components) {
-    this._active = this.selectTool;
-  }
-
-  /**
-   * Id of the implicit default mode: idle / plain object-selection. Active on load
-   * and whenever no modal tool is engaged. The Select toolbar button maps to it,
-   * and the HUD reflects it as the resting state.
-   */
-  static readonly SELECT_ID = "select";
-
-  get active(): ManagedTool {
-    return this._active;
-  }
-
-  /** The active tool's id ({@link ToolModeManager.SELECT_ID} in the default mode). */
-  getActiveId(): string {
-    return this._active.id;
-  }
-
-  /** True in the default object-selection mode (no modal tool active). */
-  get isSelectMode(): boolean {
-    return this._active === this.selectTool;
-  }
-
-  /**
-   * Return to SELECT (the default): exit whatever modal tool is active so the
-   * viewer is back to idle hover + click-select. No-op if already in select. The
-   * Select toolbar button calls this; individual tools still exit via clearActive.
-   */
-  selectMode() {
-    this.setActive(this.selectTool);
-  }
-
-  /** Make `tool` the single active tool, deactivating the previous one. */
-  setActive(tool: ManagedTool) {
-    if (this._active === tool) return;
-    this._active.onDeactivate(); // tear down the previous tool (selectTool: no-op)
-    this._active = tool;
-    // Suppress passive hover/select for MODAL tools only — selectTool IS that mode.
-    this._applySuppression(tool !== this.selectTool);
-    this.onActiveChanged.trigger(this._active);
-  }
-
-  /** Exit `tool` back to the default SELECT tool (no-op unless it's the active one). */
-  clearActive(tool: ManagedTool) {
-    if (this._active !== tool) return;
-    this.setActive(this.selectTool);
-  }
-
-  /**
-   * Re-emit the current active tool without changing it — for a tool whose
-   * dynamic {@link ManagedTool.label} changed while it stayed active (e.g. the
-   * measurement tool switching length → area), so the HUD re-reads the label.
-   */
-  refresh() {
-    this.onActiveChanged.trigger(this._active);
-  }
-
-  private _applySuppression(suppress: boolean) {
-    if (suppress === this._suppressed) return; // only act on a real transition
-    const hoverer = this.components.get(OBF.Hoverer);
-    const highlighter = this.components.get(OBF.Highlighter);
-    if (suppress) {
-      this._prevHovererEnabled = hoverer.enabled;
-      this._prevHighlighterEnabled = highlighter.enabled;
-      hoverer.enabled = false;
-      highlighter.enabled = false;
-    } else {
-      hoverer.enabled = this._prevHovererEnabled;
-      highlighter.enabled = this._prevHighlighterEnabled;
-    }
-    this._suppressed = suppress;
-  }
-}
-
-// Real OBC.Component wrapper → per-`components` singleton resolved by UUID, so
-// the coordinator is shared across bundle boundaries (toolbar built-in + tools +
-// the app's panels all drive the SAME manager).
-export class ToolModeManagerComponent extends OBC.Component {
-  static readonly uuid = "9b2c7e10-3a4f-4c21-8b6d-1f0a2c3d4e53" as const;
-  enabled = true;
-  readonly manager: ToolModeManager;
-  constructor(components: OBC.Components) {
-    super(components);
-    components.add(ToolModeManagerComponent.uuid, this);
-    this.manager = new ToolModeManager(components);
-  }
-}
-
-/** Per-Components singleton accessor. */
-export const toolModeManager = (components: OBC.Components): ToolModeManager =>
-  components.get(ToolModeManagerComponent).manager;

package/src/cli/templates/app/src/setups/tool-mode.ts

@@ -1,23 +0,0 @@
-/**
- * Controller returned by each toolbar mode-tool setup (`clipper`,
- * `lengthMeasurement`, `areaMeasurement`, …). The toolbar — owned by Worker 2 —
- * calls {@link activate} to enter the tool's mode and {@link deactivate} to exit
- * it, and guarantees only one mode is active at a time (mutual exclusion).
- *
- * Contract:
- *  - `activate()`   — enable the tool's pointer/keyboard listeners + cursor.
- *  - `deactivate()` — remove those listeners and drop any transient in-progress
- *                     state. It must NOT discard finished results (e.g. existing
- *                     section planes / measurements persist across mode switches).
- *  Both are idempotent.
- */
-export interface ModeTool {
-  /** Human label, used for the toolbar button tooltip. */
-  label: string;
-  /** Iconify icon name, e.g. "mdi:scissors-cutting". */
-  icon: string;
-  /** Enter the tool's mode. */
-  activate(): void;
-  /** Exit the tool's mode and clean up transient state. */
-  deactivate(): void;
-}

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

@@ -1,229 +0,0 @@
-import * as OBC from "@thatopen/components";
-import * as BUI from "@thatopen/ui";
-import { cameraTools } from "./camera-tools";
-import { hider } from "./hider";
-import { clipper } from "./clipper";
-import { lengthMeasurement, areaMeasurement } from "./measurements";
-import type { HelperPanelController } from "./helper-panel";
-import { stylesTool } from "./styles-panel";
-
-/**
- * A floating tool palette centered at the BOTTOM-CENTER of the viewport. Built
- * on BUI's native `bim-toolbar` (icon-only `bim-button`s with hover tooltips),
- * placed in a `bim-grid floating` overlay so the bar is interactive while empty
- * areas click through to the 3D scene. Styled to match the cards (dark
- * `bg-base`, rounded, subtle shadow).
- *
- * Tool kinds (the modules' integration contract):
- *  - ACTION  `{ label, icon, run() }`             — fire-and-forget.
- *  - MODE    `{ label, icon, activate(), deactivate() }` — mutually exclusive:
- *            activating one deactivates the current; clicking the active one
- *            turns it off.
- *  - TOGGLE  `{ label, icon, activate(), deactivate(), active?() }` — independent
- *            on/off (e.g. ortho).
- *  - PANEL   `{ label, icon, render(refresh) }` — toggles the bottom-left helper
- *            panel showing that tool's content (e.g. Styles). Mutually exclusive
- *            among panel tools; INDEPENDENT of viewport modes (opening Styles
- *            doesn't cancel an active section/measure mode, and vice versa).
- *
- * Only this file assembles the toolbar; other workers deliver tool controllers
- * (camera here; hider from hider.ts; clipper/measure to be added when ready).
- *
- * @param components engine components
- * @param container the viewport element to overlay
- */
-type ActionTool = {
-  kind: "action";
-  label: string;
-  icon: string;
-  run: () => void | Promise<void>;
-};
-type ModeTool = {
-  kind: "mode";
-  label: string;
-  icon: string;
-  activate: () => void | Promise<void>;
-  deactivate: () => void | Promise<void>;
-};
-type ToggleTool = {
-  kind: "toggle";
-  label: string;
-  icon: string;
-  activate: () => void | Promise<void>;
-  deactivate: () => void | Promise<void>;
-  active?: () => boolean;
-};
-type PanelTool = {
-  kind: "panel";
-  label: string;
-  icon: string;
-  render: (refresh: () => void) => unknown;
-};
-type Tool = ActionTool | ModeTool | ToggleTool | PanelTool;
-
-export const toolbar = (
-  components: OBC.Components,
-  container: HTMLElement,
-  helper: HelperPanelController, // the left-stack helper card (panel tools drive it)
-) => {
-  const cam = cameraTools(components);
-  const vis = hider(components);
-  // World for the MODE tools (clipper/measurements need a world + its canvas).
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const world = [...components.get(OBC.Worlds).list.values()][0] as any;
-  // MODE controllers ({ label, icon, activate, deactivate }) — only built when a
-  // world exists (it does: the viewport mounts before the toolbar).
-  const modeTools: Tool[] = world
-    ? [
-        { kind: "mode", ...clipper(components, world) },
-        { kind: "mode", ...lengthMeasurement(components, world) },
-        { kind: "mode", ...areaMeasurement(components, world) },
-      ]
-    : [];
-
-  // Groups → rendered as separate toolbar sections (auto-divider between them).
-  // Order: [view: fit, ortho] | [tools: section/measure — pending] | [visibility].
-  const groups: Tool[][] = [
-    [
-      { kind: "action", label: "Zoom to fit", icon: cam.fitAll.icon, run: cam.fitAll.run },
-      {
-        kind: "toggle",
-        label: "Orthographic",
-        icon: cam.orthoToggle.icon,
-        activate: cam.orthoToggle.activate,
-        deactivate: cam.orthoToggle.deactivate,
-        active: cam.orthoToggle.active,
-      },
-    ] as Tool[],
-    // Mode tools (section / measure) — mutually exclusive.
-    modeTools,
-    [
-      { kind: "action", label: "Hide", icon: "mdi:eye-off-outline", run: vis.hideSelected },
-      { kind: "action", label: "Isolate", icon: "mdi:select-search", run: vis.isolateSelected },
-      { kind: "action", label: "Show all", icon: "mdi:eye-outline", run: vis.showAll },
-    ] as Tool[],
-    // Panel tools (open the bottom-left helper). Styles needs a world.
-    world
-      ? ([{ kind: "panel", ...stylesTool(components, world) }] as Tool[])
-      : [],
-  ].filter((g) => g.length > 0);
-
-  // ── Active-state bookkeeping ───────────────────────────────────
-  let activeMode: ModeTool | null = null; // mutual exclusion across all modes
-  let activePanel: PanelTool | null = null; // exclusive among panel tools
-  const onToggle = new Set<ToggleTool>(); // independent toggles that are on
-
-  const isActive = (t: Tool) =>
-    t.kind === "mode"
-      ? t === activeMode
-      : t.kind === "panel"
-        ? t === activePanel
-        : t.kind === "toggle"
-          ? (t.active ? t.active() : onToggle.has(t))
-          : false;
-
-  const onClick = async (t: Tool) => {
-    if (t.kind === "action") {
-      await t.run();
-    } else if (t.kind === "mode") {
-      if (activeMode === t) {
-        await t.deactivate();
-        activeMode = null;
-      } else {
-        if (activeMode) await activeMode.deactivate();
-        await t.activate();
-        activeMode = t;
-      }
-    } else if (t.kind === "panel") {
-      // Toggle the helper panel; exclusive among panel tools, independent of modes.
-      if (activePanel === t) {
-        activePanel = null;
-        helper.clear();
-      } else {
-        activePanel = t;
-        helper.show({
-          title: t.label,
-          icon: t.icon,
-          render: () => t.render(() => helper.refresh()),
-        });
-      }
-    } else {
-      const on = isActive(t);
-      if (on) {
-        await t.deactivate();
-        onToggle.delete(t);
-      } else {
-        await t.activate();
-        onToggle.add(t);
-      }
-    }
-    refresh();
-  };
-
-  let tick = 0;
-  const refresh = () => barUpdate({ tick: (tick += 1) });
-
-  const [bar, barUpdate] = BUI.Component.create<HTMLElement, { tick: number }>(
-    // Param required: BUI.Component.create returns a single element (not the
-    // [element, update] tuple) when the template has arity 0.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    (_state) => BUI.html`
-      <bim-toolbar
-        style="
-          pointer-events: auto;
-          padding: 0.15rem;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-          /* Uniform rhythm: inter-button gap = G; section padding = G/2 so the
-             space across a divider (padA + padB) equals the inter-button gap and
-             the divider sits centered with equal margins. */
-        "
-      >
-        ${groups.map(
-          (group) => BUI.html`
-            <bim-toolbar-section label-hidden>
-              ${group.map(
-                (t) => BUI.html`
-                  <bim-button
-                    icon=${t.icon}
-                    ?active=${isActive(t)}
-                    @click=${() => onClick(t)}
-                    style="width: 1.9rem; min-width: 1.9rem; height: 1.9rem;"
-                  ><bim-tooltip placement="top">${t.label}</bim-tooltip></bim-button>
-                `,
-              )}
-            </bim-toolbar-section>
-          `,
-        )}
-      </bim-toolbar>
-    `,
-    { tick: 0 },
-  );
-
-  // Floating grid: bar docked bottom-center. Row 1 (1fr) empty filler above;
-  // row 2 (auto) holds the bar in the center column, flanked by 1fr columns so
-  // it stays horizontally centered. Empty areas click through.
-  const grid = BUI.Component.create(() => {
-    const onCreated = (element?: Element) => {
-      if (!element) return;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const g = element as any;
-      g.elements = { bar };
-      g.layouts = {
-        main: {
-          template: `
-            "fillL  fillC fillR" 1fr
-            "restL  bar   restR" auto
-            / 1fr auto 1fr
-          `,
-        },
-      };
-      g.layout = "main";
-    };
-    return BUI.html`
-      <bim-grid style="padding: 1rem;" ${BUI.ref(onCreated)} floating></bim-grid>
-    `;
-  });
-  container.append(grid);
-
-  return bar;
-};

package/src/cli/templates/app/src/setups/ui-manager.ts

@@ -1,27 +0,0 @@
-import * as OBC from "@thatopen/components";
-import * as BUI from "@thatopen/ui";
-import { UIManager } from "@thatopen/services";
-import {
-  appInfoSectionTemplate,
-  AppInfoSectionState,
-  cloudRunnerSectionTemplate,
-  CloudRunnerSectionState,
-} from "../ui-components";
-
-export type CustomUIs = {
-  appInfoSection: { type: BUI.PanelSection; state: AppInfoSectionState };
-  cloudRunnerSection: { type: BUI.PanelSection; state: CloudRunnerSectionState };
-};
-
-export const getUIManager = (components: OBC.Components) =>
-  components.get(UIManager<CustomUIs>);
-
-export const uiManager = (components: OBC.Components) => {
-  const uis = getUIManager(components);
-  uis.registerTemplate("appInfoSection", {
-    template: appInfoSectionTemplate,
-  });
-  uis.registerTemplate("cloudRunnerSection", {
-    template: cloudRunnerSectionTemplate,
-  });
-};