marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-22 17:56:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

updated pos changes

Browse Source
This commit is contained in:
saurabhg772244
2024-09-11 17:04:11 +05:30
parent a2c262f940
commit 4754ed01ab
5 changed files with 168 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
cypress/platform/saurabh.html
View File

@@ -62,18 +62,19 @@
<body style="display: flex; gap: 2rem; flex-direction: row"> <body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart TD
B2@{ icon: "fa:bell", form: "square", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "t" }@ B2@{ icon: "fa:bell", form: "square", label: "B2 agsyua duadu", pos: "t", h: 80 }@
W --> B2 W --> B2
X --> B2 X --> B2
Y --> B2 Y --> B2
Z --> B2 Z --> B2
B2 --<strong>sas</strong>--> C
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart TB flowchart TB
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }@ A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }@
B2 --test--> C B2 --test--> C
@@ -145,7 +146,7 @@
// layout: 'elk', // layout: 'elk',
// layout: 'fixed', // layout: 'fixed',
// htmlLabels: false, // htmlLabels: false,
flowchart: { titleTopMargin: 10, htmlLables: true }, flowchart: { titleTopMargin: 10, htmlLabels: true },
// fontFamily: 'Caveat', // fontFamily: 'Caveat',
fontFamily: 'Kalam', fontFamily: 'Kalam',
// fontFamily: 'courier', // fontFamily: 'courier',

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

@@ -8,8 +8,7 @@ import intersect from '../intersect/index.js';
import { getIconSVG } from '../../icons.js'; import { getIconSVG } from '../../icons.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js'; import { getConfig } from '../../../diagram-api/diagramAPI.js';
export const icon = async (parent: SVG, node: Node, dir: string) => { export const icon = async (parent: SVG, node: Node) => {
const translateHorizontal = dir === 'TB' || dir === 'BT' || dir === 'TD' || dir === 'DT';
const { labelStyles } = styles2String(node); const { labelStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48; const assetHeight = node.assetHeight ?? 48;
@@ -50,25 +49,71 @@ export const icon = async (parent: SVG, node: Node, dir: string) => {
const iconHeight = iconBBox.height; const iconHeight = iconBBox.height;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + (translateHorizontal ? bbox.height / 2 : 0) : -height / 2 - (translateHorizontal ? bbox.height / 2 : 0)})` `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})`
); );
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 2.5 - (translateHorizontal ? bbox.height / 2 : bbox.height) : height / 2 + 2.5 - (translateHorizontal ? bbox.height / 2 : 0)})` `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 5 - bbox.height / 2 : height / 2 - bbox.height / 2})`
); );
if (translateHorizontal) { iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
}
updateNodeBounds(node, shapeSvg); updateNodeBounds(node, shapeSvg);
node.intersect = function (point) { node.intersect = function (point) {
log.info('iconSquare intersect', node, point); log.info('iconSquare intersect', node, point);
const pos = intersect.rect(node, point); if (!node.label) {
return pos; return intersect.rect(node, point);
}
const dx = node.x ?? 0;
const dy = node.y ?? 0;
const nodeWidth = node.width ?? 0;
const nodeHeight = node.height ?? 0;
if (topLabel) {
const points = [
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
},
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
];
const pos = intersect.polygon(node, points, point);
return pos;
} else {
const points = [
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy - nodeHeight / 2 },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, y: dy - nodeHeight / 2 },
{
x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width,
y: dy - nodeHeight / 2 + height,
},
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + height },
{ x: dx + nodeWidth / 2, y: dy + nodeHeight / 2 },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 - bbox.height },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy + nodeHeight / 2 - bbox.height },
];
const pos = intersect.polygon(node, points, point);
return pos;
}
}; };
return shapeSvg; return shapeSvg;

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

