Skip to main content

App

The app as one React component, and its props. Every host needs it: <Buerligons /> in a container with a size, once init has connected buerli.

Components​

Buerligons​

const Buerligons: React.FC<BuerligonsProps>;

Buerligons, the whole CAD app: the welcome page while there is no drawing, then the editor of the active one.

It fills its container, which needs a size. The host connects first, with buerli's init (@buerli.io/classcad) and any client; Buerligons prepares each client itself. A new part, a new assembly or a file picked on the welcome page makes a drawing. A host that opens its documents itself does so with an EditorController, and passes welcome={false} (and menu={null} where it has its own File menu).

A page opened with an invite (?invite= in its URL) joins that shared session instead, without the welcome page, and says so where there is no session behind the invite (it is over, or the invite was taken back).

Its props: BuerligonsProps.

Example​

import { createRoot } from 'react-dom/client'
import { init, WSClient } from '@buerli.io/classcad'
import { Buerligons } from '@buerli.io/buerligons'

// Here a ClassCAD worker serves the drawings (`classcad-cli worker`); a WASMClient would run the engine in the page
init(drawingId => new WSClient('ws://localhost:9094', drawingId))

// In a page of the host's own: the app takes the room below the header, which gives it its size
createRoot(document.getElementById('root')!).render(
  <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
    <header style={{ padding: 8 }}>Parts portal</header>
    <main style={{ flex: 1, minHeight: 0 }}>
      <Buerligons />
    </main>
  </div>,
)

Types​

BuerligonsProps​

type BuerligonsProps = EditorProps & {
  share?: boolean;
  welcome?: boolean;
};

Props of Buerligons: welcome and share, and those of the editor it shows (EditorProps).

All of them are optional.

Type Declaration​

NameTypeDescription
share?booleanfalse: no session sharing, for an app that does not offer it: no Session Management panel, and the drawing's client is not offered to others. It takes effect for the documents opened after it is set, so it belongs on the first render. Default: true.
welcome?booleanWhat shows while there is no drawing: the welcome page (a new part, a new assembly, a file), or with false nothing, for a host that opens its documents itself (EditorController). A guest (a page opened with an invite) never sees the welcome page. Default: true.

Example​

import { init, WASMClient } from '@buerli.io/classcad'
import { Buerligons, type BuerligonsProps } from '@buerli.io/buerligons'

init(drawingId => new WASMClient(drawingId, { token: 'ccpk_…' }))

// Buerligons in a PDM's document view: the PDM opens and saves the documents (EditorController), has a File
// menu and a theme switch of its own, and offers no session sharing
const embedded: BuerligonsProps = {
  welcome: false,
  share: false,
  menu: null,
  themeSwitch: false,
  defaultLook: 'flat',
  status: 'PDM',
}

export function DocumentView({ mayEdit }: { mayEdit: boolean }) {
  return (
    <section style={{ height: 'calc(100vh - 48px)' }}>
      <Buerligons {...embedded} readOnly={!mayEdit} />
    </section>
  )
}

EditorProps​

type EditorProps = {
  children?: React.ReactNode;
  defaultLook?: RenderMode;
  menu?: React.JSX.Element | null;
  readOnly?: boolean;
  status?: React.ReactNode;
  themeSwitch?: boolean;
  trail?: React.ReactNode;
};

Props of the editor that Buerligons shows for the active drawing; they are part of BuerligonsProps.

Example​

import { Buerligons } from '@buerli.io/buerligons'

// The host's own menu leads the bar and a help link ends it
const menu = (
  <nav>
    <button onClick={() => history.back()}>Back to the list</button>
  </nav>
)

// The children: a marker of the host's in the 3D scene (react-three-fiber elements, in the model's coordinates)
export const App = () => (
  <div style={{ height: '100vh' }}>
    <Buerligons menu={menu} status="Engine in the page" trail={<a href="/help">Help</a>}>
      <mesh position={[0, 0, 100]}>
        <sphereGeometry args={[5]} />
        <meshBasicMaterial color="orange" />
      </mesh>
    </Buerligons>
  </div>
)

Properties​

PropertyTypeDefault valueDescription
children?React.ReactNodeundefinedthree.js content of the host's own (react-three-fiber elements), in the stage's scene.
defaultLook?RenderModeundefinedThe look the stage opens in where the page remembers no choice of the user's: 'realistic' (the default) or 'flat' (the drawing look). See setDefaultRenderMode.
menu?React.JSX.Element | nullundefinedHeader menu of the drawing. Omitted: the built-in File menu (new, open, save; undo and redo). null: no menu, for a host that owns the document lifecycle (an embedding PDM, say).
readOnly?booleanfalseView only: no modelling tools and nothing that changes the model. A viewer in a shared session (an invite with the view role) is view only anyway.
status?React.ReactNodeundefinedWhat the footer opens with, in place of "ClassCAD": where the engine runs, say. Whether the engine is connected follows it either way.
themeSwitch?booleantruefalse hides the light/dark switch, where the page around the app has a theme switch of its own and sets the app's theme from it (setRCadThemeMode of @buerli.io/react-cad).
trail?React.ReactNodeundefinedWhat the bar ends with, before the theme switch.