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

View File

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

View File

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