Fix for issue #262

mermaid-js · Dec 27, 2015 · d56af02 · d56af02
1 parent cc8c5ae
commit d56af02
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 4 deletions.
diff --git a/dist/mermaid.css b/dist/mermaid.css
@@ -15,6 +15,9 @@
 .edgePath .path {
   stroke: #333333;
 }
+.edgeLabel {
+  background-color: #e8e8e8;
+}
 .cluster rect {
   fill: #ffffde !important;
   rx: 4 !important;
@@ -251,7 +254,7 @@ text.actor {
 
 
 */
-text {
+.node text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }

diff --git a/dist/mermaid.forest.css b/dist/mermaid.forest.css
@@ -17,6 +17,9 @@
   stroke: green;
   stroke-width: 1.5px;
 }
+.edgeLabel {
+  background-color: #e8e8e8;
+}
 .cluster rect {
   fill: #cdffb2 !important;
   rx: 4  !important;
@@ -331,7 +334,7 @@ svg .classLabel .label {
   stroke: #13540c;
   stroke-width: 1;
 }
-text {
+.node text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }

diff --git a/src/less/default/mermaid.less b/src/less/default/mermaid.less
@@ -4,7 +4,7 @@
 @import "gantt";
 @import "variables";
 
-text {
+.node text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size:14px;
 }

diff --git a/src/less/forest/mermaid.less b/src/less/forest/mermaid.less
@@ -4,7 +4,7 @@
 @import "gantt";
 @import "classDiagram";
 
-text {
+.node text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size:14px;
 }

diff --git a/test/examples/htmlLabelsFalse.html b/test/examples/htmlLabelsFalse.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="https://rawgit.com/knsv/mermaid/master/dist/mermaid.css">
+    <base href="XXX"/>
+    <script src="../../dist/mermaid.js"></script>
+</head><body>
+<script>
+    mermaid.initialize({
+        flowchart:{
+            htmlLabels:false
+        }
+    });
+</script>
+<h1>The nodes should not be false</h1>
+<div class="mermaid">
+    graph LR;
+    A[Node A]-->B[Node B];
+    B-->C[Node C];
+</div>
+</body></html>
diff --git a/test/examples/labelOutOfNode.html b/test/examples/labelOutOfNode.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="dist/mermaid.css">
+    <style>
+        .node text {
+            font-size: 14px;
+            font-family: "Helvetica Neue",Helvetica,Arial,sans-serf;
+        }
+
+    </style>
+    <script src="../../dist/mermaid.js"></script>
+</head><body>
+<script>
+    mermaid.initialize({
+        flowchart:{
+            useMaxWidth:true,
+            htmlLabels:false
+        },
+        startOnLoad:true
+    });
+</script>
+<h1>The text should be inside the boxes</h1>
+<div class="mermaid" id="i211">
+    graph TD;
+    A[TESTTESTTESTTESTTESTTESTTEST];
+    A --> B[testtesttesttesttesttesttesttesttesttesttest];
+</div>
+</body></html>