gitbook-plugin-sequence/renderer.html at master · vowstar/gitbook-plugin-sequence · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="assets/webfont.js"></script>
    <script src="assets/snap.svg-min.js"></script>
    <script src="assets/underscore-min.js"></script>
    <script src="assets/sequence-diagram-min.js"></script>
    <script>
      function sleep(time){
        return new Promise((resolve) => setTimeout(resolve, time));
      }
      async function render(code, options, width) {
        var canvas = document.getElementsByClassName('sequence')[0];
        Diagram.parse(code).drawSVG(canvas, options);

        var count = 0;
        while (canvas.childNodes.length == 0 || canvas.childNodes[0].childNodes.length == 0) {
          count++;
          if (count >= 2400) {
            console.error("Failed to render chart");
            return '<svg version="1.1" width="600" height="200" xmlns="http://www.w3.org/2000/svg"><text x="10" y="100" font-size="60" text-anchor="left">Rendering timed out, please check your input.</text></svg>';
          }
          await sleep(100);
        }

        if (width) {
          var svg = canvas.childNodes[0];
          var viewbox_width  = parseInt(svg.getAttribute('width'), 10);
          var viewbox_height = parseInt(svg.getAttribute('height'), 10);
          var svg_width      = parseInt(width, 10);
          var svg_height     = viewbox_height * (svg_width / viewbox_width);
          svg.setAttribute('viewBox', '0 0 ' + viewbox_width + ' ' + viewbox_height);
          svg.setAttribute('width', svg_width + 'px');
          svg.setAttribute('height', svg_height + 'px');
        }
        return new XMLSerializer().serializeToString(canvas);
      }
    </script>
  </head>

  <body>
    <div class="sequence"></div>
  </body>
</html>