marker.js 2 Documentation: Events

marker.js 2 Events

Starting with version 2.16 marker.js comes with an extended event system. You can use it to react to the library's lifecycle events as well as marker-specific events.

You add event handlers to respond to these events by calling MarkerArea.addEventListener() method.

Lifecycle events

MarkerArea events are fired in response to the state changing in the course of the control's lifecycle. Event handlers receive MarkerAreaEvent (or one of its descendants) object as a parameter. You can reference the source MarkerArea via the event's markerArea property.

Some of the events can be canceled by calling preventDefault() in the handler (see an example below).

Here's the list of marker.js 2 lifecycle events:

render - fired when rendering is complete after the user presses the OK/save button in the UI or startRednerAndClose() method is called from code and its work is complete. Render event handlers receive an argument of type MarkerAreaRenderEvent. Use its dataUrl property to get the resulting image and state property to get the MarkerArea state you can use to edit the markup in another session.
beforeclose - when a user presses the close button you get an opportunity to show them a confirmation prompt or do something else before marker.js UI closes. You can call event.preventDefault() to cancel closing.
close - fired after the UI closes.
show - fired after the UI opens but before the previous state is restored.
restorestate - at this point the UI is open and the previous state is restored.
focus (since v2.19) - fired when user clicks insided the marker area
blur (since v2.19) - fired when developer calls blur() method and marker area "loses" focus.
statechange (since v2.23) - fired every time marker area status changes.

Marker-level events

Your handlers get a MarkerEvent argument for events that involve specific markers. Access the marker via the marker property.

Here's the list of marker-level events:

markerselect - fired when a marker is selected.
markerdeselect - fired when a marker is deselected.
markercreating - when a user presses a new marker button in the toolbar, marker.js switches to the creation mode, and this event is fired.
markercreate - fired after a new marker is created.
markerbeforedelete - fired before marker is deleted giving you an opportunity to show a confirmation dialog and, potentially, cancel the deletion (event.preventDefault()).
markerdelete - fired after a marker is removed.
markerchange (since v2.23) - fired after marker state changes.

Example

In this example, we create a new MarkerArea and set it to replace the source image with a rendered result in the render event handler. Then, when the user tries to close the marker.js UI we make sure this wasn't an accidental click and either let the closing proceed or cancel the event in the beforeclose handler. And, finally, we initiate a new FrameMarker creation each time a marker is created allowing for speedy continuous markup. We use the markercreate event for that.

const markerArea = new markerjs2.MarkerArea(target);
markerArea.availableMarkerTypes = ["FrameMarker"];
markerArea.addEventListener(
  "render",
  (event) => (target.src = event.dataUrl)
);

// make sure clicking close wasn't an accident
markerArea.addEventListener("beforeclose", (event) => {
  if (!confirm("Do you want to discard changes?")) {
    event.preventDefault();
  }
});

// start creating a new FrameMarker each time a marker is created
markerArea.addEventListener("markercreate", (event) => {
  event.markerArea.createNewMarker(markerjs2.FrameMarker);
});

markerArea.show();

See this example in action and check the complete source code in CodeSandbox.

marker.js 2 Documentation: Events

marker.js 2 Events

Lifecycle events

Marker-level events

Example

See also