GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

#448 Size calculations

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-09-01 14:25:47 +02:00
parent 68f8010ab9
commit 558ef8a2db
18 changed files with 24 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/diagrams/c4/c4Renderer.js
View File

@ -6,7 +6,8 @@ import common from '../common/common';
import c4Db from './c4Db';
import * as configApi from '../../config';
import assignWithDepth from '../../assignWithDepth';
import { wrapLabel, calculateTextWidth, calculateTextHeight, configureSvgSize } from '../../utils';
import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
let globalBoundaryMaxX = 0,

3
src/diagrams/class/classRenderer-v2.js
View File

@ -5,7 +5,8 @@ import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';
// import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { curveLinear } from 'd3';
import { interpolateToCurve, getStylesFromArray, setupGraphViewbox } from '../../utils';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { setupGraphViewbox } from '../../setupGraphViewbox';
import common from '../common/common';
import addSVGAccessibilityFields from '../../accessibility';

2
src/diagrams/class/classRenderer.js
View File

@ -3,7 +3,7 @@ import dagre from 'dagre';
import graphlib from 'graphlib';
import { log } from '../../logger';
import svgDraw from './svgDraw';
import { configureSvgSize } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import { getConfig } from '../../config';
import addSVGAccessibilityFields from '../../accessibility';

2
src/diagrams/er/erRenderer.js
View File

@ -6,7 +6,7 @@ import dagre from 'dagre';
import { getConfig } from '../../config';
import { log } from '../../logger';
import erMarkers from './erMarkers';
import { configureSvgSize } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
import { parseGenericTypes } from '../common/common';

3
src/diagrams/flowchart/flowRenderer-v2.js
View File

@ -9,7 +9,8 @@ import { render } from '../../dagre-wrapper/index.js';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { log } from '../../logger';
import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray, setupGraphViewbox } from '../../utils';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { setupGraphViewbox } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {};

3
src/diagrams/flowchart/flowRenderer.js
View File

@ -5,7 +5,8 @@ import dagreD3 from 'dagre-d3';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { log } from '../../logger';
import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray, setupGraphViewbox } from '../../utils';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { setupGraphViewbox } from '../../setupGraphViewbox';
import flowChartShapes from './flowChartShapes';
import addSVGAccessibilityFields from '../../accessibility';

2
src/diagrams/gantt/ganttRenderer.js
View File

