Class CaptionFrameMarkerEditor<TMarkerType>

Editor for caption frame markers.

Type Parameters

TMarkerType extends CaptionFrameMarker = CaptionFrameMarker

Hierarchy (View Summary)

TextMarkerEditor<TMarkerType>
- CaptionFrameMarkerEditor

Index

Accessors

color container continuousCreation creationStyle fillColor fontFamily fontSize isSelected marker notes opacity overlayContainer state strokeColor strokeDasharray strokeWidth zoomLevel

Constructors

constructor

Accessors

color

get color(): string
Text color.

Returns string
Inherited from TextMarkerEditor.color
- Defined in markerjs3/src/editor/TextMarkerEditor.ts:35
set color(color: string): void
Text color.
Parameters
- color: string
Returns void
Inherited from TextMarkerEditor.color
- Defined in markerjs3/src/editor/TextMarkerEditor.ts:28

container

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

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

fillColor

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

Returns string
Inherited from TextMarkerEditor.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 TextMarkerEditor.fillColor
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:215

fontFamily

get fontFamily(): string
Returns text's font family.

Returns string
Inherited from TextMarkerEditor.fontFamily
- Defined in markerjs3/src/editor/TextMarkerEditor.ts:49
set fontFamily(font: string): void
Sets text's font family.
Parameters
- font: string
Returns void
Inherited from TextMarkerEditor.fontFamily
- Defined in markerjs3/src/editor/TextMarkerEditor.ts:42

get fontSize(): FontSize
Returns text's font size.

Returns FontSize
Inherited from TextMarkerEditor.fontSize
- Defined in markerjs3/src/editor/TextMarkerEditor.ts:63
set fontSize(size: FontSize): void
Sets text's font size.
Parameters
- size: FontSize
Returns void
Inherited from TextMarkerEditor.fontSize
- Defined in markerjs3/src/editor/TextMarkerEditor.ts:56

isSelected

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

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

marker

get marker(): TMarkerType
Returns the marker instance.

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

notes

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

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

opacity

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

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

state

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

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

strokeColor

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

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

strokeDasharray

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

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

strokeWidth

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

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

Constructors

constructor

new CaptionFrameMarkerEditor<
TMarkerType extends CaptionFrameMarker = CaptionFrameMarker,
>(
properties: MarkerEditorProperties<TMarkerType>,
): CaptionFrameMarkerEditor<TMarkerType>
Type Parameters
- TMarkerType extends CaptionFrameMarker = CaptionFrameMarker
Parameters
- properties: MarkerEditorProperties<TMarkerType>
Returns CaptionFrameMarkerEditor<TMarkerType>
Overrides TextMarkerEditor.constructor
- Defined in markerjs3/src/editor/CaptionFrameMarkerEditor.ts:14

Methods

`Protected`addControlGrips

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

Returns void
Inherited from TextMarkerEditor.addControlGrips
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:479

`Protected`adjustControlBox

adjustControlBox(): void
Adjusts control box size and location.

Returns void
Inherited from TextMarkerEditor.adjustControlBox
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:424

`Protected`adjustGripVisibility

adjustGripVisibility(): void
Adjusts visibility of resize grips.

Returns void
Inherited from TextMarkerEditor.adjustGripVisibility
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:617

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 TextMarkerEditor.dblClick
- Defined in markerjs3/src/editor/TextMarkerEditor.ts:116

deselect

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

Returns void
Inherited from TextMarkerEditor.deselect
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:358

dispose

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

Returns void
Inherited from TextMarkerEditor.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 TextMarkerEditor.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 TextMarkerEditor.hide
- Defined in markerjs3/src/editor/MarkerBaseEditor.ts:444

`Protected`hideControlBox

hideControlBox(): void
Hides marker's editing controls.

Returns void
Inherited from TextMarkerEditor.hideControlBox
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:600

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 TextMarkerEditor.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 TextMarkerEditor.manipulate
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:185

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 TextMarkerEditor.ownsTarget
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:78

pointerDown

pointerDown(point: IPoint, target?: EventTarget, ev?: PointerEvent): void
Parameters
- point: IPoint
- Optionaltarget: EventTarget
- Optionalev: PointerEvent
Returns void
Inherited from TextMarkerEditor.pointerDown
- Defined in markerjs3/src/editor/TextMarkerEditor.ts:97

pointerUp

pointerUp(point: IPoint, ev?: PointerEvent): void
Parameters
- point: IPoint
- Optionalev: PointerEvent
Returns void
Inherited from TextMarkerEditor.pointerUp
- Defined in markerjs3/src/editor/TextMarkerEditor.ts:147

`Protected`positionGrip

