examples/projected.html from epam/miew

examples/projected.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>.projected() - Miew API</title>

  <link rel="stylesheet" href="../packages/miew/dist/miew.min.css">
  <style>
    .marker {
      position: absolute;
      width: 30px;
      height: 30px;
      left: -17px;
      top: -17px;
      border-radius: 50%;
      border: 2px solid #ff0000;
    }

    .canvas {
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none
    }
  </style>

  <script src="https://unpkg.com/@babel/polyfill@7/dist/polyfill.min.js"></script>
  <script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>
  <script src="https://unpkg.com/three@0.131.3/build/three.min.js"></script>
  <script src="../packages/miew/dist/miew.min.js"></script>
</head>
<body>
  <h1>Project an atom onto the canvas</h1>
  <div style="position: absolute; border: 1px solid black">
    <div class="miew-container" style="width:640px; height:480px"></div>
    <div id="marker" style="position:absolute"><div class="marker"></div></div>
    <canvas id="canvas" width="640" height ="480" class="canvas"></canvas>
  </div>

  <script>
    (function() {
      const { Miew } = miew
      var viewer = new Miew({
        container: document.getElementsByClassName('miew-container')[0],
        load: '1CRN',
        reps: [{
          mode: 'BS',
        }],
        settings: {
          autoRotation: 0.5,
        }
      });

      var marker = document.getElementById('marker');
      viewer.addEventListener('transform', function() {
        var pos = viewer.projected('A.1.CA');

        // update HTML-style marker
        if (pos && marker) {
          marker.style.left = pos.x + 'px';
          marker.style.top = pos.y + 'px';
        }

        // draw marker on canvas
        var canvas = document.getElementById('canvas');
        if (canvas) {
          var c = canvas.getContext("2d");
          c.clearRect(0, 0, canvas.width, canvas.height);
          c.strokeStyle = "#00ff00";
          c.beginPath();
          c.arc(pos.x,pos.y,20,0,2*Math.PI);
          c.stroke();
        }
      });

      if (viewer.init()) {
        viewer.run();
      }
    })();
  </script>
</body>
</html>