Options
All
  • Public
  • Public/Protected
  • All
Menu

Class MarkerArea

MarkerArea is the main class of marker.js 2. It controls the behavior and appearance of the library.

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

import * as markerjs2 from 'markerjs2';
// create an instance of MarkerArea and pass the target image reference as a parameter
let markerArea = new markerjs2.MarkerArea(document.getElementById('myimg'));

// register an event listener for when user clicks OK/save in the marker.js UI
markerArea.addEventListener('render', event => {
  // we are setting the markup result to replace our original image on the page
  // but you can set a different image or upload it to your server
  document.getElementById('myimg').src = event.dataUrl;
});

// finally, call the show() method and marker.js UI opens
markerArea.show();

Hierarchy

  • MarkerArea

Index

Constructors

constructor

  • new MarkerArea(target: HTMLImageElement | HTMLElement): MarkerArea
  • Creates a new MarkerArea for the specified target image.

    // create an instance of MarkerArea and pass the target image (or other HTML element) reference as a parameter
    let markerArea = new markerjs2.MarkerArea(document.getElementById('myimg'));

    When target is not an image object the output is limited to "markers only" (@linkcode renderMarkersOnly) and "popup" mode won't work properly as the target object stays in it's original position and, unlike images, is not copied.

    Parameters

    • target: HTMLImageElement | HTMLElement

      image object to mark up.

    Returns MarkerArea

Properties

renderAtNaturalSize

renderAtNaturalSize: boolean = false

When set to true resulting image will be rendered at the natural (original) resolution of the target image. Otherwise (default), screen dimensions of the image are used.

default

false (use screen dimensions)

Optional renderHeight

renderHeight: number

When set and renderAtNaturalSize is false sets the height of the rendered image.

Both renderWidth and renderHeight have to be set for this to take effect.

Optional renderImageQuality

renderImageQuality: number

When rendering engine/format supports it (jpeg, for exmample), sets the rendering quality for the resulting image.

In case of image/jpeg the value should be between 0 (worst quality) and 1 (best quality).

renderImageType

renderImageType: string = "image/png"

Type of image for the rendering result. Eg. image/png (default) or image/jpeg.

default

image/png

renderMarkersOnly

renderMarkersOnly: boolean = false

When set to true, will render only the marker layer without the original image. This could be useful when you want to non-destructively overlay markers on top of the original image.

Note that in order for the markers layer to have a transparent background renderImageType should be set to a format supporting transparency, such as image/png.

default

false

Optional renderTarget

renderTarget: HTMLCanvasElement

If a canvas is specified here, then marker.js will render the output to this canvas in addition to generating an image.

since

2.14.0

Optional renderWidth

renderWidth: number

When set and renderAtNaturalSize is false sets the width of the rendered image.

Both renderWidth and renderHeight have to be set for this to take effect.

settings

settings: Settings = new Settings()

targetRoot

targetRoot: HTMLElement

targetRoot is used to set an alternative positioning root for the marker.js UI.

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
markerArea.targetRoot = document.getElementById('myRootElement');
default

document.body

uiStyleSettings

uiStyleSettings: IStyleSettings

zoomSteps

zoomSteps: number[] = [1, 1.5, 2, 4]

Pressing zoom button iterates through values in this array.

since

2.12.0

Accessors

ALL_MARKER_TYPES

  • get ALL_MARKER_TYPES(): typeof MarkerBase[]
  • Returns a list of all built-in marker types for use with availableMarkerTypes

    readonly

    Returns typeof MarkerBase[]

BASIC_MARKER_TYPES

  • get BASIC_MARKER_TYPES(): typeof MarkerBase[]
  • Returns a short list of essential built-in marker types for use with availableMarkerTypes

    readonly

    Returns typeof MarkerBase[]

DEFAULT_MARKER_TYPES

  • get DEFAULT_MARKER_TYPES(): typeof MarkerBase[]
  • Returns a list of default set of built-in marker types. Used when availableMarkerTypes isn't set explicitly.

    readonly

    Returns typeof MarkerBase[]

availableMarkerTypes

  • Gets or sets a list of marker types avaiable to the user in the toolbar. The types can be passed as either type reference or a string type name.

    this.markerArea1.availableMarkerTypes = ['CalloutMarker', ...this.markerArea1.BASIC_MARKER_TYPES];
    default

    DEFAULT_MARKER_TYPES

    Returns MarkerTypeIdentifier[]

  • Gets or sets a list of marker types avaiable to the user in the toolbar. The types can be passed as either type reference or a string type name.

    this.markerArea1.availableMarkerTypes = ['CalloutMarker', ...this.markerArea1.BASIC_MARKER_TYPES];
    default

    DEFAULT_MARKER_TYPES

    Parameters

    Returns void

isFocused

  • get isFocused(): boolean
  • Returns true when this MarkerArea is focused.

    since

    2.19.0

    Returns boolean

isOpen

  • get isOpen(): boolean
  • Returns true when MarkerArea is open and false otherwise.

    readonly

    Returns boolean

zoomLevel

  • get zoomLevel(): number
  • set zoomLevel(value: number): void
  • Gets current zoom level.

    since

    2.12.0

    Returns number

  • Sets current zoom level.

    since

    2.12.0

    Parameters

    • value: number

    Returns void

Methods

