marker.js 3

https://markerjs.com/docs-v3
Admin
A JavaScript image annotation library suite providing headless components for interactive drawing,...
Tokens:195,882
Snippets:1,885
Trust Score:6.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Complete TypeScript Main File

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Getting_started.Getting_started_with_TypeScript.html

This is the full main.ts file for the example, demonstrating the setup and usage of Marker.js components.

```typescript
import './style.css';
import sampleImage from '/sample-image.png';
import {
  MarkerArea,
  ArrowMarker,
  MarkerView,
  Renderer,
} from '@markerjs/markerjs3';

// create the target image element
const targetImg = document.createElement('img');
targetImg.src = sampleImage;

// app div
const app = document.querySelector<HTMLDivElement>('#app');

// create the marker area, assign the target image and append it to the app div
const markerArea = new MarkerArea();
markerArea.targetImage = targetImg;
app?.appendChild(markerArea);

// add arrow marker button action
document
  .querySelector<HTMLButtonElement>('#addArrowButton')!
  .addEventListener('click', () => {
    markerArea.createMarker(ArrowMarker);
  });

// add annotation viewer and hide it initially
const markerView = new MarkerView();
markerView.targetImage = targetImg;
app?.appendChild(markerView);
markerView.style.display = 'none';

// add save button action
document
  .querySelector<HTMLButtonElement>('#saveButton')!
  .addEventListener('click', () => {
    // get marker area state (annotation)
    const state = markerArea.getState();

    // display the state in the viewer
    markerView.style.display = '';
    markerView.show(state);

    // render the annotation to an image
    const renderer = new Renderer();
    renderer.targetImage = targetImg;
    renderer.rasterize(state).then((dataUrl) => {
      rasterImage.src = dataUrl;
      rasterImage.style.display = '';
    });
  });

// image element for the rendered annotation
const rasterImage = document.createElement('img');
app?.appendChild(rasterImage);
rasterImage.style.display = 'none';
```

--------------------------------

### Complete Example: Creating Multiple Marker Types

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Tutorials.Creating_markers.html

Demonstrates the setup and event handling for creating different types of markers (ArrowMarker, FrameMarker) programmatically.

```javascript
import { MarkerArea, ArrowMarker, FrameMarker } from "@markerjs/markerjs3";  
  
// Create marker area  
const markerArea = new MarkerArea();  
markerArea.targetImage = targetImg;  
document.body.appendChild(markerArea);  
  
// Add arrow marker button  
document.querySelector("#addArrowButton").addEventListener("click", () => {  
  markerArea.createMarker(ArrowMarker);  
});  
  
// Add frame marker button  
document.querySelector("#addFrameButton").addEventListener("click", () => {  
  markerArea.createMarker(FrameMarker);  
});  
  
// Handle marker creation  
markerArea.addEventListener("markercreate", (ev) => {  
  console.log("Created marker:", ev.detail.markerEditor.marker.typeName);  
});
```

--------------------------------

### ontouchstart

Source: https://markerjs.com/docs-v3/classes/viewer.markerview

Optional event handler for the start of a touch.

```APIDOC
## ontouchstart

### Description
Optional event handler for the start of a touch.

### Method
Event Handler

### Parameters
#### Event Parameters
- **ev** (TouchEvent) - The touch event object.

### MDN Reference
[Link to MDN documentation for ontouchstart]
```

--------------------------------

### Install marker.js 3 and marker.js UI

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.marker.js_UI.Getting_started_with_marker.js_UI.html

Installs the necessary marker.js 3 and marker.js UI packages into the project.

```bash
npm install @markerjs/markerjs3 @markerjs/markerjs-ui
Copy
```

--------------------------------

### Complete Undo/Redo Implementation Example

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Tutorials.Undo_redo.html

A full example combining marker.js setup, UI elements, undo/redo event handlers, and button state management. This code provides a complete, working undo/redo functionality.

```typescript
import { MarkerArea } from '@markerjs/markerjs3';  
  
// Setup marker.js  
const targetImage = document.getElementById('imageToMark') as HTMLImageElement;  
const markerArea = new MarkerArea();  
markerArea.targetImage = targetImage;  
document.body.appendChild(markerArea);  
  
// Get UI elements  
const undoButton = document.getElementById('undoButton') as HTMLButtonElement;  
const redoButton = document.getElementById('redoButton') as HTMLButtonElement;  
  
// Implement undo/redo  
undoButton.addEventListener('click', () => {  
  if (markerArea.isUndoPossible) {  
    markerArea.undo();  
  }  
});  
  
redoButton.addEventListener('click', () => {  
  if (markerArea.isRedoPossible) {  
    markerArea.redo();  
  }  
});  
  
// Update button states  
function updateUndoRedoButtons() {  
  undoButton.disabled = !markerArea.isUndoPossible;  
  redoButton.disabled = !markerArea.isRedoPossible;  
}  
  
// Listen for state changes  
markerArea.addEventListener('areastatechange', updateUndoRedoButtons);
```

--------------------------------

### Complete Example: Marker Deletion with Event Handling

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Tutorials.Deleting_markers.html

A full example demonstrating how to set up MarkerArea, add a delete button, and handle deletion events.

