@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.
370 lines (359 loc) • 11.3 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 {?} */
let 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;
class CoordinateComponent {
// variation to detect on border
/**
* @param {?} element
*/
constructor(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 {?}
*/
getCoordinates() {
return this._coordinates;
}
/**
* Detect when module is on border of element
* @return {?}
*/
onBorder() {
return this._onBorder;
}
/**
* Detect hen drag starts
* @return {?}
*/
onDragStart() {
return this._isDrag;
}
/**
* addEventListener to detect when on border
*
* @param {?} name 'mousedown' | 'mouseup' | 'mouseover'
* @return {?}
*/
addListener(name) {
this._element.addEventListener(name, (/**
* @param {?} mouse
* @return {?}
*/
(mouse) => {
this.detectOnborder(mouse);
this.detectOnDragStart(name, mouse);
}));
}
/**
* Set variation to detect mouse on border
*
* @param {?} value
* @return {?}
*/
setVariation(value) {
this._variation = value;
}
/**
* calculate current coordinate of HTMlelement
*
* @private
* @return {?}
*/
setCoordinates() {
return (this._coordinates = Object.assign(this.element.getBoundingClientRect(), {
clientWidth: this.element.clientWidth,
clientHeight: this.element.clientHeight
}));
}
/**
* Private method to assign drag start
*
* @private
* @param {?} name
* @param {?} mouse
* @return {?}
*/
detectOnDragStart(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
*
* @private
* @param {?} mouse
* @return {?}
*/
detectOnborder(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 {?}
*/
detectMouseUpOutSide() {
document.addEventListener("mouseup", (/**
* @return {?}
*/
function () {
this._isDrag = false;
}).bind(this));
}
}
PublicAPI.CoordinateComponent = CoordinateComponent;
})(PublicAPI || (PublicAPI = {}));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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"],] }]
};
/**
* @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>`
*/
class ZoomDirective {
/**
* @param {?} _ref
* @param {?} renderer
*/
constructor(_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 {?}
*/
onwheel(event) {
if (event.ctrlKey) {
// Support older version of IE
/** @type {?} */
let 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 = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
ZoomDirective.propDecorators = {
maxScale: [{ type: Input }],
minScale: [{ type: Input }],
accumulativeVal: [{ type: Input }],
currentScale: [{ type: Input }],
onwheel: [{ type: HostListener, args: ["wheel", ["$event"],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class EngineModule {
}
EngineModule.decorators = [
{ type: NgModule, args: [{
declarations: [AttributeDragDirective, ZoomDirective],
exports: [AttributeDragDirective, ZoomDirective]
},] }
];
/**
* @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