From 8b4a08eef42da3fd7ecf08623feb10fe75c60f74 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 5 Sep 2022 14:04:39 +0200 Subject: [PATCH] #3336 Merged typescript changes --- cypress/downloads/downloads.html | Bin 0 -> 4953 bytes cypress/platform/knsv.html | 30 +++------ docs/Setup.md | 62 ++++++++++-------- src/config.type.ts | 8 ++- src/diagram-api/diagram-orchestration.ts | 4 +- src/diagram-api/diagramAPI.spec.ts | 1 + src/diagram-api/diagramAPI.ts | 34 +++++++++- src/diagrams/mindmap/mindmapDb.js | 4 +- ...mindmapDetector.js => mindmapDetector.old} | 0 ...mindamapDetector.ts => mindmapDetector.ts} | 2 +- src/mermaid.ts | 5 ++ src/styles.ts | 3 +- 12 files changed, 96 insertions(+), 57 deletions(-) create mode 100644 cypress/downloads/downloads.html rename src/diagrams/mindmap/{mindmapDetector.js => mindmapDetector.old} (100%) rename src/diagrams/mindmap/{mindamapDetector.ts => mindmapDetector.ts} (60%) diff --git a/cypress/downloads/downloads.html b/cypress/downloads/downloads.html new file mode 100644 index 0000000000000000000000000000000000000000..af2a395ab393849c5cb6284b34df5e977cd2fcc7 GIT binary patch literal 4953 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 - 
-flowchart LR
-  classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
-  classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
-  classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
-
-  O0("Joe")
-  class O0 aPID;
-
-  O1("Person")
-  class O1 crm;
-  O0 -- has type -->O1["Person"]
-
-  O2("aat:300411314")
-  class O2 type;
-  click O2 function "Sorry the newline html tags are not being processed correctly
 So all of this appears on the 
 same line."
-  O0 -- has type -->O2["Bug"]
-  click O0 function "Lots of great info about Joe
Lots of great info about Joe
burt
fred";
+    
+mindmap
+apa
+      bapa
     

     
 flowchart TD
@@ -77,14 +63,14 @@ flowchart TD
     end
 
 
-

+

 flowchart TD
 id
 

-

+
 flowchart LR
         a["Haiya"]===>b
-

+

 

 flowchart TD
     A --> B
@@ -122,7 +108,7 @@ graph TD
 
     linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
- 
+    
   journey
       accTitle: My User Journey Diagram
       accDescr: My User Journey Diagram Description
diff --git a/docs/Setup.md b/docs/Setup.md
index a9d8e87e2..bc02f194e 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -64,12 +64,12 @@ Theme , the CSS style sheet
 
 **Notes:**
 
-- Trace: 0
-- Debug: 1
-- Info: 2
-- Warn: 3
-- Error: 4
-- Fatal: 5 (default)
+-   Trace: 0
+-   Debug: 1
+-   Info: 2
+-   Warn: 3
+-   Error: 4
+-   Fatal: 5 (default)
 
 ## securityLevel
 
@@ -79,13 +79,13 @@ Theme , the CSS style sheet
 
 **Notes**:
 
-- **strict**: (**default**) tags in text are encoded, click functionality is disabled
-- **loose**: tags in text are allowed, click functionality is enabled
-- **antiscript**: html tags in text are allowed, (only script element is removed), click
-  functionality is enabled
-- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
-  prevent any JavaScript from running in the context. This may hinder interactive functionality
-  of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
+-   **strict**: (**default**) tags in text are encoded, click functionality is disabled
+-   **loose**: tags in text are allowed, click functionality is enabled
+-   **antiscript**: html tags in text are allowed, (only script element is removed), click
+    functionality is enabled
+-   **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
+    prevent any JavaScript from running in the context. This may hinder interactive functionality
+    of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
 
 ## startOnLoad
 
@@ -1420,7 +1420,7 @@ function _Default value: At default, will mirror Global Config_
 
 ### Parameters
 
-- `conf` **MermaidConfig** The base currentConfig to use as siteConfig
+-   `conf` **MermaidConfig** The base currentConfig to use as siteConfig
 
 Returns **[object][5]** The siteConfig
 
@@ -1450,7 +1450,7 @@ corresponding siteConfig value.
 
 ### Parameters
 
-- `conf` **any** The potential currentConfig
+-   `conf` **any** The potential currentConfig
 
 Returns **any** The currentConfig merged with the sanitized conf
 
