@bmunozg/react-image-area/dist/index.umd.js

React component to select multiple areas/regions of images.

(function(N,b){typeof exports=="object"&&typeof module<"u"?b(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],b):b((N=typeof globalThis<"u"?globalThis:N||self)["@bmunozg/react-image-area"]={},N.React)})(this,function(N,b){"use strict";var oe,Z={exports:{}},M={},se,V={};/**
   * @license React
   * react-jsx-runtime.development.js
   *
   * Copyright (c) Meta Platforms, Inc. and affiliates.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   */process.env.NODE_ENV==="production"?Z.exports=function(){if(oe)return M;oe=1;var t=Symbol.for("react.transitional.element"),l=Symbol.for("react.fragment");function m(C,j,S){var f=null;if(S!==void 0&&(f=""+S),j.key!==void 0&&(f=""+j.key),"key"in j)for(var k in S={},j)k!=="key"&&(S[k]=j[k]);else S=j;return j=S.ref,{$$typeof:t,type:C,key:f,ref:j!==void 0?j:null,props:S}}return M.Fragment=l,M.jsx=m,M.jsxs=m,M}():Z.exports=(se||(se=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===$?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case F:return"Fragment";case G:return"Profiler";case ne:return"StrictMode";case z:return"Suspense";case E:return"SuspenseList";case Q:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case re:return"Portal";case ae:return e.displayName||"Context";case ie:return(e._context.displayName||"Context")+".Consumer";case h:var r=e.render;return(e=e.displayName)||(e=(e=r.displayName||r.name||"")!==""?"ForwardRef("+e+")":"ForwardRef"),e;case W:return(r=e.displayName||null)!==null?r:t(e.type)||"Memo";case O:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function l(e){return""+e}function m(e){try{l(e);var r=!1}catch{r=!0}if(r){var n=(r=console).error,i=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",i),l(e)}}function C(e){if(e===F)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function j(){return Error("react-stack-top-frame")}function S(){var e=t(this.type);return o[e]||(o[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),(e=this.props.ref)!==void 0?e:null}function f(e,r,n,i,w,s){var v,p=r.children;if(p!==void 0)if(i)if(H(p)){for(i=0;i<p.length;i++)k(p[i]);Object.freeze&&Object.freeze(p)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else k(p);if(B.call(r,"key")){p=t(e);var x=Object.keys(r).filter(function(y){return y!=="key"});i=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",c[p+i]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,i,p,x,p),c[p+i]=!0)}if(p=null,n!==void 0&&(m(n),p=""+n),function(y){if(B.call(y,"key")){var _=Object.getOwnPropertyDescriptor(y,"key").get;if(_&&_.isReactWarning)return!1}return y.key!==void 0}(r)&&(m(r.key),p=""+r.key),"key"in r)for(var Y in n={},r)Y!=="key"&&(n[Y]=r[Y]);else n=r;return p&&function(y,_){function A(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",_))}A.isReactWarning=!0,Object.defineProperty(y,"key",{get:A,configurable:!0})}(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),function(y,_,A,U,J,a){var K=A.ref;return y={$$typeof:q,type:y,key:_,props:A,_owner:U},(K!==void 0?K:null)!==null?Object.defineProperty(y,"ref",{enumerable:!1,get:S}):Object.defineProperty(y,"ref",{enumerable:!1,value:null}),y._store={},Object.defineProperty(y._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(y,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(y,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.defineProperty(y,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(y.props),Object.freeze(y)),y}(e,p,n,(v=P.A)===null?null:v.getOwner(),w,s)}function k(e){L(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?L(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function L(e){return typeof e=="object"&&e!==null&&e.$$typeof===q}var D,I=b,q=Symbol.for("react.transitional.element"),re=Symbol.for("react.portal"),F=Symbol.for("react.fragment"),ne=Symbol.for("react.strict_mode"),G=Symbol.for("react.profiler"),ie=Symbol.for("react.consumer"),ae=Symbol.for("react.context"),h=Symbol.for("react.forward_ref"),z=Symbol.for("react.suspense"),E=Symbol.for("react.suspense_list"),W=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),Q=Symbol.for("react.activity"),$=Symbol.for("react.client.reference"),P=I.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,H=Array.isArray,R=console.createTask?console.createTask:function(){return null},o={},d=(I={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(I,j)(),u=R(C(j)),c={};V.Fragment=F,V.jsx=function(e,r,n){var i=1e4>P.recentlyCreatedOwnerStacks++;return f(e,r,n,!1,i?Error("react-stack-top-frame"):d,i?R(C(e)):u)},V.jsxs=function(e,r,n){var i=1e4>P.recentlyCreatedOwnerStacks++;return f(e,r,n,!0,i?Error("react-stack-top-frame"):d,i?R(C(e)):u)}}()),V);var g=Z.exports;const ee={x:0,y:0,width:0,height:0,unit:"px"};function le(t,l,m){return Math.min(Math.max(t,l),m)}const ce=(t,l,m,C)=>C==="pixel"?te(t,l,m):pe(t,l,m),pe=(t,l,m)=>t.unit==="%"?{...ee,...t,unit:"%"}:{unit:"%",x:t.x?t.x/l*100:0,y:t.y?t.y/m*100:0,width:t.width?t.width/l*100:0,height:t.height?t.height/m*100:0};function te(t,l,m){return t.unit?t.unit==="px"?{...ee,...t,unit:"px"}:{unit:"px",x:t.x?t.x*l/100:0,y:t.y?t.y*m/100:0,width:t.width?t.width*l/100:0,height:t.height?t.height*m/100:0}:{...ee,...t,unit:"px"}}const de=10,X={position:"absolute",outline:"1px solid rgba(0,0,0,0.5)",border:"1px solid rgba(255,255,255,0.5)",width:de,height:de},fe=()=>g.jsxs(b.Fragment,{children:[g.jsx("div",{"data-dir":"s","data-ord":"s",style:{...X,bottom:0,left:"50%",marginBottom:-5,marginLeft:-5,cursor:"s-resize"}}),g.jsx("div",{"data-dir":"n","data-ord":"n",style:{...X,top:0,left:"50%",marginTop:-5,marginLeft:-5,cursor:"n-resize"}}),g.jsx("div",{"data-dir":"w","data-ord":"w",style:{...X,top:"50%",left:0,marginTop:-5,marginLeft:-5,cursor:"w-resize"}}),g.jsx("div",{"data-dir":"e","data-ord":"e",style:{...X,top:"50%",right:0,marginTop:-5,marginRight:-5,cursor:"e-resize"}}),g.jsx("div",{"data-dir":"se","data-ord":"se",style:{...X,bottom:0,right:0,marginBottom:-5,marginRight:-5,cursor:"se-resize"}}),g.jsx("div",{"data-dir":"sw","data-ord":"sw",style:{...X,bottom:0,left:0,marginBottom:-5,marginLeft:-5,cursor:"sw-resize"}}),g.jsx("div",{"data-dir":"nw","data-ord":"nw",style:{...X,top:0,left:0,marginTop:-5,marginLeft:-5,cursor:"nw-resize"}}),g.jsx("div",{"data-dir":"ne","data-ord":"ne",style:{...X,top:0,right:0,marginTop:-5,marginRight:-5,cursor:"ne-resize"}})]}),ye=({area:t,onCropStart:l,showHandles:m,globalAreaStyle:C,customAreaRenderer:j,areaNumber:S})=>{const f={top:`${t.y}${t.unit}`,left:`${t.x}${t.unit}`,width:`${t.width}${t.unit}`,height:`${t.height}${t.unit}`};return g.jsxs("div",{style:{position:"absolute",border:"1px dashed rgba(0,0,0,0.5)",outline:"1px dashed rgba(255,255,255,0.5)",cursor:"move",boxSizing:"border-box",touchAction:"none",...f,...C,...t.areaStyle},onPointerDown:l,"data-wrapper":"wrapper",children:[j?j({...t,areaNumber:S}):null,m?g.jsx(fe,{}):null]})},ge=({areas:t})=>g.jsx("table",{style:{position:"absolute",right:0,top:8},children:g.jsx("tbody",{children:t.map((l,m)=>g.jsxs("tr",{children:[g.jsxs("td",{children:["x: ",Math.round(l.x)]}),g.jsxs("td",{children:["y: ",Math.round(l.y)]}),g.jsxs("td",{children:["width: ",Math.round(l.width)]}),g.jsxs("td",{children:["height: ",Math.round(l.height)]}),g.jsxs("td",{children:["unit: ",l.unit]})]},m))})}),ue=(t,l)=>t!==null&&(!!l(t)||ue(t.parentElement,l)),T={capture:!0,passive:!1},me=["e","w"],xe=["n","s"],be=["nw","ne","se","sw"];N.AreaSelector=({maxAreas:t=1/0,unit:l="pixel",minWidth:m=0,minHeight:C=0,debug:j=!1,children:S,areas:f,onChange:k,maxWidth:L,maxHeight:D,wrapperStyle:I,globalAreaStyle:q,customAreaRenderer:re,mediaWrapperClassName:F})=>{const ne=b.useRef(null),G=b.useRef(null),[ie,ae]=b.useState(0),[h,z]=b.useState({startClientX:0,startClientY:0,startAreaX:0,startAreaY:0,clientX:0,clientY:0,isResize:!1}),[E,W]=b.useState({areaChangeIndex:0,isChanging:!1}),O=()=>{const o=G.current;if(!o)return{x:0,y:0,width:0,height:0};const{x:d,y:u,width:c,height:e}=o.getBoundingClientRect();return{x:d,y:u,width:c,height:e}},Q=b.useCallback((o,d,u)=>{const c=d-o.x,e=u-o.y<h.startAreaY;return c<h.startAreaX?e?"nw":"sw":e?"ne":"se"},[h]),$=b.useCallback(o=>{const d=O();return te(o,d.width,d.height)},[]),P=b.useCallback((o,d,u)=>{const c=O(),e=$(o),r=d-h.startClientX,n=u-h.startClientY;return e.x=le(h.startAreaX+r,0,c.width-e.width),e.y=le(h.startAreaY+n,0,c.height-e.height),e},[h,$]),B=b.useCallback((o,d,u)=>{const c=O(),e=Q(c,d,u),r=$(o),n=h.ord?h.ord:e,i=d-h.startClientX,w=u-h.startClientY,s={unit:"px",x:0,y:0,width:0,height:0,isChanging:!0,isNew:!1};e==="ne"?(s.x=h.startAreaX,s.width=i,s.height=Math.abs(w),s.y=h.startAreaY-s.height):e==="se"?(s.x=h.startAreaX,s.y=h.startAreaY,s.width=i,s.height=w):e==="sw"?(s.x=h.startAreaX+i,s.y=h.startAreaY,s.width=Math.abs(i),s.height=w):e==="nw"&&(s.x=h.startAreaX+i,s.width=Math.abs(i),s.height=Math.abs(w),s.y=h.startAreaY+w);const v=function(p,x,Y,y,_=0,A=0,U=Y,J=y){const a={...p};a.y<0&&(a.height=Math.max(a.height+a.y,A),a.y=0),a.x<0&&(a.width=Math.max(a.width+a.x,_),a.x=0);const K=Y-(a.x+a.width);K<0&&(a.x=Math.min(a.x,Y-_),a.width+=K);const he=y-(a.y+a.height);return he<0&&(a.y=Math.min(a.y,y-A),a.height+=he),a.width<_&&(x!=="sw"&&x!=="nw"||(a.x-=_-a.width),a.width=_),a.height<A&&(x!=="nw"&&x!=="ne"||(a.y-=A-a.height),a.height=A),a.width>U&&(x!=="sw"&&x!=="nw"||(a.x-=U-a.width),a.width=U),a.height>J&&(x!=="nw"&&x!=="ne"||(a.y-=J-a.height),a.height=J),a}(s,e,c.width,c.height,m,C,L,D);return be.indexOf(n)>-1?(r.x=v.x,r.y=v.y,r.width=v.width,r.height=v.height):me.indexOf(n)>-1?(r.x=v.x,r.width=v.width):xe.indexOf(n)>-1&&(r.y=v.y,r.height=v.height),r},[h,Q,$,m,C,L,D]),H=b.useCallback(o=>{o.preventDefault(),o.stopPropagation();const{isChanging:d,areaChangeIndex:u}=E;if(!d)return;const c=O(),e=f[u],r=o.clientX,n=o.clientY;let i;if(z(v=>({...v,clientX:r,clientY:n})),i=h.isResize?B(e,r,n):P(e,r,n),s=i,(w=e).width!==s.width||w.height!==s.height||w.x!==s.x||w.y!==s.y||w.unit!==s.unit){const v=ce(i,c.width,c.height,l);k([...f.slice(0,u),{...v},...f.slice(u+1)])}var w,s},[E,f,h,P,k,l,B]),R=b.useCallback(o=>{o.preventDefault(),o.stopPropagation();const{isChanging:d,areaChangeIndex:u}=E;if(d){W({isChanging:!1,areaChangeIndex:-1}),z({startClientX:0,startClientY:0,startAreaX:0,startAreaY:0,clientX:0,clientY:0,isResize:!1});const c=f[u];k([...f.slice(0,u),{...c,isNew:!1,isChanging:!1},...f.slice(u+1)])}},[E,f,k]);return b.useEffect(()=>(document.addEventListener("pointermove",H,T),document.addEventListener("pointerup",R,T),document.addEventListener("pointercancel",R,T),()=>{document.removeEventListener("pointermove",H,T),document.removeEventListener("pointerup",R,T),document.removeEventListener("pointercancel",R,T)}),[H,R]),g.jsxs("div",{ref:ne,style:{position:"relative",display:"inline-block",cursor:"crosshair",boxSizing:"border-box",maxWidth:"100%",touchAction:"none",lineHeight:0,...I},children:[g.jsx("div",{ref:G,onPointerDown:o=>{const d=o.currentTarget;if(d.dataset.wrapper||d.dataset.direction||ue(d,w=>{var s;return!!((s=w.dataset)!=null&&s.wrapper)}))return;o.preventDefault(),o.stopPropagation();const u=O(),c=o.clientX-u.x,e=o.clientY-u.y,r={unit:"px",x:c,y:e,width:0,height:0,isChanging:!0,isNew:!0};z({startClientX:o.clientX,startClientY:o.clientY,startAreaX:c,startAreaY:e,clientX:o.clientX,clientY:o.clientY,isResize:!0}),ae(ie+1);const n=ce(r,u.width,u.height,l);let i;f.length<t?(k(f.concat(n)),i=f.length):(k([...f.slice(0,t-1),n]),i=t-1),W({areaChangeIndex:i,isChanging:!0})},style:{boxSizing:"border-box"},className:F,children:S}),f.map((o,d)=>g.jsx(ye,{area:o,showHandles:!o.isNew,onCropStart:u=>((c,e)=>{c.preventDefault(),c.stopPropagation();const r=O(),n=te(f[e],r.width,r.height),i=c.target.dataset.ord,w=!!i;let s=c.clientX,v=c.clientY,p=n.x,x=n.y;i&&(i==="ne"||i=="e"?(p=n.x,x=n.y+n.height):i==="se"||i==="s"?(p=n.x,x=n.y):i==="sw"||i=="w"?(p=n.x+n.width,x=n.y):i!=="nw"&&i!="n"||(p=n.x+n.width,x=n.y+n.height),s=p+r.x,v=x+r.y),z({startClientX:s,startClientY:v,startAreaX:p,startAreaY:x,clientX:c.clientX,clientY:c.clientY,isResize:w,ord:i}),W({isChanging:!0,areaChangeIndex:e})})(u,d),globalAreaStyle:q,customAreaRenderer:re,areaNumber:d+1},d)),j?g.jsx(ge,{areas:f}):null]})},Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})});