From 99cb752c714a459c4d1c8d7fc9c87337f8fdd24f Mon Sep 17 00:00:00 2001
From: Ryan Ling <ryan@outlook.com.au>
Date: Sat, 11 Jul 2020 18:54:26 +1000
Subject: [PATCH] Add `er.useMaxWidth` config option

This restores the option of rendering an ERD with an absolute width,
which is consistent with the approach taken with the other diagram
types.

This logic was lost in #1324, which was probably just a small oversight:

https://github.com/mermaid-js/mermaid/commit/9199546dca5299c5d2577db460dd53d079199d37#diff-7c38d27acbe0676d923bf19283671616L397-L409

The option defaults to true for backwards compatibility.
---
 docs/Setup.md                 | 14 +++++++++++++-
 src/config.js                 | 17 +++++++++++++++--
 src/diagrams/er/erRenderer.js | 11 ++++++++---
 3 files changed, 36 insertions(+), 6 deletions(-)

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