Options
All
  • Public
  • Public/Protected
  • All
Menu

Class CaptionFrameMarker

Hierarchy

Index

Constructors

constructor

  • Creates a new marker.

    Parameters

    • container: SVGGElement

      SVG container to hold marker's visual.

    • overlayContainer: HTMLDivElement

      overlay HTML container to hold additional overlay elements while editing.

    • settings: Settings

      settings object containing default markers settings.

    Returns CaptionFrameMarker

Properties

Protected _container

_container: SVGGElement

Protected _isSelected

_isSelected: boolean = false

Is this marker selected?

since

2.16.0

Protected _overlayContainer

_overlayContainer: HTMLDivElement

Protected _state

_state: MarkerState = "new"

Protected _suppressMarkerCreateEvent

_suppressMarkerCreateEvent: boolean = false

Protected captionBg

captionBg: SVGRectElement

Caption background element.

Protected captionElement

captionElement: SVGTextElement

Caption text element.

Protected captionText

captionText: string = "Caption"

Caption text.

Protected controlBox

controlBox: SVGGElement

Container for the marker's editing controls.

Protected fillColor

fillColor: string = "transparent"

Caption background (fill) color.

Protected fillPanel

fillPanel: ColorPickerPanel

Caption background (fill) color toolbox panel.

Protected fontFamily

fontFamily: string

Caption font family.

Protected fontFamilyPanel

fontFamilyPanel: FontFamilyPanel

Text font family toolbox panel.

Protected fontSize

fontSize: string = "1rem"

Caption font size.

Protected frame

frame: SVGRectElement

Frame rectangle.

Protected globalSettings

globalSettings: Settings

Protected height

height: number = 0

Marker height.

Protected isMoved

isMoved: boolean = false

True if the marker has moved in the manipulation.

Protected left

left: number = 0

x coordinate of the top-left corner.

Protected manipulationStartHeight

manipulationStartHeight: number

Height at the start of manipulation.

Protected manipulationStartLeft

manipulationStartLeft: number

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

Protected Optional manipulationStartState

manipulationStartState: MarkerBaseState

Marker's state when it is selected

since

2.23.0

Protected manipulationStartTop

manipulationStartTop: number

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

Protected manipulationStartWidth

manipulationStartWidth: number

Width at the start of manipulation.

Protected manipulationStartX

manipulationStartX: number

x coordinate of the pointer at the start of manipulation.

Protected manipulationStartY

manipulationStartY: number

y coordinate of the pointer at the start of manipulation.

Optional notes

notes: string

Additional information about the marker

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 onColorChanged

onColorChanged: (color: string) => void

Method to call when foreground color changes.

Type declaration

    • (color: string): void
    • Parameters

      • color: string

      Returns void

Optional onFillColorChanged

onFillColorChanged: (color: string) => void

Method to call when background/fill color changes.

Type declaration

    • (color: string): void
    • Parameters

      • color: string

      Returns void

onMarkerCreated

onMarkerCreated: (marker: MarkerBase) => void

Method called when marker creation is finished.

Type declaration

Optional onStateChanged

onStateChanged: (marker: MarkerBase) => void

Method to call when marker state changes.

since

2.23.0

Type declaration

Protected rotationAngle

rotationAngle: number = 0

Marker's rotation angle.

Protected strokeColor

strokeColor: string = "transparent"

Frame border color.

Protected strokeDasharray

strokeDasharray: string = ""

Frame border dash array.

Protected strokePanel

strokePanel: ColorPickerPanel

Frame stroke color toolbox panel.

Protected strokeStylePanel

strokeStylePanel: LineStylePanel

Frame stroke style toolbox panel.

Protected strokeWidth

strokeWidth: number = 0

Frame border line width.

Protected strokeWidthPanel

strokeWidthPanel: LineWidthPanel

Frame stroke width toolbox panel.

Protected textColor

textColor: string = "transparent"

Caption text color.

Protected textColorPanel

textColorPanel: ColorPickerPanel

Text color picker toolbox panel.

Protected top

top: number = 0

y coordinate of the top-left corner.

Protected width

width: number = 0

Marker width.

Static icon

icon: string = Icon

SVG icon markup displayed on toolbar buttons.

Static title

title: string = "Caption frame marker"

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

Static typeName

