marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-16 02:34:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: Rename RenderOptions interface to avoid duplication.

Browse Source
This commit is contained in:
Sidharth Vinod
2024-10-02 18:20:35 +05:30
parent 4cb0f87b72
commit a75665c7bf
11 changed files with 132 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,15 @@
import { log } from '../../../logger.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
import type { Node, RenderOptions } from '../../types.d.ts';
import type { SVG } from '../../../diagram-api/types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import type { Node, ShapeRenderOptions } from '../../types.d.ts';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
export const filledCircle = ( export const filledCircle = (
parent: SVG, parent: SVG,
node: Node, node: Node,
{ config: { themeVariables } }: RenderOptions { config: { themeVariables } }: ShapeRenderOptions
) => { ) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.label = ''; node.label = '';

10
packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
View File

@@ -1,14 +1,14 @@
import { getNodeClasses, updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js';
import type { Node, RenderOptions } from '../../types.js';
import type { SVG } from '../../../diagram-api/types.js';
import rough from 'roughjs'; import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
export const forkJoin = ( export const forkJoin = (
parent: SVG, parent: SVG,
node: Node, node: Node,
{ dir, config: { state, themeVariables } }: RenderOptions { dir, config: { state, themeVariables } }: ShapeRenderOptions
) => { ) => {
const { nodeStyles } = styles2String(node); const { nodeStyles } = styles2String(node);
node.label = ''; node.label = '';

34
packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
View File

@@ -1,16 +1,16 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { Node, RenderOptions } from '../../types.d.ts';
import type { SVG } from '../../../diagram-api/types.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import intersect from '../intersect/index.js'; import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import { getIconSVG } from '../../icons.js'; import { getIconSVG } from '../../icons.js';
import type { Node, ShapeRenderOptions } from '../../types.d.ts';
import intersect from '../intersect/index.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { labelHelper, updateNodeBounds } from './util.js';
export const icon = async ( export const icon = async (
parent: SVG, parent: SVG,
node: Node, node: Node,
{ config: { themeVariables, flowchart } }: RenderOptions { config: { themeVariables, flowchart } }: ShapeRenderOptions
) => { ) => {
const { labelStyles } = styles2String(node); const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
@@ -59,7 +59,11 @@ export const icon = async (
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, {
height: iconSize,
width: iconSize,
fallbackPrefix: '',
})}</g>`
); );
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width; const iconWidth = iconBBox.width;
@@ -68,19 +72,27 @@ export const icon = async (
const iconY = iconBBox.y; const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` `translate(${-iconWidth / 2 - iconX},${
topLabel
? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY
: -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY
})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${
topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height
})`
); );
iconShape.attr( iconShape.attr(
'transform', 'transform',
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` `translate(${0},${
topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2
})`
); );
updateNodeBounds(node, outerShape); updateNodeBounds(node, outerShape);

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

@@ -1,16 +1,16 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { Node, RenderOptions } from '../../types.d.ts';
import type { SVG } from '../../../diagram-api/types.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import intersect from '../intersect/index.js'; import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import { getIconSVG } from '../../icons.js'; import { getIconSVG } from '../../icons.js';
import type { Node, ShapeRenderOptions } from '../../types.d.ts';
import intersect from '../intersect/index.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { labelHelper, updateNodeBounds } from './util.js';
export const iconCircle = async ( export const iconCircle = async (
parent: SVG, parent: SVG,
node: Node, node: Node,
{ config: { themeVariables, flowchart } }: RenderOptions { config: { themeVariables, flowchart } }: ShapeRenderOptions
) => { ) => {
const { labelStyles } = styles2String(node); const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
@@ -40,7 +40,11 @@ export const iconCircle = async (
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
if (node.icon) { if (node.icon) {
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, {
height: iconSize,
width: iconSize,
fallbackPrefix: '',
})}</g>`
); );
} }
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
@@ -65,17 +69,25 @@ export const iconCircle = async (
const outerShape = shapeSvg.insert(() => outerNode); const outerShape = shapeSvg.insert(() => outerNode);
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` `translate(${-iconWidth / 2 - iconX},${
topLabel
? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY
: -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY
})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${
topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height
})`
); );
iconShape.attr( iconShape.attr(
'transform', 'transform',
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` `translate(${0},${
topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2
})`
); );
updateNodeBounds(node, outerShape); updateNodeBounds(node, outerShape);

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

