angular-resize-element/fesm2015/angular-resize-element.js

An angular 4.0+ directive that allows an element to be resized

import { EventEmitter, ElementRef, Directive, Renderer2, Input, Output, HostBinding, NgModule } from '@angular/core';

var AngularResizeElementDirection;
(function (AngularResizeElementDirection) {
    AngularResizeElementDirection["TOP"] = "top";
    AngularResizeElementDirection["TOP_RIGHT"] = "top-right";
    AngularResizeElementDirection["RIGHT"] = "right";
    AngularResizeElementDirection["BOTTOM_RIGHT"] = "bottom-right";
    AngularResizeElementDirection["BOTTOM"] = "bottom";
    AngularResizeElementDirection["BOTTOM_LEFT"] = "bottom-left";
    AngularResizeElementDirection["LEFT"] = "left";
    AngularResizeElementDirection["TOP_LEFT"] = "top-left";
})(AngularResizeElementDirection || (AngularResizeElementDirection = {}));

class AngularResizeElementDirective {
    constructor(elementRef, renderer2) {
        this.elementRef = elementRef;
        this.renderer2 = renderer2;
        this.applyClass = 'resizing';
        this.resizeStart = new EventEmitter();
        this.resize = new EventEmitter();
        this.resizeEnd = new EventEmitter();
        this.listenMouseDownEvent();
    }
    ngOnChanges(changes) {
        if (changes.useDrag) {
            this.listenMouseDownEvent();
        }
    }
    ngOnDestroy() {
        if (this.mouseClickListener) {
            this.mouseClickListener();
        }
        if (this.mouseUpListener) {
            this.mouseUpListener();
        }
        if (this.mouseMoveListener) {
            this.mouseMoveListener();
        }
    }
    listenMouseDownEvent() {
        if (this.mouseClickListener) {
            this.mouseClickListener();
        }
        const event = this.useDrag ? 'dragstart' : 'mousedown';
        this.mouseClickListener = this.renderer2.listen(this.elementRef.nativeElement, event, evt => this.onMouseDown(evt));
    }
    onMouseDown(evt) {
        evt.preventDefault();
        this.setOriginalData(evt);
        this.resizeStart.emit(this.generateValuesForEvent(evt));
        this.mouseUpListener = this.renderer2.listen('document', 'mouseup', event => this.onMouseUp(event));
        this.mouseMoveListener = this.renderer2.listen('document', 'mousemove', event => this.onMouseMove(event));
        this.renderer2.addClass(this.targetNativeElement, this.applyClass);
    }
    onMouseUp(evt) {
        const eventValues = this.generateValuesForEvent(evt);
        this.resize.emit(eventValues);
        this.mouseMoveListener();
        this.mouseUpListener();
        this.renderer2.removeClass(this.targetNativeElement, this.applyClass);
        this.resizeEnd.emit(eventValues);
    }
    onMouseMove(evt) {
        this.resize.emit(this.generateValuesForEvent(evt));
    }
    setOriginalData(originalEvent) {
        this.originalEvent = originalEvent;
        if (this.targetElement) {
            const dataSource = this.targetNativeElement;
            this.targetElementWidthValue = dataSource.offsetWidth;
            this.targetElementHeightValue = dataSource.offsetHeight;
            this.targetElementTopValue = dataSource.offsetTop;
            this.targetElementLeftValue = dataSource.offsetLeft;
        }
        else {
            this.targetElementWidthValue = 0;
            this.targetElementHeightValue = 0;
            this.targetElementTopValue = 0;
            this.targetElementLeftValue = 0;
        }
    }
    get targetNativeElement() {
        return this.targetElement instanceof ElementRef ? this.targetElement.nativeElement : this.targetElement;
    }
    generateValuesForEvent(evt) {
        const originalXValue = this.originalEvent.clientX;
        const originalYValue = this.originalEvent.clientY;
        let diffWidthValue = evt.clientX - originalXValue;
        let diffHeightValue = evt.clientY - originalYValue;
        let diffTopValue = diffHeightValue;
        let diffLeftValue = diffWidthValue;
        switch (this.direction) {
            case AngularResizeElementDirection.TOP: {
                diffHeightValue *= -1;
                diffWidthValue = 0;
                diffLeftValue = 0;
                break;
            }
            case AngularResizeElementDirection.TOP_RIGHT: {
                diffHeightValue *= -1;
                diffLeftValue = 0;
                break;
            }
            case AngularResizeElementDirection.RIGHT: {
                diffHeightValue = 0;
                diffTopValue = 0;
                diffLeftValue = 0;
                break;
            }
            case AngularResizeElementDirection.BOTTOM_RIGHT: {
                diffTopValue = 0;
                diffLeftValue = 0;
                break;
            }
            case AngularResizeElementDirection.BOTTOM: {
                diffWidthValue = 0;
                diffLeftValue = 0;
                diffTopValue = 0;
                break;
            }
            case AngularResizeElementDirection.BOTTOM_LEFT: {
                diffWidthValue *= -1;
                diffTopValue = 0;
                break;
            }
            case AngularResizeElementDirection.LEFT: {
                diffWidthValue *= -1;
                diffHeightValue = 0;
                diffTopValue = 0;
                break;
            }
            case AngularResizeElementDirection.TOP_LEFT: {
                diffHeightValue *= -1;
                diffWidthValue *= -1;
            }
        }
        let currentWidthValue = this.targetElementWidthValue + diffWidthValue;
        let currentHeightValue = this.targetElementHeightValue + diffHeightValue;
        if (this.proportionalResize) {
            if (currentWidthValue > currentHeightValue) {
                currentWidthValue = currentHeightValue;
            }
            else {
                currentHeightValue = currentWidthValue;
            }
        }
        if (currentHeightValue <= 1) {
            diffTopValue += currentHeightValue;
        }
        if (currentWidthValue <= 1) {
            diffLeftValue += currentWidthValue;
        }
        if (currentWidthValue <= 0) {
            currentWidthValue = 0;
        }
        if (currentHeightValue <= 0) {
            currentHeightValue = 0;
        }
        let currentTopValue = this.targetElementTopValue + diffTopValue;
        let currentLeftValue = this.targetElementLeftValue + diffLeftValue;
        if (this.rect) {
            if (currentTopValue < this.rect.top) {
                currentHeightValue = this.targetElementHeightValue + this.targetElementTopValue - this.rect.top;
                currentTopValue = this.rect.top;
            }
            if (currentHeightValue + currentTopValue > this.rect.height) {
                currentHeightValue = this.rect.height - currentTopValue;
            }
            if (currentLeftValue < this.rect.left) {
                currentWidthValue = this.targetElementWidthValue + this.targetElementLeftValue - this.rect.left;
                currentLeftValue = this.rect.left;
            }
            if (currentWidthValue + currentLeftValue > this.rect.width) {
                currentWidthValue = this.rect.width - currentLeftValue;
            }
        }
        return {
            originalEvent: this.originalEvent,
            currentWidthValue,
            currentHeightValue,
            currentTopValue,
            currentLeftValue,
            originalWidthValue: this.targetElementWidthValue,
            originalHeightValue: this.targetElementHeightValue,
            originalTopValue: this.targetElementTopValue,
            originalLeftValue: this.targetElementLeftValue,
            differenceWidthValue: currentWidthValue - this.targetElementWidthValue,
            differenceHeightValue: currentHeightValue - this.targetElementHeightValue,
            differenceTopValue: currentTopValue - this.targetElementTopValue,
            differenceLeftValue: currentLeftValue - this.targetElementLeftValue,
            direction: this.direction,
        };
    }
}
AngularResizeElementDirective.decorators = [
    { type: Directive, args: [{
                selector: '[resize], [resizeStart], [resizeEnd]'
            },] }
];
AngularResizeElementDirective.ctorParameters = () => [
    { type: ElementRef },
    { type: Renderer2 }
];
AngularResizeElementDirective.propDecorators = {
    targetElement: [{ type: Input }],
    direction: [{ type: Input }],
    proportionalResize: [{ type: Input }],
    rect: [{ type: Input }],
    applyClass: [{ type: Input }],
    resizeStart: [{ type: Output }],
    resize: [{ type: Output }],
    resizeEnd: [{ type: Output }],
    useDrag: [{ type: Input }, { type: HostBinding, args: ['attr.draggable',] }]
};

class AngularResizeElementModule {
}
AngularResizeElementModule.decorators = [
    { type: NgModule, args: [{
                declarations: [AngularResizeElementDirective],
                imports: [],
                exports: [AngularResizeElementDirective]
            },] }
];

/*
 * Public API Surface of angular-resize-element
 */

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

export { AngularResizeElementDirection, AngularResizeElementDirective, AngularResizeElementModule };
//# sourceMappingURL=angular-resize-element.js.map