react-mask-editor/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["@la-voliere/react-mask-editor"]=t(require("react")):e["@la-voliere/react-mask-editor"]=t(e.react)}(self,(e=>(()=>{"use strict";var t={392:(e,t,a)=>{a.r(t)},607:function(e,t,a){var r=this&&this.__createBinding||(Object.create?function(e,t,a,r){void 0===r&&(r=a);var o=Object.getOwnPropertyDescriptor(t,a);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(e,r,o)}:function(e,t,a,r){void 0===r&&(r=a),e[r]=t[a]}),o=this&&this.__exportStar||function(e,t){for(var a in e)"default"===a||Object.prototype.hasOwnProperty.call(t,a)||r(t,e,a)};Object.defineProperty(t,"__esModule",{value:!0}),o(a(66),t),o(a(593),t)},66:(e,t,a)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.MaskEditor=t.MaskEditorDefaults=void 0;var r=a(156);a(392);var o=a(593);t.MaskEditorDefaults={cursorSize:10,maskOpacity:.75,maskColor:"#23272d",maskBlendMode:"normal"},t.MaskEditor=function(e){var a,n,i,l,u=e.src,s=null!==(a=e.cursorSize)&&void 0!==a?a:t.MaskEditorDefaults.cursorSize,c=null!==(n=e.maskColor)&&void 0!==n?n:t.MaskEditorDefaults.maskColor,f=null!==(i=e.maskBlendMode)&&void 0!==i?i:t.MaskEditorDefaults.maskBlendMode,d=null!==(l=e.maskOpacity)&&void 0!==l?l:t.MaskEditorDefaults.maskOpacity,v=r.useRef(null),m=r.useRef(null),y=r.useRef(null),h=r.useState(null),g=h[0],p=h[1],x=r.useState(null),k=x[0],b=x[1],E=r.useState(null),S=E[0],M=E[1],w=r.useState({x:256,y:256}),C=w[0],D=w[1];r.useLayoutEffect((function(){if(v.current&&!g){var e=v.current.getContext("2d");p(e)}}),[v]),r.useLayoutEffect((function(){if(m.current&&!g){var e=m.current.getContext("2d");e&&(e.fillStyle="#ffffff",e.fillRect(0,0,C.x,C.y)),b(e)}}),[m]),r.useLayoutEffect((function(){if(y.current&&!g){var e=y.current.getContext("2d");M(e)}}),[y]),r.useEffect((function(){if(u&&g){var e=new Image;e.onload=function(t){D({x:e.width,y:e.height}),null==g||g.drawImage(e,0,0)},e.src=u}}),[u,g]),r.useLayoutEffect((function(){e.canvasRef&&(e.canvasRef.current=m.current)}),[m]),r.useEffect((function(){var t,a,r=function(e){S&&(S.clearRect(0,0,C.x,C.y),S.beginPath(),S.fillStyle="".concat(c,"88"),S.strokeStyle=c,S.arc(e.offsetX,e.offsetY,s,0,360),S.fill(),S.stroke()),k&&e.buttons>0&&(k.beginPath(),k.fillStyle=e.buttons>1||e.shiftKey?"#ffffff":c,k.arc(e.offsetX,e.offsetY,s,0,360),k.fill())},o=function(t){S&&(e.onCursorSizeChange(Math.max(0,s+(t.deltaY>0?1:-1))),S.clearRect(0,0,C.x,C.y),S.beginPath(),S.fillStyle="".concat(c,"88"),S.strokeStyle=c,S.arc(t.offsetX,t.offsetY,s,0,360),S.fill(),S.stroke(),t.stopPropagation(),t.preventDefault())};return null===(t=y.current)||void 0===t||t.addEventListener("mousemove",r),e.onCursorSizeChange&&(null===(a=y.current)||void 0===a||a.addEventListener("wheel",o)),function(){var t,a;null===(t=y.current)||void 0===t||t.removeEventListener("mousemove",r),e.onCursorSizeChange&&(null===(a=y.current)||void 0===a||a.removeEventListener("wheel",o))}}),[S,k,y,s,c,C]);var O=r.useCallback((function(e,t){var a=null==k?void 0:k.getImageData(0,0,C.x,C.y),r=(0,o.hexToRgb)(e);if(a){for(var n=0;n<(null==a?void 0:a.data.length);n+=4){var i=255===a.data[n]!=t?[255,255,255]:r;a.data[n]=i[0],a.data[n+1]=i[1],a.data[n+2]=i[2],a.data[n+3]=a.data[n+3]}null==k||k.putImageData(a,0,0)}}),[k]);return r.useEffect((function(){return O(c,!1)}),[c]),r.createElement("div",{className:"react-mask-editor-outer"},r.createElement("div",{className:"react-mask-editor-inner",style:{width:C.x,height:C.y}},r.createElement("canvas",{ref:v,style:{width:C.x,height:C.y},width:C.x,height:C.y,className:"react-mask-editor-base-canvas"}),r.createElement("canvas",{ref:m,width:C.x,height:C.y,style:{width:C.x,height:C.y,opacity:d,mixBlendMode:f},className:"react-mask-editor-mask-canvas"}),r.createElement("canvas",{ref:y,width:C.x,height:C.y,style:{width:C.x,height:C.y},className:"react-mask-editor-cursor-canvas"})))}},593:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.hexToRgb=t.toMask=void 0,t.toMask=function(e){var t=e.getContext("2d"),a={x:e.width,y:e.height};console.log(a);var r=null==t?void 0:t.getImageData(0,0,a.x,a.y),o=Uint8ClampedArray.from(r.data);if(r){for(var n=0;n<(null==r?void 0:r.data.length);n+=4){var i=255===r.data[n]?[255,255,255]:[0,0,0];r.data[n]=i[0],r.data[n+1]=i[1],r.data[n+2]=i[2],r.data[n+3]=255}null==t||t.putImageData(r,0,0)}var l=e.toDataURL();for(n=0;n<(null==r?void 0:r.data.length);n++)r.data[n]=o[n];return t.putImageData(r,0,0),l},t.hexToRgb=function(e){return e.replace("#","").match(/.{1,2}/g).map((function(e){return parseInt(e,16)}))}},156:t=>{t.exports=e}},a={};function r(e){var o=a[e];if(void 0!==o)return o.exports;var n=a[e]={exports:{}};return t[e].call(n.exports,n,n.exports,r),n.exports}return r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r(607)})()));