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

Merge branch 'alanaV11' into pebr/neo-style

Browse Source
This commit is contained in:
Per Brolin
2024-06-03 13:33:26 +02:00
parent 9fca13ca19 b9b678a429
commit 195ea6405a
17 changed files with 544 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
cypress/platform/knsv-pos.html Normal file
View File

@@ -0,0 +1,152 @@
<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>
<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',
fontFamily: 'Kalam',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
logLevel: 0,
});
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
let code = `
stateDiagram
S:Stillas
T:Tiger
U:Ulv
S --> T: angrepp
T --> U: Apa
T --> V: Varg
`;
const positions = {
nodes: {
S: { x: 0, y: 0 },
T: { x: 100, y: 100, width: 100, height: 100 },
U: { x: 200, y: 200 },
V: { x: 300, y: 100 },
},
edges: {
edge0: {
points: [
{ x: 0, y: 0 },
{ x: 50, y: 0 },
{ x: 100, y: 100 },
],
},
edge1: {
points: [
{ x: 100, y: 100 },
{ x: 200, y: 200 },
],
},
edge2: {
points: [
{ x: 100, y: 100 },
{ x: 175, y: 80 },
{ x: 200, y: 120 },
{ x: 300, y: 100 },
],
},
},
};
const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
// console.log(svg);
const elem = document.querySelector('#diagram');
elem.innerHTML = svg;
</script>
</body>
</html>

94
cypress/platform/knsv2.html
View File

@@ -80,37 +80,8 @@
init: { init: {
"theme":"base", "theme":"base",
"fontFamily": "Kalam", "fontFamily": "Kalam",
"themeVariables": { "themeVariables":
"background": "#FFFFFF", {
"primaryColor": "#7bdfa7",
"primaryTextColor": "#3c3c3b",
"secondaryColor": "#642470",
"secondaryTextColor": "#3c3c3b",
"tertiaryColor": "#1c736D",
"tertiaryTextColor": "#3c3c3b",
"noteBkgColor": "#9fd8ef",
"loopTextColor": "#636362",
"labelBoxBkgColor": "#642470",
"labelBoxBorderColor": "#642470",
"labelTextColor": "#d4d4d4",
"signalTextColor": "#636362",
"signalColor": "#642470"
}
}
}%%
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
</pre
>
<pre id="diagram" class="mermaid2">
%%{
init: {
"theme":"base",
"fontFamily": "Forth Bold",
"themeVariables": {
"background": "#FFFFFF", "background": "#FFFFFF",
"primaryColor": "#7bdfa7", "primaryColor": "#7bdfa7",
"primaryTextColor": "#3c3c3b", "primaryTextColor": "#3c3c3b",
@@ -136,30 +107,42 @@ sequenceDiagram
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid">
%%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram stateDiagram
A --> B S:Stillas
T:Tiger
U:Ulv
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
stateDiagram
state "This is a state description" as S
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": true} }%% %%{init: {"layout": "elk", "mergeEdges": true} }%%
flowchart flowchart
A --> B(This is B) A --> B(This is B)
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "NETWORK_SIMPLEX"} }%% %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
stateDiagram stateDiagram
State T0 { state if_state &lt;&lt;choice&gt;&gt;
direction LR [*] --> IsPositive
A --> B IsPositive --> if_state
} if_state --> False: if n < 0
State T1 { if_state --> True : if n >= 0
[*] --> NumLockOff </pre
NumLockOff --> NumLockOn : EvNumLockPressed >
NumLockOn --> NumLockOff : EvNumLockPressed <pre id="diagram" class="mermaid2">
} %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
stateDiagram
state if_state &lt;&lt;choice&gt;&gt;
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
@@ -250,16 +233,17 @@ stateDiagram-v2
console.error('Mermaid error: ', err); console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'base', // theme: 'base',
handdrawnSeed: 12, handdrawnSeed: 12,
look: 'handdrawn', look: 'handdrawn',
'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX', 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre', // layout: 'dagre',
layout: 'elk', // layout: 'elk',
layout: 'fixed',
flowchart: { titleTopMargin: 10 }, flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat', // fontFamily: 'Caveat',
// fontFamily: 'Kalam', fontFamily: 'Kalam',
fontFamily: 'courier', // fontFamily: 'courier',
sequence: { sequence: {
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: 'courier', noteFontFamily: 'courier',
@@ -275,10 +259,12 @@ stateDiagram-v2
console.error('In parse error:'); console.error('In parse error:');
console.error(err); console.error(err);
}; };
// mermaid.test1('first_slow', 1200).then((r) => console.info(r)); void (async () => {
// mermaid.test1('second_fast', 200).then((r) => console.info(r)); const { svg } = await mermaid.render('the-id-of-the-svg', code);
// mermaid.test1('third_fast', 200).then((r) => console.info(r)); console.log(svg);
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r)); const elem = document.querySelector('#graph-to-be');
elem.innerHTML = svg;
})();
</script> </script>
</body> </body>
</html> </html>

