React BIM Setup

export type BimStatus = 'opening' | 'ready' | 'pending' | 'error';

export type BimMode =
  | 'part-select'
  | 'markup-select'
  | 'walkthrough'
  | 'hide-parts'
  | null;

export type SectionAxis = 'x' | 'y' | 'z';

export type BimVisualState = {
  explodeDistance: number;
  transparencyPercent: number;
  sectionAxis: SectionAxis;
  sectionOffset: number;
};

export type SelectedPart = {
  name?: string;
  properties?: Record<string, unknown>;
};

import { useCallback, useEffect, useRef, useState } from 'react';
import { createViewer, type RasterexViewer } from '@rasterex/viewer';
import { initialVisualState } from '../config/bimConfig';
import type { BimMode, BimStatus, BimVisualState, SectionAxis, SelectedPart } from '../types/bim';

type ModelSource = {
  displayName: string;
  is3D: boolean;
  url: string;
};

export function useBimViewer(model: ModelSource | null) {
  const hostRef = useRef<HTMLDivElement | null>(null);
  const viewerRef = useRef<RasterexViewer | null>(null);
  const [status, setStatus] = useState<BimStatus>('opening');
  const [message, setMessage] = useState('Choose a 3D model.');
  const [mode, setMode] = useState<BimMode>(null);
  const [visuals, setVisuals] = useState<BimVisualState>(initialVisualState);
  const [selectedPart, setSelectedPart] = useState<SelectedPart | null>(null);

  useEffect(() => {
    if (!hostRef.current || !model?.is3D) return;

    let disposed = false;
    const viewer = createViewer({ container: hostRef.current });
    viewerRef.current = viewer;
    const stopPartSelected = viewer.tools.threeD.on('partSelected', (event) => {
      if (!disposed) {
        setSelectedPart({ name: event.part?.name, properties: event.properties });
      }
    });
    const stopSelectionCleared = viewer.tools.threeD.on('selectionCleared', () => {
      if (!disposed) setSelectedPart(null);
    });

    async function openModel() {
      setStatus('opening');
      setMessage('Opening ' + model.displayName);
      try {
        await viewer.mount();
        await viewer.ready();
        await viewer.documents.open({ url: model.url, displayName: model.displayName });
        if (!disposed) {
          setStatus('ready');
          setMessage('Model ready. Select a BIM tool.');
        }
      } catch (error) {
        if (!disposed) {
          setStatus('error');
          setMessage(error instanceof Error ? error.message : 'Model could not be opened.');
        }
      }
    }

    void openModel();
    return () => {
      disposed = true;
      stopPartSelected();
      stopSelectionCleared();
      viewer.destroy();
      viewerRef.current = null;
    };
  }, [model]);

  const run = useCallback(async (command: () => Promise<{ success: boolean; error?: string }>, successMessage: string) => {
    if (!viewerRef.current || status !== 'ready') return false;
    setStatus('pending');
    try {
      const result = await command();
      if (!result.success) {
        setStatus('error');
        setMessage(result.error ?? '3D command failed.');
        return false;
      }
      setStatus('ready');
      setMessage(successMessage);
      return true;
    } catch (error) {
      setStatus('error');
      setMessage(error instanceof Error ? error.message : '3D command failed.');
      return false;
    }
  }, [status]);

  const setPartSelect = useCallback(async (enabled: boolean) => {
    const applied = await run(
      () => viewerRef.current!.tools.threeD.setSelect({ enabled, emitSelectionEvents: true }),
      enabled ? 'Part selection enabled.' : 'Part selection disabled.'
    );
    if (applied) setMode(enabled ? 'part-select' : null);
  }, [run]);

  const setMarkupSelect = useCallback(async (enabled: boolean) => {
    const applied = await run(
      () => viewerRef.current!.tools.threeD.setMarkupSelect({ enabled }),
      enabled ? 'Markup selection enabled.' : 'Markup selection disabled.'
    );
    if (applied) setMode(enabled ? 'markup-select' : null);
  }, [run]);

  const setWalkthrough = useCallback(async (enabled: boolean) => {
    const applied = await run(
      () => viewerRef.current!.tools.threeD.setWalkthrough({ enabled }),
      enabled ? 'Walkthrough enabled.' : 'Walkthrough disabled.'
    );
    if (applied) setMode(enabled ? 'walkthrough' : null);
  }, [run]);

  const setHideParts = useCallback(async (enabled: boolean) => {
    const applied = await run(
      () => viewerRef.current!.tools.threeD.setHidePartsMode({ enabled }),
      enabled ? 'Hide parts mode enabled.' : 'Hide parts mode disabled.'
    );
    if (applied) setMode(enabled ? 'hide-parts' : null);
  }, [run]);

  const setExplode = useCallback(async (distance: number) => {
    const applied = await run(
      () => viewerRef.current!.tools.threeD.setExplode({ enabled: distance > 0, distance }),
      'Explode updated.'
    );
    if (applied) setVisuals((current) => ({ ...current, explodeDistance: distance }));
  }, [run]);

  const setTransparency = useCallback(async (valuePercent: number) => {
    const applied = await run(
      () => viewerRef.current!.tools.threeD.setTransparency({ enabled: valuePercent > 0, valuePercent }),
      'Transparency updated.'
    );
    if (applied) setVisuals((current) => ({ ...current, transparencyPercent: valuePercent }));
  }, [run]);

  const setCrossSection = useCallback(async (axis: SectionAxis, offset: number) => {
    const next = { ...visuals, sectionAxis: axis, sectionOffset: offset };
    const applied = await run(
      () => viewerRef.current!.tools.threeD.setCrossSection({
        enabled: offset !== 0,
        x: axis === 'x' ? offset : 0,
        y: axis === 'y' ? offset : 0,
        z: axis === 'z' ? offset : 0,
      }),
      'Cross section updated.'
    );
    if (applied) setVisuals(next);
  }, [run, visuals]);

  const resetModel = useCallback(async () => {
    const applied = await run(() => viewerRef.current!.tools.threeD.resetModel(), 'Model reset.');
    if (applied) {
      setMode(null);
      setVisuals(initialVisualState);
    }
  }, [run]);

  return {
    hostRef,
    isReady: status === 'ready',
    isPending: status === 'pending',
    message,
    mode,
    selectedPart,
    setCrossSection,
    setExplode,
    setHideParts,
    setMarkupSelect,
    setPartSelect,
    setTransparency,
    setWalkthrough,
    resetModel,
    visuals,
  };
}

