marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-18 15:56:43 +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 type { DiagramDB } from '../../diagram-api/types.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 { ImperativeState } from '../../utils/imperativeState.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 { import {
clear as commonClear, clear as commonClear,
getAccDescription, getAccDescription,
@@ -14,99 +14,99 @@ import {
setAccTitle, setAccTitle,
setDiagramTitle, setDiagramTitle,
} from '../common/commonDb.js'; } 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 = { constructor() {
nodes: [], this.data = {
levels: new Map(), nodes: [],
outerNodes: [], levels: new Map(),
classes: new Map(), outerNodes: [],
}; classes: new Map(),
};
const state = new ImperativeState<TreemapData>(() => structuredClone(defaultTreemapData)); this.state = new ImperativeState<TreemapData>(() => structuredClone(this.data));
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);
} }
// Set the root node if this is a level 0 node and we don't have a root yet public getNodes() {
if (level === 0 && !data.root) { return this.state.records.nodes;
data.root = node;
} }
};
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) => { return cleanAndMerge({
const classes = state.records.classes; ...defaultConfig.treemap,
const styleClass = classes.get(id) ?? { id, styles: [], textStyles: [] }; ...(userConfig.treemap ?? {}),
classes.set(id, styleClass); }) 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) { if (level === 0) {
styles.forEach((s) => { data.outerNodes.push(node);
if (isLabelStyle(s)) { }
if (styleClass?.textStyles) {
styleClass.textStyles.push(s); // Set the root node if this is a level 0 node and we don't have a root yet
} else { if (level === 0 && !data.root) {
styleClass.textStyles = [s]; 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) {
if (styleClass?.styles) { styleClass.styles.push(s);
styleClass.styles.push(s); } else {
} else { styleClass.styles = [s];
styleClass.styles = [s]; }
} });
}); }
this.state.records.classes.set(id, styleClass);
} }
classes.set(id, styleClass); public getClasses() {
}; return this.state.records.classes;
const getClasses = (): Map<string, DiagramStyleClassDef> => { }
return state.records.classes;
};
const getStylesForClass = (classSelector: string): string[] => { public getStylesForClass(classSelector: string): string[] {
return state.records.classes.get(classSelector)?.styles ?? []; return this.state.records.classes.get(classSelector)?.styles ?? [];
}; }
const clear = () => { public clear = () => {
commonClear(); commonClear();
state.reset(); this.state.reset();
}; };
export const db: TreemapDB = { public setAccTitle = setAccTitle;
getNodes, public setAccDescription = setAccDescription;
addNode, public setDiagramTitle = setDiagramTitle;
getRoot, public getAccTitle = getAccTitle;
getConfig, public getAccDescription = getAccDescription;
clear, public getDiagramTitle = getDiagramTitle;
setAccTitle, }
getAccTitle,
setDiagramTitle,
getDiagramTitle,
getAccDescription,
setAccDescription,
addClass,
getClasses,
getStylesForClass,
};

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

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