Version set 10.1.0 and fix for label centering

mermaid-js · Apr 4, 2023 · fc1962c · fc1962c
1 parent 1a56a18
commit fc1962c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 12 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -58,21 +58,29 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]    </pre
+    >
+    <pre id="diagram" class="mermaid2">
 flowchart RL
     subgraph "`one`"
       a1 -- l1 --> a2
       a1 -- l2 --> a2
     end
     </pre>
     <pre id="diagram" class="mermaid">
-      %%{init: {"flowchart": {"htmlLabels":false}} }%%
 flowchart RL
     subgraph "`one`"
       a1 -- l1 --> a2
       a1 -- l2 --> a2
     end
     </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart
 id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
     >
@@ -90,10 +98,17 @@
         way`"]
   </pre
     >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
       classDiagram-v2
         note "I love this diagram!\nDo you love it?"
-</pre
+    </pre>
+    <pre id="diagram" class="mermaid">
+    stateDiagram-v2
+    State1: The state with a note with minus - and plus + in it
+    note left of State1
+      Important information! You can write
+      notes with . and  in them.
+    end note    </pre
     >
     <pre id="diagram" class="mermaid2">
 mindmap
@@ -187,7 +202,7 @@
   rtc{{rtc}}
 </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -244,7 +259,7 @@
     >
 
     <br />
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
   subgraph ibm[IBM Espresso CPU]
@@ -300,7 +315,7 @@
     >
     <br />
     &nbsp;
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       flowchart LR
   B1 --be be--x B2
   B1 --bo bo--o B3
@@ -391,10 +406,10 @@
         flowchart: {
           // defaultRenderer: 'elk',
           useMaxWidth: false,
+          // htmlLabels: false,
           htmlLabels: true,
-          // htmlLabels: true,
         },
-        // htmlLabels: true,
+        // htmlLabels: false,
         gantt: {
           useMaxWidth: false,
         },

diff --git a/packages/mermaid/src/dagre-wrapper/shapes/note.js b/packages/mermaid/src/dagre-wrapper/shapes/note.js
@@ -1,8 +1,13 @@
 import { updateNodeBounds, labelHelper } from './util';
 import { log } from '../../logger';
+import { getConfig } from '../../config';
 import intersect from '../intersect/index.js';
 
 const note = (parent, node) => {
+  const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
+  if (!useHtmlLabels) {
+    node.centerLabel = true;
+  }
   const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
 
   log.info('Classes = ', node.classes);
@@ -12,7 +17,7 @@ const note = (parent, node) => {
   rect
     .attr('rx', node.rx)
     .attr('ry', node.ry)
-    .attr('x', -halfPadding)
+    .attr('x', -bbox.width / 2 - halfPadding)
     .attr('y', -bbox.height / 2 - halfPadding)
     .attr('width', bbox.width + node.padding)
     .attr('height', bbox.height + node.padding);

diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -6,6 +6,7 @@ import { select } from 'd3';
 import { evaluate, sanitizeText } from '../../diagrams/common/common';
 export const labelHelper = (parent, node, _classes, isNode) => {
   let classes;
+  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
   if (!_classes) {
     classes = 'node default';
   } else {
@@ -33,7 +34,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
   if (node.labelType === 'markdown') {
     // text = textNode;
     text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
-      useHtmlLabels: getConfig().flowchart.htmlLabels,
+      useHtmlLabels,
       width: node.width || getConfig().flowchart.wrappingWidth,
       classes: 'markdown-node-label',
     });
@@ -62,11 +63,14 @@ export const labelHelper = (parent, node, _classes, isNode) => {
   const halfPadding = node.padding / 2;
 
   // Center the label
-  if (getConfig().flowchart.htmlLabels) {
+  if (useHtmlLabels) {
     label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
   } else {
     label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');
   }
+  if (node.centerLabel) {
+    label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
+  }
   label.insert('rect', ':first-child');
   return { shapeSvg, bbox, halfPadding, label };
 };

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -232,6 +232,9 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
       type: newNode.type,
       padding: 15, //getConfig().flowchart.padding
     };
+    // if (useHtmlLabels) {
+    nodeData.centerLabel = true;
+    // }
 
     if (parsedItem.note) {
       // Todo: set random id
@@ -240,6 +243,7 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
         shape: SHAPE_NOTE,
         labelText: parsedItem.note.text,
         classes: CSS_DIAGRAM_NOTE,
+        // useHtmlLabels: false,
         style: '', // styles.style,
         id: itemId + NOTE_ID + '-' + graphItemCount,
         domId: stateDomId(itemId, graphItemCount, NOTE),