Options
All
  • Public
  • Public/Protected
  • All
Menu

Class MarkerView

MarkerViews is the main class of marker.js Live. It controls the core behavior of the library.

The simplest marker.js Live usage scenario looks something like this:

// skip this line if you are importing marker.js Live into the global space via the script tag
import * as mjslive from 'markerjs-live';

// create an instance of MarkerView and pass the target image reference as a parameter
const markerView = new mjslive.MarkerView(target);

// call the show() method and pass your annotation configuration (created with marker.js 2) as a parameter
markerView.show(markerState);

Hierarchy

  • MarkerView

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • Creates a new MarkerView for the specified target image.

    // create an instance of MarkerView and pass the target image reference as a parameter
let markerView = new mjslive.MarkerView(document.getElementById('myimg'));

    Parameters

    • target: HTMLElement

      image object to be overlayed with markers.

    Returns MarkerView

Properties

Readonly MARKER_CONTAINER_CLASS_SUFFIX

MARKER_CONTAINER_CLASS_SUFFIX: "marker-container" = "marker-container"

The suffix of the CSS class name of the marker container (SVG group) element.

availableMarkerTypes

availableMarkerTypes: typeof MarkerBase[] = [FrameMarker,FreehandMarker,ArrowMarker,TextMarker,EllipseFrameMarker,EllipseMarker,HighlightMarker,CalloutMarker,MeasurementMarker,CoverMarker,LineMarker,CurveMarker,CaptionFrameMarker]

Marker types supported by this instance. You can remove some types to limit the markers displayed.

markerImage

markerImage: SVGSVGElement

markers

markers: MarkerBase[] = []

The list of all markers displayed.

styles

styles: StyleManager

Manage style releated settings via the styles property.

targetRoot

targetRoot: HTMLElement

targetRoot is used to set an alternative positioning root.

This is useful in cases when your target image is positioned, say, inside a div with position: relative;

// set targetRoot to a specific div instead of document.body
markerView.targetRoot = document.getElementById('myRootElement');
default

document.body

Accessors

instanceNo

  • get instanceNo(): number

  • Instance id of this instance

    Returns number

isOpen

  • get isOpen(): boolean

  • Returns true when MarkerView is open and false otherwise.

    readonly

    Returns boolean

Methods

addEventListener

  • addEventListener<T>(eventType: T, handler: EventHandler<T>): void

  • Adds an event listener for one of the marker.js Live events.

    Type parameters

    Parameters

    • eventType: T

      type of the event.

    • handler: EventHandler<T>

      function handling the event.

    Returns void

addPlugin

  • Adds a plugin to the plugin array.

    Parameters

    Returns void

close

  • close(): void

  • Closes the MarkerView.

    Returns void

removeEventListener

  • removeEventListener<T>(eventType: T, handler: EventHandler<T>): void

  • Removes an event listener for one of the marker.js Live events.

    Type parameters

    Parameters

    • eventType: T

      type of the event.

    • handler: EventHandler<T>

      function currently handling the event.

    Returns void

removePlugin

  • Removes a plugin from the plugin array.

    Parameters

    Returns void

setCurrentMarker

  • Sets the currently selected marker or deselects it if no parameter passed.

    Parameters

    • Optional marker: MarkerBase

      marker to select. Deselects current marker if undefined.

    Returns void

show

  • Initializes the MarkerView and show the markers.

    Parameters

    Returns void

Generated using TypeDoc