@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.
2 lines • 4.63 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("rxjs"),require("rxjs/operators"),require("@angular/core")):"function"==typeof define&&define.amd?define("@open-e/oe-coordinator",["exports","rxjs","rxjs/operators","@angular/core"],e):e((t["open-e"]=t["open-e"]||{},t["open-e"]["oe-coordinator"]={}),t.rxjs,t.rxjs.operators,t.ng.core)}(this,function(t,n,e,i){"use strict";var r,o,s;(r||(r={})).variation=6,(o||(o={})).findParentSelector=function p(t,e){for(var n=e.parentElement;;){if(n.classList.contains(t)||"BODY"==n.nodeName)return n;n=n.parentElement}},(s||(s={})).hasClass=function h(t,e){return t.classList.contains(e)},function(t){t.ClassBehavior=s,t.ClickBehavior=o;var e=function(){function t(t){this.element=t,this._variation=r.variation,this._element=t,this.setCoordinates(),this.addListener("mousemove"),this.addListener("mousedown"),this.addListener("mouseup"),this.detectMouseUpOutSide()}return t.prototype.getCoordinates=function(){return this._coordinates},t.prototype.onBorder=function(){return this._onBorder},t.prototype.onDragStart=function(){return this._isDrag},t.prototype.addListener=function(e){var n=this;this._element.addEventListener(e,function(t){n.detectOnborder(t),n.detectOnDragStart(e,t)})},t.prototype.setVariation=function(t){this._variation=t},t.prototype.setCoordinates=function(){return this._coordinates=Object.assign(this.element.getBoundingClientRect(),{clientWidth:this.element.clientWidth,clientHeight:this.element.clientHeight})},t.prototype.detectOnDragStart=function(t,e){-1!=Object.values(this._onBorder).indexOf(!0)&&["mousedown"].includes(t)?this._isDrag=!0:this._isDrag&&["mousedown","mousemove"].includes(t)?this._isDrag=!0:this._isDrag=!1},t.prototype.detectOnborder=function(t){this._onBorder=Object.assign(this._onBorder?this._onBorder:{},{left:t.offsetX<0+this._variation,right:t.offsetX>t.target.clientWidth-this._variation,top:t.offsetY<0+this._variation,bottom:t.offsetY>t.target.clientHeight-this._variation})},t.prototype.detectMouseUpOutSide=function(){document.addEventListener("mouseup",function(){this._isDrag=!1}.bind(this))},t}();t.CoordinateComponent=e}(t.PublicAPI||(t.PublicAPI={}));var a=function(){function t(t,e){this.renderer=t,this._ref=e,this._pointerDown=new n.Subject,this._pointerMove=new n.Subject,this._pointerUp=new n.Subject,this._margin=0}return t.prototype.onPointerDown=function(t){t.preventDefault(),this._pointerDown.next(t)},t.prototype.onPointerMove=function(t){this._pointerMove.next(t)},t.prototype.onPointerUp=function(t){this._pointerUp.next(t)},t.prototype.ngOnInit=function(){this._pointerDown.asObservable().pipe(e.tap(function(t){this._pageX=t.pageX-this._margin}),e.switchMap(function(){return this._pointerMove}),e.tap(function(t){this._margin=t.pageX-this._pageX,this.renderer.setStyle(this._ref.nativeElement,"margin-left",this._cutEdgeValue()+"px")}),e.takeUntil(this._pointerUp),e.repeat()).subscribe()},t.prototype._cutEdgeValue=function(){var t=this._margin;return this.min&&this._margin<this.min&&(t=this.min),this.max&&this._margin>this.max&&(t=this.max),t},t.decorators=[{type:i.Directive,args:[{selector:"[horizonDrag]"}]}],t.ctorParameters=function(){return[{type:i.Renderer2},{type:i.ElementRef}]},t.propDecorators={min:[{type:i.Input}],max:[{type:i.Input}],onPointerDown:[{type:i.HostListener,args:["mousedown",["$event"]]}],onPointerMove:[{type:i.HostListener,args:["document:mousemove",["$event"]]}],onPointerUp:[{type:i.HostListener,args:["document:mouseup",["$event"]]}]},t}(),c=function(){function t(t,e){this._ref=t,this.renderer=e,this.maxScale=3,this.minScale=.5,this.accumulativeVal=.1,this.currentScale=1}return t.prototype.onwheel=function(t){if(t.ctrlKey){var e=window.event||t;e.preventDefault(),0<e.wheelDelta&&this.currentScale<=this.maxScale?this.currentScale+=this.accumulativeVal:e.wheelDelta<0&&this.currentScale>=this.minScale&&(this.currentScale-=this.accumulativeVal),this.renderer.setStyle(this._ref.nativeElement,"transform","scale("+this.currentScale+")")}},t.decorators=[{type:i.Directive,args:[{selector:"[zoom-editor]"}]}],t.ctorParameters=function(){return[{type:i.ElementRef},{type:i.Renderer2}]},t.propDecorators={maxScale:[{type:i.Input}],minScale:[{type:i.Input}],accumulativeVal:[{type:i.Input}],currentScale:[{type:i.Input}],onwheel:[{type:i.HostListener,args:["wheel",["$event"]]}]},t}(),u=function(){function t(){}return t.decorators=[{type:i.NgModule,args:[{declarations:[a,c],exports:[a,c]}]}],t}();t.EngineModule=u,t.ɵa=a,t.ɵb=c,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=open-e-oe-coordinator.umd.min.js.map