typeName: string = "CaptionFrameMarker"

String type name of the marker type.

Used when adding MarkerArea.availableMarkerTypes via a string and to save and restore state.

Accessors

Protected centerX

  • get centerX(): number

Protected centerY

  • get centerY(): number

container

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

    Returns SVGGElement

isSelected

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

    since

    2.16.0

    Returns boolean

overlayContainer

  • get overlayContainer(): HTMLDivElement
  • HTML container that can be used to render overlay objects while the marker is active.

    For example, this is used for the text editing layer while editing text in the {@see TextMarker}.

    Returns HTMLDivElement

state

  • Current marker state.

    Both MarkerArea and the marker itself can react differently to different events based on what state the marker is in.

    Returns MarkerState

toolboxPanels

typeName

  • get typeName(): string
  • Instance property returning marker's type name.

    since

    2.16.0

    Returns string

Protected visual

  • get visual(): SVGGraphicsElement
  • set visual(value: SVGGraphicsElement): void

Methods

Protected addMarkerVisualToContainer

  • addMarkerVisualToContainer(element: SVGElement): void

Protected colorChanged

  • colorChanged(color: string): void
  • Called by a marker when its foreground color changes.

    Parameters

    • color: string

    Returns void

Protected createVisual

  • createVisual(): void
  • Creates marker visual.

    Returns void

dblClick

  • dblClick(point: IPoint, target?: EventTarget): void
  • Opens text editor on double-click.

    Parameters

    • point: IPoint
    • Optional target: EventTarget

    Returns void

deselect

  • deselect(): void

dispose

  • dispose(): void

Protected fillColorChanged

  • fillColorChanged(color: string): void
  • Called by a marker when its background/fill color changes.

    Parameters

    • color: string

    Returns void

getState

Protected hideControlBox

  • hideControlBox(): void

manipulate

  • manipulate(point: IPoint): void

Protected moveVisual

  • moveVisual(point: IPoint): void

ownsTarget

  • ownsTarget(el: EventTarget): boolean
  • Returns true if passed SVG element belongs to the marker. False otherwise.

    Parameters

    • el: EventTarget

      target element.

    Returns boolean

pointerDown

  • pointerDown(point: IPoint, target?: EventTarget): void
  • Handles pointer (mouse, touch, stylus, etc.) down event.

    Parameters

    • point: IPoint

      event coordinates.

    • Optional target: EventTarget

      direct event target element.

    Returns void

pointerUp

  • pointerUp(point: IPoint): void

Protected resize

restoreState

Protected rotatePoint

scale

  • scale(scaleX: number, scaleY: number): void
  • Scales marker. Used after the image resize.

    Parameters

    • scaleX: number

      horizontal scale

    • scaleY: number

      vertical scale

    Returns void

select

  • select(): void

setCaptionText

  • setCaptionText(text: string): void
  • Sets caption text.

    Parameters

    • text: string

      new caption text.

    Returns void

Protected setFillColor

  • setFillColor(color: string): void
  • Sets marker's fill (background) color.

    Parameters

    • color: string

      new fill color.

    Returns void

Protected setFont

  • setFont(font: string): void
  • Sets font family.

    Parameters

    • font: string

      new font family.

    Returns void

Protected setSize

  • setSize(): void

Protected setStrokeColor

  • setStrokeColor(color: string): void
  • Sets marker's line color.

    Parameters

    • color: string

      new line color.

    Returns void

Protected setStrokeDasharray

  • setStrokeDasharray(dashes: string): void
  • Sets marker's border dash array.

    Parameters

    • dashes: string

      new dash array.

    Returns void

Protected setStrokeWidth

  • setStrokeWidth(width: number): void
  • Sets marker's line width.

    Parameters

    • width: number

      new line width

    Returns void

Protected setTextColor

  • setTextColor(color: string): void
  • Sets text color.

    Parameters

    • color: string

      new text color.

    Returns void

Protected showControlBox

  • showControlBox(): void

Protected sizeCaption

  • sizeCaption(): void
  • Adjusts caption size and location.

    Returns void

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.

    since

    2.23.0

    Returns void

Protected unrotatePoint

Object literals

Protected defaultSize

defaultSize: object

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

x

x: number = 50

y

y: number = 20

Generated using TypeDoc