GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Added basic for forms

Browse Source
This commit is contained in:
saurabhg772244 2024-09-06 10:17:24 +05:30
parent e337331122
commit b7fd21e17a
9 changed files with 173 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
cypress/platform/saurabh.html
View File

@ -63,7 +63,17 @@
<body>
<pre id="diagram4" class="mermaid">
flowchart
B2@{ icon: "fa:image", label: "test augfuyfavf ydvaubfuac" }@
A --> B2@{ icon: "fa:image", form: "square", label: "test augfuyfavf ydvaubfuac" }@ --> C
</pre
>
<pre id="diagram5" class="mermaid">
flowchart
A --> B2@{ icon: "fa:image", form: "circle", label: "test augfuyfavf ydvaubfuac" }@ --> C
</pre
>
<pre id="diagram6" class="mermaid">
flowchart
A --> B2@{ icon: "fa:image", label: "test augfuyfavf ydvaubfuac" }@ --> C
</pre
>
<script type="module">
@ -93,7 +103,7 @@
mermaid.initialize({
// theme: 'base',
// handdrawnSeed: 12,
look: 'handDrawn',
// look: 'handDrawn',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// 'elk.nodePlacement.strategy': 'SIMPLE',
// 'elk.nodePlacement.strategy': 'LAYERED',
@ -102,7 +112,7 @@
// layout: 'elk',
// layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 10, padding: 5 },
flowchart: { titleTopMargin: 10, padding: 5, htmlLables: true },
// fontFamily: 'Caveat',
fontFamily: 'Kalam',
// fontFamily: 'courier',

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

@ -146,6 +146,15 @@ export const addVertex = function (
}
if (doc?.icon) {
vertex.icon = doc?.icon;
if (vertex.text === id) {
vertex.text = '';
}
}
if (doc?.form) {
vertex.form = doc?.form;
}
if (doc?.pos) {
vertex.pos = doc?.pos;
}
}
};
@ -796,7 +805,13 @@ export const lex = {
const getTypeFromVertex = (vertex: FlowVertex) => {
if (vertex?.icon) {
return 'iconCircle';
if (vertex.form === 'circle') {
return 'iconCircle';
}
if (vertex.form === 'square') {
return 'iconSquare';
}
return 'icon';
}
if (vertex.type === 'square') {
return 'squareRect';
@ -864,6 +879,7 @@ const addNodeFromVertex = (
linkTarget: vertex.linkTarget,
tooltip: getTooltip(vertex.id),
icon: vertex.icon,
pos: vertex.pos,
});
}
};

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

@ -13,7 +13,7 @@ export interface FlowVertex {
type?: string;
icon?: string;
form?: string;
pos?: 't';
pos?: 't' | 'b';
}
export interface FlowText {

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

@ -53,13 +53,13 @@ import { curlyBraceRight } from './shapes/curlyBraceRight.js';
import { curlyBraces } from './shapes/curlyBraces.js';
import { iconSquare } from './shapes/iconSquare.js';
import { iconCircle } from './shapes/iconCircle.js';
import { icon } from './shapes/icon.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,
@ -228,6 +228,8 @@ const shapes = {
'brace-r': curlyBraceRight,
curlyBraces,
iconSquare,
iconCircle,
icon,
};
const nodeElems = new Map();

66
packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts Normal file
View File

@ -0,0 +1,66 @@
import { log } from '$root/logger.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 { styles2String } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import intersect from '../intersect/index.js';
import { getIconSVG } from '$root/rendering-util/icons.js';
export const icon = async (parent: SVG, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
parent,
node,
getNodeClasses(node)
);
const { cssStyles } = node;
const topLabel = node.pos === 't';
const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
const iconSize = Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
const width = Math.max(labelWidth, iconSize);
const height = labelHeight + iconSize + halfPadding * 2;
const points = [
{ x: 0, y: 0 },
{ x: 0, y: height },
{ x: width, y: height },
{ x: width, y: 0 },
];
if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
);
iconElem.attr(
'transform',
`translate(${0}, ${topLabel ? labelHeight - halfPadding : 0 + halfPadding * 2})`
);
}
if (cssStyles && node.look !== 'handDrawn') {
shapeSvg.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
shapeSvg.selectAll('path').attr('style', nodeStyles);
}
label.attr(
'transform',
`translate(${width / 2 - labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${(topLabel ? 0 : iconSize) + halfPadding * 2})`
);
updateNodeBounds(node, shapeSvg);
node.intersect = function (point) {
log.info('iconSquare intersect', node, point);
const pos = intersect.polygon(node, points, point);
return pos;
};
return shapeSvg;
};

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

