Merge branch 'master' into develop

cypress/integration/rendering/sequencediagram.spec.js

@@ -563,7 +563,8 @@ context('Sequence diagram', () => {
     });
   });
   context('links', () => {
-    it('should support actor links and properties', () => {
+    it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => {
+       //Be aware that the syntax for "properties" is likely to be changed. 
       imgSnapshotTest(
         `
         %%{init: { "config": { "mirrorActors": true, "forceMenus": true }}}%%
@@ -583,7 +584,8 @@ context('Sequence diagram', () => {
         { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
       );
     });
-    it('should support actor links and properties when not mirrored', () => {
+    it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
+       //Be aware that the syntax for "properties" is likely to be changed. 
       imgSnapshotTest(
         `
         %%{init: { "config": { "mirrorActors": false, "forceMenus": true, "wrap": true }}}%%

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.13.2",
+  "version": "8.13.3",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "module": "dist/mermaid.esm.min.mjs",

src/diagrams/sequence/sequenceDb.js

@@ -1,6 +1,7 @@
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
 import { log } from '../../logger';
+import { sanitizeText } from '../common/common';
 
 let prevActor = undefined;
 let actors = {};
@@ -219,7 +220,10 @@ export const addLinks = function (actorId, text) {
   const actor = getActor(actorId);
   // JSON.parse the text
   try {
-    const links = JSON.parse(text.text);
+    let sanitizedText = sanitizeText(text.text, configApi.getConfig());
+    sanitizedText = sanitizedText.replace(/&/g, '&');
+    sanitizedText = sanitizedText.replace(/=/g, '=');
+    const links = JSON.parse(sanitizedText);
     // add the deserialized text to the actor's links field.
     insertLinks(actor, links);
   } catch (e) {
@@ -232,9 +236,12 @@ export const addALink = function (actorId, text) {
   const actor = getActor(actorId);
   try {
     const links = {};
-    var sep = text.text.indexOf('@');
-    var label = text.text.slice(0, sep - 1).trim();
-    var link = text.text.slice(sep + 1).trim();
+    let sanitizedText = sanitizeText(text.text, configApi.getConfig());
+    var sep = sanitizedText.indexOf('@');
+    sanitizedText = sanitizedText.replace(/&/g, '&');
+    sanitizedText = sanitizedText.replace(/=/g, '=');
+    var label = sanitizedText.slice(0, sep - 1).trim();
+    var link = sanitizedText.slice(sep + 1).trim();
 
     links[label] = link;
     // add the deserialized text to the actor's links field.
@@ -259,7 +266,8 @@ export const addProperties = function (actorId, text) {
   const actor = getActor(actorId);
   // JSON.parse the text
   try {
-    const properties = JSON.parse(text.text);
+    let sanitizedText = sanitizeText(text.text, configApi.getConfig());
+    const properties = JSON.parse(sanitizedText);
     // add the deserialized text to the actor's property field.
     insertProperties(actor, properties);
   } catch (e) {

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -976,7 +976,8 @@ link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
     expect(actors.a.links["Tests"]).toBe("https://tests.contoso.com/?svc=alice@contoso.com");
   });
 
-  it('it should handle properties', function () {
+  it('it should handle properties EXPERIMENTAL: USE WITH CAUTION', function () {
+ //Be aware that the syntax for "properties" is likely to be changed. 
     const str = `
 sequenceDiagram
 participant a as Alice

src/diagrams/sequence/svgDraw.js

@@ -1,4 +1,5 @@
 import common from '../common/common';
+import { addFunction } from '../../interactionDb';
 
 export const drawRect = function (elem, rectData) {
   const rectElem = elem.append('rect');
@@ -25,6 +26,17 @@ const sanitizeUrl = function (s) {
     .replace(/javascript:/g, '');
 };
 
+const addPopupInteraction = (id, actorCnt) => {
+  addFunction(() => {
+    const arr = document.querySelectorAll(id);
+    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 };
@@ -43,9 +55,7 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
   g.attr('id', 'actor' + actorCnt + '_popup');
   g.attr('class', 'actorPopupMenu');
   g.attr('display', displayValue);
-  g.attr('onmouseover', popupMenu('actor' + actorCnt + '_popup'));
-  g.attr('onmouseout', popdownMenu('actor' + actorCnt + '_popup'));
-
+  addPopupInteraction('#actor' + actorCnt + '_popup', actorCnt);
   var actorClass = '';
   if (typeof rectData.class !== 'undefined') {
     actorClass = ' ' + rectData.class;
@@ -123,6 +133,19 @@ export const popdownMenu = function (popid) {
   );
 };
 
+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,
     textHeight = 0;
@@ -321,9 +344,10 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
 
     g = boxpluslineGroup.append('g');
     actor.actorCnt = actorCnt;
+
     if (actor.links != null) {
-      g.attr('onmouseover', popupMenu('actor' + actorCnt + '_popup'));
-      g.attr('onmouseout', popdownMenu('actor' + actorCnt + '_popup'));
+      g.attr('id', 'root-' + actorCnt);
+      addPopupInteraction('#root-' + actorCnt, actorCnt);
     }
   }
 
@@ -370,6 +394,7 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
     actor.height = bounds.height;
     height = bounds.height;
   }
+
   return height;
 };
 

src/interactionDb.js

@@ -0,0 +1,10 @@
+let interactionFunctions = [];
+export const addFunction = (func) => {
+  interactionFunctions.push(func);
+};
+export const attachFunctions = () => {
+  interactionFunctions.forEach((f) => {
+    f();
+  });
+  interactionFunctions = [];
+};

src/mermaidAPI.js

@@ -54,6 +54,7 @@ import journeyDb from './diagrams/user-journey/journeyDb';
 import journeyRenderer from './diagrams/user-journey/journeyRenderer';
 import journeyParser from './diagrams/user-journey/parser/journey';
 import errorRenderer from './errorRenderer';
+import { attachFunctions } from './interactionDb';
 
 // import * as configApi from './config';
 // // , {
@@ -483,6 +484,7 @@ const render = function (id, _txt, cb, container) {
   } else {
     log.debug('CB = undefined!');
   }
+  attachFunctions();
 
   const node = select('#d' + id).node();
   if (node !== null && typeof node.remove === 'function') {