positionGrip(grip: undefined | SVGGraphicsElement, x: number, y: number): void
Positions specific grip.
Parameters
- grip: undefined | SVGGraphicsElement
- x: number
- y: number
Returns void
Inherited from TextMarkerEditor.positionGrip
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:585

`Protected`positionGrips

positionGrips(): void
Updates manipulation grip layout.

Returns void
Inherited from TextMarkerEditor.positionGrips
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:513

`Protected`resize

resize(point: IPoint, preserveAspectRatio?: boolean): void
Parameters
- point: IPoint
- preserveAspectRatio: boolean = false
Returns void
Inherited from TextMarkerEditor.resize
- Defined in markerjs3/src/editor/TextMarkerEditor.ts:142

restoreState

restoreState(state: MarkerBaseState): void
Restores previously saved marker state.
Parameters
- state: MarkerBaseState
  previously saved state.
Returns void
Inherited from TextMarkerEditor.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 TextMarkerEditor.scale
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:626

select

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

`Protected`setSize

setSize(): void
Sets control box size and location.

Returns void
Overrides TextMarkerEditor.setSize
- Defined in markerjs3/src/editor/CaptionFrameMarkerEditor.ts:21

`Protected`setupControlBox

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

Returns void
Inherited from TextMarkerEditor.setupControlBox
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:368

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

`Protected`showControlBox

showControlBox(): void
Shows marker's editing controls.

Returns void
Inherited from TextMarkerEditor.showControlBox
- Defined in markerjs3/src/editor/RectangularBoxMarkerBaseEditor.ts:608

`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 TextMarkerEditor.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`_suppressMarkerCreateEvent

_suppressMarkerCreateEvent: boolean = false

When set to true marker created event will not be triggered.

`Protected` `Optional`activeGrip

activeGrip?: Grip

Active grip during manipulation

`Protected` `Optional`controlBox

controlBox?: SVGGElement

Container for the marker's editing controls.

`Protected`disabledResizeGrips

disabledResizeGrips: GripLocation[] = []

Array of disabled resize grips.

Use this in derived classes to disable specific resize grips.

`Protected`isMultiSelected

isMultiSelected: boolean = false

Is this marker selected in a multi-selection?

`Protected`manipulationBox

manipulationBox: SVGGElement = ...

Container for the marker's manipulation grips.

`Protected`manipulationStartHeight

manipulationStartHeight: number = 0

Height at the start of manipulation.

`Protected`manipulationStartLeft

manipulationStartLeft: number = 0

x coordinate of the top-left corner at the start of manipulation.

`Protected` `Optional`manipulationStartState

manipulationStartState?: string

Marker's state when it is selected

`Protected`manipulationStartTop

manipulationStartTop: number = 0

y coordinate of the top-left corner at the start of manipulation.

`Protected`manipulationStartWidth

manipulationStartWidth: number = 0

Width at the start of manipulation.

`Protected`manipulationStartX

manipulationStartX: number = 0

x coordinate of the pointer at the start of manipulation.

`Protected`manipulationStartY

manipulationStartY: number = 0

y coordinate of the pointer at the start of manipulation.

`Protected`offsetX

offsetX: number = 0

Pointer's horizontal distance from the top left corner.

`Protected`offsetY

offsetY: number = 0

Pointer's vertical distance from the top left corner.

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

`Protected`textBlockEditor

textBlockEditor: TextBlockEditor

Text block editor.

`Protected`textBlockEditorContainer

textBlockEditorContainer: SVGForeignObjectElement = ...

Container for text block editor.

Class CaptionFrameMarkerEditor<TMarkerType>

Type Parameters

Hierarchy (View Summary)

Index

Accessors

Constructors

Methods

Properties

Accessors

color

Returns string

Parameters

Returns void

container

Returns SVGGElement

continuousCreation

Returns boolean

creationStyle

Returns MarkerCreationStyle

fillColor

Returns string

Parameters

Returns void

fontFamily

Returns string

Parameters

Returns void

fontSize

Returns FontSize

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 CaptionFrameMarkerEditor<TMarkerType>

Methods

ProtectedaddControlGrips

Returns void

ProtectedadjustControlBox

Returns void

ProtectedadjustGripVisibility

`Protected`addControlGrips

`Protected`adjustControlBox

`Protected`adjustGripVisibility

`Protected`hideControlBox

`Protected`positionGrip

`Protected`positionGrips

`Protected`resize

`Protected`setSize

`Protected`setupControlBox

`Protected`showControlBox

`Protected`stateChanged

`Protected`_container

`Protected`_continuousCreation

`Protected` `Optional`_controlBox

`Protected`_creationStyle

`Protected`_isSelected

`Protected`_marker

`Protected`_markerType