New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ngx-panzoom

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-panzoom - npm Package Compare versions

Comparing version 10.3.0 to 11.0.0

2

bundles/ngx-panzoom.umd.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs")):"function"==typeof define&&define.amd?define("ngx-panzoom",["exports","@angular/core","rxjs"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["ngx-panzoom"]={},e.ng.core,e.rxjs)}(this,(function(e,t,n){"use strict";var i=function(){function e(e){var t=this;this.zone=e,this.isDragging=!1,this.lastTick=0,this.isChrome=!1,this.willChangeNextFrame=!0,this.isMobile=!1,this.isFirstSync=!0,this.zoomLevelIsChanging=!1,this.dragFinishing=!1,this.onMouseWheel=function(e){if(e&&e.pageX&&e.pageY){var n=e.deltaY;if(t.config.zoomOnMouseWheel){if(t.animationParams)return;t.config.invertMouseWheel||(n=-n);var i=t.getFrameElementOffset(),o={x:e.pageX-i.left,y:e.pageY-i.top};t.lastClickPoint=o,t.config.freeMouseWheel?t.freeZoom(o,n):n<0?t.zoomInToPoint(o):n>0&&t.zoomOutFromPoint(o)}}},this.onMousedown=function(e){if(!t.config.noDragFromElementClass||!t.isParentElement(t.config.noDragFromElementClass,e.srcElement))return e.button===t.dragMouseButton||"touchstart"===e.type?(e.preventDefault(),t.dragFinishing=!1,t.panVelocity=void 0,t.config.panOnClickDrag&&(t.previousPosition={x:e.pageX,y:e.pageY},t.lastMouseEventTime=e.timeStamp,t.isDragging=!0,t.model.isPanning=!1,t.isMobile?(t.zone.runOutsideAngular((function(){return document.addEventListener("touchend",t.onTouchEnd,!1)})),t.zone.runOutsideAngular((function(){return document.addEventListener("touchmove",t.onTouchMove,{passive:!0,capture:!1})}))):(t.zone.runOutsideAngular((function(){return document.addEventListener("mousemove",t.onMouseMove,{passive:!0,capture:!1})})),t.zone.runOutsideAngular((function(){return document.addEventListener("mouseup",t.onMouseUp)})))),!1):void 0},this.onTouchStart=function(e){if(e.preventDefault(),1!==e.touches.length){var n=e.touches[0].pageX-e.touches[1].pageX,i=e.touches[0].pageY-e.touches[1].pageY;t.previousPosition={length:n*n+i*i}}t.onMousedown(e)},this.onMouseMove=function(e){if(e&&e.pageX&&e.pageY){var n=e.timeStamp,i=(n-t.lastMouseEventTime)/1e3;t.lastMouseEventTime=n;var o={x:e.pageX-t.previousPosition.x,y:e.pageY-t.previousPosition.y};if(t.config.keepInBounds){var s=t.getViewPosition({x:0,y:0}),a=t.getViewPosition({x:t.contentWidth,y:t.contentHeight});s.x>0&&o.x>0&&(o.x*=Math.min(1,Math.pow(s.x,-t.config.keepInBoundsDragPullback))),s.y>0&&o.y>0&&(o.y*=Math.min(1,Math.pow(s.y,-t.config.keepInBoundsDragPullback))),a.x<t.contentWidth&&o.x<0&&(o.x*=Math.min(1,Math.pow(t.contentWidth-a.x,-t.config.keepInBoundsDragPullback))),a.y<t.contentHeight&&o.y<0&&(o.y*=Math.min(1,Math.pow(t.contentHeight-a.y,-t.config.keepInBoundsDragPullback)))}var r=o.x||0,l=o.y||0;t.model.pan.x+=r,t.model.pan.y+=l,t.syncBaseToModel(),t.animationTick(),t.model.isPanning||(t.panzoomOverlayRef.nativeElement.style.display="block"),t.model.isPanning=!0;var h=o.x/i,m=o.y/i;t.panVelocity={x:Number.isFinite(h)?h:0,y:Number.isFinite(m)?m:0},t.previousPosition={x:e.pageX,y:e.pageY}}},this.onTouchMove=function(e){if(1===e.touches.length)t.onMouseMove(e);else{var n=e.touches[0].pageX-e.touches[1].pageX,i=e.touches[0].pageY-e.touches[1].pageY,o=n*n+i*i,s=o-t.previousPosition.length;if(Math.abs(s)<100)return;var a=e.touches[1].pageX+n/2,r=e.touches[1].pageY+i/2,l=t.getFrameElementOffset(),h={x:a-l.left,y:r-l.top};t.lastClickPoint=h,t.changeZoomLevel(t.base.zoomLevel+1e-4*s,h),t.previousPosition={length:o}}},this.onMouseUp=function(e){if(e.button===t.dragMouseButton){e.preventDefault();var n=(e.timeStamp-t.lastMouseEventTime)/1e3;if(!t.panVelocity||0===t.panVelocity.x&&0===t.panVelocity.y)t.panVelocity=void 0,t.dragFinishing=!1,t.model.isPanning=!1,t.config.modelChanged.next(t.model),t.syncBaseToModel();else{var i=Math.max(0,-.2+Math.pow(n+1,-4));t.panVelocity.x*=i,t.panVelocity.y*=i,t.dragFinishing=!0,t.zone.runOutsideAngular((function(){return t.animationId=t.animationFrameFunc(t.animationTick)}))}t.isDragging=!1,t.isMobile?(t.zone.runOutsideAngular((function(){return document.removeEventListener("touchend",t.onTouchEnd)})),t.zone.runOutsideAngular((function(){return document.removeEventListener("touchmove",t.onTouchMove,{passive:!0,capture:!1})}))):(t.zone.runOutsideAngular((function(){return document.removeEventListener("mousemove",t.onMouseMove,{passive:!0,capture:!1})})),t.zone.runOutsideAngular((function(){return document.removeEventListener("mouseup",t.onMouseUp,{passive:!0})}))),t.panzoomOverlayRef.nativeElement.style.display="none"}},this.onTouchEnd=function(e){t.onMouseUp(e)},this.onDblClick=function(e){if(e.preventDefault(),t.config.zoomOnDoubleClick){var n=t.getFrameElementOffset(),i={x:e.pageX-n.left,y:e.pageY-n.top};t.lastClickPoint=i,t.zoomInToPoint(i)}},this.preventDefault=function(e){e.preventDefault()},this.animationTick=function(e){void 0===e&&(e=performance.now());var n=0;if(0!==t.lastTick&&(n=e-t.lastTick),t.lastTick=e,t.animationParams&&(t.animationParams.progress+=Math.abs(n/t.animationParams.duration),t.animationParams.progress>=1&&(t.animationParams.progress=1,t.updateDOM(),t.animationParams=void 0)),t.panVelocity&&t.dragFinishing)for(n>0&&(n/=1e3);n>0;){var i=Math.min(.02,n);if(n-=i,t.model.pan.x=t.model.pan.x+t.panVelocity.x*i,t.panVelocity.x=t.panVelocity.x*(1-t.config.friction*i),t.model.pan.y=t.model.pan.y+t.panVelocity.y*i,t.panVelocity.y=t.panVelocity.y*(1-t.config.friction*i),t.length(t.panVelocity)<=t.config.haltSpeed){t.panVelocity=void 0,t.dragFinishing=!1;break}}if(t.config.keepInBounds||t.dragFinishing){var o=t.getViewPosition({x:0,y:0}),s=t.getViewPosition({x:t.contentWidth,y:t.contentHeight});o.x>0&&(t.base.pan.x-=t.config.keepInBoundsRestoreForce*o.x),o.y>0&&(t.base.pan.y-=t.config.keepInBoundsRestoreForce*o.y),s.x<t.contentWidth&&(t.base.pan.x-=t.config.keepInBoundsRestoreForce*(s.x-t.contentWidth)),s.y<t.contentHeight&&(t.base.pan.y-=t.config.keepInBoundsRestoreForce*(s.y-t.contentHeight))}if(t.updateDOM(),t.config.modelChanged.next(t.model),t.animationParams||t.panVelocity&&t.dragFinishing)t.isChrome&&t.zoomLevelIsChanging&&(t.willChangeNextFrame?t.zoomElementRef.nativeElement.style.willChange="auto":t.zoomElementRef.nativeElement.style.willChange="transform",t.willChangeNextFrame=!t.willChangeNextFrame),t.animationFrameFunc(t.animationTick);else{if(t.panVelocity&&!t.dragFinishing)return;t.model.isPanning&&(t.model.isPanning=!1),t.syncBaseToModel(),t.config.modelChanged.next(t.model),t.scale=t.getCssScale(t.base.zoomLevel),t.willChangeNextFrame=!0,t.zoomElementRef.nativeElement.style.willChange="transform",t.zoomLevelIsChanging=!1,t.lastTick=0}}}return e.prototype.ngOnInit=function(){var e=this;if(this.config.initialZoomToFit?this.base=this.calcZoomToFit(this.config.initialZoomToFit):this.base={zoomLevel:this.config.initialZoomLevel,pan:{x:this.config.initialPanX,y:this.config.initialPanY}},this.model={zoomLevel:this.base.zoomLevel,isPanning:!1,pan:{x:this.base.pan.x,y:this.base.pan.y}},this.config.modelChanged.next(this.model),this.api={model:this.model,config:this.config,changeZoomLevel:this.zoomToLevelAndPoint.bind(this),zoomIn:this.zoomIn.bind(this),zoomOut:this.zoomOut.bind(this),zoomToFit:this.zoomToFit.bind(this),resetView:this.resetView.bind(this),getViewPosition:this.getViewPosition.bind(this),getModelPosition:this.getModelPosition.bind(this),panToPoint:this.panToPoint.bind(this),panDelta:this.panDelta.bind(this),panDeltaPercent:this.panDeltaPercent.bind(this),panDeltaAbsolute:this.panDeltaAbsolute.bind(this),centerContent:this.centerContent.bind(this),centerX:this.centerX.bind(this),centerY:this.centerY.bind(this),centerTopLeft:this.centerTopLeftCorner.bind(this),centerBottomLeft:this.centerBottomLeftCorner.bind(this),centerTopRight:this.centerTopRightCorner.bind(this),centerBottomRight:this.centerBottomRightCorner.bind(this),updateContentDimensions:this.updateContentDimensions.bind(this),detectContentDimensions:this.detectContentDimensions.bind(this)},this.config.api.next(this.api),this.config.freeMouseWheel){this.scale=this.getCssScale(this.config.initialZoomLevel);var t=this.config.zoomLevels-1;this.maxScale=this.getCssScale(t),this.minScale=this.getCssScale(0)}switch(this.minimumAllowedZoomLevel=0,this.config.keepInBounds&&(this.minimumAllowedZoomLevel=this.config.neutralZoomLevel,this.minScale=this.getCssScale(this.config.neutralZoomLevel)),this.zoomElementRef.nativeElement.style.willChange="transform",navigator.userAgent.search("Chrome")>=0&&(this.isChrome=!0,this.zoomElementRef.nativeElement.style.transform="translateZ(0)"),this.config.acceleratePan&&(this.panElementRef.nativeElement.style.willChange="transform",navigator.userAgent.search("Chrome")>=0&&(this.isChrome=!0,this.panElementRef.nativeElement.style.transform="translateZ(0)")),this.animationTick(),this.scale=this.getCssScale(this.base.zoomLevel),this.isFirstSync=!1,this.config.dragMouseButton){case"left":this.dragMouseButton=0;break;case"middle":this.dragMouseButton=1,this.zone.runOutsideAngular((function(){return e.frameElementRef.nativeElement.addEventListener("auxclick",e.preventDefault)}));break;case"right":this.zone.runOutsideAngular((function(){return document.addEventListener("contextmenu",e.preventDefault)})),this.dragMouseButton=2;break;default:this.dragMouseButton=0}},e.prototype.ngAfterViewInit=function(){var e=this;this.detectContentDimensions();var t=getComputedStyle(this.frameElementRef.nativeElement);this.frameHeight=parseInt(t.getPropertyValue("height").split("px")[0]),this.frameWidth=parseInt(t.getPropertyValue("width").split("px")[0]),this.zone.runOutsideAngular((function(){return e.animationFrameFunc=window.requestAnimationFrame})),this.config.dynamicContentDimensions&&(window.ResizeObserver?(this.resizeObserver=new window.ResizeObserver((function(t){return e.onContentDimensionsChangeDetected(t)})),this.zone.runOutsideAngular((function(){return e.resizeObserver.observe(e.zoomElementRef.nativeElement)}))):console.error("ResizeObserver API is not supported by this browser. See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver for info on browser compatibility.")),this.isMobileDevice()?(this.isMobile=!0,this.zone.runOutsideAngular((function(){return e.frameElementRef.nativeElement.addEventListener("touchstart",e.onTouchStart)}))):this.zone.runOutsideAngular((function(){e.frameElementRef.nativeElement.addEventListener("mousedown",e.onMousedown),e.frameElementRef.nativeElement.addEventListener("dblclick",e.onDblClick),e.frameElementRef.nativeElement.addEventListener("wheel",(function(t){return e.animationFrameFunc((function(){return e.onMouseWheel(t)}))}),{passive:!0})}))},e.prototype.ngOnDestroy=function(){var e=this;switch(this.isMobile?this.frameElementRef.nativeElement.removeEventListener("touchstart",this.onTouchStart):(this.frameElementRef.nativeElement.removeEventListener("mousedown",this.onMousedown),this.frameElementRef.nativeElement.removeEventListener("wheel",(function(t){return e.animationFrameFunc((function(){return e.onMouseWheel(t)}))}),{passive:!0}),this.frameElementRef.nativeElement.removeEventListener("dblclick",this.onDblClick)),this.animationFrameFunc&&this.animationId&&window.cancelAnimationFrame(this.animationId),this.resizeObserver&&this.resizeObserver.disconnect(),this.config.dragMouseButton){case"middle":this.dragMouseButton=1,this.zone.runOutsideAngular((function(){return e.frameElementRef.nativeElement.removeEventListener("auxclick",e.preventDefault)}));break;case"right":this.zone.runOutsideAngular((function(){return document.removeEventListener("contextmenu",e.preventDefault)})),this.dragMouseButton=2}},e.prototype.isParentElement=function(e,t){for(var n=t.parentNode;null!==n;){if(n.classList&&n.classList.contains(e))return!0;n=n.parentNode}return!1},e.prototype.updateDOM=function(){if(this.animationParams){this.model.zoomLevel=this.base.zoomLevel+this.animationParams.deltaZoomLevel*this.animationParams.progress;var e=this.animationParams.panStepFunc(this.model.zoomLevel);if(this.model.pan.x=this.base.pan.x+e.x,this.model.pan.y=this.base.pan.y+e.y,this.config.keepInBounds){var t=this.getViewPosition({x:0,y:0}),n=this.getViewPosition({x:this.contentWidth,y:this.contentHeight});t.x>0&&(this.model.pan.x=0),t.y>0&&(this.model.pan.y=0),n.x<this.contentWidth&&(this.model.pan.x-=n.x-this.contentWidth),n.y<this.contentHeight&&(this.model.pan.y-=n.y-this.contentHeight)}}if(this.animationParams||this.isFirstSync){var i="transform-origin: 0 0; transform: "+("scale("+this.getCssScale(this.model.zoomLevel)+")")+";";this.zoomElementRef.nativeElement.setAttribute("style",i)}var o="translate3d("+this.model.pan.x+"px, "+this.model.pan.y+"px, 0)";this.panElementRef.nativeElement.style.transform=o},e.prototype.freeZoom=function(e,t){if(!this.isDragging){this.animationParams&&(this.animationParams=void 0),this.panVelocity&&(this.dragFinishing=!1,this.panVelocity=void 0);var n=this.model.pan.x,i=this.model.pan.y,o=this.scale,s=this.scale+t*this.config.freeMouseWheelFactor*this.scale;s=Math.max(this.minScale,Math.min(this.maxScale,s)),this.scale=s;var a={x:e.x-s/o*(e.x-n),y:e.y-s/o*(e.y-i)},r="translate3d("+a.x+"px, "+a.y+"px, 0)";this.panElementRef.nativeElement.style.transform=r;var l="transform-origin: 0 0; transform: "+("scale("+this.scale+")")+";";this.isChrome&&(this.willChangeNextFrame?l+=" will-change: auto;":l+=" will-change: transform;",this.willChangeNextFrame=!this.willChangeNextFrame),this.zoomElementRef.nativeElement.setAttribute("style",l),this.model.pan.x=a.x,this.model.pan.y=a.y,this.model.zoomLevel=this.getZoomLevel(this.scale),this.config.modelChanged.next(this.model),this.syncBaseToModel()}},e.prototype.isMobileDevice=function(){return void 0!==window.orientation||-1!==navigator.userAgent.indexOf("IEMobile")},e.prototype.syncBaseToModel=function(){this.base.pan.x=this.model.pan.x,this.base.pan.y=this.model.pan.y,this.base.zoomLevel=this.model.zoomLevel},e.prototype.length=function(e){return Math.sqrt(e.x*e.x+e.y*e.y)},e.prototype.getCentrePoint=function(){return{x:this.frameElementRef.nativeElement.offsetWidth/2,y:this.frameElementRef.nativeElement.offsetHeight/2}},e.prototype.getCssScale=function(e){return Math.pow(this.config.scalePerZoomLevel,e-this.config.neutralZoomLevel)},e.prototype.getZoomLevel=function(e){return Math.log10(e)/Math.log10(this.config.scalePerZoomLevel)+this.config.neutralZoomLevel},e.prototype.calcZoomToFit=function(e){var t=this.frameElementRef.nativeElement.offsetWidth,n=this.frameElementRef.nativeElement.offsetHeight,i=e.width,o=e.height,s=Math.min(t/i,n/o),a=this.getZoomLevel(s)*this.config.zoomToFitZoomLevelFactor,r=this.getCssScale(a);return{zoomLevel:a,pan:{x:-e.x*r+(t-i*r)/2,y:-e.y*r+(n-o*r)/2}}},e.prototype.zoomToFitModel=function(e,t){void 0===t&&(t=void 0),this.model.isPanning=!0,this.animateToTarget(e,t)},e.prototype.zoomToLevelAndPoint=function(e,t){this.changeZoomLevel(e,t)},e.prototype.zoomIn=function(e){void 0===e&&(e="lastPoint"),"lastPoint"===e?this.changeZoomLevel(this.base.zoomLevel+this.config.zoomButtonIncrement,this.lastClickPoint):"viewCenter"===e&&this.changeZoomLevel(this.base.zoomLevel+this.config.zoomButtonIncrement,this.getCentrePoint())},e.prototype.zoomOut=function(e){void 0===e&&(e="lastPoint"),"lastPoint"===e?this.changeZoomLevel(this.base.zoomLevel-this.config.zoomButtonIncrement,this.lastClickPoint):"viewCenter"===e&&this.changeZoomLevel(this.base.zoomLevel-this.config.zoomButtonIncrement,this.getCentrePoint())},e.prototype.startAnimation=function(){var e=this;this.lastTick=performance.now(),this.zone.runOutsideAngular((function(){return e.animationId=e.animationFrameFunc(e.animationTick)}))},e.prototype.getFrameElementOffset=function(){var e=this.frameElementRef.nativeElement.getBoundingClientRect();return{top:e.top+window.scrollY,left:e.left+window.scrollX}},e.prototype.onContentDimensionsChangeDetected=function(e){this.contentHeight=e[0].contentRect.height,this.contentWidth=e[0].contentRect.width},e.prototype.getViewPosition=function(e){var t,n;if(this.animationParams){t=this.getCssScale(this.base.zoomLevel+this.animationParams.deltaZoomLevel*this.animationParams.progress);var i=this.animationParams.panStepFunc(this.model.zoomLevel);n={x:this.base.pan.x+i.x,y:this.base.pan.y+i.y}}else t=this.getCssScale(this.base.zoomLevel),n=this.base.pan;return{x:e.x*t+n.x,y:e.y*t+n.y}},e.prototype.getModelPosition=function(e){var t=e,n=this.getCssScale(this.base.zoomLevel),i=this.base.pan;return{x:1/n*(t.x-i.x),y:1/n*(t.y-i.y)}},e.prototype.resetView=function(){this.config.initialZoomToFit?this.zoomToFit(this.config.initialZoomToFit):void 0!==this.config.initialPanX&&void 0!==this.config.initialPanY&&void 0!==this.config.initialZoomLevel?this.zoomToFitModel({zoomLevel:this.config.initialZoomLevel,pan:{x:this.config.initialPanX,y:this.config.initialPanY}}):(console.error("PanZoomComponent: resetView() could not reset view as some vars were not set. The culprits are either config.initialZoomLevel, config.initialPanX, or config.initialPanY. Or just set panzoomConfig.initialZoomToFit"),console.log("config.initialZoomLevel: "+this.config.initialZoomLevel),console.log("config.initialPanX: "+this.config.initialPanX),console.log("config.initialPanY: "+this.config.initialPanY))},e.prototype.zoomToFit=function(e,t){var n=this.calcZoomToFit(e);this.model.isPanning=!0,this.animateToTarget(n,t)},e.prototype.zoomInToPoint=function(e){this.changeZoomLevel(this.base.zoomLevel+this.config.zoomButtonIncrement,e)},e.prototype.zoomOutFromPoint=function(e){this.changeZoomLevel(this.base.zoomLevel-this.config.zoomButtonIncrement,e)},e.prototype.panToPoint=function(e,t){var n={pan:{x:this.frameWidth/2-e.x*this.scale,y:this.frameHeight/2-e.y*this.scale},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(n,t)},e.prototype.panToPointCurrentScale=function(e,t){var n={pan:{x:this.frameWidth/2-e.x,y:this.frameHeight/2-e.y},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(n,t)},e.prototype.panDelta=function(e,t){var n={pan:{x:this.base.pan.x-this.scale*e.x,y:this.base.pan.y-this.scale*e.y},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(n,t)},e.prototype.panDeltaAbsolute=function(e,t){var n={pan:{x:this.base.pan.x-e.x,y:this.base.pan.y-e.y},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(n,t)},e.prototype.panDeltaPercent=function(e,t){var n=0,i=0;0!==e.x&&(n=this.contentWidth*(e.x/100)*this.scale),0!==e.y&&(i=this.contentHeight*(e.y/100)*this.scale);var o={pan:{x:this.base.pan.x-n,y:this.base.pan.y-i},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(o,t)},e.prototype.centerContent=function(e){this.panToPoint({x:this.contentWidth/2,y:this.contentHeight/2},e)},e.prototype.centerX=function(e){var t={pan:{x:this.frameWidth/2-this.contentWidth/2*this.scale,y:this.base.pan.y},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(t,e)},e.prototype.centerY=function(e){var t={pan:{x:this.base.pan.x,y:this.frameHeight/2-this.contentHeight/2*this.scale},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(t,e)},e.prototype.centerTopLeftCorner=function(e){this.panToPoint({x:0,y:0},e)},e.prototype.centerBottomLeftCorner=function(e){this.panToPoint({x:0,y:this.contentHeight},e)},e.prototype.centerTopRightCorner=function(e){this.panToPoint({x:this.contentWidth,y:0},e)},e.prototype.centerBottomRightCorner=function(e){this.panToPoint({x:this.contentWidth,y:this.contentHeight},e)},e.prototype.updateContentDimensions=function(e,t){void 0!==t&&(this.contentHeight=t),void 0!==e&&(this.contentWidth=e)},e.prototype.detectContentDimensions=function(){var e=getComputedStyle(this.zoomElementRef.nativeElement);this.contentHeight=parseInt(e.getPropertyValue("height").split("px")[0]),this.contentWidth=parseInt(e.getPropertyValue("width").split("px")[0])},e.prototype.animateToTarget=function(e,t){var n=this;if(void 0===t&&(t=void 0),!this.animationParams){this.zoomLevelIsChanging=!1,this.base.zoomLevel!==e.zoomLevel&&(this.zoomLevelIsChanging=!0);var i=e.zoomLevel-this.base.zoomLevel,o=this.base.pan.x,s=this.base.pan.y;this.model.pan.x=this.base.pan.x,this.model.pan.y=this.base.pan.y;t=t?1e3*t:1e3*this.config.zoomStepDuration,this.animationParams={deltaZoomLevel:i,panStepFunc:function(t){return{x:-((o-e.pan.x)*n.animationParams.progress),y:-((s-e.pan.y)*n.animationParams.progress)}},duration:t,progress:0},this.startAnimation()}},e.prototype.changeZoomLevel=function(e,t){var n=this;if(!this.animationParams){this.zoomLevelIsChanging=!0,e=Math.max(this.minimumAllowedZoomLevel,e);var i=(e=Math.min(this.config.zoomLevels-1,e))-this.base.zoomLevel;if(i){var o=this.base.pan.x,s=this.base.pan.y,a=this.scale,r=t||this.getCentrePoint();this.animationParams={deltaZoomLevel:i,panStepFunc:function(e){var t=n.getCssScale(e),i=r.x-t/a*(r.x-o),l=r.y-t/a*(r.y-s);return{x:i-o,y:l-s}},duration:1e3*this.config.zoomStepDuration,progress:0},this.startAnimation()}}},e}();i.decorators=[{type:t.Component,args:[{selector:"pan-zoom",template:'<div\n #frameElement\n class="pan-zoom-frame">\n\n <div\n #panElement\n class="pan-element">\n\n <div\n #zoomElement\n class="zoom-element">\n\n <ng-content></ng-content>\n\n </div>\n\n </div>\n\n</div>\n\n<div\n #panzoomOverlay\n class="pan-zoom-overlay">\n</div>',styles:[".pan-zoom-frame{height:100%;overflow:hidden;position:relative;width:100%}.pan-element,.pan-zoom-overlay{left:0;position:absolute;top:0}.pan-zoom-overlay{bottom:0;display:none;opacity:0;pointer-events:none;right:0}"]}]}],i.ctorParameters=function(){return[{type:t.NgZone}]},i.propDecorators={frameElementRef:[{type:t.ViewChild,args:["frameElement",{static:!0}]}],panElementRef:[{type:t.ViewChild,args:["panElement",{static:!0}]}],zoomElementRef:[{type:t.ViewChild,args:["zoomElement",{static:!0}]}],panzoomOverlayRef:[{type:t.ViewChild,args:["panzoomOverlay",{static:!0}]}],config:[{type:t.Input}]};var o=function(){};o.decorators=[{type:t.NgModule,args:[{imports:[],declarations:[i],providers:[],exports:[i]}]}];var s=function(e){this.zoomLevels=5,this.neutralZoomLevel=2,this.scalePerZoomLevel=2,this.initialZoomLevel=this.neutralZoomLevel,this.friction=10,this.haltSpeed=100,this.initialPanX=0,this.initialPanY=0,this.keepInBounds=!1,this.keepInBoundsDragPullback=.7,this.keepInBoundsRestoreForce=.5,this.panOnClickDrag=!0,this.dragMouseButton="left",this.zoomButtonIncrement=1,this.zoomOnDoubleClick=!0,this.zoomOnMouseWheel=!0,this.invertMouseWheel=!1,this.zoomStepDuration=.2,this.zoomToFitZoomLevelFactor=.95,this.freeMouseWheel=!0,this.freeMouseWheelFactor=.08,this.modelChanged=new n.BehaviorSubject({isPanning:null,zoomLevel:null,pan:{x:null,y:null}}),this.api=new n.BehaviorSubject({model:null,config:null,changeZoomLevel:null,zoomIn:null,zoomOut:null,zoomToFit:null,getViewPosition:null,getModelPosition:null,resetView:null,panToPoint:null,panDelta:null,panDeltaPercent:null,panDeltaAbsolute:null,centerContent:null,centerX:null,centerY:null,centerTopLeft:null,centerTopRight:null,centerBottomLeft:null,centerBottomRight:null,updateContentDimensions:null,detectContentDimensions:null}),this.acceleratePan=!0,this.dynamicContentDimensions=!1,void 0!==e&&("zoomLevels"in e&&(this.zoomLevels=e.zoomLevels),"neutralZoomLevel"in e&&(this.neutralZoomLevel=e.neutralZoomLevel),"scalePerZoomLevel"in e&&(this.scalePerZoomLevel=e.scalePerZoomLevel),"initialZoomLevel"in e&&(this.initialZoomLevel=e.initialZoomLevel),"friction"in e&&(this.friction=e.friction),"haltSpeed"in e&&(this.haltSpeed=e.haltSpeed),"initialPanX"in e&&(this.initialPanX=e.initialPanX),"initialPanY"in e&&(this.initialPanY=e.initialPanY),"initialZoomToFit"in e&&(this.initialZoomToFit=e.initialZoomToFit),"keepInBounds"in e&&(this.keepInBounds=e.keepInBounds),"keepInBoundsDragPullback"in e&&(this.keepInBoundsDragPullback=e.keepInBoundsDragPullback),"keepInBoundsRestoreForce"in e&&(this.keepInBoundsRestoreForce=e.keepInBoundsRestoreForce),"panOnClickDrag"in e&&(this.panOnClickDrag=e.panOnClickDrag),"dragMouseButton"in e&&(this.dragMouseButton=e.dragMouseButton),"zoomButtonIncrement"in e&&(this.zoomButtonIncrement=e.zoomButtonIncrement),"zoomOnDoubleClick"in e&&(this.zoomOnDoubleClick=e.zoomOnDoubleClick),"zoomOnMouseWheel"in e&&(this.zoomOnMouseWheel=e.zoomOnMouseWheel),"invertMouseWheel"in e&&(this.invertMouseWheel=e.invertMouseWheel),"zoomStepDuration"in e&&(this.zoomStepDuration=e.zoomStepDuration),"zoomToFitZoomLevelFactor"in e&&(this.zoomToFitZoomLevelFactor=e.zoomToFitZoomLevelFactor),"freeMouseWheel"in e&&(this.freeMouseWheel=e.freeMouseWheel),"freeMouseWheelFactor"in e&&(this.freeMouseWheelFactor=e.freeMouseWheelFactor),this.keepInBounds&&0!==this.neutralZoomLevel&&console.warn("You have set keepInBounds to true and neutralZoomLevel to "+this.neutralZoomLevel+". Be aware that the zoom level cannot go below "+this.neutralZoomLevel),"noDragFromElementClass"in e&&(this.noDragFromElementClass=e.noDragFromElementClass),"acceleratePan"in e&&(this.acceleratePan=e.acceleratePan),"dynamicContentDimensions"in e&&(this.dynamicContentDimensions=e.dynamicContentDimensions))};e.NgxPanZoomModule=o,e.PanZoomComponent=i,e.PanZoomConfig=s,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs")):"function"==typeof define&&define.amd?define("ngx-panzoom",["exports","@angular/core","rxjs"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["ngx-panzoom"]={},e.ng.core,e.rxjs)}(this,(function(e,t,n){"use strict";var o=function(){function e(e){var t=this;this.zone=e,this.isDragging=!1,this.lastTick=0,this.isChrome=!1,this.willChangeNextFrame=!0,this.isMobile=!1,this.isFirstSync=!0,this.zoomLevelIsChanging=!1,this.dragFinishing=!1,this.onMouseWheel=function(e){if(e&&e.pageX&&e.pageY){var n=e.deltaY;if(t.config.zoomOnMouseWheel){if(t.animationParams)return;t.config.invertMouseWheel||(n=-n);var o=t.getFrameElementOffset(),i={x:e.pageX-o.left,y:e.pageY-o.top};t.lastClickPoint=i,t.config.freeMouseWheel?t.freeZoom(i,n):n<0?t.zoomInToPoint(i):n>0&&t.zoomOutFromPoint(i)}}},this.onMousedown=function(e){if(!t.config.noDragFromElementClass||!t.isParentElement(t.config.noDragFromElementClass,e.srcElement))return e.button===t.dragMouseButton||"touchstart"===e.type?("touchstart"!==e.type&&e.preventDefault(),t.dragFinishing=!1,t.panVelocity=void 0,t.config.panOnClickDrag&&(t.previousPosition={x:e.pageX,y:e.pageY},t.lastMouseEventTime=e.timeStamp,t.isDragging=!0,t.model.isPanning=!1,t.isMobile?(t.zone.runOutsideAngular((function(){return document.addEventListener("touchend",t.onTouchEnd,!1)})),t.zone.runOutsideAngular((function(){return document.addEventListener("touchmove",t.onTouchMove,{passive:!0,capture:!1})}))):(t.zone.runOutsideAngular((function(){return document.addEventListener("mousemove",t.onMouseMove,{passive:!0,capture:!1})})),t.zone.runOutsideAngular((function(){return document.addEventListener("mouseup",t.onMouseUp)})))),!1):void 0},this.onTouchStart=function(e){if(1!==e.touches.length){var n=e.touches[0].pageX-e.touches[1].pageX,o=e.touches[0].pageY-e.touches[1].pageY;t.previousPosition={length:n*n+o*o}}t.onMousedown(e)},this.onMouseMove=function(e){var n;if(e&&e.pageX&&e.pageY)n=e;else{if("touchmove"!==e.type||!e.touches[0].pageX||!e.touches[0].pageY)return;n={pageX:e.touches[0].pageX,pageY:e.touches[0].pageY}}var o=e.timeStamp,i=(o-t.lastMouseEventTime)/1e3;t.lastMouseEventTime=o;var s={x:n.pageX-t.previousPosition.x,y:n.pageY-t.previousPosition.y};if(t.config.keepInBounds){var a=t.getViewPosition({x:0,y:0}),r=t.getViewPosition({x:t.contentWidth,y:t.contentHeight});a.x>0&&s.x>0&&(s.x*=Math.min(1,Math.pow(a.x,-t.config.keepInBoundsDragPullback))),a.y>0&&s.y>0&&(s.y*=Math.min(1,Math.pow(a.y,-t.config.keepInBoundsDragPullback))),r.x<t.contentWidth&&s.x<0&&(s.x*=Math.min(1,Math.pow(t.contentWidth-r.x,-t.config.keepInBoundsDragPullback))),r.y<t.contentHeight&&s.y<0&&(s.y*=Math.min(1,Math.pow(t.contentHeight-r.y,-t.config.keepInBoundsDragPullback)))}var l=s.x||0,h=s.y||0;t.model.pan.x+=l,t.model.pan.y+=h,t.syncBaseToModel(),t.animationTick(),t.model.isPanning||(t.panzoomOverlayRef.nativeElement.style.display="block"),t.model.isPanning=!0;var m=s.x/i,c=s.y/i;t.panVelocity={x:Number.isFinite(m)?m:0,y:Number.isFinite(c)?c:0},t.previousPosition={x:n.pageX,y:n.pageY}},this.onTouchMove=function(e){if(1===e.touches.length)t.onMouseMove(e);else{var n=e.touches[0].pageX-e.touches[1].pageX,o=e.touches[0].pageY-e.touches[1].pageY,i=n*n+o*o,s=i-t.previousPosition.length;if(Math.abs(s)<100)return;var a=e.touches[1].pageX+n/2,r=e.touches[1].pageY+o/2,l=t.getFrameElementOffset(),h={x:a-l.left,y:r-l.top};t.lastClickPoint=h,t.changeZoomLevel(t.base.zoomLevel+1e-4*s,h),t.previousPosition={length:i}}},this.onMouseUp=function(e){if(e.button===t.dragMouseButton||"touchend"===e.type){"touchend"!==e.type&&e.preventDefault();var n=(e.timeStamp-t.lastMouseEventTime)/1e3;if(!t.panVelocity||0===t.panVelocity.x&&0===t.panVelocity.y)t.panVelocity=void 0,t.dragFinishing=!1,t.model.isPanning=!1,t.config.modelChanged.next(t.model),t.syncBaseToModel();else{var o=Math.max(0,-.2+Math.pow(n+1,-4));t.panVelocity.x*=o,t.panVelocity.y*=o,t.dragFinishing=!0,t.zone.runOutsideAngular((function(){return t.animationId=t.animationFrameFunc(t.animationTick)}))}t.isDragging=!1,t.isMobile?(t.zone.runOutsideAngular((function(){return document.removeEventListener("touchend",t.onTouchEnd)})),t.zone.runOutsideAngular((function(){return document.removeEventListener("touchmove",t.onTouchMove,{passive:!0,capture:!1})}))):(t.zone.runOutsideAngular((function(){return document.removeEventListener("mousemove",t.onMouseMove,{passive:!0,capture:!1})})),t.zone.runOutsideAngular((function(){return document.removeEventListener("mouseup",t.onMouseUp,{passive:!0})}))),t.panzoomOverlayRef.nativeElement.style.display="none"}},this.onTouchEnd=function(e){t.onMouseUp(e)},this.onDblClick=function(e){if(e.preventDefault(),t.config.zoomOnDoubleClick){var n=t.getFrameElementOffset(),o={x:e.pageX-n.left,y:e.pageY-n.top};t.lastClickPoint=o,t.zoomInToPoint(o)}},this.preventDefault=function(e){e.preventDefault()},this.animationTick=function(e){void 0===e&&(e=performance.now());var n=0;if(0!==t.lastTick&&(n=e-t.lastTick),t.lastTick=e,t.animationParams&&(t.animationParams.progress+=Math.abs(n/t.animationParams.duration),t.animationParams.progress>=1&&(t.animationParams.progress=1,t.updateDOM(),t.animationParams=void 0)),t.panVelocity&&t.dragFinishing)for(n>0&&(n/=1e3);n>0;){var o=Math.min(.02,n);if(n-=o,t.model.pan.x=t.model.pan.x+t.panVelocity.x*o,t.panVelocity.x=t.panVelocity.x*(1-t.config.friction*o),t.model.pan.y=t.model.pan.y+t.panVelocity.y*o,t.panVelocity.y=t.panVelocity.y*(1-t.config.friction*o),t.length(t.panVelocity)<=t.config.haltSpeed){t.panVelocity=void 0,t.dragFinishing=!1;break}}if(t.config.keepInBounds||t.dragFinishing){var i=t.getViewPosition({x:0,y:0}),s=t.getViewPosition({x:t.contentWidth,y:t.contentHeight});i.x>0&&(t.base.pan.x-=t.config.keepInBoundsRestoreForce*i.x),i.y>0&&(t.base.pan.y-=t.config.keepInBoundsRestoreForce*i.y),s.x<t.contentWidth&&(t.base.pan.x-=t.config.keepInBoundsRestoreForce*(s.x-t.contentWidth)),s.y<t.contentHeight&&(t.base.pan.y-=t.config.keepInBoundsRestoreForce*(s.y-t.contentHeight))}if(t.updateDOM(),t.config.modelChanged.next(t.model),t.animationParams||t.panVelocity&&t.dragFinishing)t.isChrome&&t.zoomLevelIsChanging&&(t.willChangeNextFrame?t.zoomElementRef.nativeElement.style.willChange="auto":t.zoomElementRef.nativeElement.style.willChange="transform",t.willChangeNextFrame=!t.willChangeNextFrame),t.animationFrameFunc(t.animationTick);else{if(t.panVelocity&&!t.dragFinishing)return;t.model.isPanning&&(t.model.isPanning=!1),t.syncBaseToModel(),t.config.modelChanged.next(t.model),t.scale=t.getCssScale(t.base.zoomLevel),t.willChangeNextFrame=!0,t.zoomElementRef.nativeElement.style.willChange="transform",t.zoomLevelIsChanging=!1,t.lastTick=0}}}return e.prototype.ngOnInit=function(){var e=this;if(this.config.initialZoomToFit?this.base=this.calcZoomToFit(this.config.initialZoomToFit):this.base={zoomLevel:this.config.initialZoomLevel,pan:{x:this.config.initialPanX,y:this.config.initialPanY}},this.model={zoomLevel:this.base.zoomLevel,isPanning:!1,pan:{x:this.base.pan.x,y:this.base.pan.y}},this.config.modelChanged.next(this.model),this.api={model:this.model,config:this.config,changeZoomLevel:this.zoomToLevelAndPoint.bind(this),zoomIn:this.zoomIn.bind(this),zoomOut:this.zoomOut.bind(this),zoomToFit:this.zoomToFit.bind(this),resetView:this.resetView.bind(this),getViewPosition:this.getViewPosition.bind(this),getModelPosition:this.getModelPosition.bind(this),panToPoint:this.panToPoint.bind(this),panDelta:this.panDelta.bind(this),panDeltaPercent:this.panDeltaPercent.bind(this),panDeltaAbsolute:this.panDeltaAbsolute.bind(this),centerContent:this.centerContent.bind(this),centerX:this.centerX.bind(this),centerY:this.centerY.bind(this),centerTopLeft:this.centerTopLeftCorner.bind(this),centerBottomLeft:this.centerBottomLeftCorner.bind(this),centerTopRight:this.centerTopRightCorner.bind(this),centerBottomRight:this.centerBottomRightCorner.bind(this),updateContentDimensions:this.updateContentDimensions.bind(this),detectContentDimensions:this.detectContentDimensions.bind(this)},this.config.api.next(this.api),this.config.freeMouseWheel){this.scale=this.getCssScale(this.config.initialZoomLevel);var t=this.config.zoomLevels-1;this.maxScale=this.getCssScale(t),this.minScale=this.getCssScale(0)}switch(this.minimumAllowedZoomLevel=0,this.config.keepInBounds&&(this.minimumAllowedZoomLevel=this.config.neutralZoomLevel,this.minScale=this.getCssScale(this.config.neutralZoomLevel)),this.zoomElementRef.nativeElement.style.willChange="transform",navigator.userAgent.search("Chrome")>=0&&(this.isChrome=!0,this.zoomElementRef.nativeElement.style.transform="translateZ(0)"),this.config.acceleratePan&&(this.panElementRef.nativeElement.style.willChange="transform",navigator.userAgent.search("Chrome")>=0&&(this.isChrome=!0,this.panElementRef.nativeElement.style.transform="translateZ(0)")),this.animationTick(),this.scale=this.getCssScale(this.base.zoomLevel),this.isFirstSync=!1,this.config.dragMouseButton){case"left":this.dragMouseButton=0;break;case"middle":this.dragMouseButton=1,this.zone.runOutsideAngular((function(){return e.frameElementRef.nativeElement.addEventListener("auxclick",e.preventDefault)}));break;case"right":this.zone.runOutsideAngular((function(){return document.addEventListener("contextmenu",e.preventDefault)})),this.dragMouseButton=2;break;default:this.dragMouseButton=0}},e.prototype.ngAfterViewInit=function(){var e=this;this.detectContentDimensions();var t=getComputedStyle(this.frameElementRef.nativeElement);this.frameHeight=parseInt(t.getPropertyValue("height").split("px")[0]),this.frameWidth=parseInt(t.getPropertyValue("width").split("px")[0]),this.zone.runOutsideAngular((function(){return e.animationFrameFunc=window.requestAnimationFrame})),this.config.dynamicContentDimensions&&(window.ResizeObserver?(this.resizeObserver=new window.ResizeObserver((function(t){return e.onContentDimensionsChangeDetected(t)})),this.zone.runOutsideAngular((function(){return e.resizeObserver.observe(e.zoomElementRef.nativeElement)}))):console.error("ResizeObserver API is not supported by this browser. See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver for info on browser compatibility.")),this.isMobileDevice()?(this.isMobile=!0,this.zone.runOutsideAngular((function(){return e.frameElementRef.nativeElement.addEventListener("touchstart",e.onTouchStart)}))):this.zone.runOutsideAngular((function(){e.frameElementRef.nativeElement.addEventListener("mousedown",e.onMousedown),e.frameElementRef.nativeElement.addEventListener("dblclick",e.onDblClick),e.frameElementRef.nativeElement.addEventListener("wheel",(function(t){return e.animationFrameFunc((function(){return e.onMouseWheel(t)}))}),{passive:!0})}))},e.prototype.ngOnDestroy=function(){var e=this;switch(this.isMobile?this.frameElementRef.nativeElement.removeEventListener("touchstart",this.onTouchStart):(this.frameElementRef.nativeElement.removeEventListener("mousedown",this.onMousedown),this.frameElementRef.nativeElement.removeEventListener("wheel",(function(t){return e.animationFrameFunc((function(){return e.onMouseWheel(t)}))}),{passive:!0}),this.frameElementRef.nativeElement.removeEventListener("dblclick",this.onDblClick)),this.animationFrameFunc&&this.animationId&&window.cancelAnimationFrame(this.animationId),this.resizeObserver&&this.resizeObserver.disconnect(),this.config.dragMouseButton){case"middle":this.dragMouseButton=1,this.zone.runOutsideAngular((function(){return e.frameElementRef.nativeElement.removeEventListener("auxclick",e.preventDefault)}));break;case"right":this.zone.runOutsideAngular((function(){return document.removeEventListener("contextmenu",e.preventDefault)})),this.dragMouseButton=2}},e.prototype.isParentElement=function(e,t){for(var n=t.parentNode;null!==n;){if(n.classList&&n.classList.contains(e))return!0;n=n.parentNode}return!1},e.prototype.updateDOM=function(){if(this.animationParams){this.model.zoomLevel=this.base.zoomLevel+this.animationParams.deltaZoomLevel*this.animationParams.progress;var e=this.animationParams.panStepFunc(this.model.zoomLevel);if(this.model.pan.x=this.base.pan.x+e.x,this.model.pan.y=this.base.pan.y+e.y,this.config.keepInBounds){var t=this.getViewPosition({x:0,y:0}),n=this.getViewPosition({x:this.contentWidth,y:this.contentHeight});t.x>0&&(this.model.pan.x=0),t.y>0&&(this.model.pan.y=0),n.x<this.contentWidth&&(this.model.pan.x-=n.x-this.contentWidth),n.y<this.contentHeight&&(this.model.pan.y-=n.y-this.contentHeight)}}if(this.animationParams||this.isFirstSync){var o="transform-origin: 0 0; transform: "+("scale("+this.getCssScale(this.model.zoomLevel)+")")+";";this.zoomElementRef.nativeElement.setAttribute("style",o)}var i="translate3d("+this.model.pan.x+"px, "+this.model.pan.y+"px, 0)";this.panElementRef.nativeElement.style.transform=i},e.prototype.freeZoom=function(e,t){if(!this.isDragging){this.animationParams&&(this.animationParams=void 0),this.panVelocity&&(this.dragFinishing=!1,this.panVelocity=void 0);var n=this.model.pan.x,o=this.model.pan.y,i=this.scale,s=this.scale+t*this.config.freeMouseWheelFactor*this.scale;s=Math.max(this.minScale,Math.min(this.maxScale,s)),this.scale=s;var a={x:e.x-s/i*(e.x-n),y:e.y-s/i*(e.y-o)},r="translate3d("+a.x+"px, "+a.y+"px, 0)";this.panElementRef.nativeElement.style.transform=r;var l="transform-origin: 0 0; transform: "+("scale("+this.scale+")")+";";this.isChrome&&(this.willChangeNextFrame?l+=" will-change: auto;":l+=" will-change: transform;",this.willChangeNextFrame=!this.willChangeNextFrame),this.zoomElementRef.nativeElement.setAttribute("style",l),this.model.pan.x=a.x,this.model.pan.y=a.y,this.model.zoomLevel=this.getZoomLevel(this.scale),this.config.modelChanged.next(this.model),this.syncBaseToModel()}},e.prototype.isMobileDevice=function(){return void 0!==window.orientation||-1!==navigator.userAgent.indexOf("IEMobile")},e.prototype.syncBaseToModel=function(){this.base.pan.x=this.model.pan.x,this.base.pan.y=this.model.pan.y,this.base.zoomLevel=this.model.zoomLevel},e.prototype.length=function(e){return Math.sqrt(e.x*e.x+e.y*e.y)},e.prototype.getCentrePoint=function(){return{x:this.frameElementRef.nativeElement.offsetWidth/2,y:this.frameElementRef.nativeElement.offsetHeight/2}},e.prototype.getCssScale=function(e){return Math.pow(this.config.scalePerZoomLevel,e-this.config.neutralZoomLevel)},e.prototype.getZoomLevel=function(e){return Math.log10(e)/Math.log10(this.config.scalePerZoomLevel)+this.config.neutralZoomLevel},e.prototype.calcZoomToFit=function(e){var t=this.frameElementRef.nativeElement.offsetWidth,n=this.frameElementRef.nativeElement.offsetHeight,o=e.width,i=e.height,s=Math.min(t/o,n/i),a=this.getZoomLevel(s)*this.config.zoomToFitZoomLevelFactor,r=this.getCssScale(a);return{zoomLevel:a,pan:{x:-e.x*r+(t-o*r)/2,y:-e.y*r+(n-i*r)/2}}},e.prototype.zoomToFitModel=function(e,t){void 0===t&&(t=void 0),this.model.isPanning=!0,this.animateToTarget(e,t)},e.prototype.zoomToLevelAndPoint=function(e,t){this.changeZoomLevel(e,t)},e.prototype.zoomIn=function(e){void 0===e&&(e="lastPoint"),"lastPoint"===e?this.changeZoomLevel(this.base.zoomLevel+this.config.zoomButtonIncrement,this.lastClickPoint):"viewCenter"===e&&this.changeZoomLevel(this.base.zoomLevel+this.config.zoomButtonIncrement,this.getCentrePoint())},e.prototype.zoomOut=function(e){void 0===e&&(e="lastPoint"),"lastPoint"===e?this.changeZoomLevel(this.base.zoomLevel-this.config.zoomButtonIncrement,this.lastClickPoint):"viewCenter"===e&&this.changeZoomLevel(this.base.zoomLevel-this.config.zoomButtonIncrement,this.getCentrePoint())},e.prototype.startAnimation=function(){var e=this;this.lastTick=performance.now(),this.zone.runOutsideAngular((function(){return e.animationId=e.animationFrameFunc(e.animationTick)}))},e.prototype.getFrameElementOffset=function(){var e=this.frameElementRef.nativeElement.getBoundingClientRect();return{top:e.top+window.scrollY,left:e.left+window.scrollX}},e.prototype.onContentDimensionsChangeDetected=function(e){this.contentHeight=e[0].contentRect.height,this.contentWidth=e[0].contentRect.width},e.prototype.getViewPosition=function(e){var t,n;if(this.animationParams){t=this.getCssScale(this.base.zoomLevel+this.animationParams.deltaZoomLevel*this.animationParams.progress);var o=this.animationParams.panStepFunc(this.model.zoomLevel);n={x:this.base.pan.x+o.x,y:this.base.pan.y+o.y}}else t=this.getCssScale(this.base.zoomLevel),n=this.base.pan;return{x:e.x*t+n.x,y:e.y*t+n.y}},e.prototype.getModelPosition=function(e){var t=e,n=this.getCssScale(this.base.zoomLevel),o=this.base.pan;return{x:1/n*(t.x-o.x),y:1/n*(t.y-o.y)}},e.prototype.resetView=function(){this.config.initialZoomToFit?this.zoomToFit(this.config.initialZoomToFit):void 0!==this.config.initialPanX&&void 0!==this.config.initialPanY&&void 0!==this.config.initialZoomLevel?this.zoomToFitModel({zoomLevel:this.config.initialZoomLevel,pan:{x:this.config.initialPanX,y:this.config.initialPanY}}):(console.error("PanZoomComponent: resetView() could not reset view as some vars were not set. The culprits are either config.initialZoomLevel, config.initialPanX, or config.initialPanY. Or just set panzoomConfig.initialZoomToFit"),console.log("config.initialZoomLevel: "+this.config.initialZoomLevel),console.log("config.initialPanX: "+this.config.initialPanX),console.log("config.initialPanY: "+this.config.initialPanY))},e.prototype.zoomToFit=function(e,t){var n=this.calcZoomToFit(e);this.model.isPanning=!0,this.animateToTarget(n,t)},e.prototype.zoomInToPoint=function(e){this.changeZoomLevel(this.base.zoomLevel+this.config.zoomButtonIncrement,e)},e.prototype.zoomOutFromPoint=function(e){this.changeZoomLevel(this.base.zoomLevel-this.config.zoomButtonIncrement,e)},e.prototype.panToPoint=function(e,t){var n={pan:{x:this.frameWidth/2-e.x*this.scale,y:this.frameHeight/2-e.y*this.scale},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(n,t)},e.prototype.panToPointCurrentScale=function(e,t){var n={pan:{x:this.frameWidth/2-e.x,y:this.frameHeight/2-e.y},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(n,t)},e.prototype.panDelta=function(e,t){var n={pan:{x:this.base.pan.x-this.scale*e.x,y:this.base.pan.y-this.scale*e.y},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(n,t)},e.prototype.panDeltaAbsolute=function(e,t){var n={pan:{x:this.base.pan.x-e.x,y:this.base.pan.y-e.y},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(n,t)},e.prototype.panDeltaPercent=function(e,t){var n=0,o=0;0!==e.x&&(n=this.contentWidth*(e.x/100)*this.scale),0!==e.y&&(o=this.contentHeight*(e.y/100)*this.scale);var i={pan:{x:this.base.pan.x-n,y:this.base.pan.y-o},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(i,t)},e.prototype.centerContent=function(e){this.panToPoint({x:this.contentWidth/2,y:this.contentHeight/2},e)},e.prototype.centerX=function(e){var t={pan:{x:this.frameWidth/2-this.contentWidth/2*this.scale,y:this.base.pan.y},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(t,e)},e.prototype.centerY=function(e){var t={pan:{x:this.base.pan.x,y:this.frameHeight/2-this.contentHeight/2*this.scale},zoomLevel:this.base.zoomLevel};this.model.isPanning=!0,this.animateToTarget(t,e)},e.prototype.centerTopLeftCorner=function(e){this.panToPoint({x:0,y:0},e)},e.prototype.centerBottomLeftCorner=function(e){this.panToPoint({x:0,y:this.contentHeight},e)},e.prototype.centerTopRightCorner=function(e){this.panToPoint({x:this.contentWidth,y:0},e)},e.prototype.centerBottomRightCorner=function(e){this.panToPoint({x:this.contentWidth,y:this.contentHeight},e)},e.prototype.updateContentDimensions=function(e,t){void 0!==t&&(this.contentHeight=t),void 0!==e&&(this.contentWidth=e)},e.prototype.detectContentDimensions=function(){var e=getComputedStyle(this.zoomElementRef.nativeElement);this.contentHeight=parseInt(e.getPropertyValue("height").split("px")[0]),this.contentWidth=parseInt(e.getPropertyValue("width").split("px")[0])},e.prototype.animateToTarget=function(e,t){var n=this;if(void 0===t&&(t=void 0),!this.animationParams){this.zoomLevelIsChanging=!1,this.base.zoomLevel!==e.zoomLevel&&(this.zoomLevelIsChanging=!0);var o=e.zoomLevel-this.base.zoomLevel,i=this.base.pan.x,s=this.base.pan.y;this.model.pan.x=this.base.pan.x,this.model.pan.y=this.base.pan.y;t=t?1e3*t:1e3*this.config.zoomStepDuration,this.animationParams={deltaZoomLevel:o,panStepFunc:function(t){return{x:-((i-e.pan.x)*n.animationParams.progress),y:-((s-e.pan.y)*n.animationParams.progress)}},duration:t,progress:0},this.startAnimation()}},e.prototype.changeZoomLevel=function(e,t){var n=this;if(!this.animationParams){this.zoomLevelIsChanging=!0,e=Math.max(this.minimumAllowedZoomLevel,e);var o=(e=Math.min(this.config.zoomLevels-1,e))-this.base.zoomLevel;if(o){var i=this.base.pan.x,s=this.base.pan.y,a=this.scale,r=t||this.getCentrePoint();this.animationParams={deltaZoomLevel:o,panStepFunc:function(e){var t=n.getCssScale(e),o=r.x-t/a*(r.x-i),l=r.y-t/a*(r.y-s);return{x:o-i,y:l-s}},duration:1e3*this.config.zoomStepDuration,progress:0},this.startAnimation()}}},e}();o.decorators=[{type:t.Component,args:[{selector:"pan-zoom",template:'<div\n #frameElement\n class="pan-zoom-frame">\n\n <div\n #panElement\n class="pan-element">\n\n <div\n #zoomElement\n class="zoom-element">\n\n <ng-content></ng-content>\n\n </div>\n\n </div>\n\n</div>\n\n<div\n #panzoomOverlay\n class="pan-zoom-overlay">\n</div>',styles:[".pan-zoom-frame{position:relative;width:100%;height:100%;overflow:hidden}.pan-element,.pan-zoom-overlay{position:absolute;left:0;top:0}.pan-zoom-overlay{display:none;right:0;bottom:0;opacity:0;pointer-events:none}"]}]}],o.ctorParameters=function(){return[{type:t.NgZone}]},o.propDecorators={frameElementRef:[{type:t.ViewChild,args:["frameElement",{static:!0}]}],panElementRef:[{type:t.ViewChild,args:["panElement",{static:!0}]}],zoomElementRef:[{type:t.ViewChild,args:["zoomElement",{static:!0}]}],panzoomOverlayRef:[{type:t.ViewChild,args:["panzoomOverlay",{static:!0}]}],config:[{type:t.Input}]};var i=function(){};i.decorators=[{type:t.NgModule,args:[{imports:[],declarations:[o],providers:[],exports:[o]}]}];var s=function(e){this.zoomLevels=5,this.neutralZoomLevel=2,this.scalePerZoomLevel=2,this.initialZoomLevel=this.neutralZoomLevel,this.friction=10,this.haltSpeed=100,this.initialPanX=0,this.initialPanY=0,this.keepInBounds=!1,this.keepInBoundsDragPullback=.7,this.keepInBoundsRestoreForce=.5,this.panOnClickDrag=!0,this.dragMouseButton="left",this.zoomButtonIncrement=1,this.zoomOnDoubleClick=!0,this.zoomOnMouseWheel=!0,this.invertMouseWheel=!1,this.zoomStepDuration=.2,this.zoomToFitZoomLevelFactor=.95,this.freeMouseWheel=!0,this.freeMouseWheelFactor=.08,this.modelChanged=new n.BehaviorSubject({isPanning:null,zoomLevel:null,pan:{x:null,y:null}}),this.api=new n.BehaviorSubject({model:null,config:null,changeZoomLevel:null,zoomIn:null,zoomOut:null,zoomToFit:null,getViewPosition:null,getModelPosition:null,resetView:null,panToPoint:null,panDelta:null,panDeltaPercent:null,panDeltaAbsolute:null,centerContent:null,centerX:null,centerY:null,centerTopLeft:null,centerTopRight:null,centerBottomLeft:null,centerBottomRight:null,updateContentDimensions:null,detectContentDimensions:null}),this.acceleratePan=!0,this.dynamicContentDimensions=!1,void 0!==e&&("zoomLevels"in e&&(this.zoomLevels=e.zoomLevels),"neutralZoomLevel"in e&&(this.neutralZoomLevel=e.neutralZoomLevel),"scalePerZoomLevel"in e&&(this.scalePerZoomLevel=e.scalePerZoomLevel),"initialZoomLevel"in e&&(this.initialZoomLevel=e.initialZoomLevel),"friction"in e&&(this.friction=e.friction),"haltSpeed"in e&&(this.haltSpeed=e.haltSpeed),"initialPanX"in e&&(this.initialPanX=e.initialPanX),"initialPanY"in e&&(this.initialPanY=e.initialPanY),"initialZoomToFit"in e&&(this.initialZoomToFit=e.initialZoomToFit),"keepInBounds"in e&&(this.keepInBounds=e.keepInBounds),"keepInBoundsDragPullback"in e&&(this.keepInBoundsDragPullback=e.keepInBoundsDragPullback),"keepInBoundsRestoreForce"in e&&(this.keepInBoundsRestoreForce=e.keepInBoundsRestoreForce),"panOnClickDrag"in e&&(this.panOnClickDrag=e.panOnClickDrag),"dragMouseButton"in e&&(this.dragMouseButton=e.dragMouseButton),"zoomButtonIncrement"in e&&(this.zoomButtonIncrement=e.zoomButtonIncrement),"zoomOnDoubleClick"in e&&(this.zoomOnDoubleClick=e.zoomOnDoubleClick),"zoomOnMouseWheel"in e&&(this.zoomOnMouseWheel=e.zoomOnMouseWheel),"invertMouseWheel"in e&&(this.invertMouseWheel=e.invertMouseWheel),"zoomStepDuration"in e&&(this.zoomStepDuration=e.zoomStepDuration),"zoomToFitZoomLevelFactor"in e&&(this.zoomToFitZoomLevelFactor=e.zoomToFitZoomLevelFactor),"freeMouseWheel"in e&&(this.freeMouseWheel=e.freeMouseWheel),"freeMouseWheelFactor"in e&&(this.freeMouseWheelFactor=e.freeMouseWheelFactor),this.keepInBounds&&0!==this.neutralZoomLevel&&console.warn("You have set keepInBounds to true and neutralZoomLevel to "+this.neutralZoomLevel+". Be aware that the zoom level cannot go below "+this.neutralZoomLevel),"noDragFromElementClass"in e&&(this.noDragFromElementClass=e.noDragFromElementClass),"acceleratePan"in e&&(this.acceleratePan=e.acceleratePan),"dynamicContentDimensions"in e&&(this.dynamicContentDimensions=e.dynamicContentDimensions))};e.NgxPanZoomModule=i,e.PanZoomComponent=o,e.PanZoomConfig=s,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-panzoom.umd.min.js.map

1

esm2015/lib/panzoom-api.js

@@ -0,1 +1,2 @@

export {};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuem9vbS1hcGkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtcGFuem9vbS9zcmMvbGliL3Bhbnpvb20tYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQYW5ab29tTW9kZWwgfSBmcm9tICcuL3Bhbnpvb20tbW9kZWwnO1xuaW1wb3J0IHsgUGFuWm9vbUNvbmZpZyB9IGZyb20gJy4vcGFuem9vbS1jb25maWcnO1xuaW1wb3J0IHsgUG9pbnQgfSBmcm9tICcuL3R5cGVzL3BvaW50JztcbmltcG9ydCB7IFJlY3QgfSBmcm9tICcuL3R5cGVzL3JlY3QnO1xuXG5leHBvcnQgdHlwZSBab29tVHlwZSA9ICdsYXN0UG9pbnQnIHwgJ3ZpZXdDZW50ZXInO1xuXG5leHBvcnQgaW50ZXJmYWNlIFBhblpvb21BUEkge1xuICBtb2RlbDogUGFuWm9vbU1vZGVsOyAvLyB0aGUgY3VycmVudCBtb2RlbFxuICBjb25maWc6IFBhblpvb21Db25maWc7IC8vIHRoZSBjdXJyZW50IHBhbnpvb29tIGNvbmZpZ3VyYXRpb25cbiAgY2hhbmdlWm9vbUxldmVsKGxldmVsOiBudW1iZXIsIGNsaWNrUG9pbnQ6IFBvaW50KTogdm9pZDtcbiAgem9vbUluKHpvb21UeXBlPzogWm9vbVR5cGUpOiB2b2lkO1xuICB6b29tT3V0KHpvb21UeXBlPzogWm9vbVR5cGUpOiB2b2lkO1xuICB6b29tVG9GaXQocmVjdGFuZ2xlOiBSZWN0LCBkdXJhdGlvbj86IG51bWJlcik6IHZvaWQ7XG4gIGdldFZpZXdQb3NpdGlvbihtb2RlbFBvc2l0aW9uOiBQb2ludCk6IFBvaW50O1xuICBnZXRNb2RlbFBvc2l0aW9uKHZpZXdQb3NpdGlvbjogUG9pbnQpOiBQb2ludDtcbiAgcmVzZXRWaWV3KCk6IHZvaWQ7XG4gIHBhblRvUG9pbnQocG9pbnQ6IFBvaW50LCBkdXJhdGlvbj86IG51bWJlcik6IHZvaWQ7XG4gIHBhbkRlbHRhKGRlbHRhOiBQb2ludCwgZHVyYXRpb24/OiBudW1iZXIpOiB2b2lkO1xuICBwYW5EZWx0YVBlcmNlbnQoZGVsdGFQZXJjZW50OiBQb2ludCwgZHVyYXRpb24/OiBudW1iZXIpOiB2b2lkO1xuICBwYW5EZWx0YUFic29sdXRlKGRlbHRhOiBQb2ludCwgZHVyYXRpb24/OiBudW1iZXIpOiB2b2lkO1xuICBjZW50ZXJDb250ZW50KGR1cmF0aW9uPzogbnVtYmVyKTogdm9pZDtcbiAgY2VudGVyWChkdXJhdGlvbj86IG51bWJlcik6IHZvaWQ7XG4gIGNlbnRlclkoZHVyYXRpb24/OiBudW1iZXIpOiB2b2lkO1xuICBjZW50ZXJUb3BMZWZ0KGR1cmF0aW9uPzogbnVtYmVyKTogdm9pZDtcbiAgY2VudGVyQm90dG9tTGVmdChkdXJhdGlvbj86IG51bWJlcik6IHZvaWQ7XG4gIGNlbnRlclRvcFJpZ2h0KGR1cmF0aW9uPzogbnVtYmVyKTogdm9pZDtcbiAgY2VudGVyQm90dG9tUmlnaHQoZHVyYXRpb24/OiBudW1iZXIpOiB2b2lkO1xuICB1cGRhdGVDb250ZW50RGltZW5zaW9ucyh3aWR0aD86IG51bWJlciwgaGVpZ2h0PzogbnVtYmVyKTogdm9pZDtcbiAgZGV0ZWN0Q29udGVudERpbWVuc2lvbnMoKTogdm9pZDtcbn1cbiJdfQ==

1

esm2015/lib/panzoom-model.js

@@ -0,1 +1,2 @@

export {};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuem9vbS1tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1wYW56b29tL3NyYy9saWIvcGFuem9vbS1tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUG9pbnQgfSBmcm9tICcuL3R5cGVzL3BvaW50JztcblxuZXhwb3J0IGludGVyZmFjZSBQYW5ab29tTW9kZWwge1xuICB6b29tTGV2ZWw6IG51bWJlcjtcbiAgaXNQYW5uaW5nPzogYm9vbGVhbjtcbiAgcGFuOiBQb2ludDtcbn1cbiJdfQ==

1

esm2015/lib/types/offset.js

@@ -0,1 +1,2 @@

export {};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2Zmc2V0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXBhbnpvb20vc3JjL2xpYi90eXBlcy9vZmZzZXQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgT2Zmc2V0IHtcbiAgdG9wOiBudW1iZXI7XG4gIGxlZnQ6IG51bWJlcjtcbn1cbiJdfQ==

1

esm2015/lib/types/panzoom-config-options.js

@@ -0,1 +1,2 @@

export {};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuem9vbS1jb25maWctb3B0aW9ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1wYW56b29tL3NyYy9saWIvdHlwZXMvcGFuem9vbS1jb25maWctb3B0aW9ucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVjdCB9IGZyb20gJy4vcmVjdCc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IFBhblpvb21Nb2RlbCB9IGZyb20gJy4uL3Bhbnpvb20tbW9kZWwnO1xuaW1wb3J0IHsgUGFuWm9vbUFQSSB9IGZyb20gJy4uL3Bhbnpvb20tYXBpJztcblxuZXhwb3J0IGludGVyZmFjZSBQYW5ab29tQ29uZmlnT3B0aW9ucyB7XG4gIHpvb21MZXZlbHM/OiBudW1iZXI7XG4gIG5ldXRyYWxab29tTGV2ZWw/OiBudW1iZXI7XG4gIHNjYWxlUGVyWm9vbUxldmVsPzogbnVtYmVyO1xuICBpbml0aWFsWm9vbUxldmVsPzogbnVtYmVyO1xuICBmcmljdGlvbj86IG51bWJlcjtcbiAgaGFsdFNwZWVkPzogbnVtYmVyO1xuICBpbml0aWFsUGFuWD86IG51bWJlcjtcbiAgaW5pdGlhbFBhblk/OiBudW1iZXI7XG4gIGluaXRpYWxab29tVG9GaXQ/OiBSZWN0O1xuICBrZWVwSW5Cb3VuZHM/OiBib29sZWFuO1xuICBrZWVwSW5Cb3VuZHNEcmFnUHVsbGJhY2s/OiBudW1iZXI7XG4gIGtlZXBJbkJvdW5kc1Jlc3RvcmVGb3JjZT86IG51bWJlcjtcbiAgcGFuT25DbGlja0RyYWc/OiBib29sZWFuO1xuICBkcmFnTW91c2VCdXR0b24/OiAnbGVmdCcgfCAnbWlkZGxlJyB8ICdyaWdodCc7XG4gIHpvb21CdXR0b25JbmNyZW1lbnQ/OiBudW1iZXI7XG4gIHpvb21PbkRvdWJsZUNsaWNrPzogYm9vbGVhbjtcbiAgem9vbU9uTW91c2VXaGVlbD86IGJvb2xlYW47XG4gIGludmVydE1vdXNlV2hlZWw/OiBib29sZWFuO1xuICB6b29tU3RlcER1cmF0aW9uPzogbnVtYmVyO1xuICB6b29tVG9GaXRab29tTGV2ZWxGYWN0b3I/OiBudW1iZXI7XG4gIGZyZWVNb3VzZVdoZWVsPzogYm9vbGVhbjtcbiAgZnJlZU1vdXNlV2hlZWxGYWN0b3I/OiBudW1iZXI7XG4gIG5vRHJhZ0Zyb21FbGVtZW50Q2xhc3M/OiBzdHJpbmc7XG4gIG1vZGVsQ2hhbmdlZD86IEJlaGF2aW9yU3ViamVjdDxQYW5ab29tTW9kZWw+O1xuICBhcGk/OiBCZWhhdmlvclN1YmplY3Q8UGFuWm9vbUFQST47XG4gIGFjY2VsZXJhdGVQYW4/OiBib29sZWFuO1xuICBkeW5hbWljQ29udGVudERpbWVuc2lvbnM/OiBib29sZWFuO1xufVxuIl19

1

esm2015/lib/types/point.js

@@ -0,1 +1,2 @@

export {};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9pbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtcGFuem9vbS9zcmMvbGliL3R5cGVzL3BvaW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIFBvaW50IHtcbiAgeDogbnVtYmVyO1xuICB5OiBudW1iZXI7XG59XG4iXX0=

1

esm2015/lib/types/rect.js

@@ -0,1 +1,2 @@

export {};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVjdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1wYW56b29tL3NyYy9saWIvdHlwZXMvcmVjdC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBSZWN0IHtcbiAgeDogbnVtYmVyO1xuICB5OiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG4gIGhlaWdodDogbnVtYmVyO1xufVxuIl19

34

fesm2015/ngx-panzoom.js

@@ -61,3 +61,5 @@ import { Component, NgZone, ViewChild, Input, NgModule } from '@angular/core';

if (event.button === this.dragMouseButton || event.type === 'touchstart') {
event.preventDefault();
if (event.type !== 'touchstart') {
event.preventDefault();
}
this.dragFinishing = false;

@@ -88,3 +90,3 @@ this.panVelocity = undefined;

// console.log('PanZoomComponent: onTouchStart(): touches:', event.touches.length);
event.preventDefault();
//event.preventDefault();
if (event.touches.length !== 1) {

@@ -109,3 +111,13 @@ // multiple touches, get ready for zooming

// Called when moving the mouse with the left button down
if (!(event && event.pageX && event.pageY)) {
let evWrap;
if (event && event.pageX && event.pageY) {
evWrap = event;
}
else if ((event.type === 'touchmove') && event.touches[0].pageX && event.touches[0].pageY) {
evWrap = {
pageX: event.touches[0].pageX,
pageY: event.touches[0].pageY
};
}
else {
return;

@@ -118,4 +130,4 @@ }

// a representation of how far each coordinate has moved since the last time it was moved
x: event.pageX - this.previousPosition.x,
y: event.pageY - this.previousPosition.y
x: evWrap.pageX - this.previousPosition.x,
y: evWrap.pageY - this.previousPosition.y
};

@@ -165,4 +177,4 @@ if (this.config.keepInBounds) {

this.previousPosition = {
x: event.pageX,
y: event.pageY
x: evWrap.pageX,
y: evWrap.pageY
};

@@ -212,6 +224,8 @@ };

// console.log('PanZoomComponent: onMouseup()', event);
if (event.button !== this.dragMouseButton) {
if ((event.button !== this.dragMouseButton) && (event.type !== 'touchend')) {
return;
}
event.preventDefault();
if (event.type !== 'touchend') {
event.preventDefault();
}
const now = event.timeStamp;

@@ -1077,3 +1091,3 @@ const timeSinceLastMouseEvent = (now - this.lastMouseEventTime) / 1000;

template: "<div\n #frameElement\n class=\"pan-zoom-frame\">\n\n <div\n #panElement\n class=\"pan-element\">\n\n <div\n #zoomElement\n class=\"zoom-element\">\n\n <ng-content></ng-content>\n\n </div>\n\n </div>\n\n</div>\n\n<div\n #panzoomOverlay\n class=\"pan-zoom-overlay\">\n</div>",
styles: [".pan-zoom-frame{height:100%;overflow:hidden;position:relative;width:100%}.pan-element,.pan-zoom-overlay{left:0;position:absolute;top:0}.pan-zoom-overlay{bottom:0;display:none;opacity:0;pointer-events:none;right:0}"]
styles: [".pan-zoom-frame{position:relative;width:100%;height:100%;overflow:hidden}.pan-element,.pan-zoom-overlay{position:absolute;left:0;top:0}.pan-zoom-overlay{display:none;right:0;bottom:0;opacity:0;pointer-events:none}"]
},] }

@@ -1080,0 +1094,0 @@ ];

3

lib/panzoom.component.d.ts
import { OnInit, AfterViewInit, OnDestroy, NgZone } from '@angular/core';
import { PanZoomConfig } from './panzoom-config';
export declare class PanZoomComponent implements OnInit, AfterViewInit, OnDestroy {

@@ -9,3 +10,3 @@ private zone;

private panzoomOverlayRef;
private config;
config: PanZoomConfig;
private base;

@@ -12,0 +13,0 @@ private model;

2

ngx-panzoom.metadata.json

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":4,"metadata":{"NgxPanZoomModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"imports":[],"declarations":[{"__symbolic":"reference","name":"PanZoomComponent"}],"providers":[],"exports":[{"__symbolic":"reference","name":"PanZoomComponent"}]}]}],"members":{}},"PanZoomComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"pan-zoom","template":"<div\n #frameElement\n class=\"pan-zoom-frame\">\n\n <div\n #panElement\n class=\"pan-element\">\n\n <div\n #zoomElement\n class=\"zoom-element\">\n\n <ng-content></ng-content>\n\n </div>\n\n </div>\n\n</div>\n\n<div\n #panzoomOverlay\n class=\"pan-zoom-overlay\">\n</div>","styles":[".pan-zoom-frame{height:100%;overflow:hidden;position:relative;width:100%}.pan-element,.pan-zoom-overlay{left:0;position:absolute;top:0}.pan-zoom-overlay{bottom:0;display:none;opacity:0;pointer-events:none;right:0}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":40,"character":30}]}],"frameElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":42,"character":3},"arguments":["frameElement",{"static":true}]}]}],"panElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":3},"arguments":["panElement",{"static":true}]}]}],"zoomElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":44,"character":3},"arguments":["zoomElement",{"static":true}]}]}],"panzoomOverlayRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":3},"arguments":["panzoomOverlay",{"static":true}]}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"isParentElement":[{"__symbolic":"method"}],"updateDOM":[{"__symbolic":"method"}],"freeZoom":[{"__symbolic":"method"}],"isMobileDevice":[{"__symbolic":"method"}],"syncBaseToModel":[{"__symbolic":"method"}],"length":[{"__symbolic":"method"}],"getCentrePoint":[{"__symbolic":"method"}],"getCssScale":[{"__symbolic":"method"}],"getZoomLevel":[{"__symbolic":"method"}],"calcZoomToFit":[{"__symbolic":"method"}],"zoomToFitModel":[{"__symbolic":"method"}],"zoomToLevelAndPoint":[{"__symbolic":"method"}],"zoomIn":[{"__symbolic":"method"}],"zoomOut":[{"__symbolic":"method"}],"startAnimation":[{"__symbolic":"method"}],"getFrameElementOffset":[{"__symbolic":"method"}],"onContentDimensionsChangeDetected":[{"__symbolic":"method"}],"getViewPosition":[{"__symbolic":"method"}],"getModelPosition":[{"__symbolic":"method"}],"resetView":[{"__symbolic":"method"}],"zoomToFit":[{"__symbolic":"method"}],"zoomInToPoint":[{"__symbolic":"method"}],"zoomOutFromPoint":[{"__symbolic":"method"}],"panToPoint":[{"__symbolic":"method"}],"panToPointCurrentScale":[{"__symbolic":"method"}],"panDelta":[{"__symbolic":"method"}],"panDeltaAbsolute":[{"__symbolic":"method"}],"panDeltaPercent":[{"__symbolic":"method"}],"centerContent":[{"__symbolic":"method"}],"centerX":[{"__symbolic":"method"}],"centerY":[{"__symbolic":"method"}],"centerTopLeftCorner":[{"__symbolic":"method"}],"centerBottomLeftCorner":[{"__symbolic":"method"}],"centerTopRightCorner":[{"__symbolic":"method"}],"centerBottomRightCorner":[{"__symbolic":"method"}],"updateContentDimensions":[{"__symbolic":"method"}],"detectContentDimensions":[{"__symbolic":"method"}],"animateToTarget":[{"__symbolic":"method"}],"changeZoomLevel":[{"__symbolic":"method"}]}},"ZoomType":{"__symbolic":"interface"},"PanZoomAPI":{"__symbolic":"interface"},"PanZoomModel":{"__symbolic":"interface"},"PanZoomConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"PanZoomConfigOptions"}]}]}},"PanZoomConfigOptions":{"__symbolic":"interface"}},"origins":{"NgxPanZoomModule":"./lib/panzoom.module","PanZoomComponent":"./lib/panzoom.component","ZoomType":"./lib/panzoom-api","PanZoomAPI":"./lib/panzoom-api","PanZoomModel":"./lib/panzoom-model","PanZoomConfig":"./lib/panzoom-config","PanZoomConfigOptions":"./lib/types/panzoom-config-options"},"importAs":"ngx-panzoom"}
{"__symbolic":"module","version":4,"metadata":{"NgxPanZoomModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"imports":[],"declarations":[{"__symbolic":"reference","name":"PanZoomComponent"}],"providers":[],"exports":[{"__symbolic":"reference","name":"PanZoomComponent"}]}]}],"members":{}},"PanZoomComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"pan-zoom","template":"<div\n #frameElement\n class=\"pan-zoom-frame\">\n\n <div\n #panElement\n class=\"pan-element\">\n\n <div\n #zoomElement\n class=\"zoom-element\">\n\n <ng-content></ng-content>\n\n </div>\n\n </div>\n\n</div>\n\n<div\n #panzoomOverlay\n class=\"pan-zoom-overlay\">\n</div>","styles":[".pan-zoom-frame{position:relative;width:100%;height:100%;overflow:hidden}.pan-element,.pan-zoom-overlay{position:absolute;left:0;top:0}.pan-zoom-overlay{display:none;right:0;bottom:0;opacity:0;pointer-events:none}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":40,"character":30}]}],"frameElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":42,"character":3},"arguments":["frameElement",{"static":true}]}]}],"panElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":3},"arguments":["panElement",{"static":true}]}]}],"zoomElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":44,"character":3},"arguments":["zoomElement",{"static":true}]}]}],"panzoomOverlayRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":3},"arguments":["panzoomOverlay",{"static":true}]}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"isParentElement":[{"__symbolic":"method"}],"updateDOM":[{"__symbolic":"method"}],"freeZoom":[{"__symbolic":"method"}],"isMobileDevice":[{"__symbolic":"method"}],"syncBaseToModel":[{"__symbolic":"method"}],"length":[{"__symbolic":"method"}],"getCentrePoint":[{"__symbolic":"method"}],"getCssScale":[{"__symbolic":"method"}],"getZoomLevel":[{"__symbolic":"method"}],"calcZoomToFit":[{"__symbolic":"method"}],"zoomToFitModel":[{"__symbolic":"method"}],"zoomToLevelAndPoint":[{"__symbolic":"method"}],"zoomIn":[{"__symbolic":"method"}],"zoomOut":[{"__symbolic":"method"}],"startAnimation":[{"__symbolic":"method"}],"getFrameElementOffset":[{"__symbolic":"method"}],"onContentDimensionsChangeDetected":[{"__symbolic":"method"}],"getViewPosition":[{"__symbolic":"method"}],"getModelPosition":[{"__symbolic":"method"}],"resetView":[{"__symbolic":"method"}],"zoomToFit":[{"__symbolic":"method"}],"zoomInToPoint":[{"__symbolic":"method"}],"zoomOutFromPoint":[{"__symbolic":"method"}],"panToPoint":[{"__symbolic":"method"}],"panToPointCurrentScale":[{"__symbolic":"method"}],"panDelta":[{"__symbolic":"method"}],"panDeltaAbsolute":[{"__symbolic":"method"}],"panDeltaPercent":[{"__symbolic":"method"}],"centerContent":[{"__symbolic":"method"}],"centerX":[{"__symbolic":"method"}],"centerY":[{"__symbolic":"method"}],"centerTopLeftCorner":[{"__symbolic":"method"}],"centerBottomLeftCorner":[{"__symbolic":"method"}],"centerTopRightCorner":[{"__symbolic":"method"}],"centerBottomRightCorner":[{"__symbolic":"method"}],"updateContentDimensions":[{"__symbolic":"method"}],"detectContentDimensions":[{"__symbolic":"method"}],"animateToTarget":[{"__symbolic":"method"}],"changeZoomLevel":[{"__symbolic":"method"}]}},"ZoomType":{"__symbolic":"interface"},"PanZoomAPI":{"__symbolic":"interface"},"PanZoomModel":{"__symbolic":"interface"},"PanZoomConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"PanZoomConfigOptions"}]}]}},"PanZoomConfigOptions":{"__symbolic":"interface"}},"origins":{"NgxPanZoomModule":"./lib/panzoom.module","PanZoomComponent":"./lib/panzoom.component","ZoomType":"./lib/panzoom-api","PanZoomAPI":"./lib/panzoom-api","PanZoomModel":"./lib/panzoom-model","PanZoomConfig":"./lib/panzoom-config","PanZoomConfigOptions":"./lib/types/panzoom-config-options"},"importAs":"ngx-panzoom"}

