Class MarkerBaseEditor<TMarkerType>

container

• get container(): SVGGElement

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

  Returns SVGGElement

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

creationStyle

• get creationStyle(): MarkerCreationStyle

  Marker creation style.

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

  Returns MarkerCreationStyle

fillColor

• get fillColor(): string

  Gets marker's fill color.

  Returns string
• set fillColor(color: string): void

  Sets marker's fill color.

  Parameters

  • color: string

  Returns void

isSelected

• get isSelected(): boolean

  Returns true if the marker is currently selected

  Returns boolean

marker

• get marker(): TMarkerType

  Returns the marker instance.

  Returns TMarkerType

notes

• get notes(): undefined | string

  Gets marker's notes.

  Returns undefined | string
• set notes(value: undefined | string): void

  Sets marker's notes.

  Parameters

  • value: undefined | string

  Returns void

opacity

• get opacity(): number

  Gets marker's opacity.

  Returns number
• set opacity(value: number): void

  Sets marker's opacity.

  Parameters

  • value: number

  Returns void

overlayContainer

• get overlayContainer(): HTMLDivElement

  Overlay container for HTML elements like text editors, etc.

  Returns HTMLDivElement

state

• get state(): MarkerEditorState

  Gets editor's state.

  Returns MarkerEditorState
• set state(value: MarkerEditorState): void

  Sets editor's state.

  Parameters

  • value: MarkerEditorState

  Returns void

strokeColor

• get strokeColor(): string

  Gets marker's stroke (outline) color.

  Returns string
• set strokeColor(color: string): void

  Sets marker's stroke (outline) color.

  Parameters

  • color: string

    color as string

  Returns void

strokeDasharray

• get strokeDasharray(): string

  Gets marker's stroke (outline) dash array.

  Returns string
• set strokeDasharray(dashes: string): void

  Sets marker's stroke (outline) dash array.

  Parameters

  • dashes: string

    dash array as string

  Returns void

strokeWidth

• get strokeWidth(): number

  Gets marker's stroke (outline) width.

  Returns number
• set strokeWidth(width: number): void

  Sets marker's stroke (outline) width.

  Parameters

  • width: number

    stroke width in pixels.

  Returns void

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>

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

deselect

• deselect(): void

  Deselects this marker and hides selected marker UI.

  Returns void

dispose

• dispose(): void

  Disposes the marker and clean's up.

  Returns void

getState

• getState(): MarkerBaseState

  Returns marker's state that can be restored in the future.

  Returns MarkerBaseState

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

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

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

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

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

restoreState

• restoreState(state: MarkerBaseState): void

  Restores previously saved marker state.

  Parameters

  • state: MarkerBaseState

    previously saved state.

  Returns void

scale

• scale(scaleX: number, scaleY: number): void

  Scales the marker and the editor.

  Parameters

  • scaleX: number
  • scaleY: number

  Returns void

select

• select(multi?: boolean): void

  Selects this marker and displays appropriate selected marker UI.

  Parameters

  • multi: boolean = false

  Returns void

OptionalonMarkerCreated

OptionalonStateChanged