815 lines
24 KiB
JavaScript
815 lines
24 KiB
JavaScript
|
import { d as db, p as parser } from "./flowDb-4b19a42f.js";
|
||
|
|
import { select, curveLinear, line } from "d3";
|
||
|
|
import { a as insertMarkers, e as insertNode, l as labelHelper, f as insertEdgeLabel, k as getLineFunctionsWithOffset, m as addEdgeMarkers } from "./edges-d32062c0.js";
|
||
|
|
import { l as log, F as getConfig, o as setupGraphViewbox, k as getStylesFromArray, n as interpolateToCurve, e as common } from "./mermaid-f47111a7.js";
|
||
|
|
import ELK from "elkjs/lib/elk.bundled.js";
|
||
|
|
import "./createText-6b48ae7d.js";
|
||
|
|
import "mdast-util-from-markdown";
|
||
|
|
import "ts-dedent";
|
||
|
|
import "dayjs";
|
||
|
|
import "@braintree/sanitize-url";
|
||
|
|
import "dompurify";
|
||
|
|
import "khroma";
|
||
|
|
import "lodash-es/memoize.js";
|
||
|
|
import "lodash-es/merge.js";
|
||
|
|
import "stylis";
|
||
|
|
import "lodash-es/isEmpty.js";
|
||
|
|
const findCommonAncestor = (id1, id2, treeData) => {
|
||
|
|
const { parentById } = treeData;
|
||
|
|
const visited = /* @__PURE__ */ new Set();
|
||
|
|
let currentId = id1;
|
||
|
|
while (currentId) {
|
||
|
|
visited.add(currentId);
|
||
|
|
if (currentId === id2) {
|
||
|
|
return currentId;
|
||
|
|
}
|
||
|
|
currentId = parentById[currentId];
|
||
|
|
}
|
||
|
|
currentId = id2;
|
||
|
|
while (currentId) {
|
||
|
|
if (visited.has(currentId)) {
|
||
|
|
return currentId;
|
||
|
|
}
|
||
|
|
currentId = parentById[currentId];
|
||
|
|
}
|
||
|
|
return "root";
|
||
|
|
};
|
||
|
|
const elk = new ELK();
|
||
|
|
let portPos = {};
|
||
|
|
const conf = {};
|
||
|
|
let nodeDb = {};
|
||
|
|
const addVertices = async function(vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
|
||
|
|
const svg = root.select(`[id="${svgId}"]`);
|
||
|
|
const nodes = svg.insert("g").attr("class", "nodes");
|
||
|
|
const keys = Object.keys(vert);
|
||
|
|
await Promise.all(
|
||
|
|
keys.map(async function(id) {
|
||
|
|
const vertex = vert[id];
|
||
|
|
let classStr = "default";
|
||
|
|
if (vertex.classes.length > 0) {
|
||
|
|
classStr = vertex.classes.join(" ");
|
||
|
|
}
|
||
|
|
classStr = classStr + " flowchart-label";
|
||
|
|
const styles2 = getStylesFromArray(vertex.styles);
|
||
|
|
let vertexText = vertex.text !== void 0 ? vertex.text : vertex.id;
|
||
|
|
const labelData = { width: 0, height: 0 };
|
||
|
|
const ports = [
|
||
|
|
{
|
||
|
|
id: vertex.id + "-west",
|
||
|
|
layoutOptions: {
|
||
|
|
"port.side": "WEST"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: vertex.id + "-east",
|
||
|
|
layoutOptions: {
|
||
|
|
"port.side": "EAST"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: vertex.id + "-south",
|
||
|
|
layoutOptions: {
|
||
|
|
"port.side": "SOUTH"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: vertex.id + "-north",
|
||
|
|
layoutOptions: {
|
||
|
|
"port.side": "NORTH"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
];
|
||
|
|
let radius = 0;
|
||
|
|
let _shape = "";
|
||
|
|
let layoutOptions = {};
|
||
|
|
switch (vertex.type) {
|
||
|
|
case "round":
|
||
|
|
radius = 5;
|
||
|
|
_shape = "rect";
|
||
|
|
break;
|
||
|
|
case "square":
|
||
|
|
_shape = "rect";
|
||
|
|
break;
|
||
|
|
case "diamond":
|
||
|
|
_shape = "question";
|
||
|
|
layoutOptions = {
|
||
|
|
portConstraints: "FIXED_SIDE"
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case "hexagon":
|
||
|
|
_shape = "hexagon";
|
||
|
|
break;
|
||
|
|
case "odd":
|
||
|
|
_shape = "rect_left_inv_arrow";
|
||
|
|
break;
|
||
|
|
case "lean_right":
|
||
|
|
_shape = "lean_right";
|
||
|
|
break;
|
||
|
|
case "lean_left":
|
||
|
|
_shape = "lean_left";
|
||
|
|
break;
|
||
|
|
case "trapezoid":
|
||
|
|
_shape = "trapezoid";
|
||
|
|
break;
|
||
|
|
case "inv_trapezoid":
|
||
|
|
_shape = "inv_trapezoid";
|
||
|
|
break;
|
||
|
|
case "odd_right":
|
||
|
|
_shape = "rect_left_inv_arrow";
|
||
|
|
break;
|
||
|
|
case "circle":
|
||
|
|
_shape = "circle";
|
||
|
|
break;
|
||
|
|
case "ellipse":
|
||
|
|
_shape = "ellipse";
|
||
|
|
break;
|
||
|
|
case "stadium":
|
||
|
|
_shape = "stadium";
|
||
|
|
break;
|
||
|
|
case "subroutine":
|
||
|
|
_shape = "subroutine";
|
||
|
|
break;
|
||
|
|
case "cylinder":
|
||
|
|
_shape = "cylinder";
|
||
|
|
break;
|
||
|
|
case "group":
|
||
|
|
_shape = "rect";
|
||
|
|
break;
|
||
|
|
case "doublecircle":
|
||
|
|
_shape = "doublecircle";
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
_shape = "rect";
|
||
|
|
}
|
||
|
|
const node = {
|
||
|
|
labelStyle: styles2.labelStyle,
|
||
|
|
shape: _shape,
|
||
|
|
labelText: vertexText,
|
||
|
|
labelType: vertex.labelType,
|
||
|
|
rx: radius,
|
||
|
|
ry: radius,
|
||
|
|
class: classStr,
|
||
|
|
style: styles2.style,
|
||
|
|
id: vertex.id,
|
||
|
|
link: vertex.link,
|
||
|
|
linkTarget: vertex.linkTarget,
|
||
|
|
tooltip: diagObj.db.getTooltip(vertex.id) || "",
|
||
|
|
domId: diagObj.db.lookUpDomId(vertex.id),
|
||
|
|
haveCallback: vertex.haveCallback,
|
||
|
|
width: vertex.type === "group" ? 500 : void 0,
|
||
|
|
dir: vertex.dir,
|
||
|
|
type: vertex.type,
|
||
|
|
props: vertex.props,
|
||
|
|
padding: getConfig().flowchart.padding
|
||
|
|
};
|
||
|
|
let boundingBox;
|
||
|
|
let nodeEl;
|
||
|
|
if (node.type !== "group") {
|
||
|
|
nodeEl = await insertNode(nodes, node, vertex.dir);
|
||
|
|
boundingBox = nodeEl.node().getBBox();
|
||
|
|
} else {
|
||
|
|
doc.createElementNS("http://www.w3.org/2000/svg", "text");
|
||
|
|
const { shapeSvg, bbox } = await labelHelper(nodes, node, void 0, true);
|
||
|
|
labelData.width = bbox.width;
|
||
|
|
labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
|
||
|
|
labelData.height = bbox.height;
|
||
|
|
labelData.labelNode = shapeSvg.node();
|
||
|
|
node.labelData = labelData;
|
||
|
|
}
|
||
|
|
const data = {
|
||
|
|
id: vertex.id,
|
||
|
|
ports: vertex.type === "diamond" ? ports : [],
|
||
|
|
// labelStyle: styles.labelStyle,
|
||
|
|
// shape: _shape,
|
||
|
|
layoutOptions,
|
||
|
|
labelText: vertexText,
|
||
|
|
labelData,
|
||
|
|
// labels: [{ text: vertexText }],
|
||
|
|
// rx: radius,
|
||
|
|
// ry: radius,
|
||
|
|
// class: classStr,
|
||
|
|
// style: styles.style,
|
||
|
|
// link: vertex.link,
|
||
|
|
// linkTarget: vertex.linkTarget,
|
||
|
|
// tooltip: diagObj.db.getTooltip(vertex.id) || '',
|
||
|
|
domId: diagObj.db.lookUpDomId(vertex.id),
|
||
|
|
// haveCallback: vertex.haveCallback,
|
||
|
|
width: boundingBox == null ? void 0 : boundingBox.width,
|
||
|
|
height: boundingBox == null ? void 0 : boundingBox.height,
|
||
|
|
// dir: vertex.dir,
|
||
|
|
type: vertex.type,
|
||
|
|
// props: vertex.props,
|
||
|
|
// padding: getConfig().flowchart.padding,
|
||
|
|
// boundingBox,
|
||
|
|
el: nodeEl,
|
||
|
|
parent: parentLookupDb.parentById[vertex.id]
|
||
|
|
};
|
||
|
|
nodeDb[node.id] = data;
|
||
|
|
})
|
||
|
|
);
|
||
|
|
return graph;
|
||
|
|
};
|
||
|
|
const getNextPosition = (position, edgeDirection, graphDirection) => {
|
||
|
|
const portPos2 = {
|
||
|
|
TB: {
|
||
|
|
in: {
|
||
|
|
north: "north"
|
||
|
|
},
|
||
|
|
out: {
|
||
|
|
south: "west",
|
||
|
|
west: "east",
|
||
|
|
east: "south"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
LR: {
|
||
|
|
in: {
|
||
|
|
west: "west"
|
||
|
|
},
|
||
|
|
out: {
|
||
|
|
east: "south",
|
||
|
|
south: "north",
|
||
|
|
north: "east"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
RL: {
|
||
|
|
in: {
|
||
|
|
east: "east"
|
||
|
|
},
|
||
|
|
out: {
|
||
|
|
west: "north",
|
||
|
|
north: "south",
|
||
|
|
south: "west"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
BT: {
|
||
|
|
in: {
|
||
|
|
south: "south"
|
||
|
|
},
|
||
|
|
out: {
|
||
|
|
north: "east",
|
||
|
|
east: "west",
|
||
|
|
west: "north"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
portPos2.TD = portPos2.TB;
|
||
|
|
return portPos2[graphDirection][edgeDirection][position];
|
||
|
|
};
|
||
|
|
const getNextPort = (node, edgeDirection, graphDirection) => {
|
||
|
|
log.info("getNextPort", { node, edgeDirection, graphDirection });
|
||
|
|
if (!portPos[node]) {
|
||
|
|
switch (graphDirection) {
|
||
|
|
case "TB":
|
||
|
|
case "TD":
|
||
|
|
portPos[node] = {
|
||
|
|
inPosition: "north",
|
||
|
|
outPosition: "south"
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case "BT":
|
||
|
|
portPos[node] = {
|
||
|
|
inPosition: "south",
|
||
|
|
outPosition: "north"
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case "RL":
|
||
|
|
portPos[node] = {
|
||
|
|
inPosition: "east",
|
||
|
|
outPosition: "west"
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case "LR":
|
||
|
|
portPos[node] = {
|
||
|
|
inPosition: "west",
|
||
|
|
outPosition: "east"
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const result = edgeDirection === "in" ? portPos[node].inPosition : portPos[node].outPosition;
|
||
|
|
if (edgeDirection === "in") {
|
||
|
|
portPos[node].inPosition = getNextPosition(
|
||
|
|
portPos[node].inPosition,
|
||
|
|
edgeDirection,
|
||
|
|
graphDirection
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
portPos[node].outPosition = getNextPosition(
|
||
|
|
portPos[node].outPosition,
|
||
|
|
edgeDirection,
|
||
|
|
graphDirection
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
const getEdgeStartEndPoint = (edge, dir) => {
|
||
|
|
let source = edge.start;
|
||
|
|
let target = edge.end;
|
||
|
|
const sourceId = source;
|
||
|
|
const targetId = target;
|
||
|
|
const startNode = nodeDb[source];
|
||
|
|
const endNode = nodeDb[target];
|
||
|
|
if (!startNode || !endNode) {
|
||
|
|
return { source, target };
|
||
|
|
}
|
||
|
|
if (startNode.type === "diamond") {
|
||
|
|
source = `${source}-${getNextPort(source, "out", dir)}`;
|
||
|
|
}
|
||
|
|
if (endNode.type === "diamond") {
|
||
|
|
target = `${target}-${getNextPort(target, "in", dir)}`;
|
||
|
|
}
|
||
|
|
return { source, target, sourceId, targetId };
|
||
|
|
};
|
||
|
|
const addEdges = function(edges, diagObj, graph, svg) {
|
||
|
|
log.info("abc78 edges = ", edges);
|
||
|
|
const labelsEl = svg.insert("g").attr("class", "edgeLabels");
|
||
|
|
let linkIdCnt = {};
|
||
|
|
let dir = diagObj.db.getDirection();
|
||
|
|
let defaultStyle;
|
||
|
|
let defaultLabelStyle;
|
||
|
|
if (edges.defaultStyle !== void 0) {
|
||
|
|
const defaultStyles = getStylesFromArray(edges.defaultStyle);
|
||
|
|
defaultStyle = defaultStyles.style;
|
||
|
|
defaultLabelStyle = defaultStyles.labelStyle;
|
||
|
|
}
|
||
|
|
edges.forEach(function(edge) {
|
||
|
|
const linkIdBase = "L-" + edge.start + "-" + edge.end;
|
||
|
|
if (linkIdCnt[linkIdBase] === void 0) {
|
||
|
|
linkIdCnt[linkIdBase] = 0;
|
||
|
|
log.info("abc78 new entry", linkIdBase, linkIdCnt[linkIdBase]);
|
||
|
|
} else {
|
||
|
|
linkIdCnt[linkIdBase]++;
|
||
|
|
log.info("abc78 new entry", linkIdBase, linkIdCnt[linkIdBase]);
|
||
|
|
}
|
||
|
|
let linkId = linkIdBase + "-" + linkIdCnt[linkIdBase];
|
||
|
|
log.info("abc78 new link id to be used is", linkIdBase, linkId, linkIdCnt[linkIdBase]);
|
||
|
|
const linkNameStart = "LS-" + edge.start;
|
||
|
|
const linkNameEnd = "LE-" + edge.end;
|
||
|
|
const edgeData = { style: "", labelStyle: "" };
|
||
|
|
edgeData.minlen = edge.length || 1;
|
||
|
|
if (edge.type === "arrow_open") {
|
||
|
|
edgeData.arrowhead = "none";
|
||
|
|
} else {
|
||
|
|
edgeData.arrowhead = "normal";
|
||
|
|
}
|
||
|
|
edgeData.arrowTypeStart = "arrow_open";
|
||
|
|
edgeData.arrowTypeEnd = "arrow_open";
|
||
|
|
switch (edge.type) {
|
||
|
|
case "double_arrow_cross":
|
||
|
|
edgeData.arrowTypeStart = "arrow_cross";
|
||
|
|
case "arrow_cross":
|
||
|
|
edgeData.arrowTypeEnd = "arrow_cross";
|
||
|
|
break;
|
||
|
|
case "double_arrow_point":
|
||
|
|
edgeData.arrowTypeStart = "arrow_point";
|
||
|
|
case "arrow_point":
|
||
|
|
edgeData.arrowTypeEnd = "arrow_point";
|
||
|
|
break;
|
||
|
|
case "double_arrow_circle":
|
||
|
|
edgeData.arrowTypeStart = "arrow_circle";
|
||
|
|
case "arrow_circle":
|
||
|
|
edgeData.arrowTypeEnd = "arrow_circle";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
let style = "";
|
||
|
|
let labelStyle = "";
|
||
|
|
switch (edge.stroke) {
|
||
|
|
case "normal":
|
||
|
|
style = "fill:none;";
|
||
|
|
if (defaultStyle !== void 0) {
|
||
|
|
style = defaultStyle;
|
||
|
|
}
|
||
|
|
if (defaultLabelStyle !== void 0) {
|
||
|
|
labelStyle = defaultLabelStyle;
|
||
|
|
}
|
||
|
|
edgeData.thickness = "normal";
|
||
|
|
edgeData.pattern = "solid";
|
||
|
|
break;
|
||
|
|
case "dotted":
|
||
|
|
edgeData.thickness = "normal";
|
||
|
|
edgeData.pattern = "dotted";
|
||
|
|
edgeData.style = "fill:none;stroke-width:2px;stroke-dasharray:3;";
|
||
|
|
break;
|
||
|
|
case "thick":
|
||
|
|
edgeData.thickness = "thick";
|
||
|
|
edgeData.pattern = "solid";
|
||
|
|
edgeData.style = "stroke-width: 3.5px;fill:none;";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (edge.style !== void 0) {
|
||
|
|
const styles2 = getStylesFromArray(edge.style);
|
||
|
|
style = styles2.style;
|
||
|
|
labelStyle = styles2.labelStyle;
|
||
|
|
}
|
||
|
|
edgeData.style = edgeData.style += style;
|
||
|
|
edgeData.labelStyle = edgeData.labelStyle += labelStyle;
|
||
|
|
if (edge.interpolate !== void 0) {
|
||
|
|
edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
|
||
|
|
} else if (edges.defaultInterpolate !== void 0) {
|
||
|
|
edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
|
||
|
|
} else {
|
||
|
|
edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
|
||
|
|
}
|
||
|
|
if (edge.text === void 0) {
|
||
|
|
if (edge.style !== void 0) {
|
||
|
|
edgeData.arrowheadStyle = "fill: #333";
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
edgeData.arrowheadStyle = "fill: #333";
|
||
|
|
edgeData.labelpos = "c";
|
||
|
|
}
|
||
|
|
edgeData.labelType = edge.labelType;
|
||
|
|
edgeData.label = edge.text.replace(common.lineBreakRegex, "\n");
|
||
|
|
if (edge.style === void 0) {
|
||
|
|
edgeData.style = edgeData.style || "stroke: #333; stroke-width: 1.5px;fill:none;";
|
||
|
|
}
|
||
|
|
edgeData.labelStyle = edgeData.labelStyle.replace("color:", "fill:");
|
||
|
|
edgeData.id = linkId;
|
||
|
|
edgeData.classes = "flowchart-link " + linkNameStart + " " + linkNameEnd;
|
||
|
|
const labelEl = insertEdgeLabel(labelsEl, edgeData);
|
||
|
|
const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
|
||
|
|
log.debug("abc78 source and target", source, target);
|
||
|
|
graph.edges.push({
|
||
|
|
id: "e" + edge.start + edge.end,
|
||
|
|
sources: [source],
|
||
|
|
targets: [target],
|
||
|
|
sourceId,
|
||
|
|
targetId,
|
||
|
|
labelEl,
|
||
|
|
labels: [
|
||
|
|
{
|
||
|
|
width: edgeData.width,
|
||
|
|
height: edgeData.height,
|
||
|
|
orgWidth: edgeData.width,
|
||
|
|
orgHeight: edgeData.height,
|
||
|
|
text: edgeData.label,
|
||
|
|
layoutOptions: {
|
||
|
|
"edgeLabels.inline": "true",
|
||
|
|
"edgeLabels.placement": "CENTER"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
edgeData
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return graph;
|
||
|
|
};
|
||
|
|
const addMarkersToEdge = function(svgPath, edgeData, diagramType, arrowMarkerAbsolute, id) {
|
||
|
|
let url = "";
|
||
|
|
if (arrowMarkerAbsolute) {
|
||
|
|
url = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search;
|
||
|
|
url = url.replace(/\(/g, "\\(");
|
||
|
|
url = url.replace(/\)/g, "\\)");
|
||
|
|
}
|
||
|
|
addEdgeMarkers(svgPath, edgeData, url, id, diagramType);
|
||
|
|
};
|
||
|
|
const getClasses = function(text, diagObj) {
|
||
|
|
log.info("Extracting classes");
|
||
|
|
return diagObj.db.getClasses();
|
||
|
|
};
|
||
|
|
const addSubGraphs = function(db2) {
|
||
|
|
const parentLookupDb = { parentById: {}, childrenById: {} };
|
||
|
|
const subgraphs = db2.getSubGraphs();
|
||
|
|
log.info("Subgraphs - ", subgraphs);
|
||
|
|
subgraphs.forEach(function(subgraph) {
|
||
|
|
subgraph.nodes.forEach(function(node) {
|
||
|
|
parentLookupDb.parentById[node] = subgraph.id;
|
||
|
|
if (parentLookupDb.childrenById[subgraph.id] === void 0) {
|
||
|
|
parentLookupDb.childrenById[subgraph.id] = [];
|
||
|
|
}
|
||
|
|
parentLookupDb.childrenById[subgraph.id].push(node);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
subgraphs.forEach(function(subgraph) {
|
||
|
|
({ id: subgraph.id });
|
||
|
|
if (parentLookupDb.parentById[subgraph.id] !== void 0) {
|
||
|
|
parentLookupDb.parentById[subgraph.id];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return parentLookupDb;
|
||
|
|
};
|
||
|
|
const calcOffset = function(src, dest, parentLookupDb) {
|
||
|
|
const ancestor = findCommonAncestor(src, dest, parentLookupDb);
|
||
|
|
if (ancestor === void 0 || ancestor === "root") {
|
||
|
|
return { x: 0, y: 0 };
|
||
|
|
}
|
||
|
|
const ancestorOffset = nodeDb[ancestor].offset;
|
||
|
|
return { x: ancestorOffset.posX, y: ancestorOffset.posY };
|
||
|
|
};
|
||
|
|
const insertEdge = function(edgesEl, edge, edgeData, diagObj, parentLookupDb, id) {
|
||
|
|
const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb);
|
||
|
|
const src = edge.sections[0].startPoint;
|
||
|
|
const dest = edge.sections[0].endPoint;
|
||
|
|
const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
|
||
|
|
const segPoints = segments.map((segment) => [segment.x + offset.x, segment.y + offset.y]);
|
||
|
|
const points = [
|
||
|
|
[src.x + offset.x, src.y + offset.y],
|
||
|
|
...segPoints,
|
||
|
|
[dest.x + offset.x, dest.y + offset.y]
|
||
|
|
];
|
||
|
|
const { x, y } = getLineFunctionsWithOffset(edge.edgeData);
|
||
|
|
const curve = line().x(x).y(y).curve(curveLinear);
|
||
|
|
const edgePath = edgesEl.insert("path").attr("d", curve(points)).attr("class", "path " + edgeData.classes).attr("fill", "none");
|
||
|
|
const edgeG = edgesEl.insert("g").attr("class", "edgeLabel");
|
||
|
|
const edgeWithLabel = select(edgeG.node().appendChild(edge.labelEl));
|
||
|
|
const box = edgeWithLabel.node().firstChild.getBoundingClientRect();
|
||
|
|
edgeWithLabel.attr("width", box.width);
|
||
|
|
edgeWithLabel.attr("height", box.height);
|
||
|
|
edgeG.attr(
|
||
|
|
"transform",
|
||
|
|
`translate(${edge.labels[0].x + offset.x}, ${edge.labels[0].y + offset.y})`
|
||
|
|
);
|
||
|
|
addMarkersToEdge(edgePath, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute, id);
|
||
|
|
};
|
||
|
|
const insertChildren = (nodeArray, parentLookupDb) => {
|
||
|
|
nodeArray.forEach((node) => {
|
||
|
|
if (!node.children) {
|
||
|
|
node.children = [];
|
||
|
|
}
|
||
|
|
const childIds = parentLookupDb.childrenById[node.id];
|
||
|
|
if (childIds) {
|
||
|
|
childIds.forEach((childId) => {
|
||
|
|
node.children.push(nodeDb[childId]);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
insertChildren(node.children, parentLookupDb);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const draw = async function(text, id, _version, diagObj) {
|
||
|
|
var _a;
|
||
|
|
diagObj.db.clear();
|
||
|
|
nodeDb = {};
|
||
|
|
portPos = {};
|
||
|
|
diagObj.db.setGen("gen-2");
|
||
|
|
diagObj.parser.parse(text);
|
||
|
|
const renderEl = select("body").append("div").attr("style", "height:400px").attr("id", "cy");
|
||
|
|
let graph = {
|
||
|
|
id: "root",
|
||
|
|
layoutOptions: {
|
||
|
|
"elk.hierarchyHandling": "INCLUDE_CHILDREN",
|
||
|
|
"org.eclipse.elk.padding": "[top=100, left=100, bottom=110, right=110]",
|
||
|
|
"elk.layered.spacing.edgeNodeBetweenLayers": "30",
|
||
|
|
// 'elk.layered.mergeEdges': 'true',
|
||
|
|
"elk.direction": "DOWN"
|
||
|
|
// 'elk.ports.sameLayerEdges': true,
|
||
|
|
// 'nodePlacement.strategy': 'SIMPLE',
|
||
|
|
},
|
||
|
|
children: [],
|
||
|
|
edges: []
|
||
|
|
};
|
||
|
|
log.info("Drawing flowchart using v3 renderer", elk);
|
||
|
|
let dir = diagObj.db.getDirection();
|
||
|
|
switch (dir) {
|
||
|
|
case "BT":
|
||
|
|
graph.layoutOptions["elk.direction"] = "UP";
|
||
|
|
break;
|
||
|
|
case "TB":
|
||
|
|
graph.layoutOptions["elk.direction"] = "DOWN";
|
||
|
|
break;
|
||
|
|
case "LR":
|
||
|
|
graph.layoutOptions["elk.direction"] = "RIGHT";
|
||
|
|
break;
|
||
|
|
case "RL":
|
||
|
|
graph.layoutOptions["elk.direction"] = "LEFT";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
const { securityLevel, flowchart: conf2 } = getConfig();
|
||
|
|
let sandboxElement;
|
||
|
|
if (securityLevel === "sandbox") {
|
||
|
|
sandboxElement = select("#i" + id);
|
||
|
|
}
|
||
|
|
const root = securityLevel === "sandbox" ? select(sandboxElement.nodes()[0].contentDocument.body) : select("body");
|
||
|
|
const doc = securityLevel === "sandbox" ? sandboxElement.nodes()[0].contentDocument : document;
|
||
|
|
const svg = root.select(`[id="${id}"]`);
|
||
|
|
const markers = ["point", "circle", "cross"];
|
||
|
|
insertMarkers(svg, markers, diagObj.type, id);
|
||
|
|
const vert = diagObj.db.getVertices();
|
||
|
|
let subG;
|
||
|
|
const subGraphs = diagObj.db.getSubGraphs();
|
||
|
|
log.info("Subgraphs - ", subGraphs);
|
||
|
|
for (let i = subGraphs.length - 1; i >= 0; i--) {
|
||
|
|
subG = subGraphs[i];
|
||
|
|
diagObj.db.addVertex(
|
||
|
|
subG.id,
|
||
|
|
{ text: subG.title, type: subG.labelType },
|
||
|
|
"group",
|
||
|
|
void 0,
|
||
|
|
subG.classes,
|
||
|
|
subG.dir
|
||
|
|
);
|
||
|
|
}
|
||
|
|
const subGraphsEl = svg.insert("g").attr("class", "subgraphs");
|
||
|
|
const parentLookupDb = addSubGraphs(diagObj.db);
|
||
|
|
graph = await 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, svg);
|
||
|
|
const nodes = Object.keys(nodeDb);
|
||
|
|
nodes.forEach((nodeId) => {
|
||
|
|
const node = nodeDb[nodeId];
|
||
|
|
if (!node.parent) {
|
||
|
|
graph.children.push(node);
|
||
|
|
}
|
||
|
|
if (parentLookupDb.childrenById[nodeId] !== void 0) {
|
||
|
|
node.labels = [
|
||
|
|
{
|
||
|
|
text: node.labelText,
|
||
|
|
layoutOptions: {
|
||
|
|
"nodeLabels.placement": "[H_CENTER, V_TOP, INSIDE]"
|
||
|
|
},
|
||
|
|
width: node.labelData.width,
|
||
|
|
height: node.labelData.height
|
||
|
|
// width: 100,
|
||
|
|
// height: 100,
|
||
|
|
}
|
||
|
|
];
|
||
|
|
delete node.x;
|
||
|
|
delete node.y;
|
||
|
|
delete node.width;
|
||
|
|
delete node.height;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
insertChildren(graph.children, parentLookupDb);
|
||
|
|
log.info("after layout", JSON.stringify(graph, null, 2));
|
||
|
|
const g = await elk.layout(graph);
|
||
|
|
drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
|
||
|
|
log.info("after layout", g);
|
||
|
|
(_a = g.edges) == null ? void 0 : _a.map((edge) => {
|
||
|
|
insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb, id);
|
||
|
|
});
|
||
|
|
setupGraphViewbox({}, svg, conf2.diagramPadding, conf2.useMaxWidth);
|
||
|
|
renderEl.remove();
|
||
|
|
};
|
||
|
|
const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {
|
||
|
|
nodeArray.forEach(function(node) {
|
||
|
|
if (node) {
|
||
|
|
nodeDb[node.id].offset = {
|
||
|
|
posX: node.x + relX,
|
||
|
|
posY: node.y + relY,
|
||
|
|
x: relX,
|
||
|
|
y: relY,
|
||
|
|
depth,
|
||
|
|
width: node.width,
|
||
|
|
height: node.height
|
||
|
|
};
|
||
|
|
if (node.type === "group") {
|
||
|
|
const subgraphEl = subgraphsEl.insert("g").attr("class", "subgraph");
|
||
|
|
subgraphEl.insert("rect").attr("class", "subgraph subgraph-lvl-" + depth % 5 + " node").attr("x", node.x + relX).attr("y", node.y + relY).attr("width", node.width).attr("height", node.height);
|
||
|
|
const label = subgraphEl.insert("g").attr("class", "label");
|
||
|
|
const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
|
||
|
|
label.attr(
|
||
|
|
"transform",
|
||
|
|
`translate(${node.labels[0].x + relX + node.x + labelCentering}, ${node.labels[0].y + relY + node.y + 3})`
|
||
|
|
);
|
||
|
|
label.node().appendChild(node.labelData.labelNode);
|
||
|
|
log.info("Id (UGH)= ", node.type, node.labels);
|
||
|
|
} else {
|
||
|
|
log.info("Id (UGH)= ", node.id);
|
||
|
|
node.el.attr(
|
||
|
|
"transform",
|
||
|
|
`translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})`
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
nodeArray.forEach(function(node) {
|
||
|
|
if (node && node.type === "group") {
|
||
|
|
drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, diagObj, depth + 1);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const renderer = {
|
||
|
|
getClasses,
|
||
|
|
draw
|
||
|
|
};
|
||
|
|
const genSections = (options) => {
|
||
|
|
let sections = "";
|
||
|
|
for (let i = 0; i < 5; i++) {
|
||
|
|
sections += `
|
||
|
|
.subgraph-lvl-${i} {
|
||
|
|
fill: ${options[`surface${i}`]};
|
||
|
|
stroke: ${options[`surfacePeer${i}`]};
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
return sections;
|
||
|
|
};
|
||
|
|
const getStyles = (options) => `.label {
|
||
|
|
font-family: ${options.fontFamily};
|
||
|
|
color: ${options.nodeTextColor || options.textColor};
|
||
|
|
}
|
||
|
|
.cluster-label text {
|
||
|
|
fill: ${options.titleColor};
|
||
|
|
}
|
||
|
|
.cluster-label span {
|
||
|
|
color: ${options.titleColor};
|
||
|
|
}
|
||
|
|
|
||
|
|
.label text,span {
|
||
|
|
fill: ${options.nodeTextColor || options.textColor};
|
||
|
|
color: ${options.nodeTextColor || options.textColor};
|
||
|
|
}
|
||
|
|
|
||
|
|
.node rect,
|
||
|
|
.node circle,
|
||
|
|
.node ellipse,
|
||
|
|
.node polygon,
|
||
|
|
.node path {
|
||
|
|
fill: ${options.mainBkg};
|
||
|
|
stroke: ${options.nodeBorder};
|
||
|
|
stroke-width: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.node .label {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.node.clickable {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrowheadPath {
|
||
|
|
fill: ${options.arrowheadColor};
|
||
|
|
}
|
||
|
|
|
||
|
|
.edgePath .path {
|
||
|
|
stroke: ${options.lineColor};
|
||
|
|
stroke-width: 2.0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flowchart-link {
|
||
|
|
stroke: ${options.lineColor};
|
||
|
|
fill: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.edgeLabel {
|
||
|
|
background-color: ${options.edgeLabelBackground};
|
||
|
|
rect {
|
||
|
|
opacity: 0.85;
|
||
|
|
background-color: ${options.edgeLabelBackground};
|
||
|
|
fill: ${options.edgeLabelBackground};
|
||
|
|
}
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cluster rect {
|
||
|
|
fill: ${options.clusterBkg};
|
||
|
|
stroke: ${options.clusterBorder};
|
||
|
|
stroke-width: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cluster text {
|
||
|
|
fill: ${options.titleColor};
|
||
|
|
}
|
||
|
|
|
||
|
|
.cluster span {
|
||
|
|
color: ${options.titleColor};
|
||
|
|
}
|
||
|
|
/* .cluster div {
|
||
|
|
color: ${options.titleColor};
|
||
|
|
} */
|
||
|
|
|
||
|
|
div.mermaidTooltip {
|
||
|
|
position: absolute;
|
||
|
|
text-align: center;
|
||
|
|
max-width: 200px;
|
||
|
|
padding: 2px;
|
||
|
|
font-family: ${options.fontFamily};
|
||
|
|
font-size: 12px;
|
||
|
|
background: ${options.tertiaryColor};
|
||
|
|
border: 1px solid ${options.border2};
|
||
|
|
border-radius: 2px;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flowchartTitleText {
|
||
|
|
text-anchor: middle;
|
||
|
|
font-size: 18px;
|
||
|
|
fill: ${options.textColor};
|
||
|
|
}
|
||
|
|
.subgraph {
|
||
|
|
stroke-width:2;
|
||
|
|
rx:3;
|
||
|
|
}
|
||
|
|
// .subgraph-lvl-1 {
|
||
|
|
// fill:#ccc;
|
||
|
|
// // stroke:black;
|
||
|
|
// }
|
||
|
|
|
||
|
|
.flowchart-label text {
|
||
|
|
text-anchor: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
${genSections(options)}
|
||
|
|
`;
|
||
|
|
const styles = getStyles;
|
||
|
|
const diagram = {
|
||
|
|
db,
|
||
|
|
renderer,
|
||
|
|
parser,
|
||
|
|
styles
|
||
|
|
};
|
||
|
|
export {
|
||
|
|
diagram
|
||
|
|
};
|