Adding styling

cypress/platform/knsv.html

@@ -55,11 +55,11 @@ flowchart TD
   class T TestSub
   linkStyle 0,1 color:orange, stroke: orange;
       </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
+      <div class="mermaid2" style="width: 50%; height: 20%;">
 graph TD
   C -->|fa:fa-car Car| F[fa:fa-car Car]
       </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
+      <div class="mermaid2" style="width: 50%; height: 20%;">
 flowchart TD
   C -->|fa:fa-car Car| F[fa:fa-car Car]
       </div>
@@ -94,6 +94,13 @@ graph TD
       C -----> E4
       C ======> E5
       </div>
+      <div class="mermaid" style="width: 50%; height: 20%;">
+sequenceDiagram
+    participant John
+    participant Alice
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+      </div>
 
 
   <script src="./mermaid.js"></script>
@@ -110,7 +117,7 @@ graph TD
         flowchart: { curve: 'cardinal', htmlLabels: true },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true },
+        sequence: { showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"arial", sans-serif',
         fontFamily: 'courier',

src/defaultConfig.js

@@ -918,6 +918,7 @@ const config = {
     useMaxWidth: true
   },
   gitGraph: {
+    diagramPadding: 8,
     nodeSpacing: 150,
     nodeFillColor: 'yellow',
     nodeStrokeWidth: 2,

src/diagrams/git/gitGraphRenderer.js

@@ -1,10 +1,9 @@
 import { curveBasis, line, select } from 'd3';
-
+import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 // import db from './gitGraphAst';
 import * as db from './mockDb';
 import gitGraphParser from './parser/gitGraph';
 import { logger } from '../../logger';
-import { interpolateToCurve } from '../../utils';
 import { getConfig } from '../../config';
 /* eslint-disable */
 
@@ -37,251 +36,18 @@ function svgCreateDefs(svg) {
     .html('');
 }
 
-function svgDrawLine(svg, points, colorIdx, interpolate) {
+const drawBranches = (svg, branches) => {
-  const config = getConfig().gitGraph;
+  const g = svg.append('g')
-  const curve = interpolateToCurve(interpolate, curveBasis);
+  let pos = 0;
-  const color = config.branchColors[colorIdx % config.branchColors.length];
+    branches.forEach((branch, index) => {
-  const lineGen = line()
+      const line = g.append('line');
-    .x(function(d) {
+      line.attr('x1', 0);
-      return Math.round(d.x);
+      line.attr('y1', pos);
+      line.attr('x2', 500);
+      line.attr('y2', pos);
+      line.attr('class', 'branch branch'+index)
+      pos += 50;
     })
-    .y(function(d) {
-      return Math.round(d.y);
-    })
-    .curve(curve);
-
-  svg
-    .append('svg:path')
-    .attr('d', lineGen(points))
-    .style('stroke', color)
-    .style('stroke-width', config.lineStrokeWidth)
-    .style('fill', 'none');
-}
-
-// Pass in the element and its pre-transform coords
-function getElementCoords(element, coords) {
-  coords = coords || element.node().getBBox();
-  const ctm = element.node().getCTM();
-  const xn = ctm.e + coords.x * ctm.a;
-  const yn = ctm.f + coords.y * ctm.d;
-  return {
-    left: xn,
-    top: yn,
-    width: coords.width,
-    height: coords.height
-  };
-}
-
-function svgDrawLineForCommits(svg, fromId, toId, direction, color) {
-  const config = getConfig().gitGraph;
-  logger.debug('svgDrawLineForCommits: ', fromId, toId);
-  const fromBbox = getElementCoords(svg.select('#node-' + fromId + ' circle'));
-  const toBbox = getElementCoords(svg.select('#node-' + toId + ' circle'));
-  switch (direction) {
-    case 'LR':
-      // (toBbox)
-      //  +--------
-      //          + (fromBbox)
-      if (fromBbox.left - toBbox.left > config.nodeSpacing) {
-        const lineStart = {
-          x: fromBbox.left - config.nodeSpacing,
-          y: toBbox.top + toBbox.height / 2
-        };
-        const lineEnd = { x: toBbox.left + toBbox.width, y: toBbox.top + toBbox.height / 2 };
-        svgDrawLine(svg, [lineStart, lineEnd], color, 'linear');
-        svgDrawLine(
-          svg,
-          [
-            { x: fromBbox.left, y: fromBbox.top + fromBbox.height / 2 },
-            { x: fromBbox.left - config.nodeSpacing / 2, y: fromBbox.top + fromBbox.height / 2 },
-            { x: fromBbox.left - config.nodeSpacing / 2, y: lineStart.y },
-            lineStart
-          ],
-          color
-        );
-      } else {
-        svgDrawLine(
-          svg,
-          [
-            {
-              x: fromBbox.left,
-              y: fromBbox.top + fromBbox.height / 2
-            },
-            {
-              x: fromBbox.left - config.nodeSpacing / 2,
-              y: fromBbox.top + fromBbox.height / 2
-            },
-            {
-              x: fromBbox.left - config.nodeSpacing / 2,
-              y: toBbox.top + toBbox.height / 2
-            },
-            {
-              x: toBbox.left + toBbox.width,
-              y: toBbox.top + toBbox.height / 2
-            }
-          ],
-          color
-        );
-      }
-      break;
-    case 'BT':
-      //      +           (fromBbox)
-      //      |
-      //      |
-      //              +   (toBbox)
-      if (toBbox.top - fromBbox.top > config.nodeSpacing) {
-        const lineStart = {
-          x: toBbox.left + toBbox.width / 2,
-          y: fromBbox.top + fromBbox.height + config.nodeSpacing
-        };
-        const lineEnd = { x: toBbox.left + toBbox.width / 2, y: toBbox.top };
-        svgDrawLine(svg, [lineStart, lineEnd], color, 'linear');
-        svgDrawLine(
-          svg,
-          [
-            { x: fromBbox.left + fromBbox.width / 2, y: fromBbox.top + fromBbox.height },
-            {
-              x: fromBbox.left + fromBbox.width / 2,
-              y: fromBbox.top + fromBbox.height + config.nodeSpacing / 2
-            },
-            { x: toBbox.left + toBbox.width / 2, y: lineStart.y - config.nodeSpacing / 2 },
-            lineStart
-          ],
-          color
-        );
-      } else {
-        svgDrawLine(
-          svg,
-          [
-            {
-              x: fromBbox.left + fromBbox.width / 2,
-              y: fromBbox.top + fromBbox.height
-            },
-            {
-              x: fromBbox.left + fromBbox.width / 2,
-              y: fromBbox.top + config.nodeSpacing / 2
-            },
-            {
-              x: toBbox.left + toBbox.width / 2,
-              y: toBbox.top - config.nodeSpacing / 2
-            },
-            {
-              x: toBbox.left + toBbox.width / 2,
-              y: toBbox.top
-            }
-          ],
-          color
-        );
-      }
-      break;
-  }
-}
-
-function cloneNode(svg, selector) {
-  return svg
-    .select(selector)
-    .node()
-    .cloneNode(true);
-}
-
-// function renderCommitHistory(svg, commitid, branches, direction) {
-//   const config = getConfig().gitGraph;
-//   let commit;
-//   const numCommits = Object.keys(allCommitsDict).length;
-//   if (typeof commitid === 'string') {
-//     do {
-//       commit = allCommitsDict[commitid];
-//       logger.debug('in renderCommitHistory', commit.id, commit.seq);
-//       if (svg.select('#node-' + commitid).size() > 0) {
-//         return;
-//       }
-//       svg
-//         .append(function() {
-//           return cloneNode(svg, '#def-commit');
-//         })
-//         .attr('class', 'commit')
-//         .attr('id', function() {
-//           return 'node-' + commit.id;
-//         })
-//         .attr('transform', function() {
-//           switch (direction) {
-//             case 'LR':
-//               return (
-//                 'translate(' +
-//                 (commit.seq * config.nodeSpacing + config.leftMargin) +
-//                 ', ' +
-//                 branchNum * config.branchOffset +
-//                 ')'
-//               );
-//             case 'BT':
-//               return (
-//                 'translate(' +
-//                 (branchNum * config.branchOffset + config.leftMargin) +
-//                 ', ' +
-//                 (numCommits - commit.seq) * config.nodeSpacing +
-//                 ')'
-//               );
-//           }
-//         })
-//         .attr('fill', config.nodeFillColor)
-//         .attr('stroke', config.nodeStrokeColor)
-//         .attr('stroke-width', config.nodeStrokeWidth);
-
-//       let branch;
-//       for (let branchName in branches) {
-//         if (branches[branchName].commit === commit) {
-//           branch = branches[branchName];
-//           break;
-//         }
-//       }
-//       if (branch) {
-//         logger.debug('found branch ', branch.name);
-//         svg
-//           .select('#node-' + commit.id + ' p')
-//           .append('xhtml:span')
-//           .attr('class', 'branch-label')
-//           .text(branch.name + ', ');
-//       }
-//       svg
-//         .select('#node-' + commit.id + ' p')
-//         .append('xhtml:span')
-//         .attr('class', 'commit-id')
-//         .text(commit.id);
-//       if (commit.message !== '' && direction === 'BT') {
-//         svg
-//           .select('#node-' + commit.id + ' p')
-//           .append('xhtml:span')
-//           .attr('class', 'commit-msg')
-//           .text(', ' + commit.message);
-//       }
-//       commitid = commit.parent;
-//     } while (commitid && allCommitsDict[commitid]);
-//   }
-
-//   if (Array.isArray(commitid)) {
-//     logger.debug('found merge commmit', commitid);
-//     renderCommitHistory(svg, commitid[0], branches, direction);
-//     branchNum++;
-//     renderCommitHistory(svg, commitid[1], branches, direction);
-//     branchNum--;
-//   }
-// }
-
-function renderLines(svg, commit, direction, branchColor) {
-  branchColor = branchColor || 0;
-  while (commit.seq > 0 && !commit.lineDrawn) {
-    if (typeof commit.parent === 'string') {
-      svgDrawLineForCommits(svg, commit.id, commit.parent, direction, branchColor);
-      commit.lineDrawn = true;
-      commit = allCommitsDict[commit.parent];
-    } else if (Array.isArray(commit.parent)) {
-      svgDrawLineForCommits(svg, commit.id, commit.parent[0], direction, branchColor);
-      svgDrawLineForCommits(svg, commit.id, commit.parent[1], direction, branchColor + 1);
-      renderLines(svg, allCommitsDict[commit.parent[1]], direction, branchColor + 1);
-      commit.lineDrawn = true;
-      commit = allCommitsDict[commit.parent[0]];
-    }
-  }
 }
 
 export const draw = function(txt, id, ver) {
@@ -297,28 +63,25 @@ export const draw = function(txt, id, ver) {
   // parser.parse(txt + '\n');
 
   // config = Object.assign(config, apiConfig, db.getOptions());
-  logger.debug('effective options', config);
   const direction = db.getDirection();
   allCommitsDict = db.getCommits();
   const branches = db.getBranchesAsObjArray();
+  logger.debug('effective options', config, branches);
 
-  const svg = select(`[id="${id}"]`);
+  const diagram = select(`[id="${id}"]`);
-  svgCreateDefs(svg);
+  svgCreateDefs(diagram);
-  branchNum = 1;
+
-  for (let branch in branches) {
+  drawBranches(diagram, branches);
-    const v = branches[branch];
+
-    // renderCommitHistory(svg, v.commit.id, branches, direction);
+  const padding = config.diagramPadding;
-    renderLines(svg, v.commit, direction);
+  const svgBounds = diagram.node().getBBox();
-    branchNum++;
+  const width = svgBounds.width + padding * 2;
-  }
+  const height = svgBounds.height + padding * 2;
-  svg.attr('height', function() {
+
-    if (direction === 'BT') return Object.keys(allCommitsDict).length * config.nodeSpacing;
+  configureSvgSize(diagram, height, width, config.useMaxWidth);
-    return (branches.length + 1) * config.branchOffset;
+  const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
-  });
+  logger.debug(`viewBox ${vBox}`);
-  // } catch (e) {
+  diagram.attr('viewBox', vBox);
-  //   logger.error('Error while rendering gitgraph');
-  //   logger.error(e.message);
-  // }
 };
 
 export default {

src/diagrams/git/styles.js

@@ -1,4 +1,4 @@
-const getStyles = () =>
+const getStyles = options =>
   `
   .commit-id,
   .commit-msg,
@@ -8,6 +8,17 @@ const getStyles = () =>
     font-family: 'trebuchet ms', verdana, arial;
     font-family: var(--mermaid-font-family);
   }
+  .branch {
+    stroke-width: 10;
+  }
+  .branch0 { stroke: ${options.fillType0}; }
+  .branch1 { stroke: ${options.fillType1}; }
+  .branch2 { stroke: ${options.fillType2}; }
+  .branch3 { stroke: ${options.fillType3}; }
+  .branch4 { stroke: ${options.fillType4}; }
+  .branch5 { stroke: ${options.fillType5}; }
+  .branch6 { stroke: ${options.fillType6}; }
+  .branch7 { stroke: ${options.fillType7}; }
 `;
 
 export default getStyles;