add HTML type and change svg type generic types

This commit is contained in:
Yokozuna59
2023-06-13 19:55:00 +03:00
parent ae14f6a947
commit 750b1d2223
2 changed files with 15 additions and 11 deletions

View File

@@ -1,5 +1,6 @@
import { Diagram } from '../Diagram.js'; import { Diagram } from '../Diagram.js';
import { MermaidConfig } from '../config.type.js'; import { MermaidConfig } from '../config.type.js';
import type * as d3 from 'd3';
export interface InjectUtils { export interface InjectUtils {
_log: any; _log: any;
@@ -78,4 +79,6 @@ export type DrawDefinition = (
*/ */
export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void; export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void;
export type SVG = d3.Selection<HTMLFrameElement, unknown, HTMLElement, unknown>; export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;

View File

@@ -2,7 +2,7 @@
import { select } from 'd3'; import { select } from 'd3';
import { log } from '../../logger.js'; import { log } from '../../logger.js';
import { getConfig } from '../../config.js'; import { getConfig } from '../../config.js';
import type { DrawDefinition, SVG } from '../../diagram-api/types.js'; import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
/** /**
* Draws a an info picture in the tag with id: id based on the graph definition in text. * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -17,19 +17,20 @@ export const draw: DrawDefinition = (text, id, version) => {
const securityLevel = getConfig().securityLevel; const securityLevel = getConfig().securityLevel;
// handle root and document for when rendering in sandbox mode // handle root and document for when rendering in sandbox mode
let sandboxElement: SVG | undefined; let sandboxElement: HTML | undefined;
let document: Document | null | undefined;
if (securityLevel === 'sandbox') { if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id); sandboxElement = select('#i' + id);
} document = sandboxElement.nodes()[0].contentDocument;
let root;
if (securityLevel === 'sandbox' && sandboxElement !== undefined) {
root = select(sandboxElement.nodes()[0].contentDocument!.body);
} else {
root = select('body');
} }
// @ts-ignore - TODO: figure out how to resolve this // @ts-ignore - figure out how to assign HTML to document type
const svg = root.select('#' + id); 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('height', 100);
svg.attr('width', 400); svg.attr('width', 400);