marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-22 08:50:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

1064 Adding tooltip and function calls to click evens in class diagrams

Browse Source
This commit is contained in:
Justin Greywolf
2020-01-02 11:04:37 -08:00
parent 00687f21cd
commit e6fbfcb1e8
6 changed files with 76 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
import * as d3 from 'd3';
import { sanitizeUrl } from '@braintree/sanitize-url';
import { logger } from '../../logger';
import { getConfig } from '../../config';
import utils from '../../utils';
const MERMAID_DOM_ID_PREFIX = '';
const MERMAID_DOM_ID_PREFIX = 'classid-';
const config = getConfig();
@@ -155,14 +155,10 @@ export const setLink = function(ids, linkStr, tooltip) {
let id = _id;
if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof classes[id] !== 'undefined') {
if (config.securityLevel !== 'loose') {
classes[id].link = sanitizeUrl(linkStr);
} else {
classes[id].link = linkStr;
}
classes[id].link = utils.formatUrl(linkStr, config);
if (tooltip) {
classes[id].tooltip = tooltip;
classes[id].tooltip = utils.sanitize(tooltip, config);
}
}
});
@@ -182,9 +178,10 @@ export const setClickEvent = function(ids, functionName, tooltip) {
setCssClass(ids, 'clickable');
};
const setClickFunc = function(_id, functionName) {
const setClickFunc = function(_id, functionName, tooltip) {
let id = _id;
if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
let elemId = MERMAID_DOM_ID_PREFIX + id;
if (config.securityLevel !== 'loose') {
return;
}
@@ -192,14 +189,18 @@ const setClickFunc = function(_id, functionName) {
return;
}
if (typeof classes[id] !== 'undefined') {
if (tooltip) {
classes[id].tooltip = utils.sanitize(tooltip, config);
}
funs.push(function() {
const elem = document.querySelector(`[id="${id}"]`);
const elem = document.querySelector(`[id="${elemId}"]`);
if (elem !== null) {
elem.setAttribute('title', classes[id].tooltip);
elem.addEventListener(
'click',
function() {
window[functionName](id);
window[functionName](elemId);
},
false
);

12
src/diagrams/class/classRenderer.js
View File

@@ -8,6 +8,7 @@ import { parser } from './parser/classDiagram';
parser.yy = classDb;
const MERMAID_DOM_ID_PREFIX = 'classid-';
let idCache = {};
let classCnt = 0;
@@ -319,7 +320,7 @@ const drawClass = function(elem, classDef) {
}
};
const id = 'classId' + classCnt;
const id = MERMAID_DOM_ID_PREFIX + classDef.id;
const classInfo = {
id: id,
label: classDef.id,
@@ -339,8 +340,7 @@ const drawClass = function(elem, classDef) {
title = g
.append('svg:a')
.attr('xlink:href', classDef.link)
.attr('xlink:target', '_blank')
.attr('xlink:title', classDef.tooltip)
.attr('target', '_blank')
.append('text')
.attr('y', conf.textHeight + conf.padding)
.attr('x', 0);
@@ -432,6 +432,12 @@ const drawClass = function(elem, classDef) {
x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);
});
if (classDef.tooltip) {
const tooltip = title
.insert('title')
.text(classDef.tooltip);
}
membersLine.attr('x2', rectWidth);
methodsLine.attr('x2', rectWidth);