GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Cleanup classDB

Browse Source
This commit is contained in:
Sidharth Vinod 2023-02-13 21:31:43 +05:30
parent 9d75665460
commit b9c2f62b47
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
2 changed files with 90 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
packages/mermaid/src/diagrams/class/classDb.js → packages/mermaid/src/diagrams/class/classDb.ts
View File

@ -1,4 +1,4 @@
import { select } from 'd3'; import { select, Selection } from 'd3';
import { log } from '../../logger'; import { log } from '../../logger';
import * as configApi from '../../config'; import * as configApi from '../../config';
import common from '../common/common'; import common from '../common/common';
@ -16,25 +16,48 @@ import {
const MERMAID_DOM_ID_PREFIX = 'classid-'; const MERMAID_DOM_ID_PREFIX = 'classid-';
let relations = []; interface ClassNode {
let classes = {}; id: string;
let notes = []; type: string;
cssClasses: string[];
methods: string[];
members: string[];
annotations: string[];
domId: string;
link?: string;
linkTarget?: string;
haveCallback?: boolean;
tooltip?: string;
}
interface ClassNote {
id: string;
class: string;
text: string;
}
type ClassRelation = any;
let relations: ClassRelation[] = [];
let classes: Record<string, ClassNode> = {};
let notes: ClassNote[] = [];
let classCounter = 0; let classCounter = 0;
let funs = []; let functions: any[] = [];
const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig()); const sanitizeText = (txt: string) => common.sanitizeText(txt, configApi.getConfig());
export const parseDirective = function (statement, context, type) { export const parseDirective = function (statement: string, context: string, type: string) {
// @ts-ignore Don't wanna mess it up
mermaidAPI.parseDirective(this, statement, context, type); mermaidAPI.parseDirective(this, statement, context, type);
}; };
const splitClassNameAndType = function (id) { const splitClassNameAndType = function (id: string) {
let genericType = ''; let genericType = '';
let className = id; let className = id;
if (id.indexOf('~') > 0) { if (id.indexOf('~') > 0) {
let split = id.split('~'); const split = id.split('~');
className = split[0]; className = split[0];
genericType = common.sanitizeText(split[1], configApi.getConfig()); genericType = common.sanitizeText(split[1], configApi.getConfig());
@ -46,11 +69,11 @@ const splitClassNameAndType = function (id) {
/** /**
* Function called by parser when a node definition has been found. * Function called by parser when a node definition has been found.
* *
* @param id * @param id - Id of the class to add
* @public * @public
*/ */
export const addClass = function (id) { export const addClass = function (id: string) {
let classId = splitClassNameAndType(id); const classId = splitClassNameAndType(id);
// Only add class if not exists // Only add class if not exists
if (classes[classId.className] !== undefined) { if (classes[classId.className] !== undefined) {
return; return;
@ -64,7 +87,7 @@ export const addClass = function (id) {
members: [], members: [],
annotations: [], annotations: [],
domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter, domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter,
}; } as ClassNode;
classCounter++; classCounter++;
}; };
@ -72,28 +95,26 @@ export const addClass = function (id) {
/** /**
* Function to lookup domId from id in the graph definition. * Function to lookup domId from id in the graph definition.
* *
* @param id * @param id - class ID to lookup
* @public * @public
*/ */
export const lookUpDomId = function (id) { export const lookUpDomId = function (id: string): string {
const classKeys = Object.keys(classes); if (id in classes) {
for (const classKey of classKeys) { return classes[id].domId;
if (classes[classKey].id === id) {
return classes[classKey].domId;
}
} }
throw new Error('Class not found: ' + id);
}; };
export const clear = function () { export const clear = function () {
relations = []; relations = [];
classes = {}; classes = {};
notes = []; notes = [];
funs = []; functions = [];
funs.push(setupToolTips); functions.push(setupToolTips);
commonClear(); commonClear();
}; };
export const getClass = function (id) { export const getClass = function (id: string) {
return classes[id]; return classes[id];
}; };
export const getClasses = function () { export const getClasses = function () {
@ -108,7 +129,7 @@ export const getNotes = function () {
return notes; return notes;
}; };
export const addRelation = function (relation) { export const addRelation = function (relation: ClassRelation) {
log.debug('Adding relation: ' + JSON.stringify(relation)); log.debug('Adding relation: ' + JSON.stringify(relation));
addClass(relation.id1); addClass(relation.id1);
addClass(relation.id2); addClass(relation.id2);
@ -133,11 +154,11 @@ export const addRelation = function (relation) {
* Adds an annotation to the specified class Annotations mark special properties of the given type * Adds an annotation to the specified class Annotations mark special properties of the given type
* (like 'interface' or 'service') * (like 'interface' or 'service')
* *
* @param className The class name * @param className - The class name
* @param annotation The name of the annotation without any brackets * @param annotation - The name of the annotation without any brackets
* @public * @public
*/ */
export const addAnnotation = function (className, annotation) { export const addAnnotation = function (className: string, annotation: string) {
const validatedClassName = splitClassNameAndType(className).className; const validatedClassName = splitClassNameAndType(className).className;
classes[validatedClassName].annotations.push(annotation); classes[validatedClassName].annotations.push(annotation);
}; };
@ -145,13 +166,13 @@ export const addAnnotation = function (className, annotation) {
/** /**
* Adds a member to the specified class * Adds a member to the specified class
* *
* @param className The class name * @param className - The class name
* @param member The full name of the member. If the member is enclosed in <<brackets>> it is * @param member - The full name of the member. If the member is enclosed in `<<brackets>>` it is
* treated as an annotation If the member is ending with a closing bracket ) it is treated as a * treated as an annotation If the member is ending with a closing bracket ) it is treated as a
* method Otherwise the member will be treated as a normal property * method Otherwise the member will be treated as a normal property
* @public * @public
*/ */
export const addMember = function (className, member) { export const addMember = function (className: string, member: string) {
const validatedClassName = splitClassNameAndType(className).className; const validatedClassName = splitClassNameAndType(className).className;
const theClass = classes[validatedClassName]; const theClass = classes[validatedClassName];
@ -171,14 +192,14 @@ export const addMember = function (className, member) {
} }
}; };
export const addMembers = function (className, members) { export const addMembers = function (className: string, members: string[]) {
if (Array.isArray(members)) { if (Array.isArray(members)) {
members.reverse(); members.reverse();
members.forEach((member) => addMember(className, member)); members.forEach((member) => addMember(className, member));
} }
}; };
export const addNote = function (text, className) { export const addNote = function (text: string, className: string) {
const note = { const note = {
id: `note${notes.length}`, id: `note${notes.length}`,
class: className, class: className,
@ -187,21 +208,20 @@ export const addNote = function (text, className) {
notes.push(note); notes.push(note);
}; };
export const cleanupLabel = function (label) { export const cleanupLabel = function (label: string) {
if (label.substring(0, 1) === ':') { if (label.startsWith(':')) {
return common.sanitizeText(label.substr(1).trim(), configApi.getConfig()); label = label.substring(1);
} else {
return sanitizeText(label.trim());
} }
return sanitizeText(label.trim());
}; };
/** /**
* Called by parser when a special node is found, e.g. a clickable element. * Called by parser when a special node is found, e.g. a clickable element.
* *
* @param ids Comma separated list of ids * @param ids - Comma separated list of ids
* @param className Class to add * @param className - Class to add
*/ */
export const setCssClass = function (ids, className) { export const setCssClass = function (ids: string, className: string) {
ids.split(',').forEach(function (_id) { ids.split(',').forEach(function (_id) {
let id = _id; let id = _id;
if (_id[0].match(/\d/)) { if (_id[0].match(/\d/)) {
@ -216,28 +236,27 @@ export const setCssClass = function (ids, className) {
/** /**
* Called by parser when a tooltip is found, e.g. a clickable element. * Called by parser when a tooltip is found, e.g. a clickable element.
* *
* @param ids Comma separated list of ids * @param ids - Comma separated list of ids
* @param tooltip Tooltip to add * @param tooltip - Tooltip to add
*/ */
const setTooltip = function (ids, tooltip) { const setTooltip = function (ids: string, tooltip?: string) {
const config = configApi.getConfig();
ids.split(',').forEach(function (id) { ids.split(',').forEach(function (id) {
if (tooltip !== undefined) { if (tooltip !== undefined) {
classes[id].tooltip = common.sanitizeText(tooltip, config); classes[id].tooltip = sanitizeText(tooltip);
} }
}); });
}; };
export const getTooltip = function (id) { export const getTooltip = function (id: string) {
return classes[id].tooltip; return classes[id].tooltip;
}; };
/** /**
* 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 target Target of the link, _blank by default as originally defined in the svgDraw.js file * @param target - Target of the link, _blank by default as originally defined in the svgDraw.js file
*/ */
export const setLink = function (ids, linkStr, target) { export const setLink = function (ids: string, linkStr: string, target: string) {
const config = configApi.getConfig(); const config = configApi.getConfig();
ids.split(',').forEach(function (_id) { ids.split(',').forEach(function (_id) {
let id = _id; let id = _id;
@ -261,11 +280,11 @@ export const setLink = function (ids, linkStr, target) {
/** /**
* 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 functionArgs Function args the function should be called with * @param functionArgs - Function args the function should be called with
*/ */
export const setClickEvent = function (ids, functionName, functionArgs) { export const setClickEvent = function (ids: string, functionName: string, functionArgs: string) {
ids.split(',').forEach(function (id) { ids.split(',').forEach(function (id) {
setClickFunc(id, functionName, functionArgs); setClickFunc(id, functionName, functionArgs);
classes[id].haveCallback = true; classes[id].haveCallback = true;
@ -273,19 +292,19 @@ export const setClickEvent = function (ids, functionName, functionArgs) {
setCssClass(ids, 'clickable'); setCssClass(ids, 'clickable');
}; };
const setClickFunc = function (domId, functionName, functionArgs) { const setClickFunc = function (domId: string, functionName: string, functionArgs: string) {
const config = configApi.getConfig(); const config = configApi.getConfig();
let id = domId;
let elemId = lookUpDomId(id);
if (config.securityLevel !== 'loose') { if (config.securityLevel !== 'loose') {
return; return;
} }
if (functionName === undefined) { if (functionName === undefined) {
return; return;
} }
const id = domId;
if (classes[id] !== undefined) { if (classes[id] !== undefined) {
let argList = []; const elemId = lookUpDomId(id);
let argList: string[] = [];
if (typeof functionArgs === 'string') { if (typeof functionArgs === 'string') {
/* Splits functionArgs by ',', ignoring all ',' in double quoted strings */ /* Splits functionArgs by ',', ignoring all ',' in double quoted strings */
argList = functionArgs.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/); argList = functionArgs.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
@ -305,7 +324,7 @@ const setClickFunc = function (domId, functionName, functionArgs) {
argList.push(elemId); argList.push(elemId);
} }
funs.push(function () { functions.push(function () {
const elem = document.querySelector(`[id="${elemId}"]`); const elem = document.querySelector(`[id="${elemId}"]`);
if (elem !== null) { if (elem !== null) {
elem.addEventListener( elem.addEventListener(
@ -320,8 +339,8 @@ const setClickFunc = function (domId, functionName, functionArgs) {
} }
}; };
export const bindFunctions = function (element) { export const bindFunctions = function (element: Element) {
funs.forEach(function (fun) { functions.forEach(function (fun) {
fun(element); fun(element);
}); });
}; };
@ -339,8 +358,10 @@ export const relationType = {
LOLLIPOP: 4, LOLLIPOP: 4,
}; };
const setupToolTips = function (element) { const setupToolTips = function (element: Element) {
let tooltipElem = select('.mermaidTooltip'); let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
select('.mermaidTooltip');
// @ts-ignore - _groups is a dynamic property
if ((tooltipElem._groups || tooltipElem)[0][0] === null) { if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
tooltipElem = select('body').append('div').attr('class', 'mermaidTooltip').style('opacity', 0); tooltipElem = select('body').append('div').attr('class', 'mermaidTooltip').style('opacity', 0);
} }
@ -352,10 +373,11 @@ const setupToolTips = function (element) {
.on('mouseover', function () { .on('mouseover', function () {
const el = select(this); const el = select(this);
const title = el.attr('title'); const title = el.attr('title');
// Dont try to draw a tooltip if no data is provided // Don't try to draw a tooltip if no data is provided
if (title === null) { if (title === null) {
return; return;
} }
// @ts-ignore - getBoundingClientRect is not part of the d3 type definition
const rect = this.getBoundingClientRect(); const rect = this.getBoundingClientRect();
tooltipElem.transition().duration(200).style('opacity', '.9'); tooltipElem.transition().duration(200).style('opacity', '.9');
@ -372,11 +394,11 @@ const setupToolTips = function (element) {
el.classed('hover', false); el.classed('hover', false);
}); });
}; };
funs.push(setupToolTips); functions.push(setupToolTips);
let direction = 'TB'; let direction = 'TB';
const getDirection = () => direction; const getDirection = () => direction;
const setDirection = (dir) => { const setDirection = (dir: string) => {
direction = dir; direction = dir;
}; };

2
packages/mermaid/src/utils.ts
View File

@ -230,7 +230,7 @@ export function interpolateToCurve(
* @param config - Configuration passed to MermaidJS * @param config - Configuration passed to MermaidJS
* @returns The formatted URL or `undefined`. * @returns The formatted URL or `undefined`.
*/ */
export function formatUrl(linkStr: string, config: { securityLevel: string }): string | undefined { export function formatUrl(linkStr: string, config: MermaidConfig): string | undefined {
const url = linkStr.trim(); const url = linkStr.trim();
if (url) { if (url) {