#1466 Handling line styles using the new rendering engine

src/dagre-wrapper/GraphObjects.md

@@ -112,6 +112,8 @@ Required edgeData for proper rendering:
 | label      | overlap between label and labelText?     |
 | labelPos   |                                          |
 | labelType  | overlap between label and labelText?     |
+| thickness  | Sets the thinkess of the edge. Can be ['normal', 'thick'] |
+| pattern    | Sets the pattern of the edge. Can be ['solid', 'dotted', 'dashed']    |
 
 
 # Markers

src/dagre-wrapper/edges.js

@@ -191,11 +191,35 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
     })
     .curve(curveBasis);
 
+  // Contruct stroke classes based on properties
+  let strokeClasses;
+  switch (edge.thickness) {
+    case 'normal':
+      strokeClasses = 'edge-thickness-normal';
+      break;
+    case 'thick':
+      strokeClasses = 'edge-thickness-thick';
+      break;
+    default:
+      strokeClasses = '';
+  }
+  switch (edge.pattern) {
+    case 'solid':
+      strokeClasses += ' edge-pattern-solid';
+      break;
+    case 'dotted':
+      strokeClasses += ' edge-pattern-dotted';
+      break;
+    case 'dashed':
+      strokeClasses += ' edge-pattern-dashed';
+      break;
+  }
+
   const svgPath = elem
     .append('path')
     .attr('d', lineFunction(lineData))
     .attr('id', edge.id)
-    .attr('class', 'transition' + (edge.classes ? ' ' + edge.classes : ''));
+    .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''));
 
   // DEBUG code, adds a red circle at each edge coordinate
   // edge.points.forEach(point => {

src/dagre-wrapper/markers.js

