#3336 Merged typescript changes

2025-01-14 06:43:25 +08:00 · 2022-09-05 14:04:39 +02:00 · 2022-09-05 14:04:39 +02:00 · 8b4a08eef4
commit 8b4a08eef4
parent 01106caa59
12 changed files with 96 additions and 57 deletions
--- a/cypress/downloads/downloads.html
+++ b/cypress/downloads/downloads.html
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@ -43,24 +43,10 @@
    </style>
  </head>
  <body>
-    <pre class="mermaid2" style="width: 50%">
-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<br/> So all of this appears on the <br/> same line."
-  O0 -- has type -->O2["Bug"]
-  click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
+    <pre class="mermaid" style="width: 50%">
+mindmap
+apa
+      bapa
    </pre>
    <pre class="mermaid2" style="width: 50%">
 flowchart TD
@ -77,14 +63,14 @@ flowchart TD
    end

 </div>
-<div class="mermaid" style="width: 50%;">
+<div class="mermaid2" style="width: 50%;">
 flowchart TD
 id
 </div>
-<div class="mermaid2" style="width: 50%;">
+<pre class="mermaid2" style="width: 50%;">
 flowchart LR
        a["<strong>Haiya</strong>"]===>b
-</div>
+</pre>
 <div class="mermaid2" style="width: 50%;">
 flowchart TD
    A --> B
@ -122,7 +108,7 @@ graph TD

    linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
    </pre>
-    <pre class="mermaid2" style="width: 100%">
+    <pre class="mermaid" style="width: 100%">
  journey
      accTitle: My User Journey Diagram
      accDescr: My User Journey Diagram Description
--- 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,12 +1473,12 @@ $(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** 

@ -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,7 +1535,7 @@ Pushes in a directive to the configuration

 ### Parameters

- `config` (optional, default `siteConfig`)
+-   `config`   (optional, default `siteConfig`)

 Returns **void** 

@ -1543,7 +1543,7 @@ Returns **void**

 ### Parameters

- `options` **MermaidConfig**
+-   `options` **MermaidConfig** 

 ## 

@ -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
--- 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 {
--- 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
  );
 };
--- 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')
    );
--- 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<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;
--- 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++,
--- a/src/diagrams/mindmap/mindmapDetector.old
+++ b/src/diagrams/mindmap/mindmapDetector.old
--- a/src/diagrams/mindmap/mindamapDetector.ts
+++ b/src/diagrams/mindmap/mindamapDetector.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;
--- 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.
--- 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;
 };