srcissors.js

!function(i,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports?exports.srcissors=t(require("jquery")):i.srcissors=t(i.jQuery)}(self,i=>(()=>{"use strict";var t={914(t){t.exports=i}},e={};function s(i){var h=e[i];if(void 0!==h)return h.exports;var n=e[i]={exports:{}};return t[i](n,n.exports,s),n.exports}s.d=(i,t)=>{for(var e in t)s.o(t,e)&&!s.o(i,e)&&Object.defineProperty(i,e,{enumerable:!0,get:t[e]})},s.o=(i,t)=>Object.prototype.hasOwnProperty.call(i,t);var h={};s.d(h,{default:()=>d});var n=s(914);class o{constructor({onReady:i,img:t,opacity:e,outline:s}){this.onReady=i,this.img=t,this.opacity=e,this.outline=s,this.x=this.y=0,this.width=this.height=0,this.img.on("load",()=>{const i=this.img.width(),t=this.img.height();this.ratio=i/t,this.onReady({width:i,height:t}),this.img.show()})}setImage({url:i}){this.url=i,this.img.attr("src",this.url),this.outline&&this.setBackgroundImage({url:this.url})}setBackgroundImage({url:i}){if(this.opacity>0){const t=n("<img>").css({opacity:this.opacity}).attr("src",i);this.outline.append(t)}}reset(){this.url=void 0,this.x=this.y=0,this.width=this.height=0,this.img.attr("src",""),this.img.css({width:"",height:"",transform:""}),this.outline&&this.outline.css({transform:""}).html("")}setWidth(i){this.img.css({width:`${i}px`,height:"auto"});const t=i/this.ratio;this.updateImageDimensions({width:i,height:t})}setHeight(i){this.img.css({width:"auto",height:`${i}px`});const t=i*this.ratio;this.updateImageDimensions({width:t,height:i})}updateImageDimensions({width:i,height:t}){this.width=i,this.height=t,this.outline&&this.outline.css({width:`${this.width}px`,height:`${this.height}px`})}pan(i,t){this.x=i,this.y=t;const e=Math.round(this.x),s=Math.round(this.y);this.img.css({transform:`translate(-${e}px, -${s}px)`}),this.outline&&this.outline.css({transform:`translate(-${e}px, -${s}px)`})}}const a=function(i){return i.type.includes("touch")?{pageX:i.originalEvent.changedTouches[0].pageX,pageY:i.originalEvent.changedTouches[0].pageY}:{pageX:i.pageX,pageY:i.pageY}};class r{constructor({parent:i,view:t,horizontal:e,vertical:s,actions:h}){this.parent=i,this.view=t,this.doubleClickThreshold=300,h.pan&&this.pan(),h.zoomOnDoubleClick&&this.doubleClick(),h.resize&&this.resizeView({horizontal:h.resizeHorizontal,vertical:h.resizeVertical}),this.preventBrowserDragDrop(),this.responsiveArena()}pan(){const i=n(document);this.view.on("mousedown.srcissors touchstart.srcissors",t=>{const e={startX:this.parent.preview.x,startY:this.parent.preview.y};t.preventDefault(),i.on("mousemove.srcissors-pan touchmove.srcissors-pan",i=>{const{pageX:s,pageY:h}=a(i),{pageX:n,pageY:o}=a(t);e.dx=s-n,e.dy=h-o,this.parent.onPan(e)}).on("mouseup.srcissors-pan touchend.srcissors-pan",()=>{i.off("mouseup.srcissors-pan touchend.srcissors-pan"),i.off("mousemove.srcissors-pan touchmove.srcissors-pan"),null!=e.dx&&this.parent.onPanEnd()})})}doubleClick(){let i;this.view.on("mousedown.srcissors touchstart.srcissors",t=>{const e=(new Date).getTime();i&&i>e-this.doubleClickThreshold&&this.parent.onDoubleClick(a(t)),i=e})}preventBrowserDragDrop(){this.view.on("dragstart.srcissors",()=>!1)}resizeView({horizontal:i,vertical:t}){const e=n("<div>");e.addClass("resize-handler");let s=[];i&&(s=s.concat(["right","left"])),t&&(s=s.concat(["top","bottom"])),s.forEach(i=>{const t=e.clone();t.addClass(`resize-handler-${i}`),t.on("mousedown.srcissors touchstart.srcissors",this.getResizeMouseDown(i)),this.view.append(t)})}getResizeMouseDown(i){const t=n(document);return e=>{let{pageX:s,pageY:h}=a(e);e.stopPropagation(),t.on("mousemove.srcissors-resize touchmove.srcissors-resize",t=>{let e,n;const{pageX:o,pageY:r}=a(t);switch(i){case"top":case"bottom":n=r-h,"top"===i&&(n=-n),h=r;break;case"left":case"right":e=o-s,"left"===i&&(e=-e),s=o}this.parent.onResize({position:i,dx:e,dy:n})}).on("mouseup.srcissors-resize touchend.srcissors-resize",()=>{t.off("mouseup.srcissors-resize touchmove.srcissors-resize"),t.off("mousemove.srcissors-resize touchend.srcissors-resize"),this.parent.onResizeEnd({position:i})})}}responsiveArena(){}}class g{constructor({arena:i,view:t,img:e,outline:s,url:h,fixedWidth:a,fixedHeight:r,minViewWidth:g,minViewHeight:d,minViewRatio:m,maxViewRatio:l,originalSize:c,crop:w,zoomStep:u,maxArea:p,actions:v,minResolution:x,surroundingImageOpacity:f,showSurroundingImage:R}){this.onPreviewReady=this.onPreviewReady.bind(this),this.arena=i,this.view=t,this.img=e,this.outline=s,this.fixedWidth=a,this.fixedHeight=r,this.minViewWidth=g,this.minViewHeight=d,this.minViewRatio=m,this.maxViewRatio=l,this.originalSize=c,this.actions=v,this.minResolution=x,this.surroundingImageOpacity=f,this.loadingCssClass="crop-view--is-loading",this.panningCssClass="crop-view--is-panning",this.outlineCssClass="crop-outline--active",this.isPanning=!1,this.initialCrop=w,this.loadEvent=n.Callbacks(),this.changeEvent=n.Callbacks(),this.initializeReadyState(),this.zoomInStep=u,this.zoomOutStep=1/this.zoomInStep,this.arenaWidth=this.arena.width(),this.arenaHeight=this.arena.height(),p&&(this.maxArea=this.arenaWidth*this.arenaHeight*p),this.outline&&this.setSurroundingImageVisibility(R),this.preview=new o({onReady:this.onPreviewReady,img:this.img,outline:this.outline,opacity:this.surroundingImageOpacity}),this.setImage(h)}initializeReadyState(){this.isReady=!1,null!=this.readyEvent&&this.readyEvent.empty(),this.readyEvent=n.Callbacks("memory once")}setImage(i){i!==this.preview.url&&(this.isInitialized&&this.preview.reset(),this.initializeReadyState(),this.view.addClass(this.loadingCssClass),this.preview.setImage({url:i}))}setSurroundingImageVisibility(i){this.surroundingImageOpacity=parseFloat(this.surroundingImageOpacity||.2),"always"===i?this.outline.css("opacity",1):"panning"===i?this.outline.css("opacity",null):(this.outline.css("opacity",0),this.surroundingImageOpacity=0)}reset(){this.isReady&&(this.resize({width:this.imageWidth,height:this.imageHeight}),this.zoomAllOut())}onPreviewReady(i){this.checkRatio(i);const{width:t,height:e}=this.originalSize||i;let s;this.preview.updateImageDimensions({width:t,height:e}),this.isInitialized||(this.events=new r({parent:this,view:this.view,actions:this.actions})),this.imageWidth=t,this.imageHeight=e,this.imageRatio=this.imageWidth/this.imageHeight;const h=this.imageWidth*this.imageHeight;if(this.minResolution&&this.minResolution>h&&delete this.minResolution,this.minResolution){const i=this.minResolution/(this.imageHeight*this.imageHeight);(!this.minViewRatio||this.minViewRatio<i)&&(this.minViewRatio=i);const t=this.imageWidth*this.imageWidth/this.minResolution;(!this.maxViewRatio||this.maxViewRatio>t)&&(this.maxViewRatio=t)}this.calcMaxMinDimensions(),this.fixedWidth&&(s="width"),this.fixedHeight&&(s="height"),this.setViewDimensions({width:this.imageWidth,height:this.imageHeight,keepDimension:s}),this.isReady=!0,this.view.removeClass(this.loadingCssClass),this.isInitialized||null==this.initialCrop?(this.zoomAllOut(),this.center()):this.setCrop(this.initialCrop),this.isInitialized=!0,this.readyEvent.fire(),this.loadEvent.fire()}setCrop({x:i,y:t,width:e,height:s}){if(!this.isReady)return void this.on("ready",()=>this.setCrop({x:i,y:t,width:e,height:s}));this.resize({width:e,height:s});const h=this.viewWidth/e,n=this.imageWidth*h;this.zoom({width:n}),this.pan({x:i*h,y:t*h})}getCrop(){const i=this.preview.width/this.imageWidth,t={x:this.preview.x/i,y:this.preview.y/i,width:this.viewWidth/i,height:this.viewHeight/i};return this.roundCrop(t),this.validateCrop(t),t}roundCrop(i){for(const t in i){const e=i[t];i[t]=Math.round(e)}}validateCrop(i){const{x:t,y:e,width:s,height:h}=i;return t<0&&(i.x=0),e<0&&(i.y=0),t+s>this.imageWidth&&(i.width=this.imageWidth-t),e+h>this.imageHeight&&(i.height=this.imageHeight-e),i}setRatio(i,t){let e,s;if(this.isReady)return i=this.enforceValidRatio(i),"height"===t?(e=this.viewHeight,s=e*i):(s=this.viewWidth,e=s/i),this.resizeFocusPoint=this.getFocusPoint(),this.resize({width:s,height:e});this.on("ready",()=>this.setRatio(i,t))}onPan(i){this.isPanning||(this.isPanning=!0,this.arena.addClass(this.panningCssClass),this.outline.addClass(this.outlineCssClass));const t=i.startX-i.dx,e=i.startY-i.dy;this.pan({x:t,y:e})}onPanEnd(){return this.isPanning=!1,this.arena.removeClass(this.panningCssClass),this.outline.removeClass(this.outlineCssClass)}onDoubleClick({pageX:i,pageY:t}){const{left:e,top:s}=this.view[0].getBoundingClientRect(),h=i-e,n=t-s;this.zoomIn({viewX:h,viewY:n})}onResize({position:i,dx:t,dy:e}){this.isResizing||(this.isResizing=!0,this.resizeFocusPoint=this.getFocusPoint()),["top","bottom"].includes(i)?(e*=2,this.resize({width:this.viewWidth,height:this.viewHeight+e,keepDimension:"height"})):["left","right"].includes(i)&&(t*=2,this.resize({width:this.viewWidth+t,height:this.viewHeight,keepDimension:"width"}))}onResizeEnd(){this.isResizing=!1,this.resizeFocusPoint=void 0}resize({width:i,height:t,keepDimension:e}){this.setViewDimensions({width:i,height:t,keepDimension:e}),this.resizeFocusPoint&&(this.resizeFocusPoint.viewX=this.viewWidth/2,this.resizeFocusPoint.viewY=this.viewHeight/2),this.zoom({width:this.preview.width,height:this.preview.height,focusPoint:this.resizeFocusPoint})}setViewDimensions({width:i,height:t,keepDimension:e}){if(this.maxArea&&({width:i,height:t}=this.enforceMaxArea({width:i,height:t,keepDimension:e})),({width:i,height:t}=this.enforceViewDimensions({width:i,height:t,keepDimension:e})),this.view.css({width:i,height:t}),this.viewWidth=i,this.viewHeight=t,this.viewRatio=i/t,this.minResolution){const i=Math.sqrt(this.minResolution*this.viewRatio),t=Math.sqrt(this.minResolution/this.viewRatio);this.maxImageWidth=this.viewWidth/i*this.imageWidth,this.maxImageHeight=this.viewHeight/t*this.imageHeight}this.fireChange()}zoomAllOut(){this.isWidthRestricting()?this.zoom({width:this.viewWidth}):this.zoom({height:this.viewHeight})}zoomIn(i){null==i&&(i={}),this.isWidthRestricting()?i.width=this.preview.width*this.zoomInStep:i.height=this.preview.height*this.zoomInStep,this.zoom(i)}zoomOut(i){null==i&&(i={}),this.isWidthRestricting()?i.width=this.preview.width*this.zoomOutStep:i.height=this.preview.height*this.zoomOutStep,this.zoom(i)}zoom({width:i,height:t,viewX:e,viewY:s,focusPoint:h}){null==h&&(h=this.getFocusPoint({viewX:e,viewY:s})),({width:i,height:t}=this.enforceZoom({width:i,height:t})),null!=i?(this.preview.setWidth(i),this.fireChange()):null!=t&&(this.preview.setHeight(t),this.fireChange()),this.focus(h)}getFocusPoint(i){null==i&&(i={});let{viewX:t,viewY:e}=i;null==t&&(t=this.viewWidth/2),null==e&&(e=this.viewHeight/2);const s=this.preview.x+t,h=this.preview.y+e;return{percentX:s/this.preview.width,percentY:h/this.preview.height,viewX:t,viewY:e}}focus({percentX:i,percentY:t,viewX:e,viewY:s}){let h=this.preview.width*i,n=this.preview.height*t;h-=e,n-=s,this.pan({x:h,y:n})}center(){const i=(this.preview.width-this.viewWidth)/2,t=(this.preview.height-this.viewHeight)/2;this.pan({x:i,y:t})}pan(i){i=this.enforceXy(i),this.preview.pan(i.x,i.y),this.fireChange()}enforceXy({x:i,y:t}){return i>this.preview.width-this.viewWidth&&(i=this.preview.width-this.viewWidth),i<0&&(i=0),t>this.preview.height-this.viewHeight&&(t=this.preview.height-this.viewHeight),t<0&&(t=0),{x:i,y:t}}enforceZoom({width:i,height:t}){return null!=i&&this.maxImageWidth&&i>this.maxImageWidth?{width:this.maxImageWidth}:null!=i&&i<this.viewWidth?{width:this.viewWidth}:null!=t&&this.maxImageHeight&&t>this.maxImageHeight?{height:this.maxImageHeight}:null!=t&&t<this.viewHeight?{height:this.viewHeight}:{width:i,height:t}}calcMaxMinDimensions(){this.maxWidth=this.min([this.arenaWidth,this.imageWidth]),this.maxHeight=this.min([this.arenaHeight,this.imageHeight]),this.minWidth=this.minViewWidth||0,this.minHeight=this.minViewHeight||0,this.fixedWidth&&(this.maxWidth=this.minWidth=this.fixedWidth),this.fixedHeight&&(this.maxHeight=this.minHeight=this.fixedHeight)}areDimensionsValid({width:i,height:t,keepDimension:e}){const s=i/t;return!(i<this.minWidth||i>this.maxWidth||t<this.minHeight||t>this.maxHeight||s<this.minViewRatio||s>this.maxViewRatio)}isValidRatio(i){return!(i<this.minViewRatio||i>this.maxViewRatio)}enforceValidRatio(i){return i<this.minViewRatio?this.minViewRatio:i>this.maxViewRatio?this.maxViewRatio:i}enforceViewDimensions({width:i,height:t,keepDimension:e}){let s,h,n;return i<this.minWidth&&(h=this.minWidth),i>this.maxWidth&&(h=this.maxWidth),t<this.minHeight&&(s=this.minHeight),t>this.maxHeight&&(s=this.maxHeight),e?(h&&(i=h),s&&(t=s),n=i/t,this.isValidRatio(n)||(n=this.enforceValidRatio(n),({width:i,height:t}=this.getRatioBox({ratio:n,width:i,height:t,keepDimension:e})),(i>this.arenaWidth||t>this.arenaHeight)&&({width:i,height:t}=this.centerAlign(this.maxWidth,this.maxHeight,n)))):(h||s)&&(n=this.enforceValidRatio(i/t),({width:i,height:t}=this.centerAlign(this.maxWidth,this.maxHeight,n))),{width:i,height:t}}enforceMaxArea({width:i,height:t,keepDimension:e}){let s=i/t;return"width"===e?s=i/(t=this.maxArea/i):"height"===e?s=(i=this.maxArea/t)/t:t=(i=Math.sqrt(this.maxArea*s))/s,this.isValidRatio(s)||(s=this.enforceValidRatio(s),t=(i=Math.sqrt(this.maxArea*s))/s),{width:i,height:t}}checkRatio(i){if(this.originalSize){const t=this.originalSize.width/this.originalSize.height,e=i.width/i.height,s=(e-t)/t*100;if(Math.abs(s)>1)throw new Error(`srcissors: Displayed image has a different image ratio than the one configured in 'originalRatio': ${t} vs ${e}`)}}isWidthRestricting(){return this.viewRatio>=this.imageRatio}getRatioBox({ratio:i,width:t,height:e,keepDimension:s}){return"width"===s||null==e?e=t/i:"height"===s||null==t?t=e*i:e=t/i,{width:t,height:e}}centerAlign(i,t,e){let s,h,n,o;return i/t>e?(h=t*e,n=(i-h)/2):(s=i/e,o=(t-s)/2),{x:n||0,y:o||0,width:h||i,height:s||t}}min(i){let t=i[0];for(const e of i)e<t&&(t=e);return t}on(i,t){return this[`${i}Event`].add(t)}off(i,t){return this[`${i}Event`].remove(t)}fireChange(){null==this.changeDispatch&&(this.changeDispatch=setTimeout(()=>{this.changeDispatch=void 0,this.changeEvent.fire(this.getCrop())},0))}debug(){const i=i=>Math.round(10*i)/10,t={arena:`${i(this.arenaWidth)}x${i(this.arenaHeight)}`,view:`${i(this.viewWidth)}x${i(this.viewHeight)}`,image:`${i(this.imageWidth)}x${i(this.imageHeight)}`,preview:`${i(this.preview.width)}x${i(this.preview.height)}`,previewXy:`${i(this.preview.x)}x${i(this.preview.y)}`};return console.log(t),t}}const d={new({arena:i,url:t,fixedWidth:e,fixedHeight:s,minWidth:h,minHeight:o,minRatio:a,maxRatio:r,maxArea:d,originalSize:m,zoomStep:l,crop:c,actions:w,minResolution:u,surroundingImageOpacity:p,showSurroundingImage:v}){const x=(i=n(i)).find(".crop-view"),f=x.find(".crop-preview"),R=n("<img>");f.append(R);let y=x.find(".crop-outline");y.length||(y=void 0);const z={pan:!0,zoomOnDoubleClick:!0,resize:!0,resizeHorizontal:!e,resizeVertical:!s};return n.extend(z,w),null==l&&(l=1.25),null==h&&(h=50),null==o&&(o=50),new g({url:t,crop:c,arena:i,view:x,img:R,outline:y,showSurroundingImage:v,surroundingImageOpacity:p,fixedWidth:e,fixedHeight:s,minViewWidth:h,minViewHeight:o,minViewRatio:a,maxViewRatio:r,maxArea:d,originalSize:m,zoomStep:l,actions:z,minResolution:u})}};return h.default})());
//# sourceMappingURL=srcissors.js.map