@thatopen/services 0.3.11 → 0.3.13

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

@@ -1,178 +0,0 @@
-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/styles-panel.ts

@@ -1,110 +0,0 @@
-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>
-    `;
-  },
-});

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

@@ -1,375 +0,0 @@
-import * as THREE from "three";
-import * as OBC from "@thatopen/components";
-import * as OBF from "@thatopen/components-front";
-
-/**
- * STYLES tool — a typed, generic descriptor over the viewer's visual settings so
- * a UI (the bottom-left helper panel) can render controls without poking the
- * postproduction renderer internals.
- *
- * Every entry reads/writes LIVE: the deferred composite re-reads its `settings`
- * each frame, the AO/FXAA flags are read per-frame, and `renderScale` /
- * `adaptiveResolution` apply on assignment — so no rebuild or lib change is
- * needed. Mutating a setting takes effect on the next rendered frame.
- *
- * NOTE on presets: setting `Style preset` runs the engine's
- * `_applyDeferredStyle`, which overwrites `Surface color`, `Edges` and
- * `Ambient occlusion` to the preset's combination. After changing the preset,
- * re-read all settings to refresh the panel.
- */
-export type StyleSetting =
-  | {
-      key: string;
-      label: string;
-      group: string;
-      type: "bool";
-      default: boolean;
-      get(): boolean;
-      set(v: boolean): void;
-    }
-  | {
-      key: string;
-      label: string;
-      group: string;
-      type: "number";
-      default: number;
-      min: number;
-      max: number;
-      step: number;
-      get(): number;
-      set(v: number): void;
-    }
-  | {
-      key: string;
-      label: string;
-      group: string;
-      type: "color"; // value is a "#rrggbb" hex string
-      default: string;
-      get(): string;
-      set(v: string): void;
-    }
-  | {
-      key: string;
-      label: string;
-      group: string;
-      type: "enum";
-      default: string | number;
-      options: { label: string; value: string | number }[];
-      get(): string | number;
-      set(v: string | number): void;
-    };
-
-const hex = (c: THREE.Color) => `#${c.getHexString()}`;
-
-// Background state is MODULE-scoped so it survives styles() re-creation (the
-// graphics panel rebuilds the descriptor on every refresh — a per-instance
-// `lastBg` re-clobbered a user-picked background to 0x202020 one frame after the
-// pick, #30). `stylesLastBg` is the remembered OPAQUE colour: it persists even
-// while transparent mode zeroes the renderer's clear colour, so toggling back to
-// opaque restores the picked hue. The 0x202020 default is applied to the
-// renderer exactly once.
-let stylesBgInitialized = false;
-const stylesLastBg = new THREE.Color(0x202020);
-
-export const styles = (
-  components: OBC.Components,
-  world: OBC.World,
-): { settings: StyleSetting[] } => {
-  const renderer = world.renderer as OBF.PostproductionRenderer;
-
-  // Lazy accessors — resolved at call time so they always hit the live objects
-  // (the deferred pipeline is allocated once postproduction is up).
-  const pp = () => renderer.postproduction;
-  const deferred = () => renderer.postproduction.deferred;
-  const composite = () => renderer.postproduction.deferred.composite.settings;
-  const grid = () => components.get(OBC.Grids).list.get(world.uuid);
-  const scene = world.scene.three as THREE.Scene;
-  const three = () => renderer.three as THREE.WebGLRenderer;
-
-  // Background is driven through the RENDERER CLEAR colour/alpha, not
-  // scene.background. Under the deferred pen pipeline the composite passes the
-  // captured clear straight through for background pixels, so the clear colour IS
-  // the viewport background; setting scene.background to a THREE.Color instead
-  // makes three force-clear the capture G-buffer mid-pass and the whole model
-  // vanishes (#30). Keep scene.background null and own the clear here.
-  scene.background = null;
-  // Apply the default background ONCE (never on a rebuild — that was the #30
-  // reset). Default is TRANSPARENT (clear alpha 0) to match the
-  // `transparentBackground` setting's default:true, so on load the viewport shows
-  // whatever is behind it instead of an opaque black. The remembered hue lives in
-  // the module-scoped `stylesLastBg` for when transparency is toggled off.
-  if (!stylesBgInitialized) {
-    stylesBgInitialized = true;
-    three().setClearColor(0x000000, 0);
-  }
-
-  const A = OBF.PostproductionAspect;
-
-  const settings: StyleSetting[] = [
-    // ── Preset ──────────────────────────────────────────────────────
-    {
-      key: "preset",
-      label: "Style preset",
-      group: "Preset",
-      type: "enum",
-      default: A.COLOR_PEN_SHADOWS,
-      options: [
-        { label: "Color + edges + shadows", value: A.COLOR_PEN_SHADOWS },
-        { label: "Color", value: A.COLOR },
-        { label: "Color + edges", value: A.COLOR_PEN },
-        { label: "Color + shadows", value: A.COLOR_SHADOWS },
-        { label: "Pen (edges only)", value: A.PEN },
-        { label: "Pen + shadows", value: A.PEN_SHADOWS },
-      ],
-      get: () => pp().style,
-      set: (v) => {
-        pp().style = v as OBF.PostproductionAspect;
-      },
-    },
-    {
-      key: "postproductionEnabled",
-      label: "Postproduction",
-      group: "Preset",
-      type: "bool",
-      default: true,
-      get: () => pp().enabled,
-      set: (v) => {
-        pp().enabled = v;
-      },
-    },
-
-    // ── Edges (contour) ─────────────────────────────────────────────
-    {
-      key: "edges",
-      label: "Edges",
-      group: "Edges",
-      type: "bool",
-      default: true,
-      get: () => composite().contourEnabled,
-      set: (v) => {
-        composite().contourEnabled = v;
-      },
-    },
-    {
-      key: "edgeColor",
-      label: "Edge color",
-      group: "Edges",
-      type: "color",
-      default: "#000000",
-      get: () => hex(composite().edgeColor),
-      set: (v) => composite().edgeColor.set(v),
-    },
-    {
-      key: "edgeStrength",
-      label: "Edge strength",
-      group: "Edges",
-      type: "number",
-      default: 0.8,
-      min: 0,
-      max: 1,
-      step: 0.05,
-      get: () => composite().edgeStrength,
-      set: (v) => {
-        composite().edgeStrength = v;
-      },
-    },
-
-    // ── Shading ─────────────────────────────────────────────────────
-    {
-      key: "surfaceColor",
-      label: "Surface color (off = paper)",
-      group: "Shading",
-      type: "bool",
-      default: true,
-      get: () => composite().colorEnabled,
-      set: (v) => {
-        composite().colorEnabled = v;
-      },
-    },
-    {
-      key: "ao",
-      label: "Ambient occlusion",
-      group: "Shading",
-      type: "bool",
-      default: true,
-      get: () => deferred().settings.aoEnabled,
-      set: (v) => {
-        deferred().settings.aoEnabled = v;
-      },
-    },
-    {
-      key: "aoStrength",
-      label: "AO strength",
-      group: "Shading",
-      type: "number",
-      default: 1.0,
-      min: 0,
-      max: 2,
-      step: 0.05,
-      get: () => composite().aoStrength,
-      set: (v) => {
-        composite().aoStrength = v;
-      },
-    },
-    {
-      key: "tonalShading",
-      label: "Tonal shading",
-      group: "Shading",
-      type: "bool",
-      default: true,
-      get: () => composite().tonalShadingEnabled,
-      set: (v) => {
-        composite().tonalShadingEnabled = v;
-      },
-    },
-    {
-      key: "tonalFloor",
-      label: "Tonal floor",
-      group: "Shading",
-      type: "number",
-      default: 0.7,
-      min: 0,
-      max: 1,
-      step: 0.05,
-      get: () => composite().tonalFloor,
-      set: (v) => {
-        composite().tonalFloor = v;
-      },
-    },
-
-    // ── Scene ───────────────────────────────────────────────────────
-    {
-      key: "transparentBackground",
-      label: "Transparent background",
-      group: "Scene",
-      type: "bool",
-      default: true,
-      // Transparent === clear alpha 0 (page/scene behind shows through).
-      get: () => three().getClearAlpha() === 0,
-      set: (v) => {
-        scene.background = null;
-        if (v) {
-          // TRUE transparency: zero the RGB too, not just alpha. The composite
-          // passes the clear straight through and the canvas composites
-          // premultiplied, so a non-zero rgb at alpha 0 ADDS that colour over the
-          // page (the picked colour bled through as a tint). (0,0,0,0) = clean
-          // page-through with no tint. The hue is remembered in stylesLastBg.
-          three().setClearColor(0x000000, 0);
-        } else {
-          three().setClearColor(stylesLastBg, 1);
-        }
-      },
-    },
-    {
-      key: "backgroundColor",
-      label: "Background color",
-      group: "Scene",
-      type: "color",
-      // Reflect the remembered hue even while transparent (clear rgb is zeroed).
-      default: `#${stylesLastBg.getHexString()}`,
-      get: () => hex(stylesLastBg),
-      set: (v) => {
-        stylesLastBg.set(v);
-        scene.background = null;
-        // Choosing a colour means you want to SEE it → make the background
-        // opaque (alpha 1). The Transparent toggle re-reads alpha on refresh and
-        // flips off to match.
-        three().setClearColor(stylesLastBg, 1);
-      },
-    },
-    {
-      key: "grid",
-      label: "Grid",
-      group: "Scene",
-      type: "bool",
-      default: true,
-      get: () => grid()?.config.visible ?? false,
-      set: (v) => {
-        const g = grid();
-        if (g) g.config.visible = v;
-      },
-    },
-    {
-      key: "gridColor",
-      label: "Grid color",
-      group: "Scene",
-      type: "color",
-      default: "#d3d3d3",
-      get: () => {
-        const g = grid();
-        return g ? hex(g.config.color) : "#d3d3d3";
-      },
-      set: (v) => {
-        const g = grid();
-        if (g) g.config.color = new THREE.Color(v);
-      },
-    },
-
-    // ── Quality / performance ───────────────────────────────────────
-    {
-      key: "fxaa",
-      label: "Anti-aliasing (FXAA)",
-      group: "Quality",
-      type: "bool",
-      default: true,
-      get: () => deferred().settings.fxaaEnabled,
-      set: (v) => {
-        deferred().settings.fxaaEnabled = v;
-      },
-    },
-    {
-      key: "renderScale",
-      label: "Render scale",
-      group: "Quality",
-      type: "number",
-      default: 1.0,
-      min: 0.25,
-      max: 1,
-      step: 0.05,
-      get: () => deferred().renderScale,
-      set: (v) => {
-        deferred().renderScale = v;
-      },
-    },
-    {
-      key: "adaptiveResolution",
-      label: "Adaptive resolution",
-      group: "Quality",
-      type: "bool",
-      default: true,
-      get: () => renderer.adaptiveResolution,
-      set: (v) => {
-        renderer.adaptiveResolution = v;
-      },
-    },
-    {
-      key: "targetFps",
-      label: "Target FPS",
-      group: "Quality",
-      type: "number",
-      default: 60,
-      min: 24,
-      max: 120,
-      step: 5,
-      get: () => renderer.adaptiveTargetFps,
-      set: (v) => {
-        renderer.adaptiveTargetFps = v;
-      },
-    },
-    {
-      key: "highResOutline",
-      label: "High-res selection outline",
-      group: "Quality",
-      type: "bool",
-      default: true,
-      // false → render the selection outline at half resolution (cheaper when a
-      // selection covers much of the screen, slightly softer); true → full res.
-      get: () => components.get(OBF.Outliner).resolutionScale >= 1,
-      set: (v) => {
-        components.get(OBF.Outliner).resolutionScale = v ? 1 : 0.5;
-      },
-    },
-  ];
-
-  return { settings };
-};