Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

3882 edge labels #3883

Merged
merged 2 commits into from
Dec 5, 2022
Merged

3882 edge labels #3883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b68fee7
Small fix for issue #3881
knsv Dec 3, 2022
4124d18
Fix for issue #3882 moving the label when the path has been modified
knsv Dec 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
47 changes: 22 additions & 25 deletions cypress/platform/knsv2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -103,7 +104,7 @@
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'base',
theme: 'default',
startOnLoad: true,
logLevel: 0,
flowchart: {
Expand All @@ -114,10 +115,6 @@
useMaxWidth: false,
},
useMaxWidth: false,
lazyLoadedDiagrams: [
'./mermaid-mindmap-detector.esm.mjs',
'./mermaid-example-diagram-detector.esm.mjs',
],
});
function callback() {
alert('It worked');
Expand Down
8 changes: 3 additions & 5 deletions packages/mermaid/src/dagre-wrapper/clusters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
20 changes: 16 additions & 4 deletions packages/mermaid/src/dagre-wrapper/edges.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 + ')');
}
Expand Down Expand Up @@ -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')
Expand Down