8

package.json

@@ -10,6 +10,6 @@ {

},
"version": "10.3.0",
"version": "11.0.0",
"peerDependencies": {
"@angular/common": ">=2.0.0 < 11.0.0",
"@angular/core": ">=2.0.0 < 11.0.0"
"@angular/common": ">=2.0.0 < 12.0.0",
"@angular/core": ">=2.0.0 < 12.0.0"
},

@@ -27,2 +27,2 @@ "dependencies": {

"sideEffects": false
}
}

37

README.md

@@ -7,14 +7,8 @@ # ngx-panzoom

This library deliberately parts with certain received Angular wisdom of using only Angular-ish methods to accomplish things. We use native event listeners. We apply CSS transforms directly to the DOM. But as this library doesn't fit the traditional Angular model, as its purpose is only to alter a certain part of the DOM using CSS transforms, without adding, moving or changing anything else, it has no impact on an application's state (except if the app consumes `modelChanged` observables). By using this approach, it is hoped that compatibility and performance will be maximised.
This library deliberately parts with certain received Angular wisdom of using only Angular-ish methods to accomplish things. We use native event listeners. We apply CSS transforms directly to the DOM. But as this library doesn't fit the traditional Angular model, as its purpose is only to apply CSS transforms to a certain part of the DOM, without moving or changing anything else, it has no impact on an application's state (except if the app consumes `modelChanged` observables). By using this approach, it is hoped that compatibility and performance will be maximised.
## A New Name
## This Module is on Life Support -- New Maintainer Needed!
Just after the release of 10.0, I belatedly decided that the 'ng2' thing had been around long enough, therefore `ng2-panzoom` will be no more, and `ngx-panzoom` will supersede it.
Doubtless many will have noticed that there has been little by way of support for this library as of late. Sadly, other life priorities just don't allow the time for it, and that doesn't seem likely to change in the near future. If there is some brave soul out there would like to take over the maintenance of this module, please do contact me and I'll be happy to discuss it with you.
I should've done this at the outset for the 10.0 release. I accuse myself of amateurism. Sorry.
1. `npm uninstall ng2-panzoom --save && npm install ngx-panzoom --save` .
2. Be sure to update your module import to reference `NgxPanZoomModule` instead of `Ng2PanZoomModule`
3. Update your import statements to reference `ngx-panzoom`.
## Demo

