From d346a77e3c72e36a441bf271700744a0e381bedf Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 28 Jan 2024 16:03:37 +0530 Subject: [PATCH] Convert MindmapRenderer.ts --- .../src/diagrams/mindmap/mindmapRenderer.ts | 104 ++++++++---------- 1 file changed, 48 insertions(+), 56 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index 3fe9e1d51..6d0dc6067 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -1,23 +1,21 @@ -/** Created by knut on 14-12-11. */ 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 cytoscape from 'cytoscape/dist/cytoscape.umd.js'; +import cytoscape from 'cytoscape'; +// @ts-expect-error No types available import coseBilkent from 'cytoscape-cose-bilkent'; import * as db from './mindmapDb.js'; +import type { MermaidConfig, MermaidConfigWithDefaults } from '../../config.type.js'; +import type { Diagram } from '../../Diagram.js'; +import type { MindmapDB } from './mindmapTypes.js'; +import type { D3Element } from '../../mermaidAPI.js'; // Inject the layout algorithm into cytoscape cytoscape.use(coseBilkent); -/** - * @param {any} svg The svg element to draw the diagram onto - * @param {object} mindmap The mindmap data and hierarchy - * @param section - * @param {object} conf The configuration object - */ -function drawNodes(svg, mindmap, section, conf) { +function drawNodes(svg: D3Element, mindmap: db.MindMapNode, section: number, conf: MermaidConfig) { svgDraw.drawNode(svg, mindmap, section, conf); if (mindmap.children) { mindmap.children.forEach((child, index) => { @@ -26,11 +24,23 @@ function drawNodes(svg, mindmap, section, conf) { } } -/** - * @param edgesEl - * @param cy - */ -function drawEdges(edgesEl, cy) { +declare module 'cytoscape' { + interface EdgeSingular { + _private: { + bodyBounds: unknown; + rscratch: { + startX: number; + startY: number; + midX: number; + midY: number; + endX: number; + endY: number; + }; + }; + } +} + +function drawEdges(edgesEl: D3Element, cy: cytoscape.Core) { cy.edges().map((edge, id) => { const data = edge.data(); if (edge[0]._private.bodyBounds) { @@ -47,17 +57,11 @@ function drawEdges(edgesEl, cy) { }); } -/** - * @param mindmap The mindmap data and hierarchy - * @param cy - * @param conf The configuration object - * @param level - */ -function addNodes(mindmap, cy, conf, level) { +function addNodes(mindmap: db.MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) { cy.add({ group: 'nodes', data: { - id: mindmap.id, + id: mindmap.id.toString(), labelText: mindmap.descr, height: mindmap.height, width: mindmap.width, @@ -67,8 +71,8 @@ function addNodes(mindmap, cy, conf, level) { type: mindmap.type, }, position: { - x: mindmap.x, - y: mindmap.y, + x: mindmap.x!, + y: mindmap.y!, }, }); if (mindmap.children) { @@ -88,12 +92,10 @@ function addNodes(mindmap, cy, conf, level) { } } -/** - * @param node - * @param conf - * @param cy - */ -function layoutMindmap(node, conf) { +function layoutMindmap( + node: db.MindMapNode, + conf: MermaidConfigWithDefaults +): Promise { return new Promise((resolve) => { // Add temporary render element const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none'); @@ -122,8 +124,8 @@ function layoutMindmap(node, conf) { cy.layout({ name: 'cose-bilkent', + // @ts-ignore Types for cose-bilkent are not correct? quality: 'proof', - // headless: true, styleEnabled: false, animate: false, }).run(); @@ -133,13 +135,8 @@ function layoutMindmap(node, conf) { }); }); } -/** - * @param node - * @param cy - * @param positionedMindmap - * @param conf - */ -function positionNodes(cy) { + +function positionNodes(cy: cytoscape.Core) { cy.nodes().map((node, id) => { const data = node.data(); data.x = node.position().x; @@ -155,38 +152,33 @@ function positionNodes(cy) { }); } -/** - * Draws a an info picture in the tag with id: id based on the graph definition in text. - * - * @param {any} text - * @param {any} id - * @param {any} version - * @param diagObj - */ - -export const draw = async (text, id, version, diagObj) => { +export const draw = async (text: string, id: string, version: string, diagObj: Diagram) => { const conf = getConfig(); conf.htmlLabels = false; log.debug('Rendering mindmap diagram\n' + text, diagObj.parser); - const securityLevel = getConfig().securityLevel; + const securityLevel = conf.securityLevel; // Handle root and Document for when rendering in sandbox mode - let sandboxElement; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + let sandboxElement: any; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); } - const root = + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const root: any = securityLevel === 'sandbox' ? select(sandboxElement.nodes()[0].contentDocument.body) : select('body'); - // Parse the graph definition const svg = root.select('#' + id); svg.append('g'); - const mm = diagObj.db.getMindmap(); + const mm = (diagObj.db as MindmapDB).getMindmap(); + if (!mm) { + return; + } // Draw the graph and start with drawing the nodes without proper position // this gives us the size of the nodes and we can set the positions later @@ -201,9 +193,9 @@ export const draw = async (text, id, version, diagObj) => { const cy = await layoutMindmap(mm, conf); - // // After this we can draw, first the edges and the then nodes with the correct position - drawEdges(edgesElem, cy, conf); - positionNodes(cy, conf); + // After this we can draw, first the edges and the then nodes with the correct position + drawEdges(edgesElem, cy); + positionNodes(cy); // Setup the view box and size of the svg element setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);