mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-06 00:56:42 +02:00
Update erDb to use class to wrap data
This commit is contained in:
yari-dewalt
@@ -2,7 +2,6 @@ import { log } from '../../logger.js';
|
||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||
import type { Edge, Node } from '../../rendering-util/types.js';
|
||||
import type { EntityNode, Attribute, Relationship, EntityClass, RelSpec } from './erTypes.js';
|
||||
|
||||
import {
|
||||
setAccTitle,
|
||||
getAccTitle,
|
||||
@@ -13,13 +12,15 @@ import {
|
||||
getDiagramTitle,
|
||||
} from '../common/commonDb.js';
|
||||
import { getEdgeId } from '../../utils.js';
|
||||
import type { DiagramDB } from '../../diagram-api/types.js';
|
||||
|
||||
let entities = new Map<string, EntityNode>();
|
||||
let relationships: Relationship[] = [];
|
||||
let classes = new Map<string, EntityClass>();
|
||||
let direction = 'TB';
|
||||
export class ErDB implements DiagramDB {
|
||||
private entities = new Map<string, EntityNode>();
|
||||
private relationships: Relationship[] = [];
|
||||
private classes = new Map<string, EntityClass>();
|
||||
private direction = 'TB';
|
||||
|
||||
const Cardinality = {
|
||||
private Cardinality = {
|
||||
ZERO_OR_ONE: 'ZERO_OR_ONE',
|
||||
ZERO_OR_MORE: 'ZERO_OR_MORE',
|
||||
ONE_OR_MORE: 'ONE_OR_MORE',
|
||||
@@ -27,46 +28,64 @@ const Cardinality = {
|
||||
MD_PARENT: 'MD_PARENT',
|
||||
};
|
||||
|
||||
const Identification = {
|
||||
private Identification = {
|
||||
NON_IDENTIFYING: 'NON_IDENTIFYING',
|
||||
IDENTIFYING: 'IDENTIFYING',
|
||||
};
|
||||
|
||||
constructor() {
|
||||
this.clear();
|
||||
this.addEntity = this.addEntity.bind(this);
|
||||
this.addAttributes = this.addAttributes.bind(this);
|
||||
this.addRelationship = this.addRelationship.bind(this);
|
||||
this.setDirection = this.setDirection.bind(this);
|
||||
this.addCssStyles = this.addCssStyles.bind(this);
|
||||
this.addClass = this.addClass.bind(this);
|
||||
this.setClass = this.setClass.bind(this);
|
||||
this.setAccTitle = this.setAccTitle.bind(this);
|
||||
this.setAccDescription = this.setAccDescription.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add entity
|
||||
* @param name - The name of the entity
|
||||
* @param alias - The alias of the entity
|
||||
*/
|
||||
const addEntity = function (name: string, alias = ''): EntityNode {
|
||||
if (!entities.has(name)) {
|
||||
entities.set(name, {
|
||||
id: `entity-${name}-${entities.size}`,
|
||||
public addEntity(name: string, alias = ''): EntityNode {
|
||||
if (!this.entities.has(name)) {
|
||||
this.entities.set(name, {
|
||||
id: `entity-${name}-${this.entities.size}`,
|
||||
label: name,
|
||||
attributes: [],
|
||||
alias,
|
||||
shape: 'erBox',
|
||||
look: getConfig().look || 'default',
|
||||
look: getConfig().look ?? 'default',
|
||||
cssClasses: 'default',
|
||||
cssStyles: [],
|
||||
});
|
||||
log.info('Added new entity :', name);
|
||||
} else if (!entities.get(name)?.alias && alias) {
|
||||
entities.get(name)!.alias = alias;
|
||||
} else if (!this.entities.get(name)?.alias && alias) {
|
||||
this.entities.get(name)!.alias = alias;
|
||||
log.info(`Add alias '${alias}' to entity '${name}'`);
|
||||
}
|
||||
|
||||
return entities.get(name)!;
|
||||
};
|
||||
return this.entities.get(name)!;
|
||||
}
|
||||
|
||||
const getEntity = function (name: string) {
|
||||
return entities.get(name);
|
||||
};
|
||||
public getEntity(name: string) {
|
||||
return this.entities.get(name);
|
||||
}
|
||||
|
||||
const getEntities = () => entities;
|
||||
public getEntities() {
|
||||
return this.entities;
|
||||
}
|
||||
|
||||
const getClasses = () => classes;
|
||||
public getClasses() {
|
||||
return this.classes;
|
||||
}
|
||||
|
||||
const addAttributes = function (entityName: string, attribs: Attribute[]) {
|
||||
const entity = addEntity(entityName); // May do nothing (if entity has already been added)
|
||||
public addAttributes(entityName: string, attribs: Attribute[]) {
|
||||
const entity = this.addEntity(entityName); // May do nothing (if entity has already been added)
|
||||
|
||||
// Process attribs in reverse order due to effect of recursive construction (last attribute is first)
|
||||
let i;
|
||||
@@ -80,7 +99,7 @@ const addAttributes = function (entityName: string, attribs: Attribute[]) {
|
||||
entity.attributes.push(attribs[i]);
|
||||
log.debug('Added attribute ', attribs[i].name);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a relationship
|
||||
@@ -90,9 +109,9 @@ const addAttributes = function (entityName: string, attribs: Attribute[]) {
|
||||
* @param entB - The second entity in the relationship
|
||||
* @param rSpec - The details of the relationship between the two entities
|
||||
*/
|
||||
const addRelationship = function (entA: string, rolA: string, entB: string, rSpec: RelSpec) {
|
||||
const entityA = entities.get(entA);
|
||||
const entityB = entities.get(entB);
|
||||
public addRelationship(entA: string, rolA: string, entB: string, rSpec: RelSpec) {
|
||||
const entityA = this.entities.get(entA);
|
||||
const entityB = this.entities.get(entB);
|
||||
if (!entityA || !entityB) {
|
||||
return;
|
||||
}
|
||||
@@ -104,41 +123,106 @@ const addRelationship = function (entA: string, rolA: string, entB: string, rSpe
|
||||
relSpec: rSpec,
|
||||
};
|
||||
|
||||
relationships.push(rel);
|
||||
this.relationships.push(rel);
|
||||
log.debug('Added new relationship :', rel);
|
||||
};
|
||||
}
|
||||
|
||||
const getRelationships = () => relationships;
|
||||
public getRelationships() {
|
||||
return this.relationships;
|
||||
}
|
||||
|
||||
export const getDirection = () => direction;
|
||||
const setDirection = (dir: string) => {
|
||||
direction = dir;
|
||||
};
|
||||
public getDirection() {
|
||||
return this.direction;
|
||||
}
|
||||
|
||||
const clear = function () {
|
||||
entities = new Map();
|
||||
classes = new Map();
|
||||
relationships = [];
|
||||
public setDirection(dir: string) {
|
||||
this.direction = dir;
|
||||
}
|
||||
|
||||
private getCompiledStyles(classDefs: string[]) {
|
||||
let compiledStyles: string[] = [];
|
||||
for (const customClass of classDefs) {
|
||||
const cssClass = this.classes.get(customClass);
|
||||
if (cssClass?.styles) {
|
||||
compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])].map((s) => s.trim());
|
||||
}
|
||||
if (cssClass?.textStyles) {
|
||||
compiledStyles = [...compiledStyles, ...(cssClass.textStyles ?? [])].map((s) => s.trim());
|
||||
}
|
||||
}
|
||||
return compiledStyles;
|
||||
}
|
||||
|
||||
public addCssStyles(ids: string[], styles: string[]) {
|
||||
for (const id of ids) {
|
||||
const entity = this.entities.get(id);
|
||||
if (!styles || !entity) {
|
||||
return;
|
||||
}
|
||||
for (const style of styles) {
|
||||
entity.cssStyles!.push(style);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public addClass(ids: string[], style: string[]) {
|
||||
ids.forEach((id) => {
|
||||
let classNode = this.classes.get(id);
|
||||
if (classNode === undefined) {
|
||||
classNode = { id, styles: [], textStyles: [] };
|
||||
this.classes.set(id, classNode);
|
||||
}
|
||||
|
||||
if (style) {
|
||||
style.forEach(function (s) {
|
||||
if (/color/.exec(s)) {
|
||||
const newStyle = s.replace('fill', 'bgFill');
|
||||
classNode.textStyles.push(newStyle);
|
||||
}
|
||||
classNode.styles.push(s);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public setClass(ids: string[], classNames: string[]) {
|
||||
for (const id of ids) {
|
||||
const entity = this.entities.get(id);
|
||||
if (entity) {
|
||||
for (const className of classNames) {
|
||||
entity.cssClasses += ' ' + className;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public clear() {
|
||||
this.entities = new Map();
|
||||
this.classes = new Map();
|
||||
this.relationships = [];
|
||||
commonClear();
|
||||
};
|
||||
}
|
||||
|
||||
export const getData = function () {
|
||||
public getData() {
|
||||
const nodes: Node[] = [];
|
||||
const edges: Edge[] = [];
|
||||
const config = getConfig();
|
||||
|
||||
for (const entityKey of entities.keys()) {
|
||||
const entityNode = entities.get(entityKey);
|
||||
for (const entityKey of this.entities.keys()) {
|
||||
const entityNode = this.entities.get(entityKey);
|
||||
if (entityNode) {
|
||||
entityNode.cssCompiledStyles = getCompiledStyles(entityNode.cssClasses!.split(' '));
|
||||
entityNode.cssCompiledStyles = this.getCompiledStyles(entityNode.cssClasses!.split(' '));
|
||||
nodes.push(entityNode as unknown as Node);
|
||||
}
|
||||
}
|
||||
|
||||
let count = 0;
|
||||
for (const relationship of relationships) {
|
||||
for (const relationship of this.relationships) {
|
||||
const edge: Edge = {
|
||||
id: getEdgeId(relationship.entityA, relationship.entityB, { prefix: 'id', counter: count++ }),
|
||||
id: getEdgeId(relationship.entityA, relationship.entityB, {
|
||||
prefix: 'id',
|
||||
counter: count++,
|
||||
}),
|
||||
type: 'normal',
|
||||
start: relationship.entityA,
|
||||
end: relationship.entityB,
|
||||
@@ -154,87 +238,13 @@ export const getData = function () {
|
||||
edges.push(edge);
|
||||
}
|
||||
return { nodes, edges, other: {}, config, direction: 'TB' };
|
||||
};
|
||||
|
||||
export const addCssStyles = function (ids: string[], styles: string[]) {
|
||||
for (const id of ids) {
|
||||
const entity = entities.get(id);
|
||||
if (!styles || !entity) {
|
||||
return;
|
||||
}
|
||||
for (const style of styles) {
|
||||
entity.cssStyles!.push(style);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const addClass = function (ids: string[], style: string[]) {
|
||||
ids.forEach(function (id) {
|
||||
let classNode = classes.get(id);
|
||||
if (classNode === undefined) {
|
||||
classNode = { id, styles: [], textStyles: [] };
|
||||
classes.set(id, classNode);
|
||||
}
|
||||
|
||||
if (style) {
|
||||
style.forEach(function (s) {
|
||||
if (/color/.exec(s)) {
|
||||
const newStyle = s.replace('fill', 'bgFill');
|
||||
classNode.textStyles.push(newStyle);
|
||||
public setAccTitle = setAccTitle;
|
||||
public getAccTitle = getAccTitle;
|
||||
public setAccDescription = setAccDescription;
|
||||
public getAccDescription = getAccDescription;
|
||||
public setDiagramTitle = setDiagramTitle;
|
||||
public getDiagramTitle = getDiagramTitle;
|
||||
public getConfig = () => getConfig().er;
|
||||
}
|
||||
classNode.styles.push(s);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const setClass = function (ids: string[], classNames: string[]) {
|
||||
for (const id of ids) {
|
||||
const entity = entities.get(id);
|
||||
if (entity) {
|
||||
for (const className of classNames) {
|
||||
entity.cssClasses += ' ' + className;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function getCompiledStyles(classDefs: string[]) {
|
||||
let compiledStyles: string[] = [];
|
||||
for (const customClass of classDefs) {
|
||||
const cssClass = classes.get(customClass);
|
||||
if (cssClass?.styles) {
|
||||
compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])].map((s) => s.trim());
|
||||
}
|
||||
if (cssClass?.textStyles) {
|
||||
compiledStyles = [...compiledStyles, ...(cssClass.textStyles ?? [])].map((s) => s.trim());
|
||||
}
|
||||
}
|
||||
return compiledStyles;
|
||||
}
|
||||
|
||||
export default {
|
||||
Cardinality,
|
||||
Identification,
|
||||
getConfig: () => getConfig().er,
|
||||
addEntity,
|
||||
addAttributes,
|
||||
getEntities,
|
||||
getEntity,
|
||||
getClasses,
|
||||
addRelationship,
|
||||
getRelationships,
|
||||
clear,
|
||||
getDirection,
|
||||
setDirection,
|
||||
setAccTitle,
|
||||
getAccTitle,
|
||||
setAccDescription,
|
||||
getAccDescription,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
getData,
|
||||
addCssStyles,
|
||||
addClass,
|
||||
setClass,
|
||||
};
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
// @ts-ignore: TODO: Fix ts errors
|
||||
import erParser from './parser/erDiagram.jison';
|
||||
import erDb from './erDb.js';
|
||||
import { ErDB } from './erDb.js';
|
||||
import erRenderer from './erRenderer-unified.js';
|
||||
import erStyles from './styles.js';
|
||||
|
||||
export const diagram = {
|
||||
parser: erParser,
|
||||
db: erDb,
|
||||
get db() {
|
||||
return new ErDB();
|
||||
},
|
||||
renderer: erRenderer,
|
||||
styles: erStyles,
|
||||
};
|
||||
|
||||
@@ -4,7 +4,6 @@ import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js
|
||||
import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
|
||||
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
|
||||
import type { LayoutData } from '../../rendering-util/types.js';
|
||||
import { getDirection } from './erDb.js';
|
||||
import utils from '../../utils.js';
|
||||
import { select } from 'd3';
|
||||
|
||||
@@ -26,7 +25,7 @@ export const draw = async function (text: string, id: string, _version: string,
|
||||
// Workaround as when rendering and setting up the graph it uses flowchart spacing before data4Layout spacing?
|
||||
data4Layout.config.flowchart!.nodeSpacing = conf?.nodeSpacing || 140;
|
||||
data4Layout.config.flowchart!.rankSpacing = conf?.rankSpacing || 80;
|
||||
data4Layout.direction = getDirection();
|
||||
data4Layout.direction = diag.db.getDirection();
|
||||
|
||||
data4Layout.markers = ['only_one', 'zero_or_one', 'one_or_more', 'zero_or_more'];
|
||||
data4Layout.diagramId = id;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { setConfig } from '../../../config.js';
|
||||
import erDb from '../erDb.js';
|
||||
import { ErDb } from '../erDb.js';
|
||||
import erDiagram from './erDiagram.jison'; // jison file
|
||||
|
||||
setConfig({
|
||||
@@ -7,6 +7,7 @@ setConfig({
|
||||
});
|
||||
|
||||
describe('when parsing ER diagram it...', function () {
|
||||
const erDb = new ErDb();
|
||||
beforeEach(function () {
|
||||
erDiagram.parser.yy = erDb;
|
||||
erDiagram.parser.yy.clear();
|
||||
|
||||
Reference in New Issue
Block a user