Class CaptionFrameMarker

Caption frame marker is a combination of a frame (rectangle) and a text caption that goes with it.

Hierarchy (View Summary)

TextMarker
- CaptionFrameMarker

Accessors

centerX

get centerX(): number
x coordinate of the marker's center.

Returns number
Inherited from TextMarker.centerX
- Defined in markerjs3/src/core/RectangularBoxMarkerBase.ts:41

centerY

get centerY(): number
y coordinate of the marker's center.

Returns number
Inherited from TextMarker.centerY
- Defined in markerjs3/src/core/RectangularBoxMarkerBase.ts:47

color

get color(): string
Returns markers's text color.

Returns string
Inherited from TextMarker.color
- Defined in markerjs3/src/core/TextMarker.ts:37
set color(value: string): void
Sets the markers's text color.
Parameters
- value: string
Returns void
Inherited from TextMarker.color
- Defined in markerjs3/src/core/TextMarker.ts:43

container

get container(): SVGGElement
SVG container object holding the marker's visual.

Returns SVGGElement
Inherited from TextMarker.container
- Defined in markerjs3/src/core/MarkerBase.ts:61

fillColor

get fillColor(): string
Fill color of the marker.

In a derived class override applyFillColor to apply the color to the marker's visual.

Returns string
Inherited from TextMarker.fillColor
- Defined in markerjs3/src/core/MarkerBase.ts:118
set fillColor(color: string): void
Parameters
- color: string
Returns void
Inherited from TextMarker.fillColor
- Defined in markerjs3/src/core/MarkerBase.ts:121

fontFamily

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

Returns string
Inherited from TextMarker.fontFamily
- Defined in markerjs3/src/core/TextMarker.ts:52
set fontFamily(value: string): void
Sets the markers's font family.
Parameters
- value: string
Returns void
Inherited from TextMarker.fontFamily
- Defined in markerjs3/src/core/TextMarker.ts:58

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

Returns FontSize
Inherited from TextMarker.fontSize
- Defined in markerjs3/src/core/TextMarker.ts:71
set fontSize(value: FontSize): void
Sets the marker's font size.
Parameters
- value: FontSize
Returns void
Inherited from TextMarker.fontSize
- Defined in markerjs3/src/core/TextMarker.ts:77

opacity

get opacity(): number
Opacity of the marker.

In a derived class override applyOpacity to apply the opacity to the marker's visual.

Returns number
Inherited from TextMarker.opacity
- Defined in markerjs3/src/core/MarkerBase.ts:187
set opacity(value: number): void
Parameters
- value: number
Returns void
Inherited from TextMarker.opacity
- Defined in markerjs3/src/core/MarkerBase.ts:190

strokeColor

get strokeColor(): string
Stroke (outline) color of the marker.

In a derived class override applyStrokeColor to apply the color to the marker's visual.

Returns string
Inherited from TextMarker.strokeColor
- Defined in markerjs3/src/core/MarkerBase.ts:95
set strokeColor(color: string): void
Parameters
- color: string
Returns void
Inherited from TextMarker.strokeColor
- Defined in markerjs3/src/core/MarkerBase.ts:98

strokeDasharray

get strokeDasharray(): string
Stroke (outline) dash array of the marker.

In a derived class override applyStrokeDasharray to apply the dash array to the marker's visual.

Returns string
Inherited from TextMarker.strokeDasharray
- Defined in markerjs3/src/core/MarkerBase.ts:164
set strokeDasharray(value: string): void
Parameters
- value: string
Returns void
Inherited from TextMarker.strokeDasharray
- Defined in markerjs3/src/core/MarkerBase.ts:167

strokeWidth

get strokeWidth(): number
Stroke (outline) width of the marker.

In a derived class override applyStrokeWidth to apply the width to the marker's visual.

Returns number
Inherited from TextMarker.strokeWidth
- Defined in markerjs3/src/core/MarkerBase.ts:141
set strokeWidth(value: number): void
Parameters
- value: number
Returns void
Inherited from TextMarker.strokeWidth
- Defined in markerjs3/src/core/MarkerBase.ts:144

text

get text(): string
Returns the marker's text.

