From 25ce9c08263ced02ccd5992b8a1923dd3dceec2c Mon Sep 17 00:00:00 2001
From: Steffen Vogel <post@steffenvogel.de>
Date: Thu, 14 Jun 2018 19:48:46 +0200
Subject: [PATCH 1/2] topology: improve settings of SVGPanZoom

---
 src/components/widget-topology.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/widget-topology.js b/src/components/widget-topology.js
index bab361b..82e855e 100644
--- a/src/components/widget-topology.js
+++ b/src/components/widget-topology.js
@@ -156,8 +156,12 @@ class WidgetTopology extends React.Component {
         markup = (<div>
           <ReactSVGPanZoom
                   ref={Viewer => this.Viewer = Viewer}
-                  style={{outline: "1px solid black"}}
+                  style={{outline: "1px solid grey"}}
                   detectAutoPan={false}
+                  miniaturePosition="none"
+                  toolbarPosition="none"
+                  background="white"
+                  tool="pan"
                   width={this.props.widget.width-2} height={this.props.widget.height-2} >
                   <svg width={this.props.widget.width} height={this.props.widget.height}>
                     <svg ref={ c => this.svgElem = c }width={this.props.widget.width} height={this.props.widget.height}>

From 40b6ac9e441f005359c7730f2286591bfa4bb30c Mon Sep 17 00:00:00 2001
From: Steffen Vogel <post@steffenvogel.de>
Date: Thu, 14 Jun 2018 19:49:51 +0200
Subject: [PATCH 2/2] topology: automatically fit into dimensions of widget

---
 public/Pintura/js/cimview.js      | 12 +++++++++++-
 src/components/widget-topology.js | 15 ++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/public/Pintura/js/cimview.js b/public/Pintura/js/cimview.js
index 3c96201..cf10318 100644
--- a/public/Pintura/js/cimview.js
+++ b/public/Pintura/js/cimview.js
@@ -149,6 +149,10 @@ var cimview = cimview || (function() {
         }
     };
 
+    var fit = function() {
+      setViewBox(svgNode.getElementById('diagrams').getBBox());
+    };
+
     var getViewBox = function() {
         let rect = {};
         viewBoxString = svgNode.getAttribute("viewBox");
@@ -184,19 +188,25 @@ var cimview = cimview || (function() {
     };
 
     var init = function(svg) {
-        svgNode = svg; 
+        svgNode = svg;
         let rect = { x: "-100", y: "-100", width: "1024", height: "768" };
         setViewBox(rect);
     };
 
+    var setSVG = function(svg) {
+      svgNode = svg;
+    }
+
     /*
      * Specify the functions that this module exports
      */
     return {
         init,
         pan,
+        fit,
         zoomIn,
         zoomOut,
+        setSVG
     };
 
 }());
diff --git a/src/components/widget-topology.js b/src/components/widget-topology.js
index 82e855e..c31bf97 100644
--- a/src/components/widget-topology.js
+++ b/src/components/widget-topology.js
@@ -84,17 +84,21 @@ class WidgetTopology extends React.Component {
     super(props);
     this.svgElem = null;
     this.Viewer = null;
-    
+
     this.state = {
       visualizationState: 'initial'
     };
   }
 
+  setSVG(svg) {
+    this.svgElem = svg;
+    window.cimsvg.setSVG(svg); // function not available in upstream source
+    window.cimview.setSVG(svg); // function not available in upstream source
+  }
+
   componentDidMount() {
     if (this.svgElem) {
       window.cimjson.setImagePathBase(process.env.PUBLIC_URL + '/Pintura/');
-      window.cimsvg.setSVG(this.svgElem); // function not available in upstream source
-      window.cimview.init(this.svgElem);
       window.onMouseLeave = function() {};
       window.onMouseOver = function() {};
       window.onMouseLeave = function() {};
@@ -120,8 +124,9 @@ class WidgetTopology extends React.Component {
             this.setState({'visualizationState': 'ready' });
             window.cimxml.clearXmlData()
             window.cimsvg.setFileCount(1);
-            return response.text().then( contents => {            
+            return response.text().then( contents => {
               window.cimsvg.loadFile(contents);
+              window.cimview.fit();
               attachComponentEvents();
             });
           } else {
@@ -164,7 +169,7 @@ class WidgetTopology extends React.Component {
                   tool="pan"
                   width={this.props.widget.width-2} height={this.props.widget.height-2} >
                   <svg width={this.props.widget.width} height={this.props.widget.height}>
-                    <svg ref={ c => this.svgElem = c }width={this.props.widget.width} height={this.props.widget.height}>
+                    <svg ref={ c => this.setSVG(c) } width={this.props.widget.width} height={this.props.widget.height}>
                       <rect id="backing" style={pinturaBackingStyle} />
                       <g id="grid" style={pinturaGridStyle} />
                       <g id="diagrams"/>