marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-26 23:54:09 +01:00
Code Issues Packages 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-28 14:25:15 +02:00
parent f350ff9852 6ab0eef6f3
commit 4cdc6e4a0d
18 changed files with 155 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -388,8 +388,8 @@ export const draw = function (text, id, _version, diagObj) {
rankdir: dir,
nodesep: nodeSpacing,
ranksep: rankSpacing,
marginx: 8,
marginy: 8,
marginx: 0,
marginy: 0,
})
.setDefaultEdgeLabel(function () {
return {};

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

@@ -305,7 +305,7 @@ export const draw = function (text, id, _version, diag) {
const svgBounds = svg.node().getBBox();
configureSvgSize(svg, height, width * 1.75, conf.useMaxWidth);
configureSvgSize(svg, height, width, conf.useMaxWidth);
// Ensure the viewBox includes the whole svgBounds area with extra space for padding
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

53
src/utils.js
View File

@@ -742,7 +742,7 @@ const d3Attrs = function (d3Elem, attrs) {
*/
export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
let attrs = new Map();
attrs.set('height', height);
// attrs.set('height', height);
if (useMaxWidth) {
attrs.set('width', '100%');
attrs.set('style', `max-width: ${width}px;`);
@@ -761,7 +761,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
* @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, width, useMaxWidth);
const attrs = calculateSvgSizeAttrs(height, 1 * width, useMaxWidth);
d3Attrs(svgElem, attrs);
};
export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {
@@ -769,27 +769,37 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
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;
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;
}
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}`;
log.debug(
// 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',
@@ -800,15 +810,12 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
width,
'height',
height,
'tx',
tx,
'ty',
ty,
'vBox',
vBox
);
svgElem.attr('viewBox', vBox);
svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);
// svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);
};
export const initIdGenerator = class iterator {

4
src/utils.spec.js
View File

@@ -294,13 +294,13 @@ describe('when formatting urls', function () {
describe('when calculating SVG size', function () {
it('should return width 100% when useMaxWidth is true', function () {
const attrs = utils.calculateSvgSizeAttrs(100, 200, true);
expect(attrs.get('height')).toEqual(100);
// expect(attrs.get('height')).toEqual(100);
expect(attrs.get('style')).toEqual('max-width: 200px;');
expect(attrs.get('width')).toEqual('100%');
});
it('should return absolute width when useMaxWidth is false', function () {
const attrs = utils.calculateSvgSizeAttrs(100, 200, false);
expect(attrs.get('height')).toEqual(100);
// expect(attrs.get('height')).toEqual(100);
expect(attrs.get('width')).toEqual(200);
});
});