Skip to main content

Components

What renders a drawing in a react-three-fiber Canvas, and shows buerli's messages.

Components​

BuerliGeometry​

const BuerliGeometry: React.FC<BuerliGeometryProps>;

Renders the geometry of a drawing in a react-three-fiber Canvas, and updates as the drawing changes.

It renders the products, solids, faces, edges and points the engine tessellated, in the colors of init's theme. With suspend it suspends while the drawing is busy, so that a <Suspense> fallback shows until the model is there. useBuerliCadFacade returns a Geometry that is this component for its drawing. Its props: BuerliGeometryProps.

Example​

A viewer that loads a STEP file into a drawing and shows it; the fallback shows while it loads:

import { Suspense, useEffect } from 'react'
import { Canvas } from '@react-three/fiber'
import { BuerliGeometry, useBuerliCadFacade } from '@buerli.io/react'

function Model({ step }: { step: ArrayBuffer }) {
  const { api, drawingId } = useBuerliCadFacade('viewer')
  useEffect(() => {
    api.v1.common.load({ data: step, format: 'STP', doClear: true })
  }, [api, step])
  // Suspends while the load is pending, then shows the model; `selection` lets the user pick in it
  return <BuerliGeometry drawingId={drawingId} suspend=".Load" selection />
}

export const Viewer = ({ step }: { step: ArrayBuffer }) => (
  <Canvas>
    <Suspense fallback={null}>
      <Model step={step} />
    </Suspense>
  </Canvas>
)

Messenger​

const Messenger: React.FC<{
  config?: MessengerConfigProps;
  style?: React.CSSProperties;
}>;

Shows buerli's messages as antd notifications: errors, warnings, progress and the ones showMessage sends.

Errors and "busy" messages stay until they are closed or replaced; the others close after antd's duration, unless the message sets its own. Texts longer than 120 characters are cut. Mount it once; it renders nothing itself.

Example​

Mounted once in the app; a save button reports through showMessage from @buerli.io/core:

import { showMessage, updateMessage } from '@buerli.io/core'
import { Messenger, useBuerliCadFacade } from '@buerli.io/react'

function SaveButton() {
  const { api } = useBuerliCadFacade('main')
  const save = async () => {
    const id = showMessage({ type: 'busy', text: 'Saving …' })
    const data = await api.v1.common.save({ format: 'OFB' })
    // … store `data` …
    updateMessage(id, { type: 'success', text: 'Saved' })
  }
  return <button onClick={save}>Save</button>
}

export const App = () => (
  <>
    <Messenger config={{ placement: 'topRight' }} />
    <SaveButton />
  </>
)

Types​

BuerliGeometryProps​

type BuerliGeometryProps = {
  drawingId?: DrawingID;
  productId?: ObjectID;
  selection?: boolean;
  suspend?: boolean | ((pending) => boolean) | string | string[];
};

Props of BuerliGeometry.

Properties​

PropertyTypeDescription
drawingId?DrawingIDThe drawing to render. Default: the active drawing.
productId?ObjectIDA product (part or assembly) of the drawing to render, instead of the whole drawing.
selection?booleanLets the user hover and select the geometry, for selectors such as facade.selectGeometry. Default false.
suspend?boolean | ((pending) => boolean) | string | string[]Suspends while the drawing has pending commands: all of them (true), the ones whose names contain one of a comma-separated list ('.Load,.SetDatabaseSettings'), or the ones a function picks. Default false. (An array of names still works, but is deprecated.)

Advanced​

Most apps do not need these directly: types they meet through the exports above, and what is there for special cases or for building on buerli itself.

BuerliGeometryInteraction​

const BuerliGeometryInteraction: React.FC<BuerliGeometryInteractionProps>;

Lets the user pick the geometry it wraps for the drawing's active selector, by hovering and clicking.

It only reacts while a selector is active, such as the one facade.selectGeometry or a feature dialog sets up, and only to items that selector's filter accepts. A click selects an item, or deselects it when it is selected. Hovered and selected items are highlighted in the theme's colors (hoveredGeom, highlightedGeom). BuerliGeometry wraps its geometry in this when selection is set.

Example​

The usual way in is BuerliGeometry's selection, with a selector from the facade: here the user picks an edge.

import { ScgGraphicType } from '@buerli.io/classcad'
import { BuerliGeometry, useBuerliCadFacade } from '@buerli.io/react'

function Pickable() {
  const { facade, drawingId } = useBuerliCadFacade('main')
  const pickEdge = async () => {
    // Resolves once the user has clicked one line or arc in the view
    const [edge] = await facade.selectGeometry([ScgGraphicType.LINE, ScgGraphicType.ARC], 1)
    console.log('picked', edge)
  }
  return (
    <group onDoubleClick={pickEdge}>
      <BuerliGeometry drawingId={drawingId} selection />
    </group>
  )
}

GlobalTransform​

const GlobalTransform: React.FC<{
  children?: React.ReactNode;
  drawingId: DrawingID;
  matrix?: THREE.Matrix4;
  objectId: ObjectID;
}>;

Places its children in the global coordinate system of an object of the drawing's structure tree.

It multiplies the coordinate systems of the object and all its parents up to the root, and wraps the children in a group with the result. When one of those coordinate systems changes, for example as an assembly moves, the children move with it.

Example​

Axes at the origin of an instance in an assembly, which follow the instance as constraints move it:

import type { DrawingID, ObjectID } from '@buerli.io/core'
import { GlobalTransform } from '@buerli.io/react'

function InstanceAxes({ drawingId, instanceId }: { drawingId: DrawingID; instanceId: ObjectID }) {
  return (
    <GlobalTransform drawingId={drawingId} objectId={instanceId}>
      <axesHelper args={[50]} />
    </GlobalTransform>
  )
}