From 23d843b6d381aa42caf1ebb7f5f908e2c187608d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 11:21:12 +0530 Subject: [PATCH] refactor: Remove db import from svgDraw --- .../src/diagrams/mindmap/mindmapRenderer.ts | 18 ++++-- .../mermaid/src/diagrams/mindmap/svgDraw.js | 58 ++++++------------- 2 files changed, 29 insertions(+), 47 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index f4471b01d..04eed6b5a 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -2,7 +2,7 @@ import { select } from 'd3'; import { log } from '../../logger.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; -import svgDraw from './svgDraw.js'; +import { drawNode, positionNode } from './svgDraw.js'; import cytoscape from 'cytoscape'; // @ts-expect-error No types available import coseBilkent from 'cytoscape-cose-bilkent'; @@ -15,11 +15,17 @@ import type { MermaidConfigWithDefaults } from '../../config.js'; // Inject the layout algorithm into cytoscape cytoscape.use(coseBilkent); -function drawNodes(svg: D3Element, mindmap: MindMapNode, section: number, conf: MermaidConfig) { - svgDraw.drawNode(svg, mindmap, section, conf); +function drawNodes( + db: MindmapDB, + svg: D3Element, + mindmap: MindMapNode, + section: number, + conf: MermaidConfig +) { + drawNode(db, svg, mindmap, section, conf); if (mindmap.children) { mindmap.children.forEach((child, index) => { - drawNodes(svg, child, section < 0 ? index : section, conf); + drawNodes(db, svg, child, section < 0 ? index : section, conf); }); } } @@ -141,7 +147,7 @@ function positionNodes(db: MindmapDB, cy: cytoscape.Core) { const data = node.data(); data.x = node.position().x; data.y = node.position().y; - svgDraw.positionNode(data); + positionNode(db, data); const el = db.getElementById(data.nodeId); log.info('Id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data); el.attr( @@ -187,7 +193,7 @@ export const draw = async (text: string, id: string, version: string, diagObj: D edgesElem.attr('class', 'mindmap-edges'); const nodesElem = svg.append('g'); nodesElem.attr('class', 'mindmap-nodes'); - drawNodes(nodesElem, mm, -1, conf); + drawNodes(db, nodesElem, mm, -1, conf); // Next step is to layout the mindmap, giving each node a position diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js index b065e8010..8d3340c6e 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js @@ -1,8 +1,7 @@ -import * as db from './mindmapDb.js'; import { createText } from '../../rendering-util/createText.js'; const MAX_SECTIONS = 12; -const defaultBkg = function (elem, node, section) { +const defaultBkg = function (db, elem, node, section) { const rd = 5; elem .append('path') @@ -24,7 +23,7 @@ const defaultBkg = function (elem, node, section) { .attr('y2', node.height); }; -const rectBkg = function (elem, node) { +const rectBkg = function (db, elem, node) { elem .append('rect') .attr('id', 'node-' + node.id) @@ -33,7 +32,7 @@ const rectBkg = function (elem, node) { .attr('width', node.width); }; -const cloudBkg = function (elem, node) { +const cloudBkg = function (db, elem, node) { const w = node.width; const h = node.height; const r1 = 0.15 * w; @@ -64,7 +63,7 @@ const cloudBkg = function (elem, node) { ); }; -const bangBkg = function (elem, node) { +const bangBkg = function (db, elem, node) { const w = node.width; const h = node.height; const r = 0.15 * w; @@ -96,7 +95,7 @@ const bangBkg = function (elem, node) { ); }; -const circleBkg = function (elem, node) { +const circleBkg = function (db, elem, node) { elem .append('circle') .attr('id', 'node-' + node.id) @@ -126,7 +125,7 @@ function insertPolygonShape(parent, w, h, points, node) { .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')'); } -const hexagonBkg = function (elem, node) { +const hexagonBkg = function (db, elem, node) { const h = node.height; const f = 4; const m = h / f; @@ -142,7 +141,7 @@ const hexagonBkg = function (elem, node) { const shapeSvg = insertPolygonShape(elem, w, h, points, node); }; -const roundedRectBkg = function (elem, node) { +const roundedRectBkg = function (db, elem, node) { elem .append('rect') .attr('id', 'node-' + node.id) @@ -154,13 +153,14 @@ const roundedRectBkg = function (elem, node) { }; /** + * @param {import('./mindmapTypes.js').MindmapDB} db The database * @param {object} elem The D3 dom element in which the node is to be added * @param {object} node The node to be added * @param fullSection * @param {object} conf The configuration object * @returns {number} The height nodes dom element */ -export const drawNode = function (elem, node, fullSection, conf) { +export const drawNode = function (db, elem, node, fullSection, conf) { const htmlLabels = conf.htmlLabels; const section = fullSection % (MAX_SECTIONS - 1); const nodeElem = elem.append('g'); @@ -247,26 +247,26 @@ export const drawNode = function (elem, node, fullSection, conf) { switch (node.type) { case db.nodeType.DEFAULT: - defaultBkg(bkgElem, node, section, conf); + defaultBkg(db, bkgElem, node, section, conf); break; case db.nodeType.ROUNDED_RECT: - roundedRectBkg(bkgElem, node, section, conf); + roundedRectBkg(db, bkgElem, node, section, conf); break; case db.nodeType.RECT: - rectBkg(bkgElem, node, section, conf); + rectBkg(db, bkgElem, node, section, conf); break; case db.nodeType.CIRCLE: bkgElem.attr('transform', 'translate(' + node.width / 2 + ', ' + +node.height / 2 + ')'); - circleBkg(bkgElem, node, section, conf); + circleBkg(db, bkgElem, node, section, conf); break; case db.nodeType.CLOUD: - cloudBkg(bkgElem, node, section, conf); + cloudBkg(db, bkgElem, node, section, conf); break; case db.nodeType.BANG: - bangBkg(bkgElem, node, section, conf); + bangBkg(db, bkgElem, node, section, conf); break; case db.nodeType.HEXAGON: - hexagonBkg(bkgElem, node, section, conf); + hexagonBkg(db, bkgElem, node, section, conf); break; } @@ -274,29 +274,7 @@ export const drawNode = function (elem, node, fullSection, conf) { return node.height; }; -export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, fullSection) { - const section = fullSection % (MAX_SECTIONS - 1); - const sx = parent.x + parent.width / 2; - const sy = parent.y + parent.height / 2; - const ex = mindmap.x + mindmap.width / 2; - const ey = mindmap.y + mindmap.height / 2; - const mx = ex > sx ? sx + Math.abs(sx - ex) / 2 : sx - Math.abs(sx - ex) / 2; - const my = ey > sy ? sy + Math.abs(sy - ey) / 2 : sy - Math.abs(sy - ey) / 2; - const qx = ex > sx ? Math.abs(sx - mx) / 2 + sx : -Math.abs(sx - mx) / 2 + sx; - const qy = ey > sy ? Math.abs(sy - my) / 2 + sy : -Math.abs(sy - my) / 2 + sy; - - edgesElem - .append('path') - .attr( - 'd', - parent.direction === 'TB' || parent.direction === 'BT' - ? `M${sx},${sy} Q${sx},${qy} ${mx},${my} T${ex},${ey}` - : `M${sx},${sy} Q${qx},${sy} ${mx},${my} T${ex},${ey}` - ) - .attr('class', 'edge section-edge-' + section + ' edge-depth-' + depth); -}; - -export const positionNode = function (node) { +export const positionNode = function (db, node) { const nodeElem = db.getElementById(node.id); const x = node.x || 0; @@ -304,5 +282,3 @@ export const positionNode = function (node) { // Position the node to its coordinate nodeElem.attr('transform', 'translate(' + x + ',' + y + ')'); }; - -export default { drawNode, positionNode, drawEdge };