Plugins

For apps with plugins, such as the feature dialogs of @buerli.io/react-cad: mount PluginManager once and render BuerliPluginsGeometry in the scene.

Components

PluginManager

const PluginManager: NamedExoticComponent<{
}>;

Creates the plugins of every drawing's features as the features are opened, and removes them with their features.

Plugins are registered with init's plugins option, by feature class (@buerli.io/react-cad has them for ClassCAD's features). For each object of a drawing whose class has a plugin, the manager creates the plugin when the object becomes the active feature or is made visible. It renders nothing: mount it once, anywhere in the app.

Example

An app with react-cad's extrusion dialog: the manager creates the plugin when an extrusion is opened, FeaturePlugin shows its dialog in the page, and BuerliPluginsGeometry what it draws in the scene.

import { Canvas } from '@react-three/fiber'
import { init, WASMClient, ScgClassType } from '@buerli.io/classcad'
import { BuerliGeometry, BuerliPluginsGeometry, PluginManager, useBuerli } from '@buerli.io/react'
import { elements, Extrusion, FeaturePlugin } from '@buerli.io/react-cad'

init((drawingId) => new WASMClient(drawingId, { token: 'ccpk_…' }), {
  elements,
  plugins: { [ScgClassType.CCExtrusion]: Extrusion },
})

export function App() {
  const drawingId = useBuerli((state) => state.drawing.active)
  return (
    <>
      <PluginManager />
      {drawingId && <FeaturePlugin drawingId={drawingId} />}
      <Canvas>
        <BuerliGeometry suspend />
        <BuerliPluginsGeometry />
      </Canvas>
    </>
  )
}

---

BuerliPluginsGeometry

const BuerliPluginsGeometry: React.FC<BuerliPluginsGeometryProps>;

Renders the 3D views of a drawing's plugins in the scene: what a feature dialog draws, such as handles or previews.

Put it in the react-three-fiber Canvas next to BuerliGeometry. It renders each plugin's View, placed in the coordinate system of the plugin's object. Its props: BuerliPluginsGeometryProps.

Example

See {@link PluginManager} for an app with feature dialogs: the dialog in the page, what it draws in the scene.

Types

BuerliPluginsGeometryProps

type BuerliPluginsGeometryProps = {
  drawingId?: DrawingID;
  showOnlyActive?: boolean;
};

Props of BuerliPluginsGeometry.

Properties

Property	Type	Description
drawingId?	DrawingID	The drawing. Default: the active drawing.
showOnlyActive?	boolean	Shows only the views of plugins of objects below the drawing's current product. Default true.

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.

usePlugin()

function usePlugin<T>(
   drawingId, 
   pluginId, 
   sel, 
   equalityFn?
): T | undefined;

Selects a part of a plugin's state, and renders again when it changes.

Returns undefined while the plugin does not exist (plugins of features are created when they are opened).

Type Parameters

Type Parameter
T

Parameters

Parameter	Type	Description
drawingId	DrawingID	The drawing the plugin belongs to.
pluginId	PluginID	The plugin.
sel	(state) => T | undefined	What to take from the plugin's state.
equalityFn?	(a, b) => boolean	Whether two selections are the same.

Returns

T | undefined

What the selector returned, or undefined.

Example

The panel (Root) of a plugin shows the name of the feature it edits:

import type { DrawingID, PluginID } from '@buerli.io/core'
import { useDrawing, usePlugin } from '@buerli.io/react'

function Root({ drawingId, pluginId }: { drawingId: DrawingID; pluginId: PluginID }) {
  const objectId = usePlugin(drawingId, pluginId, (plugin) => plugin.objectId)
  const name = useDrawing(drawingId, (drawing) => (objectId ? drawing.structure.tree[objectId]?.name : undefined))
  return <h3>Editing {name}</h3>
}