react-viewer - npm Package Compare versions

Comparing version 2.2.6 to 2.3.0

dist/index.js

@@ -55,3 +55,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /* 0 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
@@ -73,11 +73,11 @@ 'use strict';
 
-/***/ },
+/***/ }),
 /* 1 */
-/***/ function(module, exports) {
+/***/ (function(module, exports) {
 
 	module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
 
-/***/ },
+/***/ }),
 /* 2 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
@@ -138,5 +138,5 @@ "use strict";
 
-/***/ },
+/***/ }),
 /* 3 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
@@ -192,5 +192,5 @@ 'use strict';
 
-/***/ },
+/***/ }),
 /* 4 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
@@ -243,19 +243,15 @@ 'use strict';
 	    Viewer.prototype.renderViewer = function renderViewer() {
-	        var _this2 = this;
-
 	        if (this.props.visible || this.component) {
-	            (function () {
-	                if (!_this2.container) {
-	                    if (_this2.props.container) {
-	                        _this2.container = _this2.props.container;
-	                    } else {
-	                        _this2.container = _this2.defaultContainer;
-	                        document.body.appendChild(_this2.container);
-	                    }
+	            if (!this.container) {
+	                if (this.props.container) {
+	                    this.container = this.props.container;
+	                } else {
+	                    this.container = this.defaultContainer;
+	                    document.body.appendChild(this.container);
 	                }
-	                var instance = _this2;
-	                ReactDOM.unstable_renderSubtreeIntoContainer(_this2, React.createElement(_ViewerCore2.default, _this2.props), _this2.container, function () {
-	                    instance.component = this;
-	                });
-	            })();
+	            }
+	            var instance = this;
+	            ReactDOM.unstable_renderSubtreeIntoContainer(this, React.createElement(_ViewerCore2.default, this.props), this.container, function () {
+	                instance.component = this;
+	            });
 	        }
@@ -316,5 +312,5 @@ };
 
-/***/ },
+/***/ }),
 /* 5 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
@@ -468,5 +464,3 @@ 'use strict';
 	            height: this.props.height + 'px',
-	            marginTop: this.props.top + 'px',
-	            marginLeft: this.props.left ? this.props.left + 'px' : 'auto',
-	            transform: 'rotate(' + this.props.rotate + 'deg) scaleX(' + this.props.scaleX + ') scaleY(' + this.props.scaleY + ')'
+	            transform: 'translateX(' + (this.props.left ? this.props.left + 'px' : 'aoto') + ') translateY(' + this.props.top + 'px) \n      rotate(' + this.props.rotate + 'deg) scaleX(' + this.props.scaleX + ') scaleY(' + this.props.scaleY + ')'
 	        };
@@ -485,6 +479,12 @@ var imgClass = this.props.drag ? 'drag' : '';
 	        if (this.props.loading) {
-	            imgNode = React.createElement(_Loading2.default, { style: {
-	                    marginTop: this.props.top,
-	                    marginLeft: this.props.left
-	                } });
+	            imgNode = React.createElement(
+	                'div',
+	                { style: {
+	                        display: 'flex',
+	                        height: '100%',
+	                        justifyContent: 'center',
+	                        alignItems: 'center'
+	                    } },
+	                React.createElement(_Loading2.default, null)
+	            );
 	        }
@@ -504,5 +504,5 @@ return React.createElement(
 
-/***/ },
+/***/ }),
 /* 6 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
@@ -672,4 +672,4 @@ 'use strict';
 	                height: 0,
-	                left: this.containerWidth / 2,
-	                top: (this.containerHeight - this.footerHeight) / 2,
+	                left: 0,
+	                top: 0,
 	                rotate: 0,
@@ -780,6 +780,6 @@ scaleX: 1,
 	            case _Icon.ActionType.scaleX:
-	                this.handleScaleX(this.state.scaleX === 1 ? -1 : 1);
+	                this.handleScaleX(-1);
 	                break;
 	            case _Icon.ActionType.scaleY:
-	                this.handleScaleY(this.state.scaleY === 1 ? -1 : 1);
+	                this.handleScaleY(-1);
 	                break;
@@ -793,3 +793,3 @@ default:
 	        this.setState({
-	            scaleX: newScale
+	            scaleX: this.state.scaleX * newScale
 	        });
@@ -800,3 +800,3 @@ };
 	        this.setState({
-	            scaleY: newScale
+	            scaleY: this.state.scaleY * newScale
 	        });
@@ -809,19 +809,42 @@ };
 	        var diffY = targetY - imgCenterXY.y;
-	        var diffWidth = direct * this.state.width * scale;
-	        var diffHeight = direct * this.state.height * scale;
 	        // when image width is 0, set original width
-	        if (diffWidth === 0) {
+	        var reset = false;
+	        var top = 0;
+	        var left = 0;
+	        var width = 0;
+	        var height = 0;
+	        var scaleX = 0;
+	        var scaleY = 0;
+	        if (this.state.width === 0) {
 	            var _getImgWidthHeight3 = this.getImgWidthHeight(this.state.imageWidth, this.state.imageHeight),
 	                _getImgWidthHeight4 = _slicedToArray(_getImgWidthHeight3, 2),
-	                width = _getImgWidthHeight4[0],
-	                height = _getImgWidthHeight4[1];
+	                imgWidth = _getImgWidthHeight4[0],
+	                imgHeight = _getImgWidthHeight4[1];
 
-	            diffWidth = width;
-	            diffHeight = height;
+	            reset = true;
+	            left = (this.containerWidth - imgWidth) / 2;
+	            top = (this.containerHeight - this.footerHeight - imgHeight) / 2;
+	            width = this.state.width + imgWidth;
+	            height = this.state.height + imgHeight;
+	            scaleX = scaleY = 1;
+	        } else {
+	            var directX = this.state.scaleX > 0 ? 1 : -1;
+	            var directY = this.state.scaleY > 0 ? 1 : -1;
+	            scaleX = this.state.scaleX + scale * direct * directX;
+	            scaleY = this.state.scaleY + scale * direct * directY;
+	            if (Math.abs(scaleX) < 0.1 || Math.abs(scaleY) < 0.1) {
+	                return;
+	            }
+	            top = this.state.top + -direct * diffY / this.state.scaleX * scale * directX;
+	            left = this.state.left + -direct * diffX / this.state.scaleY * scale * directY;
+	            width = this.state.width;
+	            height = this.state.height;
 	        }
 	        this.setState({
-	            width: this.state.width + diffWidth,
-	            height: this.state.height + diffHeight,
-	            top: this.state.top + -diffHeight / 2 + -direct * diffY * scale,
-	            left: this.state.left + -diffWidth / 2 + -direct * diffX * scale,
+	            width: width,
+	            scaleX: scaleX,
+	            scaleY: scaleY,
+	            height: height,
+	            top: top,
+	            left: left,
 	            loading: false
@@ -944,8 +967,9 @@ });
 	            this.bindEvent(true);
-	            var imgCenterXY2 = this.getImageCenterXY();
-	            this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1);
+	            this.handleZoom(this.containerWidth / 2, (this.containerHeight - this.footerHeight) / 2, -1, (this.state.scaleX > 0 ? 1 : -1) * this.state.scaleX - 0.11);
 	            setTimeout(function () {
 	                _this4.setState({
 	                    visible: false,
-	                    transitionEnd: false
+	                    transitionEnd: false,
+	                    width: 0,
+	                    height: 0
 	                });
@@ -1028,5 +1052,5 @@ }, transitionDuration);
 
-/***/ },
+/***/ }),
 /* 7 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
@@ -1104,5 +1128,5 @@ 'use strict';
 
-/***/ },
+/***/ }),
 /* 8 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
@@ -1242,17 +1266,17 @@ 'use strict';
 
-/***/ },
+/***/ }),
 /* 9 */
