document-eden/demo-mermaid.html at main · EMGroup/document-eden · 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="document-eden/document-eden.css" />
  <script src="js-eden/js/lib/jquery-3.5.1.min.js"></script>
  <script src="js-eden/js/core/jseden.min.js"></script>
  <script src="js-eden/plugins/jseden-plugins.min.js"></script>
  <script src="js-eden/js/ui/jseden-ui.min.js"></script>
  <script src="document-eden/document-eden.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js"></script>
  <script>
    URLUtil.prefix = "js-eden/";
    window.allReadyResolve;
    window.allReady = new Promise((resolve) => { window.allReadyResolve = resolve });
    setTimeout(() => {
      window.edenProjectLoaded.then(window.allReadyResolve);
    }, 100);
    window.DE = window.DocumentEden;
  </script>
  <!-- User defined jsFunctions -->
  <script>
    window.allReady.then(() => {
      mermaid.initialize();
      eden.root.lookup("mermaid_loaded").assign(true, root.scope);
    });
    let jsFunctions = {};
    jsFunctions["drawGraph"] = function ([graphDefinition, graphName],sym) {
      var id = hashCode(graphDefinition);
      if (!eden.mermaidcache) {
        eden.mermaidcache = {};
      }
      if (eden.mermaidcache.hasOwnProperty(id)) {
        return eden.mermaidcache[id];
      }
      let newNode = document.createElement("div");
      newNode.id = "t"+id;
      // console.log(newNode.outerHTML);
      document.body.appendChild(newNode);
      let mermaidOutput = document.querySelector(".mermaidOutput");
      mermaidOutput.appendChild(newNode);
      //console.log(mermaidOutput);
      var me = sym;
      //console.log('graphName', graphName);
      //console.log('graphDefinition', graphDefinition);
      mermaid.render("t"+id, graphDefinition).then(s => {
        eden.mermaidcache[id] = s.svg;
        //console.log(eden.mermaidcache);
        me.expireSubscribers();
      })
    };
    function hashCode(str) {
      var hash = 0;
      if (str.length == 0) return hash;
      for (i = 0; i < str.length; i++) {
        char = str.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash; // Convert to 32bit integer
      }
      return hash;
    }
  </script>
  <script type="text/jseden">
        jsCall is ${{DocumentEden.callJSFunction(this,context,scope)}}$::jsName = jsName, params = params;
        g1 is jsCall with jsName = "drawGraph", params = ["flowchart LR\n\tA["//node1//"] --> B("//node2//")"]
        g2 is jsCall with jsName = "drawGraph", params = ["flowchart LR\n\tA["//node2//"] <--> B("//node1//")"]
        defs is ["flowchart TD\n\tA["//node2//"] <--> B("//node1//")","flowchart TD\n\tA["//node2//"] --> B("//node1//")"];
        drawGraph is jsCall with jsName = "drawGraph";
        g1a is drawGraph with params = [defs[i]];
    </script>
  <style>
    .jseden-extract {
      font-family: 'Courier New', Courier, monospace;
      color: darkblue;
      font-size: small;
      font-weight: bold;

    }

    .js-extract {
      font-family: 'Courier New', Courier, monospace;
      color: darkgreen;
      font-size: small;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <!-- This is a hidden div to temporarily store the mermaid output -->
   <div style="display: none;" class="mermaidOutput">

   </div>
  <!-- <div style="display: none" id="mermaidOutput"></div> -->
  <p>You can click on the names of these nodes by clicking on the blue underline</p>
  <ul>
    <li>First node name is £node1=Node1£</li>
    <li>Second node name is £node2=Node2£</li>
  </ul>
  <div id="mermaid1">£g1£</div>
  <p>Another example, with nodes swapped</p>
  <div id="mermaid1">£g2£</div>
  <p>Or by scoping:</p>
  <div id="mermaid1">£g1a with i is 1..2£</div>
</body>

</html>