GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into update-class-diagram and fix conflicts

Browse Source
This commit is contained in:
yari-dewalt 2024-10-28 10:32:19 -07:00
commit b315d70af5
71 changed files with 615 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/config/setup/interfaces/mermaid.RenderResult.md
View File

@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
#### Defined in
[packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L90)
[packages/mermaid/src/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L95)
---
@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
#### Defined in
[packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
[packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85)
---
@ -63,4 +63,4 @@ The svg code for the rendered graph.
#### Defined in
[packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L76)
[packages/mermaid/src/types.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L81)

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

@ -3,6 +3,21 @@ import ELK from 'elkjs/lib/elk.bundled.js';
import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid';
import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
type Node = LayoutData['nodes'][number];
interface LabelData {
width: number;
height: number;
wrappingWidth?: number;
labelNode?: SVGGElement | null;
}
interface NodeWithVertex extends Omit<Node, 'domId'> {
children?: unknown[];
labelData?: LabelData;
domId?: Node['domId'] | SVGGroup | d3.Selection<SVGAElement, unknown, Element | null, unknown>;
}
export const render = async (
data4Layout: LayoutData,
svg: SVG,
@ -24,27 +39,37 @@ export const render = async (
const nodeDb: Record<string, any> = {};
const clusterDb: Record<string, any> = {};
const addVertex = async (nodeEl: any, graph: { children: any[] }, nodeArr: any, node: any) => {
const labelData: any = { width: 0, height: 0 };
const addVertex = async (
nodeEl: SVGGroup,
graph: { children: NodeWithVertex[] },
nodeArr: Node[],
node: Node
) => {
const labelData: LabelData = { width: 0, height: 0 };
let boundingBox;
const child = {
...node,
};
graph.children.push(child);
nodeDb[node.id] = child;
const config = getConfig();
// Add the element to the DOM
if (!node.isGroup) {
const child: NodeWithVertex = {
...node,
};
graph.children.push(child);
nodeDb[node.id] = child;
const childNodeEl = await insertNode(nodeEl, node, { config, dir: node.dir });
boundingBox = childNodeEl.node().getBBox();
const boundingBox = childNodeEl.node()!.getBBox();
child.domId = childNodeEl;
child.width = boundingBox.width;
child.height = boundingBox.height;
} else {
// A subgraph
child.children = [];
const child: NodeWithVertex & { children: NodeWithVertex[] } = {
...node,
children: [],
};
graph.children.push(child);
nodeDb[node.id] = child;
await addVertices(nodeEl, nodeArr, child, node.id);
if (node.label) {
@ -68,28 +93,16 @@ export const render = async (
};
const addVertices = async function (
nodeEl: any,
nodeArr: any[],
graph: {
id: string;
layoutOptions: {
'elk.hierarchyHandling': string;
'elk.algorithm': any;
'nodePlacement.strategy': any;
'elk.layered.mergeEdges': any;
'elk.direction': string;
'spacing.baseValue': number;
};
children: never[];
edges: never[];
},
parentId?: undefined
nodeEl: SVGGroup,
nodeArr: Node[],
graph: { children: NodeWithVertex[] },
parentId?: string
) {
const siblings = nodeArr.filter((node: { parentId: any }) => node.parentId === parentId);
const siblings = nodeArr.filter((node) => node?.parentId === parentId);
log.info('addVertices APA12', siblings, parentId);
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
await Promise.all(
siblings.map(async (node: any) => {
siblings.map(async (node) => {
await addVertex(nodeEl, graph, nodeArr, node);
})
);

33
packages/mermaid/src/diagrams/class/shapeUtil.ts
View File

@ -8,15 +8,16 @@ import { createText } from '../../rendering-util/createText.js';
import { evaluate, hasKatex } from '../common/common.js';
import type { Node } from '../../rendering-util/types.js';
import type { MermaidConfig } from '../../config.type.js';
import type { D3Selection } from '../../types.js';
// Creates the shapeSvg and inserts text
export const textHelper = async (
parent: SVGAElement,
export async function textHelper<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: any,
config: MermaidConfig,
useHtmlLabels: boolean,
GAP = config.class!.padding ?? 12
) => {
) {
const TEXT_PADDING = !useHtmlLabels ? 3 : 0;
const shapeSvg = parent
// @ts-ignore: Ignore error for using .insert on SVGAElement
@ -38,13 +39,13 @@ export const textHelper = async (
const annotation = node.annotations[0];
await addText(annotationGroup, { text: `«${annotation}»` } as unknown as ClassMember, 0);
const annotationGroupBBox = annotationGroup.node().getBBox();
const annotationGroupBBox = annotationGroup.node()!.getBBox();
annotationGroupHeight = annotationGroupBBox.height;
}
labelGroup = shapeSvg.insert('g').attr('class', 'label-group text');
await addText(labelGroup, node, 0, ['font-weight: bolder']);
const labelGroupBBox = labelGroup.node().getBBox();
const labelGroupBBox = labelGroup.node()!.getBBox();
labelGroupHeight = labelGroupBBox.height;
membersGroup = shapeSvg.insert('g').attr('class', 'members-group text');
@ -53,7 +54,7 @@ export const textHelper = async (
const height = await addText(membersGroup, member, yOffset, [member.parseClassifier()]);
yOffset += height + TEXT_PADDING;
}
membersGroupHeight = membersGroup.node().getBBox().height;
membersGroupHeight = membersGroup.node()!.getBBox().height;
if (membersGroupHeight <= 0) {
membersGroupHeight = GAP / 2;
}
@ -65,41 +66,41 @@ export const textHelper = async (
methodsYOffset += height + TEXT_PADDING;
}
let bbox = shapeSvg.node().getBBox();
let bbox = shapeSvg.node()!.getBBox();
// Center annotation
if (annotationGroup !== null) {
const annotationGroupBBox = annotationGroup.node().getBBox();
const annotationGroupBBox = annotationGroup.node()!.getBBox();
annotationGroup.attr('transform', `translate(${-annotationGroupBBox.width / 2})`);
}
// Adjust label
labelGroup.attr('transform', `translate(${-labelGroupBBox.width / 2}, ${annotationGroupHeight})`);
bbox = shapeSvg.node().getBBox();
bbox = shapeSvg.node()!.getBBox();
membersGroup.attr(
'transform',
`translate(${0}, ${annotationGroupHeight + labelGroupHeight + GAP * 2})`
);
bbox = shapeSvg.node().getBBox();
bbox = shapeSvg.node()!.getBBox();
methodsGroup.attr(
'transform',
`translate(${0}, ${annotationGroupHeight + labelGroupHeight + (membersGroupHeight ? membersGroupHeight + GAP * 4 : GAP * 2)})`
);
bbox = shapeSvg.node().getBBox();
bbox = shapeSvg.node()!.getBBox();
return { shapeSvg, bbox };
};
}
// Modified version of labelHelper() to help create and place text for classes
const addText = async (
parentGroup: d3.Selection<SVGGElement, unknown, null, undefined>,
async function addText<T extends SVGGraphicsElement>(
parentGroup: D3Selection<T>,
node: Node | ClassNode | ClassMember,
yOffset: number,
styles: string[] = []
) => {
) {
const textEl = parentGroup.insert('g').attr('class', 'label').attr('style', styles.join('; '));
const config = getConfig();
let useHtmlLabels =
@ -219,4 +220,4 @@ const addText = async (
// Center text and offset by yOffset
textEl.attr('transform', 'translate(0,' + (-bbox.height / (2 * numberOfLines) + yOffset) + ')');
return bbox.height;
};
}

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

@ -204,7 +204,7 @@ export const createText = async (
width = 200,
addSvgBackground = false,
} = {},
config: MermaidConfig
config?: MermaidConfig
) => {
log.debug(
'XYZ createText',

2
packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.ts
View File

@ -84,7 +84,7 @@ describe('Test Alias for shapes', function () {
});
it('should support alias for shadedProcess shape ', function () {
const aliases = ['lined-process', 'lined-rectangle', 'lin-proc', 'lin-rect'];
const aliases = ['lined-process', 'lined-rectangle', 'lin-proc', 'lin-rect'] as const;
for (const alias of aliases) {
expect(shapes[alias]).toBe(shapes['shaded-process']);
}

30
packages/mermaid/src/rendering-util/rendering-elements/nodes.js → packages/mermaid/src/rendering-util/rendering-elements/nodes.ts
View File

@ -1,10 +1,17 @@
import { log } from '../../logger.js';
import { shapes } from './shapes.js';
import type { Node, ShapeRenderOptions } from '../types.js';
import type { SVGGroup } from '../../mermaid.js';
import type { D3Selection } from '../../types.js';
import type { graphlib } from 'dagre-d3-es';
const nodeElems = new Map();
type ShapeHandler = (typeof shapes)[keyof typeof shapes];
type NodeElement = D3Selection<SVGAElement> | Awaited<ReturnType<ShapeHandler>>;
export const insertNode = async (elem, node, renderOptions) => {
let newEl;
const nodeElems = new Map<string, NodeElement>();
export async function insertNode(elem: SVGGroup, node: Node, renderOptions: ShapeRenderOptions) {
let newEl: NodeElement | undefined;
let el;
//special check for rect shape (with or without rounded corners)
@ -16,7 +23,7 @@ export const insertNode = async (elem, node, renderOptions) => {
}
}
const shapeHandler = shapes[node.shape];
const shapeHandler = shapes[(node.shape ?? 'undefined') as keyof typeof shapes];
if (!shapeHandler) {
throw new Error(`No such shape: ${node.shape}. Please check your syntax.`);
@ -30,7 +37,10 @@ export const insertNode = async (elem, node, renderOptions) => {
} else if (node.linkTarget) {
target = node.linkTarget || '_blank';
}
newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
newEl = elem
.insert<SVGAElement>('svg:a')
.attr('xlink:href', node.link)
.attr('target', target ?? null);
el = await shapeHandler(newEl, node, renderOptions);
} else {
el = await shapeHandler(elem, node, renderOptions);
@ -43,12 +53,12 @@ export const insertNode = async (elem, node, renderOptions) => {
nodeElems.set(node.id, newEl);
if (node.haveCallback) {
nodeElems.get(node.id).attr('class', nodeElems.get(node.id).attr('class') + ' clickable');
newEl.attr('class', newEl.attr('class') + ' clickable');
}
return newEl;
};
}
export const setNodeElem = (elem, node) => {
export const setNodeElem = (elem: NodeElement, node: Pick<Node, 'id'>) => {
nodeElems.set(node.id, elem);
};
@ -56,8 +66,8 @@ export const clear = () => {
nodeElems.clear();
};
export const positionNode = (node) => {
const el = nodeElems.get(node.id);
export const positionNode = (node: ReturnType<graphlib.Graph['node']>) => {
const el = nodeElems.get(node.id)!;
log.trace(
'Transforming node',
node.diff,

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

@ -1,3 +1,5 @@
import type { Entries } from 'type-fest';
import type { D3Selection, MaybePromise } from '../../types.js';
import type { Node, ShapeRenderOptions } from '../types.js';
import { anchor } from './shapes/anchor.js';
import { bowTieRect } from './shapes/bowTieRect.js';
@ -57,8 +59,11 @@ import { waveRectangle } from './shapes/waveRectangle.js';
import { windowPane } from './shapes/windowPane.js';
import { classBox } from './shapes/classBox.js';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type ShapeHandler = (parent: any, node: Node, options: ShapeRenderOptions) => unknown;
type ShapeHandler = <T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
options: ShapeRenderOptions
) => MaybePromise<D3Selection<SVGGElement>>;
export interface ShapeDefinition {
semanticName: string;
@ -76,7 +81,7 @@ export interface ShapeDefinition {
handler: ShapeHandler;
}
export const shapesDefs: ShapeDefinition[] = [
export const shapesDefs = [
{
semanticName: 'Process',
name: 'Rectangle',
@ -451,11 +456,11 @@ export const shapesDefs: ShapeDefinition[] = [
aliases: ['class-box'],
handler: classBox,
},
];
] as const satisfies ShapeDefinition[];
const generateShapeMap = () => {
// These are the shapes that didn't have documentation present
const shapeMap: Record<string, ShapeHandler> = {
const undocumentedShapes = {
// States
state,
choice,
@ -473,18 +478,25 @@ const generateShapeMap = () => {
imageSquare,
anchor,
};
} as const;
for (const shape of shapesDefs) {
for (const alias of [
shape.shortName,
...(shape.aliases ?? []),
...(shape.internalAliases ?? []),
]) {
shapeMap[alias] = shape.handler;
}
}
return shapeMap;
const entries = [
...(Object.entries(undocumentedShapes) as Entries<typeof undocumentedShapes>),
...shapesDefs.flatMap((shape) => {
const aliases = [
shape.shortName,
...('aliases' in shape ? shape.aliases : []),
...('internalAliases' in shape ? shape.internalAliases : []),
];
return aliases.map((alias) => [alias, shape.handler] as const);
}),
];
return Object.fromEntries(entries) as Record<
(typeof entries)[number][0],
(typeof entries)[number][1]
> satisfies Record<string, ShapeHandler>;
};
export const shapes = generateShapeMap();
export type ShapeID = keyof typeof shapes;

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

@ -1,11 +1,13 @@
import { log } from '../../../logger.js';
import { updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { handleUndefinedAttr } from '../../../utils.js';
import type { D3Selection } from '../../../types.js';
export const anchor = (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export function anchor<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles;
const classes = getNodeClasses(node);
@ -14,7 +16,6 @@ export const anchor = (parent: SVGAElement, node: Node): Promise<SVGAElement> =>
cssClasses = 'anchor';
}
const shapeSvg = parent
// @ts-ignore - SVGElement is not typed
.insert('g')
.attr('class', cssClasses)
.attr('id', node.domId || node.id);
@ -23,6 +24,7 @@ export const anchor = (parent: SVGAElement, node: Node): Promise<SVGAElement> =>
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { fill: 'black', stroke: 'none', fillStyle: 'solid' });
@ -31,7 +33,7 @@ export const anchor = (parent: SVGAElement, node: Node): Promise<SVGAElement> =>
}
const roughNode = rc.circle(0, 0, radius * 2, options);
const circleElem = shapeSvg.insert(() => roughNode, ':first-child');
circleElem.attr('class', 'anchor').attr('style', cssStyles);
circleElem.attr('class', 'anchor').attr('style', handleUndefinedAttr(cssStyles));
updateNodeBounds(node, circleElem);
@ -41,4 +43,4 @@ export const anchor = (parent: SVGAElement, node: Node): Promise<SVGAElement> =>
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
View File

@ -1,8 +1,9 @@
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
function generateArcPoints(
x1: number,
@ -70,7 +71,7 @@ function generateArcPoints(
return points;
}
export const bowTieRect = async (parent: SVGAElement, node: Node) => {
export async function bowTieRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -91,6 +92,7 @@ export const bowTieRect = async (parent: SVGAElement, node: Node) => {
...generateArcPoints(w / 2, h / 2, w / 2, -h / 2, rx, ry, true),
];
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -122,4 +124,4 @@ export const bowTieRect = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
View File

@ -1,11 +1,12 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import { createPathFromPoints } from './util.js';
import type { D3Selection } from '../../../types.js';
// const createPathFromPoints = (points: { x: number; y: number }[]): string => {
// const pointStrings = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`);
@ -13,7 +14,7 @@ import { createPathFromPoints } from './util.js';
// return pointStrings.join(' ');
// };
export async function card(parent: SVGAElement, node: Node): Promise<SVGAElement> {
export async function card<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -34,10 +35,11 @@ export async function card(parent: SVGAElement, node: Node): Promise<SVGAElement
{ x: left + padding, y: top },
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
let polygon: D3Selection<SVGGElement> | Awaited<ReturnType<typeof insertPolygonShape>>;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
const pathData = createPathFromPoints(points);

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

@ -1,12 +1,11 @@
import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
import type { SVG } from '../../../diagram-api/types.js';
// @ts-ignore TODO: Fix rough typings
import rough from 'roughjs';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { createPathFromPoints, getNodeClasses } from './util.js';
import type { D3Selection } from '../../../types.js';
export const choice = (parent: SVG, node: Node) => {
export function choice<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { nodeStyles } = styles2String(node);
node.label = '';
const shapeSvg = parent
@ -24,7 +23,7 @@ export const choice = (parent: SVG, node: Node) => {
{ x: -s / 2, y: 0 },
];
// @ts-ignore TODO: Fix rough typings
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -53,4 +52,4 @@ export const choice = (parent: SVG, node: Node) => {
};
return shapeSvg;
};
}

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

@ -4,8 +4,10 @@ import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
@ -15,12 +17,13 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
const roughNode = rc.circle(0, 0, radius * 2, options);
circleElem = shapeSvg.insert(() => roughNode, ':first-child');
circleElem.attr('class', 'basic label-container').attr('style', cssStyles);
circleElem.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
} else {
circleElem = shapeSvg
.insert('circle', ':first-child')
@ -39,4 +42,4 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
};
return shapeSvg;
};
}

19
packages/mermaid/src/rendering-util/rendering-elements/shapes/classBox.ts
View File

@ -8,8 +8,9 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import intersect from '../intersect/index.js';
import { textHelper } from '../../../diagrams/class/shapeUtil.js';
import { evaluate } from '../../../diagrams/common/common.js';
import type { D3Selection } from '../../../types.js';
export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function classBox<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const config = getConfig();
const PADDING = config.class!.padding ?? 12;
const GAP = PADDING;
@ -81,7 +82,7 @@ export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAEle
const rect = shapeSvg.insert(() => roughRect, ':first-child');
rect.attr('class', 'basic label-container');
const rectBBox = rect.node().getBBox();
const rectBBox = rect.node()!.getBBox();
// Rect is centered so now adjust labels.
// TODO: Fix types
@ -132,13 +133,13 @@ export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAEle
// Render divider lines.
const annotationGroupHeight =
shapeSvg.select('.annotation-group').node().getBBox().height -
(shapeSvg.select('.annotation-group').node() as SVGGraphicsElement).getBBox().height -
(renderExtraBox ? PADDING / 2 : 0) || 0;
const labelGroupHeight =
shapeSvg.select('.label-group').node().getBBox().height - (renderExtraBox ? PADDING / 2 : 0) ||
0;
(shapeSvg.select('.label-group').node() as SVGGraphicsElement).getBBox().height -
(renderExtraBox ? PADDING / 2 : 0) || 0;
const membersGroupHeight =
shapeSvg.select('.members-group').node().getBBox().height -
(shapeSvg.select('.members-group').node() as SVGGraphicsElement).getBBox().height -
(renderExtraBox ? PADDING / 2 : 0) || 0;
// First line (under label)
if (classNode.members.length > 0 || classNode.methods.length > 0 || renderExtraBox) {
@ -150,7 +151,7 @@ export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAEle
options
);
const line = shapeSvg.insert(() => roughLine);
line.attr('class', 'divider', 'style', styles);
line.attr('class', 'divider').attr('style', styles);
}
// Second line (under members)
@ -163,7 +164,7 @@ export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAEle
options
);
const line = shapeSvg.insert(() => roughLine);
line.attr('class', 'divider', 'style', styles);
line.attr('class', 'divider').attr('style', styles);
}
/// Apply styles ///
@ -203,4 +204,4 @@ export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAEle
};
return shapeSvg;
};
}

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

@ -1,10 +1,10 @@
import { log } from '../../../logger.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
import type { SVG } from '../../../diagram-api/types.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import type { D3Selection } from '../../../types.js';
function createLine(r: number) {
const xAxis45 = Math.cos(Math.PI / 4); // cosine of 45 degrees
@ -20,7 +20,7 @@ function createLine(r: number) {
M ${pointQ1.x},${pointQ1.y} L ${pointQ3.x},${pointQ3.y}`;
}
export const crossedCircle = (parent: SVG, node: Node) => {
export function crossedCircle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
node.label = '';
@ -31,7 +31,7 @@ export const crossedCircle = (parent: SVG, node: Node) => {
const radius = Math.max(30, node?.width ?? 0);
const { cssStyles } = node;
// @ts-expect-error shapeSvg d3 class is incorrect?
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -64,4 +64,4 @@ export const crossedCircle = (parent: SVG, node: Node) => {
};
return shapeSvg;
};
}

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

@ -1,8 +1,9 @@
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
function generateCirclePoints(
centerX: number,
@ -34,7 +35,10 @@ function generateCirclePoints(
return points;
}
export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => {
export async function curlyBraceLeft<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -66,6 +70,7 @@ export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => {
{ x: w / 2, y: h / 2 + radius },
];
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { fill: 'none' });
@ -107,4 +112,4 @@ export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -1,8 +1,9 @@
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
function generateCirclePoints(
centerX: number,
@ -34,7 +35,10 @@ function generateCirclePoints(
return points;
}
export const curlyBraceRight = async (parent: SVGAElement, node: Node) => {
export async function curlyBraceRight<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -66,6 +70,7 @@ export const curlyBraceRight = async (parent: SVGAElement, node: Node) => {
{ x: -w / 2, y: h / 2 + radius },
];
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { fill: 'none' });
@ -107,4 +112,4 @@ export const curlyBraceRight = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -1,8 +1,9 @@
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
function generateCirclePoints(
centerX: number,
@ -34,7 +35,10 @@ function generateCirclePoints(
return points;
}
export const curlyBraces = async (parent: SVGAElement, node: Node) => {
export async function curlyBraces<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -81,6 +85,7 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => {
...generateCirclePoints(-w / 2 + radius + radius / 2, h / 2, radius, 30, -180, -270),
];
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { fill: 'none' });
@ -126,4 +131,4 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -6,11 +6,15 @@ import {
generateCirclePoints,
} from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
export async function curvedTrapezoid<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -21,6 +25,7 @@ export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
const radius = h / 2;
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -67,4 +72,4 @@ export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -3,6 +3,8 @@ import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
export const createCylinderPathD = (
x: number,
@ -48,7 +50,7 @@ export const createInnerCylinderPathD = (
): string => {
return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
};
export const cylinder = async (parent: SVGAElement, node: Node) => {
export async function cylinder<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -57,10 +59,11 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
const ry = rx / (2.5 + w / 50);
const h = Math.max(bbox.height + ry + node.padding, node.height ?? 0);
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
let cylinder: D3Selection<SVGPathElement> | D3Selection<SVGGElement>;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);
const innerPathData = createInnerCylinderPathD(0, ry, w, h, rx, ry);
@ -79,7 +82,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
.insert('path', ':first-child')
.attr('d', pathData)
.attr('class', 'basic label-container')
.attr('style', cssStyles)
.attr('style', handleUndefinedAttr(cssStyles))
.attr('style', nodeStyles);
}
@ -119,4 +122,4 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -1,10 +1,14 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
export async function dividedRectangle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -17,6 +21,7 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
if (node.look !== 'handDrawn') {
@ -63,4 +68,4 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -1,8 +1,10 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
export const createCylinderPathD = (
x: number,
@ -48,7 +50,7 @@ export const createInnerCylinderPathD = (
): string => {
return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
};
export const cylinder = async (parent: SVGAElement, node: Node) => {
export async function cylinder<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -57,10 +59,11 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
const ry = rx / (2.5 + w / 50);
const h = bbox.height + ry + node.padding;
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
let cylinder: D3Selection<SVGPathElement> | D3Selection<SVGGElement>;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);
const innerPathData = createInnerCylinderPathD(0, ry, w, h, rx, ry);
@ -79,7 +82,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
.insert('path', ':first-child')
.attr('d', pathData)
.attr('class', 'basic label-container')
.attr('style', cssStyles)
.attr('style', handleUndefinedAttr(cssStyles))
.attr('style', nodeStyles);
}
@ -114,4 +117,4 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -4,8 +4,13 @@ import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function doublecircle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
@ -17,6 +22,7 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const outerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 2.5 });
@ -26,7 +32,9 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
circleGroup = shapeSvg.insert('g', ':first-child');
// circleGroup = circleGroup.insert(() => outerRoughNode, ':first-child');
circleGroup.attr('class', node.cssClasses).attr('style', cssStyles);
circleGroup
.attr('class', handleUndefinedAttr(node.cssClasses))
.attr('style', handleUndefinedAttr(cssStyles));
circleGroup.node()?.appendChild(outerRoughNode);
circleGroup.node()?.appendChild(innerRoughNode);
@ -60,4 +68,4 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
};
return shapeSvg;
};
}

16
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@ -4,8 +4,14 @@ import type { Node, RectOptions } from '../../types.js';
import { createRoundedRectPathD } from './roundedRectPath.js';
import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
export async function drawRect<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
options: RectOptions
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
// console.log('IPI labelStyles:', labelStyles);
@ -39,15 +45,15 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
: rc.rectangle(x, y, totalWidth, totalHeight, options);
rect = shapeSvg.insert(() => roughNode, ':first-child');
rect.attr('class', 'basic label-container').attr('style', cssStyles);
rect.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
} else {
rect = shapeSvg.insert('rect', ':first-child');
rect
.attr('class', 'basic label-container')
.attr('style', nodeStyles)
.attr('rx', rx)
.attr('ry', ry)
.attr('rx', handleUndefinedAttr(rx))
.attr('ry', handleUndefinedAttr(ry))
.attr('x', x)
.attr('y', y)
.attr('width', totalWidth)
@ -61,4 +67,4 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
};
return shapeSvg;
};
}

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

@ -1,16 +1,16 @@
import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import type { Node, ShapeRenderOptions } from '../../types.ts';
import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js';
export const filledCircle = (
parent: SVG,
export function filledCircle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
{ config: { themeVariables } }: ShapeRenderOptions
) => {
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.label = '';
node.labelStyle = labelStyles;
@ -21,7 +21,7 @@ export const filledCircle = (
const radius = 7;
const { cssStyles } = node;
// @ts-expect-error shapeSvg d3 class is incorrect?
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const { nodeBorder } = themeVariables;
const options = userNodeOverrides(node, { fillStyle: 'solid' });
@ -53,4 +53,4 @@ export const filledCircle = (
};
return shapeSvg;
};
}

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

@ -1,12 +1,16 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { createPathFromPoints } from './util.js';
import type { D3Selection } from '../../../types.js';
export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function flippedTriangle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -23,6 +27,7 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
if (node.look !== 'handDrawn') {
@ -60,4 +65,4 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<
};
return shapeSvg;
};
}

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

@ -1,15 +1,15 @@
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 { getNodeClasses, updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js';
export const forkJoin = (
parent: SVG,
export function forkJoin<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
{ dir, config: { state, themeVariables } }: ShapeRenderOptions
) => {
) {
const { nodeStyles } = styles2String(node);
node.label = '';
const shapeSvg = parent
@ -29,7 +29,7 @@ export const forkJoin = (
const x = (-1 * width) / 2;
const y = (-1 * height) / 2;
// @ts-ignore TODO: Fix rough typings
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {
stroke: themeVariables.lineColor,
@ -63,4 +63,4 @@ export const forkJoin = (
return intersect.rect(node, point);
};
return shapeSvg;
};
}

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

@ -7,11 +7,15 @@ import {
generateCirclePoints,
} from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
export async function halfRoundedRectangle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const minWidth = 80,
@ -22,6 +26,7 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
const radius = h / 2;
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -64,4 +69,4 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
return pos;
};
return shapeSvg;
};
}

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

@ -3,8 +3,8 @@ import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js';
export const createHexagonPathD = (
x: number,
@ -24,7 +24,7 @@ export const createHexagonPathD = (
].join(' ');
};
export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -42,10 +42,11 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
{ x: 0, y: -h / 2 },
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
let polygon: D3Selection<SVGGElement> | Awaited<ReturnType<typeof insertPolygonShape>>;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
const pathData = createHexagonPathD(0, 0, w, h, m);
@ -76,4 +77,4 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
View File

@ -1,11 +1,12 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
export const hourglass = async (parent: SVGAElement, node: Node) => {
export async function hourglass<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.label = '';
node.labelStyle = labelStyles;
@ -16,6 +17,7 @@ export const hourglass = async (parent: SVGAElement, node: Node) => {
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -57,4 +59,4 @@ export const hourglass = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -1,17 +1,17 @@
import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import { getIconSVG } from '../../icons.js';
import type { Node, ShapeRenderOptions } from '../../types.ts';
import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js';
export const icon = async (
parent: SVG,
export async function icon<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
{ config: { themeVariables, flowchart } }: ShapeRenderOptions
) => {
) {
const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
@ -33,6 +33,7 @@ export const icon = async (
const labelPadding = node.label ? 8 : 0;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: 'none', fill: 'none' });
@ -64,7 +65,7 @@ export const icon = async (
fallbackPrefix: '',
})}</g>`
);
const iconBBox = iconElem.node().getBBox();
const iconBBox = iconElem.node()!.getBBox();
const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height;
const iconX = iconBBox.x;
@ -134,4 +135,4 @@ export const icon = async (
};
return shapeSvg;
};
}

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

@ -1,17 +1,17 @@
import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import { getIconSVG } from '../../icons.js';
import type { Node, ShapeRenderOptions } from '../../types.ts';
import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js';
export const iconCircle = async (
parent: SVG,
export async function iconCircle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
{ config: { themeVariables, flowchart } }: ShapeRenderOptions
) => {
) {
const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
@ -28,6 +28,7 @@ export const iconCircle = async (
const { nodeBorder } = themeVariables;
const { stylesMap } = compileStyles(node);
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: 'transparent' });
@ -46,7 +47,7 @@ export const iconCircle = async (
})}</g>`
);
}
const iconBBox = iconElem.node().getBBox();
const iconBBox = iconElem.node()!.getBBox();
const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height;
const iconX = iconBBox.x;
@ -98,4 +99,4 @@ export const iconCircle = async (
};
return shapeSvg;
};
}

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

@ -1,18 +1,18 @@
import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import { getIconSVG } from '../../icons.js';
import type { Node, ShapeRenderOptions } from '../../types.ts';
import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { createRoundedRectPathD } from './roundedRectPath.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js';
export const iconRounded = async (
parent: SVG,
export async function iconRounded<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
{ config: { themeVariables, flowchart } }: ShapeRenderOptions
) => {
) {
const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
@ -38,6 +38,7 @@ export const iconRounded = async (
const labelPadding = node.label ? 8 : 0;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: 'transparent' });
@ -69,7 +70,7 @@ export const iconRounded = async (
fallbackPrefix: '',
})}</g>`
);
const iconBBox = iconElem.node().getBBox();
const iconBBox = iconElem.node()!.getBBox();
const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height;
const iconX = iconBBox.x;
@ -139,4 +140,4 @@ export const iconRounded = async (
};
return shapeSvg;
};
}

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

@ -1,17 +1,17 @@
import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import { getIconSVG } from '../../icons.js';
import type { Node, ShapeRenderOptions } from '../../types.ts';
import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js';
export const iconSquare = async (
parent: SVG,
export async function iconSquare<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
{ config: { themeVariables, flowchart } }: ShapeRenderOptions
) => {
) {
const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48;
@ -37,6 +37,7 @@ export const iconSquare = async (
const labelPadding = node.label ? 8 : 0;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: 'transparent' });
@ -68,7 +69,7 @@ export const iconSquare = async (
fallbackPrefix: '',
})}</g>`
);
const iconBBox = iconElem.node().getBBox();
const iconBBox = iconElem.node()!.getBBox();
const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height;
const iconX = iconBBox.x;
@ -138,4 +139,4 @@ export const iconSquare = async (
};
return shapeSvg;
};
}

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

@ -1,16 +1,16 @@
import rough from 'roughjs';
import type { SVG } from '../../../diagram-api/types.js';
import { log } from '../../../logger.js';
import type { Node, ShapeRenderOptions } from '../../types.ts';
import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { labelHelper, updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js';
export const imageSquare = async (
parent: SVG,
export async function imageSquare<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
{ config: { flowchart } }: ShapeRenderOptions
) => {
) {
const img = new Image();
img.src = node?.img ?? '';
await img.decode();
@ -52,6 +52,7 @@ export const imageSquare = async (
const labelPadding = node.label ? 8 : 0;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -145,4 +146,4 @@ export const imageSquare = async (
};
return shapeSvg;
};
}

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/insertPolygonShape.ts
View File

@ -1,5 +1,7 @@
export function insertPolygonShape(
parent: any,
import type { D3Selection } from '../../../types.js';
export function insertPolygonShape<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
w: number,
h: number,
points: { x: number; y: number }[]

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

@ -4,6 +4,7 @@ import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js';
// export const createInvertedTrapezoidPathD = (
// x: number,
@ -20,7 +21,10 @@ import { insertPolygonShape } from './insertPolygonShape.js';
// ].join(' ');
// };
export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function inv_trapezoid<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -35,10 +39,11 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
{ x: (-3 * h) / 6, y: -h },
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
let polygon: typeof shapeSvg | ReturnType<typeof insertPolygonShape>;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
const pathData = createPathFromPoints(points);
@ -70,4 +75,4 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
};
return shapeSvg;
};
}

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

@ -2,8 +2,12 @@ import type { Node, RectOptions } from '../../types.js';
import { drawRect } from './drawRect.js';
import { labelHelper, updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js';
import type { D3Selection } from '../../../types.js';
export const roundedRect = async (parent: SVGAElement, node: Node) => {
export async function roundedRect<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const options = {
rx: 5,
ry: 5,
@ -13,9 +17,9 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
} as RectOptions;
return drawRect(parent, node, options);
};
}
export const labelRect = async (parent: SVGElement, node: Node) => {
export async function labelRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'label');
// log.trace('Classes = ', node.class);
@ -52,4 +56,4 @@ export const labelRect = async (parent: SVGElement, node: Node) => {
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
View File

@ -4,8 +4,9 @@ import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js';
export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function lean_left<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -18,10 +19,11 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
{ x: -(3 * h) / 6, y: -h },
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
let polygon: typeof shapeSvg | ReturnType<typeof insertPolygonShape>;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
const pathData = createPathFromPoints(points);
@ -53,4 +55,4 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
View File

@ -4,8 +4,9 @@ import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js';
export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function lean_right<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -18,10 +19,11 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
{ x: 0, y: -h },
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
let polygon: typeof shapeSvg | ReturnType<typeof insertPolygonShape>;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
const pathData = createPathFromPoints(points);
@ -52,4 +54,4 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts
View File

@ -1,13 +1,13 @@
import { log } from '../../../logger.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
import type { Node } from '../../types.ts';
import type { SVG } from '../../../diagram-api/types.js';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import { createPathFromPoints } from './util.js';
import type { D3Selection } from '../../../types.js';
export const lightningBolt = (parent: SVG, node: Node) => {
export function lightningBolt<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.label = '';
node.labelStyle = labelStyles;
@ -63,4 +63,4 @@ export const lightningBolt = (parent: SVG, node: Node) => {
};
return shapeSvg;
};
}

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

@ -3,6 +3,8 @@ import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
export const createCylinderPathD = (
x: number,
@ -54,7 +56,10 @@ export const createInnerCylinderPathD = (
): string => {
return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
};
export const linedCylinder = async (parent: SVGAElement, node: Node) => {
export async function linedCylinder<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -64,10 +69,11 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => {
const h = Math.max(bbox.height + ry + (node.padding ?? 0), node.height ?? 0);
const outerOffset = h * 0.1; // 10% of height
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
let cylinder: typeof shapeSvg | D3Selection<SVGPathElement>;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry, outerOffset);
const innerPathData = createInnerCylinderPathD(0, ry, w, h, rx, ry);
@ -89,7 +95,7 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => {
.insert('path', ':first-child')
.attr('d', pathData)
.attr('class', 'basic label-container')
.attr('style', cssStyles)
.attr('style', handleUndefinedAttr(cssStyles))
.attr('style', nodeStyles);
}
@ -130,4 +136,4 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -5,11 +5,15 @@ import {
generateFullSineWavePoints,
} from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import rough from 'roughjs';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import type { D3Selection } from '../../../types.js';
export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
export async function linedWaveEdgedRect<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -19,6 +23,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
const finalH = h + waveAmplitude;
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -75,4 +80,4 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
View File

@ -1,10 +1,11 @@
import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import type { D3Selection } from '../../../types.js';
export const multiRect = async (parent: SVGAElement, node: Node) => {
export async function multiRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -15,6 +16,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
const y = -h / 2;
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -78,4 +80,4 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -6,11 +6,15 @@ import {
generateFullSineWavePoints,
} from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import rough from 'roughjs';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import type { D3Selection } from '../../../types.js';
export const multiWaveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
export async function multiWaveEdgedRectangle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -59,6 +63,7 @@ export const multiWaveEdgedRectangle = async (parent: SVGAElement, node: Node) =
{ x, y },
];
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -100,4 +105,4 @@ export const multiWaveEdgedRectangle = async (parent: SVGAElement, node: Node) =
};
return shapeSvg;
};
}

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

@ -3,12 +3,13 @@ import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js';
export const note = async (
parent: SVGAElement,
export async function note<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
{ config: { themeVariables } }: ShapeRenderOptions
) => {
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -55,4 +56,4 @@ export const note = async (
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
View File

@ -5,6 +5,7 @@ import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js';
export const createDecisionBoxPathD = (x: number, y: number, size: number): string => {
return [
@ -16,7 +17,7 @@ export const createDecisionBoxPathD = (x: number, y: number, size: number): stri
].join(' ');
};
export const question = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function question<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -32,10 +33,11 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
{ x: 0, y: -s / 2 },
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
let polygon: typeof shapeSvg | ReturnType<typeof insertPolygonShape>;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
const pathData = createDecisionBoxPathD(0, 0, s);
@ -71,4 +73,4 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
};
return shapeSvg;
};
}

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

@ -3,11 +3,12 @@ import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
export const rect_left_inv_arrow = async (
parent: SVGAElement,
export async function rect_left_inv_arrow<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
): Promise<SVGAElement> => {
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -28,6 +29,7 @@ export const rect_left_inv_arrow = async (
];
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -63,4 +65,4 @@ export const rect_left_inv_arrow = async (
};
return shapeSvg;
};
}

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

@ -9,8 +9,12 @@ import rough from 'roughjs';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
import { createRoundedRectPathD } from './roundedRectPath.js';
import { log } from '../../../logger.js';
import type { D3Selection } from '../../../types.js';
export const rectWithTitle = async (parent: SVGElement, node: Node) => {
export async function rectWithTitle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
let classes;
@ -36,7 +40,7 @@ export const rectWithTitle = async (parent: SVGElement, node: Node) => {
const title = node.label;
const text = label.node().appendChild(await createLabel(title, node.labelStyle, true, true));
const text = label.node()!.appendChild(await createLabel(title, node.labelStyle, true, true));
let bbox = { width: 0, height: 0 };
if (evaluate(getConfig()?.flowchart?.htmlLabels)) {
const div = text.children[0];
@ -49,7 +53,7 @@ export const rectWithTitle = async (parent: SVGElement, node: Node) => {
const textRows = description || [];
const titleBox = text.getBBox();
const descr = label
.node()
.node()!
.appendChild(
await createLabel(
textRows.join ? textRows.join('<br/>') : textRows,
@ -87,7 +91,7 @@ export const rectWithTitle = async (parent: SVGElement, node: Node) => {
// Get the size of the label
// Bounding box for title and text
bbox = label.node().getBBox();
bbox = label.node()!.getBBox();
// Center the label
label.attr(
@ -151,4 +155,4 @@ export const rectWithTitle = async (parent: SVGElement, node: Node) => {
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
View File

@ -1,7 +1,11 @@
import type { Node, RectOptions } from '../../types.js';
import type { D3Selection } from '../../../types.js';
import { drawRect } from './drawRect.js';
export const roundedRect = async (parent: SVGAElement, node: Node) => {
export async function roundedRect<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const options = {
rx: 5,
ry: 5,
@ -11,4 +15,4 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
} as RectOptions;
return drawRect(parent, node, options);
};
}

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

@ -1,10 +1,15 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
export const shadedProcess = async (parent: SVGAElement, node: Node) => {
export async function shadedProcess<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -15,6 +20,7 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
const y = -bbox.height / 2 - halfPadding;
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -40,7 +46,7 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
const rect = shapeSvg.insert(() => roughNode, ':first-child');
rect.attr('class', 'basic label-container').attr('style', cssStyles);
rect.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
if (nodeStyles && node.look !== 'handDrawn') {
rect.selectAll('path').attr('style', nodeStyles);
@ -62,4 +68,4 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
View File

@ -1,10 +1,11 @@
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
export const slopedRect = async (parent: SVGAElement, node: Node) => {
export async function slopedRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -15,6 +16,7 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => {
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -58,4 +60,4 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts
View File

@ -1,7 +1,8 @@
import type { Node, RectOptions } from '../../types.js';
import type { D3Selection } from '../../../types.js';
import { drawRect } from './drawRect.js';
export const squareRect = async (parent: SVGAElement, node: Node) => {
export async function squareRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const options = {
rx: 0,
ry: 0,
@ -10,4 +11,4 @@ export const squareRect = async (parent: SVGAElement, node: Node) => {
labelPaddingY: (node?.padding || 0) * 1,
} as RectOptions;
return drawRect(parent, node, options);
};
}

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

@ -4,6 +4,8 @@ import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { createRoundedRectPathD } from './roundedRectPath.js';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
export const createStadiumPathD = (
x: number,
@ -50,7 +52,7 @@ export const createStadiumPathD = (
].join(' ');
};
export const stadium = async (parent: SVGAElement, node: Node) => {
export async function stadium<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -61,6 +63,7 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
let rect;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -68,7 +71,7 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
const roughNode = rc.path(pathData, options);
rect = shapeSvg.insert(() => roughNode, ':first-child');
rect.attr('class', 'basic label-container').attr('style', cssStyles);
rect.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
} else {
rect = shapeSvg.insert('rect', ':first-child');
@ -90,4 +93,4 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
View File

@ -1,11 +1,12 @@
import type { Node, RectOptions } from '../../types.js';
import type { D3Selection } from '../../../types.js';
import { drawRect } from './drawRect.js';
export const state = async (parent: SVGAElement, node: Node) => {
export async function state<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const options = {
rx: 5,
ry: 5,
classes: 'flowchart-node',
} as RectOptions;
return drawRect(parent, node, options);
};
}

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

@ -1,15 +1,15 @@
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 { updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js';
export const stateEnd = (
parent: SVG,
export function stateEnd<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
{ config: { themeVariables } }: ShapeRenderOptions
) => {
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { cssStyles } = node;
@ -59,4 +59,4 @@ export const stateEnd = (
};
return shapeSvg;
};
}

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

@ -1,15 +1,15 @@
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 { updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js';
export const stateStart = (
parent: SVG,
export function stateStart<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
{ config: { themeVariables } }: ShapeRenderOptions
) => {
) {
const { lineColor } = themeVariables;
const shapeSvg = parent
@ -17,20 +17,20 @@ export const stateStart = (
.attr('class', 'node default')
.attr('id', node.domId || node.id);
let circle;
let circle: D3Selection<SVGCircleElement> | D3Selection<SVGGElement>;
if (node.look === 'handDrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));
circle = shapeSvg.insert(() => roughNode);
// center the circle around its coordinate
circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);
} else {
circle = shapeSvg.insert('circle', ':first-child');
// center the circle around its coordinate
circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);
}
// center the circle around its coordinate
// @ts-ignore TODO: Fix typings
circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);
updateNodeBounds(node, circle);
node.intersect = function (point) {
@ -38,4 +38,4 @@ export const stateStart = (
};
return shapeSvg;
};
}

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

@ -4,6 +4,8 @@ import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
export const createSubroutinePathD = (
x: number,
@ -31,7 +33,7 @@ export const createSubroutinePathD = (
].join(' ');
};
export const subroutine = async (parent: SVGAElement, node: Node) => {
export async function subroutine<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -55,6 +57,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
];
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -66,7 +69,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
shapeSvg.insert(() => l2, ':first-child');
const rect = shapeSvg.insert(() => roughNode, ':first-child');
const { cssStyles } = node;
rect.attr('class', 'basic label-container').attr('style', cssStyles);
rect.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
updateNodeBounds(node, rect);
} else {
const el = insertPolygonShape(shapeSvg, w, h, points);
@ -81,4 +84,4 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts
View File

@ -1,10 +1,11 @@
import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import type { D3Selection } from '../../../types.js';
export const taggedRect = async (parent: SVGAElement, node: Node) => {
export async function taggedRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -16,6 +17,7 @@ export const taggedRect = async (parent: SVGAElement, node: Node) => {
const tagHeight = 0.2 * h;
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -65,4 +67,4 @@ export const taggedRect = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -6,11 +6,15 @@ import {
createPathFromPoints,
} from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import rough from 'roughjs';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import type { D3Selection } from '../../../types.js';
export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
export async function taggedWaveEdgedRectangle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -22,6 +26,7 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node)
const finalH = h + waveAmplitude;
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -97,4 +102,4 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node)
};
return shapeSvg;
};
}

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts
View File

@ -1,9 +1,10 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String } from './handDrawnShapeStyles.js';
import type { D3Selection } from '../../../types.js';
export async function text(parent: SVGAElement, node: Node): Promise<SVGAElement> {
export async function text<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;

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

@ -1,8 +1,10 @@
import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
export const createCylinderPathD = (
x: number,
@ -49,7 +51,10 @@ export const createInnerCylinderPathD = (
return [`M${x + width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 0,${height}`].join(' ');
};
export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
export async function tiltedCylinder<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label, halfPadding } = await labelHelper(
@ -64,9 +69,10 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
const w = bbox.width + rx + labelPadding;
const { cssStyles } = node;
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
let cylinder: D3Selection<SVGGElement> | D3Selection<SVGPathElement>;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);
const innerPathData = createInnerCylinderPathD(0, 0, w, h, rx, ry);
@ -84,19 +90,19 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
.insert('path', ':first-child')
.attr('d', pathData)
.attr('class', 'basic label-container')
.attr('style', cssStyles)
.attr('style', handleUndefinedAttr(cssStyles))
.attr('style', nodeStyles);
cylinder.attr('class', 'basic label-container');
if (cssStyles) {
cylinder.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles) {
cylinder.selectAll('path').attr('style', nodeStyles);
}
}
cylinder.attr('class', 'basic label-container');
if (cssStyles && node.look !== 'handDrawn') {
cylinder.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
cylinder.selectAll('path').attr('style', nodeStyles);
}
cylinder.attr('label-offset-x', rx);
cylinder.attr('transform', `translate(${-w / 2}, ${h / 2} )`);
@ -133,4 +139,4 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
View File

@ -4,6 +4,7 @@ import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js';
// export const createTrapezoidPathD = (
// x: number,
@ -20,7 +21,7 @@ import { insertPolygonShape } from './insertPolygonShape.js';
// ].join(' ');
// };
export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function trapezoid<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -34,10 +35,11 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
{ x: 0, y: -h },
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
let polygon: typeof shapeSvg | ReturnType<typeof insertPolygonShape>;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
const pathData = createPathFromPoints(points);
@ -68,4 +70,4 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
};
return shapeSvg;
};
}

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

@ -1,10 +1,14 @@
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
export async function trapezoidalPentagon<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -14,6 +18,7 @@ export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
const h = Math.max(minHeight, bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -53,4 +58,4 @@ export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
View File

@ -1,14 +1,15 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { createPathFromPoints } from './util.js';
import { evaluate } from '../../../diagrams/common/common.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
import type { D3Selection } from '../../../types.js';
export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export async function triangle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -26,6 +27,7 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAEle
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
if (node.look !== 'handDrawn') {
@ -63,4 +65,4 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAEle
};
return shapeSvg;
};
}

87
packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js → packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
View File

@ -1,12 +1,19 @@
import { createText } from '../../createText.js';
import type { Node } from '../../types.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js';
import { select } from 'd3';
import defaultConfig from '../../../defaultConfig.js';
import { evaluate, sanitizeText } from '../../../diagrams/common/common.js';
import { decodeEntities } from '../../../utils.js';
import { decodeEntities, handleUndefinedAttr, parseFontSize } from '../../../utils.js';
import type { D3Selection, Point } from '../../../types.js';
export const labelHelper = async (parent, node, _classes) => {
export const labelHelper = async <T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node,
_classes?: string
) => {
let cssClasses;
const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
if (!_classes) {
cssClasses = 'node default';
} else {
@ -20,7 +27,10 @@ export const labelHelper = async (parent, node, _classes) => {
.attr('id', node.domId || node.id);
// Create the label and insert it after the rect
const labelEl = shapeSvg.insert('g').attr('class', 'label').attr('style', node.labelStyle);
const labelEl = shapeSvg
.insert('g')
.attr('class', 'label')
.attr('style', handleUndefinedAttr(node.labelStyle));
// Replace label with default value if undefined
let label;
@ -30,19 +40,19 @@ export const labelHelper = async (parent, node, _classes) => {
label = typeof node.label === 'string' ? node.label : node.label[0];
}
let text;
text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
const text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
useHtmlLabels,
width: node.width || getConfig().flowchart.wrappingWidth,
width: node.width || getConfig().flowchart?.wrappingWidth,
// @ts-expect-error -- This is currently not used. Should this be `classes` instead?
cssClasses: 'markdown-node-label',
style: node.labelStyle,
addSvgBackground: !!node.icon || !!node.img,
});
// Get the size of the label
let bbox = text.getBBox();
const halfPadding = node.padding / 2;
const halfPadding = (node?.padding ?? 0) / 2;
if (evaluate(getConfig().flowchart.htmlLabels)) {
if (evaluate(getConfig().flowchart?.htmlLabels)) {
const div = text.children[0];
const dv = select(text);
@ -68,7 +78,8 @@ export const labelHelper = async (parent, node, _classes) => {
? getConfig().fontSize
: window.getComputedStyle(document.body).fontSize;
const enlargingFactor = 5;
const width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
const [parsedBodyFontSize = defaultConfig.fontSize] = parseFontSize(bodyFontSize);
const width = parsedBodyFontSize * enlargingFactor + 'px';
img.style.minWidth = width;
img.style.maxWidth = width;
} else {
@ -106,19 +117,28 @@ export const labelHelper = async (parent, node, _classes) => {
return { shapeSvg, bbox, halfPadding, label: labelEl };
};
export const updateNodeBounds = (node, element) => {
const bbox = element.node().getBBox();
export const updateNodeBounds = <T extends SVGGraphicsElement>(
node: Node,
// D3Selection<SVGGElement> is for the roughjs case, D3Selection<T> is for the non-roughjs case
element: D3Selection<SVGGElement> | D3Selection<T>
) => {
const bbox = element.node()!.getBBox();
node.width = bbox.width;
node.height = bbox.height;
};
/**
* @param parent
* @param w
* @param h
* @param points
* @param parent - Parent element to append the polygon to
* @param w - Width of the polygon
* @param h - Height of the polygon
* @param points - Array of points to create the polygon
*/
export function insertPolygonShape(parent, w, h, points) {
export function insertPolygonShape(
parent: D3Selection<SVGGElement>,
w: number,
h: number,
points: Point[]
) {
return parent
.insert('polygon', ':first-child')
.attr(
@ -133,16 +153,23 @@ export function insertPolygonShape(parent, w, h, points) {
.attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
}
export const getNodeClasses = (node, extra) =>
export const getNodeClasses = (node: Node, extra?: string) =>
(node.look === 'handDrawn' ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');
export function createPathFromPoints(points) {
export function createPathFromPoints(points: Point[]) {
const pointStrings = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`);
pointStrings.push('Z');
return pointStrings.join(' ');
}
export function generateFullSineWavePoints(x1, y1, x2, y2, amplitude, numCycles) {
export function generateFullSineWavePoints(
x1: number,
y1: number,
x2: number,
y2: number,
amplitude: number,
numCycles: number
) {
const points = [];
const steps = 50; // Number of segments to create a smooth curve
const deltaX = x2 - x1;
@ -164,13 +191,21 @@ export function generateFullSineWavePoints(x1, y1, x2, y2, amplitude, numCycles)
return points;
}
/**
* @param centerX - x-coordinate of center of circle
* @param centerY - y-coordinate of center of circle
* @param radius - radius of circle
* @param numPoints - total points required
* @param startAngle - angle where arc will start
* @param endAngle - angle where arc will end
*/
export function generateCirclePoints(
centerX, // x-coordinate of center of circle
centerY, // x-coordinate of center of circle
radius, // radius of circle
numPoints, // total points required
startAngle, // angle where arc will start
endAngle // angle where arc will end
centerX: number,
centerY: number,
radius: number,
numPoints: number,
startAngle: number,
endAngle: number
) {
const points = [];

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

@ -6,11 +6,15 @@ import {
createPathFromPoints,
} from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import rough from 'roughjs';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import type { D3Selection } from '../../../types.js';
export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
export async function waveEdgedRectangle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -25,6 +29,7 @@ export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
const widthDif = minWidth - w;
const extraW = widthDif > 0 ? widthDif / 2 : 0;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -75,4 +80,4 @@ export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -6,11 +6,15 @@ import {
generateFullSineWavePoints,
} from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
export const waveRectangle = async (parent: SVGAElement, node: Node) => {
export async function waveRectangle<T extends SVGGraphicsElement>(
parent: D3Selection<T>,
node: Node
) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@ -39,6 +43,7 @@ export const waveRectangle = async (parent: SVGAElement, node: Node) => {
const finalH = h + waveAmplitude * 2;
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -76,4 +81,4 @@ export const waveRectangle = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
View File

@ -1,10 +1,11 @@
import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js';
import type { Node } from '../../types.ts';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import type { D3Selection } from '../../../types.js';
export const windowPane = async (parent: SVGAElement, node: Node) => {
export async function windowPane<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
@ -15,6 +16,7 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
const y = -h / 2;
const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@ -62,4 +64,4 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
};
return shapeSvg;
};
}

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

@ -149,5 +149,6 @@ export type LayoutMethod =
export interface ShapeRenderOptions {
config: MermaidConfig;
dir: string;
/** Some shapes render differently if a diagram has a direction `LR` */
dir?: Node['dir'];
}

12
packages/mermaid/src/types.ts
View File

@ -69,6 +69,11 @@ export interface ParseResult {
// This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type.
export type D3Element = any;
/**
* Helper type for d3 selections.
*/
export type D3Selection<T extends SVGElement> = d3.Selection<T, unknown, Element | null, unknown>;
export interface RenderResult {
/**
* The svg code for the rendered graph.
@ -89,3 +94,10 @@ export interface RenderResult {
*/
bindFunctions?: (element: Element) => void;
}
/**
* Can be converted back to `T` by awaiting/`Awaited<T>`.
*
* This is useful for function types that may be either synchronous or asynchronous.
*/
export type MaybePromise<T> = T | Promise<T>;

14
packages/mermaid/src/utils.ts
View File

@ -1,5 +1,5 @@
import { sanitizeUrl } from '@braintree/sanitize-url';
import type { CurveFactory } from 'd3';
import type { BaseType, CurveFactory } from 'd3';
import {
curveBasis,
curveBasisClosed,
@ -941,3 +941,15 @@ export const getEdgeId = (
) => {
return `${prefix ? `${prefix}_` : ''}${from}_${to}_${counter}${suffix ? `_${suffix}` : ''}`;
};
/**
* D3's `selection.attr` method doesn't officially support `undefined`.
*
* However, it seems if you do pass `undefined`, it seems to be treated as `null`
* (e.g. it removes the attribute).
*/
export function handleUndefinedAttr(
attrValue: Parameters<d3.Selection<BaseType, unknown, HTMLElement, any>['attr']>[1] | undefined
) {
return attrValue ?? null;
}