marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-15 05:19:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Draft implementation of tooltips and hyperlinks as described in issue #34. More tests and documentation to follow.

Browse Source
This commit is contained in:
knsv
2015-10-02 00:18:47 +02:00
parent 30a755221b
commit e406fda9cd
16 changed files with 820 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
test/examples/links.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<script src="../../dist/mermaid.js"></script>
<link rel="stylesheet" href="../../dist/mermaid.css"/>
<style>
body{
background-color: #2d2d22;
}
div.mermaidTooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 1px solid black;
border-radius: 3px;
pointer-events: none;
}
</style>
<script>
function itsTime(){
function getScreenCoords(x, y, ctm) {
var xn = ctm.e + x*ctm.a;
var yn = ctm.f + y*ctm.d;
return { x: xn, y: yn };
}
setTimeout(function(){
},250);
}
function callback(id){
alert(id);
}
function callback2(id){
alert('x'+id);
}
</script>
</head>
<body onload="itsTime()">
<h1>Links to callbacks</h1>
A has a tooltip
<div class="mermaid" id="i211">
graph LR;
A-->B;
B-->C;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
click C callback "Tooltip C1"
</div>
<h1>Links to urls</h1>
<div class="mermaid" id="i213">
graph LR;
A-->B
B-->C
click A callback2 "Tooltip3"
</div>
<div class="mermaid" id="i213">
graph LR;
subgraph S1
a-->b
end
subgraph S2
c-->d
c-->d
end
</div>
</body>
</html>