From b51d8ff7ba4cf9714903a60d8c703b10b0f6ca59 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 12:16:21 +0530 Subject: [PATCH] Convert svgDraw.ts --- .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 16 ++--- .../src/diagrams/mindmap/mindmapRenderer.ts | 12 ++-- .../src/diagrams/mindmap/mindmapTypes.ts | 6 +- .../mermaid/src/diagrams/mindmap/svgDraw.ts | 60 ++++++++++--------- 4 files changed, 51 insertions(+), 43 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index f5303ac29..c0fdd1257 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts @@ -1,12 +1,12 @@ import { getConfig } from '../../diagram-api/diagramAPI.js'; +import type { D3Element } from '../../mermaidAPI.js'; import { sanitizeText } from '../../diagrams/common/common.js'; import { log } from '../../logger.js'; -import type { D3Element } from '../../mermaidAPI.js'; -import type { MindMapNode } from './mindmapTypes.js'; +import type { MindmapNode } from './mindmapTypes.js'; -let nodes: MindMapNode[] = []; +let nodes: MindmapNode[] = []; let cnt = 0; -let elements: Record = {}; +let elements: Record = {}; const clear = () => { nodes = []; @@ -14,7 +14,7 @@ const clear = () => { elements = {}; }; -const getParent = function (level: number) { +const getParent = function(level: number) { for (let i = nodes.length - 1; i >= 0; i--) { if (nodes[i].level < level) { return nodes[i]; @@ -48,7 +48,7 @@ const addNode = (level: number, id: string, descr: string, type: number) => { children: [], width: conf.mindmap?.maxNodeWidth ?? 200, padding, - } satisfies MindMapNode; + } satisfies MindmapNode; const parent = getParent(level); if (parent) { @@ -100,7 +100,7 @@ const getType = (startStr: string, endStr: string): number => { } }; -const setElementForId = (id: string, element: D3Element) => { +const setElementForId = (id: number, element: D3Element) => { elements[id] = element; }; @@ -141,7 +141,7 @@ const type2Str = (type: number) => { // Expose logger to grammar const getLogger = () => log; -const getElementById = (id: string) => elements[id]; +const getElementById = (id: number) => elements[id]; const db = { clear, diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index 04eed6b5a..6b9871567 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -6,7 +6,7 @@ import { drawNode, positionNode } from './svgDraw.js'; import cytoscape from 'cytoscape'; // @ts-expect-error No types available import coseBilkent from 'cytoscape-cose-bilkent'; -import type { MindMapNode, MindmapDB } from './mindmapTypes.js'; +import type { MindmapNode, MindmapDB, FilledMindMapNode } from './mindmapTypes.js'; import type { MermaidConfig } from '../../config.type.js'; import type { Diagram } from '../../Diagram.js'; import type { D3Element } from '../../mermaidAPI.js'; @@ -18,9 +18,9 @@ cytoscape.use(coseBilkent); function drawNodes( db: MindmapDB, svg: D3Element, - mindmap: MindMapNode, + mindmap: FilledMindMapNode, section: number, - conf: MermaidConfig + conf: MermaidConfigWithDefaults ) { drawNode(db, svg, mindmap, section, conf); if (mindmap.children) { @@ -63,7 +63,7 @@ function drawEdges(edgesEl: D3Element, cy: cytoscape.Core) { }); } -function addNodes(mindmap: MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) { +function addNodes(mindmap: MindmapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) { cy.add({ group: 'nodes', data: { @@ -99,7 +99,7 @@ function addNodes(mindmap: MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, } function layoutMindmap( - node: MindMapNode, + node: MindmapNode, conf: MermaidConfigWithDefaults ): Promise { return new Promise((resolve) => { @@ -193,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(db, nodesElem, mm, -1, conf); + drawNodes(db, nodesElem, mm as FilledMindMapNode, -1, conf); // Next step is to layout the mindmap, giving each node a position diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts index 28ec37c39..ced93ecac 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts @@ -1,12 +1,13 @@ +import { RequiredDeep } from 'type-fest'; import type mindmapDb from './mindmapDb.js'; -export interface MindMapNode { +export interface MindmapNode { id: number; nodeId: string; level: number; descr: string; type: number; - children: MindMapNode[]; + children: MindmapNode[]; width: number; padding: number; section?: number; @@ -17,4 +18,5 @@ export interface MindMapNode { y?: number; } +export type FilledMindMapNode = RequiredDeep; export type MindmapDB = typeof mindmapDb; diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts index 8d3340c6e..5670a8f6c 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts @@ -1,7 +1,13 @@ +import type { D3Element } from '../../mermaidAPI.js'; import { createText } from '../../rendering-util/createText.js'; +import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js'; +import { MermaidConfigWithDefaults } from '../../config.js'; +import { Point } from '../../types.js'; const MAX_SECTIONS = 12; -const defaultBkg = function (db, elem, node, section) { +type ShapeFunction = (db: MindmapDB, elem: D3Element, node: FilledMindMapNode, section?: number) => void; + +const defaultBkg: ShapeFunction = function(db, elem, node, section) { const rd = 5; elem .append('path') @@ -9,8 +15,7 @@ const defaultBkg = function (db, elem, node, section) { .attr('class', 'node-bkg node-' + db.type2Str(node.type)) .attr( 'd', - `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${ - node.width - 2 * rd + `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${node.width - 2 * rd } q5,0 5,5 v${node.height - rd} H0 Z` ); @@ -23,7 +28,7 @@ const defaultBkg = function (db, elem, node, section) { .attr('y2', node.height); }; -const rectBkg = function (db, elem, node) { +const rectBkg: ShapeFunction = function(db, elem, node) { elem .append('rect') .attr('id', 'node-' + node.id) @@ -32,7 +37,7 @@ const rectBkg = function (db, elem, node) { .attr('width', node.width); }; -const cloudBkg = function (db, elem, node) { +const cloudBkg: ShapeFunction = function(db, elem, node) { const w = node.width; const h = node.height; const r1 = 0.15 * w; @@ -63,7 +68,7 @@ const cloudBkg = function (db, elem, node) { ); }; -const bangBkg = function (db, elem, node) { +const bangBkg: ShapeFunction = function(db, elem, node) { const w = node.width; const h = node.height; const r = 0.15 * w; @@ -95,7 +100,7 @@ const bangBkg = function (db, elem, node) { ); }; -const circleBkg = function (db, elem, node) { +const circleBkg: ShapeFunction = function(db, elem, node) { elem .append('circle') .attr('id', 'node-' + node.id) @@ -111,13 +116,13 @@ const circleBkg = function (db, elem, node) { * @param points * @param node */ -function insertPolygonShape(parent, w, h, points, node) { +function insertPolygonShape(parent: D3Element, w: number, h: number, points: Point[], node: FilledMindMapNode) { return parent .insert('polygon', ':first-child') .attr( 'points', points - .map(function (d) { + .map(function(d) { return d.x + ',' + d.y; }) .join(' ') @@ -125,12 +130,12 @@ function insertPolygonShape(parent, w, h, points, node) { .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')'); } -const hexagonBkg = function (db, elem, node) { +const hexagonBkg: ShapeFunction = function(_db: MindmapDB, elem: D3Element, node: FilledMindMapNode) { const h = node.height; const f = 4; const m = h / f; const w = node.width - node.padding + 2 * m; - const points = [ + const points: Point[] = [ { x: m, y: 0 }, { x: w - m, y: 0 }, { x: w, y: -h / 2 }, @@ -138,10 +143,10 @@ const hexagonBkg = function (db, elem, node) { { x: m, y: -h }, { x: 0, y: -h / 2 }, ]; - const shapeSvg = insertPolygonShape(elem, w, h, points, node); + insertPolygonShape(elem, w, h, points, node); }; -const roundedRectBkg = function (db, elem, node) { +const roundedRectBkg: ShapeFunction = function(db, elem, node) { elem .append('rect') .attr('id', 'node-' + node.id) @@ -153,14 +158,14 @@ const roundedRectBkg = function (db, 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 db The database + * @param elem The D3 dom element in which the node is to be added + * @param node The node to be added * @param fullSection - * @param {object} conf The configuration object - * @returns {number} The height nodes dom element + * @param conf The configuration object + * @returns The height nodes dom element */ -export const drawNode = function (db, elem, node, fullSection, conf) { +export const drawNode = function(db: MindmapDB, elem: D3Element, node: FilledMindMapNode, fullSection: number, conf: MermaidConfigWithDefaults): number { const htmlLabels = conf.htmlLabels; const section = fullSection % (MAX_SECTIONS - 1); const nodeElem = elem.append('g'); @@ -190,6 +195,7 @@ export const drawNode = function (db, elem, node, fullSection, conf) { } // .call(wrap, node.width); const bbox = textElem.node().getBBox(); + // @ts-expect-error TODO: Check if fontSize can be string? const fontSize = conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize; node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding; node.width = bbox.width + 2 * node.padding; @@ -247,26 +253,26 @@ export const drawNode = function (db, elem, node, fullSection, conf) { switch (node.type) { case db.nodeType.DEFAULT: - defaultBkg(db, bkgElem, node, section, conf); + defaultBkg(db, bkgElem, node, section); break; case db.nodeType.ROUNDED_RECT: - roundedRectBkg(db, bkgElem, node, section, conf); + roundedRectBkg(db, bkgElem, node, section); break; case db.nodeType.RECT: - rectBkg(db, bkgElem, node, section, conf); + rectBkg(db, bkgElem, node, section); break; case db.nodeType.CIRCLE: bkgElem.attr('transform', 'translate(' + node.width / 2 + ', ' + +node.height / 2 + ')'); - circleBkg(db, bkgElem, node, section, conf); + circleBkg(db, bkgElem, node, section); break; case db.nodeType.CLOUD: - cloudBkg(db, bkgElem, node, section, conf); + cloudBkg(db, bkgElem, node, section); break; case db.nodeType.BANG: - bangBkg(db, bkgElem, node, section, conf); + bangBkg(db, bkgElem, node, section); break; case db.nodeType.HEXAGON: - hexagonBkg(db, bkgElem, node, section, conf); + hexagonBkg(db, bkgElem, node, section); break; } @@ -274,7 +280,7 @@ export const drawNode = function (db, elem, node, fullSection, conf) { return node.height; }; -export const positionNode = function (db, node) { +export const positionNode = function(db: MindmapDB, node: FilledMindMapNode) { const nodeElem = db.getElementById(node.id); const x = node.x || 0;