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

chore: Fix eslint errors

Browse Source
This commit is contained in:
Sidharth Vinod 2024-05-24 14:32:22 +05:30
parent e09410448c
commit dfe223c3b8
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
6 changed files with 31 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
packages/mermaid/src/dagre-wrapper/index-refactored.js
View File

@ -1,209 +0,0 @@
import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
import insertMarkers from './markers.js';
import { updateNodeBounds } from './shapes/util.js';
import {
clear as clearGraphlib,
clusterDb,
adjustClustersAndEdges,
findNonClusterChild,
sortNodesByHierarchy,
} from './mermaid-graphlib.js';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes.js';
import { insertCluster, clear as clearClusters } from './clusters.js';
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
import { log } from '../logger.js';
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
import { getConfig } from '../diagram-api/diagramAPI.js';
// import type { LayoutData, LayoutMethod } from '../rendering-util/types.js';
// import type { MermaidConfig } from '../config.type.js';
const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => {
log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
const dir = graph.graph().rankdir;
log.trace('Dir in recursive render - dir:', dir);
const elem = _elem.insert('g').attr('class', 'root');
if (!graph.nodes()) {
log.info('No nodes found for', graph);
} else {
log.info('Recursive render XXX', graph.nodes());
}
if (graph.edges().length > 0) {
log.trace('Recursive edges', graph.edge(graph.edges()[0]));
}
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
await Promise.all(
graph.nodes().map(async function (v) {
const node = graph.node(v);
if (parentCluster !== undefined) {
const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
// data.clusterPositioning = true;
log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
graph.setNode(parentCluster.id, data);
if (!graph.parent(v)) {
log.trace('Setting parent', v, parentCluster.id);
graph.setParent(v, parentCluster.id, data);
}
}
log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
if (node && node.clusterNode) {
// const children = graph.children(v);
log.info('Cluster identified', v, node.width, graph.node(v));
const o = await recursiveRender(
nodes,
node.graph,
diagramtype,
id,
graph.node(v),
siteConfig
);
const newEl = o.elem;
updateNodeBounds(node, newEl);
node.diff = o.diff || 0;
log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
setNodeElem(newEl, node);
log.warn('Recursive render complete ', newEl, node);
} else {
if (graph.children(v).length > 0) {
// This is a cluster but not to be rendered recursively
// Render as before
log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
log.info(findNonClusterChild(node.id, graph));
clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
// insertCluster(clusters, graph.node(v));
} else {
log.info('Node - the non recursive path', v, node.id, node);
await insertNode(nodes, graph.node(v), dir);
}
}
})
);
// Insert labels, this will insert them into the dom so that the width can be calculated
// Also figure out which edges point to/from clusters and adjust them accordingly
// Edges from/to clusters really points to the first child in the cluster.
// TODO: pick optimal child in the cluster to us as link anchor
graph.edges().forEach(function (e) {
const edge = graph.edge(e.v, e.w, e.name);
log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
log.info('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));
// Check if link is either from or to a cluster
log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
insertEdgeLabel(edgeLabels, edge);
});
graph.edges().forEach(function (e) {
log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
});
log.info('#############################################');
log.info('### Layout ###');
log.info('#############################################');
log.info(graph);
dagreLayout(graph);
log.info('Graph after layout:', graphlibJson.write(graph));
// Move the nodes to the correct place
let diff = 0;
const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
sortNodesByHierarchy(graph).forEach(function (v) {
const node = graph.node(v);
log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
log.info(
'Position ' + v + ': (' + node.x,
',' + node.y,
') width: ',
node.width,
' height: ',
node.height
);
if (node && node.clusterNode) {
// clusterDb[node.id].node = node;
node.y += subGraphTitleTotalMargin;
positionNode(node);
} else {
// Non cluster node
if (graph.children(v).length > 0) {
// A cluster in the non-recursive way
// positionCluster(node);
node.height += subGraphTitleTotalMargin;
insertCluster(clusters, node);
clusterDb[node.id].node = node;
} else {
node.y += subGraphTitleTotalMargin / 2;
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, e, 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.type === 'group') {
diff = n.diff;
}
});
return { elem, diff };
};
export const render = async (data4Layout, svg, element) => {
// Create the input mermaid.graph
const graph = new graphlib.Graph({
multigraph: true,
compound: true,
})
.setGraph({
rankdir: data4Layout.direction,
nodesep: data4Layout.nodeSpacing,
ranksep: data4Layout.rankSpacing,
marginx: 8,
marginy: 8,
})
.setDefaultEdgeLabel(function () {
return {};
});
// Org
insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
clearNodes();
clearEdges();
clearClusters();
clearGraphlib();
// Add the nodes and edges to the graph
data4Layout.nodes.forEach((node) => {
graph.setNode(node.id, { ...node });
});
log.warn('Graph at first:', JSON.stringify(graphlibJson.write(graph)));
adjustClustersAndEdges(graph);
log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
const siteConfig = getConfig();
await recursiveRender(
element,
graph,
data4Layout.type,
data4Layout.diagramId,
undefined,
siteConfig
);
};

2
packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
View File

@ -29,7 +29,7 @@ export const setConf = function (cnf) {
*/
export const addVertices = async function (vert, g, svgId, root, doc, diagObj) {
const svg = root.select(`[id="${svgId}"]`);
console.log('SVG:', svg, svg.node(), 'root:', root, root.node());
// console.log('SVG:', svg, svg.node(), 'root:', root, root.node());
const keys = vert.keys();

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

@ -1,41 +1,37 @@
import { getConfig } from '../../diagram-api/diagramAPI.js';
import { log } from '../../logger.js';
import common from '../common/common.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import {
DEFAULT_DIAGRAM_DIRECTION,
STMT_STATE,
STMT_RELATION,
STMT_CLASSDEF,
STMT_APPLYCLASS,
CSS_DIAGRAM_CLUSTER,
CSS_DIAGRAM_CLUSTER_ALT,
CSS_DIAGRAM_NOTE,
CSS_DIAGRAM_STATE,
CSS_EDGE,
CSS_EDGE_NOTE_EDGE,
DEFAULT_NESTED_DOC_DIR,
DEFAULT_STATE_TYPE,
DIVIDER_TYPE,
G_EDGE_STYLE,
DOMID_STATE,
DOMID_TYPE_SPACER,
G_EDGE_ARROWHEADSTYLE,
G_EDGE_LABELPOS,
G_EDGE_LABELTYPE,
G_EDGE_STYLE,
G_EDGE_THICKNESS,
CSS_EDGE,
DEFAULT_NESTED_DOC_DIR,
NOTE,
NOTE_ID,
PARENT,
PARENT_ID,
SHAPE_DIVIDER,
SHAPE_GROUP,
CSS_DIAGRAM_CLUSTER,
CSS_DIAGRAM_CLUSTER_ALT,
CSS_DIAGRAM_STATE,
SHAPE_STATE_WITH_DESC,
SHAPE_STATE,
SHAPE_START,
SHAPE_END,
SHAPE_GROUP,
SHAPE_NOTE,
SHAPE_NOTEGROUP,
CSS_DIAGRAM_NOTE,
DOMID_TYPE_SPACER,
DOMID_STATE,
NOTE_ID,
PARENT_ID,
NOTE,
PARENT,
CSS_EDGE_NOTE_EDGE,
SHAPE_START,
SHAPE_STATE,
SHAPE_STATE_WITH_DESC,
STMT_RELATION,
STMT_STATE,
} from './stateCommon.js';
// List of nodes created from the parsed diagram statement items
@ -241,7 +237,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
}
const newNode = nodeDb[itemId];
console.log('New Node:', newNode);
// console.log('New Node:', newNode);
// Save data for description and group so that for instance a statement without description overwrites
// one with description @todo TODO What does this mean? If important, add a test for it
@ -387,7 +383,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
insertOrUpdateNode(nodes, nodeData);
}
console.log('Nodes:', nodes);
// console.log('Nodes:', nodes);
}
if (parsedItem.doc) {
log.trace('Adding nodes children ');

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

@ -12,9 +12,9 @@ import { CSS_DIAGRAM, DEFAULT_NESTED_DOC_DIR } from './stateCommon.js';
* Get the direction from the statement items.
* Look through all of the documents (docs) in the parsedItems
* Because is a _document_ direction, the default direction is not necessarily the same as the overall default _diagram_ direction.
* @param {object[]} parsedItem - the parsed statement item to look through
* @param [defaultDir] - the direction to use if none is found
* @returns {string}
* @param parsedItem - the parsed statement item to look through
* @param defaultDir - the direction to use if none is found
* @returns The direction to use
*/
const getDir = (parsedItem: any, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
let dir = defaultDir;
@ -69,13 +69,13 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.direction = DIR;
// TODO: Should we move these two to baseConfig? These types are not there in StateConfig.
// @ts-expect-error
// @ts-expect-error TODO: Will be fixed after config refactor
data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
// @ts-expect-error
// @ts-expect-error TODO: Will be fixed after config refactor
data4Layout.rankSpacing = conf?.rankSpacing || 50;
data4Layout.markers = ['barb'];
data4Layout.diagramId = id;
console.log('REF1:', data4Layout);
// console.log('REF1:', data4Layout);
await render(data4Layout, svg, element);
const padding = 8;
utils.insertTitle(

1
packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
View File

@ -278,6 +278,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
clusterDb[e.w]
);
if (clusterDb[e.v] && clusterDb[e.w] && clusterDb[e.v] === clusterDb[e.w]) {
// cspell:ignore trixing
log.warn('Fixing and trixing link to self - removing XXX', e.v, e.w, e.name);
log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name);
v = getAnchorId(e.v);

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

@ -375,26 +375,6 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
return points;
};
const calcOffset = function (src, dest, parentLookupDb) {
const ancestor = findCommonAncestor(src, dest, parentLookupDb);
if (ancestor === undefined || ancestor === 'root') {
return { x: 0, y: 0 };
}
const ancestorOffset = nodeDb[ancestor].offset;
return { x: ancestorOffset.posX, y: ancestorOffset.posY };
};
// Function to insert a midpoint
/**
*
* @param p1
* @param p2
*/
function insertMidpoint(p1, p2) {
return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
}
/**
* Given an edge, this function will return the corner points of the edge. This is defined as:
* one point that has a previous point and a next point such as the angle between the previous