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

fix: refactored code and adjusted shape, shape label

Browse Source 
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
omkarht
2025-08-18 18:21:41 +05:30
parent cba659d097
commit 71e09bcaef
1 changed files with 18 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
packages/mermaid/src/diagrams/sequence/svgDraw.js
View File

@@ -468,20 +468,18 @@ const drawActorTypeCollections = function (elem, actor, conf, isFooter) {
rect.width = actor.width;
rect.height = actor.height;
rect.class = cssclass;
// rect.rx = 3;
// rect.ry = 3;
rect.name = actor.name;
// 🔹 DRAW STACKED RECTANGLES
// DRAW STACKED RECTANGLES
const offset = 6;
const shadowRect = {
...rect,
x: rect.x + offset,
y: rect.y + (isFooter ? +offset : -offset),
x: rect.x + (isFooter ? -offset : -offset),
y: rect.y + (isFooter ? +offset : +offset),
class: 'actor',
};
drawRect(g, shadowRect);
const rectElem = drawRect(g, rect); // draw main rectangle on top
drawRect(g, shadowRect);
actor.rectData = rect;
if (actor.properties?.icon) {
@@ -496,8 +494,8 @@ const drawActorTypeCollections = function (elem, actor, conf, isFooter) {
_drawTextCandidateFunc(conf, hasKatex(actor.description))(
actor.description,
g,
rect.x,
rect.y,
rect.x - offset,
rect.y + offset,
rect.width,
rect.height,
{ class: `actor ${ACTOR_BOX_CLASS}` },
@@ -686,13 +684,13 @@ const drawActorTypeControl = function (elem, actor, conf, isFooter) {
.append('defs')
.append('marker')
.attr('id', 'filled-head-control')
.attr('refX', 15.5)
.attr('refY', 7)
.attr('refX', 11)
.attr('refY', 5.8)
.attr('markerWidth', 20)
.attr('markerHeight', 28)
.attr('orient', '180')
.attr('orient', '172.5')
.append('path')
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
.attr('d', 'M 14.4 5.6 L 7.2 10.4 L 8.8 5.6 L 7.2 0.8 Z');
// Draw the base circle
actElem
@@ -717,7 +715,7 @@ const drawActorTypeControl = function (elem, actor, conf, isFooter) {
actor.description,
actElem,
rect.x,
rect.y + 30,
rect.y + r + (isFooter ? 5 : 10),
rect.width,
rect.height,
{ class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -753,7 +751,7 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
rect.class = 'actor';
const cx = actor.x + actor.width / 2;
const cy = actorY + 25;
const cy = actorY + (!isFooter ? 25 : 10);
const r = 18;
actElem
@@ -797,7 +795,7 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
actor.description,
actElem,
rect.x,
rect.y + (!isFooter ? (cy + r - actorY) / 2 : (cy - actorY) / 2 + r + 2),
rect.y + (!isFooter ? (cy + r - actorY) / 2 : (cy - actorY + r - 5) / 2),
rect.width,
rect.height,
{ class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -871,7 +869,7 @@ const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
rect.x = actor.x;
rect.y = actorY;
const w = rect.width / 4;
const h = rect.height * 0.8;
const h = rect.width / 4;
const rx = w / 2;
const ry = rx / (2.5 + w / 50);
@@ -896,7 +894,7 @@ const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
.attr('class', cssclass);
if (!isFooter) {
cylinderGroup.attr('transform', `translate(${w * 1.5}, ${rect.height / 4 - 2 * ry})`);
cylinderGroup.attr('transform', `translate(${w * 1.5}, ${(rect.height + ry) / 4})`);
} else {
cylinderGroup.attr('transform', `translate(${w * 1.5}, ${rect.height / 4 - 2 * ry})`);
}
@@ -905,7 +903,7 @@ const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
actor.description,
g,
rect.x,
rect.y + (!isFooter ? rect.height / 2 : h / 2 + ry),
rect.y + (!isFooter ? (rect.height + ry) / 2 : (rect.height + h) / 4),
rect.width,
rect.height,
{ class: `actor ${ACTOR_BOX_CLASS}` },
@@ -961,8 +959,6 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
rect.width = actor.width;
rect.height = actor.height;
rect.class = 'actor';
rect.rx = 3;
rect.ry = 3;
actElem
.append('line')
@@ -984,8 +980,7 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
.append('circle')
.attr('cx', actor.x + actor.width / 2)
.attr('cy', actorY + 10)
.attr('r', radius)
.attr('width', actor.width);
.attr('r', radius);
const bounds = actElem.node().getBBox();
actor.height = bounds.height + (conf.sequence.labelBoxHeight ?? 0);
@@ -994,7 +989,7 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
actor.description,
actElem,
rect.x,
rect.y + (!isFooter ? radius / 2 : radius / 2),
rect.y + (!isFooter ? radius / 2 + 3 : radius / 2 - 4),
rect.width,
rect.height,
{ class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -1007,8 +1002,6 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
actElem.attr('transform', `translate(0,${radius / 2 + 7})`);
}
// actElem.attr('transform', `translate(${rect.width / 2}, ${actorY + rect.height / 2})`);
return actor.height;
};