Merge pull request #2740 from Guy-Adler/feature/2391_double_circle

Double Circle Node Shape

src/dagre-wrapper/nodes.js

@@ -554,6 +554,42 @@ const circle = (parent, node) => {
   return shapeSvg;
 };
 
+const doublecircle = (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
+  const gap = 5;
+  const circleGroup = shapeSvg.insert('g', ':first-child');
+  const outerCircle = circleGroup.insert('circle');
+  const innerCircle = circleGroup.insert('circle');
+
+  // center the circle around its coordinate
+  outerCircle
+    .attr('style', node.style)
+    .attr('rx', node.rx)
+    .attr('ry', node.ry)
+    .attr('r', bbox.width / 2 + halfPadding + gap)
+    .attr('width', bbox.width + node.padding + gap * 2)
+    .attr('height', bbox.height + node.padding + gap * 2);
+
+  innerCircle
+    .attr('style', node.style)
+    .attr('rx', node.rx)
+    .attr('ry', node.ry)
+    .attr('r', bbox.width / 2 + halfPadding)
+    .attr('width', bbox.width + node.padding)
+    .attr('height', bbox.height + node.padding);
+
+  log.info('DoubleCircle main');
+
+  updateNodeBounds(node, outerCircle);
+
+  node.intersect = function (point) {
+    log.info('DoubleCircle intersect', node, bbox.width / 2 + halfPadding + gap, point);
+    return intersect.circle(node, bbox.width / 2 + halfPadding + gap, point);
+  };
+
+  return shapeSvg;
+};
+
 const subroutine = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
@@ -943,6 +979,7 @@ const shapes = {
   rectWithTitle,
   choice,
   circle,
+  doublecircle,
   stadium,
   hexagon,
   rect_left_inv_arrow,

src/diagrams/flowchart/flowRenderer-v2.js

@@ -133,6 +133,9 @@ export const addVertices = function (vert, g, svgId, root, doc) {
       case 'group':
         _shape = 'rect';
         break;
+      case 'doublecircle':
+        _shape = 'doublecircle';
+        break;
       default:
         _shape = 'rect';
     }

src/diagrams/flowchart/parser/flow-singlenode.spec.js

@@ -159,6 +159,40 @@ describe('[Singlenodes] when parsing', () => {
     expect(vert['a'].text).toBe('A <br> end');
   });
 
+  it('should handle a single double circle node', function () {
+    // Silly but syntactically correct
+    const res = flow.parser.parse('graph TD;a(((A)));');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(edges.length).toBe(0);
+    expect(vert['a'].type).toBe('doublecircle');
+  });
+
+  it('should handle a single double circle node with whitespace after it', function () {
+    // Silly but syntactically correct
+    const res = flow.parser.parse('graph TD;a(((A)))   ;');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(edges.length).toBe(0);
+    expect(vert['a'].type).toBe('doublecircle');
+  });
+
+  it('should handle a single double circle node with html in it (SN3)', function () {
+    // Silly but syntactically correct
+    const res = flow.parser.parse('graph TD;a(((A <br> end)));');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(edges.length).toBe(0);
+    expect(vert['a'].type).toBe('doublecircle');
+    expect(vert['a'].text).toBe('A <br> end');
+  });
+
   it('should handle a single node with alphanumerics starting on a char', function () {
     // Silly but syntactically correct
     const res = flow.parser.parse('graph TD;id1;');

src/diagrams/flowchart/parser/flow.jison

@@ -121,6 +121,8 @@ that id.
 "[|"                  return 'VERTEX_WITH_PROPS_START';
 "[("                  return 'CYLINDERSTART';
 ")]"                  return 'CYLINDEREND';
+"((("                 return 'DOUBLECIRCLESTART';
+")))"                 return 'DOUBLECIRCLEEND';
 \-                    return 'MINUS';
 "."                   return 'DOT';
 [\_]                  return 'UNDERSCORE';
@@ -373,6 +375,8 @@ node: vertex
 
 vertex:  idString SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'square');}
+    | idString DOUBLECIRCLESTART text DOUBLECIRCLEEND
+        {$$ = $1;yy.addVertex($1,$3,'doublecircle');}
     | idString PS PS text PE PE
         {$$ = $1;yy.addVertex($1,$4,'circle');}
     | idString '(-' text '-)'