addCloseEventListener

  • Add a close event handler to perform actions in your code after the user clicks on the close button (without saving).

    deprecated

    use addEventListener('close', ...) instead.

    Parameters

    Returns void

addDefs

  • addDefs(...nodes: (string | Node)[]): void
  • Adds "defs" element to the marker SVG element. Useful for using custom fonts and potentially other scenarios.

    see

    Documentation article on adding custom fonts for an example

    Parameters

    • Rest ...nodes: (string | Node)[]

    Returns void

addEventListener

  • addEventListener<T>(eventType: T, handler: EventHandler<T>): void
  • Adds an event listener for one of the marker.js Live events.

    since

    2.16.0

    Type parameters

    Parameters

    • eventType: T

      type of the event.

    • handler: EventHandler<T>

      function handling the event.

    Returns void

addLicenseKey

  • addLicenseKey(key: string): void
  • Add license key.

    This is a proxy method for {@linkcode Activator.addKey()}.

    Parameters

    • key: string

      commercial license key.

    Returns void

addMarkersToToolbar

  • addMarkersToToolbar(...markers: typeof MarkerBase[]): void
  • Adds one or more markers to the toolbar.

    Parameters

    • Rest ...markers: typeof MarkerBase[]

      one or more marker types to be added.

    Returns void

addRenderEventListener

  • Add a render event listener which is called when user clicks on the OK/save button in the toolbar.

    // register an event listener for when user clicks OK/save in the marker.js UI
    markerArea.addRenderEventListener(dataUrl => {
      // we are setting the markup result to replace our original image on the page
      // but you can set a different image or upload it to your server
      document.getElementById('myimg').src = dataUrl;
    });

    This is where you place your code to save a resulting image and/or MarkerAreaState.

    see

    MarkerAreaState

    deprecated

    use addEventListener('render', ...) instead.

    Parameters

    Returns void

blur

  • blur(): void
  • Tells MarkerArea to stop reacting to input outside of the immediate marker image.

    Call focus() to re-enable.

    since

    2.19.0

    Returns void

clear

  • clear(): void
  • Removes all markers.

    since

    2.15.0

    Returns void

close

  • close(suppressBeforeClose?: boolean): void
  • Closes the MarkerArea UI.

    Parameters

    • Default value suppressBeforeClose: boolean = false

    Returns void

createNewMarker

  • createNewMarker(markerType: typeof MarkerBase | string): void
  • Initiate new marker creation.

    marker.js switches to marker creation mode for the marker type specified and users can draw a new marker like they would by pressing a corresponding toolbar button.

    This example initiates creation of a FrameMarker:

    this.markerArea1.createNewMarker(FrameMarker);

    Parameters

    • markerType: typeof MarkerBase | string

    Returns void

deleteSelectedMarker

  • deleteSelectedMarker(): void
  • Removes currently selected marker.

    Returns void

focus

  • focus(): void
  • Focuses the MarkerArea to receive all input from the window.

    Is called automatically when user clicks inside of the marker area. Call manually to set focus explicitly.

    since

    2.19.0

    Returns void

getState

  • Returns the complete state for the MarkerArea that can be preserved and used to continue annotation next time.

    Parameters

    • Optional deselectCurrentMarker: boolean

      when true is passed, currently selected marker will be deselected before getting the state.

    Returns MarkerAreaState

redo

  • redo(): void
  • Redo previously undone action.

    since

    2.6.0

    Returns void

removeCloseEventListener

  • Remove a close event handler.

    deprecated

    use removeEventListener('close', ...) instead.

    Parameters

    Returns void

removeEventListener

  • removeEventListener<T>(eventType: T, handler: EventHandler<T>): void
  • Removes an event listener for one of the marker.js Live events.

    since

    2.16.0

    Type parameters

    Parameters

    • eventType: T

      type of the event.

    • handler: EventHandler<T>

      function currently handling the event.

    Returns void

removeRenderEventListener

  • Remove a render event handler.

    deprecated

    use removeEventListener('render', ...) instead.

    Parameters

    Returns void

render

  • render(): Promise<string>
  • Renders the annotation result.

    Normally, you should use addEventListener method to set a listener for the render event rather than calling this method directly.

    Returns Promise<string>

renderState

  • Renders previously saved state without user intervention.

    The rendered image is returned to the render event handlers (as in the regular interactive process). Rendering options set on MarkerArea are respected.

    since

    2.17.0

    Parameters

    Returns void

restoreState

  • Restores MarkerArea state to continue previous annotation session.

    IMPORTANT: call restoreState() after you've opened the MarkerArea with show.

    this.markerArea1.show();
    if (this.currentState) {
      this.markerArea1.restoreState(this.currentState);
    }

    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

  • show(): void
  • Initializes the MarkerArea and opens the UI.

    Returns void

startRenderAndClose

  • startRenderAndClose(): Promise<void>
  • Initiates markup rendering.

    Get results by adding a render event listener via addRenderEventListener.

    Returns Promise<void>

stepZoom

  • stepZoom(): void
  • Iterate zoom steps (@linkcode zoomSteps). Next zoom level is selected or returns to the first zoom level restarting the sequence.

    since

    2.12.0

    Returns void

undo

  • undo(): void
  • Undo last action.

    since

    2.6.0

    Returns void

Generated using TypeDoc