marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-11 19:39:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

MC-1733 Reset layout

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-09-10 13:39:13 +02:00
parent 13b96ad6c0
commit d1395d05e2
6 changed files with 430 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
cypress/platform/knsv-pos.html
View File

@@ -119,30 +119,24 @@
A A
S --> T: angrepp S --> T: angrepp
T --> U: Apa T --> U
T --> V: Varg T --> V
C C
D D
E E
`; `;
// code = ` code = `
// stateDiagram stateDiagram
// A0 T --> U
// state subbe { T --> V
// subState `;
// B
// }
// C
// D
// E
// `;
let positions = { let positions = {
nodes: { nodes: {
S: { x: 0, y: 0 }, S: { x: 0, y: 0 },
T: { x: 100, y: 100, width: 100, height: 100 }, T: { x: 100, y: 100, width: 100, height: 100 },
U: { x: 250, y: 160 }, U: { x: 250, y: 260 },
V: { x: 300, y: 120 }, V: { x: 300, y: 120 },
Z: { x: 300, y: 10, width: 160, height: 100 }, Z: { x: 300, y: 10, width: 160, height: 100 },
X: { x: 300, y: 20, width: 80, height: 60 }, X: { x: 300, y: 20, width: 80, height: 60 },
@@ -167,7 +161,7 @@
{ x: 150, y: 120 }, { x: 150, y: 120 },
{ x: 190.19453144073486, y: 120 }, { x: 190.19453144073486, y: 120 },
{ x: 190.19453144073486, y: 152.1556251525879 }, { x: 190.19453144073486, y: 152.1556251525879 },
{ x: 230.38906288146973, y: 152.1556251525879 }, { x: 250, y: 152.1556251525879 },
{ x: 250, y: 160 }, { x: 250, y: 160 },
], ],
}, },
@@ -182,11 +176,55 @@
}, },
}; };
// positions = { positions = {
// nodes: {}, nodes: {
// edges: {}, T: {
// }; x: 37.964874267578125,
y: 24.99908971786499,
width: 38.10995101928711,
height: 25.998868942260742,
},
U: {
x: 31.61321258544922,
y: 85.99644947052002,
width: 39.22151184082031,
height: 25.998876571655273,
},
V: {
x: 105.83320808410645,
y: 85.99644947052002,
width: 39.22149658203125,
height: 25.998876571655273,
},
},
edges: {
edge0: {
points: [
// { x: 37.61160659790039, y: 24 },
{ x: 31.61160659790039, y: 38 },
{ x: 31.61160659790039, y: 55.5 },
{ x: 31.61160659790039, y: 73 },
],
},
edge1: {
points: [
// { x: 37.61160659790039, y: 24 },
{ x: 44.31547546386719, y: 38 },
{ x: 44.31547546386719, y: 51.5 },
{ x: 45.487048339120996, y: 54.32842712474619 },
{ x: 48.31547546386719, y: 55.5 },
{ x: 101.83481979370117, y: 55.5 },
{ x: 104.66324691844736, y: 56.67157287525381 },
{ x: 105.83481979370117, y: 59.5 },
{ x: 105.83481979370117, y: 66.25 },
{ x: 105.83481979370117, y: 73 },
],
},
},
};
// console.log('positions:', positions);
const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions); const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
if (window?.calcIntersections) { if (window?.calcIntersections) {
console.log( console.log(

306
cypress/platform/knsv-reset.html Normal file
View File

@@ -0,0 +1,306 @@
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<style>
body {
/* background: rgb(221, 208, 208); */
/* background: #333; */
font-family: 'Arial';
/* font-size: 18px !important; */
}
h1 {
color: grey;
}
.mermaid2 {
display: none;
}
.mermaid svg {
/* font-size: 18px !important; */
/* background-color: #efefef;
background-image: radial-gradient(#fff 51%, transparent 91%),
radial-gradient(#fff 51%, transparent 91%);
background-size: 20px 20px;
background-position:
0 0,
10px 10px;
background-repeat: repeat; */
}
.malware {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background: red;
color: black;
display: flex;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
font-size: 72px;
}
/* tspan {
font-size: 6px !important;
} */
</style>
</head>
<body>
<pre id="diagram" class="mermaid"></pre>
<pre id="diagram2" class="mermaid"></pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import layouts from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err);
};
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
let code = `
stateDiagram
S:S
T:T
U:U
state Z {
state X {
Y:Ypsilon
}
}
A
S --> T: angrepp
S --> T: angrepp
T --> U
Y --> V
C
D
E
`;
code = `
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
`;
// code = `
// flowchart BT
// A
// subgraph one
// a1 --> a2
// end
// subgraph two
// a3
// end
// `;
// code = `
// flowchart TB
// subgraph one
// a1-->a2
// end`;
// let positions = JSON.parse(
// '{"nodes":{"S":{"x":30.78125,"y":43.5},"Y":{"x":127.94140625,"y":50}},"edges":{}}'
// );
function exctractPositions(svg) {
const positions = { nodes: {}, edges: {} };
// Extract the viewbox paddings - TOSDO: update in collab
const viewBox = svg.getAttribute('viewBox').split(' ');
const viewBoxX = parseFloat(viewBox[0]);
const viewBoxY = parseFloat(viewBox[1]);
// console.log('viewBox:', viewBoxX, viewBoxY);
svg.querySelectorAll('[data-et="node"]').forEach((node) => {
if (node.tagName === 'g') {
// console.log('node:', node);
const id = node.dataset.id;
const bbox = node.getBBox();
const transform = node.getAttribute('transform');
const x = parseFloat(transform.split(',')[0].split('(')[1]);
const y = parseFloat(transform.split(',')[1].split(')')[0]);
// Get the bounding rectangle of the element
const rect = node.getBoundingClientRect();
// Get the absolute position relative to the document
const absoluteX = rect.left + window.pageXOffset + viewBoxX;
const absoluteY = rect.top + window.pageYOffset + viewBoxY;
positions.nodes[id] = {
x: absoluteX + rect.width / 2,
y: absoluteY + rect.height / 2,
width: rect.width,
height: rect.height,
};
}
});
svg.querySelectorAll('[data-et="cluster"]').forEach((node) => {
// console.log('cluster:', node);
if (node.tagName === 'g') {
const id = node.dataset.id;
// console.log('cluster:', node);
const transform = node.getAttribute('transform');
const rect = node.getBoundingClientRect();
// Get the absolute position relative to the document
const absoluteX = rect.left + window.pageXOffset + viewBoxX;
const absoluteY = rect.top + window.pageYOffset + viewBoxY;
positions.nodes[id] = {
x: absoluteX + rect.width / 2,
y: absoluteY + rect.height / 2,
width: rect.width,
height: rect.height,
};
}
});
svg.querySelectorAll('[data-et="edge"]').forEach((edge) => {
// if (node.tagName === 'g') {
const path = edge.getBoundingClientRect();
// Get the absolute position relative to the document
const absoluteX = path.left + window.pageXOffset + viewBoxX;
const absoluteY = path.top + window.pageYOffset + viewBoxY;
console.log(
'absoluteX:',
absoluteX,
'absoluteY:',
absoluteY,
'offset',
window.pageXOffset
);
const id = edge.dataset.id;
const points = JSON.parse(atob(edge.dataset.points));
console.log('edge:', points, absoluteX, absoluteY);
let minX = 10000;
let minY = 10000;
points.forEach((point) => {
if (point.x < minX) {
minX = point.x;
}
if (point.y < minY) {
minY = point.y;
}
});
let dx = absoluteX - minX;
let dy = absoluteY - minY;
if (dx < 1) {
dx = 0;
}
if (dy < 1) {
dy = 0;
}
positions.edges[id] = {
points: points.map((point) => {
console.log('point:', point.y, absoluteY);
return {
x: point.x + dx,
y: point.y + dy,
};
}),
};
// }
});
return positions;
}
const mode = 'reset';
if (mode === 'reset') {
mermaid.initialize({
startOnLoad: false,
layout: 'elk',
fontFamily: 'Kalam',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
logLevel: 5,
});
const { svg } = await mermaid.render('the-id-of-the-svg', code);
const elem = document.querySelector('#diagram');
elem.innerHTML = svg;
elem.classList.remove('mermaid');
const positions = exctractPositions(elem.firstChild);
// console.log('Positions:', JSON.stringify(positions));
const { svg: svg2 } = await mermaid.render(
'the-id-of-the-svg2',
'---\n config:\n layout: fixed\n---' + code,
undefined,
positions
);
// console.log('svg2', svg2);
const elem2 = document.querySelector('#diagram2');
elem2.innerHTML = svg2;
} else {
mermaid.initialize({
startOnLoad: false,
// look: 'handdrawn',
layout: 'fixed',
fontFamily: 'Kalam',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
logLevel: 0,
});
const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
// console.log(JSON.stringify(positions));
const elem = document.querySelector('#diagram');
elem.innerHTML = svg;
}
</script>
</body>
</html>

45
cypress/platform/knsv2.html
View File

@@ -338,6 +338,39 @@ flowchart TD
</pre> </pre>
<pre id="diagram" class="mermaid">
---
title: hello2
config:
look: neo
layout: dagre
elk:
nodePlacementStrategy: BRANDES_KOEPF
---
flowchart
S
T
U
subgraph Z
subgraph X
Y[Ypsilon]
end
end
subgraph Q
Q1[Quintus]
end
A
S -- angrepp --> T
T -- Apa --> U
T -- Varge --> V
C
D
E
</pre
>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
--- ---
title: hello2 title: hello2
@@ -394,7 +427,7 @@ flowchart LR
</pre </pre
> >
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid2">
flowchart TB flowchart TB
c1-->a2 c1-->a2
subgraph one subgraph one
@@ -432,7 +465,10 @@ flowchart TB
window.callback = function () { window.callback = function () {
alert('A callback was triggered'); alert('A callback was triggered');
}; };
mermaid.initialize({ function callback() {
alert('It worked');
}
await mermaid.initialize({
// theme: 'base', // theme: 'base',
// handDrawnSeed: 12, // handDrawnSeed: 12,
// look: 'handDrawn', // look: 'handDrawn',
@@ -455,10 +491,9 @@ flowchart TB
fontSize: 12, fontSize: 12,
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
callback,
}); });
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
console.error('In parse error:'); console.error('In parse error:');
console.error(err); console.error(err);

25
packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
View File

@@ -15,18 +15,18 @@ import { getConfig } from '../../../diagram-api/diagramAPI.js';
let nodeDB = new Map(); let nodeDB = new Map();
const fixInterSections = (points, startNodeId, endNodeId) => { // const fixInterSections = (points, startNodeId, endNodeId) => {
const startNode = nodeDB.get(startNodeId); // const startNode = nodeDB.get(startNodeId);
const endNode = nodeDB.get(endNodeId); // const endNode = nodeDB.get(endNodeId);
// Get the intersections // // Get the intersections
const startIntersection = startNode.intersect(points[1]); // const startIntersection = startNode.intersect(points[1]);
const endIntersection = endNode.intersect(points[points.length - 2]); // const endIntersection = endNode.intersect(points[points.length - 2]);
// Replace the first and last points with their respective intersections // // Replace the first and last points with their respective intersections
const fixedPoints = [startIntersection, ...points.slice(1, -1), endIntersection]; // const fixedPoints = [startIntersection, ...points.slice(1, -1), endIntersection];
return fixedPoints; // return points;
}; // };
const calcIntersectionPoint = (node, point) => { const calcIntersectionPoint = (node, point) => {
const intersection = node.intersect(point); const intersection = node.intersect(point);
@@ -81,9 +81,9 @@ const calcIntersections = (startNodeId, endNodeId, startNodeSize, endNodeSize) =
const doRender = async (_elem, data4Layout, siteConfig, positions) => { const doRender = async (_elem, data4Layout, siteConfig, positions) => {
const elem = _elem.insert('g').attr('class', 'root'); const elem = _elem.insert('g').attr('class', 'root');
elem.insert('g').attr('class', 'clusters'); elem.insert('g').attr('class', 'clusters');
const nodes = elem.insert('g').attr('class', 'nodes');
const edgePaths = elem.insert('g').attr('class', 'edgePaths'); const edgePaths = elem.insert('g').attr('class', 'edgePaths');
const edgeLabels = elem.insert('g').attr('class', 'edgeLabels'); const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
const nodes = elem.insert('g').attr('class', 'nodes');
if (!positions?.nodes || !positions?.edges) { if (!positions?.nodes || !positions?.edges) {
positions = {}; positions = {};
@@ -234,7 +234,8 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
], ],
}; };
} }
edge.points = fixInterSections(positions.edges[edge.id].points, edge.start, edge.end); // edge.points = fixInterSections(positions.edges[edge.id].points, edge.start, edge.end);
edge.points = positions.edges[edge.id].points;
const paths = insertEdge(edgePaths, edge, {}, data4Layout.type, {}, {}, data4Layout.diagramId); const paths = insertEdge(edgePaths, edge, {}, data4Layout.type, {}, {}, data4Layout.diagramId);
paths.updatedPath = paths.originalPath; paths.updatedPath = paths.originalPath;
positionEdgeLabel(edge, paths); positionEdgeLabel(edge, paths);

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

@@ -376,14 +376,15 @@ const findAdjacentPoint = function (pointA, pointB, distance) {
const fixCorners = function (lineData) { const fixCorners = function (lineData) {
const { cornerPointPositions } = extractCornerPoints(lineData); const { cornerPointPositions } = extractCornerPoints(lineData);
const newLineData = []; const newLineData = [];
const r = 4;
for (let i = 0; i < lineData.length; i++) { for (let i = 0; i < lineData.length; i++) {
if (cornerPointPositions.includes(i)) { if (cornerPointPositions.includes(i)) {
const prevPoint = lineData[i - 1]; const prevPoint = lineData[i - 1];
const nextPoint = lineData[i + 1]; const nextPoint = lineData[i + 1];
const cornerPoint = lineData[i]; const cornerPoint = lineData[i];
const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5); const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, r);
const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5); const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, r);
const xDiff = newNextPoint.x - newPrevPoint.x; const xDiff = newNextPoint.x - newPrevPoint.x;
const yDiff = newNextPoint.y - newPrevPoint.y; const yDiff = newNextPoint.y - newPrevPoint.y;
@@ -397,7 +398,7 @@ const fixCorners = function (lineData) {
Math.abs(nextPoint.x - prevPoint.x), Math.abs(nextPoint.x - prevPoint.x),
Math.abs(nextPoint.y - prevPoint.y) Math.abs(nextPoint.y - prevPoint.y)
); );
const r = 5;
if (cornerPoint.x === newPrevPoint.x) { if (cornerPoint.x === newPrevPoint.x) {
newCornerPoint = { newCornerPoint = {
x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a, x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
@@ -431,6 +432,8 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
const tail = startNode; const tail = startNode;
var head = endNode; var head = endNode;
const pointsStr = btoa(JSON.stringify(points));
if (head.intersect && tail.intersect) { if (head.intersect && tail.intersect) {
points = points.slice(1, edge.points.length - 1); points = points.slice(1, edge.points.length - 1);
points.unshift(tail.intersect(points[0])); points.unshift(tail.intersect(points[0]));
@@ -475,13 +478,16 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
lineData.splice(-1, 0, midPoint); lineData.splice(-1, 0, midPoint);
} }
let curve = curveBasis; let curve = curveBasis;
// let curve = curveLinear;
// let curve = curveCardinal;
if (edge.curve) { if (edge.curve) {
curve = edge.curve; curve = edge.curve;
} }
const { x, y } = getLineFunctionsWithOffset(edge); const { x, y } = getLineFunctionsWithOffset(edge);
const lineFunction = line().x(x).y(y).curve(curve); const lineFunction = line().x(x).y(y).curve(curve);
// const pointsStr = btoa(JSON.stringify(lineData));
// console.log('Line data', lineData);
let strokeClasses; let strokeClasses;
switch (edge.thickness) { switch (edge.thickness) {
case 'normal': case 'normal':
@@ -544,6 +550,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
svgPath.attr('data-edge', true); svgPath.attr('data-edge', true);
svgPath.attr('data-et', 'edge'); svgPath.attr('data-et', 'edge');
svgPath.attr('data-id', edge.id); svgPath.attr('data-id', edge.id);
svgPath.attr('data-points', pointsStr);
// DEBUG code, adds a red circle at each edge coordinate // DEBUG code, adds a red circle at each edge coordinate
// cornerPoints.forEach((point) => { // cornerPoints.forEach((point) => {
// elem // elem
@@ -557,9 +564,9 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
// lineData.forEach((point) => { // lineData.forEach((point) => {
// elem // elem
// .append('circle') // .append('circle')
// .style('stroke', 'blue') // .style('stroke', 'red')
// .style('fill', 'blue') // .style('fill', 'red')
// .attr('r', 3) // .attr('r', 1)
// .attr('cx', point.x) // .attr('cx', point.x)
// .attr('cy', point.y); // .attr('cy', point.y);
// }); // });

1
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@@ -53,7 +53,6 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
.attr('style', nodeStyles) .attr('style', nodeStyles)
.attr('rx', rx) .attr('rx', rx)
.attr('data-id', node.id) .attr('data-id', node.id)
.attr('data-et', 'node')
.attr('ry', ry) .attr('ry', ry)
.attr('x', x) .attr('x', x)
.attr('y', y) .attr('y', y)