marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updated insertNode to pass optional config

Browse Source
This commit is contained in:
saurabhg772244
2024-09-13 14:11:13 +05:30
parent 2fa044d484
commit 8456d7b100
12 changed files with 74 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/mermaid-layout-elk/src/render.ts
View File

@@ -33,10 +33,11 @@ export const render = async (
};
graph.children.push(child);
nodeDb[node.id] = child;
const config = getConfig();
// Add the element to the DOM
if (!node.isGroup) {
const childNodeEl = await insertNode(nodeEl, node, node.dir);
const childNodeEl = await insertNode(nodeEl, node, { config });
boundingBox = childNodeEl.node().getBBox();
child.domId = childNodeEl;
child.width = boundingBox.width;
@@ -50,7 +51,7 @@ export const render = async (
// @ts-ignore TODO: fix this
const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
labelData.width = bbox.width;
labelData.wrappingWidth = getConfig().flowchart!.wrappingWidth;
labelData.wrappingWidth = config.flowchart!.wrappingWidth;
// Give some padding for elk
labelData.height = bbox.height - 2;
labelData.labelNode = shapeSvg.node();

2
packages/mermaid/src/dagre-wrapper/index.js
View File

@@ -87,7 +87,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
// insertCluster(clusters, graph.node(v));
} else {
log.info('Node - the non recursive path', v, node.id, node);
await insertNode(nodes, graph.node(v), dir);
await insertNode(nodes, graph.node(v), { config: siteConfig });
}
}
})

6
packages/mermaid/src/diagrams/block/renderHelpers.ts
View File

