refactor: change mousewheel

package.json

@@ -35,7 +35,7 @@
     "@types/node": "^6.0.45",
     "@types/react": "^0.14.39",
     "@types/react-dom": "^0.14.17",
-    "antd": "^2.13.11",
+    "antd": "^3.7.1",
     "atool-build": "^1.0.2",
     "babel-plugin-import": "^1.2.1",
     "babel-plugin-transform-runtime": "^6.15.0",
@@ -59,7 +59,8 @@
     "webpack": "^1.13.2"
   },
   "dependencies": {
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "rc-table": "^6.2.7"
   },
   "pre-commit": [
     "lint"

src/ViewerCanvas.tsx

@@ -12,7 +12,6 @@ export interface ViewerCanvasProps {
   rotate: number;
   onChangeImgState: (width: number, height: number, top: number, left: number) => void;
   onResize: () => void;
-  onZoom: (targetX: number, targetY: number, direct: number) => void;
   zIndex: number;
   scaleX: number;
   scaleY: number;
@@ -86,40 +85,12 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
     });
   }
 
-  handleMouseScroll = (e) => {
-    e.preventDefault();
-    let direct: 0 | 1 | -1 = 0;
-    if (e.wheelDelta) {
-      direct = e.wheelDelta > 0 ? 1 : -1;
-    }else if (e.detail) {
-      direct = e.detail > 0 ? -1 : 1;
-    }
-    if (direct !== 0) {
-      let x = e.clientX;
-      let y = e.clientY;
-      if (this.props.container) {
-        const containerRect = this.props.container.getBoundingClientRect();
-        x -= containerRect.left;
-        y -= containerRect.top;
-      }
-      this.props.onZoom(x, y, direct);
-    }
-  }
-
   bindEvent = (remove?: boolean) => {
     let funcName = 'addEventListener';
     if (remove) {
       funcName = 'removeEventListener';
     }
 
-    let mouseScrollArea: Document | HTMLElement = document;
-
-    if (this.props.container) {
-      mouseScrollArea = this.props.container;
-    }
-
-    mouseScrollArea[funcName]('DOMMouseScroll', this.handleMouseScroll, false);
-    mouseScrollArea[funcName]('mousewheel', this.handleMouseScroll, false);
     document[funcName]('click', this.handleMouseUp, false);
     document[funcName]('mousemove', this.handleMouseMove, false);
     window[funcName]('resize', this.handleResize, false);

src/ViewerCore.tsx

@@ -500,6 +500,26 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     return activeImg;
   };
 
+  handleMouseScroll = (e) => {
+    e.preventDefault();
+    let direct: 0 | 1 | -1 = 0;
+    if (e.deltaY === 0) {
+      direct = 0;
+    } else {
+      direct = e.deltaY > 0 ? -1 : 1;
+    }
+    if (direct !== 0) {
+      let x = e.clientX;
+      let y = e.clientY;
+      if (this.props.container) {
+        const containerRect = this.props.container.getBoundingClientRect();
+        x -= containerRect.left;
+        y -= containerRect.top;
+      }
+      this.handleScrollZoom(x, y, direct);
+    }
+  }
+
   render() {
     let activeImg: ImageDecorator = {
       src: '',
@@ -532,7 +552,12 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     }
 
     return (
-      <div ref="viewerCore" className={className} style={viewerStryle}>
+      <div
+        ref="viewerCore"
+        className={className}
+        style={viewerStryle}
+        onWheel={this.handleMouseScroll}
+      >
         <div className={`${this.prefixCls}-mask`} style={{ zIndex: zIndex }} />
         {this.props.noClose || (
           <div
@@ -554,7 +579,6 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
           rotate={this.state.rotate}
           onChangeImgState={this.handleChangeImgState}
           onResize={this.handleResize}
-          onZoom={this.handleScrollZoom}
           zIndex={zIndex + 5}
           scaleX={this.state.scaleX}
           scaleY={this.state.scaleY}