7
packages/mermaid-layout-elk/src/render.ts
View File

@@ -468,6 +468,13 @@ export const render = async (data4Layout, svg, element, algorithm) => {
'elk.layered.mergeEdges': data4Layout.config.mergeEdges, 'elk.layered.mergeEdges': data4Layout.config.mergeEdges,
'elk.direction': 'DOWN', 'elk.direction': 'DOWN',
'spacing.baseValue': 30, 'spacing.baseValue': 30,
// 'spacing.nodeNode': 40,
// 'spacing.nodeNodeBetweenLayers': 45,
// 'spacing.edgeNode': 40,
// 'spacing.edgeNodeBetweenLayers': 30,
// 'spacing.edgeEdge': 30,
// 'spacing.edgeEdgeBetweenLayers': 40,
// 'spacing.nodeSelfLoop': 50,
}, },
children: [], children: [],
edges: [], edges: [],

2
packages/mermaid/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@mermaid-chart/mermaid", "name": "@mermaid-chart/mermaid",
"version": "11.0.0-beta.2", "version": "11.0.0-beta.6",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module", "type": "module",
"module": "./dist/mermaid.core.mjs", "module": "./dist/mermaid.core.mjs",

4
packages/mermaid/src/Diagram.ts
View File

@@ -52,8 +52,8 @@ export class Diagram {
public renderer: DiagramDefinition['renderer'] public renderer: DiagramDefinition['renderer']
) {} ) {}
async render(id: string, version: string) { async render(id: string, version: string, positions?: any) {
await this.renderer.draw(this.text, id, version, this); await this.renderer.draw(this.text, id, version, this, positions);
} }
getParser() { getParser() {

5
packages/mermaid/src/diagram-api/types.ts
View File

@@ -117,7 +117,10 @@ export type DrawDefinition = (
text: string, text: string,
id: string, id: string,
version: string, version: string,
diagramObject: Diagram diagramObject: Diagram,
// Todo: types from positions when logic is done
// MC Special
positions?: any
) => void | Promise<void>; ) => void | Promise<void>;
export interface ParserDefinition { export interface ParserDefinition {

5
packages/mermaid/src/diagrams/state/dataFetcher.js
View File

@@ -408,3 +408,8 @@ export const dataFetcher = (
setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough, look); setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough, look);
} }
}; };
export const reset = () => {
nodeDb = {};
graphItemCount = 0;
};

5
packages/mermaid/src/diagrams/state/stateDb.js
View File

@@ -11,7 +11,7 @@ import {
setDiagramTitle, setDiagramTitle,
getDiagramTitle, getDiagramTitle,
} from '../common/commonDb.js'; } from '../common/commonDb.js';
import { dataFetcher } from './dataFetcher.js'; import { dataFetcher, reset as resetDataFetching } from './dataFetcher.js';
import { import {
DEFAULT_DIAGRAM_DIRECTION, DEFAULT_DIAGRAM_DIRECTION,
@@ -584,9 +584,8 @@ export const getData = () => {
const config = getConfig(); const config = getConfig();
const useRough = config.look === 'handdrawn'; const useRough = config.look === 'handdrawn';
const look = config.look; const look = config.look;
resetDataFetching();
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look); dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look);
console.log('State Nodes XDX:', nodes);
return { nodes, edges, other: {}, config }; return { nodes, edges, other: {}, config };
}; };

12
packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
View File

