UI Elements

The form controls of the dialogs in the app's look, which an app passes to init; and menus.

Objects

elements

const elements: {
  Alert: (__namedParameters) => Element;
  AutoComplete: (__namedParameters) => Element;
  Button: (__namedParameters) => Element;
  ButtonGroup: (__namedParameters) => Element;
  Checkbox: (__namedParameters) => Element;
  Collapse: (__namedParameters) => Element;
  Dropdown: (__namedParameters) => Element;
  Group: (__namedParameters) => Element;
  Input: ForwardRefExoticComponent<InputProps & RefAttributes<InputRef>>;
  Label: (__namedParameters) => Element;
  Mentions: MentionsT;
  Menu: (__namedParameters) => Element;
  MenuItem: (__namedParameters) => Element;
  Select: ForwardRefExoticComponent<{
     children?: any[];
  } & SelectProps<any, DefaultOptionType> & RefAttributes<BaseSelectRef>>;
  Selection: (__namedParameters) => Element;
  Slider: (__namedParameters) => Element;
  TabPane: (__namedParameters) => Element;
  Tabs: (__namedParameters) => Element;
  Tooltip: (props) => Element;
};

The form controls the feature dialogs are made of, in the app's look: react-cad's set of buerli's elements.

They take the place of the ones @buerli.io/react ships, prop for prop: plugins take their controls from init's elements option, so an app passes these there. Drawing does so by itself where the app left the stock ones in; an app that brought controls of its own keeps them. They are antd's controls, styled by the app's stylesheet (AppStyle).

Type Declaration

