Fix for arrow cross

cypress/platform/knsv-recursive.html

@@ -124,9 +124,20 @@ config:
   theme: redux
   layout: dagre
 ---
+flowchart LR
+    A --> B
+</pre
+      >
+      <pre id="diagram4" class="mermaid2">
+---
+config:
+  look: neo
+  theme: redux
+  layout: elk
+---
 flowchart TD
-    A("ss") --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
+    A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
-    n1 --x n4["Diamond"]
+    n1 --x n4["Rounded"]
     n2 --o n5["Hexagon"]
     n3 --> n6["Parallelogram"]
     n5 o--o n7["Trapezoid"]
@@ -136,18 +147,21 @@ flowchart TD
     n7 --> n11["Pine"]
     n9 --> n12["Peach"]
     n2@{ shape: rounded}
-    n4@{ shape: diam}
+    n4@{ shape: rounded}
     n5@{ shape: hex}
     n6@{ shape: lean-l}
     n7@{ shape: trap-b}
     n8@{ shape: lean-r}
+
      n10:::Rose
      n11:::Pine
      n12:::Peach
     classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
     classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
     classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
-
+    n10 --x End
+    n11 --x End
+    n12 --x End
 
     </pre
       >

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -3,7 +3,11 @@ import { evaluate } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import { createText } from '../createText.js';
 import utils from '../../utils.js';
-import { getLineFunctionsWithOffset, markerOffsets } from '../../utils/lineWithOffset.js';
+import {
+  getLineFunctionsWithOffset,
+  markerOffsets,
+  markerOffsets2,
+} from '../../utils/lineWithOffset.js';
 import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
 import { curveBasis, curveLinear, curveCardinal, line, select } from 'd3';
 import rough from 'roughjs';
@@ -558,6 +562,25 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
       .attr('id', edge.id)
       .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
       .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
+    const len = svgPath.node().getTotalLength();
+    const oValueS = markerOffsets2[edge.arrowTypeStart] || 0;
+    const oValueE = markerOffsets2[edge.arrowTypeEnd] || 0;
+
+    // const mOffset = `stroke-dasharray: ${len} ${oValueS + oValueE};stroke-dashoffset: ${oValueS + oValueE}; `;
+    // console.log('APA23 edge', edge, oValueS, oValueE, mOffset);
+
+    // svgPath.attr('style', mOffset + svgPath.attr('style'));
+
+    // const dashArray = `${oValueS} ${len - oValueS - oValueE} ${oValueE}`;
+
+    // const mOffset = `stroke-dasharray: ${dashArray}; stroke-dashoffset: 14; `;
+
+    // #3
+    const dashArray = `0 ${oValueS} ${len - oValueS - oValueE} ${oValueE}`;
+
+    // No offset needed because we already start with a zero-length dash that effectively sets us up for a gap at the start.
+    const mOffset = `stroke-dasharray: ${dashArray}; stroke-dashoffset: 0;`;
+    svgPath.attr('style', mOffset + svgPath.attr('style'));
   }
 
   // MC Special
@@ -565,6 +588,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   svgPath.attr('data-et', 'edge');
   svgPath.attr('data-id', edge.id);
   svgPath.attr('data-points', pointsStr);
+
   // DEBUG code, adds a red circle at each edge coordinate
   // cornerPoints.forEach((point) => {
   //   elem

packages/mermaid/src/rendering-util/rendering-elements/markers.js

@@ -231,36 +231,33 @@ const cross = (elem, type, id) => {
     .append('marker')
     .attr('id', id + '_' + type + '-crossEnd')
     .attr('class', 'marker cross ' + type)
-    .attr('viewBox', '0 0 11 11')
+    .attr('viewBox', '0 0 15 15')
-    .attr('refX', 12)
+    .attr('refX', 17.7)
-    .attr('refY', 5.2)
+    .attr('refY', 7.5)
     .attr('markerUnits', 'userSpaceOnUse')
-    .attr('markerWidth', 11)
+    .attr('markerWidth', 12)
-    .attr('markerHeight', 11)
+    .attr('markerHeight', 12)
     .attr('orient', 'auto')
     .append('path')
-    // .attr('stroke', 'black')
+    .attr('d', 'M 1,1 L 14,14 M 1,14 L 14,1')
-    .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
     .attr('class', 'arrowMarkerPath')
-    .style('stroke-width', 2)
+    .style('stroke-width', 2.5);
-    .style('stroke-dasharray', '1,0');
 
   elem
     .append('marker')
     .attr('id', id + '_' + type + '-crossStart')
     .attr('class', 'marker cross ' + type)
-    .attr('viewBox', '0 0 11 11')
+    .attr('viewBox', '0 0 15 15')
-    .attr('refX', -1)
+    .attr('refX', -3.5)
-    .attr('refY', 5.2)
+    .attr('refY', 7.5)
     .attr('markerUnits', 'userSpaceOnUse')
-    .attr('markerWidth', 11)
+    .attr('markerWidth', 12)
-    .attr('markerHeight', 11)
+    .attr('markerHeight', 12)
     .attr('orient', 'auto')
     .append('path')
-    // .attr('stroke', 'black')
+    .attr('d', 'M 1,1 L 14,14 M 1,14 L 14,1')
-    .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
     .attr('class', 'arrowMarkerPath')
-    .style('stroke-width', 2)
+    .style('stroke-width', 2.5)
     .style('stroke-dasharray', '1,0');
 };
 const barb = (elem, type, id) => {

packages/mermaid/src/utils/lineWithOffset.ts

@@ -10,6 +10,20 @@ export const markerOffsets = {
   dependency: 6,
   lollipop: 13.5,
   arrow_point: 4,
+  //arrow_cross: 24,
+} as const;
+
+// We need to draw the lines a bit shorter to avoid drawing
+// under any transparent markers.
+// The offsets are calculated from the markers' dimensions.
+export const markerOffsets2 = {
+  aggregation: 18,
+  extension: 18,
+  composition: 18,
+  dependency: 6,
+  lollipop: 13.5,
+  arrow_point: 4,
+  arrow_cross: 12.5,
 } as const;
 
 /**