From 25ce9c08263ced02ccd5992b8a1923dd3dceec2c Mon Sep 17 00:00:00 2001 From: Steffen Vogel 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 = (
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} > 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 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} > - this.svgElem = c }width={this.props.widget.width} height={this.props.widget.height}> + this.setSVG(c) } width={this.props.widget.width} height={this.props.widget.height}>