-/***/ function(module, exports) {
+/***/ (function(module, exports) {
 
 	// removed by extract-text-webpack-plugin
 
-/***/ },
+/***/ }),
 /* 10 */
-/***/ function(module, exports) {
+/***/ (function(module, exports) {
 
 	module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
 
-/***/ }
+/***/ })
 /******/ ])
 });
 ;

dist/index.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports["react-viewer"]=t(require("react"),require("react-dom")):e["react-viewer"]=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(4),r=i(o);t["default"]=r["default"],e.exports=t["default"]},function(t,n){t.exports=e},function(e,t,n){"use strict";function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function o(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):o(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=t.ActionType=void 0;var l=n(1),c=i(l),p=t.ActionType=void 0;!function(e){e[e.zoomIn=1]="zoomIn",e[e.zoomOut=2]="zoomOut",e[e.prev=3]="prev",e[e.next=4]="next",e[e.rotateLeft=5]="rotateLeft",e[e.rotateRight=6]="rotateRight",e[e.reset=7]="reset",e[e.close=8]="close",e[e.scaleX=9]="scaleX",e[e.scaleY=10]="scaleY"}(p||(t.ActionType=p={}));var h=function(e){function t(){return r(this,t),a(this,e.apply(this,arguments))}return s(t,e),t.prototype.render=function(){var e="react-viewer-icon";return c.createElement("i",{className:e+" "+e+"-"+p[this.props.type]})},t}(c.Component);t["default"]=h},function(e,t,n){"use strict";function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function o(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):o(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var l=n(1),c=i(l),p=function(e){function t(){return r(this,t),a(this,e.call(this))}return s(t,e),t.prototype.render=function(){var e="spin spin-spinning";return c.createElement("div",{className:"spin-wrap",style:this.props.style},c.createElement("div",{className:e},c.createElement("div",{className:"spin-dot"})))},t}(c.Component);t["default"]=p,e.exports=t["default"]},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):r(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var c=n(1),p=o(c),h=n(10),u=o(h),d=n(6),f=i(d),y=function(e){function t(){a(this,t);var n=s(this,e.call(this));return n.container=null,n.defaultContainer=document.createElement("div"),n.component=null,n}return l(t,e),t.prototype.renderViewer=function(){var e=this;(this.props.visible||this.component)&&!function(){e.container||(e.props.container?e.container=e.props.container:(e.container=e.defaultContainer,document.body.appendChild(e.container)));var t=e;u.unstable_renderSubtreeIntoContainer(e,p.createElement(f["default"],e.props),e.container,function(){t.component=this})}()},t.prototype.removeViewer=function(){if(this.container){var e=this.container;u.unmountComponentAtNode(e),e.parentNode.removeChild(e),this.container=null,this.component=null}},t.prototype.componentWillUnmount=function(){this.props.visible?(this.props.onClose(),this.removeViewer()):this.removeViewer()},t.prototype.componentWillReceiveProps=function(e){this.props.container!==e.container&&(this.component=null,e.container?(this.container&&document.body.removeChild(this.container),this.container=e.container):(this.container=this.defaultContainer,document.body.appendChild(this.container)))},t.prototype.componentDidMount=function(){this.renderViewer()},t.prototype.componentDidUpdate=function(){this.renderViewer()},t.prototype.render=function(){return null},t}(p.Component);t["default"]=y,e.exports=t["default"]},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):r(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var c=n(1),p=o(c),h=n(3),u=i(h),d=function(e){function t(){a(this,t);var n=s(this,e.call(this));return n.handleResize=function(e){n.props.onResize()},n.handleCanvasMouseDown=function(e){n.props.onCanvasMouseDown(e),n.handleMouseDown(e)},n.state={isMouseDown:!1,mouseX:0,mouseY:0},n.handleMouseScroll=n.handleMouseScroll.bind(n),n.handleMouseDown=n.handleMouseDown.bind(n),n.bindEvent=n.bindEvent.bind(n),n.handleMouseMove=n.handleMouseMove.bind(n),n.handleMouseUp=n.handleMouseUp.bind(n),n}return l(t,e),t.prototype.componentDidMount=function(){this.props.drag&&this.bindEvent()},t.prototype.handleMouseDown=function(e){this.props.visible&&this.props.drag&&(e.preventDefault(),e.stopPropagation(),this.setState({isMouseDown:!0,mouseX:e.nativeEvent.pageX,mouseY:e.nativeEvent.pageY}))},t.prototype.handleMouseMove=function(e){if(this.state.isMouseDown){var t=e.x-this.state.mouseX,n=e.y-this.state.mouseY;this.setState({mouseX:e.x,mouseY:e.y}),this.props.onChangeImgState(this.props.width,this.props.height,this.props.top+n,this.props.left+t)}},t.prototype.handleMouseUp=function(e){this.setState({isMouseDown:!1})},t.prototype.handleMouseScroll=function(e){var t=0;if(e.wheelDelta?t=e.wheelDelta>0?1:-1:e.detail&&(t=e.detail>0?1:-1),0!==t){var n=e.pageX,i=e.pageY;this.props.onZoom(n,i,t,.05)}},t.prototype.bindEvent=function(e){var t="addEventListener";e&&(t="removeEventListener"),document[t]("mousewheel",this.handleMouseScroll,!1),document[t]("click",this.handleMouseUp,!1),document[t]("mousemove",this.handleMouseMove,!1),window[t]("resize",this.handleResize,!1)},t.prototype.componentWillReceiveProps=function(e){return!this.props.visible&&e.visible&&e.drag?this.bindEvent():this.props.visible&&!e.visible&&(this.handleMouseUp({}),e.drag)?this.bindEvent(!0):this.props.drag&&!e.drag?this.bindEvent(!0):!this.props.drag&&e.drag&&e.visible?this.bindEvent(!0):void 0},t.prototype.componentWillUnmount=function(){this.bindEvent(!0)},t.prototype.render=function(){var e={width:this.props.width+"px",height:this.props.height+"px",marginTop:this.props.top+"px",marginLeft:this.props.left?this.props.left+"px":"auto",transform:"rotate("+this.props.rotate+"deg) scaleX("+this.props.scaleX+") scaleY("+this.props.scaleY+")"},t=this.props.drag?"drag":"";this.state.isMouseDown||(t+=" "+this.props.prefixCls+"-image-transition");var n={zIndex:this.props.zIndex},i=null;return""!==this.props.imgSrc&&(i=p.createElement("img",{className:t,src:this.props.imgSrc,style:e,onMouseDown:this.handleMouseDown})),this.props.loading&&(i=p.createElement(u["default"],{style:{marginTop:this.props.top,marginLeft:this.props.left}})),p.createElement("div",{className:this.props.prefixCls+"-canvas",onMouseDown:this.handleCanvasMouseDown,style:n},i)},t}(p.Component);t["default"]=d,e.exports=t["default"]},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):r(e,t))}function c(){}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var p=function(){function e(e,t){var n=[],i=!0,o=!1,r=void 0;try{for(var a,s=e[Symbol.iterator]();!(i=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);i=!0);}catch(l){o=!0,r=l}finally{try{!i&&s["return"]&&s["return"]()}finally{if(o)throw r}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),h=n(1),u=o(h);n(9);var d=n(5),f=i(d),y=n(7),m=i(y),v=n(8),b=i(v),g=n(2),w=i(g),x=300,C=function(e){function t(n){a(this,t);var i=s(this,e.call(this,n));return i.handleTransitionEnd=function(e){i.state.transitionEnd&&!i.state.visibleStart||i.setState({visibleStart:!1,transitionEnd:!0})},i.handleCanvasMouseDown=function(e){i.props.onMaskClick(e)},i.prefixCls="react-viewer",i.state={visible:!1,visibleStart:!1,transitionEnd:!1,activeIndex:i.props.activeIndex,width:0,height:0,top:15,left:null,rotate:0,imageWidth:0,imageHeight:0,scaleX:1,scaleY:1,loading:!1},i.handleChangeImg=i.handleChangeImg.bind(i),i.handleChangeImgState=i.handleChangeImgState.bind(i),i.handleAction=i.handleAction.bind(i),i.handleResize=i.handleResize.bind(i),i.handleZoom=i.handleZoom.bind(i),i.handleRotate=i.handleRotate.bind(i),i.handleKeydown=i.handleKeydown.bind(i),i.handleScaleX=i.handleScaleX.bind(i),i.handleScaleY=i.handleScaleY.bind(i),i.getImageCenterXY=i.getImageCenterXY.bind(i),i.setContainerWidthHeight(),i.footerHeight=84,i}return l(t,e),t.prototype.setContainerWidthHeight=function(){this.containerWidth=window.innerWidth,this.containerHeight=window.innerHeight,this.props.container&&(this.containerWidth=this.props.container.offsetWidth,this.containerHeight=this.props.container.offsetHeight)},t.prototype.handleClose=function(e){this.props.onClose()},t.prototype.startVisible=function(e){var t=this;this.setState({visibleStart:!0}),setTimeout(function(){t.setState({visible:!0}),setTimeout(function(){t.bindEvent(),t.loadImg(e,!0)},300)},10)},t.prototype.componentDidMount=function(){this.refs.viewerCore.addEventListener("transitionend",this.handleTransitionEnd,!1),this.startVisible(this.state.activeIndex)},t.prototype.getImgWidthHeight=function(e,t){var n=0,i=0,o=.8*this.containerWidth,r=.8*(this.containerHeight-this.footerHeight);return n=Math.min(o,e),i=n/e*t,i>r&&(i=r,n=i/t*e),[n,i]},t.prototype.loadImg=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i="",o=this.props.images||[];o.length>0&&(i=o[e].src);var r=new Image;r.src=i,n?this.setState({activeIndex:e,width:0,height:0,left:this.containerWidth/2,top:(this.containerHeight-this.footerHeight)/2,rotate:0,scaleX:1,scaleY:1,loading:!0}):this.setState({activeIndex:e,loading:!0}),r.onload=function(){var i=r.width,o=r.height;if(n)setTimeout(function(){t.setState({activeIndex:e,imageWidth:i,imageHeight:o});var n=t.getImageCenterXY();t.handleZoom(n.x,n.y,1,1)},50);else{var a=t.getImgWidthHeight(i,o),s=p(a,2),l=s[0],c=s[1],h=(t.containerWidth-l)/2,u=(t.containerHeight-c-t.footerHeight)/2;t.setState({activeIndex:e,width:l,height:c,left:h,top:u,imageWidth:i,imageHeight:o,loading:!1,rotate:0,scaleX:1,scaleY:1})}},r.onerror=function(){t.setState({activeIndex:e,imageWidth:0,imageHeight:0,loading:!1})}},t.prototype.handleChangeImg=function(e){this.loadImg(e)},t.prototype.handleChangeImgState=function(e,t,n,i){this.setState({width:e,height:t,top:n,left:i})},t.prototype.handleAction=function(e){switch(e){case g.ActionType.prev:this.state.activeIndex-1>=0&&this.handleChangeImg(this.state.activeIndex-1);break;case g.ActionType.next:this.state.activeIndex+1<this.props.images.length&&this.handleChangeImg(this.state.activeIndex+1);break;case g.ActionType.zoomIn:var t=this.getImageCenterXY();this.handleZoom(t.x,t.y,1,.05);break;case g.ActionType.zoomOut:var n=this.getImageCenterXY();this.handleZoom(n.x,n.y,-1,.05);break;case g.ActionType.rotateLeft:this.handleRotate();break;case g.ActionType.rotateRight:this.handleRotate(!0);break;case g.ActionType.reset:this.loadImg(this.state.activeIndex);break;case g.ActionType.scaleX:this.handleScaleX(1===this.state.scaleX?-1:1);break;case g.ActionType.scaleY:this.handleScaleY(1===this.state.scaleY?-1:1)}},t.prototype.handleScaleX=function(e){this.setState({scaleX:e})},t.prototype.handleScaleY=function(e){this.setState({scaleY:e})},t.prototype.handleZoom=function(e,t,n,i){var o=this.getImageCenterXY(),r=e-o.x,a=t-o.y,s=n*this.state.width*i,l=n*this.state.height*i;if(0===s){var c=this.getImgWidthHeight(this.state.imageWidth,this.state.imageHeight),h=p(c,2),u=h[0],d=h[1];s=u,l=d}this.setState({width:this.state.width+s,height:this.state.height+l,top:this.state.top+-l/2+-n*a*i,left:this.state.left+-s/2+-n*r*i,loading:!1})},t.prototype.getImageCenterXY=function(){return{x:this.state.left+this.state.width/2,y:this.state.top+this.state.height/2}},t.prototype.handleRotate=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.setState({rotate:this.state.rotate+90*(e?1:-1)})},t.prototype.handleResize=function(){if(this.setContainerWidthHeight(),this.props.visible){var e=this.getImgWidthHeight(this.state.imageWidth,this.state.imageHeight),t=p(e,2),n=t[0],i=t[1],o=(this.containerWidth-n)/2,r=(this.containerHeight-i-this.footerHeight)/2;this.setState({width:n,height:i,left:o,top:r,rotate:0,scaleX:1,scaleY:1})}},t.prototype.handleKeydown=function(e){var t=e.keyCode||e.which||e.charCode,n=!1;switch(t){case 27:this.props.onClose(),n=!0;break;case 37:e.ctrlKey?this.handleAction(g.ActionType.rotateLeft):this.handleAction(g.ActionType.prev),n=!0;break;case 39:e.ctrlKey?this.handleAction(g.ActionType.rotateRight):this.handleAction(g.ActionType.next),n=!0;break;case 38:this.handleAction(g.ActionType.zoomIn),n=!0;break;case 40:this.handleAction(g.ActionType.zoomOut),n=!0;break;case 49:e.ctrlKey&&(this.loadImg(this.state.activeIndex),n=!0)}n&&e.preventDefault()},t.prototype.bindEvent=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t="addEventListener";e&&(t="removeEventListener"),document[t]("keydown",this.handleKeydown,!1)},t.prototype.componentWillUnmount=function(){this.bindEvent(!0),this.refs.viewerCore.removeEventListener("transitionend",this.handleTransitionEnd,!1)},t.prototype.componentWillReceiveProps=function(e){var t=this;if(!this.props.visible&&e.visible)return void this.startVisible(e.activeIndex);if(this.props.visible&&!e.visible){this.bindEvent(!0);var n=this.getImageCenterXY();return this.handleZoom(n.x,n.y,-1,1),void setTimeout(function(){t.setState({visible:!1,transitionEnd:!1})},x)}return this.props.activeIndex!==e.activeIndex?void this.handleChangeImg(e.activeIndex):void 0},t.prototype.render=function(){var e={src:"",alt:""},t=1e3;this.props.zIndex&&(t=this.props.zIndex);var n={opacity:this.state.visible?1:0};if(!this.state.visible&&this.state.transitionEnd&&(n.display="none"),!this.state.visible&&this.state.visibleStart&&(n.display="block"),this.state.visible&&this.state.transitionEnd){var i=this.props.images||[];i.length>0&&this.state.activeIndex>=0&&(e=i[this.state.activeIndex])}var o=this.prefixCls+" "+this.prefixCls+"-transition";return this.props.container&&(o+=" inline"),u.createElement("div",{ref:"viewerCore",className:o,style:n},u.createElement("div",{className:this.prefixCls+"-mask",style:{zIndex:t}}),u.createElement("div",{className:this.prefixCls+"-close "+this.prefixCls+"-btn",onClick:this.handleClose.bind(this),style:{zIndex:t+10}},u.createElement(w["default"],{type:g.ActionType.close})),u.createElement(f["default"],{prefixCls:this.prefixCls,imgSrc:e.src,visible:this.props.visible,width:this.state.width,height:this.state.height,top:this.state.top,left:this.state.left,rotate:this.state.rotate,onChangeImgState:this.handleChangeImgState,onResize:this.handleResize,onZoom:this.handleZoom,zIndex:t+5,scaleX:this.state.scaleX,scaleY:this.state.scaleY,loading:this.state.loading,drag:this.props.drag,onCanvasMouseDown:this.handleCanvasMouseDown}),u.createElement("div",{className:this.prefixCls+"-footer",style:{zIndex:t+5}},u.createElement(b["default"],{prefixCls:this.prefixCls,onAction:this.handleAction,alt:e.alt,width:this.state.imageWidth,height:this.state.imageHeight,attribute:this.props.attribute,zoomable:this.props.zoomable,rotatable:this.props.rotatable,scalable:this.props.scalable,changeable:!0}),u.createElement(m["default"],{prefixCls:this.prefixCls,images:this.props.images,activeIndex:this.state.activeIndex,onChangeImg:this.handleChangeImg})))},t}(u.Component);t["default"]=C,C.defaultProps={visible:!1,onClose:c,images:[],activeIndex:0,zIndex:1e3,drag:!0,attribute:!0,zoomable:!0,rotatable:!0,scalable:!0,onMaskClick:c},e.exports=t["default"]},function(e,t,n){"use strict";function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function o(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):o(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var l=n(1),c=i(l),p=function(e){function t(){return r(this,t),a(this,e.apply(this,arguments))}return s(t,e),t.prototype.handleChangeImg=function(e){this.props.activeIndex!==e&&this.props.onChangeImg(e)},t.prototype.render=function(){var e=this,t=1.5*(Math.ceil(this.props.images.length/2)-this.props.activeIndex-1)*30,n={marginLeft:t+"px"};return c.createElement("div",{className:this.props.prefixCls+"-navbar"},c.createElement("ul",{className:this.props.prefixCls+"-list "+this.props.prefixCls+"-list-transition",style:n},this.props.images.map(function(t,n){return c.createElement("li",{key:n,className:n===e.props.activeIndex?"active":"",onClick:e.handleChangeImg.bind(e,n)},c.createElement("img",{src:t.src,alt:t.alt}))})))},t}(c.Component);t["default"]=p,p.defaultProps={activeIndex:0},e.exports=t["default"]},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):r(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var c=n(1),p=o(c),h=n(2),u=i(h),d=function(e){function t(){return a(this,t),s(this,e.call(this))}return l(t,e),t.prototype.handleAction=function(e){this.props.onAction(e)},t.prototype.render=function(){var e=this,t=this.props.attribute?p.createElement("p",{className:this.props.prefixCls+"-attribute"},this.props.alt+"("+this.props.width+" x "+this.props.height+")"):null,n=[];return this.props.zoomable&&(n=n.concat([p.createElement("li",{key:"zoomIn",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.zoomIn)}},p.createElement(u["default"],{type:h.ActionType.zoomIn})),p.createElement("li",{key:"zoomOut",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.zoomOut)}},p.createElement(u["default"],{type:h.ActionType.zoomOut}))])),this.props.changeable&&(n=n.concat([p.createElement("li",{key:"prev",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.prev)}},p.createElement(u["default"],{type:h.ActionType.prev})),p.createElement("li",{key:"reset",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.reset)}},p.createElement(u["default"],{type:h.ActionType.reset})),p.createElement("li",{key:"next",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.next)}},p.createElement(u["default"],{type:h.ActionType.next}))])),this.props.rotatable&&(n=n.concat([p.createElement("li",{key:"rotateLeft",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.rotateLeft)}},p.createElement(u["default"],{type:h.ActionType.rotateLeft})),p.createElement("li",{key:"rotateRight",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.rotateRight)}},p.createElement(u["default"],{type:h.ActionType.rotateRight}))])),this.props.scalable&&(n=n.concat([p.createElement("li",{key:"scaleX",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.scaleX)}},p.createElement(u["default"],{type:h.ActionType.scaleX})),p.createElement("li",{key:"scaleY",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.scaleY)}},p.createElement(u["default"],{type:h.ActionType.scaleY}))])),p.createElement("div",null,t,p.createElement("ul",{className:this.props.prefixCls+"-toolbar"},n))},t}(p.Component);t["default"]=d,e.exports=t["default"]},function(e,t){},function(e,n){e.exports=t}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports["react-viewer"]=t(require("react"),require("react-dom")):e["react-viewer"]=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(4),r=i(o);t.default=r.default,e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){"use strict";function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function o(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):o(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.ActionType=void 0;var l=n(1),c=i(l),p=t.ActionType=void 0;!function(e){e[e.zoomIn=1]="zoomIn",e[e.zoomOut=2]="zoomOut",e[e.prev=3]="prev",e[e.next=4]="next",e[e.rotateLeft=5]="rotateLeft",e[e.rotateRight=6]="rotateRight",e[e.reset=7]="reset",e[e.close=8]="close",e[e.scaleX=9]="scaleX",e[e.scaleY=10]="scaleY"}(p||(t.ActionType=p={}));var h=function(e){function t(){return r(this,t),s(this,e.apply(this,arguments))}return a(t,e),t.prototype.render=function(){var e="react-viewer-icon";return c.createElement("i",{className:e+" "+e+"-"+p[this.props.type]})},t}(c.Component);t.default=h},function(e,t,n){"use strict";function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function o(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):o(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=n(1),c=i(l),p=function(e){function t(){return r(this,t),s(this,e.call(this))}return a(t,e),t.prototype.render=function(){var e="spin spin-spinning";return c.createElement("div",{className:"spin-wrap",style:this.props.style},c.createElement("div",{className:e},c.createElement("div",{className:"spin-dot"})))},t}(c.Component);t.default=p,e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):r(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var c=n(1),p=o(c),h=n(10),u=o(h),d=n(6),f=i(d),y=function(e){function t(){s(this,t);var n=a(this,e.call(this));return n.container=null,n.defaultContainer=document.createElement("div"),n.component=null,n}return l(t,e),t.prototype.renderViewer=function(){if(this.props.visible||this.component){this.container||(this.props.container?this.container=this.props.container:(this.container=this.defaultContainer,document.body.appendChild(this.container)));var e=this;u.unstable_renderSubtreeIntoContainer(this,p.createElement(f.default,this.props),this.container,function(){e.component=this})}},t.prototype.removeViewer=function(){if(this.container){var e=this.container;u.unmountComponentAtNode(e),e.parentNode.removeChild(e),this.container=null,this.component=null}},t.prototype.componentWillUnmount=function(){this.props.visible?(this.props.onClose(),this.removeViewer()):this.removeViewer()},t.prototype.componentWillReceiveProps=function(e){this.props.container!==e.container&&(this.component=null,e.container?(this.container&&document.body.removeChild(this.container),this.container=e.container):(this.container=this.defaultContainer,document.body.appendChild(this.container)))},t.prototype.componentDidMount=function(){this.renderViewer()},t.prototype.componentDidUpdate=function(){this.renderViewer()},t.prototype.render=function(){return null},t}(p.Component);t.default=y,e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):r(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var c=n(1),p=o(c),h=n(3),u=i(h),d=function(e){function t(){s(this,t);var n=a(this,e.call(this));return n.handleResize=function(e){n.props.onResize()},n.handleCanvasMouseDown=function(e){n.props.onCanvasMouseDown(e),n.handleMouseDown(e)},n.state={isMouseDown:!1,mouseX:0,mouseY:0},n.handleMouseScroll=n.handleMouseScroll.bind(n),n.handleMouseDown=n.handleMouseDown.bind(n),n.bindEvent=n.bindEvent.bind(n),n.handleMouseMove=n.handleMouseMove.bind(n),n.handleMouseUp=n.handleMouseUp.bind(n),n}return l(t,e),t.prototype.componentDidMount=function(){this.props.drag&&this.bindEvent()},t.prototype.handleMouseDown=function(e){this.props.visible&&this.props.drag&&(e.preventDefault(),e.stopPropagation(),this.setState({isMouseDown:!0,mouseX:e.nativeEvent.pageX,mouseY:e.nativeEvent.pageY}))},t.prototype.handleMouseMove=function(e){if(this.state.isMouseDown){var t=e.x-this.state.mouseX,n=e.y-this.state.mouseY;this.setState({mouseX:e.x,mouseY:e.y}),this.props.onChangeImgState(this.props.width,this.props.height,this.props.top+n,this.props.left+t)}},t.prototype.handleMouseUp=function(e){this.setState({isMouseDown:!1})},t.prototype.handleMouseScroll=function(e){var t=0;if(e.wheelDelta?t=e.wheelDelta>0?1:-1:e.detail&&(t=e.detail>0?1:-1),0!==t){var n=e.pageX,i=e.pageY;this.props.onZoom(n,i,t,.05)}},t.prototype.bindEvent=function(e){var t="addEventListener";e&&(t="removeEventListener"),document[t]("mousewheel",this.handleMouseScroll,!1),document[t]("click",this.handleMouseUp,!1),document[t]("mousemove",this.handleMouseMove,!1),window[t]("resize",this.handleResize,!1)},t.prototype.componentWillReceiveProps=function(e){return!this.props.visible&&e.visible&&e.drag?this.bindEvent():this.props.visible&&!e.visible&&(this.handleMouseUp({}),e.drag)?this.bindEvent(!0):this.props.drag&&!e.drag?this.bindEvent(!0):!this.props.drag&&e.drag&&e.visible?this.bindEvent(!0):void 0},t.prototype.componentWillUnmount=function(){this.bindEvent(!0)},t.prototype.render=function(){var e={width:this.props.width+"px",height:this.props.height+"px",transform:"translateX("+(this.props.left?this.props.left+"px":"aoto")+") translateY("+this.props.top+"px) \n      rotate("+this.props.rotate+"deg) scaleX("+this.props.scaleX+") scaleY("+this.props.scaleY+")"},t=this.props.drag?"drag":"";this.state.isMouseDown||(t+=" "+this.props.prefixCls+"-image-transition");var n={zIndex:this.props.zIndex},i=null;return""!==this.props.imgSrc&&(i=p.createElement("img",{className:t,src:this.props.imgSrc,style:e,onMouseDown:this.handleMouseDown})),this.props.loading&&(i=p.createElement("div",{style:{display:"flex",height:"100%",justifyContent:"center",alignItems:"center"}},p.createElement(u.default,null))),p.createElement("div",{className:this.props.prefixCls+"-canvas",onMouseDown:this.handleCanvasMouseDown,style:n},i)},t}(p.Component);t.default=d,e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):r(e,t))}function c(){}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var p=function(){function e(e,t){var n=[],i=!0,o=!1,r=void 0;try{for(var s,a=e[Symbol.iterator]();!(i=(s=a.next()).done)&&(n.push(s.value),!t||n.length!==t);i=!0);}catch(e){o=!0,r=e}finally{try{!i&&a.return&&a.return()}finally{if(o)throw r}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),h=n(1),u=o(h);n(9);var d=n(5),f=i(d),y=n(7),m=i(y),v=n(8),b=i(v),g=n(2),w=i(g),x=300,C=function(e){function t(n){s(this,t);var i=a(this,e.call(this,n));return i.handleTransitionEnd=function(e){i.state.transitionEnd&&!i.state.visibleStart||i.setState({visibleStart:!1,transitionEnd:!0})},i.handleCanvasMouseDown=function(e){i.props.onMaskClick(e)},i.prefixCls="react-viewer",i.state={visible:!1,visibleStart:!1,transitionEnd:!1,activeIndex:i.props.activeIndex,width:0,height:0,top:15,left:null,rotate:0,imageWidth:0,imageHeight:0,scaleX:1,scaleY:1,loading:!1},i.handleChangeImg=i.handleChangeImg.bind(i),i.handleChangeImgState=i.handleChangeImgState.bind(i),i.handleAction=i.handleAction.bind(i),i.handleResize=i.handleResize.bind(i),i.handleZoom=i.handleZoom.bind(i),i.handleRotate=i.handleRotate.bind(i),i.handleKeydown=i.handleKeydown.bind(i),i.handleScaleX=i.handleScaleX.bind(i),i.handleScaleY=i.handleScaleY.bind(i),i.getImageCenterXY=i.getImageCenterXY.bind(i),i.setContainerWidthHeight(),i.footerHeight=84,i}return l(t,e),t.prototype.setContainerWidthHeight=function(){this.containerWidth=window.innerWidth,this.containerHeight=window.innerHeight,this.props.container&&(this.containerWidth=this.props.container.offsetWidth,this.containerHeight=this.props.container.offsetHeight)},t.prototype.handleClose=function(e){this.props.onClose()},t.prototype.startVisible=function(e){var t=this;this.setState({visibleStart:!0}),setTimeout(function(){t.setState({visible:!0}),setTimeout(function(){t.bindEvent(),t.loadImg(e,!0)},300)},10)},t.prototype.componentDidMount=function(){this.refs.viewerCore.addEventListener("transitionend",this.handleTransitionEnd,!1),this.startVisible(this.state.activeIndex)},t.prototype.getImgWidthHeight=function(e,t){var n=0,i=0,o=.8*this.containerWidth,r=.8*(this.containerHeight-this.footerHeight);return n=Math.min(o,e),i=n/e*t,i>r&&(i=r,n=i/t*e),[n,i]},t.prototype.loadImg=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i="",o=this.props.images||[];o.length>0&&(i=o[e].src);var r=new Image;r.src=i,n?this.setState({activeIndex:e,width:0,height:0,left:0,top:0,rotate:0,scaleX:1,scaleY:1,loading:!0}):this.setState({activeIndex:e,loading:!0}),r.onload=function(){var i=r.width,o=r.height;if(n)setTimeout(function(){t.setState({activeIndex:e,imageWidth:i,imageHeight:o});var n=t.getImageCenterXY();t.handleZoom(n.x,n.y,1,1)},50);else{var s=t.getImgWidthHeight(i,o),a=p(s,2),l=a[0],c=a[1],h=(t.containerWidth-l)/2,u=(t.containerHeight-c-t.footerHeight)/2;t.setState({activeIndex:e,width:l,height:c,left:h,top:u,imageWidth:i,imageHeight:o,loading:!1,rotate:0,scaleX:1,scaleY:1})}},r.onerror=function(){t.setState({activeIndex:e,imageWidth:0,imageHeight:0,loading:!1})}},t.prototype.handleChangeImg=function(e){this.loadImg(e)},t.prototype.handleChangeImgState=function(e,t,n,i){this.setState({width:e,height:t,top:n,left:i})},t.prototype.handleAction=function(e){switch(e){case g.ActionType.prev:this.state.activeIndex-1>=0&&this.handleChangeImg(this.state.activeIndex-1);break;case g.ActionType.next:this.state.activeIndex+1<this.props.images.length&&this.handleChangeImg(this.state.activeIndex+1);break;case g.ActionType.zoomIn:var t=this.getImageCenterXY();this.handleZoom(t.x,t.y,1,.05);break;case g.ActionType.zoomOut:var n=this.getImageCenterXY();this.handleZoom(n.x,n.y,-1,.05);break;case g.ActionType.rotateLeft:this.handleRotate();break;case g.ActionType.rotateRight:this.handleRotate(!0);break;case g.ActionType.reset:this.loadImg(this.state.activeIndex);break;case g.ActionType.scaleX:this.handleScaleX(-1);break;case g.ActionType.scaleY:this.handleScaleY(-1)}},t.prototype.handleScaleX=function(e){this.setState({scaleX:this.state.scaleX*e})},t.prototype.handleScaleY=function(e){this.setState({scaleY:this.state.scaleY*e})},t.prototype.handleZoom=function(e,t,n,i){var o=this.getImageCenterXY(),r=e-o.x,s=t-o.y,a=!1,l=0,c=0,h=0,u=0,d=0,f=0;if(0===this.state.width){var y=this.getImgWidthHeight(this.state.imageWidth,this.state.imageHeight),m=p(y,2),v=m[0],b=m[1];a=!0,c=(this.containerWidth-v)/2,l=(this.containerHeight-this.footerHeight-b)/2,h=this.state.width+v,u=this.state.height+b,d=f=1}else{var g=this.state.scaleX>0?1:-1,w=this.state.scaleY>0?1:-1;if(d=this.state.scaleX+i*n*g,f=this.state.scaleY+i*n*w,Math.abs(d)<.1||Math.abs(f)<.1)return;l=this.state.top+-n*s/this.state.scaleX*i*g,c=this.state.left+-n*r/this.state.scaleY*i*w,h=this.state.width,u=this.state.height}this.setState({width:h,scaleX:d,scaleY:f,height:u,top:l,left:c,loading:!1})},t.prototype.getImageCenterXY=function(){return{x:this.state.left+this.state.width/2,y:this.state.top+this.state.height/2}},t.prototype.handleRotate=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.setState({rotate:this.state.rotate+90*(e?1:-1)})},t.prototype.handleResize=function(){if(this.setContainerWidthHeight(),this.props.visible){var e=this.getImgWidthHeight(this.state.imageWidth,this.state.imageHeight),t=p(e,2),n=t[0],i=t[1],o=(this.containerWidth-n)/2,r=(this.containerHeight-i-this.footerHeight)/2;this.setState({width:n,height:i,left:o,top:r,rotate:0,scaleX:1,scaleY:1})}},t.prototype.handleKeydown=function(e){var t=e.keyCode||e.which||e.charCode,n=!1;switch(t){case 27:this.props.onClose(),n=!0;break;case 37:e.ctrlKey?this.handleAction(g.ActionType.rotateLeft):this.handleAction(g.ActionType.prev),n=!0;break;case 39:e.ctrlKey?this.handleAction(g.ActionType.rotateRight):this.handleAction(g.ActionType.next),n=!0;break;case 38:this.handleAction(g.ActionType.zoomIn),n=!0;break;case 40:this.handleAction(g.ActionType.zoomOut),n=!0;break;case 49:e.ctrlKey&&(this.loadImg(this.state.activeIndex),n=!0)}n&&e.preventDefault()},t.prototype.bindEvent=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t="addEventListener";e&&(t="removeEventListener"),document[t]("keydown",this.handleKeydown,!1)},t.prototype.componentWillUnmount=function(){this.bindEvent(!0),this.refs.viewerCore.removeEventListener("transitionend",this.handleTransitionEnd,!1)},t.prototype.componentWillReceiveProps=function(e){var t=this;return!this.props.visible&&e.visible?void this.startVisible(e.activeIndex):this.props.visible&&!e.visible?(this.bindEvent(!0),this.handleZoom(this.containerWidth/2,(this.containerHeight-this.footerHeight)/2,-1,(this.state.scaleX>0?1:-1)*this.state.scaleX-.11),void setTimeout(function(){t.setState({visible:!1,transitionEnd:!1,width:0,height:0})},x)):this.props.activeIndex!==e.activeIndex?void this.handleChangeImg(e.activeIndex):void 0},t.prototype.render=function(){var e={src:"",alt:""},t=1e3;this.props.zIndex&&(t=this.props.zIndex);var n={opacity:this.state.visible?1:0};if(!this.state.visible&&this.state.transitionEnd&&(n.display="none"),!this.state.visible&&this.state.visibleStart&&(n.display="block"),this.state.visible&&this.state.transitionEnd){var i=this.props.images||[];i.length>0&&this.state.activeIndex>=0&&(e=i[this.state.activeIndex])}var o=this.prefixCls+" "+this.prefixCls+"-transition";return this.props.container&&(o+=" inline"),u.createElement("div",{ref:"viewerCore",className:o,style:n},u.createElement("div",{className:this.prefixCls+"-mask",style:{zIndex:t}}),u.createElement("div",{className:this.prefixCls+"-close "+this.prefixCls+"-btn",onClick:this.handleClose.bind(this),style:{zIndex:t+10}},u.createElement(w.default,{type:g.ActionType.close})),u.createElement(f.default,{prefixCls:this.prefixCls,imgSrc:e.src,visible:this.props.visible,width:this.state.width,height:this.state.height,top:this.state.top,left:this.state.left,rotate:this.state.rotate,onChangeImgState:this.handleChangeImgState,onResize:this.handleResize,onZoom:this.handleZoom,zIndex:t+5,scaleX:this.state.scaleX,scaleY:this.state.scaleY,loading:this.state.loading,drag:this.props.drag,onCanvasMouseDown:this.handleCanvasMouseDown}),u.createElement("div",{className:this.prefixCls+"-footer",style:{zIndex:t+5}},u.createElement(b.default,{prefixCls:this.prefixCls,onAction:this.handleAction,alt:e.alt,width:this.state.imageWidth,height:this.state.imageHeight,attribute:this.props.attribute,zoomable:this.props.zoomable,rotatable:this.props.rotatable,scalable:this.props.scalable,changeable:!0}),u.createElement(m.default,{prefixCls:this.prefixCls,images:this.props.images,activeIndex:this.state.activeIndex,onChangeImg:this.handleChangeImg})))},t}(u.Component);t.default=C,C.defaultProps={visible:!1,onClose:c,images:[],activeIndex:0,zIndex:1e3,drag:!0,attribute:!0,zoomable:!0,rotatable:!0,scalable:!0,onMaskClick:c},e.exports=t.default},function(e,t,n){"use strict";function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function o(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):o(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=n(1),c=i(l),p=function(e){function t(){return r(this,t),s(this,e.apply(this,arguments))}return a(t,e),t.prototype.handleChangeImg=function(e){this.props.activeIndex!==e&&this.props.onChangeImg(e)},t.prototype.render=function(){var e=this,t=1.5*(Math.ceil(this.props.images.length/2)-this.props.activeIndex-1)*30,n={marginLeft:t+"px"};return c.createElement("div",{className:this.props.prefixCls+"-navbar"},c.createElement("ul",{className:this.props.prefixCls+"-list "+this.props.prefixCls+"-list-transition",style:n},this.props.images.map(function(t,n){return c.createElement("li",{key:n,className:n===e.props.activeIndex?"active":"",onClick:e.handleChangeImg.bind(e,n)},c.createElement("img",{src:t.src,alt:t.alt}))})))},t}(c.Component);t.default=p,p.defaultProps={activeIndex:0},e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,r)}return e}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):r(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var c=n(1),p=o(c),h=n(2),u=i(h),d=function(e){function t(){return s(this,t),a(this,e.call(this))}return l(t,e),t.prototype.handleAction=function(e){this.props.onAction(e)},t.prototype.render=function(){var e=this,t=this.props.attribute?p.createElement("p",{className:this.props.prefixCls+"-attribute"},this.props.alt+"("+this.props.width+" x "+this.props.height+")"):null,n=[];return this.props.zoomable&&(n=n.concat([p.createElement("li",{key:"zoomIn",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.zoomIn)}},p.createElement(u.default,{type:h.ActionType.zoomIn})),p.createElement("li",{key:"zoomOut",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.zoomOut)}},p.createElement(u.default,{type:h.ActionType.zoomOut}))])),this.props.changeable&&(n=n.concat([p.createElement("li",{key:"prev",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.prev)}},p.createElement(u.default,{type:h.ActionType.prev})),p.createElement("li",{key:"reset",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.reset)}},p.createElement(u.default,{type:h.ActionType.reset})),p.createElement("li",{key:"next",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.next)}},p.createElement(u.default,{type:h.ActionType.next}))])),this.props.rotatable&&(n=n.concat([p.createElement("li",{key:"rotateLeft",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.rotateLeft)}},p.createElement(u.default,{type:h.ActionType.rotateLeft})),p.createElement("li",{key:"rotateRight",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.rotateRight)}},p.createElement(u.default,{type:h.ActionType.rotateRight}))])),this.props.scalable&&(n=n.concat([p.createElement("li",{key:"scaleX",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.scaleX)}},p.createElement(u.default,{type:h.ActionType.scaleX})),p.createElement("li",{key:"scaleY",className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.scaleY)}},p.createElement(u.default,{type:h.ActionType.scaleY}))])),p.createElement("div",null,t,p.createElement("ul",{className:this.props.prefixCls+"-toolbar"},n))},t}(p.Component);t.default=d,e.exports=t.default},function(e,t){},function(e,n){e.exports=t}])});

