Printing barnches and labels

src/diagrams/git/gitGraphRenderer.js

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import { curveBasis, line, select } from 'd3';
 import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
+import { logger } from '../../logger'; // eslint-disable-line
 // import db from './gitGraphAst';
 import * as db from './mockDb';
 import gitGraphParser from './parser/gitGraph';
-import { logger } from '../../logger';
 import { getConfig } from '../../config';
 /* eslint-disable */
 
@@ -37,6 +37,30 @@ function svgCreateDefs(svg) {
     .html('');
 }
 
+const drawText = (txt) => {
+  const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    // svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
+    let rows = [];
+    if (typeof txt === 'string') {
+      rows = txt.split(/\\n|\n|<br\s*\/?>/gi);
+    } else if (Array.isArray(txt)) {
+      rows = txt;
+    } 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');
+      tspan.setAttribute('class', 'row');
+      tspan.textContent = rows[j].trim();
+      svgLabel.appendChild(tspan);
+  }
+  return svgLabel;
+}
+
 const drawBranches = (svg, branches) => {
   const g = svg.append('g')
   let pos = 0;
@@ -47,6 +71,28 @@ const drawBranches = (svg, branches) => {
       line.attr('x2', 500);
       line.attr('y2', pos);
       line.attr('class', 'branch branch'+index)
+
+      // Create the actual text element
+      const labelElement = drawText(branch.name);
+      // Create outer g, edgeLabel, this will be positioned after graph layout
+      const bkg = g.insert('rect');
+      const branchLabel = g.insert('g').attr('class', 'branchLabel');
+
+      // Create inner g, label, this will be positioned now for centering the text
+      const label = branchLabel.insert('g').attr('class', 'label');
+      label.node().appendChild(labelElement);
+      let bbox = labelElement.getBBox();
+      logger.info(bbox);
+      bkg.attr('class', 'branchLabelBkg label' + index)
+        .attr('rx', 4)
+        .attr('ry', 4)
+        .attr('x', -bbox.width -4)
+        .attr('y', -bbox.height / 2 +8 )
+        .attr('width', bbox.width + 18)
+        .attr('height', bbox.height + 4);
+
+      label.attr('transform', 'translate(' + (-bbox.width -14) + ', ' + (pos - bbox.height/2-1) + ')');
+      bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height/2) + ')');
       pos += 50;
     })
 }

src/diagrams/git/styles.js

@@ -19,6 +19,16 @@ const getStyles = options =>
   .branch5 { stroke: ${options.fillType5}; }
   .branch6 { stroke: ${options.fillType6}; }
   .branch7 { stroke: ${options.fillType7}; }
+  .label0  { fill: ${options.fillType0}; }
+  .label1  { fill: ${options.fillType1}; }
+  .label2  { fill: ${options.fillType2}; }
+  .label3  { fill: ${options.fillType3}; }
+  .label4  { fill: ${options.fillType4}; }
+  .label5  { fill: ${options.fillType5}; }
+  .label6  { fill: ${options.fillType6}; }
+  .label7  { fill: ${options.fillType7}; }
+  .branchLabel  { }
+  }
 `;
 
 export default getStyles;