Merge pull request #4169 from mermaid-js/4168_elk_diamon_subgraph

Elk layout for flowcharts: Incorrect placement of edges when using diamonds in subgraphs
This commit is contained in:
Knut Sveidqvist
2023-03-01 13:44:08 +01:00
committed by GitHub
3 changed files with 13 additions and 6 deletions

View File

@@ -1,6 +1,6 @@
{ {
"name": "mermaid", "name": "mermaid",
"version": "10.0.0", "version": "10.0.1-rc.4",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module", "type": "module",
"module": "./dist/mermaid.core.mjs", "module": "./dist/mermaid.core.mjs",

View File

@@ -371,6 +371,10 @@ const getEdgeStartEndPoint = (edge, dir) => {
let source = edge.start; let source = edge.start;
let target = edge.end; let target = edge.end;
// Save the original source and target
const sourceId = source;
const targetId = target;
const startNode = nodeDb[source]; const startNode = nodeDb[source];
const endNode = nodeDb[target]; const endNode = nodeDb[target];
@@ -387,7 +391,7 @@ const getEdgeStartEndPoint = (edge, dir) => {
} }
// Add the edge to the graph // Add the edge to the graph
return { source, target }; return { source, target, sourceId, targetId };
}; };
/** /**
@@ -530,14 +534,17 @@ export const addEdges = function (edges, diagObj, graph, svg) {
const labelEl = insertEdgeLabel(labelsEl, edgeData); const labelEl = insertEdgeLabel(labelsEl, edgeData);
// calculate start and end points of the edge // calculate start and end points of the edge, note that the source and target
const { source, target } = getEdgeStartEndPoint(edge, dir); // can be modified for shapes that have ports
const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
log.debug('abc78 source and target', source, target); log.debug('abc78 source and target', source, target);
// Add the edge to the graph // Add the edge to the graph
graph.edges.push({ graph.edges.push({
id: 'e' + edge.start + edge.end, id: 'e' + edge.start + edge.end,
sources: [source], sources: [source],
targets: [target], targets: [target],
sourceId,
targetId,
labelEl: labelEl, labelEl: labelEl,
labels: [ labels: [
{ {
@@ -698,7 +705,7 @@ const calcOffset = function (src, dest, parentLookupDb) {
}; };
const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) { const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) {
const offset = calcOffset(edge.sources[0], edge.targets[0], parentLookupDb); const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb);
const src = edge.sections[0].startPoint; const src = edge.sections[0].startPoint;
const dest = edge.sections[0].endPoint; const dest = edge.sections[0].endPoint;

View File

@@ -4,7 +4,7 @@ import { log } from '../../logger';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { setupGraphViewbox } from '../../setupGraphViewbox'; import { setupGraphViewbox } from '../../setupGraphViewbox';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import cytoscape from 'cytoscape/dist/cytoscape.esm.js'; import cytoscape from 'cytoscape/dist/cytoscape.umd.js';
import coseBilkent from 'cytoscape-cose-bilkent'; import coseBilkent from 'cytoscape-cose-bilkent';
import * as db from './mindmapDb'; import * as db from './mindmapDb';