AccuDraw User Interface
AccuDraw is an aide for entering coordinate data in editing and modeling applications.
The @itwin/appui-react package contains several classes and components for displaying a UI for AccuDraw
in a Widget or Dialog.
AccuDraw UI Implementation in appui-react
AccuDraw UI classes and components include:
| Class or Component | Description |
|---|---|
| AccuDrawCommandItems | Contains ToolItemDef instances for AccuDraw tools |
| AccuDrawDialog | Dialog that displays an AccuDrawFieldContainer component |
| AccuDrawFieldContainer | Displays an AccuDrawInputField component for each field |
| AccuDrawInputField | Displays an Input component and a Lock icon along with an optional field icon |
| AccuDrawKeyboardShortcuts | Defines default AccuDraw Keyboard Shortcuts using ToolItemDefs from AccuDrawCommandItems |
| AccuDrawUiSettings | User Interface Settings for each field, including CSS styles, colors, labels & icons |
| AccuDrawWidget | Widget that displays an AccuDrawFieldContainer component |
| FrameworkAccuDraw | Subclass of the AccuDraw core class that overrides methods, emits events for value and status changes, and processes field input |
FrameworkAccuDraw Setup in IModelApp
An AccuDraw class or subclass instance is setup in the IModelApp instance using IModelApp.startup options containing the iModelApp.accuDraw member.
import { FrameworkAccuDraw } from "@itwin/appui-react";
. . .
const opts: NativeAppOpts = {
iModelApp: {
. . .
accuDraw: new FrameworkAccuDraw(),
. . .
},
. . .
// Start the app.
await SampleAppIModelApp.startup(opts);
API Reference
Last Updated: 02 February, 2022