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

add squre and circle icon shape

Browse Source
This commit is contained in:
saurabhg772244
2024-09-05 19:52:45 +05:30
parent 8883008ca1
commit e337331122
5 changed files with 110 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/platform/saurabh.html
View File

@@ -63,7 +63,7 @@
<body>
<pre id="diagram4" class="mermaid">
flowchart
B2@{ icon: "fa:image", label: "test augfuyfavf yafuabffaev ydvaubfuac" }@
B2@{ icon: "fa:image", label: "test augfuyfavf ydvaubfuac" }@
</pre
>
<script type="module">

2
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@@ -796,7 +796,7 @@ export const lex = {
const getTypeFromVertex = (vertex: FlowVertex) => {
if (vertex?.icon) {
return 'iconSquare';
return 'iconCircle';
}
if (vertex.type === 'square') {
return 'squareRect';

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

@@ -52,12 +52,14 @@ import { curlyBraceLeft } from './shapes/curlyBraceLeft.js';
import { curlyBraceRight } from './shapes/curlyBraceRight.js';
import { curlyBraces } from './shapes/curlyBraces.js';
import { iconSquare } from './shapes/iconSquare.js';
import { iconCircle } from './shapes/iconCircle.js';
//Use these names as the left side to render shapes.
const shapes = {
// States
state,
stateStart,
iconCircle,
'small-circle': stateStart,
'sm-circ': stateStart,
start: stateStart,

69
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts Normal file
View File

@@ -0,0 +1,69 @@
import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts';
import {
styles2String,
userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import rough from 'roughjs';
import { getIconSVG } from '$root/rendering-util/icons.js';
export const iconCircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
parent,
node,
getNodeClasses(node)
);
let width = Math.max(bbox.width + (node.padding ?? 0));
if (node.width) {
width = node.width + (node.padding ?? 0);
}
const radius = width / 2 + halfPadding;
let circleElem;
const { cssStyles } = node;
if (node.look === 'handDrawn') {
// @ts-ignore - rough is not typed
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);
} else {
circleElem = shapeSvg
.insert('circle', ':first-child')
.attr('class', 'basic label-container')
.attr('style', nodeStyles)
.attr('r', radius)
.attr('cx', 0)
.attr('cy', 0);
}
// Position label at the top
label.attr('transform', `translate(0, ${-radius + halfPadding})`);
if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html(
`<g>${await getIconSVG(node.icon, { height: radius + bbox.height, width: radius + bbox.height, fallbackPrefix: '' })}</g>`
);
iconElem.attr('transform', `translate(${-radius / 2}, ${-radius / 2})`);
}
updateNodeBounds(node, circleElem);
node.intersect = function (point) {
log.info('Circle intersect', node, radius, point);
return intersect.circle(node, radius, point);
};
return shapeSvg;
};

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

@@ -1,5 +1,5 @@
import { log } from '$root/logger.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js';
import {
@@ -9,27 +9,33 @@ import {
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import { createPathFromPoints } from './util.js';
import { getIconSVG } from '$root/rendering-util/icons.js';
export const iconSquare = (parent: SVG, node: Node) => {
export const iconSquare = async (parent: SVG, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.label = '';
node.labelStyle = labelStyles;
const shapeSvg = parent
.insert('g')
.attr('class', getNodeClasses(node))
.attr('id', node.domId ?? node.id);
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const { cssStyles } = node;
const width = Math.max(35, node?.width ?? 0);
const height = Math.max(35, node?.height ?? 0);
const gap = 7;
let width = Math.max(bbox.width + (node.padding ?? 0));
let height = Math.max(bbox.height + (node.padding ?? 0));
if (node.width) {
width = node.width + (node.padding ?? 0);
}
if (node.height) {
height = node.height + (node.padding ?? 0);
}
const iconSize = Math.min(width, height);
const points = [
{ x: 0, y: 0 },
{ x: width, y: 0 },
{ x: 0, y: height + gap / 2 },
{ x: width - 2 * gap, y: height + gap / 2 },
{ x: 0, y: 2 * height },
{ x: width, y: height - gap / 2 },
{ x: 2 * gap, y: height - gap / 2 },
{ x: width, y: height + iconSize + bbox.height + 5 },
{ x: 0, y: height + iconSize + bbox.height + 5 },
];
// @ts-ignore - rough is not typed
@@ -44,24 +50,33 @@ export const iconSquare = (parent: SVG, node: Node) => {
const linePath = createPathFromPoints(points);
const lineNode = rc.path(linePath, options);
const lightningBolt = shapeSvg.insert(() => lineNode, ':first-child');
const iconShape = shapeSvg.insert(() => lineNode, ':first-child');
if (cssStyles && node.look !== 'handDrawn') {
lightningBolt.selectAll('path').attr('style', cssStyles);
iconShape.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
lightningBolt.selectAll('path').attr('style', nodeStyles);
iconShape.selectAll('path').attr('style', nodeStyles);
}
lightningBolt.attr('transform', `translate(-${width / 2},${-height})`);
iconShape.attr('transform', `translate(${-width / 2},${-height / 2})`);
updateNodeBounds(node, lightningBolt);
label.attr('transform', `translate(${-width / 2},${-height / 2})`);
updateNodeBounds(node, iconShape);
if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html(
`<g>${await getIconSVG(node.icon, { height: height + iconSize, fallbackPrefix: '' })}</g>`
);
iconElem.attr('transform', `translate(${-iconSize}, ${-iconSize / 2 + bbox.height})`);
}
node.intersect = function (point) {
log.info('lightningBolt intersect', node, point);
log.info('iconSquare intersect', node, point);
const pos = intersect.polygon(node, points, point);
return pos;
};