mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-16 06:49:31 +02:00
convert flowDb to class and added test cases.
This commit is contained in:
@@ -24,46 +24,54 @@ import type {
|
|||||||
Interface,
|
Interface,
|
||||||
} from './classTypes.js';
|
} from './classTypes.js';
|
||||||
import type { Node, Edge } from '../../rendering-util/types.js';
|
import type { Node, Edge } from '../../rendering-util/types.js';
|
||||||
|
import type { DiagramDB } from '../../diagram-api/types.js';
|
||||||
|
|
||||||
const MERMAID_DOM_ID_PREFIX = 'classId-';
|
const MERMAID_DOM_ID_PREFIX = 'classId-';
|
||||||
|
|
||||||
let relations: ClassRelation[] = [];
|
|
||||||
let classes = new Map<string, ClassNode>();
|
|
||||||
const styleClasses = new Map<string, StyleClass>();
|
|
||||||
let notes: ClassNote[] = [];
|
|
||||||
let interfaces: Interface[] = [];
|
|
||||||
let classCounter = 0;
|
let classCounter = 0;
|
||||||
let namespaces = new Map<string, NamespaceNode>();
|
|
||||||
let namespaceCounter = 0;
|
|
||||||
|
|
||||||
let functions: any[] = [];
|
export class ClassDB implements DiagramDB {
|
||||||
|
private relations: ClassRelation[] = [];
|
||||||
|
private classes = new Map<string, ClassNode>();
|
||||||
|
private readonly styleClasses = new Map<string, StyleClass>();
|
||||||
|
private notes: ClassNote[] = [];
|
||||||
|
private interfaces: Interface[] = [];
|
||||||
|
// private static classCounter = 0;
|
||||||
|
private namespaces = new Map<string, NamespaceNode>();
|
||||||
|
private namespaceCounter = 0;
|
||||||
|
|
||||||
const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
|
private functions: any[] = [];
|
||||||
|
|
||||||
const splitClassNameAndType = function (_id: string) {
|
private readonly sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.functions.push(this.setupToolTips);
|
||||||
|
this.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
private readonly splitClassNameAndType = (_id: string) => {
|
||||||
const id = common.sanitizeText(_id, getConfig());
|
const id = common.sanitizeText(_id, getConfig());
|
||||||
let genericType = '';
|
let genericType = '';
|
||||||
let className = id;
|
let className = id;
|
||||||
|
|
||||||
if (id.indexOf('~') > 0) {
|
if (id.indexOf('~') > 0) {
|
||||||
const split = id.split('~');
|
const split = id.split('~');
|
||||||
className = sanitizeText(split[0]);
|
className = this.sanitizeText(split[0]);
|
||||||
genericType = sanitizeText(split[1]);
|
genericType = this.sanitizeText(split[1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
return { className: className, type: genericType };
|
return { className: className, type: genericType };
|
||||||
};
|
};
|
||||||
|
|
||||||
export const setClassLabel = function (_id: string, label: string) {
|
public setClassLabel = (_id: string, label: string) => {
|
||||||
const id = common.sanitizeText(_id, getConfig());
|
const id = common.sanitizeText(_id, getConfig());
|
||||||
if (label) {
|
if (label) {
|
||||||
label = sanitizeText(label);
|
label = this.sanitizeText(label);
|
||||||
}
|
}
|
||||||
|
|
||||||
const { className } = splitClassNameAndType(id);
|
const { className } = this.splitClassNameAndType(id);
|
||||||
classes.get(className)!.label = label;
|
this.classes.get(className)!.label = label;
|
||||||
classes.get(className)!.text =
|
this.classes.get(className)!.text =
|
||||||
`${label}${classes.get(className)!.type ? `<${classes.get(className)!.type}>` : ''}`;
|
`${label}${this.classes.get(className)!.type ? `<${this.classes.get(className)!.type}>` : ''}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -72,17 +80,17 @@ export const setClassLabel = function (_id: string, label: string) {
|
|||||||
* @param id - Id of the class to add
|
* @param id - Id of the class to add
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
export const addClass = function (_id: string) {
|
public addClass = (_id: string) => {
|
||||||
const id = common.sanitizeText(_id, getConfig());
|
const id = common.sanitizeText(_id, getConfig());
|
||||||
const { className, type } = splitClassNameAndType(id);
|
const { className, type } = this.splitClassNameAndType(id);
|
||||||
// Only add class if not exists
|
// Only add class if not exists
|
||||||
if (classes.has(className)) {
|
if (this.classes.has(className)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// alert('Adding class: ' + className);
|
// alert('Adding class: ' + className);
|
||||||
const name = common.sanitizeText(className, getConfig());
|
const name = common.sanitizeText(className, getConfig());
|
||||||
// alert('Adding class after: ' + name);
|
// alert('Adding class after: ' + name);
|
||||||
classes.set(name, {
|
this.classes.set(name, {
|
||||||
id: name,
|
id: name,
|
||||||
type: type,
|
type: type,
|
||||||
label: name,
|
label: name,
|
||||||
@@ -99,14 +107,14 @@ export const addClass = function (_id: string) {
|
|||||||
classCounter++;
|
classCounter++;
|
||||||
};
|
};
|
||||||
|
|
||||||
const addInterface = function (label: string, classId: string) {
|
private readonly addInterface = (label: string, classId: string) => {
|
||||||
const classInterface: Interface = {
|
const classInterface: Interface = {
|
||||||
id: `interface${interfaces.length}`,
|
id: `interface${this.interfaces.length}`,
|
||||||
label,
|
label,
|
||||||
classId,
|
classId,
|
||||||
};
|
};
|
||||||
|
|
||||||
interfaces.push(classInterface);
|
this.interfaces.push(classInterface);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -115,75 +123,75 @@ const addInterface = function (label: string, classId: string) {
|
|||||||
* @param id - class ID to lookup
|
* @param id - class ID to lookup
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
export const lookUpDomId = function (_id: string): string {
|
public lookUpDomId = (_id: string): string => {
|
||||||
const id = common.sanitizeText(_id, getConfig());
|
const id = common.sanitizeText(_id, getConfig());
|
||||||
if (classes.has(id)) {
|
if (this.classes.has(id)) {
|
||||||
return classes.get(id)!.domId;
|
return this.classes.get(id)!.domId;
|
||||||
}
|
}
|
||||||
throw new Error('Class not found: ' + id);
|
throw new Error('Class not found: ' + id);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const clear = function () {
|
public clear = () => {
|
||||||
relations = [];
|
this.relations = [];
|
||||||
classes = new Map();
|
this.classes = new Map();
|
||||||
notes = [];
|
this.notes = [];
|
||||||
interfaces = [];
|
this.interfaces = [];
|
||||||
functions = [];
|
this.functions = [];
|
||||||
functions.push(setupToolTips);
|
this.functions.push(this.setupToolTips);
|
||||||
namespaces = new Map();
|
this.namespaces = new Map();
|
||||||
namespaceCounter = 0;
|
this.namespaceCounter = 0;
|
||||||
direction = 'TB';
|
this.direction = 'TB';
|
||||||
commonClear();
|
commonClear();
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getClass = function (id: string): ClassNode {
|
public getClass = (id: string): ClassNode => {
|
||||||
return classes.get(id)!;
|
return this.classes.get(id)!;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getClasses = function (): ClassMap {
|
public getClasses = (): ClassMap => {
|
||||||
return classes;
|
return this.classes;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getRelations = function (): ClassRelation[] {
|
public getRelations = (): ClassRelation[] => {
|
||||||
return relations;
|
return this.relations;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getNotes = function () {
|
public getNotes = () => {
|
||||||
return notes;
|
return this.notes;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const addRelation = function (classRelation: ClassRelation) {
|
public addRelation = (classRelation: ClassRelation) => {
|
||||||
log.debug('Adding relation: ' + JSON.stringify(classRelation));
|
log.debug('Adding relation: ' + JSON.stringify(classRelation));
|
||||||
// Due to relationType cannot just check if it is equal to 'none' or it complains, can fix this later
|
// Due to relationType cannot just check if it is equal to 'none' or it complains, can fix this later
|
||||||
const invalidTypes = [
|
const invalidTypes = [
|
||||||
relationType.LOLLIPOP,
|
this.relationType.LOLLIPOP,
|
||||||
relationType.AGGREGATION,
|
this.relationType.AGGREGATION,
|
||||||
relationType.COMPOSITION,
|
this.relationType.COMPOSITION,
|
||||||
relationType.DEPENDENCY,
|
this.relationType.DEPENDENCY,
|
||||||
relationType.EXTENSION,
|
this.relationType.EXTENSION,
|
||||||
];
|
];
|
||||||
|
|
||||||
if (
|
if (
|
||||||
classRelation.relation.type1 === relationType.LOLLIPOP &&
|
classRelation.relation.type1 === this.relationType.LOLLIPOP &&
|
||||||
!invalidTypes.includes(classRelation.relation.type2)
|
!invalidTypes.includes(classRelation.relation.type2)
|
||||||
) {
|
) {
|
||||||
addClass(classRelation.id2);
|
this.addClass(classRelation.id2);
|
||||||
addInterface(classRelation.id1, classRelation.id2);
|
this.addInterface(classRelation.id1, classRelation.id2);
|
||||||
classRelation.id1 = `interface${interfaces.length - 1}`;
|
classRelation.id1 = `interface${this.interfaces.length - 1}`;
|
||||||
} else if (
|
} else if (
|
||||||
classRelation.relation.type2 === relationType.LOLLIPOP &&
|
classRelation.relation.type2 === this.relationType.LOLLIPOP &&
|
||||||
!invalidTypes.includes(classRelation.relation.type1)
|
!invalidTypes.includes(classRelation.relation.type1)
|
||||||
) {
|
) {
|
||||||
addClass(classRelation.id1);
|
this.addClass(classRelation.id1);
|
||||||
addInterface(classRelation.id2, classRelation.id1);
|
this.addInterface(classRelation.id2, classRelation.id1);
|
||||||
classRelation.id2 = `interface${interfaces.length - 1}`;
|
classRelation.id2 = `interface${this.interfaces.length - 1}`;
|
||||||
} else {
|
} else {
|
||||||
addClass(classRelation.id1);
|
this.addClass(classRelation.id1);
|
||||||
addClass(classRelation.id2);
|
this.addClass(classRelation.id2);
|
||||||
}
|
}
|
||||||
|
|
||||||
classRelation.id1 = splitClassNameAndType(classRelation.id1).className;
|
classRelation.id1 = this.splitClassNameAndType(classRelation.id1).className;
|
||||||
classRelation.id2 = splitClassNameAndType(classRelation.id2).className;
|
classRelation.id2 = this.splitClassNameAndType(classRelation.id2).className;
|
||||||
|
|
||||||
classRelation.relationTitle1 = common.sanitizeText(
|
classRelation.relationTitle1 = common.sanitizeText(
|
||||||
classRelation.relationTitle1.trim(),
|
classRelation.relationTitle1.trim(),
|
||||||
@@ -195,7 +203,7 @@ export const addRelation = function (classRelation: ClassRelation) {
|
|||||||
getConfig()
|
getConfig()
|
||||||
);
|
);
|
||||||
|
|
||||||
relations.push(classRelation);
|
this.relations.push(classRelation);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -206,9 +214,9 @@ export const addRelation = function (classRelation: ClassRelation) {
|
|||||||
* @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: string, annotation: string) {
|
public addAnnotation = (className: string, annotation: string) => {
|
||||||
const validatedClassName = splitClassNameAndType(className).className;
|
const validatedClassName = this.splitClassNameAndType(className).className;
|
||||||
classes.get(validatedClassName)!.annotations.push(annotation);
|
this.classes.get(validatedClassName)!.annotations.push(annotation);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -220,11 +228,11 @@ export const addAnnotation = function (className: string, annotation: string) {
|
|||||||
* 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: string, member: string) {
|
public addMember = (className: string, member: string) => {
|
||||||
addClass(className);
|
this.addClass(className);
|
||||||
|
|
||||||
const validatedClassName = splitClassNameAndType(className).className;
|
const validatedClassName = this.splitClassNameAndType(className).className;
|
||||||
const theClass = classes.get(validatedClassName)!;
|
const theClass = this.classes.get(validatedClassName)!;
|
||||||
|
|
||||||
if (typeof member === 'string') {
|
if (typeof member === 'string') {
|
||||||
// Member can contain white spaces, we trim them out
|
// Member can contain white spaces, we trim them out
|
||||||
@@ -232,7 +240,9 @@ export const addMember = function (className: string, member: string) {
|
|||||||
|
|
||||||
if (memberString.startsWith('<<') && memberString.endsWith('>>')) {
|
if (memberString.startsWith('<<') && memberString.endsWith('>>')) {
|
||||||
// its an annotation
|
// its an annotation
|
||||||
theClass.annotations.push(sanitizeText(memberString.substring(2, memberString.length - 2)));
|
theClass.annotations.push(
|
||||||
|
this.sanitizeText(memberString.substring(2, memberString.length - 2))
|
||||||
|
);
|
||||||
} else if (memberString.indexOf(')') > 0) {
|
} else if (memberString.indexOf(')') > 0) {
|
||||||
//its a method
|
//its a method
|
||||||
theClass.methods.push(new ClassMember(memberString, 'method'));
|
theClass.methods.push(new ClassMember(memberString, 'method'));
|
||||||
@@ -242,27 +252,27 @@ export const addMember = function (className: string, member: string) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const addMembers = function (className: string, members: string[]) {
|
public addMembers = (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) => this.addMember(className, member));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const addNote = function (text: string, className: string) {
|
public addNote = (text: string, className: string) => {
|
||||||
const note = {
|
const note = {
|
||||||
id: `note${notes.length}`,
|
id: `note${this.notes.length}`,
|
||||||
class: className,
|
class: className,
|
||||||
text: text,
|
text: text,
|
||||||
};
|
};
|
||||||
notes.push(note);
|
this.notes.push(note);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const cleanupLabel = function (label: string) {
|
public cleanupLabel = (label: string) => {
|
||||||
if (label.startsWith(':')) {
|
if (label.startsWith(':')) {
|
||||||
label = label.substring(1);
|
label = label.substring(1);
|
||||||
}
|
}
|
||||||
return sanitizeText(label.trim());
|
return this.sanitizeText(label.trim());
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -271,29 +281,29 @@ export const cleanupLabel = function (label: string) {
|
|||||||
* @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: string, className: string) {
|
public setCssClass = (ids: string, className: string) => {
|
||||||
ids.split(',').forEach(function (_id) {
|
ids.split(',').forEach((_id) => {
|
||||||
let id = _id;
|
let id = _id;
|
||||||
if (/\d/.exec(_id[0])) {
|
if (/\d/.exec(_id[0])) {
|
||||||
id = MERMAID_DOM_ID_PREFIX + id;
|
id = MERMAID_DOM_ID_PREFIX + id;
|
||||||
}
|
}
|
||||||
const classNode = classes.get(id);
|
const classNode = this.classes.get(id);
|
||||||
if (classNode) {
|
if (classNode) {
|
||||||
classNode.cssClasses += ' ' + className;
|
classNode.cssClasses += ' ' + className;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const defineClass = function (ids: string[], style: string[]) {
|
public defineClass = (ids: string[], style: string[]) => {
|
||||||
for (const id of ids) {
|
for (const id of ids) {
|
||||||
let styleClass = styleClasses.get(id);
|
let styleClass = this.styleClasses.get(id);
|
||||||
if (styleClass === undefined) {
|
if (styleClass === undefined) {
|
||||||
styleClass = { id, styles: [], textStyles: [] };
|
styleClass = { id, styles: [], textStyles: [] };
|
||||||
styleClasses.set(id, styleClass);
|
this.styleClasses.set(id, styleClass);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (style) {
|
if (style) {
|
||||||
style.forEach(function (s) {
|
style.forEach((s) => {
|
||||||
if (/color/.exec(s)) {
|
if (/color/.exec(s)) {
|
||||||
const newStyle = s.replace('fill', 'bgFill'); // .replace('color', 'fill');
|
const newStyle = s.replace('fill', 'bgFill'); // .replace('color', 'fill');
|
||||||
styleClass.textStyles.push(newStyle);
|
styleClass.textStyles.push(newStyle);
|
||||||
@@ -302,7 +312,7 @@ export const defineClass = function (ids: string[], style: string[]) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
classes.forEach((value) => {
|
this.classes.forEach((value) => {
|
||||||
if (value.cssClasses.includes(id)) {
|
if (value.cssClasses.includes(id)) {
|
||||||
value.styles.push(...style.flatMap((s) => s.split(',')));
|
value.styles.push(...style.flatMap((s) => s.split(',')));
|
||||||
}
|
}
|
||||||
@@ -316,20 +326,20 @@ export const defineClass = function (ids: string[], style: string[]) {
|
|||||||
* @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: string, tooltip?: string) {
|
public setTooltip = (ids: string, tooltip?: string) => {
|
||||||
ids.split(',').forEach(function (id) {
|
ids.split(',').forEach((id) => {
|
||||||
if (tooltip !== undefined) {
|
if (tooltip !== undefined) {
|
||||||
classes.get(id)!.tooltip = sanitizeText(tooltip);
|
this.classes.get(id)!.tooltip = this.sanitizeText(tooltip);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getTooltip = function (id: string, namespace?: string) {
|
public getTooltip = (id: string, namespace?: string) => {
|
||||||
if (namespace && namespaces.has(namespace)) {
|
if (namespace && this.namespaces.has(namespace)) {
|
||||||
return namespaces.get(namespace)!.classes.get(id)!.tooltip;
|
return this.namespaces.get(namespace)!.classes.get(id)!.tooltip;
|
||||||
}
|
}
|
||||||
|
|
||||||
return classes.get(id)!.tooltip;
|
return this.classes.get(id)!.tooltip;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -339,26 +349,26 @@ export const getTooltip = function (id: string, namespace?: string) {
|
|||||||
* @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: string, linkStr: string, target: string) {
|
public setLink = (ids: string, linkStr: string, target: string) => {
|
||||||
const config = getConfig();
|
const config = getConfig();
|
||||||
ids.split(',').forEach(function (_id) {
|
ids.split(',').forEach((_id) => {
|
||||||
let id = _id;
|
let id = _id;
|
||||||
if (/\d/.exec(_id[0])) {
|
if (/\d/.exec(_id[0])) {
|
||||||
id = MERMAID_DOM_ID_PREFIX + id;
|
id = MERMAID_DOM_ID_PREFIX + id;
|
||||||
}
|
}
|
||||||
const theClass = classes.get(id);
|
const theClass = this.classes.get(id);
|
||||||
if (theClass) {
|
if (theClass) {
|
||||||
theClass.link = utils.formatUrl(linkStr, config);
|
theClass.link = utils.formatUrl(linkStr, config);
|
||||||
if (config.securityLevel === 'sandbox') {
|
if (config.securityLevel === 'sandbox') {
|
||||||
theClass.linkTarget = '_top';
|
theClass.linkTarget = '_top';
|
||||||
} else if (typeof target === 'string') {
|
} else if (typeof target === 'string') {
|
||||||
theClass.linkTarget = sanitizeText(target);
|
theClass.linkTarget = this.sanitizeText(target);
|
||||||
} else {
|
} else {
|
||||||
theClass.linkTarget = '_blank';
|
theClass.linkTarget = '_blank';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
setCssClass(ids, 'clickable');
|
this.setCssClass(ids, 'clickable');
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -368,15 +378,15 @@ export const setLink = function (ids: string, linkStr: string, target: string) {
|
|||||||
* @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: string, functionName: string, functionArgs: string) {
|
public setClickEvent = (ids: string, functionName: string, functionArgs: string) => {
|
||||||
ids.split(',').forEach(function (id) {
|
ids.split(',').forEach((id) => {
|
||||||
setClickFunc(id, functionName, functionArgs);
|
this.setClickFunc(id, functionName, functionArgs);
|
||||||
classes.get(id)!.haveCallback = true;
|
this.classes.get(id)!.haveCallback = true;
|
||||||
});
|
});
|
||||||
setCssClass(ids, 'clickable');
|
this.setCssClass(ids, 'clickable');
|
||||||
};
|
};
|
||||||
|
|
||||||
const setClickFunc = function (_domId: string, functionName: string, functionArgs: string) {
|
private readonly setClickFunc = (_domId: string, functionName: string, functionArgs: string) => {
|
||||||
const domId = common.sanitizeText(_domId, getConfig());
|
const domId = common.sanitizeText(_domId, getConfig());
|
||||||
const config = getConfig();
|
const config = getConfig();
|
||||||
if (config.securityLevel !== 'loose') {
|
if (config.securityLevel !== 'loose') {
|
||||||
@@ -387,8 +397,8 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
|
|||||||
}
|
}
|
||||||
|
|
||||||
const id = domId;
|
const id = domId;
|
||||||
if (classes.has(id)) {
|
if (this.classes.has(id)) {
|
||||||
const elemId = lookUpDomId(id);
|
const elemId = this.lookUpDomId(id);
|
||||||
let argList: string[] = [];
|
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 */
|
||||||
@@ -409,12 +419,12 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
|
|||||||
argList.push(elemId);
|
argList.push(elemId);
|
||||||
}
|
}
|
||||||
|
|
||||||
functions.push(function () {
|
this.functions.push(() => {
|
||||||
const elem = document.querySelector(`[id="${elemId}"]`);
|
const elem = document.querySelector(`[id="${elemId}"]`);
|
||||||
if (elem !== null) {
|
if (elem !== null) {
|
||||||
elem.addEventListener(
|
elem.addEventListener(
|
||||||
'click',
|
'click',
|
||||||
function () {
|
() => {
|
||||||
utils.runFunc(functionName, ...argList);
|
utils.runFunc(functionName, ...argList);
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
@@ -424,18 +434,18 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const bindFunctions = function (element: Element) {
|
public bindFunctions = (element: Element) => {
|
||||||
functions.forEach(function (fun) {
|
this.functions.forEach((fun) => {
|
||||||
fun(element);
|
fun(element);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const lineType = {
|
public lineType = {
|
||||||
LINE: 0,
|
LINE: 0,
|
||||||
DOTTED_LINE: 1,
|
DOTTED_LINE: 1,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const relationType = {
|
public relationType = {
|
||||||
AGGREGATION: 0,
|
AGGREGATION: 0,
|
||||||
EXTENSION: 1,
|
EXTENSION: 1,
|
||||||
COMPOSITION: 2,
|
COMPOSITION: 2,
|
||||||
@@ -443,20 +453,23 @@ export const relationType = {
|
|||||||
LOLLIPOP: 4,
|
LOLLIPOP: 4,
|
||||||
};
|
};
|
||||||
|
|
||||||
const setupToolTips = function (element: Element) {
|
private readonly setupToolTips = (element: Element) => {
|
||||||
let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
|
let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
|
||||||
select('.mermaidTooltip');
|
select('.mermaidTooltip');
|
||||||
// @ts-expect-error - Incorrect types
|
// @ts-expect-error - Incorrect types
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
const svg = select(element).select('svg');
|
const svg = select(element).select('svg');
|
||||||
|
|
||||||
const nodes = svg.selectAll('g.node');
|
const nodes = svg.selectAll('g.node');
|
||||||
nodes
|
nodes
|
||||||
.on('mouseover', function () {
|
.on('mouseover', (event: MouseEvent) => {
|
||||||
const el = select(this);
|
const el = select(event.currentTarget as HTMLElement);
|
||||||
const title = el.attr('title');
|
const title = el.attr('title');
|
||||||
// Don't 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) {
|
||||||
@@ -473,18 +486,17 @@ const setupToolTips = function (element: Element) {
|
|||||||
tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '<br/>'));
|
tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '<br/>'));
|
||||||
el.classed('hover', true);
|
el.classed('hover', true);
|
||||||
})
|
})
|
||||||
.on('mouseout', function () {
|
.on('mouseout', (event: MouseEvent) => {
|
||||||
tooltipElem.transition().duration(500).style('opacity', 0);
|
tooltipElem.transition().duration(500).style('opacity', 0);
|
||||||
const el = select(this);
|
const el = select(event.currentTarget as HTMLElement);
|
||||||
el.classed('hover', false);
|
el.classed('hover', false);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
functions.push(setupToolTips);
|
|
||||||
|
|
||||||
let direction = 'TB';
|
private direction = 'TB';
|
||||||
const getDirection = () => direction;
|
public getDirection = () => this.direction;
|
||||||
const setDirection = (dir: string) => {
|
public setDirection = (dir: string) => {
|
||||||
direction = dir;
|
this.direction = dir;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -493,27 +505,27 @@ const setDirection = (dir: string) => {
|
|||||||
* @param id - Id of the namespace to add
|
* @param id - Id of the namespace to add
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
export const addNamespace = function (id: string) {
|
public addNamespace = (id: string) => {
|
||||||
if (namespaces.has(id)) {
|
if (this.namespaces.has(id)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
namespaces.set(id, {
|
this.namespaces.set(id, {
|
||||||
id: id,
|
id: id,
|
||||||
classes: new Map(),
|
classes: new Map(),
|
||||||
children: {},
|
children: {},
|
||||||
domId: MERMAID_DOM_ID_PREFIX + id + '-' + namespaceCounter,
|
domId: MERMAID_DOM_ID_PREFIX + id + '-' + this.namespaceCounter,
|
||||||
} as NamespaceNode);
|
} as NamespaceNode);
|
||||||
|
|
||||||
namespaceCounter++;
|
this.namespaceCounter++;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getNamespace = function (name: string): NamespaceNode {
|
public getNamespace = (name: string): NamespaceNode => {
|
||||||
return namespaces.get(name)!;
|
return this.namespaces.get(name)!;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getNamespaces = function (): NamespaceMap {
|
public getNamespaces = (): NamespaceMap => {
|
||||||
return namespaces;
|
return this.namespaces;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -523,19 +535,19 @@ const getNamespaces = function (): NamespaceMap {
|
|||||||
* @param classNames - Ids of the class to add
|
* @param classNames - Ids of the class to add
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
export const addClassesToNamespace = function (id: string, classNames: string[]) {
|
public addClassesToNamespace = (id: string, classNames: string[]) => {
|
||||||
if (!namespaces.has(id)) {
|
if (!this.namespaces.has(id)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
for (const name of classNames) {
|
for (const name of classNames) {
|
||||||
const { className } = splitClassNameAndType(name);
|
const { className } = this.splitClassNameAndType(name);
|
||||||
classes.get(className)!.parent = id;
|
this.classes.get(className)!.parent = id;
|
||||||
namespaces.get(id)!.classes.set(className, classes.get(className)!);
|
this.namespaces.get(id)!.classes.set(className, this.classes.get(className)!);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const setCssStyle = function (id: string, styles: string[]) {
|
public setCssStyle = (id: string, styles: string[]) => {
|
||||||
const thisClass = classes.get(id);
|
const thisClass = this.classes.get(id);
|
||||||
if (!styles || !thisClass) {
|
if (!styles || !thisClass) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -554,7 +566,7 @@ export const setCssStyle = function (id: string, styles: string[]) {
|
|||||||
* @param type - The type to look for
|
* @param type - The type to look for
|
||||||
* @returns The arrow marker
|
* @returns The arrow marker
|
||||||
*/
|
*/
|
||||||
function getArrowMarker(type: number) {
|
private readonly getArrowMarker = (type: number) => {
|
||||||
let marker;
|
let marker;
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 0:
|
case 0:
|
||||||
@@ -576,15 +588,15 @@ function getArrowMarker(type: number) {
|
|||||||
marker = 'none';
|
marker = 'none';
|
||||||
}
|
}
|
||||||
return marker;
|
return marker;
|
||||||
}
|
};
|
||||||
|
|
||||||
export const getData = () => {
|
public getData = () => {
|
||||||
const nodes: Node[] = [];
|
const nodes: Node[] = [];
|
||||||
const edges: Edge[] = [];
|
const edges: Edge[] = [];
|
||||||
const config = getConfig();
|
const config = getConfig();
|
||||||
|
|
||||||
for (const namespaceKey of namespaces.keys()) {
|
for (const namespaceKey of this.namespaces.keys()) {
|
||||||
const namespace = namespaces.get(namespaceKey);
|
const namespace = this.namespaces.get(namespaceKey);
|
||||||
if (namespace) {
|
if (namespace) {
|
||||||
const node: Node = {
|
const node: Node = {
|
||||||
id: namespace.id,
|
id: namespace.id,
|
||||||
@@ -600,8 +612,8 @@ export const getData = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const classKey of classes.keys()) {
|
for (const classKey of this.classes.keys()) {
|
||||||
const classNode = classes.get(classKey);
|
const classNode = this.classes.get(classKey);
|
||||||
if (classNode) {
|
if (classNode) {
|
||||||
const node = classNode as unknown as Node;
|
const node = classNode as unknown as Node;
|
||||||
node.parentId = classNode.parent;
|
node.parentId = classNode.parent;
|
||||||
@@ -611,7 +623,7 @@ export const getData = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let cnt = 0;
|
let cnt = 0;
|
||||||
for (const note of notes) {
|
for (const note of this.notes) {
|
||||||
cnt++;
|
cnt++;
|
||||||
const noteNode: Node = {
|
const noteNode: Node = {
|
||||||
id: note.id,
|
id: note.id,
|
||||||
@@ -629,7 +641,7 @@ export const getData = () => {
|
|||||||
};
|
};
|
||||||
nodes.push(noteNode);
|
nodes.push(noteNode);
|
||||||
|
|
||||||
const noteClassId = classes.get(note.class)?.id ?? '';
|
const noteClassId = this.classes.get(note.class)?.id ?? '';
|
||||||
|
|
||||||
if (noteClassId) {
|
if (noteClassId) {
|
||||||
const edge: Edge = {
|
const edge: Edge = {
|
||||||
@@ -651,7 +663,7 @@ export const getData = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const _interface of interfaces) {
|
for (const _interface of this.interfaces) {
|
||||||
const interfaceNode: Node = {
|
const interfaceNode: Node = {
|
||||||
id: _interface.id,
|
id: _interface.id,
|
||||||
label: _interface.label,
|
label: _interface.label,
|
||||||
@@ -664,7 +676,7 @@ export const getData = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
cnt = 0;
|
cnt = 0;
|
||||||
for (const classRelation of relations) {
|
for (const classRelation of this.relations) {
|
||||||
cnt++;
|
cnt++;
|
||||||
const edge: Edge = {
|
const edge: Edge = {
|
||||||
id: getEdgeId(classRelation.id1, classRelation.id2, {
|
id: getEdgeId(classRelation.id1, classRelation.id2, {
|
||||||
@@ -678,9 +690,10 @@ export const getData = () => {
|
|||||||
labelpos: 'c',
|
labelpos: 'c',
|
||||||
thickness: 'normal',
|
thickness: 'normal',
|
||||||
classes: 'relation',
|
classes: 'relation',
|
||||||
arrowTypeStart: getArrowMarker(classRelation.relation.type1),
|
arrowTypeStart: this.getArrowMarker(classRelation.relation.type1),
|
||||||
arrowTypeEnd: getArrowMarker(classRelation.relation.type2),
|
arrowTypeEnd: this.getArrowMarker(classRelation.relation.type2),
|
||||||
startLabelRight: classRelation.relationTitle1 === 'none' ? '' : classRelation.relationTitle1,
|
startLabelRight:
|
||||||
|
classRelation.relationTitle1 === 'none' ? '' : classRelation.relationTitle1,
|
||||||
endLabelLeft: classRelation.relationTitle2 === 'none' ? '' : classRelation.relationTitle2,
|
endLabelLeft: classRelation.relationTitle2 === 'none' ? '' : classRelation.relationTitle2,
|
||||||
arrowheadStyle: '',
|
arrowheadStyle: '',
|
||||||
labelStyle: ['display: inline-block'],
|
labelStyle: ['display: inline-block'],
|
||||||
@@ -691,46 +704,14 @@ export const getData = () => {
|
|||||||
edges.push(edge);
|
edges.push(edge);
|
||||||
}
|
}
|
||||||
|
|
||||||
return { nodes, edges, other: {}, config, direction: getDirection() };
|
return { nodes, edges, other: {}, config, direction: this.getDirection() };
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
public setAccTitle = setAccTitle;
|
||||||
setAccTitle,
|
public getAccTitle = getAccTitle;
|
||||||
getAccTitle,
|
public setAccDescription = setAccDescription;
|
||||||
getAccDescription,
|
public getAccDescription = getAccDescription;
|
||||||
setAccDescription,
|
public setDiagramTitle = setDiagramTitle;
|
||||||
getConfig: () => getConfig().class,
|
public getDiagramTitle = getDiagramTitle;
|
||||||
addClass,
|
public getConfig = () => getConfig().class;
|
||||||
bindFunctions,
|
}
|
||||||
clear,
|
|
||||||
getClass,
|
|
||||||
getClasses,
|
|
||||||
getNotes,
|
|
||||||
addAnnotation,
|
|
||||||
addNote,
|
|
||||||
getRelations,
|
|
||||||
addRelation,
|
|
||||||
getDirection,
|
|
||||||
setDirection,
|
|
||||||
addMember,
|
|
||||||
addMembers,
|
|
||||||
cleanupLabel,
|
|
||||||
lineType,
|
|
||||||
relationType,
|
|
||||||
setClickEvent,
|
|
||||||
setCssClass,
|
|
||||||
defineClass,
|
|
||||||
setLink,
|
|
||||||
getTooltip,
|
|
||||||
setTooltip,
|
|
||||||
lookUpDomId,
|
|
||||||
setDiagramTitle,
|
|
||||||
getDiagramTitle,
|
|
||||||
setClassLabel,
|
|
||||||
addNamespace,
|
|
||||||
addClassesToNamespace,
|
|
||||||
getNamespace,
|
|
||||||
getNamespaces,
|
|
||||||
setCssStyle,
|
|
||||||
getData,
|
|
||||||
};
|
|
||||||
|
@@ -1,9 +1,11 @@
|
|||||||
import { parser } from './parser/classDiagram.jison';
|
import { parser } from './parser/classDiagram.jison';
|
||||||
import classDb from './classDb.js';
|
import { ClassDB } from './classDb.js';
|
||||||
|
|
||||||
describe('class diagram, ', function () {
|
describe('class diagram, ', function () {
|
||||||
describe('when parsing data from a classDiagram it', function () {
|
describe('when parsing data from a classDiagram it', function () {
|
||||||
|
let classDb;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
parser.yy.clear();
|
parser.yy.clear();
|
||||||
});
|
});
|
||||||
|
@@ -1,13 +1,15 @@
|
|||||||
import type { DiagramDefinition } from '../../diagram-api/types.js';
|
import type { DiagramDefinition } from '../../diagram-api/types.js';
|
||||||
// @ts-ignore: JISON doesn't support types
|
// @ts-ignore: JISON doesn't support types
|
||||||
import parser from './parser/classDiagram.jison';
|
import parser from './parser/classDiagram.jison';
|
||||||
import db from './classDb.js';
|
import { ClassDB } from './classDb.js';
|
||||||
import styles from './styles.js';
|
import styles from './styles.js';
|
||||||
import renderer from './classRenderer-v3-unified.js';
|
import renderer from './classRenderer-v3-unified.js';
|
||||||
|
|
||||||
export const diagram: DiagramDefinition = {
|
export const diagram: DiagramDefinition = {
|
||||||
parser,
|
parser,
|
||||||
db,
|
get db() {
|
||||||
|
return new ClassDB();
|
||||||
|
},
|
||||||
renderer,
|
renderer,
|
||||||
styles,
|
styles,
|
||||||
init: (cnf) => {
|
init: (cnf) => {
|
||||||
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
|
|||||||
cnf.class = {};
|
cnf.class = {};
|
||||||
}
|
}
|
||||||
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
||||||
db.clear();
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
// @ts-expect-error Jison doesn't export types
|
// @ts-expect-error Jison doesn't export types
|
||||||
import { parser } from './parser/classDiagram.jison';
|
import { parser } from './parser/classDiagram.jison';
|
||||||
import classDb from './classDb.js';
|
import { ClassDB } from './classDb.js';
|
||||||
import { vi, describe, it, expect } from 'vitest';
|
import { vi, describe, it, expect } from 'vitest';
|
||||||
import type { ClassMap, NamespaceNode } from './classTypes.js';
|
import type { ClassMap, NamespaceNode } from './classTypes.js';
|
||||||
const spyOn = vi.spyOn;
|
const spyOn = vi.spyOn;
|
||||||
@@ -10,8 +10,9 @@ const abstractCssStyle = 'font-style:italic;';
|
|||||||
|
|
||||||
describe('given a basic class diagram, ', function () {
|
describe('given a basic class diagram, ', function () {
|
||||||
describe('when parsing class definition', function () {
|
describe('when parsing class definition', function () {
|
||||||
|
let classDb: ClassDB;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
classDb.clear();
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
});
|
});
|
||||||
it('should handle classes within namespaces', () => {
|
it('should handle classes within namespaces', () => {
|
||||||
@@ -564,8 +565,9 @@ class C13["With Città foreign language"]
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('when parsing class defined in brackets', function () {
|
describe('when parsing class defined in brackets', function () {
|
||||||
|
let classDb: ClassDB;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
classDb.clear();
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -656,8 +658,9 @@ class C13["With Città foreign language"]
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('when parsing comments', function () {
|
describe('when parsing comments', function () {
|
||||||
|
let classDb: ClassDB;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
classDb.clear();
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -746,8 +749,9 @@ foo()
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('when parsing click statements', function () {
|
describe('when parsing click statements', function () {
|
||||||
|
let classDb: ClassDB;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
classDb.clear();
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
});
|
});
|
||||||
it('should handle href link', function () {
|
it('should handle href link', function () {
|
||||||
@@ -857,8 +861,9 @@ foo()
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('when parsing annotations', function () {
|
describe('when parsing annotations', function () {
|
||||||
|
let classDb: ClassDB;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
classDb.clear();
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -921,8 +926,9 @@ foo()
|
|||||||
|
|
||||||
describe('given a class diagram with members and methods ', function () {
|
describe('given a class diagram with members and methods ', function () {
|
||||||
describe('when parsing members', function () {
|
describe('when parsing members', function () {
|
||||||
|
let classDb: ClassDB;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
classDb.clear();
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -980,8 +986,9 @@ describe('given a class diagram with members and methods ', function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('when parsing method definition', function () {
|
describe('when parsing method definition', function () {
|
||||||
|
let classDb: ClassDB;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
classDb.clear();
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -1067,8 +1074,9 @@ describe('given a class diagram with members and methods ', function () {
|
|||||||
|
|
||||||
describe('given a class diagram with generics, ', function () {
|
describe('given a class diagram with generics, ', function () {
|
||||||
describe('when parsing valid generic classes', function () {
|
describe('when parsing valid generic classes', function () {
|
||||||
|
let classDb: ClassDB;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
classDb.clear();
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -1180,8 +1188,9 @@ namespace space {
|
|||||||
|
|
||||||
describe('given a class diagram with relationships, ', function () {
|
describe('given a class diagram with relationships, ', function () {
|
||||||
describe('when parsing basic relationships', function () {
|
describe('when parsing basic relationships', function () {
|
||||||
|
let classDb: ClassDB;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
classDb.clear();
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -1714,7 +1723,9 @@ class Class2
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('when parsing classDiagram with text labels', () => {
|
describe('when parsing classDiagram with text labels', () => {
|
||||||
|
let classDb: ClassDB;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
parser.yy.clear();
|
parser.yy.clear();
|
||||||
});
|
});
|
||||||
@@ -1897,3 +1908,40 @@ class C13["With Città foreign language"]
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('class db class', () => {
|
||||||
|
let classDb: ClassDB;
|
||||||
|
beforeEach(() => {
|
||||||
|
classDb = new ClassDB();
|
||||||
|
});
|
||||||
|
// This is to ensure that functions used in class JISON are exposed as function from ClassDB
|
||||||
|
it('should have functions used in class JISON as own property', () => {
|
||||||
|
const functionsUsedInParser = [
|
||||||
|
'addRelation',
|
||||||
|
'cleanupLabel',
|
||||||
|
'setAccTitle',
|
||||||
|
'setAccDescription',
|
||||||
|
'addClassesToNamespace',
|
||||||
|
'addNamespace',
|
||||||
|
'setCssClass',
|
||||||
|
'addMembers',
|
||||||
|
'addClass',
|
||||||
|
'setClassLabel',
|
||||||
|
'addAnnotation',
|
||||||
|
'addMember',
|
||||||
|
'addNote',
|
||||||
|
'defineClass',
|
||||||
|
'setDirection',
|
||||||
|
'relationType',
|
||||||
|
'lineType',
|
||||||
|
'setClickEvent',
|
||||||
|
'setTooltip',
|
||||||
|
'setLink',
|
||||||
|
'setCssStyle',
|
||||||
|
] as const satisfies (keyof ClassDB)[];
|
||||||
|
|
||||||
|
for (const fun of functionsUsedInParser) {
|
||||||
|
expect(Object.hasOwn(classDb, fun)).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
@@ -1,13 +1,15 @@
|
|||||||
import type { DiagramDefinition } from '../../diagram-api/types.js';
|
import type { DiagramDefinition } from '../../diagram-api/types.js';
|
||||||
// @ts-ignore: JISON doesn't support types
|
// @ts-ignore: JISON doesn't support types
|
||||||
import parser from './parser/classDiagram.jison';
|
import parser from './parser/classDiagram.jison';
|
||||||
import db from './classDb.js';
|
import { ClassDB } from './classDb.js';
|
||||||
import styles from './styles.js';
|
import styles from './styles.js';
|
||||||
import renderer from './classRenderer-v3-unified.js';
|
import renderer from './classRenderer-v3-unified.js';
|
||||||
|
|
||||||
export const diagram: DiagramDefinition = {
|
export const diagram: DiagramDefinition = {
|
||||||
parser,
|
parser,
|
||||||
db,
|
get db() {
|
||||||
|
return new ClassDB();
|
||||||
|
},
|
||||||
renderer,
|
renderer,
|
||||||
styles,
|
styles,
|
||||||
init: (cnf) => {
|
init: (cnf) => {
|
||||||
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
|
|||||||
cnf.class = {};
|
cnf.class = {};
|
||||||
}
|
}
|
||||||
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
||||||
db.clear();
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@@ -1,8 +1,10 @@
|
|||||||
import { parser } from './classDiagram.jison';
|
import { parser } from './classDiagram.jison';
|
||||||
import classDb from '../classDb.js';
|
import { ClassDB } from '../classDb.js';
|
||||||
|
|
||||||
describe('class diagram', function () {
|
describe('class diagram', function () {
|
||||||
|
let classDb;
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
|
classDb = new ClassDB();
|
||||||
parser.yy = classDb;
|
parser.yy = classDb;
|
||||||
parser.yy.clear();
|
parser.yy.clear();
|
||||||
});
|
});
|
||||||
|
@@ -1,4 +1,5 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
|
import assert from 'node:assert';
|
||||||
|
|
||||||
// -------------------------------------
|
// -------------------------------------
|
||||||
// Mocks and mocking
|
// Mocks and mocking
|
||||||
@@ -69,6 +70,7 @@ import { compile, serialize } from 'stylis';
|
|||||||
import { Diagram } from './Diagram.js';
|
import { Diagram } from './Diagram.js';
|
||||||
import { decodeEntities, encodeEntities } from './utils.js';
|
import { decodeEntities, encodeEntities } from './utils.js';
|
||||||
import { toBase64 } from './utils/base64.js';
|
import { toBase64 } from './utils/base64.js';
|
||||||
|
import { ClassDB } from './diagrams/class/classDb.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @see https://vitest.dev/guide/mocking.html Mock part of a module
|
* @see https://vitest.dev/guide/mocking.html Mock part of a module
|
||||||
@@ -833,4 +835,46 @@ graph TD;A--x|text including URL space|B;`)
|
|||||||
expect(diagram.type).toBe('flowchart-v2');
|
expect(diagram.type).toBe('flowchart-v2');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should not modify db when rendering different diagrams', async () => {
|
||||||
|
const classDiagram1 = await mermaidAPI.getDiagramFromText(
|
||||||
|
`classDiagram
|
||||||
|
direction TB
|
||||||
|
class Student {
|
||||||
|
-idCard : IdCard
|
||||||
|
}
|
||||||
|
class IdCard{
|
||||||
|
-id : int
|
||||||
|
-name : string
|
||||||
|
}
|
||||||
|
class Bike{
|
||||||
|
-id : int
|
||||||
|
-name : string
|
||||||
|
}
|
||||||
|
Student "1" --o "1" IdCard : carries
|
||||||
|
Student "1" --o "1" Bike : rides`
|
||||||
|
);
|
||||||
|
const classDiagram2 = await mermaidAPI.getDiagramFromText(
|
||||||
|
`classDiagram
|
||||||
|
direction LR
|
||||||
|
class Student {
|
||||||
|
-idCard : IdCard
|
||||||
|
}
|
||||||
|
class IdCard{
|
||||||
|
-id : int
|
||||||
|
-name : string
|
||||||
|
}
|
||||||
|
class Bike{
|
||||||
|
-id : int
|
||||||
|
-name : string
|
||||||
|
}
|
||||||
|
Student "1" --o "1" IdCard : carries
|
||||||
|
Student "1" --o "1" Bike : rides`
|
||||||
|
);
|
||||||
|
// Since classDiagram will return new Db object each time, we can compare the db to be different.
|
||||||
|
expect(classDiagram1.db).not.toBe(classDiagram2.db);
|
||||||
|
assert(classDiagram1.db instanceof ClassDB);
|
||||||
|
assert(classDiagram2.db instanceof ClassDB);
|
||||||
|
expect(classDiagram1.db.getDirection()).not.toEqual(classDiagram2.db.getDirection());
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
Reference in New Issue
Block a user