marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-25 19:27:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix for edge issue with small corners

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-05-28 15:27:13 +02:00
parent 51bdda0c34
commit 9855bdbaaa
4 changed files with 75 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
cypress/platform/knsv2.html
View File

@@ -80,52 +80,23 @@
init: { init: {
"theme":"base", "theme":"base",
"fontFamily": "Kalam", "fontFamily": "Kalam",
"themeVariables": { "themeVariables":
"background": "#FFFFFF", {
"primaryColor": "#7bdfa7", "background": "#FFFFFF",
"primaryTextColor": "#3c3c3b", "primaryColor": "#7bdfa7",
"secondaryColor": "#642470", "primaryTextColor": "#3c3c3b",
"secondaryTextColor": "#3c3c3b", "secondaryColor": "#642470",
"tertiaryColor": "#1c736D", "secondaryTextColor": "#3c3c3b",
"tertiaryTextColor": "#3c3c3b", "tertiaryColor": "#1c736D",
"noteBkgColor": "#9fd8ef", "tertiaryTextColor": "#3c3c3b",
"loopTextColor": "#636362", "noteBkgColor": "#9fd8ef",
"labelBoxBkgColor": "#642470", "loopTextColor": "#636362",
"labelBoxBorderColor": "#642470", "labelBoxBkgColor": "#642470",
"labelTextColor": "#d4d4d4", "labelBoxBorderColor": "#642470",
"signalTextColor": "#636362", "labelTextColor": "#d4d4d4",
"signalColor": "#642470" "signalTextColor": "#636362",
} "signalColor": "#642470"
} }
}%%
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
</pre
>
<pre id="diagram" class="mermaid2">
%%{
init: {
"theme":"base",
"fontFamily": "Forth Bold",
"themeVariables": {
"background": "#FFFFFF",
"primaryColor": "#7bdfa7",
"primaryTextColor": "#3c3c3b",
"secondaryColor": "#642470",
"secondaryTextColor": "#3c3c3b",
"tertiaryColor": "#1c736D",
"tertiaryTextColor": "#3c3c3b",
"noteBkgColor": "#9fd8ef",
"loopTextColor": "#636362",
"labelBoxBkgColor": "#642470",
"labelBoxBorderColor": "#642470",
"labelTextColor": "#d4d4d4",
"signalTextColor": "#636362",
"signalColor": "#642470"
}
} }
}%% }%%
sequenceDiagram sequenceDiagram
@@ -137,29 +108,35 @@ sequenceDiagram
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": true} }%% %%{init: {"layout": "dagre", "mergeEdges": true} }%%
stateDiagram stateDiagram
A --> B A: This is A
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": true} }%% %%{init: {"layout": "dagre", "mergeEdges": true} }%%
flowchart flowchart
A --> B(This is B) A --> B(This is B)
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "NETWORK_SIMPLEX"} }%% %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
stateDiagram stateDiagram
State T0 { state if_state &lt;&lt;choice&gt;&gt;
direction LR [*] --> IsPositive
A --> B IsPositive --> if_state
} if_state --> False: if n < 0
State T1 { if_state --> True : if n >= 0
[*] --> NumLockOff </pre
NumLockOff --> NumLockOn : EvNumLockPressed >
NumLockOn --> NumLockOff : EvNumLockPressed <pre id="diagram" class="mermaid">
} %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
stateDiagram
state if_state &lt;&lt;choice&gt;&gt;
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
@@ -250,16 +227,16 @@ stateDiagram-v2
console.error('Mermaid error: ', err); console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'base', // theme: 'base',
handdrawnSeed: 12, handdrawnSeed: 12,
look: 'handdrawn', look: 'handdrawn',
'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre', // layout: 'dagre',
layout: 'elk', // layout: 'elk',
flowchart: { titleTopMargin: 10 }, flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat', // fontFamily: 'Caveat',
// fontFamily: 'Kalam', fontFamily: 'Kalam',
fontFamily: 'courier', // fontFamily: 'courier',
sequence: { sequence: {
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: 'courier', noteFontFamily: 'courier',
@@ -275,10 +252,6 @@ stateDiagram-v2
console.error('In parse error:'); console.error('In parse error:');
console.error(err); console.error(err);
}; };
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
</script> </script>
</body> </body>
</html> </html>

