diff --git a/docs/Setup.md b/docs/Setup.md index 15c10d91d..9d7059328 100644 --- a/docs/Setup.md +++ b/docs/Setup.md @@ -705,9 +705,21 @@ T = top, B = bottom, L = left, and R = right. | --------- | ------------------- | ------- | -------- | ------------------ | | fontSize | Font Size in pixels | Integer | | Any Positive Value | -**Notes:**Font size (expressed as an integer representing a number of pixels) +**Notes:**Font size (expressed as an integer representing a number of pixels) **Default value: 12 ** +### useMaxWidth + +| Parameter | Description | Type | Required | Values | +| ----------- | ----------- | ------- | -------- | ----------- | +| useMaxWidth | See Notes | Boolean | Required | true, false | + +**Notes:** +When this flag is set to true, the diagram width is locked to 100% and +scaled based on available space. If set to false, the diagram reserves its +absolute width. +**Default value: true**. + ## render Function that renders an svg with a graph from a chart definition. Usage example below. diff --git a/src/config.js b/src/config.js index 5f254342c..a1d2646d8 100644 --- a/src/config.js +++ b/src/config.js @@ -801,10 +801,23 @@ const config = { *| --- | --- | --- | --- | --- | *| fontSize| Font Size in pixels| Integer | | Any Positive Value | * - ***Notes:**Font size (expressed as an integer representing a number of pixels) + ***Notes:**Font size (expressed as an integer representing a number of pixels) ***Default value: 12 ** */ - fontSize: 12 + fontSize: 12, + + /** + *| Parameter | Description |Type | Required | Values| + *| --- | --- | --- | --- | --- | + *| useMaxWidth | See Notes | Boolean | Required | true, false | + * + ***Notes:** + *When this flag is set to true, the diagram width is locked to 100% and + *scaled based on available space. If set to false, the diagram reserves its + *absolute width. + ***Default value: true**. + */ + useMaxWidth: true } }; config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute; diff --git a/src/diagrams/er/erRenderer.js b/src/diagrams/er/erRenderer.js index 19b2a6636..2cc5a0d25 100644 --- a/src/diagrams/er/erRenderer.js +++ b/src/diagrams/er/erRenderer.js @@ -339,9 +339,14 @@ export const draw = function(text, id) { const width = svgBounds.width + padding * 2; const height = svgBounds.height + padding * 2; - svg.attr('height', height); - svg.attr('width', '100%'); - svg.attr('style', `max-width: ${width}px;`); + if (conf.useMaxWidth) { + svg.attr('width', '100%'); + svg.attr('style', `max-width: ${width}px;`); + } else { + svg.attr('height', height); + svg.attr('width', width); + } + svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`); }; // draw