marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updated code to use class based approach

Browse Source
This commit is contained in:
shubham-mermaid
2025-07-10 20:21:27 +05:30
parent fad6676d18
commit 7e23f984e6
3 changed files with 95 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
packages/mermaid/src/diagrams/treemap/db.ts
View File

@@ -1,10 +1,10 @@
import { getConfig as commonGetConfig } from '../../config.js';
import DEFAULT_CONFIG from '../../defaultConfig.js';
import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
import { isLabelStyle } from '../../rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import { cleanAndMerge } from '../../utils.js';
import type { DiagramDB } from '../../diagram-api/types.js';
import { ImperativeState } from '../../utils/imperativeState.js';
import type { TreemapData, TreemapDiagramConfig, TreemapNode } from './types.js';
import DEFAULT_CONFIG from '../../defaultConfig.js';
import { getConfig as commonGetConfig } from '../../config.js';
import { cleanAndMerge } from '../../utils.js';
import { isLabelStyle } from '../../rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import {
clear as commonClear,
getAccDescription,
@@ -14,99 +14,99 @@ import {
setAccTitle,
setDiagramTitle,
} from '../common/commonDb.js';
import type { TreemapDB, TreemapData, TreemapDiagramConfig, TreemapNode } from './types.js';
export class TreeMapDB implements DiagramDB {
private data: TreemapData;
private state: ImperativeState<TreemapData>;
const defaultTreemapData: TreemapData = {
nodes: [],
levels: new Map(),
outerNodes: [],
classes: new Map(),
};
constructor() {
this.data = {
nodes: [],
levels: new Map(),
outerNodes: [],
classes: new Map(),
};
const state = new ImperativeState<TreemapData>(() => structuredClone(defaultTreemapData));
const getConfig = (): Required<TreemapDiagramConfig> => {
// Use type assertion with unknown as intermediate step
const defaultConfig = DEFAULT_CONFIG as unknown as { treemap: Required<TreemapDiagramConfig> };
const userConfig = commonGetConfig() as unknown as { treemap?: Partial<TreemapDiagramConfig> };
return cleanAndMerge({
...defaultConfig.treemap,
...(userConfig.treemap ?? {}),
}) as Required<TreemapDiagramConfig>;
};
const getNodes = (): TreemapNode[] => state.records.nodes;
const addNode = (node: TreemapNode, level: number) => {
const data = state.records;
data.nodes.push(node);
data.levels.set(node, level);
if (level === 0) {
data.outerNodes.push(node);
this.state = new ImperativeState<TreemapData>(() => structuredClone(this.data));
}
// Set the root node if this is a level 0 node and we don't have a root yet
if (level === 0 && !data.root) {
data.root = node;
public getNodes() {
return this.state.records.nodes;
}
};
const getRoot = (): TreemapNode | undefined => ({ name: '', children: state.records.outerNodes });
public getConfig() {
// Use type assertion with unknown as intermediate step
const defaultConfig = DEFAULT_CONFIG as unknown as { treemap: Required<TreemapDiagramConfig> };
const userConfig = commonGetConfig() as unknown as { treemap?: Partial<TreemapDiagramConfig> };
const addClass = (id: string, _style: string) => {
const classes = state.records.classes;
const styleClass = classes.get(id) ?? { id, styles: [], textStyles: [] };
classes.set(id, styleClass);
return cleanAndMerge({
...defaultConfig.treemap,
...(userConfig.treemap ?? {}),
}) as Required<TreemapDiagramConfig>;
}
const styles = _style.replace(/\\,/g, '§§§').replace(/,/g, ';').replace(/§§§/g, ',').split(';');
public addNode(node: TreemapNode, level: number) {
const data = this.state.records;
data.nodes.push(node);
data.levels.set(node, level);
if (styles) {
styles.forEach((s) => {
if (isLabelStyle(s)) {
if (styleClass?.textStyles) {
styleClass.textStyles.push(s);
} else {
styleClass.textStyles = [s];
if (level === 0) {
data.outerNodes.push(node);
}
// Set the root node if this is a level 0 node and we don't have a root yet
if (level === 0 && !data.root) {
data.root = node;
}
}
public getRoot() {
return { name: '', children: this.state.records.outerNodes };
}
public addClass(id: string, _style: string) {
// const classes = this.state.records.classes;
const styleClass = this.state.records.classes.get(id) ?? { id, styles: [], textStyles: [] };
this.state.records.classes.set(id, styleClass);
const styles = _style.replace(/\\,/g, '§§§').replace(/,/g, ';').replace(/§§§/g, ',').split(';');
if (styles) {
styles.forEach((s) => {
if (isLabelStyle(s)) {
if (styleClass?.textStyles) {
styleClass.textStyles.push(s);
} else {
styleClass.textStyles = [s];
}
}
}
if (styleClass?.styles) {
styleClass.styles.push(s);
} else {
styleClass.styles = [s];
}
});
if (styleClass?.styles) {
styleClass.styles.push(s);
} else {
styleClass.styles = [s];
}
});
}
this.state.records.classes.set(id, styleClass);
}
classes.set(id, styleClass);
};
const getClasses = (): Map<string, DiagramStyleClassDef> => {
return state.records.classes;
};
public getClasses() {
return this.state.records.classes;
}
const getStylesForClass = (classSelector: string): string[] => {
return state.records.classes.get(classSelector)?.styles ?? [];
};
public getStylesForClass(classSelector: string): string[] {
return this.state.records.classes.get(classSelector)?.styles ?? [];
}
const clear = () => {
commonClear();
state.reset();
};
public clear = () => {
commonClear();
this.state.reset();
};
export const db: TreemapDB = {
getNodes,
addNode,
getRoot,
getConfig,
clear,
setAccTitle,
getAccTitle,
setDiagramTitle,
getDiagramTitle,
getAccDescription,
setAccDescription,
addClass,
getClasses,
getStylesForClass,
};
public setAccTitle = setAccTitle;
public setAccDescription = setAccDescription;
public setDiagramTitle = setDiagramTitle;
public getAccTitle = getAccTitle;
public getAccDescription = getAccDescription;
public getDiagramTitle = getDiagramTitle;
}

6
packages/mermaid/src/diagrams/treemap/diagram.ts
View File

@@ -1,12 +1,14 @@
import type { DiagramDefinition } from '../../diagram-api/types.js';
import { db } from './db.js';
import { TreeMapDB } from './db.js';
import { parser } from './parser.js';
import { renderer } from './renderer.js';
import styles from './styles.js';
export const diagram: DiagramDefinition = {
parser,
db,
get db() {
return new TreeMapDB();
},
renderer,
styles,
};

8
packages/mermaid/src/diagrams/treemap/parser.ts
View File

@@ -2,15 +2,14 @@ import { parse } from '@mermaid-js/parser';
import type { ParserDefinition } from '../../diagram-api/types.js';
import { log } from '../../logger.js';
import { populateCommonDb } from '../common/populateCommonDb.js';
import { db } from './db.js';
import type { TreemapNode, TreemapAst } from './types.js';
import type { TreemapNode, TreemapAst, TreemapDB } from './types.js';
import { buildHierarchy } from './utils.js';
/**
* Populates the database with data from the Treemap AST
* @param ast - The Treemap AST
*/
const populate = (ast: TreemapAst) => {
const populate = (ast: TreemapAst, db: TreemapDB) => {
// We need to bypass the type checking for populateCommonDb
// eslint-disable-next-line @typescript-eslint/no-explicit-any
populateCommonDb(ast as any, db);
@@ -84,6 +83,7 @@ const getItemName = (item: { name?: string | number }): string => {
};
export const parser: ParserDefinition = {
parser: { yy: undefined },
parse: async (text: string): Promise<void> => {
try {
// Use a generic parse that accepts any diagram type
@@ -91,7 +91,7 @@ export const parser: ParserDefinition = {
const parseFunc = parse as (diagramType: string, text: string) => Promise<TreemapAst>;
const ast = await parseFunc('treemap', text);
log.debug('Treemap AST:', ast);
populate(ast);
populate(ast, parser.parser?.yy as TreemapDB);
} catch (error) {
log.error('Error parsing treemap:', error);
throw error;