https://adloura.com/chunk-5PJ6KTEB.js

1import{Aa as M,G as l,H as p,S as d,T as b,Va as F,X as E,aa as O,da as v,db as I,ea as r,fa as s,ga as S,ma as C,na as g,oa as y,sa as k,ta as P,ua as V,wa as H,xa as W,za as h}from"./chunk-LWDTIRCY.js";var X=["cv"];function Y(m,c){if(m&1){let x=C();r(0,"button",15),g("click",function(){let e=l(x).$implicit,i=y();return p(i.setAspect(e.ratio))}),h(1),s()}if(m&2){let x=c.$implicit,t=y();W("on",x.ratio===t.ratio),d(),M(x.label)}}var j=(()=>{let c=class c{constructor(){this.src="",this.outputFormat="jpeg",this.cropped=new b,this.cancelled=new b,this.aspects=[{label:"9:16",ratio:9/16},{label:"1:1",ratio:1},{label:"16:9",ratio:16/9}],this.ratio=9/16,this.stageW=270,this.stageH=480,this.img=new Image,this.ready=!1,this.zoom=1,this.offX=0,this.offY=0,this.dragging=!1,this.lastX=0,this.lastY=0,this.onMove=t=>{if(!this.dragging)return;t.preventDefault?.();let e=this.pt(t);this.offX+=e.x-this.lastX,this.offY+=e.y-this.lastY,this.lastX=e.x,this.lastY=e.y,this.clamp(),this.draw()},this.onUp=()=>{this.dragging=!1}}ngAfterViewInit(){this.img.onload=()=>{this.ready=!0,this.recomputeStage(),this.resetView(),this.draw()},this.img.src=this.src,window.addEventListener("mousemove",this.onMove),window.addEventListener("mouseup",this.onUp),window.addEventListener("touchmove",this.onMove,{passive:!1}),window.addEventListener("touchend",this.onUp)}ngOnDestroy(){window.removeEventListener("mousemove",this.onMove),window.removeEventListener("mouseup",this.onUp),window.removeEventListener("touchmove",this.onMove),window.removeEventListener("touchend",this.onUp)}setAspect(t){this.ratio=t,this.recomputeStage(),this.resetView(),this.draw()}onZoom(t){let e=parseFloat(t.target.value);this.zoom=Number.isFinite(e)?Math.max(this.minZoom,e):this.minZoom,this.clamp(),this.draw()}recomputeStage(){let i=270,n=270/this.ratio;n>480&&(n=480,i=480*this.ratio),this.stageW=Math.round(i),this.stageH=Math.round(n)}baseScale(){return this.img.width?Math.max(this.stageW/this.img.width,this.stageH/this.img.height):1}containScale(){return this.img.width?Math.min(this.stageW/this.img.width,this.stageH/this.img.height):1}get minZoom(){let t=this.baseScale();return t?Math.min(1,Math.floor(this.containScale()/t*100)/100):1}get isFullyVisible(){return this.zoom<=this.minZoom+.005}resetView(){this.zoom=this.minZoom,this.offX=0,this.offY=0}drawScale(){return this.baseScale()*this.zoom}clamp(){let t=this.drawScale(),e=this.img.width*t,i=this.img.height*t,n=Math.max(0,(e-this.stageW)/2),o=Math.max(0,(i-this.stageH)/2);this.offX=Math.min(n,Math.max(-n,this.offX)),this.offY=Math.min(o,Math.max(-o,this.offY))}draw(){if(!this.ready||!this.cv)return;let t=this.cv.nativeElement.getContext("2d");t.clearRect(0,0,this.stageW,this.stageH),this.outputFormat!=="png"&&(t.fillStyle="#ffffff",t.fillRect(0,0,this.stageW,this.stageH));let e=this.drawScale(),i=this.img.width*e,n=this.img.height*e,o=(this.stageW-i)/2+this.offX,a=(this.stageH-n)/2+this.offY;t.drawImage(this.img,o,a,i,n)}pt(t){let e=t.touches?t.touches[0]:t;return{x:e.clientX,y:e.clientY}}onDown(t){t.preventDefault?.(),this.dragging=!0;let e=this.pt(t);this.lastX=e.x,this.lastY=e.y}apply(){if(!this.ready){this.cancelled.emit();return}let t=this.drawScale(),e=(this.stageW-this.img.width*t)/2+this.offX,i=(this.stageH-this.img.height*t)/2+this.offY,n=-e/t,o=-i/t,a=this.stageW/t,z=this.stageH/t,u,f;this.ratio>=1?(u=1280,f=Math.round(1280/this.ratio)):(f=1280,u=Math.round(1280*this.ratio));let w=document.createElement("canvas");w.width=u,w.height=f;let _=w.getContext("2d");this.outputFormat!=="png"&&(_.fillStyle="#ffffff",_.fillRect(0,0,u,f)),_.drawImage(this.img,n,o,a,z,0,0,u,f),this.cropped.emit(this.outputFormat==="png"?w.toDataURL("image/png"):w.toDataURL("image/jpeg",.92))}};c.\u0275fac=function(e){return new(e||c)},c.\u0275cmp=E({type:c,selectors:[["app-image-cropper"]],viewQuery:function(e,i){if(e&1&&k(X,5),e&2){let n;P(n=V())&&(i.cv=n.first)}},inputs:{src:"src",outputFormat:"outputFormat"},outputs:{cropped:"cropped",cancelled:"cancelled"},decls:23,vars:10,consts:[["cv",""],[1,"cr-backdrop"],["role","dialog","aria-modal","true","aria-label","Frame your product",1,"cr-modal"],[1,"cr-title"],[1,"cr-aspects"],["class","cr-chip",3,"on","click",4,"ngFor","ngForOf"],[1,"cr-stage",3,"mousedown","touchstart"],[3,"width","height"],[1,"cr-grid"],[1,"cr-zoom"],["type","range","max","3","step","0.01","aria-label","Zoom",3,"input","min","value"],[1,"cr-hint"],[1,"cr-actions"],[1,"cr-btn","ghost",3,"click"],[1,"cr-btn","primary",3,"click"],[1,"cr-chip",3,"click"]],template:function(e,i){if(e&1){let n=C();r(0,"div",1)(1,"div",2)(2,"div",3),h(3,"Frame your product"),s(),r(4,"div",4),O(5,Y,2,3,"button",5),s(),r(6,"div",6),g("mousedown",function(a){return l(n),p(i.onDown(a))})("touchstart",function(a){return l(n),p(i.onDown(a))}),S(7,"canvas",7,0)(9,"div",8),s(),r(10,"div",9)(11,"span"),h(12,"\u2212"),s(),r(13,"input",10),g("input",function(a){return l(n),p(i.onZoom(a))}),s(),r(14,"span"),h(15,"+"),s()(),r(16,"div",11),h(17),s(),r(18,"div",12)(19,"button",13),g("click",function(){return l(n),p(i.cancelled.emit())}),h(20,"Cancel"),s(),r(21,"button",14),g("click",function(){return l(n),p(i.apply())}),h(22,"Use photo"),s()()()()}e&2&&(d(5),v("ngForOf",i.aspects),d(),H("width",i.stageW,"px")("height",i.stageH,"px"),d(),v("width",i.stageW)("height",i.stageH),d(6),v("min",i.minZoom)("value",i.zoom),d(4),M(i.isFullyVisible?"Whole product visible \u2014 nothing cropped.":"Zoom out to fit the whole product in frame."))},dependencies:[I,F],styles:[".cr-backdrop[_ngcontent-%COMP%]{position:fixed;inset:0;z-index:9999;background:#000000d1;display:flex;align-items:center;justify-content:center;padding:16px}.cr-modal[_ngcontent-%COMP%]{background:#16161c;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px;width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:14px}.cr-title[_ngcontent-%COMP%]{color:#fff;font-weight:800;font-size:1rem;align-self:flex-start}.cr-aspects[_ngcontent-%COMP%]{display:flex;gap:6px}.cr-chip[_ngcontent-%COMP%]{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#c7c7d4;font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer}.cr-chip.on[_ngcontent-%COMP%]{background:linear-gradient(135deg,#e9ae55,#cc8530);color:#fff;border-color:transparent}.cr-stage[_ngcontent-%COMP%]{position:relative;overflow:hidden;border-radius:12px;background:#000;touch-action:none;cursor:grab;box-shadow:0 10px 30px #00000080}.cr-stage[_ngcontent-%COMP%]:active{cursor:grabbing}.cr-stage[_ngcontent-%COMP%]   canvas[_ngcontent-%COMP%]{display:block}.cr-grid[_ngcontent-%COMP%]{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:33.33% 33.33%;opacity:.5}.cr-zoom[_ngcontent-%COMP%]{display:flex;align-items:center;gap:10px;width:100%;color:#c7c7d4}.cr-zoom[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{flex:1;accent-color:#E9AE55}.cr-hint[_ngcontent-%COMP%]{width:100%;font-size:.74rem;color:#9a9aa8;margin-top:-6px}.cr-actions[_ngcontent-%COMP%]{display:flex;gap:10px;width:100%}.cr-btn[_ngcontent-%COMP%]{flex:1;padding:12px;border-radius:12px;font-weight:700;border:none;cursor:pointer}.cr-btn.ghost[_ngcontent-%COMP%]{background:#ffffff12;color:#c7c7d4}.cr-btn.primary[_ngcontent-%COMP%]{background:linear-gradient(135deg,#e9ae55,#cc8530);color:#fff}"]});let m=c;return m})();export{j as a};