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

Call setTooltip only when you need it

This commit is contained in:
Matthieu MOREL 2020-12-06 14:37:12 +01:00
parent 5ca629ec90
commit 1940b63237
3 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/diagrams/class/classDb.js
View File

@ -171,19 +171,14 @@ export const setCssClass = function(ids, className) {
* Called by parser when a link is found. Adds the URL to the vertex data. * Called by parser when a link is found. Adds the URL to the vertex data.
* @param ids Comma separated list of ids * @param ids Comma separated list of ids
* @param linkStr URL to create a link for * @param linkStr URL to create a link for
* @param tooltip Tooltip for the clickable element
*/ */
export const setLink = function(ids, linkStr, tooltip) { export const setLink = function(ids, linkStr) {
const config = configApi.getConfig(); const config = configApi.getConfig();
ids.split(',').forEach(function(_id) { ids.split(',').forEach(function(_id) {
let id = _id; let id = _id;
if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof classes[id] !== 'undefined') { if (typeof classes[id] !== 'undefined') {
classes[id].link = utils.formatUrl(linkStr, config); classes[id].link = utils.formatUrl(linkStr, config);
if (tooltip) {
classes[id].tooltip = common.sanitizeText(tooltip, config);
}
} }
}); });
setCssClass(ids, 'clickable'); setCssClass(ids, 'clickable');
@ -193,17 +188,28 @@ export const setLink = function(ids, linkStr, tooltip) {
* Called by parser when a click definition is found. Registers an event handler. * Called by parser when a click definition is found. Registers an event handler.
* @param ids Comma separated list of ids * @param ids Comma separated list of ids
* @param functionName Function to be called on click * @param functionName Function to be called on click
* @param tooltip Tooltip for the clickable element
*/ */
export const setClickEvent = function(ids, functionName, tooltip) { export const setClickEvent = function(ids, functionName) {
ids.split(',').forEach(function(id) { ids.split(',').forEach(function(id) {
setClickFunc(id, functionName, tooltip); setClickFunc(id, functionName);
classes[id].haveCallback = true; classes[id].haveCallback = true;
}); });
setCssClass(ids, 'clickable'); setCssClass(ids, 'clickable');
}; };
const setClickFunc = function(domId, functionName, tooltip) { /**
* Called by parser when a tooltip is found for a click definition
* @param tooltip Tooltip for the clickable element
*/
export const setTooltip = function(ids, tooltip) {
ids.split(',').forEach(function(id) {
if (typeof tooltip !== 'undefined') {
classes[id].tooltip = common.sanitizeText(tooltip, config);
}
});
};
const setClickFunc = function(domId, functionName) {
const config = configApi.getConfig(); const config = configApi.getConfig();
let id = domId; let id = domId;
let elemId = lookUpDomId(id); let elemId = lookUpDomId(id);
@ -215,10 +221,6 @@ const setClickFunc = function(domId, functionName, tooltip) {
return; return;
} }
if (typeof classes[id] !== 'undefined') { if (typeof classes[id] !== 'undefined') {
if (tooltip) {
classes[id].tooltip = common.sanitizeText(tooltip, config);
}
funs.push(function() { funs.push(function() {
const elem = document.querySelector(`[id="${elemId}"]`); const elem = document.querySelector(`[id="${elemId}"]`);
if (elem !== null) { if (elem !== null) {
@ -314,5 +316,6 @@ export default {
setClickEvent, setClickEvent,
setCssClass, setCssClass,
setLink, setLink,
setTooltip,
lookUpDomId lookUpDomId
}; };

6
src/diagrams/class/classDiagram.spec.js
View File

@ -662,15 +662,17 @@ foo()
const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall"'; const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall"';
parser.parse(str); parser.parse(str);
expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall', undefined); expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall');
}); });
it('should associate callback with tooltip', function () { it('should associate callback with tooltip', function () {
spyOn(classDb, 'setClickEvent'); spyOn(classDb, 'setClickEvent');
spyOn(classDb, 'setTooltip');
const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall" "A tooltip"'; const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall" "A tooltip"';
parser.parse(str); parser.parse(str);
expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall', 'A tooltip'); expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall');
expect(classDb.setTooltip).toHaveBeenCalledWith('Class1','A tooltip');
}); });
}); });
}); });

8
src/diagrams/class/parser/classDiagram.jison
View File

@ -243,10 +243,10 @@ lineType
; ;
clickStatement clickStatement
: CALLBACK className STR {$$ = $1;yy.setClickEvent($2, $3, undefined);} : CALLBACK className STR {$$ = $1;yy.setClickEvent($2, $3);}
| CALLBACK className STR STR {$$ = $1;yy.setClickEvent($2, $3, $4);} | CALLBACK className STR STR {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4)}
| LINK className STR {$$ = $1;yy.setLink($2, $3, undefined);} | LINK className STR {$$ = $1;yy.setLink($2, $3);}
| LINK className STR STR {$$ = $1;yy.setLink($2, $3, $4);} | LINK className STR STR {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4)}
; ;
cssClassStatement cssClassStatement