@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.
478 lines (465 loc) • 17.4 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core')) :
typeof define === 'function' && define.amd ? define('@open-e/oe-coordinator', ['exports', 'rxjs', 'rxjs/operators', '@angular/core'], factory) :
(factory((global['open-e'] = global['open-e'] || {}, global['open-e']['oe-coordinator'] = {}),global.rxjs,global.rxjs.operators,global.ng.core));
}(this, (function (exports,rxjs,operators,core) { 'use strict';
/**
* @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
*/
(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;
})(exports.PublicAPI || (exports.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 rxjs.Subject();
this._pointerMove = new rxjs.Subject();
this._pointerUp = new rxjs.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(operators.tap(( /**
* @param {?} event
* @return {?}
*/function (event) {
this._pageX = event.pageX - this._margin;
})), operators.switchMap(( /**
* @return {?}
*/function () { return this._pointerMove; })), operators.tap(( /**
* @param {?} event
* @return {?}
*/function (event) {
this._margin = event.pageX - this._pageX;
this.renderer.setStyle(this._ref.nativeElement, "margin-left", this._cutEdgeValue() + "px");
})), operators.takeUntil(this._pointerUp), operators.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: core.Directive, args: [{ selector: "[horizonDrag]" },] }
];
/** @nocollapse */
AttributeDragDirective.ctorParameters = function () {
return [
{ type: core.Renderer2 },
{ type: core.ElementRef }
];
};
AttributeDragDirective.propDecorators = {
min: [{ type: core.Input }],
max: [{ type: core.Input }],
onPointerDown: [{ type: core.HostListener, args: ["mousedown", ["$event"],] }],
onPointerMove: [{ type: core.HostListener, args: ["document:mousemove", ["$event"],] }],
onPointerUp: [{ type: core.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: core.Directive, args: [{
selector: "[zoom-editor]"
},] }
];
/** @nocollapse */
ZoomDirective.ctorParameters = function () {
return [
{ type: core.ElementRef },
{ type: core.Renderer2 }
];
};
ZoomDirective.propDecorators = {
maxScale: [{ type: core.Input }],
minScale: [{ type: core.Input }],
accumulativeVal: [{ type: core.Input }],
currentScale: [{ type: core.Input }],
onwheel: [{ type: core.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: core.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
*/
exports.EngineModule = EngineModule;
exports.ɵa = AttributeDragDirective;
exports.ɵb = ZoomDirective;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=open-e-oe-coordinator.umd.js.map