Class ArrowMarkerEditor<TMarkerType>

Editor for arrow markers.

Type Parameters

TMarkerType extends ArrowMarker = ArrowMarker

Hierarchy (View Summary)

LinearMarkerEditor<TMarkerType>
- ArrowMarkerEditor

Accessors

arrowType

get arrowType(): ArrowType
Returns the arrow type.

Returns ArrowType
- Defined in markerjs3/src/editor/ArrowMarkerEditor.ts:23
set arrowType(value: ArrowType): void
Sets the arrow type.
Parameters
- value: ArrowType
Returns void
- Defined in markerjs3/src/editor/ArrowMarkerEditor.ts:16

container

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

Returns SVGGElement
Inherited from LinearMarkerEditor.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 LinearMarkerEditor.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 LinearMarkerEditor.creationStyle
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:46

fillColor

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

Returns string
Inherited from LinearMarkerEditor.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 LinearMarkerEditor.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 LinearMarkerEditor.isSelected
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:149

marker

get marker(): TMarkerType
Returns the marker instance.

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

notes

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

Returns undefined | string
Inherited from LinearMarkerEditor.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 LinearMarkerEditor.notes
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:243

opacity

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

Returns number
Inherited from LinearMarkerEditor.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 LinearMarkerEditor.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 LinearMarkerEditor.overlayContainer
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:96

state

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

Returns MarkerEditorState
Inherited from LinearMarkerEditor.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 LinearMarkerEditor.state
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:113

strokeColor

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

Returns string
Inherited from LinearMarkerEditor.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 LinearMarkerEditor.strokeColor
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:168

strokeDasharray

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

Returns string
Inherited from LinearMarkerEditor.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 LinearMarkerEditor.strokeDasharray
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:200

strokeWidth

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

Returns number
Inherited from LinearMarkerEditor.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 LinearMarkerEditor.strokeWidth
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:183

zoomLevel

get zoomLevel(): number
Returns the current zoom level.

Returns number
Remarks
This set by the MarkerArea based on its current zoom level. It is used to scale the marker editor controls.

Since
3.6.0
Inherited from LinearMarkerEditor.zoomLevel
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:265
set zoomLevel(value: number): void
Sets the current zoom level.
Parameters
- value: number
Returns void
Remarks
This set by the MarkerArea based on its current zoom level. It is used to scale the marker editor controls.

Since
3.6.0
Inherited from LinearMarkerEditor.zoomLevel
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:278

Constructors

constructor

new ArrowMarkerEditor<TMarkerType extends ArrowMarker = ArrowMarker>(
properties: MarkerEditorProperties<TMarkerType>,
): ArrowMarkerEditor<TMarkerType>
Type Parameters
- TMarkerType extends ArrowMarker = ArrowMarker
Parameters
- properties: MarkerEditorProperties<TMarkerType>
Returns ArrowMarkerEditor<TMarkerType>
Inherited from LinearMarkerEditor.constructor
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:52

Methods

`Protected`addControlGrips

addControlGrips(): void
Adds control grips to control box.

Returns void
Inherited from LinearMarkerEditor.addControlGrips
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:210

`Protected`adjustControlBox

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

Returns void
Inherited from LinearMarkerEditor.adjustControlBox
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:200

`Protected`createGrip

createGrip(): ResizeGrip
Creates manipulation grip.

Returns ResizeGrip
- manipulation grip.
Inherited from LinearMarkerEditor.createGrip
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:221

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 LinearMarkerEditor.dblClick
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:368

deselect

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

Returns void
Inherited from LinearMarkerEditor.deselect
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:272

dispose

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

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

getState

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

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

hide

hide(): void
Hides all marker's visuals and editor controls.

Returns void
Remarks
This could be useful when you want to temporarily hide the marker so you can, for example, create a new one in the same place. Reveal it later with show.

Since
3.7.0
Inherited from LinearMarkerEditor.hide
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:444

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 LinearMarkerEditor.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
Inherited from LinearMarkerEditor.manipulate
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:149

