1064- Add click functionality to class diagrams

modified interaction functionality from flowcharts to work with class diagrams
This commit is contained in:
Justin Greywolf
2019-12-30 17:24:19 -08:00
parent b52744ae18
commit 2decf94ad0
5 changed files with 324 additions and 8 deletions

View File

@@ -1,8 +1,17 @@
import * as d3 from 'd3';
import { sanitizeUrl } from '@braintree/sanitize-url';
import { logger } from '../../logger';
import { getConfig } from '../../config';
const MERMAID_DOM_ID_PREFIX = '';
const config = getConfig();
let relations = [];
let classes = {};
let funs = [];
const splitClassNameAndType = function(id) {
let genericType = '';
let className = id;
@@ -29,6 +38,7 @@ export const addClass = function(id) {
classes[classId.className] = {
id: classId.className,
type: classId.type,
cssClasses: [],
methods: [],
members: [],
annotations: []
@@ -38,6 +48,8 @@ export const addClass = function(id) {
export const clear = function() {
relations = [];
classes = {};
funs = [];
funs.push(setupToolTips);
};
export const getClass = function(id) {
@@ -117,6 +129,91 @@ export const cleanupLabel = function(label) {
}
};
/**
* Called by parser when a special node is found, e.g. a clickable element.
* @param ids Comma separated list of ids
* @param className Class to add
*/
export const setCssClass = function(ids, className) {
ids.split(',').forEach(function(_id) {
let id = _id;
if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof classes[id] !== 'undefined') {
classes[id].cssClasses.push(className);
}
});
};
/**
* Called by parser when a link is found. Adds the URL to the vertex data.
* @param ids Comma separated list of ids
* @param linkStr URL to create a link for
* @param tooltip Tooltip for the clickable element
*/
export const setLink = function(ids, linkStr, tooltip) {
ids.split(',').forEach(function(_id) {
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;
}
if (tooltip) {
classes[id].tooltip = tooltip;
}
}
});
setCssClass(ids, 'clickable');
};
/**
* Called by parser when a click definition is found. Registers an event handler.
* @param ids Comma separated list of ids
* @param functionName Function to be called on click
* @param tooltip Tooltip for the clickable element
*/
export const setClickEvent = function(ids, functionName, tooltip) {
ids.split(',').forEach(function(id) {
setClickFunc(id, functionName, tooltip);
});
setCssClass(ids, 'clickable');
};
const setClickFunc = function(_id, functionName) {
let id = _id;
if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (config.securityLevel !== 'loose') {
return;
}
if (typeof functionName === 'undefined') {
return;
}
if (typeof classes[id] !== 'undefined') {
funs.push(function() {
const elem = document.querySelector(`[id="${id}"]`);
if (elem !== null) {
elem.setAttribute('title', classes[id].tooltip);
elem.addEventListener(
'click',
function() {
window[functionName](id);
},
false
);
}
});
}
};
export const bindFunctions = function(element) {
funs.forEach(function(fun) {
fun(element);
});
};
export const lineType = {
LINE: 0,
DOTTED_LINE: 1
@@ -129,8 +226,53 @@ export const relationType = {
DEPENDENCY: 3
};
const setupToolTips = function(element) {
let tooltipElem = d3.select('.mermaidTooltip');
if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
tooltipElem = d3
.select('body')
.append('div')
.attr('class', 'mermaidTooltip')
.style('opacity', 0);
}
const svg = d3.select(element).select('svg');
const nodes = svg.selectAll('g.node');
nodes
.on('mouseover', function() {
const el = d3.select(this);
const title = el.attr('title');
// Dont try to draw a tooltip if no data is provided
if (title === null) {
return;
}
const rect = this.getBoundingClientRect();
tooltipElem
.transition()
.duration(200)
.style('opacity', '.9');
tooltipElem
.html(el.attr('title'))
.style('left', rect.left + (rect.right - rect.left) / 2 + 'px')
.style('top', rect.top - 14 + document.body.scrollTop + 'px');
el.classed('hover', true);
})
.on('mouseout', function() {
tooltipElem
.transition()
.duration(500)
.style('opacity', 0);
const el = d3.select(this);
el.classed('hover', false);
});
};
funs.push(setupToolTips);
export default {
addClass,
bindFunctions,
clear,
getClass,
getClasses,
@@ -141,5 +283,8 @@ export default {
addMembers,
cleanupLabel,
lineType,
relationType
relationType,
setClickEvent,
setCssClass,
setLink
};