Name	Type	Description
`Alert()`	(`__namedParameters`) => `Element`	A message box (antd `Alert`).
`AutoComplete()`	(`__namedParameters`) => `Element`	A text input with suggestions (antd `AutoComplete`).
`Button()`	(`__namedParameters`) => `Element`	A button (antd `Button`); with `iconSrc`, a small one with an icon, and with `titleText`, a tooltip.
`ButtonGroup()`	(`__namedParameters`) => `Element`	Buttons side by side.
`Checkbox()`	(`__namedParameters`) => `Element`	A checkbox (antd `Checkbox`).
`Collapse()`	(`__namedParameters`) => `Element`	A section that opens and closes (antd `Collapse`), open while `isActive`.
`Dropdown()`	(`__namedParameters`) => `Element`	A dropdown menu (antd `Dropdown`).
`Group()`	(`__namedParameters`) => `Element`	A row (or, with `format="Columns"`, a column) of controls.
`Input`	`ForwardRefExoticComponent`<`InputProps` & `RefAttributes`<`InputRef`>>	A text or number input (antd `Input`).
`Label()`	(`__namedParameters`) => `Element`	A label in front of a control; `highlighted` marks a value that was changed.
`Mentions`	`MentionsT`	A text input with suggestions after a prefix such as `@` (antd `Mentions`), for expressions.
`Menu()`	(`__namedParameters`) => `Element`	A menu (antd `Menu`).
`MenuItem()`	(`__namedParameters`) => `Element`	An entry of elements.Menu.
`Select`	`ForwardRefExoticComponent`<{ `children?`: `any`[]; } & `SelectProps`<`any`, `DefaultOptionType`> & `RefAttributes`<`BaseSelectRef`>>	A dropdown to choose from (antd `Select`); its children are the options, as strings.
`Selection()`	(`__namedParameters`) => `Element`	The well a reference is picked into: a field that shows what its selector has selected, as chips. A click makes it listen (its selector is the drawing's active one): its ring turns red, and what is clicked on the stage or in the tree goes into it. While it listens, a click on one of its chips takes that one out again. While it is empty it says its `caption`, or the FieldContext's hint. The well a reference is picked into. A click makes it listen: its ring turns red, and what is clicked on the stage or in the tree goes into it. While it listens, a click on one of its chips takes that one out again.
`Slider()`	(`__namedParameters`) => `Element`	A slider (antd `Slider`).
`TabPane()`	(`__namedParameters`) => `Element`	A tab of elements.Tabs.
`Tabs()`	(`__namedParameters`) => `Element`	Tabs (antd `Tabs`).
`Tooltip()`	(`props`) => `Element`	A tooltip (antd `Tooltip`).

Example

import type { TooltipProps } from 'antd'
import { init, WASMClient } from '@buerli.io/classcad'
import { elements } from '@buerli.io/react-cad'

// the feature dialogs in the app's look; with a control of the app's own in place of one of them
init((drawingId) => new WASMClient(drawingId, { token: 'ccpk_…' }), {
  elements: { ...elements, Tooltip: (props: TooltipProps) => <elements.Tooltip {...props} mouseEnterDelay={0.6} /> },
})

Components

ContextMenu

const ContextMenu: React.FC<ContextMenuProps>;

The menu on a thing: its head says what the thing is, its entries what can be done with it.

It is antd's Dropdown around its children, which open it as its trigger says (['contextMenu'] for a right click). The entries' handlers are called with the menuInfo, so one list of entries serves every thing of a kind; a submenu's entries may be made when it opens. While it is open, a blank layer over the app (which Drawing renders) takes the click beside it that closes it. Its props: ContextMenuProps.

Example

import { createInfo, getDrawing } from '@buerli.io/core'
import type { DrawingID, ObjectID } from '@buerli.io/core'
import { ContextMenu, Icon } from '@buerli.io/react-cad'
import type { MenuElement } from '@buerli.io/react-cad'

// one list of entries for every row of a list of the app's: the handlers are told which object the menu is on
const rowMenu = (drawingId: DrawingID): MenuElement[] => [
  { key: 'select', label: 'Select', onClick: ({ interactionInfo }) => getDrawing(drawingId).api.interaction.select(interactionInfo) },
  { type: 'divider' },
  { key: 'hide', label: 'Hide', onClick: ({ interactionInfo }) => getDrawing(drawingId).api.plugin.setVisiblePlugin(interactionInfo.objectId, false) },
]

const Row = ({ drawingId, objectId, name }: { drawingId: DrawingID; objectId: ObjectID; name: string }) => (
  <ContextMenu items={rowMenu(drawingId)} menuInfo={{ interactionInfo: createInfo({ objectId }) }}
    caption={name} icon={<Icon name="workPlane" size={16} />} trigger={['contextMenu']}>
    <div>{name}</div>
  </ContextMenu>
)

const Menu: React.FC<RCadMenuProps>;

A dropdown menu on a button: by default a small button with three dots, or what is given as its children.

It is antd's Dropdown, with the MenuItems as its entries; an entry with children opens a submenu. A click on an entry calls its callback, and does not reach what lies under the menu. Its props: RCadMenuProps.

Example

import { createApi } from '@buerli.io/classcad'
import type { DrawingID } from '@buerli.io/core'
import { Icon, Menu } from '@buerli.io/react-cad'
import type { MenuItems } from '@buerli.io/react-cad'

// a file menu: a button with its icon, and a submenu of the formats
function FileMenu({ drawingId }: { drawingId: DrawingID }) {
  const save = (format: 'STP' | 'STL' | 'OFB') => createApi(drawingId).v1.common.save({ format, encoding: 'base64' })
  const items: MenuItems = {
    clear: { caption: 'New', icon: <Icon name="file" size={16} />, callback: () => createApi(drawingId).v1.common.clear() },
    save: {
      caption: 'Save as',
      icon: <Icon name="export" size={16} />,
      children: { stp: { caption: 'STEP', callback: () => save('STP') }, stl: { caption: 'STL', callback: () => save('STL') } },
    },
  }
  return (
    <Menu items={items} trigger={['click']}>
      <button className="rcad-tool"><Icon name="menu" size={18} /></button>
    </Menu>
  )
}

Types

ContextMenuProps

type ContextMenuProps = {
  caption: string;
  icon?: React.JSX.Element;
  items: MenuElement[];
  menuInfo: MenuInfo<any>;
  onHide?: () => void;
} & DropDownProps;

Props of ContextMenu, and any of antd's Dropdown props (trigger, open, …).

Type Declaration

Name	Type	Description
`caption`	`string`	The menu's head: what the thing is (its name).
`icon?`	`React.JSX.Element`	A drawing in front of the caption, such as an Icon.
`items`	`MenuElement`[]	The entries.
`menuInfo`	`MenuInfo`<`any`>	What the menu is on: the entries' handlers are called with it.
`onHide()?`	() => `void`	Called when the menu closes, after a click on an entry or beside it.

MenuElement

type MenuElement = 
  | Omit<MenuItemType, "onClick"> & {
  onClick?: (menuInfo) => void;
  onMouseEnter?: (menuInfo) => void;
  onMouseLeave?: (menuInfo) => void;
}
  | Omit<SubMenuType<MenuItemType>, "children" | "onClick"> & {
  children:   | MenuElement[]
     | ((menuInfo) => MenuElement[]);
  onClick?: (menuInfo) => void;
}
  | Omit<MenuItemGroupType<MenuItemType>, "children"> & {
  children: MenuElement[];
}
  | MenuDividerType
  | null;

An entry of a ContextMenu: antd's menu items (an item, a submenu, a group, a divider) with handlers that take the menu's MenuInfo. null is left out, for entries that are there only sometimes.

MenuInfo

type MenuInfo<T> = T extends void ? {
  interactionInfo: InteractionInfo;
} : {
  interactionInfo: InteractionInfo;
} & {
  clickInfo: T;
};

What a ContextMenu is opened on, which its entries' handlers are called with: the thing's interaction info, and with a type argument also clickInfo, what the app knows of the click (such as where on the stage it was).

Type Parameters

Type Parameter	Default type	Description
`T`	`void`	The type of `clickInfo`; without it there is none.

MenuItem

type MenuItem = {
  callback: (e) => void;
  caption: string | React.JSX.Element;
  children?: undefined;
  icon?: React.JSX.Element;
};

An entry of a Menu: what it says, and what a click on it does.

Properties

Property	Type	Description
`callback`	(`e`) => `void`	Called when the entry is clicked (or chosen with the keyboard).
`caption`	`string` \| `React.JSX.Element`	What the entry says.
`children?`	`undefined`	An entry has no entries of its own; one with entries is a submenu.
`icon?`	`React.JSX.Element`	A drawing in front of it, such as an Icon.

MenuItems

type MenuItems = Record<string, 
  | MenuItem
  | {
  caption: string;
  children: Record<string, MenuItem>;
  icon?: Element;
}>;

The entries of a Menu, by key, in the order they are shown: each a MenuItem, or a submenu with entries of its own ({ caption, icon?, children: { [key]: MenuItem } }).

RCadMenuProps

type RCadMenuProps = Omit<{
  items: MenuItems;
} & DropDownProps, "overlay">;

Props of Menu: its entries, and any of antd's Dropdown props (but overlay) to set how it opens.

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.

FieldContext

const FieldContext: Context<{
  hint?: string;
}>;

What a field tells the control inside it: here, what its picker (elements.Selection) says while it is empty and not listening.

The feature dialogs' fields provide it; a caption given to the picker itself goes first.

RCadElements

type RCadElements = typeof elements;

The type of react-cad's elements.

Objects​

elements​

Type Declaration​

Example​

Components​

ContextMenu​

Example​

Menu​

Example​

Types​

ContextMenuProps​

Type Declaration​

MenuElement​

MenuInfo​

Type Parameters​

MenuItem​

Properties​

MenuItems​

RCadMenuProps​

Advanced​

FieldContext​

RCadElements​

Objects

elements

Type Declaration

Example

Components

ContextMenu

Example

Menu

Example

Types

ContextMenuProps

Type Declaration

MenuElement

MenuInfo

Type Parameters

MenuItem

Properties

MenuItems

RCadMenuProps

Advanced

FieldContext

RCadElements