7
packages/mermaid-layout-elk/src/render.ts
View File

@@ -468,6 +468,13 @@ export const render = async (data4Layout, svg, element, algorithm) => {
'elk.layered.mergeEdges': data4Layout.config.mergeEdges, 'elk.layered.mergeEdges': data4Layout.config.mergeEdges,
'elk.direction': 'DOWN', 'elk.direction': 'DOWN',
'spacing.baseValue': 30, 'spacing.baseValue': 30,
'spacing.nodeNode': 40,
'spacing.nodeNodeBetweenLayers': 45,
// 'spacing.edgeNode': 40,
// 'spacing.edgeNodeBetweenLayers': 30,
// 'spacing.edgeEdge': 30,
// 'spacing.edgeEdgeBetweenLayers': 40,
// 'spacing.nodeSelfLoop': 50,
}, },
children: [], children: [],
edges: [], edges: [],

45
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@@ -436,34 +436,38 @@ const fixCorners = function (lineData) {
// Find a new point on the line point 5 points back and push it to the new array // Find a new point on the line point 5 points back and push it to the new array
const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5); const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5);
const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5); const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5);
newLineData.push(newPrevPoint);
const xDiff = newNextPoint.x - newPrevPoint.x; const xDiff = newNextPoint.x - newPrevPoint.x;
const yDiff = newNextPoint.y - newPrevPoint.y; const yDiff = newNextPoint.y - newPrevPoint.y;
newLineData.push(newPrevPoint);
const a = Math.sqrt(2) * 2; const a = Math.sqrt(2) * 2;
let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y }; let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y };
if (cornerPoint.x === newPrevPoint.x) { if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) {
// if (yDiff > 0) { console.log(
newCornerPoint = { 'Corner point fixing',
x: xDiff < 0 ? newPrevPoint.x - 5 + a : newPrevPoint.x + 5 - a, Math.abs(nextPoint.x - prevPoint.x),
y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a, Math.abs(nextPoint.y - prevPoint.y)
}; );
// } else { const r = 5;
// newCornerPoint = { x: newPrevPoint.x - a, y: newPrevPoint.y + a }; if (cornerPoint.x === newPrevPoint.x) {
// } newCornerPoint = {
x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,
};
} else {
newCornerPoint = {
x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,
y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a,
};
}
} else { } else {
// if (yDiff > 0) { console.log(
// newCornerPoint = { x: newPrevPoint.x - 5 + a, y: newPrevPoint.y + a }; 'Corner point skipping fixing',
// } else { Math.abs(nextPoint.x - prevPoint.x),
newCornerPoint = { Math.abs(nextPoint.y - prevPoint.y)
x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a, );
y: yDiff < 0 ? newPrevPoint.y - 5 + a : newPrevPoint.y + 5 - a,
};
// }
} }
// newLineData.push(cornerPoint);
newLineData.push(newCornerPoint, newNextPoint); newLineData.push(newCornerPoint, newNextPoint);
} else { } else {
newLineData.push(lineData[i]); newLineData.push(lineData[i]);
@@ -632,6 +636,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
// .attr('cx', point.x) // .attr('cx', point.x)
// .attr('cy', point.y); // .attr('cy', point.y);
// }); // });
// lineData.forEach((point) => { // lineData.forEach((point) => {
// elem // elem
// .append('circle') // .append('circle')

1
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@@ -33,7 +33,6 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {}); const options = userNodeOverrides(node, {});
console.log('rect options: ', options);
const roughNode = const roughNode =
rx || ry rx || ry
? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), options) ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), options)