From 6c6ce28f7df4d52891d341051a9219e768accead Mon Sep 17 00:00:00 2001 From: NicolasNewman Date: Wed, 13 Mar 2024 09:25:20 -0500 Subject: [PATCH] feat(arch): implemented basic rendering for diagram --- .../architecture/architectureDiagram.ts | 13 ++ .../architecture/architectureRenderer.ts | 216 ++++++++++++++++++ .../architecture/architectureStyles.ts | 73 ++++++ .../src/diagrams/architecture/svgDraw.ts | 120 ++++++++++ 4 files changed, 422 insertions(+) create mode 100644 packages/mermaid/src/diagrams/architecture/architectureDiagram.ts create mode 100644 packages/mermaid/src/diagrams/architecture/architectureRenderer.ts create mode 100644 packages/mermaid/src/diagrams/architecture/architectureStyles.ts create mode 100644 packages/mermaid/src/diagrams/architecture/svgDraw.ts diff --git a/packages/mermaid/src/diagrams/architecture/architectureDiagram.ts b/packages/mermaid/src/diagrams/architecture/architectureDiagram.ts new file mode 100644 index 000000000..614e2a7f3 --- /dev/null +++ b/packages/mermaid/src/diagrams/architecture/architectureDiagram.ts @@ -0,0 +1,13 @@ +import type { DiagramDefinition } from '../../diagram-api/types.js'; +// @ts-ignore: JISON doesn't support types +import parser from './parser/architecture.jison'; +import { db } from './architectureDb.js'; +import styles from './architectureStyles.js'; +import { renderer } from './architectureRenderer.js'; + +export const diagram: DiagramDefinition = { + parser, + db, + renderer, + styles, +}; diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts new file mode 100644 index 000000000..a55b23bff --- /dev/null +++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts @@ -0,0 +1,216 @@ +import cytoscape from 'cytoscape'; +import type { Diagram } from '../../Diagram.js'; +import fcose, {FcoseLayoutOptions} from 'cytoscape-fcose'; +import type { MermaidConfig } from '../../config.type.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; +import type { DrawDefinition, SVG } from '../../diagram-api/types.js'; +import { log } from '../../logger.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { + isArchitectureDirectionX, + type ArchitectureDB, + type ArchitectureDirection, + type ArchitectureGroup, + type ArchitectureLine, + type ArchitectureService, + isArchitectureDirectionY, +} from './architectureTypes.js'; +import { select } from 'd3'; +import { setupGraphViewbox } from '../../setupGraphViewbox.js'; +import defaultConfig from '../../defaultConfig.js'; +import type { D3Element } from '../../mermaidAPI.js'; +import { drawEdges, drawService, getEdgeThicknessCallback } from './svgDraw.js'; + +cytoscape.use(fcose); + +function addServices(services: ArchitectureService[], cy: cytoscape.Core) { + services.forEach((service) => { + cy.add({ + group: 'nodes', + data: { + id: service.id, + icon: service.icon, + title: service.title, + parent: service.in, + // TODO: dynamic size + width: 80, + height: 80 + }, + }); + }); +} + +function drawServices( + db: ArchitectureDB, + svg: D3Element, + services: ArchitectureService[], + conf: MermaidConfig +) { + services.forEach((service) => drawService(db, svg, service, conf)); +} + +function addGroups(groups: ArchitectureGroup[], cy: cytoscape.Core) { + groups.forEach((group) => { + cy.add({ + group: 'nodes', + data: { + id: group.id, + icon: group.icon, + title: group.title, + parent: group.in + }, + }); + }); +} + +function positionServices(db: ArchitectureDB, cy: cytoscape.Core) { + cy.nodes().map((node, id) => { + + const data = node.data(); + data.x = node.position().x; + data.y = node.position().y; + + const nodeElem = db.getElementById(data.id); + nodeElem.attr('transform', 'translate(' + (data.x || 0) + ',' + (data.y || 0) + ')'); + }); +} + +function addEdges(lines: ArchitectureLine[], cy: cytoscape.Core) { + lines.forEach((line) => { + cy.add({ + group: 'edges', + data: { + id: `${line.lhs_id}-${line.rhs_id}`, + source: line.lhs_id, + sourceDir: line.lhs_dir, + target: line.rhs_id, + targetDir: line.rhs_dir, + }, + }); + }); +} + +function layoutArchitecture( + services: ArchitectureService[], + groups: ArchitectureGroup[], + lines: ArchitectureLine[] +): Promise { + return new Promise((resolve) => { + const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none'); + const cy = cytoscape({ + container: document.getElementById('cy'), + style: [ + { + selector: 'edge', + style: { + 'curve-style': 'straight', + 'source-endpoint': '100% 100%', + 'target-endpoint': '100% 100%', + }, + }, + ], + }); + // Remove element after layout + renderEl.remove(); + + addGroups(groups, cy); + addServices(services, cy); + addEdges(lines, cy); + + // Make cytoscape care about the dimensions of the nodes + cy.nodes().forEach(function (n) { + n.layoutDimensions = () => { + const data = n.data(); + return { w: data.width, h: data.height }; + }; + }); + + cy.layout({ + name: 'fcose', + quality: 'proof', + styleEnabled: false, + animate: false, + alignmentConstraint: { + horizontal: cy + .edges() + .filter( + (edge) => + isArchitectureDirectionX(edge.data('sourceDir')) && + isArchitectureDirectionX(edge.data('targetDir')) + ) + .map((edge) => [edge.data('source'), edge.data('target')]), + vertical: cy + .edges() + .filter( + (edge) => + isArchitectureDirectionY(edge.data('sourceDir')) && + isArchitectureDirectionY(edge.data('targetDir')) + ) + .map((edge) => [edge.data('source'), edge.data('target')]), + }, + relativePlacementConstraint: cy.edges().map((edge) => { + const sourceDir = edge.data('sourceDir') as ArchitectureDirection; + const targetDir = edge.data('targetDir') as ArchitectureDirection; + const sourceId = edge.data('source') as ArchitectureDirection; + const targetId = edge.data('target') as ArchitectureDirection; + + if ( + isArchitectureDirectionX(sourceDir) && + isArchitectureDirectionX(targetDir) + ) { + return {left: sourceDir === 'L' ? sourceId : targetId, right: sourceDir === 'R' ? sourceId : targetId, gap: 180} + } else if ( + isArchitectureDirectionY(sourceDir) && + isArchitectureDirectionY(targetDir) + ) { + return {top: sourceDir === 'T' ? sourceId : targetId, bottom: sourceDir === 'B' ? sourceId : targetId, gap: 180} + } + // TODO: fallback case + RB, TL, etc + + }), + } as FcoseLayoutOptions).run(); + cy.ready((e) => { + log.info('Ready', e); + resolve(cy); + }); + }); +} + +export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram) => { + const db = diagObj.db as ArchitectureDB; + const conf: MermaidConfig = getConfig(); + + const services = db.getServices(); + const groups = db.getGroups(); + const lines = db.getLines(); + log.info('Services: ', services); + log.info('Lines: ', lines); + + const svg: SVG = selectSvgElement(id); + + const edgesElem = svg.append('g'); + edgesElem.attr('class', 'architecture-edges'); + + const servicesElem = svg.append('g'); + servicesElem.attr('class', 'architecture-services'); + + drawServices(db, servicesElem, services, conf); + const getEdgeThickness = getEdgeThicknessCallback(svg); + + const cy = await layoutArchitecture(services, groups, lines); + + const edgeThickness = getEdgeThickness(); + drawEdges(edgesElem, edgeThickness, cy); + positionServices(db, cy); + + setupGraphViewbox( + undefined, + svg, + conf.architecture?.padding ?? defaultConfig.architecture.padding, + conf.architecture?.useMaxWidth ?? defaultConfig.architecture.useMaxWidth + ); + + +}; + +export const renderer = { draw }; diff --git a/packages/mermaid/src/diagrams/architecture/architectureStyles.ts b/packages/mermaid/src/diagrams/architecture/architectureStyles.ts new file mode 100644 index 000000000..b92d227e6 --- /dev/null +++ b/packages/mermaid/src/diagrams/architecture/architectureStyles.ts @@ -0,0 +1,73 @@ +import type { DiagramStylesProvider } from '../../diagram-api/types.js'; +import type { ArchitectureStyleOptions } from './architectureTypes.js'; +// @ts-expect-error Incorrect khroma types +import { darken, lighten, isDark } from 'khroma'; + +const genSections: DiagramStylesProvider = (options) => { + let sections = ''; + + for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) { + options['lineColor' + i] = options['lineColor' + i] || options['cScaleInv' + i]; + if (isDark(options['lineColor' + i])) { + options['lineColor' + i] = lighten(options['lineColor' + i], 20); + } else { + options['lineColor' + i] = darken(options['lineColor' + i], 20); + } + } + + for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) { + const sw = '' + (17 - 3 * i); + sections += ` + .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${ + i - 1 + } polygon, .section-${i - 1} path { + fill: ${options['cScale' + i]}; + } + .section-${i - 1} text { + fill: ${options['cScaleLabel' + i]}; + } + .node-icon-${i - 1} { + font-size: 40px; + color: ${options['cScaleLabel' + i]}; + } + .section-edge-${i - 1}{ + stroke: ${options['cScale' + i]}; + } + .edge-depth-${i - 1}{ + stroke-width: ${sw}; + } + .section-${i - 1} line { + stroke: ${options['cScaleInv' + i]} ; + stroke-width: 3; + } + + .disabled, .disabled circle, .disabled text { + fill: lightgray; + } + .disabled text { + fill: #efefef; + } + `; + } + return sections; +}; + +const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) => + ` + .edge { + stroke-width: 3; + stroke: #777; + } + .section-root rect, .section-root path, .section-root circle, .section-root polygon { + fill: #333; + } + .section-root text { + fill:#333; + } + ${genSections(options)} + .edge { + fill: none; + } +`; + +export default getStyles; diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts new file mode 100644 index 000000000..55742ed7f --- /dev/null +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -0,0 +1,120 @@ +import type { D3Element } from '../../mermaidAPI.js'; +import { createText } from '../../rendering-util/createText.js'; +import type { ArchitectureDB, ArchitectureService } from './architectureTypes.js'; +import type { MermaidConfig } from '../../config.type.js'; +import type cytoscape from 'cytoscape'; +import { log } from '../../logger.js'; +import {getIcon, isIconNameInUse} from '../../rendering-util/svgRegister.js'; + +declare module 'cytoscape' { + interface EdgeSingular { + _private: { + bodyBounds: unknown; + rscratch: { + startX: number; + startY: number; + midX: number; + midY: number; + endX: number; + endY: number; + }; + }; + } +} + +/** + * Creates a temporary path which can be used to compute the line thickness. + * @param root root element to add the temporary path to + * @returns callback function which gets the bounding box dimensions and removes the path from root + */ +export const getEdgeThicknessCallback = function (root: D3Element) { + const tempPath = root.insert('path') + .attr( + 'd', + `M 10,10 L 10,20` + ) + .attr('class', 'edge') + .attr('id', 'temp-thickness-edge'); + + return () => { + const dims = tempPath.node().getBBox(); + tempPath.remove(); + return dims.height as number; + } +} + +export const drawEdges = function (edgesEl: D3Element, edgeThickness: number, cy: cytoscape.Core) { + cy.edges().map((edge, id) => { + const data = edge.data(); + if (edge[0]._private.bodyBounds) { + const bounds = edge[0]._private.rscratch; + const translateX = bounds.startX === bounds.endX ? ((edgeThickness + 2) / 1.5) : 0; + const translateY = bounds.startY === bounds.endY ? ((edgeThickness + 2) / 1.5) : 0; + + log.trace('Edge: ', id, data); + edgesEl + .insert('path') + .attr( + 'd', + `M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} ` + ) + .attr('class', 'edge') + .attr( + 'transform', + 'translate(' + translateX + ', ' + translateY + ')' + ); + } + }) +} + +export const drawService = function ( + db: ArchitectureDB, + elem: D3Element, + service: ArchitectureService, + conf: MermaidConfig +): number { + const serviceElem = elem.append('g'); + + if (service.title) { + const textElem = serviceElem.append('g'); + createText(textElem, service.title, { + useHtmlLabels: false, + width: 80, + classes: 'architecture-service-label', + }); + textElem + .attr('dy', '1em') + .attr('alignment-baseline', 'middle') + .attr('dominant-baseline', 'middle') + .attr('text-anchor', 'middle'); + + textElem.attr( + 'transform', + 'translate(' + 80 / 2 + ', ' + 80 + ')' + ); + + } + + let bkgElem = serviceElem.append('g'); + if (service.icon) { + if (!isIconNameInUse(service.icon)) { + throw new Error(`Invalid SVG Icon name: "${service.icon}"`) + } + bkgElem = getIcon(service.icon)?.(bkgElem); + } else { + bkgElem.append('path').attr('class', 'node-bkg').attr('id', 'node-' + service.id).attr( + 'd', + `M0 ${80 - 0} v${-80 + 2 * 0} q0,-5 5,-5 h${ + 80 - 2 * 0 + } q5,0 5,5 v${80 - 0} H0 Z` + ); + } + + serviceElem.attr('class', 'architecture-service'); + + const icon = serviceElem.append('foreignObject').attr('height', '80px').attr('width', '80px'); + icon.append('div').attr('class', 'icon-container').append('i').attr('class', 'service-icon fa fa-phone') + + db.setElementForId(service.id, serviceElem); + return 0; +};