cypress/platform/current.html

@@ -41,14 +41,14 @@
       </div>
       <div class="mermaid" style="width: 50%; height: 20%;">
 flowchart LR
-    A{{A}}-->B{{B}};
+    A{{A}}-- apa -->B{{B}};
     click A callback "Tooltip"
     click B "http://www.github.com" "This is a link"
 
       </div>
       <div class="mermaid" style="width: 50%; height: 20%;">
-flowchart LR
+graph LR
-    A{{A}}-->B{{B}};
+    A{{A}}--apa-->B{{B}};
 
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
@@ -264,7 +264,7 @@ stateDiagram-v2
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": false },
+        flowchart: { curve: 'linear', "htmlLabels": true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated

src/dagre-wrapper/createLabel.js

@@ -1,29 +1,117 @@
-const createLabel = (vertexText, style, isTitle) => {
+import { select } from 'd3';
-  const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+// let vertexNode;
-  svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
+// if (getConfig().flowchart.htmlLabels) {
-  let rows = [];
+//   // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
-  if (typeof vertexText === 'string') {
+//   const node = {
-    rows = vertexText.split(/\\n|\n|<br\s*\/?>/gi);
+//     label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, s => `<i class='${s.replace(':', ' ')}'></i>`)
-  } else if (Array.isArray(vertexText)) {
+//   };
-    rows = vertexText;
+//   vertexNode = addHtmlLabel(svg, node).node();
-  } else {
+//   vertexNode.parentNode.removeChild(vertexNode);
-    rows = [];
+// } else {
-  }
+//   const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+//   svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
 
-  for (let j = 0; j < rows.length; j++) {
+//   const rows = vertexText.split(common.lineBreakRegex);
-    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+
-    tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+//   for (let j = 0; j < rows.length; j++) {
-    tspan.setAttribute('dy', '1em');
+//     const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-    tspan.setAttribute('x', '0');
+//     tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
-    if (isTitle) {
+//     tspan.setAttribute('dy', '1em');
-      tspan.setAttribute('class', 'title-row');
+//     tspan.setAttribute('x', '1');
-    } else {
+//     tspan.textContent = rows[j];
-      tspan.setAttribute('class', 'row');
+//     svgLabel.appendChild(tspan);
-    }
+//   }
-    tspan.textContent = rows[j].trim();
+//   vertexNode = svgLabel;
-    svgLabel.appendChild(tspan);
+// }
+import { getConfig } from '../config';
+
+function applyStyle(dom, styleFn) {
+  if (styleFn) {
+    dom.attr('style', styleFn);
+  }
+}
+
+function addHtmlLabel(node) {
+  // var fo = root.append('foreignObject').attr('width', '100000');
+
+  // var div = fo.append('xhtml:div');
+  // div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
+
+  // var label = node.label;
+  // switch (typeof label) {
+  //   case 'function':
+  //     div.insert(label);
+  //     break;
+  //   case 'object':
+  //     // Currently we assume this is a DOM object.
+  //     div.insert(function() {
+  //       return label;
+  //     });
+  //     break;
+  //   default:
+  //     div.html(label);
+  // }
+
+  // applyStyle(div, node.labelStyle);
+  // div.style('display', 'inline-block');
+  // // Fix for firefox
+  // div.style('white-space', 'nowrap');
+
+  // var client = div.node().getBoundingClientRect();
+  // fo.attr('width', client.width).attr('height', client.height);
+  const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));
+  const div = fo.append('xhtml:div');
+
+  const label = node.label;
+  div.html('<span class="edgeLabel">' + label + '</span>');
+
+  applyStyle(div, node.labelStyle);
+  div.style('display', 'inline-block');
+  // Fix for firefox
+  div.style('white-space', 'nowrap');
+  div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
+  return fo.node();
+}
+
+const createLabel = (vertexText, style, isTitle) => {
+  if (getConfig().flowchart.htmlLabels) {
+    // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
+    const node = {
+      label: vertexText.replace(
+        /fa[lrsb]?:fa-[\w-]+/g,
+        s => `<i class='${s.replace(':', ' ')}'></i>`
+      )
+    };
+    let vertexNode = addHtmlLabel(node);
+    // vertexNode.parentNode.removeChild(vertexNode);
+    return vertexNode;
+  } else {
+    const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
+    let rows = [];
+    if (typeof vertexText === 'string') {
+      rows = vertexText.split(/\\n|\n|<br\s*\/?>/gi);
+    } else if (Array.isArray(vertexText)) {
+      rows = vertexText;
+    } else {
+      rows = [];
+    }
+
+    for (let j = 0; j < rows.length; j++) {
+      const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+      tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+      tspan.setAttribute('dy', '1em');
+      tspan.setAttribute('x', '0');
+      if (isTitle) {
+        tspan.setAttribute('class', 'title-row');
+      } else {
+        tspan.setAttribute('class', 'row');
+      }
+      tspan.textContent = rows[j].trim();
+      svgLabel.appendChild(tspan);
+    }
+    return svgLabel;
   }
-  return svgLabel;
 };
 
 export default createLabel;

src/dagre-wrapper/edges.js

@@ -1,6 +1,6 @@
 import { logger } from '../logger'; // eslint-disable-line
 import createLabel from './createLabel';
-import { line, curveBasis } from 'd3';
+import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../config';
 
 let edgeLabels = {};
@@ -21,7 +21,14 @@ export const insertEdgeLabel = (elem, edge) => {
   label.node().appendChild(labelElement);
 
   // Center the label
-  const bbox = labelElement.getBBox();
+  let bbox = labelElement.getBBox();
+  if (getConfig().flowchart.htmlLabels) {
+    const div = labelElement.children[0];
+    const dv = select(labelElement);
+    bbox = div.getBoundingClientRect();
+    dv.attr('width', bbox.width);
+    dv.attr('height', bbox.height);
+  }
   label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
 
   // Make element accessible by id for positioning

src/dagre-wrapper/shapes/util.js

@@ -1,5 +1,6 @@
 import createLabel from '../createLabel';
-
+import { getConfig } from '../../config';
+import { select } from 'd3';
 export const labelHelper = (parent, node, _classes) => {
   let classes;
   if (!_classes) {
@@ -19,7 +20,15 @@ export const labelHelper = (parent, node, _classes) => {
   const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle));
 
   // Get the size of the label
-  const bbox = text.getBBox();
+  let bbox = text.getBBox();
+
+  if (getConfig().flowchart.htmlLabels) {
+    const div = text.children[0];
+    const dv = select(text);
+    bbox = div.getBoundingClientRect();
+    dv.attr('width', bbox.width);
+    dv.attr('height', bbox.height);
+  }
 
   const halfPadding = node.padding / 2;