diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index afa2241a1..c6d263ac6 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -132,7 +132,7 @@ const config: Partial = { */ secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'], /** - * This option specifies if Mermaid can expected the dependnet to include KaTeX stylesheets for browsers + * This option specifies if Mermaid can expected the dependent to include KaTeX stylesheets for browsers * without their own MathML implementation. If this option is disabled and MathML is not supported, the math * equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will * fall back to legacy rendering for KaTeX. diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 81ba64bee..87f6653fe 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -172,7 +172,6 @@ export const parseGenericTypes = function (text: string): string { } }; - // TODO: find a better method for detecting support. This interface was added in the MathML 4 spec. // Firefox versions between [4,71] (0.47%) and Safari versions between [5,13.4] (0.17%) don't have this interface implemented but MathML is supported export const isMathMLSupported = window.MathMLElement !== undefined; @@ -188,16 +187,15 @@ export const katexRegex = /\$\$(.*)\$\$/g; export const hasKatex = (text: string): boolean => (text.match(katexRegex)?.length ?? 0) > 0; /** - * Computes the minimum dimensions needed to display a div contianing MathML + * Computes the minimum dimensions needed to display a div containing MathML * * @param text - The text to test * @param config - Configuration for Mermaid - * @returns Object containing {width, height} + * @returns Object containing \{width, height\} */ export const calculateMathMLDimensions = (text: string, config: MermaidConfig) => { - text = renderKatex(text, config); - const divElem = document.createElement('div') + const divElem = document.createElement('div'); divElem.innerHTML = text; divElem.id = 'katex-temp'; divElem.style.visibility = 'hidden'; @@ -205,10 +203,10 @@ export const calculateMathMLDimensions = (text: string, config: MermaidConfig) = divElem.style.top = '0'; const body = document.querySelector('body'); body?.insertAdjacentElement('beforeend', divElem); - const dim = {width: divElem.clientWidth, height: divElem.clientHeight}; + const dim = { width: divElem.clientWidth, height: divElem.clientHeight }; divElem.remove(); return dim; -} +}; // export const temp = (text: string, config: MermaidConfig) => { // return renderKatex(text, config).split(lineBreakRegex).map((text) => @@ -228,21 +226,26 @@ export const renderKatex = (text: string, config: MermaidConfig): string => { if (isMathMLSupported || (!isMathMLSupported && config.legacyMathML)) { return text .split(lineBreakRegex) - .map((line) => hasKatex(line) ? - ` + .map((line) => + hasKatex(line) + ? `
${line}
- ` : - `
${line}
` - ) + ` + : `
${line}
` + ) .join('') .replace(katexRegex, (r, c) => katex - .renderToString(c, { throwOnError: true, displayMode: true, output: isMathMLSupported ? 'mathml' : 'htmlAndMathml' }) + .renderToString(c, { + throwOnError: true, + displayMode: true, + output: isMathMLSupported ? 'mathml' : 'htmlAndMathml', + }) .replace(/\n/g, ' ') .replace(//g, '') - ) + ); } return text.replace(katexRegex, 'MathML is unsupported in this environment.'); }; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js index 4c2d83447..f71ad5bdc 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js @@ -318,7 +318,7 @@ export const addEdges = function (edges, g, diagObj) { edgeData.labelpos = 'c'; } edgeData.labelType = edge.labelType; - edgeData.label = renderKatex(edge.text.replace(common.lineBreakRegex, '\n')), getConfig(); + edgeData.label = renderKatex(edge.text.replace(common.lineBreakRegex, '\n'), getConfig()); if (edge.style === undefined) { edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;'; diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index 5df3a79ff..a765f596b 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -301,9 +301,9 @@ function boundMessage(_diagram, msgModel): number { const { startx, stopx, message } = msgModel; const lines = common.splitBreaks(message).length; const isKatexMsg = hasKatex(message); - const textDims = isKatexMsg ? - calculateMathMLDimensions(message, configApi.getConfig()) : - utils.calculateTextDimensions(message, messageFont(conf)); + const textDims = isKatexMsg + ? calculateMathMLDimensions(message, configApi.getConfig()) + : utils.calculateTextDimensions(message, messageFont(conf)); if (!isKatexMsg) { const lineHeight = textDims.height / lines; @@ -368,7 +368,9 @@ const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Di textObj.textMargin = conf.wrapPadding; textObj.tspan = false; - hasKatex(textObj.text) ? drawKatex(diagram, textObj, {startx, stopx, starty: lineStartY}) : drawText(diagram, textObj); + hasKatex(textObj.text) + ? drawKatex(diagram, textObj, { startx, stopx, starty: lineStartY }) + : drawText(diagram, textObj); const textWidth = textDims.width; @@ -1011,9 +1013,9 @@ function getMaxMessageWidthPerActor( const wrappedMessage = msg.wrap ? utils.wrapLabel(msg.message, conf.width - 2 * conf.wrapPadding, textFont) : msg.message; - const messageDimensions = hasKatex(wrappedMessage) ? - calculateMathMLDimensions(msg.message, configApi.getConfig()) : - utils.calculateTextDimensions(wrappedMessage, textFont); + const messageDimensions = hasKatex(wrappedMessage) + ? calculateMathMLDimensions(msg.message, configApi.getConfig()) + : utils.calculateTextDimensions(wrappedMessage, textFont); const messageWidth = messageDimensions.width + 2 * conf.wrapPadding; /* @@ -1124,9 +1126,9 @@ function calculateActorMargins( actorFont(conf) ); } - const actDims = hasKatex(actor.description) ? - calculateMathMLDimensions(actor.description, configApi.getConfig()) : - utils.calculateTextDimensions(actor.description, actorFont(conf)); + const actDims = hasKatex(actor.description) + ? calculateMathMLDimensions(actor.description, configApi.getConfig()) + : utils.calculateTextDimensions(actor.description, actorFont(conf)); actor.width = actor.wrap ? conf.width @@ -1190,22 +1192,22 @@ const buildNoteModel = function (msg, actors, diagObj) { const stopx = actors[msg.to].x; const shouldWrap = msg.wrap && msg.message; - let textDimensions: {width: number, height: number, lineHeight?: number} = hasKatex(msg.message) ? - calculateMathMLDimensions(msg.message, configApi.getConfig()) : - utils.calculateTextDimensions( - shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message, - noteFont(conf) - ); + let textDimensions: { width: number; height: number; lineHeight?: number } = hasKatex(msg.message) + ? calculateMathMLDimensions(msg.message, configApi.getConfig()) + : utils.calculateTextDimensions( + shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message, + noteFont(conf) + ); const noteModel = { width: shouldWrap ? conf.width : Math.max(conf.width, textDimensions.width + 2 * conf.noteMargin), - height: 0, - startx: actors[msg.from].x, - stopx: 0, - starty: 0, - stopy: 0, - message: msg.message, + height: 0, + startx: actors[msg.from].x, + stopx: 0, + starty: 0, + stopy: 0, + message: msg.message, }; if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF) { noteModel.width = shouldWrap diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index 3e5a2a129..b9ada149b 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -149,7 +149,7 @@ export const drawKatex = function (elem, textData, msgModel = null) { stopx = temp; } - textElem.attr('x', Math.round(startx + Math.abs(startx - stopx) / 2 - dim.width / 2)) + textElem.attr('x', Math.round(startx + Math.abs(startx - stopx) / 2 - dim.width / 2)); if (textData.class === 'loopText') { textElem.attr('y', Math.round(starty)); } else { @@ -633,7 +633,6 @@ export const drawLoop = function (elem, loopModel, labelText, conf) { txt.fontWeight = fontWeight; txt.wrap = true; - let textElem = hasKatex(txt.text) ? drawKatex(g, txt, loopModel) : drawText(g, txt); if (loopModel.sectionTitles !== undefined) { @@ -910,6 +909,17 @@ const _drawTextCandidateFunc = (function () { _setTextAttrs(text, textAttrs); } + /** + * + * @param content + * @param g + * @param x + * @param y + * @param width + * @param height + * @param textAttrs + * @param conf + */ function byKatex(content, g, x, y, width, height, textAttrs, conf) { // TODO duplicate render calls, optimize const dim = calculateMathMLDimensions(content, configApi.getConfig()); @@ -946,7 +956,9 @@ const _drawTextCandidateFunc = (function () { } return function (conf, hasKatex = false) { - if (hasKatex) return byKatex; + if (hasKatex) { + return byKatex; + } return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan; }; })();