#3358 Reviving arrow heads after merging develop

mermaid-js · Jan 19, 2024 · d96425d · d96425d
1 parent b4dece8
commit d96425d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -65,12 +65,12 @@
   <body>
     <pre id="diagram" class="mermaid">
 block-beta
-  A space:2 B
-  A-- "X" -->B
+  a space:2 c
+  a-- "b" --> c
     </pre>
     <pre id="diagram" class="mermaid">
 flowchart LR
-  A-- "X" -->B
+  X-- "y" -->z
     </pre>
     <pre id="diagram" class="mermaid2">
 block-beta

diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -134,7 +134,7 @@ function setTerminalWidth(fo, value) {
 }
 
 export const positionEdgeLabel = (edge, paths) => {
-  log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
+  log.info('Moving label abc88 ', edge.id, edge.label, edgeLabels[edge.id], paths);
   let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
   if (edge.label) {
     const el = edgeLabels[edge.id];
@@ -152,7 +152,7 @@ export const positionEdgeLabel = (edge, paths) => {
         pos.x,
         ',',
         pos.y,
-        ') abc78'
+        ') abc88'
       );
       if (paths.updatedPath) {
         x = pos.x;
@@ -376,7 +376,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
   let pointsHasChanged = false;
   const tail = graph.node(e.v);
   var head = graph.node(e.w);
-  log.info('abc88 InsertEdge (head & tail): ', e.v, head, ' --- ', e.w, tail);
+  log.info('abc88 InsertEdge (head & tail) fin: ', e.v, head, ' --- ', e.w, tail);
 
   if (head?.intersect && tail?.intersect) {
     points = points.slice(1, edge.points.length - 1);

diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -58,7 +58,8 @@ export const draw = async function (
 
   // Add the marker definitions to the svg as marker tags
   // insertMarkers(svg, markers, diagObj.type, diagObj.arrowMarkerAbsolute);
-  insertMarkers(svg, markers, diagObj.type, true);
+  // insertMarkers(svg, markers, diagObj.type, true);
+  insertMarkers(svg, markers, diagObj.type, id);
 
   const bl = db.getBlocks();
   const blArr = db.getBlocksFlat();
@@ -69,7 +70,7 @@ export const draw = async function (
   const bounds = layout(db);
   // log.debug('Here be blocks', bl);
   await insertBlocks(nodes, bl, db);
-  await insertEdges(nodes, edges, blArr, db);
+  await insertEdges(nodes, edges, blArr, db, id);
 
   // log.debug('Here', bl);
 

diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -1,6 +1,6 @@
 import { getStylesFromArray } from '../../utils.js';
 import { insertNode, positionNode } from '../../dagre-wrapper/nodes.js';
-import { insertEdge, insertEdgeLabel } from '../../dagre-wrapper/edges.js';
+import { insertEdge, insertEdgeLabel, positionEdgeLabel } from '../../dagre-wrapper/edges.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { getConfig } from '../../config.js';
 import type { ContainerElement } from 'd3';
@@ -185,7 +185,8 @@ export async function insertEdges(
   elem: ContainerElement,
   edges: Block[],
   blocks: Block[],
-  db: BlockDB
+  db: BlockDB,
+  id: string
 ) {
   const g = new graphlib.Graph({
     multigraph: true,
@@ -238,7 +239,8 @@ export async function insertEdges(
           },
           undefined,
           'block',
-          g
+          g,
+          id
         );
         if (edge.label) {
           await insertEdgeLabel(elem, {
@@ -250,6 +252,12 @@ export async function insertEdges(
             points,
             classes: 'edge-thickness-normal edge-pattern-solid flowchart-link LS-a1 LE-b1',
           });
+          await positionEdgeLabel(
+            { ...edge, x: points[1].x, y: points[1].y },
+            {
+              originalPath: points,
+            }
+          );
         }
       }
     }