Class FreehandMarkerEditor<TMarkerType>

Editor for freehand markers.

Type Parameters

TMarkerType extends FreehandMarker = FreehandMarker

Hierarchy (View Summary)

MarkerBaseEditor<TMarkerType>
- FreehandMarkerEditor

Accessors

container

get container(): SVGGElement
Returns the SVG container for the marker's and editor's visual elements.

Returns SVGGElement
Inherited from MarkerBaseEditor.container
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:85

continuousCreation

get continuousCreation(): boolean
When set to true, a new marker of the same type is created immediately after the current one is finished.

Returns boolean
Inherited from MarkerBaseEditor.continuousCreation
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:160

creationStyle

get creationStyle(): MarkerCreationStyle
Marker creation style.

Markers can either be created by drawing them or just dropping them on the canvas.

Returns MarkerCreationStyle
Inherited from MarkerBaseEditor.creationStyle
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:46

fillColor

get fillColor(): string
Gets marker's fill color.

Returns string
Inherited from MarkerBaseEditor.fillColor
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:222
set fillColor(color: string): void
Sets marker's fill color.
Parameters
- color: string
Returns void
Inherited from MarkerBaseEditor.fillColor
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:215

isSelected

get isSelected(): boolean
Returns true if the marker is currently selected

Returns boolean
Inherited from MarkerBaseEditor.isSelected
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:149

marker

get marker(): TMarkerType
Returns the marker instance.

Returns TMarkerType
Inherited from MarkerBaseEditor.marker
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:74

notes

get notes(): undefined | string
Gets marker's notes.

Returns undefined | string
Inherited from MarkerBaseEditor.notes
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:250
set notes(value: undefined | string): void
Sets marker's notes.
Parameters
- value: undefined | string
Returns void
Inherited from MarkerBaseEditor.notes
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:243

opacity

get opacity(): number
Gets marker's opacity.

Returns number
Inherited from MarkerBaseEditor.opacity
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:236
set opacity(value: number): void
Sets marker's opacity.
Parameters
- value: number
Returns void
Inherited from MarkerBaseEditor.opacity
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:229

overlayContainer

get overlayContainer(): HTMLDivElement
Overlay container for HTML elements like text editors, etc.

Returns HTMLDivElement
Inherited from MarkerBaseEditor.overlayContainer
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:96

state

get state(): MarkerEditorState
Gets editor's state.

Returns MarkerEditorState
Inherited from MarkerBaseEditor.state
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:107
set state(value: MarkerEditorState): void
Sets editor's state.
Parameters
- value: MarkerEditorState
Returns void
Inherited from MarkerBaseEditor.state
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:113

strokeColor

get strokeColor(): string
Gets marker's stroke (outline) color.

Returns string
Inherited from MarkerBaseEditor.strokeColor
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:175
set strokeColor(color: string): void
Sets marker's stroke (outline) color.
Parameters
- color: string
  color as string
Returns void
Inherited from MarkerBaseEditor.strokeColor
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:168

strokeDasharray

get strokeDasharray(): string
Gets marker's stroke (outline) dash array.

Returns string
Inherited from MarkerBaseEditor.strokeDasharray
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:208
set strokeDasharray(dashes: string): void
Sets marker's stroke (outline) dash array.
Parameters
- dashes: string
  dash array as string
Returns void
Inherited from MarkerBaseEditor.strokeDasharray
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:200

strokeWidth

get strokeWidth(): number
Gets marker's stroke (outline) width.

Returns number
Inherited from MarkerBaseEditor.strokeWidth
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:192
set strokeWidth(width: number): void
Sets marker's stroke (outline) width.
Parameters
- width: number
  stroke width in pixels.
Returns void
Inherited from MarkerBaseEditor.strokeWidth
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:183

Constructors

constructor

new FreehandMarkerEditor<TMarkerType extends FreehandMarker = FreehandMarker>(
properties: MarkerEditorProperties<TMarkerType>,
): FreehandMarkerEditor<TMarkerType>
Type Parameters
- TMarkerType extends FreehandMarker = FreehandMarker
Parameters
- properties: MarkerEditorProperties<TMarkerType>
Returns FreehandMarkerEditor<TMarkerType>
Overrides MarkerBaseEditor.constructor
- Defined in markerjs3/src/editor/FreehandMarkerEditor.ts:29

