react-canvas-masker/dist/index.js

General-purpose mask editor for React image manipulation apps

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports["@3rchuss/react-canvas-masker"]=t(require("react")):e["@3rchuss/react-canvas-masker"]=t(e.React)}(self,e=>(()=>{"use strict";var t={156:function(e,t,a){var n=this&&this.__createBinding||(Object.create?function(e,t,a,n){void 0===n&&(n=a);var r=Object.getOwnPropertyDescriptor(t,a);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(e,n,r)}:function(e,t,a,n){void 0===n&&(n=a),e[n]=t[a]}),r=this&&this.__exportStar||function(e,t){for(var a in e)"default"===a||Object.prototype.hasOwnProperty.call(t,a)||n(t,e,a)};Object.defineProperty(t,"__esModule",{value:!0}),t.toMask=t.MaskEditor=void 0,a(479),r(a(693),t),r(a(831),t);var o=a(900);Object.defineProperty(t,"MaskEditor",{enumerable:!0,get:function(){return o.MaskEditor}});var s=a(185);Object.defineProperty(t,"toMask",{enumerable:!0,get:function(){return s.toMask}})},185:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.simpleDebounce=t.hexToRgb=t.toMask=void 0,t.toMask=e=>{const t=e.getContext("2d"),a={x:e.width,y:e.height},n=t?.getImageData(0,0,a.x,a.y),r=Uint8ClampedArray.from(n.data);if(n){for(let e=0;e<n.data.length;e+=4){const t=0===n.data[e]&&0===n.data[e+1]&&0===n.data[e+2]?[0,0,0]:[255,255,255];n.data[e]=t[0],n.data[e+1]=t[1],n.data[e+2]=t[2],n.data[e+3]=255}t?.putImageData(n,0,0)}const o=e.toDataURL();for(let e=0;e<n?.data.length;e++)n.data[e]=r[e];return t.putImageData(n,0,0),o},t.hexToRgb=e=>e.replace("#","").match(/.{1,2}/g).map(e=>parseInt(e,16)),t.simpleDebounce=function(e,t){let a=null;const n=(...n)=>{a&&clearTimeout(a),a=setTimeout(()=>e(...n),t)};return n.cancel=()=>{a&&clearTimeout(a),a=null},n}},222:function(e,t,a){var n=this&&this.__createBinding||(Object.create?function(e,t,a,n){void 0===n&&(n=a);var r=Object.getOwnPropertyDescriptor(t,a);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(e,n,r)}:function(e,t,a,n){void 0===n&&(n=a),e[n]=t[a]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var a in e)"default"!==a&&Object.prototype.hasOwnProperty.call(e,a)&&n(t,e,a);return r(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.useHistory=void 0;const s=o(a(775));t.useHistory=function(e,t,a={}){const{onUndoRequest:n,onRedoRequest:r,maxHistorySize:o=50}=a,[i,l]=s.useState([]),[u,c]=s.useState(-1),d=s.useCallback(()=>{if(e&&0!==t.x&&0!==t.y)try{const a={imageData:e.getImageData(0,0,t.x,t.y),timestamp:Date.now()};l(e=>{const t=e.slice(0,u+1);return t.push(a),t.slice(-o)}),c(e=>Math.min(e+1,o-1))}catch(e){console.warn("Failed to save history state:",e)}},[e,t,u,o]),f=s.useCallback(a=>{if(e&&0!==t.x&&0!==t.y&&!(a<-1||a>=i.length))return-1===a?(e.clearRect(0,0,t.x,t.y),void c(-1)):void(i[a]&&(e.putImageData(i[a].imageData,0,0),c(a)))},[i,e,t]),m=s.useCallback(()=>{f(u-1),n?.()},[f,u,n]),h=s.useCallback(()=>{i[u+1]&&(f(u+1),r?.())},[f,i,u,r]),y=s.useCallback(()=>{e&&0!==t.x&&0!==t.y&&(e.clearRect(0,0,t.x,t.y),l([]),c(-1))},[e,t]);return{history:i,historyIndex:u,saveToHistory:d,restoreFromHistory:f,undo:m,redo:h,clear:y}}},479:(e,t,a)=>{a.r(t)},584:function(e,t,a){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.useZoomPan=void 0;const r=n(a(775));t.useZoomPan=function(e,t,a={}){const{initialScale:n=1,minScale:o=.8,maxScale:s=4,enableWheelZoom:i=!0,constrainPan:l=!0,onScaleChange:u,onPanChange:c}=a,[d,f]=r.default.useState(n),[m,h]=r.default.useState({scale:n,translateX:0,translateY:0}),[y,g]=r.default.useState(!1),[v,p]=r.default.useState(!1),[k,b]=r.default.useState(!1),[x,M]=r.default.useState({x:0,y:0}),[w,E]=r.default.useState(1),S=r.default.useRef({x:0,y:0}),C=r.default.useRef({x:0,y:0}),D=r.default.useRef(w),P=r.default.useRef(d);r.default.useEffect(()=>{D.current=w},[w]),r.default.useEffect(()=>{P.current=d},[d]);const R=r.default.useMemo(()=>D.current*P.current,[D.current,P.current]),_=r.default.useCallback((a,n)=>{if(!e.current)return{x:0,y:0};const r=e.current.getBoundingClientRect(),o=r.width,s=r.height,i=a-r.left,l=n-r.top,u=m.scale*w,c=l-s/2,d=i-o/2-m.translateX*u,f=(c-m.translateY*u)/u;return{x:d/u+t.x/2,y:f+t.y/2}},[m.scale,m.translateX,m.translateY,w,t,e]),O=r.default.useCallback(()=>{if(!e.current||0===t.x||0===t.y)return{baseScale:1,containerWidth:0,containerHeight:0};const a=e.current,n=window.getComputedStyle(a),r=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight),o=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom),s=a.clientWidth-r,i=a.clientHeight-o,l=s/t.x,u=i/t.y;return{baseScale:Math.min(1,l,u),containerWidth:s,containerHeight:i}},[t,e]),L=r.default.useRef(!0);r.default.useEffect(()=>{if(!e.current)return;const a=e.current,n=new ResizeObserver(e=>{for(const n of e)n.target===a&&t.x>0&&t.y>0&&(L.current=!0,I())});return n.observe(a),()=>{n.disconnect()}},[e,t]);const I=r.default.useCallback(()=>{if(!e.current||0===t.x||0===t.y)return;C.current={...t};const{baseScale:a}=O();E(a),S.current={x:0,y:0},h({scale:1,translateX:0,translateY:0}),L.current=!1,u&&setTimeout(()=>{u(1)},0),c&&setTimeout(()=>{c(0,0)},0)},[t,e,O,u,c]);r.default.useLayoutEffect(()=>{e.current&&0!==t.x&&0!==t.y&&(L.current||Math.abs(C.current.x-t.x)>5||Math.abs(C.current.y-t.y)>5)&&I()},[t,I]);const T=r.default.useCallback((a,n,r)=>{if(!e.current)return;const o=e.current.getBoundingClientRect(),s=_(o.left+n,o.top+r),i=n-o.width/2,l=r-o.height/2,d=w*a,m=-((s.x-t.x/2)*d-i)/d,y=-((s.y-t.y/2)*d-l)/d;f(a),h({scale:a,translateX:m,translateY:y}),u?.(a),c?.(m,y)},[w,d,t,u,c,_]);r.default.useEffect(()=>{if(!i||!e.current)return;const t=e.current,a=e=>{if(!e.ctrlKey&&!e.metaKey)return;e.preventDefault();const a=t.getBoundingClientRect(),n=e.clientX-a.left,r=e.clientY-a.top,i=.01*-e.deltaY,l=Math.max(o,Math.min(s,d+i));l!==d&&T(l,n,r)};return t.addEventListener("wheel",a,{passive:!1}),()=>t.removeEventListener("wheel",a)},[d,o,s,i,e,T]);const z=r.default.useCallback(()=>{f(e=>{const t=Math.min(s,e+.2);return t!==e?(setTimeout(()=>{h(e=>({...e,scale:t})),u&&u(t)},0),t):e})},[s,u,h]),j=r.default.useCallback(()=>{f(e=>{const t=Math.max(o,e-.2);return t!==e?(setTimeout(()=>{h(e=>({...e,scale:t})),u&&u(t)},0),t):e})},[o,u,h]),K=r.default.useCallback(()=>{f(1),h({scale:1,translateX:0,translateY:0}),S.current={x:0,y:0},setTimeout(()=>{u&&u(1),c&&c(0,0)},0)},[u,c]),W=r.default.useCallback((a,n)=>{h(r=>{let o=a,s=n;if(l&&e.current){const e=.75*t.x,r=.75*t.y;o=Math.max(Math.min(a,e),-e),s=Math.max(Math.min(n,r),-r)}const i=c&&(r.translateX!==o||r.translateY!==s),u={...r,translateX:o,translateY:s};if(i){const e=o,t=s;setTimeout(()=>{c(e,t)},0)}return u})},[l,c,t,e]),H=r.default.useCallback(()=>{g(!1),p(!1),b(!1)},[]);return r.default.useEffect(()=>{const e=e=>{const t=e.target?.tagName;"INPUT"===t||"TEXTAREA"===t||e.target?.isContentEditable||("Space"===e.code&&m.scale>1&&(e.preventDefault(),!v&&m.scale>1&&p(!0)),!e.ctrlKey&&!e.metaKey||k||b(!0))},t=e=>{"Space"===e.code&&(e.preventDefault(),p(!1),g(!1)),e.ctrlKey||e.metaKey||!k||b(!1)};return window.addEventListener("keydown",e),window.addEventListener("keyup",t),window.addEventListener("blur",H),()=>{window.removeEventListener("keydown",e),window.removeEventListener("keyup",t),window.removeEventListener("blur",H)}},[v,k,m.scale,H]),r.default.useEffect(()=>{if(!e.current||m.scale<=1)return;const t=e.current,a=e=>{(1===e.button||0===e.button&&v)&&(e.preventDefault(),g(!0),M({x:e.clientX,y:e.clientY}),document.body.classList.add("panning-active"))},n=e=>{if(!y)return;e.preventDefault();const t=(e.clientX-x.x)/m.scale,a=(e.clientY-x.y)/m.scale;W(m.translateX+t,m.translateY+a),M({x:e.clientX,y:e.clientY})},r=()=>{y&&(g(!1),document.body.classList.remove("panning-active"))},o=()=>{y&&(g(!1),document.body.classList.remove("panning-active"))};return t.addEventListener("mousedown",a),window.addEventListener("mousemove",n),window.addEventListener("mouseup",r),t.addEventListener("mouseleave",o),()=>{t.removeEventListener("mousedown",a),window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",r),t.removeEventListener("mouseleave",o)}},[y,v,x,m.scale,m.translateX,m.translateY,W,e]),r.default.useEffect(()=>{m.scale<=1&&W(0,0)},[m.scale,W]),[{scale:d,transform:m,baseScale:w,effectiveScale:R,isPanning:y,isSpaceKeyDown:v,isZoomKeyDown:k},{setScale:f,resetZoom:K,setPan:W,getImageCoordinates:_,zoomIn:z,zoomOut:j}]}},693:function(e,t,a){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.useMaskEditor=t.MaskEditorDefaults=void 0;const r=n(a(775)),o=a(185),s=a(222),i=a(584);t.MaskEditorDefaults={cursorSize:10,maskOpacity:.4,maskColor:"#ffffff",maskBlendMode:"normal",scale:1,minScale:.8,maxScale:4,enableWheelZoom:!0,constrainPan:!0},t.useMaskEditor=function(e){const{src:a,crossOrigin:n,maxWidth:l=1240,maxHeight:u=1240,cursorSize:c=t.MaskEditorDefaults.cursorSize,maskColor:d=t.MaskEditorDefaults.maskColor,maskBlendMode:f=t.MaskEditorDefaults.maskBlendMode,maskOpacity:m=t.MaskEditorDefaults.maskOpacity,onCursorSizeChange:h,onDrawingChange:y,onUndoRequest:g,onRedoRequest:v,onMaskChange:p,scale:k=t.MaskEditorDefaults.scale,minScale:b=t.MaskEditorDefaults.minScale,maxScale:x=t.MaskEditorDefaults.maxScale,onScaleChange:M,enableWheelZoom:w=t.MaskEditorDefaults.enableWheelZoom,onPanChange:E,constrainPan:S=t.MaskEditorDefaults.constrainPan}=e,C=r.default.useMemo(()=>{if(p)return(0,o.simpleDebounce)(e=>{p(e)},300)},[p]),D=r.default.useRef(null),P=r.default.useRef(null),R=r.default.useRef(null),_=r.default.useRef(null),[O,L]=r.default.useState(null),[I,T]=r.default.useState(null),[z,j]=r.default.useState(null),[K,W]=r.default.useState({x:0,y:0}),[H,X]=r.default.useState(!1),[Y,Z]=r.default.useState(c),[F,U]=r.default.useState(0),[q,B]=(0,i.useZoomPan)(_,K,{initialScale:k,minScale:b,maxScale:x,enableWheelZoom:w,constrainPan:S,onScaleChange:M,onPanChange:E}),N=(0,s.useHistory)(I,K,{onUndoRequest:g,onRedoRequest:v,maxHistorySize:50});r.default.useEffect(()=>{const e=e=>{if(!_.current||q.isPanning)return;const{x:t,y:a}=B.getImageCoordinates(e.clientX,e.clientY);z&&(z.clearRect(0,0,K.x,K.y),z.beginPath(),z.fillStyle=d,z.strokeStyle="#000",z.lineWidth=1,z.globalAlpha=m+.1,z.arc(t,a,Y,0,2*Math.PI),z.fill(),z.stroke()),I&&e.buttons>0&&!q.isPanning&&!q.isSpaceKeyDown&&(I.beginPath(),I.fillStyle=e.buttons>1||e.shiftKey?"#ffffff":d,I.arc(t,a,Y,0,2*Math.PI),I.fill())},t=e=>{if(!e.ctrlKey&&!e.metaKey&&z&&_.current){const{x:t,y:a}=B.getImageCoordinates(e.clientX,e.clientY),n=Math.max(1,Y+(e.deltaY>0?-1:1));Z(n),h?.(n),z.clearRect(0,0,K.x,K.y),z.beginPath(),z.fillStyle=d,z.strokeStyle="#000",z.lineWidth=1,z.globalAlpha=m+.1,z.arc(t,a,n,0,2*Math.PI),z.fill(),z.stroke(),e.stopPropagation(),e.preventDefault()}},a=R.current;return a&&(a.addEventListener("mousemove",e),h&&a.addEventListener("wheel",t,{passive:!1})),()=>{a&&(a.removeEventListener("mousemove",e),h&&a.removeEventListener("wheel",t))}},[z,I,Y,d,K,q,B,h,m]),r.default.useLayoutEffect(()=>{D.current&&!O&&L(D.current.getContext("2d",{willReadFrequently:!0}))},[D,O]),r.default.useLayoutEffect(()=>{if(P.current&&!I){const e=P.current.getContext("2d",{willReadFrequently:!0});e&&(e.fillStyle="#ffffff",e.fillRect(0,0,K.x,K.y)),T(e)}},[P,K,I]),r.default.useLayoutEffect(()=>{R.current&&!z&&j(R.current.getContext("2d",{willReadFrequently:!0}))},[R,z]);const A=r.default.useCallback(e=>{if(0===e.width||0===e.height||0===e.naturalWidth||0===e.naturalHeight){if(!(e.naturalWidth>0&&e.naturalHeight>0))return void W({x:300,y:200});e.width=e.naturalWidth,e.height=e.naturalHeight}let t=e.width||e.naturalWidth,a=e.height||e.naturalHeight;if(t>l||a>u){const e=l/t,n=u/a,r=Math.min(e,n);t=Math.round(t*r),a=Math.round(a*r)}t=Math.max(t,50),a=Math.max(a,50),W({x:t,y:a}),[D,P,R].forEach(e=>{e.current&&(e.current.width=t,e.current.height=a)});let n=0;const r=()=>{n++;try{if(!D.current)return void console.error("[MaskEditor] Canvas ref is null during draw");const o=D.current.getContext("2d",{willReadFrequently:!0,alpha:!0});if(!o)return void console.error("[MaskEditor] Failed to get canvas context");o.fillStyle="#f8f8f8",o.fillRect(0,0,t,a),o.strokeStyle="#000000",o.lineWidth=1,o.strokeRect(0,0,t,a);try{o.drawImage(e,0,0,t,a);if(!(o.getImageData(Math.floor(t/2),Math.floor(a/2),1,1).data[3]>0)&&n<3)return void setTimeout(r,100*n)}catch(t){console.error("[MaskEditor] Error drawing image on canvas:",t),e.complete?n<3&&setTimeout(r,200*n):n<3&&setTimeout(r,500)}}catch(e){console.error("[MaskEditor] Error getting canvas context:",e)}};setTimeout(r,50),U(e=>e+1)},[l,u]);r.default.useEffect(()=>((async()=>{if(!a)return void console.error("[MaskEditor] No source provided for image");const e=new window.Image;e.crossOrigin=n||"anonymous",e.onload=()=>{setTimeout(()=>{A(e)},50)},e.onerror=()=>{a.startsWith("http")?(console.log("[MaskEditor] This appears to be a remote URL. CORS issues could be preventing the image from loading."),console.log("[MaskEditor] Make sure the server allows CORS with: Access-Control-Allow-Origin header")):a.startsWith("data:")?console.log("[MaskEditor] This appears to be a data URL. Verify it's not corrupted or too large."):console.log("[MaskEditor] This appears to be a local path. Verify the path is correct and accessible."),W({x:300,y:200})};try{if(a.startsWith("http"))try{const t=await(async e=>{const t=await fetch(e);if(!t.ok)throw new Error(`Failed to fetch image: ${t.statusText}`);const a=await t.blob();return new Promise((e,t)=>{const n=new FileReader;n.onloadend=()=>e(n.result),n.onerror=t,n.readAsDataURL(a)})})(a);e.src=t}catch(t){console.error("[MaskEditor] Failed to fetch image via fetch API, falling back to direct load:",t),e.src=a}else a.startsWith("data:"),e.src=a}catch(e){console.error("[MaskEditor] Unexpected error during image load initialization:",e),W({x:300,y:200})}})(),()=>{}),[a,n,A]),r.default.useEffect(()=>{Z(c)},[c]);const $=r.default.useCallback((e,t)=>{if(!I)return;if(0===K.x||0===K.y)return;const a=I.getImageData(0,0,K.x,K.y),n=(0,o.hexToRgb)(e);if(a&&n){for(let e=0;e<a.data.length;e+=4){const r=255===a.data[e]!=t?[255,255,255]:n;a.data[e]=r[0],a.data[e+1]=r[1],a.data[e+2]=r[2]}I.putImageData(a,0,0)}},[I,K,d]);r.default.useEffect(()=>{$(d,!1)},[d,K,$]);const V=r.default.useCallback(e=>{if(e.preventDefault(),q.isPanning||q.isSpaceKeyDown)return;const{x:t,y:a}=B.getImageCoordinates(e.nativeEvent.clientX,e.nativeEvent.clientY);I&&(I.beginPath(),I.fillStyle=e.buttons>1||e.shiftKey?"#ffffff":d,I.arc(t,a,Y,0,2*Math.PI),I.fill()),X(!0)},[B,q,I,Y,d]),G=r.default.useCallback(e=>{e.preventDefault(),q.isPanning||q.isSpaceKeyDown||(X(!1),setTimeout(()=>{N.saveToHistory(),p&&P.current&&p((0,o.toMask)(P.current))},0))},[N,p,P]);r.default.useEffect(()=>{y(H)},[H,y]),r.default.useEffect(()=>{if(p&&P.current)return H&&C&&C((0,o.toMask)(P.current)),()=>{C&&C.cancel()}},[H,P,p,C]);const J=r.default.useCallback(()=>{N.undo(),p&&P.current&&p((0,o.toMask)(P.current))},[N,p,P]),Q=r.default.useCallback(()=>{N.redo(),p&&P.current&&p((0,o.toMask)(P.current))},[N,p,P]),ee=r.default.useCallback(()=>{N.clear(),p&&P.current&&p((0,o.toMask)(P.current))},[N,p,P]);return r.default.useEffect(()=>{const e=e=>{const t=e.target?.tagName;"INPUT"===t||"TEXTAREA"===t||e.target?.isContentEditable||(!e.ctrlKey&&!e.metaKey||e.shiftKey||"z"!==e.key.toLowerCase()?(e.ctrlKey||e.metaKey)&&("y"===e.key.toLowerCase()||e.shiftKey&&"z"===e.key.toLowerCase())&&(e.preventDefault(),Q()):(e.preventDefault(),J()))};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[J,Q]),{canvasRef:D,clear:ee,containerRef:_,cursorCanvasRef:R,cursorSize:Y,effectiveScale:q.effectiveScale,handleMouseDown:V,handleMouseUp:G,history:N.history,historyIndex:N.historyIndex,isDrawing:H,isPanning:q.isPanning,isZoomKeyDown:q.isZoomKeyDown,key:F,maskBlendMode:f,maskCanvasRef:P,maskColor:d,maskOpacity:m,redo:Q,resetZoom:B.resetZoom,scale:q.scale,setCursorSize:Z,setPan:B.setPan,setScale:B.setScale,size:K,transform:q.transform,undo:J,zoomIn:B.zoomIn,zoomOut:B.zoomOut}}},775:t=>{t.exports=e},831:function(e,t,a){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.useMaskEditorContext=t.MaskEditorProvider=void 0;const r=n(a(775)),o=a(693),s=r.default.createContext(void 0);t.MaskEditorProvider=({children:e,...t})=>{const a=(0,o.useMaskEditor)(t);return r.default.createElement(s.Provider,{value:a},e)},t.useMaskEditorContext=function(){const e=r.default.useContext(s);if(!e)throw new Error("useMaskEditorContext must be used within a MaskEditorProvider");return e}},900:function(e,t,a){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.MaskEditor=void 0;const r=n(a(775));a(479);const o=a(693);t.MaskEditor=e=>{const{canvasRef:t,maxWidth:a=1240,maxHeight:n=1240,...s}=e,{canvasRef:i,clear:l,cursorCanvasRef:u,handleMouseDown:c,handleMouseUp:d,key:f,maskBlendMode:m,maskCanvasRef:h,maskOpacity:y,redo:g,size:v,undo:p,scale:k,transform:b,containerRef:x,resetZoom:M,isPanning:w,isZoomKeyDown:E,setPan:S,effectiveScale:C,zoomIn:D,zoomOut:P}=(0,o.useMaskEditor)(s);r.default.useImperativeHandle(t,()=>({maskCanvas:h.current,undo:p,redo:g,clear:l,resetZoom:M,setPan:S,zoomIn:D,zoomOut:P}),[h,p,g,l,M,S,D,P]);const R=r.default.useMemo(()=>({position:"absolute",top:"50%",left:"50%",transform:`translate(-50%, -50%) scale(${C}) translate(${b.translateX}px, ${b.translateY}px)`,transformOrigin:"center",transition:w?"none":"transform 0.15s ease-out",width:v.x+"px",height:v.y+"px",display:"block"}),[b,C,w,v]),_=r.default.useMemo(()=>w?"grabbing":E?"zoom-in":k>1&&w?"grab":"default",[w,k,E]),O=r.default.useCallback(e=>{"Space"===e.code&&e.preventDefault()},[]),L=r.default.useMemo(()=>Math.random().toString(36).substring(2,9),[]);return r.default.createElement("div",{className:"react-mask-editor-outer","data-mask-editor-id":L,style:{maxWidth:`${a}px`,maxHeight:`${n}px`,minHeight:"300px",width:"100%",height:"100%"},tabIndex:0,onKeyDown:O},r.default.createElement("div",{className:"react-mask-editor-inner",ref:x,style:{width:"100%",height:"100%",overflow:"hidden",position:"relative",display:"flex",justifyContent:"center",alignItems:"center"}},r.default.createElement("div",{className:"canvas-container",style:{position:"relative",maxWidth:"100%",maxHeight:"100%",width:"100%",height:"100%",minHeight:"200px",overflow:"hidden"}},r.default.createElement("div",{className:"all-canvases",style:{...R}},r.default.createElement("canvas",{key:f,ref:i,style:{width:v.x,height:v.y,display:"block"},width:v.x,height:v.y,className:"react-mask-editor-base-canvas"}),r.default.createElement("canvas",{ref:h,width:v.x,height:v.y,style:{width:v.x,height:v.y,opacity:y,mixBlendMode:m,position:"absolute",top:0,left:0,pointerEvents:"none"},className:"react-mask-editor-mask-canvas"}),r.default.createElement("canvas",{ref:u,width:v.x,height:v.y,onMouseUp:d,onMouseDown:c,style:{width:v.x,height:v.y,cursor:_,position:"absolute",top:0,left:0,zIndex:200},className:"react-mask-editor-cursor-canvas"})))))}}},a={};function n(e){var r=a[e];if(void 0!==r)return r.exports;var o=a[e]={exports:{}};return t[e].call(o.exports,o,o.exports,n),o.exports}return n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n(156)})());