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

chore: Rename Group to SVGGroup

Browse Source
This commit is contained in:
Sidharth Vinod
2024-08-21 17:39:01 +05:30
parent f6e1515f66
commit 037ba2fa9c
15 changed files with 61 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/mermaid/src/diagram-api/types.ts
View File

@@ -129,6 +129,6 @@ export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unkn
export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>; export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
export type Group = d3.Selection<SVGGElement, unknown, Element | null, unknown>; export type SVGGroup = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
export type DiagramStylesProvider = (options?: any) => string; export type DiagramStylesProvider = (options?: any) => string;

14
packages/mermaid/src/diagrams/common/svgDrawCommon.ts
View File

@@ -1,5 +1,6 @@
import { sanitizeUrl } from '@braintree/sanitize-url'; import { sanitizeUrl } from '@braintree/sanitize-url';
import type { Group, SVG } from '../../diagram-api/types.js'; import type { SVG, SVGGroup } from '../../diagram-api/types.js';
import { lineBreakRegex } from './common.js';
import type { import type {
Bound, Bound,
D3ImageElement, D3ImageElement,
@@ -11,9 +12,8 @@ import type {
TextData, TextData,
TextObject, TextObject,
} from './commonTypes.js'; } from './commonTypes.js';
import { lineBreakRegex } from './common.js';
export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => { export const drawRect = (element: SVG | SVGGroup, rectData: RectData): D3RectElement => {
const rectElement: D3RectElement = element.append('rect'); const rectElement: D3RectElement = element.append('rect');
rectElement.attr('x', rectData.x); rectElement.attr('x', rectData.x);
rectElement.attr('y', rectData.y); rectElement.attr('y', rectData.y);
@@ -50,7 +50,7 @@ export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElemen
* @param element - Diagram (reference for bounds) * @param element - Diagram (reference for bounds)
* @param bounds - Shape of the rectangle * @param bounds - Shape of the rectangle
*/ */
export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => { export const drawBackgroundRect = (element: SVG | SVGGroup, bounds: Bound): void => {
const rectData: RectData = { const rectData: RectData = {
x: bounds.startx, x: bounds.startx,
y: bounds.starty, y: bounds.starty,
@@ -64,7 +64,7 @@ export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void =>
rectElement.lower(); rectElement.lower();
}; };
export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => { export const drawText = (element: SVG | SVGGroup, textData: TextData): D3TextElement => {
const nText: string = textData.text.replace(lineBreakRegex, ' '); const nText: string = textData.text.replace(lineBreakRegex, ' ');
const textElem: D3TextElement = element.append('text'); const textElem: D3TextElement = element.append('text');
@@ -84,7 +84,7 @@ export const drawText = (element: SVG | Group, textData: TextData): D3TextElemen
return textElem; return textElem;
}; };
export const drawImage = (elem: SVG | Group, x: number, y: number, link: string): void => { export const drawImage = (elem: SVG | SVGGroup, x: number, y: number, link: string): void => {
const imageElement: D3ImageElement = elem.append('image'); const imageElement: D3ImageElement = elem.append('image');
imageElement.attr('x', x); imageElement.attr('x', x);
imageElement.attr('y', y); imageElement.attr('y', y);
@@ -93,7 +93,7 @@ export const drawImage = (elem: SVG | Group, x: number, y: number, link: string)
}; };
export const drawEmbeddedImage = ( export const drawEmbeddedImage = (
element: SVG | Group, element: SVG | SVGGroup,
x: number, x: number,
y: number, y: number,
link: string link: string

4
packages/mermaid/src/diagrams/error/errorRenderer.ts
View File

@@ -1,5 +1,5 @@
import type { SVG, SVGGroup } from '../../diagram-api/types.js';
import { log } from '../../logger.js'; import { log } from '../../logger.js';
import type { Group, SVG } from '../../diagram-api/types.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
import { configureSvgSize } from '../../setupGraphViewbox.js'; import { configureSvgSize } from '../../setupGraphViewbox.js';
@@ -13,7 +13,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
export const draw = (_text: string, id: string, version: string) => { export const draw = (_text: string, id: string, version: string) => {
log.debug('rendering svg for syntax error\n'); log.debug('rendering svg for syntax error\n');
const svg: SVG = selectSvgElement(id); const svg: SVG = selectSvgElement(id);
const g: Group = svg.append('g'); const g: SVGGroup = svg.append('g');
svg.attr('viewBox', '0 0 2412 512'); svg.attr('viewBox', '0 0 2412 512');
configureSvgSize(svg, 100, 512, true); configureSvgSize(svg, 100, 512, true);

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

@@ -1,7 +1,7 @@
import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
import { log } from '../../logger.js'; import { log } from '../../logger.js';
import { configureSvgSize } from '../../setupGraphViewbox.js';
import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
import { configureSvgSize } from '../../setupGraphViewbox.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.
@@ -16,7 +16,7 @@ const draw: DrawDefinition = (text, id, version) => {
const svg: SVG = selectSvgElement(id); const svg: SVG = selectSvgElement(id);
configureSvgSize(svg, 100, 400, true); configureSvgSize(svg, 100, 400, true);
const group: Group = svg.append('g'); const group: SVGGroup = svg.append('g');
group group
.append('text') .append('text')
.attr('x', 100) .attr('x', 100)

4
packages/mermaid/src/diagrams/packet/renderer.ts
View File

@@ -1,6 +1,6 @@
import type { Diagram } from '../../Diagram.js'; import type { Diagram } from '../../Diagram.js';
import type { PacketDiagramConfig } from '../../config.type.js'; import type { PacketDiagramConfig } from '../../config.type.js';
import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
import { configureSvgSize } from '../../setupGraphViewbox.js'; import { configureSvgSize } from '../../setupGraphViewbox.js';
import type { PacketDB, PacketWord } from './types.js'; import type { PacketDB, PacketWord } from './types.js';
@@ -39,7 +39,7 @@ const drawWord = (
rowNumber: number, rowNumber: number,
{ rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required<PacketDiagramConfig> { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required<PacketDiagramConfig>
) => { ) => {
const group: Group = svg.append('g'); const group: SVGGroup = svg.append('g');
const wordY = rowNumber * (rowHeight + paddingY) + paddingY; const wordY = rowNumber * (rowHeight + paddingY) + paddingY;
for (const block of word) { for (const block of word) {
const blockX = (block.start % bitsPerRow) * bitWidth + 1; const blockX = (block.start % bitsPerRow) * bitWidth + 1;

16
packages/mermaid/src/diagrams/pie/pieRenderer.ts
View File

@@ -1,13 +1,13 @@
import type d3 from 'd3'; import type d3 from 'd3';
import { scaleOrdinal, pie as d3pie, arc } from 'd3'; import { arc, pie as d3pie, scaleOrdinal } from 'd3';
import { log } from '../../logger.js';
import { configureSvgSize } from '../../setupGraphViewbox.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import { cleanAndMerge, parseFontSize } from '../../utils.js';
import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
import type { D3Section, PieDB, Sections } from './pieTypes.js';
import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js'; import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
import { log } from '../../logger.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
import { configureSvgSize } from '../../setupGraphViewbox.js';
import { cleanAndMerge, parseFontSize } from '../../utils.js';
import type { D3Section, PieDB, Sections } from './pieTypes.js';
const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Section>[] => { const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Section>[] => {
// Compute the position of each group on the pie: // Compute the position of each group on the pie:
@@ -46,7 +46,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
const height = 450; const height = 450;
const pieWidth: number = height; const pieWidth: number = height;
const svg: SVG = selectSvgElement(id); const svg: SVG = selectSvgElement(id);
const group: Group = svg.append('g'); const group: SVGGroup = svg.append('g');
group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')'); group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');
const { themeVariables } = globalConfig; const { themeVariables } = globalConfig;

4
packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
View File

@@ -1,4 +1,4 @@
import type { Group } from '../../../../../diagram-api/types.js'; import type { SVGGroup } from '../../../../../diagram-api/types.js';
import type { import type {
AxisDataType, AxisDataType,
ChartComponent, ChartComponent,
@@ -25,7 +25,7 @@ export function getAxis(
data: AxisDataType, data: AxisDataType,
axisConfig: XYChartAxisConfig, axisConfig: XYChartAxisConfig,
axisThemeConfig: XYChartAxisThemeConfig, axisThemeConfig: XYChartAxisThemeConfig,
tmpSVGGroup: Group tmpSVGGroup: SVGGroup
): Axis { ): Axis {
const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup); const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
if (isBandAxisData(data)) { if (isBandAxisData(data)) {

6
packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts
View File

@@ -1,13 +1,13 @@
import type { Group } from '../../../../diagram-api/types.js'; import type { SVGGroup } from '../../../../diagram-api/types.js';
import type { import type {
BoundingRect, BoundingRect,
ChartComponent, ChartComponent,
Dimension, Dimension,
DrawableElem, DrawableElem,
Point, Point,
XYChartConfig,
XYChartData, XYChartData,
XYChartThemeConfig, XYChartThemeConfig,
XYChartConfig,
} from '../interfaces.js'; } from '../interfaces.js';
import type { TextDimensionCalculator } from '../textDimensionCalculator.js'; import type { TextDimensionCalculator } from '../textDimensionCalculator.js';
import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js'; import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js';
@@ -84,7 +84,7 @@ export function getChartTitleComponent(
chartConfig: XYChartConfig, chartConfig: XYChartConfig,
chartData: XYChartData, chartData: XYChartData,
chartThemeConfig: XYChartThemeConfig, chartThemeConfig: XYChartThemeConfig,
tmpSVGGroup: Group tmpSVGGroup: SVGGroup
): ChartComponent { ): ChartComponent {
const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup); const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig); return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig);

4
packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
View File

@@ -1,4 +1,4 @@
import type { Group } from '../../../diagram-api/types.js'; import type { SVGGroup } from '../../../diagram-api/types.js';
import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js'; import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js';
import { Orchestrator } from './orchestrator.js'; import { Orchestrator } from './orchestrator.js';
@@ -7,7 +7,7 @@ export class XYChartBuilder {
config: XYChartConfig, config: XYChartConfig,
chartData: XYChartData, chartData: XYChartData,
chartThemeConfig: XYChartThemeConfig, chartThemeConfig: XYChartThemeConfig,
tmpSVGGroup: Group tmpSVGGroup: SVGGroup
): DrawableElem[] { ): DrawableElem[] {
const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup); const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup);
return orchestrator.getDrawableElement(); return orchestrator.getDrawableElement();

14
packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts
View File

@@ -1,3 +1,9 @@
import type { SVGGroup } from '../../../diagram-api/types.js';
import type { Axis } from './components/axis/index.js';
import { getAxis } from './components/axis/index.js';
import { getChartTitleComponent } from './components/chartTitle.js';
import type { Plot } from './components/plot/index.js';
import { getPlotComponent } from './components/plot/index.js';
import type { import type {
ChartComponent, ChartComponent,
DrawableElem, DrawableElem,
@@ -6,12 +12,6 @@ import type {
XYChartThemeConfig, XYChartThemeConfig,
} from './interfaces.js'; } from './interfaces.js';
import { isBarPlot } from './interfaces.js'; import { isBarPlot } from './interfaces.js';
import type { Axis } from './components/axis/index.js';
import { getAxis } from './components/axis/index.js';
import { getChartTitleComponent } from './components/chartTitle.js';
import type { Plot } from './components/plot/index.js';
import { getPlotComponent } from './components/plot/index.js';
import type { Group } from '../../../diagram-api/types.js';
export class Orchestrator { export class Orchestrator {
private componentStore: { private componentStore: {
@@ -24,7 +24,7 @@ export class Orchestrator {
private chartConfig: XYChartConfig, private chartConfig: XYChartConfig,
private chartData: XYChartData, private chartData: XYChartData,
chartThemeConfig: XYChartThemeConfig, chartThemeConfig: XYChartThemeConfig,
tmpSVGGroup: Group tmpSVGGroup: SVGGroup
) { ) {
this.componentStore = { this.componentStore = {
title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup), title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup),

6
packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts
View File

@@ -1,13 +1,13 @@
import type { Dimension } from './interfaces.js'; import type { SVGGroup } from '../../../diagram-api/types.js';
import { computeDimensionOfText } from '../../../rendering-util/createText.js'; import { computeDimensionOfText } from '../../../rendering-util/createText.js';
import type { Group } from '../../../diagram-api/types.js'; import type { Dimension } from './interfaces.js';
export interface TextDimensionCalculator { export interface TextDimensionCalculator {
getMaxDimension(texts: string[], fontSize: number): Dimension; getMaxDimension(texts: string[], fontSize: number): Dimension;
} }
export class TextDimensionCalculatorWithFont implements TextDimensionCalculator { export class TextDimensionCalculatorWithFont implements TextDimensionCalculator {
constructor(private parentGroup: Group) {} constructor(private parentGroup: SVGGroup) {}
getMaxDimension(texts: string[], fontSize: number): Dimension { getMaxDimension(texts: string[], fontSize: number): Dimension {
if (!this.parentGroup) { if (!this.parentGroup) {
return { return {

16
packages/mermaid/src/diagrams/xychart/xychartDb.ts
View File

@@ -1,3 +1,9 @@
import * as configApi from '../../config.js';
import defaultConfig from '../../defaultConfig.js';
import type { SVGGroup } from '../../diagram-api/types.js';
import { getThemeVariables } from '../../themes/theme-default.js';
import { cleanAndMerge } from '../../utils.js';
import { sanitizeText } from '../common/common.js';
import { import {
clear as commonClear, clear as commonClear,
getAccDescription, getAccDescription,
@@ -7,11 +13,6 @@ import {
setAccTitle, setAccTitle,
setDiagramTitle, setDiagramTitle,
} from '../common/commonDb.js'; } from '../common/commonDb.js';
import * as configApi from '../../config.js';
import defaultConfig from '../../defaultConfig.js';
import { getThemeVariables } from '../../themes/theme-default.js';
import { cleanAndMerge } from '../../utils.js';
import { sanitizeText } from '../common/common.js';
import { XYChartBuilder } from './chartBuilder/index.js'; import { XYChartBuilder } from './chartBuilder/index.js';
import type { import type {
DrawableElem, DrawableElem,
@@ -21,11 +22,10 @@ import type {
XYChartThemeConfig, XYChartThemeConfig,
} from './chartBuilder/interfaces.js'; } from './chartBuilder/interfaces.js';
import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js'; import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
import type { Group } from '../../diagram-api/types.js';
let plotIndex = 0; let plotIndex = 0;
let tmpSVGGroup: Group; let tmpSVGGroup: SVGGroup;
let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartConfig: XYChartConfig = getChartDefaultConfig();
let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
@@ -75,7 +75,7 @@ function textSanitizer(text: string) {
return sanitizeText(text.trim(), config); return sanitizeText(text.trim(), config);
} }
function setTmpSVGG(SVGG: Group) { function setTmpSVGG(SVGG: SVGGroup) {
tmpSVGGroup = SVGG; tmpSVGGroup = SVGG;
} }
function setOrientation(orientation: string) { function setOrientation(orientation: string) {

2
packages/mermaid/src/internals.ts
View File

@@ -29,3 +29,5 @@ export const internalHelpers = {
log, log,
positionEdgeLabel, positionEdgeLabel,
}; };
export type InternalHelpers = typeof internalHelpers;

10
packages/mermaid/src/mermaid.ts
View File

@@ -7,20 +7,19 @@ import type { MermaidConfig } from './config.type.js';
import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js'; import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
import { addDiagrams } from './diagram-api/diagram-orchestration.js'; import { addDiagrams } from './diagram-api/diagram-orchestration.js';
import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js'; import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
import type { ExternalDiagramDefinition } from './diagram-api/types.js'; import type { ExternalDiagramDefinition, SVG, SVGGroup } from './diagram-api/types.js';
import type { ParseErrorFunction } from './Diagram.js'; import type { ParseErrorFunction } from './Diagram.js';
import type { UnknownDiagramError } from './errors.js'; import type { UnknownDiagramError } from './errors.js';
import type { internalHelpers } from './internals.js'; import type { InternalHelpers } from './internals.js';
import { log } from './logger.js'; import { log } from './logger.js';
import { mermaidAPI } from './mermaidAPI.js'; import { mermaidAPI } from './mermaidAPI.js';
import type { LayoutLoaderDefinition } from './rendering-util/render.js'; import type { LayoutLoaderDefinition, RenderOptions } from './rendering-util/render.js';
import { registerLayoutLoaders } from './rendering-util/render.js'; import { registerLayoutLoaders } from './rendering-util/render.js';
import type { LayoutData } from './rendering-util/types.js'; import type { LayoutData } from './rendering-util/types.js';
import type { ParseOptions, ParseResult, RenderResult } from './types.js'; import type { ParseOptions, ParseResult, RenderResult } from './types.js';
import type { DetailedError } from './utils.js'; import type { DetailedError } from './utils.js';
import utils, { isDetailedError } from './utils.js'; import utils, { isDetailedError } from './utils.js';
type InternalHelpers = typeof internalHelpers;
export type { export type {
DetailedError, DetailedError,
ExternalDiagramDefinition, ExternalDiagramDefinition,
@@ -31,7 +30,10 @@ export type {
ParseErrorFunction, ParseErrorFunction,
ParseOptions, ParseOptions,
ParseResult, ParseResult,
RenderOptions,
RenderResult, RenderResult,
SVG,
SVGGroup,
UnknownDiagramError, UnknownDiagramError,
}; };

10
packages/mermaid/src/rendering-util/createText.ts
View File

@@ -1,16 +1,16 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
// @ts-nocheck TODO: Fix types // @ts-nocheck TODO: Fix types
import type { MermaidConfig } from '../config.type.js'; import { getConfig } from '$root/diagram-api/diagramAPI.js';
import type { Group } from '../diagram-api/types.js'; import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
import { select } from 'd3'; import { select } from 'd3';
import type { MermaidConfig } from '../config.type.js';
import type { SVGGroup } from '../diagram-api/types.js';
import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js'; import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
import { log } from '../logger.js'; import { log } from '../logger.js';
import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js'; import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
import { decodeEntities } from '../utils.js'; import { decodeEntities } from '../utils.js';
import { splitLineToFitWidth } from './splitText.js'; import { splitLineToFitWidth } from './splitText.js';
import type { MarkdownLine, MarkdownWord } from './types.js'; import type { MarkdownLine, MarkdownWord } from './types.js';
import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
function applyStyle(dom, styleFn) { function applyStyle(dom, styleFn) {
if (styleFn) { if (styleFn) {
@@ -82,7 +82,7 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL
} }
export function computeDimensionOfText( export function computeDimensionOfText(
parentNode: Group, parentNode: SVGGroup,
lineHeight: number, lineHeight: number,
text: string text: string
): DOMRect | undefined { ): DOMRect | undefined {