@ -1,15 +1,16 @@
import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.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 {
styles2String,
userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import { getIconSVG } from '$root/rendering-util/icons.js';
export const iconCircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
export const iconCircle = async (parent: SVG, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
@ -18,51 +19,58 @@ export const iconCircle = async (parent: SVGAElement, node: Node): Promise<SVGAE
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;
// const topLabel = node.pos === 't';
const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
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);
const iconSize = Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
const radius = iconSize * 1.5 + halfPadding * 2;
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);
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
if (node.look !== 'handDrawn') {
options.roughness = 0;
options.fillStyle = 'solid';
}
// Position label at the top
label.attr('transform', `translate(0, ${-radius + halfPadding})`);
const roughNode = rc.circle(0, 0, radius, options);
const point = rc.circle(0, 0, 2, options);
const iconShape = shapeSvg.insert(() => roughNode, ':first-child');
iconShape.insert(() => point);
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>`
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
);
iconElem.attr(
'transform',
`translate(${-iconElem.node().getBBox().width / 2}, ${-iconElem.node().getBBox().height / 2 - labelHeight / 2 + halfPadding})`
);
iconElem.attr('transform', `translate(${-radius / 2}, ${-radius / 2})`);
}
updateNodeBounds(node, circleElem);
if (cssStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', nodeStyles);
}
label.attr(
'transform',
`translate(${-label.node().getBBox().width / 2},${iconSize / 2 - label.node().getBBox().height / 2 - halfPadding})`
);
updateNodeBounds(node, iconShape);
node.intersect = function (point) {
log.info('Circle intersect', node, radius, point);
return intersect.circle(node, radius, point);
log.info('iconSquare intersect', node, point);
const pos = intersect.circle(node, radius, point);
return pos;
};
return shapeSvg;

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

@ -14,28 +14,26 @@ import { getIconSVG } from '$root/rendering-util/icons.js';
export const iconSquare = async (parent: SVG, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
parent,
node,
getNodeClasses(node)
);
const { cssStyles } = node;
const topLabel = node.pos === 't';
const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
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 iconSize = Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
const width = Math.max(labelWidth, iconSize);
const height = labelHeight + iconSize + halfPadding * 2;
const points = [
{ x: 0, y: 0 },
{ x: 0, y: height },
{ x: width, y: height },
{ x: width, y: 0 },
{ x: width, y: height + iconSize + bbox.height + 5 },
{ x: 0, y: height + iconSize + bbox.height + 5 },
];
// @ts-ignore - rough is not typed
@ -52,6 +50,17 @@ export const iconSquare = async (parent: SVG, node: Node) => {
const iconShape = shapeSvg.insert(() => lineNode, ':first-child');
if (node.icon) {
const iconElem = shapeSvg.append('g');
iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
);
iconElem.attr(
'transform',
`translate(${0}, ${topLabel ? labelHeight - halfPadding : 0 + halfPadding * 2})`
);
}
if (cssStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', cssStyles);
}
@ -60,20 +69,12 @@ export const iconSquare = async (parent: SVG, node: Node) => {
iconShape.selectAll('path').attr('style', nodeStyles);
}
iconShape.attr('transform', `translate(${-width / 2},${-height / 2})`);
label.attr('transform', `translate(${-width / 2},${-height / 2})`);
label.attr(
'transform',
`translate(${width / 2 - labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${(topLabel ? 0 : iconSize) + halfPadding * 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('iconSquare intersect', node, point);
const pos = intersect.polygon(node, points, point);

1
packages/mermaid/src/rendering-util/types.d.ts vendored
View File

@ -66,6 +66,7 @@ interface Node {
look?: string;
icon?: string;
pos?: 't' | 'b';
}
// Common properties for any edge in the system

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

@ -2,6 +2,8 @@ export interface NodeMetaData {
shape?: string;
label?: string;
icon?: string;
form?: string;
pos?: 't' | 'b';
}
export interface Point {
x: number;