free-drawing

Appearance

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

Abstract Class: FreehandWidget ​

Defined in: packages/free-drawing/src/components/toolbar/widgets/FreehandWidget.ts:39

Tool drawing freehand strokes (brush, highlighter): outline of pointer path filled (perfect-freehand), straight from its start with Shift

Extends ​

Extended by ​

Constructors ​

Constructor ​

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

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 ​

FreehandWidget

Inherited from ​

BaseWidget.constructor

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

Inherited from ​

BaseWidget.$button

$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

Inherited from ​

BaseWidget.$container

cursor ​

protected cursor: string = crosshairCursor

Defined in: packages/free-drawing/src/components/toolbar/widgets/FreehandWidget.ts:43

Stage cursor while widget is active

Overrides ​

BaseWidget.cursor

drawer ​

protected drawer: Drawer

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

Drawer of this widget

Inherited from ​

BaseWidget.drawer

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

Inherited from ​

BaseWidget.id

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

Inherited from ​

BaseWidget.inAction

options ​

readonly options: WidgetOptions

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

Widget options given with drawer widgets option

Inherited from ​

BaseWidget.options

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)

Inherited from ​

BaseWidget.overlay

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

Inherited from ​

BaseWidget.shortcut

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)

Inherited from ​

BaseWidget.showOverlayOnActive

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

Inherited from ​

BaseWidget.isDisabled

isPaint ​

Get Signature ​

get isPaint(): boolean

Defined in: packages/free-drawing/src/components/toolbar/widgets/FreehandWidget.ts:67

Stroke being drawn (pointer action in progress)

Deprecated ​

use inAction

Returns ​

boolean

Methods ​

_updateLine() ​

private _updateLine(last?, straight?): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/FreehandWidget.ts:141

Stroke to pointer position, straight from its start with Shift

Parameters ​

last? ​

boolean

Last point of the stroke (pointer up): perfect-freehand ends it

straight? ​

boolean = false

Straight stroke from start to pointer, replacing the points of the path

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

Inherited from ​

BaseWidget.addTo

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

Inherited from ​

BaseWidget.afterDraw

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

Inherited from ​

BaseWidget.clearSelection

endAction() ​

protected endAction(): void

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

Pointer action ends (pointer up)

Returns ​

void

Inherited from ​

BaseWidget.endAction

freehandSettings() ​

abstract protected freehandSettings(): FreehandSettings

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

Settings of perfect-freehand

Returns ​

FreehandSettings

Thinning, smoothing and streamline of new strokes

initEvents() ​

protected initEvents(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/FreehandWidget.ts:75

Draw by drag: closed line added on pointer down, its outline follows the pointer (shared live), finished on pointer up

Returns ​

void

Overrides ​

BaseWidget.initEvents

lineStyle() ​

abstract protected lineStyle(): LineConfig

Defined in: packages/free-drawing/src/components/toolbar/widgets/FreehandWidget.ts:49

Style of new strokes (color, opacity, name...)

Returns ​

LineConfig

Attributes of the konva line of a new stroke

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

Inherited from ​

BaseWidget.onActive

onConstrainChange() ​

protected onConstrainChange(constrain): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/FreehandWidget.ts:132

Shift pressed or released while drawing: stroke straight from its start, or back to the pointer path

Parameters ​

constrain ​

boolean

Shift pressed

Returns ​

void

Overrides ​

BaseWidget.onConstrainChange

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

Inherited from ​

BaseWidget.onDesactive

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

Inherited from ​

BaseWidget.onStage

removeEvents() ​

protected removeEvents(): void

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

Remove widget events, called on deactivation

Returns ​

void

Inherited from ​

BaseWidget.removeEvents

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

Inherited from ​

BaseWidget.setActive

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

Inherited from ​

BaseWidget.setDisabled

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

Inherited from ​

BaseWidget.shareLive

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

Inherited from ​

BaseWidget.startAction

strokeSize() ​

abstract protected strokeSize(): number

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

Width of strokes

Returns ​

number

Diameter of the stroke given to perfect-freehand (size)

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

Inherited from ​

BaseWidget.toggleDisable

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

Inherited from ​

BaseWidget.updateCursor