@scaleflex/crop 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +452 -0
  3. package/dist/a11y/aria.d.ts +5 -0
  4. package/dist/a11y/keyboard.d.ts +13 -0
  5. package/dist/animation/lerp.d.ts +15 -0
  6. package/dist/animation/spring.d.ts +15 -0
  7. package/dist/canvas/bleed-layer.d.ts +6 -0
  8. package/dist/canvas/crop-frame.d.ts +32 -0
  9. package/dist/canvas/grid-layer.d.ts +7 -0
  10. package/dist/canvas/hit-test.d.ts +10 -0
  11. package/dist/canvas/image-layer.d.ts +28 -0
  12. package/dist/canvas/overlay-layer.d.ts +6 -0
  13. package/dist/canvas/renderer.d.ts +34 -0
  14. package/dist/chunks/sfx-crop-1LGASewd.cjs +353 -0
  15. package/dist/chunks/sfx-crop-CEe6OfTZ.js +2030 -0
  16. package/dist/core/config.d.ts +10 -0
  17. package/dist/core/crop-controller.d.ts +65 -0
  18. package/dist/core/types.d.ts +270 -0
  19. package/dist/define.cjs +1194 -0
  20. package/dist/define.d.ts +1 -0
  21. package/dist/define.js +1746 -0
  22. package/dist/elements/base.d.ts +17 -0
  23. package/dist/elements/icons.d.ts +21 -0
  24. package/dist/elements/parse-shapes.d.ts +13 -0
  25. package/dist/elements/popover-anchor.d.ts +20 -0
  26. package/dist/elements/sfx-crop-canvas.d.ts +24 -0
  27. package/dist/elements/sfx-crop-canvas.styles.d.ts +1 -0
  28. package/dist/elements/sfx-crop-rotate.d.ts +42 -0
  29. package/dist/elements/sfx-crop-rotate.styles.d.ts +5 -0
  30. package/dist/elements/sfx-crop-shapes.d.ts +67 -0
  31. package/dist/elements/sfx-crop-shapes.styles.d.ts +6 -0
  32. package/dist/elements/sfx-crop-toolbar.d.ts +64 -0
  33. package/dist/elements/sfx-crop-toolbar.styles.d.ts +7 -0
  34. package/dist/elements/sfx-crop-zoom.d.ts +66 -0
  35. package/dist/elements/sfx-crop-zoom.styles.d.ts +7 -0
  36. package/dist/elements/sfx-crop.d.ts +134 -0
  37. package/dist/elements/sfx-crop.styles.d.ts +9 -0
  38. package/dist/export/exporter.d.ts +19 -0
  39. package/dist/index.cjs +2 -0
  40. package/dist/index.d.ts +22 -0
  41. package/dist/index.js +65 -0
  42. package/dist/interactions/drag-crop.d.ts +10 -0
  43. package/dist/interactions/pinch-zoom.d.ts +14 -0
  44. package/dist/interactions/pointer-tracker.d.ts +29 -0
  45. package/dist/interactions/resize-handles.d.ts +13 -0
  46. package/dist/interactions/wheel-zoom.d.ts +12 -0
  47. package/dist/react/define-CVJd5aYk.cjs +1545 -0
  48. package/dist/react/define-t4Z6KaLY.js +2590 -0
  49. package/dist/react/index-B-csHwK2.cjs +2 -0
  50. package/dist/react/index-CktjrogS.js +1468 -0
  51. package/dist/react/index.cjs +2 -0
  52. package/dist/react/index.d.ts +21 -0
  53. package/dist/react/index.js +10 -0
  54. package/dist/react/sfx-crop.d.ts +86 -0
  55. package/dist/react/use-sfx-crop-controller.d.ts +74 -0
  56. package/dist/react/use-sfx-crop.d.ts +31 -0
  57. package/dist/styles/shared.css.d.ts +20 -0
  58. package/dist/transforms/constrain.d.ts +68 -0
  59. package/dist/transforms/matrix.d.ts +23 -0
  60. package/dist/transforms/transform-state.d.ts +12 -0
  61. package/dist/utils/events.d.ts +16 -0
  62. package/dist/utils/math.d.ts +12 -0
  63. package/package.json +108 -0