import { useState } from 'react';
import './App.css';
import { bimModels } from './config/bimConfig';
import { useBimViewer } from './hooks/useBimViewer';

export default function App() {
  const [model, setModel] = useState<(typeof bimModels)[number] | null>(null);
  const [quickControl, setQuickControl] = useState<'explode' | 'transparency' | 'section' | null>(null);
  const bim = useBimViewer(model);
  const disabled = !bim.isReady || bim.isPending;

  return <div className="bim-app">
    <aside className="file-rail" aria-label="BIM files">
      <p className="eyebrow">Your UI</p>
      <h1>BIM collaboration</h1>
      <nav aria-label="Project navigation"><button type="button">Files</button></nav>
      {bimModels.map((item) => <article className={model?.id === item.id ? 'file active' : 'file'} key={item.id}>
        <strong>{item.displayName}</strong>
        <button type="button" onClick={() => setModel(item)}>Open</button>
      </article>)}
      <section className="inspector" aria-live="polite">
        <strong>Selected part</strong>
        <p>{bim.selectedPart?.name ?? 'No part selected.'}</p>
        {bim.selectedPart?.properties ? <pre>{JSON.stringify(bim.selectedPart.properties, null, 2)}</pre> : null}
      </section>
    </aside>
    <main className="workspace">
      <header className="toolbar" aria-label="BIM toolbar">
        <div className="toolbar-zone actions"><span>Model: {model?.displayName ?? 'None'}</span></div>
        <div className="toolbar-zone tools">
          <button type="button" disabled={disabled} aria-pressed={bim.mode === 'part-select'} onClick={() => void bim.setPartSelect(bim.mode !== 'part-select')}>Select part</button>
          <button type="button" disabled={disabled} aria-pressed={bim.mode === 'markup-select'} onClick={() => void bim.setMarkupSelect(bim.mode !== 'markup-select')}>Markup select</button>
          <button type="button" disabled={disabled} aria-pressed={bim.mode === 'hide-parts'} onClick={() => void bim.setHideParts(bim.mode !== 'hide-parts')}>Hide parts</button>
          <button type="button" disabled={disabled} aria-expanded={quickControl === 'explode'} onClick={() => setQuickControl('explode')}>Explode</button>
          <button type="button" disabled={disabled} aria-expanded={quickControl === 'section'} onClick={() => setQuickControl('section')}>Cross section</button>
          <button type="button" disabled={disabled} aria-expanded={quickControl === 'transparency'} onClick={() => setQuickControl('transparency')}>Transparency</button>
        </div>
        <div className="toolbar-zone navigation">
          <button type="button" disabled={disabled} aria-pressed={bim.mode === 'walkthrough'} onClick={() => void bim.setWalkthrough(bim.mode !== 'walkthrough')}>Walkthrough</button>
          <button type="button" disabled={disabled} onClick={() => void bim.resetModel()}>Reset</button>
        </div>
      </header>
      {quickControl === 'explode' ? <section className="quick-control" role="dialog" aria-label="Explode control">
        <label>Explode distance <input type="range" min="0" max="100" value={bim.visuals.explodeDistance} disabled={disabled} onChange={(event) => void bim.setExplode(Number(event.target.value))} /></label>
        <output>{bim.visuals.explodeDistance}</output>
      </section> : null}
      {quickControl === 'transparency' ? <section className="quick-control" role="dialog" aria-label="Transparency control">
        <label>Transparency percentage <input type="range" min="0" max="100" value={bim.visuals.transparencyPercent} disabled={disabled} onChange={(event) => void bim.setTransparency(Number(event.target.value))} /></label>
        <output>{bim.visuals.transparencyPercent}%</output>
      </section> : null}
      {quickControl === 'section' ? <section className="quick-control" role="dialog" aria-label="Cross section control">
        <div>{(['x', 'y', 'z'] as const).map((axis) => <button type="button" key={axis} aria-pressed={bim.visuals.sectionAxis === axis} onClick={() => void bim.setCrossSection(axis, bim.visuals.sectionOffset)}>{axis}</button>)}</div>
        <label>Offset <input type="range" min="0" max="100" value={bim.visuals.sectionOffset} disabled={disabled} onChange={(event) => void bim.setCrossSection(bim.visuals.sectionAxis, Number(event.target.value))} /></label>
        <output>{bim.visuals.sectionAxis}: {bim.visuals.sectionOffset}</output>
      </section> : null}
      <p className="status" role="status" aria-live="polite">{bim.message}</p>
      <div ref={bim.hostRef} className="viewer-host" aria-label="BIM model viewer" />
    </main>
  </div>;
}