mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-23 17:29:54 +02:00
#815 Adding labels to edges
This commit is contained in:
Knut Sveidqvist
@@ -55,7 +55,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div>Security check</div>
|
||||
<pre id="diagram" class="mermaid">
|
||||
<pre id="diagram" class="mermaid2">
|
||||
cyto TD
|
||||
%% I could not figure out how to use double quotes in labels in Mermaid
|
||||
subgraph ibm[IBM Espresso CPU]
|
||||
@@ -109,21 +109,10 @@ cyto TD
|
||||
rtc{{rtc}}
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
<pre id="diagram" class="mermaid">
|
||||
cyto LR
|
||||
subgraph TOP
|
||||
direction LR
|
||||
subgraph B1
|
||||
direction RL
|
||||
i1 -->f1
|
||||
end
|
||||
subgraph B2
|
||||
direction BT
|
||||
i2 -->f2
|
||||
end
|
||||
end
|
||||
B1 --> B2
|
||||
F --> f1
|
||||
B1 --be be--> B2
|
||||
B1 --bo bo--> B3
|
||||
</pre
|
||||
>
|
||||
inside1 --> inside2 & inside3 & inside4 & inside5 & inside6 a(letter a<br />a) ---> b(letter
|
||||
|
||||
@@ -3,6 +3,7 @@ import { select, line, curveLinear, curveCardinal, curveBasis, selectAll } from
|
||||
import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
|
||||
import { insertNode } from '../../mermaid/src/dagre-wrapper/nodes.js';
|
||||
import insertMarkers from '../../mermaid/src/dagre-wrapper/markers.js';
|
||||
import createLabel from '../../mermaid/src/dagre-wrapper/createLabel';
|
||||
import dagre from 'cytoscape-dagre';
|
||||
// Replace with other function to avoid dependency to dagre-d3
|
||||
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 diagObj
|
||||
* @param graph
|
||||
* @param svg
|
||||
*/
|
||||
export const addEdges = function (edges, diagObj, graph) {
|
||||
export const addEdges = function (edges, diagObj, graph, svg) {
|
||||
// log.info('abc78 edges = ', edges);
|
||||
const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
|
||||
let cnt = 0;
|
||||
let linkIdCnt = {};
|
||||
|
||||
@@ -378,11 +381,30 @@ export const addEdges = function (edges, diagObj, graph) {
|
||||
edgeData.id = linkId;
|
||||
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
|
||||
graph.edges.push({
|
||||
id: 'e' + edge.start + edge.end,
|
||||
sources: [edge.start],
|
||||
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,
|
||||
// targetPort: 'PortSide.NORTH',
|
||||
// id: cnt,
|
||||
@@ -553,13 +575,24 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj) {
|
||||
// console.log('Edge ctrl points:', points);
|
||||
// const curve = line().curve(curveCardinal);
|
||||
const curve = line().curve(curveLinear);
|
||||
const edge2 = edgesEl
|
||||
const edgePath = edgesEl
|
||||
.insert('path')
|
||||
.attr('d', curve(points))
|
||||
// .attr('d', points))
|
||||
.attr('class', 'path')
|
||||
.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
|
||||
// .append('circle')
|
||||
// .style('stroke', 'red')
|
||||
@@ -631,7 +664,7 @@ export const draw = function (text, id, _version, diagObj) {
|
||||
// 'elk.layered.spacing.nodeNodeBetweenLayers': '140',
|
||||
'elk.layered.spacing.edgeNodeBetweenLayers': '30',
|
||||
// 'elk.algorithm': 'layered',
|
||||
'elk.direction': 'DOWN',
|
||||
'elk.direction': 'WEST',
|
||||
// 'elk.port.side': 'SOUTH',
|
||||
// 'nodePlacement.strategy': 'SIMPLE',
|
||||
// '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);
|
||||
const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
|
||||
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
|
||||
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(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);
|
||||
|
||||
g.edges.map((edge, id) => {
|
||||
|
||||
Reference in New Issue
Block a user