@thatopen/services 0.1.3 → 0.3.0

package/src/cli/templates/app/src/setups/right-sidebar.ts

@@ -0,0 +1,178 @@
+import * as BUI from "@thatopen/ui";
+
+/**
+ * Mounts several panels as SEPARATE cards stacked vertically on the RIGHT,
+ * together spanning the full viewport height. One right-docked `bim-grid
+ * floating` holds one row per region (heights split by `grow`); the floating
+ * grid's built-in 1rem gap shows between the cards, and its empty "rest" column
+ * clicks through to the model. Each region is its own `bim-panel` (own
+ * header/border), so they read as distinct cards — not one card with a divider.
+ *
+ * Each panel element should be `height: 100%` so it fills its row and scrolls
+ * internally when its content is tall.
+ *
+ * @param container the viewport element to overlay
+ * @param regions the panels to stack, top to bottom
+ * @returns the floating grid element (already appended to the container)
+ */
+export interface StackRegion {
+  /** The panel element for this region. */
+  element: HTMLElement;
+  /** Relative height share (CSS grid `fr`). Defaults to 1 (equal split). */
+  grow?: number;
+}
+
+export const rightStack = (container: HTMLElement, regions: StackRegion[]) => {
+  // ── Collapse toggle (mirror of the left files panel's) ─────────
+  // A bare chevron in its own thin grid column in the gutter, just OUTSIDE the
+  // cards (to their left). Collapsing swaps the grid layout to drop the card
+  // columns entirely; the chevron column stays. When collapsed the chevron sits
+  // inset from the right edge (the grid's 1rem padding), so it stays in view.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let gridEl: any = null;
+  let collapsed = false;
+
+  const [toggle, toggleUpdate] = BUI.Component.create<
+    HTMLElement,
+    { collapsed: boolean }
+  >(
+    (s) => BUI.html`
+      <div
+        style="
+          height: 100%; display: flex; align-items: flex-start;
+          pointer-events: none; padding-top: 0.5rem; padding-right: 0.1rem;
+        "
+      >
+        <span
+          role="button"
+          title=${s.collapsed ? "Show panel" : "Hide panel"}
+          @click=${() => setCollapsed(!s.collapsed)}
+          style="
+            pointer-events: auto; cursor: pointer; display: inline-flex;
+            color: var(--bim-ui_bg-contrast-80, #c9c9c9);
+          "
+        ><bim-icon
+          icon=${s.collapsed ? "mdi:chevron-left" : "mdi:chevron-right"}
+          style="font-size: 1.2rem;"
+        ></bim-icon></span>
+      </div>
+    `,
+    { collapsed: false },
+  );
+
+  const setCollapsed = (v: boolean) => {
+    collapsed = v;
+    if (gridEl) gridEl.layout = v ? "collapsed" : "main";
+    toggleUpdate({ collapsed: v });
+  };
+
+  // ── Floating grid: cards docked full-height right, chevron in the gutter ──
+  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;
+      gridEl = g;
+      const names = regions.map((_, i) => `r${i}`);
+      g.elements = {
+        toggle,
+        ...Object.fromEntries(regions.map((r, i) => [names[i], r.element])),
+      };
+      // One row per region; columns: rest (1fr, click-through) | toggle | cards.
+      // The "toggle" area repeats across rows → one full-height gutter column.
+      const rows = regions
+        .map((r, i) => `"rest toggle ${names[i]}" ${r.grow ?? 1}fr`)
+        .join("\n");
+      g.layouts = {
+        main: { template: `${rows}\n/ 1fr auto auto` },
+        // Collapsed: drop the card columns; keep rest + toggle (toggle ends up
+        // near the right edge, inset by the grid's 1rem padding).
+        collapsed: { template: `"rest toggle" 1fr\n/ 1fr auto` },
+      };
+      g.layout = collapsed ? "collapsed" : "main";
+    };
+    return BUI.html`
+      <bim-grid style="padding: 1rem;" ${BUI.ref(onCreated)} floating></bim-grid>
+    `;
+  });
+  container.append(grid);
+
+  return { grid };
+};
+
+/**
+ * Mirror of {@link rightStack} for the LEFT side: cards stacked vertically on
+ * the left (full height), same 1rem gap + outer margins, with a collapse chevron
+ * in the gutter to the RIGHT of the cards (facing the viewport). Used for the
+ * Files (top) + helper (bottom) stack.
+ */
+export const leftStack = (container: HTMLElement, regions: StackRegion[]) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let gridEl: any = null;
+  let collapsed = false;
+
+  const [toggle, toggleUpdate] = BUI.Component.create<
+    HTMLElement,
+    { collapsed: boolean }
+  >(
+    (s) => BUI.html`
+      <div
+        style="
+          height: 100%; display: flex; align-items: flex-start;
+          pointer-events: none; padding-top: 0.5rem; padding-left: 0.1rem;
+        "
+      >
+        <span
+          role="button"
+          title=${s.collapsed ? "Show panel" : "Hide panel"}
+          @click=${() => setCollapsed(!s.collapsed)}
+          style="
+            pointer-events: auto; cursor: pointer; display: inline-flex;
+            color: var(--bim-ui_bg-contrast-80, #c9c9c9);
+          "
+        ><bim-icon
+          icon=${s.collapsed ? "mdi:chevron-right" : "mdi:chevron-left"}
+          style="font-size: 1.2rem;"
+        ></bim-icon></span>
+      </div>
+    `,
+    { collapsed: false },
+  );
+
+  const setCollapsed = (v: boolean) => {
+    collapsed = v;
+    if (gridEl) gridEl.layout = v ? "collapsed" : "main";
+    toggleUpdate({ collapsed: v });
+  };
+
+  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;
+      gridEl = g;
+      const names = regions.map((_, i) => `r${i}`);
+      g.elements = {
+        toggle,
+        ...Object.fromEntries(regions.map((r, i) => [names[i], r.element])),
+      };
+      // Columns: cards | toggle (gutter, facing viewport) | rest (click-through).
+      const rows = regions
+        .map((r, i) => `"${names[i]} toggle rest" ${r.grow ?? 1}fr`)
+        .join("\n");
+      g.layouts = {
+        main: { template: `${rows}\n/ auto auto 1fr` },
+        // Collapsed: drop the card columns; toggle stays at the left edge (inset
+        // by the grid's 1rem padding).
+        collapsed: { template: `"toggle rest" 1fr\n/ auto 1fr` },
+      };
+      g.layout = collapsed ? "collapsed" : "main";
+    };
+    return BUI.html`
+      <bim-grid style="padding: 1rem;" ${BUI.ref(onCreated)} floating></bim-grid>
+    `;
+  });
+  container.append(grid);
+
+  return { grid };
+};

