GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues 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-04-24 14:51:07 +02:00
commit 01350467bd
9 changed files with 89 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -35,7 +35,7 @@ cypress/snapshots/
.tsbuildinfo
tsconfig.tsbuildinfo
knsv*.html
#knsv*.html
local*.html
stats/

2
cypress/platform/knsv2.html
View File

@ -59,7 +59,7 @@
<body>
<pre id="diagram" class="mermaid">
stateDiagram-v2
Second
ASH --> KNUT
</pre
>
<pre id="diagram" class="mermaid2">

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

@ -372,13 +372,26 @@ const rect = async (parent, node) => {
// add the rect
const rect = shapeSvg.insert('rect', ':first-child');
// console.log('Rect node:', node, 'bbox:', bbox, 'halfPadding:', halfPadding, 'node.padding:', node.padding);
// const totalWidth = bbox.width + node.padding * 2;
// const totalHeight = bbox.height + node.padding * 2;
const totalWidth = bbox.width + node.padding;
const totalHeight = bbox.height + node.padding;
console.log('Rect node:', node, rect.node(), 'bbox:', bbox, 'halfPadding:', halfPadding, 'node.padding:', node.padding, 'totalWidth:', totalWidth, 'totalHeight:', totalHeight);
console.log(
'Rect node:',
node,
rect.node(),
'bbox:',
bbox,
'halfPadding:',
halfPadding,
'node.padding:',
node.padding,
'totalWidth:',
totalWidth,
'totalHeight:',
totalHeight
);
rect
.attr('class', 'basic label-container')
.attr('style', node.style)

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

@ -21,6 +21,7 @@ import {
DEFAULT_STATE_TYPE,
DIVIDER_TYPE,
} from './stateCommon.js';
import { node } from 'stylis';
const START_NODE = '[*]';
const START_TYPE = 'start';
@ -542,37 +543,48 @@ const setDirection = (dir) => {
const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());
const dataFetcher = (parentId, doc, nodes, edges) => {
doc.forEach((item) => {
switch (item.stmt) {
case STMT_STATE:
if (parentId) {
nodes.push({ ...item, labelText: item.id, labelType: 'text', parentId, shape: 'rect' });
} else {
nodes.push({
...item,
labelText: item.id,
// description: item.id,
labelType: 'text',
labelStyle: '',
shape: 'rect',
domId: 'state-bla-bla-bla',
x: 100,
y: 100,
height: 100,
width: 100,
padding: 15,
classes: ' statediagram-state',
});
}
if (item.doc) {
dataFetcher(item.id, item.doc, nodes, edges);
}
break;
case STMT_RELATION:
edges.push(item);
break;
extract(doc);
//states
const stateKeys = Object.keys(currentDocument.states);
stateKeys.forEach((key) => {
const item = currentDocument.states[key];
if (parentId) {
nodes.push({ ...item, labelText: item.id, labelType: 'text', parentId, shape: 'rect' });
} else {
nodes.push({
...item,
labelText: item.id,
// description: item.id,
labelType: 'text',
labelStyle: '',
shape: 'rect',
padding: 15,
classes: ' statediagram-state',
});
}
});
//edges
currentDocument.relations.forEach((item) => {
edges.push({
id: item.id1 + item.id2,
from: item.id1,
to: item.id2,
label: item.relationTitle,
});
});
// if (item.doc) {
// dataFetcher(item.id, item.doc, nodes, edges);
// }
//break;
// case STMT_RELATION:
// edges.push(item);
// break;
// }
};
export const getData = () => {
const nodes = [];

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

@ -83,7 +83,6 @@ export const draw = async function (text: string, id: string, _version: string,
// // The performRender method provided in all supported diagrams is used to render the data
// performRender(data4Rendering);
console.log('REF1:', data4Layout);
data4Layout.type = diag.type;
data4Layout.layoutAlgorithm = 'dagre-wrapper';
data4Layout.skin = 'roughjs';
@ -92,7 +91,7 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.rankSpacing = conf.rankSpacing || 50;
data4Layout.markers = ['barb'];
data4Layout.diagramId = id;
console.log('REF1:', data4Layout);
await render(data4Layout, svg, element);
};

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

@ -203,6 +203,11 @@ export const render = async (data4Layout, svg, element) => {
graph.setNode(node.id, { ...node });
});
console.log('Edges:', data4Layout.edges);
data4Layout.edges.forEach((edge) => {
graph.setEdge(edge.from, edge.to, { ...edge });
});
log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
adjustClustersAndEdges(graph);
log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));

28
packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.js → packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
View File

@ -1,6 +1,7 @@
import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts';
/**
*
@ -9,12 +10,20 @@ import intersect from '../intersect/index.js';
* @param totalWidth
* @param totalHeight
*/
function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {
const strokeDashArray = [];
const addBorder = (length) => {
function applyNodePropertyBorders(
rect: d3.Selection<SVGRectElement, unknown, null, undefined>,
borders: string | undefined,
totalWidth: number,
totalHeight: number
) {
if (!borders) {
return;
}
const strokeDashArray: number[] = [];
const addBorder = (length: number) => {
strokeDashArray.push(length, 0);
};
const skipBorder = (length) => {
const skipBorder = (length: number) => {
strokeDashArray.push(0, length);
};
if (borders.includes('t')) {
@ -41,10 +50,11 @@ function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {
} else {
skipBorder(totalHeight);
}
rect.attr('stroke-dasharray', strokeDashArray.join(' '));
}
export const rect = async (parent, node) => {
export const rect = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent,
node,
@ -52,7 +62,7 @@ export const rect = async (parent, node) => {
true
);
console.log('rect node', node);
console.log('new rect node', node);
// add the rect
const rect = shapeSvg.insert('rect', ':first-child');
@ -75,7 +85,7 @@ export const rect = async (parent, node) => {
if (node.props) {
const propKeys = new Set(Object.keys(node.props));
if (node.props.borders) {
applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);
applyNodePropertyBorders(rect, node.props.borders + '', totalWidth, totalHeight);
propKeys.delete('borders');
}
propKeys.forEach((propKey) => {
@ -92,7 +102,7 @@ export const rect = async (parent, node) => {
return shapeSvg;
};
export const labelRect = async (parent, node) => {
export const labelRect = async (parent: SVGElement, node: Node) => {
const { shapeSvg } = await labelHelper(parent, node, 'label', true);
log.trace('Classes = ', node.class);
@ -108,7 +118,7 @@ export const labelRect = async (parent, node) => {
if (node.props) {
const propKeys = new Set(Object.keys(node.props));
if (node.props.borders) {
applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);
applyNodePropertyBorders(rect, node.borders, totalWidth, totalHeight);
propKeys.delete('borders');
}
propKeys.forEach((propKey) => {

5
packages/mermaid/src/rendering-util/types.d.ts vendored
View File

@ -33,6 +33,11 @@ interface Node {
tooltip?: string;
type: string;
width?: number;
intersect?: (point: any) => any;
// Specific properties for State Diagram nodes TODO remove and use generic properties
style?: string;
class?: string;
borders?: string;
}
// Common properties for any edge in the system

160
pnpm-lock.yaml generated
View File

@ -506,61 +506,6 @@ importers:
specifier: ^7.0.0
version: 7.0.0
packages/mermaid/src/vitepress:
dependencies:
'@vueuse/core':
specifier: ^10.1.0
version: 10.1.0(vue@3.3.4)
jiti:
specifier: ^1.18.2
version: 1.18.2
mermaid:
specifier: workspace:^
version: link:../..
vue:
specifier: ^3.3
version: 3.3.4
devDependencies:
'@iconify-json/carbon':
specifier: ^1.1.16
version: 1.1.16
'@unocss/reset':
specifier: ^0.58.0
version: 0.58.0
'@vite-pwa/vitepress':
specifier: ^0.3.0
version: 0.3.0(vite-plugin-pwa@0.17.0)
'@vitejs/plugin-vue':
specifier: ^4.2.1
version: 4.2.1(vite@4.4.12)(vue@3.3.4)
fast-glob:
specifier: ^3.2.12
version: 3.2.12
https-localhost:
specifier: ^4.7.1
version: 4.7.1
pathe:
specifier: ^1.1.0
version: 1.1.0
unocss:
specifier: ^0.58.0
version: 0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.4.12)
unplugin-vue-components:
specifier: ^0.26.0
version: 0.26.0(rollup@2.79.1)(vue@3.3.4)
vite:
specifier: ^4.4.12
version: 4.4.12(@types/node@18.17.5)
vite-plugin-pwa:
specifier: ^0.17.0
version: 0.17.0(vite@4.4.12)(workbox-build@7.0.0)(workbox-window@7.0.0)
vitepress:
specifier: 1.0.0-rc.39
version: 1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6)
workbox-window:
specifier: ^7.0.0
version: 7.0.0
packages/parser:
dependencies:
langium:
@ -5354,22 +5299,6 @@ packages:
eslint-visitor-keys: 3.4.3
dev: true
/@unocss/astro@0.58.0(rollup@2.79.1)(vite@4.4.12):
resolution: {integrity: sha512-df+tEFO5eKXjQOwSWQhS9IdjD0sfLHLtn8U09sEKR2Nmh5CvpwyBxmvLQgOCilPou7ehmyKfsyGRLZg7IMp+Ew==}
peerDependencies:
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
peerDependenciesMeta:
vite:
optional: true
dependencies:
'@unocss/core': 0.58.0
'@unocss/reset': 0.58.0
'@unocss/vite': 0.58.0(rollup@2.79.1)(vite@4.4.12)
vite: 4.4.12(@types/node@18.17.5)
transitivePeerDependencies:
- rollup
dev: true
/@unocss/astro@0.58.0(rollup@2.79.1)(vite@4.5.0):
resolution: {integrity: sha512-df+tEFO5eKXjQOwSWQhS9IdjD0sfLHLtn8U09sEKR2Nmh5CvpwyBxmvLQgOCilPou7ehmyKfsyGRLZg7IMp+Ew==}
peerDependencies:
@ -5564,26 +5493,6 @@ packages:
'@unocss/core': 0.58.0
dev: true
/@unocss/vite@0.58.0(rollup@2.79.1)(vite@4.4.12):
resolution: {integrity: sha512-OCUOLMSOBEtXOEyBbAvMI3/xdR175BWRzmvV9Wc34ANZclEvCdVH8+WU725ibjY4VT0gVIuX68b13fhXdHV41A==}
peerDependencies:
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
dependencies:
'@ampproject/remapping': 2.2.1
'@rollup/pluginutils': 5.1.0(rollup@2.79.1)
'@unocss/config': 0.58.0
'@unocss/core': 0.58.0
'@unocss/inspector': 0.58.0
'@unocss/scope': 0.58.0
'@unocss/transformer-directives': 0.58.0
chokidar: 3.5.3
fast-glob: 3.3.2
magic-string: 0.30.5
vite: 4.4.12(@types/node@18.17.5)
transitivePeerDependencies:
- rollup
dev: true
/@unocss/vite@0.58.0(rollup@2.79.1)(vite@4.5.0):
resolution: {integrity: sha512-OCUOLMSOBEtXOEyBbAvMI3/xdR175BWRzmvV9Wc34ANZclEvCdVH8+WU725ibjY4VT0gVIuX68b13fhXdHV41A==}
peerDependencies:
@ -5612,17 +5521,6 @@ packages:
vite-plugin-pwa: 0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
dev: true
/@vitejs/plugin-vue@4.2.1(vite@4.4.12)(vue@3.3.4):
resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0
vue: ^3.2.25
dependencies:
vite: 4.4.12(@types/node@18.17.5)
vue: 3.3.4
dev: true
/@vitejs/plugin-vue@4.2.1(vite@4.5.0)(vue@3.3.4):
resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
engines: {node: ^14.18.0 || >=16.0.0}
@ -15892,45 +15790,6 @@ packages:
engines: {node: '>= 10.0.0'}
dev: true
/unocss@0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.4.12):
resolution: {integrity: sha512-MSPRHxBqWN+1AHGV+J5uUy4//e6ZBK6O+ISzD0qrXcCD/GNtxk1+lYjOK2ltkUiKX539+/KF91vNxzhhwEf+xA==}
engines: {node: '>=14'}
peerDependencies:
'@unocss/webpack': 0.58.0
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
peerDependenciesMeta:
'@unocss/webpack':
optional: true
vite:
optional: true
dependencies:
'@unocss/astro': 0.58.0(rollup@2.79.1)(vite@4.4.12)
'@unocss/cli': 0.58.0(rollup@2.79.1)
'@unocss/core': 0.58.0
'@unocss/extractor-arbitrary-variants': 0.58.0
'@unocss/postcss': 0.58.0(postcss@8.4.33)
'@unocss/preset-attributify': 0.58.0
'@unocss/preset-icons': 0.58.0
'@unocss/preset-mini': 0.58.0
'@unocss/preset-tagify': 0.58.0
'@unocss/preset-typography': 0.58.0
'@unocss/preset-uno': 0.58.0
'@unocss/preset-web-fonts': 0.58.0
'@unocss/preset-wind': 0.58.0
'@unocss/reset': 0.58.0
'@unocss/transformer-attributify-jsx': 0.58.0
'@unocss/transformer-attributify-jsx-babel': 0.58.0
'@unocss/transformer-compile-class': 0.58.0
'@unocss/transformer-directives': 0.58.0
'@unocss/transformer-variant-group': 0.58.0
'@unocss/vite': 0.58.0(rollup@2.79.1)(vite@4.4.12)
vite: 4.4.12(@types/node@18.17.5)
transitivePeerDependencies:
- postcss
- rollup
- supports-color
dev: true
/unocss@0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.5.0):
resolution: {integrity: sha512-MSPRHxBqWN+1AHGV+J5uUy4//e6ZBK6O+ISzD0qrXcCD/GNtxk1+lYjOK2ltkUiKX539+/KF91vNxzhhwEf+xA==}
engines: {node: '>=14'}
@ -16160,24 +16019,6 @@ packages:
- supports-color
dev: true
/vite-plugin-pwa@0.17.0(vite@4.4.12)(workbox-build@7.0.0)(workbox-window@7.0.0):
resolution: {integrity: sha512-cOyEG8EEc7JHmyMapTnjK2j0g2BIC3ErlmOHyGzVu8hqjyF9Jt6yWMmVNFtpA6v/NNyzP28ARf3vwzIAzR1kaw==}
engines: {node: '>=16.0.0'}
peerDependencies:
vite: ^3.1.0 || ^4.0.0 || ^5.0.0
workbox-build: ^7.0.0
workbox-window: ^7.0.0
dependencies:
debug: 4.3.4(supports-color@8.1.1)
fast-glob: 3.3.2
pretty-bytes: 6.1.1
vite: 4.4.12(@types/node@18.17.5)
workbox-build: 7.0.0
workbox-window: 7.0.0
transitivePeerDependencies:
- supports-color
dev: true
/vite-plugin-pwa@0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0):
resolution: {integrity: sha512-cOyEG8EEc7JHmyMapTnjK2j0g2BIC3ErlmOHyGzVu8hqjyF9Jt6yWMmVNFtpA6v/NNyzP28ARf3vwzIAzR1kaw==}
engines: {node: '>=16.0.0'}
@ -17027,6 +16868,7 @@ packages:
/workbox-google-analytics@7.0.0:
resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
dependencies:
workbox-background-sync: 7.0.0
workbox-core: 7.0.0