Returns string
Inherited from TextMarker.text
- Defined in markerjs3/src/core/TextMarker.ts:93
set text(value: string): void
Sets the marker's text.
Parameters
- value: string
Returns void
Inherited from TextMarker.text
- Defined in markerjs3/src/core/TextMarker.ts:99

typeName

get typeName(): string
Returns marker type name for the object instance.

Returns string
Inherited from TextMarker.typeName
- Defined in markerjs3/src/core/MarkerBase.ts:33

`Protected`visual

get visual(): undefined | SVGGraphicsElement
Container for the marker's visual.

Returns undefined | SVGGraphicsElement
Inherited from TextMarker.visual
- Defined in markerjs3/src/core/RectangularBoxMarkerBase.ts:55
set visual(value: SVGGraphicsElement): void
Parameters
- value: SVGGraphicsElement
Returns void
Inherited from TextMarker.visual
- Defined in markerjs3/src/core/RectangularBoxMarkerBase.ts:58

Constructors

constructor

new CaptionFrameMarker(container: SVGGElement): CaptionFrameMarker
Parameters
- container: SVGGElement
Returns CaptionFrameMarker
Overrides TextMarker.constructor
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:22

Methods

`Protected`addMarkerVisualToContainer

addMarkerVisualToContainer(element: SVGElement): void
Parameters
- element: SVGElement
Returns void
Inherited from TextMarker.addMarkerVisualToContainer
- Defined in markerjs3/src/core/MarkerBase.ts:234

`Protected`adjustFrameVisual

adjustFrameVisual(): void
Adjusts frame visual according to the current marker properties.

Returns void
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:155

`Protected`adjustTextPosition

adjustTextPosition(): void
Adjusts text position inside the caption frame.

Returns void
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:144

adjustVisual

adjustVisual(): void
Adjusts marker's visual according to the current state.

Returns void
Overrides TextMarker.adjustVisual
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:134

`Protected`applyFillColor

applyFillColor(): void
Applies the fill color to the marker's visual.

Override this method in a derived class to apply the color to the marker's visual.

Returns void
Overrides TextMarker.applyFillColor
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:74

`Protected`applyOpacity

applyOpacity(): void
Applies the opacity to the marker's visual.

Override this method in a derived class to apply the opacity to the marker's visual

Returns void
Overrides TextMarker.applyOpacity
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:66

`Protected`applyStrokeColor

applyStrokeColor(): void
Applies the stroke color to the marker's visual.

Override this method in a derived class to apply the color to the marker's visual.

Returns void
Overrides TextMarker.applyStrokeColor
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:37

`Protected`applyStrokeDasharray

applyStrokeDasharray(): void
Applies the stroke dash array to the marker's visual.

Override this method in a derived class to apply the dash array to the marker's visual.

Returns void
Overrides TextMarker.applyStrokeDasharray
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:57

`Protected`applyStrokeWidth

applyStrokeWidth(): void
Applies the stroke width to the marker's visual.

Override this method in a derived class to apply the width to the marker's visual.

Returns void
Overrides TextMarker.applyStrokeWidth
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:46

createVisual

createVisual(): void
Creates marker's visual.

Returns void
Overrides TextMarker.createVisual
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:109

dispose

dispose(): void
Disposes the marker and cleans up.

Returns void
Inherited from TextMarker.dispose
- Defined in markerjs3/src/core/MarkerBase.ts:232

getBBox

getBBox(): DOMRect
Returns markers bounding box.

Override to return a custom bounding box.

Returns DOMRect
rectangle fitting the marker.
Inherited from TextMarker.getBBox
- Defined in markerjs3/src/core/RectangularBoxMarkerBase.ts:233

`Protected`getDefaultText

getDefaultText(): string
Returns the default text for the marker type.

Returns string
marker type's default text.
Inherited from TextMarker.getDefaultText
- Defined in markerjs3/src/core/TextMarker.ts:86

getOutline

getOutline(): string
When overridden in a derived class, represents a preliminary outline for markers that can be displayed before the marker is actually created.

Returns string
SVG path string.
Inherited from TextMarker.getOutline
- Defined in markerjs3/src/core/RectangularBoxMarkerBase.ts:156

`Protected`getPaths

