@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.
472 lines (461 loc) • 14.6 kB
JavaScript
import { Subject } from 'rxjs';
import { switchMap, takeUntil, repeat, tap } from 'rxjs/operators';
import { Directive, Renderer2, HostListener, ElementRef, Input, NgModule } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DEFAULT;
(function (DEFAULT) {
DEFAULT.variation = 6;
})(DEFAULT || (DEFAULT = {}));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ClickEvent;
(function (ClickEvent) {
/**
* @param {?} name
* @param {?} from
* @return {?}
*/
function findParentSelector(name, from) {
/** @type {?} */
var parentElement = from.parentElement;
while (true) {
if (parentElement.classList.contains(name) || parentElement.nodeName == 'BODY') {
return parentElement;
}
parentElement = parentElement.parentElement;
}
}
ClickEvent.findParentSelector = findParentSelector;
})(ClickEvent || (ClickEvent = {}));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ClassEvent;
(function (ClassEvent) {
/**
* @param {?} container
* @param {?} name
* @return {?}
*/
function hasClass(container, name) {
return container.classList.contains(name);
}
ClassEvent.hasClass = hasClass;
})(ClassEvent || (ClassEvent = {}));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PublicAPI;
(function (PublicAPI) {
PublicAPI.ClassBehavior = ClassEvent;
PublicAPI.ClickBehavior = ClickEvent;
var CoordinateComponent = /** @class */ (function () {
function CoordinateComponent(element) {
this.element = element;
this._variation = DEFAULT.variation; // variation to detect on border
this._element = element;
this.setCoordinates();
this.addListener("mousemove");
this.addListener("mousedown");
this.addListener("mouseup");
this.detectMouseUpOutSide();
}
/**
* Return coordinates
*/
/**
* Return coordinates
* @return {?}
*/
CoordinateComponent.prototype.getCoordinates = /**
* Return coordinates
* @return {?}
*/
function () {
return this._coordinates;
};
/**
* Detect when module is on border of element
*/
/**
* Detect when module is on border of element
* @return {?}
*/
CoordinateComponent.prototype.onBorder = /**
* Detect when module is on border of element
* @return {?}
*/
function () {
return this._onBorder;
};
/**
* Detect hen drag starts
*/
/**
* Detect hen drag starts
* @return {?}
*/
CoordinateComponent.prototype.onDragStart = /**
* Detect hen drag starts
* @return {?}
*/
function () {
return this._isDrag;
};
/**
* addEventListener to detect when on border
*
* @param name 'mousedown' | 'mouseup' | 'mouseover'
*/
/**
* addEventListener to detect when on border
*
* @param {?} name 'mousedown' | 'mouseup' | 'mouseover'
* @return {?}
*/
CoordinateComponent.prototype.addListener = /**
* addEventListener to detect when on border
*
* @param {?} name 'mousedown' | 'mouseup' | 'mouseover'
* @return {?}
*/
function (name) {
var _this = this;
this._element.addEventListener(name, (/**
* @param {?} mouse
* @return {?}
*/
function (mouse) {
_this.detectOnborder(mouse);
_this.detectOnDragStart(name, mouse);
}));
};
/**
* Set variation to detect mouse on border
*
* @param value
*/
/**
* Set variation to detect mouse on border
*
* @param {?} value
* @return {?}
*/
CoordinateComponent.prototype.setVariation = /**
* Set variation to detect mouse on border
*
* @param {?} value
* @return {?}
*/
function (value) {
this._variation = value;
};
/**
* calculate current coordinate of HTMlelement
*
* @param element
*/
/**
* calculate current coordinate of HTMlelement
*
* @private
* @return {?}
*/
CoordinateComponent.prototype.setCoordinates = /**
* calculate current coordinate of HTMlelement
*
* @private
* @return {?}
*/
function () {
return (this._coordinates = Object.assign(this.element.getBoundingClientRect(), {
clientWidth: this.element.clientWidth,
clientHeight: this.element.clientHeight
}));
};
/**
* Private method to assign drag start
*
* @param name
* @param mouse
*/
/**
* Private method to assign drag start
*
* @private
* @param {?} name
* @param {?} mouse
* @return {?}
*/
CoordinateComponent.prototype.detectOnDragStart = /**
* Private method to assign drag start
*
* @private
* @param {?} name
* @param {?} mouse
* @return {?}
*/
function (name, mouse) {
if (Object.values(this._onBorder).indexOf(true) != -1 &&
["mousedown"].includes(name)) {
this._isDrag = true;
}
else if (this._isDrag && ["mousedown", "mousemove"].includes(name)) {
this._isDrag = true;
}
else {
this._isDrag = false;
}
};
/**
* detect when mouse click is on border
*
* @param mouse
*/
/**
* detect when mouse click is on border
*
* @private
* @param {?} mouse
* @return {?}
*/
CoordinateComponent.prototype.detectOnborder = /**
* detect when mouse click is on border
*
* @private
* @param {?} mouse
* @return {?}
*/
function (mouse) {
this._onBorder = Object.assign(this._onBorder ? this._onBorder : {}, {
left: mouse.offsetX < 0 + this._variation,
right: mouse.offsetX >
((/** @type {?} */ (mouse.target))).clientWidth - this._variation,
top: mouse.offsetY < 0 + this._variation,
bottom: mouse.offsetY >
((/** @type {?} */ (mouse.target))).clientHeight - this._variation
});
};
/**
* @private
* @return {?}
*/
CoordinateComponent.prototype.detectMouseUpOutSide = /**
* @private
* @return {?}
*/
function () {
document.addEventListener("mouseup", (/**
* @return {?}
*/
function () {
this._isDrag = false;
}).bind(this));
};
return CoordinateComponent;
}());
PublicAPI.CoordinateComponent = CoordinateComponent;
})(PublicAPI || (PublicAPI = {}));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AttributeDragDirective = /** @class */ (function () {
function AttributeDragDirective(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 {?}
*/
AttributeDragDirective.prototype.onPointerDown = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.preventDefault();
this._pointerDown.next(event);
};
/**
* @param {?} event
* @return {?}
*/
AttributeDragDirective.prototype.onPointerMove = /**
* @param {?} event
* @return {?}
*/
function (event) {
this._pointerMove.next(event);
};
/**
* @param {?} event
* @return {?}
*/
AttributeDragDirective.prototype.onPointerUp = /**
* @param {?} event
* @return {?}
*/
function (event) {
this._pointerUp.next(event);
};
/**
* @return {?}
*/
AttributeDragDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
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 {?}
*/
AttributeDragDirective.prototype._cutEdgeValue = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var 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 = function () { return [
{ 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"],] }]
};
return AttributeDragDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Directive for Zoom Effect
*
* \@example:
* `<div zoom-editor maxScale='4' minScale='0.5' accumulativeVal='0.1'></div>`
*/
var ZoomDirective = /** @class */ (function () {
function ZoomDirective(_ref, renderer) {
this._ref = _ref;
this.renderer = renderer;
this.maxScale = 3;
this.minScale = 0.5;
this.accumulativeVal = 0.1;
this.currentScale = 1;
}
/**
* @param {?} event
* @return {?}
*/
ZoomDirective.prototype.onwheel = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.ctrlKey) {
// Support older version of IE
/** @type {?} */
var handler = window.event || event;
handler.preventDefault();
handler.wheelDelta > 0 && this.currentScale <= this.maxScale
? (this.currentScale += this.accumulativeVal)
: handler.wheelDelta < 0 && this.currentScale >= this.minScale
? (this.currentScale -= this.accumulativeVal)
: "";
this.renderer.setStyle(this._ref.nativeElement, "transform", "scale(" + this.currentScale + ")");
}
};
ZoomDirective.decorators = [
{ type: Directive, args: [{
selector: "[zoom-editor]"
},] }
];
/** @nocollapse */
ZoomDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
ZoomDirective.propDecorators = {
maxScale: [{ type: Input }],
minScale: [{ type: Input }],
accumulativeVal: [{ type: Input }],
currentScale: [{ type: Input }],
onwheel: [{ type: HostListener, args: ["wheel", ["$event"],] }]
};
return ZoomDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var EngineModule = /** @class */ (function () {
function EngineModule() {
}
EngineModule.decorators = [
{ type: NgModule, args: [{
declarations: [AttributeDragDirective, ZoomDirective],
exports: [AttributeDragDirective, ZoomDirective]
},] }
];
return EngineModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { PublicAPI, EngineModule, AttributeDragDirective as ɵa, ZoomDirective as ɵb };
//# sourceMappingURL=open-e-oe-coordinator.js.map