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

Merge from upstream mermaid OS develop

Browse Source
This commit is contained in:
Ashish Jain
2025-01-24 12:47:42 +01:00
parent fb19255f10 c13d988392
commit 0d308fdffe
18 changed files with 1465 additions and 1249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/chilly-years-cheat.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each class diagram

5
.changeset/witty-crews-smell.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
`mermaidAPI.getDiagramFromText()` now returns a new different db for each state diagram

477
packages/mermaid/src/diagrams/class/classDb.ts
View File

@@ -24,23 +24,53 @@ import type {
Interface,
} from './classTypes.js';
import type { Node, Edge } from '../../rendering-util/types.js';
import type { DiagramDB } from '../../diagram-api/types.js';
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 namespaces = new Map<string, NamespaceNode>();
let namespaceCounter = 0;
let functions: any[] = [];
const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
const splitClassNameAndType = function (_id: string) {
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;
private functions: any[] = [];
constructor() {
this.functions.push(this.setupToolTips.bind(this));
this.clear();
// Needed for JISON since it only supports direct properties
this.addRelation = this.addRelation.bind(this);
this.addClassesToNamespace = this.addClassesToNamespace.bind(this);
this.addNamespace = this.addNamespace.bind(this);
this.setCssClass = this.setCssClass.bind(this);
this.addMembers = this.addMembers.bind(this);
this.addClass = this.addClass.bind(this);
this.setClassLabel = this.setClassLabel.bind(this);
this.addAnnotation = this.addAnnotation.bind(this);
this.addMember = this.addMember.bind(this);
this.cleanupLabel = this.cleanupLabel.bind(this);
this.addNote = this.addNote.bind(this);
this.defineClass = this.defineClass.bind(this);
this.setDirection = this.setDirection.bind(this);
this.setLink = this.setLink.bind(this);
this.bindFunctions = this.bindFunctions.bind(this);
this.clear = this.clear.bind(this);
this.setTooltip = this.setTooltip.bind(this);
this.setClickEvent = this.setClickEvent.bind(this);
this.setCssStyle = this.setCssStyle.bind(this);
}
private splitClassNameAndType(_id: string) {
const id = common.sanitizeText(_id, getConfig());
let genericType = '';
let className = id;
@@ -52,37 +82,37 @@ const splitClassNameAndType = function (_id: string) {
}
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());
if (label) {
label = sanitizeText(label);
}
const { className } = splitClassNameAndType(id);
classes.get(className)!.label = label;
classes.get(className)!.text =
`${label}${classes.get(className)!.type ? `<${classes.get(className)!.type}>` : ''}`;
};
const { className } = this.splitClassNameAndType(id);
this.classes.get(className)!.label = label;
this.classes.get(className)!.text =
`${label}${this.classes.get(className)!.type ? `<${this.classes.get(className)!.type}>` : ''}`;
}
/**
/**
* Function called by parser when a node definition has been found.
*
* @param id - Id of the class to add
* @public
*/
export const addClass = function (_id: string) {
public addClass(_id: string) {
const id = common.sanitizeText(_id, getConfig());
const { className, type } = splitClassNameAndType(id);
const { className, type } = this.splitClassNameAndType(id);
// Only add class if not exists
if (classes.has(className)) {
if (this.classes.has(className)) {
return;
}
// alert('Adding class: ' + className);
const name = common.sanitizeText(className, getConfig());
// alert('Adding class after: ' + name);
classes.set(name, {
this.classes.set(name, {
id: name,
type: type,
label: name,
@@ -97,93 +127,93 @@ export const addClass = function (_id: string) {
} as ClassNode);
classCounter++;
};
}
const addInterface = function (label: string, classId: string) {
private addInterface(label: string, classId: string) {
const classInterface: Interface = {
id: `interface${interfaces.length}`,
id: `interface${this.interfaces.length}`,
label,
classId,
};
interfaces.push(classInterface);
};
this.interfaces.push(classInterface);
}
/**
/**
* Function to lookup domId from id in the graph definition.
*
* @param id - class ID to lookup
* @public
*/
export const lookUpDomId = function (_id: string): string {
public lookUpDomId(_id: string): string {
const id = common.sanitizeText(_id, getConfig());
if (classes.has(id)) {
return classes.get(id)!.domId;
if (this.classes.has(id)) {
return this.classes.get(id)!.domId;
}
throw new Error('Class not found: ' + id);
};
}
export const clear = function () {
relations = [];
classes = new Map();
notes = [];
interfaces = [];
functions = [];
functions.push(setupToolTips);
namespaces = new Map();
namespaceCounter = 0;
direction = 'TB';
public clear() {
this.relations = [];
this.classes = new Map();
this.notes = [];
this.interfaces = [];
this.functions = [];
this.functions.push(this.setupToolTips.bind(this));
this.namespaces = new Map();
this.namespaceCounter = 0;
this.direction = 'TB';
commonClear();
};
}
export const getClass = function (id: string): ClassNode {
return classes.get(id)!;
};
public getClass(id: string): ClassNode {
return this.classes.get(id)!;
}
export const getClasses = function (): ClassMap {
return classes;
};
public getClasses(): ClassMap {
return this.classes;
}
export const getRelations = function (): ClassRelation[] {
return relations;
};
public getRelations(): ClassRelation[] {
return this.relations;
}
export const getNotes = function () {
return notes;
};
public getNotes() {
return this.notes;
}
export const addRelation = function (classRelation: ClassRelation) {
public addRelation(classRelation: 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
const invalidTypes = [
relationType.LOLLIPOP,
relationType.AGGREGATION,
relationType.COMPOSITION,
relationType.DEPENDENCY,
relationType.EXTENSION,
this.relationType.LOLLIPOP,
this.relationType.AGGREGATION,
this.relationType.COMPOSITION,
this.relationType.DEPENDENCY,
this.relationType.EXTENSION,
];
if (
classRelation.relation.type1 === relationType.LOLLIPOP &&
classRelation.relation.type1 === this.relationType.LOLLIPOP &&
!invalidTypes.includes(classRelation.relation.type2)
) {
addClass(classRelation.id2);
addInterface(classRelation.id1, classRelation.id2);
classRelation.id1 = `interface${interfaces.length - 1}`;
this.addClass(classRelation.id2);
this.addInterface(classRelation.id1, classRelation.id2);
classRelation.id1 = `interface${this.interfaces.length - 1}`;
} else if (
classRelation.relation.type2 === relationType.LOLLIPOP &&
classRelation.relation.type2 === this.relationType.LOLLIPOP &&
!invalidTypes.includes(classRelation.relation.type1)
) {
addClass(classRelation.id1);
addInterface(classRelation.id2, classRelation.id1);
classRelation.id2 = `interface${interfaces.length - 1}`;
this.addClass(classRelation.id1);
this.addInterface(classRelation.id2, classRelation.id1);
classRelation.id2 = `interface${this.interfaces.length - 1}`;
} else {
addClass(classRelation.id1);
addClass(classRelation.id2);
this.addClass(classRelation.id1);
this.addClass(classRelation.id2);
}
classRelation.id1 = splitClassNameAndType(classRelation.id1).className;
classRelation.id2 = splitClassNameAndType(classRelation.id2).className;
classRelation.id1 = this.splitClassNameAndType(classRelation.id1).className;
classRelation.id2 = this.splitClassNameAndType(classRelation.id2).className;
classRelation.relationTitle1 = common.sanitizeText(
classRelation.relationTitle1.trim(),
@@ -195,10 +225,10 @@ export const addRelation = function (classRelation: ClassRelation) {
getConfig()
);
relations.push(classRelation);
};
this.relations.push(classRelation);
}
/**
/**
* Adds an annotation to the specified class Annotations mark special properties of the given type
* (like 'interface' or 'service')
*
@@ -206,12 +236,12 @@ export const addRelation = function (classRelation: ClassRelation) {
* @param annotation - The name of the annotation without any brackets
* @public
*/
export const addAnnotation = function (className: string, annotation: string) {
const validatedClassName = splitClassNameAndType(className).className;
classes.get(validatedClassName)!.annotations.push(annotation);
};
public addAnnotation(className: string, annotation: string) {
const validatedClassName = this.splitClassNameAndType(className).className;
this.classes.get(validatedClassName)!.annotations.push(annotation);
}
/**
/**
* Adds a member to the specified class
*
* @param className - The class name
@@ -220,11 +250,11 @@ export const addAnnotation = function (className: string, annotation: string) {
* method Otherwise the member will be treated as a normal property
* @public
*/
export const addMember = function (className: string, member: string) {
addClass(className);
public addMember(className: string, member: string) {
this.addClass(className);
const validatedClassName = splitClassNameAndType(className).className;
const theClass = classes.get(validatedClassName)!;
const validatedClassName = this.splitClassNameAndType(className).className;
const theClass = this.classes.get(validatedClassName)!;
if (typeof member === 'string') {
// Member can contain white spaces, we trim them out
@@ -240,60 +270,60 @@ export const addMember = function (className: string, member: string) {
theClass.members.push(new ClassMember(memberString, 'attribute'));
}
}
};
}
export const addMembers = function (className: string, members: string[]) {
public addMembers(className: string, members: string[]) {
if (Array.isArray(members)) {
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 = {
id: `note${notes.length}`,
id: `note${this.notes.length}`,
class: className,
text: text,
};
notes.push(note);
};
this.notes.push(note);
}
export const cleanupLabel = function (label: string) {
public cleanupLabel(label: string) {
if (label.startsWith(':')) {
label = label.substring(1);
}
return sanitizeText(label.trim());
};
}
/**
/**
* Called by parser when assigning cssClass to a class
*
* @param ids - Comma separated list of ids
* @param className - Class to add
*/
export const setCssClass = function (ids: string, className: string) {
ids.split(',').forEach(function (_id) {
public setCssClass(ids: string, className: string) {
ids.split(',').forEach((_id) => {
let id = _id;
if (/\d/.exec(_id[0])) {
id = MERMAID_DOM_ID_PREFIX + id;
}
const classNode = classes.get(id);
const classNode = this.classes.get(id);
if (classNode) {
classNode.cssClasses += ' ' + className;
}
});
};
}
export const defineClass = function (ids: string[], style: string[]) {
public defineClass(ids: string[], style: string[]) {
for (const id of ids) {
let styleClass = styleClasses.get(id);
let styleClass = this.styleClasses.get(id);
if (styleClass === undefined) {
styleClass = { id, styles: [], textStyles: [] };
styleClasses.set(id, styleClass);
this.styleClasses.set(id, styleClass);
}
if (style) {
style.forEach(function (s) {
style.forEach((s) => {
if (/color/.exec(s)) {
const newStyle = s.replace('fill', 'bgFill'); // .replace('color', 'fill');
styleClass.textStyles.push(newStyle);
@@ -302,51 +332,51 @@ export const defineClass = function (ids: string[], style: string[]) {
});
}
classes.forEach((value) => {
this.classes.forEach((value) => {
if (value.cssClasses.includes(id)) {
value.styles.push(...style.flatMap((s) => s.split(',')));
}
});
}
};
}
/**
/**
* Called by parser when a tooltip is found, e.g. a clickable element.
*
* @param ids - Comma separated list of ids
* @param tooltip - Tooltip to add
*/
const setTooltip = function (ids: string, tooltip?: string) {
ids.split(',').forEach(function (id) {
public setTooltip(ids: string, tooltip?: string) {
ids.split(',').forEach((id) => {
if (tooltip !== undefined) {
classes.get(id)!.tooltip = sanitizeText(tooltip);
this.classes.get(id)!.tooltip = sanitizeText(tooltip);
}
});
};
export const getTooltip = function (id: string, namespace?: string) {
if (namespace && namespaces.has(namespace)) {
return namespaces.get(namespace)!.classes.get(id)!.tooltip;
}
return classes.get(id)!.tooltip;
};
public getTooltip(id: string, namespace?: string) {
if (namespace && this.namespaces.has(namespace)) {
return this.namespaces.get(namespace)!.classes.get(id)!.tooltip;
}
/**
return this.classes.get(id)!.tooltip;
}
/**
* 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 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();
ids.split(',').forEach(function (_id) {
ids.split(',').forEach((_id) => {
let id = _id;
if (/\d/.exec(_id[0])) {
id = MERMAID_DOM_ID_PREFIX + id;
}
const theClass = classes.get(id);
const theClass = this.classes.get(id);
if (theClass) {
theClass.link = utils.formatUrl(linkStr, config);
if (config.securityLevel === 'sandbox') {
@@ -358,25 +388,25 @@ export const setLink = function (ids: string, linkStr: string, target: string) {
}
}
});
setCssClass(ids, 'clickable');
};
this.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 functionArgs - Function args the function should be called with
*/
export const setClickEvent = function (ids: string, functionName: string, functionArgs: string) {
ids.split(',').forEach(function (id) {
setClickFunc(id, functionName, functionArgs);
classes.get(id)!.haveCallback = true;
public setClickEvent(ids: string, functionName: string, functionArgs: string) {
ids.split(',').forEach((id) => {
this.setClickFunc(id, functionName, functionArgs);
this.classes.get(id)!.haveCallback = true;
});
setCssClass(ids, 'clickable');
};
this.setCssClass(ids, 'clickable');
}
const setClickFunc = function (_domId: string, functionName: string, functionArgs: string) {
private setClickFunc(_domId: string, functionName: string, functionArgs: string) {
const domId = common.sanitizeText(_domId, getConfig());
const config = getConfig();
if (config.securityLevel !== 'loose') {
@@ -387,8 +417,8 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
}
const id = domId;
if (classes.has(id)) {
const elemId = lookUpDomId(id);
if (this.classes.has(id)) {
const elemId = this.lookUpDomId(id);
let argList: string[] = [];
if (typeof functionArgs === 'string') {
/* Splits functionArgs by ',', ignoring all ',' in double quoted strings */
@@ -409,12 +439,12 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
argList.push(elemId);
}
functions.push(function () {
this.functions.push(() => {
const elem = document.querySelector(`[id="${elemId}"]`);
if (elem !== null) {
elem.addEventListener(
'click',
function () {
() => {
utils.runFunc(functionName, ...argList);
},
false
@@ -422,41 +452,44 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
}
});
}
};
}
export const bindFunctions = function (element: Element) {
functions.forEach(function (fun) {
public bindFunctions(element: Element) {
this.functions.forEach((fun) => {
fun(element);
});
};
}
export const lineType = {
public readonly lineType = {
LINE: 0,
DOTTED_LINE: 1,
};
};
export const relationType = {
public readonly relationType = {
AGGREGATION: 0,
EXTENSION: 1,
COMPOSITION: 2,
DEPENDENCY: 3,
LOLLIPOP: 4,
};
};
const setupToolTips = function (element: Element) {
private readonly setupToolTips = (element: Element) => {
let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
select('.mermaidTooltip');
// @ts-expect-error - Incorrect types
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 nodes = svg.selectAll('g.node');
nodes
.on('mouseover', function () {
const el = select(this);
.on('mouseover', (event: MouseEvent) => {
const el = select(event.currentTarget as HTMLElement);
const title = el.attr('title');
// Don't try to draw a tooltip if no data is provided
if (title === null) {
@@ -473,69 +506,70 @@ const setupToolTips = function (element: Element) {
tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
el.classed('hover', true);
})
.on('mouseout', function () {
.on('mouseout', (event: MouseEvent) => {
tooltipElem.transition().duration(500).style('opacity', 0);
const el = select(this);
const el = select(event.currentTarget as HTMLElement);
el.classed('hover', false);
});
};
functions.push(setupToolTips);
};
let direction = 'TB';
const getDirection = () => direction;
const setDirection = (dir: string) => {
direction = dir;
};
private direction = 'TB';
public getDirection() {
return this.direction;
}
public setDirection(dir: string) {
this.direction = dir;
}
/**
/**
* Function called by parser when a namespace definition has been found.
*
* @param id - Id of the namespace to add
* @public
*/
export const addNamespace = function (id: string) {
if (namespaces.has(id)) {
public addNamespace(id: string) {
if (this.namespaces.has(id)) {
return;
}
namespaces.set(id, {
this.namespaces.set(id, {
id: id,
classes: new Map(),
children: {},
domId: MERMAID_DOM_ID_PREFIX + id + '-' + namespaceCounter,
domId: MERMAID_DOM_ID_PREFIX + id + '-' + this.namespaceCounter,
} as NamespaceNode);
namespaceCounter++;
};
this.namespaceCounter++;
}
const getNamespace = function (name: string): NamespaceNode {
return namespaces.get(name)!;
};
public getNamespace(name: string): NamespaceNode {
return this.namespaces.get(name)!;
}
const getNamespaces = function (): NamespaceMap {
return namespaces;
};
public getNamespaces(): NamespaceMap {
return this.namespaces;
}
/**
/**
* Function called by parser when a namespace definition has been found.
*
* @param id - Id of the namespace to add
* @param classNames - Ids of the class to add
* @public
*/
export const addClassesToNamespace = function (id: string, classNames: string[]) {
if (!namespaces.has(id)) {
public addClassesToNamespace(id: string, classNames: string[]) {
if (!this.namespaces.has(id)) {
return;
}
for (const name of classNames) {
const { className } = splitClassNameAndType(name);
classes.get(className)!.parent = id;
namespaces.get(id)!.classes.set(className, classes.get(className)!);
const { className } = this.splitClassNameAndType(name);
this.classes.get(className)!.parent = id;
this.namespaces.get(id)!.classes.set(className, this.classes.get(className)!);
}
}
};
export const setCssStyle = function (id: string, styles: string[]) {
const thisClass = classes.get(id);
public setCssStyle(id: string, styles: string[]) {
const thisClass = this.classes.get(id);
if (!styles || !thisClass) {
return;
}
@@ -546,15 +580,15 @@ export const setCssStyle = function (id: string, styles: string[]) {
thisClass.styles.push(s);
}
}
};
}
/**
/**
* Gets the arrow marker for a type index
*
* @param type - The type to look for
* @returns The arrow marker
*/
function getArrowMarker(type: number) {
private getArrowMarker(type: number) {
let marker;
switch (type) {
case 0:
@@ -576,15 +610,15 @@ function getArrowMarker(type: number) {
marker = 'none';
}
return marker;
}
}
export const getData = () => {
public getData() {
const nodes: Node[] = [];
const edges: Edge[] = [];
const config = getConfig();
for (const namespaceKey of namespaces.keys()) {
const namespace = namespaces.get(namespaceKey);
for (const namespaceKey of this.namespaces.keys()) {
const namespace = this.namespaces.get(namespaceKey);
if (namespace) {
const node: Node = {
id: namespace.id,
@@ -600,8 +634,8 @@ export const getData = () => {
}
}
for (const classKey of classes.keys()) {
const classNode = classes.get(classKey);
for (const classKey of this.classes.keys()) {
const classNode = this.classes.get(classKey);
if (classNode) {
const node = classNode as unknown as Node;
node.parentId = classNode.parent;
@@ -611,7 +645,7 @@ export const getData = () => {
}
let cnt = 0;
for (const note of notes) {
for (const note of this.notes) {
cnt++;
const noteNode: Node = {
id: note.id,
@@ -629,7 +663,7 @@ export const getData = () => {
};
nodes.push(noteNode);
const noteClassId = classes.get(note.class)?.id ?? '';
const noteClassId = this.classes.get(note.class)?.id ?? '';
if (noteClassId) {
const edge: Edge = {
@@ -651,7 +685,7 @@ export const getData = () => {
}
}
for (const _interface of interfaces) {
for (const _interface of this.interfaces) {
const interfaceNode: Node = {
id: _interface.id,
label: _interface.label,
@@ -664,7 +698,7 @@ export const getData = () => {
}
cnt = 0;
for (const classRelation of relations) {
for (const classRelation of this.relations) {
cnt++;
const edge: Edge = {
id: getEdgeId(classRelation.id1, classRelation.id2, {
@@ -678,9 +712,10 @@ export const getData = () => {
labelpos: 'c',
thickness: 'normal',
classes: 'relation',
arrowTypeStart: getArrowMarker(classRelation.relation.type1),
arrowTypeEnd: getArrowMarker(classRelation.relation.type2),
startLabelRight: classRelation.relationTitle1 === 'none' ? '' : classRelation.relationTitle1,
arrowTypeStart: this.getArrowMarker(classRelation.relation.type1),
arrowTypeEnd: this.getArrowMarker(classRelation.relation.type2),
startLabelRight:
classRelation.relationTitle1 === 'none' ? '' : classRelation.relationTitle1,
endLabelLeft: classRelation.relationTitle2 === 'none' ? '' : classRelation.relationTitle2,
arrowheadStyle: '',
labelStyle: ['display: inline-block'],
@@ -691,46 +726,14 @@ export const getData = () => {
edges.push(edge);
}
return { nodes, edges, other: {}, config, direction: getDirection() };
};
return { nodes, edges, other: {}, config, direction: this.getDirection() };
}
export default {
setAccTitle,
getAccTitle,
getAccDescription,
setAccDescription,
getConfig: () => getConfig().class,
addClass,
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,
};
public setAccTitle = setAccTitle;
public getAccTitle = getAccTitle;
public setAccDescription = setAccDescription;
public getAccDescription = getAccDescription;
public setDiagramTitle = setDiagramTitle;
public getDiagramTitle = getDiagramTitle;
public getConfig = () => getConfig().class;
}

4
packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
View File

@@ -1,9 +1,11 @@
import { parser } from './parser/classDiagram.jison';
import classDb from './classDb.js';
import { ClassDB } from './classDb.js';
describe('class diagram, ', function () {
describe('when parsing data from a classDiagram it', function () {
let classDb;
beforeEach(function () {
classDb = new ClassDB();
parser.yy = classDb;
parser.yy.clear();
});

7
packages/mermaid/src/diagrams/class/classDiagram-v2.ts
View File

@@ -1,13 +1,15 @@
import type { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: JISON doesn't support types
import parser from './parser/classDiagram.jison';
import db from './classDb.js';
import { ClassDB } from './classDb.js';
import styles from './styles.js';
import renderer from './classRenderer-v3-unified.js';
export const diagram: DiagramDefinition = {
parser,
db,
get db() {
return new ClassDB();
},
renderer,
styles,
init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
cnf.class = {};
}
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
db.clear();
},
};

69
packages/mermaid/src/diagrams/class/classDiagram.spec.ts
View File

@@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/unbound-method -- Broken for Vitest mocks, see https://github.com/vitest-dev/eslint-plugin-vitest/pull/286 */
// @ts-expect-error Jison doesn't export types
import { parser } from './parser/classDiagram.jison';
import classDb from './classDb.js';
import { ClassDB } from './classDb.js';
import { vi, describe, it, expect } from 'vitest';
import type { ClassMap, NamespaceNode } from './classTypes.js';
const spyOn = vi.spyOn;
@@ -10,8 +11,9 @@ const abstractCssStyle = 'font-style:italic;';
describe('given a basic class diagram, ', function () {
describe('when parsing class definition', function () {
let classDb: ClassDB;
beforeEach(function () {
classDb.clear();
classDb = new ClassDB();
parser.yy = classDb;
});
it('should handle classes within namespaces', () => {
@@ -564,8 +566,9 @@ class C13["With Città foreign language"]
});
describe('when parsing class defined in brackets', function () {
let classDb: ClassDB;
beforeEach(function () {
classDb.clear();
classDb = new ClassDB();
parser.yy = classDb;
});
@@ -656,8 +659,9 @@ class C13["With Città foreign language"]
});
describe('when parsing comments', function () {
let classDb: ClassDB;
beforeEach(function () {
classDb.clear();
classDb = new ClassDB();
parser.yy = classDb;
});
@@ -746,8 +750,9 @@ foo()
});
describe('when parsing click statements', function () {
let classDb: ClassDB;
beforeEach(function () {
classDb.clear();
classDb = new ClassDB();
parser.yy = classDb;
});
it('should handle href link', function () {
@@ -857,8 +862,9 @@ foo()
});
describe('when parsing annotations', function () {
let classDb: ClassDB;
beforeEach(function () {
classDb.clear();
classDb = new ClassDB();
parser.yy = classDb;
});
@@ -921,8 +927,9 @@ foo()
describe('given a class diagram with members and methods ', function () {
describe('when parsing members', function () {
let classDb: ClassDB;
beforeEach(function () {
classDb.clear();
classDb = new ClassDB();
parser.yy = classDb;
});
@@ -980,8 +987,9 @@ describe('given a class diagram with members and methods ', function () {
});
describe('when parsing method definition', function () {
let classDb: ClassDB;
beforeEach(function () {
classDb.clear();
classDb = new ClassDB();
parser.yy = classDb;
});
@@ -1067,8 +1075,9 @@ describe('given a class diagram with members and methods ', function () {
describe('given a class diagram with generics, ', function () {
describe('when parsing valid generic classes', function () {
let classDb: ClassDB;
beforeEach(function () {
classDb.clear();
classDb = new ClassDB();
parser.yy = classDb;
});
@@ -1180,8 +1189,9 @@ namespace space {
describe('given a class diagram with relationships, ', function () {
describe('when parsing basic relationships', function () {
let classDb: ClassDB;
beforeEach(function () {
classDb.clear();
classDb = new ClassDB();
parser.yy = classDb;
});
@@ -1714,7 +1724,9 @@ class Class2
});
describe('when parsing classDiagram with text labels', () => {
let classDb: ClassDB;
beforeEach(function () {
classDb = new ClassDB();
parser.yy = classDb;
parser.yy.clear();
});
@@ -1897,3 +1909,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);
}
});
});

7
packages/mermaid/src/diagrams/class/classDiagram.ts
View File

@@ -1,13 +1,15 @@
import type { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: JISON doesn't support types
import parser from './parser/classDiagram.jison';
import db from './classDb.js';
import { ClassDB } from './classDb.js';
import styles from './styles.js';
import renderer from './classRenderer-v3-unified.js';
export const diagram: DiagramDefinition = {
parser,
db,
get db() {
return new ClassDB();
},
renderer,
styles,
init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
cnf.class = {};
}
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
db.clear();
},
};

4
packages/mermaid/src/diagrams/class/parser/class.spec.js
View File

@@ -1,8 +1,10 @@
import { parser } from './classDiagram.jison';
import classDb from '../classDb.js';
import { ClassDB } from '../classDb.js';
describe('class diagram', function () {
let classDb;
beforeEach(function () {
classDb = new ClassDB();
parser.yy = classDb;
parser.yy.clear();
});

4
packages/mermaid/src/diagrams/state/parser/state-parser.spec.js
View File

@@ -1,4 +1,4 @@
import stateDb from '../stateDb.js';
import { StateDB } from '../stateDb.js';
import stateDiagram from './stateDiagram.jison';
import { setConfig } from '../../../config.js';
@@ -7,7 +7,9 @@ setConfig({
});
describe('state parser can parse...', () => {
let stateDb;
beforeEach(function () {
stateDb = new StateDB();
stateDiagram.parser.yy = stateDb;
stateDiagram.parser.yy.clear();
});

4
packages/mermaid/src/diagrams/state/parser/state-style.spec.js
View File

@@ -1,4 +1,4 @@
import stateDb from '../stateDb.js';
import { StateDB } from '../stateDb.js';
import stateDiagram from './stateDiagram.jison';
import { setConfig } from '../../../config.js';
@@ -7,7 +7,9 @@ setConfig({
});
describe('ClassDefs and classes when parsing a State diagram', () => {
let stateDb;
beforeEach(function () {
stateDb = new StateDB();
stateDiagram.parser.yy = stateDb;
stateDiagram.parser.yy.clear();
});

12
packages/mermaid/src/diagrams/state/shapes.js
View File

@@ -1,6 +1,6 @@
import { line, curveBasis } from 'd3';
import idCache from './id-cache.js';
import stateDb from './stateDb.js';
import { StateDB } from './stateDb.js';
import utils from '../../utils.js';
import common from '../common/common.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
@@ -414,13 +414,13 @@ let edgeCount = 0;
export const drawEdge = function (elem, path, relation) {
const getRelationType = function (type) {
switch (type) {
case stateDb.relationType.AGGREGATION:
case StateDB.relationType.AGGREGATION:
return 'aggregation';
case stateDb.relationType.EXTENSION:
case StateDB.relationType.EXTENSION:
return 'extension';
case stateDb.relationType.COMPOSITION:
case StateDB.relationType.COMPOSITION:
return 'composition';
case stateDb.relationType.DEPENDENCY:
case StateDB.relationType.DEPENDENCY:
return 'dependency';
}
};
@@ -459,7 +459,7 @@ export const drawEdge = function (elem, path, relation) {
svgPath.attr(
'marker-end',
'url(' + url + '#' + getRelationType(stateDb.relationType.DEPENDENCY) + 'End' + ')'
'url(' + url + '#' + getRelationType(StateDB.relationType.DEPENDENCY) + 'End' + ')'
);
if (relation.title !== undefined) {

470
packages/mermaid/src/diagrams/state/stateDb.js
View File

@@ -1,28 +1,28 @@
import { getConfig } from '../../diagram-api/diagramAPI.js';
import { log } from '../../logger.js';
import { generateId } from '../../utils.js';
import common from '../common/common.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import {
setAccTitle,
getAccTitle,
getAccDescription,
setAccDescription,
clear as commonClear,
setDiagramTitle,
getAccDescription,
getAccTitle,
getDiagramTitle,
setAccDescription,
setAccTitle,
setDiagramTitle,
} from '../common/commonDb.js';
import { dataFetcher, reset as resetDataFetching } from './dataFetcher.js';
import { getDir } from './stateRenderer-v3-unified.js';
import {
DEFAULT_DIAGRAM_DIRECTION,
STMT_STATE,
STMT_RELATION,
STMT_CLASSDEF,
STMT_STYLEDEF,
STMT_APPLYCLASS,
DEFAULT_STATE_TYPE,
DIVIDER_TYPE,
STMT_APPLYCLASS,
STMT_CLASSDEF,
STMT_RELATION,
STMT_STATE,
STMT_STYLEDEF,
} from './stateCommon.js';
const START_NODE = '[*]';
@@ -46,15 +46,6 @@ function newClassesList() {
return new Map();
}
let nodes = [];
let edges = [];
let direction = DEFAULT_DIAGRAM_DIRECTION;
let rootDoc = [];
let classes = newClassesList(); // style classes defined by a classDef
// --------------------------------------
const newDoc = () => {
return {
/** @type {{ id1: string, id2: string, relationTitle: string }[]} */
@@ -63,40 +54,98 @@ const newDoc = () => {
documents: {},
};
};
let documents = {
const clone = (o) => JSON.parse(JSON.stringify(o));
export class StateDB {
constructor() {
this.clear();
// Needed for JISON since it only supports direct properties
this.setRootDoc = this.setRootDoc.bind(this);
this.getDividerId = this.getDividerId.bind(this);
this.setDirection = this.setDirection.bind(this);
this.trimColon = this.trimColon.bind(this);
}
/**
* @private
* @type {Array}
*/
nodes = [];
/**
* @private
* @type {Array}
*/
edges = [];
/**
* @private
* @type {string}
*/
direction = DEFAULT_DIAGRAM_DIRECTION;
/**
* @private
* @type {Array}
*/
rootDoc = [];
/**
* @private
* @type {Map<string, any>}
*/
classes = newClassesList(); // style classes defined by a classDef
/**
* @private
* @type {Object}
*/
documents = {
root: newDoc(),
};
};
let currentDocument = documents.root;
let startEndCount = 0;
let dividerCnt = 0;
/**
* @private
* @type {Object}
*/
currentDocument = this.documents.root;
/**
* @private
* @type {number}
*/
startEndCount = 0;
/**
* @private
* @type {number}
*/
dividerCnt = 0;
export const lineType = {
LINE: 0,
DOTTED_LINE: 1,
};
export const relationType = {
static relationType = {
AGGREGATION: 0,
EXTENSION: 1,
COMPOSITION: 2,
DEPENDENCY: 3,
};
};
const clone = (o) => JSON.parse(JSON.stringify(o));
const setRootDoc = (o) => {
setRootDoc(o) {
log.info('Setting root doc', o);
// rootDoc = { id: 'root', doc: o };
rootDoc = o;
};
this.rootDoc = o;
}
const getRootDoc = () => rootDoc;
getRootDoc() {
return this.rootDoc;
}
const docTranslator = (parent, node, first) => {
/**
* @private
* @param {Object} parent
* @param {Object} node
* @param {boolean} first
*/
docTranslator(parent, node, first) {
if (node.stmt === STMT_RELATION) {
docTranslator(parent, node.state1, true);
docTranslator(parent, node.state2, false);
this.docTranslator(parent, node.state1, true);
this.docTranslator(parent, node.state2, false);
} else {
if (node.stmt === STMT_STATE) {
if (node.id === '[*]') {
@@ -115,7 +164,6 @@ const docTranslator = (parent, node, first) => {
let i;
for (i = 0; i < node.doc.length; i++) {
if (node.doc[i].type === DIVIDER_TYPE) {
// debugger;
const newNode = clone(node.doc[i]);
newNode.doc = clone(currentDoc);
doc.push(newNode);
@@ -137,17 +185,17 @@ const docTranslator = (parent, node, first) => {
node.doc = doc;
}
node.doc.forEach((docNode) => docTranslator(node, docNode, true));
node.doc.forEach((docNode) => this.docTranslator(node, docNode, true));
}
}
};
const getRootDocV2 = () => {
docTranslator({ id: 'root' }, { id: 'root', doc: rootDoc }, true);
return { id: 'root', doc: rootDoc };
}
getRootDocV2() {
this.docTranslator({ id: 'root' }, { id: 'root', doc: this.rootDoc }, true);
return { id: 'root', doc: this.rootDoc };
// Here
};
}
/**
/**
* Convert all of the statements (stmts) that were parsed into states and relationships.
* This is done because a state diagram may have nested sections,
* where each section is a 'document' and has its own set of statements.
@@ -158,7 +206,7 @@ const getRootDocV2 = () => {
*
* @param _doc
*/
const extract = (_doc) => {
extract(_doc) {
// const res = { states: [], relations: [] };
let doc;
if (_doc.doc) {
@@ -171,7 +219,7 @@ const extract = (_doc) => {
// doc = root;
// }
log.info(doc);
clear(true);
this.clear(true);
log.info('Extract initial document:', doc);
@@ -179,7 +227,7 @@ const extract = (_doc) => {
log.warn('Statement', item.stmt);
switch (item.stmt) {
case STMT_STATE:
addState(
this.addState(
item.id.trim(),
item.type,
item.doc,
@@ -191,38 +239,49 @@ const extract = (_doc) => {
);
break;
case STMT_RELATION:
addRelation(item.state1, item.state2, item.description);
this.addRelation(item.state1, item.state2, item.description);
break;
case STMT_CLASSDEF:
addStyleClass(item.id.trim(), item.classes);
this.addStyleClass(item.id.trim(), item.classes);
break;
case STMT_STYLEDEF:
{
const ids = item.id.trim().split(',');
const styles = item.styleClass.split(',');
ids.forEach((id) => {
let foundState = getState(id);
let foundState = this.getState(id);
if (foundState === undefined) {
const trimmedId = id.trim();
addState(trimmedId);
foundState = getState(trimmedId);
this.addState(trimmedId);
foundState = this.getState(trimmedId);
}
foundState.styles = styles.map((s) => s.replace(/;/g, '')?.trim());
});
}
break;
case STMT_APPLYCLASS:
setCssClass(item.id.trim(), item.styleClass);
this.setCssClass(item.id.trim(), item.styleClass);
break;
}
});
const diagramStates = getStates();
const diagramStates = this.getStates();
const config = getConfig();
const look = config.look;
resetDataFetching();
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look, classes, config);
nodes.forEach((node) => {
dataFetcher(
undefined,
this.getRootDocV2(),
diagramStates,
this.nodes,
this.edges,
true,
look,
this.classes,
config
);
this.nodes.forEach((node) => {
if (Array.isArray(node.label)) {
// add the rest as description
node.description = node.label.slice(1);
@@ -237,9 +296,9 @@ const extract = (_doc) => {
node.label = node.label[0];
}
});
};
}
/**
/**
* Function called by parser when a node definition has been found.
*
* @param {null | string} id
@@ -251,7 +310,7 @@ const extract = (_doc) => {
* @param {null | string | string[]} styles - styles to apply to this state. Can be a string (1 style) or an array of styles. If it's just 1 style, convert it to an array of that 1 style.
* @param {null | string | string[]} textStyles - text styles to apply to this state. Can be a string (1 text test) or an array of text styles. If it's just 1 text style, convert it to an array of that 1 text style.
*/
export const addState = function (
addState(
id,
type = DEFAULT_STATE_TYPE,
doc = null,
@@ -260,12 +319,12 @@ export const addState = function (
classes = null,
styles = null,
textStyles = null
) {
) {
const trimmedId = id?.trim();
// add the state if needed
if (!currentDocument.states.has(trimmedId)) {
if (!this.currentDocument.states.has(trimmedId)) {
log.info('Adding state ', trimmedId, descr);
currentDocument.states.set(trimmedId, {
this.currentDocument.states.set(trimmedId, {
id: trimmedId,
descriptions: [],
type,
@@ -276,27 +335,27 @@ export const addState = function (
textStyles: [],
});
} else {
if (!currentDocument.states.get(trimmedId).doc) {
currentDocument.states.get(trimmedId).doc = doc;
if (!this.currentDocument.states.get(trimmedId).doc) {
this.currentDocument.states.get(trimmedId).doc = doc;
}
if (!currentDocument.states.get(trimmedId).type) {
currentDocument.states.get(trimmedId).type = type;
if (!this.currentDocument.states.get(trimmedId).type) {
this.currentDocument.states.get(trimmedId).type = type;
}
}
if (descr) {
log.info('Setting state description', trimmedId, descr);
if (typeof descr === 'string') {
addDescription(trimmedId, descr.trim());
this.addDescription(trimmedId, descr.trim());
}
if (typeof descr === 'object') {
descr.forEach((des) => addDescription(trimmedId, des.trim()));
descr.forEach((des) => this.addDescription(trimmedId, des.trim()));
}
}
if (note) {
const doc2 = currentDocument.states.get(trimmedId);
const doc2 = this.currentDocument.states.get(trimmedId);
doc2.note = note;
doc2.note.text = common.sanitizeText(doc2.note.text, getConfig());
}
@@ -304,123 +363,126 @@ export const addState = function (
if (classes) {
log.info('Setting state classes', trimmedId, classes);
const classesList = typeof classes === 'string' ? [classes] : classes;
classesList.forEach((cssClass) => setCssClass(trimmedId, cssClass.trim()));
classesList.forEach((cssClass) => this.setCssClass(trimmedId, cssClass.trim()));
}
if (styles) {
log.info('Setting state styles', trimmedId, styles);
const stylesList = typeof styles === 'string' ? [styles] : styles;
stylesList.forEach((style) => setStyle(trimmedId, style.trim()));
stylesList.forEach((style) => this.setStyle(trimmedId, style.trim()));
}
if (textStyles) {
log.info('Setting state styles', trimmedId, styles);
const textStylesList = typeof textStyles === 'string' ? [textStyles] : textStyles;
textStylesList.forEach((textStyle) => setTextStyle(trimmedId, textStyle.trim()));
textStylesList.forEach((textStyle) => this.setTextStyle(trimmedId, textStyle.trim()));
}
}
};
export const clear = function (saveCommon) {
nodes = [];
edges = [];
documents = {
clear(saveCommon) {
this.nodes = [];
this.edges = [];
this.documents = {
root: newDoc(),
};
currentDocument = documents.root;
this.currentDocument = this.documents.root;
// number of start and end nodes; used to construct ids
startEndCount = 0;
classes = newClassesList();
this.startEndCount = 0;
this.classes = newClassesList();
if (!saveCommon) {
commonClear();
}
};
}
export const getState = function (id) {
return currentDocument.states.get(id);
};
getState(id) {
return this.currentDocument.states.get(id);
}
getStates() {
return this.currentDocument.states;
}
logDocuments() {
log.info('Documents = ', this.documents);
}
getRelations() {
return this.currentDocument.relations;
}
export const getStates = function () {
return currentDocument.states;
};
export const logDocuments = function () {
log.info('Documents = ', documents);
};
export const getRelations = function () {
return currentDocument.relations;
};
/**
/**
* If the id is a start node ( [*] ), then return a new id constructed from
* the start node name and the current start node count.
* else return the given id
*
* @param {string} id
* @returns {string} - the id (original or constructed)
* @private
*/
function startIdIfNeeded(id = '') {
startIdIfNeeded(id = '') {
let fixedId = id;
if (id === START_NODE) {
startEndCount++;
fixedId = `${START_TYPE}${startEndCount}`;
this.startEndCount++;
fixedId = `${START_TYPE}${this.startEndCount}`;
}
return fixedId;
}
}
/**
/**
* If the id is a start node ( [*] ), then return the start type ('start')
* else return the given type
*
* @param {string} id
* @param {string} type
* @returns {string} - the type that should be used
* @private
*/
function startTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
startTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
return id === START_NODE ? START_TYPE : type;
}
}
/**
/**
* If the id is an end node ( [*] ), then return a new id constructed from
* the end node name and the current start_end node count.
* else return the given id
*
* @param {string} id
* @returns {string} - the id (original or constructed)
* @private
*/
function endIdIfNeeded(id = '') {
endIdIfNeeded(id = '') {
let fixedId = id;
if (id === END_NODE) {
startEndCount++;
fixedId = `${END_TYPE}${startEndCount}`;
this.startEndCount++;
fixedId = `${END_TYPE}${this.startEndCount}`;
}
return fixedId;
}
}
/**
/**
* If the id is an end node ( [*] ), then return the end type
* else return the given type
*
* @param {string} id
* @param {string} type
* @returns {string} - the type that should be used
* @private
*/
function endTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
endTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
return id === END_NODE ? END_TYPE : type;
}
}
/**
/**
*
* @param item1
* @param item2
* @param relationTitle
*/
export function addRelationObjs(item1, item2, relationTitle) {
let id1 = startIdIfNeeded(item1.id.trim());
let type1 = startTypeIfNeeded(item1.id.trim(), item1.type);
let id2 = startIdIfNeeded(item2.id.trim());
let type2 = startTypeIfNeeded(item2.id.trim(), item2.type);
addRelationObjs(item1, item2, relationTitle) {
let id1 = this.startIdIfNeeded(item1.id.trim());
let type1 = this.startTypeIfNeeded(item1.id.trim(), item1.type);
let id2 = this.startIdIfNeeded(item2.id.trim());
let type2 = this.startTypeIfNeeded(item2.id.trim(), item2.type);
addState(
this.addState(
id1,
type1,
item1.doc,
@@ -430,7 +492,7 @@ export function addRelationObjs(item1, item2, relationTitle) {
item1.styles,
item1.textStyles
);
addState(
this.addState(
id2,
type2,
item2.doc,
@@ -441,71 +503,71 @@ export function addRelationObjs(item1, item2, relationTitle) {
item2.textStyles
);
currentDocument.relations.push({
this.currentDocument.relations.push({
id1,
id2,
relationTitle: common.sanitizeText(relationTitle, getConfig()),
});
}
}
/**
/**
* Add a relation between two items. The items may be full objects or just the string id of a state.
*
* @param {string | object} item1
* @param {string | object} item2
* @param {string} title
*/
export const addRelation = function (item1, item2, title) {
addRelation(item1, item2, title) {
if (typeof item1 === 'object') {
addRelationObjs(item1, item2, title);
this.addRelationObjs(item1, item2, title);
} else {
const id1 = startIdIfNeeded(item1.trim());
const type1 = startTypeIfNeeded(item1);
const id2 = endIdIfNeeded(item2.trim());
const type2 = endTypeIfNeeded(item2);
const id1 = this.startIdIfNeeded(item1.trim());
const type1 = this.startTypeIfNeeded(item1);
const id2 = this.endIdIfNeeded(item2.trim());
const type2 = this.endTypeIfNeeded(item2);
addState(id1, type1);
addState(id2, type2);
currentDocument.relations.push({
this.addState(id1, type1);
this.addState(id2, type2);
this.currentDocument.relations.push({
id1,
id2,
title: common.sanitizeText(title, getConfig()),
});
}
};
}
export const addDescription = function (id, descr) {
const theState = currentDocument.states.get(id);
addDescription(id, descr) {
const theState = this.currentDocument.states.get(id);
const _descr = descr.startsWith(':') ? descr.replace(':', '').trim() : descr;
theState.descriptions.push(common.sanitizeText(_descr, getConfig()));
};
}
export const cleanupLabel = function (label) {
cleanupLabel(label) {
if (label.substring(0, 1) === ':') {
return label.substr(2).trim();
} else {
return label.trim();
}
};
}
const getDividerId = () => {
dividerCnt++;
return 'divider-id-' + dividerCnt;
};
getDividerId() {
this.dividerCnt++;
return 'divider-id-' + this.dividerCnt;
}
/**
/**
* Called when the parser comes across a (style) class definition
* @example classDef my-style fill:#f96;
*
* @param {string} id - the id of this (style) class
* @param {string | null} styleAttributes - the string with 1 or more style attributes (each separated by a comma)
*/
export const addStyleClass = function (id, styleAttributes = '') {
addStyleClass(id, styleAttributes = '') {
// create a new style class object with this id
if (!classes.has(id)) {
classes.set(id, { id: id, styles: [], textStyles: [] }); // This is a classDef
if (!this.classes.has(id)) {
this.classes.set(id, { id: id, styles: [], textStyles: [] }); // This is a classDef
}
const foundClass = classes.get(id);
const foundClass = this.classes.get(id);
if (styleAttributes !== undefined && styleAttributes !== null) {
styleAttributes.split(STYLECLASS_SEP).forEach((attrib) => {
// remove any trailing ;
@@ -520,17 +582,17 @@ export const addStyleClass = function (id, styleAttributes = '') {
foundClass.styles.push(fixedAttrib);
});
}
};
}
/**
/**
* Return all of the style classes
* @returns {{} | any | classes}
*/
export const getClasses = function () {
return classes;
};
getClasses() {
return this.classes;
}
/**
/**
* Add a (style) class or css class to a state with the given id.
* If the state isn't already in the list of known states, add it.
* Might be called by parser when a style class or CSS class should be applied to a state
@@ -538,19 +600,19 @@ export const getClasses = function () {
* @param {string | string[]} itemIds The id or a list of ids of the item(s) to apply the css class to
* @param {string} cssClassName CSS class name
*/
export const setCssClass = function (itemIds, cssClassName) {
itemIds.split(',').forEach(function (id) {
let foundState = getState(id);
setCssClass(itemIds, cssClassName) {
itemIds.split(',').forEach((id) => {
let foundState = this.getState(id);
if (foundState === undefined) {
const trimmedId = id.trim();
addState(trimmedId);
foundState = getState(trimmedId);
this.addState(trimmedId);
foundState = this.getState(trimmedId);
}
foundState.classes.push(cssClassName);
});
};
}
/**
/**
* Add a style to a state with the given id.
* @example style stateId fill:#f9f,stroke:#333,stroke-width:4px
* where 'style' is the keyword
@@ -560,67 +622,55 @@ export const setCssClass = function (itemIds, cssClassName) {
* @param itemId The id of item to apply the style to
* @param styleText - the text of the attributes for the style
*/
export const setStyle = function (itemId, styleText) {
const item = getState(itemId);
setStyle(itemId, styleText) {
const item = this.getState(itemId);
if (item !== undefined) {
item.styles.push(styleText);
}
};
}
/**
/**
* Add a text style to a state with the given id
*
* @param itemId The id of item to apply the css class to
* @param cssClassName CSS class name
*/
export const setTextStyle = function (itemId, cssClassName) {
const item = getState(itemId);
setTextStyle(itemId, cssClassName) {
const item = this.getState(itemId);
if (item !== undefined) {
item.textStyles.push(cssClassName);
}
};
}
const getDirection = () => direction;
const setDirection = (dir) => {
direction = dir;
};
getDirection() {
return this.direction;
}
setDirection(dir) {
this.direction = dir;
}
const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());
trimColon(str) {
return str && str[0] === ':' ? str.substr(1).trim() : str.trim();
}
export const getData = () => {
getData() {
const config = getConfig();
return { nodes, edges, other: {}, config, direction: getDir(getRootDocV2()) };
};
return {
nodes: this.nodes,
edges: this.edges,
other: {},
config,
direction: getDir(this.getRootDocV2()),
};
}
export default {
getConfig: () => getConfig().state,
getData,
addState,
clear,
getState,
getStates,
getRelations,
getClasses,
getDirection,
addRelation,
getDividerId,
setDirection,
cleanupLabel,
lineType,
relationType,
logDocuments,
getRootDoc,
setRootDoc,
getRootDocV2,
extract,
trimColon,
getAccTitle,
setAccTitle,
getAccDescription,
setAccDescription,
addStyleClass,
setCssClass,
addDescription,
setDiagramTitle,
getDiagramTitle,
};
getConfig() {
return getConfig().state;
}
getAccTitle = getAccTitle;
setAccTitle = setAccTitle;
getAccDescription = getAccDescription;
setAccDescription = setAccDescription;
setDiagramTitle = setDiagramTitle;
getDiagramTitle = getDiagramTitle;
}

30
packages/mermaid/src/diagrams/state/stateDb.spec.js
View File

@@ -1,8 +1,9 @@
import stateDb from './stateDb.js';
import { StateDB } from './stateDb.js';
describe('State Diagram stateDb', () => {
let stateDb;
beforeEach(() => {
stateDb.clear();
stateDb = new StateDB();
});
describe('addStyleClass', () => {
@@ -20,8 +21,9 @@ describe('State Diagram stateDb', () => {
});
describe('addDescription to a state', () => {
let stateDb;
beforeEach(() => {
stateDb.clear();
stateDb = new StateDB();
stateDb.addState('state1');
});
@@ -73,3 +75,25 @@ describe('State Diagram stateDb', () => {
});
});
});
describe('state db class', () => {
let stateDb;
beforeEach(() => {
stateDb = new StateDB();
});
// This is to ensure that functions used in state JISON are exposed as function from StateDb
it('should have functions used in flow JISON as own property', () => {
const functionsUsedInParser = [
'setRootDoc',
'trimColon',
'getDividerId',
'setAccTitle',
'setAccDescription',
'setDirection',
];
for (const fun of functionsUsedInParser) {
expect(Object.hasOwn(stateDb, fun)).toBe(true);
}
});
});

4
packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js
View File

@@ -1,11 +1,13 @@
import { parser } from './parser/stateDiagram.jison';
import stateDb from './stateDb.js';
import { StateDB } from './stateDb.js';
import stateDiagram from './parser/stateDiagram.jison';
describe('state diagram V2, ', function () {
// TODO - these examples should be put into ./parser/stateDiagram.spec.js
describe('when parsing an info graph it', function () {
let stateDb;
beforeEach(function () {
stateDb = new StateDB();
parser.yy = stateDb;
stateDiagram.parser.yy = stateDb;
stateDiagram.parser.yy.clear();

7
packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
View File

@@ -1,13 +1,15 @@
import type { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: JISON doesn't support types
import parser from './parser/stateDiagram.jison';
import db from './stateDb.js';
import { StateDB } from './stateDb.js';
import styles from './styles.js';
import renderer from './stateRenderer-v3-unified.js';
export const diagram: DiagramDefinition = {
parser,
db,
get db() {
return new StateDB();
},
renderer,
styles,
init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
cnf.state = {};
}
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
db.clear();
},
};

4
packages/mermaid/src/diagrams/state/stateDiagram.spec.js
View File

@@ -1,9 +1,11 @@
import { parser } from './parser/stateDiagram.jison';
import stateDb from './stateDb.js';
import { StateDB } from './stateDb.js';
describe('state diagram, ', function () {
describe('when parsing an info graph it', function () {
let stateDb;
beforeEach(function () {
stateDb = new StateDB();
parser.yy = stateDb;
});

7
packages/mermaid/src/diagrams/state/stateDiagram.ts
View File

@@ -1,13 +1,15 @@
import type { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: JISON doesn't support types
import parser from './parser/stateDiagram.jison';
import db from './stateDb.js';
import { StateDB } from './stateDb.js';
import styles from './styles.js';
import renderer from './stateRenderer.js';
export const diagram: DiagramDefinition = {
parser,
db,
get db() {
return new StateDB();
},
renderer,
styles,
init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
cnf.state = {};
}
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
db.clear();
},
};

104
packages/mermaid/src/mermaidAPI.spec.ts
View File

@@ -1,4 +1,4 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { assert, beforeEach, describe, expect, it, vi } from 'vitest';
// -------------------------------------
// Mocks and mocking
@@ -69,6 +69,8 @@ import { compile, serialize } from 'stylis';
import { Diagram } from './Diagram.js';
import { decodeEntities, encodeEntities } from './utils.js';
import { toBase64 } from './utils/base64.js';
import { ClassDB } from './diagrams/class/classDb.js';
import { StateDB } from './diagrams/state/stateDb.js';
import { FlowDB } from './diagrams/flowchart/flowDb.js';
/**
@@ -853,40 +855,102 @@ graph TD;A--x|text including URL space|B;`
});
it('should not modify db when rendering different diagrams', async () => {
const stateDiagram1 = await mermaidAPI.getDiagramFromText(
`stateDiagram
direction LR
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`
);
const stateDiagram2 = await mermaidAPI.getDiagramFromText(
`stateDiagram
direction TB
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`
);
// Since stateDiagram will return new Db object each time, we can compare the db to be different.
expect(stateDiagram1.db).not.toBe(stateDiagram2.db);
assert(stateDiagram1.db instanceof StateDB);
assert(stateDiagram2.db instanceof StateDB);
expect(stateDiagram1.db.getDirection()).not.toEqual(stateDiagram2.db.getDirection());
const flowDiagram1 = await mermaidAPI.getDiagramFromText(
`flowchart LR
A -- text --> B -- text2 --> C`
);
const flwoDiagram2 = await mermaidAPI.getDiagramFromText(
const flowDiagram2 = await mermaidAPI.getDiagramFromText(
`flowchart TD
A -- text --> B -- text2 --> C`
);
// Since flowDiagram will return new Db object each time, we can compare the db to be different.
expect(flowDiagram1.db).not.toBe(flwoDiagram2.db);
expect(flowDiagram1.db).not.toBe(flowDiagram2.db);
assert(flowDiagram1.db instanceof FlowDB);
assert(flwoDiagram2.db instanceof FlowDB);
expect(flowDiagram1.db.getDirection()).not.toEqual(flwoDiagram2.db.getDirection());
assert(flowDiagram2.db instanceof FlowDB);
expect(flowDiagram1.db.getDirection()).not.toEqual(flowDiagram2.db.getDirection());
const classDiagram1 = await mermaidAPI.getDiagramFromText(
`stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`
`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(
`stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`
`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());
const sequenceDiagram1 = await mermaidAPI.getDiagramFromText(
`sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!`
);
const sequenceDiagram2 = await mermaidAPI.getDiagramFromText(
`sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!`
);
// Since sequenceDiagram will return same Db object each time, we can compare the db to be same.
expect(classDiagram1.db).toBe(classDiagram2.db);
expect(sequenceDiagram1.db).toBe(sequenceDiagram2.db);
});
});