@@ -9,8 +9,7 @@ import { getIconSVG } from '../../icons.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js'; import { getConfig } from '../../../diagram-api/diagramAPI.js';
import { createRoundedRectPathD } from './roundedRectPath.js'; import { createRoundedRectPathD } from './roundedRectPath.js';
export const iconRounded = async (parent: SVG, node: Node, dir: string) => { export const iconRounded = async (parent: SVG, node: Node) => {
const translateHorizontal = dir === 'TB' || dir === 'BT' || dir === 'TD' || dir === 'DT';
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48; const assetHeight = node.assetHeight ?? 48;
@@ -59,18 +58,16 @@ export const iconRounded = async (parent: SVG, node: Node, dir: string) => {
const iconHeight = iconBBox.height; const iconHeight = iconBBox.height;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + (translateHorizontal ? bbox.height / 2 : 0) : -height / 2 + halfPadding - (translateHorizontal ? bbox.height / 2 : 0)})` `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})`
); );
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 2.5 - (translateHorizontal ? bbox.height / 2 : bbox.height) : height / 2 + 5 - (translateHorizontal ? bbox.height / 2 : 0)})` `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 5 - bbox.height / 2 : height / 2 - bbox.height / 2})`
); );
if (translateHorizontal) { iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
}
if (cssStyles && node.look !== 'handDrawn') { if (cssStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', cssStyles); iconShape.selectAll('path').attr('style', cssStyles);
@@ -84,8 +81,56 @@ export const iconRounded = async (parent: SVG, node: Node, dir: string) => {
node.intersect = function (point) { node.intersect = function (point) {
log.info('iconSquare intersect', node, point); log.info('iconSquare intersect', node, point);
const pos = intersect.rect(node, point); if (!node.label) {
return pos; return intersect.rect(node, point);
}
const dx = node.x ?? 0;
const dy = node.y ?? 0;
const nodeWidth = node.width ?? 0;
const nodeHeight = node.height ?? 0;
if (topLabel) {
const points = [
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
},
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
];
const pos = intersect.polygon(node, points, point);
return pos;
} else {
const points = [
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy - nodeHeight / 2 },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, y: dy - nodeHeight / 2 },
{
x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width,
y: dy - nodeHeight / 2 + height,
},
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + height },
{ x: dx + nodeWidth / 2, y: dy + nodeHeight / 2 },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 - bbox.height },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy + nodeHeight / 2 - bbox.height },
];
const pos = intersect.polygon(node, points, point);
return pos;
}
}; };
return shapeSvg; return shapeSvg;

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

@@ -8,8 +8,7 @@ import intersect from '../intersect/index.js';
import { getIconSVG } from '../../icons.js'; import { getIconSVG } from '../../icons.js';
import { getConfig } from '../../../diagram-api/diagramAPI.js'; import { getConfig } from '../../../diagram-api/diagramAPI.js';
export const iconSquare = async (parent: SVG, node: Node, dir: string) => { export const iconSquare = async (parent: SVG, node: Node) => {
const translateHorizontal = dir === 'TB' || dir === 'BT' || dir === 'TD' || dir === 'DT';
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const assetHeight = node.assetHeight ?? 48; const assetHeight = node.assetHeight ?? 48;
@@ -58,18 +57,16 @@ export const iconSquare = async (parent: SVG, node: Node, dir: string) => {
const iconHeight = iconBBox.height; const iconHeight = iconBBox.height;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + (translateHorizontal ? bbox.height / 2 : 0) : -height / 2 + halfPadding - (translateHorizontal ? bbox.height / 2 : 0)})` `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
); );
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 2.5 - (translateHorizontal ? bbox.height / 2 : bbox.height) : height / 2 + 5 - (translateHorizontal ? bbox.height / 2 : 0)})` `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 5 - bbox.height / 2 : height / 2 - bbox.height / 2})`
); );
if (translateHorizontal) { iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
}
if (cssStyles && node.look !== 'handDrawn') { if (cssStyles && node.look !== 'handDrawn') {
iconShape.selectAll('path').attr('style', cssStyles); iconShape.selectAll('path').attr('style', cssStyles);
@@ -83,8 +80,56 @@ export const iconSquare = async (parent: SVG, node: Node, dir: string) => {
node.intersect = function (point) { node.intersect = function (point) {
log.info('iconSquare intersect', node, point); log.info('iconSquare intersect', node, point);
const pos = intersect.rect(node, point); if (!node.label) {
return pos; return intersect.rect(node, point);
}
const dx = node.x ?? 0;
const dy = node.y ?? 0;
const nodeWidth = node.width ?? 0;
const nodeHeight = node.height ?? 0;
if (topLabel) {
const points = [
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
},
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
];
const pos = intersect.polygon(node, points, point);
return pos;
} else {
const points = [
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy - nodeHeight / 2 },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, y: dy - nodeHeight / 2 },
{
x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width,
y: dy - nodeHeight / 2 + height,
},
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + height },
{ x: dx + nodeWidth / 2, y: dy + nodeHeight / 2 },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 - bbox.height },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy + nodeHeight / 2 - bbox.height },
];
const pos = intersect.polygon(node, points, point);
return pos;
}
}; };
return shapeSvg; return shapeSvg;

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

@@ -36,7 +36,7 @@ export const labelHelper = async (parent, node, _classes) => {
width: node.width || getConfig().flowchart.wrappingWidth, width: node.width || getConfig().flowchart.wrappingWidth,
cssClasses: 'markdown-node-label', cssClasses: 'markdown-node-label',
style: node.labelStyle, style: node.labelStyle,
addSvgBackground: !!node.icon, addSvgBackground: !!node.icon || !!node.img,
}); });
// Get the size of the label // Get the size of the label
let bbox = text.getBBox(); let bbox = text.getBBox();