From 037ba2fa9cf40905bd1c35b1a450c5218a698f0f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 21 Aug 2024 17:39:01 +0530 Subject: [PATCH] chore: Rename Group to SVGGroup --- packages/mermaid/src/diagram-api/types.ts | 2 +- .../mermaid/src/diagrams/common/svgDrawCommon.ts | 14 +++++++------- .../mermaid/src/diagrams/error/errorRenderer.ts | 4 ++-- .../mermaid/src/diagrams/info/infoRenderer.ts | 6 +++--- packages/mermaid/src/diagrams/packet/renderer.ts | 4 ++-- packages/mermaid/src/diagrams/pie/pieRenderer.ts | 12 ++++++------ .../chartBuilder/components/axis/index.ts | 4 ++-- .../chartBuilder/components/chartTitle.ts | 6 +++--- .../src/diagrams/xychart/chartBuilder/index.ts | 4 ++-- .../xychart/chartBuilder/orchestrator.ts | 14 +++++++------- .../chartBuilder/textDimensionCalculator.ts | 6 +++--- .../mermaid/src/diagrams/xychart/xychartDb.ts | 16 ++++++++-------- packages/mermaid/src/internals.ts | 2 ++ packages/mermaid/src/mermaid.ts | 10 ++++++---- .../mermaid/src/rendering-util/createText.ts | 10 +++++----- 15 files changed, 59 insertions(+), 55 deletions(-) diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index 4556c1d6eb..fdb175e520 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -129,6 +129,6 @@ export type HTML = d3.Selection; -export type Group = d3.Selection; +export type SVGGroup = d3.Selection; export type DiagramStylesProvider = (options?: any) => string; diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts index 8d5ba3b7ca..59c6d43cfe 100644 --- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts +++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts @@ -1,5 +1,6 @@ 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 { Bound, D3ImageElement, @@ -11,9 +12,8 @@ import type { TextData, TextObject, } 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'); rectElement.attr('x', rectData.x); 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 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 = { x: bounds.startx, y: bounds.starty, @@ -64,7 +64,7 @@ export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => 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 textElem: D3TextElement = element.append('text'); @@ -84,7 +84,7 @@ export const drawText = (element: SVG | Group, textData: TextData): D3TextElemen 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'); imageElement.attr('x', x); imageElement.attr('y', y); @@ -93,7 +93,7 @@ export const drawImage = (elem: SVG | Group, x: number, y: number, link: string) }; export const drawEmbeddedImage = ( - element: SVG | Group, + element: SVG | SVGGroup, x: number, y: number, link: string diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts index 1b3622c6dc..a5f10acefc 100644 --- a/packages/mermaid/src/diagrams/error/errorRenderer.ts +++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts @@ -1,5 +1,5 @@ +import type { SVG, SVGGroup } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; -import type { Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; @@ -13,7 +13,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js'; export const draw = (_text: string, id: string, version: string) => { log.debug('rendering svg for syntax error\n'); const svg: SVG = selectSvgElement(id); - const g: Group = svg.append('g'); + const g: SVGGroup = svg.append('g'); svg.attr('viewBox', '0 0 2412 512'); configureSvgSize(svg, 100, 512, true); diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts index 25ae72fce0..a8314eb728 100644 --- a/packages/mermaid/src/diagrams/info/infoRenderer.ts +++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts @@ -1,7 +1,7 @@ +import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.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 { configureSvgSize } from '../../setupGraphViewbox.js'; /** * 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); configureSvgSize(svg, 100, 400, true); - const group: Group = svg.append('g'); + const group: SVGGroup = svg.append('g'); group .append('text') .attr('x', 100) diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index c89e055cce..25445a2284 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -1,6 +1,6 @@ import type { Diagram } from '../../Diagram.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 { configureSvgSize } from '../../setupGraphViewbox.js'; import type { PacketDB, PacketWord } from './types.js'; @@ -39,7 +39,7 @@ const drawWord = ( rowNumber: number, { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required ) => { - const group: Group = svg.append('g'); + const group: SVGGroup = svg.append('g'); const wordY = rowNumber * (rowHeight + paddingY) + paddingY; for (const block of word) { const blockX = (block.start % bitsPerRow) * bitWidth + 1; diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index 8f3b9cc5b3..a0cdce3df7 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -1,13 +1,13 @@ import type d3 from 'd3'; -import { scaleOrdinal, pie as d3pie, arc } from 'd3'; +import { arc, pie as d3pie, scaleOrdinal } from 'd3'; +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 { 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 { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; const createPieArcs = (sections: Sections): d3.PieArcDatum[] => { // 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 pieWidth: number = height; 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 + ')'); const { themeVariables } = globalConfig; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index cde0d6a93c..a1ec492f61 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,4 +1,4 @@ -import type { Group } from '../../../../../diagram-api/types.js'; +import type { SVGGroup } from '../../../../../diagram-api/types.js'; import type { AxisDataType, ChartComponent, @@ -25,7 +25,7 @@ export function getAxis( data: AxisDataType, axisConfig: XYChartAxisConfig, axisThemeConfig: XYChartAxisThemeConfig, - tmpSVGGroup: Group + tmpSVGGroup: SVGGroup ): Axis { const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup); if (isBandAxisData(data)) { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts index bbab56bdc1..5512df9883 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts @@ -1,13 +1,13 @@ -import type { Group } from '../../../../diagram-api/types.js'; +import type { SVGGroup } from '../../../../diagram-api/types.js'; import type { BoundingRect, ChartComponent, Dimension, DrawableElem, Point, + XYChartConfig, XYChartData, XYChartThemeConfig, - XYChartConfig, } from '../interfaces.js'; import type { TextDimensionCalculator } from '../textDimensionCalculator.js'; import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js'; @@ -84,7 +84,7 @@ export function getChartTitleComponent( chartConfig: XYChartConfig, chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGroup: Group + tmpSVGGroup: SVGGroup ): ChartComponent { const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup); return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 192eb47f62..6a1b6ec3a8 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -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 { Orchestrator } from './orchestrator.js'; @@ -7,7 +7,7 @@ export class XYChartBuilder { config: XYChartConfig, chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGroup: Group + tmpSVGGroup: SVGGroup ): DrawableElem[] { const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup); return orchestrator.getDrawableElement(); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts index 8160d15007..8809efe265 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts @@ -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 { ChartComponent, DrawableElem, @@ -6,12 +12,6 @@ import type { XYChartThemeConfig, } 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 { private componentStore: { @@ -24,7 +24,7 @@ export class Orchestrator { private chartConfig: XYChartConfig, private chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGroup: Group + tmpSVGGroup: SVGGroup ) { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup), diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts index 8049bf5272..0f118fc92d 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts @@ -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 type { Group } from '../../../diagram-api/types.js'; +import type { Dimension } from './interfaces.js'; export interface TextDimensionCalculator { getMaxDimension(texts: string[], fontSize: number): Dimension; } export class TextDimensionCalculatorWithFont implements TextDimensionCalculator { - constructor(private parentGroup: Group) {} + constructor(private parentGroup: SVGGroup) {} getMaxDimension(texts: string[], fontSize: number): Dimension { if (!this.parentGroup) { return { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 23b90724cd..fb2435df2d 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -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 { clear as commonClear, getAccDescription, @@ -7,11 +13,6 @@ import { setAccTitle, setDiagramTitle, } 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 type { DrawableElem, @@ -21,11 +22,10 @@ import type { XYChartThemeConfig, } from './chartBuilder/interfaces.js'; import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js'; -import type { Group } from '../../diagram-api/types.js'; let plotIndex = 0; -let tmpSVGGroup: Group; +let tmpSVGGroup: SVGGroup; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); @@ -75,7 +75,7 @@ function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } -function setTmpSVGG(SVGG: Group) { +function setTmpSVGG(SVGG: SVGGroup) { tmpSVGGroup = SVGG; } function setOrientation(orientation: string) { diff --git a/packages/mermaid/src/internals.ts b/packages/mermaid/src/internals.ts index cebcd4ace6..7cc058cb3a 100644 --- a/packages/mermaid/src/internals.ts +++ b/packages/mermaid/src/internals.ts @@ -29,3 +29,5 @@ export const internalHelpers = { log, positionEdgeLabel, }; + +export type InternalHelpers = typeof internalHelpers; diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index 90b3b74b81..43fc5bd31b 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/packages/mermaid/src/mermaid.ts @@ -7,20 +7,19 @@ import type { MermaidConfig } from './config.type.js'; import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js'; import { addDiagrams } from './diagram-api/diagram-orchestration.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 { UnknownDiagramError } from './errors.js'; -import type { internalHelpers } from './internals.js'; +import type { InternalHelpers } from './internals.js'; import { log } from './logger.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 type { LayoutData } from './rendering-util/types.js'; import type { ParseOptions, ParseResult, RenderResult } from './types.js'; import type { DetailedError } from './utils.js'; import utils, { isDetailedError } from './utils.js'; -type InternalHelpers = typeof internalHelpers; export type { DetailedError, ExternalDiagramDefinition, @@ -31,7 +30,10 @@ export type { ParseErrorFunction, ParseOptions, ParseResult, + RenderOptions, RenderResult, + SVG, + SVGGroup, UnknownDiagramError, }; diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index 12d81715ff..c6ce204ba2 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -1,16 +1,16 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ // @ts-nocheck TODO: Fix types -import type { MermaidConfig } from '../config.type.js'; -import type { Group } from '../diagram-api/types.js'; +import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js'; 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 { log } from '../logger.js'; import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js'; import { decodeEntities } from '../utils.js'; import { splitLineToFitWidth } from './splitText.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) { if (styleFn) { @@ -82,7 +82,7 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL } export function computeDimensionOfText( - parentNode: Group, + parentNode: SVGGroup, lineHeight: number, text: string ): DOMRect | undefined {