package/src/cli/templates/app/src/setups/settings-panel.ts

@@ -0,0 +1,94 @@
+import * as BUI from "@thatopen/ui";
+import { cardHeader } from "./card-header";
+
+/**
+ * Merged SETTINGS panel (UI-reorg) — ONE scrolling bim-panel with a collapsible
+ * section per source panel (Graphics / Clip styling / Measurement / Commands).
+ * Reuses each panel's existing element verbatim.
+ *
+ * Sections use a hand-rolled light-DOM header (NOT bim-panel-section, whose
+ * header/content padding is hardcoded in shadow DOM and can't be flattened) so
+ * the section title row + its divider span the FULL panel width with no inset,
+ * and the section content sits flush. The nested bim-panel's own chrome is
+ * removed (transparent bg / no border / no radius) and its height:100% / inner
+ * scroll neutralised so it flows and the Settings panel does the single scroll —
+ * all scoped to light-DOM descendants, so bim-* widget shadow internals (sliders,
+ * dropdowns, color inputs) are untouched. Returns the `bim-panel` (no self-mount).
+ *
+ * @param sections ordered settings sections (label + icon + the panel element)
+ * @returns the merged Settings `bim-panel`
+ */
+export const settingsPanel = (
+  sections: { label: string; icon: string; el: HTMLElement }[],
+) => {
+  for (const s of sections) {
+    s.el.setAttribute("header-hidden", ""); // our section header replaces it
+    s.el.style.height = "auto";
+    s.el.style.width = "100%";
+  }
+  const collapsed = new Set<string>(); // section labels currently collapsed
+
+  const [panel, update] = BUI.Component.create<BUI.Panel, { tick: number }>(
+    (_s) => BUI.html`
+      <bim-panel
+        label="Settings"
+        icon="mdi:cog"
+        header-hidden
+        style="width: 100%; height: 100%; pointer-events: auto;"
+      >
+        <style>
+          .set-scroll { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
+          .set-scroll::-webkit-scrollbar { width: 0.4rem; }
+          .set-scroll::-webkit-scrollbar-thumb { border-radius: 0.25rem;
+            background-color: var(--bim-scrollbar--c, #3C3C41); }
+          /* Full-width section header: title row + divider span the whole panel,
+             no side inset/box. */
+          .set-hd { display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
+            margin-top: 1.2rem;
+            padding: 0.45rem 0.75rem; font-weight: 600;
+            font-size: var(--bim-ui_size-lg, 0.8125rem);
+            color: var(--bim-ui_bg-contrast-100, #f1f2f4);
+            /* contrast-40 (#323237) so the divider is VISIBLE on the #262629
+               surface — contrast-20 now equals the surface (palette pin). */
+            border-bottom: 1px solid var(--bim-ui_bg-contrast-40, rgba(255,255,255,0.12)); }
+          .set-hd:hover { background: var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.04)); }
+          /* Section icon matches the title font color (not a dimmer grey). */
+          .set-hd-ico { flex: 0 0 auto; color: inherit; }
+          .set-hd-t { flex: 1 1 auto; }
+          .set-hd-x { flex: 0 0 auto; color: var(--bim-ui_bg-contrast-80, #adadad); }
+          /* Flatten the nested panel: no "panel inside a panel", content flush to
+             the edges (its own bands full-bleed). Light-DOM only — widget shadow
+             internals untouched. */
+          .set-sec bim-panel {
+            height: auto !important;
+            width: 100%;
+            --bim-panel--bg: transparent;
+            --bim-panel--border: none;
+            border-radius: 0 !important;
+            box-shadow: none !important;
+          }
+          .set-sec bim-panel * { height: auto !important; max-height: none !important; }
+        </style>
+        <div class="set-scroll">
+          ${cardHeader("mdi:cog", "Settings", "0.75rem")}
+          ${sections.map((s, i) => {
+            const open = !collapsed.has(s.label);
+            return BUI.html`
+              <div class="set-hd" style=${i === 0 ? "margin-top: 0;" : ""} @click=${() => {
+                if (collapsed.has(s.label)) collapsed.delete(s.label);
+                else collapsed.add(s.label);
+                update({ tick: 0 });
+              }}>
+                <bim-icon class="set-hd-ico" icon=${s.icon}></bim-icon>
+                <span class="set-hd-t">${s.label}</span>
+                <bim-icon class="set-hd-x" icon=${open ? "mdi:chevron-up" : "mdi:chevron-down"}></bim-icon>
+              </div>
+              <div class="set-sec" style=${open ? "" : "display: none;"}>${s.el}</div>`;
+          })}
+        </div>
+      </bim-panel>`,
+    { tick: 0 },
+  );
+
+  return panel;
+};