@@ -124,7 +124,8 @@ async function calculateBlockSize(
}
// Add the element to the DOM to size it
const nodeEl = await insertNode(elem, node);
const config = getConfig();
const nodeEl = await insertNode(elem, node, { config });
const boundingBox = nodeEl.node().getBBox();
const obj = db.getBlock(node.id);
obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0, node: nodeEl };
@@ -138,7 +139,8 @@ export async function insertBlockPositioned(elem: any, block: Block, db: any) {
// Add the element to the DOM to size it
const obj = db.getBlock(node.id);
if (obj.type !== 'space') {
await insertNode(elem, node);
const config = getConfig();
await insertNode(elem, node, { config });
block.intersect = node?.intersect;
positionNode(node);
}

32
packages/mermaid/src/rendering-util/insertElementsForSize.js
View File

@@ -1,5 +1,6 @@
import { select } from 'd3';
import { insertNode } from '../dagre-wrapper/nodes.js';
import { getConfig } from '../diagram-api/diagramAPI.js';
export const getDiagramElement = (id, securityLevel) => {
let sandboxElement;
@@ -22,20 +23,25 @@ export function insertElementsForSize(el, data) {
const nodesElem = el.insert('g').attr('class', 'nodes');
el.insert('g').attr('class', 'edges');
data.nodes.forEach(async (item) => {
const config = getConfig();
item.shape = 'rect';
await insertNode(nodesElem, {
...item,
class: 'default flowchart-label',
labelStyle: '',
x: 0,
y: 0,
width: 100,
rx: 0,
ry: 0,
height: 100,
shape: 'rect',
padding: 8,
});
await insertNode(
nodesElem,
{
...item,
class: 'default flowchart-label',
labelStyle: '',
x: 0,
y: 0,
width: 100,
rx: 0,
ry: 0,
height: 100,
shape: 'rect',
padding: 8,
},
{ config }
);
// Create a new DOM element
// const element = document.createElement('div');

2
packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
View File

@@ -125,7 +125,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
// insertCluster(clusters, graph.node(v));
} else {
log.trace('Node - the non recursive path XAX', v, nodes, graph.node(v), dir);
await insertNode(nodes, graph.node(v), dir);
await insertNode(nodes, graph.node(v), { config: siteConfig });
}
}
})

9
packages/mermaid/src/rendering-util/rendering-elements/nodes.js
View File

@@ -9,7 +9,6 @@ import { choice } from './shapes/choice.ts';
import { note } from './shapes/note.ts';
import { stadium } from './shapes/stadium.js';
import { rectWithTitle } from './shapes/rectWithTitle.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import { subroutine } from './shapes/subroutine.js';
import { cylinder } from './shapes/cylinder.js';
import { circle } from './shapes/circle.js';
@@ -229,7 +228,7 @@ export const shapes = {
const nodeElems = new Map();
export const insertNode = async (elem, node, dir) => {
export const insertNode = async (elem, node, config) => {
let newEl;
let el;
@@ -247,15 +246,15 @@ export const insertNode = async (elem, node, dir) => {
// Add link when appropriate
if (node.link) {
let target;
if (getConfig().securityLevel === 'sandbox') {
if (config.securityLevel === 'sandbox') {
target = '_top';
} else if (node.linkTarget) {
target = node.linkTarget || '_blank';
}
newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
el = await shapes[node.shape](newEl, node, dir);
el = await shapes[node.shape](newEl, node, config);
} else {
el = await shapes[node.shape](elem, node, dir);
el = await shapes[node.shape](elem, node, config);
newEl = el;
}
if (node.tooltip) {

9
packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
View File

@@ -5,9 +5,13 @@ import type { SVG } from '../../../diagram-api/types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import { getConfig } from '../../../config.js';
import type { MermaidConfig } from '../../../config.type.js';
export const filledCircle = (parent: SVG, node: Node) => {
export const filledCircle = (
parent: SVG,
node: Node,
{ config: { themeVariables } }: { config: MermaidConfig }
) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.label = '';
node.labelStyle = labelStyles;
@@ -20,7 +24,6 @@ export const filledCircle = (parent: SVG, node: Node) => {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const { themeVariables } = getConfig();
const { nodeBorder } = themeVariables;
const options = userNodeOverrides(node, { fillStyle: 'solid' });

14
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
View File

@@ -6,16 +6,21 @@ import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShap
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import { getIconSVG } from '../../icons.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
import type { MermaidConfig } from '../../../config.type.js';
export const iconCircle = async (parent: SVG, node: Node, dir: string) => {
const translateHorizontal = dir === 'TB' || dir === 'BT' || dir === 'TD' || dir === 'DT';
export const iconCircle = async (
parent: SVG,
node: Node,
{ config: { themeVariables, flowchart } }: { config: MermaidConfig }
) => {
const translateHorizontal =
node.dir === 'TB' || node.dir === 'BT' || node.dir === 'TD' || node.dir === 'DT';
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
const assetWidth = node.assetWidth ?? 48;
const iconSize = Math.max(assetHeight, assetWidth);
const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
const defaultWidth = flowchart?.wrappingWidth;
node.width = Math.max(iconSize, defaultWidth ?? 0);
const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
parent,
@@ -27,7 +32,6 @@ export const iconCircle = async (parent: SVG, node: Node, dir: string) => {
const topLabel = node.pos === 't';
const diameter = iconSize + halfPadding * 2;
const { themeVariables } = getConfig();
const { mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node);

13
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
View File

@@ -6,16 +6,20 @@ import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShap
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import { getIconSVG } from '../../icons.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
import { createRoundedRectPathD } from './roundedRectPath.js';
import type { MermaidConfig } from '../../../config.type.js';
export const iconRounded = async (parent: SVG, node: Node) => {
export const iconRounded = async (
parent: SVG,
node: Node,
{ config: { themeVariables, flowchart } }: { config: MermaidConfig }
) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
const assetWidth = node.assetWidth ?? 48;
const iconSize = Math.max(assetHeight, assetWidth);
const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
const defaultWidth = flowchart?.wrappingWidth;
node.width = Math.max(iconSize, defaultWidth ?? 0);
const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
parent,
@@ -28,7 +32,6 @@ export const iconRounded = async (parent: SVG, node: Node) => {
const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2;
const { themeVariables } = getConfig();
const { mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node);
@@ -58,7 +61,7 @@ export const iconRounded = async (parent: SVG, node: Node) => {
const iconHeight = iconBBox.height;
iconElem.attr(
'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})`
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
);
}

11
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
View File

@@ -6,15 +6,19 @@ import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShap
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import { getIconSVG } from '../../icons.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
import type { MermaidConfig } from '../../../config.type.js';
export const iconSquare = async (parent: SVG, node: Node) => {
export const iconSquare = async (
parent: SVG,
node: Node,
{ config: { themeVariables, flowchart } }: { config: MermaidConfig }
) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
const assetWidth = node.assetWidth ?? 48;
const iconSize = Math.max(assetHeight, assetWidth);
const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
const defaultWidth = flowchart?.wrappingWidth;
node.width = Math.max(iconSize, defaultWidth ?? 0);
const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
parent,
@@ -27,7 +31,6 @@ export const iconSquare = async (parent: SVG, node: Node) => {
const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2;
const { themeVariables } = getConfig();
const { mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node);

9
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
View File

@@ -4,13 +4,16 @@ import type { Node } from '../../types.js';
import type { SVG } from '../../../diagram-api/types.js';
import rough from 'roughjs';
import { solidStateFill, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
import type { MermaidConfig } from '../../../config.type.js';
export const stateEnd = (parent: SVG, node: Node) => {
export const stateEnd = (
parent: SVG,
node: Node,
{ config: { themeVariables } }: { config: MermaidConfig }
) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { cssStyles } = node;
const { themeVariables } = getConfig();
const { lineColor } = themeVariables;
const shapeSvg = parent
.insert('g')

9
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
View File

@@ -4,10 +4,13 @@ import type { Node } from '../../types.js';
import type { SVG } from '../../../diagram-api/types.js';
import rough from 'roughjs';
import { solidStateFill } from './handDrawnShapeStyles.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
import type { MermaidConfig } from '../../../config.type.js';
export const stateStart = (parent: SVG, node: Node) => {
const { themeVariables } = getConfig();
export const stateStart = (
parent: SVG,
node: Node,
{ config: { themeVariables } }: { config: MermaidConfig }
) => {
const { lineColor } = themeVariables;
const shapeSvg = parent