From fc1962c795025748724f76b7f216015ab7fde089 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 4 Apr 2023 14:36:05 +0200 Subject: [PATCH] Version set 10.1.0 and fix for label centering --- cypress/platform/knsv2.html | 33 ++++++++++++++----- .../mermaid/src/dagre-wrapper/shapes/note.js | 7 +++- .../mermaid/src/dagre-wrapper/shapes/util.js | 8 +++-- .../src/diagrams/state/stateRenderer-v2.js | 4 +++ 4 files changed, 40 insertions(+), 12 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 5eaadffc49..49fe075c32 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -58,6 +58,15 @@ 
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+ 
 flowchart RL
     subgraph "`one`"
       a1 -- l1 --> a2
@@ -65,14 +74,13 @@
     end
     
-      %%{init: {"flowchart": {"htmlLabels":false}} }%%
 flowchart RL
     subgraph "`one`"
       a1 -- l1 --> a2
       a1 -- l2 --> a2
     end
- 
+    
 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`"]

@@ -90,10 +98,17 @@
         way`"]
- 
+    
       classDiagram-v2
         note "I love this diagram!\nDo you love it?"
-

+    
+    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    

     
 mindmap
@@ -187,7 +202,7 @@
   rtc{{rtc}}
 

-    
+    
 %%{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 @@
     >
 
     

-    
+    
 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 @@
     >
     

      
-    
+    
       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
index c7ebb6c223..a39450d547 100644
--- 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
index b5de2bd6b4..1eeeebb723 100644
--- 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
index 8629f74db4..c2b1a9b6d7 100644
--- 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),