@@ -29,4 +23,10 @@

# Version 10 Changes
# Version 11.x Changes
- Updated for Angular 11.x.
- Improved single-touch pan handling (thanks to @dexterbt1).
- Fix for config input being marked as private.
# Version 10.x Changes
Version 10.x is compiled using Angular 10.x. Per the Angular guidance at the time of writing (`https://angular.io/guide/creating-libraries`), Ivy is not used for the NPM repo build. The following changes have been made:

@@ -37,2 +37,6 @@

- New API helper methods `centerContent()`, `centerTopLeft()`, `centerBottomLeft()`, `centerTopRight()`, `centerBottomRight()`, `centerX()`, and `centerY()`
- Config option `dynamicContentDimensions`, and new API methods `detectContentDimensions()` and `updateContentDimensions()` for when the content size isn't predictable.
- Added options `lastPoint` (default for backwards-compatibility) and `viewCenter` to `zoomIn()` and `zoomOut()` API methods. Defines which point to zoom to/from: either the centre of the screen or the last point zoomed to/from.
- Added proper TypeScript definitions for API methods.
- Several bug fixes.

@@ -52,4 +56,4 @@ ## Version 10 Potentially Breaking Changes

- A convenience method `resetView()` has been provided to animate the view back to its initial settings.
- The `zoomIn()` and `zoomOut()` API functions now zoom to the last zoomed point rather than the centre point, unless no zoom point has been defined yet.
- New API methods `panToPoint()`, `panDelta()`, `panDeltaPercent()`, and `panDeltaAbsolute()` have been added for panning the view.
- The `zoomIn()` and `zoomOut()` API functions can zoom to either the last zoomed point rather or to the view's centre point, depending on the value of `zoomType` (`lastPoint` or `viewCenter`).
- New API methods `panToPoint()`, `panDelta()`, `panDeltaPercent()`, `panDeltaAbsolute()`, and many others have been added.
- Many performance improvements.

