diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 72f18cace..330c136dc 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -96,7 +96,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667) +[mermaidAPI.ts:669](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L669) ## Functions @@ -127,7 +127,7 @@ Return the last node appended #### Defined in -[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308) +[mermaidAPI.ts:310](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L310) --- @@ -320,4 +320,4 @@ Remove any existing elements from the given document #### Defined in -[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358) +[mermaidAPI.ts:360](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L360) diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index 3b8d00456..860e965ac 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -79,8 +79,10 @@ export type DrawDefinition = ( */ export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void; -export type HTML = d3.Selection; +export type HTML = d3.Selection; -export type SVG = d3.Selection; +export type SVG = d3.Selection; + +export type Group = d3.Selection; export type DiagramStylesProvider = (options?: any) => string; diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts index 79f3ec992..25ae72fce 100644 --- a/packages/mermaid/src/diagrams/info/infoRenderer.ts +++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts @@ -1,7 +1,7 @@ -import { select } from 'd3'; import { log } from '../../logger.js'; -import { getConfig } from '../../config.js'; -import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; /** * Draws a an info picture in the tag with id: id based on the graph definition in text. @@ -11,40 +11,20 @@ import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js'; * @param version - MermaidJS version. */ const draw: DrawDefinition = (text, id, version) => { - try { - log.debug('rendering info diagram\n' + text); + log.debug('rendering info diagram\n' + text); - const { securityLevel } = getConfig(); - // handle root and document for when rendering in sandbox mode - let sandboxElement: HTML | undefined; - let document: Document | null | undefined; - if (securityLevel === 'sandbox') { - sandboxElement = select('#i' + id); - document = sandboxElement.nodes()[0].contentDocument; - } + const svg: SVG = selectSvgElement(id); + configureSvgSize(svg, 100, 400, true); - // @ts-ignore - figure out how to assign HTML to document type - const root: HTML = - sandboxElement !== undefined && document !== undefined && document !== null - ? select(document) - : select('body'); - - const svg: SVG = root.select('#' + id); - svg.attr('height', 100); - svg.attr('width', 400); - - const g = svg.append('g'); - - g.append('text') // text label for the x axis - .attr('x', 100) - .attr('y', 40) - .attr('class', 'version') - .attr('font-size', '32px') - .style('text-anchor', 'middle') - .text('v ' + version); - } catch (e) { - log.error('error while rendering info diagram', e); - } + const group: Group = svg.append('g'); + group + .append('text') + .attr('x', 100) + .attr('y', 40) + .attr('class', 'version') + .attr('font-size', 32) + .style('text-anchor', 'middle') + .text(`v${version}`); }; export const renderer = { draw }; diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 4d8d95290..70b314daa 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -285,7 +285,9 @@ export const cleanUpSvgCode = ( * TODO replace btoa(). Replace with buf.toString('base64')? */ export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => { - const height = svgElement ? svgElement.viewBox.baseVal.height + 'px' : IFRAME_HEIGHT; + const height = svgElement?.viewBox?.baseVal?.height + ? svgElement.viewBox.baseVal.height + 'px' + : IFRAME_HEIGHT; const base64encodedSrc = btoa('' + svgCode + ''); return `