From 5ef2ad5536e726568c880b1450874707cfc36c66 Mon Sep 17 00:00:00 2001
From: Ashish Jain <ashishjain0512@gmail.com>
Date: Thu, 19 Aug 2021 18:48:19 +0200
Subject: [PATCH] Fix for classDiagram-v2 support for cardinality

---
 src/dagre-wrapper/edges.js             | 23 +++++++++++++++++++----
 src/diagrams/class/classRenderer-v2.js |  2 +-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js
index 6f5e24a76..b38b6ace4 100644
--- a/src/dagre-wrapper/edges.js
+++ b/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;
diff --git a/src/diagrams/class/classRenderer-v2.js b/src/diagrams/class/classRenderer-v2.js
index 768238c65..ee1697833 100644
--- a/src/diagrams/class/classRenderer-v2.js
+++ b/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 {