From 5c69e5fdb004a6d0a2abe97e23d26e223a059832 Mon Sep 17 00:00:00 2001 From: NicolasNewman Date: Fri, 23 Jun 2023 16:53:01 +0900 Subject: [PATCH] feat(katex): optimized importing of katex --- .../mermaid/src/diagrams/common/common.ts | 19 ++-- .../src/diagrams/flowchart/flowRenderer-v2.js | 20 ++--- .../src/diagrams/flowchart/flowRenderer.js | 22 ++--- .../src/diagrams/sequence/sequenceRenderer.ts | 90 ++++++++++--------- .../mermaid/src/diagrams/sequence/svgDraw.js | 40 ++++----- 5 files changed, 93 insertions(+), 98 deletions(-) diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 611d3512a..22eb61b19 100644 --- a/packages/mermaid/src/diagrams/common/common.ts +++ b/packages/mermaid/src/diagrams/common/common.ts @@ -1,6 +1,4 @@ import DOMPurify from 'dompurify'; -// @ts-ignore @types/katex does not work -import katex from 'katex'; import { MermaidConfig } from '../../config.type.js'; export const lineBreakRegex = //gi; @@ -219,8 +217,8 @@ export const hasKatex = (text: string): boolean => (text.match(katexRegex)?.leng * @param config - Configuration for Mermaid * @returns Object containing \{width, height\} */ -export const calculateMathMLDimensions = (text: string, config: MermaidConfig) => { - text = renderKatex(text, config); +export const calculateMathMLDimensions = async (text: string, config: MermaidConfig) => { + text = await renderKatex(text, config); const divElem = document.createElement('div'); divElem.innerHTML = text; divElem.id = 'katex-temp'; @@ -234,13 +232,6 @@ export const calculateMathMLDimensions = (text: string, config: MermaidConfig) = return dim; }; -// export const temp = (text: string, config: MermaidConfig) => { -// return renderKatex(text, config).split(lineBreakRegex).map((text) => -// hasKatex(text) ? -// `
${text}
` : -// `
${text}
`).join(''); -// } - /** * Attempts to render and return the KaTeX portion of a string with MathML * @@ -248,8 +239,10 @@ export const calculateMathMLDimensions = (text: string, config: MermaidConfig) = * @param config - Configuration for Mermaid * @returns String containing MathML if KaTeX is supported, or an error message if it is not and stylesheets aren't present */ -export const renderKatex = (text: string, config: MermaidConfig): string => { - if (isMathMLSupported() || (!isMathMLSupported() && config.legacyMathML)) { +export const renderKatex = async (text: string, config: MermaidConfig): Promise => { + if ((hasKatex(text) && isMathMLSupported()) || (!isMathMLSupported() && config.legacyMathML)) { + // @ts-ignore @types/katex does not work + const katex = (await import('katex')).default; return text .split(lineBreakRegex) .map((line) => diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js index f71ad5bdc..47e0d068d 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js @@ -30,12 +30,12 @@ export const setConf = function (cnf) { * @param doc * @param diagObj */ -export const addVertices = function (vert, g, svgId, root, doc, diagObj) { +export const addVertices = async function (vert, g, svgId, root, doc, diagObj) { const svg = root.select(`[id="${svgId}"]`); const keys = Object.keys(vert); // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition - keys.forEach(function (id) { + for (const id of keys) { const vertex = vert[id]; /** @@ -143,7 +143,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) { default: _shape = 'rect'; } - const labelText = renderKatex(vertexText, getConfig()); + const labelText = await renderKatex(vertexText, getConfig()); // Add the node g.setNode(vertex.id, { @@ -185,7 +185,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) { props: vertex.props, padding: getConfig().flowchart.padding, }); - }); + } }; /** @@ -195,7 +195,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) { * @param {object} g The graph object * @param diagObj */ -export const addEdges = function (edges, g, diagObj) { +export const addEdges = async function (edges, g, diagObj) { log.info('abc78 edges = ', edges); let cnt = 0; let linkIdCnt = {}; @@ -209,7 +209,7 @@ export const addEdges = function (edges, g, diagObj) { defaultLabelStyle = defaultStyles.labelStyle; } - edges.forEach(function (edge) { + for (const edge of edges) { cnt++; // Identify Link @@ -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 = await renderKatex(edge.text.replace(common.lineBreakRegex, '\n'), getConfig()); if (edge.style === undefined) { edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;'; @@ -331,7 +331,7 @@ export const addEdges = function (edges, g, diagObj) { // Add the edge to the graph g.setEdge(edge.start, edge.end, edgeData, cnt); - }); + } }; /** @@ -438,8 +438,8 @@ export const draw = async function (text, id, _version, diagObj) { g.setParent(subG.nodes[j], subG.id); } } - addVertices(vert, g, id, root, doc, diagObj); - addEdges(edges, g, diagObj); + await addVertices(vert, g, id, root, doc, diagObj); + await addEdges(edges, g, diagObj); // Add custom shapes // flowChartShapes.addToRenderV2(addShape); diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js index c5ce60c43..01742c2e1 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js @@ -28,13 +28,13 @@ export const setConf = function (cnf) { * @param _doc * @param diagObj */ -export const addVertices = function (vert, g, svgId, root, _doc, diagObj) { +export const addVertices = async function (vert, g, svgId, root, _doc, diagObj) { const svg = !root ? select(`[id="${svgId}"]`) : root.select(`[id="${svgId}"]`); const doc = !_doc ? document : _doc; const keys = Object.keys(vert); // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition - keys.forEach(function (id) { + for (const id of keys) { const vertex = vert[id]; /** @@ -57,7 +57,7 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) { if (evaluate(getConfig().flowchart.htmlLabels)) { // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? const node = { - label: renderKatex( + label: await renderKatex( vertexText.replace( /fa[blrs]?:fa-[\w-]+/g, (s) => `` @@ -153,7 +153,7 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) { style: styles.style, id: diagObj.db.lookUpDomId(vertex.id), }); - }); + } }; /** @@ -163,7 +163,7 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) { * @param {object} g The graph object * @param diagObj */ -export const addEdges = function (edges, g, diagObj) { +export const addEdges = async function (edges, g, diagObj) { let cnt = 0; let defaultStyle; @@ -175,7 +175,7 @@ export const addEdges = function (edges, g, diagObj) { defaultLabelStyle = defaultStyles.labelStyle; } - edges.forEach(function (edge) { + for (const edge of edges) { cnt++; // Identify Link @@ -242,7 +242,7 @@ export const addEdges = function (edges, g, diagObj) { edgeData.labelType = 'html'; edgeData.label = `${renderKatex( + }">${await renderKatex( edge.text.replace( /fa[blrs]?:fa-[\w-]+/g, (s) => `` @@ -267,7 +267,7 @@ export const addEdges = function (edges, g, diagObj) { // Add the edge to the graph g.setEdge(diagObj.db.lookUpDomId(edge.start), diagObj.db.lookUpDomId(edge.end), edgeData, cnt); - }); + } }; /** @@ -298,7 +298,7 @@ export const getClasses = function (text, diagObj) { * @param _version * @param diagObj */ -export const draw = function (text, id, _version, diagObj) { +export const draw = async function (text, id, _version, diagObj) { log.info('Drawing flowchart'); diagObj.db.clear(); const { securityLevel, flowchart: conf } = getConfig(); @@ -372,8 +372,8 @@ export const draw = function (text, id, _version, diagObj) { g.setParent(diagObj.db.lookUpDomId(subG.nodes[j]), diagObj.db.lookUpDomId(subG.id)); } } - addVertices(vert, g, id, root, doc, diagObj); - addEdges(edges, g, diagObj); + await addVertices(vert, g, id, root, doc, diagObj); + await addEdges(edges, g, diagObj); // Create the renderer const render = new Render(); diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index 5710869fb..57d55fd2f 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -237,7 +237,7 @@ interface NoteModel { * @param elem - The diagram to draw to. * @param noteModel - Note model options. */ -const drawNote = function (elem: any, noteModel: NoteModel) { +const drawNote = async function (elem: any, noteModel: NoteModel) { bounds.bumpVerticalPos(conf.boxMargin); noteModel.height = conf.boxMargin; noteModel.starty = bounds.getVerticalPos(); @@ -263,7 +263,7 @@ const drawNote = function (elem: any, noteModel: NoteModel) { textObj.textMargin = conf.noteMargin; textObj.valign = 'center'; - const textElem = hasKatex(textObj.text) ? drawKatex(g, textObj) : drawText(g, textObj); + const textElem = hasKatex(textObj.text) ? await drawKatex(g, textObj) : drawText(g, textObj); const textHeight = Math.round( textElem @@ -311,13 +311,13 @@ const actorFont = (cnf) => { * @param msgModel - The model containing fields describing a message * @returns `lineStartY` - The Y coordinate at which the message line starts */ -function boundMessage(_diagram, msgModel): number { +async function boundMessage(_diagram, msgModel): number { bounds.bumpVerticalPos(10); const { startx, stopx, message } = msgModel; const lines = common.splitBreaks(message).length; const isKatexMsg = hasKatex(message); const textDims = isKatexMsg - ? calculateMathMLDimensions(message, configApi.getConfig()) + ? await calculateMathMLDimensions(message, configApi.getConfig()) : utils.calculateTextDimensions(message, messageFont(conf)); if (!isKatexMsg) { @@ -365,7 +365,7 @@ function boundMessage(_diagram, msgModel): number { * @param lineStartY - The Y coordinate at which the message line starts * @param diagObj - The diagram object. */ -const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Diagram) { +const drawMessage = async function (diagram, msgModel, lineStartY: number, diagObj: Diagram) { const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel; const textDims = utils.calculateTextDimensions(message, messageFont(conf)); const textObj = svgDrawCommon.getTextObj(); @@ -384,7 +384,7 @@ const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Di textObj.tspan = false; hasKatex(textObj.text) - ? drawKatex(diagram, textObj, { startx, stopx, starty: lineStartY }) + ? await drawKatex(diagram, textObj, { startx, stopx, starty: lineStartY }) : drawText(diagram, textObj); const textWidth = textDims.width; @@ -485,7 +485,7 @@ const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Di } }; -export const drawActors = function ( +export const drawActors = async function ( diagram, actors, actorKeys, @@ -539,7 +539,7 @@ export const drawActors = function ( actor.y = bounds.getVerticalPos(); // Draw the box with the attached line - const height = svgDraw.drawActor(diagram, actor, conf, isFooter); + const height = await svgDraw.drawActor(diagram, actor, conf, isFooter); maxHeight = common.getMax(maxHeight, height); bounds.insert(actor.x, verticalPos, actor.x + actor.width, actor.height); @@ -648,7 +648,7 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop * @param _version - Mermaid version from package.json * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram */ -export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) { +export const draw = async function (_text: string, id: string, _version: string, diagObj: Diagram) { const { securityLevel, sequence } = configApi.getConfig(); conf = sequence; diagObj.db.clear(); @@ -679,8 +679,8 @@ export const draw = function (_text: string, id: string, _version: string, diagO const title = diagObj.db.getDiagramTitle(); const hasBoxes = diagObj.db.hasAtLeastOneBox(); const hasBoxTitles = diagObj.db.hasAtLeastOneBoxWithTitle(); - const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages, diagObj); - conf.height = calculateActorMargins(actors, maxMessageWidthPerActor, boxes); + const maxMessageWidthPerActor = await getMaxMessageWidthPerActor(actors, messages, diagObj); + conf.height = await calculateActorMargins(actors, maxMessageWidthPerActor, boxes); svgDraw.insertComputerIcon(diagram); svgDraw.insertDatabaseIcon(diagram); @@ -693,8 +693,8 @@ export const draw = function (_text: string, id: string, _version: string, diagO } } - drawActors(diagram, actors, actorKeys, 0, conf, messages, false); - const loopWidths = calculateLoopBounds(messages, actors, maxMessageWidthPerActor, diagObj); + await drawActors(diagram, actors, actorKeys, 0, conf, messages, false); + const loopWidths = await calculateLoopBounds(messages, actors, maxMessageWidthPerActor, diagObj); // The arrow head definition is attached to the svg once svgDraw.insertArrowHead(diagram); @@ -727,14 +727,14 @@ export const draw = function (_text: string, id: string, _version: string, diagO let sequenceIndex = 1; let sequenceIndexStep = 1; const messagesToDraw = []; - messages.forEach(function (msg) { + for (const msg of messages) { let loopModel, noteModel, msgModel; switch (msg.type) { case diagObj.db.LINETYPE.NOTE: bounds.resetVerticalPos(); noteModel = msg.noteModel; - drawNote(diagram, noteModel); + await drawNote(diagram, noteModel); break; case diagObj.db.LINETYPE.ACTIVE_START: bounds.newActivation(msg, diagram, actors); @@ -753,7 +753,7 @@ export const draw = function (_text: string, id: string, _version: string, diagO break; case diagObj.db.LINETYPE.LOOP_END: loopModel = bounds.endLoop(); - svgDraw.drawLoop(diagram, loopModel, 'loop', conf); + await svgDraw.drawLoop(diagram, loopModel, 'loop', conf); bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos()); bounds.models.addLoop(loopModel); break; @@ -779,7 +779,7 @@ export const draw = function (_text: string, id: string, _version: string, diagO break; case diagObj.db.LINETYPE.OPT_END: loopModel = bounds.endLoop(); - svgDraw.drawLoop(diagram, loopModel, 'opt', conf); + await svgDraw.drawLoop(diagram, loopModel, 'opt', conf); bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos()); bounds.models.addLoop(loopModel); break; @@ -803,7 +803,7 @@ export const draw = function (_text: string, id: string, _version: string, diagO break; case diagObj.db.LINETYPE.ALT_END: loopModel = bounds.endLoop(); - svgDraw.drawLoop(diagram, loopModel, 'alt', conf); + await svgDraw.drawLoop(diagram, loopModel, 'alt', conf); bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos()); bounds.models.addLoop(loopModel); break; @@ -829,7 +829,7 @@ export const draw = function (_text: string, id: string, _version: string, diagO break; case diagObj.db.LINETYPE.PAR_END: loopModel = bounds.endLoop(); - svgDraw.drawLoop(diagram, loopModel, 'par', conf); + await svgDraw.drawLoop(diagram, loopModel, 'par', conf); bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos()); bounds.models.addLoop(loopModel); break; @@ -862,7 +862,7 @@ export const draw = function (_text: string, id: string, _version: string, diagO break; case diagObj.db.LINETYPE.CRITICAL_END: loopModel = bounds.endLoop(); - svgDraw.drawLoop(diagram, loopModel, 'critical', conf); + await svgDraw.drawLoop(diagram, loopModel, 'critical', conf); bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos()); bounds.models.addLoop(loopModel); break; @@ -877,7 +877,7 @@ export const draw = function (_text: string, id: string, _version: string, diagO break; case diagObj.db.LINETYPE.BREAK_END: loopModel = bounds.endLoop(); - svgDraw.drawLoop(diagram, loopModel, 'break', conf); + await svgDraw.drawLoop(diagram, loopModel, 'break', conf); bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos()); bounds.models.addLoop(loopModel); break; @@ -889,7 +889,7 @@ export const draw = function (_text: string, id: string, _version: string, diagO msgModel.starty = bounds.getVerticalPos(); msgModel.sequenceIndex = sequenceIndex; msgModel.sequenceVisible = diagObj.db.showSequenceNumbers(); - const lineStartY = boundMessage(diagram, msgModel); + const lineStartY = await boundMessage(diagram, msgModel); messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY }); bounds.models.addMessage(msgModel); } catch (e) { @@ -912,19 +912,21 @@ export const draw = function (_text: string, id: string, _version: string, diagO ) { sequenceIndex = sequenceIndex + sequenceIndexStep; } - }); + } - messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj)); + for (const e of messagesToDraw) { + await drawMessage(diagram, e.messageModel, e.lineStartY, diagObj); + } if (conf.mirrorActors) { // Draw actors below diagram bounds.bumpVerticalPos(conf.boxMargin * 2); - drawActors(diagram, actors, actorKeys, bounds.getVerticalPos(), conf, messages, true); + await drawActors(diagram, actors, actorKeys, bounds.getVerticalPos(), conf, messages, true); bounds.bumpVerticalPos(conf.boxMargin); fixLifeLineHeights(diagram, bounds.getVerticalPos()); } - bounds.models.boxes.forEach(function (box) { + for (const box of bounds.models.boxes) { box.height = bounds.getVerticalPos() - box.y; bounds.insert(box.x, box.y, box.x + box.width, box.height); box.startx = box.x; @@ -932,8 +934,8 @@ export const draw = function (_text: string, id: string, _version: string, diagO box.stopx = box.startx + box.width; box.stopy = box.starty + box.height; box.stroke = 'rgb(0,0,0, 0.5)'; - svgDraw.drawBox(diagram, box, conf); - }); + await svgDraw.drawBox(diagram, box, conf); + } if (hasBoxes) { bounds.bumpVerticalPos(conf.boxMargin); @@ -1004,14 +1006,14 @@ export const draw = function (_text: string, id: string, _version: string, diagO * @param diagObj - The diagram object. * @returns The max message width of each actor. */ -function getMaxMessageWidthPerActor( +async function getMaxMessageWidthPerActor( actors: { [id: string]: any }, messages: any[], diagObj: Diagram -): { [id: string]: number } { +): Promise<{ [id: string]: number }> { const maxMessageWidthPerActor = {}; - messages.forEach(function (msg) { + for (const msg of messages) { if (actors[msg.to] && actors[msg.from]) { const actor = actors[msg.to]; @@ -1033,7 +1035,7 @@ function getMaxMessageWidthPerActor( ? utils.wrapLabel(msg.message, conf.width - 2 * conf.wrapPadding, textFont) : msg.message; const messageDimensions = hasKatex(wrappedMessage) - ? calculateMathMLDimensions(msg.message, configApi.getConfig()) + ? await calculateMathMLDimensions(msg.message, configApi.getConfig()) : utils.calculateTextDimensions(wrappedMessage, textFont); const messageWidth = messageDimensions.width + 2 * conf.wrapPadding; @@ -1099,7 +1101,7 @@ function getMaxMessageWidthPerActor( } } } - }); + } log.debug('maxMessageWidthPerActor:', maxMessageWidthPerActor); return maxMessageWidthPerActor; @@ -1130,13 +1132,13 @@ const getRequiredPopupWidth = function (actor) { * @param actorToMessageWidth - A map of actor key → max message width it holds * @param boxes - The boxes around the actors if any */ -function calculateActorMargins( +async function calculateActorMargins( actors: { [id: string]: any }, - actorToMessageWidth: ReturnType, + actorToMessageWidth: Awaited>, boxes ) { let maxHeight = 0; - Object.keys(actors).forEach((prop) => { + for (const prop of Object.keys(actors)) { const actor = actors[prop]; if (actor.wrap) { actor.description = utils.wrapLabel( @@ -1146,7 +1148,7 @@ function calculateActorMargins( ); } const actDims = hasKatex(actor.description) - ? calculateMathMLDimensions(actor.description, configApi.getConfig()) + ? await calculateMathMLDimensions(actor.description, configApi.getConfig()) : utils.calculateTextDimensions(actor.description, actorFont(conf)); actor.width = actor.wrap @@ -1155,7 +1157,7 @@ function calculateActorMargins( actor.height = actor.wrap ? common.getMax(actDims.height, conf.height) : conf.height; maxHeight = common.getMax(maxHeight, actor.height); - }); + } for (const actorKey in actorToMessageWidth) { const actor = actors[actorKey]; @@ -1206,13 +1208,13 @@ function calculateActorMargins( return common.getMax(maxHeight, conf.height); } -const buildNoteModel = function (msg, actors, diagObj) { +const buildNoteModel = async function (msg, actors, diagObj) { const startx = actors[msg.from].x; 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()) + ? await calculateMathMLDimensions(msg.message, configApi.getConfig()) : utils.calculateTextDimensions( shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message, noteFont(conf) @@ -1338,12 +1340,12 @@ const buildMessageModel = function (msg, actors, diagObj) { }; }; -const calculateLoopBounds = function (messages, actors, _maxWidthPerActor, diagObj) { +const calculateLoopBounds = async function (messages, actors, _maxWidthPerActor, diagObj) { const loops = {}; const stack = []; let current, noteModel, msgModel; - messages.forEach(function (msg) { + for (const msg of messages) { msg.id = utils.random({ length: 10 }); switch (msg.type) { case diagObj.db.LINETYPE.LOOP_START: @@ -1406,7 +1408,7 @@ const calculateLoopBounds = function (messages, actors, _maxWidthPerActor, diagO } const isNote = msg.placement !== undefined; if (isNote) { - noteModel = buildNoteModel(msg, actors, diagObj); + noteModel = await buildNoteModel(msg, actors, diagObj); msg.noteModel = noteModel; stack.forEach((stk) => { current = stk; @@ -1445,7 +1447,7 @@ const calculateLoopBounds = function (messages, actors, _maxWidthPerActor, diagO }); } } - }); + } bounds.activations = []; log.debug('Loop type widths:', loops); return loops; diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index 77a495b02..baa43e3aa 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -119,9 +119,9 @@ const popupMenuDownFunc = function (popupId) { } }; -export const drawKatex = function (elem, textData, msgModel = null) { +export const drawKatex = async function (elem, textData, msgModel = null) { let textElem = elem.append('foreignObject'); - const lines = renderKatex(textData.text, configApi.getConfig()); + const lines = await renderKatex(textData.text, configApi.getConfig()); const divElem = textElem .append('xhtml:div') @@ -353,7 +353,7 @@ export const fixLifeLineHeights = (diagram, bounds) => { * @param {any} conf - DrawText implementation discriminator object * @param {boolean} isFooter - If the actor is the footer one */ -const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { +const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) { const center = actor.x + actor.width / 2; const centerY = actor.y + 5; @@ -407,7 +407,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { } } - _drawTextCandidateFunc(conf, hasKatex(actor.description))( + await _drawTextCandidateFunc(conf, hasKatex(actor.description))( actor.description, g, rect.x, @@ -428,10 +428,9 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { return height; }; -const drawActorTypeActor = function (elem, actor, conf, isFooter) { +const drawActorTypeActor = async function (elem, actor, conf, isFooter) { const center = actor.x + actor.width / 2; const centerY = actor.y + 80; - if (!isFooter) { actorCnt++; elem @@ -496,7 +495,7 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) { const bounds = actElem.node().getBBox(); actor.height = bounds.height; - _drawTextCandidateFunc(conf, hasKatex(actor.description))( + await _drawTextCandidateFunc(conf, hasKatex(actor.description))( actor.description, actElem, rect.x, @@ -510,21 +509,21 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) { return actor.height; }; -export const drawActor = function (elem, actor, conf, isFooter) { +export const drawActor = async function (elem, actor, conf, isFooter) { switch (actor.type) { case 'actor': - return drawActorTypeActor(elem, actor, conf, isFooter); + return await drawActorTypeActor(elem, actor, conf, isFooter); case 'participant': - return drawActorTypeParticipant(elem, actor, conf, isFooter); + return await drawActorTypeParticipant(elem, actor, conf, isFooter); } }; -export const drawBox = function (elem, box, conf) { +export const drawBox = async function (elem, box, conf) { const boxplustextGroup = elem.append('g'); const g = boxplustextGroup; drawBackgroundRect(g, box); if (box.name) { - _drawTextCandidateFunc(conf)( + await _drawTextCandidateFunc(conf)( box.name, g, box.x, @@ -571,7 +570,7 @@ export const drawActivation = function (elem, bounds, verticalPos, conf, actorAc * @param {any} conf - Diagram configuration * @returns {any} */ -export const drawLoop = function (elem, loopModel, labelText, conf) { +export const drawLoop = async function (elem, loopModel, labelText, conf) { const { boxMargin, boxTextMargin, @@ -633,10 +632,10 @@ 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); + let textElem = hasKatex(txt.text) ? await drawKatex(g, txt, loopModel) : drawText(g, txt); if (loopModel.sectionTitles !== undefined) { - loopModel.sectionTitles.forEach(function (item, idx) { + for (const [idx, item] of Object.entries(loopModel.sectionTitles)) { if (item.message) { txt.text = item.message; txt.x = loopModel.startx + (loopModel.stopx - loopModel.startx) / 2; @@ -652,7 +651,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) { if (hasKatex(txt.text)) { loopModel.starty = loopModel.sections[idx].y; - drawKatex(g, txt, loopModel); + await drawKatex(g, txt, loopModel); } else { drawText(g, txt); } @@ -663,7 +662,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) { ); loopModel.sections[idx].height += sectionHeight - (boxMargin + boxTextMargin); } - }); + } } loopModel.height = Math.round(loopModel.stopy - loopModel.starty); @@ -951,9 +950,10 @@ const _drawTextCandidateFunc = (function () { * @param textAttrs * @param conf */ - function byKatex(content, g, x, y, width, height, textAttrs, conf) { + async function byKatex(content, g, x, y, width, height, textAttrs, conf) { // TODO duplicate render calls, optimize - const dim = calculateMathMLDimensions(content, configApi.getConfig()); + + const dim = await calculateMathMLDimensions(content, configApi.getConfig()); const s = g.append('switch'); const f = s .append('foreignObject') @@ -968,7 +968,7 @@ const _drawTextCandidateFunc = (function () { .append('div') .style('text-align', 'center') .style('vertical-align', 'middle') - .html(renderKatex(content, configApi.getConfig())); + .html(await renderKatex(content, configApi.getConfig())); byTspan(content, s, x, y, width, height, textAttrs, conf); _setTextAttrs(text, textAttrs);