getPaths(width?: number, height?: number): { caption: string; frame: string }
Returns the SVG path strings for the frame and the caption background.
Parameters
- width: number = ...
- height: number = ...
Returns { caption: string; frame: string }
SVG path strings for the frame and the caption background.
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:87

getState

getState(): CaptionFrameMarkerState
Returns current marker state that can be restored in the future.

Returns CaptionFrameMarkerState
Overrides TextMarker.getState
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:215

hideVisual

hideVisual(): void
Hides the marker visual.

Used by the editor to hide rendered marker while editing the text.

Returns void
Overrides TextMarker.hideVisual
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:202

moveVisual

moveVisual(point: IPoint): void
Moves visual to the specified coordinates.
Parameters
- point: IPoint
  coordinates of the new top-left corner of the visual.
Returns void
Inherited from TextMarker.moveVisual
- Defined in markerjs3/src/core/RectangularBoxMarkerBase.ts:78

ownsTarget

ownsTarget(el: EventTarget): boolean
Returns true if passed SVG element belongs to the marker. False otherwise.
Parameters
- el: EventTarget
  target element.
Returns boolean
true if the element belongs to the marker.
Overrides TextMarker.ownsTarget
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:178

restoreState

restoreState(state: MarkerBaseState): void
Restores previously saved marker state.
Parameters
- state: MarkerBaseState
  previously saved state.
Returns void
Overrides TextMarker.restoreState
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:226

rotate

rotate(point: IPoint): void
Rotates marker around the center.
Parameters
- point: IPoint
  coordinates of the rotation point.
Returns void
Inherited from TextMarker.rotate
- Defined in markerjs3/src/core/RectangularBoxMarkerBase.ts:95

rotatePoint

rotatePoint(point: IPoint): IPoint
Returns point coordinates based on the actual screen coordinates and marker's rotation.
Parameters
- point: IPoint
  original pointer coordinates
Returns IPoint
Inherited from TextMarker.rotatePoint
- Defined in markerjs3/src/core/RectangularBoxMarkerBase.ts:117

scale

scale(scaleX: number, scaleY: number): void
Scales marker. Used after resize.
Parameters
- scaleX: number
  horizontal scale
- scaleY: number
  vertical scale
Returns void
Overrides TextMarker.scale
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:234

setColor

setColor(color: string): void
Sets the text color.
Parameters
- color: string
  text color
Returns void
Inherited from TextMarker.setColor
- Defined in markerjs3/src/core/TextMarker.ts:240

setFont

setFont(font: string): void
Sets the font family.
Parameters
- font: string
  font family string
Returns void
Inherited from TextMarker.setFont
- Defined in markerjs3/src/core/TextMarker.ts:248

setFontSize

setFontSize(fontSize: FontSize): void
Sets the font size.
Parameters
- fontSize: FontSize
  font size
Returns void
Inherited from TextMarker.setFontSize
- Defined in markerjs3/src/core/TextMarker.ts:256

setSize

setSize(): void
Sets (adjusts) the marker's size.

Returns void
Overrides TextMarker.setSize
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:190

`Protected`setSizeFromTextSize

setSizeFromTextSize(): void
Sets the marker's size based on the text size.

Returns void
Overrides TextMarker.setSizeFromTextSize
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:195

`Protected`setTextBoundingBox

setTextBoundingBox(): void
Sets the text bounding box.

Returns void
Inherited from TextMarker.setTextBoundingBox
- Defined in markerjs3/src/core/TextMarker.ts:192

showVisual

showVisual(): void
Shows the marker visual.

Used by the editor to show rendered marker after editing the text.

Returns void
Overrides TextMarker.showVisual
- Defined in markerjs3/src/core/CaptionFrameMarker.ts:210

unrotatePoint

unrotatePoint(point: IPoint): IPoint
Returns original point coordinates based on coordinates with rotation applied.
Parameters
- point: IPoint
  rotated point coordinates.
Returns IPoint
Inherited from TextMarker.unrotatePoint
- Defined in markerjs3/src/core/RectangularBoxMarkerBase.ts:138

Properties

`Protected`_container

_container: SVGGElement

SVG container object holding the marker's visual.

It is created and passed to the constructor by marker editor or viewer when creating the marker.

`Protected`_fillColor

