mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Size updates

This commit is contained in:
Knut Sveidqvist 2022-08-30 21:33:09 +02:00
parent 4cdc6e4a0d
commit 6966ca47d1
2 changed files with 49 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/setupGraphViewbox.js
View File

@ -42,7 +42,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
* @param ty
* @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%
*/
export const configureSvgSize = function (svgElem, height, width, tx, ty, useMaxWidth) {
export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
d3Attrs(svgElem, attrs);
};
@ -51,52 +51,51 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
const sWidth = svgBounds.width;
const sHeight = svgBounds.height;
let width;
let height;
let tx = 0;
let ty = 0;
if (graph) {
width = graph._label.width;
height = graph._label.height;
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;
}
} else {
width = sWidth + padding * 2;
height = sHeight + padding * 2;
}
log.info(`SVG bounds: ${sWidth}x${sHeight}`, svgBounds);
let width = 0;
let height = 0;
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 = graph
? `0 0 ${width} ${height}`
: `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
console.log(
'Graph.label',
graph ? graph._label : null,
'swidth',
sWidth,
'sheight',
sHeight,
'width',
width,
'height',
height,
'tx',
tx,
'ty',
ty,
'vBox',
vBox
);
// 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})`);
// svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);
};

8
yarn.lock
View File

@ -8603,10 +8603,10 @@ module-deps-sortable@^5.0.3:
through2 "^2.0.0"
xtend "^4.0.0"
moment-mini@2.24.0:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
moment-mini@^2.24.0:
version "2.29.4"
resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.29.4.tgz#cbbcdc58ce1b267506f28ea6668dbe060a32758f"
integrity sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==
moment@^2.23.0:
version "2.29.4"