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

WIP

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-09-14 10:11:43 +02:00
parent ccdb803501
commit 836d3a87be
5 changed files with 84 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
cypress/platform/knsv2.html
View File

@@ -26,6 +26,8 @@
} }
.mermaid { .mermaid {
border: 1px solid #ddd; border: 1px solid #ddd;
margin: 10px;
background: pink;
} }
.mermaid2 { .mermaid2 {
display: none; display: none;
@@ -38,6 +40,7 @@
background-size: 20px 20px; background-size: 20px 20px;
background-position: 0 0, 10px 10px; background-position: 0 0, 10px 10px;
background-repeat: repeat; background-repeat: repeat;
border: 1px solid red;
} }
.malware { .malware {
position: fixed; position: fixed;
@@ -62,10 +65,13 @@
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block-beta
id1("Wide 1") %% id1("Wide 1")
id2("2") id2("2")
id3("3") block
id4("A final one") id3
id4
end
%% id4("A final one")
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">

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

@@ -325,17 +325,13 @@ const rect = async (parent, node) => {
// const totalHeight = bbox.height + node.padding * 2; // const totalHeight = bbox.height + node.padding * 2;
const totalWidth = node.positioned ? node.width : bbox.width + node.padding; const totalWidth = node.positioned ? node.width : bbox.width + node.padding;
const totalHeight = node.positioned ? node.height : bbox.height + node.padding; const totalHeight = node.positioned ? node.height : bbox.height + node.padding;
const x = node.positioned ? node.x - node.width / 2 - halfPadding : -bbox.width / 2 - halfPadding; const x = node.positioned ? -totalWidth / 2 : -bbox.width / 2 - halfPadding;
const y = node.positioned const y = node.positioned ? -totalHeight / 2 : -bbox.height / 2 - halfPadding;
? node.y - node.height / 2 - halfPadding
: -bbox.height / 2 - halfPadding;
rect rect
.attr('class', 'basic label-container') .attr('class', 'basic label-container')
.attr('style', node.style) .attr('style', node.style)
.attr('rx', node.rx) .attr('rx', node.rx)
.attr('ry', node.ry) .attr('ry', node.ry)
// .attr('x', -bbox.width / 2 - node.padding)
// .attr('y', -bbox.height / 2 - node.padding)
.attr('x', x) .attr('x', x)
.attr('y', y) .attr('y', y)
.attr('width', totalWidth) .attr('width', totalWidth)
@@ -1030,8 +1026,8 @@ export const clear = () => {
}; };
export const positionNode = (node) => { export const positionNode = (node) => {
console.log('Node id = ', node.id);
const el = nodeElems[node.id]; const el = nodeElems[node.id];
log.trace( log.trace(
'Transforming node', 'Transforming node',
node.diff, node.diff,

22
packages/mermaid/src/diagrams/block/blockRenderer.ts
View File

@@ -16,6 +16,7 @@ import type { Block } from './blockTypes.js';
// import { diagram as BlockDiagram } from './blockDiagram.js'; // import { diagram as BlockDiagram } from './blockDiagram.js';
import { configureSvgSize } from '../../setupGraphViewbox.js'; import { configureSvgSize } from '../../setupGraphViewbox.js';
import { Uid } from '../../rendering-util/uid.js'; import { Uid } from '../../rendering-util/uid.js';
import { pad } from 'lodash';
export const draw = async function ( export const draw = async function (
text: string, text: string,
@@ -42,19 +43,28 @@ export const draw = async function (
const nodes = svg.insert('g').attr('class', 'block'); const nodes = svg.insert('g').attr('class', 'block');
await calculateBlockSizes(nodes, bl, db); await calculateBlockSizes(nodes, bl, db);
const bounds = layout(db); const bounds = layout(db);
console.log('Here blocks', bl);
await insertBlocks(nodes, bl, db); await insertBlocks(nodes, bl, db);
console.log('Here', bl); // console.log('Here', bl);
// Establish svg dimensions and get width and height // Establish svg dimensions and get width and height
// //
// const bounds = nodes.node().getBoundingClientRect(); // const bounds2 = nodes.node().getBoundingClientRect();
const height = bounds.height + 600; const bounds2 = bounds;
const width = bounds.width + 699; const padding = 10;
// Why, oh why ????
const magicFactor = Math.max(1, Math.round(0.125 * (bounds2.width / bounds2.height)));
const height = bounds2.height + magicFactor + 10;
const width = bounds2.width + 10;
const useMaxWidth = false; const useMaxWidth = false;
configureSvgSize(svg, height, width, useMaxWidth); configureSvgSize(svg, height, width, useMaxWidth);
console.log('Here Bounds', bounds); console.log('Here Bounds', bounds, bounds2);
svg.attr('viewBox', `${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}`); svg.attr(
'viewBox',
`${bounds2.x - 5} ${bounds2.y - 5} ${bounds2.width + 10} ${bounds2.height + 10}`
);
// svg.attr('viewBox', `${-200} ${-200} ${400} ${400}`);
// Prepare data for construction based on diagObj.db // Prepare data for construction based on diagObj.db
// This must be a mutable object with `nodes` and `links` properties: // This must be a mutable object with `nodes` and `links` properties:

19
packages/mermaid/src/diagrams/block/layout.ts
View File

@@ -66,17 +66,17 @@ let maxY = 0;
function findBounds(block: Block) { function findBounds(block: Block) {
if (block.size) { if (block.size) {
const { x, y, width, height } = block.size; const { x, y, width, height } = block.size;
if (x - width < minX) { if (x - width / 2 < minX) {
minX = x - width; minX = x - width / 2;
} }
if (y - height < minY) { if (y - height / 2 < minY) {
minY = y - height; minY = y - height / 2;
} }
if (x > maxX) { if (x + width / 2 > maxX) {
maxX = x; maxX = x + width / 2;
} }
if (y > maxY) { if (y + height / 2 > maxY) {
maxY = y; maxY = y + height / 2;
} }
} }
if (block.children) { if (block.children) {
@@ -90,13 +90,14 @@ export function layout(db: BlockDB) {
const blocks = db.getBlocks(); const blocks = db.getBlocks();
const root = { id: 'root', type: 'composite', children: blocks } as Block; const root = { id: 'root', type: 'composite', children: blocks } as Block;
layoutBLock(root, db); layoutBLock(root, db);
positionBlock(root, db); // positionBlock(root, db);
minX = 0; minX = 0;
minY = 0; minY = 0;
maxX = 0; maxX = 0;
maxY = 0; maxY = 0;
findBounds(root); findBounds(root);
console.log('Here maxX', maxX);
const height = maxY - minY; const height = maxY - minY;
const width = maxX - minX; const width = maxX - minX;
return { x: minX, y: minY, width, height }; return { x: minX, y: minY, width, height };

3
packages/mermaid/src/diagrams/block/renderHelpers.ts
View File

@@ -1,5 +1,5 @@
import { getStylesFromArray } from '../../utils.js'; import { getStylesFromArray } from '../../utils.js';
import { insertNode } from '../../dagre-wrapper/nodes.js'; import { insertNode, positionNode } from '../../dagre-wrapper/nodes.js';
import { getConfig } from '../../config.js'; import { getConfig } from '../../config.js';
import { ContainerElement } from 'd3'; import { ContainerElement } from 'd3';
import type { Block } from './blockTypes.js'; import type { Block } from './blockTypes.js';
@@ -146,6 +146,7 @@ export async function insertBlockPositioned(elem: any, block: any, db: any) {
// Add the element to the DOM to size it // Add the element to the DOM to size it
const obj = db.getBlock(node.id); const obj = db.getBlock(node.id);
const nodeEl = await insertNode(elem, node); const nodeEl = await insertNode(elem, node);
positionNode(node);
} }
export async function performOperations( export async function performOperations(