Skip to main content

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.

Plugins​

Measure​

Measures the model: a picked item is read (positions, axes, lengths, radii), two are measured against each other.

It is a global plugin: an app adds it to init's globalPlugins, which gives every drawing one, and the ViewPlugButtons have a button that opens it. Its window is one of the GlobalPlugins. The panel picks the items and sets the number of digits; between two items it gives their distance and angle. What was measured is drawn in the scene as well.

Example​

import { init, WASMClient } from '@buerli.io/classcad'
import { getDrawing } from '@buerli.io/core'
import { elements, Measure } from '@buerli.io/react-cad'

init(drawingId => new WASMClient(drawingId, { token: 'ccpk_…' }), { elements, globalPlugins: [Measure] })

// Code opens it by its name, as its button in the `ViewPlugButtons` does:
const drawing = getDrawing(drawingId)
const measureId = drawing.plugin.global.find(id => drawing.plugin.refs[id].name === 'Measure')
if (measureId) drawing.api.plugin.setActiveGlobal(measureId, true)

Expressions​

Lists and edits the current product's expressions: their names, expressions and values.

It is a global plugin: an app adds it to init's globalPlugins, which gives every drawing one, and react-cad's toolbar opens it with its Expressions command. Its window is one of the GlobalPlugins. The panel searches the expressions, adds one from a name and an expression, renames and deletes them, and Apply sends the edited ones (part.updateExpression). The panel stays open; it does not update while a feature's dialog is open.

Example​

import { init, WASMClient } from '@buerli.io/classcad'
import { getDrawing } from '@buerli.io/core'
import { elements, Expressions } from '@buerli.io/react-cad'

init(drawingId => new WASMClient(drawingId, { token: 'ccpk_…' }), { elements, globalPlugins: [Expressions] })

// Code opens it by its name, as the toolbar's Expressions command does:
const drawing = getDrawing(drawingId)
const expressionsId = drawing.plugin.global.find(id => drawing.plugin.refs[id].name === 'Expressions')
if (expressionsId) drawing.api.plugin.setActiveGlobal(expressionsId, true)

ProductManagement​

The Products panel: the parts and assemblies of the drawing, to create, import, rename, edit, export, delete, and add to the current assembly.

It is a global plugin: an app adds it to init's globalPlugins, which gives every drawing one; the model tree's header opens it (the products button), and its window is one of the GlobalPlugins. Its tabs list the parts and the assemblies; a product is added to the current assembly as an instance where it is placed on the stage.

Example​

import { init, WASMClient } from '@buerli.io/classcad'
import { elements, Measure, ProductManagement } from '@buerli.io/react-cad'

// every drawing gets the Products panel; the model tree's header opens it
init((drawingId) => new WASMClient(drawingId, { token: 'ccpk_…' }), {
  elements,
  globalPlugins: [Measure, ProductManagement],
})

AppearanceEditor​

Edits the appearance of solids: their color and transparency, and the tolerances they are tessellated with.

It is a global plugin: an app adds it to init's globalPlugins, which gives every drawing one, and react-cad opens it with Edit appearance in a solid's context menu, for the selected solids and the one clicked. An app opens it the same way: it sets the plugin's state solidIds and activates it (setActiveGlobal). Its window is one of the GlobalPlugins. Apply sets the appearance (common.setAppearance).

Example​

import { init, WASMClient } from '@buerli.io/classcad'
import { getDrawing } from '@buerli.io/core'
import { AppearanceEditor, elements } from '@buerli.io/react-cad'

init(drawingId => new WASMClient(drawingId, { token: 'ccpk_…' }), { elements, globalPlugins: [AppearanceEditor] })

// Code opens it as Edit appearance in a solid's context menu does: it gives the plugin the solids, here all of the
// current product's, and activates it:
const drawing = getDrawing(drawingId)
const editorId = drawing.plugin.global.find(id => drawing.plugin.refs[id].name === 'Appearance Editor')
if (editorId) {
  const product = drawing.structure.tree[drawing.structure.currentProduct!]
  drawing.plugin.refs[editorId].set({ solidIds: product.solids })
  drawing.api.plugin.setActiveGlobal(editorId, true)
}

BoundingBoxInfo​

Shows the model's bounding box: its extents along X, Y and Z, and optionally its axes and boundaries in the scene.

It is a global plugin: an app adds it to init's globalPlugins, which gives every drawing one, and the ViewPlugButtons have a button that opens it. Its window is one of the GlobalPlugins. The panel lists the minimum, the maximum and the size along each axis, and switches on, in the scene, the orientation (axes with marks around the model) and the boundaries.

Example​

import { init, WASMClient } from '@buerli.io/classcad'
import { getDrawing } from '@buerli.io/core'
import { BoundingBoxInfo, elements } from '@buerli.io/react-cad'

init(drawingId => new WASMClient(drawingId, { token: 'ccpk_…' }), { elements, globalPlugins: [BoundingBoxInfo] })

// Code opens it by its name, as its button in the `ViewPlugButtons` does:
const drawing = getDrawing(drawingId)
const boxInfoId = drawing.plugin.global.find(id => drawing.plugin.refs[id].name === 'BoundingBoxInfo')
if (boxInfoId) drawing.api.plugin.setActiveGlobal(boxInfoId, true)

Dimensions​

Shows the 3D dimensions of the current product in the scene, and switches them on and off.

It is a global plugin: an app adds it to init's globalPlugins, which gives every drawing one, and the ViewPlugButtons have a button that opens it. Its window is one of the GlobalPlugins. Its view draws the product's dimension set (CC_DimensionSet); the panel has the switch.

Example​

import { init, WASMClient } from '@buerli.io/classcad'
import { getDrawing } from '@buerli.io/core'
import { Dimensions, elements } from '@buerli.io/react-cad'

init(drawingId => new WASMClient(drawingId, { token: 'ccpk_…' }), { elements, globalPlugins: [Dimensions] })

// Code opens it by its name, as its button in the `ViewPlugButtons` does:
const drawing = getDrawing(drawingId)
const dimensionsId = drawing.plugin.global.find(id => drawing.plugin.refs[id].name === 'Dimensions')
if (dimensionsId) drawing.api.plugin.setActiveGlobal(dimensionsId, 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.

SessionManagement​

The Sessions panel: the host of a shared session makes invites to it, sees who has joined, and copies or revokes their links.

It is a global plugin: an app adds it to init's globalPlugins (Buerligons does so where sharing is on), and the ViewPlugButtons have a button that opens it. It shows only for the host of a session that can be shared (a WSClient or a WASMClient registered with sessionClient.setSessionClient), not to a guest. An invite has a name and a role (edit or view); its link opens the app as a guest of the session.

Example​

import { init, onClient, WASMClient } from '@buerli.io/classcad'
import { elements, sessionClient, SessionManagement } from '@buerli.io/react-cad'

// the page hosts the session itself; its Sessions panel hands out invites to it
init((drawingId) => new WASMClient(drawingId, { token: 'ccpk_…' }), {
  elements,
  globalPlugins: [SessionManagement],
})
onClient((client) => sessionClient.setSessionClient(client))