marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-23 02:06:45 +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> <body>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart flowchart
B2@{ icon: "fa:image", label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ B2@{ icon: "fa:image", label: "test augfuyfavf ydvaubfuac" }@
</pre </pre
> >
<script type="module"> <script type="module">

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

@@ -796,7 +796,7 @@ export const lex = {
const getTypeFromVertex = (vertex: FlowVertex) => { const getTypeFromVertex = (vertex: FlowVertex) => {
if (vertex?.icon) { if (vertex?.icon) {
return 'iconSquare'; return 'iconCircle';
} }
if (vertex.type === 'square') { if (vertex.type === 'square') {
return 'squareRect'; 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 { curlyBraceRight } from './shapes/curlyBraceRight.js';
import { curlyBraces } from './shapes/curlyBraces.js'; import { curlyBraces } from './shapes/curlyBraces.js';
import { iconSquare } from './shapes/iconSquare.js'; import { iconSquare } from './shapes/iconSquare.js';
import { iconCircle } from './shapes/iconCircle.js';
//Use these names as the left side to render shapes. //Use these names as the left side to render shapes.
const shapes = { const shapes = {
// States // States
state, state,
stateStart, stateStart,
iconCircle,
'small-circle': stateStart, 'small-circle': stateStart,
'sm-circ': stateStart, 'sm-circ': stateStart,
start: 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 { 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 { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js'; import type { SVG } from '$root/diagram-api/types.js';
import { import {
@@ -9,27 +9,33 @@ import {
import rough from 'roughjs'; import rough from 'roughjs';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import { createPathFromPoints } from './util.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); const { labelStyles, nodeStyles } = styles2String(node);
node.label = '';
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const shapeSvg = parent const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
.insert('g')
.attr('class', getNodeClasses(node))
.attr('id', node.domId ?? node.id);
const { cssStyles } = node; const { cssStyles } = node;
const width = Math.max(35, node?.width ?? 0);
const height = Math.max(35, node?.height ?? 0); let width = Math.max(bbox.width + (node.padding ?? 0));
const gap = 7; 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 = [ const points = [
{ x: 0, y: 0 },
{ x: width, y: 0 }, { x: width, y: 0 },
{ x: 0, y: height + gap / 2 }, { x: width, y: height + iconSize + bbox.height + 5 },
{ x: width - 2 * gap, y: height + gap / 2 }, { x: 0, y: height + iconSize + bbox.height + 5 },
{ x: 0, y: 2 * height },
{ x: width, y: height - gap / 2 },
{ x: 2 * gap, y: height - gap / 2 },
]; ];
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
@@ -44,24 +50,33 @@ export const iconSquare = (parent: SVG, node: Node) => {
const linePath = createPathFromPoints(points); const linePath = createPathFromPoints(points);
const lineNode = rc.path(linePath, options); 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') { if (cssStyles && node.look !== 'handDrawn') {
lightningBolt.selectAll('path').attr('style', cssStyles); iconShape.selectAll('path').attr('style', cssStyles);
} }
if (nodeStyles && node.look !== 'handDrawn') { 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) { node.intersect = function (point) {
log.info('lightningBolt intersect', node, point); log.info('iconSquare intersect', node, point);
const pos = intersect.polygon(node, points, point); const pos = intersect.polygon(node, points, point);
return pos; return pos;
}; };