lib/Viewer.js

@@ -51,19 +51,15 @@ 'use strict';
     Viewer.prototype.renderViewer = function renderViewer() {
-        var _this2 = this;
-
         if (this.props.visible || this.component) {
-            (function () {
-                if (!_this2.container) {
-                    if (_this2.props.container) {
-                        _this2.container = _this2.props.container;
-                    } else {
-                        _this2.container = _this2.defaultContainer;
-                        document.body.appendChild(_this2.container);
-                    }
+            if (!this.container) {
+                if (this.props.container) {
+                    this.container = this.props.container;
+                } else {
+                    this.container = this.defaultContainer;
+                    document.body.appendChild(this.container);
                 }
-                var instance = _this2;
-                ReactDOM.unstable_renderSubtreeIntoContainer(_this2, React.createElement(_ViewerCore2.default, _this2.props), _this2.container, function () {
-                    instance.component = this;
-                });
-            })();
+            }
+            var instance = this;
+            ReactDOM.unstable_renderSubtreeIntoContainer(this, React.createElement(_ViewerCore2.default, this.props), this.container, function () {
+                instance.component = this;
+            });
         }
@@ -70,0 +66,0 @@ };

lib/ViewerCanvas.d.ts

@@ -16,4 +16,4 @@ /// <reference types="react" />
     zIndex: number;
-    scaleX: 1 | -1;
-    scaleY: 1 | -1;
+    scaleX: number;
+    scaleY: number;
     loading: boolean;
@@ -20,0 +20,0 @@ drag: boolean;

lib/ViewerCanvas.js

@@ -152,5 +152,3 @@ 'use strict';
             height: this.props.height + 'px',
-            marginTop: this.props.top + 'px',
-            marginLeft: this.props.left ? this.props.left + 'px' : 'auto',
-            transform: 'rotate(' + this.props.rotate + 'deg) scaleX(' + this.props.scaleX + ') scaleY(' + this.props.scaleY + ')'
+            transform: 'translateX(' + (this.props.left ? this.props.left + 'px' : 'aoto') + ') translateY(' + this.props.top + 'px) \n      rotate(' + this.props.rotate + 'deg) scaleX(' + this.props.scaleX + ') scaleY(' + this.props.scaleY + ')'
         };