@@ -17,7 +17,7 @@ const extension = (elem, type, id) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-extensionStart')
-    .attr('class', 'extension ' + type)
+    .attr('class', 'marker extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
     .attr('markerWidth', 190)
@@ -30,7 +30,7 @@ const extension = (elem, type, id) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-extensionEnd ' + type)
-    .attr('class', 'extension ' + type)
+    .attr('class', 'marker extension ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
     .attr('markerWidth', 20)
@@ -45,7 +45,7 @@ const composition = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-compositionStart')
-    .attr('class', 'extension ' + type)
+    .attr('class', 'marker extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
     .attr('markerWidth', 190)
@@ -58,7 +58,7 @@ const composition = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-compositionEnd')
-    .attr('class', 'extension ' + type)
+    .attr('class', 'marker extension ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
     .attr('markerWidth', 20)
@@ -72,7 +72,7 @@ const aggregation = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-aggregationStart')
-    .attr('class', 'extension ' + type)
+    .attr('class', 'marker extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
     .attr('markerWidth', 190)
@@ -85,7 +85,7 @@ const aggregation = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-aggregationEnd')
-    .attr('class', type)
+    .attr('class', 'marker ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
     .attr('markerWidth', 20)
@@ -99,7 +99,7 @@ const dependency = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-dependencyStart')
-    .attr('class', 'extension ' + type)
+    .attr('class', 'marker extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
     .attr('markerWidth', 190)
@@ -112,7 +112,7 @@ const dependency = (elem, type) => {
     .append('defs')
     .append('marker')
     .attr('id', type + '-dependencyEnd')
-    .attr('class', type)
+    .attr('class', 'marker ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
     .attr('markerWidth', 20)
@@ -125,13 +125,13 @@ const point = (elem, type) => {
   elem
     .append('marker')
     .attr('id', type + '-pointEnd')
-    .attr('class', type)
+    .attr('class', 'marker ' + type)
     .attr('viewBox', '0 0 10 10')
-    .attr('refX', 10)
+    .attr('refX', 9)
     .attr('refY', 5)
-    .attr('markerUnits', 'strokeWidth')
-    .attr('markerWidth', 8)
-    .attr('markerHeight', 8)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 12)
+    .attr('markerHeight', 12)
     .attr('orient', 'auto')
     .append('path')
     .attr('d', 'M 0 0 L 10 5 L 0 10 z')
@@ -141,13 +141,13 @@ const point = (elem, type) => {
   elem
     .append('marker')
     .attr('id', type + '-pointStart')
-    .attr('class', type)
+    .attr('class', 'marker ' + type)
     .attr('viewBox', '0 0 10 10')
     .attr('refX', 0)
     .attr('refY', 5)
-    .attr('markerUnits', 'strokeWidth')
-    .attr('markerWidth', 8)
-    .attr('markerHeight', 8)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 12)
+    .attr('markerHeight', 12)
     .attr('orient', 'auto')
     .append('path')
     .attr('d', 'M 0 5 L 10 10 L 10 0 z')
@@ -159,13 +159,13 @@ const circle = (elem, type) => {
   elem
     .append('marker')
     .attr('id', type + '-circleEnd')
-    .attr('class', type)
+    .attr('class', 'marker ' + type)
     .attr('viewBox', '0 0 10 10')
     .attr('refX', 11)
     .attr('refY', 5)
-    .attr('markerUnits', 'strokeWidth')
-    .attr('markerWidth', 7)
-    .attr('markerHeight', 7)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 11)
+    .attr('markerHeight', 11)
     .attr('orient', 'auto')
     .append('circle')
     .attr('cx', '5')
@@ -178,13 +178,13 @@ const circle = (elem, type) => {
   elem
     .append('marker')
     .attr('id', type + '-circleStart')
-    .attr('class', type)
+    .attr('class', 'marker ' + type)
     .attr('viewBox', '0 0 10 10')
     .attr('refX', -1)
     .attr('refY', 5)
-    .attr('markerUnits', 'strokeWidth')
-    .attr('markerWidth', 7)
-    .attr('markerHeight', 7)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 11)
+    .attr('markerHeight', 11)
     .attr('orient', 'auto')
     .append('circle')
     .attr('cx', '5')
@@ -198,16 +198,16 @@ const cross = (elem, type) => {
   elem
     .append('marker')
     .attr('id', type + '-crossEnd')
-    .attr('class', type)
+    .attr('class', 'marker cross ' + type)
     .attr('viewBox', '0 0 11 11')
     .attr('refX', 12)
     .attr('refY', 5.2)
-    .attr('markerUnits', 'strokeWidth')
-    .attr('markerWidth', 7)
-    .attr('markerHeight', 7)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 11)
+    .attr('markerHeight', 11)
     .attr('orient', 'auto')
     .append('path')
-    .attr('stroke', 'black')
+    // .attr('stroke', 'black')
     .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
     .attr('class', 'arrowMarkerPath')
     .style('stroke-width', 2)
@@ -216,16 +216,16 @@ const cross = (elem, type) => {
   elem
     .append('marker')
     .attr('id', type + '-crossStart')
-    .attr('class', type)
+    .attr('class', 'marker cross ' + type)
     .attr('viewBox', '0 0 11 11')
     .attr('refX', -1)
     .attr('refY', 5.2)
-    .attr('markerUnits', 'strokeWidth')
-    .attr('markerWidth', 7)
-    .attr('markerHeight', 7)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 11)
+    .attr('markerHeight', 11)
     .attr('orient', 'auto')
     .append('path')
-    .attr('stroke', 'black')
+    // .attr('stroke', 'black')
     .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
     .attr('class', 'arrowMarkerPath')
     .style('stroke-width', 2)

src/diagrams/flowchart/flowRenderer-v2.js

@@ -217,12 +217,16 @@ export const addEdges = function(edges, g) {
           if (typeof defaultLabelStyle !== 'undefined') {
             labelStyle = defaultLabelStyle;
           }
+          edgeData.thickness = 'normal';
+          edgeData.pattern = 'solid';
           break;
         case 'dotted':
-          style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
+          edgeData.thickness = 'normal';
+          edgeData.pattern = 'dotted';
           break;
         case 'thick':
-          style = ' stroke-width: 3.5px;fill:none';
+          edgeData.thickness = 'thick';
+          edgeData.pattern = 'solid';
           break;
       }
     }
@@ -262,7 +266,7 @@ export const addEdges = function(edges, g) {
     }
 
     edgeData.id = linkId;
-    edgeData.class = linkNameStart + ' ' + linkNameEnd;
+    edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
 
     // Add the edge to the graph
     g.setEdge(edge.start, edge.end, edgeData, cnt);

src/diagrams/state/stateRenderer-v2.js

@@ -148,7 +148,8 @@ const setupNode = (g, parent, node, altFlag) => {
         classes: 'note-edge',
         arrowheadStyle: 'fill: #333',
         labelpos: 'c',
-        labelType: 'text'
+        labelType: 'text',
+        thickness: 'normal'
       });
     } else {
       g.setNode(node.id, nodeData);
@@ -184,7 +185,9 @@ const setupDoc = (g, parent, doc, altFlag) => {
         label: item.description,
         arrowheadStyle: 'fill: #333',
         labelpos: 'c',
-        labelType: 'text'
+        labelType: 'text',
+        thickness: 'normal',
+        classes: 'transition'
       };
       let startId = item.state1.id;
       let endId = item.state2.id;

src/themes/flowchart.scss

@@ -34,6 +34,11 @@
   stroke-width: 1.5px;
 }
 
+.flowchart-link {
+  stroke: $lineColor;
+  fill: none;
+}
+
 .edgeLabel {
   background-color: $edgeLabelBackground;
   rect {

src/themes/mermaid.scss

@@ -17,10 +17,38 @@
   // --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
 }
 
+/* Classes common for multiple diagrams */
+
 .error-icon {
   fill: $errorBkgColor;
 }
 .error-text {
   fill: $errorTextColor;
   stroke: $errorTextColor;
-}
+}
+
+.edge-thickness-normal {
+  // stroke: $lineColor;
+  stroke-width: 2px;
+}
+.edge-thickness-thick {
+  // stroke: $lineColor;
+  stroke-width: 3.5px
+}
+.edge-pattern-solid {
+  stroke-dasharray: 0;
+}
+
+.edge-pattern-dashed{
+  stroke-dasharray: 3;
+}
+.edge-pattern-dotted {
+  stroke-dasharray: 2;
+}
+
+.marker {
+  fill: $lineColor;
+}
+.marker.cross {
+  stroke: $lineColor;
+}