From 1388e201e5fb3766251e9ef4efcd0ec34168a53a Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 19 Oct 2022 14:30:36 +0200 Subject: [PATCH] Adding queue for async calls in mermaidts and fixing icon color --- packages/mermaid-mindmap/src/styles.js | 3 - packages/mermaid/src/mermaid.ts | 122 ++++++++++++++++++- packages/mermaid/src/themes/theme-default.js | 15 ++- packages/mermaid/src/themes/theme-forest.js | 5 +- 4 files changed, 134 insertions(+), 11 deletions(-) diff --git a/packages/mermaid-mindmap/src/styles.js b/packages/mermaid-mindmap/src/styles.js index 241938b62..a409aa4e5 100644 --- a/packages/mermaid-mindmap/src/styles.js +++ b/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]}; diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index a630016dc..b7eaf8c36 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/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 => { + 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; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 54f0ad8a2..a79a855a5 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/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 - this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor); + // Setup the label color for the set + 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; + if (this.labelTextColor !== 'calculated') { + 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 */ diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index ee086ad10..aa30f0daf 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/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;