Merge pull request #3470 from mermaid-js/fix_for_error_handling

Fix for issues in errorhandling and class diagrams after refactoring

cypress/platform/knsv2.html

@@ -47,9 +47,17 @@
     <div>Security check</div>
     <div class="flex">
       <pre id="diagram" class="mermaid">
-sequenceDiagram
-  Nothing:Valid;
-      </pre>
+    flowchart TD
+    A[myClass1] --> B[default] & C[default]
+    B[default] & C[default] --> D[myClass2]
+    classDef default stroke-width:2px,fill:none,stroke:silver
+    classDef node color:red
+    classDef myClass1 color:#0000ff
+    classDef myClass2 stroke:#0000ff,fill:#ccccff
+    class A myClass1
+    class D myClass2
+  </pre
+      >
       <div id="res" class=""></div>
     </div>
     <script src="./mermaid.js"></script>
@@ -59,6 +67,7 @@ sequenceDiagram
       };
       mermaid.initialize({
         startOnLoad: false,
+        logLevel: 0,
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {

src/dagre-wrapper/markers.js

@@ -119,7 +119,7 @@ const dependency = (elem, type) => {
     .append('path')
     .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
 };
-const lollipop = (elem, type, id) => {
+const lollipop = (elem, type) => {
   elem
     .append('defs')
     .append('marker')

src/defaultConfig.ts

@@ -228,9 +228,9 @@ const config: Partial<MermaidConfig> = {
      * Decides which rendering engine that is to be used for the rendering. Legal values are:
      * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
      *
-     * Default value: 'dagre-d3'
+     * Default value: 'dagre-wrapper'
      */
-    defaultRenderer: 'dagre-d3',
+    defaultRenderer: 'dagre-wrapper',
   },
 
   /** The object containing configurations specific for sequence diagrams */
@@ -387,7 +387,8 @@ const config: Partial<MermaidConfig> = {
      *
      * **Notes:**
      *
-     * This will display arrows that start and begin at the same node as right angles, rather than a curve
+     * This will display arrows that start and begin at the same node as right angles, rather than a
+     * curve
      *
      * Default value: false
      */
@@ -802,7 +803,8 @@ const config: Partial<MermaidConfig> = {
      *
      * **Notes:**
      *
-     * This will display arrows that start and begin at the same node as right angles, rather than a curves
+     * This will display arrows that start and begin at the same node as right angles, rather than a
+     * curves
      *
      * Default value: false
      */

src/diagram-api/diagram-orchestration.ts

@@ -105,7 +105,11 @@ export const addDiagrams = () => {
     'error',
     // Special diagram with error messages but setup as a regular diagram
     {
-      db: {},
+      db: {
+        clear: () => {
+          // Quite ok, clear needs to be there for error to work as a regular diagram
+        },
+      },
       styles: errorStyles,
       renderer: errorRenderer,
       parser: {

src/diagrams/error/errorRenderer.ts

@@ -17,10 +17,11 @@ export const setConf = function (cnf: any) {
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
  *
+ * @param text
  * @param {string} id The text for the error
  * @param {string} mermaidVersion The version
  */
-export const draw = (id: string, mermaidVersion: string) => {
+export const draw = (text: string, id: string, mermaidVersion: string) => {
   try {
     log.debug('Renering svg for syntax error\n');
 

src/mermaidAPI.ts

@@ -312,7 +312,7 @@ const render = function (
   try {
     diag.renderer.draw(text, id, pkg.version, diag);
   } catch (e) {
-    errorRenderer.draw(id, pkg.version);
+    errorRenderer.draw(text, id, pkg.version);
     throw e;
   }
 

src/utils.ts

@@ -71,7 +71,7 @@ const directiveWithoutOpen =
  *    g-->h
  * ```
  * @param {string} text The text defining the graph
- * @param {any} cnf
+ * @param {any} config
  * @returns {object} The json object representing the init passed to mermaid.initialize()
  */
 export const detectInit = function (text: string, config?: MermaidConfig): MermaidConfig {
@@ -392,7 +392,6 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
   }
 
   points.forEach((point) => {
-    totalDistance += distance(point, prevPoint);
     prevPoint = point;
   });
 
@@ -746,7 +745,7 @@ let decoder;
  * Decodes HTML, source: {@link https://github.com/shrpne/entity-decode/blob/v2.0.1/browser.js}
  *
  * @param {string} html HTML as a string
- * @returns Unescaped HTML
+ * @returns {string} Unescaped HTML
  */
 export const entityDecode = function (html) {
   decoder = decoder || document.createElement('div');