#3336 Merged typescript changes

src/config.type.ts

@@ -27,10 +27,12 @@ export interface MermaidConfig {
   er?: ErDiagramConfig;
   pie?: PieDiagramConfig;
   requirement?: RequirementDiagramConfig;
+  mindmap?: MindmapDiagramConfig;
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
   dompurifyConfig?: DOMPurify.Config;
   wrap?: boolean;
+  fontSize?: number;
 }
 
 // TODO: More configs needs to be moved in here
@@ -211,7 +213,11 @@ export interface RequirementDiagramConfig extends BaseDiagramConfig {
   rect_padding?: number;
   line_height?: number;
 }
-
+export interface MindmapDiagramConfig extends BaseDiagramConfig {
+  useMaxWidth: boolean;
+  padding: number;
+  maxNodeWidth: number;
+}
 export interface PieDiagramConfig extends BaseDiagramConfig {}
 
 export interface ErDiagramConfig extends BaseDiagramConfig {

src/diagram-api/diagram-orchestration.ts

@@ -3,7 +3,7 @@ import mindmapDb from '../diagrams/mindmap/mindmapDb';
 import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
 // @ts-ignore
 import mindmapParser from '../diagrams/mindmap/parser/mindmap';
-import mindmapDetector from '../diagrams/mindmap/mindmapDetector';
+import { mindmapDetector } from '../diagrams/mindmap/mindmapDetector';
 import mindmapStyles from '../diagrams/mindmap/styles';
 
 import gitGraphDb from '../diagrams/git/gitGraphAst';
@@ -23,6 +23,6 @@ export const addDiagrams = () => {
     registerDiagram(
     'mindmap',
     { parser: mindmapParser, db: mindmapDb, renderer: mindmapRenderer, styles: mindmapStyles },
-    gitGraphDetector
+    mindmapDetector
   );
 };

src/diagram-api/diagramAPI.spec.ts

@@ -19,6 +19,7 @@ describe('DiagramAPI', () => {
         db: {},
         parser: {},
         renderer: {},
+        styles: {},
       },
       (text: string) => text.includes('loki')
     );

src/diagram-api/diagramAPI.ts

@@ -1,55 +1,70 @@
 import c4Db from '../diagrams/c4/c4Db';
 import c4Renderer from '../diagrams/c4/c4Renderer';
+import c4Styles from '../diagrams/c4/styles';
 // @ts-ignore
 import c4Parser from '../diagrams/c4/parser/c4Diagram';
 import classDb from '../diagrams/class/classDb';
 import classRenderer from '../diagrams/class/classRenderer';
 import classRendererV2 from '../diagrams/class/classRenderer-v2';
+import classStyles from '../diagrams/class/styles';
 // @ts-ignore
 import classParser from '../diagrams/class/parser/classDiagram';
 import erDb from '../diagrams/er/erDb';
 import erRenderer from '../diagrams/er/erRenderer';
 // @ts-ignore
 import erParser from '../diagrams/er/parser/erDiagram';
+import erStyles from '../diagrams/er/styles';
 import flowDb from '../diagrams/flowchart/flowDb';
 import flowRenderer from '../diagrams/flowchart/flowRenderer';
 import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
+import flowStyles from '../diagrams/flowchart/styles';
 // @ts-ignore
 import flowParser from '../diagrams/flowchart/parser/flow';
 import ganttDb from '../diagrams/gantt/ganttDb';
 import ganttRenderer from '../diagrams/gantt/ganttRenderer';
 // @ts-ignore
 import ganttParser from '../diagrams/gantt/parser/gantt';
+import ganttStyles from '../diagrams/gantt/styles';
+
 import infoDb from '../diagrams/info/infoDb';
 import infoRenderer from '../diagrams/info/infoRenderer';
 // @ts-ignore
 import infoParser from '../diagrams/info/parser/info';
+import infoStyles from '../diagrams/info/styles';
 // @ts-ignore
 import pieParser from '../diagrams/pie/parser/pie';
 import pieDb from '../diagrams/pie/pieDb';
 import pieRenderer from '../diagrams/pie/pieRenderer';
+import pieStyles from '../diagrams/pie/styles';
 // @ts-ignore
 import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
 import requirementDb from '../diagrams/requirement/requirementDb';
 import requirementRenderer from '../diagrams/requirement/requirementRenderer';
+import requirementStyles from '../diagrams/requirement/styles';
 // @ts-ignore
 import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
 import sequenceDb from '../diagrams/sequence/sequenceDb';
 import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
+import sequenceStyles from '../diagrams/sequence/styles';
 // @ts-ignore
 import stateParser from '../diagrams/state/parser/stateDiagram';
 import stateDb from '../diagrams/state/stateDb';
 import stateRenderer from '../diagrams/state/stateRenderer';
 import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
+import stateStyles from '../diagrams/state/styles';
 import journeyDb from '../diagrams/user-journey/journeyDb';
 import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
+import journeyStyles from '../diagrams/user-journey/styles';
 // @ts-ignore
 import journeyParser from '../diagrams/user-journey/parser/journey';
 import { addDetector, DiagramDetector } from './detectType';
-import { log } from '../logger';
+import { log as _log } from '../logger';
+import { getConfig as _getConfig } from '../config';
+import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
 import { MermaidConfig } from '../config.type';
 import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
 import { addStylesForDiagram } from '../styles';
+
 export interface DiagramDefinition {
   db: any;
   renderer: any;
@@ -66,6 +81,7 @@ const diagrams: Record<string, DiagramDefinition> = {
     init: (cnf) => {
       c4Renderer.setConf(cnf.c4);
     },
+    styles: c4Styles,
   },
   class: {
     db: classDb,
@@ -78,6 +94,7 @@ const diagrams: Record<string, DiagramDefinition> = {
       cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       classDb.clear();
     },
+    styles: classStyles,
   },
   classDiagram: {
     db: classDb,
@@ -90,11 +107,13 @@ const diagrams: Record<string, DiagramDefinition> = {
       cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       classDb.clear();
     },
+    styles: classStyles,
   },
   er: {
     db: erDb,
     renderer: erRenderer,
     parser: erParser,
+    styles: erStyles,
   },
   flowchart: {
     db: flowDb,
@@ -109,6 +128,7 @@ const diagrams: Record<string, DiagramDefinition> = {
       flowDb.clear();
       flowDb.setGen('gen-1');
     },
+    styles: flowStyles,
   },
   'flowchart-v2': {
     db: flowDb,
@@ -123,26 +143,31 @@ const diagrams: Record<string, DiagramDefinition> = {
       flowDb.clear();
       flowDb.setGen('gen-2');
     },
+    styles: flowStyles,
   },
   gantt: {
     db: ganttDb,
     renderer: ganttRenderer,
     parser: ganttParser,
+    styles: ganttStyles,
   },
   info: {
     db: infoDb,
     renderer: infoRenderer,
     parser: infoParser,
+    styles: infoStyles,
   },
   pie: {
     db: pieDb,
     renderer: pieRenderer,
     parser: pieParser,
+    styles: pieStyles,
   },
   requirement: {
     db: requirementDb,
     renderer: requirementRenderer,
     parser: requirementParser,
+    styles: requirementStyles,
   },
   sequence: {
     db: sequenceDb,
@@ -161,6 +186,7 @@ const diagrams: Record<string, DiagramDefinition> = {
       sequenceDb.setWrap(cnf.wrap);
       sequenceRenderer.setConf(cnf.sequence);
     },
+    styles: sequenceStyles,
   },
   state: {
     db: stateDb,
@@ -173,6 +199,7 @@ const diagrams: Record<string, DiagramDefinition> = {
       cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       stateDb.clear();
     },
+    styles: stateStyles,
   },
   stateDiagram: {
     db: stateDb,
@@ -185,6 +212,7 @@ const diagrams: Record<string, DiagramDefinition> = {
       cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       stateDb.clear();
     },
+    styles: stateStyles,
   },
   journey: {
     db: journeyDb,
@@ -194,6 +222,7 @@ const diagrams: Record<string, DiagramDefinition> = {
       journeyRenderer.setConf(cnf.journey);
       journeyDb.clear();
     },
+    styles: journeyStyles,
   },
 };
 
@@ -217,4 +246,7 @@ export const getDiagram = (name: string): DiagramDefinition => {
   throw new Error(`Diagram ${name} not found.`);
 };
 
+export const log = _log;
+export const getConfig = _getConfig;
+export const sanitizeText = (text:string) => _sanitizeText(text, getConfig());
 export const setupGraphViewbox = _setupGraphViewbox;

src/diagrams/mindmap/mindmapDb.js

@@ -1,5 +1,6 @@
 /** Created by knut on 15-01-14. */
-import { log, sanitizeText, getConfig } from '../../diagram-api/diagramAPI';
+import { sanitizeText, getConfig } from '../../diagram-api/diagramAPI';
+import { log } from '../../logger';
 
 var message = '';
 var info = false;
@@ -27,6 +28,7 @@ export const getMindmap = () => {
   return nodes.length > 0 ? nodes[0] : null;
 };
 export const addNode = (level, id, descr, type) => {
+  console.info('addNode', level, id, descr, type);
   const conf = getConfig();
   const node = {
     id: cnt++,

src/diagrams/mindmap/mindmapDetector.ts

@@ -1,4 +1,4 @@
-import { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/detectType';
 
 export const mindmapDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*mindmap/) !== null;

src/mermaid.ts

@@ -30,6 +30,9 @@ import { isDetailedError } from './utils';
  * ```
  *
  * Renders the mermaid diagrams
+ * @param config
+ * @param nodes
+ * @param callback
  */
 const init = function (
   config?: MermaidConfig,
@@ -39,6 +42,7 @@ const init = function (
   try {
     initThrowsErrors(config, nodes, callback);
   } catch (e) {
+    console.error('Syntax Error rendering');
     log.warn('Syntax Error rendering');
     if (isDetailedError(e)) {
       log.warn(e.str);
@@ -124,6 +128,7 @@ const initThrowsErrors = function (
         element
       );
     } catch (error) {
+      console.error('Catching Error (bootstrap)', error);
       log.warn('Catching Error (bootstrap)');
       // @ts-ignore
       // TODO: We should be throwing an error object.

src/styles.ts

@@ -103,7 +103,8 @@ const getStyles = (
 `;
 };
 
-export const addStylesForDiagram = (type, diagramTheme) => {
+export const addStylesForDiagram = (type: any, diagramTheme: any) => {
+  // @ts-ignore
   themes[type] = diagramTheme;
 };