@buerli.io/react-cad

The CAD user interface as React components on buerli: the frame around a drawing, the model's tree, the toolbar, the feature dialogs (plugins), the sketcher, and what is drawn over the model on the stage. Buerligons, the CAD app, is made of it.

It is for an app that builds a CAD UI of its own from these pieces, whole (Drawing) or one by one. An app that embeds all of Buerligons takes @buerli.io/buerligons instead. It runs on @buerli.io/classcad (the engine, init) and @buerli.io/react (the drawing's geometry, the plugin manager).

What it exposes

• Drawing: the app's frame around a drawing, in one piece: bar and tools, sidebar, stage, footer.
• ModelTree, ToolBar, SideBar, Messages, FeaturePlugin, GlobalPlugins: the panels and windows, for an app that lays them out itself.
• The plugins: a namespace for each feature's dialog (Sketch, Extrusion, Fillet, …), each assembly constraint (Fastened, Revolute, …) and each tool panel (Measure, Expressions, ProductManagement, …), which an app registers with init's plugins (by feature class) and globalPlugins.
• elements: the form controls of the dialogs in the app's look, for init's elements.
• StageLook: the model on the stage, drawn as a drawing.
• The theme: AppStyle (the stylesheet), setRCadThemeMode, useRCadTheme, useStage.
• Icon: the app's icons. @buerli.io/react-cad/icons has them with nothing but React, for a page that only needs icons: Icon, iconRef, iconSvg, iconDataUrl, the types IconName and IconDrawing, and the sheet of drawings (there called drawings, here icons).

Example

import { Suspense, useEffect } from 'react'
import { Canvas } from '@react-three/fiber'
import { init, ScgClassType, WASMClient } from '@buerli.io/classcad'
import { BuerliPluginsGeometry, PluginManager, useBuerliCadFacade } from '@buerli.io/react'
import { Drawing, elements, Extrusion, Measure, Sketch, StageLook } from '@buerli.io/react-cad'

// the engine, react-cad's controls, a dialog for each feature class, the panels every drawing has
init((drawingId) => new WASMClient(drawingId, { token: 'ccpk_…' }), {
  elements,
  plugins: { [ScgClassType.CCSketch]: Sketch, [ScgClassType.CCExtrusion]: Extrusion },
  globalPlugins: [Measure],
})

function Editor() {
  const { api, drawingId, Geometry } = useBuerliCadFacade('bracket')
  useEffect(() => void api.v1.part.create({ name: 'Bracket' }), [api])
  return (
    <Drawing drawingId={drawingId}>
      <Canvas orthographic>
        <StageLook />
        <Geometry />
        <BuerliPluginsGeometry drawingId={drawingId} />
      </Canvas>
    </Drawing>
  )
}

export const App = () => (
  <Suspense fallback={null}>
    <PluginManager />
    <Editor />
  </Suspense>
)

API

Name	Description
Panels	The app's frame and its panels: Drawing in one piece, or the model tree, the toolbar, the sidebar, the messages and the windows of the dialogs, laid out by the app. Start with Drawing.
Feature Plugins	The dialogs of a part's features, one plugin per feature class: the sketcher, extrusions, revolves and twists, the primitives, Booleans, fillets and chamfers, slices, patterns, mirrors and transformations, imports. An app maps each class to its plugin in init's plugins; react-cad's toolbar opens one for a new feature, and a double click in the feature list for one that is there.
Work Geometry	The dialogs of a part's work points, axes, planes and coordinate systems: the references that sketches, features and assembly mates are placed on. They are registered and opened as the feature plugins are, and their views draw the work geometry in the scene.
Assembly Constraints	The dialogs of an assembly's constraints, which fix instances to each other or let them move at their mates (fastened, slider, revolute, cylindrical, planar, parallel, spherical), and of groups, patterns and gears of instances. An app maps the constraint classes to them in init's plugins; the assembly toolbar opens one for a new constraint, and a double click in the constraint list for one that is there.
Tool Plugins	The tools every drawing has, each in a window of its own: measuring, the bounding box, 3D dimensions, expressions, appearance, products and sessions. An app lists them in init's globalPlugins; react-cad opens them from the stage's buttons, the toolbar, the model tree's header and a solid's context menu.
Graphics	What goes into the app's canvas besides the geometry: StageLook, the model as a drawing, and the pieces the plugins draw with.
UI Elements	The form controls of the dialogs in the app's look, which an app passes to init; and menus.
Theme	The app's stylesheet, its colours in light and in dark, the stage's colours, and the switch between the two.
Icons	The app's icons: small drawings in two tones of ink, by name. They are also in @buerli.io/react-cad/icons, with nothing but React.
Hooks	What a drawing is being worked on as, and whether the engine is busy, for components of the app's own.

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.

Name	Description
Session	A shared session: the client whose session the page shares, its role in it, and the peers' cameras and pointers.
Utilities	Helpers for sketches, mates and selections, and conversions into the arguments of ClassCAD's API.