@@ -0,0 +1,2 @@
1
+ "use strict";const T=require("react");typeof customElements<"u"&&Promise.resolve().then(()=>require("./define-CVJd5aYk.cjs"));function vt(t,r,i){if(i===void 0)return;if(r in t){t[r]=i;return}const o=r.replace(/[A-Z]/g,a=>"-"+a.toLowerCase());i===null||i===!1?t.removeAttribute(o):i===!0?t.setAttribute(o,""):t.setAttribute(o,String(i))}const qt=["variant","cropShape","theme","initialRotation","initialScale","initialCrop","minScale","maxScale","minCropSize","availableShapes","handleSize","handleColor","borderRadius","overlayColor","outputType","outputQuality","maxOutputWidth","maxOutputHeight","showGrid","showToolbar","showRotateSlider","showZoomSlider","showShapeSelector","showRotateButton","showFlipButton","toolbarPosition","showBleedMargin","bleedMarginSize","bleedMarginColor","enableAnimations","animationSpeed","keyboard","pinchZoom","wheelZoom","icons"],Ot=T.forwardRef(function(r,i){const o=T.useRef(null),a=T.useRef(r);return a.current=r,T.useImperativeHandle(i,()=>o.current,[]),T.useEffect(()=>{const e=o.current;if(!e)return;const h=[["sfx-crop-ready",s=>{var n,l;return(l=(n=a.current).onReady)==null?void 0:l.call(n,s.detail)}],["sfx-crop-image-load",s=>{var n,l;return(l=(n=a.current).onImageLoad)==null?void 0:l.call(n,s.detail)}],["sfx-crop-change",s=>{var n,l;return(l=(n=a.current).onChange)==null?void 0:l.call(n,s.detail)}],["sfx-crop-crop-change",s=>{var n,l;return(l=(n=a.current).onCropChange)==null?void 0:l.call(n,s.detail)}],["sfx-crop-save",s=>{var n,l;return(l=(n=a.current).onSave)==null?void 0:l.call(n,s.detail)}],["sfx-crop-cancel",()=>{var s,n;return(n=(s=a.current).onCancel)==null?void 0:n.call(s)}],["sfx-crop-error",s=>{var n,l;return(l=(n=a.current).onError)==null?void 0:l.call(n,s.detail)}]];for(const[s,n]of h)e.addEventListener(s,n);return()=>{for(const[s,n]of h)e.removeEventListener(s,n)}},[]),T.useEffect(()=>{const e=o.current;if(e){for(const h of qt)vt(e,h,r[h]);vt(e,"src",r.src)}}),T.createElement("sfx-crop",{ref:o,className:r.className,style:r.style,id:r.id})});typeof customElements<"u"&&Promise.resolve().then(()=>require("./define-CVJd5aYk.cjs"));function At(){const t=T.useRef(null),[r,i]=T.useState(!1);T.useEffect(()=>{const u=t.current;if(!u)return;const m=()=>i(!0);return u.addEventListener("sfx-crop-ready",m),()=>{u.removeEventListener("sfx-crop-ready",m),i(!1)}},[]);const o=T.useCallback(u=>t.current?t.current.loadImage(u):Promise.resolve(),[]),a=T.useCallback(()=>{var u;return(u=t.current)==null?void 0:u.rotateLeft()},[]),e=T.useCallback(()=>{var u;return(u=t.current)==null?void 0:u.flipHorizontal()},[]),h=T.useCallback(u=>{var m;return(m=t.current)==null?void 0:m.setRotation(u)},[]),s=T.useCallback(u=>{var m;return(m=t.current)==null?void 0:m.setScale(u)},[]),n=T.useCallback(u=>{var m;return(m=t.current)==null?void 0:m.setCropShape(u)},[]),l=T.useCallback(u=>{var m;return(m=t.current)==null?void 0:m.setCropRect(u)},[]),d=T.useCallback(()=>{var u;return((u=t.current)==null?void 0:u.getCropRect())??null},[]),g=T.useCallback(()=>{var u;return((u=t.current)==null?void 0:u.getTransformState())??null},[]),w=T.useCallback(()=>{var u;return(u=t.current)==null?void 0:u.reset()},[]),y=T.useCallback(()=>{var u;return((u=t.current)==null?void 0:u.toCanvas())??null},[]),c=T.useCallback(async(u,m)=>t.current?t.current.toBlob(u,m):null,[]),p=T.useCallback((u,m)=>{var H;return((H=t.current)==null?void 0:H.toDataURL(u,m))??null},[]),S=T.useCallback(()=>{var u;return((u=t.current)==null?void 0:u.toTransformParams())??null},[]),x=T.useCallback((u,m)=>t.current?t.current.save(u,m):Promise.resolve(),[]),C=T.useCallback(()=>{var u;return(u=t.current)==null?void 0:u.cancel()},[]);return{ref:t,ready:r,loadImage:o,rotateLeft:a,flipHorizontal:e,setRotation:h,setScale:s,setCropShape:n,setCropRect:l,getCropRect:d,getTransformState:g,reset:w,toCanvas:y,toBlob:c,toDataURL:p,toTransformParams:S,save:x,cancel:C}}const Mt={src:"",variant:"classic",cropShape:"16:9",initialCrop:null,initialRotation:0,initialScale:1,customAspectRatios:[],minCropSize:20,availableShapes:["free","square","16:9","4:3","3:2","5:4","2:1","9:16","3:4","2:3","4:5","1:2"],minScale:.5,maxScale:5,theme:"light",showGrid:"interaction",showRotateSlider:!0,showZoomSlider:!0,showShapeSelector:!0,showRotateButton:!0,showFlipButton:!0,toolbarPosition:"top",showToolbar:!0,overlayColor:"rgba(0, 0, 0, 0.55)",handleSize:12,handleColor:"#ffffff",borderRadius:20,outputType:"image/png",outputQuality:.92,maxOutputWidth:0,maxOutputHeight:0,showBleedMargin:!1,bleedMarginSize:10,bleedMarginColor:"rgba(255, 0, 0, 0.5)",enableAnimations:!0,animationSpeed:1,keyboard:!0,pinchZoom:!0,wheelZoom:!0};function pt(t){return{...Mt,...t}}function I(t,r,i){return Math.min(Math.max(t,r),i)}function k(t,r,i){return t+(r-t)*i}function ot(t){return t*Math.PI/180}function Wt(t,r,i,o){const a=i-t,e=o-r;return Math.sqrt(a*a+e*e)}function Tt(t){const r=/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/.exec(t.trim());if(!r)return null;const i=Number(r[1]),o=Number(r[2]);return!Number.isFinite(i)||!Number.isFinite(o)||i<=0||o<=0?null:i/o}function st(t){switch(t){case"free":return null;case"rounded-rect":return null;case"square":case"circle":return 1;default:return Tt(t)}}function Vt(t,r,i,o,a,e){if(r===null)return zt(t,e,o,a);const h=o/a,s=r/h;let{x:n,y:l,width:d,height:g}=t;const w=i.includes("e")||i.includes("w"),y=i.includes("n")||i.includes("s");w&&!y?g=d/s:y&&!w?d=g*s:g=d/s;const c=t.x+t.width,p=t.y+t.height,S=t.x+t.width/2,x=t.y+t.height/2;let C;i.includes("w")?C=c:i.includes("e")?C=1-t.x:C=2*Math.min(S,1-S);let u;i.includes("n")?u=p:i.includes("s")?u=1-t.y:u=2*Math.min(x,1-x);const m=Math.min(1,C/d,u/g);m<1&&(d*=m,g*=m);const H=e/o,z=e/a;return d<H&&(d=H,g=d/s),g<z&&(g=z,d=g*s),i.includes("w")?n=c-d:i.includes("e")?n=t.x:n=S-d/2,i.includes("n")?l=p-g:i.includes("s")?l=t.y:l=x-g/2,n=I(n,0,1-d),l=I(l,0,1-g),{x:n,y:l,width:d,height:g}}function zt(t,r,i,o){const a=r/i,e=r/o;return{...t,width:Math.max(t.width,a),height:Math.max(t.height,e)}}function Bt(t,r,i,o,a,e,h){const s=t.rotation*Math.PI/180,n=Math.abs(Math.cos(s)),l=Math.abs(Math.sin(s)),d=o.width*n+o.height*l,g=o.width*l+o.height*n,w=Math.max(d/a,g/e),y=Math.min(w,h),c=I(t.scale,y,h),p=r/2-(o.x+o.width/2),S=i/2-(o.y+o.height/2),x=Math.max(0,(a*c-d)/2),C=Math.max(0,(e*c-g)/2);return{scale:c,panX:I(t.panX,(-x-p)/c,(x-p)/c),panY:I(t.panY,(-C-S)/c,(C-S)/c),minScale:y}}const N=.8;function bt(t,r,i){return!r||!i?t:t/(r/i)}function St(t="free",r=1,i=1){const o=st(t);let a;if(o!==null){const e=bt(o,r,i);let h,s;e>=1?(h=N,s=h/e,s>N&&(s=N,h=s*e)):(s=N,h=s*e,h>N&&(h=N,s=h/e)),a={x:(1-h)/2,y:(1-s)/2,width:h,height:s}}else{const e=N;a={x:(1-e)/2,y:(1-e)/2,width:e,height:e}}return{quarterTurns:0,rotation:0,flipH:!1,flipV:!1,scale:1,panX:0,panY:0,cropRect:a}}function Kt(t){const r=t.quarterTurns-90;return{...t,quarterTurns:r,panX:0,panY:0}}function Nt(t){return{...t,flipH:!t.flipH}}function ut(t,r){const i=I(r,-45,45);let o=t.rotationPivot;if(i===0)o=void 0;else if(!o){const a=t.cropRect;o={x:a.x+a.width/2,y:a.y+a.height/2}}return{...t,rotation:i,rotationPivot:o}}function tt(t,r,i,o){return{...t,scale:I(r,i,o)}}function j(t,r){return{...t,cropRect:{x:I(r.x,0,1-r.width),y:I(r.y,0,1-r.height),width:I(r.width,0,1),height:I(r.height,0,1)}}}function ft(t,r,i=1,o=1){const a=st(r);let e;if(a===null)e={...t.cropRect};else{const h=bt(a,i,o),{cropRect:s}=t,n=s.x+s.width/2,l=s.y+s.height/2;let d,g;h>=1?(d=N,g=d/h,g>N&&(g=N,d=g*h)):(g=N,d=g*h,d>N&&(d=N,g=d/h)),e={x:I(n-d/2,0,1-d),y:I(l-g/2,0,1-g),width:d,height:g}}return{...t,cropRect:e}}function Rt(t,r,i){return{...t,panX:t.panX+r,panY:t.panY+i}}function it(t,r,i,o,a){const e=Math.round(a/90)%2!==0,h=e?r:t,s=e?t:r,n=Math.max(h/i,s/o);return{drawW:i*n,drawH:o*n}}function Zt(t,r,i,o,a=!1){const{x:e,y:h,w:s,h:n}=i,l=e+s/2,d=h+n/2;t.save();const g=e+(o.cropRect.x+o.cropRect.width/2)*s,w=h+(o.cropRect.y+o.cropRect.height/2)*n,y=o.rotationPivot??{x:o.cropRect.x+o.cropRect.width/2,y:o.cropRect.y+o.cropRect.height/2},c=e+y.x*s,p=h+y.y*n;o.rotation!==0&&(t.translate(c,p),t.rotate(ot(o.rotation)),t.translate(-c,-p)),(o.flipH!==1||o.flipV!==1)&&(t.translate(g,w),t.scale(o.flipH,o.flipV),t.translate(-g,-w)),t.translate(l,d),t.scale(o.scale,o.scale),t.translate(o.panX,o.panY),o.quarterTurns!==0&&t.rotate(ot(o.quarterTurns));let S,x;if(a){const C=it(s,n,r.naturalWidth,r.naturalHeight,o.quarterTurns);S=C.drawW,x=C.drawH}else{const u=Math.round(o.quarterTurns/90)%2!==0?Math.min(s,n)/Math.max(s,n):1;S=s*u,x=n*u}t.drawImage(r,-S/2,-x/2,S,x),t.restore()}let G=null;function _t(t,r){G||(G=document.createElement("canvas")),(G.width!==t||G.height!==r)&&(G.width=t,G.height=r);const i=G.getContext("2d");return i.clearRect(0,0,t,r),i}function kt(t,r,i,o,a="rect",e=20,h="rgba(0, 0, 0, 0.55)"){const s=_t(r,i);if(s.fillStyle=h,s.fillRect(0,0,r,i),s.globalCompositeOperation="destination-out",s.fillStyle="rgba(0, 0, 0, 1)",a==="circle"){const n=o.x+o.width/2,l=o.y+o.height/2,d=o.width/2,g=o.height/2;s.beginPath(),s.ellipse(n,l,d,g,0,0,Math.PI*2),s.fill()}else if(a==="rounded-rect"){const{x:n,y:l,width:d,height:g}=o,w=Math.min(e,d/2,g/2);s.beginPath(),s.moveTo(n+w,l),s.lineTo(n+d-w,l),s.arcTo(n+d,l,n+d,l+w,w),s.lineTo(n+d,l+g-w),s.arcTo(n+d,l+g,n+d-w,l+g,w),s.lineTo(n+w,l+g),s.arcTo(n,l+g,n,l+g-w,w),s.lineTo(n,l+w),s.arcTo(n,l,n+w,l,w),s.closePath(),s.fill()}else s.fillRect(o.x,o.y,o.width,o.height);s.globalCompositeOperation="source-over",t.drawImage(G,0,0)}const Ut=12,Gt=22,at=11,rt=9,$t={frame:"#ffffff",frameShadow:"rgba(0, 0, 0, 0.3)",handleFill:"#ffffff",handleStroke:"rgba(0, 0, 0, 0.25)"};function Qt(t,r,i="rect",o=20,a=$t,e=!0){const h=i==="circle",s=i==="rounded-rect",{x:n,y:l,width:d,height:g}=r;if(t.save(),t.strokeStyle=a.frameShadow,t.lineWidth=1,h){const S=n+d/2,x=l+g/2,C=d/2-1,u=g/2-1;t.beginPath(),t.ellipse(S,x,C,u,0,0,Math.PI*2),t.stroke()}else s?(Ct(t,n+1,l+1,d-2,g-2,Math.min(o,d/2,g/2)),t.stroke()):t.strokeRect(n+1,l+1,d-2,g-2);if(t.strokeStyle=a.frame,t.lineWidth=2,h){const S=n+d/2,x=l+g/2,C=d/2,u=g/2;t.beginPath(),t.ellipse(S,x,C,u,0,0,Math.PI*2),t.stroke(),t.setLineDash([4,4]),t.strokeStyle=a.frameShadow,t.lineWidth=1,t.beginPath(),t.ellipse(S,x,C-1,u-1,0,0,Math.PI*2),t.stroke(),t.setLineDash([])}else if(s){const S=Math.min(o,d/2,g/2);Ct(t,n,l,d,g,S),t.stroke()}else t.strokeRect(n,l,d,g);if(!e){t.restore();return}t.fillStyle=a.handleFill,t.strokeStyle=a.handleStroke,t.lineWidth=1;const w=Math.min(Ut/2,d/6,g/6),y=[{cx:n,cy:l},{cx:n+d,cy:l},{cx:n+d,cy:l+g},{cx:n,cy:l+g}];for(const S of y)t.beginPath(),t.arc(S.cx,S.cy,w,0,Math.PI*2),t.fill(),t.stroke();const c=n-at,p=l-at;t.beginPath(),t.arc(c,p,w,0,Math.PI*2),t.fill(),t.stroke(),t.fillStyle=a.handleStroke,t.beginPath(),t.arc(c,p,Math.max(2,w*.35),0,Math.PI*2),t.fill(),t.restore()}function Ct(t,r,i,o,a,e){e=Math.min(e,o/2,a/2),t.beginPath(),t.moveTo(r+e,i),t.lineTo(r+o-e,i),t.arcTo(r+o,i,r+o,i+e,e),t.lineTo(r+o,i+a-e),t.arcTo(r+o,i+a,r+o-e,i+a,e),t.lineTo(r+e,i+a),t.arcTo(r,i+a,r,i+a-e,e),t.lineTo(r,i+e),t.arcTo(r,i,r+e,i,e),t.closePath()}function jt(t){const{x:r,y:i,width:o,height:a}=t,e=Gt;return[{target:"move-handle",rect:{x:r-at-rt,y:i-at-rt,w:rt*2,h:rt*2}},{target:"handle-nw",rect:{x:r-e,y:i-e,w:e*2,h:e*2}},{target:"handle-ne",rect:{x:r+o-e,y:i-e,w:e*2,h:e*2}},{target:"handle-se",rect:{x:r+o-e,y:i+a-e,w:e*2,h:e*2}},{target:"handle-sw",rect:{x:r-e,y:i+a-e,w:e*2,h:e*2}},{target:"handle-n",rect:{x:r+e,y:i-e,w:o-e*2,h:e*2}},{target:"handle-s",rect:{x:r+e,y:i+a-e,w:o-e*2,h:e*2}},{target:"handle-e",rect:{x:r+o-e,y:i+e,w:e*2,h:a-e*2}},{target:"handle-w",rect:{x:r-e,y:i+e,w:e*2,h:a-e*2}}]}function Jt(t,r,i){const{x:o,y:a,width:e,height:h}=r;t.save(),t.strokeStyle=`rgba(255, 255, 255, ${.35*i})`,t.lineWidth=.5;for(let s=1;s<=2;s++){const n=o+e*s/3;t.beginPath(),t.moveTo(n,a),t.lineTo(n,a+h),t.stroke()}for(let s=1;s<=2;s++){const n=a+h*s/3;t.beginPath(),t.moveTo(o,n),t.lineTo(o+e,n),t.stroke()}t.restore()}function te(t,r,i,o){i*2>=r.width||i*2>=r.height||(t.save(),t.strokeStyle=o,t.lineWidth=1,t.setLineDash([6,4]),t.strokeRect(r.x+i,r.y+i,r.width-i*2,r.height-i*2),t.setLineDash([]),t.restore())}function ee(t,r,i,o=20,a=!1,e){const h=t.getContext("2d");if(!h)throw new Error("2D canvas context unavailable");const s=h;function n(){if(e)return e;if(t.parentElement)return t.parentElement;let R=t.getRootNode();for(;R&&R!==document&&R instanceof ShadowRoot;){const P=R.host;if(P instanceof HTMLElement)return P;R=P.getRootNode()}return null}let l=!0,d=null,g=!1,w=!1,y=0;const c={quarterTurns:0,rotation:0,flipH:1,flipV:1,scale:1,panX:0,panY:0,cropRect:{x:0,y:0,width:1,height:1},gridOpacity:0,interactive:!1},p={...c},S={quarterTurns:0,flipH:0,flipV:0};let x={show:!1,size:10,color:"rgba(255, 0, 0, 0.5)"},C=0,u=.5,m=5,H=!1;function z(){if(g)return;const R=n();if(!R)return;const P=window.devicePixelRatio,W=Math.min(Number.isFinite(P)&&P>0?P:1,2),q=R.getBoundingClientRect();q.width<=0||q.height<=0||(t.width=Math.max(0,Math.floor(q.width*W)),t.height=Math.max(0,Math.floor(q.height*W)),t.style.width=`${q.width}px`,t.style.height=`${q.height}px`,s.setTransform(W,0,0,W,0,0),l=!0)}function B(){const R=n();return R?{x:0,y:0,w:R.clientWidth,h:R.clientHeight}:{x:0,y:0,w:0,h:0}}function Y(){const R=B(),P=c.cropRect;return{x:R.x+P.x*R.w,y:R.y+P.y*R.h,width:P.width*R.w,height:P.height*R.h}}function A(R,P){return 1-Math.pow(1-R,P*60)}function _(R){if(a){c.quarterTurns=p.quarterTurns,c.rotation=p.rotation,c.flipH=p.flipH,c.flipV=p.flipV,c.scale=p.scale,c.panX=p.panX,c.panY=p.panY,c.cropRect={...p.cropRect},c.gridOpacity=p.gridOpacity,c.interactive=p.interactive,l=!0;return}let P=!1;if(Math.abs(c.quarterTurns-p.quarterTurns)>.01){const b=-180*(c.quarterTurns-p.quarterTurns),V=-22*S.quarterTurns;S.quarterTurns+=(b+V)*R,c.quarterTurns+=S.quarterTurns*R,Math.abs(c.quarterTurns-p.quarterTurns)<.01&&Math.abs(S.quarterTurns)<.01&&(c.quarterTurns=p.quarterTurns,S.quarterTurns=0),P=!0,l=!0}if(Math.abs(c.flipH-p.flipH)>.01){const b=-400*(c.flipH-p.flipH),V=-28*S.flipH;S.flipH+=(b+V)*R,c.flipH+=S.flipH*R,Math.abs(c.flipH-p.flipH)<.01&&Math.abs(S.flipH)<.01&&(c.flipH=p.flipH,S.flipH=0),P=!0,l=!0}if(Math.abs(c.flipV-p.flipV)>.01){const b=-400*(c.flipV-p.flipV),V=-28*S.flipV;S.flipV+=(b+V)*R,c.flipV+=S.flipV*R,Math.abs(c.flipV-p.flipV)<.01&&Math.abs(S.flipV)<.01&&(c.flipV=p.flipV,S.flipV=0),P=!0,l=!0}const W=A(.15,R),q=A(.12,R),K=A(.12,R);if(Math.abs(c.rotation-p.rotation)>.01&&(c.rotation=k(c.rotation,p.rotation,W),P=!0,l=!0),Math.abs(c.scale-p.scale)>.001&&(c.scale=k(c.scale,p.scale,W),P=!0,l=!0),!!p.interactive){(c.panX!==p.panX||c.panY!==p.panY)&&(c.panX=p.panX,c.panY=p.panY,l=!0);const D=p.cropRect,b=c.cropRect;(b.x!==D.x||b.y!==D.y||b.width!==D.width||b.height!==D.height)&&(c.cropRect={...D},l=!0)}else{Math.abs(c.panX-p.panX)>.1&&(c.panX=k(c.panX,p.panX,W),P=!0,l=!0),Math.abs(c.panY-p.panY)>.1&&(c.panY=k(c.panY,p.panY,W),P=!0,l=!0);const D=c.cropRect,b=p.cropRect;(Math.abs(D.x-b.x)>1e-4||Math.abs(D.y-b.y)>1e-4||Math.abs(D.width-b.width)>1e-4||Math.abs(D.height-b.height)>1e-4)&&(c.cropRect={x:k(D.x,b.x,q),y:k(D.y,b.y,q),width:k(D.width,b.width,q),height:k(D.height,b.height,q)},P=!0,l=!0)}if(Math.abs(c.gridOpacity-p.gridOpacity)>.01&&(c.gridOpacity=k(c.gridOpacity,p.gridOpacity,K),P=!0,l=!0),c.scale<u){const b=-400*(c.scale-u),V=-28*C;C+=(b+V)*R,c.scale+=C*R,Math.abs(c.scale-u)<.001&&Math.abs(C)<.001&&(c.scale=u,C=0),P=!0,l=!0}else if(c.scale>m){const b=-400*(c.scale-m),V=-28*C;C+=(b+V)*R,c.scale+=C*R,Math.abs(c.scale-m)<.001&&Math.abs(C)<.001&&(c.scale=m,C=0),P=!0,l=!0}P||(c.rotation=p.rotation,c.scale=p.scale,c.panX=p.panX,c.panY=p.panY,c.cropRect={...p.cropRect},c.gridOpacity=p.gridOpacity,c.interactive=p.interactive)}function U(R){if(g||!w){d=null;return}const P=typeof R=="number"?R:performance.now(),W=y===0?1/60:Math.min(.25,Math.max(0,(P-y)/1e3));if(y=P,d=requestAnimationFrame(U),_(W),!l)return;const q=n();if(!q)return;const K=q.clientWidth,E=q.clientHeight;if(K===0||E===0)return;l=!1,s.clearRect(0,0,K,E);const D=B();Zt(s,r,D,c,H);const b=Y(),V=i(),ct=n()??t,$=(Q,nt)=>getComputedStyle(ct).getPropertyValue(Q).trim()||nt;if(!(H&&V==="rect")){const Q=$("--sfx-cr-overlay-color","rgba(0, 0, 0, 0.55)");kt(s,K,E,b,V,o,Q)}H&&V==="rect"||Qt(s,b,V,o,{frame:$("--sfx-cr-frame-color","#ffffff"),frameShadow:$("--sfx-cr-frame-shadow","rgba(0, 0, 0, 0.3)"),handleFill:$("--sfx-cr-handle-fill","#ffffff"),handleStroke:$("--sfx-cr-handle-stroke","rgba(0, 0, 0, 0.25)")},!H),x.show&&te(s,b,x.size,x.color),c.gridOpacity>.01&&Jt(s,b,c.gridOpacity)}return z(),{markDirty(){l=!0},startLoop(){w||g||(w=!0,y=0,U())},stopLoop(){w=!1,d!==null&&(cancelAnimationFrame(d),d=null)},setDisplayState(R){Object.assign(p,R),c.rotationPivot=R.rotationPivot,l=!0},getDisplayState(){return{...c}},getCanvasCropRect:Y,setScaleBounds(R,P){u=R,m=P},setBleedConfig(R){x=R,l=!0},setFixedFrame(R){H=R,l=!0},resize:z,destroy(){g=!0,w=!1,d!==null&&(cancelAnimationFrame(d),d=null)}}}const ne=["nw","ne","sw","se","n","s","e","w"];function re(t){return ne.includes(t)?t:null}function oe(t,r,i){return t>=i.x&&t<=i.x+i.w&&r>=i.y&&r<=i.y+i.h}function ht(t,r,i){const o=jt(i);for(const{target:a,rect:e}of o)if(oe(t,r,e)){if(a==="move-handle")return{type:"move-handle"};const h=re(a.replace("handle-",""));if(h)return{type:"handle",position:h}}return t>=i.x&&t<=i.x+i.width&&r>=i.y&&r<=i.y+i.height?{type:"crop-area"}:{type:"outside"}}function xt(t,r){if(t.type==="move-handle")return"move";switch(t.type){case"crop-area":return"move";case"outside":return"crosshair";case"handle":switch(t.position){case"nw":case"se":return"nwse-resize";case"ne":case"sw":return"nesw-resize";case"n":case"s":return"ns-resize";case"e":case"w":return"ew-resize";default:return"default"}default:return"default"}}function ie(t,r){const i=new Map;let o=0,a=!1;function e(y){return y==="touch"||y==="pen"?y:"mouse"}function h(y){const c=t.getBoundingClientRect();return{x:y.clientX-c.left,y:y.clientY-c.top}}function s(){return[...i.values()]}function n(y){if(y.pointerType==="mouse"&&y.button!==0)return;try{t.setPointerCapture(y.pointerId)}catch{}const c=h(y),p={id:y.pointerId,x:c.x,y:c.y,startX:c.x,startY:c.y,pressure:y.pressure,pointerType:e(y.pointerType),shiftKey:y.shiftKey,altKey:y.altKey};i.set(y.pointerId,p),r.onPointerDown(p,s())}function l(y){const c=i.get(y.pointerId);if(!c){if(r.onHover){const x=h(y);r.onHover({id:y.pointerId,x:x.x,y:x.y,startX:x.x,startY:x.y,pressure:0,pointerType:e(y.pointerType),shiftKey:y.shiftKey,altKey:y.altKey})}return}const p=h(y);c.x=p.x,c.y=p.y,c.pressure=y.pressure,c.shiftKey=y.shiftKey,c.altKey=y.altKey;const S=s();if(r.onPointerMove(c,S),S.length===2&&r.onPinch){const[x,C]=S,u=Math.sqrt((C.x-x.x)**2+(C.y-x.y)**2);!a&&u>10&&(o=u,a=!0),a&&r.onPinch({centerX:(x.x+C.x)/2,centerY:(x.y+C.y)/2,scale:u/o,distance:u})}}function d(y){const c=i.get(y.pointerId);if(c){i.delete(y.pointerId);try{t.releasePointerCapture(y.pointerId)}catch{}s().length<2&&(a=!1,o=0),r.onPointerUp(c,s())}}function g(y){r.onWheel&&r.onWheel(y)}t.addEventListener("pointerdown",n),t.addEventListener("pointermove",l),t.addEventListener("pointerup",d),t.addEventListener("pointercancel",d),t.addEventListener("wheel",g,{passive:!1});const w=y=>y.preventDefault();return t.addEventListener("contextmenu",w),t.style.touchAction="none",{destroy(){t.removeEventListener("pointerdown",n),t.removeEventListener("pointermove",l),t.removeEventListener("pointerup",d),t.removeEventListener("pointercancel",d),t.removeEventListener("wheel",g),t.removeEventListener("contextmenu",w),t.style.touchAction="",i.clear()}}}function ae(t,r,i,o,a){const e=(r-t.startX)/o,h=(i-t.startY)/a,{startCrop:s}=t;return{x:I(s.x-e,0,1-s.width),y:I(s.y-h,0,1-s.height),width:s.width,height:s.height}}function se(t,r,i,o){return{handle:t.startsWith("handle-")?t.slice(7):t,startCrop:{...r},startX:i,startY:o}}function ce(t,r,i,o,a,e,h,s={shiftKey:!1,altKey:!1}){const n=(r-t.startX)/o,l=(i-t.startY)/a,{startCrop:d,handle:g}=t;let w=d.x,y=d.y,c=d.width,p=d.height;const S=h/o,x=h/a;if(g.includes("w")){const m=I(w+n,0,w+c-S);c=c-(m-w),w=m}if(g.includes("e")&&(c=I(c+n,S,1-w)),g.includes("n")){const m=I(y+l,0,y+p-x);p=p-(m-y),y=m}if(g.includes("s")&&(p=I(p+l,x,1-y)),c=Math.max(c,S),p=Math.max(p,x),s.altKey){const m=d.x+d.width/2,H=d.y+d.height/2,z=c/2,B=p/2;w=I(m-z,0,1-c),y=I(H-B,0,1-p)}let C={x:w,y,width:c,height:p},u=st(e);return s.shiftKey&&e==="free"&&(u=d.width/d.height),u!==null&&(C=Vt(C,u,g,o,a,h)),C}function le(t,r){if(t.length<2)return null;const[i,o]=t,a=Wt(i.x,i.y,o.x,o.y);return a<10?null:{initialDistance:a,initialScale:r,initialCenterX:(i.x+o.x)/2,initialCenterY:(i.y+o.y)/2}}function ue(t,r,i,o,a,e,h){const s=1-t*i.sensitivity*.001,n=I(r*s,i.minScale,i.maxScale);let l=0,d=0;if(o!==void 0&&e!==void 0){const g=1-n/r;l=(o-e)*g,d=(a-h)*g}return{scale:n,panDeltaX:l,panDeltaY:d}}function fe(t,r){function i(o){if(!((typeof o.composedPath=="function"?o.composedPath():[]).includes(t)||t.contains(document.activeElement)||document.activeElement===t)||o.ctrlKey||o.metaKey||o.altKey)return;const h=o.shiftKey?.01:.005;switch(o.key){case"ArrowLeft":o.preventDefault(),r.onMoveCrop(-h,0);break;case"ArrowRight":o.preventDefault(),r.onMoveCrop(h,0);break;case"ArrowUp":o.preventDefault(),r.onMoveCrop(0,-h);break;case"ArrowDown":o.preventDefault(),r.onMoveCrop(0,h);break;case"r":case"R":o.preventDefault(),r.onRotateLeft();break;case"f":case"F":o.preventDefault(),r.onFlipH();break;case"+":case"=":o.preventDefault(),r.onZoomIn();break;case"-":case"_":o.preventDefault(),r.onZoomOut();break;case"0":o.preventDefault(),r.onResetZoom();break;case"[":o.preventDefault(),r.onRotateFine(-1);break;case"]":o.preventDefault(),r.onRotateFine(1);break}}return t.addEventListener("keydown",i),{destroy(){t.removeEventListener("keydown",i)}}}function he(t){t.setAttribute("role","application"),t.setAttribute("aria-roledescription","image crop tool"),t.setAttribute("aria-label","Image crop tool — use arrow keys to move crop, R to rotate, F to flip horizontal, +/- to zoom"),t.setAttribute("tabindex","0")}function dt(t,r,i="free"){let o=t.querySelector(".sfx-cr-sr-only[aria-live]");o||(o=document.createElement("div"),o.className="sfx-cr-sr-only",o.setAttribute("aria-live","polite"),t.appendChild(o));const a=r.quarterTurns+r.rotation,e=Math.round(r.scale*100),h=i,s=r.flipH?", flipped horizontal":"";o.textContent=`Crop: ${h}, rotation ${a.toFixed(1)}°${s}, zoom ${e}%`}function yt(t){const r=t.getContext("2d");if(!r)throw new Error("2D canvas context unavailable");return r}function de(t,r,i){const o=t.quarterTurns+t.rotation,a=Math.round(t.cropRect.width*r),e=Math.round(t.cropRect.height*i),h=Math.round(t.quarterTurns/90)%2!==0;return{rotation:o,flipH:t.flipH,flipV:t.flipV,scale:t.scale,crop:{x:Math.round(t.cropRect.x*r),y:Math.round(t.cropRect.y*i),width:a,height:e},outputWidth:h?e:a,outputHeight:h?a:e}}function pe(t,r,i,o,a="free",e=20,h=0,s=0,n="classic"){const l=t.naturalWidth,d=t.naturalHeight,g=n==="fixed"&&h>0&&s>0;let w,y,c,p;if(g){const q=it(h,s,l,d,r.quarterTurns),K=Math.max(l/q.drawW,d/q.drawH);w=Math.max(1,Math.round(h*K)),y=Math.max(1,Math.round(s*K));const E=it(w,y,l,d,r.quarterTurns);c=E.drawW,p=E.drawH}else{w=l,y=d;const K=Math.round(r.quarterTurns/90)%2!==0?Math.min(w,y)/Math.max(w,y):1;c=w*K,p=y*K}const S=r.cropRect.x*w,x=r.cropRect.y*y,C=r.cropRect.width*w,u=r.cropRect.height*y;let m=Math.max(1,Math.round(C)),H=Math.max(1,Math.round(u));i>0&&m>i&&(H=Math.max(1,Math.round(H*(i/m))),m=i),o>0&&H>o&&(m=Math.max(1,Math.round(m*(o/H))),H=o);const z=C>1e-6?m/C:1,B=document.createElement("canvas");B.width=m,B.height=H;const Y=yt(B);Y.save(),Y.scale(z,z),Y.translate(-S,-x);const A=(r.cropRect.x+r.cropRect.width/2)*w,_=(r.cropRect.y+r.cropRect.height/2)*y,U=r.rotationPivot??{x:r.cropRect.x+r.cropRect.width/2,y:r.cropRect.y+r.cropRect.height/2},R=U.x*w,P=U.y*y;r.rotation!==0&&(Y.translate(R,P),Y.rotate(ot(r.rotation)),Y.translate(-R,-P)),(r.flipH||r.flipV)&&(Y.translate(A,_),Y.scale(r.flipH?-1:1,r.flipV?-1:1),Y.translate(-A,-_)),Y.translate(w/2,y/2),Y.scale(r.scale,r.scale);const W=h>0?w/h:1;return Y.translate(r.panX*W,r.panY*W),r.quarterTurns!==0&&Y.rotate(ot(r.quarterTurns)),Y.drawImage(t,-c/2,-p/2,c,p),Y.restore(),a==="circle"?ge(B):a==="rounded-rect"&&ye(B,e),B}function ye(t,r){const i=yt(t),o=t.width,a=t.height,e=Math.min(r,o/2,a/2);i.globalCompositeOperation="destination-in",i.beginPath(),i.moveTo(e,0),i.lineTo(o-e,0),i.arcTo(o,0,o,e,e),i.lineTo(o,a-e),i.arcTo(o,a,o-e,a,e),i.lineTo(e,a),i.arcTo(0,a,0,a-e,e),i.lineTo(0,e),i.arcTo(0,0,e,0,e),i.closePath(),i.fill(),i.globalCompositeOperation="source-over"}function ge(t){const r=yt(t),i=t.width,o=t.height;r.globalCompositeOperation="destination-in",r.beginPath(),r.ellipse(i/2,o/2,i/2,o/2,0,0,Math.PI*2),r.fill(),r.globalCompositeOperation="source-over"}async function me(t,r,i){return new Promise((o,a)=>{let e=!1;try{t.toBlob(h=>{e||(e=!0,h?o(h):a(new Error("Failed to create blob (canvas may be empty or tainted)")))},r,i)}catch(h){e||(e=!0,a(h instanceof Error?h:new Error(String(h))))}})}function Pt(t){const{canvas:r,host:i,layoutContainer:o,callbacks:a={}}=t;let e={...t.config},h=e.cropShape,s=null,n=St(e.cropShape),l=null,d=null,g=null,w=null,y=null,c=!1,p=!1,S=0,x=null,C=null,u=null,m=null,H=null,z=0,B=0,Y=0;e.initialCrop&&(n=j(n,e.initialCrop)),e.initialRotation&&(n=ut(n,e.initialRotation)),e.initialScale&&e.initialScale!==1&&(n=tt(n,e.initialScale,e.minScale,e.maxScale));function A(){return h==="circle"?"circle":h==="rounded-rect"?"rounded-rect":"rect"}function _(){return{...n,cropRect:{...n.cropRect}}}function U(){if(!s)return{...n.cropRect};const f=s.naturalWidth,v=s.naturalHeight;return{x:Math.round(n.cropRect.x*f),y:Math.round(n.cropRect.y*v),width:Math.round(n.cropRect.width*f),height:Math.round(n.cropRect.height*v)}}const R={x:0,y:0,width:1,height:1};let P=0,W=0;function q(){const f=o.clientWidth,v=o.clientHeight;return f>0&&v>0&&(P=f,W=v),{w:f>0?f:P,h:v>0?v:W}}function K(){if(!s||!l)return;const{w:f,h:v}=q();if(f<=0||v<=0)return;let M,L,X;if(e.variant==="fixed"){M={x:0,y:0,width:f,height:v};const F=it(f,v,s.naturalWidth,s.naturalHeight,n.quarterTurns);L=F.drawW,X=F.drawH}else{if(Math.round(n.quarterTurns/90)%2!==0){l.setScaleBounds(e.minScale,e.maxScale);return}const F=n.cropRect;M={x:F.x*f,y:F.y*v,width:F.width*f,height:F.height*v},L=f,X=v}const O=Bt(n,f,v,M,L,X,e.maxScale);n={...n,scale:O.scale,panX:O.panX,panY:O.panY},l.setScaleBounds(O.minScale,e.maxScale)}function E(){if(!l)return;K();const f={quarterTurns:n.quarterTurns,rotation:n.rotation,flipH:n.flipH?-1:1,flipV:n.flipV?-1:1,scale:n.scale,panX:n.panX,panY:n.panY,cropRect:{...n.cropRect},rotationPivot:n.rotationPivot,gridOpacity:p||e.showGrid===!0?1:0,interactive:p};l.setDisplayState(f)}function D(){var f;(f=a.onChange)==null||f.call(a,_())}function b(){var f;(f=a.onCropChange)==null||f.call(a,U())}w=new ResizeObserver(()=>{c||(y&&clearTimeout(y),y=setTimeout(()=>{y=null,!c&&(l==null||l.resize(),E(),l==null||l.markDirty())},16))}),w.observe(o);async function V(f){var M,L,X,O,F;if(c)return;const v=++S;(M=a.onLoadingChange)==null||M.call(a,!0,null);try{const Z=new Image;if(Z.crossOrigin="anonymous",await new Promise((J,It)=>{Z.onload=()=>J(),Z.onerror=()=>It(new Error(`Failed to load image: ${f}`)),Z.src=f}),c||v!==S)return;s=Z,(L=a.onLoadingChange)==null||L.call(a,!1,null),(X=a.onImageLoad)==null||X.call(a,Z),ct()}catch(Z){if(c||v!==S)return;const J=Z.message;(O=a.onLoadingChange)==null||O.call(a,!1,J),(F=a.onError)==null||F.call(a,Z)}}function ct(){var v,M;if(!s)return;e.variant==="fixed"?n={...n,cropRect:{...R}}:e.initialCrop||(n=ft(n,h,s.naturalWidth,s.naturalHeight));const f=!e.enableAnimations||typeof window<"u"&&((v=window.matchMedia)==null?void 0:v.call(window,"(prefers-reduced-motion: reduce)").matches);l=ee(r,s,A,e.borderRadius,f,o),l.setScaleBounds(e.minScale,e.maxScale),l.setFixedFrame(e.variant==="fixed"),l.setBleedConfig({show:e.showBleedMargin,size:e.bleedMarginSize,color:e.bleedMarginColor}),E(),l.startLoop(),$(),e.keyboard&&(g=fe(i,{onRotateLeft:()=>gt(),onFlipH:()=>mt(),onZoomIn:()=>et(n.scale+.1),onZoomOut:()=>et(n.scale-.1),onResetZoom:()=>et(1),onMoveCrop:(L,X)=>{if(e.variant==="fixed")return;const O=n.cropRect;n=j(n,{x:O.x+L,y:O.y+X,width:O.width,height:O.height}),E(),D(),b()},onRotateFine:L=>wt(n.rotation+L)})),(M=a.onReady)==null||M.call(a)}function $(){d=ie(r,{onPointerDown:(f,v)=>{const M=Date.now(),L=M-z,X=Math.sqrt((f.x-B)**2+(f.y-Y)**2);if(L<300&&X<20&&v.length===1){et(1),z=0;return}if(z=M,B=f.x,Y=f.y,v.length===2){H=le(v,n.scale),x=null,m=null;return}const O=l.getCanvasCropRect();let F=ht(f.x,f.y,O);e.variant==="fixed"&&(F.type==="handle"||F.type==="move-handle")&&(F={type:"crop-area"}),p=!0,F.type==="move-handle"?u={startX:f.x,startY:f.y,startRect:{...n.cropRect}}:F.type==="crop-area"?C={startX:f.x,startY:f.y,startPanX:n.panX,startPanY:n.panY}:F.type==="handle"&&F.position&&(m=se("handle-"+F.position,n.cropRect,f.x,f.y)),E()},onPointerMove:f=>{if(!s)return;const v=l.getCanvasCropRect();if(u){const{displayW:M,displayH:L}=Q();if(M>0&&L>0){const X=(f.x-u.startX)/M,O=(f.y-u.startY)/L;n=j(n,{x:u.startRect.x+X,y:u.startRect.y+O,width:u.startRect.width,height:u.startRect.height}),E(),D(),b()}return}if(C){const M=f.x-C.startX,L=f.y-C.startY,X=n.flipH?-1:1,O=n.flipV?-1:1;n={...n,panX:C.startPanX+X*M/n.scale,panY:C.startPanY+O*L/n.scale},E(),D();return}if(x){const{displayW:M,displayH:L}=Q(),X=ae(x,f.x,f.y,M,L);n=j(n,X),E(),D(),b();return}if(m){const{displayW:M,displayH:L}=Q(),X=ce(m,f.x,f.y,M,L,h,e.minCropSize,{shiftKey:f.shiftKey,altKey:f.altKey});n=j(n,X),E(),D(),b();return}if(e.variant==="fixed")r.style.cursor="grab";else{const M=ht(f.x,f.y,v);r.style.cursor=xt(M)}},onHover:f=>{if(!l)return;if(e.variant==="fixed"){r.style.cursor="grab";return}const v=l.getCanvasCropRect(),M=ht(f.x,f.y,v);r.style.cursor=xt(M)},onPointerUp:(f,v)=>{v.length<2&&(H=null),v.length===0&&(x=null,C=null,u=null,m=null,p=!1,B=0,Y=0,E())},onPinch:f=>{var X;H||(H={initialDistance:f.distance,initialScale:n.scale,initialCenterX:f.centerX,initialCenterY:f.centerY});const v=n.scale*(f.distance/H.initialDistance),M=f.centerX-H.initialCenterX,L=f.centerY-H.initialCenterY;n=tt(n,v,e.minScale,e.maxScale),n=Rt(n,M,L),(X=a.onScaleSync)==null||X.call(a,n.scale),E(),D()},onWheel:f=>{var Z,J;if(!e.wheelZoom)return;f.preventDefault();const v=r.getBoundingClientRect(),M=f.clientX-v.left,L=f.clientY-v.top,X=v.width/2,O=v.height/2,F=ue(f.deltaY,n.scale,{minScale:e.minScale,maxScale:e.maxScale,sensitivity:1},M,L,X,O);n=tt(n,F.scale,e.minScale,e.maxScale),n=Rt(n,F.panDeltaX,F.panDeltaY),(Z=a.onScaleSync)==null||Z.call(a,n.scale),(J=a.onWheelZoomActivity)==null||J.call(a),E(),D()}})}function Q(){return{displayW:o.clientWidth,displayH:o.clientHeight}}function nt(f){var v;c||h!==f&&(h=f,e.variant==="fixed"?n={...n,cropRect:{...R}}:n=ft(n,f,(s==null?void 0:s.naturalWidth)??1,(s==null?void 0:s.naturalHeight)??1),(v=a.onShapeSync)==null||v.call(a,f),E(),D(),b())}function Ht(f){c||(n=j(n,f),E(),D(),b())}function gt(){c||(n=Kt(n),E(),dt(i,n,h),D(),b())}function mt(){c||(n=Nt(n),E(),dt(i,n,h),D(),b())}function wt(f){var v;c||(n=ut(n,f),(v=a.onRotationSync)==null||v.call(a,f),E(),D())}function et(f){var v;c||(n=tt(n,f,e.minScale,e.maxScale),(v=a.onScaleSync)==null||v.call(a,n.scale),E(),D())}function Dt(){var f,v,M;c||(h=e.cropShape,n=St(e.cropShape,(s==null?void 0:s.naturalWidth)??1,(s==null?void 0:s.naturalHeight)??1),e.variant==="fixed"?n={...n,cropRect:{...R}}:e.initialCrop&&(n=j(n,e.initialCrop)),e.initialRotation&&(n=ut(n,e.initialRotation)),e.initialScale!==void 0&&e.initialScale!==1&&(n=tt(n,e.initialScale,e.minScale,e.maxScale)),(f=a.onRotationSync)==null||f.call(a,n.rotation),(v=a.onShapeSync)==null||v.call(a,e.cropShape),(M=a.onScaleSync)==null||M.call(a,n.scale),E(),dt(i,n,h),D(),b())}function lt(){if(!s)throw new Error("No image loaded");const{w:f,h:v}=q();return pe(s,n,e.maxOutputWidth,e.maxOutputHeight,h,e.borderRadius,f,v,e.variant)}async function Et(f,v){const M=lt();return me(M,f||e.outputType,v??e.outputQuality)}function Lt(f,v){try{return lt().toDataURL(f||e.outputType,v??e.outputQuality)}catch(M){const L=M instanceof Error?M:new Error(String(M));throw new Error(`Failed to export data URL: ${L.message}`)}}function Yt(){if(!s)throw new Error("No image loaded");return de(n,s.naturalWidth,s.naturalHeight)}function Xt(f){if(c)return;const v=e.src,M=e.variant;e=pt({...e,...f}),f.cropShape!==void 0&&nt(f.cropShape),f.variant!==void 0&&f.variant!==M&&(l==null||l.setFixedFrame(e.variant==="fixed"),e.variant==="fixed"?n={...n,cropRect:{...R}}:(l==null||l.setScaleBounds(e.minScale,e.maxScale),n=ft(n,h,(s==null?void 0:s.naturalWidth)??1,(s==null?void 0:s.naturalHeight)??1),n=tt({...n,panX:0,panY:0},e.initialScale??1,e.minScale,e.maxScale)),E(),D(),b()),f.src!==void 0&&f.src!==v&&V(f.src).catch(()=>{}),(f.showBleedMargin!==void 0||f.bleedMarginSize!==void 0||f.bleedMarginColor!==void 0)&&(l==null||l.setBleedConfig({show:e.showBleedMargin,size:e.bleedMarginSize,color:e.bleedMarginColor})),f.showGrid!==void 0&&E(),l==null||l.markDirty()}function Ft(){c||(c=!0,S++,l==null||l.destroy(),d==null||d.destroy(),g==null||g.destroy(),w==null||w.disconnect(),y&&(clearTimeout(y),y=null))}return{loadImage:V,getTransformState:_,getCropRect:U,setCropShape:nt,setCropRect:Ht,rotateLeft:gt,flipHorizontal:mt,setRotation:wt,setScale:et,reset:Dt,toCanvas:lt,toBlob:Et,toDataURL:Lt,toTransformParams:Yt,update:Xt,destroy:Ft}}function we(t={}){const r=T.useRef(null),i=T.useRef(null),o=T.useRef(null),a=T.useRef(t);a.current=t;const[e,h]=T.useState(()=>({quarterTurns:0,rotation:0,flipH:!1,flipV:!1,scale:1,panX:0,panY:0,cropRect:{x:0,y:0,width:1,height:1}})),[s,n]=T.useState({x:0,y:0,width:1,height:1}),[l,d]=T.useState(t.cropShape??"free"),[g,w]=T.useState(!1),[y,c]=T.useState(null),[p,S]=T.useState(!1);T.useEffect(()=>{const u=r.current,m=i.current;if(!u||!m)return;const H=a.current,z=pt(H),Y=Pt({canvas:u,host:m,layoutContainer:m,config:z,callbacks:{onReady:()=>S(!0),onImageLoad:()=>{},onError:A=>c(A.message),onChange:A=>h(A),onCropChange:A=>n(A),onShapeSync:A=>d(A),onLoadingChange:(A,_)=>{w(A),c(_)}}});return o.current=Y,H.src&&Y.loadImage(H.src).catch(()=>{}),()=>{S(!1),Y.destroy(),o.current=null}},[t.src]),T.useEffect(()=>{const u=o.current;if(!u)return;const{src:m,...H}=t;u.update(H)},[t.cropShape,t.minScale,t.maxScale,t.minCropSize,t.theme,t.showGrid,t.showBleedMargin,t.bleedMarginSize,t.bleedMarginColor,t.enableAnimations,t.keyboard,t.pinchZoom,t.wheelZoom]);const x=T.useMemo(()=>({loadImage:u=>o.current?o.current.loadImage(u):Promise.resolve(),rotateLeft:()=>{var u;return(u=o.current)==null?void 0:u.rotateLeft()},flipHorizontal:()=>{var u;return(u=o.current)==null?void 0:u.flipHorizontal()},setRotation:u=>{var m;return(m=o.current)==null?void 0:m.setRotation(u)},setScale:u=>{var m;return(m=o.current)==null?void 0:m.setScale(u)},setCropShape:u=>{var m;return(m=o.current)==null?void 0:m.setCropShape(u)},setCropRect:u=>{var m;return(m=o.current)==null?void 0:m.setCropRect(u)},reset:()=>{var u;return(u=o.current)==null?void 0:u.reset()}}),[]),C=T.useMemo(()=>({toCanvas:()=>{var u;return((u=o.current)==null?void 0:u.toCanvas())??null},toBlob:(u,m)=>o.current?o.current.toBlob(u,m):Promise.resolve(null),toDataURL:(u,m)=>{var H;return((H=o.current)==null?void 0:H.toDataURL(u,m))??null},toTransformParams:()=>{var u;return((u=o.current)==null?void 0:u.toTransformParams())??null},getController:()=>o.current}),[]);return{canvasRef:r,containerRef:i,state:e,cropRect:s,cropShape:l,scale:e.scale,rotation:e.rotation,loading:g,error:y,ready:p,actions:x,api:C}}exports.DEFAULT_CONFIG=Mt;exports.SfxCrop=Ot;exports.clamp=I;exports.createCropController=Pt;exports.getAspectRatio=st;exports.mergeConfig=pt;exports.parseRatio=Tt;exports.setupAria=he;exports.useSfxCrop=At;exports.useSfxCropController=we;
2
+ //# sourceMappingURL=index-B-csHwK2.cjs.map