react-image-section-mapper/dist/index.mjs

react-image-section-mapper is a React component that enables users to create interactive, resizable, and draggable sections on images. It is useful for image annotation, mapping hot zones, or interactive UI elements on images.

function e(e,t){if(t==null||t>e.length)t=e.length;for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function t(e){if(Array.isArray(e))return e}function n(t){if(Array.isArray(t))return e(t)}function r(e,t,n,r,o,i,a){try{var c=e[i](a);var u=c.value}catch(e){n(e);return}if(c.done){t(u)}else{Promise.resolve(u).then(r,o)}}function o(e){return function(){var t=this,n=arguments;return new Promise(function(o,i){var a=e.apply(t,n);function c(e){r(a,o,i,c,u,"next",e)}function u(e){r(a,o,i,c,u,"throw",e)}c(undefined)})}}function i(e,t,n){if(t in e){Object.defineProperty(e,t,{value:n,enumerable:true,configurable:true,writable:true})}else{e[t]=n}return e}function a(e){if(typeof Symbol!=="undefined"&&e[Symbol.iterator]!=null||e["@@iterator"]!=null)return Array.from(e)}function c(e,t){var n=e==null?null:typeof Symbol!=="undefined"&&e[Symbol.iterator]||e["@@iterator"];if(n==null)return;var r=[];var o=true;var i=false;var a,c;try{for(n=n.call(e);!(o=(a=n.next()).done);o=true){r.push(a.value);if(t&&r.length===t)break}}catch(e){i=true;c=e}finally{try{if(!o&&n["return"]!=null)n["return"]()}finally{if(i)throw c}}return r}function u(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function l(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function s(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};var r=Object.keys(n);if(typeof Object.getOwnPropertySymbols==="function"){r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))}r.forEach(function(t){i(e,t,n[t])})}return e}function d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);if(t){r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})}n.push.apply(n,r)}return n}function f(e,t){t=t!=null?t:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(e,Object.getOwnPropertyDescriptors(t))}else{d(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})}return e}function h(e,n){return t(e)||c(e,n)||b(e,n)||u()}function p(e){return n(e)||a(e)||b(e)||l()}function y(e){"@swc/helpers - typeof";return e&&typeof Symbol!=="undefined"&&e.constructor===Symbol?"symbol":typeof e}function b(t,n){if(!t)return;if(typeof t==="string")return e(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor)r=t.constructor.name;if(r==="Map"||r==="Set")return Array.from(r);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return e(t,n)}function g(e,t){var n,r,o,i,a={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),"throw":c(1),"return":c(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function c(e){return function(t){return u([e,t])}}function u(i){if(n)throw new TypeError("Generator is already executing.");while(a)try{if(n=1,r&&(o=i[0]&2?r["return"]:i[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;if(r=0,o)i=[i[0]&2,o.value];switch(i[0]){case 0:case 1:o=i;break;case 4:a.label++;return{value:i[1],done:false};case 5:a.label++;r=i[1];i=[0];continue;case 7:i=a.ops.pop();a.trys.pop();continue;default:if(!(o=a.trys,o=o.length>0&&o[o.length-1])&&(i[0]===6||i[0]===2)){a=0;continue}if(i[0]===3&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(i[0]===6&&a.label<o[1]){a.label=o[1];o=i;break}if(o&&a.label<o[2]){a.label=o[2];a.ops.push(i);break}if(o[2])a.ops.pop();a.trys.pop();continue}i=t.call(e,a)}catch(e){i=[6,e];r=0}finally{n=o=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}}import{useState as x,useCallback as v,useEffect as w}from"react";import{jsx as m}from"react/jsx-runtime";var M=function(e){var t=e.position,n=e.onMouseDown;return m("div",{style:{position:"absolute",width:"12px",height:"12px",backgroundColor:"white",border:"2px solid #3B82F6",borderRadius:"50%",cursor:t.length===2?"".concat(t,"-resize"):"".concat(t[0],"-resize"),top:t.includes("n")?"-1.5px":t.includes("s")?"calc(100% - 1.5px)":"calc(50% - 1.5px)",left:t.includes("w")?"-1.5px":t.includes("e")?"calc(100% - 1.5px)":"calc(50% - 1.5px)",zIndex:20},onMouseDown:n})};import{useRef as k,useCallback as S}from"react";var O=function(){var e=k(null),t=S(function(t){if(!e.current)return{x:0,y:0};var n=e.current.getBoundingClientRect();return{x:t.clientX-n.left,y:t.clientY-n.top}},[]);return{containerRef:e,getRelativeCoordinates:t}};var j=function(){return Math.random().toString(36).substr(2,9)},C=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:20;return e.width>=t&&e.height>=t},D=function(e){var t=s({},e);return t.width<0&&(t.x+=t.width,t.width=Math.abs(t.width)),t.height<0&&(t.y+=t.height,t.height=Math.abs(t.height)),t};import{Fragment as P,jsx as A,jsxs as E}from"react/jsx-runtime";var R={primary:"blue",secondary:"gray",danger:"red",success:"green"},I=function(e){var t=e.imageUrl,n=e.onSave,r=e.initialSections,i=r===void 0?[]:r,a=e.sectionTitlePrefix,c=a===void 0?"Section":a,u=e.className,l=u===void 0?"":u,d=e.controls,b=d===void 0?!0:d,m=e.theme,k=m===void 0?R:m,S=e.minSectionSize,I=S===void 0?20:S,z=e.maxSections,T=e.readOnly,U=T===void 0?!1:T,_=e.onSectionClick,L=e.onSectionHover;var B=h(x(i),2),F=B[0],W=B[1],X=h(x(!1),2),G=X[0],H=X[1],N=h(x(null),2),Y=N[0],$=N[1],q=h(x(null),2),J=q[0],K=q[1],Q=h(x(!1),2),V=Q[0],Z=Q[1],ee=h(x(!1),2),et=ee[0],en=ee[1],er=h(x(null),2),eo=er[0],ei=er[1],ea=h(x({x:0,y:0}),2),ec=ea[0],eu=ea[1],el=h(x(!1),2),es=el[0],ed=el[1],ef=O(),eh=ef.containerRef,ep=ef.getRelativeCoordinates,ey=v(function(){z&&F.length>=z||ed(!0)},[z,F.length]),eb=v(function(e){W(function(t){return t.filter(function(t,n){return n!==e})})},[]),eg=v(function(e,t){if(!U){if(!es&&typeof t=="number"){K(t);var n=ep(e),r=F[t];eu({x:n.x-r.x,y:n.y-r.y}),Z(!0),_&&_(F[t])}else if(es&&(typeof t==="undefined"?"undefined":y(t))>"u"){var o=ep(e);H(!0),$({id:j(),x:o.x,y:o.y,width:0,height:0,title:"".concat(c," ").concat(F.length+1),link:"#"})}}},[es,F,U,_,c,ep]),ex=v(function(e,t,n){U||(e.stopPropagation(),K(t),en(!0),ei(n),eu(ep(e)))},[U,ep]),ev=v(function(e){if(U)return;var t=ep(e);et&&J!==null&&eo?W(function(e){return e.map(function(e,n){if(n===J){var r=s({},e),o=t.x-ec.x,i=t.y-ec.y;switch(eo){case"e":r.width=Math.max(I,r.width+o);break;case"w":var a=Math.max(I,r.width-o);r.x+=r.width-a,r.width=a;break;case"s":r.height=Math.max(I,r.height+i);break;case"n":var c=Math.max(I,r.height-i);r.y+=r.height-c,r.height=c;break;case"se":r.width=Math.max(I,r.width+o),r.height=Math.max(I,r.height+i);break;case"sw":r.height=Math.max(I,r.height+i);var u=Math.max(I,r.width-o);r.x+=r.width-u,r.width=u;break;case"ne":r.width=Math.max(I,r.width+o);var l=Math.max(I,r.height-i);r.y+=r.height-l,r.height=l;break;case"nw":var d=Math.max(I,r.width-o),f=Math.max(I,r.height-i);r.x+=r.width-d,r.y+=r.height-f,r.width=d,r.height=f;break}return eu({x:t.x,y:t.y}),r}return e})}):V&&J!==null?W(function(e){return e.map(function(e,n){return n===J?f(s({},e),{x:t.x-ec.x,y:t.y-ec.y}):e})}):G&&Y&&$(function(e){return e?f(s({},e),{width:Math.abs(t.x-e.x),height:Math.abs(t.y-e.y)}):null})},[U,et,V,G,J,eo,Y,ec,I,ep]),ew=v(function(){if(G&&Y){var e=D(Y);C(e,I)&&W(function(t){return p(t).concat([e])}),H(!1),$(null),ed(!1)}Z(!1),en(!1),ei(null),K(null)},[G,Y,I]),em=v(/*#__PURE__*/o(function(){var e;return g(this,function(t){switch(t.label){case 0:e=n;if(!e)return[3,2];return[4,n(F)];case 1:e=t.sent();t.label=2;case 2:e;return[2]}})}),[F,n]),eM=v(function(e){L&&L(e)},[L]);return w(function(){var e=function(){ew(),eM(null)},t=eh.current;return t&&t.addEventListener("mouseleave",e),function(){t&&t.removeEventListener("mouseleave",e)}},[ew,eM,eh]),E("div",{style:{padding:"16px",gap:"16px",display:"flex",flexDirection:"column"},children:[b&&A("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:E("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[es&&A("span",{style:{color:k.success==="green"?"#16a34a":k.success},children:"Click and drag to create a new section"}),A("button",{onClick:ey,style:{padding:"16px",color:"white",borderRadius:"4px",backgroundColor:es?k.secondary==="gray"?"#6b7280":k.secondary:k.success==="green"?"#16a34a":k.success,cursor:"pointer",opacity:es||U?.5:1,pointerEvents:es||U?"none":"auto"},disabled:es||U,children:es?"Drawing Mode Active":"Add Section"})]})}),E("div",{ref:eh,style:{position:"relative",border:"1px solid #e5e7eb",borderRadius:"8px",overflow:"hidden",cursor:es?"crosshair":V?"move":"default"},onMouseDown:function(e){return eg(e)},onMouseMove:ev,onMouseUp:ew,children:[A("img",{src:t,alt:"Mapping sections",style:{maxWidth:"100%",height:"auto"},draggable:!1}),F.map(function(e,t){return E("div",{style:{position:"absolute",border:"2px solid ".concat(k.primary==="blue"?"#3b82f6":k.primary),backgroundColor:"".concat(k.primary==="blue"?"rgba(59, 130, 246, 0.2)":k.primary,"20"),left:"".concat(e.x,"px"),top:"".concat(e.y,"px"),width:"".concat(e.width,"px"),height:"".concat(e.height,"px")},onMouseDown:function(e){e.stopPropagation(),eg(e,t)},onMouseEnter:function(){return eM(e)},onMouseLeave:function(){return eM(null)},children:[A("span",{style:{position:"absolute",top:"0",left:"0",backgroundColor:k.primary==="blue"?"#3b82f6":k.primary,color:"white",fontSize:"12px",padding:"4px"},children:e.title}),!U&&A("button",{style:{position:"absolute",top:"0",right:"0",padding:"4px",backgroundColor:k.danger==="red"?"#ef4444":k.danger,color:"black",borderRadius:"0 0 0 4px"},onClick:function(e){e.stopPropagation(),eb(t)},children:A("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",width:"16px",height:"16px",fontSize:"16px",fontWeight:"bold",backgroundColor:"transparent",color:"black"},children:"X"})}),!U&&E(P,{children:[A(M,{position:"e",onMouseDown:function(e){return ex(e,t,"e")}}),A(M,{position:"w",onMouseDown:function(e){return ex(e,t,"w")}}),A(M,{position:"s",onMouseDown:function(e){return ex(e,t,"s")}}),A(M,{position:"n",onMouseDown:function(e){return ex(e,t,"n")}}),A(M,{position:"se",onMouseDown:function(e){return ex(e,t,"se")}}),A(M,{position:"sw",onMouseDown:function(e){return ex(e,t,"sw")}}),A(M,{position:"ne",onMouseDown:function(e){return ex(e,t,"ne")}}),A(M,{position:"nw",onMouseDown:function(e){return ex(e,t,"nw")}})]})]},e.id||t)}),Y&&A("div",{style:{position:"absolute",border:"2px solid ".concat(k.danger==="red"?"#ef4444":k.danger),backgroundColor:"".concat(k.danger==="red"?"rgba(239, 68, 68, 0.2)":k.danger,"20"),left:"".concat(Y.x,"px"),top:"".concat(Y.y,"px"),width:"".concat(Y.width,"px"),height:"".concat(Y.height,"px")}})]}),b&&E("div",{style:{display:"flex",gap:"16px"},children:[A("button",{onClick:function(){return W([])},style:{padding:"16px",border:"1px solid ".concat(k.secondary==="gray"?"#d1d5db":k.secondary),borderRadius:"4px",backgroundColor:k.secondary==="gray"?"#f3f4f6":k.secondary,cursor:"pointer",opacity:F.length===0||U?.5:1,pointerEvents:F.length===0||U?"none":"auto"},disabled:F.length===0||U,children:"Clear All"}),A("button",{onClick:em,style:{padding:"16px",backgroundColor:k.primary==="blue"?"#3b82f6":k.primary,color:"white",borderRadius:"4px",cursor:"pointer",opacity:F.length===0?.5:1,pointerEvents:F.length===0?"none":"auto"},disabled:F.length===0,children:"Save All Sections"})]})]})};export{I as ImageSectionMapper};