```javascript
import { MarkerArea } from '@markerjs/markerjs3';

const markerArea = new MarkerArea();
markerArea.targetImage = targetImg;
document.body.appendChild(markerArea);

const deleteButton = document.querySelector('#deleteButton');
deleteButton?.addEventListener('click', () => {
  markerArea.deleteSelectedMarkers();
});

markerArea.addEventListener('markerbeforedelete', (ev) => {
  console.log('About to delete:', ev.detail.markerEditor.marker.typeName);
});

markerArea.addEventListener('markerdelete', (ev) => {
  console.log('Deleted marker:', ev.detail.markerEditor.marker.typeName);
});
```

--------------------------------

### Complete Example: Save and Restore State with Local Storage

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Tutorials.Saving_state.html

This example demonstrates saving the current annotation state to local storage using `getState()` and restoring it later with `restoreState()`. It includes event listeners for save and restore buttons.

```javascript
// Create marker area
const markerArea = new MarkerArea();
markerArea.targetImage = document.getElementById('imageToMark');

// Add save button handler
document.getElementById('saveButton').addEventListener('click', () => {
  // Get current state
  const state = markerArea.getState();

  // Save state as JSON
  localStorage.setItem('savedAnnotation', JSON.stringify(state));
});

// Add restore button handler
document.getElementById('restoreButton').addEventListener('click', () => {
  // Get saved state
  const savedState = JSON.parse(localStorage.getItem('savedAnnotation'));

  // Restore state
  if (savedState) {
    markerArea.restoreState(savedState);
  }
});
```

--------------------------------

### Start Development Server

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Getting_started.Getting_started_with_TypeScript.html

Run the Vite development server to view your progress.

```bash
npm run dev
Copy
```

--------------------------------

### Continuous Marker Creation Example

Source: https://markerjs.com/docs-v3/interfaces/Editor.MarkerAreaEventMap.html

This example demonstrates how to use the 'markercreate' event to automatically create a new marker of the same type immediately after one is created. This is useful for implementing continuous marker creation workflows.

```javascript
// create another marker of the same type
markerArea.addEventListener("markercreate", (ev) => {
  markerArea.createMarker(ev.detail.markerEditor.marker.typeName);
});
```

--------------------------------

### Complete Marker.js UI Setup

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.marker.js_UI.Getting_started_with_marker.js_UI.html

The complete content of the main.ts file for a basic functional image annotation and viewing experience. It includes imports, image setup, editor and viewer initialization, and the editorsave event handler.

```typescript
import "./style.css";  
import sampleImage from "/sample-image.png";  
import { AnnotationEditor, AnnotationViewer } from "@markerjs/markerjs-ui";  
  
// create an img element for the image to be annotated  
const targetImg = document.createElement("img");  
targetImg.src = sampleImage;  
  
// app div reference  
const app = document.querySelector<HTMLDivElement>("#app");  
  
// create the annotation editor  
const editor = new AnnotationEditor();  
editor.targetImage = targetImg;  
app?.appendChild(editor);  
  
// create the annotation viewer  
const viewer = new AnnotationViewer();  
viewer.targetImage = targetImg;  
app?.appendChild(viewer);  
  
// handle the save button click  
editor.addEventListener("editorsave", (event) => {  
  // Show the annotation in the viewer  
  viewer.show(event.detail.state);  
  
  // Download the annotation as a PNG  
  const dataUrl = event.detail.dataUrl;  
  if (dataUrl) {  
    const link = document.createElement("a");  
    link.href = dataUrl;  
    link.download = "annotation.png";  
    link.click();  
  }  
});
```

--------------------------------

### Complete Example: Implement and Use Custom Triangle Marker

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Tutorials.Custom_marker_types.html

This example demonstrates the full integration of a custom triangle marker. It includes importing necessary types, creating a MarkerArea, registering the custom marker, and showing the marker area. It also shows how to register the marker for displaying saved annotations.

```typescript
// Import required types  
import { MarkerArea, MarkerView } from 'markerjs3';  
import { TriangleMarker } from './TriangleMarker';  
  
// Create marker area  
const markerArea = new MarkerArea(document.getElementById('myImage'));  
  
// Register triangle marker  
markerArea.registerMarkerType(  
  TriangleMarker,  
  ShapeOutlineMarkerEditor<TriangleMarker>,  
);  
  
// Show marker area  
markerArea.show();  
  
// Later, to display saved annotations:  
const markerView = new MarkerView(document.getElementById('myImage'));  
markerView.registerMarkerType(TriangleMarker);  
markerView.show(savedState);
```

--------------------------------

### Basic MarkerView Setup

Source: https://markerjs.com/docs-v3/documents/guides_and_tutorials.tutorials.viewing_annotations

Initialize and append the MarkerView to display annotations. Ensure the target image source is correctly set.

```javascript
import { MarkerView } from '@markerjs/markerjs3';  
  
// Create viewer instance  
const markerView = new MarkerView();  
  
// Set target image  
const targetImage = document.createElement('img');  
targetImage.src = 'image.jpg';  
markerView.targetImage = targetImage;  
  
// Add to page  
document.getElementById('container').appendChild(markerView);
```

--------------------------------

### Basic MarkerView Setup

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Tutorials.Viewing_annotations.html

Initialize MarkerView, set the target image, and append it to the DOM. Ensure you have a container element with the ID 'container' in your HTML.

