Skip to content

Commit

Permalink
#5237 WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashishjain0512
ashishjain0512 committed Apr 24, 2024
1 parent b7f864c commit d220720
Show file tree
Hide file tree
Showing 9 changed files with 89 additions and 203 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ cypress/snapshots/
.tsbuildinfo
tsconfig.tsbuildinfo

knsv*.html
#knsv*.html
local*.html
stats/

Expand Down
2 changes: 1 addition & 1 deletion cypress/platform/knsv2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
<body>
<pre id="diagram" class="mermaid">
stateDiagram-v2
Second
ASH --> KNUT
</pre
>
<pre id="diagram" class="mermaid2">
Expand Down
17 changes: 15 additions & 2 deletions packages/mermaid/src/dagre-wrapper/nodes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(

Check failure on line 380 in packages/mermaid/src/dagre-wrapper/nodes.js

View workflow job for this annotation

GitHub Actions / lint (18.x) 

Unexpected console statement
'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)
Expand Down
70 changes: 41 additions & 29 deletions packages/mermaid/src/diagrams/state/stateDb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
DEFAULT_STATE_TYPE,
DIVIDER_TYPE,
} from './stateCommon.js';
import { node } from 'stylis';

const START_NODE = '[*]';
const START_TYPE = 'start';
Expand Down Expand Up @@ -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 = [];
Expand Down
3 changes: 1 addition & 2 deletions packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Check failure on line 86 in packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

View workflow job for this annotation

GitHub Actions / build-mermaid (18.x) 

Property 'type' does not exist on type 'LayoutData'.
data4Layout.layoutAlgorithm = 'dagre-wrapper';

Check failure on line 87 in packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

View workflow job for this annotation

GitHub Actions / build-mermaid (18.x) 

Property 'layoutAlgorithm' does not exist on type 'LayoutData'.
data4Layout.skin = 'roughjs';

Check failure on line 88 in packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

View workflow job for this annotation

GitHub Actions / build-mermaid (18.x) 

Property 'skin' does not exist on type 'LayoutData'.
Expand All @@ -92,7 +91,7 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.rankSpacing = conf.rankSpacing || 50;

Check failure on line 91 in packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

View workflow job for this annotation

GitHub Actions / build-mermaid (18.x) 

Property 'rankSpacing' does not exist on type 'LayoutData'.

Check failure on line 91 in packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

View workflow job for this annotation

GitHub Actions / build-mermaid (18.x) 

'conf' is possibly 'undefined'.

Check failure on line 91 in packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

View workflow job for this annotation

GitHub Actions / build-mermaid (18.x) 

Property 'rankSpacing' does not exist on type 'StateDiagramConfig'.
data4Layout.markers = ['barb'];
data4Layout.diagramId = id;

console.log('REF1:', data4Layout);
await render(data4Layout, svg, element);
};

Expand Down
5 changes: 5 additions & 0 deletions packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)));
Expand Down
28 changes: 19 additions & 9 deletions ...ng-util/rendering-elements/shapes/rect.js → ...ng-util/rendering-elements/shapes/rect.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

/**
*
Expand All @@ -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')) {
Expand All @@ -41,18 +50,19 @@ 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,
'node ' + node.classes + ' ' + node.class,
true
);

console.log('rect node', node);
console.log('new rect node', node);

// add the rect
const rect = shapeSvg.insert('rect', ':first-child');
Expand All @@ -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) => {
Expand All @@ -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);
Expand All @@ -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) => {
Expand Down
5 changes: 5 additions & 0 deletions packages/mermaid/src/rendering-util/types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading

0 comments on commit d220720

Please sign in to comment.