GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Working version before applying direction logic

Browse Source
This commit is contained in:
Knut Sveidqvist 2023-02-15 13:54:33 +01:00
parent a956be7bbf
commit 027296df68
3 changed files with 170 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
cypress/platform/knsv2.html
View File

@ -54,13 +54,17 @@
</style> </style>
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
graph TB graph RL
a --> b a{The cat in the hat} -- 1o --> b
a --> c a -- 2o --> c
b --> d a -- 3o --> d
c --> d g --2i--> a
d --1i--> a
h --3i -->a
b --> d(The dog in the hog)
c --> d
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
flowchart-elk TB flowchart-elk TB
@ -227,7 +231,7 @@ sequenceDiagram
Customer->>+Merchant: Receives goods or services Customer->>+Merchant: Receives goods or services
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
mindmap mindmap
root((mindmap)) root((mindmap))
Origins Origins
@ -247,7 +251,7 @@ mindmap
Mermaid Mermaid
</pre> </pre>
<br /> <br />
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
example-diagram example-diagram
</pre> </pre>

1
packages/mermaid/src/dagre-wrapper/nodes.js
View File

@ -1007,6 +1007,7 @@ const class_box = (parent, node) => {
}; };
const shapes = { const shapes = {
rhombus: question,
question, question,
rect, rect,
labelRect, labelRect,

160
packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
View File

@ -13,6 +13,8 @@ import { interpolateToCurve, getStylesFromArray } from '../../../utils';
import ELK from 'elkjs/lib/elk.bundled.js'; import ELK from 'elkjs/lib/elk.bundled.js';
const elk = new ELK(); const elk = new ELK();
const portPos = {};
const conf = {}; const conf = {};
export const setConf = function (cnf) { export const setConf = function (cnf) {
const keys = Object.keys(cnf); const keys = Object.keys(cnf);
@ -95,8 +97,36 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
labelData.labelNode = vertexNode; labelData.labelNode = vertexNode;
} }
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 radious = 0; let radious = 0;
let _shape = ''; let _shape = '';
let layoutOptions = {};
// Set the shape based parameters // Set the shape based parameters
switch (vertex.type) { switch (vertex.type) {
case 'round': case 'round':
@ -108,6 +138,9 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
break; break;
case 'diamond': case 'diamond':
_shape = 'question'; _shape = 'question';
layoutOptions = {
portConstraints: 'FIXED_SIDE',
};
break; break;
case 'hexagon': case 'hexagon':
_shape = 'hexagon'; _shape = 'hexagon';
@ -184,8 +217,10 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
const data = { const data = {
id: vertex.id, id: vertex.id,
ports: vertex.type === 'diamond' ? ports : [],
// labelStyle: styles.labelStyle, // labelStyle: styles.labelStyle,
// shape: _shape, // shape: _shape,
layoutOptions,
labelText: vertexText, labelText: vertexText,
labelData, labelData,
// labels: [{ text: vertexText }], // labels: [{ text: vertexText }],
@ -235,6 +270,83 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
return graph; return graph;
}; };
const getNextPosition = (position, direction) => {
if (direction === 'in') {
// switch (position) {
// case 'north':
// return 'east';
// case 'east':
// return 'west';
// case 'west':
// return 'south';
// case 'south':
// return 'north';
// default:
// return 'north';
// }
return 'north';
} else {
switch (position) {
case 'south':
return 'west';
case 'west':
return 'east';
case 'east':
return 'south';
// case 'north':
// return 'south';
default:
return 'south';
}
}
};
const getNextPort = (node, direction) => {
if (!portPos[node]) {
portPos[node] = {
inPosition: 'north',
outPosition: 'south',
};
}
const result = direction === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
if (direction === 'in') {
portPos[node].inPosition = getNextPosition(portPos[node].inPosition, direction);
} else {
portPos[node].outPosition = getNextPosition(portPos[node].outPosition, direction);
}
return result;
};
const getEdgeStartEndPoint = (edge) => {
let source = edge.start;
let target = edge.end;
const startNode = nodeDb[source];
const endNode = nodeDb[target];
console.log('getEdgeStartEndPoint abc77', { source, target, startNode, endNode });
if (!startNode || !endNode) {
return { source, target };
}
if (startNode.type === 'diamond') {
source = `${source}-${getNextPort(source, 'out')}`;
}
if (endNode.type === 'diamond') {
target = `${target}-${getNextPort(target, 'in')}`;
}
// Add the edge to the graph
// graph.edges.push({
// id: 'e' + edge.start + edge.end,
// sources: [edge.start],
// targets: [edge.end],
console.log('getEdgeStartEndPoint abc78', { source, target });
return { source, target };
};
/** /**
* Add edges to graph based on parsed graph definition * Add edges to graph based on parsed graph definition
* *
@ -375,11 +487,15 @@ export const addEdges = function (edges, diagObj, graph, svg) {
const labelEl = insertEdgeLabel(labelsEl, edgeData); const labelEl = insertEdgeLabel(labelsEl, edgeData);
// console.log('labelEl', labelEl, edgeData.width); // console.log('labelEl', labelEl, edgeData.width);
// calculate start and end points of the edge
const { source, target } = getEdgeStartEndPoint(edge);
log.info('abc78 source and target', source, target);
// 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: [source],
targets: [edge.end], targets: [target],
labelEl: labelEl, labelEl: labelEl,
labels: [ labels: [
{ {
@ -624,12 +740,15 @@ export const draw = async function (text, id, _version, diagObj) {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN', 'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]', 'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
'elk.layered.spacing.edgeNodeBetweenLayers': '30', 'elk.layered.spacing.edgeNodeBetweenLayers': '30',
// 'elk.layered.mergeEdges': 'true',
'elk.direction': 'DOWN', 'elk.direction': 'DOWN',
// 'elk.ports.sameLayerEdges': true,
// 'nodePlacement.strategy': 'SIMPLE',
}, },
children: [], children: [],
edges: [], edges: [],
}; };
log.info('Drawing flowchart using v3 renderer'); log.info('Drawing flowchart using v3 renderer', elk);
// Set the direction, // Set the direction,
// Fetch the default direction, use TD if none was found // Fetch the default direction, use TD if none was found
@ -731,8 +850,43 @@ export const draw = async function (text, id, _version, diagObj) {
} }
}); });
insertChildren(graph.children, parentLookupDb); insertChildren(graph.children, parentLookupDb);
// graph.children[0].shape = 'rhombus';
// graph.children[0].ports = [
// {
// id: 'a-p1',
// layoutOptions: {
// 'port.side': 'WEST',
// },
// },
// {
// id: 'a-p2',
// layoutOptions: {
// 'port.side': 'EAST',
// },
// },
// {
// id: 'a-p3',
// layoutOptions: {
// 'port.side': 'SOUTH',
// },
// },
// {
// id: 'a-p4',
// layoutOptions: {
// 'port.side': 'NORTH',
// },
// },
// ];
// graph.children[0].layoutOptions = {
// portConstraints: 'FIXED_SIDE',
// };
// graph.edges[0].sources[0] = 'a-south';
// graph.edges[1].sources[0] = 'a-west';
// graph.edges[2].targets[0] = 'a-east';
log.info('after layout', JSON.stringify(graph, null, 2));
const g = await elk.layout(graph); const g = await elk.layout(graph);
drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0); drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
log.info('after layout', g);
g.edges?.map((edge) => { g.edges?.map((edge) => {
insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb); insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb);
}); });