ownsTarget

ownsTarget(el: EventTarget): boolean
Returns true if the marker or the editor owns supplied target element.
Parameters
- el: EventTarget
  target element
Returns boolean
Inherited from LinearMarkerEditor.ownsTarget
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:72

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
Inherited from LinearMarkerEditor.pointerDown
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:82

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
Inherited from LinearMarkerEditor.pointerUp
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:128

`Protected`positionGrip

positionGrip(grip: SVGGraphicsElement, x: number, y: number): void
Positions manipulation grip.
Parameters
- grip: SVGGraphicsElement
  grip to position
- x: number
  new X coordinate
- y: number
  new Y coordinate
Returns void
Inherited from LinearMarkerEditor.positionGrip
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:259

`Protected`positionGrips

positionGrips(): void
Updates manipulation grip layout.

Returns void
Inherited from LinearMarkerEditor.positionGrips
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:233

`Protected`resize

resize(point: IPoint): void
Parameters
- point: IPoint
Returns void
Inherited from LinearMarkerEditor.resize
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:168

restoreState

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

scale

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

select

select(multi?: boolean): void
Selects this marker and displays appropriate selected marker UI.
Parameters
- multi: boolean = false
Returns void
Inherited from LinearMarkerEditor.select
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:265

`Protected`setupControlBox

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

Returns void
Inherited from LinearMarkerEditor.setupControlBox
- Defined in markerjs3/src/editor/LinearMarkerEditor.ts:187

show

show(): void
Shows all marker's visuals and editor controls.

Returns void
Remarks
This could be useful when you want to temporarily hide the marker (with hide) so you can, for example, create a new one in the same place.

Since
3.7.0
Inherited from LinearMarkerEditor.show
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:457

`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 LinearMarkerEditor.stateChanged
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:414

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` `Optional`_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` `Optional`activeGrip

activeGrip?: ResizeGrip

Active manipulation grip.

`Protected`defaultLength

defaultLength: number = 50

Default line length when marker is created with a simple click (without dragging).

`Protected` `Optional`grip1

grip1?: ResizeGrip

First manipulation grip

`Protected` `Optional`grip2

grip2?: ResizeGrip

Second manipulation grip.

`Protected`isMultiSelected

isMultiSelected: boolean = false

Is this marker selected in a multi-selection?

`Protected`manipulationBox

manipulationBox: SVGGElement = ...

Container for manipulation grips.

`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 ArrowMarkerEditor<TMarkerType>

Type Parameters

Hierarchy (View Summary)

Index

Accessors

Constructors

Methods

Properties

Accessors

arrowType

Returns ArrowType

Parameters

Returns void

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

zoomLevel

Returns number

Remarks

Since

Parameters

Returns void

Remarks

Since

Constructors

constructor

Type Parameters

Parameters

Returns ArrowMarkerEditor<TMarkerType>

Methods

ProtectedaddControlGrips

Returns void

ProtectedadjustControlBox

Returns void

ProtectedcreateGrip

Returns ResizeGrip

dblClick

Parameters

Returns void

deselect

Returns void

dispose

Returns void

`Protected`addControlGrips

`Protected`adjustControlBox

`Protected`createGrip

`Protected`positionGrip

`Protected`positionGrips

`Protected`resize

`Protected`setupControlBox

`Protected`stateChanged

`Protected`_container

`Protected`_continuousCreation

`Protected` `Optional`_controlBox

`Protected`_creationStyle

`Protected`_isSelected

`Protected`_marker

`Protected`_markerType

`Protected`_overlayContainer

`Protected`_state

`Protected` `Optional`activeGrip

`Protected`defaultLength

`Protected` `Optional`grip1

`Protected` `Optional`grip2

`Protected`isMultiSelected

`Protected`manipulationBox

`Protected` `Optional`manipulationStartState

`Protected`manipulationStartX

`Protected`manipulationStartY

`Optional`onMarkerCreated