Merge branch 'develop' into bug/1218_fix_link_click_events

cypress/integration/rendering/flowchart.spec.js

@@ -512,7 +512,7 @@ describe('Flowchart', () => {
     );
   });
 
-  it('24: Keep node label text (if already defined) when a style is applied', () => {
+  it('24.1: Keep node label text (if already defined) when a style is applied', () => {
     imgSnapshotTest(
       `graph LR
       A(( )) -->|step 1| B(( ))
@@ -524,8 +524,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
-
-  it('24: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
+it('24.2: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
     imgSnapshotTest(
       `graph TB
       TITLE["Link Click Events<br>(click the nodes below)"]
@@ -542,6 +541,38 @@ describe('Flowchart', () => {
       click E "javascript:alert('test')" "script test"
       `,
       { securityLevel: 'loose' }
+      );
+  });
+
+  it('25: Set node text color according to style when html labels are enabled', () => {
+    imgSnapshotTest(
+      `graph LR
+      A[red<br>text] --> B(blue<br>text)
+      C[/red<br/>text/] --> D{blue<br/>text}
+      style A color:red;
+      style B color:blue;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+      click B "index.html#link-clicked" "link test"
+      click D testClick "click test"
+      `,
+      { flowchart: { htmlLabels: true } }
+    );
+  });
+
+  it('26: Set node text color according to style when html labels are disabled', () => {
+    imgSnapshotTest(
+      `graph LR
+      A[red<br>text] --> B(blue<br>text)
+      C[/red<br/>text/] --> D{blue<br/>text}
+      style A color:red;
+      style B color:blue;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+      click B "index.html#link-clicked" "link test"
+      click D testClick "click test"
+      `,
+      { flowchart: { htmlLabels: false } }
     );
   });
 });

dist/index.html

@@ -368,6 +368,18 @@ graph TB
     click D "notes://do-your-thing/id" "other protocol test"
     click E "javascript:alert('test')" "script test"
   </div>
+  <hr/>
+  <div class="mermaid">
+    graph LR
+    A[red<br>text] --> B(blue<br>text)
+    C[/red<br/>text/] --> D{blue<br/>text}
+    style A color:red;
+    style B color:blue;
+    style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+    click B "index.html#link-clicked" "link test"
+    click D testClick "click test"
+  </div>
 
   <hr/>
 

docs/flowchart.md

@@ -509,13 +509,13 @@ It is possible to apply specific styles such as a thicker border or a different
 graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
 ```
 ```mermaid
 graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
 ```
 
 

docs/index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-  <script src="//cdn.jsdelivr.net/npm/mermaid@8.4.5/dist/mermaid.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.4.6/dist/mermaid.min.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

src/diagrams/flowchart/flowRenderer.js

@@ -87,6 +87,7 @@ export const addVertices = function(vert, g, svgId) {
       vertexNode.parentNode.removeChild(vertexNode);
     } else {
       const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      svgLabel.setAttribute('style', labelStyle.replace('color:', 'fill:'));
 
       const rows = vertexText.split(/<br\s*\/?>/gi);
 

src/mermaidAPI.js

@@ -95,6 +95,8 @@ const config = {
    */
   theme: 'default',
   themeCSS: undefined,
+  /* **maxTextSize** - The maximum allowed size of the users text diamgram */
+  maxTextSize: 50000,
 
   /**
    * **fontFamily** The font to be used for the rendered diagrams. Default value is \"trebuchet ms\", verdana, arial;
@@ -460,7 +462,13 @@ export const decodeEntities = function(text) {
  * provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
  * completed.
  */
-const render = function(id, txt, cb, container) {
+const render = function(id, _txt, cb, container) {
+  // Check the maximum allowed text size
+  let txt = _txt;
+  if (_txt.length > config.maxTextSize) {
+    txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
+  }
+
   if (typeof container !== 'undefined') {
     container.innerHTML = '';