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

Merge branch '5237-unified-layout-common-renderer' of github.com:mermaid-js/mermaid into 5237-unified-layout-common-renderer

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-06-13 14:27:16 +02:00
parent 926762a800 fc17733770
commit ef83adb36e
8 changed files with 812 additions and 722 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1195
cypress/platform/flowchart-refactor.html
View File

File diff suppressed because it is too large Load Diff

312
cypress/platform/flowchart-sate.html
View File

@@ -1,181 +1,191 @@
<html> <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"
/>
<head> <style>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> body {
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> font-family: 'Arial';
<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> table {
body { width: 100%;
font-family: 'Arial'; border-collapse: collapse;
} table-layout: fixed;
}
table { th,
width: 100%; td {
border-collapse: collapse; border: 1px solid black;
table-layout: fixed; padding: 10px;
} text-align: center;
vertical-align: middle;
}
th, .separator {
td { height: 20px;
border: 1px solid black; background-color: #f0f0f0;
padding: 10px; }
text-align: center;
vertical-align: middle;
}
.separator { .vertical-header {
height: 20px; text-align: center;
background-color: #f0f0f0; }
}
.vertical-header { .collapsible {
text-align: center; background-color: #f9f9f9;
} color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible { .active,
background-color: #f9f9f9; .collapsible:hover {
color: #444; background-color: #ccc;
cursor: pointer; }
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:after {
.collapsible:hover { content: '\002B';
background-color: #ccc; color: #777;
} font-weight: bold;
float: right;
margin-left: 2px;
}
.collapsible:after { .active:after {
content: '\002B'; content: '\2212';
color: #777; }
font-weight: bold;
float: right;
margin-left: 2px;
}
.active:after { .content {
content: "\2212"; padding: 0 5px;
} max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.content { .content .pre-scrollable {
padding: 0 5px; max-height: 200px;
max-height: 0; overflow-y: scroll;
overflow: hidden; }
transition: max-height 0.2s ease-out; </style>
background-color: #f1f1f1; </head>
}
.content .pre-scrollable { <body>
max-height: 200px; <table>
overflow-y: scroll; <tr>
} <th></th>
</style> <!-- Placeholder for the top left corner -->
</head> <th>State rough</th>
<th>Flowchart rough</th>
<body> </tr>
<table> <tr>
<tr> <th class="vertical-header">
<th></th> <!-- Placeholder for the top left corner --> <button class="collapsible">Stadium shape</button>
<th>State rough</th> <div class="content">
<th>Flowchart rough</th> <div class="pre-scrollable">
</tr> <pre>
<tr>
<th class="vertical-header">
<button class="collapsible">Stadium shape</button>
<div class="content">
<div class="pre-scrollable">
<pre>
flowchart LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
stateDiagram-v2 stateDiagram-v2
stateA stateA
</pre> </pre
</td> >
<td> </td>
<pre id="diagram2" class="mermaid"> <td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
</pre> </pre
</td> >
</td>
</tr>
</table>
</tr> <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) {};
mermaid.initialize({
</table> handdrawn: false,
mergeEdges: true,
layout: 'dagre',
<script type="module"> flowchart: { titleTopMargin: 10 },
import mermaid from './mermaid.esm.mjs'; // fontFamily: 'Caveat',
import { layouts } from './mermaid-layout-elk.esm.mjs'; fontFamily: 'Kalam',
mermaid.registerLayoutLoaders(layouts); sequence: {
mermaid.parseError = function (err, hash) { actorFontFamily: 'courier',
noteFontFamily: 'courier',
}; messageFontFamily: 'courier',
},
mermaid.initialize({ fontSize: 16,
handdrawn: false, logLevel: 0,
mergeEdges: true,
layout: 'dagre',
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
fontFamily: 'Kalam',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
fontSize: 16,
logLevel: 0,
});
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
let coll = document.getElementsByClassName("collapsible");
for (const element of coll) {
element.addEventListener("click", function () {
this.classList.toggle("active");
let content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
}); });
} function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
</script> let coll = document.getElementsByClassName('collapsible');
</body> for (const element of coll) {
element.addEventListener('click', function () {
</html> this.classList.toggle('active');
let content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
});
}
</script>
</body>
</html>

1
cypress/platform/knsv2.html
View File

@@ -150,6 +150,7 @@ flowchart LR
end end
Apa --- C Apa --- C
A --x C A --x C
</pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
--- ---

1
cypress/platform/state-refactor.html
View File

@@ -105,6 +105,7 @@
stateId stateId
</pre> </pre>
</div> </div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">

9
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@@ -795,10 +795,10 @@ const addNodeFromVertex = (
config: any, config: any,
look: string look: string
) => { ) => {
let parentId = parentDB.get(vertex.id); const parentId = parentDB.get(vertex.id);
let isGroup = subGraphDB.get(vertex.id) || false; const isGroup = subGraphDB.get(vertex.id) || false;
let node = findNode(nodes, vertex.id); const node = findNode(nodes, vertex.id);
if (!node) { if (!node) {
nodes.push({ nodes.push({
id: vertex.id, id: vertex.id,
@@ -852,7 +852,7 @@ export const getData = () => {
const n = getVertices(); const n = getVertices();
n.forEach((vertex) => { n.forEach((vertex) => {
const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, config.look); addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, config.look);
}); });
const e = getEdges(); const e = getEdges();
@@ -874,7 +874,6 @@ export const getData = () => {
pattern: rawEdge.stroke, pattern: rawEdge.stroke,
look: config.look, look: config.look,
}; };
console.log('rawEdge SPLIT', rawEdge, index);
edges.push(edge); edges.push(edge);
}); });

11
packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
View File

@@ -188,17 +188,6 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
insertCluster(clusters, node); insertCluster(clusters, node);
// A cluster in the non-recursive way // A cluster in the non-recursive way
console.log(
'A tainted cluster node with children XBX',
v,
node.id,
node.width,
node.height,
node.x,
node.y,
'offset',
parent?.offsetY
);
clusterDb[node.id].node = node; clusterDb[node.id].node = node;
} else { } else {
const parent = graph.node(node.parentId); const parent = graph.node(node.parentId);

2
packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View File

@@ -287,7 +287,7 @@ const roundedWithTitle = (parent, node) => {
const rectBox = rect.node().getBBox(); const rectBox = rect.node().getBBox();
node.height = rectBox.height; node.height = rectBox.height;
node.offsetX = 0; node.offsetX = 0;
// Used by payout engone to position subgraph in parent // Used by layout engine to position subgraph in parent
node.offsetY = bbox.height - node.padding / 2; node.offsetY = bbox.height - node.padding / 2;
node.labelBBox = bbox; node.labelBBox = bbox;

3
packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
View File

@@ -37,8 +37,7 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
const { cssStyles } = node; const { cssStyles } = node;
if (node.look === 'handdrawn') { if (node.look === 'handdrawn') {
console.log('Trapezoid: Inside handdrawn block'); // @ts-ignore - rough is not typed
// @ts-ignore
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {}); const options = userNodeOverrides(node, {});
const pathData = createTrapezoidPathD(0, 0, w, h); const pathData = createTrapezoidPathD(0, 0, w, h);