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

Merge branch 'minmaps' of github.com:mermaid-js/mermaid into minmaps

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-08-30 21:38:48 +02:00
commit 3400c19277
1 changed files with 45 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/setupGraphViewbox.js
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) {
// tx = (sWidth - width) / 2 + padding;
width = sWidth + padding * 2; width = sWidth + padding * 2;
} else { // } else {
if (Math.abs(sWidth - width) >= 2 * padding + 1) { // if (Math.abs(sWidth - width) >= 2 * padding + 1) {
width = width - padding; // width = width - padding;
} // }
} // }
if (sHeight > height) { // if (sHeight > height) {
ty = (sHeight - height) / 2 + padding; // ty = (sHeight - height) / 2 + padding;
height = sHeight + padding * 2; height = sHeight + padding * 2;
} // }
} else {
width = sWidth + padding * 2; // width =
height = sHeight + padding * 2; 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})`);
}; };