mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #5160 from vitorsss/fix/4212_actor_menus_sequence_diagram_popup 

[Fix] Sequence diagram actor menu popup
This commit is contained in:
Sidharth Vinod 2024-01-26 17:16:27 +00:00 committed by GitHub
parent 6939cf52e6 c226358f65
commit 9bedfa2033
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
cypress/integration/rendering/sequencediagram.spec.js
View File

@ -792,6 +792,34 @@ context('Sequence diagram', () => {
});
});
context('links', () => {
it('should support actor links', () => {
renderGraph(
`
sequenceDiagram
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John<br/>
John-->>Alice: Great<br/><br/>day!
`,
{ securityLevel: 'loose' }
);
cy.get('#actor0_popup').should((popupMenu) => {
const style = popupMenu.attr('style');
expect(style).to.undefined;
});
cy.get('#root-0').click();
cy.get('#actor0_popup').should((popupMenu) => {
const style = popupMenu.attr('style');
expect(style).to.match(/^display: block;$/);
});
cy.get('#root-0').click();
cy.get('#actor0_popup').should((popupMenu) => {
const style = popupMenu.attr('style');
expect(style).to.match(/^display: none;$/);
});
});
it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => {
//Be aware that the syntax for "properties" is likely to be changed.
imgSnapshotTest(

24
demos/sequence.html
View File

@ -23,6 +23,10 @@
participant Alice
participant Bob
participant John as John<br />Second Line
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
autonumber 10 10
rect rgb(200, 220, 100)
rect rgb(200, 255, 200)
@ -62,6 +66,26 @@
</pre>
<hr />
<pre class="mermaid">
---
title: With forced menus
config:
sequence:
forceMenus: true
---
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
</pre
>
<hr />
<pre class="mermaid">
sequenceDiagram
accTitle: Sequence diagram title is here
accDescr: Hello friends

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

@ -10,22 +10,6 @@ export const drawRect = function (elem, rectData) {
return svgDrawCommon.drawRect(elem, rectData);
};
const addPopupInteraction = (id, actorCnt) => {
addFunction(() => {
const arr = document.querySelectorAll(id);
// This will be the case when running in sandboxed mode
if (arr.length === 0) {
return;
}
arr[0].addEventListener('mouseover', function () {
popupMenuUpFunc('actor' + actorCnt + '_popup');
});
arr[0].addEventListener('mouseout', function () {
popupMenuDownFunc('actor' + actorCnt + '_popup');
});
});
};
export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMenus) {
if (actor.links === undefined || actor.links === null || Object.keys(actor.links).length === 0) {
return { height: 0, width: 0 };
@ -44,7 +28,6 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
g.attr('id', 'actor' + actorCnt + '_popup');
g.attr('class', 'actorPopupMenu');
g.attr('display', displayValue);
addPopupInteraction('#actor' + actorCnt + '_popup', actorCnt);
var actorClass = '';
if (rectData.class !== undefined) {
actorClass = ' ' + rectData.class;
@ -90,36 +73,14 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
return { height: rectData.height + linkY, width: menuWidth };
};
export const popupMenu = function (popid) {
const popupMenuToggle = function (popid) {
return (
"var pu = document.getElementById('" +
popid +
"'); if (pu != null) { pu.style.display = 'block'; }"
"'); if (pu != null) { pu.style.display = pu.style.display == 'block' ? 'none' : 'block'; }"
);
};
export const popdownMenu = function (popid) {
return (
"var pu = document.getElementById('" +
popid +
"'); if (pu != null) { pu.style.display = 'none'; }"
);
};
const popupMenuUpFunc = function (popupId) {
var pu = document.getElementById(popupId);
if (pu != null) {
pu.style.display = 'block';
}
};
const popupMenuDownFunc = function (popupId) {
var pu = document.getElementById(popupId);
if (pu != null) {
pu.style.display = 'none';
}
};
export const drawText = function (elem, textData) {
let prevTextHeight = 0;
let textHeight = 0;
@ -329,6 +290,9 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
if (!isFooter) {
actorCnt++;
if (Object.keys(actor.links || {}).length && !conf.forceMenus) {
g.attr('onclick', popupMenuToggle(`actor${actorCnt}_popup`)).attr('cursor', 'pointer');
}
g.append('line')
.attr('id', 'actor' + actorCnt)
.attr('x1', center)
@ -345,7 +309,6 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
if (actor.links != null) {
g.attr('id', 'root-' + actorCnt);
addPopupInteraction('#root-' + actorCnt, actorCnt);
}
}
@ -1053,8 +1016,6 @@ export default {
insertClockIcon,
getTextObj,
getNoteRect,
popupMenu,
popdownMenu,
fixLifeLineHeights,
sanitizeUrl,
};