@@ -172,2 +176,3 @@ - The widget has not been migrated from the original project, though this probably shouldn't be hard to do. Pull requests are welcome!

acceleratePan | boolean | true | Controls whether the pan frame will be hardware accelerated.
dynamicContentDimensions | boolean | false | If true, a ResizeObserver will be used to detect changes in the content dimensions. Useful if the content dimensions can't be predicted. Alternatively, the API methods `detectContentDimensions()` or `contentDimensionsChanged()` can also be used. ResizeObservers may not work in some older or mobile web browsers. See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver for info on browser compatibility.

@@ -184,5 +189,5 @@ ## API

- `zoomIn()` - This will zoom the view in to the last zoomed point by one zoom level.
- `zoomIn(zoomType: 'lastPoint' | 'viewCenter' = 'lastPoint')` - This will zoom the view in to either the last zoomed point (if _lastPoint_), or to the centre point of the view (_viewCenter_), by one zoom level. The default zoomType is `lastPoint`.
- `zoomOut()` - This will zoom the view out from the last zoomed point by one zoom level.
- `zoomOut(zoomType: 'lastPoint' | 'viewCenter' = 'lastPoint')` - This will zoom the view out from either the last zoomed point (if _lastPoint_), or from the centre point of the view (_viewCenter_), by one zoom level. The default zoomType is `lastPoint`.

@@ -219,3 +224,7 @@ - `zoomToFit(rectangle: Rect, [duration: number])` - Animates the view to focus on a rectangle of the underlying canvas. **duration** is how long the animation should take (in seconds), and is optional. **rectangle** is two coordinates on the canvas which the panZoom view is pan/zooming. See the below section on PanZoom Interfaces for its definition.

- `detectContentDimensions()` - Will trigger a one-time detection of the content dimensions.
- `updateContentDimensions([width: number], [height: number])` - Will update the content dimensions with the width and height values passed in. Either parameter is optional.
## PanZoom API Interfaces:

@@ -222,0 +231,0 @@ 

bundles/ngx-panzoom.umd.js

Sorry, the diff of this file is too big to display

bundles/ngx-panzoom.umd.js.map

Sorry, the diff of this file is not supported yet

bundles/ngx-panzoom.umd.min.js.map

Sorry, the diff of this file is not supported yet

esm2015/lib/panzoom.component.js

Sorry, the diff of this file is too big to display

fesm2015/ngx-panzoom.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc