ng-cw-v12
Version:
Angular UI component library
100 lines • 13.4 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() {
this.isDragging = false;
// 在释放时立即更新cursor样式
this.renderer.setStyle(this.el.nativeElement, 'cursor', 'grab');
}
onMouseLeave() {
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1nLXpvb20uZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy9pbWctem9vbS9pbWctem9vbS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBeUIsS0FBSyxFQUFVLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFNOUYsTUFBTSxPQUFPLGdCQUFnQjtJQVU1QixZQUFvQixFQUFjLEVBQVUsUUFBbUI7UUFBM0MsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQVc7UUFUdEQsZUFBVSxHQUFHLEdBQUcsQ0FBQztRQUNqQixlQUFVLEdBQUcsQ0FBQyxDQUFDO1FBQ2YsZ0JBQVcsR0FBaUMsU0FBUyxDQUFDO1FBRXZELFVBQUssR0FBRyxDQUFDLENBQUM7UUFDVixhQUFRLEdBQUcsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQztRQUMxQixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLGlCQUFZLEdBQUcsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQztJQUU2QixDQUFDO0lBRXBFLFFBQVE7UUFDUCxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRU8sZ0JBQWdCO1FBQ3ZCLHlGQUF5RjtRQUN6RixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxFQUFFLFVBQVUsRUFBRSxRQUFRLENBQUMsQ0FBQztRQUM5RixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxPQUFPLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDL0Qs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QUN4QixDQUFDO0lBRU8sZUFBZTtRQUN0QixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxXQUFXLEVBQUUsU0FBUyxJQUFJLENBQUMsS0FBSyxlQUFlLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxSSxDQUFDOzs2R0E5RVcsZ0JBQWdCO2lHQUFoQixnQkFBZ0I7MkZBQWhCLGdCQUFnQjtrQkFKNUIsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsYUFBYTtvQkFDdkIsUUFBUSxFQUFFLFdBQVc7aUJBQ3JCO3lIQUVTLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQXdCRSxPQUFPO3NCQURkLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVN6QixXQUFXO3NCQURsQixZQUFZO3VCQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFhN0IsV0FBVztzQkFEbEIsWUFBWTt1QkFBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBWTdCLFNBQVM7c0JBRGhCLFlBQVk7dUJBQUMsU0FBUyxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVEzQixZQUFZO3NCQURuQixZQUFZO3VCQUFDLFlBQVksRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgUmVuZGVyZXIyLCBJbnB1dCwgT25Jbml0LCBIb3N0TGlzdGVuZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBEaXJlY3RpdmUoe1xyXG5cdHNlbGVjdG9yOiAnW25jSW1nWm9vbV0nLFxyXG5cdGV4cG9ydEFzOiAnbmNJbWdab29tJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgSW1nWm9vbURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblx0QElucHV0KCkgbmNNaW5TY2FsZSA9IDAuNTtcclxuXHRASW5wdXQoKSBuY01heFNjYWxlID0gNTtcclxuXHRASW5wdXQoKSBuY09iamVjdEZpdDogJ2NvbnRhaW4nIHwgJ2NvdmVyJyB8ICdmaWxsJyA9ICdjb250YWluJztcclxuXHJcblx0cHJpdmF0ZSBzY2FsZSA9IDE7XHJcblx0cHJpdmF0ZSBwb3NpdGlvbiA9IHsgeDogMCwgeTogMCB9O1xyXG5cdHByaXZhdGUgaXNEcmFnZ2luZyA9IGZhbHNlO1xyXG5cdHByaXZhdGUgbGFzdFBvc2l0aW9uID0geyB4OiAwLCB5OiAwIH07XHJcblxyXG5cdGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYsIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMikgeyB9XHJcblxyXG5cdG5nT25Jbml0KCkge1xyXG5cdFx0dGhpcy5pbml0aWFsaXplU3R5bGVzKCk7XHJcblx0fVxyXG5cclxuXHRwcml2YXRlIGluaXRpYWxpemVTdHlsZXMoKSB7XHJcblx0XHQvL+iuvue9rueItuWFg+e0oG92ZXJmbG93OmhpZGRlbuOAguS4gOaWuemdouaYr+makOiXj+a6ouWHuu+8jOWPpuS4gOaWuemdouaYr+W9k+eItuWFg+e0oOaYr2ZsZXg6MeaXtijmsqHmnInorr7nva7lhbfkvZPnmoR3aWR0aOWSjGhlaWdodCnvvIxpbWfnmoRvYmplY3QtZml05omN6IO955Sf5pWIXHJcblx0XHR0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMucmVuZGVyZXIucGFyZW50Tm9kZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQpLCAnb3ZlcmZsb3cnLCAnaGlkZGVuJyk7XHJcblx0XHR0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ3dpZHRoJywgJzEwMCUnKTtcclxuXHRcdHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnaGVpZ2h0JywgJzEwMCUnKTtcclxuXHRcdHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnb2JqZWN0LWZpdCcsIHRoaXMubmNPYmplY3RGaXQpO1xyXG5cdFx0dGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICd0cmFuc2Zvcm0tb3JpZ2luJywgJ2NlbnRlciBjZW50ZXInKTtcclxuXHRcdHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnY3Vyc29yJywgJ2dyYWInKTtcclxuXHR9XHJcblxyXG5cdEBIb3N0TGlzdGVuZXIoJ3doZWVsJywgWyckZXZlbnQnXSlcclxuXHRwcml2YXRlIG9uV2hlZWwoZXZlbnQ6IFdoZWVsRXZlbnQpIHtcclxuXHRcdGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcblx0XHRjb25zdCBkZWx0YSA9IGV2ZW50LmRlbHRhWSA+IDAgPyAtMC4xIDogMC4xO1xyXG5cdFx0dGhpcy5zY2FsZSA9IE1hdGgubWF4KHRoaXMubmNNaW5TY2FsZSwgTWF0aC5taW4odGhpcy5uY01heFNjYWxlLCB0aGlzLnNjYWxlICsgZGVsdGEpKTtcclxuXHRcdHRoaXMudXBkYXRlVHJhbnNmb3JtKCk7XHJcblx0fVxyXG5cclxuXHRASG9zdExpc3RlbmVyKCdtb3VzZWRvd24nLCBbJyRldmVudCddKVxyXG5cdHByaXZhdGUgb25Nb3VzZURvd24oZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuXHRcdGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcblx0XHR0aGlzLmlzRHJhZ2dpbmcgPSB0cnVlO1xyXG5cdFx0dGhpcy5sYXN0UG9zaXRpb24gPSB7XHJcblx0XHRcdHg6IGV2ZW50LmNsaWVudFggLSB0aGlzLnBvc2l0aW9uLngsXHJcblx0XHRcdHk6IGV2ZW50LmNsaWVudFkgLSB0aGlzLnBvc2l0aW9uLnlcclxuXHRcdH07XHJcblx0XHQvLyDlnKjmjInkuIvml7bnq4vljbPmm7TmlrBjdXJzb3LmoLflvI9cclxuXHRcdHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnY3Vyc29yJywgJ2dyYWJiaW5nJyk7XHJcblx0fVxyXG5cclxuXHRASG9zdExpc3RlbmVyKCdtb3VzZW1vdmUnLCBbJyRldmVudCddKVxyXG5cdHByaXZhdGUgb25Nb3VzZU1vdmUoZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuXHRcdGlmICghdGhpcy5pc0RyYWdnaW5nKSByZXR1cm47XHJcblxyXG5cdFx0dGhpcy5wb3NpdGlvbiA9IHtcclxuXHRcdFx0eDogZXZlbnQuY2xpZW50WCAtIHRoaXMubGFzdFBvc2l0aW9uLngsXHJcblx0XHRcdHk6IGV2ZW50LmNsaWVudFkgLSB0aGlzLmxhc3RQb3NpdGlvbi55XHJcblx0XHR9O1xyXG5cdFx0dGhpcy51cGRhdGVUcmFuc2Zvcm0oKTtcclxuXHR9XHJcblxyXG5cdEBIb3N0TGlzdGVuZXIoJ21vdXNldXAnLCBbJyRldmVudCddKVxyXG5cdHByaXZhdGUgb25Nb3VzZVVwKCkge1xyXG5cdFx0dGhpcy5pc0RyYWdnaW5nID0gZmFsc2U7XHJcblx0XHQvLyDlnKjph4rmlL7ml7bnq4vljbPmm7TmlrBjdXJzb3LmoLflvI9cclxuXHRcdHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnY3Vyc29yJywgJ2dyYWInKTtcclxuXHR9XHJcblxyXG5cdEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnLCBbJyRldmVudCddKVxyXG5cdHByaXZhdGUgb25Nb3VzZUxlYXZlKCkge1xyXG5cdFx0dGhpcy5pc0RyYWdnaW5nID0gZmFsc2U7XHJcblx0XHR0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2N1cnNvcicsICdncmFiJyk7XHJcblx0fVxyXG5cclxuXHRyZXNldFZpZXcoKSB7XHJcblx0XHR0aGlzLnNjYWxlID0gMTtcclxuXHRcdHRoaXMucG9zaXRpb24gPSB7IHg6IDAsIHk6IDAgfTtcclxuXHRcdHRoaXMudXBkYXRlVHJhbnNmb3JtKCk7XHJcblx0fVxyXG5cclxuXHRwcml2YXRlIHVwZGF0ZVRyYW5zZm9ybSgpIHtcclxuXHRcdHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAndHJhbnNmb3JtJywgYHNjYWxlKCR7dGhpcy5zY2FsZX0pIHRyYW5zbGF0ZSgke3RoaXMucG9zaXRpb24ueH1weCwgJHt0aGlzLnBvc2l0aW9uLnl9cHgpYCk7XHJcblx0fVxyXG59Il19