Skip to content

@fabwcie/free-drawing / components/toolbar/Toolbar / Toolbar

Class: Toolbar ​

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:51

Toolbar of the footer: buttons of widgets (tools) and groups of widgets, created from widgets and widgetGroups options. Buttons are reached with Tab once (roving tabindex), arrow keys move between them.

Constructors ​

Constructor ​

new Toolbar(drawer): Toolbar

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:69

Create the toolbar in the footer with widgets and groups of drawer options

Parameters ​

drawer ​

Drawer

Drawer whose tools the toolbar shows

Returns ​

Toolbar

Properties ​

$keepToolButton ​

$keepToolButton: HTMLButtonElement | null = null

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:63

Keep tool after drawing (keepTool preference), first button, with selection widget only


$toolbarContent ​

$toolbarContent: HTMLDivElement

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:61

Container of the toolbar, added to the footer region of the layout


$toolbarRoot ​

$toolbarRoot: HTMLElement

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:55

Element with role toolbar holding buttons of widgets and groups


drawer ​

drawer: Drawer

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:53

Drawer of this toolbar


groups ​

groups: GroupWidget[] = []

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:59

Groups of widgets, in toolbar order


widgets ​

widgets: Map<"pan" | "selection" | "brush" | "eraser" | "undo" | "redo" | "text" | "rect" | "circle" | "ellipse" | "square" | "arrow" | "line" | "star" | "triangle" | "polygon" | "diamond" | "heart" | "cloud" | "highlighter" | "laser" | "frame", BaseWidget>

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:57

Widgets of toolbar, also those of groups

Methods ​

_addKeepTool() ​

private _addKeepTool(): void

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:185

Toggle button keeping drawing tool after drawing (Q), separated from widgets

Returns ​

void


_getButtons() ​

private _getButtons(): HTMLButtonElement[]

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:216

Buttons of toolbar in order: widgets and groups, not widgets of groups

Returns ​

HTMLButtonElement[]

Top buttons of toolbar, keep tool button first when shown


_initTabStop() ​

private _initTabStop(): void

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:225

First button is the tab stop until a tool is active

Returns ​

void


addGroup() ​

addGroup(group): void

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:137

Add a group of widgets (created by the app or the library), its widgets become widgets of toolbar

Parameters ​

group ​

GroupWidget

Group whose button is added at the end of toolbar

Returns ​

void


addWidget() ​

addWidget(widget): void

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:127

Add a widget at the end of toolbar, out of groups

Parameters ​

widget ​

BaseWidget

Widget whose button is added, registered by its id

Returns ​

void


getButton() ​

getButton(widget): HTMLButtonElement

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:161

Button of a widget in toolbar: its own, or the button of its group

Parameters ​

widget ​

BaseWidget

Widget of toolbar

Returns ​

HTMLButtonElement

Button of the group holding the widget, else the button of the widget


getWidget() ​

getWidget<T>(name): T | undefined

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:236

Widget of toolbar (also of a group) by its id

Type Parameters ​

T ​

T

Parameters ​

name ​

"pan" | "selection" | "brush" | "eraser" | "undo" | "redo" | "text" | "rect" | "circle" | "ellipse" | "square" | "arrow" | "line" | "star" | "triangle" | "polygon" | "diamond" | "heart" | "cloud" | "highlighter" | "laser" | "frame"

Id of the widget

Returns ​

T | undefined

The widget cast to T, undefined if toolbar has no such widget


init() ​

init(): void

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:100

Create widgets of widgets option, in its order, and groups of widgetGroups option at the place of their first widget. Called by the constructor.

Returns ​

void


setActiveWidget() ​

setActiveWidget(widget): void

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:149

Make a widget the active tool of drawer (activeWidget, activeTool), its button (or group) the tab stop. Called by BaseWidget.setActive, which activates a widget: call that one instead.

Parameters ​

widget ​

BaseWidget

Widget becoming the active tool

Returns ​

void


setTabStop() ​

setTabStop($button): void

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:176

Only given button of toolbar is reached with Tab (roving tabindex), arrow keys move between them

Parameters ​

$button ​

HTMLElement

Top button (widget or group) getting tabindex 0, others get -1

Returns ​

void


update() ​

update(): void

Defined in: packages/free-drawing/src/components/toolbar/Toolbar.ts:168

State of groups buttons: highlighted while one of their widgets is active, disabled with them

Returns ​

void