mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-23 17:29:54 +02:00
fix(arch): async/await fixes for drawText changes
This commit is contained in:
@@ -455,13 +455,13 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
|
|||||||
const groupElem = svg.append('g');
|
const groupElem = svg.append('g');
|
||||||
groupElem.attr('class', 'architecture-groups');
|
groupElem.attr('class', 'architecture-groups');
|
||||||
|
|
||||||
drawServices(db, servicesElem, services);
|
await drawServices(db, servicesElem, services);
|
||||||
drawJunctions(db, servicesElem, junctions);
|
drawJunctions(db, servicesElem, junctions);
|
||||||
|
|
||||||
const cy = await layoutArchitecture(services, junctions, groups, edges, ds);
|
const cy = await layoutArchitecture(services, junctions, groups, edges, ds);
|
||||||
|
|
||||||
drawEdges(edgesElem, cy);
|
await drawEdges(edgesElem, cy);
|
||||||
drawGroups(groupElem, cy);
|
await drawGroups(groupElem, cy);
|
||||||
positionNodes(db, cy);
|
positionNodes(db, cy);
|
||||||
|
|
||||||
setupGraphViewbox(undefined, svg, getConfigField('padding'), getConfigField('useMaxWidth'));
|
setupGraphViewbox(undefined, svg, getConfigField('padding'), getConfigField('useMaxWidth'));
|
||||||
|
@@ -22,14 +22,15 @@ import { getIcon } from '../../rendering-util/svgRegister.js';
|
|||||||
import { db, getConfigField } from './architectureDb.js';
|
import { db, getConfigField } from './architectureDb.js';
|
||||||
import { getConfig } from '../../diagram-api/diagramAPI.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 padding = getConfigField('padding');
|
||||||
const iconSize = getConfigField('iconSize');
|
const iconSize = getConfigField('iconSize');
|
||||||
const halfIconSize = iconSize / 2;
|
const halfIconSize = iconSize / 2;
|
||||||
const arrowSize = iconSize / 6;
|
const arrowSize = iconSize / 6;
|
||||||
const halfArrowSize = arrowSize / 2;
|
const halfArrowSize = arrowSize / 2;
|
||||||
|
|
||||||
cy.edges().map((edge) => {
|
await Promise.all(
|
||||||
|
cy.edges().map(async (edge) => {
|
||||||
const {
|
const {
|
||||||
source,
|
source,
|
||||||
sourceDir,
|
sourceDir,
|
||||||
@@ -134,7 +135,7 @@ export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const textElem = g.append('g');
|
const textElem = g.append('g');
|
||||||
createText(
|
await createText(
|
||||||
textElem,
|
textElem,
|
||||||
label,
|
label,
|
||||||
{
|
{
|
||||||
@@ -179,10 +180,11 @@ export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
|
export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Core) {
|
||||||
const padding = getConfigField('padding');
|
const padding = getConfigField('padding');
|
||||||
const groupIconSize = padding * 0.75;
|
const groupIconSize = padding * 0.75;
|
||||||
|
|
||||||
@@ -191,7 +193,8 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
|
|||||||
const iconSize = getConfigField('iconSize');
|
const iconSize = getConfigField('iconSize');
|
||||||
const halfIconSize = iconSize / 2;
|
const halfIconSize = iconSize / 2;
|
||||||
|
|
||||||
cy.nodes().map((node) => {
|
await Promise.all(
|
||||||
|
cy.nodes().map(async (node) => {
|
||||||
const data = nodeData(node);
|
const data = nodeData(node);
|
||||||
if (data.type === 'group') {
|
if (data.type === 'group') {
|
||||||
const { h, w, x1, y1 } = node.boundingBox();
|
const { h, w, x1, y1 } = node.boundingBox();
|
||||||
@@ -226,7 +229,7 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
|
|||||||
}
|
}
|
||||||
if (data.label) {
|
if (data.label) {
|
||||||
const textElem = groupLabelContainer.append('g');
|
const textElem = groupLabelContainer.append('g');
|
||||||
createText(
|
await createText(
|
||||||
textElem,
|
textElem,
|
||||||
data.label,
|
data.label,
|
||||||
{
|
{
|
||||||
@@ -252,21 +255,22 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const drawServices = function (
|
export const drawServices = async function (
|
||||||
db: ArchitectureDB,
|
db: ArchitectureDB,
|
||||||
elem: D3Element,
|
elem: D3Element,
|
||||||
services: ArchitectureService[]
|
services: ArchitectureService[]
|
||||||
): number {
|
): Promise<number> {
|
||||||
services.forEach((service) => {
|
for (const service of services) {
|
||||||
const serviceElem = elem.append('g');
|
const serviceElem = elem.append('g');
|
||||||
const iconSize = getConfigField('iconSize');
|
const iconSize = getConfigField('iconSize');
|
||||||
|
|
||||||
if (service.title) {
|
if (service.title) {
|
||||||
const textElem = serviceElem.append('g');
|
const textElem = serviceElem.append('g');
|
||||||
createText(
|
await createText(
|
||||||
textElem,
|
textElem,
|
||||||
service.title,
|
service.title,
|
||||||
{
|
{
|
||||||
@@ -331,7 +335,7 @@ export const drawServices = function (
|
|||||||
service.width = width;
|
service.width = width;
|
||||||
service.height = height;
|
service.height = height;
|
||||||
db.setElementForId(service.id, serviceElem);
|
db.setElementForId(service.id, serviceElem);
|
||||||
});
|
}
|
||||||
return 0;
|
return 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user