diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 27e03da9c0..10432f057f 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -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
+ John-->>Alice: Great
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(
diff --git a/demos/sequence.html b/demos/sequence.html
index b2733a384e..8eecae6105 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -23,6 +23,10 @@
+ --- + 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! ++
sequenceDiagram accTitle: Sequence diagram title is here accDescr: Hello friends diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index f81147c10c..ef8ed6f009 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -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, };