Additional tests for labels
This commit is contained in:
parent
a27b3d8fcb
commit
cbd7393d36
|
@ -0,0 +1,147 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<script src="../dist/d3.min.js"></script>
|
||||
<script src="../../bjowes-dagre-d3/build/dagre-d3.js"></script>
|
||||
<script src="../dist/mermaid.slim.js"></script> -
|
||||
<!-- <script src="../dist/mermaid.full.min.js"></script> -->
|
||||
<script>
|
||||
var mermaid_config = {
|
||||
startOnLoad:true
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function apa(){
|
||||
console.log('CLICKED');
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.node-square {
|
||||
stroke-width: 4px;
|
||||
stroke: #339933;
|
||||
fill: #999900;
|
||||
font-weight: 300;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
|
||||
font-size: 14px; }
|
||||
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
|
||||
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
||||
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Style</h1>
|
||||
Styling is applied in the following order:
|
||||
<ol>
|
||||
<li>Node default style (see wiki)</li>
|
||||
<li>CSS on the page</li>
|
||||
<li>Class definitions inside the graph definition</li>
|
||||
<li>Inline styling inside the graph definition</li>
|
||||
</ol>
|
||||
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
|
||||
|
||||
<h3>CSS in the page head:</h3>
|
||||
<pre>
|
||||
<style>
|
||||
.node-square {
|
||||
stroke-width: 4px;
|
||||
stroke: #339933;
|
||||
fill: #999900;
|
||||
font-weight: 300;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
|
||||
font-size: 14px; }
|
||||
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
|
||||
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
||||
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
||||
|
||||
</style>
|
||||
</pre>
|
||||
<h3>Graph definition</h3>
|
||||
<pre>
|
||||
graph TD;
|
||||
|
||||
noc[No class<br />using default];
|
||||
cyr2((Class node-cyr-undefined<br />is undefined, using default));
|
||||
class cyr2 node-cyr-undefined;
|
||||
ndef[Default style];
|
||||
noc-->ndef;
|
||||
cyr2-->ndef;
|
||||
|
||||
sq[Class node-square<br />defined in page CSS];
|
||||
class sq node-square;
|
||||
ncss[Page CSS style];
|
||||
sq-->ncss;
|
||||
|
||||
cyr[Class node-cyr<br />defined by classDef];
|
||||
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
|
||||
ncdef[classDef style];
|
||||
od2-->ncdef;
|
||||
cyr-->ncdef;
|
||||
class cyr node-cyr;
|
||||
class od2 node-odd-override;
|
||||
classDef node-odd-override fill:#BB00BB,stroke:#666622;
|
||||
classDef node-cyr fill:#BB0099,stroke:#666622;
|
||||
|
||||
e1[Class node-cyr<br />defined by classDef<br />and inline style];
|
||||
class e1 node-e1;
|
||||
style e1 fill:#FF0000;
|
||||
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
|
||||
class e2 node-e2;
|
||||
style e2 fill:#FF0000;
|
||||
e((Inline style in<br />graph definition));
|
||||
style e fill:#FF0000;
|
||||
ninl[Inline style];
|
||||
e-->ninl;
|
||||
e1-->ninl;
|
||||
e2-->ninl;
|
||||
classDef node-e1 fill:#990066,stroke:#666622;
|
||||
classDef node-e2 fill:#990066,stroke:#666622;
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
graph TD;
|
||||
|
||||
noc[No class<br />using default];
|
||||
cyr2((Class node-cyr-undefined<br />is undefined, using default));
|
||||
class cyr2 node-cyr-undefined;
|
||||
ndef[Default style];
|
||||
noc-->ndef;
|
||||
cyr2-->ndef;
|
||||
|
||||
sq[Class node-square<br />defined in page CSS];
|
||||
class sq node-square;
|
||||
ncss[Page CSS style];
|
||||
sq-->ncss;
|
||||
|
||||
cyr[Class node-cyr<br />defined by classDef];
|
||||
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
|
||||
ncdef[classDef style];
|
||||
od2-->|Simple edge label|ncdef;
|
||||
cyr-->|Complex<br>multiline<br>edge label|ncdef;
|
||||
class cyr node-cyr;
|
||||
class od2 node-odd-override;
|
||||
classDef node-odd-override fill:#BB00BB,stroke:#666622;
|
||||
classDef node-cyr fill:#BB0099,stroke:#666622;
|
||||
|
||||
e1[Class node-cyr<br />defined by classDef<br />and inline style];
|
||||
class e1 node-e1;
|
||||
style e1 fill:#FF0000;
|
||||
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
|
||||
class e2 node-e2;
|
||||
style e2 fill:#FF0000;
|
||||
e((Inline style in<br />graph definition));
|
||||
style e fill:#FF0000;
|
||||
ninl[Inline style];
|
||||
e-->ninl;
|
||||
e1-->ninl;
|
||||
e2-->ninl;
|
||||
classDef node-e1 fill:#990066,stroke:#666622;
|
||||
classDef node-e2 fill:#990066,stroke:#666622;
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<script src="../dist/mermaid.full.js"></script>
|
||||
<script>
|
||||
var mermaid_config = {
|
||||
startOnLoad:true,
|
||||
labelStyle:'hmtl'
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function apa(){
|
||||
console.log('CLICKED');
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.node-square {
|
||||
stroke-width: 4px;
|
||||
stroke: #339933;
|
||||
fill: #999900;
|
||||
font-weight: 300;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
|
||||
font-size: 14px; }
|
||||
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
|
||||
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
||||
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Style</h1>
|
||||
Styling is applied in the following order:
|
||||
<ol>
|
||||
<li>Node default style (see wiki)</li>
|
||||
<li>CSS on the page</li>
|
||||
<li>Class definitions inside the graph definition</li>
|
||||
<li>Inline styling inside the graph definition</li>
|
||||
</ol>
|
||||
and the last styling applied is the resulting styling. For instance, "Class definitions inside the graph definition" overrides styling from "CSS on the page".
|
||||
|
||||
<h3>CSS in the page head:</h3>
|
||||
<pre>
|
||||
<style>
|
||||
.node-square {
|
||||
stroke-width: 4px;
|
||||
stroke: #339933;
|
||||
fill: #999900;
|
||||
font-weight: 300;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
|
||||
font-size: 14px; }
|
||||
.node-circle { stroke-width: 0.5px; stroke: #339999; fill: #009900; }
|
||||
.node-odd-override { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
||||
.node-odd { stroke-width: 3.5px; stroke: #339900; fill: #009999; }
|
||||
|
||||
</style>
|
||||
</pre>
|
||||
<h3>Graph definition</h3>
|
||||
<pre>
|
||||
graph TD;
|
||||
|
||||
noc[No class<br />using default];
|
||||
cyr2((Class node-cyr-undefined<br />is undefined, using default));
|
||||
class cyr2 node-cyr-undefined;
|
||||
ndef[Default style];
|
||||
noc-->ndef;
|
||||
cyr2-->ndef;
|
||||
|
||||
sq[Class node-square<br />defined in page CSS];
|
||||
class sq node-square;
|
||||
ncss[Page CSS style];
|
||||
sq-->ncss;
|
||||
|
||||
cyr[Class node-cyr<br />defined by classDef];
|
||||
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
|
||||
ncdef[classDef style];
|
||||
od2-->ncdef;
|
||||
cyr-->ncdef;
|
||||
class cyr node-cyr;
|
||||
class od2 node-odd-override;
|
||||
classDef node-odd-override fill:#BB00BB,stroke:#666622;
|
||||
classDef node-cyr fill:#BB0099,stroke:#666622;
|
||||
|
||||
e1[Class node-cyr<br />defined by classDef<br />and inline style];
|
||||
class e1 node-e1;
|
||||
style e1 fill:#FF0000;
|
||||
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
|
||||
class e2 node-e2;
|
||||
style e2 fill:#FF0000;
|
||||
e((Inline style in<br />graph definition));
|
||||
style e fill:#FF0000;
|
||||
ninl[Inline style];
|
||||
e-->ninl;
|
||||
e1-->ninl;
|
||||
e2-->ninl;
|
||||
classDef node-e1 fill:#990066,stroke:#666622;
|
||||
classDef node-e2 fill:#990066,stroke:#666622;
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
graph TD;
|
||||
|
||||
noc[No class<br />using default];
|
||||
cyr2((Class node-cyr-undefined<br />is undefined, using default));
|
||||
class cyr2 node-cyr-undefined;
|
||||
ndef[Default style];
|
||||
noc-->ndef;
|
||||
cyr2-->ndef;
|
||||
|
||||
sq[Class node-square<br />defined in page CSS];
|
||||
class sq node-square;
|
||||
ncss[Page CSS style];
|
||||
sq-->ncss;
|
||||
|
||||
cyr[Class node-cyr<br />defined by classDef];
|
||||
od2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef];
|
||||
ncdef[classDef style];
|
||||
od2-->|Simple edge label|ncdef;
|
||||
cyr-->|Complex<br>multiline<br>edge label|ncdef;
|
||||
class cyr node-cyr;
|
||||
class od2 node-odd-override;
|
||||
classDef node-odd-override fill:#BB00BB,stroke:#666622;
|
||||
classDef node-cyr fill:#BB0099,stroke:#666622;
|
||||
|
||||
e1[Class node-cyr<br />defined by classDef<br />and inline style];
|
||||
class e1 node-e1;
|
||||
style e1 fill:#FF0000;
|
||||
e2>Class node-odd-override<br />defined in page CSS<br />and defined by classDef<br />and inline style];
|
||||
class e2 node-e2;
|
||||
style e2 fill:#FF0000;
|
||||
e((Inline style in<br />graph definition));
|
||||
style e fill:#FF0000;
|
||||
ninl[Inline style];
|
||||
e-->ninl;
|
||||
e1-->ninl;
|
||||
e2-->ninl;
|
||||
classDef node-e1 fill:#990066,stroke:#666622;
|
||||
classDef node-e2 fill:#990066,stroke:#666622;
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue