Merge pull request #2255 from mermaid-js/2253_class_diagram_v2_fixes

2253 class diagram v2 fixes

src/dagre-wrapper/edges.js

@@ -43,25 +43,27 @@ export const insertEdgeLabel = (elem, edge) => {
   edge.width = bbox.width;
   edge.height = bbox.height;
 
+  let fo;
   if (edge.startLabelLeft) {
     // Create the actual text element
     const startLabelElement = createLabel(edge.startLabelLeft, edge.labelStyle);
     const startEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');
     const inner = startEdgeLabelLeft.insert('g').attr('class', 'inner');
-    inner.node().appendChild(startLabelElement);
+    fo=inner.node().appendChild(startLabelElement);
     const slBox = startLabelElement.getBBox();
     inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
     if (!terminalLabels[edge.id]) {
       terminalLabels[edge.id] = {};
     }
     terminalLabels[edge.id].startLeft = startEdgeLabelLeft;
+    setTerminalWidth(fo,bbox);
   }
   if (edge.startLabelRight) {
     // Create the actual text element
     const startLabelElement = createLabel(edge.startLabelRight, edge.labelStyle);
     const startEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');
     const inner = startEdgeLabelRight.insert('g').attr('class', 'inner');
-    startEdgeLabelRight.node().appendChild(startLabelElement);
+    fo=startEdgeLabelRight.node().appendChild(startLabelElement);
     inner.node().appendChild(startLabelElement);
     const slBox = startLabelElement.getBBox();
     inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
@@ -70,21 +72,25 @@ export const insertEdgeLabel = (elem, edge) => {
       terminalLabels[edge.id] = {};
     }
     terminalLabels[edge.id].startRight = startEdgeLabelRight;
+    setTerminalWidth(fo,bbox);
+
   }
   if (edge.endLabelLeft) {
     // Create the actual text element
     const endLabelElement = createLabel(edge.endLabelLeft, edge.labelStyle);
     const endEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');
     const inner = endEdgeLabelLeft.insert('g').attr('class', 'inner');
-    inner.node().appendChild(endLabelElement);
+    fo=inner.node().appendChild(endLabelElement);
     const slBox = endLabelElement.getBBox();
     inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
 
     endEdgeLabelLeft.node().appendChild(endLabelElement);
+
     if (!terminalLabels[edge.id]) {
       terminalLabels[edge.id] = {};
     }
     terminalLabels[edge.id].endLeft = endEdgeLabelLeft;
+    setTerminalWidth(fo,bbox);
   }
   if (edge.endLabelRight) {
     // Create the actual text element
@@ -92,7 +98,7 @@ export const insertEdgeLabel = (elem, edge) => {
     const endEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');
     const inner = endEdgeLabelRight.insert('g').attr('class', 'inner');
 
-    inner.node().appendChild(endLabelElement);
+    fo=inner.node().appendChild(endLabelElement);
     const slBox = endLabelElement.getBBox();
     inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
 
@@ -101,9 +107,18 @@ export const insertEdgeLabel = (elem, edge) => {
       terminalLabels[edge.id] = {};
     }
     terminalLabels[edge.id].endRight = endEdgeLabelRight;
+    setTerminalWidth(fo,bbox);
+    
   }
 };
 
+function setTerminalWidth(fo, box){
+  if(getConfig().flowchart.htmlLabels && fo){
+    fo.style.width=box.width;
+    fo.style.height=box.height;
+  }
+}
+
 export const positionEdgeLabel = (edge, paths) => {
   log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
   let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;

src/dagre-wrapper/nodes.js

@@ -648,7 +648,11 @@ const class_box = (parent, node) => {
   let classTitleString = node.classData.id;
 
   if (node.classData.type !== undefined && node.classData.type !== '') {
-    classTitleString += '<' + node.classData.type + '>';
+    if (getConfig().flowchart.htmlLabels) {
+      classTitleString += '&lt;' + node.classData.type + '&gt;';
+    } else {
+      classTitleString += '<' + node.classData.type + '>';
+    }
   }
   const classTitleLabel = labelContainer
     .node()
@@ -668,7 +672,10 @@ const class_box = (parent, node) => {
   }
   const classAttributes = [];
   node.classData.members.forEach((str) => {
-    const parsedText = parseMember(str).displayText;
+    let parsedText = parseMember(str).displayText;
+    if (getConfig().flowchart.htmlLabels) {
+      parsedText  = parsedText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    } 
     const lbl = labelContainer
       .node()
       .appendChild(createLabel(parsedText, node.labelStyle, true, true));
@@ -691,10 +698,21 @@ const class_box = (parent, node) => {
 
   const classMethods = [];
   node.classData.methods.forEach((str) => {
-    const parsedText = parseMember(str).displayText;
+    const parsedInfo = parseMember(str);
+    let displayText =parsedInfo.displayText;
+    if (getConfig().flowchart.htmlLabels) {
+      displayText  = displayText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    } 
     const lbl = labelContainer
       .node()
-      .appendChild(createLabel(parsedText, node.labelStyle, true, true));
+      .appendChild(
+        createLabel(
+          displayText,
+          parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,
+          true,
+          true
+        )
+      );
     let bbox = lbl.getBBox();
     if (evaluate(getConfig().flowchart.htmlLabels)) {
       const div = lbl.children[0];

src/diagrams/class/classRenderer-v2.js

@@ -207,7 +207,7 @@ export const addRelations = function (relations, g) {
       edgeData.arrowheadStyle = 'fill: #333';
       edgeData.labelpos = 'c';
 
-      if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line
+      if (getConfig().flowchart.htmlLabels) { // eslint-disable-line
         edgeData.labelType = 'html';
         edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
       } else {

src/diagrams/pie/pieRenderer.js

@@ -85,7 +85,7 @@ export const draw = (txt, id) => {
 
     // Compute the position of each group on the pie:
     var pie = d3pie().value(function (d) {
-      return d.value;
+      return d[1];
     });
     var dataReady = pie(Object.entries(data));
 
@@ -100,7 +100,7 @@ export const draw = (txt, id) => {
       .append('path')
       .attr('d', arcGenerator)
       .attr('fill', function (d) {
-        return color(d.data.key);
+        return color(d.data[0]);
       })
       .attr('class', 'pieCircle');
 
@@ -108,11 +108,11 @@ export const draw = (txt, id) => {
     // Use the centroid method to get the best coordinates.
     svg
       .selectAll('mySlices')
-      .data(dataReady.filter((value) => value.data.value !== 0))
+      .data(dataReady)
       .enter()
       .append('text')
       .text(function (d) {
-        return ((d.data.value / sum) * 100).toFixed(0) + '%';
+        return ((d.data[1] / sum) * 100).toFixed(0) + '%';
       })
       .attr('transform', function (d) {
         return 'translate(' + arcGenerator.centroid(d) + ')';
@@ -150,15 +150,15 @@ export const draw = (txt, id) => {
       .style('stroke', color);
 
     legend
-      .data(dataReady.filter((value) => value.data.value !== 0))
+      .data(dataReady)
       .append('text')
       .attr('x', legendRectSize + legendSpacing)
       .attr('y', legendRectSize - legendSpacing)
       .text(function (d) {
         if (parser.yy.getShowData() || conf.showData || conf.pie.showData) {
-          return d.data.key + ' [' + d.data.value + ']';
+          return d.data[0] + ' [' + d.data[1]+ ']';
         } else {
-          return d.data.key;
+          return d.data[0];
         }
       });
   } catch (e) {