marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 09:20:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

#815 Adding labels to edges

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-12-11 09:24:05 +01:00
parent 0b01c3376d
commit 14f7756fdb
2 changed files with 43 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
cypress/platform/knsv2.html
View File

@@ -55,7 +55,7 @@
</head> </head>
<body> <body>
<div>Security check</div> <div>Security check</div>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
cyto TD cyto TD
%% I could not figure out how to use double quotes in labels in Mermaid %% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU] subgraph ibm[IBM Espresso CPU]
@@ -109,21 +109,10 @@ cyto TD
rtc{{rtc}} rtc{{rtc}}
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid">
cyto LR cyto LR
subgraph TOP B1 --be be--> B2
direction LR B1 --bo bo--> B3
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
B1 --> B2
F --> f1
</pre </pre
> >
inside1 --> inside2 & inside3 & inside4 & inside5 & inside6 a(letter a<br />a) ---> b(letter inside1 --> inside2 & inside3 & inside4 & inside5 & inside6 a(letter a<br />a) ---> b(letter

45
packages/mermaid-flowchart-v3/src/flowRenderer-v3.js
View File

@@ -3,6 +3,7 @@ import { select, line, curveLinear, curveCardinal, curveBasis, selectAll } from
import { log, getConfig, setupGraphViewbox } from './mermaidUtils'; import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
import { insertNode } from '../../mermaid/src/dagre-wrapper/nodes.js'; import { insertNode } from '../../mermaid/src/dagre-wrapper/nodes.js';
import insertMarkers from '../../mermaid/src/dagre-wrapper/markers.js'; import insertMarkers from '../../mermaid/src/dagre-wrapper/markers.js';
import createLabel from '../../mermaid/src/dagre-wrapper/createLabel';
import dagre from 'cytoscape-dagre'; import dagre from 'cytoscape-dagre';
// Replace with other function to avoid dependency to dagre-d3 // Replace with other function to avoid dependency to dagre-d3
import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js'; import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
@@ -247,9 +248,11 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
* @param cy * @param cy
* @param diagObj * @param diagObj
* @param graph * @param graph
* @param svg
*/ */
export const addEdges = function (edges, diagObj, graph) { export const addEdges = function (edges, diagObj, graph, svg) {
// log.info('abc78 edges = ', edges); // log.info('abc78 edges = ', edges);
const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
let cnt = 0; let cnt = 0;
let linkIdCnt = {}; let linkIdCnt = {};
@@ -378,11 +381,30 @@ export const addEdges = function (edges, diagObj, graph) {
edgeData.id = linkId; edgeData.id = linkId;
edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd; edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
const labelEl = createLabel(edgeData.label, edgeData.labelStyle);
labelsEl.node().appendChild(labelEl);
const labelBox = labelEl.firstChild.getBoundingClientRect();
// console.log('labelEl', labelEl);
// 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: [edge.start], sources: [edge.start],
targets: [edge.end], targets: [edge.end],
labelEl: labelEl,
labels: [
{
width: labelBox.width,
// width: 80,
height: labelBox.height,
orgWidth: labelBox.width,
orgHeight: labelBox.height,
text: edgeData.label,
layoutOptions: {
'edgeLabels.inline': 'true',
'edgeLabels.placement': 'CENTER',
},
},
],
edgeData, edgeData,
// targetPort: 'PortSide.NORTH', // targetPort: 'PortSide.NORTH',
// id: cnt, // id: cnt,
@@ -553,13 +575,24 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj) {
// console.log('Edge ctrl points:', points); // console.log('Edge ctrl points:', points);
// const curve = line().curve(curveCardinal); // const curve = line().curve(curveCardinal);
const curve = line().curve(curveLinear); const curve = line().curve(curveLinear);
const edge2 = edgesEl const edgePath = edgesEl
.insert('path') .insert('path')
.attr('d', curve(points)) .attr('d', curve(points))
// .attr('d', points)) // .attr('d', points))
.attr('class', 'path') .attr('class', 'path')
.attr('fill', 'none'); .attr('fill', 'none');
addmarkers(edge2, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute); const edgeG = edgesEl.insert('g').attr('class', 'edgeLabel');
const edgeEl = select(edgeG.node().appendChild(edge.labelEl));
// console.log('Edge label', edgeEl, edge);
const box = edgeEl.node().firstChild.getBoundingClientRect();
edgeEl.attr('width', box.width);
edgeEl.attr('height', box.height);
// edgeEl.height = 24;
edgeG.attr(
'transform',
`translate(${edge.labels[0].x - box.width / 2}, ${edge.labels[0].y - box.height / 2})`
);
addmarkers(edgesEl, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute);
// edgesEl // edgesEl
// .append('circle') // .append('circle')
// .style('stroke', 'red') // .style('stroke', 'red')
@@ -631,7 +664,7 @@ export const draw = function (text, id, _version, diagObj) {
// 'elk.layered.spacing.nodeNodeBetweenLayers': '140', // 'elk.layered.spacing.nodeNodeBetweenLayers': '140',
'elk.layered.spacing.edgeNodeBetweenLayers': '30', 'elk.layered.spacing.edgeNodeBetweenLayers': '30',
// 'elk.algorithm': 'layered', // 'elk.algorithm': 'layered',
'elk.direction': 'DOWN', 'elk.direction': 'WEST',
// 'elk.port.side': 'SOUTH', // 'elk.port.side': 'SOUTH',
// 'nodePlacement.strategy': 'SIMPLE', // 'nodePlacement.strategy': 'SIMPLE',
// 'org.eclipse.elk.spacing.labelLabel': 120, // 'org.eclipse.elk.spacing.labelLabel': 120,
@@ -685,7 +718,7 @@ export const draw = function (text, id, _version, diagObj) {
graph = addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph); graph = addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
const edgesEl = svg.insert('g').attr('class', 'edges edgePath'); const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
const edges = diagObj.db.getEdges(); const edges = diagObj.db.getEdges();
graph = addEdges(edges, diagObj, graph); graph = addEdges(edges, diagObj, graph, svg);
// Iterate through all nodes and add the top level nodes to the graph // Iterate through all nodes and add the top level nodes to the graph
const nodes = Object.keys(nodeDb); const nodes = Object.keys(nodeDb);
@@ -739,7 +772,7 @@ export const draw = function (text, id, _version, diagObj) {
// }; // };
elk.layout(graph).then(function (g) { elk.layout(graph).then(function (g) {
// elk.layout(graph2).then(function (g) { // elk.layout(graph2).then(function (g) {
// console.log('Layout (UGH)- ', g); // console.log('Layout (UGH)- ', g, JSON.stringify(g));
drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj); drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj);
g.edges.map((edge, id) => { g.edges.map((edge, id) => {