Adding queue for async calls in mermaidts and fixing icon color

packages/mermaid-mindmap/src/styles.js

@@ -22,13 +22,10 @@ const genSections = (options) => {
     }
     .section-${i - 1} text {
      fill: ${options['cScaleLabel' + i]};
-    //  fill: ${options['gitInv' + i]};
     }
     .node-icon-${i - 1} {
       font-size: 40px;
       color: ${options['cScaleLabel' + i]};
-      // fill: ${options['cScaleLabel' + i]};
-      // color: ${options['gitInv' + i]};
     }
     .section-edge-${i - 1}{
       stroke: ${options['cScale' + i]};

packages/mermaid/src/mermaid.ts

@@ -72,7 +72,6 @@ const initThrowsErrors = function (
   callback?: Function
 ) {
   const conf = mermaidAPI.getConfig();
-  // console.log('Starting rendering diagrams (init) - mermaid.init', conf);
   if (config) {
     // This is a legacy way of setting config. It is not documented and should be removed in the future.
     // @ts-ignore: TODO Fix ts errors
@@ -210,7 +209,6 @@ const initThrowsErrorsAsync = async function (
   callback?: Function
 ) {
   const conf = mermaidAPI.getConfig();
-  // console.log('Starting rendering diagrams (init) - mermaid.init', conf);
   if (config) {
     // This is a legacy way of setting config. It is not documented and should be removed in the future.
     // @ts-ignore: TODO Fix ts errors
@@ -357,12 +355,124 @@ const parse = (txt: string) => {
   return mermaidAPI.parse(txt, mermaid.parseError);
 };
 
+// @ts-ignore: TODO Fix ts errors
+const executionQueue = [];
+let executionQueueRunning = false;
+const executeQueue = async () => {
+  if (executionQueueRunning) {
+    return;
+  }
+  executionQueueRunning = true;
+  // @ts-ignore: TODO Fix ts errors
+  while (executionQueue.length > 0) {
+    // @ts-ignore: TODO Fix ts errors
+    const f = executionQueue.shift();
+    try {
+      await f();
+    } catch (e) {
+      log.error('Error executing queue', e);
+    }
+  }
+  executionQueueRunning = false;
+};
+
 /**
  * @param txt
  * @deprecated This is an internal function and should not be used. Will be removed in v10.
  */
 const parseAsync = (txt: string) => {
-  return mermaidAPI.parseAsync(txt, mermaid.parseError);
+  return new Promise((resolve, reject) => {
+    // This promise will resolve when the mermaidAPI.render call is done.
+    // It will be queued first and will be executed when it is first in line
+    const performCall = () =>
+      new Promise((res, rej) => {
+        mermaidAPI.parseAsync(txt, mermaid.parseError).then(
+          (r) => {
+            // This resolves for the promise for the queue handling
+            res(r);
+            // This fullfills the promise sent to the value back to the original caller
+            resolve(r);
+          },
+          (e) => {
+            log.error('Error parsing', e);
+            rej(e);
+            reject(e);
+          }
+        );
+      });
+    executionQueue.push(performCall);
+    executeQueue();
+  });
+};
+
+// const asynco = (id: string, delay: number) =>
+//   new Promise((res) => {
+//     setTimeout(() => {
+//       // This resolves for the promise for the queue handling
+//       res(id);
+//     }, delay);
+//   });
+
+/**
+ * @param txt
+ * @param id
+ * @param delay
+ * @deprecated This is an internal function and should not be used. Will be removed in v10.
+ */
+// const test1 = (id: string, delay: number) => {
+//   const p = new Promise((resolve, reject) => {
+//     // This promise will resolve when the mermaidAPI.render call is done.
+//     // It will be queued first and will be executed when it is first in line
+//     const performCall = () =>
+//       new Promise((res) => {
+//         asynco(id, delay).then((r) => {
+//           // This resolves for the promise for the queue handling
+//           res(r);
+//           // This fullfills the promise sent to the value back to the original caller
+//           resolve(r + ' result to caller');
+//         });
+//       });
+//     executionQueue.push(performCall);
+//   });
+//   return p;
+// };
+
+/**
+ * @param txt
+ * @param id
+ * @param text
+ * @param cb
+ * @param container
+ * @deprecated This is an internal function and should not be used. Will be removed in v10.
+ */
+const renderAsync = (
+  id: string,
+  text: string,
+  cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
+  container?: Element
+): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    // This promise will resolve when the mermaidAPI.render call is done.
+    // It will be queued first and will be executed when it is first in line
+    const performCall = () =>
+      new Promise((res, rej) => {
+        mermaidAPI.renderAsync(id, text, cb, container).then(
+          (r) => {
+            // This resolves for the promise for the queue handling
+            res(r);
+            // This fullfills the promise sent to the value back to the original caller
+            resolve(r);
+          },
+          (e) => {
+            log.error('Error parsing', e);
+            rej(e);
+            reject(e);
+          }
+        );
+      });
+    executionQueue.push(performCall);
+    executeQueue();
+  });
 };
 
 const mermaid: {
@@ -374,6 +484,7 @@ const mermaid: {
   parse: typeof parse;
   parseAsync: typeof parseAsync;
   render: typeof mermaidAPI.render;
+  renderAsync: typeof renderAsync;
   init: typeof init;
   initThrowsErrors: typeof initThrowsErrors;
   initialize: typeof initialize;
@@ -386,7 +497,10 @@ const mermaid: {
   mermaidAPI,
   parse,
   parseAsync,
+  // parseAsync: mermaidAPI.parseAsync,
   render: mermaidAPI.render,
+  renderAsync,
+  // renderAsync: mermaidAPI.renderAsync,
   init,
   initThrowsErrors,
   initialize,
@@ -394,6 +508,8 @@ const mermaid: {
   parseError: undefined,
   contentLoaded,
   setParseErrorHandler,
+  // test1,
+  // executeQueue,
 };
 
 export default mermaid;

packages/mermaid/src/themes/theme-default.js

@@ -147,11 +147,18 @@ class Theme {
       this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 });
     }
 
-    // Setup teh label color for the set
+    // Setup the label color for the set
-    this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
+    this.scaleLabelColor =
+      this.scaleLabelColor !== 'calculated' && this.scaleLabelColor
+        ? this.scaleLabelColor
+        : this.labelTextColor;
 
-    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+    if (this.labelTextColor !== 'calculated') {
-      this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
+      this.cScaleLabel0 = this.cScaleLabel0 || invert(this.labelTextColor);
+      this.cScaleLabel3 = this.cScaleLabel3 || invert(this.labelTextColor);
+      for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+        this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.labelTextColor;
+      }
     }
 
     /* Flowchart variables */

packages/mermaid/src/themes/theme-forest.js

@@ -121,7 +121,10 @@ class Theme {
     }
 
     // Setup teh label color for the set
-    this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
+    this.scaleLabelColor =
+      this.scaleLabelColor !== 'calculated' && this.scaleLabelColor
+        ? this.scaleLabelColor
+        : this.labelTextColor;
 
     for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
       this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;