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

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.

"use strict";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 u=e[i](a);var c=u.value}catch(e){n(e);return}if(u.done){t(c)}else{Promise.resolve(c).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 u(e){r(a,o,i,u,c,"next",e)}function c(e){r(a,o,i,u,c,"throw",e)}u(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 u(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,u;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;u=e}finally{try{if(!o&&n["return"]!=null)n["return"]()}finally{if(i)throw u}}return r}function c(){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 p(e,n){return t(e)||u(e,n)||b(e,n)||c()}function h(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:u(0),"throw":u(1),"return":u(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function u(e){return function(t){return c([e,t])}}function c(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}}}var x=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var j=function(e,t){for(var n in t)x(e,n,{get:t[n],enumerable:!0})},S=function(e,t,n,r){var o=true,i=false,a=undefined;if(t&&(typeof t==="undefined"?"undefined":y(t))=="object"||typeof t=="function")try{var u=function(){var o=l.value;!m.call(e,o)&&o!==n&&x(e,o,{get:function(){return t[o]},enumerable:!(r=v(t,o))||r.enumerable})};for(var c=w(t)[Symbol.iterator](),l;!(o=(l=c.next()).done);o=true)u()}catch(e){i=true;a=e}finally{try{if(!o&&c.return!=null){c.return()}}finally{if(i){throw a}}}return e};var k=function(e){return S(x({},"__esModule",{value:!0}),e)};var M={};j(M,{ImageSectionMapper:function(){return q}});module.exports=k(M);var O=require("react");var C=require("react/jsx-runtime"),P=function(e){var t=e.position,n=e.onMouseDown;return(0,C.jsx)("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})};var D=require("react"),A=function(){var e=(0,D.useRef)(null),t=(0,D.useCallback)(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 E=function(){return Math.random().toString(36).substr(2,9)},R=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:20;return e.width>=t&&e.height>=t},I=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};var z=require("react/jsx-runtime"),_={primary:"blue",secondary:"gray",danger:"red",success:"green"},q=function(e){var t=e.imageUrl,n=e.onSave,r=e.initialSections,i=r===void 0?[]:r,a=e.sectionTitlePrefix,u=a===void 0?"Section":a,c=e.className,l=c===void 0?"":c,d=e.controls,b=d===void 0?!0:d,x=e.theme,v=x===void 0?_:x,w=e.minSectionSize,m=w===void 0?20:w,j=e.maxSections,S=e.readOnly,k=S===void 0?!1:S,M=e.onSectionClick,C=e.onSectionHover;var D=p((0,O.useState)(i),2),q=D[0],T=D[1],U=p((0,O.useState)(!1),2),L=U[0],B=U[1],F=p((0,O.useState)(null),2),N=F[0],W=F[1],X=p((0,O.useState)(null),2),G=X[0],H=X[1],Y=p((0,O.useState)(!1),2),$=Y[0],J=Y[1],K=p((0,O.useState)(!1),2),Q=K[0],V=K[1],Z=p((0,O.useState)(null),2),ee=Z[0],et=Z[1],en=p((0,O.useState)({x:0,y:0}),2),er=en[0],eo=en[1],ei=p((0,O.useState)(!1),2),ea=ei[0],eu=ei[1],ec=A(),el=ec.containerRef,es=ec.getRelativeCoordinates,ed=(0,O.useCallback)(function(){j&&q.length>=j||eu(!0)},[j,q.length]),ef=(0,O.useCallback)(function(e){T(function(t){return t.filter(function(t,n){return n!==e})})},[]),ep=(0,O.useCallback)(function(e,t){if(!k){if(!ea&&typeof t=="number"){H(t);var n=es(e),r=q[t];eo({x:n.x-r.x,y:n.y-r.y}),J(!0),M&&M(q[t])}else if(ea&&(typeof t==="undefined"?"undefined":y(t))>"u"){var o=es(e);B(!0),W({id:E(),x:o.x,y:o.y,width:0,height:0,title:"".concat(u," ").concat(q.length+1),link:"#"})}}},[ea,q,k,M,u,es]),eh=(0,O.useCallback)(function(e,t,n){k||(e.stopPropagation(),H(t),V(!0),et(n),eo(es(e)))},[k,es]),ey=(0,O.useCallback)(function(e){if(k)return;var t=es(e);Q&&G!==null&&ee?T(function(e){return e.map(function(e,n){if(n===G){var r=s({},e),o=t.x-er.x,i=t.y-er.y;switch(ee){case"e":r.width=Math.max(m,r.width+o);break;case"w":var a=Math.max(m,r.width-o);r.x+=r.width-a,r.width=a;break;case"s":r.height=Math.max(m,r.height+i);break;case"n":var u=Math.max(m,r.height-i);r.y+=r.height-u,r.height=u;break;case"se":r.width=Math.max(m,r.width+o),r.height=Math.max(m,r.height+i);break;case"sw":r.height=Math.max(m,r.height+i);var c=Math.max(m,r.width-o);r.x+=r.width-c,r.width=c;break;case"ne":r.width=Math.max(m,r.width+o);var l=Math.max(m,r.height-i);r.y+=r.height-l,r.height=l;break;case"nw":var d=Math.max(m,r.width-o),f=Math.max(m,r.height-i);r.x+=r.width-d,r.y+=r.height-f,r.width=d,r.height=f;break}return eo({x:t.x,y:t.y}),r}return e})}):$&&G!==null?T(function(e){return e.map(function(e,n){return n===G?f(s({},e),{x:t.x-er.x,y:t.y-er.y}):e})}):L&&N&&W(function(e){return e?f(s({},e),{width:Math.abs(t.x-e.x),height:Math.abs(t.y-e.y)}):null})},[k,Q,$,L,G,ee,N,er,m,es]),eb=(0,O.useCallback)(function(){if(L&&N){var e=I(N);R(e,m)&&T(function(t){return h(t).concat([e])}),B(!1),W(null),eu(!1)}J(!1),V(!1),et(null),H(null)},[L,N,m]),eg=(0,O.useCallback)(/*#__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(q)];case 1:e=t.sent();t.label=2;case 2:e;return[2]}})}),[q,n]),ex=(0,O.useCallback)(function(e){C&&C(e)},[C]);return(0,O.useEffect)(function(){var e=function(){eb(),ex(null)},t=el.current;return t&&t.addEventListener("mouseleave",e),function(){t&&t.removeEventListener("mouseleave",e)}},[eb,ex,el]),(0,z.jsxs)("div",{style:{padding:"16px",gap:"16px",display:"flex",flexDirection:"column"},children:[b&&(0,z.jsx)("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:(0,z.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[ea&&(0,z.jsx)("span",{style:{color:v.success==="green"?"#16a34a":v.success},children:"Click and drag to create a new section"}),(0,z.jsx)("button",{onClick:ed,style:{padding:"16px",color:"white",borderRadius:"4px",backgroundColor:ea?v.secondary==="gray"?"#6b7280":v.secondary:v.success==="green"?"#16a34a":v.success,cursor:"pointer",opacity:ea||k?.5:1,pointerEvents:ea||k?"none":"auto"},disabled:ea||k,children:ea?"Drawing Mode Active":"Add Section"})]})}),(0,z.jsxs)("div",{ref:el,style:{position:"relative",border:"1px solid #e5e7eb",borderRadius:"8px",overflow:"hidden",cursor:ea?"crosshair":$?"move":"default"},onMouseDown:function(e){return ep(e)},onMouseMove:ey,onMouseUp:eb,children:[(0,z.jsx)("img",{src:t,alt:"Mapping sections",style:{maxWidth:"100%",height:"auto"},draggable:!1}),q.map(function(e,t){return(0,z.jsxs)("div",{style:{position:"absolute",border:"2px solid ".concat(v.primary==="blue"?"#3b82f6":v.primary),backgroundColor:"".concat(v.primary==="blue"?"rgba(59, 130, 246, 0.2)":v.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(),ep(e,t)},onMouseEnter:function(){return ex(e)},onMouseLeave:function(){return ex(null)},children:[(0,z.jsx)("span",{style:{position:"absolute",top:"0",left:"0",backgroundColor:v.primary==="blue"?"#3b82f6":v.primary,color:"white",fontSize:"12px",padding:"4px"},children:e.title}),!k&&(0,z.jsx)("button",{style:{position:"absolute",top:"0",right:"0",padding:"4px",backgroundColor:v.danger==="red"?"#ef4444":v.danger,color:"black",borderRadius:"0 0 0 4px"},onClick:function(e){e.stopPropagation(),ef(t)},children:(0,z.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",width:"16px",height:"16px",fontSize:"16px",fontWeight:"bold",backgroundColor:"transparent",color:"black"},children:"X"})}),!k&&(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(P,{position:"e",onMouseDown:function(e){return eh(e,t,"e")}}),(0,z.jsx)(P,{position:"w",onMouseDown:function(e){return eh(e,t,"w")}}),(0,z.jsx)(P,{position:"s",onMouseDown:function(e){return eh(e,t,"s")}}),(0,z.jsx)(P,{position:"n",onMouseDown:function(e){return eh(e,t,"n")}}),(0,z.jsx)(P,{position:"se",onMouseDown:function(e){return eh(e,t,"se")}}),(0,z.jsx)(P,{position:"sw",onMouseDown:function(e){return eh(e,t,"sw")}}),(0,z.jsx)(P,{position:"ne",onMouseDown:function(e){return eh(e,t,"ne")}}),(0,z.jsx)(P,{position:"nw",onMouseDown:function(e){return eh(e,t,"nw")}})]})]},e.id||t)}),N&&(0,z.jsx)("div",{style:{position:"absolute",border:"2px solid ".concat(v.danger==="red"?"#ef4444":v.danger),backgroundColor:"".concat(v.danger==="red"?"rgba(239, 68, 68, 0.2)":v.danger,"20"),left:"".concat(N.x,"px"),top:"".concat(N.y,"px"),width:"".concat(N.width,"px"),height:"".concat(N.height,"px")}})]}),b&&(0,z.jsxs)("div",{style:{display:"flex",gap:"16px"},children:[(0,z.jsx)("button",{onClick:function(){return T([])},style:{padding:"16px",border:"1px solid ".concat(v.secondary==="gray"?"#d1d5db":v.secondary),borderRadius:"4px",backgroundColor:v.secondary==="gray"?"#f3f4f6":v.secondary,cursor:"pointer",opacity:q.length===0||k?.5:1,pointerEvents:q.length===0||k?"none":"auto"},disabled:q.length===0||k,children:"Clear All"}),(0,z.jsx)("button",{onClick:eg,style:{padding:"16px",backgroundColor:v.primary==="blue"?"#3b82f6":v.primary,color:"white",borderRadius:"4px",cursor:"pointer",opacity:q.length===0?.5:1,pointerEvents:q.length===0?"none":"auto"},disabled:q.length===0,children:"Save All Sections"})]})]})};0&&(module.exports={ImageSectionMapper:ImageSectionMapper});