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

chore: Fix computeWidth function

Browse Source
This commit is contained in:
Sidharth Vinod 2023-11-28 10:39:34 +05:30
parent 0620c6daf2
commit 403ac4b76b
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
import type { D3Sections, PieDB, Sections } from './pieTypes.js'; import type { D3Sections, PieDB, Sections } from './pieTypes.js';
import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js'; import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
import { computeWidthOfText } from '../../rendering-util/createText.js'; import { computeDimensionOfText } from '../../rendering-util/createText.js';
const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => { const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => {
// Compute the position of each group on the pie: // Compute the position of each group on the pie:
@ -48,6 +48,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
const width: number = const width: number =
document.getElementById(id)?.parentElement?.offsetWidth ?? pieConfig.useWidth; document.getElementById(id)?.parentElement?.offsetWidth ?? pieConfig.useWidth;
const svg: SVG = selectSvgElement(id); const svg: SVG = selectSvgElement(id);
const group: Group = svg.append('g');
const sections: Sections = db.getSections(); const sections: Sections = db.getSections();
const legendShowData = db.getShowData(); const legendShowData = db.getShowData();
const legendTexts = Object.keys(sections).map((key) => { const legendTexts = Object.keys(sections).map((key) => {
@ -58,7 +59,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
}); });
const longestTextWidth = Math.max( const longestTextWidth = Math.max(
...legendTexts.map((text) => { ...legendTexts.map((text) => {
return computeWidthOfText(svg, 1, text); return computeDimensionOfText(group, 1, text)?.width ?? 0;
}) })
); );
const newWidth = width + MARGIN + LEGEND_RECT_SIZE + LEGEND_SPACING + longestTextWidth; const newWidth = width + MARGIN + LEGEND_RECT_SIZE + LEGEND_SPACING + longestTextWidth;
@ -67,7 +68,6 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
svg.attr('viewBox', `0 0 ${newWidth} ${height}`); svg.attr('viewBox', `0 0 ${newWidth} ${height}`);
configureSvgSize(svg, height, newWidth, pieConfig.useMaxWidth); configureSvgSize(svg, height, newWidth, pieConfig.useMaxWidth);
const group: Group = svg.append('g');
group.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); group.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
const { themeVariables } = globalConfig; const { themeVariables } = globalConfig;