Learning › Ui › Appui-react › Accu Draw
Edit this page

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);

Last Updated: 01 May, 2024