From e252ab80233d6a1b74f71b31a45fa0dc67364819 Mon Sep 17 00:00:00 2001
From: infeng <fzhihao@outlook.com>
Date: Thu, 6 Apr 2017 16:18:08 +0800
Subject: [PATCH] not reload img when resize

---
 src/ViewerCanvas.tsx |  5 ++---
 src/ViewerCore.tsx   | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/ViewerCanvas.tsx b/src/ViewerCanvas.tsx
index 08445f1..e544be8 100644
--- a/src/ViewerCanvas.tsx
+++ b/src/ViewerCanvas.tsx
@@ -42,17 +42,15 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
     this.bindEvent = this.bindEvent.bind(this);
     this.handleMouseMove = this.handleMouseMove.bind(this);
     this.handleMouseUp = this.handleMouseUp.bind(this);
-    this.handleResize = this.handleResize.bind(this);
   }
 
   componentDidMount() {
     if (this.props.drag) {
       this.bindEvent();
     }
-    window.addEventListener('resize', this.handleResize, false);
   }
 
-  handleResize(e) {
+  handleResize = (e) => {
     this.props.onResize();
   }
 
@@ -109,6 +107,7 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
     document[funcName]('mousewheel', this.handleMouseScroll, false);
     document[funcName]('click', this.handleMouseUp, false);
     document[funcName]('mousemove', this.handleMouseMove, false);
+    window[funcName]('resize', this.handleResize, false);
   }
 
   componentWillReceiveProps(nextProps: ViewerCanvasProps) {
diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx
index f349dae..25d97fc 100644
--- a/src/ViewerCore.tsx
+++ b/src/ViewerCore.tsx
@@ -304,7 +304,18 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
   handleResize() {
     this.setContainerWidthHeight();
     if (this.props.visible) {
-      this.loadImg(this.state.activeIndex);
+      const [ width, height ] = this.getImgWidthHeight(this.state.imageWidth, this.state.imageHeight);
+      let left = ( this.containerWidth - width ) / 2;
+      let top = (this.containerHeight - height - this.footerHeight) / 2;
+      this.setState({
+        width: width,
+        height: height,
+        left: left,
+        top:  top,
+        rotate: 0,
+        scaleX: 1,
+        scaleY: 1,
+      });
     }
   }