_fillColor: string = 'transparent'

Fill color of the marker.

`Protected`_opacity

_opacity: number = 1

Opacity of the marker.

`Protected`_strokeColor

_strokeColor: string = 'transparent'

Stroke (outline) color of the marker.

`Protected`_strokeDasharray

_strokeDasharray: string = ''

Stroke (outline) dash array of the marker.

`Protected`_strokeWidth

_strokeWidth: number = 0

Stroke (outline) width of the marker.

`Static`applyDefaultFilter

applyDefaultFilter: boolean = true

When true, the default filter is applied to the marker's visual.

Since

3.2.0

`Protected` `Static`DEFAULT_TEXT

DEFAULT_TEXT: string = 'Text'

Default text for the marker type.

defaultSize

defaultSize: ISize = ...

The default marker size when the marker is created with a click (without dragging).

height

height: number = 0

Marker height.

left

left: number = 0

x coordinate of the top-left corner.

`Optional`notes

notes?: string

Additional information about the marker.

Generally, this isn't used for anything functional. However, in a derived type it could be used for storing arbitrary data with no need to create extra properties and state types.

`Optional`onSizeChanged

onSizeChanged?: (textMarker: TextMarker) => void

Callback to be called when the text size changes.

padding

padding: number = 2

Text padding from the bounding box.

rotationAngle

rotationAngle: number = 0

Marker's rotation angle.

stage

stage: MarkerStage = 'normal'

Marker lifecycle stage.

Most markers are created immediately after the user clicks on the canvas (normal). However, some markers are only finished creating after additional interactions (creating).

textBlock

textBlock: TextBlock = ...

Text block handling the text rendering.

textBoundingBox

textBoundingBox: DOMRect

Text's bounding box where text should fit and/or be anchored to.

`Static`title

title: string = 'Caption frame marker'

Marker type title (display name) used for accessibility and other attributes.

top

top: number = 0

y coordinate of the top-left corner.

`Static`typeName

typeName: string = 'CaptionFrameMarker'

Marker type name.

It's important to set this in each derived class. This value is used to identify marker types when restoring marker state and other scenarios.

width

width: number = 0

Marker width.

Class CaptionFrameMarker

Hierarchy (View Summary)

Index

Accessors

Constructors

Methods

Properties

Accessors

centerX

Returns number

centerY

Returns number

color

Returns string

Parameters

Returns void

container

Returns SVGGElement

fillColor

Returns string

Parameters

Returns void

fontFamily

Returns string

Parameters

Returns void

fontSize

Returns FontSize

Parameters

Returns void

opacity

Returns number

Parameters

Returns void

strokeColor

Returns string

Parameters

Returns void

strokeDasharray

Returns string

Parameters

Returns void

strokeWidth

Returns number

Parameters

Returns void

text

Returns string

Parameters

Returns void

typeName

Returns string

Protectedvisual

Returns undefined | SVGGraphicsElement

Parameters

Returns void

Constructors

constructor

Parameters

Returns CaptionFrameMarker

Methods

ProtectedaddMarkerVisualToContainer

Parameters

Returns void

ProtectedadjustFrameVisual

Returns void

ProtectedadjustTextPosition

Returns void

adjustVisual

Returns void

ProtectedapplyFillColor

Returns void

ProtectedapplyOpacity

Returns void

ProtectedapplyStrokeColor

Returns void

ProtectedapplyStrokeDasharray

Returns void

ProtectedapplyStrokeWidth

Returns void

`Protected`visual

`Protected`addMarkerVisualToContainer

`Protected`adjustFrameVisual

`Protected`adjustTextPosition

`Protected`applyFillColor

`Protected`applyOpacity

`Protected`applyStrokeColor

`Protected`applyStrokeDasharray

`Protected`applyStrokeWidth

`Protected`getDefaultText

`Protected`getPaths

`Protected`setSizeFromTextSize

`Protected`setTextBoundingBox

`Protected`_container

`Protected`_fillColor

`Protected`_opacity

`Protected`_strokeColor

`Protected`_strokeDasharray

`Protected`_strokeWidth

`Static`applyDefaultFilter

`Protected` `Static`DEFAULT_TEXT

`Optional`notes

`Optional`onSizeChanged