@@ -169,6 +167,12 @@ var imgClass = this.props.drag ? 'drag' : '';
         if (this.props.loading) {
-            imgNode = React.createElement(_Loading2.default, { style: {
-                    marginTop: this.props.top,
-                    marginLeft: this.props.left
-                } });
+            imgNode = React.createElement(
+                'div',
+                { style: {
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    } },
+                React.createElement(_Loading2.default, null)
+            );
         }
@@ -175,0 +179,0 @@ return React.createElement(

lib/ViewerCore.d.ts

@@ -18,4 +18,4 @@ /// <reference types="react" />
     imageHeight?: number;
-    scaleX?: 1 | -1;
-    scaleY?: 1 | -1;
+    scaleX?: number;
+    scaleY?: number;
     loading?: boolean;
@@ -22,0 +22,0 @@ }

lib/ViewerCore.js

@@ -170,4 +170,4 @@ 'use strict';
                 height: 0,
-                left: this.containerWidth / 2,
-                top: (this.containerHeight - this.footerHeight) / 2,
+                left: 0,
+                top: 0,
                 rotate: 0,
@@ -278,6 +278,6 @@ scaleX: 1,
             case _Icon.ActionType.scaleX:
-                this.handleScaleX(this.state.scaleX === 1 ? -1 : 1);
+                this.handleScaleX(-1);
                 break;
             case _Icon.ActionType.scaleY:
