ng-cw-v12/fesm2015/ng-cw-v12-img-zoom.js

Angular UI Component Library

import * as i0 from '@angular/core';
import { Directive, Input, HostListener, NgModule } from '@angular/core';

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']]
            }] } });

class NcImgZoomModule {
}
NcImgZoomModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcImgZoomModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcImgZoomModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcImgZoomModule, declarations: [ImgZoomDirective], exports: [ImgZoomDirective] });
NcImgZoomModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcImgZoomModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcImgZoomModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        ImgZoomDirective
                    ],
                    imports: [],
                    exports: [
                        ImgZoomDirective
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ImgZoomDirective, NcImgZoomModule };
//# sourceMappingURL=ng-cw-v12-img-zoom.js.map