mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
WIP
This commit is contained in:
Knut Sveidqvist
parent
ccdb803501
commit
836d3a87be
@ -26,6 +26,8 @@
|
||||
}
|
||||
.mermaid {
|
||||
border: 1px solid #ddd;
|
||||
margin: 10px;
|
||||
background: pink;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
@ -38,6 +40,7 @@
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-repeat: repeat;
|
||||
border: 1px solid red;
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
@ -62,10 +65,13 @@
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
block-beta
|
||||
id1("Wide 1")
|
||||
%% id1("Wide 1")
|
||||
id2("2")
|
||||
id3("3")
|
||||
id4("A final one")
|
||||
block
|
||||
id3
|
||||
id4
|
||||
end
|
||||
%% id4("A final one")
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
|
||||
@ -27,7 +27,7 @@ const question = async (parent, node) => {
|
||||
questionElem.attr('style', node.style);
|
||||
updateNodeBounds(node, questionElem);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
log.warn('Intersect called');
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
@ -52,7 +52,7 @@ const choice = (parent, node) => {
|
||||
const choice = shapeSvg.insert('polygon', ':first-child').attr(
|
||||
'points',
|
||||
points
|
||||
.map(function (d) {
|
||||
.map(function(d) {
|
||||
return d.x + ',' + d.y;
|
||||
})
|
||||
.join(' ')
|
||||
@ -62,7 +62,7 @@ const choice = (parent, node) => {
|
||||
node.width = 28;
|
||||
node.height = 28;
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.circle(node, 14, point);
|
||||
};
|
||||
|
||||
@ -89,7 +89,7 @@ const hexagon = async (parent, node) => {
|
||||
hex.attr('style', node.style);
|
||||
updateNodeBounds(node, hex);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
@ -115,7 +115,7 @@ const rect_left_inv_arrow = async (parent, node) => {
|
||||
node.width = w + h;
|
||||
node.height = h;
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
@ -138,7 +138,7 @@ const lean_right = async (parent, node) => {
|
||||
el.attr('style', node.style);
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
@ -161,7 +161,7 @@ const lean_left = async (parent, node) => {
|
||||
el.attr('style', node.style);
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
@ -184,7 +184,7 @@ const trapezoid = async (parent, node) => {
|
||||
el.attr('style', node.style);
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
@ -207,7 +207,7 @@ const inv_trapezoid = async (parent, node) => {
|
||||
el.attr('style', node.style);
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
@ -231,7 +231,7 @@ const rect_right_inv_arrow = async (parent, node) => {
|
||||
el.attr('style', node.style);
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
@ -281,7 +281,7 @@ const cylinder = async (parent, node) => {
|
||||
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
const pos = intersect.rect(node, point);
|
||||
const x = pos.x - node.x;
|
||||
|
||||
@ -325,17 +325,13 @@ const rect = async (parent, node) => {
|
||||
// const totalHeight = bbox.height + node.padding * 2;
|
||||
const totalWidth = node.positioned ? node.width : bbox.width + 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 y = node.positioned
|
||||
? node.y - node.height / 2 - halfPadding
|
||||
: -bbox.height / 2 - halfPadding;
|
||||
const x = node.positioned ? -totalWidth / 2 : -bbox.width / 2 - halfPadding;
|
||||
const y = node.positioned ? -totalHeight / 2 : -bbox.height / 2 - halfPadding;
|
||||
rect
|
||||
.attr('class', 'basic label-container')
|
||||
.attr('style', node.style)
|
||||
.attr('rx', node.rx)
|
||||
.attr('ry', node.ry)
|
||||
// .attr('x', -bbox.width / 2 - node.padding)
|
||||
// .attr('y', -bbox.height / 2 - node.padding)
|
||||
.attr('x', x)
|
||||
.attr('y', y)
|
||||
.attr('width', totalWidth)
|
||||
@ -354,7 +350,7 @@ const rect = async (parent, node) => {
|
||||
|
||||
updateNodeBounds(node, rect);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.rect(node, point);
|
||||
};
|
||||
|
||||
@ -387,7 +383,7 @@ const labelRect = async (parent, node) => {
|
||||
|
||||
updateNodeBounds(node, rect);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.rect(node, point);
|
||||
};
|
||||
|
||||
@ -499,20 +495,20 @@ const rectWithTitle = (parent, node) => {
|
||||
select(descr).attr(
|
||||
'transform',
|
||||
'translate( ' +
|
||||
// (titleBox.width - bbox.width) / 2 +
|
||||
(bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +
|
||||
', ' +
|
||||
(titleBox.height + halfPadding + 5) +
|
||||
')'
|
||||
// (titleBox.width - bbox.width) / 2 +
|
||||
(bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +
|
||||
', ' +
|
||||
(titleBox.height + halfPadding + 5) +
|
||||
')'
|
||||
);
|
||||
select(text).attr(
|
||||
'transform',
|
||||
'translate( ' +
|
||||
// (titleBox.width - bbox.width) / 2 +
|
||||
(bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +
|
||||
', ' +
|
||||
0 +
|
||||
')'
|
||||
// (titleBox.width - bbox.width) / 2 +
|
||||
(bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +
|
||||
', ' +
|
||||
0 +
|
||||
')'
|
||||
);
|
||||
// Get the size of the label
|
||||
|
||||
@ -541,7 +537,7 @@ const rectWithTitle = (parent, node) => {
|
||||
|
||||
updateNodeBounds(node, rect);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.rect(node, point);
|
||||
};
|
||||
|
||||
@ -567,7 +563,7 @@ const stadium = async (parent, node) => {
|
||||
|
||||
updateNodeBounds(node, rect);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.rect(node, point);
|
||||
};
|
||||
|
||||
@ -591,7 +587,7 @@ const circle = async (parent, node) => {
|
||||
|
||||
updateNodeBounds(node, circle);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
log.info('Circle intersect', node, bbox.width / 2 + halfPadding, point);
|
||||
return intersect.circle(node, bbox.width / 2 + halfPadding, point);
|
||||
};
|
||||
@ -629,7 +625,7 @@ const doublecircle = async (parent, node) => {
|
||||
|
||||
updateNodeBounds(node, outerCircle);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
log.info('DoubleCircle intersect', node, bbox.width / 2 + halfPadding + gap, point);
|
||||
return intersect.circle(node, bbox.width / 2 + halfPadding + gap, point);
|
||||
};
|
||||
@ -659,7 +655,7 @@ const subroutine = async (parent, node) => {
|
||||
el.attr('style', node.style);
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
@ -678,7 +674,7 @@ const start = (parent, node) => {
|
||||
|
||||
updateNodeBounds(node, circle);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.circle(node, 7, point);
|
||||
};
|
||||
|
||||
@ -710,7 +706,7 @@ const forkJoin = (parent, node, dir) => {
|
||||
updateNodeBounds(node, shape);
|
||||
node.height = node.height + node.padding / 2;
|
||||
node.width = node.width + node.padding / 2;
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.rect(node, point);
|
||||
};
|
||||
|
||||
@ -731,7 +727,7 @@ const end = (parent, node) => {
|
||||
|
||||
updateNodeBounds(node, circle);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.circle(node, 7, point);
|
||||
};
|
||||
|
||||
@ -896,10 +892,10 @@ const class_box = (parent, node) => {
|
||||
select(classTitleLabel).attr(
|
||||
'transform',
|
||||
'translate( ' +
|
||||
((-1 * maxWidth) / 2 + diffX) +
|
||||
', ' +
|
||||
((-1 * maxHeight) / 2 + verticalPos) +
|
||||
')'
|
||||
((-1 * maxWidth) / 2 + diffX) +
|
||||
', ' +
|
||||
((-1 * maxHeight) / 2 + verticalPos) +
|
||||
')'
|
||||
);
|
||||
verticalPos += classTitleBBox.height + rowPadding;
|
||||
|
||||
@ -916,10 +912,10 @@ const class_box = (parent, node) => {
|
||||
select(lbl).attr(
|
||||
'transform',
|
||||
'translate( ' +
|
||||
-maxWidth / 2 +
|
||||
', ' +
|
||||
((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +
|
||||
')'
|
||||
-maxWidth / 2 +
|
||||
', ' +
|
||||
((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +
|
||||
')'
|
||||
);
|
||||
//get the height of the bounding box of each member if exists
|
||||
const memberBBox = lbl?.getBBox();
|
||||
@ -954,7 +950,7 @@ const class_box = (parent, node) => {
|
||||
|
||||
updateNodeBounds(node, rect);
|
||||
|
||||
node.intersect = function (point) {
|
||||
node.intersect = function(point) {
|
||||
return intersect.rect(node, point);
|
||||
};
|
||||
|
||||
@ -1030,8 +1026,8 @@ export const clear = () => {
|
||||
};
|
||||
|
||||
export const positionNode = (node) => {
|
||||
console.log('Node id = ', node.id);
|
||||
const el = nodeElems[node.id];
|
||||
|
||||
log.trace(
|
||||
'Transforming node',
|
||||
node.diff,
|
||||
@ -1044,10 +1040,10 @@ export const positionNode = (node) => {
|
||||
el.attr(
|
||||
'transform',
|
||||
'translate(' +
|
||||
(node.x + diff - node.width / 2) +
|
||||
', ' +
|
||||
(node.y - node.height / 2 - padding) +
|
||||
')'
|
||||
(node.x + diff - node.width / 2) +
|
||||
', ' +
|
||||
(node.y - node.height / 2 - padding) +
|
||||
')'
|
||||
);
|
||||
} else {
|
||||
el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
|
||||
|
||||
@ -16,6 +16,7 @@ import type { Block } from './blockTypes.js';
|
||||
// import { diagram as BlockDiagram } from './blockDiagram.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import { Uid } from '../../rendering-util/uid.js';
|
||||
import { pad } from 'lodash';
|
||||
|
||||
export const draw = async function (
|
||||
text: string,
|
||||
@ -42,19 +43,28 @@ export const draw = async function (
|
||||
const nodes = svg.insert('g').attr('class', 'block');
|
||||
await calculateBlockSizes(nodes, bl, db);
|
||||
const bounds = layout(db);
|
||||
console.log('Here blocks', bl);
|
||||
await insertBlocks(nodes, bl, db);
|
||||
|
||||
console.log('Here', bl);
|
||||
// console.log('Here', bl);
|
||||
|
||||
// Establish svg dimensions and get width and height
|
||||
//
|
||||
// const bounds = nodes.node().getBoundingClientRect();
|
||||
const height = bounds.height + 600;
|
||||
const width = bounds.width + 699;
|
||||
// const bounds2 = nodes.node().getBoundingClientRect();
|
||||
const bounds2 = bounds;
|
||||
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;
|
||||
configureSvgSize(svg, height, width, useMaxWidth);
|
||||
console.log('Here Bounds', bounds);
|
||||
svg.attr('viewBox', `${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}`);
|
||||
console.log('Here Bounds', bounds, bounds2);
|
||||
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
|
||||
// This must be a mutable object with `nodes` and `links` properties:
|
||||
|
||||
@ -66,17 +66,17 @@ let maxY = 0;
|
||||
function findBounds(block: Block) {
|
||||
if (block.size) {
|
||||
const { x, y, width, height } = block.size;
|
||||
if (x - width < minX) {
|
||||
minX = x - width;
|
||||
if (x - width / 2 < minX) {
|
||||
minX = x - width / 2;
|
||||
}
|
||||
if (y - height < minY) {
|
||||
minY = y - height;
|
||||
if (y - height / 2 < minY) {
|
||||
minY = y - height / 2;
|
||||
}
|
||||
if (x > maxX) {
|
||||
maxX = x;
|
||||
if (x + width / 2 > maxX) {
|
||||
maxX = x + width / 2;
|
||||
}
|
||||
if (y > maxY) {
|
||||
maxY = y;
|
||||
if (y + height / 2 > maxY) {
|
||||
maxY = y + height / 2;
|
||||
}
|
||||
}
|
||||
if (block.children) {
|
||||
@ -90,13 +90,14 @@ export function layout(db: BlockDB) {
|
||||
const blocks = db.getBlocks();
|
||||
const root = { id: 'root', type: 'composite', children: blocks } as Block;
|
||||
layoutBLock(root, db);
|
||||
positionBlock(root, db);
|
||||
// positionBlock(root, db);
|
||||
|
||||
minX = 0;
|
||||
minY = 0;
|
||||
maxX = 0;
|
||||
maxY = 0;
|
||||
findBounds(root);
|
||||
console.log('Here maxX', maxX);
|
||||
const height = maxY - minY;
|
||||
const width = maxX - minX;
|
||||
return { x: minX, y: minY, width, height };
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 { ContainerElement } from 'd3';
|
||||
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
|
||||
const obj = db.getBlock(node.id);
|
||||
const nodeEl = await insertNode(elem, node);
|
||||
positionNode(node);
|
||||
}
|
||||
|
||||
export async function performOperations(
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user