[{"__symbolic":"module","version":3,"metadata":{"ImageViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"image-viewer","template":"\n   <div class=\"imageViewerContainer\" [style.width]=\"width + 'px'\" [style.height]=\"height + 'px'\" #imageViewerContainer>\n    <div class=\"imageViewer\"\n         (dragstart)=\"cancleCurrentImageDrag($event)\"\n         (mousedown)=\"currentImageDragStart($event)\"\n         (mousemove)=\"currentImageDrag($event)\"\n         (mouseup)=\"currentImageDragEnd($event)\"\n         [style.width]=\"imageViewerContainer.style.width\"\n         [style.height]=\"(imageViewerContainer.clientHeight - 150) + 'px'\" #imageViewer>\n\n        <img [src]=\"currentImageUrl\"\n             (load)=\"currentImageLoaded(showImg, imageViewer)\" #showImg>\n\n        <div class=\"previousImg\" (click)=\"preOrNextImg('pre')\">\n            <span class=\"fa fa-chevron-circle-left\" aria-hidden=\"true\" title=\"上一张\"></span>\n        </div>\n        <div class=\"nextImg\" (click)=\"preOrNextImg('next')\">\n            <span class=\"fa fa-chevron-circle-right\" aria-hidden=\"true\" title=\"下一张\"></span>\n        </div>\n    </div>\n    <div class=\"smallImageViewer\">\n        <div class=\"toImg previousImgs\" title=\"向左查看\" (click)=\"previousImg(moreImg, imageViewer)\">\n            <i class=\"fa fa-angle-double-left\" aria-hidden=\"true\"></i>\n        </div>\n        <div class=\"toImg nextImgs\" title=\"向右查看\" (click)=\"nextImg(moreImg, imageViewer)\">\n            <i class=\"fa fa-angle-double-right\" aria-hidden=\"true\"></i>\n        </div>\n        <div class=\"moreImg\" #moreImg [style.left]=\"moreImgInitLeft + 'px'\">\n            <img *ngFor=\"let imgUrl of imageSources;\" [src]=\"imgUrl\" (click)=\"changeCurrentImageUrl(imgUrl)\">\n        </div>\n    </div>\n    <div class=\"imageTools\">\n        <button class=\"toolsBtn imageZoomin\" title=\"放大\" (click)=\"imageZoomin()\">\n            <i class=\"fa fa-search-plus\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn imageZoomout\" title=\"缩小\" (click)=\"imageZoomout()\">\n            <i class=\"fa fa-search-minus\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn rotateLeft\" title=\"向左旋转\" (click)=\"rotateLeft()\">\n            <i class=\"fa fa-undo\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn rotateRight\" title=\"向右旋转\" (click)=\"rotateRight()\">\n            <i class=\"fa fa-repeat\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn flipVertical\" title=\"垂直翻转\" (click)=\"flipVertical()\">\n            <i class=\"fa fa-arrows-v\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn flipHorizontal\" title=\"水平翻转\" (click)=\"flipHorizontal()\">\n            <i class=\"fa fa-arrows-h\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn imageReset\" title=\"重置\" (click)=\"currentImgReset()\">\n            <i class=\"fa fa-refresh\" aria-hidden=\"true\"></i>\n        </button>\n    </div>\n   </div>\n    ","styles":["\n   .imageViewerContainer{margin:0;padding:0;height:100%;min-width:400px;min-height:400px;background-color:#3E3E3E}.imageViewerContainer .imageViewer{position:relative;overflow:hidden}.imageViewerContainer .imageViewer img{position:absolute;border:0;padding:0;margin:0;width:auto;height:98%;visibility:visible;transition:all 0.5s ease-out}.imageViewerContainer .imageViewer div{position:absolute;width:80px;height:100%;background:rgba(112,109,109,0);transition:all 0.5s}.imageViewerContainer .imageViewer div.previousImg{top:0;left:0}.imageViewerContainer .imageViewer div.nextImg{top:0;right:0}.imageViewerContainer .imageViewer div:hover{background:rgba(112,109,109,0.5)}.imageViewerContainer .imageViewer div:hover span{opacity:1;color:#F5F5F5}.imageViewerContainer .imageViewer div span{position:absolute;font-size:60px;width:1em;height:1em;text-align:center;top:50%;margin-top:-30px;left:50%;margin-left:-30px;opacity:0.2;color:#797979;transition:all 0.5s;cursor:pointer}.imageViewerContainer .smallImageViewer{border-top:2px solid #888484;border-bottom:2px solid #888484;margin-top:2px;height:100px;position:relative;overflow:hidden;white-space:nowrap}.imageViewerContainer .smallImageViewer .moreImg{height:100%;position:absolute;z-index:1;top:0;transition:left 0.6s ease-out}.imageViewerContainer .smallImageViewer .moreImg img{position:relative;cursor:pointer;margin:0 2px 0 0;height:100%;transform:scale(1);transition:transform 0.5s;z-index:1}.imageViewerContainer .smallImageViewer .moreImg img:hover{transform:scale(1.5);z-index:2}.imageViewerContainer .smallImageViewer .toImg{height:100%;width:25px;color:#FFFFFF;text-align:center;line-height:100px;font-weight:bold;opacity:0.8;cursor:pointer;overflow:hidden;background-color:#3E3E3E;position:absolute;z-index:9;top:0;user-select:none;transition:opacity 0.5s}.imageViewerContainer .smallImageViewer .toImg:hover{opacity:1}.imageViewerContainer .smallImageViewer .previousImgs{left:0}.imageViewerContainer .smallImageViewer .nextImgs{right:0}.imageViewerContainer .imageTools{text-align:center;height:46px;line-height:46px}.imageViewerContainer .imageTools .toolsBtn{margin:0 5px;padding:4px 8px;color:#3E3E3E;font-size:16px;font-weight:400;line-height:1.5;display:inline-block;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;background-image:none;background-color:#FFFFFF;border:1px solid #CCCCCC;border-radius:4px;cursor:pointer;transition:all 0.3s}.imageViewerContainer .imageTools .toolsBtn:hover{color:#FFFFFF;background-color:#3E3E3E;border-color:#888484}\n    "]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ready":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"}]}],"ngOnInit":[{"__symbolic":"method"}],"currentImageLoaded":[{"__symbolic":"method"}],"preOrNextImg":[{"__symbolic":"method"}],"changeCurrentImg":[{"__symbolic":"method"}],"getMatrix":[{"__symbolic":"method"}],"vertical":[{"__symbolic":"method"}],"horizontal":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"rotateLeftBy90":[{"__symbolic":"method"}],"rotateRightBy90":[{"__symbolic":"method"}],"rotateByDegress":[{"__symbolic":"method"}],"getZoom":[{"__symbolic":"method"}],"scale":[{"__symbolic":"method"}],"zoomin":[{"__symbolic":"method"}],"zoomout":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"imageZoomin":[{"__symbolic":"method"}],"imageZoomout":[{"__symbolic":"method"}],"rotateLeft":[{"__symbolic":"method"}],"rotateRight":[{"__symbolic":"method"}],"flipVertical":[{"__symbolic":"method"}],"flipHorizontal":[{"__symbolic":"method"}],"currentImgReset":[{"__symbolic":"method"}],"previousImg":[{"__symbolic":"method"}],"nextImg":[{"__symbolic":"method"}],"changeCurrentImageUrl":[{"__symbolic":"method"}],"currentImageZoomByWheel":[{"__symbolic":"method"}],"currentImageDragStart":[{"__symbolic":"method"}],"currentImageDrag":[{"__symbolic":"method"}],"currentImageDragEnd":[{"__symbolic":"method"}],"cancleCurrentImageDrag":[{"__symbolic":"method"}],"checkBrowser":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ImageViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"image-viewer","template":"\n   <div class=\"imageViewerContainer\" [style.width]=\"width + 'px'\" [style.height]=\"height + 'px'\" #imageViewerContainer>\n    <div class=\"imageViewer\"\n         (dragstart)=\"cancleCurrentImageDrag($event)\"\n         (mousedown)=\"currentImageDragStart($event)\"\n         (mousemove)=\"currentImageDrag($event)\"\n         (mouseup)=\"currentImageDragEnd($event)\"\n         [style.width]=\"imageViewerContainer.style.width\"\n         [style.height]=\"(imageViewerContainer.clientHeight - 150) + 'px'\" #imageViewer>\n\n        <img [src]=\"currentImageUrl\"\n             (load)=\"currentImageLoaded(showImg, imageViewer)\" #showImg>\n\n        <div class=\"previousImg\" (click)=\"preOrNextImg('pre')\">\n            <span class=\"fa fa-chevron-circle-left\" aria-hidden=\"true\" title=\"上一张\"></span>\n        </div>\n        <div class=\"nextImg\" (click)=\"preOrNextImg('next')\">\n            <span class=\"fa fa-chevron-circle-right\" aria-hidden=\"true\" title=\"下一张\"></span>\n        </div>\n    </div>\n    <div class=\"smallImageViewer\">\n        <div class=\"toImg previousImgs\" title=\"向左查看\" (click)=\"previousImg(moreImg, imageViewer)\">\n            <i class=\"fa fa-angle-double-left\" aria-hidden=\"true\"></i>\n        </div>\n        <div class=\"toImg nextImgs\" title=\"向右查看\" (click)=\"nextImg(moreImg, imageViewer)\">\n            <i class=\"fa fa-angle-double-right\" aria-hidden=\"true\"></i>\n        </div>\n        <div class=\"moreImg\" #moreImg [style.left]=\"moreImgInitLeft + 'px'\">\n            <img *ngFor=\"let imgUrl of imageSources;\" [src]=\"imgUrl\" (click)=\"changeCurrentImageUrl(imgUrl)\">\n        </div>\n    </div>\n    <div class=\"imageTools\">\n        <button class=\"toolsBtn imageZoomin\" title=\"放大\" (click)=\"imageZoomin()\">\n            <i class=\"fa fa-search-plus\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn imageZoomout\" title=\"缩小\" (click)=\"imageZoomout()\">\n            <i class=\"fa fa-search-minus\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn rotateLeft\" title=\"向左旋转\" (click)=\"rotateLeft()\">\n            <i class=\"fa fa-undo\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn rotateRight\" title=\"向右旋转\" (click)=\"rotateRight()\">\n            <i class=\"fa fa-repeat\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn flipVertical\" title=\"垂直翻转\" (click)=\"flipVertical()\">\n            <i class=\"fa fa-arrows-v\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn flipHorizontal\" title=\"水平翻转\" (click)=\"flipHorizontal()\">\n            <i class=\"fa fa-arrows-h\" aria-hidden=\"true\"></i>\n        </button>\n        <button class=\"toolsBtn imageReset\" title=\"重置\" (click)=\"currentImgReset()\">\n            <i class=\"fa fa-refresh\" aria-hidden=\"true\"></i>\n        </button>\n    </div>\n   </div>\n    ","styles":["\n   .imageViewerContainer{margin:0;padding:0;height:100%;min-width:400px;min-height:400px;background-color:#3E3E3E}.imageViewerContainer .imageViewer{position:relative;overflow:hidden}.imageViewerContainer .imageViewer img{position:absolute;border:0;padding:0;margin:0;width:auto;height:98%;visibility:visible;transition:all 0.5s ease-out}.imageViewerContainer .imageViewer div{position:absolute;width:80px;height:100%;background:rgba(112,109,109,0);transition:all 0.5s}.imageViewerContainer .imageViewer div.previousImg{top:0;left:0}.imageViewerContainer .imageViewer div.nextImg{top:0;right:0}.imageViewerContainer .imageViewer div:hover{background:rgba(112,109,109,0.5)}.imageViewerContainer .imageViewer div:hover span{opacity:1;color:#F5F5F5}.imageViewerContainer .imageViewer div span{position:absolute;font-size:60px;width:1em;height:1em;text-align:center;top:50%;margin-top:-30px;left:50%;margin-left:-30px;opacity:0.2;color:#797979;transition:all 0.5s;cursor:pointer}.imageViewerContainer .smallImageViewer{border-top:2px solid #888484;border-bottom:2px solid #888484;margin-top:2px;height:100px;position:relative;overflow:hidden;white-space:nowrap}.imageViewerContainer .smallImageViewer .moreImg{height:100%;position:absolute;z-index:1;top:0;transition:left 0.6s ease-out}.imageViewerContainer .smallImageViewer .moreImg img{position:relative;cursor:pointer;margin:0 2px 0 0;height:100%;transform:scale(1);transition:transform 0.5s;z-index:1}.imageViewerContainer .smallImageViewer .moreImg img:hover{transform:scale(1.5);z-index:2}.imageViewerContainer .smallImageViewer .toImg{height:100%;width:25px;color:#FFFFFF;text-align:center;line-height:100px;font-weight:bold;opacity:0.8;cursor:pointer;overflow:hidden;background-color:#3E3E3E;position:absolute;z-index:9;top:0;user-select:none;transition:opacity 0.5s}.imageViewerContainer .smallImageViewer .toImg:hover{opacity:1}.imageViewerContainer .smallImageViewer .previousImgs{left:0}.imageViewerContainer .smallImageViewer .nextImgs{right:0}.imageViewerContainer .imageTools{text-align:center;height:46px;line-height:46px}.imageViewerContainer .imageTools .toolsBtn{margin:0 5px;padding:4px 8px;color:#3E3E3E;font-size:16px;font-weight:400;line-height:1.5;display:inline-block;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;background-image:none;background-color:#FFFFFF;border:1px solid #CCCCCC;border-radius:4px;cursor:pointer;transition:all 0.3s}.imageViewerContainer .imageTools .toolsBtn:hover{color:#FFFFFF;background-color:#3E3E3E;border-color:#888484}\n    "]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ready":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"}]}],"ngOnInit":[{"__symbolic":"method"}],"currentImageLoaded":[{"__symbolic":"method"}],"preOrNextImg":[{"__symbolic":"method"}],"changeCurrentImg":[{"__symbolic":"method"}],"getMatrix":[{"__symbolic":"method"}],"vertical":[{"__symbolic":"method"}],"horizontal":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"rotateLeftBy90":[{"__symbolic":"method"}],"rotateRightBy90":[{"__symbolic":"method"}],"rotateByDegress":[{"__symbolic":"method"}],"getZoom":[{"__symbolic":"method"}],"scale":[{"__symbolic":"method"}],"zoomin":[{"__symbolic":"method"}],"zoomout":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"imageZoomin":[{"__symbolic":"method"}],"imageZoomout":[{"__symbolic":"method"}],"rotateLeft":[{"__symbolic":"method"}],"rotateRight":[{"__symbolic":"method"}],"flipVertical":[{"__symbolic":"method"}],"flipHorizontal":[{"__symbolic":"method"}],"currentImgReset":[{"__symbolic":"method"}],"previousImg":[{"__symbolic":"method"}],"nextImg":[{"__symbolic":"method"}],"changeCurrentImageUrl":[{"__symbolic":"method"}],"currentImageZoomByWheel":[{"__symbolic":"method"}],"currentImageDragStart":[{"__symbolic":"method"}],"currentImageDrag":[{"__symbolic":"method"}],"currentImageDragEnd":[{"__symbolic":"method"}],"cancleCurrentImageDrag":[{"__symbolic":"method"}],"checkBrowser":[{"__symbolic":"method"}]}}}}]