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

Merge pull request #1170 from jgreywolf/1064-ClickEventInClassDiagram

Browse Source 
1064 click event in class diagram
This commit is contained in:
Knut Sveidqvist
2020-01-05 12:07:34 +01:00
committed by GitHub
parent f57356006d 591a104c80
commit 37ae863443
7 changed files with 167 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
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,17 @@ 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,9 +8,9 @@ import { parser } from './parser/classDiagram';
parser.yy = classDb;
const MERMAID_DOM_ID_PREFIX = 'classid-';
let idCache = {};
let classCnt = 0;
const conf = {
dividerMargin: 10,
padding: 5,
@@ -322,7 +322,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,
@@ -342,8 +342,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);
@@ -435,6 +434,10 @@ const drawClass = function(elem, classDef) {
x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);
});
if (classDef.tooltip) {
title.insert('title').text(classDef.tooltip);
}
membersLine.attr('x2', rectWidth);
methodsLine.attr('x2', rectWidth);
@@ -442,7 +445,6 @@ const drawClass = function(elem, classDef) {
classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;
idCache[id] = classInfo;
classCnt++;
return classInfo;
};