@@ -1,17 +1,17 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { Node, RenderOptions } from '../../types.d.ts';
import type { SVG } from '../../../diagram-api/types.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import intersect from '../intersect/index.js'; import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import { getIconSVG } from '../../icons.js'; import { getIconSVG } from '../../icons.js';
import type { Node, ShapeRenderOptions } from '../../types.d.ts';
import intersect from '../intersect/index.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { createRoundedRectPathD } from './roundedRectPath.js'; import { createRoundedRectPathD } from './roundedRectPath.js';
import { labelHelper, updateNodeBounds } from './util.js';
export const iconRounded = async ( export const iconRounded = async (
parent: SVG, parent: SVG,
node: Node, node: Node,
{ config: { themeVariables, flowchart } }: RenderOptions { config: { themeVariables, flowchart } }: ShapeRenderOptions
) => { ) => {
const { labelStyles } = styles2String(node); const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
@@ -64,7 +64,11 @@ export const iconRounded = async (
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, {
height: iconSize,
width: iconSize,
fallbackPrefix: '',
})}</g>`
); );
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width; const iconWidth = iconBBox.width;
@@ -73,19 +77,27 @@ export const iconRounded = async (
const iconY = iconBBox.y; const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` `translate(${-iconWidth / 2 - iconX},${
topLabel
? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY
: -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY
})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${
topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height
})`
); );
iconShape.attr( iconShape.attr(
'transform', 'transform',
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` `translate(${0},${
topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2
})`
); );
updateNodeBounds(node, outerShape); updateNodeBounds(node, outerShape);

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

@@ -1,16 +1,16 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { Node, RenderOptions } from '../../types.d.ts';
import type { SVG } from '../../../diagram-api/types.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import intersect from '../intersect/index.js'; import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import { getIconSVG } from '../../icons.js'; import { getIconSVG } from '../../icons.js';
import type { Node, ShapeRenderOptions } from '../../types.d.ts';
import intersect from '../intersect/index.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { labelHelper, updateNodeBounds } from './util.js';
export const iconSquare = async ( export const iconSquare = async (
parent: SVG, parent: SVG,
node: Node, node: Node,
{ config: { themeVariables, flowchart } }: RenderOptions { config: { themeVariables, flowchart } }: ShapeRenderOptions
) => { ) => {
const { labelStyles } = styles2String(node); const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
@@ -63,7 +63,11 @@ export const iconSquare = async (
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, {
height: iconSize,
width: iconSize,
fallbackPrefix: '',
})}</g>`
); );
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width; const iconWidth = iconBBox.width;
@@ -72,19 +76,27 @@ export const iconSquare = async (
const iconY = iconBBox.y; const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` `translate(${-iconWidth / 2 - iconX},${
topLabel
? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY
: -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY
})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${
topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height
})`
); );
iconShape.attr( iconShape.attr(
'transform', 'transform',
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` `translate(${0},${
topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2
})`
); );
updateNodeBounds(node, outerShape); updateNodeBounds(node, outerShape);

22
packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
View File

@@ -1,15 +1,15 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { Node, RenderOptions } from '../../types.d.ts';
import type { SVG } from '../../../diagram-api/types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import type { Node, ShapeRenderOptions } from '../../types.d.ts';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { labelHelper, updateNodeBounds } from './util.js';
export const imageSquare = async ( export const imageSquare = async (
parent: SVG, parent: SVG,
node: Node, node: Node,
{ config: { flowchart } }: RenderOptions { config: { flowchart } }: ShapeRenderOptions
) => { ) => {
const img = new Image(); const img = new Image();
img.src = node?.img ?? ''; img.src = node?.img ?? '';
@@ -92,12 +92,18 @@ export const imageSquare = async (
label.attr( label.attr(
'transform', 'transform',
`translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -imageHeight / 2 - bbox.height / 2 - labelPadding / 2 : imageHeight / 2 - bbox.height / 2 + labelPadding / 2})` `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${
topLabel
? -imageHeight / 2 - bbox.height / 2 - labelPadding / 2
: imageHeight / 2 - bbox.height / 2 + labelPadding / 2
})`
); );
iconShape.attr( iconShape.attr(
'transform', 'transform',
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` `translate(${0},${
topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2
})`
); );
updateNodeBounds(node, outerShape); updateNodeBounds(node, outerShape);

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

@@ -1,14 +1,13 @@
import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
import rough from 'roughjs'; import rough from 'roughjs';
import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import type { RenderOptions } from '../../types.js'; import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
export const note = async ( export const note = async (
parent: SVGAElement, parent: SVGAElement,
node: Node, node: Node,
{ config: { themeVariables } }: RenderOptions { config: { themeVariables } }: ShapeRenderOptions
) => { ) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;

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

@@ -1,14 +1,14 @@
import { updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js';
import type { Node, RenderOptions } from '../../types.js';
import type { SVG } from '../../../diagram-api/types.js';
import rough from 'roughjs'; import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { updateNodeBounds } from './util.js';
export const stateEnd = ( export const stateEnd = (
parent: SVG, parent: SVG,
node: Node, node: Node,
{ config: { themeVariables } }: RenderOptions { config: { themeVariables } }: ShapeRenderOptions
) => { ) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;

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

@@ -1,14 +1,14 @@
import { updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js';
import type { Node, RenderOptions } from '../../types.js';
import type { SVG } from '../../../diagram-api/types.js';
import rough from 'roughjs'; import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { solidStateFill } from './handDrawnShapeStyles.js'; import { solidStateFill } from './handDrawnShapeStyles.js';
import { updateNodeBounds } from './util.js';
export const stateStart = ( export const stateStart = (
parent: SVG, parent: SVG,
node: Node, node: Node,
{ config: { themeVariables } }: RenderOptions { config: { themeVariables } }: ShapeRenderOptions
) => { ) => {
const { lineColor } = themeVariables; const { lineColor } = themeVariables;

2
packages/mermaid/src/rendering-util/types.ts
View File

@@ -144,7 +144,7 @@ export type LayoutMethod =
| 'osage' | 'osage'
| 'grid'; | 'grid';
export interface RenderOptions { export interface ShapeRenderOptions {
config: MermaidConfig; config: MermaidConfig;
dir: string; dir: string;
} }