linecanvasdrawtool.md

andculturecode-javascript-react-components › LineCanvasDrawTool

Class: LineCanvasDrawTool

Hierarchy

• BaseCanvasDrawTool

  ↳ LineCanvasDrawTool

Implements

• CanvasDrawTool

Index

Constructors

• constructor

Properties

• _canvas
• _color
• _config
• _context
• _currentPosition
• _isPointerActive
• _previousPosition
• _uiSettings
• _width
• toolType

Methods

• _addEventListeners
• _drawInteraction
• _drawStroke
• _finishStroke
• _getStrokeSettings
• _move
• _onFinishStroke
• _onMouseDownCanvas
• _onMouseMoveCanvas
• _onMouseUpWindow
• _onTouchEndWindow
• _onTouchMoveCanvas
• _onTouchStartCanvas
• _removeEventListeners
• _startStroke
• dispose
• drawStrokes
• initialize

Constructors

constructor

+ new LineCanvasDrawTool(drawToolConfig: DrawToolConfig): LineCanvasDrawTool

Overrides BaseCanvasDrawTool.constructor

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:27

Parameters:

Name	Type
drawToolConfig	DrawToolConfig

Returns: LineCanvasDrawTool

Properties

Protected _canvas

• _canvas: HTMLCanvasElement

Inherited from BaseCanvasDrawTool._canvas

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:35

---

Protected _color

• _color: string

Inherited from BaseCanvasDrawTool._color

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:36

---

Protected _config

• _config: DrawToolConfig

Inherited from BaseCanvasDrawTool._config

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:37

---

Protected _context

• _context: CanvasRenderingContext2D

Inherited from BaseCanvasDrawTool._context

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:38

---

Protected _currentPosition

• _currentPosition: PointerPosition

Inherited from BaseCanvasDrawTool._currentPosition

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:39

---

Protected _isPointerActive

• _isPointerActive: boolean

Inherited from BaseCanvasDrawTool._isPointerActive

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:40

---

Protected _previousPosition

• _previousPosition: PointerPosition

Inherited from BaseCanvasDrawTool._previousPosition

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:41

---

Protected _uiSettings

• _uiSettings: DrawToolUiSettings

Inherited from BaseCanvasDrawTool._uiSettings

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:42

---

Protected _width

• _width: number

Inherited from BaseCanvasDrawTool._width

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:43

---

toolType

• toolType: CanvasToolType

Implementation of CanvasDrawTool.toolType

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:27

Methods

Private _addEventListeners

▸ _addEventListeners(): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:74

Binds the necessary mouse and touch events

Returns: void

---

Private _drawInteraction

▸ _drawInteraction(): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:103

Draws the current state of the interaction

Returns: void

---

Private _drawStroke

▸ _drawStroke(startX: number, startY: number, endX: number, endY: number, color: string, width: number): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:124

Draws the interaction based on the provided state

Parameters:

Name	Type	Description
startX	number	-
startY	number	-
endX	number	-
endY	number	-
color	string	-
width	number

Returns: void

---

Private _finishStroke

▸ _finishStroke(): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:152

Finalizes the entire stroke interaction

Returns: void

---

Private _getStrokeSettings

▸ _getStrokeSettings(): LineStrokeSettings

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:168

Returns the stroke settings for the entire interaction including the stroke, color, and width

Returns: LineStrokeSettings

---

Private _move

▸ _move(newCurrentPosition: PointerPosition): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:186

Handles the move interaction while drawing

Parameters:

Name	Type	Description
newCurrentPosition	PointerPosition

Returns: void

---

Protected _onFinishStroke

▸ _onFinishStroke(strokeSettings: CanvasDrawToolSettings): void

Inherited from BaseCanvasDrawTool._onFinishStroke

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:65

Parameters:

Name	Type
strokeSettings	CanvasDrawToolSettings

Returns: void

---

Private _onMouseDownCanvas

▸ _onMouseDownCanvas(e: MouseEvent): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:252

Parameters:

Name	Type
e	MouseEvent

Returns: void

---

Private _onMouseMoveCanvas

▸ _onMouseMoveCanvas(e: MouseEvent): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:259

Parameters:

Name	Type
e	MouseEvent

Returns: void

---

Private _onMouseUpWindow

▸ _onMouseUpWindow(): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:266

Returns: void

---

Private _onTouchEndWindow

▸ _onTouchEndWindow(e: TouchEvent): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:270

Parameters:

Name	Type
e	TouchEvent

Returns: void

---

Private _onTouchMoveCanvas

▸ _onTouchMoveCanvas(e: TouchEvent): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:274

Parameters:

Name	Type
e	TouchEvent

Returns: void

---

Private _onTouchStartCanvas

▸ _onTouchStartCanvas(e: TouchEvent): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:287

Parameters:

Name	Type
e	TouchEvent

Returns: void

---

Private _removeEventListeners

▸ _removeEventListeners(): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:205

Removed the bound mouse and touch events

Returns: void

---

Private _startStroke

▸ _startStroke(startingPosition: PointerPosition): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:236

Captures the starting position and begins the entire stroke interaction

Parameters:

Name	Type	Description
startingPosition	PointerPosition

Returns: void

---

dispose

▸ dispose(): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:41

Returns: void

---

drawStrokes

▸ drawStrokes(strokes: CanvasDrawToolSettings[]): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:45

Parameters:

Name	Type
strokes	CanvasDrawToolSettings[]

Returns: void

---

initialize

▸ initialize(): void

Defined in src/atoms/forms/canvas-sketch/tools/line-canvas-draw-tool.ts:61

Returns: void