Methods

`Protected`adjustControlBox

adjustControlBox(): void
Adjusts marker's control box.

Returns void
Overrides MarkerBaseEditor.adjustControlBox
- Defined in markerjs3/src/editor/FreehandMarkerEditor.ts:144

dblClick

dblClick(point: IPoint, target?: EventTarget, ev?: MouseEvent): void
Handles pointer (mouse, touch, stylus, etc.) double click event.
Parameters
- point: IPoint
  event coordinates.
- Optionaltarget: EventTarget
  direct event target element.
- Optionalev: MouseEvent
  pointer event.
Returns void
Inherited from MarkerBaseEditor.dblClick
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:339

deselect

deselect(): void
Deselects this marker and hides selected marker UI.

Returns void
Overrides MarkerBaseEditor.deselect
- Defined in markerjs3/src/editor/FreehandMarkerEditor.ts:166

dispose

dispose(): void
Disposes the marker and clean's up.

Returns void
Inherited from MarkerBaseEditor.dispose
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:363

getState

getState(): MarkerBaseState
Returns marker's state that can be restored in the future.

Returns MarkerBaseState
Inherited from MarkerBaseEditor.getState
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:412

is

is<T>(cls: new (...args: any[]) => T): this is T
Type guard for specific marker editor types.

This allows to check if the editor is of a specific type which is useful for displaying type-specific UI.
Type Parameters
- T
  specific marker editor type.
Parameters
- cls: new (...args: any[]) => T
Returns this is T
Inherited from MarkerBaseEditor.is
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:59

manipulate

manipulate(point: IPoint, ev?: PointerEvent): void
Handles marker manipulation (move, resize, rotate, etc.).
Parameters
- point: IPoint
  event coordinates.
- Optionalev: PointerEvent
  pointer event.
Returns void
Overrides MarkerBaseEditor.manipulate
- Defined in markerjs3/src/editor/FreehandMarkerEditor.ts:109

ownsTarget

ownsTarget(el: EventTarget): boolean
Returns true if the marker or the editor owns supplied target element.
Parameters
- el: EventTarget
  target element
Returns boolean
Overrides MarkerBaseEditor.ownsTarget
- Defined in markerjs3/src/editor/FreehandMarkerEditor.ts:46

pointerDown

pointerDown(point: IPoint, target?: EventTarget, ev?: PointerEvent): void
Handles pointer (mouse, touch, stylus, etc.) down event.
Parameters
- point: IPoint
  event coordinates.
- Optionaltarget: EventTarget
  direct event target element.
- Optionalev: PointerEvent
  pointer event.
Returns void
Overrides MarkerBaseEditor.pointerDown
- Defined in markerjs3/src/editor/FreehandMarkerEditor.ts:58

pointerUp

pointerUp(point: IPoint, ev?: PointerEvent): void
Handles pointer (mouse, touch, stylus, etc.) up event.
Parameters
- point: IPoint
  event coordinates.
- Optionalev: PointerEvent
  pointer event.
Returns void
Overrides MarkerBaseEditor.pointerUp
- Defined in markerjs3/src/editor/FreehandMarkerEditor.ts:98

restoreState

restoreState(state: MarkerBaseState): void
Restores previously saved marker state.
Parameters
- state: MarkerBaseState
  previously saved state.
Returns void
Inherited from MarkerBaseEditor.restoreState
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:421

scale

scale(scaleX: number, scaleY: number): void
Scales the marker and the editor.
Parameters
- scaleX: number
- scaleY: number
Returns void
Inherited from MarkerBaseEditor.scale
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:376

select

select(): void
Selects this marker and displays appropriate selected marker UI.

Returns void
Overrides MarkerBaseEditor.select
- Defined in markerjs3/src/editor/FreehandMarkerEditor.ts:160

`Protected`setupControlBox

setupControlBox(): void
Creates control box for manipulation controls.

