From f8f52c4587cda67f8b4454b7448ca75d62c82b2f Mon Sep 17 00:00:00 2001
From: Ashish Jain <ashishjain0512@gmail.com>
Date: Wed, 9 Oct 2019 21:15:17 +0200
Subject: [PATCH] Fix for viewport in classDiagram and stateDiagram renndering

---
 docs/_sidebar.md                    | 1 -
 docs/index.html                     | 4 ++--
 src/diagrams/class/classDb.js       | 2 +-
 src/diagrams/class/classRenderer.js | 7 +++++--
 src/diagrams/state/stateRenderer.js | 9 ++++++---
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 2200193db..7c8e954fe 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -9,7 +9,6 @@
 - Diagrams
 
   - [Flowchart](flowchart.md)
-  - [State diagram](stateDiagram.md)
   - [Sequence diagram](sequenceDiagram.md)
   - [Gantt](gantt.md)
   - [Pie Chart](pie.md)
diff --git a/docs/index.html b/docs/index.html
index 169247da2..dec453e38 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,8 +7,8 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-  <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.3.1/dist/mermaid.min.js"></script> -->
-  <script src="//localhost:9000/mermaid.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.3.1/dist/mermaid.min.js"></script>
+  <!-- <script src="//localhost:9000/mermaid.js"></script> -->
   <style>
   .markdown-section {
     max-width: 1200px;
diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
index cb4c42c8a..c8d1afe8a 100644
--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -74,7 +74,7 @@ export const addMember = function(className, member) {
       theClass.annotations.push(memberString.substring(2, memberString.length - 2));
     } else if (memberString.endsWith(')')) {
       theClass.methods.push(memberString);
-    } else {
+    } else if (memberString) {
       theClass.members.push(memberString);
     }
   }
diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js
index 60a88d2c8..8d382f97d 100644
--- a/src/diagrams/class/classRenderer.js
+++ b/src/diagrams/class/classRenderer.js
@@ -323,6 +323,8 @@ const drawClass = function(elem, classDef) {
     isFirst = false;
   });
 
+  console.warn('classDef.id', classDef.id);
+  console.warn('isFirst', isFirst);
   // add class title
   const classTitle = title
     .append('tspan')
@@ -346,6 +348,7 @@ const drawClass = function(elem, classDef) {
     .attr('y', titleHeight + conf.dividerMargin + conf.textHeight)
     .attr('fill', 'white')
     .attr('class', 'classText');
+  console.warn(classDef.id, titleHeight, conf.dividerMargin, conf.textHeight);
 
   isFirst = true;
   classDef.members.forEach(function(member) {
@@ -483,8 +486,8 @@ export const draw = function(text, id) {
   });
 
   diagram.attr('height', '100%');
-  diagram.attr('width', '100%');
-  diagram.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
+  diagram.attr('width', `${g.graph().width * 1.5 + 20}`);
+  diagram.attr('viewBox', '-10 -10 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
 };
 
 export default {
diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index 5f57baf5c..b3d276f96 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -92,12 +92,15 @@ export const draw = function(text, id) {
 
   const bounds = diagram.node().getBBox();
 
-  // diagram.attr('height', '100%');
+  diagram.attr('height', '100%');
   // diagram.attr('width', 'fit-content');
-  diagram.attr('style', 'width: fit-content;');
+  diagram.attr('style', `max-width: ${bounds.width * 1.5 + conf.padding * 2};`);
   diagram.attr(
     'viewBox',
-    '0 0 ' + (bounds.width + conf.padding * 2) + ' ' + (bounds.height + conf.padding * 2)
+    `${conf.padding * -1} ${conf.padding * -1} ` +
+      (bounds.width * 1.5 + conf.padding * 2) +
+      ' ' +
+      (bounds.height * 1.5 + conf.padding * 2)
   );
 };
 const getLabelWidth = text => {