free-drawing

Appearance

@fabwcie/free-drawing / components/toolbar/widgets/BaseWidget / BaseWidget

Abstract Class: BaseWidget ​

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:30

Base of every toolbar widget (tool): button with icon and shortcut, widget options (title, shortcut from widgets option) and lifecycle. setActive(true) deactivates the previous widget, then calls initEvents, updateCursor, shows overlay and calls onActive; deactivation calls removeEvents, hides overlay and calls onDesactive. Pointer actions are wrapped in startAction / endAction.

Extended by ​

Constructors ​

Constructor ​

new BaseWidget(drawer, id, title, $icon, shortcut?): BaseWidget

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:62

Create the button of the widget (added to toolbar by addTo) and its shortcut

Parameters ​

drawer ​

Drawer

Drawer of this widget

id ​

"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 tool, also its translation key tools.<id>

title ​

string

Title of the button without title option nor translation of the id

$icon ​

string | SVGElement

Icon of the button: svg element or svg markup

shortcut? ​

string

Default key activating the tool, replaced by shortcut option

Returns ​

BaseWidget

Properties ​

$button ​

$button: HTMLButtonElement

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:38

Button activating the widget, pressed while it is active, named by the title of the tool

$container ​

protected readonly $container: HTMLElement

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:32

Container of the button in toolbar (or menu of its group), with a class from widget id

$icon ​

private $icon: SVGElement

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:34

Icon of the button

cursor ​

protected cursor: string = 'default'

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:52

Stage cursor while widget is active

disabled ​

private disabled: boolean = false

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:36

Widget can not be activated, see setDisabled

drawer ​

protected drawer: Drawer

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:64

Drawer of this widget

id ​

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

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:40

Id of the tool, key of the widget in toolbar (drawer.getWidget(id)) and namespace of its stage events

inAction ​

inAction: boolean = false

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:48

Pointer action in progress (drawing, erasing, selecting...), see startAction / endAction

options ​

readonly options: WidgetOptions

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:46

Widget options given with drawer widgets option

overlay? ​

optional overlay?: ToolOverlay

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:44

Options of the tool (color, width...), shown while widget is active (see showOverlayOnActive)

shortcut ​

shortcut: string | undefined

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:42

Key activating the tool, lower case (shortcut widget option, else default of the widget), none if undefined

showOverlayOnActive ​

protected showOverlayOnActive: boolean = true

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:50

Show overlay while widget is active (false when overlay depends on something else, e.g. selection)

Accessors ​

isDisabled ​

Get Signature ​

get isDisabled(): boolean

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

Widget can not be activated (see setDisabled)

Returns ​

boolean

Methods ​

_initEvents() ​

private _initEvents(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:238

Button click activates widget. Shift pressed or released during a pointer action of the active widget calls onConstrainChange. Listened while widget exists, unlike initEvents.

Returns ​

void

addTo() ​

addTo(parent): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:97

Internal

Adds the button of this widget (icon, shortcut letter) in its container, at the end of parent

Parameters ​

parent ​

HTMLElement

Element receiving the button container: toolbar root or menu of a group

Returns ​

void

afterDraw() ​

protected afterDraw(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:226

Shape drawn with this tool: selection tool activated, nothing selected, unless tool is kept (keepTool preference)

Returns ​

void

clearSelection() ​

clearSelection(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:219

Unselect shapes, with selection widget (implemented by it)

Returns ​

void

endAction() ​

protected endAction(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:202

Pointer action ends (pointer up)

Returns ​

void

initEvents() ​

protected initEvents(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:159

Add widget events (with onStage), called on activation

Returns ​

void

onActive() ​

protected onActive(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:171

Called on activation, after events, cursor and overlay setup

Returns ​

void

onConstrainChange()? ​

protected optional onConstrainChange(constrain): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:182

Shift pressed or released during a pointer action (square, circle, straight line...), without pointer move

Parameters ​

constrain ​

boolean

Shift pressed

Returns ​

void

onDesactive() ​

protected onDesactive(): void

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

Called on deactivation, after events removal and overlay hidden

Returns ​

void

onStage() ​

protected onStage(events, handler): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:147

Listen stage events while widget is active. Events are namespaced with widget id, so they are removed on deactivation without removing other listeners.

Parameters ​

events ​

string

Space separated event names

handler ​

KonvaEventListener<Stage, any>

Konva listener called with the stage event

Returns ​

void

removeEvents() ​

protected removeEvents(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:164

Remove widget events, called on deactivation

Returns ​

void

setActive() ​

setActive(active): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:259

Activate widget (nothing if disabled): previous widget deactivated, button pressed, then initEvents, updateCursor, overlay shown (if showOverlayOnActive), onActive and drawer focused. Deactivate it: pointer action ended, removeEvents, overlay hidden, onDesactive, button released.

Parameters ​

active ​

boolean

Activate (true) or deactivate (false) widget

Returns ​

void

setDisabled() ​

setDisabled(disabled): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:124

Disable or enable widget: a disabled widget can not be activated and its button is disabled (also its group when all its widgets are). Drawing tools are disabled in read only.

Parameters ​

disabled ​

boolean

Disable widget

Returns ​

void

shareLive() ​

protected shareLive(...shapes): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:212

Shapes being drawn shown to collaborators while drawing (final state is sent on change)

Parameters ​

shapes ​

...DrawingShape[]

Shapes in their current state, sent as a live change of the collaboration session

Returns ​

void

startAction() ​

protected startAction(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:194

Pointer action starts (pointer down): shortcuts are disabled and UI (toolbar, overlays...) ignores pointer

Returns ​

void

toggleDisable() ​

toggleDisable(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:115

Disable / enable widget, a disabled widget can not be activated

Returns ​

void

updateCursor() ​

updateCursor(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/BaseWidget.ts:187

Set stage cursor to the cursor of widget: on activation, and to restore it after a temporary one (pan grabbing)

Returns ​

void