From 9a0d5e31b77fcea6b20338078e46c78d5a8a7c3c Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 22 Aug 2022 17:12:05 +0530 Subject: [PATCH] fix: review comments --- src/config.ts | 2 +- src/config.type.ts | 2 ++ src/diagram-api/diagramAPI.ts | 14 ++++----- src/diagrams/flowchart/flowRenderer.js | 4 +-- src/diagrams/state/stateRenderer-v2.js | 2 +- src/mermaid.ts | 4 --- src/mermaidAPI.ts | 42 +++++++++----------------- 7 files changed, 26 insertions(+), 44 deletions(-) diff --git a/src/config.ts b/src/config.ts index 579831703..6df5fa249 100644 --- a/src/config.ts +++ b/src/config.ts @@ -134,7 +134,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => { * * @returns {any} - The currentConfig */ -export const getConfig = () => { +export const getConfig = (): MermaidConfig => { return assignWithDepth({}, currentConfig); }; /** diff --git a/src/config.type.ts b/src/config.type.ts index a59d39547..40b2b0b5a 100644 --- a/src/config.type.ts +++ b/src/config.type.ts @@ -10,6 +10,7 @@ export interface MermaidConfig { darkMode?: boolean; htmlLabels?: boolean; fontFamily?: string; + altFontFamily?: string; logLevel?: number; securityLevel?: string; startOnLoad?: boolean; @@ -225,6 +226,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig { } export interface StateDiagramConfig extends BaseDiagramConfig { + arrowMarkerAbsolute?: boolean; dividerMargin?: number; sizeUnit?: number; padding?: number; diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts index 870940d8d..47f484070 100644 --- a/src/diagram-api/diagramAPI.ts +++ b/src/diagram-api/diagramAPI.ts @@ -165,11 +165,10 @@ const diagrams: Record = { renderer: stateRenderer, parser: stateParser, init: (cnf) => { - // TODO Q: Why is state diagram init setting cnf.class.arrowMarkerAbsolute ? - if (!cnf.class) { - cnf.class = {}; + if (!cnf.state) { + cnf.state = {}; } - cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; + cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; stateDb.clear(); }, }, @@ -178,11 +177,10 @@ const diagrams: Record = { renderer: stateRendererV2, parser: stateParser, init: (cnf) => { - // TODO Q: Why is state diagram init setting cnf.class.arrowMarkerAbsolute ? - if (!cnf.class) { - cnf.class = {}; + if (!cnf.state) { + cnf.state = {}; } - cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; + cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; stateDb.clear(); }, }, diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 668779c28..c6e6ebdd6 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -458,9 +458,7 @@ export const draw = function (text, id, _version, diagObj) { } // Add label rects for non html labels - // TODO: This always evaluates to true. Bug? - // eslint-disable-next-line no-constant-condition - if (!evaluate(conf.htmlLabels) || true) { + if (!conf.htmlLabels) { const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); for (let k = 0; k < labels.length; k++) { const label = labels[k]; diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js index 73d7d6993..3f21d798a 100644 --- a/src/diagrams/state/stateRenderer-v2.js +++ b/src/diagrams/state/stateRenderer-v2.js @@ -248,7 +248,7 @@ export const draw = function (text, id, _version, diag) { dir = 'LR'; } - const { securityLevel, state: conf } = getConfig().state; + const { securityLevel, state: conf } = getConfig(); const nodeSpacing = conf.nodeSpacing || 50; const rankSpacing = conf.rankSpacing || 50; diff --git a/src/mermaid.ts b/src/mermaid.ts index e9b5b7716..95cf68c27 100644 --- a/src/mermaid.ts +++ b/src/mermaid.ts @@ -61,10 +61,6 @@ const initThrowsErrors = function ( } // if last argument is a function this is the callback function - - if (!callback && typeof conf?.mermaid?.callback === 'function') { - callback = conf.mermaid.callback; - } log.debug(`${!callback ? 'No ' : ''}Callback function found`); let nodesToProcess: NodeListOf; if (typeof nodes === 'undefined') { diff --git a/src/mermaidAPI.ts b/src/mermaidAPI.ts index 6436e54db..7e6c92fa6 100644 --- a/src/mermaidAPI.ts +++ b/src/mermaidAPI.ts @@ -103,20 +103,21 @@ export const decodeEntities = function (text: string): string { * }); * ``` * - * @param {any} id The id of the element to be rendered - * @param {any} text The graph definition - * @param {any} cb Callback which is called after rendering is finished with the svg code as inparam. - * @param {any} container Selector to element in which a div with the graph temporarily will be + * @param {string} id The id of the element to be rendered + * @param {string} text The graph definition + * @param {(svgCode: string, bindFunctions?: (element: Element) => void) => void} cb Callback which + * is called after rendering is finished with the svg code as inparam. + * @param {Element} container Selector to element in which a div with the graph temporarily will be * inserted. In 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 {any} + * @returns {void} */ const render = function ( id: string, text: string, cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void, container: Element -) { +): void { configApi.reset(); text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;; const graphInit = utils.detectInit(text); @@ -129,7 +130,7 @@ const render = function ( log.debug(cnf); // Check the maximum allowed text size - if (text.length > cnf.maxTextSize) { + if (text.length > cnf.maxTextSize!) { text = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa'; } @@ -137,18 +138,6 @@ const render = function ( // In regular execution the container will be the div with a mermaid class if (typeof container !== 'undefined') { - if (cnf.securityLevel === 'sandbox') { - // IF we are in sandboxed mode, we do everyting mermaid related - // in a sandboxed div - const iframe = select('body') - .append('iframe') - .attr('id', 'i' + id) - .attr('style', 'width: 100%; height: 100%;') - .attr('sandbox', ''); - root = select(iframe.nodes()[0]!.contentDocument!.body); - root.node().style.margin = 0; - } - // A container was provided by the caller if (container) { container.innerHTML = ''; @@ -190,11 +179,12 @@ const render = function ( // Remove previous tpm element if it exists let element; - if (cnf.securityLevel !== 'sandbox') { - element = document.querySelector('#' + 'd' + id); + if (cnf.securityLevel === 'sandbox') { + element = document.querySelector('#i' + id); } else { - element = document.querySelector('#' + 'i' + id); + element = document.querySelector('#d' + id); } + if (element) { element.remove(); } @@ -260,7 +250,7 @@ const render = function ( // classDef if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') { const classes: any = flowRenderer.getClasses(text, diag); - const htmlLabels = cnf.htmlLabels || cnf.flowchart.htmlLabels; + const htmlLabels = cnf.htmlLabels || cnf.flowchart?.htmlLabels; for (const className in classes) { if (htmlLabels) { userStyles += `\n.${className} > * { ${classes[className].styles.join( @@ -318,10 +308,8 @@ const render = function ( let svgCode = root.select('#d' + id).node().innerHTML; log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute); - if ( - (!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') && - cnf.arrowMarkerAbsolute !== 'sandbox' - ) { + // TODO Q: Needs verification. + if (!cnf.arrowMarkerAbsolute && cnf.securityLevel !== 'sandbox') { svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g'); }