marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-04 04:44:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adding size-tester for checking size calculations with fixed sizes

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-09-26 18:26:49 +02:00
parent 2a05b479ae
commit 0afd83a0c3
2 changed files with 83 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
cypress/platform/size-tester.html Normal file
View File

@@ -0,0 +1,79 @@
<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 {
font-family: 'Arial';
}
</style>
</head>
<body>
<div id="diagram"></div>
<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.initialize({
startOnLoad: false,
// look: 'handdrawn',
layout: 'fixed',
// layout: 'elk',
fontFamily: 'Kalam',
logLevel: 1,
});
let code = `
flowchart TB
n81["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
n81@{ shape: 'rect'}
`;
let positions = {
edges: {},
nodes: {
n81: {
x: 10.5520477294922,
y: 10.0867919921875,
width: 300,
height: 200,
},
},
};
const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
const elem = document.querySelector('#diagram');
elem.innerHTML = svg;
</script>
</body>
</html>

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
View File

@@ -3,6 +3,7 @@ import { getConfig } from '../../../diagram-api/diagramAPI.js';
import { select } from 'd3';
import { evaluate, sanitizeText } from '../../../diagrams/common/common.js';
import { decodeEntities } from '../../../utils.js';
import { log } from '../../../logger.js';
export const labelHelper = async (parent, node, _classes) => {
let cssClasses;
@@ -110,6 +111,9 @@ export const updateNodeBounds = (node, element) => {
const bbox = element.node().getBBox();
node.width = bbox.width;
node.height = bbox.height;
log.debug('updateNodeBounds: #####################################');
log.debug('updateNodeBounds:', node.id, node.width, node.height);
log.debug('updateNodeBounds: #####################################');
};
/**