JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://unpkg.com/markerjs-live/markerjs-live.js"></script>

    <div id="app">
      <img id="sampleImage" src="https://m70vc.csb.app/img/sample.jpg" crossorigin="anonymous" />
      <br />
      <button id="toggleMarkersButton">show annotations</button>
    </div>

CSS

html,
body {
  padding: 0px;
  margin: 0px;
}

#app {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#sampleImage {
  width: 600px;
  height: 200px;
}

JavaScript

let config = {
  width: 798,
  height: 775,
  markers: [
    {
      fillColor: "transparent",
      strokeColor: "#FFFF00",
      strokeWidth: 3,
      strokeDasharray: "3",
      opacity: 1,
      left: 435,
      top: 738,
      width: 63,
      height: 34,
      rotationAngle: 0,
      visualTransformMatrix: { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 },
      containerTransformMatrix: { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 },
      typeName: "EllipseFrameMarker",
      state: "select"
    }
  ]
};
let markerView, markerViewL;

function toggleMarkers(target) {
  if (markerView === undefined) {
    markerView = new mjslive.MarkerView(target);
  }
  if (!markerView.isOpen) {
    markerView.show(config);
    toggleMarkersButton.innerText = "hide annotations";
  } else {
    markerView.close();
    toggleMarkersButton.innerText = "show annotations";
  }
}

const sampleImage = document.getElementById("sampleImage");
const toggleMarkersButton = document.getElementById("toggleMarkersButton");
toggleMarkersButton.addEventListener("click", () => {
  toggleMarkers(sampleImage);
});