Merge pull request #1388 from mermaid-js/1386_finetuning_rendering_engine

1386 finetuning rendering engine

src/dagre-wrapper/edges.js

@@ -34,8 +34,10 @@ export const insertEdgeLabel = (elem, edge) => {
 
 export const positionEdgeLabel = edge => {
   logger.info('Moving label', edge.id, edge.label, edgeLabels[edge.id]);
-  const el = edgeLabels[edge.id];
-  el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')');
+  if (edge.label) {
+    const el = edgeLabels[edge.id];
+    el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')');
+  }
 };
 
 // const getRelationType = function(type) {

src/dagre-wrapper/nodes.js

@@ -255,7 +255,7 @@ const rect = (parent, node) => {
   const rect = shapeSvg.insert('rect', ':first-child');
 
   rect
-    .attr('class', 'basic')
+    .attr('class', 'basic label-container')
     .attr('rx', node.rx)
     .attr('ry', node.ry)
     .attr('x', -bbox.width / 2 - halfPadding)
@@ -384,6 +384,34 @@ const circle = (parent, node) => {
 
   return shapeSvg;
 };
+
+const subroutine = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node);
+
+  const w = bbox.width + node.padding;
+  const h = bbox.height + node.padding;
+  const points = [
+    { x: 0, y: 0 },
+    { x: w, y: 0 },
+    { x: w, y: -h },
+    { x: 0, y: -h },
+    { x: 0, y: 0 },
+    { x: -8, y: 0 },
+    { x: w + 8, y: 0 },
+    { x: w + 8, y: -h },
+    { x: -8, y: -h },
+    { x: -8, y: 0 }
+  ];
+  const el = insertPolygonShape(shapeSvg, w, h, points);
+  updateNodeBounds(node, el);
+
+  node.intersect = function(point) {
+    return intersect.polygon(node, point);
+  };
+
+  return shapeSvg;
+};
+
 const start = (parent, node) => {
   const shapeSvg = parent
     .insert('g')
@@ -487,6 +515,7 @@ const shapes = {
   start,
   end,
   note,
+  subroutine,
   fork: forkJoin,
   join: forkJoin
 };

src/dagre-wrapper/shapes/util.js

@@ -46,5 +46,6 @@ export function insertPolygonShape(parent, w, h, points) {
         })
         .join(' ')
     )
+    .attr('class', 'label-container')
     .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
 }

src/diagrams/flowchart/flowRenderer-v2.js

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

src/diagrams/flowchart/flowRenderer.js

@@ -424,7 +424,7 @@ export const draw = function(text, id) {
   }
 
   // Add label rects for non html labels
-  if (!conf.htmlLabels) {
+  if (!conf.htmlLabels || true) { // eslint-disable-line
     const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (let k = 0; k < labels.length; k++) {
       const label = labels[k];

src/diagrams/state/stateRenderer-v2.js

@@ -286,10 +286,25 @@ export const draw = function(text, id) {
   svg.attr('width', width * 1.75);
   svg.attr('class', 'statediagram');
   // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
-  svg.attr(
-    'viewBox',
-    `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
-  );
+  // svg.attr(
+  //   'viewBox',
+  //   `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
+  // );
+
+  const svgBounds = svg.node().getBBox();
+
+  if (conf.useMaxWidth) {
+    svg.attr('width', '100%');
+    svg.attr('style', `max-width: ${width}px;`);
+  } else {
+    svg.attr('height', height);
+    svg.attr('width', width);
+  }
+
+  // Ensure the viewBox includes the whole svgBounds area with extra space for padding
+  const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
+  logger.debug(`viewBox ${vBox}`);
+  svg.attr('viewBox', vBox);
 
   // Add label rects for non html labels
   if (!conf.htmlLabels) {

src/mermaidAPI.js

@@ -736,7 +736,7 @@ const render = function(id, _txt, cb, container) {
   }
 
   // classDef
-  if (graphType === 'flowchart') {
+  if (graphType === 'flowchart' || graphType === 'flowchart-v2') {
     const classes = flowRenderer.getClasses(txt);
     for (const className in classes) {
       style += `\n.${className} > * { ${classes[className].styles.join(
@@ -858,6 +858,7 @@ const render = function(id, _txt, cb, container) {
   if (typeof cb !== 'undefined') {
     switch (graphType) {
       case 'flowchart':
+      case 'flowchart-v2':
         cb(svgCode, flowDb.bindFunctions);
         break;
       case 'gantt':