ng-cw-v12/bundles/ng-cw-v12-img-zoom.umd.js

Angular UI component library

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
    typeof define === 'function' && define.amd ? define('ng-cw-v12/img-zoom', ['exports', '@angular/core'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["img-zoom"] = {}), global.ng.core));
})(this, (function (exports, i0) { 'use strict';

    function _interopNamespace(e) {
        if (e && e.__esModule) return e;
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () { return e[k]; }
                    });
                }
            });
        }
        n["default"] = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);

    var ImgZoomDirective = /** @class */ (function () {
        function ImgZoomDirective(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 };
        }
        ImgZoomDirective.prototype.ngOnInit = function () {
            this.initializeStyles();
        };
        ImgZoomDirective.prototype.initializeStyles = function () {
            //设置父元素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');
        };
        ImgZoomDirective.prototype.onWheel = function (event) {
            event.preventDefault();
            var delta = event.deltaY > 0 ? -0.1 : 0.1;
            this.scale = Math.max(this.ncMinScale, Math.min(this.ncMaxScale, this.scale + delta));
            this.updateTransform();
        };
        ImgZoomDirective.prototype.onMouseDown = function (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');
        };
        ImgZoomDirective.prototype.onMouseMove = function (event) {
            if (!this.isDragging)
                return;
            this.position = {
                x: event.clientX - this.lastPosition.x,
                y: event.clientY - this.lastPosition.y
            };
            this.updateTransform();
        };
        ImgZoomDirective.prototype.onMouseUp = function () {
            this.isDragging = false;
            // 在释放时立即更新cursor样式
            this.renderer.setStyle(this.el.nativeElement, 'cursor', 'grab');
        };
        ImgZoomDirective.prototype.onMouseLeave = function () {
            this.isDragging = false;
            this.renderer.setStyle(this.el.nativeElement, 'cursor', 'grab');
        };
        ImgZoomDirective.prototype.resetView = function () {
            this.scale = 1;
            this.position = { x: 0, y: 0 };
            this.updateTransform();
        };
        ImgZoomDirective.prototype.updateTransform = function () {
            this.renderer.setStyle(this.el.nativeElement, 'transform', "scale(" + this.scale + ") translate(" + this.position.x + "px, " + this.position.y + "px)");
        };
        return ImgZoomDirective;
    }());
    ImgZoomDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ImgZoomDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
    ImgZoomDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ImgZoomDirective, decorators: [{
                type: i0.Directive,
                args: [{
                        selector: '[ncImgZoom]',
                        exportAs: 'ncImgZoom'
                    }]
            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncMinScale: [{
                    type: i0.Input
                }], ncMaxScale: [{
                    type: i0.Input
                }], ncObjectFit: [{
                    type: i0.Input
                }], onWheel: [{
                    type: i0.HostListener,
                    args: ['wheel', ['$event']]
                }], onMouseDown: [{
                    type: i0.HostListener,
                    args: ['mousedown', ['$event']]
                }], onMouseMove: [{
                    type: i0.HostListener,
                    args: ['mousemove', ['$event']]
                }], onMouseUp: [{
                    type: i0.HostListener,
                    args: ['mouseup', ['$event']]
                }], onMouseLeave: [{
                    type: i0.HostListener,
                    args: ['mouseleave', ['$event']]
                }] } });

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

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

    exports.ImgZoomDirective = ImgZoomDirective;
    exports.NcImgZoomModule = NcImgZoomModule;

    Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=ng-cw-v12-img-zoom.umd.js.map