-                this.handleScaleY(this.state.scaleY === 1 ? -1 : 1);
+                this.handleScaleY(-1);
                 break;
@@ -291,3 +291,3 @@ default:
         this.setState({
-            scaleX: newScale
+            scaleX: this.state.scaleX * newScale
         });
@@ -298,3 +298,3 @@ };
         this.setState({
-            scaleY: newScale
+            scaleY: this.state.scaleY * newScale
         });
@@ -307,19 +307,42 @@ };
         var diffY = targetY - imgCenterXY.y;
-        var diffWidth = direct * this.state.width * scale;
-        var diffHeight = direct * this.state.height * scale;
         // when image width is 0, set original width
-        if (diffWidth === 0) {
+        var reset = false;
+        var top = 0;
+        var left = 0;
+        var width = 0;
+        var height = 0;
+        var scaleX = 0;
+        var scaleY = 0;
+        if (this.state.width === 0) {
             var _getImgWidthHeight3 = this.getImgWidthHeight(this.state.imageWidth, this.state.imageHeight),
                 _getImgWidthHeight4 = (0, _slicedToArray3.default)(_getImgWidthHeight3, 2),
-                width = _getImgWidthHeight4[0],
-                height = _getImgWidthHeight4[1];
+                imgWidth = _getImgWidthHeight4[0],
+                imgHeight = _getImgWidthHeight4[1];
 
-            diffWidth = width;
-            diffHeight = height;
+            reset = true;
+            left = (this.containerWidth - imgWidth) / 2;
+            top = (this.containerHeight - this.footerHeight - imgHeight) / 2;
+            width = this.state.width + imgWidth;
+            height = this.state.height + imgHeight;
+            scaleX = scaleY = 1;
+        } else {
+            var directX = this.state.scaleX > 0 ? 1 : -1;
+            var directY = this.state.scaleY > 0 ? 1 : -1;
+            scaleX = this.state.scaleX + scale * direct * directX;
+            scaleY = this.state.scaleY + scale * direct * directY;
+            if (Math.abs(scaleX) < 0.1 || Math.abs(scaleY) < 0.1) {
+                return;
+            }
+            top = this.state.top + -direct * diffY / this.state.scaleX * scale * directX;
+            left = this.state.left + -direct * diffX / this.state.scaleY * scale * directY;
+            width = this.state.width;
+            height = this.state.height;
         }
         this.setState({
-            width: this.state.width + diffWidth,
-            height: this.state.height + diffHeight,
-            top: this.state.top + -diffHeight / 2 + -direct * diffY * scale,
-            left: this.state.left + -diffWidth / 2 + -direct * diffX * scale,
+            width: width,
+            scaleX: scaleX,
+            scaleY: scaleY,
+            height: height,
+            top: top,
+            left: left,
             loading: false
@@ -442,8 +465,9 @@ });
             this.bindEvent(true);
-            var imgCenterXY2 = this.getImageCenterXY();
-            this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1);
+            this.handleZoom(this.containerWidth / 2, (this.containerHeight - this.footerHeight) / 2, -1, (this.state.scaleX > 0 ? 1 : -1) * this.state.scaleX - 0.11);
             setTimeout(function () {
                 _this4.setState({
                     visible: false,
-                    transitionEnd: false
+                    transitionEnd: false,
+                    width: 0,
+                    height: 0
                 });
@@ -450,0 +474,0 @@ }, transitionDuration);

