react-multi-cropper/dist/index.js

A component for allowing multiple cropping regions on a single image, powered by [fabric](https://github.com/fabricjs/fabric.js).

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("fabric"),o=function(){return(o=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function l(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var i=arguments[t],l=0,u=i.length;l<u;l++,o++)n[o]=i[l];return n}var u="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto),a=new Uint8Array(16);function c(){if(!u)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return u(a)}var s=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function f(e){return"string"==typeof e&&s.test(e)}for(var d=[],v=0;v<256;++v)d.push((v+256).toString(16).substr(1));function p(e,t,r){var n=(e=e||{}).random||(e.rng||c)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){r=r||0;for(var o=0;o<16;++o)t[r+o]=n[o];return t}return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=(d[e[t+0]]+d[e[t+1]]+d[e[t+2]]+d[e[t+3]]+"-"+d[e[t+4]]+d[e[t+5]]+"-"+d[e[t+6]]+d[e[t+7]]+"-"+d[e[t+8]]+d[e[t+9]]+"-"+d[e[t+10]]+d[e[t+11]]+d[e[t+12]]+d[e[t+13]]+d[e[t+14]]+d[e[t+15]]).toLowerCase();if(!f(r))throw TypeError("Stringified UUID is invalid");return r}(n)}function g(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var m={container:"MultiCrops-module_container__ezZVh",pan:"MultiCrops-module_pan__1s5ph",panning:"MultiCrops-module_panning__1H03p",canvas:"MultiCrops-module_canvas__32_m2","canvas-container":"MultiCrops-module_canvas-container__25nON","main-canvas":"MultiCrops-module_main-canvas__X5nOV",img:"MultiCrops-module_img__XWYWX"};g('.MultiCrops-module_container__ezZVh {\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAdSURBVHgBARIA7f8B9PT0/9DQ0AAAxMTE//T09P93uA1zvgnyuwAAAABJRU5ErkJggg==");\n  background-size: 20px;\n  image-rendering: pixelated;\n  user-select: none;\n  width: 100%;\n  outline: none; }\n\n.MultiCrops-module_pan__1s5ph {\n  cursor: grab; }\n\n.MultiCrops-module_panning__1H03p {\n  cursor: grabbing; }\n\n.MultiCrops-module_canvas__32_m2 {\n  display: none; }\n\n.MultiCrops-module_canvas-container__25nON {\n  width: 100% !important;\n  height: 100% !important; }\n\n#MultiCrops-module_main-canvas__X5nOV {\n  width: 100% !important; }\n\n.MultiCrops-module_img__XWYWX {\n  user-select: none;\n  transform-origin: center;\n  image-rendering: auto; }\n');var h=function(e,t){var r,n,o=e.height||0,i=e.width||0,l=(null==t?void 0:t.offsetHeight)||0,u=(null==t?void 0:t.offsetWidth)||0,a=i/o||1;return u/l>a?n=((r=l)||0)*a:r=(n=u)/a,{height:r,width:n}},y=function(e){return{id:e.id,width:e.width,height:e.height,angle:e.angle,left:e.left,top:e.top,style:e.style,meta:e.meta,noImage:e.noImage,showCross:e.showCross,layer:e.layer,inert:e.inert}},b=-1,A=function(e){clearTimeout(b),b=setTimeout(e,50)},w=function(e,t){return e&&t?function(e,t){var r=e.getHeight(),n=e.getWidth(),o=e.getZoom(),i=h(t,e.getElement()),l=i.height,u=i.width,a=Math.max(((t.top||0)+l)*o-r,0),c=Math.max(-(t.top||0)*o,0),s=Math.max(((t.left||0)+u)*o-n,0),f=Math.max(-(t.left||0)*o,0);return o<1?{wl:0,wr:0,ht:0,hb:0}:{wl:f/(u*o*2)*100,wr:s/(u*o*2)*100,ht:c/(l*o*2)*100,hb:a/(l*o*2)*100}}(e,t):{wl:0,wr:0,ht:0,hb:0}};function C(e){var r=t.useRef(e);return t.useEffect((function(){r.current=e})),r.current}var _=function(e,r,o,i,l,u,a){var c=C(e),s=t.useRef(-1);t.useEffect((function(){if(e===c&&o&&r){if(u.current)return u.current=!1,void(l.current=0);cancelAnimationFrame(s.current),s.current=requestAnimationFrame((function(){!function(e,t,r,o){void 0===o&&(o=0);var i=t.getCenter(),l=i.top,u=i.left,a=new n.fabric.Point(u,l),c=n.fabric.util.degreesToRadians(o);if(e.angle!==r){e.angle=r;var s=new n.fabric.Point((null==e?void 0:e.left)||0,(null==e?void 0:e.top)||0),f=n.fabric.util.rotatePoint(s,a,c);e.top=f.y,e.left=f.x,e.setCoords()}t.getObjects().forEach((function(e){if((null==e?void 0:e.left)&&(null==e?void 0:e.top)){var t=new n.fabric.Point(e.left,e.top),r=n.fabric.util.rotatePoint(t,a,c);e.top=r.y,e.left=r.x,e.angle=(e.angle||0)+o,e.setCoords()}})),t.requestRenderAll()}(r,o,i,i-(l.current||0)),A((function(){null==a||a({type:"rotate"},void 0,void 0,o.getObjects().map(y))})),l.current=i}))}}),[i,u.current,e,c])},x=function(e,t,r){if(e&&t){t.setDimensions({width:(null==r?void 0:r.offsetWidth)||1e3,height:(null==r?void 0:r.offsetHeight)||1e3});var o=e.getCenterPoint(),i=o.x,l=o.y,u=h(e,t.getElement()),a=(t.getWidth()-u.width)/2,c=(t.getHeight()-u.height)/2;e.set({left:a,top:c});var s=e.getCenterPoint(),f=s.x,d=s.y,v=f-i,p=d-l,g=new n.fabric.Point(a,c);t.getObjects().forEach((function(t){if((null==t?void 0:t.left)&&(null==t?void 0:t.top)){var r=(t.left||0)+v,o=(t.top||0)+p;t.set({left:r,top:o});var i=new n.fabric.Point(t.left,t.top),l=n.fabric.util.degreesToRadians(-(e.angle||0)),u=n.fabric.util.rotatePoint(i,g,l);t.set({left:u.x,top:u.y,angle:((null==t?void 0:t.angle)||0)-((null==e?void 0:e.angle)||0)}),t.setCoords()}})),e.set({angle:0}),t.requestRenderAll()}},E="ScrollBar-module_scrollbar__2gkr5",D="ScrollBar-module_hscroll__15Jv_",R="ScrollBar-module_vscroll__2I8hP",O="ScrollBar-module_scroll-wrapper__1-oKW";g(".ScrollBar-module_scrollbar__2gkr5 {\n  background: #00000088;\n  position: absolute;\n  border-radius: 100vw; }\n\n.ScrollBar-module_hscroll__15Jv_ {\n  height: 10px;\n  bottom: 6px;\n  cursor: ew-resize;\n  margin-right: 10px;\n  min-width: 50px; }\n\n.ScrollBar-module_vscroll__2I8hP {\n  width: 10px;\n  right: 6px;\n  cursor: ns-resize;\n  margin-bottom: 10px;\n  min-height: 50px; }\n\n.ScrollBar-module_scroll-wrapper__1-oKW {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  transition: opacity 0.25s; }\n\n.ScrollBar-module_scroll-wrapper__1-oKW,\n.ScrollBar-module_scrollbar__2gkr5 {\n  transition: opacity 0.25s ease-out; }\n  .ScrollBar-module_scroll-wrapper__1-oKW:not(:hover),\n  .ScrollBar-module_scrollbar__2gkr5:not(:hover) {\n    opacity: 0.75; }\n");var S=function(e){var n=e.onScroll,l=e.type,u=e.isHidden,a=i(e,["onScroll","type","isHidden"]),c="vertical"===l,s=t.useState(!1),f=s[0],d=s[1],v=t.useRef(0),p=t.useRef(-1);return r.createElement("div",{className:O,style:{pointerEvents:f?"initial":"none",cursor:c?"ns-resize":"ew-resize",opacity:u?0:1},onMouseUp:function(e){e.stopPropagation(),d(!1)},onMouseLeave:function(){return d(!1)},onMouseMove:function(e){if(f){var t=e.clientX,r=e.clientY;cancelAnimationFrame(p.current),p.current=requestAnimationFrame((function(){var e=v.current-(c?r:t);n(e),v.current=c?r:t}))}}},r.createElement("div",o({},a,{className:(c?R:D)+" "+E,style:o(o({},a.style),{pointerEvents:"initial"}),onMouseDown:function(e){e.stopPropagation(),v.current=c?e.clientY:e.clientX,d(!0)}})))},j={fill:"transparent",hasControls:!0,strokeWidth:2,stroke:"black",strokeUniform:!0,lockMovementX:!0,lockMovementY:!0,hasRotatingPoint:!1,transparentCorners:!0},M=n.fabric.util.createClass(n.fabric.Rect,{initialize:function(e,t){var r;void 0===t&&(t=1),this.callSuper("initialize",o(o(o(o(o({},j),{_controlsVisibility:(r=e.showCross,void 0===r&&(r=!0),{bl:!1,br:!1,mb:!1,ml:!1,mr:!1,mt:!1,tl:!1,tr:r,mtr:!1})}),e),{strokeWidth:2/t,selectable:!e.inert,evented:!e.inert,style:e.style}),"function"==typeof e.style?e.style(j):e.style||{}))}});function F(e){return null!=e&&"object"==typeof e&&!0===e["@@functional/placeholder"]}function B(e){return function t(r){return 0===arguments.length||F(r)?t:e.apply(this,arguments)}}function k(e){return function t(r,n){switch(arguments.length){case 0:return t;case 1:return F(r)?t:B((function(t){return e(r,t)}));default:return F(r)&&F(n)?t:F(r)?B((function(t){return e(t,n)})):F(n)?B((function(t){return e(r,t)})):e(r,n)}}}function q(e,t){return Object.prototype.hasOwnProperty.call(t,e)}var P=Object.prototype.toString,I=function(){return"[object Arguments]"===P.call(arguments)?function(e){return"[object Arguments]"===P.call(e)}:function(e){return q("callee",e)}}(),U=!{toString:null}.propertyIsEnumerable("toString"),L=["constructor","valueOf","isPrototypeOf","toString","propertyIsEnumerable","hasOwnProperty","toLocaleString"],z=function(){return arguments.propertyIsEnumerable("length")}(),W=function(e,t){for(var r=0;r<e.length;){if(e[r]===t)return!0;r+=1}return!1},T="function"!=typeof Object.keys||z?B((function(e){if(Object(e)!==e)return[];var t,r,n=[],o=z&&I(e);for(t in e)!q(t,e)||o&&"length"===t||(n[n.length]=t);if(U)for(r=L.length-1;r>=0;)q(t=L[r],e)&&!W(n,t)&&(n[n.length]=t),r-=1;return n})):B((function(e){return Object(e)!==e?[]:Object.keys(e)})),N=B((function(e){return null===e?"Null":void 0===e?"Undefined":Object.prototype.toString.call(e).slice(8,-1)}));function H(e){for(var t,r=[];!(t=e.next()).done;)r.push(t.value);return r}function X(e,t,r){for(var n=0,o=r.length;n<o;){if(e(t,r[n]))return!0;n+=1}return!1}var V="function"==typeof Object.is?Object.is:function(e,t){return e===t?0!==e||1/e==1/t:e!=e&&t!=t};function K(e,t,r,n){var o=H(e);function i(e,t){return Y(e,t,r.slice(),n.slice())}return!X((function(e,t){return!X(i,t,e)}),H(t),o)}function Y(e,t,r,n){if(V(e,t))return!0;var o,i,l=N(e);if(l!==N(t))return!1;if(null==e||null==t)return!1;if("function"==typeof e["fantasy-land/equals"]||"function"==typeof t["fantasy-land/equals"])return"function"==typeof e["fantasy-land/equals"]&&e["fantasy-land/equals"](t)&&"function"==typeof t["fantasy-land/equals"]&&t["fantasy-land/equals"](e);if("function"==typeof e.equals||"function"==typeof t.equals)return"function"==typeof e.equals&&e.equals(t)&&"function"==typeof t.equals&&t.equals(e);switch(l){case"Arguments":case"Array":case"Object":if("function"==typeof e.constructor&&"Promise"===(o=e.constructor,null==(i=String(o).match(/^function (\w*)/))?"":i[1]))return e===t;break;case"Boolean":case"Number":case"String":if(typeof e!=typeof t||!V(e.valueOf(),t.valueOf()))return!1;break;case"Date":if(!V(e.valueOf(),t.valueOf()))return!1;break;case"Error":return e.name===t.name&&e.message===t.message;case"RegExp":if(e.source!==t.source||e.global!==t.global||e.ignoreCase!==t.ignoreCase||e.multiline!==t.multiline||e.sticky!==t.sticky||e.unicode!==t.unicode)return!1}for(var u=r.length-1;u>=0;){if(r[u]===e)return n[u]===t;u-=1}switch(l){case"Map":return e.size===t.size&&K(e.entries(),t.entries(),r.concat([e]),n.concat([t]));case"Set":return e.size===t.size&&K(e.values(),t.values(),r.concat([e]),n.concat([t]));case"Arguments":case"Array":case"Object":case"Boolean":case"Number":case"String":case"Date":case"Error":case"RegExp":case"Int8Array":case"Uint8Array":case"Uint8ClampedArray":case"Int16Array":case"Uint16Array":case"Int32Array":case"Uint32Array":case"Float32Array":case"Float64Array":case"ArrayBuffer":break;default:return!1}var a=T(e);if(a.length!==T(t).length)return!1;var c=r.concat([e]),s=n.concat([t]);for(u=a.length-1;u>=0;){var f=a[u];if(!q(f,t)||!Y(t[f],e[f],c,s))return!1;u-=1}return!0}var G=k((function(e,t){return Y(e,t,[],[])})),Z={x:void 0,y:void 0},J={};n.fabric.Object.prototype.controls,n.fabric.Object.prototype.controls.tr=new n.fabric.Control({x:.5,y:-.5,offsetY:0,cursorStyle:"pointer",mouseDownHandler:function(e,t){var r=t.canvas;return!!r&&(e.stopPropagation(),t.manualDeletion=!0,r.remove(t),r.requestRenderAll(),!0)},render:function(e,t,r,o){var i=document.createElement("img");i.src="data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20filter%3D%22url%28%23filter0_d%29%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20fill%3D%22white%22%2F%3E%3Cg%20filter%3D%22url%28%23filter1_d%29%22%3E%3Cpath%20d%3D%22M22%2012.1639L19.8361%2010L16%2013.9344L12.1639%2010L10%2012.1639L13.9344%2016L10%2019.8361L12.1639%2022L16%2018.0656L19.8361%2022L22%2019.8361L18.0656%2016L22%2012.1639Z%22%20fill%3D%22%23D44333%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_d%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%2232%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22filter1_d%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%2232%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";var l=this.cornerSize||1;e.save(),e.translate(t,r),e.rotate(n.fabric.util.degreesToRadians(o.angle||0)),e.drawImage(i,-l/2,-l/2,l,l),e.restore()},cornerSize:24});exports.default=function(e){var u=e.cropperRef,a=e.cursorMode,c=void 0===a?"draw":a,s=e.rotation,f=void 0===s?0:s,d=e.zoom,v=void 0===d?1:d,g=e.disableKeyboard,b=void 0!==g&&g,E=e.disableMouse,D=e.boxInView,R=e.cropScale,O=i(e,["cropperRef","cursorMode","rotation","zoom","disableKeyboard","disableMouse","boxInView","cropScale"]),j=t.useRef(null),F=t.useRef(null),B=t.useRef(null),k=t.useRef(Z),q=t.useRef(p()),P=t.useRef(-1),I=t.useRef(null),U=t.useRef(!1),L=t.useRef(null),z=t.useRef({}),W=t.useState(!1),T=W[0],N=W[1],H=t.useRef(null),X=t.useRef(f),V=t.useRef(-1),K=t.useRef(-1),Y=t.useRef(-1),Q=t.useRef({cursorMode:c,disableKeyboard:b,disableMouse:E}),$=t.useRef({}),ee=t.useRef(!1),te=t.useState(w(H.current,F.current)),re=te[0],ne=te[1],oe=function(){var e=H.current;e&&(e.on("mouse:down",(function(t){var r,n,o;if(!(null==E?void 0:E.all))if("rect"===(null===(r=t.target)||void 0===r?void 0:r.type)){if(null===(n=t.target)||void 0===n?void 0:n.inert)return void e.discardActiveObject(t);null===(o=O.onBoxClick)||void 0===o||o.call(O,{type:"click",event:t},y(t.target)),ae.current=t.target}else ae.current=null,ge(t)})),e.on("mouse:move",(function(e){(null==E?void 0:E.all)||me(e)})),e.on("mouse:up",(function(e){var t;(null==E?void 0:E.all)||(null===(t=e.target)||void 0===t?void 0:t.inert)||he(e)})),e.on("mouse:over",(function(t){var r,n,i,l,u;!t.target||(null==E?void 0:E.all)||(null===(r=t.target)||void 0===r?void 0:r.inert)||U.current||(null===(n=t.target)||void 0===n||n.set(o({hasControls:null===(i=t.target.showCross)||void 0===i||i},(null===(l=t.target.style)||void 0===l?void 0:l.hover)||{})),null===(u=O.onBoxMouseEnter)||void 0===u||u.call(O,{event:t,type:"mouse-enter"},y(t.target)),e.requestRenderAll())})),e.on("mouse:out",(function(t){var r,n,i,l,u,a;if(t.target&&!(null==E?void 0:E.all)&&!(null===(r=t.target)||void 0===r?void 0:r.inert)&&!U.current){var c=o(o({},(null===(n=t.target)||void 0===n?void 0:n.style)||{}),{hover:void 0});null===(i=t.target)||void 0===i||i.set(o({hasControls:null!==(u=t.target.showCross||t.target.id===(null===(l=ae.current)||void 0===l?void 0:l.id))&&void 0!==u&&u},c)),null===(a=O.onBoxMouseEnter)||void 0===a||a.call(O,{event:t,type:"mouse-leave"},y(t.target)),e.requestRenderAll()}})),e.on("object:removed",(function(t){var r,n,o,i;(null===(r=t.target)||void 0===r?void 0:r.manualDeletion)&&($.current[null!==(o=null===(n=t.target)||void 0===n?void 0:n.id)&&void 0!==o?o:""]=void 0,null===(i=O.onDelete)||void 0===i||i.call(O,{type:"delete",event:t.e},y(t.target),void 0,e.getObjects().filter((function(e){var r;return e.id!==(null===(r=t.target)||void 0===r?void 0:r.id)})).map(y)),U.current=!1)})),e.on("selection:created",(function(t){(null==E?void 0:E.all)&&e.discardActiveObject(t),he(t)})))},ie=function(e){var t=H.current;t&&(!function(){var e,t,r,n,o,i,l,u;null===(e=H.current)||void 0===e||e.off("mouse:down"),null===(t=H.current)||void 0===t||t.off("mouse:move"),null===(r=H.current)||void 0===r||r.off("mouse:up"),null===(n=H.current)||void 0===n||n.off("selection:created"),null===(o=H.current)||void 0===o||o.off("object:removed"),null===(i=H.current)||void 0===i||i.off("mouse:wheel"),null===(l=H.current)||void 0===l||l.off("mouse:over"),null===(u=H.current)||void 0===u||u.off("mouse:out")}(),t.remove.apply(t,t.getObjects()),e.forEach((function(e){var r,n=new M(e,v);switch(t.add(n),n.layer){case-1:n.sendToBack();break;case 1:n.bringToFront()}n.id===(null===(r=ae.current)||void 0===r?void 0:r.id)&&t.setActiveObject(n)})),oe(),t.requestRenderAll())},le=t.useRef(R);le.current=R;var ue=function(e){return function(e,t,r){var o;void 0===r&&(r=1),console.log({cropScale:r});var i=null==e?void 0:e.backgroundImage;if(e&&i&&i instanceof n.fabric.Image){var l=e.getObjects();e.remove.apply(e,l);var u=e.getZoom(),a=e.toDataURL({top:t.lineCoords.tl.y,left:t.lineCoords.tl.x,width:(t.width||1)*u,height:(t.height||1)*u,enableRetinaScaling:!0,multiplier:r/(u*(i.scaleX||1))});return e.add.apply(e,l),e.requestRenderAll(),(o={})[t.id]=a,o}}(H.current,e,le.current)},ae=t.useRef(null);t.useEffect((function(){var e,t,r,o=new n.fabric.Canvas("main-canvas");H.current=o,(null==u?void 0:u.hasOwnProperty("current"))&&(u.current=o),o.setDimensions({width:(null===(e=j.current)||void 0===e?void 0:e.offsetWidth)||1e3,height:(null===(t=j.current)||void 0===t?void 0:t.offsetHeight)||1e3}),o.preserveObjectStacking=!0,o.selection=!1,o.backgroundColor="",null===(r=H.current)||void 0===r||r.requestRenderAll()}),[]),t.useEffect((function(){var e=H.current,t=F.current;if(e&&t){var r=e.getObjects(),n=r.find((function(e){return e.id===(null==D?void 0:D.id)}));if(n){var o=n.getCenterPoint(),i=o.x,l=o.y;n.center(),e.setActiveObject(n);var u=n.getCenterPoint(),a=u.x,c=u.y;n.setCoords();var s=c-l,f=a-i;t.set({top:t.top+s,left:t.left+f}),r.forEach((function(e){e.id!==(null==D?void 0:D.id)&&(e.set({top:(e.top||0)+s,left:(e.left||0)+f}),e.setCoords())})),e.requestRenderAll(),A((function(){null==ye||ye({type:"pan"},void 0,void 0,e.getObjects().map(y))}))}}}),[D]),t.useEffect((function(){var e,t;F.current=z.current[O.src],null===(e=H.current)||void 0===e||e.remove.apply(e,null===(t=H.current)||void 0===t?void 0:t.getObjects()),X.current=0,ie(O.boxes)}),[O.src]),t.useEffect((function(){var e,t;H.current&&j.current&&(F.current?(null===(e=H.current)||void 0===e||e.setBackgroundImage(F.current,(function(){})),oe(),null===(t=H.current)||void 0===t||t.requestRenderAll(),x(F.current,H.current,j.current)):n.fabric.Image.fromURL(O.src,(function(e){if(H.current){e.set("objectCaching",!1);var t=h(e,H.current.getElement()),r=(H.current.getWidth()-t.width)/2,n=(H.current.getHeight()-t.height)/2;F.current=e,z.current[O.src]=e,e.scaleToWidth(t.width),e.scaleToHeight(t.height),e.set("left",r),e.set("top",n),e.setCoords(),H.current.setBackgroundImage(e,(function(){})),oe(),ne(w(H.current,F.current)),H.current.requestRenderAll()}}),{selectable:!1,hasRotatingPoint:!1,lockScalingX:!0,lockScalingY:!0}))}),[O.src]);var ce=C(O.boxes);t.useEffect((function(){!G(ce,O.boxes)&&ie(O.boxes)}),[ce,O.boxes]);var se=t.useRef((function(){return ie(O.boxes)}));se.current=function(){return ie(O.boxes)},t.useEffect((function(){var e;null===(e=O.onLoad)||void 0===e||e.call(O,$.current,(function(){var e;ee.current=!0,se.current(),H.current&&j.current&&x(F.current,H.current,j.current),null===(e=H.current)||void 0===e||e.requestRenderAll()}))}),[]),t.useEffect((function(){var e=H.current;e&&(e.selection="select"===c,e.requestRenderAll())}),[c]),_(O.src,F.current,H.current,f,X,ee,O.onChange),t.useEffect((function(){H.current&&(Q.current={cursorMode:c,disableKeyboard:b,disableMouse:E})}),[c,b,E]),function(e,r,o,i){t.useEffect((function(){if(r&&e){var t=r.getCenter();r.zoomToPoint(new n.fabric.Point(t.left,t.top),o),l(r.getObjects()).forEach((function(e){return e.set("strokeWidth",2/o)})),i(w(r,e))}}),[o])}(F.current,H.current,v,ne);var fe=t.useRef(v);fe.current=v;var de,ve,pe,ge=function(e){if(H.current){var t=Q.current.cursorMode;if("pan"===t)k.current=H.current.getPointer(e),N(!0);else if("draw"===t){k.current=H.current.getPointer(e),P.current=H.current.getObjects().length,q.current=p(),U.current=!0;var r=new M({id:q.current,angle:0,top:k.current.y,left:k.current.x,inert:!0},fe.current);H.current.add(r),I.current=r,H.current.requestRenderAll()}}},me=function(e){var t,r,n,o=Q.current.cursorMode,i=null===(t=H.current)||void 0===t?void 0:t.getPointer(e);if("pan"===o){if(!(k.current.x&&k.current.y&&i.x&&i.y))return;var u=k.current,a=-1*(u.x-i.x),c=-1*(u.y-i.y);cancelAnimationFrame(V.current),V.current=requestAnimationFrame((function(){var e;return l([F.current],(null===(e=H.current)||void 0===e?void 0:e.getObjects())||[]).map((function(e){var t=e.left+a,r=e.top+c;e.set({left:t,top:r}),e.setCoords()}))})),null===(r=H.current)||void 0===r||r.requestRenderAll(),k.current=i,ne(w(H.current,F.current))}else if("draw"===o){if(!U.current)return;if(!(k.current.x&&k.current.y&&i.x&&i.y))return;var s=I.current;s.set({left:Math.min(k.current.x,i.x),top:Math.min(k.current.y,i.y),width:Math.abs(k.current.x-i.x),height:Math.abs(k.current.y-i.y)}),s.setCoords(),null===(n=H.current)||void 0===n||n.requestRenderAll(),I.current=s}},he=function(e){var t,r=H.current;if(r){var n=Q.current.cursorMode;if("pan"===n);else if("draw"===n){if(!U.current)return;U.current=!1;var i=I.current;(null==i?void 0:i.height)<10&&(null==i?void 0:i.width)<10?r.remove(i):(i.set({inert:!1}),r.setActiveObject(i),ae.current=i,function(e){var t,r=I.current;if(r){var n=ue(r);$.current=o(o({},$.current),n),I.current=null;var i=r.id,l=i?{boxId:i,dataUrl:$.current[i]}:void 0;null===(t=O.onCrop)||void 0===t||t.call(O,{type:e},$.current,l,y(r)),U.current=!1}}("draw-end")),r.requestRenderAll()}else if("select"===n){var l=r.getActiveObjects();if(!l.length)return;null===(t=O.onSelect)||void 0===t||t.call(O,l.map(y).reduce((function(e,t){var r;return Object.assign({},e,t.inert?{}:((r={})[t.id]=t,r))}),{})),r.discardActiveObject(e)}k.current={}}},ye=function(e,t,r,n){var o;I.current=t,null===(o=O.onChange)||void 0===o||o.call(O,e,t,r,n)};return de=j,ve=function(e){var t,r,n=Q.current.disableMouse;if(!n.zoom&&!n.all){e.preventDefault(),e.stopPropagation();var o=e.shiftKey,i=e.deltaY,u=e.deltaX;if(o){var a=(null===(t=H.current)||void 0===t?void 0:t.getZoom())||1;null===(r=O.onZoomGesture)||void 0===r||r.call(O,a+.01*i,a)}else cancelAnimationFrame(K.current),K.current=requestAnimationFrame((function(){var t,r,n=l([F.current],(null===(t=H.current)||void 0===t?void 0:t.getObjects())||[]).map((function(e){var t=e.left-u,r=e.top-i;return e.set({left:t,top:r}),e.setCoords(),y(e)})).slice(1);A((function(){var t;null===(t=O.onChange)||void 0===t||t.call(O,{event:e,type:"pan"},void 0,void 0,n)})),ne(w(H.current,F.current)),null===(r=H.current)||void 0===r||r.requestRenderAll()}))}},pe=[O.onZoomGesture,v,E],t.useEffect((function(){if(de.current)return de.current.addEventListener("wheel",ve),function(){de.current&&de.current.removeEventListener("wheel",ve)}}),pe),r.createElement(r.Fragment,null,r.createElement("div",{className:[m.container,"pan"===c?m.pan:"",T?m.panning:"",O.containerClassName||""].join(" "),style:O.containerStyles||J,ref:j,draggable:!1,onScroll:function(e){e.preventDefault(),e.stopPropagation()},tabIndex:-1,onKeyDown:function(e){if(!b){var t=e.key,r=e.shiftKey;t.startsWith("Arrow")&&(e.preventDefault(),e.stopPropagation()),cancelAnimationFrame(Y.current),Y.current=requestAnimationFrame((function(){var e,n,o;if(r){var i="ArrowRight"===t||"ArrowUp"===t?.05:"ArrowLeft"===t||"ArrowDown"===t?-.05:0;null===(e=O.onZoomGesture)||void 0===e||e.call(O,v+i,v)}else{var u="ArrowRight"===t?10:"ArrowLeft"===t?-10:0,a="ArrowDown"===t?10:"ArrowUp"===t?-10:0;l([F.current],(null===(n=H.current)||void 0===n?void 0:n.getObjects())||[]).map((function(e){var t=e.left+u,r=e.top+a;e.set({left:t,top:r}),e.setCoords()})),ne(w(H.current,F.current)),null===(o=H.current)||void 0===o||o.requestRenderAll()}}))}}},r.createElement("canvas",{className:["pan"===c?m.pan:"",T?m.panning:"",O.containerClassName||""].join(" "),ref:L,id:"main-canvas",style:{width:"100%",height:"100%"}}),r.createElement(S,{type:"horizontal",style:{left:"calc("+re.wl+"% + 6px)",right:"calc("+re.wr+"% + 6px)"},isHidden:!re.wl&&!re.wr,onScroll:function(e){var t,r,n=l([F.current],(null===(t=H.current)||void 0===t?void 0:t.getObjects())||[]).map((function(t){var r=t.left+e;return t.set({left:r}),t.setCoords(),y(t)})).slice(1);ne(w(H.current,F.current)),A((function(){var e;null===(e=O.onChange)||void 0===e||e.call(O,{type:"pan"},void 0,void 0,n)})),null===(r=H.current)||void 0===r||r.requestRenderAll()}}),r.createElement(S,{type:"vertical",style:{top:"calc("+re.ht+"% + 6px)",bottom:"calc("+re.hb+"% + 6px)"},isHidden:!re.ht&&!re.hb,onScroll:function(e){var t,r,n=l([F.current],(null===(t=H.current)||void 0===t?void 0:t.getObjects())||[]).map((function(t){var r=t.top+e;return t.set({top:r}),t.setCoords(),y(t)})).slice(1);ne(w(H.current,F.current)),A((function(){var e;null===(e=O.onChange)||void 0===e||e.call(O,{type:"pan"},void 0,void 0,n)})),null===(r=H.current)||void 0===r||r.requestRenderAll()}})),r.createElement("canvas",{id:"canvas-fab",className:m.canvas,ref:B}))},exports.getAbsoluteDetectedBoxes=function(e,t){var r=e.top,n=e.left,o=e.angle;return t.map((function(e){var t=e[0],i=e[1],l=e[2],u=e[3];return{left:i+n,top:t+r,width:l,height:u,angle:o,id:p()}}))};
//# sourceMappingURL=index.js.map