marker.js 2 Demos: Lifecycle 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.


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.