package.json

 {
   "name": "react-viewer",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "description": "react image viewer",
@@ -38,10 +38,10 @@ "main": "dist/index",
     "@types/react-dom": "^0.14.17",
-    "antd": "^2.11.0",
-    "atool-build": "^0.8.1",
+    "antd": "^2.13.11",
+    "atool-build": "^1.0.2",
     "babel-plugin-import": "^1.2.1",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-runtime": "^6.11.6",
-    "dora": "^0.4.3",
+    "dora": "^0.4.5",
     "dora-plugin-browser-history": "^0.2.0",
-    "dora-plugin-webpack": "^0.8.1",
+    "dora-plugin-webpack": "^1.0.0",
     "dora-plugin-webpack-hmr": "^0.2.1",
@@ -55,7 +55,7 @@ "gulp": "^3.9.1",
     "pre-commit": "^1.1.3",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "through2": "^2.0.1",
     "tslint": "^3.15.1",
-    "typescript": "^2.1.4",
+    "typescript": "^2.6.2",
     "webpack": "^1.13.2"
@@ -62,0 +62,0 @@ },

README.md

@@ -39,3 +39,3 @@ # react-viewer
         onClose={() => { this.setState({ visible: false }); } }
-        images={[src: '', alt: '']}
+        images={[{src: '', alt: ''}]}
         />
@@ -42,0 +42,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

197376

increased by5.98%

Lines of code

2896

increased by2.3%

Worsened metrics

Number of package files

31

decreased by-3.12%

No dependency changes