#1295 Styling of start/end nodes, arrows and regular states

2025-08-20 08:46:44 +02:00 · 2020-03-28 13:59:41 +01:00
parent 391dc06013
commit 85f47e1693
8 changed files with 205 additions and 82 deletions
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -11,17 +11,17 @@
        font-family: 'Arial';
        }
      h1 { color: white;}
-      .arrowheadPath {fill: red;}
-
-      .edgePath .path {stroke: red;}
      .mermaid2 {
        display: none;
      }
+      .mermaid-apa #pointEnd {
+        fill: green !important;
+      }
    </style>
  </head>
  <body>
    <h1>info below</h1>
-      <div class="mermaid2" style="width: 100%; height: 100%;">
+      <div class="mermaid2" style="width: 100%; height: 20%;">
        flowchart LR
        a --> b

@@ -34,14 +34,30 @@
        G-->H
        G-->c
      </div>
-      <div class="mermaid2" style="width: 100%; height: 100%;">
+      <div class="mermaid" style="width: 50%; height: 20%;">
        flowchart LR
        subgraph id1 [Test]
            b
          end
        a-->id1
      </div>
-      <div class="mermaid" style="width: 100%; height: 100%;">
+      <div class="mermaid mermaid-apa" style="width: 100%; height: 20%;">
+        stateDiagram-v2
+        [*] --> Still
+        [*] --> Moving
+        Still --> [*]
+        Moving --> [*]
+      </div>
+      <div class="mermaid2" style="width: 100%; height: 100%;">
+        stateDiagram-v2
+        [*] --> Still
+        Still --> [*]
+        Still --> Moving
+        Moving --> Still
+        Moving --> Crash
+        Crash --> [*]
+      </div>
+      <div class="mermaid2" style="width: 100%; height: 100%;">
        stateDiagram-v2
      [*]-->TV

--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@@ -113,7 +113,7 @@ const intersection = (node, outsidePoint, insidePoint) => {
  }
 };