@ -13,7 +13,7 @@ import {
} from 'd3';
import common from '../common/common';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
export const setConf = function () {

2
src/diagrams/git/gitGraphRenderer.js
View File

@ -1,5 +1,5 @@
import { select } from 'd3';
import { configureSvgSize } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import { log } from '../../logger';
import { getConfig } from '../../config';
import addSVGAccessibilityFields from '../../accessibility';

1
src/diagrams/mindmap/mindmapRenderer.js
View File

@ -5,6 +5,7 @@ import svgDraw from './svgDraw';
import { BoundingBox, Layout, Tree } from 'non-layered-tidy-tree-layout';
import clone from 'fast-clone';
import db from './mindmapDb';
/**
* @param {any} svg The svg element to draw the diagram onto
* @param {object} mindmap The maindmap data and hierarchy

2
src/diagrams/pie/pieRenderer.js
View File

@ -1,7 +1,7 @@
/** Created by AshishJ on 11-09-2019. */
import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
import { log } from '../../logger';
import { configureSvgSize } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import * as configApi from '../../config';
import addSVGAccessibilityFields from '../../accessibility';

2
src/diagrams/requirement/requirementRenderer.js
View File

@ -2,7 +2,7 @@ import { line, select } from 'd3';
import dagre from 'dagre';
import graphlib from 'graphlib';
import { log } from '../../logger';
import { configureSvgSize } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import common from '../common/common';
import markers from './requirementMarkers';
import { getConfig } from '../../config';

3
src/diagrams/sequence/sequenceRenderer.js
View File

@ -6,7 +6,8 @@ import common from '../common/common';
// import sequenceDb from './sequenceDb';
import * as configApi from '../../config';
import assignWithDepth from '../../assignWithDepth';
import utils, { configureSvgSize } from '../../utils';
import utils from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
let conf = {};

2
src/diagrams/state/stateRenderer-v2.js
View File

@ -3,7 +3,7 @@ import { select } from 'd3';
import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';
import { log } from '../../logger';
import { configureSvgSize } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import common from '../common/common';
import addSVGAccessibilityFields from '../../accessibility';

2
src/diagrams/state/stateRenderer.js
View File

@ -5,7 +5,7 @@ import { log } from '../../logger';
import common from '../common/common';
import { drawState, addTitleAndBox, drawEdge } from './shapes';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
// TODO Move conf object to main conf in mermaidAPI

2
src/diagrams/user-journey/journeyRenderer.js
View File

@ -1,7 +1,7 @@
import { select } from 'd3';
import svgDraw from './svgDraw';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
export const setConf = function (cnf) {

1
src/setupGraphViewbox.js
View File

@ -22,7 +22,6 @@ const d3Attrs = function (d3Elem, attrs) {
*/
export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
let attrs = new Map();
attrs.set('height', height);
if (useMaxWidth) {
attrs.set('width', '100%');
attrs.set('style', `max-width: ${width}px;`);

89
src/utils.js
View File

@ -732,92 +732,6 @@ const d3Attrs = function (d3Elem, attrs) {
}
};
/**
* Gives attributes for an SVG's size given arguments
*
* @param {number} height The height of the SVG
* @param {number} width The width of the SVG
* @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%
* @returns {Map<'height' | 'width' | 'style', string>} Attributes for the SVG
*/
export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
let attrs = new Map();
// attrs.set('height', height);
if (useMaxWidth) {
attrs.set('width', '100%');
attrs.set('style', `max-width: ${width}px;`);
} else {
attrs.set('width', width);
}
return attrs;
};
/**
* Applies attributes from `calculateSvgSizeAttrs`
*
* @param {SVGSVGElement} svgElem The SVG Element to configure
* @param {number} height The height of the SVG
* @param {number} width The width of the SVG
* @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%
*/
export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
const attrs = calculateSvgSizeAttrs(height, 1 * width, useMaxWidth);
d3Attrs(svgElem, attrs);
};
export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {
const svgBounds = svgElem.node().getBBox();
const sWidth = svgBounds.width;
const sHeight = svgBounds.height;
log.info(`SVG bounds: ${sWidth}x${sHeight}`, svgBounds);
let width = graph._label.width;
let height = graph._label.height;
log.info(`Graph bounds: ${width}x${height}`, graph);
// let tx = 0;
// let ty = 0;
// if (sWidth > width) {
// tx = (sWidth - width) / 2 + padding;
width = sWidth + padding * 2;
// } else {
// if (Math.abs(sWidth - width) >= 2 * padding + 1) {
// width = width - padding;
// }
// }
// if (sHeight > height) {
// ty = (sHeight - height) / 2 + padding;
height = sHeight + padding * 2;
// }
// width =
log.info(`Calculated bounds: ${width}x${height}`);
configureSvgSize(svgElem, height, width, useMaxWidth);
// Ensure the viewBox includes the whole svgBounds area with extra space for padding
// const vBox = `0 0 ${width} ${height}`;
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${
svgBounds.width + 2 * padding
} ${svgBounds.height + 2 * padding}`;
log.info(
'Graph.label',
graph._label,
'swidth',
sWidth,
'sheight',
sHeight,
'width',
width,
'height',
height,
'vBox',
vBox
);
svgElem.attr('viewBox', vBox);
// svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);
};
export const initIdGenerator = class iterator {
constructor(deterministic, seed) {
this.deterministic = deterministic;
@ -943,9 +857,6 @@ export default {
calculateTextHeight,
calculateTextWidth,
calculateTextDimensions,
calculateSvgSizeAttrs,
configureSvgSize,
setupGraphViewbox,
detectInit,
detectDirective,
isSubstringInArray,

8
yarn.lock
View File

@ -5036,10 +5036,10 @@ domhandler@^5.0.1, domhandler@^5.0.2:
dependencies:
domelementtype "^2.3.0"
dompurify@2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.0.tgz#c9c88390f024c2823332615c9e20a453cf3825dd"
integrity sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA==
dompurify@2.3.10:
version "2.3.10"
resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.10.tgz#901f7390ffe16a91a5a556b94043314cd4850385"
integrity sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g==
domutils@^3.0.1:
version "3.0.1"