Merge pull request #4788 from mermaid-js/sidv/classEdgeMarkers

fix: Allow hollow markers on edges

packages/mermaid/src/dagre-wrapper/edges.js

@@ -368,7 +368,20 @@ const cutPathAtIntersect = (_points, boundryNode) => {
   return points;
 };
 
-//(edgePaths, e, edge, clusterDb, diagramtype, graph)
+/**
+ * Calculate the deltas and angle between two points
+ * @param {{x: number, y:number}} point1
+ * @param {{x: number, y:number}} point2
+ * @returns {{angle: number, deltaX: number, deltaY: number}}
+ */
+function calculateDeltaAndAngle(point1, point2) {
+  const [x1, y1] = [point1.x, point1.y];
+  const [x2, y2] = [point2.x, point2.y];
+  const deltaX = x2 - x1;
+  const deltaY = y2 - y1;
+  return { angle: Math.atan(deltaY / deltaX), deltaX, deltaY };
+}
+
 export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph) {
   let points = edge.points;
   let pointsHasChanged = false;
@@ -435,22 +448,62 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
   const lineData = points.filter((p) => !Number.isNaN(p.y));
 
   // This is the accessor function we talked about above
-  let curve;
+  let curve = curveBasis;
   // Currently only flowcharts get the curve from the settings, perhaps this should
   // be expanded to a common setting? Restricting it for now in order not to cause side-effects that
   // have not been thought through
-  if (diagramType === 'graph' || diagramType === 'flowchart') {
-    curve = edge.curve || curveBasis;
-  } else {
-    curve = curveBasis;
+  if (edge.curve && (diagramType === 'graph' || diagramType === 'flowchart')) {
+    curve = edge.curve;
   }
-  // curve = curveLinear;
+
+  // We need to draw the lines a bit shorter to avoid drawing
+  // under any transparent markers.
+  // The offsets are calculated from the markers' dimensions.
+  const markerOffsets = {
+    aggregation: 18,
+    extension: 18,
+    composition: 18,
+    dependency: 6,
+    lollipop: 13.5,
+    arrow_point: 5.3,
+  };
+
   const lineFunction = line()
-    .x(function (d) {
-      return d.x;
+    .x(function (d, i, data) {
+      let offset = 0;
+      if (i === 0 && Object.hasOwn(markerOffsets, edge.arrowTypeStart)) {
+        // Handle first point
+        // Calculate the angle and delta between the first two points
+        const { angle, deltaX } = calculateDeltaAndAngle(data[0], data[1]);
+        // Calculate the offset based on the angle and the marker's dimensions
+        offset = markerOffsets[edge.arrowTypeStart] * Math.cos(angle) * (deltaX >= 0 ? 1 : -1) || 0;
+      } else if (i === data.length - 1 && Object.hasOwn(markerOffsets, edge.arrowTypeEnd)) {
+        // Handle last point
+        // Calculate the angle and delta between the last two points
+        const { angle, deltaX } = calculateDeltaAndAngle(
+          data[data.length - 1],
+          data[data.length - 2]
+        );
+        offset = markerOffsets[edge.arrowTypeEnd] * Math.cos(angle) * (deltaX >= 0 ? 1 : -1) || 0;
+      }
+      return d.x + offset;
     })
-    .y(function (d) {
-      return d.y;
+    .y(function (d, i, data) {
+      // Same handling as X above
+      let offset = 0;
+      if (i === 0 && Object.hasOwn(markerOffsets, edge.arrowTypeStart)) {
+        const { angle, deltaY } = calculateDeltaAndAngle(data[0], data[1]);
+        offset =
+          markerOffsets[edge.arrowTypeStart] * Math.abs(Math.sin(angle)) * (deltaY >= 0 ? 1 : -1);
+      } else if (i === data.length - 1 && Object.hasOwn(markerOffsets, edge.arrowTypeEnd)) {
+        const { angle, deltaY } = calculateDeltaAndAngle(
+          data[data.length - 1],
+          data[data.length - 2]
+        );
+        offset =
+          markerOffsets[edge.arrowTypeEnd] * Math.abs(Math.sin(angle)) * (deltaY >= 0 ? 1 : -1);
+      }
+      return d.y + offset;
     })
     .curve(curve);
 

packages/mermaid/src/dagre-wrapper/index.js

@@ -155,9 +155,9 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
   clearClusters();
   clearGraphlib();
 
-  log.warn('Graph at first:', graphlibJson.write(graph));
+  log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
   adjustClustersAndEdges(graph);
-  log.warn('Graph after:', graphlibJson.write(graph));
+  log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
   // log.warn('Graph ever  after:', graphlibJson.write(graph.node('A').graph));
   await recursiveRender(elem, graph, diagramtype);
 };

packages/mermaid/src/dagre-wrapper/markers.js

@@ -16,7 +16,7 @@ const extension = (elem, type, id) => {
     .append('marker')
     .attr('id', type + '-extensionStart')
     .attr('class', 'marker extension ' + type)
-    .attr('refX', 0)
+    .attr('refX', 18)
     .attr('refY', 7)
     .attr('markerWidth', 190)
     .attr('markerHeight', 240)
@@ -29,7 +29,7 @@ const extension = (elem, type, id) => {
     .append('marker')
     .attr('id', type + '-extensionEnd')
     .attr('class', 'marker extension ' + type)
-    .attr('refX', 19)
+    .attr('refX', 1)
     .attr('refY', 7)
     .attr('markerWidth', 20)
     .attr('markerHeight', 28)
@@ -44,7 +44,7 @@ const composition = (elem, type) => {
     .append('marker')
     .attr('id', type + '-compositionStart')
     .attr('class', 'marker composition ' + type)
-    .attr('refX', 0)
+    .attr('refX', 18)
     .attr('refY', 7)
     .attr('markerWidth', 190)
     .attr('markerHeight', 240)
@@ -57,7 +57,7 @@ const composition = (elem, type) => {
     .append('marker')
     .attr('id', type + '-compositionEnd')
     .attr('class', 'marker composition ' + type)
-    .attr('refX', 19)
+    .attr('refX', 1)
     .attr('refY', 7)
     .attr('markerWidth', 20)
     .attr('markerHeight', 28)
@@ -71,7 +71,7 @@ const aggregation = (elem, type) => {
     .append('marker')
     .attr('id', type + '-aggregationStart')
     .attr('class', 'marker aggregation ' + type)
-    .attr('refX', 0)
+    .attr('refX', 18)
     .attr('refY', 7)
     .attr('markerWidth', 190)
     .attr('markerHeight', 240)
@@ -84,7 +84,7 @@ const aggregation = (elem, type) => {
     .append('marker')
     .attr('id', type + '-aggregationEnd')
     .attr('class', 'marker aggregation ' + type)
-    .attr('refX', 19)
+    .attr('refX', 1)
     .attr('refY', 7)
     .attr('markerWidth', 20)
     .attr('markerHeight', 28)
@@ -98,7 +98,7 @@ const dependency = (elem, type) => {
     .append('marker')
     .attr('id', type + '-dependencyStart')
     .attr('class', 'marker dependency ' + type)
-    .attr('refX', 0)
+    .attr('refX', 6)
     .attr('refY', 7)
     .attr('markerWidth', 190)
     .attr('markerHeight', 240)
@@ -111,7 +111,7 @@ const dependency = (elem, type) => {
     .append('marker')
     .attr('id', type + '-dependencyEnd')
     .attr('class', 'marker dependency ' + type)
-    .attr('refX', 19)
+    .attr('refX', 13)
     .attr('refY', 7)
     .attr('markerWidth', 20)
     .attr('markerHeight', 28)
@@ -125,15 +125,32 @@ const lollipop = (elem, type) => {
     .append('marker')
     .attr('id', type + '-lollipopStart')
     .attr('class', 'marker lollipop ' + type)
-    .attr('refX', 0)
+    .attr('refX', 13)
     .attr('refY', 7)
     .attr('markerWidth', 190)
     .attr('markerHeight', 240)
     .attr('orient', 'auto')
     .append('circle')
     .attr('stroke', 'black')
-    .attr('fill', 'white')
-    .attr('cx', 6)
+    .attr('fill', 'transparent')
+    .attr('cx', 7)
+    .attr('cy', 7)
+    .attr('r', 6);
+
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', type + '-lollipopEnd')
+    .attr('class', 'marker lollipop ' + type)
+    .attr('refX', 1)
+    .attr('refY', 7)
+    .attr('markerWidth', 190)
+    .attr('markerHeight', 240)
+    .attr('orient', 'auto')
+    .append('circle')
+    .attr('stroke', 'black')
+    .attr('fill', 'transparent')
+    .attr('cx', 7)
     .attr('cy', 7)
     .attr('r', 6);
 };
@@ -143,7 +160,7 @@ const point = (elem, type) => {
     .attr('id', type + '-pointEnd')
     .attr('class', 'marker ' + type)
     .attr('viewBox', '0 0 10 10')
-    .attr('refX', 10)
+    .attr('refX', 6)
     .attr('refY', 5)
     .attr('markerUnits', 'userSpaceOnUse')
     .attr('markerWidth', 12)

packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js

@@ -291,8 +291,8 @@ export const adjustClustersAndEdges = (graph, depth) => {
         shape: 'labelRect',
         style: '',
       });
-      const edge1 = JSON.parse(JSON.stringify(edge));
-      const edge2 = JSON.parse(JSON.stringify(edge));
+      const edge1 = structuredClone(edge);
+      const edge2 = structuredClone(edge);
       edge1.label = '';
       edge1.arrowTypeEnd = 'none';
       edge2.label = '';

packages/mermaid/src/diagrams/class/styles.js

@@ -109,25 +109,25 @@ g.classGroup line {
 }
 
 #extensionStart, .extension {
-  fill: ${options.mainBkg} !important;
+  fill: transparent !important;
   stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }
 
 #extensionEnd, .extension {
-  fill: ${options.mainBkg} !important;
+  fill: transparent !important;
   stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }
 
 #aggregationStart, .aggregation {
-  fill: ${options.mainBkg} !important;
+  fill: transparent !important;
   stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }
 
 #aggregationEnd, .aggregation {
-  fill: ${options.mainBkg} !important;
+  fill: transparent !important;
   stroke: ${options.lineColor} !important;
   stroke-width: 1;
 }