From 44e6a4d5e07ddbf7bc3c055e74052b151f6a94ea Mon Sep 17 00:00:00 2001
From: infeng <fzhihao@outlook.com>
Date: Mon, 17 Oct 2016 16:45:59 +0800
Subject: [PATCH] optimize image zoom

---
 README.md            |  2 +-
 src/ViewerCavans.tsx | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 88a1fbe..87d1b51 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ class App extends React.Component<any, any> {
 
 - [ ] add button icon
 - [ ] add toolbar
-- [ ] optimize image zoom
+- [X] optimize image zoom
 - [ ] optimise image change
 
 ## License
diff --git a/src/ViewerCavans.tsx b/src/ViewerCavans.tsx
index 9a07713..2226d8f 100644
--- a/src/ViewerCavans.tsx
+++ b/src/ViewerCavans.tsx
@@ -8,6 +8,7 @@ export interface ViewerCavansProps {
 
 export interface ViewerCavansState {
   width?: number;
+  height?: number;
   top?: number;
   left?: number;
   isMouseDown?: boolean;
@@ -22,6 +23,7 @@ export default class ViewerCavans extends React.Component<ViewerCavansProps, Vie
 
     this.state = {
       width: 0,
+      height: 0,
       top: 15,
       left: null,
       isMouseDown: false,
@@ -62,6 +64,7 @@ export default class ViewerCavans extends React.Component<ViewerCavansProps, Vie
       let top = (window.innerHeight - height) / 2;
       this.setState({
         width: width,
+        height: height,
         left: left,
         top: top,
       });
@@ -109,8 +112,15 @@ export default class ViewerCavans extends React.Component<ViewerCavansProps, Vie
       direct = e.detail > 0 ? 1 : -1;
     }
     if (direct !== 0) {
+      let pageX = e.pageX;
+      let pageY = e.pageY;
+      let diffX = pageX - this.state.left;
+      let diffY = pageY - this.state.top;
       this.setState({
         width: this.state.width + direct * this.state.width * 0.05,
+        height: this.state.height + direct * this.state.height * 0.05,
+        top: this.state.top + -direct * diffY * .05,
+        left: this.state.left + -direct * diffX * .05,
       });
     }
   }
@@ -157,7 +167,6 @@ export default class ViewerCavans extends React.Component<ViewerCavansProps, Vie
       onMouseDown={this.handleMouseDown}
       >
         <img
-        ref="img"
         className={imgClass}
         src={this.props.imgSrc}
         style={imgStyle}