GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Updated code review changes

Browse Source
This commit is contained in:
Subhash Halder 2023-09-29 18:59:05 +05:30
parent 8b04c2ce88
commit 0d348b7994
9 changed files with 47 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,4 +1,4 @@
import type { SVGGType } from '../../xychartDb.js';
import type { Group } from '../../../../diagram-api/types.js';
import type {
BoundingRect,
ChartComponent,
@ -84,8 +84,8 @@ export function getChartTitleComponent(
chartConfig: XYChartConfig,
chartData: XYChartData,
chartThemeConfig: XYChartThemeConfig,
tmpSVGGElem: SVGGType
tmpSVGGroup: Group
): ChartComponent {
const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem);
const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig);
}

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

@ -16,7 +16,7 @@ export interface Plot extends ChartComponent {
setAxes(xAxis: Axis, yAxis: Axis): void;
}
export class Plot implements Plot {
export class BasePlot implements Plot {
private boundingRect: BoundingRect;
private xAxis?: Axis;
private yAxis?: Axis;
@ -93,5 +93,5 @@ export function getPlotComponent(
chartData: XYChartData,
chartThemeConfig: XYChartThemeConfig
): Plot {
return new Plot(chartConfig, chartData, chartThemeConfig);
return new BasePlot(chartConfig, chartData, chartThemeConfig);
}

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

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

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

@ -1,4 +1,3 @@
import type { SVGGType } from '../xychartDb.js';
import type {
ChartComponent,
DrawableElem,
@ -12,6 +11,7 @@ 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,10 +24,10 @@ export class Orchestrator {
private chartConfig: XYChartConfig,
private chartData: XYChartData,
chartThemeConfig: XYChartThemeConfig,
tmpSVGGElem: SVGGType
tmpSVGGroup: Group
) {
this.componentStore = {
title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem),
title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup),
plot: getPlotComponent(chartConfig, chartData, chartThemeConfig),
xAxis: getAxis(
chartData.xAxis,
@ -38,7 +38,7 @@ export class Orchestrator {
tickColor: chartThemeConfig.xAxisTickColor,
axisLineColor: chartThemeConfig.xAxisLineColor,
},
tmpSVGGElem
tmpSVGGroup
),
yAxis: getAxis(
chartData.yAxis,
@ -49,7 +49,7 @@ export class Orchestrator {
tickColor: chartThemeConfig.yAxisTickColor,
axisLineColor: chartThemeConfig.yAxisLineColor,
},
tmpSVGGElem
tmpSVGGroup
),
};
}

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

@ -1,13 +1,13 @@
import type { Dimension } from './interfaces.js';
import { computeDimensionOfText } from '../../../rendering-util/createText.js';
import type { SVGGType } from '../xychartDb.js';
import type { Group } from '../../../diagram-api/types.js';
export interface TextDimensionCalculator {
getMaxDimension(texts: string[], fontSize: number): Dimension;
}
export class TextDimensionCalculatorWithFont implements TextDimensionCalculator {
constructor(private parentGroup: SVGGType) {}
constructor(private parentGroup: Group) {}
getMaxDimension(texts: string[], fontSize: number): Dimension {
if (!this.parentGroup) {
return {
@ -28,8 +28,10 @@ export class TextDimensionCalculatorWithFont implements TextDimensionCalculator
for (const t of texts) {
const bbox = computeDimensionOfText(elem, 1, t);
dimension.width = Math.max(dimension.width, bbox.width);
dimension.height = Math.max(dimension.height, bbox.height);
const width = bbox ? bbox.width : t.length * fontSize;
const height = bbox ? bbox.height : fontSize;
dimension.width = Math.max(dimension.width, width);
dimension.height = Math.max(dimension.height, height);
}
elem.remove();
return dimension;

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

@ -1,4 +1,3 @@
import type { Selection } from 'd3-selection';
import {
clear as commonClear,
getAccDescription,
@ -22,12 +21,11 @@ import type {
XYChartThemeConfig,
} from './chartBuilder/interfaces.js';
import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>;
import type { Group } from '../../diagram-api/types.js';
let plotIndex = 0;
let tmpSVGGElem: SVGGType;
let tmpSVGGroup: Group;
let xyChartConfig: XYChartConfig = getChartDefaultConfig();
let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
@ -77,8 +75,8 @@ function textSanitizer(text: string) {
return sanitizeText(text.trim(), config);
}
function setTmpSVGG(SVGG: SVGGType) {
tmpSVGGElem = SVGG;
function setTmpSVGG(SVGG: Group) {
tmpSVGGroup = SVGG;
}
function setOrientation(oriantation: string) {
if (oriantation === 'horizontal') {
@ -186,7 +184,7 @@ function getDrawableElem(): DrawableElem[] {
throw Error('No Plot to render, please provide a plot with some data');
}
xyChartData.title = getDiagramTitle();
return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGElem);
return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGroup);
}
function getChartThemeConfig() {

10
packages/mermaid/src/diagrams/xychart/xychartDetector.ts
View File

@ -1,12 +1,16 @@
import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
import type {
DiagramDetector,
DiagramLoader,
ExternalDiagramDefinition,
} from '../../diagram-api/types.js';
const id = 'xychart';
const detector: DiagramDetector = (txt) => {
return txt.match(/^\s*xychart/i) !== null;
return /^\s*xychart/i.test(txt);
};
const loader = async () => {
const loader: DiagramLoader = async () => {
const { diagram } = await import('./xychartDiagram.js');
return { id, diagram };
};

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

@ -1,5 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
// @ts-nocheck TODO: Fix types
import type { Group } from '../diagram-api/types.js';
import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
import { log } from '../logger.js';
import { decodeEntities } from '../mermaidAPI.js';
import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
@ -76,12 +78,18 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL
return textLength;
}
export function computeDimensionOfText(parentNode: any, lineHeight: number, text: string) {
const testElement = parentNode.append('text');
const testSpan = createTspan(testElement, 1, lineHeight);
export function computeDimensionOfText(
parentNode: Group,
lineHeight: number,
text: string
): DOMRect | undefined {
const testElement: D3TextElement = parentNode.append('text');
const testSpan: D3TSpanElement = createTspan(testElement, 1, lineHeight);
updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]);
const textDimension = testSpan.node().getBoundingClientRect();
testElement.remove();
const textDimension: DOMRect | undefined = testSpan.node()?.getBoundingClientRect();
if (textDimension) {
testElement.remove();
}
return textDimension;
}