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

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

@ -59,11 +59,9 @@ const rect = (parent, node) => {
// Center the label // Center the label
label.attr( label.attr(
'transform', 'transform',
'translate(' + // This puts the labal on top of the box instead of inside it
(node.x - bbox.width / 2) + // 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')'
', ' + 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
(node.y - node.height / 2 + node.padding / 3) +
')'
); );
const rectBox = rect.node().getBBox(); 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) { if (path) {
// // debugger; // // debugger;
const pos = utils.calcLabelPosition(path); const pos = utils.calcLabelPosition(path);
log.info('Moving label from (', x, ',', y, ') to (', pos.x, ',', pos.y, ') abc78'); log.info(
// x = pos.x; 'Moving label ' + edge.label + ' from (',
// y = pos.y; x,
',',
y,
') to (',
pos.x,
',',
pos.y,
') abc78'
);
if (paths.updatedPath) {
x = pos.x;
y = pos.y;
}
} }
el.attr('transform', 'translate(' + x + ', ' + 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); .attr('style', edge.style);
// DEBUG code, adds a red circle at each edge coordinate // DEBUG code, adds a red circle at each edge coordinate
// edge.points.forEach(point => { // edge.points.forEach((point) => {
// elem // elem
// .append('circle') // .append('circle')
// .style('stroke', 'red') // .style('stroke', 'red')