marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-27 11:19:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

create selectSvgElement

Browse Source
This commit is contained in:
Reda Al Sulais
2023-08-03 21:34:22 +03:00
parent 0c55e4c2ad
commit e2fac72166
2 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/mermaid/src/diagrams/info/infoRenderer.ts
View File

@@ -1,8 +1,7 @@
import { select } from 'd3';
import { log } from '../../logger.js';
import { getConfig } from '../../config.js';
import { configureSvgSize } from '../../setupGraphViewbox.js';
import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
import type { DrawDefinition, 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.
@@ -15,17 +14,7 @@ const draw: DrawDefinition = (text, id, version) => {
try {
log.debug('rendering info diagram\n' + text);
const { securityLevel } = getConfig();
// handle root and document for when rendering in sandbox mode
let doc: Document = document;
if (securityLevel === 'sandbox') {
const sandboxElement: HTML = select(`#i${id}`);
doc = sandboxElement.node()?.contentDocument ?? doc;
}
const root: HTML =
securityLevel === 'sandbox' ? select(doc.body as HTMLIFrameElement) : select('body');
const svg: SVG = root.select(`#${id}`);
const svg: SVG = selectSvgElement(id);
configureSvgSize(svg, 100, 400, true);
svg

24
packages/mermaid/src/rendering-util/selectSvgElement.ts Normal file
View File

@@ -0,0 +1,24 @@
import { select } from 'd3';
import { getConfig } from '../config.js';
import type { HTML, SVG } from '../diagram-api/types.js';
/**
* Selects the SVG element using {@link id}.
*
* @param id - The diagram ID.
* @returns The selected {@link SVG} element using {@link id}.
*/
export const selectSvgElement = (id: string): SVG => {
const { securityLevel } = getConfig();
// handle root and document for when rendering in sandbox mode
let doc: Document = document;
if (securityLevel === 'sandbox') {
const sandboxElement: HTML = select(`#i${id}`);
doc = sandboxElement.node()?.contentDocument ?? doc;
}
const root: HTML =
securityLevel === 'sandbox' ? select(doc.body as HTMLIFrameElement) : select('body');
const svg: SVG = root.select(`#${id}`);
return svg;
};