ng-cw-v12
Version:
Angular UI Component Library
103 lines • 13.7 kB
JavaScript
import { Directive, Input, HostListener } from '@angular/core';
import * as i0 from "@angular/core";
export class ImgZoomDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
/** 最小缩放比例 */
this.ncMinScale = 0.5;
/** 最大缩放比例 */
this.ncMaxScale = 5;
/** 图片缩放模式 */
this.ncObjectFit = 'contain';
this.scale = 1;
this.position = { x: 0, y: 0 };
this.isDragging = false;
this.lastPosition = { x: 0, y: 0 };
}
ngOnInit() {
this.initializeStyles();
}
initializeStyles() {
//设置父元素overflow:hidden。一方面是隐藏溢出，另一方面是当父元素是flex:1时(没有设置具体的width和height)，img的object-fit才能生效
this.renderer.setStyle(this.renderer.parentNode(this.el.nativeElement), 'overflow', 'hidden');
this.renderer.setStyle(this.el.nativeElement, 'width', '100%');
this.renderer.setStyle(this.el.nativeElement, 'height', '100%');
this.renderer.setStyle(this.el.nativeElement, 'object-fit', this.ncObjectFit);
this.renderer.setStyle(this.el.nativeElement, 'transform-origin', 'center center');
this.renderer.setStyle(this.el.nativeElement, 'cursor', 'grab');
}
onWheel(event) {
event.preventDefault();
const delta = event.deltaY > 0 ? -0.1 : 0.1;
this.scale = Math.max(this.ncMinScale, Math.min(this.ncMaxScale, this.scale + delta));
this.updateTransform();
}
onMouseDown(event) {
event.preventDefault();
this.isDragging = true;
this.lastPosition = {
x: event.clientX - this.position.x,
y: event.clientY - this.position.y
};
// 在按下时立即更新cursor样式
this.renderer.setStyle(this.el.nativeElement, 'cursor', 'grabbing');
}
onMouseMove(event) {
if (!this.isDragging)
return;
this.position = {
x: event.clientX - this.lastPosition.x,
y: event.clientY - this.lastPosition.y
};
this.updateTransform();
}
onMouseUp(event) {
this.isDragging = false;
// 在释放时立即更新cursor样式
this.renderer.setStyle(this.el.nativeElement, 'cursor', 'grab');
}
onMouseLeave(event) {
this.isDragging = false;
this.renderer.setStyle(this.el.nativeElement, 'cursor', 'grab');
}
resetView() {
this.scale = 1;
this.position = { x: 0, y: 0 };
this.updateTransform();
}
updateTransform() {
this.renderer.setStyle(this.el.nativeElement, 'transform', `scale(${this.scale}) translate(${this.position.x}px, ${this.position.y}px)`);
}
}
ImgZoomDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ImgZoomDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
ImgZoomDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: ImgZoomDirective, selector: "[ncImgZoom]", inputs: { ncMinScale: "ncMinScale", ncMaxScale: "ncMaxScale", ncObjectFit: "ncObjectFit" }, host: { listeners: { "wheel": "onWheel($event)", "mousedown": "onMouseDown($event)", "mousemove": "onMouseMove($event)", "mouseup": "onMouseUp($event)", "mouseleave": "onMouseLeave($event)" } }, exportAs: ["ncImgZoom"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ImgZoomDirective, decorators: [{
type: Directive,
args: [{
selector: '[ncImgZoom]',
exportAs: 'ncImgZoom'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ncMinScale: [{
type: Input
}], ncMaxScale: [{
type: Input
}], ncObjectFit: [{
type: Input
}], onWheel: [{
type: HostListener,
args: ['wheel', ['$event']]
}], onMouseDown: [{
type: HostListener,
args: ['mousedown', ['$event']]
}], onMouseMove: [{
type: HostListener,
args: ['mousemove', ['$event']]
}], onMouseUp: [{
type: HostListener,
args: ['mouseup', ['$event']]
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1nLXpvb20uZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy9pbWctem9vbS9pbWctem9vbS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBeUIsS0FBSyxFQUFVLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFROUYsTUFBTSxPQUFPLGdCQUFnQjtJQWE1QixZQUFvQixFQUFjLEVBQVUsUUFBbUI7UUFBM0MsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQVc7UUFaL0QsYUFBYTtRQUNKLGVBQVUsR0FBRyxHQUFHLENBQUM7UUFDMUIsYUFBYTtRQUNKLGVBQVUsR0FBRyxDQUFDLENBQUM7UUFDeEIsYUFBYTtRQUNKLGdCQUFXLEdBQW9CLFNBQVMsQ0FBQztRQUUxQyxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsYUFBUSxHQUFHLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUM7UUFDMUIsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUNuQixpQkFBWSxHQUFHLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUM7SUFFNkIsQ0FBQztJQUVwRSxRQUFRO1FBQ1AsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVPLGdCQUFnQjtRQUN2Qix5RkFBeUY7UUFDekYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsRUFBRSxVQUFVLEVBQUUsUUFBUSxDQUFDLENBQUM7UUFDOUYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUs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LEVBQUUsQ0FBQyxFQUFFLENBQUM7UUFDL0IsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFFTyxlQUFlO1FBQ3RCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFdBQVcsRUFBRSxTQUFTLElBQUksQ0FBQyxLQUFLLGVBQWUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFJLENBQUM7OzZHQWpGVyxnQkFBZ0I7aUdBQWhCLGdCQUFnQjsyRkFBaEIsZ0JBQWdCO2tCQUo1QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxhQUFhO29CQUN2QixRQUFRLEVBQUUsV0FBVztpQkFDckI7eUhBR1MsVUFBVTtzQkFBbEIsS0FBSztnQkFFRyxVQUFVO3NCQUFsQixLQUFLO2dCQUVHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBd0JOLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBU2pDLFdBQVc7c0JBRFYsWUFBWTt1QkFBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBYXJDLFdBQVc7c0JBRFYsWUFBWTt1QkFBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBWXJDLFNBQVM7c0JBRFIsWUFBWTt1QkFBQyxTQUFTLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBUW5DLFlBQVk7c0JBRFgsWUFBWTt1QkFBQyxZQUFZLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIFJlbmRlcmVyMiwgSW5wdXQsIE9uSW5pdCwgSG9zdExpc3RlbmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5leHBvcnQgdHlwZSBOY09iamVjdEZpdFR5cGUgPSAnY29udGFpbicgfCAnY292ZXInIHwgJ2ZpbGwnO1xyXG5cclxuQERpcmVjdGl2ZSh7XHJcblx0c2VsZWN0b3I6ICdbbmNJbWdab29tXScsXHJcblx0ZXhwb3J0QXM6ICduY0ltZ1pvb20nXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBJbWdab29tRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcclxuXHQvKiog5pyA5bCP57yp5pS+5q+U5L6LICovXHJcblx0QElucHV0KCkgbmNNaW5TY2FsZSA9IDAuNTtcclxuXHQvKiog5pyA5aSn57yp5pS+5q+U5L6LICovXHJcblx0QElucHV0KCkgbmNNYXhTY2FsZSA9IDU7XHJcblx0LyoqIOWbvueJh+e8qeaUvuaooeW8jyAqL1xyXG5cdEBJbnB1dCgpIG5jT2JqZWN0Rml0OiBOY09iamVjdEZpdFR5cGUgPSAnY29udGFpbic7XHJcblxyXG5cdHByaXZhdGUgc2NhbGUgPSAxO1xyXG5cdHByaXZhdGUgcG9zaXRpb24gPSB7IHg6IDAsIHk6IDAgfTtcclxuXHRwcml2YXRlIGlzRHJhZ2dpbmcgPSBmYWxzZTtcclxuXHRwcml2YXRlIGxhc3RQb3NpdGlvbiA9IHsgeDogMCwgeTogMCB9O1xyXG5cclxuXHRjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmLCBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIpIHsgfVxyXG5cclxuXHRuZ09uSW5pdCgpIHtcclxuXHRcdHRoaXMuaW5pdGlhbGl6ZVN0eWxlcygpO1xyXG5cdH1cclxuXHJcblx0cHJpdmF0ZSBpbml0aWFsaXplU3R5bGVzKCkge1xyXG5cdFx0Ly/orr7nva7niLblhYPntKBvdmVyZmxvdzpoaWRkZW7jgILkuIDmlrnpnaLmmK/pmpDol4/muqLlh7rvvIzlj6bkuIDmlrnpnaLmmK/lvZPniLblhYPntKDmmK9mbGV4OjHml7Yo5rKh5pyJ6K6+572u5YW35L2T55qEd2lkdGjlkoxoZWlnaHQp77yMaW1n55qEb2JqZWN0LWZpdOaJjeiDveeUn+aViFxyXG5cdFx0dGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLnJlbmRlcmVyLnBhcmVudE5vZGUodGhpcy5lbC5uYXRpdmVFbGVtZW50KSwgJ292ZXJmbG93JywgJ2hpZGRlbicpO1xyXG5cdFx0dGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICd3aWR0aCcsICcxMDAlJyk7XHJcblx0XHR0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2hlaWdodCcsICcxMDAlJyk7XHJcblx0XHR0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ29iamVjdC1maXQnLCB0aGlzLm5jT2JqZWN0Rml0KTtcclxuXHRcdHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAndHJhbnNmb3JtLW9yaWdpbicsICdjZW50ZXIgY2VudGVyJyk7XHJcblx0XHR0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2N1cnNvcicsICdncmFiJyk7XHJcblx0fVxyXG5cclxuXHRASG9zdExpc3RlbmVyKCd3aGVlbCcsIFsnJGV2ZW50J10pXHJcblx0b25XaGVlbChldmVudDogV2hlZWxFdmVudCkge1xyXG5cdFx0ZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuXHRcdGNvbnN0IGRlbHRhID0gZXZlbnQuZGVsdGFZID4gMCA/IC0wLjEgOiAwLjE7XHJcblx0XHR0aGlzLnNjYWxlID0gTWF0aC5tYXgodGhpcy5uY01pblNjYWxlLCBNYXRoLm1pbih0aGlzLm5jTWF4U2NhbGUsIHRoaXMuc2NhbGUgKyBkZWx0YSkpO1xyXG5cdFx0dGhpcy51cGRhdGVUcmFuc2Zvcm0oKTtcclxuXHR9XHJcblxyXG5cdEBIb3N0TGlzdGVuZXIoJ21vdXNlZG93bicsIFsnJGV2ZW50J10pXHJcblx0b25Nb3VzZURvd24oZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuXHRcdGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcblx0XHR0aGlzLmlzRHJhZ2dpbmcgPSB0cnVlO1xyXG5cdFx0dGhpcy5sYXN0UG9zaXRpb24gPSB7XHJcblx0XHRcdHg6IGV2ZW50LmNsaWVudFggLSB0aGlzLnBvc2l0aW9uLngsXHJcblx0XHRcdHk6IGV2ZW50LmNsaWVudFkgLSB0aGlzLnBvc2l0aW9uLnlcclxuXHRcdH07XHJcblx0XHQvLyDlnKjmjInkuIvml7bnq4vljbPmm7TmlrBjdXJzb3LmoLflvI9cclxuXHRcdHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnY3Vyc29yJywgJ2dyYWJiaW5nJyk7XHJcblx0fVxyXG5cclxuXHRASG9zdExpc3RlbmVyKCdtb3VzZW1vdmUnLCBbJyRldmVudCddKVxyXG5cdG9uTW91c2VNb3ZlKGV2ZW50OiBNb3VzZUV2ZW50KSB7XHJcblx0XHRpZiAoIXRoaXMuaXNEcmFnZ2luZykgcmV0dXJuO1xyXG5cclxuXHRcdHRoaXMucG9zaXRpb24gPSB7XHJcblx0XHRcdHg6IGV2ZW50LmNsaWVudFggLSB0aGlzLmxhc3RQb3NpdGlvbi54LFxyXG5cdFx0XHR5OiBldmVudC5jbGllbnRZIC0gdGhpcy5sYXN0UG9zaXRpb24ueVxyXG5cdFx0fTtcclxuXHRcdHRoaXMudXBkYXRlVHJhbnNmb3JtKCk7XHJcblx0fVxyXG5cclxuXHRASG9zdExpc3RlbmVyKCdtb3VzZXVwJywgWyckZXZlbnQnXSlcclxuXHRvbk1vdXNlVXAoZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuXHRcdHRoaXMuaXNEcmFnZ2luZyA9IGZhbHNlO1xyXG5cdFx0Ly8g5Zyo6YeK5pS+5pe256uL5Y2z5pu05pawY3Vyc29y5qC35byPXHJcblx0XHR0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2N1cnNvcicsICdncmFiJyk7XHJcblx0fVxyXG5cclxuXHRASG9zdExpc3RlbmVyKCdtb3VzZWxlYXZlJywgWyckZXZlbnQnXSlcclxuXHRvbk1vdXNlTGVhdmUoZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuXHRcdHRoaXMuaXNEcmFnZ2luZyA9IGZhbHNlO1xyXG5cdFx0dGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdjdXJzb3InLCAnZ3JhYicpO1xyXG5cdH1cclxuXHJcblx0cmVzZXRWaWV3KCkge1xyXG5cdFx0dGhpcy5zY2FsZSA9IDE7XHJcblx0XHR0aGlzLnBvc2l0aW9uID0geyB4OiAwLCB5OiAwIH07XHJcblx0XHR0aGlzLnVwZGF0ZVRyYW5zZm9ybSgpO1xyXG5cdH1cclxuXHJcblx0cHJpdmF0ZSB1cGRhdGVUcmFuc2Zvcm0oKSB7XHJcblx0XHR0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ3RyYW5zZm9ybScsIGBzY2FsZSgke3RoaXMuc2NhbGV9KSB0cmFuc2xhdGUoJHt0aGlzLnBvc2l0aW9uLnh9cHgsICR7dGhpcy5wb3NpdGlvbi55fXB4KWApO1xyXG5cdH1cclxufSJdfQ==