Returns void
- Defined in markerjs3/src/editor/FreehandMarkerEditor.ts:127

`Protected`stateChanged

stateChanged(): void
Called by a marker when its state could have changed. Does a check if the state has indeed changed before firing the handler.

Returns void
Inherited from MarkerBaseEditor.stateChanged
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:386

Properties

`Protected`_container

_container: SVGGElement

SVG container for the marker's and editor's visual elements.

`Protected`_continuousCreation

_continuousCreation: boolean = false

When set to true, a new marker of the same type is created immediately after the current one is finished.

`Protected`_controlBox

_controlBox: SVGGElement = ...

SVG group holding editor's control box.

`Protected`_creationStyle

_creationStyle: MarkerCreationStyle = 'draw'

Marker creation style.

Markers can either be created by drawing them or just dropping them on the canvas.

`Protected`_isSelected

_isSelected: boolean = false

Is this marker selected?

`Protected`_marker

_marker: TMarkerType

Marker instance.

`Protected`_markerType

_markerType: new (container: SVGGElement) => TMarkerType

Marker type constructor.

Type declaration

- new (container: SVGGElement): TMarkerType
- Marker type constructor.
  Parameters
  - container: SVGGElement
  Returns TMarkerType

`Protected`_overlayContainer

_overlayContainer: HTMLDivElement

Overlay container for HTML elements like text editors, etc.

`Protected`_state

_state: MarkerEditorState = 'new'

Editor's state.

`Protected`controlBox

controlBox: SVGGElement = ...

Container for control elements.

`Protected`isMultiSelected

isMultiSelected: boolean = false

Is this marker selected in a multi-selection?

`Protected` `Optional`manipulationStartState

manipulationStartState?: string

Marker's state when it is selected

`Protected`manipulationStartX

manipulationStartX: number = 0

Pointer X coordinate at the start of move or resize.

`Protected`manipulationStartY

manipulationStartY: number = 0

Pointer Y coordinate at the start of move or resize.

`Optional`onMarkerCreated

onMarkerCreated?: <T extends MarkerBaseEditor<MarkerBase>>(editor: T) => void

Method called when marker creation is finished.

`Optional`onStateChanged

onStateChanged?: <T extends MarkerBaseEditor<MarkerBase>>(editor: T) => void

Method to call when marker state changes.

Class FreehandMarkerEditor<TMarkerType>

Type Parameters

Hierarchy (View Summary)

Index

Accessors

Constructors

Methods

Properties

Accessors

container

Returns SVGGElement

continuousCreation

Returns boolean

creationStyle

Returns MarkerCreationStyle

fillColor

Returns string

Parameters

Returns void

isSelected

Returns boolean

marker

Returns TMarkerType

notes

Returns undefined | string

Parameters

Returns void

opacity

Returns number

Parameters

Returns void

overlayContainer

Returns HTMLDivElement

state

Returns MarkerEditorState

Parameters

Returns void

strokeColor

Returns string

Parameters

Returns void

strokeDasharray

Returns string

Parameters

Returns void

strokeWidth

Returns number

Parameters

Returns void

Constructors

constructor

Type Parameters

Parameters

Returns FreehandMarkerEditor<TMarkerType>

Methods

ProtectedadjustControlBox

Returns void

dblClick

Parameters

Returns void

deselect

Returns void

dispose

Returns void

getState

Returns MarkerBaseState

is

Type Parameters

Parameters

Returns this is T

manipulate

Parameters

Returns void

ownsTarget

Parameters

Returns boolean

pointerDown

Parameters

Returns void

pointerUp

`Protected`adjustControlBox

`Protected`setupControlBox

`Protected`stateChanged

`Protected`_container

`Protected`_continuousCreation

`Protected`_controlBox

`Protected`_creationStyle

`Protected`_isSelected

`Protected`_marker

`Protected`_markerType

`Protected`_overlayContainer

`Protected`_state

`Protected`controlBox

`Protected`isMultiSelected

`Protected` `Optional`manipulationStartState

`Protected`manipulationStartX

`Protected`manipulationStartY

`Optional`onMarkerCreated

`Optional`onStateChanged