mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
fix: #4691 Align arrowheads properly in sequenceDiagram
This commit is contained in:
parent
6e51f8fd98
commit
498f75eece
@ -301,7 +301,7 @@ placement
|
|||||||
|
|
||||||
signal
|
signal
|
||||||
: actor signaltype '+' actor text2
|
: actor signaltype '+' actor text2
|
||||||
{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5},
|
{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5, activate: true},
|
||||||
{type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $4}
|
{type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $4}
|
||||||
]}
|
]}
|
||||||
| actor signaltype '-' actor text2
|
| actor signaltype '-' actor text2
|
||||||
|
@ -124,7 +124,8 @@ export const addSignal = function (
|
|||||||
idFrom,
|
idFrom,
|
||||||
idTo,
|
idTo,
|
||||||
message = { text: undefined, wrap: undefined },
|
message = { text: undefined, wrap: undefined },
|
||||||
messageType
|
messageType,
|
||||||
|
activate = false
|
||||||
) {
|
) {
|
||||||
if (messageType === LINETYPE.ACTIVE_END) {
|
if (messageType === LINETYPE.ACTIVE_END) {
|
||||||
const cnt = activationCount(idFrom.actor);
|
const cnt = activationCount(idFrom.actor);
|
||||||
@ -147,6 +148,7 @@ export const addSignal = function (
|
|||||||
message: message.text,
|
message: message.text,
|
||||||
wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap,
|
wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap,
|
||||||
type: messageType,
|
type: messageType,
|
||||||
|
activate,
|
||||||
});
|
});
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
@ -530,7 +532,7 @@ export const apply = function (param) {
|
|||||||
lastDestroyed = undefined;
|
lastDestroyed = undefined;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
addSignal(param.from, param.to, param.msg, param.signalType);
|
addSignal(param.from, param.to, param.msg, param.signalType, param.activate);
|
||||||
break;
|
break;
|
||||||
case 'boxStart':
|
case 'boxStart':
|
||||||
addBox(param.boxData);
|
addBox(param.boxData);
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
// @ts-nocheck TODO: fix file
|
// @ts-nocheck TODO: fix file
|
||||||
import { select, selectAll } from 'd3';
|
import { select } from 'd3';
|
||||||
import svgDraw, { ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDraw.js';
|
import svgDraw, { ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDraw.js';
|
||||||
import { log } from '../../logger.js';
|
import { log } from '../../logger.js';
|
||||||
import common from '../common/common.js';
|
import common from '../common/common.js';
|
||||||
@ -622,10 +622,10 @@ const activationBounds = function (actor, actors) {
|
|||||||
|
|
||||||
const left = activations.reduce(function (acc, activation) {
|
const left = activations.reduce(function (acc, activation) {
|
||||||
return common.getMin(acc, activation.startx);
|
return common.getMin(acc, activation.startx);
|
||||||
}, actorObj.x + actorObj.width / 2);
|
}, actorObj.x + actorObj.width / 2 - 1);
|
||||||
const right = activations.reduce(function (acc, activation) {
|
const right = activations.reduce(function (acc, activation) {
|
||||||
return common.getMax(acc, activation.stopx);
|
return common.getMax(acc, activation.stopx);
|
||||||
}, actorObj.x + actorObj.width / 2);
|
}, actorObj.x + actorObj.width / 2 + 1);
|
||||||
return [left, right];
|
return [left, right];
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -1389,9 +1389,8 @@ const buildNoteModel = function (msg, actors, diagObj) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const buildMessageModel = function (msg, actors, diagObj) {
|
const buildMessageModel = function (msg, actors, diagObj) {
|
||||||
let process = false;
|
|
||||||
if (
|
if (
|
||||||
[
|
![
|
||||||
diagObj.db.LINETYPE.SOLID_OPEN,
|
diagObj.db.LINETYPE.SOLID_OPEN,
|
||||||
diagObj.db.LINETYPE.DOTTED_OPEN,
|
diagObj.db.LINETYPE.DOTTED_OPEN,
|
||||||
diagObj.db.LINETYPE.SOLID,
|
diagObj.db.LINETYPE.SOLID,
|
||||||
@ -1402,17 +1401,44 @@ const buildMessageModel = function (msg, actors, diagObj) {
|
|||||||
diagObj.db.LINETYPE.DOTTED_POINT,
|
diagObj.db.LINETYPE.DOTTED_POINT,
|
||||||
].includes(msg.type)
|
].includes(msg.type)
|
||||||
) {
|
) {
|
||||||
process = true;
|
|
||||||
}
|
|
||||||
if (!process) {
|
|
||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
const fromBounds = activationBounds(msg.from, actors);
|
const [fromLeft, fromRight] = activationBounds(msg.from, actors);
|
||||||
const toBounds = activationBounds(msg.to, actors);
|
const [toLeft, toRight] = activationBounds(msg.to, actors);
|
||||||
const fromIdx = fromBounds[0] <= toBounds[0] ? 1 : 0;
|
const arrowDirection = fromLeft <= toLeft ? 'right' : 'left';
|
||||||
const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
|
const startx = arrowDirection === 'right' ? fromRight : fromLeft;
|
||||||
const allBounds = [...fromBounds, ...toBounds];
|
let stopx = arrowDirection === 'right' ? toLeft : toRight;
|
||||||
const boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);
|
const isToActivation = Math.abs(toLeft - toRight) > 2;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is an edge case for the first activation.
|
||||||
|
* Proper fix would require significant changes.
|
||||||
|
* So, we set an activate flag in the message, and cross check that with isToActivation
|
||||||
|
* In cases where the message is to an activation that was properly detected, we don't want to move the arrow head
|
||||||
|
* The activation will not be detected on the first message, so we need to move the arrow head
|
||||||
|
*/
|
||||||
|
if (msg.activate && !isToActivation) {
|
||||||
|
if (arrowDirection === 'right') {
|
||||||
|
stopx -= conf.activationWidth / 2 - 1;
|
||||||
|
} else {
|
||||||
|
stopx += conf.activationWidth / 2 - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shorten the length of arrow at the end and move the marker forward (using refX) to have a clean arrowhead
|
||||||
|
* This is not required for open arrows that don't have arrowheads
|
||||||
|
*/
|
||||||
|
if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) {
|
||||||
|
if (arrowDirection === 'right') {
|
||||||
|
stopx -= 3;
|
||||||
|
} else {
|
||||||
|
stopx += 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const allBounds = [fromLeft, fromRight, toLeft, toRight];
|
||||||
|
const boundedWidth = Math.abs(startx - stopx);
|
||||||
if (msg.wrap && msg.message) {
|
if (msg.wrap && msg.message) {
|
||||||
msg.message = utils.wrapLabel(
|
msg.message = utils.wrapLabel(
|
||||||
msg.message,
|
msg.message,
|
||||||
@ -1429,8 +1455,8 @@ const buildMessageModel = function (msg, actors, diagObj) {
|
|||||||
conf.width
|
conf.width
|
||||||
),
|
),
|
||||||
height: 0,
|
height: 0,
|
||||||
startx: fromBounds[fromIdx],
|
startx,
|
||||||
stopx: toBounds[toIdx],
|
stopx,
|
||||||
starty: 0,
|
starty: 0,
|
||||||
stopy: 0,
|
stopy: 0,
|
||||||
message: msg.message,
|
message: msg.message,
|
||||||
|
@ -703,7 +703,7 @@ export const insertArrowHead = function (elem) {
|
|||||||
.append('defs')
|
.append('defs')
|
||||||
.append('marker')
|
.append('marker')
|
||||||
.attr('id', 'arrowhead')
|
.attr('id', 'arrowhead')
|
||||||
.attr('refX', 9)
|
.attr('refX', 7.9)
|
||||||
.attr('refY', 5)
|
.attr('refY', 5)
|
||||||
.attr('markerUnits', 'userSpaceOnUse')
|
.attr('markerUnits', 'userSpaceOnUse')
|
||||||
.attr('markerWidth', 12)
|
.attr('markerWidth', 12)
|
||||||
@ -723,7 +723,7 @@ export const insertArrowFilledHead = function (elem) {
|
|||||||
.append('defs')
|
.append('defs')
|
||||||
.append('marker')
|
.append('marker')
|
||||||
.attr('id', 'filled-head')
|
.attr('id', 'filled-head')
|
||||||
.attr('refX', 18)
|
.attr('refX', 15.5)
|
||||||
.attr('refY', 7)
|
.attr('refY', 7)
|
||||||
.attr('markerWidth', 20)
|
.attr('markerWidth', 20)
|
||||||
.attr('markerHeight', 28)
|
.attr('markerHeight', 28)
|
||||||
@ -768,7 +768,7 @@ export const insertArrowCrossHead = function (elem) {
|
|||||||
.attr('markerHeight', 8)
|
.attr('markerHeight', 8)
|
||||||
.attr('orient', 'auto')
|
.attr('orient', 'auto')
|
||||||
.attr('refX', 4)
|
.attr('refX', 4)
|
||||||
.attr('refY', 5);
|
.attr('refY', 4.5);
|
||||||
// The cross
|
// The cross
|
||||||
marker
|
marker
|
||||||
.append('path')
|
.append('path')
|
||||||
|
Loading…
x
Reference in New Issue
Block a user