Added lollipop feature for updated codebase

demos/index.html

@@ -879,6 +879,31 @@ Enterprise_Boundary(b0, "BankBoundary0") {
         }
   </div>
 
+  <div class="mermaid">
+    classDiagram
+    Interface1 ()-- Interface1Impl
+  </div>
+
+  <div class="mermaid">
+    classDiagram 
+    direction LR
+    Animal ()-- Dog
+    Dog : bark()
+    Dog : species()
+  </div>
+
+  <div class="mermaid">
+    classDiagram 
+    direction RL
+    Fruit ()-- Apple
+    Apple : color()
+    Apple : -int leafCount()
+    Fruit ()-- Pineapple
+    Pineapple : color()
+    Pineapple : -int leafCount()
+    Pineapple : -int spikeCount()
+  </div>
+
   <div class="mermaid">
     stateDiagram
     accDescription This is a state diagram showing one state

src/dagre-wrapper/edges.js

@@ -510,6 +510,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
     case 'dependency':
       svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')');
       break;
+    case 'lollipop':
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-lollipopStart' + ')');
+      break;
     default:
   }
   switch (edge.arrowTypeEnd) {
@@ -537,6 +540,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
     case 'dependency':
       svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')');
       break;
+    case 'lollipop':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-lollipopEnd' + ')');
+      break;
     default:
   }
   let paths = {};

src/dagre-wrapper/markers.js

@@ -119,6 +119,24 @@ const dependency = (elem, type) => {
     .append('path')
     .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
 };
+const lollipop = (elem, type, id) => {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', type + '-lollipopStart')
+    .attr('class', 'marker lollipop ' + type)
+    .attr('refX', 0)
+    .attr('refY', 7)
+    .attr('markerWidth', 190)
+    .attr('markerHeight', 240)
+    .attr('orient', 'auto')
+    .append('circle')
+    .attr('stroke', 'black')
+    .attr('fill', 'white')
+    .attr('cx', 6)
+    .attr('cy', 7)
+    .attr('r', 6);
+};
 const point = (elem, type) => {
   elem
     .append('marker')
@@ -250,6 +268,7 @@ const markers = {
   composition,
   aggregation,
   dependency,
+  lollipop,
   point,
   circle,
   cross,

src/diagrams/class/classDb.js

@@ -311,6 +311,7 @@ export const relationType = {
   EXTENSION: 1,
   COMPOSITION: 2,
   DEPENDENCY: 3,
+  LOLLIPOP: 4,
 };
 
 const setupToolTips = function (element) {

src/diagrams/class/classRenderer-v2.js

@@ -338,7 +338,13 @@ export const draw = function (text, id, _version, diagObj) {
 
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
-  render(element, g, ['aggregation', 'extension', 'composition', 'dependency'], 'classDiagram', id);
+  render(
+    element,
+    g,
+    ['aggregation', 'extension', 'composition', 'dependency', 'lollipop'],
+    'classDiagram',
+    id
+  );
 
   setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);
 
@@ -420,6 +426,9 @@ function getArrowMarker(type) {
     case 3:
       marker = 'dependency';
       break;
+    case 4:
+      marker = 'lollipop';
+      break;
     default:
       marker = 'none';
   }

src/diagrams/class/parser/classDiagram.jison

@@ -44,6 +44,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 "classDiagram-v2"       return 'CLASS_DIAGRAM';
 "classDiagram"          return 'CLASS_DIAGRAM';
 [{]                     { this.begin("struct"); /*console.log('Starting struct');*/ return 'STRUCT_START';}
+<INITIAL,struct>"[*]"   { /*console.log('EDGE_STATE=',yytext);*/ return 'EDGE_STATE';}
 <struct><<EOF>>         return "EOF_IN_STRUCT";
 <struct>[{]             return "OPEN_IN_STRUCT";
 <struct>[}]             { /*console.log('Ending struct');*/this.popState(); return 'STRUCT_STOP';}}
@@ -104,6 +105,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 \s*\<                 return 'DEPENDENCY';
 \s*\*                 return 'COMPOSITION';
 \s*o                  return 'AGGREGATION';
+\s*\(\)               return 'LOLLIPOP';
 \-\-                  return 'LINE';
 \.\.                  return 'DOTTED_LINE';
 ":"{1}[^:\n;]+        return 'LABEL';
@@ -310,6 +312,7 @@ relationType
     | EXTENSION   { $$=yy.relationType.EXTENSION;}
     | COMPOSITION { $$=yy.relationType.COMPOSITION;}
     | DEPENDENCY  { $$=yy.relationType.DEPENDENCY;}
+    | LOLLIPOP    { $$=yy.relationType.LOLLIPOP;}
     ;
 
 lineType

src/diagrams/class/styles.js

@@ -128,6 +128,18 @@ g.classGroup line {
   stroke-width: 1;
 }
 
+#lollipopStart, .lollipop {
+  fill: ${options.mainBkg} !important;
+  stroke: ${options.lineColor} !important;
+  stroke-width: 1;
+}
+
+#lollipopEnd, .lollipop {
+  fill: ${options.mainBkg} !important;
+  stroke: ${options.lineColor} !important;
+  stroke-width: 1;
+}
+
 .edgeTerminals {
   font-size: 11px;
 }

src/diagrams/class/svgDraw.js

@@ -14,6 +14,8 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
         return 'composition';
       case diagObj.db.DEPENDENCY:
         return 'dependency';
+      case diagObj.db.LOLLIPOP:
+        return 'lollipop';
     }
   };