diff --git a/.gitignore b/.gitignore
index a0fd1c50b..267ff4091 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,7 +35,7 @@ cypress/snapshots/
.tsbuildinfo
tsconfig.tsbuildinfo
-knsv*.html
+#knsv*.html
local*.html
stats/
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 5cc8036d5..e52019e40 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -59,7 +59,7 @@
stateDiagram-v2
- Second
+ ASH --> KNUT
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 052bc8874..ff1b7d568 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -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)
diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
index c5d5d390a..29ea43799 100644
--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -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 = [];
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
index 7e30ece82..bf72d3cbb 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -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);
};
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
index f6760f96f..6600df08d 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -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)));
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.js b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
similarity index 79%
rename from packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.js
rename to packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
index 96b803fdb..e26118541 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
@@ -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,
+ 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) => {
diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts
index 497a84acc..38a48b38d 100644
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -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
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9c860f9c4..dde85ebf6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -503,61 +503,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:
@@ -5351,22 +5296,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:
@@ -5561,26 +5490,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:
@@ -5609,17 +5518,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}
@@ -15861,45 +15759,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'}
@@ -16129,24 +15988,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'}
@@ -16996,6 +16837,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