```javascript
import { MarkerView } from '@markerjs/markerjs3';

// Create viewer instance
const markerView = new MarkerView();

// Set target image
const targetImage = document.createElement('img');
targetImage.src = 'image.jpg';
markerView.targetImage = targetImage;

// Add to page
document.getElementById('container').appendChild(markerView);
```

--------------------------------

### Complete App.tsx Example

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Getting_started.Getting_started_with_React.html

The complete App.tsx file including imports, state, handler, and render logic.

```typescript
import { useState } from "react";
import "./App.css";
import sampleImage from "/sample-image.png";
import { AnnotationState } from "@markerjs/markerjs3";
import Editor from "./Editor";

function App() {
  const [annotation, setAnnotation] = useState<AnnotationState | null>(null);
  const handleSave = (annotation: AnnotationState) => {
    setAnnotation(annotation);
  };

  return (
    <>
      <Editor targetImage={sampleImage} onSave={handleSave} />
    </>
  );
}

export default App;
Copy
```

--------------------------------

### onanimationstart

Source: https://markerjs.com/docs-v3/classes/viewer.markerview

Handles the animationstart event, which fires when a CSS animation starts.

```APIDOC
## onanimationstart

### Description
Handles the animationstart event, which fires when a CSS animation starts.

### Method
Event Handler

### Parameters
#### Event
- **ev** (AnimationEvent) - The animation event.

### Response
#### Success Response
- null or a function that takes an AnimationEvent.

### MDN Reference
[Link to MDN documentation]
```

--------------------------------

### Basic marker.js Setup

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Tutorials.Undo_redo.html

Initializes the MarkerArea component and attaches it to a target image. Ensure the target image element exists in your HTML.

```typescript
import { MarkerArea } from '@markerjs/markerjs3';  
  
const targetImage = document.getElementById('imageToMark') as HTMLImageElement;  
const markerArea = new MarkerArea();  
markerArea.targetImage = targetImage;  
document.body.appendChild(markerArea);
```

--------------------------------

### Basic Setup for Marker Area

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Tutorials.Creating_markers.html

Initializes a MarkerArea instance and attaches it to the DOM. Ensure the target image is loaded before assigning it.

```javascript
import { MarkerArea } from "@markerjs/markerjs3";  
  
const targetImg = document.createElement("img");  
targetImg.src = "./sample-image.png";  
  
const markerArea = new MarkerArea();  
markerArea.targetImage = targetImg;  
  
document.body.appendChild(markerArea);
```

--------------------------------

### Create Vite Project with TypeScript Template

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Getting_started.Getting_started_with_TypeScript.html

Use npm to create a new Vite project with the vanilla-ts template for a quick start.

```bash
npm create vite@latest mjs3-quickstart-ts -- --template vanilla-ts
Copy
```

--------------------------------

### Vue.js App Component Setup

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Getting_started.Getting_started_with_Vue.js.html

Sets up the main App.vue component in Vue.js, importing necessary modules and defining state for image annotation.

```vue
<script setup lang="ts">  
import { ref } from 'vue'  
import type { AnnotationState } from '@markerjs/markerjs3'  
import Editor from './components/Editor.vue'  
import Viewer from './components/Viewer.vue'  
import Render from './components/Render.vue'  
  
// Path to our sample image  
const sampleImage = '/sample-image.png'  
  
// State to store the current annotation  
const annotation = ref<AnnotationState | null>(null)  
  
// Handler for when editor saves an annotation  
const handleSave = (newAnnotation: AnnotationState) => {  
  annotation.value = newAnnotation  
}  
</script>  
  
<template>  
  <Editor :targetImage="sampleImage" @save="handleSave" />  
  <template v-if="annotation">  
    <Viewer :targetImage="sampleImage" :annotation="annotation" />  
    <Render :targetImage="sampleImage" :annotation="annotation" />  
  </template>  
</template>
Copy

```

--------------------------------

### Listen to markercreate event

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Tutorials.Handling_events.html

Fired when a marker is successfully created. This example shows how to automatically initiate the creation of another marker of the same type after one is created.

```javascript
markerArea.addEventListener("markercreate", (ev) => {
  markerArea.createMarker(ev.detail.markerEditor.marker.typeName);
});
```

--------------------------------

### getStartTerminatorPath

Source: https://markerjs.com/docs-v3/classes/Core.ArrowMarker.html

The path representing the start terminator (ending) part of the marker visual. Returns the SVG path for the start terminator.

```APIDOC
## getStartTerminatorPath

### Description
The path representing the start terminator (ending) part of the marker visual.

### Method
`getStartTerminatorPath()`

### Returns
* string - SVG path
```

--------------------------------

### title

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Gets or sets the title attribute of an element.

```APIDOC
## title

### Description
Gets or sets the title attribute of an element.

### Property
`title: string`
```

--------------------------------

### tabIndex

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Gets or sets the tab index of an element.

```APIDOC
## tabIndex

### Description
Gets or sets the tab index of an element.

### Property
`tabIndex: number`
```

--------------------------------

### ontouchstart Event (Optional)

Source: https://markerjs.com/docs-v3/classes/Editor.MarkerArea.html

Handles the optional ontouchstart event for the MarkerArea.

```APIDOC
## ontouchstart Event (Optional)

### Description
Handles the optional ontouchstart event.

### Event Handler Signature
`ontouchstart?: null | ((this: GlobalEventHandlers, ev: TouchEvent) => any)`

### Parameters
#### Event Parameter
- **ev** (TouchEvent) - The event object associated with the touchstart event.
```

