marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-17 19:24:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: Cleanup edges

Browse Source
This commit is contained in:
Sidharth Vinod
2024-06-29 03:04:27 +05:30
parent 7167710800
commit 9cc59f0206
1 changed files with 25 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@@ -9,14 +9,13 @@ import { curveBasis, line, select } from 'd3';
import rough from 'roughjs'; import rough from 'roughjs';
import createLabel from './createLabel.js'; import createLabel from './createLabel.js';
import { addEdgeMarkers } from './edgeMarker.ts'; import { addEdgeMarkers } from './edgeMarker.ts';
//import type { Edge } from '$root/rendering-util/types.d.ts';
let edgeLabels = {}; const edgeLabels = new Map();
let terminalLabels = {}; const terminalLabels = new Map();
export const clear = () => { export const clear = () => {
edgeLabels = {}; edgeLabels.clear();
terminalLabels = {}; terminalLabels.clear();
}; };
export const getLabelStyles = (styleArray) => { export const getLabelStyles = (styleArray) => {
@@ -27,16 +26,6 @@ export const getLabelStyles = (styleArray) => {
export const insertEdgeLabel = async (elem, edge) => { export const insertEdgeLabel = async (elem, edge) => {
let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels); let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
// Create the actual text element
// const labelElement =
// edge.labelType === 'markdown'
// ? await createText(elem, edge.label, {
// style: labelStyles,
// useHtmlLabels,
// addSvgBackground: true,
// })
// : await createLabel(edge.label, getLabelStyles(edge.labelStyle));
const labelElement = await createText(elem, edge.label, { const labelElement = await createText(elem, edge.label, {
style: getLabelStyles(edge.labelStyle), style: getLabelStyles(edge.labelStyle),
useHtmlLabels, useHtmlLabels,
@@ -64,7 +53,7 @@ export const insertEdgeLabel = async (elem, edge) => {
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')'); label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
// Make element accessible by id for positioning // Make element accessible by id for positioning
edgeLabels[edge.id] = edgeLabel; edgeLabels.set(edge.id, edgeLabel);
// Update the abstract data of the edge with the new information about its width and height // Update the abstract data of the edge with the new information about its width and height
edge.width = bbox.width; edge.width = bbox.width;
@@ -82,10 +71,10 @@ export const insertEdgeLabel = async (elem, edge) => {
fo = inner.node().appendChild(startLabelElement); fo = inner.node().appendChild(startLabelElement);
const slBox = startLabelElement.getBBox(); const slBox = startLabelElement.getBBox();
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')'); inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
if (!terminalLabels[edge.id]) { if (!terminalLabels.get(edge.id)) {
terminalLabels[edge.id] = {}; terminalLabels.set(edge.id, {});
} }
terminalLabels[edge.id].startLeft = startEdgeLabelLeft; terminalLabels.get(edge.id).startLeft = startEdgeLabelLeft;
setTerminalWidth(fo, edge.startLabelLeft); setTerminalWidth(fo, edge.startLabelLeft);
} }
if (edge.startLabelRight) { if (edge.startLabelRight) {
@@ -101,10 +90,10 @@ export const insertEdgeLabel = async (elem, edge) => {
const slBox = startLabelElement.getBBox(); const slBox = startLabelElement.getBBox();
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')'); inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
if (!terminalLabels[edge.id]) { if (!terminalLabels.get(edge.id)) {
terminalLabels[edge.id] = {}; terminalLabels.set(edge.id, {});
} }
terminalLabels[edge.id].startRight = startEdgeLabelRight; terminalLabels.get(edge.id).startRight = startEdgeLabelRight;
setTerminalWidth(fo, edge.startLabelRight); setTerminalWidth(fo, edge.startLabelRight);
} }
if (edge.endLabelLeft) { if (edge.endLabelLeft) {
@@ -118,10 +107,10 @@ export const insertEdgeLabel = async (elem, edge) => {
endEdgeLabelLeft.node().appendChild(endLabelElement); endEdgeLabelLeft.node().appendChild(endLabelElement);
if (!terminalLabels[edge.id]) { if (!terminalLabels.get(edge.id)) {
terminalLabels[edge.id] = {}; terminalLabels.set(edge.id, {});
} }
terminalLabels[edge.id].endLeft = endEdgeLabelLeft; terminalLabels.get(edge.id).endLeft = endEdgeLabelLeft;
setTerminalWidth(fo, edge.endLabelLeft); setTerminalWidth(fo, edge.endLabelLeft);
} }
if (edge.endLabelRight) { if (edge.endLabelRight) {
@@ -135,10 +124,10 @@ export const insertEdgeLabel = async (elem, edge) => {
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')'); inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
endEdgeLabelRight.node().appendChild(endLabelElement); endEdgeLabelRight.node().appendChild(endLabelElement);
if (!terminalLabels[edge.id]) { if (!terminalLabels.get(edge.id)) {
terminalLabels[edge.id] = {}; terminalLabels.set(edge.id, {});
} }
terminalLabels[edge.id].endRight = endEdgeLabelRight; terminalLabels.get(edge.id).endRight = endEdgeLabelRight;
setTerminalWidth(fo, edge.endLabelRight); setTerminalWidth(fo, edge.endLabelRight);
} }
return labelElement; return labelElement;
@@ -156,12 +145,12 @@ function setTerminalWidth(fo, value) {
} }
export const positionEdgeLabel = (edge, paths) => { export const positionEdgeLabel = (edge, paths) => {
log.debug('Moving label abc88 ', edge.id, edge.label, edgeLabels[edge.id], paths); log.debug('Moving label abc88 ', edge.id, edge.label, edgeLabels.get(edge.id), paths);
let path = paths.updatedPath ? paths.updatedPath : paths.originalPath; let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
const siteConfig = getConfig(); const siteConfig = getConfig();
const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig); const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
if (edge.label) { if (edge.label) {
const el = edgeLabels[edge.id]; const el = edgeLabels.get(edge.id);
let x = edge.x; let x = edge.x;
let y = edge.y; let y = edge.y;
if (path) { if (path) {
@@ -188,7 +177,7 @@ export const positionEdgeLabel = (edge, paths) => {
//let path = paths.updatedPath ? paths.updatedPath : paths.originalPath; //let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
if (edge.startLabelLeft) { if (edge.startLabelLeft) {
const el = terminalLabels[edge.id].startLeft; const el = terminalLabels.get(edge.id).startLeft;
let x = edge.x; let x = edge.x;
let y = edge.y; let y = edge.y;
if (path) { if (path) {
@@ -200,7 +189,7 @@ export const positionEdgeLabel = (edge, paths) => {
el.attr('transform', `translate(${x}, ${y})`); el.attr('transform', `translate(${x}, ${y})`);
} }
if (edge.startLabelRight) { if (edge.startLabelRight) {
const el = terminalLabels[edge.id].startRight; const el = terminalLabels.get(edge.id).startRight;
let x = edge.x; let x = edge.x;
let y = edge.y; let y = edge.y;
if (path) { if (path) {
@@ -216,7 +205,7 @@ export const positionEdgeLabel = (edge, paths) => {
el.attr('transform', `translate(${x}, ${y})`); el.attr('transform', `translate(${x}, ${y})`);
} }
if (edge.endLabelLeft) { if (edge.endLabelLeft) {
const el = terminalLabels[edge.id].endLeft; const el = terminalLabels.get(edge.id).endLeft;
let x = edge.x; let x = edge.x;
let y = edge.y; let y = edge.y;
if (path) { if (path) {
@@ -228,11 +217,10 @@ export const positionEdgeLabel = (edge, paths) => {
el.attr('transform', `translate(${x}, ${y})`); el.attr('transform', `translate(${x}, ${y})`);
} }
if (edge.endLabelRight) { if (edge.endLabelRight) {
const el = terminalLabels[edge.id].endRight; const el = terminalLabels.get(edge.id).endRight;
let x = edge.x; let x = edge.x;
let y = edge.y; let y = edge.y;
if (path) { if (path) {
// debugger;
const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_right', path); const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_right', path);
x = pos.x; x = pos.x;
y = pos.y; y = pos.y;
@@ -242,17 +230,13 @@ export const positionEdgeLabel = (edge, paths) => {
}; };
const outsideNode = (node, point) => { const outsideNode = (node, point) => {
// log.warn('Checking bounds ', node, point);
const x = node.x; const x = node.x;
const y = node.y; const y = node.y;
const dx = Math.abs(point.x - x); const dx = Math.abs(point.x - x);
const dy = Math.abs(point.y - y); const dy = Math.abs(point.y - y);
const w = node.width / 2; const w = node.width / 2;
const h = node.height / 2; const h = node.height / 2;
if (dx >= w || dy >= h) { return dx >= w || dy >= h;
return true;
}
return false;
}; };
export const intersection = (node, outsidePoint, insidePoint) => { export const intersection = (node, outsidePoint, insidePoint) => {
@@ -264,7 +248,6 @@ export const intersection = (node, outsidePoint, insidePoint) => {
const y = node.y; const y = node.y;
const dx = Math.abs(x - insidePoint.x); const dx = Math.abs(x - insidePoint.x);
// const dy = Math.abs(y - insidePoint.y);
const w = node.width / 2; const w = node.width / 2;
let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx; let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
const h = node.height / 2; const h = node.height / 2;
@@ -300,7 +283,6 @@ export const intersection = (node, outsidePoint, insidePoint) => {
if (insidePoint.x < outsidePoint.x) { if (insidePoint.x < outsidePoint.x) {
r = outsidePoint.x - w - x; r = outsidePoint.x - w - x;
} else { } else {
// r = outsidePoint.x - w - x;
r = x - w - outsidePoint.x; r = x - w - outsidePoint.x;
} }
let q = (Q * r) / R; let q = (Q * r) / R;
@@ -538,16 +520,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
lineData.splice(-1, 0, midPoint); lineData.splice(-1, 0, midPoint);
} }
// This is the accessor function we talked about above // This is the accessor function we talked about above
let curve; let curve = curveBasis;
curve = curveBasis;
// curve = curveCardinal;
// curve = curveLinear;
// curve = curveNatural;
// curve = curveCatmullRom.alpha(0.5);
// curve = curveCatmullRom;
// curve = curveCardinal.tension(0.7);
// curve = curveMonotoneY;
// let curve = interpolateToCurve([5], curveNatural, 0.01, 10);
// Currently only flowcharts get the curve from the settings, perhaps this should // Currently only flowcharts get the curve from the settings, perhaps this should
// be expanded to a common setting? Restricting it for now in order not to cause side-effects that // be expanded to a common setting? Restricting it for now in order not to cause side-effects that
// have not been thought through // have not been thought through
@@ -556,7 +529,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
} }
const { x, y } = getLineFunctionsWithOffset(edge); const { x, y } = getLineFunctionsWithOffset(edge);
// const lineFunction = edge.curve ? line().x(x).y(y).curve(curve) : roundedCornersLine;
const lineFunction = line().x(x).y(y).curve(curve); const lineFunction = line().x(x).y(y).curve(curve);
// Construct stroke classes based on properties // Construct stroke classes based on properties
@@ -592,11 +564,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
if (edge.look === 'handdrawn') { if (edge.look === 'handdrawn') {
const rc = rough.svg(elem); const rc = rough.svg(elem);
Object.assign([], lineData); Object.assign([], lineData);
// const svgPathNode = rc.path(lineFunction(ld.splice(0, ld.length-1)), {
// const svgPathNode = rc.path(lineFunction(ld), {
// roughness: 0.3,
// seed: handdrawnSeed,
// });
const svgPathNode = rc.path(linePath, { const svgPathNode = rc.path(linePath, {
roughness: 0.3, roughness: 0.3,
seed: handdrawnSeed, seed: handdrawnSeed,
@@ -606,7 +573,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
svgPath = select(svgPathNode) svgPath = select(svgPathNode)
.select('path') .select('path')
// .attr('d', lineFunction(lineData))
.attr('id', edge.id) .attr('id', edge.id)
.attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')) .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
.attr('style', edge.style); .attr('style', edge.style);