Options
All
  • Public
  • Public/Protected
  • All
Menu

Class RectangularBoxMarkerBase

RectangularBoxMarkerBase is a base class for all marker's with rectangular controls such as all rectangle markers, text and callout markers.

It creates and manages the rectangular control box and related resize, move, and rotate manipulations.

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 RectangularBoxMarkerBase

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 controlBox

controlBox: SVGGElement

Container for the marker's editing controls.

Protected globalSettings

globalSettings: Settings

Protected height

height: number = 0

Marker height.

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

Protected rotationAngle

rotationAngle: number = 0

Marker's rotation angle.

Protected top

top: number = 0

y coordinate of the top-left corner.

Protected width

width: number = 0

Marker width.

Static icon

icon: string

SVG icon markup displayed on toolbar buttons.

Static title

title: string

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

Static typeName

typeName: string = "MarkerBase"

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
  • x coordinate of the marker's center.

    Returns number

Protected centerY

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

    Returns 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
  • Container for the marker's visual.

    Returns SVGGraphicsElement

  • Container for the marker's visual.

    Parameters

    • value: SVGGraphicsElement

    Returns 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

dblClick

  • dblClick(point: IPoint, target?: EventTarget): void
  • Handles pointer (mouse, touch, stylus, etc.) double click event.

    Parameters

    • point: IPoint

      event coordinates.

    • Optional target: EventTarget

      direct event target element.

    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
  • Hides marker's editing controls.

    Returns void

manipulate

  • manipulate(point: IPoint): void
  • Handles marker manipulation (move, resize, rotate, etc.).

    Parameters

    • point: IPoint

      event coordinates.

    Returns void

Protected 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

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
  • Handles pointer (mouse, touch, stylus, etc.) up event.

    Parameters

    • point: IPoint

      event coordinates.

    Returns void

Protected resize

  • Resizes the marker based on pointer coordinates and context.

    Parameters

    • point: IPoint

      pointer coordinates.

    Returns void

restoreState

Protected rotatePoint

  • Returns point coordinates based on the actual screen coordinates and marker's rotation.

    Parameters

    • point: IPoint

      original pointer coordinates

    Returns IPoint

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

Protected setSize

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

    Returns void

Protected showControlBox

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

    Returns void

Protected unrotatePoint

  • Returns original point coordinates based on coordinates with rotation applied.

    Parameters

    • point: IPoint

      rotated point coordinates.

    Returns IPoint

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