From d36522648f375199d446618730eb9196cc8fa9c8 Mon Sep 17 00:00:00 2001 From: NicolasNewman Date: Wed, 14 Aug 2024 10:32:56 -0500 Subject: [PATCH] fix(arch): async/await fixes for drawText changes --- .../architecture/architectureRenderer.ts | 6 +- .../src/diagrams/architecture/svgDraw.ts | 408 +++++++++--------- 2 files changed, 209 insertions(+), 205 deletions(-) diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts index 0ce02005e..f23c1894b 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts @@ -455,13 +455,13 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram) const groupElem = svg.append('g'); groupElem.attr('class', 'architecture-groups'); - drawServices(db, servicesElem, services); + await drawServices(db, servicesElem, services); drawJunctions(db, servicesElem, junctions); const cy = await layoutArchitecture(services, junctions, groups, edges, ds); - drawEdges(edgesElem, cy); - drawGroups(groupElem, cy); + await drawEdges(edgesElem, cy); + await drawGroups(groupElem, cy); positionNodes(db, cy); setupGraphViewbox(undefined, svg, getConfigField('padding'), getConfigField('useMaxWidth')); diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index e8e651ebd..cbe385f27 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -22,167 +22,169 @@ import { getIcon } from '../../rendering-util/svgRegister.js'; import { db, getConfigField } from './architectureDb.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; -export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) { +export const drawEdges = async function (edgesEl: D3Element, cy: cytoscape.Core) { const padding = getConfigField('padding'); const iconSize = getConfigField('iconSize'); const halfIconSize = iconSize / 2; const arrowSize = iconSize / 6; const halfArrowSize = arrowSize / 2; - cy.edges().map((edge) => { - const { - source, - sourceDir, - sourceArrow, - sourceGroup, - target, - targetDir, - targetArrow, - targetGroup, - label, - } = edgeData(edge); - let { x: startX, y: startY } = edge[0].sourceEndpoint(); - const { x: midX, y: midY } = edge[0].midpoint(); - let { x: endX, y: endY } = edge[0].targetEndpoint(); + await Promise.all( + cy.edges().map(async (edge) => { + const { + source, + sourceDir, + sourceArrow, + sourceGroup, + target, + targetDir, + targetArrow, + targetGroup, + label, + } = edgeData(edge); + let { x: startX, y: startY } = edge[0].sourceEndpoint(); + const { x: midX, y: midY } = edge[0].midpoint(); + let { x: endX, y: endY } = edge[0].targetEndpoint(); - // Adjust the edge distance if it has the {group} modifier - const groupEdgeShift = padding + 4; - // +18 comes from the service label height that extends the padding on the bottom side of each group - if (sourceGroup) { - if (isArchitectureDirectionX(sourceDir)) { - startX += sourceDir === 'L' ? -groupEdgeShift : groupEdgeShift; - } else { - startY += sourceDir === 'T' ? -groupEdgeShift : groupEdgeShift + 18; - } - } - - if (targetGroup) { - if (isArchitectureDirectionX(targetDir)) { - endX += targetDir === 'L' ? -groupEdgeShift : groupEdgeShift; - } else { - endY += targetDir === 'T' ? -groupEdgeShift : groupEdgeShift + 18; - } - } - - // Adjust the edge distance if it doesn't have the {group} modifier and the endpoint is a junction node - if (!sourceGroup && db.getNode(source)?.type === 'junction') { - if (isArchitectureDirectionX(sourceDir)) { - startX += sourceDir === 'L' ? halfIconSize : -halfIconSize; - } else { - startY += sourceDir === 'T' ? halfIconSize : -halfIconSize; - } - } - if (!targetGroup && db.getNode(target)?.type === 'junction') { - if (isArchitectureDirectionX(targetDir)) { - endX += targetDir === 'L' ? halfIconSize : -halfIconSize; - } else { - endY += targetDir === 'T' ? halfIconSize : -halfIconSize; - } - } - - if (edge[0]._private.rscratch) { - // const bounds = edge[0]._private.rscratch; - - const g = edgesEl.insert('g'); - - g.insert('path') - .attr('d', `M ${startX},${startY} L ${midX},${midY} L${endX},${endY} `) - .attr('class', 'edge'); - - if (sourceArrow) { - const xShift = isArchitectureDirectionX(sourceDir) - ? ArchitectureDirectionArrowShift[sourceDir](startX, arrowSize) - : startX - halfArrowSize; - const yShift = isArchitectureDirectionY(sourceDir) - ? ArchitectureDirectionArrowShift[sourceDir](startY, arrowSize) - : startY - halfArrowSize; - - g.insert('polygon') - .attr('points', ArchitectureDirectionArrow[sourceDir](arrowSize)) - .attr('transform', `translate(${xShift},${yShift})`) - .attr('class', 'arrow'); - } - if (targetArrow) { - const xShift = isArchitectureDirectionX(targetDir) - ? ArchitectureDirectionArrowShift[targetDir](endX, arrowSize) - : endX - halfArrowSize; - const yShift = isArchitectureDirectionY(targetDir) - ? ArchitectureDirectionArrowShift[targetDir](endY, arrowSize) - : endY - halfArrowSize; - - g.insert('polygon') - .attr('points', ArchitectureDirectionArrow[targetDir](arrowSize)) - .attr('transform', `translate(${xShift},${yShift})`) - .attr('class', 'arrow'); - } - - if (label) { - const axis = !isArchitectureDirectionXY(sourceDir, targetDir) - ? isArchitectureDirectionX(sourceDir) - ? 'X' - : 'Y' - : 'XY'; - - let width = 0; - if (axis === 'X') { - width = Math.abs(startX - endX); - } else if (axis === 'Y') { - // Reduce width by a factor of 1.5 to avoid overlapping service labels - width = Math.abs(startY - endY) / 1.5; + // Adjust the edge distance if it has the {group} modifier + const groupEdgeShift = padding + 4; + // +18 comes from the service label height that extends the padding on the bottom side of each group + if (sourceGroup) { + if (isArchitectureDirectionX(sourceDir)) { + startX += sourceDir === 'L' ? -groupEdgeShift : groupEdgeShift; } else { - width = Math.abs(startX - endX) / 2; + startY += sourceDir === 'T' ? -groupEdgeShift : groupEdgeShift + 18; + } + } + + if (targetGroup) { + if (isArchitectureDirectionX(targetDir)) { + endX += targetDir === 'L' ? -groupEdgeShift : groupEdgeShift; + } else { + endY += targetDir === 'T' ? -groupEdgeShift : groupEdgeShift + 18; + } + } + + // Adjust the edge distance if it doesn't have the {group} modifier and the endpoint is a junction node + if (!sourceGroup && db.getNode(source)?.type === 'junction') { + if (isArchitectureDirectionX(sourceDir)) { + startX += sourceDir === 'L' ? halfIconSize : -halfIconSize; + } else { + startY += sourceDir === 'T' ? halfIconSize : -halfIconSize; + } + } + if (!targetGroup && db.getNode(target)?.type === 'junction') { + if (isArchitectureDirectionX(targetDir)) { + endX += targetDir === 'L' ? halfIconSize : -halfIconSize; + } else { + endY += targetDir === 'T' ? halfIconSize : -halfIconSize; + } + } + + if (edge[0]._private.rscratch) { + // const bounds = edge[0]._private.rscratch; + + const g = edgesEl.insert('g'); + + g.insert('path') + .attr('d', `M ${startX},${startY} L ${midX},${midY} L${endX},${endY} `) + .attr('class', 'edge'); + + if (sourceArrow) { + const xShift = isArchitectureDirectionX(sourceDir) + ? ArchitectureDirectionArrowShift[sourceDir](startX, arrowSize) + : startX - halfArrowSize; + const yShift = isArchitectureDirectionY(sourceDir) + ? ArchitectureDirectionArrowShift[sourceDir](startY, arrowSize) + : startY - halfArrowSize; + + g.insert('polygon') + .attr('points', ArchitectureDirectionArrow[sourceDir](arrowSize)) + .attr('transform', `translate(${xShift},${yShift})`) + .attr('class', 'arrow'); + } + if (targetArrow) { + const xShift = isArchitectureDirectionX(targetDir) + ? ArchitectureDirectionArrowShift[targetDir](endX, arrowSize) + : endX - halfArrowSize; + const yShift = isArchitectureDirectionY(targetDir) + ? ArchitectureDirectionArrowShift[targetDir](endY, arrowSize) + : endY - halfArrowSize; + + g.insert('polygon') + .attr('points', ArchitectureDirectionArrow[targetDir](arrowSize)) + .attr('transform', `translate(${xShift},${yShift})`) + .attr('class', 'arrow'); } - const textElem = g.append('g'); - createText( - textElem, - label, - { - useHtmlLabels: false, - width, - classes: 'architecture-service-label', - }, - getConfig() - ); + if (label) { + const axis = !isArchitectureDirectionXY(sourceDir, targetDir) + ? isArchitectureDirectionX(sourceDir) + ? 'X' + : 'Y' + : 'XY'; - textElem - .attr('dy', '1em') - .attr('alignment-baseline', 'middle') - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'middle'); + let width = 0; + if (axis === 'X') { + width = Math.abs(startX - endX); + } else if (axis === 'Y') { + // Reduce width by a factor of 1.5 to avoid overlapping service labels + width = Math.abs(startY - endY) / 1.5; + } else { + width = Math.abs(startX - endX) / 2; + } - if (axis === 'X') { - textElem.attr('transform', 'translate(' + midX + ', ' + midY + ')'); - } else if (axis === 'Y') { - textElem.attr('transform', 'translate(' + midX + ', ' + midY + ') rotate(-90)'); - } else if (axis === 'XY') { - const pair = getArchitectureDirectionPair(sourceDir, targetDir); - if (pair && isArchitecturePairXY(pair)) { - const bboxOrig = textElem.node().getBoundingClientRect(); - const [x, y] = getArchitectureDirectionXYFactors(pair); + const textElem = g.append('g'); + await createText( + textElem, + label, + { + useHtmlLabels: false, + width, + classes: 'architecture-service-label', + }, + getConfig() + ); - textElem - .attr('dominant-baseline', 'auto') - .attr('transform', `rotate(${-1 * x * y * 45})`); + textElem + .attr('dy', '1em') + .attr('alignment-baseline', 'middle') + .attr('dominant-baseline', 'middle') + .attr('text-anchor', 'middle'); - // Calculate the new width/height with the rotation applied, and transform to the proper position - const bboxNew = textElem.node().getBoundingClientRect(); - textElem.attr( - 'transform', - ` + if (axis === 'X') { + textElem.attr('transform', 'translate(' + midX + ', ' + midY + ')'); + } else if (axis === 'Y') { + textElem.attr('transform', 'translate(' + midX + ', ' + midY + ') rotate(-90)'); + } else if (axis === 'XY') { + const pair = getArchitectureDirectionPair(sourceDir, targetDir); + if (pair && isArchitecturePairXY(pair)) { + const bboxOrig = textElem.node().getBoundingClientRect(); + const [x, y] = getArchitectureDirectionXYFactors(pair); + + textElem + .attr('dominant-baseline', 'auto') + .attr('transform', `rotate(${-1 * x * y * 45})`); + + // Calculate the new width/height with the rotation applied, and transform to the proper position + const bboxNew = textElem.node().getBoundingClientRect(); + textElem.attr( + 'transform', + ` translate(${midX}, ${midY - bboxOrig.height / 2}) translate(${(x * bboxNew.width) / 2}, ${(y * bboxNew.height) / 2}) rotate(${-1 * x * y * 45}, 0, ${bboxOrig.height / 2}) ` - ); + ); + } } } } - } - }); + }) + ); }; -export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) { +export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Core) { const padding = getConfigField('padding'); const groupIconSize = padding * 0.75; @@ -191,82 +193,84 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) { const iconSize = getConfigField('iconSize'); const halfIconSize = iconSize / 2; - cy.nodes().map((node) => { - const data = nodeData(node); - if (data.type === 'group') { - const { h, w, x1, y1 } = node.boundingBox(); - console.log(`Draw group (${data.id}): pos=(${x1}, ${y1}), dim=(${w}, ${h})`); + await Promise.all( + cy.nodes().map(async (node) => { + const data = nodeData(node); + if (data.type === 'group') { + const { h, w, x1, y1 } = node.boundingBox(); + console.log(`Draw group (${data.id}): pos=(${x1}, ${y1}), dim=(${w}, ${h})`); - groupsEl - .append('rect') - .attr('x', x1 + halfIconSize) - .attr('y', y1 + halfIconSize) - .attr('width', w) - .attr('height', h) - .attr('class', 'node-bkg'); + groupsEl + .append('rect') + .attr('x', x1 + halfIconSize) + .attr('y', y1 + halfIconSize) + .attr('width', w) + .attr('height', h) + .attr('class', 'node-bkg'); - const groupLabelContainer = groupsEl.append('g'); - let shiftedX1 = x1; - let shiftedY1 = y1; - if (data.icon) { - const bkgElem = groupLabelContainer.append('g'); - getIcon(data.icon)?.(bkgElem, groupIconSize); - bkgElem.attr( - 'transform', - 'translate(' + - (shiftedX1 + halfIconSize + 1) + - ', ' + - (shiftedY1 + halfIconSize + 1) + - ')' - ); - shiftedX1 += groupIconSize; - // TODO: test with more values - // - 1 - 2 comes from the Y axis transform of the icon and label - shiftedY1 += fontSize / 2 - 1 - 2; + const groupLabelContainer = groupsEl.append('g'); + let shiftedX1 = x1; + let shiftedY1 = y1; + if (data.icon) { + const bkgElem = groupLabelContainer.append('g'); + getIcon(data.icon)?.(bkgElem, groupIconSize); + bkgElem.attr( + 'transform', + 'translate(' + + (shiftedX1 + halfIconSize + 1) + + ', ' + + (shiftedY1 + halfIconSize + 1) + + ')' + ); + shiftedX1 += groupIconSize; + // TODO: test with more values + // - 1 - 2 comes from the Y axis transform of the icon and label + shiftedY1 += fontSize / 2 - 1 - 2; + } + if (data.label) { + const textElem = groupLabelContainer.append('g'); + await createText( + textElem, + data.label, + { + useHtmlLabels: false, + width: w, + classes: 'architecture-service-label', + }, + getConfig() + ); + textElem + .attr('dy', '1em') + .attr('alignment-baseline', 'middle') + .attr('dominant-baseline', 'start') + .attr('text-anchor', 'start'); + + textElem.attr( + 'transform', + 'translate(' + + (shiftedX1 + halfIconSize + 4) + + ', ' + + (shiftedY1 + halfIconSize + 2) + + ')' + ); + } } - if (data.label) { - const textElem = groupLabelContainer.append('g'); - createText( - textElem, - data.label, - { - useHtmlLabels: false, - width: w, - classes: 'architecture-service-label', - }, - getConfig() - ); - textElem - .attr('dy', '1em') - .attr('alignment-baseline', 'middle') - .attr('dominant-baseline', 'start') - .attr('text-anchor', 'start'); - - textElem.attr( - 'transform', - 'translate(' + - (shiftedX1 + halfIconSize + 4) + - ', ' + - (shiftedY1 + halfIconSize + 2) + - ')' - ); - } - } - }); + }) + ); }; -export const drawServices = function ( +export const drawServices = async function ( db: ArchitectureDB, elem: D3Element, services: ArchitectureService[] -): number { - services.forEach((service) => { +): Promise { + for (const service of services) { const serviceElem = elem.append('g'); const iconSize = getConfigField('iconSize'); if (service.title) { const textElem = serviceElem.append('g'); - createText( + await createText( textElem, service.title, { @@ -331,7 +335,7 @@ export const drawServices = function ( service.width = width; service.height = height; db.setElementForId(service.id, serviceElem); - }); + } return 0; };