@@ -1473,14 +1473,14 @@ $(function () {
 
 ### Parameters
 
-- `id` **[string][6]** The id of the element to be rendered
-- `text` **[string][6]** The graph definition
-- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
-- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
-  inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
-  element will be removed when rendering is completed.
+-   `id` **[string][6]** The id of the element to be rendered
+-   `text` **[string][6]** The graph definition
+-   `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void** 
+-   `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
+      inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
+      element will be removed when rendering is completed.
 
-Returns **void**
+Returns **void** 
 
 ## getConfig
 
@@ -1507,7 +1507,7 @@ options in-place
 
 ### Parameters
 
-- `options` **any** The potential setConfig parameter
+-   `options` **any** The potential setConfig parameter
 
 ## addDirective
 
@@ -1515,7 +1515,7 @@ Pushes in a directive to the configuration
 
 ### Parameters
 
-- `directive` **[object][5]** The directive to push in
+-   `directive` **[object][5]** The directive to push in
 
 ## reset
 
@@ -1535,17 +1535,17 @@ Pushes in a directive to the configuration
 
 ### Parameters
 
-- `config` (optional, default `siteConfig`)
+-   `config`   (optional, default `siteConfig`)
 
-Returns **void**
+Returns **void** 
 
 ## initialize
 
 ### Parameters
 
-- `options` **MermaidConfig**
+-   `options` **MermaidConfig** 
 
-##
+## 
 
 ## mermaidAPI configuration defaults
 
@@ -1610,9 +1610,15 @@ Returns **void**
 ```
 
 [1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js
+
 [2]: Setup.md?id=render
+
 [3]: 8.6.0_docs.md
+
 [4]: #mermaidapi-configuration-defaults
+
 [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
 [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
 [7]: https://developer.mozilla.org/docs/Web/API/Element
diff --git a/src/config.type.ts b/src/config.type.ts
index 40b2b0b5a..d35f7288d 100644
--- a/src/config.type.ts
+++ b/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 {
diff --git a/src/diagram-api/diagram-orchestration.ts b/src/diagram-api/diagram-orchestration.ts
index 6a5700187..b0df42cd7 100644
--- a/src/diagram-api/diagram-orchestration.ts
+++ b/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
   );
 };
diff --git a/src/diagram-api/diagramAPI.spec.ts b/src/diagram-api/diagramAPI.spec.ts
index 42c09099a..f72384c11 100644
--- a/src/diagram-api/diagramAPI.spec.ts
+++ b/src/diagram-api/diagramAPI.spec.ts
@@ -19,6 +19,7 @@ describe('DiagramAPI', () => {
         db: {},
         parser: {},
         renderer: {},
+        styles: {},
       },
       (text: string) => text.includes('loki')
     );
diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts
index 19d9ef689..ee8618671 100644
--- a/src/diagram-api/diagramAPI.ts
+++ b/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 = {
     init: (cnf) => {
       c4Renderer.setConf(cnf.c4);
     },
+    styles: c4Styles,
   },
   class: {
     db: classDb,
@@ -78,6 +94,7 @@ const diagrams: Record = {
       cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       classDb.clear();
     },
+    styles: classStyles,
   },
   classDiagram: {
     db: classDb,
@@ -90,11 +107,13 @@ const diagrams: Record = {
       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 = {
       flowDb.clear();
       flowDb.setGen('gen-1');
     },
+    styles: flowStyles,
   },
   'flowchart-v2': {
     db: flowDb,
@@ -123,26 +143,31 @@ const diagrams: Record = {
       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 = {
       sequenceDb.setWrap(cnf.wrap);
       sequenceRenderer.setConf(cnf.sequence);
     },
+    styles: sequenceStyles,
   },
   state: {
     db: stateDb,
@@ -173,6 +199,7 @@ const diagrams: Record = {
       cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       stateDb.clear();
     },
+    styles: stateStyles,
   },
   stateDiagram: {
     db: stateDb,
@@ -185,6 +212,7 @@ const diagrams: Record = {
       cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
       stateDb.clear();
     },
+    styles: stateStyles,
   },
   journey: {
     db: journeyDb,
@@ -194,6 +222,7 @@ const diagrams: Record = {
       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;
diff --git a/src/diagrams/mindmap/mindmapDb.js b/src/diagrams/mindmap/mindmapDb.js
index 4137360b6..1d52e0aaf 100644
--- a/src/diagrams/mindmap/mindmapDb.js
+++ b/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++,
diff --git a/src/diagrams/mindmap/mindmapDetector.js b/src/diagrams/mindmap/mindmapDetector.old
similarity index 100%
rename from src/diagrams/mindmap/mindmapDetector.js
rename to src/diagrams/mindmap/mindmapDetector.old
diff --git a/src/diagrams/mindmap/mindamapDetector.ts b/src/diagrams/mindmap/mindmapDetector.ts
similarity index 60%
rename from src/diagrams/mindmap/mindamapDetector.ts
rename to src/diagrams/mindmap/mindmapDetector.ts
index 42d6309ee..8b45f3681 100644
--- a/src/diagrams/mindmap/mindamapDetector.ts
+++ b/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;
diff --git a/src/mermaid.ts b/src/mermaid.ts
index e82597152..96b8b9c1a 100644
--- a/src/mermaid.ts
+++ b/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.
diff --git a/src/styles.ts b/src/styles.ts
index e322d1c79..c1b534cf2 100644
--- a/src/styles.ts
+++ b/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;
 };