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 @@

Sequence diagram demos

participant Alice participant Bob participant John as John
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 @@

Sequence diagram demos


+    ---
+    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,
 };