--------------------------------

### scrollWidth

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Gets the total scrollable width of an element.

```APIDOC
## scrollWidth

### Description
Gets the total scrollable width of an element.

### Property
`scrollWidth: number`
```

--------------------------------

### Initialize and Display MarkerView

Source: https://markerjs.com/docs-v3/classes/Viewer.MarkerView.html

Demonstrates how to instantiate MarkerView, set its target image, append it to the DOM, and display saved annotation states. Ensure the target image and viewer container are defined in your scope.

```javascript
import { MarkerView } from '@markerjs/markerjs3';

const markerView = new MarkerView();
markerView.targetImage = targetImg;
viewerContainer.appendChild(markerView);

markerView.show(savedState);
```

--------------------------------

### scrollHeight

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Gets the total scrollable height of an element.

```APIDOC
## scrollHeight

### Description
Gets the total scrollable height of an element.

### Property
`scrollHeight: number`
```

--------------------------------

### role

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Sets or gets the ARIA role of the element.

```APIDOC
## role

### Description
Sets or gets the ARIA role of the element.

### Property
`role: null | string`
```

--------------------------------

### onloadstart

Source: https://markerjs.com/docs-v3/classes/marker.js_UI.AnnotationViewer.html

Occurs when the browser begins looking for media data. Accepts a callback function that receives a generic Event.

```APIDOC
## onloadstart

### Description
Occurs when the browser begins looking for media data.

### Event Handler
`onloadstart: null | ((this: GlobalEventHandlers, ev: Event) => any)`

### Parameters
#### Event
- **ev** (Event) - The event object.
```

--------------------------------

### ontransitionstart Event

Source: https://markerjs.com/docs-v3/classes/Editor.MarkerArea.html

This event is triggered when a CSS transition starts.

```APIDOC
## ontransitionstart Event

### Description
Fires when a CSS transition starts.

### Event Handler Signature
`ontransitionstart: null | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)`

### Parameters
#### Event Parameter
- **ev** (TransitionEvent) - The event object associated with the transitionstart event.
```

--------------------------------

### textContent

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Gets or sets the text content of an element and its descendants.

```APIDOC
## textContent

### Description
Gets or sets the text content of an element and its descendants.

### Property
`textContent: null | string`
```

--------------------------------

### Initialize and Display AnnotationViewer

Source: https://markerjs.com/docs-v3/classes/marker.js_UI.AnnotationViewer.html

Demonstrates how to import, create, configure, and append an AnnotationViewer instance to the DOM. It shows setting the target image and displaying saved annotation states.

```javascript
import { AnnotationViewer } from "@markerjs/markerjs-ui";  
  
// image to annotate  
const targetImage = document.createElement("img");  
targetImage.src = "image.jpg";  
  
// create the viewer  
const viewer = new AnnotationViewer();  
viewer.targetImage = targetImage;  
containerDiv.appendChild(viewer);  
viewer.show(savedState);
```

--------------------------------

### outerText

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Gets or sets the text content of the element and its descendants.

```APIDOC
## outerText

### Description
Gets or sets the text content of the element and its descendants.

### Property
`outerText: string`
```

--------------------------------

### setupControlBox

Source: https://markerjs.com/docs-v3/classes/Editor.LinearMarkerEditor.html

Protected method to create the control box used for manipulation controls.

```APIDOC
## setupControlBox

### Description
Creates control box for manipulation controls.

### Method
`setupControlBox(): void`
```

--------------------------------

### Initialize and Use MarkerView

Source: https://markerjs.com/docs-v3

Initialize a MarkerView to display dynamic annotation overlays on top of an image. The show() method displays saved states.

```javascript
import { MarkerView } from "@markerjs/markerjs3";  
  
const markerView = new MarkerView();  
markerView.targetImage = targetImg;  
viewerContainer.appendChild(markerView);  
  
markerView.show(savedState);
Copy
```

--------------------------------

### outerHTML

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Gets or sets the HTML markup of the element and its descendants.

```APIDOC
## outerHTML

### Description
Gets or sets the HTML markup of the element and its descendants.

### Property
`outerHTML: string`
```

--------------------------------

### centerY Accessor

Source: https://markerjs.com/docs-v3/classes/Core.ImageMarkerBase.html

Gets the y-coordinate of the marker's center.

```APIDOC
## centerY

### Description
Gets the y-coordinate of the marker's center.

### Method
GET

### Returns
* number - The y-coordinate of the marker's center.
```

--------------------------------

### Initialize MarkerArea and Add Arrow Marker

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Getting_started.Getting_started_with_TypeScript.html

This snippet shows the initial setup of Marker.js in a TypeScript project, including creating an image element, initializing MarkerArea, and adding an event listener to create ArrowMarkers.

```typescript
import './style.css';
import sampleImage from '/sample-image.png';
import { MarkerArea, ArrowMarker } from '@markerjs/markerjs3';

// create the target image element
const targetImg = document.createElement('img');
targetImg.src = sampleImage;

// app div
const app = document.querySelector<HTMLDivElement>('#app');

// create the marker area, assign the target image and append it to the app div
const markerArea = new MarkerArea();
markerArea.targetImage = targetImg;
app?.appendChild(markerArea);

// add arrow marker button action
document
  .querySelector<HTMLButtonElement>('#addArrowButton')!
  .addEventListener(' அ', () => {
    markerArea.createMarker(ArrowMarker);
  });

```