package/src/cli/templates/app/src/setups/styles-panel.ts

@@ -0,0 +1,110 @@
+import * as OBC from "@thatopen/components";
+import * as BUI from "@thatopen/ui";
+import { styles, StyleSetting } from "./styles";
+
+/**
+ * UI side of the Styles tool. Consumes Worker 1's style DESCRIPTOR
+ * (`styles(components, world).settings`) and renders it generically in the
+ * bottom-left helper panel: checkbox (bool), slider (number), color picker
+ * (color), dropdown (enum) — each wired live to the setting's get/set. Settings
+ * are grouped by their `group` field.
+ *
+ * Returned as a "panel tool" `{ label, icon, render }` for the toolbar; `render`
+ * receives a `refresh` callback to re-read all controls after a change (needed
+ * because e.g. the preset enum rewrites several other settings).
+ */
+const control = (s: StyleSetting, refresh: () => void) => {
+  switch (s.type) {
+    case "bool":
+      return BUI.html`<bim-checkbox
+        label=${s.label}
+        ?checked=${s.get()}
+        @change=${(e: Event) => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          s.set(!!(e.target as any).value);
+          refresh();
+        }}
+      ></bim-checkbox>`;
+    case "number":
+      return BUI.html`<bim-number-input
+        label=${s.label}
+        slider
+        value=${s.get()}
+        min=${s.min}
+        max=${s.max}
+        step=${s.step}
+        @change=${(e: Event) => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          s.set(Number((e.target as any).value));
+          refresh();
+        }}
+      ></bim-number-input>`;
+    case "color":
+      return BUI.html`<bim-color-input
+        label=${s.label}
+        color=${s.get()}
+        @input=${(e: Event) => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const t = e.target as any;
+          s.set(String(t.color ?? t.value));
+          refresh();
+        }}
+      ></bim-color-input>`;
+    case "enum":
+      return BUI.html`<bim-dropdown
+        label=${s.label}
+        @change=${(e: Event) => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const picked = (e.target as any).value?.[0];
+          const match = s.options.find((o) => o.label === picked);
+          if (match) {
+            s.set(match.value);
+            refresh();
+          }
+        }}
+      >
+        ${s.options.map(
+          (o) => BUI.html`<bim-option label=${o.label} ?checked=${o.value === s.get()}></bim-option>`,
+        )}
+      </bim-dropdown>`;
+  }
+};
+
+export const stylesTool = (components: OBC.Components, world: OBC.World) => ({
+  label: "Styles",
+  icon: "mdi:palette",
+  render: (refresh: () => void) => {
+    const { settings } = styles(components, world);
+    // Group settings by their `group` field, preserving first-seen order.
+    const groups: { name: string; items: StyleSetting[] }[] = [];
+    for (const s of settings) {
+      let g = groups.find((x) => x.name === s.group);
+      if (!g) {
+        g = { name: s.group, items: [] };
+        groups.push(g);
+      }
+      g.items.push(s);
+    }
+    return BUI.html`
+      <div style="display: flex; flex-direction: column; gap: 0.6rem;">
+        ${groups.map(
+          (g) => BUI.html`
+            <div>
+              <div style="
+                font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
+                text-transform: uppercase; opacity: 0.6;
+                color: var(--bim-ui_bg-contrast-100, #e3e3e3);
+                padding: 0.1rem 0 0.3rem; border-bottom: 1px solid var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.1));
+              ">${g.name}</div>
+              <div style="display: flex; flex-direction: column; padding-top: 0.25rem;">
+                ${g.items.map(
+                  (s) => BUI.html`<div style="padding: 0.3rem 0; border-bottom: 1px solid var(--bim-ui_bg-contrast-20, rgba(255, 255, 255, 0.1));">${control(s, refresh)}</div>`,
+                )}
+              </div>
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+});