free-drawing

Appearance

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

Abstract Class: ShapeWidget<T> ​

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:60

Tool drawing a shape by drag (line, rectangle, ellipse, arrow), shift key constrains the shape

Extends ​

Extended by ​

Type Parameters ​

T ​

T extends DrawingShape

Constructors ​

Constructor ​

new ShapeWidget<T>(drawer, id, title, icon, shortcut?): ShapeWidget<T>

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:80

Create the widget with the shape overlay shared by shape tools of the drawer

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

title ​

string

Title of the button without translation of the id

icon ​

string

Svg markup of the button icon

shortcut? ​

string

Default key activating the tool

Returns ​

ShapeWidget<T>

Overrides ​

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/ShapeWidget.ts:62

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

hasEdges ​

protected hasEdges: boolean = false

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:68

Corners sharp or round (edges option)

hasFill ​

protected hasFill: boolean = false

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:66

Shapes of tool have a background color (rectangle, ellipse)

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 ​

overlay: ShapeOverlay

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

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

Overrides ​

BaseWidget.overlay

pointerEvent ​

protected pointerEvent: MouseEvent | TouchEvent | null = null

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:70

Last pointer event of drawing (modifier keys)

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 ​

TriangleWidget.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 ​

TriangleWidget.isDisabled

isPaint ​

Get Signature ​

get isPaint(): boolean

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

Shape being drawn (pointer action in progress)

Deprecated ​

use inAction

Returns ​

boolean

shapeStyle ​

Get Signature ​

get protected shapeStyle(): object

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:120

Style of new shapes, from drawer options

Returns ​
dash ​

dash: number[] | undefined

Dash of strokeStyle option for this stroke width, undefined for solid

fill ​

fill: ColorLike | undefined

Background color (fillColor option) of shapes having one (hasFill), none if transparent

hitStrokeWidth ​

hitStrokeWidth: number

Width of the hit region, 20 at least: easier to select / erase than the stroke only

lineCap ​

lineCap: "round"

Round ends of lines, dashes and dots

opacity ​

opacity: number

Opacity (opacity option)

stroke ​

stroke: ColorLike = strokeColor

Stroke color (strokeColor option)

strokeWidth ​

strokeWidth: number

Stroke width (strokeWidth option)

Methods ​

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

createShape() ​

abstract protected createShape(start): T

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:106

New shape at drag start

Parameters ​

start ​

Vector2d

Drag start, in drawing coordinates

Returns ​

T

Shape of the tool at start, added to drawing then updated while dragging

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

initEvents() ​

protected initEvents(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:167

Draw by drag: shape created on pointer down, updated on move (shared live), finished on pointer up (removed after a simple click)

Returns ​

void

Overrides ​

BaseWidget.initEvents

onActive() ​

protected onActive(): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:158

Overlay shared by shape tools: background color and edges only for shapes having them

Returns ​

void

Overrides ​

BaseWidget.onActive

onConstrainChange() ​

protected onConstrainChange(constrain): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:151

Shift pressed or released while drawing: shape updated to the pointer with or without constraint

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

onDrawEnd()? ​

protected optional onDrawEnd(shape): void

Defined in: packages/free-drawing/src/components/toolbar/widgets/ShapeWidget.ts:145

Drawing ended: shape drawn, or null (removed: simple click)

Parameters ​

shape ​

T | null

Shape drawn, in its final geometry and placed in frames, null after a simple click

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

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

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

updateShape() ​

abstract protected updateShape(shape, start, end, constrain): void

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

Update shape geometry from drag start to end

Parameters ​

shape ​

T

Shape being drawn, created by createShape

start ​

Vector2d

Drag start, in drawing coordinates

end ​

Vector2d

Pointer, in drawing coordinates

constrain ​

boolean

Shift key pressed (square, circle, 45 degrees...)

Returns ​

void