--------------------------------

### onselectstart Event (Optional)

Source: https://markerjs.com/docs-v3/classes/Editor.MarkerArea.html

Handles the optional onselectstart event for the MarkerArea.

```APIDOC
## onselectstart Event (Optional)

### Description
Handles the optional onselectstart event.

### Event Handler Signature
`onselectstart?: null | ((this: GlobalEventHandlers, ev: Event) => any)`

### Parameters
#### Event Parameter
- **ev** (Event) - The event object associated with the selectstart event.
```

--------------------------------

### centerX Accessor

Source: https://markerjs.com/docs-v3/classes/Core.ImageMarkerBase.html

Gets the x-coordinate of the marker's center.

```APIDOC
## centerX

### Description
Gets the x-coordinate of the marker's center.

### Method
GET

### Returns
* number - The x-coordinate of the marker's center.
```

--------------------------------

### getState

Source: https://markerjs.com/docs-v3/classes/Core.CurveMarker.html

Gets the current state of the CurveMarker, which can be used for restoration.

```APIDOC
## getState

### Description
Returns the current marker state, which can be restored later.

### Method
`getState(): CurveMarkerState`

### Returns
- **CurveMarkerState**: The current state of the marker.
```

--------------------------------

### onwebkitanimationstart

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Handles the 'webkitAnimationStart' event. This is a legacy alias for 'onanimationstart'.

```APIDOC
## onwebkitanimationstart

### Description
Handles the 'webkitAnimationStart' event. This is a legacy alias for 'onanimationstart'.

### Event Handler
`onwebkitanimationstart: null | ((this: GlobalEventHandlers, ev: Event) => any)`
```

--------------------------------

### MarkerView Constructor and Usage

Source: https://markerjs.com/docs-v3/classes/Viewer.MarkerView.html

Demonstrates how to instantiate and use the MarkerView to display dynamic annotation overlays on an image. It shows setting the target image, appending the view to the DOM, and displaying saved annotation states.

```APIDOC
## Class MarkerView

MarkerView is the main annotation viewer web component.

#### Example
To show dynamic annotation overlays on top of the original image you use `MarkerView`.
```
import { MarkerView } from '@markerjs/markerjs3';  
  
const markerView = new MarkerView();  
markerView.targetImage = targetImg;  
viewerContainer.appendChild(markerView);  
  
markerView.show(savedState);
```

#### Hierarchy
  * HTMLElement
    * MarkerView

##### Index
### Accessors
autoZoomIn autoZoomOut classList defaultFilter part style targetHeight targetImage targetWidth zoomLevel
### Constructors
constructor
### Methods
addDefs addEventListener after animate append appendChild attachInternals attachShadow autoZoom before blur checkVisibility click cloneNode closest compareDocumentPosition computedStyleMap contains dispatchEvent focus getAnimations getAttribute getAttributeNames getAttributeNode getAttributeNodeNS getAttributeNS getBoundingClientRect getClientRects getElementsByClassName getElementsByTagName getElementsByTagNameNS getHTML getRootNode hasAttribute hasAttributeNS hasAttributes hasChildNodes hasPointerCapture hidePopover insertAdjacentElement insertAdjacentHTML insertAdjacentText insertBefore isDefaultNamespace isEqualNode isSameNode lookupNamespaceURI lookupPrefix matches normalize prepend querySelector querySelectorAll registerMarkerType releasePointerCapture remove removeAttribute removeAttributeNode removeAttributeNS removeChild removeEventListener replaceChild replaceChildren replaceWith requestFullscreen requestPointerLock scroll scrollBy scrollIntoView scrollTo setAttribute setAttributeNode setAttributeNodeNS setAttributeNS setHTMLUnsafe setPointerCapture show showPopover toggleAttribute togglePopover webkitMatchesSelector
### Properties
accessKey accessKeyLabel ariaAtomic ariaAutoComplete ariaBrailleLabel ariaBrailleRoleDescription ariaBusy ariaChecked ariaColCount ariaColIndex ariaColIndexText ariaColSpan ariaCurrent ariaDescription ariaDisabled ariaExpanded ariaHasPopup ariaHidden ariaInvalid ariaKeyShortcuts ariaLabel ariaLevel ariaLive ariaModal ariaMultiLine ariaMultiSelectable ariaOrientation ariaPlaceholder ariaPosInSet ariaPressed ariaReadOnly ariaRelevant ariaRequired ariaRoleDescription ariaRowCount ariaRowIndex ariaRowIndexText ariaRowSpan ariaSelected ariaSetSize ariaSort ariaValueMax ariaValueMin ariaValueNow ariaValueText assignedSlot ATTRIBUTE_NODE attributes attributeStyleMap autocapitalize autofocus baseURI CDATA_SECTION_NODE childElementCount childNodes children className clientHeight clientLeft clientTop clientWidth COMMENT_NODE contentEditable currentCSSZoom dataset dir DOCUMENT_FRAGMENT_NODE DOCUMENT_NODE DOCUMENT_POSITION_CONTAINED_BY DOCUMENT_POSITION_CONTAINS DOCUMENT_POSITION_DISCONNECTED DOCUMENT_POSITION_FOLLOWING DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC DOCUMENT_POSITION_PRECEDING DOCUMENT_TYPE_NODE draggable ELEMENT_NODE enterKeyHint ENTITY_NODE ENTITY_REFERENCE_NODE firstChild firstElementChild hidden id inert innerHTML innerText inputMode isConnected isContentEditable lang lastChild lastElementChild localName markers markerTypes namespaceURI nextElementSibling nextSibling nodeName nodeType nodeValue nonce? NOTATION_NODE offsetHeight offsetLeft offsetParent offsetTop offsetWidth onabort onanimationcancel onanimationend onanimationiteration onanimationstart onauxclick onbeforeinput onbeforetoggle onblur oncancel oncanplay oncanplaythrough onchange onclick onclose oncontextlost oncontextmenu oncontextrestored oncopy oncuechange oncut ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus onformdata onfullscreenchange onfullscreenerror ongotpointercapture oninput oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onlostpointercapture onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onpaste onpause onplay onplaying onpointercancel onpointerdown onpointerenter onpointerleave onpointermove onpointerout onpointerover onpointerup onprogress onratechange onreset onresize onscroll onscrollend onsecuritypolicyviolation onseeked onseeking onselect onselectionchange onselectstart onslotchange onstalled onsubmit onsuspend ontimeupdate ontoggle ontouchcancel? ontouchend? ontouchmove? ontouchstart? ontransitioncancel ontransitionend ontransitionrun ontransitionstart onvolumechange onwaiting onwebkitanimationend onwebkitanimationiteration onwebkitanimationstart onwebkittransitionend onwheel outerHTML outerText ownerDocument parentElement parentNode popover prefix previousElementSibling previousSibling PROCESSING_INSTRUCTION_NODE role scrollHeight scrollLeft scrollTop scrollWidth shadowRoot slot spellcheck tabIndex tagName TEXT_NODE textContent title translate writingSuggestions
```