@@ -37,8 +37,14 @@ export const getClasses = function (
return diagramObj.db.getClasses(); return diagramObj.db.getClasses();
}; };
export const draw = async function (text: string, id: string, _version: string, diag: any) { export const draw = async function (
log.info('REF0:'); text: string,
id: string,
_version: string,
diag: any,
positions: any
) {
log.info('REF0:', positions);
log.info('Drawing state diagram (v2)', id); log.info('Drawing state diagram (v2)', id);
const { securityLevel, state: conf, layout } = getConfig(); const { securityLevel, state: conf, layout } = getConfig();
// Extracting the data from the parsed structure into a more usable form // Extracting the data from the parsed structure into a more usable form
@@ -76,7 +82,7 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.markers = ['barb']; data4Layout.markers = ['barb'];
data4Layout.diagramId = id; data4Layout.diagramId = id;
// console.log('REF1:', data4Layout); // console.log('REF1:', data4Layout);
await render(data4Layout, svg, element); await render(data4Layout, svg, element, positions);
const padding = 8; const padding = 8;
utils.insertTitle( utils.insertTitle(
element, element,

4
packages/mermaid/src/mermaid.ts
View File

@@ -393,13 +393,13 @@ const parse = async (
* element will be removed when rendering is completed. * element will be removed when rendering is completed.
* @returns Returns the SVG Definition and BindFunctions. * @returns Returns the SVG Definition and BindFunctions.
*/ */
const render: typeof mermaidAPI.render = (id, text, container) => { const render: typeof mermaidAPI.render = (id, text, container, positions) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// This promise will resolve when the mermaidAPI.render call is done. // This promise will resolve when the mermaidAPI.render call is done.
// It will be queued first and will be executed when it is first in line // It will be queued first and will be executed when it is first in line
const performCall = () => const performCall = () =>
new Promise((res, rej) => { new Promise((res, rej) => {
mermaidAPI.render(id, text, container).then( mermaidAPI.render(id, text, container, positions).then(
(r) => { (r) => {
// This resolves for the promise for the queue handling // This resolves for the promise for the queue handling
res(r); res(r);

5
packages/mermaid/src/mermaidAPI.ts
View File

@@ -340,7 +340,8 @@ export const removeExistingElements = (
const render = async function ( const render = async function (
id: string, id: string,
text: string, text: string,
svgContainingElement?: Element svgContainingElement?: Element,
positions: any
): Promise<RenderResult> { ): Promise<RenderResult> {
addDiagrams(); addDiagrams();
@@ -456,7 +457,7 @@ const render = async function (
// ------------------------------------------------------------------------------- // -------------------------------------------------------------------------------
// Draw the diagram with the renderer // Draw the diagram with the renderer
try { try {
await diag.renderer.draw(text, id, version, diag); await diag.renderer.draw(text, id, version, diag, positions);
} catch (e) { } catch (e) {
if (config.suppressErrorRendering) { if (config.suppressErrorRendering) {
removeTempElements(); removeTempElements();

240
packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js Normal file
View File

@@ -0,0 +1,240 @@
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import insertMarkers from '../../rendering-elements/markers.js';
import { updateNodeBounds } from '../../rendering-elements/shapes/util.js';
// import {
// clear as clearGraphlib,
// clusterDb,
// adjustClustersAndEdges,
// findNonClusterChild,
// sortNodesByHierarchy,
// } from './mermaid-graphlib.js';
import {
insertNode,
positionNode,
clear as clearNodes,
setNodeElem,
} from '../../rendering-elements/nodes.js';
import { insertCluster, clear as clearClusters } from '../../rendering-elements/clusters.js';
import {
insertEdgeLabel,
positionEdgeLabel,
insertEdge,
clear as clearEdges,
} from '../../rendering-elements/edges.js';
import { log } from '$root/logger.js';
import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
const fixInterSections = (points, startNode, endNode) => {
console.log('Fixing intersections - ', points, startNode, endNode);
// Get the intersections
const startIntersection = startNode.intersect(points[1]);
const endIntersection = endNode.intersect(points[points.length - 2]);
// Replace the first and last points with their respective intersections
const fixedPoints = [startIntersection, ...points.slice(1, -1), endIntersection];
return fixedPoints;
};
const doRender = async (_elem, data4Layout, siteConfig, positions) => {
const elem = _elem.insert('g').attr('class', 'root');
const clusters = elem.insert('g').attr('class', 'clusters');
const edgePaths = elem.insert('g').attr('class', 'edgePaths');
const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
const nodes = elem.insert('g').attr('class', 'nodes');
// Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
// to the abstract node and is later used by dagre for the layout
let freePos = 0;
const nodeDB = {};
await Promise.all(
data4Layout.nodes.map(async function (node) {
if (node.x === undefined || node.y === undefined) {
const pos = positions.nodes[node.id];
node.x = pos?.x || 0;
node.y = pos?.y || 0;
node.height = pos?.height || 0;
node.width = pos?.width || 0;
}
await insertNode(nodes, node, 'TB');
nodeDB[node.id] = node;
})
);
data4Layout.edges.forEach(function (edge) {
edge.x = edge?.x || 0;
edge.y = edge?.y || 0;
insertEdgeLabel(edgeLabels, edge);
});
// log.info('############################################# XXX');
// log.info('### Layout ### XXX');
// log.info('############################################# XXX');
// Position the nodes
await Promise.all(
data4Layout.nodes.map(async function (node) {
positionNode(node);
})
);
// Insert the edges and position the edge labels
data4Layout.edges.forEach(function (edge) {
console.log('Edge: ', edge, nodes[edge.start]);
// log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
edge.points = fixInterSections(
positions.edges[edge.id].points,
nodeDB[edge.start],
nodeDB[edge.end]
);
const paths = insertEdge(
edgePaths,
edge,
{},
data4Layout.type,
undefined,
data4Layout.diagramId
);
paths.updatedPath = paths.originalPath;
console.log('Paths = ', paths);
positionEdgeLabel(edge, paths);
});
// log.info('Graph after layout:', graphlibJson.write(graph));
// // Move the nodes to the correct place
// let diff = 0;
// log.info('Need the size here XAX', graph.node('T1')?.height);
// let { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
// subGraphTitleTotalMargin = 0;
// sortNodesByHierarchy(graph).forEach(function (v) {
// const node = graph.node(v);
// const p = graph.node(node?.parentId);
// subGraphTitleTotalMargin = p?.offsetY || subGraphTitleTotalMargin;
// log.info(
// 'Position XAX' + v + ': (' + node.x,
// ',' + node.y,
// ') width: ',
// node.width,
// ' height: ',
// node.height
// );
// if (node && node.clusterNode) {
// const parentId = graph.parent(v);
// // Adjust for padding when on root level
// node.y = parentId ? node.y + 2 : node.y - 8;
// node.x -= 8;
// log.info(
// 'A tainted cluster node XBX',
// v,
// node.id,
// node.width,
// node.height,
// node.x,
// node.y,
// graph.parent(v)
// );
// clusterDb[node.id].node = node;
// // node.y += subGraphTitleTotalMargin - 10;
// node.y -= (node.offsetY || 0) / 2;
// positionNode(node);
// } else {
// // Non cluster node
// if (graph.children(v).length > 0) {
// node.height += 0;
// const parent = graph.node(node.parentId);
// const halfPadding = node?.padding / 2 || 0;
// const labelHeight = node?.labelBBox?.height || 0;
// const offsetY = labelHeight - halfPadding || 0;
// node.y += offsetY / 2 + 2;
// insertCluster(clusters, node);
// // A cluster in the non-recursive way
// log.info(
// 'A pure cluster node with children XBX',
// v,
// node.id,
// node.width,
// node.height,
// node.x,
// node.y,
// 'offset',
// parent?.offsetY
// );
// clusterDb[node.id].node = node;
// } else {
// const parent = graph.node(node.parentId);
// node.y += (parent?.offsetY || 0) / 2;
// log.info(
// 'A regular node XBX - using the padding',
// v,
// node.id,
// 'parent',
// node.parentId,
// node.width,
// node.height,
// node.x,
// node.y,
// 'offsetY',
// node.offsetY,
// 'parent',
// parent,
// node
// );
// positionNode(node);
// }
// }
// });
// // Move the edge labels to the correct place after layout
// graph.edges().forEach(function (e) {
// const edge = graph.edge(e);
// log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
// edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2));
// const paths = insertEdge(edgePaths, edge, clusterDb, diagramType, graph, id);
// positionEdgeLabel(edge, paths);
// });
// graph.nodes().forEach(function (v) {
// const n = graph.node(v);
// log.info(v, n.type, n.diff);
// if (n.isGroup) {
// diff = n.diff;
// }
// });
// log.trace('Returning from recursive render XAX', elem, diff);
return { elem, diff: 0 };
};
/**
* ###############################################################
* Render the graph
* ###############################################################
* @param data4Layout
* @param svg
* @param element
* @param algoritm
* @param algorithm
* @param positions
*/
export const render = async (data4Layout, svg, element, algorithm, positions) => {
console.log('Graph in render, positions: ', positions);
// Org
insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
clearNodes();
clearEdges();
clearClusters();
// clearGraphlib();
// log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
const siteConfig = getConfig();
await doRender(element, data4Layout, siteConfig, positions);
};

10
packages/mermaid/src/rendering-util/render.ts
View File

@@ -1,5 +1,5 @@
export interface LayoutAlgorithm { export interface LayoutAlgorithm {
render(data4Layout: any, svg: any, element: any, algorithm?: string): any; render(data4Layout: any, svg: any, element: any, algorithm?: string, positions: any): any;
} }
export type LayoutLoader = () => Promise<LayoutAlgorithm>; export type LayoutLoader = () => Promise<LayoutAlgorithm>;
@@ -24,17 +24,21 @@ const registerDefaultLayoutLoaders = () => {
name: 'dagre', name: 'dagre',
loader: async () => await import('./layout-algorithms/dagre/index.js'), loader: async () => await import('./layout-algorithms/dagre/index.js'),
}, },
{
name: 'fixed',
loader: async () => await import('./layout-algorithms/fixed/index.js'),
},
]); ]);
}; };
registerDefaultLayoutLoaders(); registerDefaultLayoutLoaders();
export const render = async (data4Layout: any, svg: any, element: any) => { export const render = async (data4Layout: any, svg: any, element: any, positions?: any) => {
if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) { if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`); throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
} }
const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm]; const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
const layoutRenderer = await layoutDefinition.loader(); const layoutRenderer = await layoutDefinition.loader();
return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm); return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm, positions);
}; };

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

@@ -5,7 +5,7 @@ import { createText } from '$root/rendering-util/createText.ts';
import utils from '$root/utils.js'; import utils from '$root/utils.js';
import { getLineFunctionsWithOffset } from '$root/utils/lineWithOffset.js'; import { getLineFunctionsWithOffset } from '$root/utils/lineWithOffset.js';
import { getSubGraphTitleMargins } from '$root/utils/subGraphTitleMargins.js'; import { getSubGraphTitleMargins } from '$root/utils/subGraphTitleMargins.js';
import { curveBasis, line, select } from 'd3'; import { curveBasis, curveLinear, curveCardinal, line, select } from 'd3';
import rough from 'roughjs'; import rough from 'roughjs';
import createLabel from './createLabel.js'; import createLabel from './createLabel.js';
import { addEdgeMarkers } from './edgeMarker.ts'; import { addEdgeMarkers } from './edgeMarker.ts';
@@ -157,7 +157,8 @@ export const positionEdgeLabel = (edge, paths) => {
pos.x, pos.x,
',', ',',
pos.y, pos.y,
') abc78' ') abc78',
el
); );
if (paths.updatedPath) { if (paths.updatedPath) {
x = pos.x; x = pos.x;
@@ -436,34 +437,38 @@ const fixCorners = function (lineData) {
// Find a new point on the line point 5 points back and push it to the new array // Find a new point on the line point 5 points back and push it to the new array
const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5); const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5);
const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5); const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5);
newLineData.push(newPrevPoint);
const xDiff = newNextPoint.x - newPrevPoint.x; const xDiff = newNextPoint.x - newPrevPoint.x;
const yDiff = newNextPoint.y - newPrevPoint.y; const yDiff = newNextPoint.y - newPrevPoint.y;
newLineData.push(newPrevPoint);
const a = Math.sqrt(2) * 2; const a = Math.sqrt(2) * 2;
let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y }; let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y };
if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) {
console.log(
'Corner point fixing',
Math.abs(nextPoint.x - prevPoint.x),
Math.abs(nextPoint.y - prevPoint.y)
);
const r = 5;
if (cornerPoint.x === newPrevPoint.x) { if (cornerPoint.x === newPrevPoint.x) {
// if (yDiff > 0) {
newCornerPoint = { newCornerPoint = {
x: xDiff < 0 ? newPrevPoint.x - 5 + a : newPrevPoint.x + 5 - a, x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a, y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,
}; };
// } else {
// newCornerPoint = { x: newPrevPoint.x - a, y: newPrevPoint.y + a };
// }
} else { } else {
// if (yDiff > 0) {
// newCornerPoint = { x: newPrevPoint.x - 5 + a, y: newPrevPoint.y + a };
// } else {
newCornerPoint = { newCornerPoint = {
x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a, x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,
y: yDiff < 0 ? newPrevPoint.y - 5 + a : newPrevPoint.y + 5 - a, y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a,
}; };
// }
} }
} else {
// newLineData.push(cornerPoint); console.log(
'Corner point skipping fixing',
Math.abs(nextPoint.x - prevPoint.x),
Math.abs(nextPoint.y - prevPoint.y)
);
}
newLineData.push(newCornerPoint, newNextPoint); newLineData.push(newCornerPoint, newNextPoint);
} else { } else {
newLineData.push(lineData[i]); newLineData.push(lineData[i]);
@@ -471,7 +476,6 @@ const fixCorners = function (lineData) {
} }
return newLineData; return newLineData;
}; };
/** /**
* Given a line, this function will return a new line where the corners are rounded. * Given a line, this function will return a new line where the corners are rounded.
* @param lineData * @param lineData
@@ -622,6 +626,11 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
.attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')) .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
.attr('style', edge.style); .attr('style', edge.style);
} }
// MC Special
svgPath.attr('data-edge', true);
svgPath.attr('data-et', 'edge');
svgPath.attr('data-id', edge.id);
// 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
@@ -632,6 +641,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
// .attr('cx', point.x) // .attr('cx', point.x)
// .attr('cy', point.y); // .attr('cy', point.y);
// }); // });
// lineData.forEach((point) => { // lineData.forEach((point) => {
// elem // elem
// .append('circle') // .append('circle')

8
packages/mermaid/src/rendering-util/rendering-elements/nodes.js
View File

@@ -36,6 +36,7 @@ const shapes = {
choice, choice,
note, note,
roundedRect, roundedRect,
rectWithTitle: roundedRect,
squareRect, squareRect,
stadium, stadium,
subroutine, subroutine,
@@ -57,9 +58,6 @@ export const insertNode = async (elem, node, dir) => {
let newEl; let newEl;
let el; let el;
if (node) {
console.log('BLA: rect node', JSON.stringify(node));
}
//special check for rect shape (with or without rounded corners) //special check for rect shape (with or without rounded corners)
if (node.shape === 'rect') { if (node.shape === 'rect') {
if (node.rx && node.ry) { if (node.rx && node.ry) {
@@ -83,6 +81,10 @@ export const insertNode = async (elem, node, dir) => {
el = await shapes[node.shape](elem, node, dir); el = await shapes[node.shape](elem, node, dir);
newEl = el; newEl = el;
} }
// MC Special
newEl.attr('data-id', node.id);
newEl.attr('data-node', true);
newEl.attr('data-et', 'node');
if (node.tooltip) { if (node.tooltip) {
el.attr('title', node.tooltip); el.attr('title', node.tooltip);
} }

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

@@ -17,10 +17,11 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
getNodeClasses(node), getNodeClasses(node),
true true
); );
const totalWidth = bbox.width + options.labelPaddingX * 2;
const totalHeight = bbox.height + options.labelPaddingY * 2; const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0);
const x = -bbox.width / 2 - options.labelPaddingX; const totalHeight = Math.max(bbox.height + options.labelPaddingY * 2, node?.height || 0);
const y = -bbox.height / 2 - options.labelPaddingY; const x = -totalWidth / 2;
const y = -totalHeight / 2;
let rect; let rect;
let { rx, ry } = node; let { rx, ry } = node;

12
packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts Normal file
View File

@@ -0,0 +1,12 @@
import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
import { drawRect } from './drawRect.js';
export const roundedRect = async (parent: SVGAElement, node: Node) => {
const options = {
rx: 5,
ry: 5,
classes: '',
} as RectOptions;
return drawRect(parent, node, options);
};