@open-e/oe-coordinator
Version:
This module is used to detect mouse movement on the border of HTMLElement. Useful usecase is to enable resize event in `div` element when mouse is on the border of it.
140 lines • 9.46 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Directive, Renderer2, HostListener, ElementRef, Input } from "@angular/core";
import { Subject } from "rxjs";
import { switchMap, takeUntil, repeat, tap } from "rxjs/operators";
export class AttributeDragDirective {
/**
* @param {?} renderer
* @param {?} _ref
*/
constructor(renderer, _ref) {
this.renderer = renderer;
this._ref = _ref;
this._pointerDown = new Subject();
this._pointerMove = new Subject();
this._pointerUp = new Subject();
this._margin = 0;
}
/**
* @param {?} event
* @return {?}
*/
onPointerDown(event) {
event.preventDefault();
this._pointerDown.next(event);
}
/**
* @param {?} event
* @return {?}
*/
onPointerMove(event) {
this._pointerMove.next(event);
}
/**
* @param {?} event
* @return {?}
*/
onPointerUp(event) {
this._pointerUp.next(event);
}
/**
* @return {?}
*/
ngOnInit() {
this._pointerDown
.asObservable()
.pipe(tap((/**
* @param {?} event
* @return {?}
*/
function (event) {
this._pageX = event.pageX - this._margin;
})), switchMap((/**
* @return {?}
*/
function () { return this._pointerMove; })), tap((/**
* @param {?} event
* @return {?}
*/
function (event) {
this._margin = event.pageX - this._pageX;
this.renderer.setStyle(this._ref.nativeElement, "margin-left", `${this._cutEdgeValue()}px`);
})), takeUntil(this._pointerUp), repeat())
.subscribe();
}
/**
* @private
* @return {?}
*/
_cutEdgeValue() {
/** @type {?} */
let result = this._margin;
if (this.min && this._margin < this.min) {
result = this.min;
}
if (this.max && this._margin > this.max) {
result = this.max;
}
return result;
}
}
AttributeDragDirective.decorators = [
{ type: Directive, args: [{ selector: "[horizonDrag]" },] }
];
/** @nocollapse */
AttributeDragDirective.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
AttributeDragDirective.propDecorators = {
min: [{ type: Input }],
max: [{ type: Input }],
onPointerDown: [{ type: HostListener, args: ["mousedown", ["$event"],] }],
onPointerMove: [{ type: HostListener, args: ["document:mousemove", ["$event"],] }],
onPointerUp: [{ type: HostListener, args: ["document:mouseup", ["$event"],] }]
};
if (false) {
/**
* @type {?}
* @private
*/
AttributeDragDirective.prototype._pointerDown;
/**
* @type {?}
* @private
*/
AttributeDragDirective.prototype._pointerMove;
/**
* @type {?}
* @private
*/
AttributeDragDirective.prototype._pointerUp;
/**
* @type {?}
* @private
*/
AttributeDragDirective.prototype._margin;
/**
* @type {?}
* @private
*/
AttributeDragDirective.prototype._pageX;
/** @type {?} */
AttributeDragDirective.prototype.min;
/** @type {?} */
AttributeDragDirective.prototype.max;
/**
* @type {?}
* @private
*/
AttributeDragDirective.prototype.renderer;
/**
* @type {?}
* @private
*/
AttributeDragDirective.prototype._ref;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZy5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ab3Blbi1lL29lLWNvb3JkaW5hdG9yLyIsInNvdXJjZXMiOlsibW9kdWxlL2NsYXNzL2RyYWcuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFNBQVMsRUFDVCxZQUFZLEVBRVosVUFBVSxFQUNWLEtBQUssRUFDTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUduRSxNQUFNLE9BQU8sc0JBQXNCOzs7OztJQVVqQyxZQUFvQixRQUFtQixFQUFVLElBQWdCO1FBQTdDLGFBQVEsR0FBUixRQUFRLENBQVc7UUFBVSxTQUFJLEdBQUosSUFBSSxDQUFZO1FBVHpELGlCQUFZLEdBQUcsSUFBSSxPQUFPLEVBQWMsQ0FBQztRQUN6QyxpQkFBWSxHQUFHLElBQUksT0FBTyxFQUFjLENBQUM7UUFDekMsZUFBVSxHQUFHLElBQUksT0FBTyxFQUFjLENBQUM7UUFFdkMsWUFBTyxHQUFXLENBQUMsQ0FBQztJQUt3QyxDQUFDOzs7OztJQUdyRSxhQUFhLENBQUMsS0FBaUI7UUFDN0IsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hDLENBQUM7Ozs7O0lBR0QsYUFBYSxDQUFDLEtBQWlCO1FBQzdCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hDLENBQUM7Ozs7O0lBR0QsV0FBVyxDQUFDLEtBQWlCO1FBQzNCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlCLENBQUM7Ozs7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVk7YUFDZCxZQUFZLEVBQUU7YUFDZCxJQUFJLENBQ0gsR0FBRzs7OztRQUFDLFVBQVMsS0FBaUI7WUFDNUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7UUFDM0MsQ0FBQyxFQUFDLEVBQ0YsU0FBUzs7O1FBQUMsY0FBYyxPQUFPLElBQUksQ0FBQyxZQUFZLENBQUEsQ0FBQSxDQUFDLEVBQUMsRUFDbEQsR0FBRzs7OztRQUFDLFVBQVMsS0FBaUI7WUFDNUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7WUFDekMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQ3BCLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUN2QixhQUFhLEVBQ2IsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLElBQUksQ0FDNUIsQ0FBQztRQUNKLENBQUMsRUFBQyxFQUNGLFNBQVMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQzFCLE1BQU0sRUFBRSxDQUNUO2FBQ0EsU0FBUyxFQUFFLENBQUM7SUFDakIsQ0FBQzs7Ozs7SUFFTyxhQUFhOztZQUNmLE1BQU0sR0FBRyxJQUFJLENBQUMsT0FBTztRQUV6QixJQUFJLElBQUksQ0FBQyxHQUFHLElBQUksSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ3ZDLE1BQU0sR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDO1NBQ25CO1FBRUQsSUFBSSxJQUFJLENBQUMsR0FBRyxJQUFJLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLEdBQUcsRUFBRTtZQUN2QyxNQUFNLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQztTQUNuQjtRQUVELE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7OztZQS9ERixTQUFTLFNBQUMsRUFBRSxRQUFRLEVBQUUsZUFBZSxFQUFFOzs7O1lBVHRDLFNBQVM7WUFHVCxVQUFVOzs7a0JBY1QsS0FBSztrQkFDTCxLQUFLOzRCQUlMLFlBQVksU0FBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7NEJBTXBDLFlBQVksU0FBQyxvQkFBb0IsRUFBRSxDQUFDLFFBQVEsQ0FBQzswQkFLN0MsWUFBWSxTQUFDLGtCQUFrQixFQUFFLENBQUMsUUFBUSxDQUFDOzs7Ozs7O0lBdEI1Qyw4Q0FBaUQ7Ozs7O0lBQ2pELDhDQUFpRDs7Ozs7SUFDakQsNENBQStDOzs7OztJQUUvQyx5Q0FBNEI7Ozs7O0lBQzVCLHdDQUF1Qjs7SUFDdkIscUNBQXFCOztJQUNyQixxQ0FBcUI7Ozs7O0lBRVQsMENBQTJCOzs7OztJQUFFLHNDQUF3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgRGlyZWN0aXZlLFxyXG4gIFJlbmRlcmVyMixcclxuICBIb3N0TGlzdGVuZXIsXHJcbiAgT25Jbml0LFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgSW5wdXRcclxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSBcInJ4anNcIjtcclxuaW1wb3J0IHsgc3dpdGNoTWFwLCB0YWtlVW50aWwsIHJlcGVhdCwgdGFwIH0gZnJvbSBcInJ4anMvb3BlcmF0b3JzXCI7XHJcblxyXG5ARGlyZWN0aXZlKHsgc2VsZWN0b3I6IFwiW2hvcml6b25EcmFnXVwiIH0pXHJcbmV4cG9ydCBjbGFzcyBBdHRyaWJ1dGVEcmFnRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcclxuICBwcml2YXRlIF9wb2ludGVyRG93biA9IG5ldyBTdWJqZWN0PE1vdXNlRXZlbnQ+KCk7XHJcbiAgcHJpdmF0ZSBfcG9pbnRlck1vdmUgPSBuZXcgU3ViamVjdDxNb3VzZUV2ZW50PigpO1xyXG4gIHByaXZhdGUgX3BvaW50ZXJVcCA9IG5ldyBTdWJqZWN0PE1vdXNlRXZlbnQ+KCk7XHJcblxyXG4gIHByaXZhdGUgX21hcmdpbjogbnVtYmVyID0gMDtcclxuICBwcml2YXRlIF9wYWdlWDogbnVtYmVyO1xyXG4gIEBJbnB1dCgpIG1pbjogbnVtYmVyO1xyXG4gIEBJbnB1dCgpIG1heDogbnVtYmVyO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgX3JlZjogRWxlbWVudFJlZikge31cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcihcIm1vdXNlZG93blwiLCBbXCIkZXZlbnRcIl0pXHJcbiAgb25Qb2ludGVyRG93bihldmVudDogTW91c2VFdmVudCkge1xyXG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuICAgIHRoaXMuX3BvaW50ZXJEb3duLm5leHQoZXZlbnQpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcihcImRvY3VtZW50Om1vdXNlbW92ZVwiLCBbXCIkZXZlbnRcIl0pXHJcbiAgb25Qb2ludGVyTW92ZShldmVudDogTW91c2VFdmVudCkge1xyXG4gICAgdGhpcy5fcG9pbnRlck1vdmUubmV4dChldmVudCk7XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKFwiZG9jdW1lbnQ6bW91c2V1cFwiLCBbXCIkZXZlbnRcIl0pXHJcbiAgb25Qb2ludGVyVXAoZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuICAgIHRoaXMuX3BvaW50ZXJVcC5uZXh0KGV2ZW50KTtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5fcG9pbnRlckRvd25cclxuICAgICAgLmFzT2JzZXJ2YWJsZSgpXHJcbiAgICAgIC5waXBlKFxyXG4gICAgICAgIHRhcChmdW5jdGlvbihldmVudDogTW91c2VFdmVudCkge1xyXG4gICAgICAgICAgdGhpcy5fcGFnZVggPSBldmVudC5wYWdlWCAtIHRoaXMuX21hcmdpbjtcclxuICAgICAgICB9KSxcclxuICAgICAgICBzd2l0Y2hNYXAoZnVuY3Rpb24gKCkgeyByZXR1cm4gdGhpcy5fcG9pbnRlck1vdmV9KSxcclxuICAgICAgICB0YXAoZnVuY3Rpb24oZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuICAgICAgICAgIHRoaXMuX21hcmdpbiA9IGV2ZW50LnBhZ2VYIC0gdGhpcy5fcGFnZVg7XHJcbiAgICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKFxyXG4gICAgICAgICAgICB0aGlzLl9yZWYubmF0aXZlRWxlbWVudCxcclxuICAgICAgICAgICAgXCJtYXJnaW4tbGVmdFwiLFxyXG4gICAgICAgICAgICBgJHt0aGlzLl9jdXRFZGdlVmFsdWUoKX1weGBcclxuICAgICAgICAgICk7XHJcbiAgICAgICAgfSksXHJcbiAgICAgICAgdGFrZVVudGlsKHRoaXMuX3BvaW50ZXJVcCksXHJcbiAgICAgICAgcmVwZWF0KClcclxuICAgICAgKVxyXG4gICAgICAuc3Vic2NyaWJlKCk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIF9jdXRFZGdlVmFsdWUoKTogbnVtYmVyIHtcclxuICAgIGxldCByZXN1bHQgPSB0aGlzLl9tYXJnaW47XHJcbiAgICBcclxuICAgIGlmICh0aGlzLm1pbiAmJiB0aGlzLl9tYXJnaW4gPCB0aGlzLm1pbikge1xyXG4gICAgICByZXN1bHQgPSB0aGlzLm1pbjtcclxuICAgIH1cclxuXHJcbiAgICBpZiAodGhpcy5tYXggJiYgdGhpcy5fbWFyZ2luID4gdGhpcy5tYXgpIHtcclxuICAgICAgcmVzdWx0ID0gdGhpcy5tYXg7XHJcbiAgICB9XHJcblxyXG4gICAgcmV0dXJuIHJlc3VsdDtcclxuICB9XHJcbn1cclxuIl19