--------------------------------

### ontransitionrun Event

Source: https://markerjs.com/docs-v3/classes/Editor.MarkerArea.html

This event is triggered when a CSS transition starts to run.

```APIDOC
## ontransitionrun Event

### Description
Fires when a CSS transition starts to run.

### Event Handler Signature
`ontransitionrun: null | ((this: GlobalEventHandlers, ev: TransitionEvent) => any)`

### Parameters
#### Event Parameter
- **ev** (TransitionEvent) - The event object associated with the transitionrun event.
```

--------------------------------

### onloadstart

Source: https://markerjs.com/docs-v3/classes/marker.js_UI.AnnotationEditor.html

Occurs when the browser begins looking for media data.

```APIDOC
## onloadstart

### Description
Occurs when the browser begins looking for media data.

### Event Handler
`onloadstart: null | ((this: GlobalEventHandlers, ev: Event) => any)`

### Parameters
#### Event Parameter (`ev`)
- **ev** (Event) - The event object.
```

--------------------------------

### targetImage Accessor

Source: https://markerjs.com/docs-v3/classes/Renderer.Renderer.html

Gets or sets the target HTMLImageElement on which annotations will be rendered.

```APIDOC
## targetImage

### Description
Gets or sets the target image to render annotations on.

### Accessors
#### get targetImage(): undefined | HTMLImageElement
Returns the target image element.

#### set targetImage(value: undefined | HTMLImageElement): void
Sets the target image element.

### Parameters
#### set targetImage Parameters
- **value** (undefined | HTMLImageElement) - The HTMLImageElement to set as the target.
```

--------------------------------

### Complete main.js Code

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Getting_started.Getting_started_with_vanilla_JavaScript.html

This snippet shows the full main.js file, including initialization of marker.js components, event handling for adding arrows, saving annotations to a viewer, and rendering annotations to an image.

```javascript
// Use global markerjs3 object
const { MarkerArea, ArrowMarker, MarkerView, Renderer } = markerjs3;

// create the target image element
const targetImg = document.createElement('img');
targetImg.src = './img/sample-image.png';

// app div
const app = document.querySelector('#app');

// create the marker area, assign the target image and append it to the app div
const markerArea = new MarkerArea();
markerArea.targetImage = targetImg;
app.appendChild(markerArea);

// add arrow marker button action
document.querySelector('#addArrowButton').addEventListener('click', () => {
  markerArea.createMarker(ArrowMarker);
});

// add annotation viewer and hide it initially
const markerView = new MarkerView();
markerView.targetImage = targetImg;
app.appendChild(markerView);
markerView.style.display = 'none';

// add save button action
document.querySelector('#saveButton').addEventListener('click', () => {
  // get marker area state (annotation)
  const state = markerArea.getState();

  // display the state in the viewer
  markerView.style.display = '';
  markerView.show(state);

  // render the annotation to an image
  const renderer = new Renderer();
  renderer.targetImage = targetImg;
  renderer.rasterize(state).then((dataUrl) => {
    rasterImage.src = dataUrl;
    rasterImage.style.display = '';
  });
});

// image element for the rendered annotation
const rasterImage = document.createElement('img');
app.appendChild(rasterImage);
rasterImage.style.display = 'none';
```

--------------------------------

### typeName Accessor

Source: https://markerjs.com/docs-v3/classes/Core.ImageMarkerBase.html

Gets the marker type name for the object instance.

```APIDOC
## typeName

### Description
Returns the marker type name for the object instance.

### Method
GET

### Returns
* string - The name of the marker type.
```

