marker.js 2 Demos: Lifecycle Events

Events

Starting with marker.js v2.16 its internal eventing system was expanded. This demo shows a few of the new events.

Here we use beforeclose event to show a confirmation dialog to prevent accidental loss of markup. We also utilize the markercreate event to implement continuous creation of FrameMarkers without having to click the toolbar button for the next marker.

Click on the image to launch the demo.

Code

In addition to the usual render event we've implemented handling of beforeclose and markrecreate events:

markerArea.addEventListener("beforeclose", (event) => { if (!confirm("Do you want to discard changes?")) { event.preventDefault(); } }); markerArea.addEventListener("markercreate", (event) => { event.markerArea.createNewMarker(markerjs2.FrameMarker); });

Check out this demo in CodeSandbox.