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

Added basic for image shape

Browse Source
This commit is contained in:
saurabhg772244
2024-09-05 13:21:58 +05:30
parent 105b11fca2
commit 8883008ca1
7 changed files with 100 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
cypress/platform/saurabh.html
View File

@@ -62,22 +62,28 @@
<body> <body>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
---
config:
flowchart:
htmlLabels: true
---
flowchart flowchart
classDef customClazz fill:#bbf,stroke:#f66,stroke-width:4px,color:#000,stroke-dasharray: 5 5 B2@{ icon: "fa:image", label: "test augfuyfavf yafuabffaev ydvaubfuac" }@
A1 --> B1@{ shape: taggedWaveEdgedRectangle, label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ --> C1
A2 --> B2@{ shape: taggedRect, label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ --> C2
B1:::customClazz
</pre </pre
> >
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
import layouts from './mermaid-layout-elk.esm.mjs'; import layouts from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts); mermaid.registerLayoutLoaders(layouts);
mermaid.registerIconPacks([
{
name: 'logos',
loader: () =>
fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
},
{
name: 'fa',
loader: () =>
fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
res.json()
),
},
]);
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err); console.error('Mermaid error: ', err);
}; };

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

@@ -144,6 +144,9 @@ export const addVertex = function (
if (doc?.label) { if (doc?.label) {
vertex.text = doc?.label; vertex.text = doc?.label;
} }
if (doc?.icon) {
vertex.icon = doc?.icon;
}
} }
}; };
@@ -792,6 +795,9 @@ export const lex = {
}; };
const getTypeFromVertex = (vertex: FlowVertex) => { const getTypeFromVertex = (vertex: FlowVertex) => {
if (vertex?.icon) {
return 'iconSquare';
}
if (vertex.type === 'square') { if (vertex.type === 'square') {
return 'squareRect'; return 'squareRect';
} }
@@ -857,6 +863,7 @@ const addNodeFromVertex = (
link: vertex.link, link: vertex.link,
linkTarget: vertex.linkTarget, linkTarget: vertex.linkTarget,
tooltip: getTooltip(vertex.id), tooltip: getTooltip(vertex.id),
icon: vertex.icon,
}); });
} }
}; };

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

@@ -11,6 +11,9 @@ export interface FlowVertex {
styles: string[]; styles: string[];
text?: string; text?: string;
type?: string; type?: string;
icon?: string;
form?: string;
pos?: 't';
} }
export interface FlowText { export interface FlowText {

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

@@ -51,6 +51,7 @@ import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js';
import { curlyBraceLeft } from './shapes/curlyBraceLeft.js'; 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';
//Use these names as the left side to render shapes. //Use these names as the left side to render shapes.
const shapes = { const shapes = {
@@ -224,6 +225,7 @@ const shapes = {
curlyBraceRight, curlyBraceRight,
'brace-r': curlyBraceRight, 'brace-r': curlyBraceRight,
curlyBraces, curlyBraces,
iconSquare,
}; };
const nodeElems = new Map(); const nodeElems = new Map();
@@ -232,6 +234,8 @@ export const insertNode = async (elem, node, dir) => {
let newEl; let newEl;
let el; let el;
// console.log("node is ", node.icon, node.shape)
//special check for rect shape (with or without rounded corners) //special check for rect shape (with or without rounded corners)
if (node.shape === 'rect') { if (node.shape === 'rect') {
if (node.rx && node.ry) { if (node.rx && node.ry) {

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

@@ -0,0 +1,69 @@
import { log } from '$root/logger.js';
import { getNodeClasses, 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 { createPathFromPoints } from './util.js';
export const iconSquare = (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 { cssStyles } = node;
const width = Math.max(35, node?.width ?? 0);
const height = Math.max(35, node?.height ?? 0);
const gap = 7;
const points = [
{ 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 },
];
// @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';
}
const linePath = createPathFromPoints(points);
const lineNode = rc.path(linePath, options);
const lightningBolt = shapeSvg.insert(() => lineNode, ':first-child');
if (cssStyles && node.look !== 'handDrawn') {
lightningBolt.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
lightningBolt.selectAll('path').attr('style', nodeStyles);
}
lightningBolt.attr('transform', `translate(-${width / 2},${-height})`);
updateNodeBounds(node, lightningBolt);
node.intersect = function (point) {
log.info('lightningBolt intersect', node, point);
const pos = intersect.polygon(node, points, point);
return pos;
};
return shapeSvg;
};

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

@@ -65,6 +65,7 @@ interface Node {
y?: number; y?: number;
look?: string; look?: string;
icon?: string;
} }
// Common properties for any edge in the system // Common properties for any edge in the system

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

@@ -1,6 +1,7 @@
export interface NodeMetaData { export interface NodeMetaData {
shape?: string; shape?: string;
label?: string; label?: string;
icon?: string;
} }
export interface Point { export interface Point {
x: number; x: number;