--------------------------------

### onloadstart

Source: https://markerjs.com/docs-v3/classes/Editor.MarkerArea.html

Occurs when Internet Explorer begins looking for media data.

```APIDOC
## onloadstart

### Description
Occurs when Internet Explorer begins looking for media data.

### Event Handler
`onloadstart: null | ((this: GlobalEventHandlers, ev: Event) => any)`

### Parameters
#### Event
- **ev** (Event) - The event object.
```

--------------------------------

### svgString Accessor

Source: https://markerjs.com/docs-v3/classes/Core.ImageMarkerBase.html

Gets or sets the SVG markup for SVG images.

```APIDOC
## svgString

### Description
Gets or sets the SVG markup for SVG images.

### Method
GET / SET

### Returns (GET)
* undefined | string - The SVG markup string or undefined.

### Parameters (SET)
* **value** (undefined | string) - The new SVG markup string to set.
```

--------------------------------

### Handling MarkerView Events

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Tutorials.Viewing_annotations.html

Listen for 'viewinit' and 'viewrestorestate' events to know when the viewer is ready or when annotations have been displayed.

```javascript
// Viewer initialized
markerView.addEventListener('viewinit', (ev) => {
  console.log('Viewer ready');
});

// State restored
markerView.addEventListener('viewrestorestate', (ev) => {
  console.log('Annotations displayed');
});
```

--------------------------------

### getStartTerminatorPath

Source: https://markerjs.com/docs-v3/classes/Core.CurveMarker.html

Retrieves the SVG path string for the start terminator of the curve marker.

```APIDOC
## getStartTerminatorPath

### Description
Returns the SVG path string representing the start terminator (ending) part of the marker visual.

### Method
`getStartTerminatorPath(): string`

### Returns
- **string**: SVG path for the marker.
```

--------------------------------

### slot

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Gets or sets the value of an element's slot content attribute.

```APIDOC
## slot

### Description
Gets or sets the value of an element's slot content attribute.

### Property
`slot: string`
```

--------------------------------

### constructor

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Initializes a new instance of the AnnotationEditor.

```APIDOC
## Constructor: new AnnotationEditor()

### Description
Initializes a new instance of the AnnotationEditor.

### Returns
- AnnotationEditor
```

--------------------------------

### Touch Events

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Handles touch interactions including cancel, end, move, and start.

```APIDOC
## ontouchcancel

### Description
Callback function for the touchcancel event.

### Method
`ontouchcancel?(ev: TouchEvent) => any`

## ontouchend

### Description
Callback function for the touchend event.

### Method
`ontouchend?(ev: TouchEvent) => any`

## ontouchmove

### Description
Callback function for the touchmove event.

### Method
`ontouchmove?(ev: TouchEvent) => any`

## ontouchstart

### Description
Callback function for the touchstart event.

### Method
`ontouchstart?(ev: TouchEvent) => any`
```

--------------------------------

### scrollTop

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Gets or sets the number of pixels the element's content is scrolled vertically.

```APIDOC
## scrollTop

### Description
Gets or sets the number of pixels the element's content is scrolled vertically.

### Property
`scrollTop: number`
```

--------------------------------

### scrollLeft

Source: https://markerjs.com/docs-v3/classes/marker.js_ui.annotationeditor

Gets or sets the number of pixels the element's content is scrolled horizontally.

```APIDOC
## scrollLeft

### Description
Gets or sets the number of pixels the element's content is scrolled horizontally.

### Property
`scrollLeft: number`
```

--------------------------------

### Grip Constructor

Source: https://markerjs.com/docs-v3/classes/Editor.Grip.html

Information about creating a new instance of the Grip class.

```APIDOC
## Constructors

### constructor
  * new Grip(): Grip
Creates a new grip.
#### Returns Grip
```

--------------------------------

### zoomLevel Property

Source: https://markerjs.com/docs-v3/classes/viewer.markerview

Sets or gets the current zoom level of the view. This is a numerical property.

```APIDOC
## zoomLevel Property

### Description
Returns the current zoom level.
Sets the current zoom level.

### Getter
* **zoomLevel**(): number

### Setter
* **zoomLevel**(value: number): void
  * **Parameters**
    * value (number): The zoom level to set.
```

--------------------------------

### onselectstart Event

Source: https://markerjs.com/docs-v3/classes/Editor.MarkerArea.html

This event is triggered when text selection begins.

```APIDOC
## onselectstart Event

### Description
Fires when text selection begins.

### Event Handler Signature
`onselectstart: null | ((this: GlobalEventHandlers, ev: Event) => any)`

### Parameters
#### Event Parameter
- **ev** (Event) - The event object associated with the selectstart event.
```

--------------------------------

### visual Accessor

Source: https://markerjs.com/docs-v3/classes/Core.ImageMarkerBase.html

Gets or sets the container for the marker's visual SVG element.

```APIDOC
## visual

### Description
Gets or sets the container for the marker's visual SVG element.

### Method
GET / SET

### Returns (GET)
* undefined | SVGGraphicsElement - The visual SVG element or undefined.

### Parameters (SET)
* **value** (SVGGraphicsElement) - The SVG graphics element to set as the visual container.
```

--------------------------------

### setupControlBox

Source: https://markerjs.com/docs-v3/classes/Editor.ImageMarkerEditor.html

