update the theme
This commit is contained in:
parent
b1a7697b03
commit
58e2c9ae87
166 changed files with 326580 additions and 582 deletions
|
|
@ -0,0 +1,814 @@
|
|||
import { d as db, p as parser } from "./flowDb-c1833063.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-066a5561.js";
|
||||
import { l as log, F as getConfig, o as setupGraphViewbox, k as getStylesFromArray, n as interpolateToCurve, e as common } from "./mermaid-6dc72991.js";
|
||||
import ELK from "elkjs/lib/elk.bundled.js";
|
||||
import "./createText-ca0c5216.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
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue