angular-resize-element
Version:
An angular 4.0+ directive that allows an element to be resized
255 lines (246 loc) • 11.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
typeof define === 'function' && define.amd ? define('angular-resize-element', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['angular-resize-element'] = {}, global.ng.core));
}(this, (function (exports, core) { 'use strict';
(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";
})(exports.AngularResizeElementDirection || (exports.AngularResizeElementDirection = {}));
var AngularResizeElementDirective = /** @class */ (function () {
function AngularResizeElementDirective(elementRef, renderer2) {
this.elementRef = elementRef;
this.renderer2 = renderer2;
this.applyClass = 'resizing';
this.resizeStart = new core.EventEmitter();
this.resize = new core.EventEmitter();
this.resizeEnd = new core.EventEmitter();
this.listenMouseDownEvent();
}
AngularResizeElementDirective.prototype.ngOnChanges = function (changes) {
if (changes.useDrag) {
this.listenMouseDownEvent();
}
};
AngularResizeElementDirective.prototype.ngOnDestroy = function () {
if (this.mouseClickListener) {
this.mouseClickListener();
}
if (this.mouseUpListener) {
this.mouseUpListener();
}
if (this.mouseMoveListener) {
this.mouseMoveListener();
}
};
AngularResizeElementDirective.prototype.listenMouseDownEvent = function () {
var _this = this;
if (this.mouseClickListener) {
this.mouseClickListener();
}
var event = this.useDrag ? 'dragstart' : 'mousedown';
this.mouseClickListener = this.renderer2.listen(this.elementRef.nativeElement, event, function (evt) { return _this.onMouseDown(evt); });
};
AngularResizeElementDirective.prototype.onMouseDown = function (evt) {
var _this = this;
evt.preventDefault();
this.setOriginalData(evt);
this.resizeStart.emit(this.generateValuesForEvent(evt));
this.mouseUpListener = this.renderer2.listen('document', 'mouseup', function (event) { return _this.onMouseUp(event); });
this.mouseMoveListener = this.renderer2.listen('document', 'mousemove', function (event) { return _this.onMouseMove(event); });
this.renderer2.addClass(this.targetNativeElement, this.applyClass);
};
AngularResizeElementDirective.prototype.onMouseUp = function (evt) {
var eventValues = this.generateValuesForEvent(evt);
this.resize.emit(eventValues);
this.mouseMoveListener();
this.mouseUpListener();
this.renderer2.removeClass(this.targetNativeElement, this.applyClass);
this.resizeEnd.emit(eventValues);
};
AngularResizeElementDirective.prototype.onMouseMove = function (evt) {
this.resize.emit(this.generateValuesForEvent(evt));
};
AngularResizeElementDirective.prototype.setOriginalData = function (originalEvent) {
this.originalEvent = originalEvent;
if (this.targetElement) {
var 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;
}
};
Object.defineProperty(AngularResizeElementDirective.prototype, "targetNativeElement", {
get: function () {
return this.targetElement instanceof core.ElementRef ? this.targetElement.nativeElement : this.targetElement;
},
enumerable: false,
configurable: true
});
AngularResizeElementDirective.prototype.generateValuesForEvent = function (evt) {
var originalXValue = this.originalEvent.clientX;
var originalYValue = this.originalEvent.clientY;
var diffWidthValue = evt.clientX - originalXValue;
var diffHeightValue = evt.clientY - originalYValue;
var diffTopValue = diffHeightValue;
var diffLeftValue = diffWidthValue;
switch (this.direction) {
case exports.AngularResizeElementDirection.TOP: {
diffHeightValue *= -1;
diffWidthValue = 0;
diffLeftValue = 0;
break;
}
case exports.AngularResizeElementDirection.TOP_RIGHT: {
diffHeightValue *= -1;
diffLeftValue = 0;
break;
}
case exports.AngularResizeElementDirection.RIGHT: {
diffHeightValue = 0;
diffTopValue = 0;
diffLeftValue = 0;
break;
}
case exports.AngularResizeElementDirection.BOTTOM_RIGHT: {
diffTopValue = 0;
diffLeftValue = 0;
break;
}
case exports.AngularResizeElementDirection.BOTTOM: {
diffWidthValue = 0;
diffLeftValue = 0;
diffTopValue = 0;
break;
}
case exports.AngularResizeElementDirection.BOTTOM_LEFT: {
diffWidthValue *= -1;
diffTopValue = 0;
break;
}
case exports.AngularResizeElementDirection.LEFT: {
diffWidthValue *= -1;
diffHeightValue = 0;
diffTopValue = 0;
break;
}
case exports.AngularResizeElementDirection.TOP_LEFT: {
diffHeightValue *= -1;
diffWidthValue *= -1;
}
}
var currentWidthValue = this.targetElementWidthValue + diffWidthValue;
var 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;
}
var currentTopValue = this.targetElementTopValue + diffTopValue;
var 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: currentWidthValue,
currentHeightValue: currentHeightValue,
currentTopValue: currentTopValue,
currentLeftValue: 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,
};
};
return AngularResizeElementDirective;
}());
AngularResizeElementDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[resize], [resizeStart], [resizeEnd]'
},] }
];
AngularResizeElementDirective.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.Renderer2 }
]; };
AngularResizeElementDirective.propDecorators = {
targetElement: [{ type: core.Input }],
direction: [{ type: core.Input }],
proportionalResize: [{ type: core.Input }],
rect: [{ type: core.Input }],
applyClass: [{ type: core.Input }],
resizeStart: [{ type: core.Output }],
resize: [{ type: core.Output }],
resizeEnd: [{ type: core.Output }],
useDrag: [{ type: core.Input }, { type: core.HostBinding, args: ['attr.draggable',] }]
};
var AngularResizeElementModule = /** @class */ (function () {
function AngularResizeElementModule() {
}
return AngularResizeElementModule;
}());
AngularResizeElementModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [AngularResizeElementDirective],
imports: [],
exports: [AngularResizeElementDirective]
},] }
];
/*
* Public API Surface of angular-resize-element
*/
/**
* Generated bundle index. Do not edit.
*/
exports.AngularResizeElementDirective = AngularResizeElementDirective;
exports.AngularResizeElementModule = AngularResizeElementModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=angular-resize-element.umd.js.map