marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-26 11:46:42 +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.width = actor.width;
rect.height = actor.height; rect.height = actor.height;
rect.class = cssclass; rect.class = cssclass;
// rect.rx = 3;
// rect.ry = 3;
rect.name = actor.name; rect.name = actor.name;
// 🔹 DRAW STACKED RECTANGLES // DRAW STACKED RECTANGLES
const offset = 6; const offset = 6;
const shadowRect = { const shadowRect = {
...rect, ...rect,
x: rect.x + offset, x: rect.x + (isFooter ? -offset : -offset),
y: rect.y + (isFooter ? +offset : -offset), y: rect.y + (isFooter ? +offset : +offset),
class: 'actor', class: 'actor',
}; };
drawRect(g, shadowRect);
const rectElem = drawRect(g, rect); // draw main rectangle on top const rectElem = drawRect(g, rect); // draw main rectangle on top
drawRect(g, shadowRect);
actor.rectData = rect; actor.rectData = rect;
if (actor.properties?.icon) { if (actor.properties?.icon) {
@@ -496,8 +494,8 @@ const drawActorTypeCollections = function (elem, actor, conf, isFooter) {
_drawTextCandidateFunc(conf, hasKatex(actor.description))( _drawTextCandidateFunc(conf, hasKatex(actor.description))(
actor.description, actor.description,
g, g,
rect.x, rect.x - offset,
rect.y, rect.y + offset,
rect.width, rect.width,
rect.height, rect.height,
{ class: `actor ${ACTOR_BOX_CLASS}` }, { class: `actor ${ACTOR_BOX_CLASS}` },
@@ -686,13 +684,13 @@ const drawActorTypeControl = function (elem, actor, conf, isFooter) {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'filled-head-control') .attr('id', 'filled-head-control')
.attr('refX', 15.5) .attr('refX', 11)
.attr('refY', 7) .attr('refY', 5.8)
.attr('markerWidth', 20) .attr('markerWidth', 20)
.attr('markerHeight', 28) .attr('markerHeight', 28)
.attr('orient', '180') .attr('orient', '172.5')
.append('path') .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 // Draw the base circle
actElem actElem
@@ -717,7 +715,7 @@ const drawActorTypeControl = function (elem, actor, conf, isFooter) {
actor.description, actor.description,
actElem, actElem,
rect.x, rect.x,
rect.y + 30, rect.y + r + (isFooter ? 5 : 10),
rect.width, rect.width,
rect.height, rect.height,
{ class: `actor ${ACTOR_MAN_FIGURE_CLASS}` }, { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -753,7 +751,7 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
rect.class = 'actor'; rect.class = 'actor';
const cx = actor.x + actor.width / 2; const cx = actor.x + actor.width / 2;
const cy = actorY + 25; const cy = actorY + (!isFooter ? 25 : 10);
const r = 18; const r = 18;
actElem actElem
@@ -797,7 +795,7 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
actor.description, actor.description,
actElem, actElem,
rect.x, 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.width,
rect.height, rect.height,
{ class: `actor ${ACTOR_MAN_FIGURE_CLASS}` }, { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -871,7 +869,7 @@ const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
rect.x = actor.x; rect.x = actor.x;
rect.y = actorY; rect.y = actorY;
const w = rect.width / 4; const w = rect.width / 4;
const h = rect.height * 0.8; const h = rect.width / 4;
const rx = w / 2; const rx = w / 2;
const ry = rx / (2.5 + w / 50); const ry = rx / (2.5 + w / 50);
@@ -896,7 +894,7 @@ const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
.attr('class', cssclass); .attr('class', cssclass);
if (!isFooter) { 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 { } else {
cylinderGroup.attr('transform', `translate(${w * 1.5}, ${rect.height / 4 - 2 * ry})`); 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, actor.description,
g, g,
rect.x, 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.width,
rect.height, rect.height,
{ class: `actor ${ACTOR_BOX_CLASS}` }, { class: `actor ${ACTOR_BOX_CLASS}` },
@@ -961,8 +959,6 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
rect.width = actor.width; rect.width = actor.width;
rect.height = actor.height; rect.height = actor.height;
rect.class = 'actor'; rect.class = 'actor';
rect.rx = 3;
rect.ry = 3;
actElem actElem
.append('line') .append('line')
@@ -984,8 +980,7 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
.append('circle') .append('circle')
.attr('cx', actor.x + actor.width / 2) .attr('cx', actor.x + actor.width / 2)
.attr('cy', actorY + 10) .attr('cy', actorY + 10)
.attr('r', radius) .attr('r', radius);
.attr('width', actor.width);
const bounds = actElem.node().getBBox(); const bounds = actElem.node().getBBox();
actor.height = bounds.height + (conf.sequence.labelBoxHeight ?? 0); actor.height = bounds.height + (conf.sequence.labelBoxHeight ?? 0);
@@ -994,7 +989,7 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
actor.description, actor.description,
actElem, actElem,
rect.x, rect.x,
rect.y + (!isFooter ? radius / 2 : radius / 2), rect.y + (!isFooter ? radius / 2 + 3 : radius / 2 - 4),
rect.width, rect.width,
rect.height, rect.height,
{ class: `actor ${ACTOR_MAN_FIGURE_CLASS}` }, { 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(0,${radius / 2 + 7})`);
} }
// actElem.attr('transform', `translate(${rect.width / 2}, ${actorY + rect.height / 2})`);
return actor.height; return actor.height;
}; };