-export const insertEdge = function(elem, edge, clusterDb) {
+export const insertEdge = function(elem, edge, clusterDb, diagramType) {
  logger.info('\n\n\n\n');
  let points = edge.points;
  if (edge.toCluster) {
@@ -219,25 +219,32 @@ export const insertEdge = function(elem, edge, clusterDb) {
  // logger.info('arrowType', edge.arrowType);
  switch (edge.arrowType) {
    case 'arrow_cross':
-      svgPath.attr('marker-end', 'url(' + url + '#' + 'crossEnd' + ')');
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
      break;
    case 'double_arrow_cross':
-      svgPath.attr('marker-end', 'url(' + url + '#' + 'crossEnd' + ')');
-      svgPath.attr('marker-start', 'url(' + url + '#' + 'crossStart' + ')');
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');
      break;
    case 'arrow_point':
-      svgPath.attr('marker-end', 'url(' + url + '#' + 'pointEnd' + ')');
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
      break;
    case 'double_arrow_point':
-      svgPath.attr('marker-end', 'url(' + url + '#' + 'pointEnd' + ')');
-      svgPath.attr('marker-start', 'url(' + url + '#' + 'pointStart' + ')');
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');
+      break;
+    case 'arrow_barb':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')');
+      break;
+    case 'double_arrow_barb':
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barnEnd' + ')');
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');
      break;
    case 'arrow_circle':
-      svgPath.attr('marker-end', 'url(' + url + '#' + 'circleEnd' + ')');
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
      break;
    case 'double_arrow_circle':
-      svgPath.attr('marker-end', 'url(' + url + '#' + 'circleEnd' + ')');
-      svgPath.attr('marker-start', 'url(' + url + '#' + 'circleStart' + ')');
+      svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');
+      svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');
      break;
    default:
  }
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@@ -12,8 +12,8 @@ const translateClusterId = id => {
  return id;
 };

-export const render = (elem, graph, markers) => {
-  insertMarkers(elem, markers);
+export const render = (elem, graph, markers, diagramtype, id) => {
+  insertMarkers(elem, markers, diagramtype, id);
  clusterDb = {};
  clearNodes();
  clearEdges();
@@ -88,7 +88,7 @@ export const render = (elem, graph, markers) => {
    const edge = graph.edge(e);
    logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);

-    insertEdge(edgePaths, edge, clusterDb);
+    insertEdge(edgePaths, edge, clusterDb, diagramtype);
    positionEdgeLabel(edge);
  });
 };
--- a/src/dagre-wrapper/markers.js
+++ b/src/dagre-wrapper/markers.js
@@ -2,18 +2,18 @@
 * Setup arrow head and define the marker. The result is appended to the svg.
 */
 // Only add the number of markers that the diagram needs
-const insertMarkers = (elem, markerArray) => {
+const insertMarkers = (elem, markerArray, type, id) => {
  markerArray.forEach(markerName => {
-    markers[markerName](elem);
+    markers[markerName](elem, type, id);
  });
 };

-const extension = elem => {
+const extension = (elem, type, id) => {
  elem
    .append('defs')
    .append('marker')
    .attr('id', 'extensionStart')
-    .attr('class', 'extension')
+    .attr('class', 'extension ' + type)
    .attr('refX', 0)
    .attr('refY', 7)
    .attr('markerWidth', 190)
@@ -25,7 +25,8 @@ const extension = elem => {
  elem
    .append('defs')
    .append('marker')
-    .attr('id', 'extensionEnd')
+    .attr('id', 'extensionEnd ' + type)
+    .attr('class', 'extension ' + type)
    .attr('refX', 19)
    .attr('refY', 7)
    .attr('markerWidth', 20)
@@ -35,12 +36,12 @@ const extension = elem => {
    .attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead
 };

-const composition = elem => {
+const composition = (elem, type, id) => {
  elem
    .append('defs')
    .append('marker')
    .attr('id', 'compositionStart')
-    .attr('class', 'extension')
+    .attr('class', 'extension ' + type)
    .attr('refX', 0)
    .attr('refY', 7)
    .attr('markerWidth', 190)
@@ -53,6 +54,7 @@ const composition = elem => {
    .append('defs')
    .append('marker')
    .attr('id', 'compositionEnd')
+    .attr('class', 'extension ' + type)
    .attr('refX', 19)
    .attr('refY', 7)
    .attr('markerWidth', 20)
@@ -61,12 +63,12 @@ const composition = elem => {
    .append('path')
    .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
 };
-const aggregation = elem => {
+const aggregation = (elem, type, id) => {
  elem
    .append('defs')
    .append('marker')
    .attr('id', 'aggregationStart')
-    .attr('class', 'extension')
+    .attr('class', 'extension ' + type)
    .attr('refX', 0)
    .attr('refY', 7)
    .attr('markerWidth', 190)
@@ -79,6 +81,7 @@ const aggregation = elem => {
    .append('defs')
    .append('marker')
    .attr('id', 'aggregationEnd')
+    .attr('class', type)
    .attr('refX', 19)
    .attr('refY', 7)
    .attr('markerWidth', 20)
@@ -87,12 +90,12 @@ const aggregation = elem => {
    .append('path')
    .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
 };
-const dependency = elem => {
+const dependency = (elem, type, id) => {
  elem
    .append('defs')
    .append('marker')
    .attr('id', 'dependencyStart')
-    .attr('class', 'extension')
+    .attr('class', 'extension ' + type)
    .attr('refX', 0)
    .attr('refY', 7)
    .attr('markerWidth', 190)
@@ -105,6 +108,7 @@ const dependency = elem => {
    .append('defs')
    .append('marker')
    .attr('id', 'dependencyEnd')
+    .attr('class', type)
    .attr('refX', 19)
    .attr('refY', 7)
    .attr('markerWidth', 20)
@@ -113,10 +117,11 @@ const dependency = elem => {
    .append('path')
    .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
 };
-const point = elem => {
+const point = (elem, type, id) => {
  elem
    .append('marker')
-    .attr('id', 'pointEnd')
+    .attr('id', type + '-pointEnd')
+    .attr('class', type)
    .attr('viewBox', '0 0 10 10')
    .attr('refX', 10)
    .attr('refY', 5)
@@ -126,12 +131,13 @@ const point = elem => {
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 0 0 L 10 5 L 0 10 z')
-    .attr('class', 'arrowheadPath')
+    .attr('class', 'arrowMarkerPath')
    .style('stroke-width', 1)
    .style('stroke-dasharray', '1,0');
  elem
    .append('marker')
-    .attr('id', 'pointStart')
+    .attr('id', type + '-pointStart')
+    .attr('class', type)
    .attr('viewBox', '0 0 10 10')
    .attr('refX', 0)
    .attr('refY', 5)
@@ -141,14 +147,15 @@ const point = elem => {
    .attr('orient', 'auto')
    .append('path')
    .attr('d', 'M 0 5 L 10 10 L 10 0 z')
-    .attr('class', 'arrowheadPath')
+    .attr('class', 'arrowMarkerPath')
    .style('stroke-width', 1)
    .style('stroke-dasharray', '1,0');
 };
-const circle = elem => {
+const circle = (elem, type, id) => {
  elem
    .append('marker')
    .attr('id', 'circleEnd')
+    .attr('class', type)
    .attr('viewBox', '0 0 10 10')
    .attr('refX', 11)
    .attr('refY', 5)
@@ -160,13 +167,14 @@ const circle = elem => {
    .attr('cx', '5')
    .attr('cy', '5')
    .attr('r', '5')
-    .attr('class', 'arrowheadPath')
+    .attr('class', 'arrowMarkerPath')
    .style('stroke-width', 1)
    .style('stroke-dasharray', '1,0');

  elem
    .append('marker')
    .attr('id', 'circleStart')
+    .attr('class', type)
    .attr('viewBox', '0 0 10 10')
    .attr('refX', -1)
    .attr('refY', 5)
@@ -178,14 +186,15 @@ const circle = elem => {
    .attr('cx', '5')
    .attr('cy', '5')
    .attr('r', '5')
-    .attr('class', 'arrowheadPath')
+    .attr('class', 'arrowMarkerPath')
    .style('stroke-width', 1)
    .style('stroke-dasharray', '1,0');
 };
-const cross = elem => {
+const cross = (elem, type, id) => {
  elem
    .append('marker')
    .attr('id', 'crossEnd')
+    .attr('class', type)
    .attr('viewBox', '0 0 11 11')
    .attr('refX', 12)
    .attr('refY', 5.2)
@@ -196,13 +205,14 @@ const cross = elem => {
    .append('path')
    .attr('stroke', 'black')
    .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
-    .attr('class', 'arrowheadPath')
+    .attr('class', 'arrowMarkerPath')
    .style('stroke-width', 2)
    .style('stroke-dasharray', '1,0');

  elem
    .append('marker')
    .attr('id', 'crossStart')
+    .attr('class', type)
    .attr('viewBox', '0 0 11 11')
    .attr('refX', -1)
    .attr('refY', 5.2)
@@ -213,11 +223,59 @@ const cross = elem => {
    .append('path')
    .attr('stroke', 'black')
    .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
-    .attr('class', 'arrowheadPath')
+    .attr('class', 'arrowMarkerPath')
    .style('stroke-width', 2)
    .style('stroke-dasharray', '1,0');
 };
+const barb = (elem, type, id) => {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', type + '-barbEnd')
+    .attr('refX', 19)
+    .attr('refY', 7)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 14)
+    .attr('markerUnits', 0)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');

+  //   .append('marker')
+  //   .attr('id', 'barbEnd')
+  //   .attr('class', type)
+  //   .attr('viewBox', '0 0 11 11')
+  //   .attr('refX', 12)
+  //   .attr('refY', 5.2)
+  //   .attr('markerUnits', 'strokeWidth')
+  //   .attr('markerWidth', 7)
+  //   .attr('markerHeight', 7)
+  //   .attr('orient', 'auto')
+  //   .append('path')
+  //   .attr('stroke', 'black')
+  //   .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
+  //   .attr('class', 'arrowMarkerPath')
+  //   .style('stroke-width', 2)
+  //   .style('stroke-dasharray', '1,0');
+
+  // elem
+  //   .append('marker')
+  //   .attr('id', 'barbStart')
+  //   .attr('class', type)
+  //   .attr('viewBox', '0 0 11 11')
+  //   .attr('refX', -1)
+  //   .attr('refY', 5.2)
+  //   .attr('markerUnits', 'strokeWidth')
+  //   .attr('markerWidth', 7)
+  //   .attr('markerHeight', 7)
+  //   .attr('orient', 'auto')
+  //   .append('path')
+  //   .attr('stroke', 'black')
+  //   .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
+  //   .attr('class', 'arrowMarkerPath')
+  //   .style('stroke-width', 2)
+  //   .style('stroke-dasharray', '1,0');
+};
 // TODO rename the class diagram markers to something shape descriptive and semanitc free
 const markers = {
  extension,
@@ -226,6 +284,7 @@ const markers = {
  dependency,
  point,
  circle,
-  cross
+  cross,
+  barb
 };
 export default insertMarkers;
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -375,6 +375,34 @@ const start = (parent, node) => {

  return shapeSvg;
 };
+const end = (parent, node) => {
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', 'node default')
+    .attr('id', node.id);
+  const innerCircle = shapeSvg.insert('circle', ':first-child');
+  const circle = shapeSvg.insert('circle', ':first-child');
+
+  circle
+    .attr('class', 'state-start')
+    .attr('r', 7)
+    .attr('width', 14)
+    .attr('height', 14);
+
+  innerCircle
+    .attr('class', 'state-end')
+    .attr('r', 5)
+    .attr('width', 10)
+    .attr('height', 10);
+
+  updateNodeBounds(node, circle);
+
+  node.intersect = function(point) {
+    return intersect.circle(node, point);
+  };
+
+  return shapeSvg;
+};

 const shapes = {
  question,
@@ -390,7 +418,7 @@ const shapes = {
  rect_right_inv_arrow,
  cylinder,
  start,
-  end: start
+  end
 };

 let nodeElems = {};
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -350,7 +350,7 @@ export const draw = function(text, id) {

  // Run the renderer. This is what draws the final graph.
  const element = d3.select('#' + id + ' g');
-  render(element, g, ['point', 'circle', 'cross']);
+  render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
  dagre.layout(g);

  element.selectAll('g.node').attr('title', function() {
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@@ -71,10 +71,8 @@ const setupNode = (g, parent, node) => {
      shape: nodeDb[node.id].shape,
      label: node.id,
      labelText: nodeDb[node.id].description,
-      // label: nodeDb[node.id].description || node.id,
-      // labelText: nodeDb[node.id].description || node.id,
-      rx: 0,
-      ry: 0,
+      rx: 5,
+      ry: 5,
      class: 'default', //classStr,
      style: '', //styles.style,
      id: node.id,
@@ -107,28 +105,17 @@ const setupDoc = (g, parent, doc) => {
      setupNode(g, parent, item.state2);
      const edgeData = {
        arrowhead: 'normal',
-        arrowType: 'arrow_point',
+        arrowType: 'arrow_barb',
        style: 'fill:none',
        labelStyle: '',
        arrowheadStyle: 'fill: #333',
        labelpos: 'c',
        labelType: 'text',
-        label: '',
-        // curve: d3.curveNatural,
-        curve: d3.curveStep
-        // curve: d3.curveMonotoneX
+        label: ''
      };
      let startId = item.state1.id;
      let endId = item.state2.id;

-      // if (parent && startId === '[*]') {
-      //   startId = parent.id + '_start';
-      // }
-
-      // if (parent && endId === '[*]') {
-      //   startId = parent.id + '_end';
-      // }
-
      g.setEdge(startId, endId, edgeData, cnt);
      cnt++;
    }
@@ -141,7 +128,7 @@ const setupDoc = (g, parent, doc) => {
 * @param id
 */
 export const draw = function(text, id) {
-  logger.trace('Drawing state diagram (v2)');
+  logger.info('Drawing state diagram (v2)', id);
  stateDb.clear();
  const parser = state.parser;
  parser.yy = stateDb;
@@ -188,30 +175,48 @@ export const draw = function(text, id) {

  // Run the renderer. This is what draws the final graph.
  const element = d3.select('#' + id + ' g');
-  render(element, g, ['point', 'circle', 'cross']);
+  render(element, g, ['barb'], 'statediagram', id);

  const padding = 8;
-  const svgBounds = svg.node().getBBox();
-  const width = svgBounds.width + padding * 2;
-  const height = svgBounds.height + padding * 2;
-  logger.debug(
-    `new ViewBox 0 0 ${width} ${height}`,
-    `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
+  // const svgBounds = svg.node().getBBox();
+  // const width = svgBounds.width + padding * 2;
+  // const height = svgBounds.height + padding * 2;
+  // logger.debug(
+  //   `new ViewBox 0 0 ${width} ${height}`,
+  //   `translate(${padding + g._label.marginx}, ${padding + g._label.marginy})`
+  // );
+
+  // if (conf.useMaxWidth) {
+  //   svg.attr('width', '100%');
+  //   svg.attr('style', `max-width: ${width}px;`);
+  // } else {
+  //   svg.attr('height', height);
+  //   svg.attr('width', width);
+  // }
+
+  // svg.attr('viewBox', `0 0 ${width} ${height}`);
+  // svg
+  //   .select('g')
+  //   .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
+
+  const bounds = svg.node().getBBox();
+
+  const width = bounds.width + padding * 2;
+  const height = bounds.height + padding * 2;
+
+  // diagram.attr('height', '100%');
+  // diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
+  // diagram.attr('height', height);
+
+  // Zoom in a bit
+  svg.attr('width', width * 1.75);
+  svg.attr('class', 'statediagram');
+  // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
+  svg.attr(
+    'viewBox',
+    `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
  );

-  if (conf.useMaxWidth) {
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
-
-  svg.attr('viewBox', `0 0 ${width} ${height}`);
-  svg
-    .select('g')
-    .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
-
  // Add label rects for non html labels
  if (!conf.htmlLabels) {
    const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
--- a/src/themes/state.scss
+++ b/src/themes/state.scss
@@ -71,4 +71,12 @@ g.stateGroup line {
 .node circle.state-start {
  fill: black;
  stroke: black;
+}
+.node circle.state-end {
+  fill: black;
+  stroke: white;
+  stroke-width: 1.5
+}
+#statediagram-barbEnd {
+  fill: $nodeBorder
 }