Class MarkerBaseEditor<TMarkerType>

Base class for all marker editors.

Type Parameters

TMarkerType extends MarkerBase = MarkerBase
marker type the instance of the editor is for.

Hierarchy (View Summary)

MarkerBaseEditor

Accessors

container

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

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

fillColor

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

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

isSelected

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

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

marker

get marker(): TMarkerType
Returns the marker instance.

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

notes

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

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

opacity

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

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

overlayContainer

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

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

state

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

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

strokeColor

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

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

strokeDasharray

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

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

strokeWidth

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

Returns number
- 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
- 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
- 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
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:278

Constructors

constructor

new MarkerBaseEditor<TMarkerType extends MarkerBase = MarkerBase>(
properties: MarkerEditorProperties<TMarkerType>,
): MarkerBaseEditor<TMarkerType>
Creates a new instance of marker editor.
Type Parameters
- TMarkerType extends MarkerBase = MarkerBase
Parameters
- properties: MarkerEditorProperties<TMarkerType>
  marker editor properties.
Returns MarkerBaseEditor<TMarkerType>
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:288

Methods

`Protected`adjustControlBox

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

Returns void
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:396

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

deselect

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

Returns void
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:342

dispose

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

Returns void
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:391

getState

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

Returns MarkerBaseState
- 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
- 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
- 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
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:377

ownsTarget

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

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

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

restoreState

restoreState(state: MarkerBaseState): void
Restores previously saved marker state.
Parameters
- state: MarkerBaseState
  previously saved state.
Returns void
- 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
- 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
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:331

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
- 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
- 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`isMultiSelected

isMultiSelected: boolean = false

Is this marker selected in a multi-selection?

`Protected` `Optional`manipulationStartState

manipulationStartState?: string

Marker's state when it is selected

`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 MarkerBaseEditor<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

zoomLevel

Returns number

Remarks

Since

Parameters

Returns void

Remarks

Since

Constructors

constructor

Type Parameters

Parameters

Returns MarkerBaseEditor<TMarkerType>

Methods

ProtectedadjustControlBox

Returns void

dblClick

Parameters

Returns void

deselect

Returns void

dispose

Returns void

getState

Returns MarkerBaseState

hide

Returns void

Remarks

Since

is

Type Parameters

`Protected`adjustControlBox

`Protected`stateChanged

`Protected`_container

`Protected`_continuousCreation

`Protected` `Optional`_controlBox

`Protected`_creationStyle

`Protected`_isSelected

`Protected`_marker

`Protected`_markerType

`Protected`_overlayContainer

`Protected`_state

`Protected`isMultiSelected

`Protected` `Optional`manipulationStartState

`Optional`onMarkerCreated

`Optional`onStateChanged