Creates the control box element used for marker manipulation controls. This is a protected method.

```APIDOC
## setupControlBox

### Description
Creates control box for manipulation controls.

### Method
void

### Returns
void
```

--------------------------------

### container Accessor

Source: https://markerjs.com/docs-v3/classes/Core.ImageMarkerBase.html

Gets the SVG container element holding the marker's visual.

```APIDOC
## container

### Description
Gets the SVG container object holding the marker's visual.

### Method
GET

### Returns
* SVGGElement - The SVG container element.
```

--------------------------------

### getPath

Source: https://markerjs.com/docs-v3/classes/Core.HighlightMarker.html

Gets the path of the marker, optionally with specified width and height. This is a protected method.

```APIDOC
## getPath

### Description
Gets the path of the marker, optionally with specified width and height.

### Method
GET (or similar, depending on context)

### Endpoint
/getPath

### Parameters
#### Query Parameters
- **width** (number) - Optional - The width of the path.
- **height** (number) - Optional - The height of the path.

### Returns
string - The SVG path string.
```

--------------------------------

### getPath

Source: https://markerjs.com/docs-v3/classes/Core.EllipseFrameMarker.html

Gets the path of the marker, optionally with specified width and height. This is a protected method.

```APIDOC
## getPath

### Description
Gets the path of the marker, optionally with specified width and height.

### Method
getPath(width?: number, height?: number)

### Parameters
#### Path Parameters
- **width** (number) - Optional - The width of the path.
- **height** (number) - Optional - The height of the path.

### Returns
string
```

--------------------------------

### select

Source: https://markerjs.com/docs-v3/classes/Editor.CalloutMarkerEditor.html

Selects the marker and displays its selected UI.

```APIDOC
## select
  * select(multi?: boolean): void

### Parameters
* multi: boolean - Optional. Defaults to false.

### Returns void
```

--------------------------------

### getPath

Source: https://markerjs.com/docs-v3/classes/Core.CoverMarker.html

Gets the path of the marker, optionally specifying width and height. This is a protected method.

```APIDOC
## getPath

### Description
Gets the path of the marker, optionally specifying width and height.

### Method
getPath(width?: number, height?: number)

### Parameters
#### Path Parameters
- **width** (number) - Optional - The width of the path.
- **height** (number) - Optional - The height of the path.

### Returns
string
```

--------------------------------

### Create Vue.js Project with Vite

Source: https://markerjs.com/docs-v3/documents/Guides_and_tutorials.Getting_started.Getting_started_with_Vue.js.html

Scaffolds a new Vue.js project with TypeScript template using npm and Vite.

```bash
npm create vite@latest mjs3-quickstart-vue-ts -- --template vue-ts
Copy

```

--------------------------------

### select

Source: https://markerjs.com/docs-v3/classes/Editor.CaptionFrameMarkerEditor.html

Selects this marker and displays the appropriate selected marker UI.

```APIDOC
## select
  * select(multi: boolean = false): void

### Parameters
* multi: boolean - Optional. Indicates if multi-selection is enabled. Defaults to false.
```

--------------------------------

### ondragstart

Source: https://markerjs.com/docs-v3/classes/Editor.MarkerArea.html

Fires on the source object when the user starts to drag a text selection or selected object.

```APIDOC
## ondragstart

### Description
Fires on the source object when the user starts to drag a text selection or selected object.

### Event Handler
`ondragstart: null | ((this: GlobalEventHandlers, ev: DragEvent) => any)`

### Parameters
#### Event
- **ev** (DragEvent) - The event object.
```

--------------------------------

### MarkerView Constructor

Source: https://markerjs.com/docs-v3/classes/Viewer.MarkerView.html

Initializes a new instance of the MarkerView class.

```APIDOC
## constructor

### Description
Creates a new `MarkerView` instance.

### Signature
* `new MarkerView(): MarkerView`

### Returns
* `MarkerView`: A new instance of the `MarkerView` class.
```

--------------------------------

### Renderer Constructor

Source: https://markerjs.com/docs-v3/classes/Renderer.Renderer.html

Initializes a new instance of the Renderer class. This is the starting point for rasterizing annotations.

```APIDOC
## new Renderer()

### Description
Initializes a new instance of the Renderer class.

### Returns
- Renderer: A new Renderer instance.
```

--------------------------------

### createLine

Source: https://markerjs.com/docs-v3/classes/Core.SvgHelper.html

Creates an SVG line element with specified start and end points, and optional attributes.

```APIDOC
## createLine

### Description
Creates an SVG line with specified end-point coordinates.

### Parameters
#### Path Parameters
- **x1** (string | number) - Required - The x-coordinate of the starting point.
- **y1** (string | number) - Required - The y-coordinate of the starting point.
- **x2** (string | number) - Required - The x-coordinate of the ending point.
- **y2** (string | number) - Required - The y-coordinate of the ending point.
- **attributes** ([string, string][]) - Optional - Additional attributes for the line element.

### Returns
- SVGLineElement: The created SVG line element.
```

--------------------------------

### Viewer Shown Event

Source: https://markerjs.com/docs-v3/interfaces/Viewer.MarkerViewEventMap.html

Fired when the MarkerView is fully initialized, its elements are created, and the target image is loaded. The viewer is ready for display.

```typescript
viewshow: CustomEvent<MarkerViewEventData>
```
Tokens:
Raw