@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.
75 lines • 5.71 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Directive, HostListener, ElementRef, Renderer2, Input } from "@angular/core";
/**
* Directive for Zoom Effect
*
* \@example:
* `<div zoom-editor maxScale='4' minScale='0.5' accumulativeVal='0.1'></div>`
*/
export 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"],] }]
};
if (false) {
/** @type {?} */
ZoomDirective.prototype.maxScale;
/** @type {?} */
ZoomDirective.prototype.minScale;
/** @type {?} */
ZoomDirective.prototype.accumulativeVal;
/** @type {?} */
ZoomDirective.prototype.currentScale;
/** @type {?} */
ZoomDirective.prototype._ref;
/** @type {?} */
ZoomDirective.prototype.renderer;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiem9vbS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ab3Blbi1lL29lLWNvb3JkaW5hdG9yLyIsInNvdXJjZXMiOlsibW9kdWxlL2NsYXNzL3pvb20uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQVd0RixNQUFNLE9BQU8sYUFBYTs7Ozs7SUFNeEIsWUFBbUIsSUFBZ0IsRUFBUyxRQUFtQjtRQUE1QyxTQUFJLEdBQUosSUFBSSxDQUFZO1FBQVMsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUx0RCxhQUFRLEdBQUcsQ0FBQyxDQUFDO1FBQ2IsYUFBUSxHQUFHLEdBQUcsQ0FBQztRQUNmLG9CQUFlLEdBQUcsR0FBRyxDQUFDO1FBQ3RCLGlCQUFZLEdBQUcsQ0FBQyxDQUFDO0lBRXdDLENBQUM7Ozs7O0lBR25FLE9BQU8sQ0FBQyxLQUFLO1FBQ1gsSUFBSSxLQUFLLENBQUMsT0FBTyxFQUFFOzs7Z0JBRWIsT0FBTyxHQUFHLE1BQU0sQ0FBQyxLQUFLLElBQUksS0FBSztZQUNuQyxPQUFPLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDekIsT0FBTyxDQUFDLFVBQVUsR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsUUFBUTtnQkFDMUQsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsZUFBZSxDQUFDO2dCQUM3QyxDQUFDLENBQUMsT0FBTyxDQUFDLFVBQVUsR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsUUFBUTtvQkFDOUQsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsZUFBZSxDQUFDO29CQUM3QyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBRVAsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQ3BCLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUN2QixXQUFXLEVBQ1gsU0FBUyxJQUFJLENBQUMsWUFBWSxHQUFHLENBQzlCLENBQUM7U0FDSDtJQUNILENBQUM7OztZQTdCRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGVBQWU7YUFDMUI7Ozs7WUFWaUMsVUFBVTtZQUFFLFNBQVM7Ozt1QkFZcEQsS0FBSzt1QkFDTCxLQUFLOzhCQUNMLEtBQUs7MkJBQ0wsS0FBSztzQkFJTCxZQUFZLFNBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDOzs7O0lBUGpDLGlDQUFzQjs7SUFDdEIsaUNBQXdCOztJQUN4Qix3Q0FBK0I7O0lBQy9CLHFDQUEwQjs7SUFFZCw2QkFBdUI7O0lBQUUsaUNBQTBCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBIb3N0TGlzdGVuZXIsIEVsZW1lbnRSZWYsIFJlbmRlcmVyMiwgSW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5cclxuLyoqXHJcbiAqIERpcmVjdGl2ZSBmb3IgWm9vbSBFZmZlY3RcclxuICogXHJcbiAqIEBleGFtcGxlOlxyXG4gKiAgYDxkaXYgem9vbS1lZGl0b3IgbWF4U2NhbGU9JzQnIG1pblNjYWxlPScwLjUnIGFjY3VtdWxhdGl2ZVZhbD0nMC4xJz48L2Rpdj5gXHJcbiAqL1xyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogXCJbem9vbS1lZGl0b3JdXCJcclxufSlcclxuZXhwb3J0IGNsYXNzIFpvb21EaXJlY3RpdmUge1xyXG4gIEBJbnB1dCgpIG1heFNjYWxlID0gMztcclxuICBASW5wdXQoKSBtaW5TY2FsZSA9IDAuNTtcclxuICBASW5wdXQoKSBhY2N1bXVsYXRpdmVWYWwgPSAwLjE7XHJcbiAgQElucHV0KCkgY3VycmVudFNjYWxlID0gMTtcclxuXHJcbiAgY29uc3RydWN0b3IocHVibGljIF9yZWY6IEVsZW1lbnRSZWYsIHB1YmxpYyByZW5kZXJlcjogUmVuZGVyZXIyKSB7fVxyXG5cclxuICBASG9zdExpc3RlbmVyKFwid2hlZWxcIiwgW1wiJGV2ZW50XCJdKVxyXG4gIG9ud2hlZWwoZXZlbnQpIHtcclxuICAgIGlmIChldmVudC5jdHJsS2V5KSB7XHJcbiAgICAgIC8vIFN1cHBvcnQgb2xkZXIgdmVyc2lvbiBvZiBJRVxyXG4gICAgICBsZXQgaGFuZGxlciA9IHdpbmRvdy5ldmVudCB8fCBldmVudDtcclxuICAgICAgaGFuZGxlci5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgICBoYW5kbGVyLndoZWVsRGVsdGEgPiAwICYmIHRoaXMuY3VycmVudFNjYWxlIDw9IHRoaXMubWF4U2NhbGVcclxuICAgICAgICA/ICh0aGlzLmN1cnJlbnRTY2FsZSArPSB0aGlzLmFjY3VtdWxhdGl2ZVZhbClcclxuICAgICAgICA6IGhhbmRsZXIud2hlZWxEZWx0YSA8IDAgJiYgdGhpcy5jdXJyZW50U2NhbGUgPj0gdGhpcy5taW5TY2FsZVxyXG4gICAgICAgID8gKHRoaXMuY3VycmVudFNjYWxlIC09IHRoaXMuYWNjdW11bGF0aXZlVmFsKVxyXG4gICAgICAgIDogXCJcIjtcclxuXHJcbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUoXHJcbiAgICAgICAgdGhpcy5fcmVmLm5hdGl2ZUVsZW1lbnQsXHJcbiAgICAgICAgXCJ0cmFuc2Zvcm1cIixcclxuICAgICAgICBgc2NhbGUoJHt0aGlzLmN1cnJlbnRTY2FsZX0pYFxyXG4gICAgICApO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iXX0=