From dfe223c3b88924b9218827fdfd56cc747400e24f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 24 May 2024 14:32:22 +0530 Subject: [PATCH] chore: Fix eslint errors --- .../src/dagre-wrapper/index-refactored.js | 209 ------------------ .../src/diagrams/flowchart/flowRenderer-v2.js | 2 +- .../mermaid/src/diagrams/state/dataFetcher.js | 50 ++--- .../state/stateRenderer-v3-unified.ts | 12 +- .../dagre/mermaid-graphlib.js | 1 + .../rendering-elements/edges.js | 20 -- 6 files changed, 31 insertions(+), 263 deletions(-) delete mode 100644 packages/mermaid/src/dagre-wrapper/index-refactored.js diff --git a/packages/mermaid/src/dagre-wrapper/index-refactored.js b/packages/mermaid/src/dagre-wrapper/index-refactored.js deleted file mode 100644 index 1411a8733..000000000 --- a/packages/mermaid/src/dagre-wrapper/index-refactored.js +++ /dev/null @@ -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 - ); -}; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js index cc9202a2b..badf9238c 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js @@ -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(); diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index d553a4834..dc3535c9b 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/packages/mermaid/src/diagrams/state/dataFetcher.js @@ -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 '); diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts index ce8ad8f64..4ab71e4e2 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts @@ -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( diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js index 3744254b2..f56cba285 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js @@ -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); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index d22297694..ad1573596 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -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