mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #3883 from mermaid-js/3882_edge_labels 

3882 edge labels
This commit is contained in:
Knut Sveidqvist 2022-12-05 08:15:15 +01:00 committed by GitHub
parent abc6ee049d 4124d186d0
commit c5653156d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
cypress/platform/knsv2.html
View File

@ -56,29 +56,30 @@
<body>
<div>Security check</div>
<pre id="diagram" class="mermaid">
graph LR
subgraph external
inside
flowchart LR
%% Actors
A
subgraph Sub
B --> C
end
outside --> external
%% Accusations
A --L --> Sub
%% Offense
B --> A
</pre>
<pre id="diagram" class="mermaid">
mindmap
root
child1((Circle))
grandchild 1
grandchild 2
child2(Round rectangle)
grandchild 3
grandchild 4
child3[Square]
grandchild 5
::icon(mdi mdi-fire)
gc6((grand<br/>child 6))
::icon(mdi mdi-fire)
gc7((grand<br/>grand<br/>child 8))
</pre>
<pre id="diagram" class="mermaid">
stateDiagram-v2
[*] --> S1
S1 --> S2: long line using<br/>should work
S1 --> S3: long line using <br>should work
S1 --> S4: long line using \\nshould work
</pre>
<pre id="diagram" class="mermaid2">
gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue)
dateFormat YYYY-MM-DD
@ -103,7 +104,7 @@ mindmap
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'base',
theme: 'default',
startOnLoad: true,
logLevel: 0,
flowchart: {
@ -114,10 +115,6 @@ mindmap
useMaxWidth: false,
},
useMaxWidth: false,
lazyLoadedDiagrams: [
'./mermaid-mindmap-detector.esm.mjs',
'./mermaid-example-diagram-detector.esm.mjs',
],
});
function callback() {
alert('It worked');

8
packages/mermaid/src/dagre-wrapper/clusters.js
View File

@ -59,11 +59,9 @@ const rect = (parent, node) => {
// Center the label
label.attr(
'transform',
'translate(' +
(node.x - bbox.width / 2) +
', ' +
(node.y - node.height / 2 + node.padding / 3) +
')'
// This puts the labal on top of the box instead of inside it
// 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')'
'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
);
const rectBox = rect.node().getBBox();

20
packages/mermaid/src/dagre-wrapper/edges.js
View File

@ -130,9 +130,21 @@ export const positionEdgeLabel = (edge, paths) => {
if (path) {
// // debugger;
const pos = utils.calcLabelPosition(path);
log.info('Moving label from (', x, ',', y, ') to (', pos.x, ',', pos.y, ') abc78');
// x = pos.x;
// y = pos.y;
log.info(
'Moving label ' + edge.label + ' from (',
x,
',',
y,
') to (',
pos.x,
',',
pos.y,
') abc78'
);
if (paths.updatedPath) {
x = pos.x;
y = pos.y;
}
}
el.attr('transform', 'translate(' + x + ', ' + y + ')');
}
@ -463,7 +475,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
.attr('style', edge.style);
// DEBUG code, adds a red circle at each edge coordinate
// edge.points.forEach(point => {
// edge.points.forEach((point) => {
// elem
// .append('circle')
// .style('stroke', 'red')