@berviantoleo/react-multi-crop 0.43.20 → 0.44.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.44.0](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.43.20...@berviantoleo/react-multi-crop@0.44.0) (2026-04-04)
+
+### Features
+
+- upgrade deps ([9c5802e](https://github.com/berviantoleo/react-multi-crop/commit/9c5802e3338118a539a1d23fb8658aa6ee94f518))
+
 ## [0.43.20](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.43.19...@berviantoleo/react-multi-crop@0.43.20) (2026-04-04)
 
 **Note:** Version bump only for package @berviantoleo/react-multi-crop

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var t=require("react"),r=require("fabric"),o=require("uuid");function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},e(t)}var i=function(t,r){return i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,r){t.__proto__=r}||function(t,r){for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])},i(t,r)};function n(r){var o=r.children,e=r.height,i=r.width,n=r.row,a=void 0!==n&&n;return t.createElement("div",{style:{display:"flex",flexDirection:a?"row":"column",gap:"10px",height:e,width:i}},o)}"function"==typeof SuppressedError&&SuppressedError;var a=function(a){function c(t){var r=a.call(this,t)||this;return r.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,r.state={canvas:null,initial:!0},r.keyboardHandler=r.keyboardHandler.bind(r),r.addNew=r.addNew.bind(r),r.deleteShapes=r.deleteShapes.bind(r),r.discardActiveObject=r.discardActiveObject.bind(r),r}return function(t,r){if("function"!=typeof r&&null!==r)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");function o(){this.constructor=t}i(t,r),t.prototype=null===r?Object.create(r):(o.prototype=r.prototype,new o)}(c,a),c.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},c.prototype.componentDidUpdate=function(t){var r=this.state.canvas;if(r){var o=this.props,e=o.zoomLevel,i=o.activeObject,n=o.height,a=o.width,c=o.borderColor,s=o.cornerColor,l=o.cornerSize,d=o.transparentCorners,p=o.cropBackgroundColor,u=o.cropBackgroundOpacity,h=o.record,v=o.disableZoom,g=void 0!==v&&v,y=t.zoomLevel,f=t.activeObject,b=t.height,C=t.width,m=t.borderColor,O=t.cornerColor,k=t.cornerSize,w=t.transparentCorners,S=t.cropBackgroundColor,B=t.cropBackgroundOpacity,j=t.record,A=!1;if(y!==e&&e&&e>0&&(r.setZoom(e),A=!0),f!==i&&i){var z=r.getObjects().filter(function(t){return t.objectId===i});r.discardActiveObject();for(var I=0,E=z;I<E.length;I++){var x=E[I];r.setActiveObject(x)}A=!0}if(r.off("mouse:wheel"),!g){var D=this.zoom.bind(this);r.on("mouse:wheel",D)}if(n&&n!==b&&(r.height=n,A=!0),a&&a!==C&&(r.width=a,A=!0),c!==m||s!==O||l!==k||d!==w||p!==S||u!==B){var H={borderColor:c,cornerColor:s,cornerSize:l,transparentCorners:d,cropBackgroundColor:p,cropBackgroundOpacity:u};this.updateCropAttributes(r,H),A=!0}var R=j;if(Array.isArray(R.clippings)&&h&&Array.isArray(null==h?void 0:h.clippings)){var P=h.clippings.filter(function(t){var r,o,e,i,n,a,c,s,l,d,p,u,h=R.clippings.find(function(r){return r.id===t.id||r.objectId&&r.objectId===t.objectId});return!!h&&((null===(r=t.style)||void 0===r?void 0:r.borderColor)!==(null===(o=h.style)||void 0===o?void 0:o.borderColor)||(null===(e=t.style)||void 0===e?void 0:e.cornerColor)!==(null===(i=h.style)||void 0===i?void 0:i.cornerColor)||(null===(n=t.style)||void 0===n?void 0:n.cornerSize)!==(null===(a=h.style)||void 0===a?void 0:a.cornerSize)||(null===(c=t.style)||void 0===c?void 0:c.transparentCorners)!==(null===(s=h.style)||void 0===s?void 0:s.transparentCorners)||(null===(l=t.style)||void 0===l?void 0:l.cropBackgroundColor)!==(null===(d=h.style)||void 0===d?void 0:d.cropBackgroundColor)||(null===(p=t.style)||void 0===p?void 0:p.cropBackgroundOpacity)!==(null===(u=h.style)||void 0===u?void 0:u.cropBackgroundOpacity))}),X=r.getObjects("rect");if(Array.isArray(X)&&X.length>0){var Y=0;P.forEach(function(t){var r,o,e,i,n,a,c=X.find(function(r){return r.id===t.id||r.objectId===t.objectId});c&&(c.borderColor=(null===(r=t.style)||void 0===r?void 0:r.borderColor)||"",c.cornerColor=(null===(o=t.style)||void 0===o?void 0:o.cornerColor)||"",c.cornerSize=(null===(e=t.style)||void 0===e?void 0:e.cornerSize)||0,c.transparentCorners=(null===(i=t.style)||void 0===i?void 0:i.transparentCorners)||!1,c.opacity=(null===(n=t.style)||void 0===n?void 0:n.cropBackgroundOpacity)||1,c.set("fill",null===(a=t.style)||void 0===a?void 0:a.cropBackgroundColor),Y+=1)}),Y>0&&(A=!0)}}A&&r.requestRenderAll()}},c.prototype.updateCropAttributes=function(t,r){var o=t.getObjects("rect");Array.isArray(o)&&o.length>0&&o.forEach(function(t){t.borderColor=r.borderColor||"",t.cornerColor=r.cornerColor||"",t.cornerSize=r.cornerSize||0,t.transparentCorners=r.transparentCorners||!1,t.opacity=r.cropBackgroundOpacity||1,t.set("fill",r.cropBackgroundColor)})},c.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},c.prototype.loadImage=function(t){var r=this.state,o=r.initial,e=r.canvas;if(e&&e.width&&e.height&&t.height&&t.width){var i=this.props.zoomLevel,n=t.height/t.width,a=e.width*n;e.height=a,i?e.setZoom(i):e.setZoom(e.width/t.width),e.backgroundImage=t,o&&this.setState({initial:!1},this.initialObjects.bind(this))}},c.prototype.isCrossOriginURL=function(t){var r=t.match(this.REGEXP_ORIGINS);return null!==r&&(r[1]!==window.location.protocol||r[2]!==window.location.hostname||r[3]!==window.location.port)},c.prototype.initialImage=function(){var t=this.props.image,o=this.loadImage.bind(this);if("string"==typeof t){var e={};this.isCrossOriginURL(t)&&(e.crossOrigin="Anonymous"),r.FabricImage.fromURL(t,e).then(function(t){o(t)})}},c.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var r=this.props,o=r.record,i=r.readonly,n=r.borderColor,a=r.cornerColor,c=r.cornerSize,s=r.transparentCorners,l=r.cropBackgroundColor,d=r.cropBackgroundOpacity;if(o){var p=o.clippings;if(Array.isArray(p)&&p.length>0&&"object"===e(p[0])){for(var u={borderColor:n,cornerColor:a,cornerSize:c,transparentCorners:s,cropBackgroundColor:l,cropBackgroundOpacity:d},h=0,v=0,g=p;v<g.length;v++){var y=g[v];y.style&&(y.style.cropBackgroundColor&&(u.cropBackgroundColor=y.style.cropBackgroundColor),y.style.cropBackgroundOpacity&&(u.cropBackgroundOpacity=y.style.cropBackgroundOpacity),y.style.borderColor&&(u.borderColor=y.style.borderColor),y.style.cornerColor&&(u.cornerColor=y.style.cornerColor),y.style.cornerSize&&(u.cornerSize=y.style.cornerSize),y.style.transparentCorners&&(u.transparentCorners=y.style.transparentCorners));var f=this.createObject(t,y,u,i||!1);f&&(t.add(f),h+=1)}h>0&&this.setOutput()}}else console.log("Not have any record. Skipped.")}},c.prototype.zoom=function(t){var r=this.state.canvas;if(r){var o=t.e.deltaY,e=r.getZoom();(e*=Math.pow(.999,o))>20&&(e=20),e<.01&&(e=.01),r.setZoom(e),t.e.preventDefault(),t.e.stopPropagation();var i=this.props.zoomChanged;i&&i(e)}},c.prototype.mouseHover=function(t){var r=this.props.onHover,o=this.shapetoStructureData.bind(this),e=t.target;e&&"rect"===e.type&&r&&r(o(e))},c.prototype.mouseOut=function(t){var r=this.props.onHover,o=t.target;o&&"rect"===o.type&&r&&r(null)},c.prototype.selectionHandler=function(t){var r=this.props.onSelect,o=this.shapetoStructureData.bind(this),e=t.selected;if(Array.isArray(e)&&0!=e.length){var i=e[0];if(i&&"rect"===i.type&&r)r(o(i))}},c.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},c.prototype.initialCanvas=function(){var t=this.props,o=t.id,e=t.width,i=t.height,n=t.readonly,a=new r.Canvas(o||"canvas",{width:e,height:i});if(n){a.selectionKey=void 0;var c=this.mouseHover.bind(this),s=this.mouseOut.bind(this);a.on("mouse:over",c),a.on("mouse:out",s)}else{var l=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",l),a.on("object:modified",d)}var p=this.selectionHandler.bind(this),u=this.selectionClearHandler.bind(this);a.on("selection:created",p),a.on("selection:updated",p),a.on("selection:cleared",u),a.on("mouse:down",function(t){var r=t.e;!0===r.altKey&&(this.isDragging=!0,this.selection=!1,this.lastPosX=r.clientX,this.lastPosY=r.clientY)}),a.on("mouse:move",function(t){if(this.isDragging){var r=t.e,o=this.viewportTransform;o[4]+=r.clientX-this.lastPosX,o[5]+=r.clientY-this.lastPosY,this.requestRenderAll(),this.lastPosX=r.clientX,this.lastPosY=r.clientY}}),a.on("mouse:up",function(){this.setViewportTransform(this.viewportTransform),this.isDragging=!1,this.selection=!0}),this.setState({canvas:a},this.initialImage.bind(this))},c.prototype.addNew=function(){var t=this.state.canvas;if(t){var r=this.props,o={borderColor:r.borderColor,cornerColor:r.cornerColor,cornerSize:r.cornerSize,transparentCorners:r.transparentCorners,cropBackgroundColor:r.cropBackgroundColor,cropBackgroundOpacity:r.cropBackgroundOpacity},e=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},o,!1);e&&(t.add(e),this.setOutput())}},c.prototype.doubleClickEvent=function(t){var r=this.state.canvas;if(r){var o=this.props,e=o.readonly,i=o.borderColor,n=o.cornerColor,a=o.cornerSize,c=o.transparentCorners,s=o.cropBackgroundColor,l=o.cropBackgroundOpacity;if(t&&t.target){var d=t.target.left,p=t.target.top,u=t.target.width,h=t.target.height,v={left:d+50,top:p+50,width:u*t.target.scaleX,height:h*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:s,cropBackgroundOpacity:l},g=this.createObjectByAttribute(null,v,e||!1);r.add(g),r.discardActiveObject(),r.setActiveObject(g),r.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){v={left:d=t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:s,cropBackgroundOpacity:l},g=this.createObjectByAttribute(null,v,e||!1);r.add(g),r.discardActiveObject(),r.setActiveObject(g),r.requestRenderAll(),this.setOutput()}}},c.prototype.createObjectByAttribute=function(t,e,i){var n=new r.Rect({left:e.left,top:e.top,width:e.width,height:e.height,borderColor:e.borderColor,cornerColor:e.cornerColor,cornerSize:e.cornerSize,transparentCorners:e.transparentCorners,fill:e.cropBackgroundColor,opacity:e.cropBackgroundOpacity,id:t,strokeWidth:0,strokeUniform:!0,lockRotation:!0,lockMovementX:i,lockMovementY:i,lockScalingX:i,lockScalingY:i,objectId:o.v4()});return n.setControlsVisibility({mtr:!1}),n},c.prototype.convertLeftTop=function(t){var r,o,e,i;return void 0===t.left||void 0===t.top||void 0===(null===(r=t.group)||void 0===r?void 0:r.left)||void 0===(null===(o=t.group)||void 0===o?void 0:o.top)||void 0===(null===(e=t.group)||void 0===e?void 0:e.width)||void 0===(null===(i=t.group)||void 0===i?void 0:i.height)?{left:0,top:0}:{left:t.left+t.group.left+t.group.width/2,top:t.top+t.group.top+t.group.height/2}},c.prototype.shapetoStructureData=function(t){var o=this.state.canvas;if(!o||!o.backgroundImage)return null;var e=o.backgroundImage;if(!(e instanceof r.FabricImage))return null;if(void 0===t.left||void 0===t.top||void 0===t.width||void 0===t.height||void 0===t.scaleX||void 0===t.scaleY||void 0===e.width||void 0===e.height)return null;var i=this.props,n=i.includeDataUrl,a=i.includeHtmlCanvas,c=t.group?this.convertLeftTop(t):{left:t.left,top:t.top},s=c.left/e.width,l=c.top/e.height,d=(c.left+t.width*t.scaleX)/e.width,p=(c.top+t.height*t.scaleY)/e.height,u={x1:s,y1:l,x2:d,y2:p},h={id:t.id,objectId:t.objectId,rect:JSON.stringify(u)};if(n){var v=null;try{v=e.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top,format:"jpeg"})}catch(t){console.error(t)}h.dataUrl=v}if(a){var g=null;try{g=e.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top})}catch(t){console.error(t)}h.canvasElement=g}var y=e.width,f=e.height,b=s*y,C=d*y,m=l*f,O=p*f,k={x:b,y:m,x2:C,y2:O,w:C-b,h:O-m,boundX:y,boundY:f};return h.crop=JSON.stringify(k),h.deletedAt="-1",h},c.prototype.deleteShapes=function(){var t=this.props.readonly,r=this.state.canvas;r&&!t&&(r.getActiveObjects().forEach(function(t){r.remove(t)}),this.setOutput())},c.prototype.setOutput=function(){var t=this.state.canvas;if(t){var r=this.shapetoStructureData.bind(this),o=[];t.getObjects("rect").forEach(function(t){var e=r(t);e&&o.push(e)});var e=this.props.input;e&&e.onChange(o)}},c.prototype.createObject=function(t,o,e,i){if(!t||!t.backgroundImage)return null;var n,a=t.backgroundImage;if(!(a instanceof r.FabricImage))return null;if(!a.width||!a.height)return null;n="string"==typeof o.rect?JSON.parse(o.rect):o.rect;var c=a.width*n.x1,s=a.height*n.y1,l={left:c,top:s,width:a.width*n.x2-c,height:a.height*n.y2-s,borderColor:e.borderColor,cornerColor:e.cornerColor,cornerSize:e.cornerSize,transparentCorners:e.transparentCorners,cropBackgroundColor:e.cropBackgroundColor,cropBackgroundOpacity:e.cropBackgroundOpacity};return this.createObjectByAttribute(o.id,l,i)},c.prototype.discardActiveObject=function(){var t=this.state.canvas;t?(t.discardActiveObject(),t.requestRenderAll()):console.log("Canvas not defined")},c.prototype.keyboardHandler=function(t){if(!t.defaultPrevented){var r=!1,o=t.key||t.keyCode;"Delete"!==o&&46!==o||(this.deleteShapes(),r=!0),r&&t.preventDefault()}},c.prototype.render=function(){var r=this.props,o=r.height,e=r.id,i=r.readonly,a=r.style,c=r.width,s=r.tabIndex;return t.createElement("div",{id:"canvas-wrapper",style:a},t.createElement(n,{row:!0,width:c,height:o},t.createElement("div",{onKeyDown:i?void 0:this.keyboardHandler,tabIndex:null!=s?s:0},t.createElement("canvas",{id:e,height:o,style:{border:"0px solid #aaa"},width:c}))))},c.defaultProps={borderColor:"black",cornerColor:"black",cornerSize:13,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,disableZoom:!1,height:800,id:"canvas",image:void 0,includeDataUrl:!1,includeHtmlCanvas:!1,input:void 0,readonly:!1,record:{clippings:[]},transparentCorners:!0,width:800,zoomChanged:void 0},c}(t.Component);exports.ReactMultiCrop=a;
+"use strict";var e=require("react"),t=require("fabric"),r=require("uuid");function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=Array(t);r<t;r++)o[r]=e[r];return o}function n(e,t,r){return t=c(t),function(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,l()?Reflect.construct(t,r||[],c(e).constructor):t.apply(e,r))}function i(e,t,r){return t&&function(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,d(o.key),o)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function a(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,t){if(e){if("string"==typeof e)return o(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?o(e,t):void 0}}(e))||t){r&&(e=r);var n=0,i=function(){};return{s:i,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,c=!0,l=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return c=e.done,e},e:function(e){l=!0,a=e},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw a}}}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}function l(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(l=function(){return!!e})()}function s(e,t){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},s(e,t)}function d(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function p(t){var r=t.children,o=t.height,n=t.width,i=t.row,a=void 0!==i&&i;return e.createElement("div",{style:{display:"flex",flexDirection:a?"row":"column",gap:"10px",height:o,width:n}},r)}var h=function(){function o(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),(t=n(this,o,[e])).REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,t.state={canvas:null,initial:!0},t.keyboardHandler=t.keyboardHandler.bind(t),t.addNew=t.addNew.bind(t),t.deleteShapes=t.deleteShapes.bind(t),t.discardActiveObject=t.discardActiveObject.bind(t),t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&s(e,t)}(o,e.Component),i(o,[{key:"componentDidMount",value:function(){this.state.canvas||this.initialCanvas()}},{key:"componentDidUpdate",value:function(e){var t=this.state.canvas;if(t){var r=this.props,o=r.zoomLevel,n=r.activeObject,i=r.height,c=r.width,l=r.borderColor,s=r.cornerColor,d=r.cornerSize,u=r.transparentCorners,p=r.cropBackgroundColor,h=r.cropBackgroundOpacity,v=r.record,f=r.disableZoom,y=void 0!==f&&f,g=e.zoomLevel,b=e.activeObject,C=e.height,m=e.width,k=e.borderColor,w=e.cornerColor,O=e.cornerSize,S=e.transparentCorners,j=e.cropBackgroundColor,B=e.cropBackgroundOpacity,A=e.record,I=!1;if(g!==o&&o&&o>0&&(t.setZoom(o),I=!0),b!==n&&n){var z=t.getObjects().filter(function(e){return e.objectId===n});t.discardActiveObject();var E,P=a(z);try{for(P.s();!(E=P.n()).done;){var R=E.value;t.setActiveObject(R)}}catch(e){P.e(e)}finally{P.f()}I=!0}if(t.off("mouse:wheel"),!y){var x=this.zoom.bind(this);t.on("mouse:wheel",x)}if(i&&i!==C&&(t.height=i,I=!0),c&&c!==m&&(t.width=c,I=!0),l!==k||s!==w||d!==O||u!==S||p!==j||h!==B){var D={borderColor:l,cornerColor:s,cornerSize:d,transparentCorners:u,cropBackgroundColor:p,cropBackgroundOpacity:h};this.updateCropAttributes(t,D),I=!0}var H=A;if(Array.isArray(H.clippings)&&v&&Array.isArray(null==v?void 0:v.clippings)){var X=v.clippings.filter(function(e){var t,r,o,n,i,a,c,l,s,d,u,p,h=H.clippings.find(function(t){return t.id===e.id||t.objectId&&t.objectId===e.objectId});return!!h&&((null===(t=e.style)||void 0===t?void 0:t.borderColor)!==(null===(r=h.style)||void 0===r?void 0:r.borderColor)||(null===(o=e.style)||void 0===o?void 0:o.cornerColor)!==(null===(n=h.style)||void 0===n?void 0:n.cornerColor)||(null===(i=e.style)||void 0===i?void 0:i.cornerSize)!==(null===(a=h.style)||void 0===a?void 0:a.cornerSize)||(null===(c=e.style)||void 0===c?void 0:c.transparentCorners)!==(null===(l=h.style)||void 0===l?void 0:l.transparentCorners)||(null===(s=e.style)||void 0===s?void 0:s.cropBackgroundColor)!==(null===(d=h.style)||void 0===d?void 0:d.cropBackgroundColor)||(null===(u=e.style)||void 0===u?void 0:u.cropBackgroundOpacity)!==(null===(p=h.style)||void 0===p?void 0:p.cropBackgroundOpacity))}),Y=t.getObjects("rect");if(Array.isArray(Y)&&Y.length>0){var T=0;X.forEach(function(e){var t,r,o,n,i,a,c=Y.find(function(t){return t.id===e.id||t.objectId===e.objectId});c&&(c.borderColor=(null===(t=e.style)||void 0===t?void 0:t.borderColor)||"",c.cornerColor=(null===(r=e.style)||void 0===r?void 0:r.cornerColor)||"",c.cornerSize=(null===(o=e.style)||void 0===o?void 0:o.cornerSize)||0,c.transparentCorners=(null===(n=e.style)||void 0===n?void 0:n.transparentCorners)||!1,c.opacity=(null===(i=e.style)||void 0===i?void 0:i.cropBackgroundOpacity)||1,c.set("fill",null===(a=e.style)||void 0===a?void 0:a.cropBackgroundColor),T+=1)}),T>0&&(I=!0)}}I&&t.requestRenderAll()}}},{key:"updateCropAttributes",value:function(e,t){var r=e.getObjects("rect");Array.isArray(r)&&r.length>0&&r.forEach(function(e){e.borderColor=t.borderColor||"",e.cornerColor=t.cornerColor||"",e.cornerSize=t.cornerSize||0,e.transparentCorners=t.transparentCorners||!1,e.opacity=t.cropBackgroundOpacity||1,e.set("fill",t.cropBackgroundColor)})}},{key:"changeImage",value:function(){var e=this.state.canvas;e&&(e.backgroundImage||this.initialImage())}},{key:"loadImage",value:function(e){var t=this.state,r=t.initial,o=t.canvas;if(o&&o.width&&o.height&&e.height&&e.width){var n=this.props.zoomLevel,i=e.height/e.width,a=o.width*i;o.height=a,n?o.setZoom(n):o.setZoom(o.width/e.width),o.backgroundImage=e,r&&this.setState({initial:!1},this.initialObjects.bind(this))}}},{key:"isCrossOriginURL",value:function(e){var t=e.match(this.REGEXP_ORIGINS);return null!==t&&(t[1]!==window.location.protocol||t[2]!==window.location.hostname||t[3]!==window.location.port)}},{key:"initialImage",value:function(){var e=this.props.image,r=this.loadImage.bind(this);if("string"==typeof e){var o={};this.isCrossOriginURL(e)&&(o.crossOrigin="Anonymous"),t.FabricImage.fromURL(e,o).then(function(e){r(e)})}}},{key:"initialObjects",value:function(){var e=this.state.canvas;if(e){var t=this.props,r=t.record,o=t.readonly,n=t.borderColor,i=t.cornerColor,c=t.cornerSize,l=t.transparentCorners,s=t.cropBackgroundColor,d=t.cropBackgroundOpacity;if(r){var p=r.clippings;if(Array.isArray(p)&&p.length>0&&"object"===u(p[0])){var h,v={borderColor:n,cornerColor:i,cornerSize:c,transparentCorners:l,cropBackgroundColor:s,cropBackgroundOpacity:d},f=0,y=a(p);try{for(y.s();!(h=y.n()).done;){var g=h.value;g.style&&(g.style.cropBackgroundColor&&(v.cropBackgroundColor=g.style.cropBackgroundColor),g.style.cropBackgroundOpacity&&(v.cropBackgroundOpacity=g.style.cropBackgroundOpacity),g.style.borderColor&&(v.borderColor=g.style.borderColor),g.style.cornerColor&&(v.cornerColor=g.style.cornerColor),g.style.cornerSize&&(v.cornerSize=g.style.cornerSize),g.style.transparentCorners&&(v.transparentCorners=g.style.transparentCorners));var b=this.createObject(e,g,v,o||!1);b&&(e.add(b),f+=1)}}catch(e){y.e(e)}finally{y.f()}f>0&&this.setOutput()}}else console.log("Not have any record. Skipped.")}}},{key:"zoom",value:function(e){var t=this.state.canvas;if(t){var r=e.e.deltaY,o=t.getZoom();o*=Math.pow(.999,r),o>20&&(o=20),o<.01&&(o=.01),t.setZoom(o),e.e.preventDefault(),e.e.stopPropagation();var n=this.props.zoomChanged;n&&n(o)}}},{key:"mouseHover",value:function(e){var t=this.props.onHover,r=this.shapetoStructureData.bind(this),o=e.target;o&&"rect"===o.type&&t&&t(r(o))}},{key:"mouseOut",value:function(e){var t=this.props.onHover,r=e.target;r&&"rect"===r.type&&t&&t(null)}},{key:"selectionHandler",value:function(e){var t=this.props.onSelect,r=this.shapetoStructureData.bind(this),o=e.selected;if(Array.isArray(o)&&0!=o.length){var n=o[0];if(n&&"rect"===n.type&&t)t(r(n))}}},{key:"selectionClearHandler",value:function(){var e=this.props.onSelect;e&&e(null)}},{key:"initialCanvas",value:function(){var e=this.props,r=e.id,o=e.width,n=e.height,i=e.readonly,a=new t.Canvas(r||"canvas",{width:o,height:n});if(i){a.selectionKey=void 0;var c=this.mouseHover.bind(this),l=this.mouseOut.bind(this);a.on("mouse:over",c),a.on("mouse:out",l)}else{var s=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",s),a.on("object:modified",d)}var u=this.selectionHandler.bind(this),p=this.selectionClearHandler.bind(this);a.on("selection:created",u),a.on("selection:updated",u),a.on("selection:cleared",p),a.on("mouse:down",function(e){var t=e.e;!0===t.altKey&&(this.isDragging=!0,this.selection=!1,this.lastPosX=t.clientX,this.lastPosY=t.clientY)}),a.on("mouse:move",function(e){if(this.isDragging){var t=e.e,r=this.viewportTransform;r[4]+=t.clientX-this.lastPosX,r[5]+=t.clientY-this.lastPosY,this.requestRenderAll(),this.lastPosX=t.clientX,this.lastPosY=t.clientY}}),a.on("mouse:up",function(){this.setViewportTransform(this.viewportTransform),this.isDragging=!1,this.selection=!0}),this.setState({canvas:a},this.initialImage.bind(this))}},{key:"addNew",value:function(){var e=this.state.canvas;if(e){var t=this.props,r={borderColor:t.borderColor,cornerColor:t.cornerColor,cornerSize:t.cornerSize,transparentCorners:t.transparentCorners,cropBackgroundColor:t.cropBackgroundColor,cropBackgroundOpacity:t.cropBackgroundOpacity},o=this.createObject(e,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},r,!1);o&&(e.add(o),this.setOutput())}}},{key:"doubleClickEvent",value:function(e){var t=this.state.canvas;if(t){var r=this.props,o=r.readonly,n=r.borderColor,i=r.cornerColor,a=r.cornerSize,c=r.transparentCorners,l=r.cropBackgroundColor,s=r.cropBackgroundOpacity;if(e&&e.target){var d=e.target.left,u=e.target.top,p=e.target.width,h=e.target.height,v={left:d+50,top:u+50,width:p*e.target.scaleX,height:h*e.target.scaleY,borderColor:n,cornerColor:i,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:s},f=this.createObjectByAttribute(null,v,o||!1);t.add(f),t.discardActiveObject(),t.setActiveObject(f),t.requestRenderAll(),this.setOutput()}else if(e&&e.pointer){var y={left:e.absolutePointer.x,top:e.absolutePointer.y,width:100,height:100,borderColor:n,cornerColor:i,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:s},g=this.createObjectByAttribute(null,y,o||!1);t.add(g),t.discardActiveObject(),t.setActiveObject(g),t.requestRenderAll(),this.setOutput()}}}},{key:"createObjectByAttribute",value:function(e,o,n){var i=new t.Rect({left:o.left,top:o.top,width:o.width,height:o.height,borderColor:o.borderColor,cornerColor:o.cornerColor,cornerSize:o.cornerSize,transparentCorners:o.transparentCorners,fill:o.cropBackgroundColor,opacity:o.cropBackgroundOpacity,id:e,strokeWidth:0,strokeUniform:!0,lockRotation:!0,lockMovementX:n,lockMovementY:n,lockScalingX:n,lockScalingY:n,objectId:r.v4()});return i.setControlsVisibility({mtr:!1}),i}},{key:"convertLeftTop",value:function(e){var t,r,o,n;return void 0===e.left||void 0===e.top||void 0===(null===(t=e.group)||void 0===t?void 0:t.left)||void 0===(null===(r=e.group)||void 0===r?void 0:r.top)||void 0===(null===(o=e.group)||void 0===o?void 0:o.width)||void 0===(null===(n=e.group)||void 0===n?void 0:n.height)?{left:0,top:0}:{left:e.left+e.group.left+e.group.width/2,top:e.top+e.group.top+e.group.height/2}}},{key:"shapetoStructureData",value:function(e){var r=this.state.canvas;if(!r||!r.backgroundImage)return null;var o=r.backgroundImage;if(!(o instanceof t.FabricImage))return null;if(void 0===e.left||void 0===e.top||void 0===e.width||void 0===e.height||void 0===e.scaleX||void 0===e.scaleY||void 0===o.width||void 0===o.height)return null;var n=this.props,i=n.includeDataUrl,a=n.includeHtmlCanvas,c=e.group?this.convertLeftTop(e):{left:e.left,top:e.top},l=c.left/o.width,s=c.top/o.height,d=(c.left+e.width*e.scaleX)/o.width,u=(c.top+e.height*e.scaleY)/o.height,p={x1:l,y1:s,x2:d,y2:u},h={id:e.id,objectId:e.objectId,rect:JSON.stringify(p)};if(i){var v=null;try{v=o.toDataURL({height:e.getScaledHeight(),width:e.getScaledWidth(),left:c.left,top:c.top,format:"jpeg"})}catch(e){console.error(e)}h.dataUrl=v}if(a){var f=null;try{f=o.toCanvasElement({height:e.getScaledHeight(),width:e.getScaledWidth(),left:c.left,top:c.top})}catch(e){console.error(e)}h.canvasElement=f}var y=o.width,g=o.height,b=l*y,C=d*y,m=s*g,k=u*g,w={x:b,y:m,x2:C,y2:k,w:C-b,h:k-m,boundX:y,boundY:g};return h.crop=JSON.stringify(w),h.deletedAt="-1",h}},{key:"deleteShapes",value:function(){var e=this.props.readonly,t=this.state.canvas;t&&!e&&(t.getActiveObjects().forEach(function(e){t.remove(e)}),this.setOutput())}},{key:"setOutput",value:function(){var e=this.state.canvas;if(e){var t=this.shapetoStructureData.bind(this),r=[];e.getObjects("rect").forEach(function(e){var o=t(e);o&&r.push(o)});var o=this.props.input;o&&o.onChange(r)}}},{key:"createObject",value:function(e,r,o,n){if(!e||!e.backgroundImage)return null;var i,a=e.backgroundImage;if(!(a instanceof t.FabricImage))return null;if(!a.width||!a.height)return null;i="string"==typeof r.rect?JSON.parse(r.rect):r.rect;var c=a.width*i.x1,l=a.height*i.y1,s={left:c,top:l,width:a.width*i.x2-c,height:a.height*i.y2-l,borderColor:o.borderColor,cornerColor:o.cornerColor,cornerSize:o.cornerSize,transparentCorners:o.transparentCorners,cropBackgroundColor:o.cropBackgroundColor,cropBackgroundOpacity:o.cropBackgroundOpacity};return this.createObjectByAttribute(r.id,s,n)}},{key:"discardActiveObject",value:function(){var e=this.state.canvas;e?(e.discardActiveObject(),e.requestRenderAll()):console.log("Canvas not defined")}},{key:"keyboardHandler",value:function(e){if(!e.defaultPrevented){var t=!1,r=e.key||e.keyCode;"Delete"!==r&&46!==r||(this.deleteShapes(),t=!0),t&&e.preventDefault()}}},{key:"render",value:function(){var t=this.props,r=t.height,o=t.id,n=t.readonly,i=t.style,a=t.width,c=t.tabIndex;return e.createElement("div",{id:"canvas-wrapper",style:i},e.createElement(p,{row:!0,width:a,height:r},e.createElement("div",{onKeyDown:n?void 0:this.keyboardHandler,tabIndex:null!=c?c:0},e.createElement("canvas",{id:o,height:r,style:{border:"0px solid #aaa"},width:a}))))}}])}();h.defaultProps={borderColor:"black",cornerColor:"black",cornerSize:13,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,disableZoom:!1,height:800,id:"canvas",image:void 0,includeDataUrl:!1,includeHtmlCanvas:!1,input:void 0,readonly:!1,record:{clippings:[]},transparentCorners:!0,width:800,zoomChanged:void 0},exports.ReactMultiCrop=h;

package/dist/index.esm.js

@@ -1 +1 @@
-import t,{Component as o}from"react";import{FabricImage as r,Canvas as e,Rect as i}from"fabric";import{v4 as n}from"uuid";function a(t){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a(t)}var c=function(t,o){return c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,o){t.__proto__=o}||function(t,o){for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(t[r]=o[r])},c(t,o)};function l(o){var r=o.children,e=o.height,i=o.width,n=o.row,a=void 0!==n&&n;return t.createElement("div",{style:{display:"flex",flexDirection:a?"row":"column",gap:"10px",height:e,width:i}},r)}"function"==typeof SuppressedError&&SuppressedError;var s=function(o){function s(t){var r=o.call(this,t)||this;return r.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,r.state={canvas:null,initial:!0},r.keyboardHandler=r.keyboardHandler.bind(r),r.addNew=r.addNew.bind(r),r.deleteShapes=r.deleteShapes.bind(r),r.discardActiveObject=r.discardActiveObject.bind(r),r}return function(t,o){if("function"!=typeof o&&null!==o)throw new TypeError("Class extends value "+String(o)+" is not a constructor or null");function r(){this.constructor=t}c(t,o),t.prototype=null===o?Object.create(o):(r.prototype=o.prototype,new r)}(s,o),s.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},s.prototype.componentDidUpdate=function(t){var o=this.state.canvas;if(o){var r=this.props,e=r.zoomLevel,i=r.activeObject,n=r.height,a=r.width,c=r.borderColor,l=r.cornerColor,s=r.cornerSize,d=r.transparentCorners,p=r.cropBackgroundColor,u=r.cropBackgroundOpacity,h=r.record,v=r.disableZoom,g=void 0!==v&&v,y=t.zoomLevel,f=t.activeObject,b=t.height,C=t.width,m=t.borderColor,O=t.cornerColor,k=t.cornerSize,w=t.transparentCorners,S=t.cropBackgroundColor,B=t.cropBackgroundOpacity,j=t.record,A=!1;if(y!==e&&e&&e>0&&(o.setZoom(e),A=!0),f!==i&&i){var z=o.getObjects().filter(function(t){return t.objectId===i});o.discardActiveObject();for(var I=0,E=z;I<E.length;I++){var x=E[I];o.setActiveObject(x)}A=!0}if(o.off("mouse:wheel"),!g){var D=this.zoom.bind(this);o.on("mouse:wheel",D)}if(n&&n!==b&&(o.height=n,A=!0),a&&a!==C&&(o.width=a,A=!0),c!==m||l!==O||s!==k||d!==w||p!==S||u!==B){var H={borderColor:c,cornerColor:l,cornerSize:s,transparentCorners:d,cropBackgroundColor:p,cropBackgroundOpacity:u};this.updateCropAttributes(o,H),A=!0}var P=j;if(Array.isArray(P.clippings)&&h&&Array.isArray(null==h?void 0:h.clippings)){var R=h.clippings.filter(function(t){var o,r,e,i,n,a,c,l,s,d,p,u,h=P.clippings.find(function(o){return o.id===t.id||o.objectId&&o.objectId===t.objectId});return!!h&&((null===(o=t.style)||void 0===o?void 0:o.borderColor)!==(null===(r=h.style)||void 0===r?void 0:r.borderColor)||(null===(e=t.style)||void 0===e?void 0:e.cornerColor)!==(null===(i=h.style)||void 0===i?void 0:i.cornerColor)||(null===(n=t.style)||void 0===n?void 0:n.cornerSize)!==(null===(a=h.style)||void 0===a?void 0:a.cornerSize)||(null===(c=t.style)||void 0===c?void 0:c.transparentCorners)!==(null===(l=h.style)||void 0===l?void 0:l.transparentCorners)||(null===(s=t.style)||void 0===s?void 0:s.cropBackgroundColor)!==(null===(d=h.style)||void 0===d?void 0:d.cropBackgroundColor)||(null===(p=t.style)||void 0===p?void 0:p.cropBackgroundOpacity)!==(null===(u=h.style)||void 0===u?void 0:u.cropBackgroundOpacity))}),X=o.getObjects("rect");if(Array.isArray(X)&&X.length>0){var Y=0;R.forEach(function(t){var o,r,e,i,n,a,c=X.find(function(o){return o.id===t.id||o.objectId===t.objectId});c&&(c.borderColor=(null===(o=t.style)||void 0===o?void 0:o.borderColor)||"",c.cornerColor=(null===(r=t.style)||void 0===r?void 0:r.cornerColor)||"",c.cornerSize=(null===(e=t.style)||void 0===e?void 0:e.cornerSize)||0,c.transparentCorners=(null===(i=t.style)||void 0===i?void 0:i.transparentCorners)||!1,c.opacity=(null===(n=t.style)||void 0===n?void 0:n.cropBackgroundOpacity)||1,c.set("fill",null===(a=t.style)||void 0===a?void 0:a.cropBackgroundColor),Y+=1)}),Y>0&&(A=!0)}}A&&o.requestRenderAll()}},s.prototype.updateCropAttributes=function(t,o){var r=t.getObjects("rect");Array.isArray(r)&&r.length>0&&r.forEach(function(t){t.borderColor=o.borderColor||"",t.cornerColor=o.cornerColor||"",t.cornerSize=o.cornerSize||0,t.transparentCorners=o.transparentCorners||!1,t.opacity=o.cropBackgroundOpacity||1,t.set("fill",o.cropBackgroundColor)})},s.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},s.prototype.loadImage=function(t){var o=this.state,r=o.initial,e=o.canvas;if(e&&e.width&&e.height&&t.height&&t.width){var i=this.props.zoomLevel,n=t.height/t.width,a=e.width*n;e.height=a,i?e.setZoom(i):e.setZoom(e.width/t.width),e.backgroundImage=t,r&&this.setState({initial:!1},this.initialObjects.bind(this))}},s.prototype.isCrossOriginURL=function(t){var o=t.match(this.REGEXP_ORIGINS);return null!==o&&(o[1]!==window.location.protocol||o[2]!==window.location.hostname||o[3]!==window.location.port)},s.prototype.initialImage=function(){var t=this.props.image,o=this.loadImage.bind(this);if("string"==typeof t){var e={};this.isCrossOriginURL(t)&&(e.crossOrigin="Anonymous"),r.fromURL(t,e).then(function(t){o(t)})}},s.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var o=this.props,r=o.record,e=o.readonly,i=o.borderColor,n=o.cornerColor,c=o.cornerSize,l=o.transparentCorners,s=o.cropBackgroundColor,d=o.cropBackgroundOpacity;if(r){var p=r.clippings;if(Array.isArray(p)&&p.length>0&&"object"===a(p[0])){for(var u={borderColor:i,cornerColor:n,cornerSize:c,transparentCorners:l,cropBackgroundColor:s,cropBackgroundOpacity:d},h=0,v=0,g=p;v<g.length;v++){var y=g[v];y.style&&(y.style.cropBackgroundColor&&(u.cropBackgroundColor=y.style.cropBackgroundColor),y.style.cropBackgroundOpacity&&(u.cropBackgroundOpacity=y.style.cropBackgroundOpacity),y.style.borderColor&&(u.borderColor=y.style.borderColor),y.style.cornerColor&&(u.cornerColor=y.style.cornerColor),y.style.cornerSize&&(u.cornerSize=y.style.cornerSize),y.style.transparentCorners&&(u.transparentCorners=y.style.transparentCorners));var f=this.createObject(t,y,u,e||!1);f&&(t.add(f),h+=1)}h>0&&this.setOutput()}}else console.log("Not have any record. Skipped.")}},s.prototype.zoom=function(t){var o=this.state.canvas;if(o){var r=t.e.deltaY,e=o.getZoom();(e*=Math.pow(.999,r))>20&&(e=20),e<.01&&(e=.01),o.setZoom(e),t.e.preventDefault(),t.e.stopPropagation();var i=this.props.zoomChanged;i&&i(e)}},s.prototype.mouseHover=function(t){var o=this.props.onHover,r=this.shapetoStructureData.bind(this),e=t.target;e&&"rect"===e.type&&o&&o(r(e))},s.prototype.mouseOut=function(t){var o=this.props.onHover,r=t.target;r&&"rect"===r.type&&o&&o(null)},s.prototype.selectionHandler=function(t){var o=this.props.onSelect,r=this.shapetoStructureData.bind(this),e=t.selected;if(Array.isArray(e)&&0!=e.length){var i=e[0];if(i&&"rect"===i.type&&o)o(r(i))}},s.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},s.prototype.initialCanvas=function(){var t=this.props,o=t.id,r=t.width,i=t.height,n=t.readonly,a=new e(o||"canvas",{width:r,height:i});if(n){a.selectionKey=void 0;var c=this.mouseHover.bind(this),l=this.mouseOut.bind(this);a.on("mouse:over",c),a.on("mouse:out",l)}else{var s=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",s),a.on("object:modified",d)}var p=this.selectionHandler.bind(this),u=this.selectionClearHandler.bind(this);a.on("selection:created",p),a.on("selection:updated",p),a.on("selection:cleared",u),a.on("mouse:down",function(t){var o=t.e;!0===o.altKey&&(this.isDragging=!0,this.selection=!1,this.lastPosX=o.clientX,this.lastPosY=o.clientY)}),a.on("mouse:move",function(t){if(this.isDragging){var o=t.e,r=this.viewportTransform;r[4]+=o.clientX-this.lastPosX,r[5]+=o.clientY-this.lastPosY,this.requestRenderAll(),this.lastPosX=o.clientX,this.lastPosY=o.clientY}}),a.on("mouse:up",function(){this.setViewportTransform(this.viewportTransform),this.isDragging=!1,this.selection=!0}),this.setState({canvas:a},this.initialImage.bind(this))},s.prototype.addNew=function(){var t=this.state.canvas;if(t){var o=this.props,r={borderColor:o.borderColor,cornerColor:o.cornerColor,cornerSize:o.cornerSize,transparentCorners:o.transparentCorners,cropBackgroundColor:o.cropBackgroundColor,cropBackgroundOpacity:o.cropBackgroundOpacity},e=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},r,!1);e&&(t.add(e),this.setOutput())}},s.prototype.doubleClickEvent=function(t){var o=this.state.canvas;if(o){var r=this.props,e=r.readonly,i=r.borderColor,n=r.cornerColor,a=r.cornerSize,c=r.transparentCorners,l=r.cropBackgroundColor,s=r.cropBackgroundOpacity;if(t&&t.target){var d=t.target.left,p=t.target.top,u=t.target.width,h=t.target.height,v={left:d+50,top:p+50,width:u*t.target.scaleX,height:h*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:s},g=this.createObjectByAttribute(null,v,e||!1);o.add(g),o.discardActiveObject(),o.setActiveObject(g),o.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){v={left:d=t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:s},g=this.createObjectByAttribute(null,v,e||!1);o.add(g),o.discardActiveObject(),o.setActiveObject(g),o.requestRenderAll(),this.setOutput()}}},s.prototype.createObjectByAttribute=function(t,o,r){var e=new i({left:o.left,top:o.top,width:o.width,height:o.height,borderColor:o.borderColor,cornerColor:o.cornerColor,cornerSize:o.cornerSize,transparentCorners:o.transparentCorners,fill:o.cropBackgroundColor,opacity:o.cropBackgroundOpacity,id:t,strokeWidth:0,strokeUniform:!0,lockRotation:!0,lockMovementX:r,lockMovementY:r,lockScalingX:r,lockScalingY:r,objectId:n()});return e.setControlsVisibility({mtr:!1}),e},s.prototype.convertLeftTop=function(t){var o,r,e,i;return void 0===t.left||void 0===t.top||void 0===(null===(o=t.group)||void 0===o?void 0:o.left)||void 0===(null===(r=t.group)||void 0===r?void 0:r.top)||void 0===(null===(e=t.group)||void 0===e?void 0:e.width)||void 0===(null===(i=t.group)||void 0===i?void 0:i.height)?{left:0,top:0}:{left:t.left+t.group.left+t.group.width/2,top:t.top+t.group.top+t.group.height/2}},s.prototype.shapetoStructureData=function(t){var o=this.state.canvas;if(!o||!o.backgroundImage)return null;var e=o.backgroundImage;if(!(e instanceof r))return null;if(void 0===t.left||void 0===t.top||void 0===t.width||void 0===t.height||void 0===t.scaleX||void 0===t.scaleY||void 0===e.width||void 0===e.height)return null;var i=this.props,n=i.includeDataUrl,a=i.includeHtmlCanvas,c=t.group?this.convertLeftTop(t):{left:t.left,top:t.top},l=c.left/e.width,s=c.top/e.height,d=(c.left+t.width*t.scaleX)/e.width,p=(c.top+t.height*t.scaleY)/e.height,u={x1:l,y1:s,x2:d,y2:p},h={id:t.id,objectId:t.objectId,rect:JSON.stringify(u)};if(n){var v=null;try{v=e.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top,format:"jpeg"})}catch(t){console.error(t)}h.dataUrl=v}if(a){var g=null;try{g=e.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top})}catch(t){console.error(t)}h.canvasElement=g}var y=e.width,f=e.height,b=l*y,C=d*y,m=s*f,O=p*f,k={x:b,y:m,x2:C,y2:O,w:C-b,h:O-m,boundX:y,boundY:f};return h.crop=JSON.stringify(k),h.deletedAt="-1",h},s.prototype.deleteShapes=function(){var t=this.props.readonly,o=this.state.canvas;o&&!t&&(o.getActiveObjects().forEach(function(t){o.remove(t)}),this.setOutput())},s.prototype.setOutput=function(){var t=this.state.canvas;if(t){var o=this.shapetoStructureData.bind(this),r=[];t.getObjects("rect").forEach(function(t){var e=o(t);e&&r.push(e)});var e=this.props.input;e&&e.onChange(r)}},s.prototype.createObject=function(t,o,e,i){if(!t||!t.backgroundImage)return null;var n,a=t.backgroundImage;if(!(a instanceof r))return null;if(!a.width||!a.height)return null;n="string"==typeof o.rect?JSON.parse(o.rect):o.rect;var c=a.width*n.x1,l=a.height*n.y1,s={left:c,top:l,width:a.width*n.x2-c,height:a.height*n.y2-l,borderColor:e.borderColor,cornerColor:e.cornerColor,cornerSize:e.cornerSize,transparentCorners:e.transparentCorners,cropBackgroundColor:e.cropBackgroundColor,cropBackgroundOpacity:e.cropBackgroundOpacity};return this.createObjectByAttribute(o.id,s,i)},s.prototype.discardActiveObject=function(){var t=this.state.canvas;t?(t.discardActiveObject(),t.requestRenderAll()):console.log("Canvas not defined")},s.prototype.keyboardHandler=function(t){if(!t.defaultPrevented){var o=!1,r=t.key||t.keyCode;"Delete"!==r&&46!==r||(this.deleteShapes(),o=!0),o&&t.preventDefault()}},s.prototype.render=function(){var o=this.props,r=o.height,e=o.id,i=o.readonly,n=o.style,a=o.width,c=o.tabIndex;return t.createElement("div",{id:"canvas-wrapper",style:n},t.createElement(l,{row:!0,width:a,height:r},t.createElement("div",{onKeyDown:i?void 0:this.keyboardHandler,tabIndex:null!=c?c:0},t.createElement("canvas",{id:e,height:r,style:{border:"0px solid #aaa"},width:a}))))},s.defaultProps={borderColor:"black",cornerColor:"black",cornerSize:13,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,disableZoom:!1,height:800,id:"canvas",image:void 0,includeDataUrl:!1,includeHtmlCanvas:!1,input:void 0,readonly:!1,record:{clippings:[]},transparentCorners:!0,width:800,zoomChanged:void 0},s}(o);export{s as ReactMultiCrop};
+import t,{Component as e}from"react";import{FabricImage as r,Canvas as o,Rect as n}from"fabric";import{v4 as i}from"uuid";function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,o=Array(e);r<e;r++)o[r]=t[r];return o}function c(t,e,r){return e=d(e),function(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,u()?Reflect.construct(e,r||[],d(t).constructor):e.apply(t,r))}function l(t,e,r){return e&&function(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,h(o.key),o)}}(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t}function s(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(t){if("string"==typeof t)return a(t,e);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}(t))||e){r&&(t=r);var o=0,n=function(){};return{s:n,n:function(){return o>=t.length?{done:!0}:{done:!1,value:t[o++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,i=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw i}}}}function d(t){return d=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},d(t)}function u(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(u=function(){return!!t})()}function p(t,e){return p=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},p(t,e)}function h(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,e);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t,"string");return"symbol"==typeof e?e:e+""}function v(t){return v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},v(t)}function f(e){var r=e.children,o=e.height,n=e.width,i=e.row,a=void 0!==i&&i;return t.createElement("div",{style:{display:"flex",flexDirection:a?"row":"column",gap:"10px",height:o,width:n}},r)}var y=function(){function a(t){var e;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,a),(e=c(this,a,[t])).REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,e.state={canvas:null,initial:!0},e.keyboardHandler=e.keyboardHandler.bind(e),e.addNew=e.addNew.bind(e),e.deleteShapes=e.deleteShapes.bind(e),e.discardActiveObject=e.discardActiveObject.bind(e),e}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&p(t,e)}(a,e),l(a,[{key:"componentDidMount",value:function(){this.state.canvas||this.initialCanvas()}},{key:"componentDidUpdate",value:function(t){var e=this.state.canvas;if(e){var r=this.props,o=r.zoomLevel,n=r.activeObject,i=r.height,a=r.width,c=r.borderColor,l=r.cornerColor,d=r.cornerSize,u=r.transparentCorners,p=r.cropBackgroundColor,h=r.cropBackgroundOpacity,v=r.record,f=r.disableZoom,y=void 0!==f&&f,g=t.zoomLevel,b=t.activeObject,C=t.height,m=t.width,k=t.borderColor,w=t.cornerColor,O=t.cornerSize,S=t.transparentCorners,j=t.cropBackgroundColor,B=t.cropBackgroundOpacity,A=t.record,z=!1;if(g!==o&&o&&o>0&&(e.setZoom(o),z=!0),b!==n&&n){var I=e.getObjects().filter(function(t){return t.objectId===n});e.discardActiveObject();var E,P=s(I);try{for(P.s();!(E=P.n()).done;){var x=E.value;e.setActiveObject(x)}}catch(t){P.e(t)}finally{P.f()}z=!0}if(e.off("mouse:wheel"),!y){var D=this.zoom.bind(this);e.on("mouse:wheel",D)}if(i&&i!==C&&(e.height=i,z=!0),a&&a!==m&&(e.width=a,z=!0),c!==k||l!==w||d!==O||u!==S||p!==j||h!==B){var R={borderColor:c,cornerColor:l,cornerSize:d,transparentCorners:u,cropBackgroundColor:p,cropBackgroundOpacity:h};this.updateCropAttributes(e,R),z=!0}var H=A;if(Array.isArray(H.clippings)&&v&&Array.isArray(null==v?void 0:v.clippings)){var X=v.clippings.filter(function(t){var e,r,o,n,i,a,c,l,s,d,u,p,h=H.clippings.find(function(e){return e.id===t.id||e.objectId&&e.objectId===t.objectId});return!!h&&((null===(e=t.style)||void 0===e?void 0:e.borderColor)!==(null===(r=h.style)||void 0===r?void 0:r.borderColor)||(null===(o=t.style)||void 0===o?void 0:o.cornerColor)!==(null===(n=h.style)||void 0===n?void 0:n.cornerColor)||(null===(i=t.style)||void 0===i?void 0:i.cornerSize)!==(null===(a=h.style)||void 0===a?void 0:a.cornerSize)||(null===(c=t.style)||void 0===c?void 0:c.transparentCorners)!==(null===(l=h.style)||void 0===l?void 0:l.transparentCorners)||(null===(s=t.style)||void 0===s?void 0:s.cropBackgroundColor)!==(null===(d=h.style)||void 0===d?void 0:d.cropBackgroundColor)||(null===(u=t.style)||void 0===u?void 0:u.cropBackgroundOpacity)!==(null===(p=h.style)||void 0===p?void 0:p.cropBackgroundOpacity))}),Y=e.getObjects("rect");if(Array.isArray(Y)&&Y.length>0){var T=0;X.forEach(function(t){var e,r,o,n,i,a,c=Y.find(function(e){return e.id===t.id||e.objectId===t.objectId});c&&(c.borderColor=(null===(e=t.style)||void 0===e?void 0:e.borderColor)||"",c.cornerColor=(null===(r=t.style)||void 0===r?void 0:r.cornerColor)||"",c.cornerSize=(null===(o=t.style)||void 0===o?void 0:o.cornerSize)||0,c.transparentCorners=(null===(n=t.style)||void 0===n?void 0:n.transparentCorners)||!1,c.opacity=(null===(i=t.style)||void 0===i?void 0:i.cropBackgroundOpacity)||1,c.set("fill",null===(a=t.style)||void 0===a?void 0:a.cropBackgroundColor),T+=1)}),T>0&&(z=!0)}}z&&e.requestRenderAll()}}},{key:"updateCropAttributes",value:function(t,e){var r=t.getObjects("rect");Array.isArray(r)&&r.length>0&&r.forEach(function(t){t.borderColor=e.borderColor||"",t.cornerColor=e.cornerColor||"",t.cornerSize=e.cornerSize||0,t.transparentCorners=e.transparentCorners||!1,t.opacity=e.cropBackgroundOpacity||1,t.set("fill",e.cropBackgroundColor)})}},{key:"changeImage",value:function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())}},{key:"loadImage",value:function(t){var e=this.state,r=e.initial,o=e.canvas;if(o&&o.width&&o.height&&t.height&&t.width){var n=this.props.zoomLevel,i=t.height/t.width,a=o.width*i;o.height=a,n?o.setZoom(n):o.setZoom(o.width/t.width),o.backgroundImage=t,r&&this.setState({initial:!1},this.initialObjects.bind(this))}}},{key:"isCrossOriginURL",value:function(t){var e=t.match(this.REGEXP_ORIGINS);return null!==e&&(e[1]!==window.location.protocol||e[2]!==window.location.hostname||e[3]!==window.location.port)}},{key:"initialImage",value:function(){var t=this.props.image,e=this.loadImage.bind(this);if("string"==typeof t){var o={};this.isCrossOriginURL(t)&&(o.crossOrigin="Anonymous"),r.fromURL(t,o).then(function(t){e(t)})}}},{key:"initialObjects",value:function(){var t=this.state.canvas;if(t){var e=this.props,r=e.record,o=e.readonly,n=e.borderColor,i=e.cornerColor,a=e.cornerSize,c=e.transparentCorners,l=e.cropBackgroundColor,d=e.cropBackgroundOpacity;if(r){var u=r.clippings;if(Array.isArray(u)&&u.length>0&&"object"===v(u[0])){var p,h={borderColor:n,cornerColor:i,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:d},f=0,y=s(u);try{for(y.s();!(p=y.n()).done;){var g=p.value;g.style&&(g.style.cropBackgroundColor&&(h.cropBackgroundColor=g.style.cropBackgroundColor),g.style.cropBackgroundOpacity&&(h.cropBackgroundOpacity=g.style.cropBackgroundOpacity),g.style.borderColor&&(h.borderColor=g.style.borderColor),g.style.cornerColor&&(h.cornerColor=g.style.cornerColor),g.style.cornerSize&&(h.cornerSize=g.style.cornerSize),g.style.transparentCorners&&(h.transparentCorners=g.style.transparentCorners));var b=this.createObject(t,g,h,o||!1);b&&(t.add(b),f+=1)}}catch(t){y.e(t)}finally{y.f()}f>0&&this.setOutput()}}else console.log("Not have any record. Skipped.")}}},{key:"zoom",value:function(t){var e=this.state.canvas;if(e){var r=t.e.deltaY,o=e.getZoom();o*=Math.pow(.999,r),o>20&&(o=20),o<.01&&(o=.01),e.setZoom(o),t.e.preventDefault(),t.e.stopPropagation();var n=this.props.zoomChanged;n&&n(o)}}},{key:"mouseHover",value:function(t){var e=this.props.onHover,r=this.shapetoStructureData.bind(this),o=t.target;o&&"rect"===o.type&&e&&e(r(o))}},{key:"mouseOut",value:function(t){var e=this.props.onHover,r=t.target;r&&"rect"===r.type&&e&&e(null)}},{key:"selectionHandler",value:function(t){var e=this.props.onSelect,r=this.shapetoStructureData.bind(this),o=t.selected;if(Array.isArray(o)&&0!=o.length){var n=o[0];if(n&&"rect"===n.type&&e)e(r(n))}}},{key:"selectionClearHandler",value:function(){var t=this.props.onSelect;t&&t(null)}},{key:"initialCanvas",value:function(){var t=this.props,e=t.id,r=t.width,n=t.height,i=t.readonly,a=new o(e||"canvas",{width:r,height:n});if(i){a.selectionKey=void 0;var c=this.mouseHover.bind(this),l=this.mouseOut.bind(this);a.on("mouse:over",c),a.on("mouse:out",l)}else{var s=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",s),a.on("object:modified",d)}var u=this.selectionHandler.bind(this),p=this.selectionClearHandler.bind(this);a.on("selection:created",u),a.on("selection:updated",u),a.on("selection:cleared",p),a.on("mouse:down",function(t){var e=t.e;!0===e.altKey&&(this.isDragging=!0,this.selection=!1,this.lastPosX=e.clientX,this.lastPosY=e.clientY)}),a.on("mouse:move",function(t){if(this.isDragging){var e=t.e,r=this.viewportTransform;r[4]+=e.clientX-this.lastPosX,r[5]+=e.clientY-this.lastPosY,this.requestRenderAll(),this.lastPosX=e.clientX,this.lastPosY=e.clientY}}),a.on("mouse:up",function(){this.setViewportTransform(this.viewportTransform),this.isDragging=!1,this.selection=!0}),this.setState({canvas:a},this.initialImage.bind(this))}},{key:"addNew",value:function(){var t=this.state.canvas;if(t){var e=this.props,r={borderColor:e.borderColor,cornerColor:e.cornerColor,cornerSize:e.cornerSize,transparentCorners:e.transparentCorners,cropBackgroundColor:e.cropBackgroundColor,cropBackgroundOpacity:e.cropBackgroundOpacity},o=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},r,!1);o&&(t.add(o),this.setOutput())}}},{key:"doubleClickEvent",value:function(t){var e=this.state.canvas;if(e){var r=this.props,o=r.readonly,n=r.borderColor,i=r.cornerColor,a=r.cornerSize,c=r.transparentCorners,l=r.cropBackgroundColor,s=r.cropBackgroundOpacity;if(t&&t.target){var d=t.target.left,u=t.target.top,p=t.target.width,h=t.target.height,v={left:d+50,top:u+50,width:p*t.target.scaleX,height:h*t.target.scaleY,borderColor:n,cornerColor:i,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:s},f=this.createObjectByAttribute(null,v,o||!1);e.add(f),e.discardActiveObject(),e.setActiveObject(f),e.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){var y={left:t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:n,cornerColor:i,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:s},g=this.createObjectByAttribute(null,y,o||!1);e.add(g),e.discardActiveObject(),e.setActiveObject(g),e.requestRenderAll(),this.setOutput()}}}},{key:"createObjectByAttribute",value:function(t,e,r){var o=new n({left:e.left,top:e.top,width:e.width,height:e.height,borderColor:e.borderColor,cornerColor:e.cornerColor,cornerSize:e.cornerSize,transparentCorners:e.transparentCorners,fill:e.cropBackgroundColor,opacity:e.cropBackgroundOpacity,id:t,strokeWidth:0,strokeUniform:!0,lockRotation:!0,lockMovementX:r,lockMovementY:r,lockScalingX:r,lockScalingY:r,objectId:i()});return o.setControlsVisibility({mtr:!1}),o}},{key:"convertLeftTop",value:function(t){var e,r,o,n;return void 0===t.left||void 0===t.top||void 0===(null===(e=t.group)||void 0===e?void 0:e.left)||void 0===(null===(r=t.group)||void 0===r?void 0:r.top)||void 0===(null===(o=t.group)||void 0===o?void 0:o.width)||void 0===(null===(n=t.group)||void 0===n?void 0:n.height)?{left:0,top:0}:{left:t.left+t.group.left+t.group.width/2,top:t.top+t.group.top+t.group.height/2}}},{key:"shapetoStructureData",value:function(t){var e=this.state.canvas;if(!e||!e.backgroundImage)return null;var o=e.backgroundImage;if(!(o instanceof r))return null;if(void 0===t.left||void 0===t.top||void 0===t.width||void 0===t.height||void 0===t.scaleX||void 0===t.scaleY||void 0===o.width||void 0===o.height)return null;var n=this.props,i=n.includeDataUrl,a=n.includeHtmlCanvas,c=t.group?this.convertLeftTop(t):{left:t.left,top:t.top},l=c.left/o.width,s=c.top/o.height,d=(c.left+t.width*t.scaleX)/o.width,u=(c.top+t.height*t.scaleY)/o.height,p={x1:l,y1:s,x2:d,y2:u},h={id:t.id,objectId:t.objectId,rect:JSON.stringify(p)};if(i){var v=null;try{v=o.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top,format:"jpeg"})}catch(t){console.error(t)}h.dataUrl=v}if(a){var f=null;try{f=o.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top})}catch(t){console.error(t)}h.canvasElement=f}var y=o.width,g=o.height,b=l*y,C=d*y,m=s*g,k=u*g,w={x:b,y:m,x2:C,y2:k,w:C-b,h:k-m,boundX:y,boundY:g};return h.crop=JSON.stringify(w),h.deletedAt="-1",h}},{key:"deleteShapes",value:function(){var t=this.props.readonly,e=this.state.canvas;e&&!t&&(e.getActiveObjects().forEach(function(t){e.remove(t)}),this.setOutput())}},{key:"setOutput",value:function(){var t=this.state.canvas;if(t){var e=this.shapetoStructureData.bind(this),r=[];t.getObjects("rect").forEach(function(t){var o=e(t);o&&r.push(o)});var o=this.props.input;o&&o.onChange(r)}}},{key:"createObject",value:function(t,e,o,n){if(!t||!t.backgroundImage)return null;var i,a=t.backgroundImage;if(!(a instanceof r))return null;if(!a.width||!a.height)return null;i="string"==typeof e.rect?JSON.parse(e.rect):e.rect;var c=a.width*i.x1,l=a.height*i.y1,s={left:c,top:l,width:a.width*i.x2-c,height:a.height*i.y2-l,borderColor:o.borderColor,cornerColor:o.cornerColor,cornerSize:o.cornerSize,transparentCorners:o.transparentCorners,cropBackgroundColor:o.cropBackgroundColor,cropBackgroundOpacity:o.cropBackgroundOpacity};return this.createObjectByAttribute(e.id,s,n)}},{key:"discardActiveObject",value:function(){var t=this.state.canvas;t?(t.discardActiveObject(),t.requestRenderAll()):console.log("Canvas not defined")}},{key:"keyboardHandler",value:function(t){if(!t.defaultPrevented){var e=!1,r=t.key||t.keyCode;"Delete"!==r&&46!==r||(this.deleteShapes(),e=!0),e&&t.preventDefault()}}},{key:"render",value:function(){var e=this.props,r=e.height,o=e.id,n=e.readonly,i=e.style,a=e.width,c=e.tabIndex;return t.createElement("div",{id:"canvas-wrapper",style:i},t.createElement(f,{row:!0,width:a,height:r},t.createElement("div",{onKeyDown:n?void 0:this.keyboardHandler,tabIndex:null!=c?c:0},t.createElement("canvas",{id:o,height:r,style:{border:"0px solid #aaa"},width:a}))))}}])}();y.defaultProps={borderColor:"black",cornerColor:"black",cornerSize:13,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,disableZoom:!1,height:800,id:"canvas",image:void 0,includeDataUrl:!1,includeHtmlCanvas:!1,input:void 0,readonly:!1,record:{clippings:[]},transparentCorners:!0,width:800,zoomChanged:void 0};export{y as ReactMultiCrop};

package/package.json

@@ -25,58 +25,58 @@
     "url": "https://github.com/berviantoleo"
   },
   "devDependencies": {
-    "@babel/cli": "^7.26.4",
-    "@babel/core": "^7.26.8",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.26.8",
-    "@babel/preset-env": "^7.26.8",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.26.0",
-    "@babel/runtime": "^7.26.7",
+    "@babel/plugin-transform-runtime": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/runtime": "^7.29.2",
     "@rollup/plugin-babel": "^7.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@storybook/addon-a11y": "^10.0.2",
-    "@storybook/addon-links": "^10.0.2",
-    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
-    "@storybook/react": "^10.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "^10.3.4",
+    "@storybook/addon-links": "^10.3.4",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
+    "@storybook/react": "^10.3.4",
     "@storybook/react-webpack5": "10.3.4",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
     "@types/uuid": "^11.0.0",
-    "babel-jest": "^30.0.2",
-    "babel-loader": "^10.0.0",
+    "babel-jest": "^30.3.0",
+    "babel-loader": "^10.1.1",
     "clsx": "^2.1.1",
-    "jest": "^30.0.3",
-    "jest-environment-jsdom": "^30.0.2",
-    "react-test-renderer": "^19.0.0",
-    "rollup": "^4.34.6",
-    "rollup-plugin-delete": "^3.0.1",
+    "jest": "^30.3.0",
+    "jest-environment-jsdom": "^30.3.0",
+    "react-test-renderer": "^19.2.4",
+    "rollup": "^4.60.1",
+    "rollup-plugin-delete": "^3.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sizes": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.37.0",
-    "sass": "^1.89.1",
+    "sass": "^1.99.0",
     "storybook": "10.3.4",
-    "ts-jest": "^29.2.5"
+    "ts-jest": "^29.4.9"
   },
   "peerDependencies": {
-    "canvas": "^3.1.2",
-    "fabric": "^6.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "canvas": "^3.2.3",
+    "fabric": "^7.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "uuid": "^13.0.0"
   },
   "dependencies": {
-    "canvas": "^3.1.2",
-    "fabric": "^7.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "canvas": "^3.2.3",
+    "fabric": "^7.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "uuid": "^13.0.0"
   },
   "license": "MIT",
-  "version": "0.43.20",
-  "gitHead": "bf9bc39517236c6ac8ac49886a927c38dee2fcd1"
+  "version": "0.44.0",
+  "gitHead": "6a8b7ba8eff7632f546b7e5f8ff687853a529e75"
 }

package/dist/types/ReactMultiCrop/ReactMultiCrop.d.ts

@@ -1,34 +0,0 @@
-import React, { Component } from 'react';
-import { Canvas, FabricImage, Rect } from 'fabric';
-import { IAttribute, ICoord, IOutputData, IReactMultiCropProps, IReactMultiCropStates } from './interfaces';
-declare class ReactMultiCrop extends Component<IReactMultiCropProps, IReactMultiCropStates> {
-    static defaultProps: IReactMultiCropProps;
-    private REGEXP_ORIGINS;
-    constructor(props: IReactMultiCropProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: any): void;
-    updateCropAttributes(canvas: Canvas, attribute: IAttribute): void;
-    changeImage(): void;
-    loadImage(img: FabricImage): void;
-    isCrossOriginURL(url: string): boolean;
-    initialImage(): void;
-    initialObjects(): void;
-    zoom(options: any): void;
-    mouseHover(options: any): void;
-    mouseOut(options: any): void;
-    selectionHandler(options: any): void;
-    selectionClearHandler(): void;
-    initialCanvas(): void;
-    addNew(): void;
-    doubleClickEvent(options: any): void;
-    createObjectByAttribute(existingId: string | null, attribute: IAttribute, readonly: boolean): Rect;
-    private convertLeftTop;
-    shapetoStructureData(element: Rect): IOutputData | null;
-    deleteShapes(): void;
-    setOutput(): void;
-    createObject(canvas: Canvas | null, coor: ICoord, attribute: IAttribute, readonly: boolean): Rect | null;
-    discardActiveObject(): void;
-    keyboardHandler(event: React.KeyboardEvent<HTMLDivElement>): void;
-    render(): React.JSX.Element;
-}
-export default ReactMultiCrop;

package/dist/types/ReactMultiCrop/ReactMultiCrop.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import ReactMultiCrop from './ReactMultiCrop';
-declare const meta: Meta<typeof ReactMultiCrop>;
-export default meta;
-type Story = StoryObj<typeof ReactMultiCrop>;
-export declare const DefaultEditable: Story;
-export declare const DefaultReadOnly: Story;

package/dist/types/ReactMultiCrop/components/Container.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-type Props = {
-    children?: React.ReactNode;
-    height?: number;
-    width?: number;
-    row?: boolean;
-};
-export default function Container({ children, height, width, row }: Props): React.JSX.Element;
-export {};

package/dist/types/ReactMultiCrop/index.d.ts

@@ -1,11 +0,0 @@
-declare module 'fabric' {
-    interface FabricObject {
-        id: string | null;
-        objectId: string;
-    }
-    interface SerializedObjectProps {
-        id: string | null;
-        objectId: string;
-    }
-}
-export { default } from './ReactMultiCrop';

package/dist/types/ReactMultiCrop/interfaces/index.d.ts

@@ -1,89 +0,0 @@
-import { Canvas } from 'fabric';
-export interface ICropStyle {
-    borderColor?: string;
-    cornerColor?: string;
-    cornerSize?: number;
-    cropBackgroundColor?: string;
-    cropBackgroundOpacity?: number;
-    transparentCorners?: boolean;
-}
-export interface IRectCoord {
-    x1: number;
-    x2: number;
-    y1: number;
-    y2: number;
-}
-export interface ICoord {
-    id: string | null;
-    rect: IRectCoord | string;
-    objectId?: string;
-}
-export interface ICropProps extends ICoord {
-    rectPx?: IRectCoord | string | object;
-    style?: ICropStyle;
-}
-export interface IRecordProps {
-    clippings: Array<ICropProps>;
-}
-export interface IOutputData extends ICoord {
-    crop?: string;
-    deletedAt?: string;
-    dataUrl?: string | null;
-    canvasElement?: HTMLCanvasElement | null;
-    objectId: string;
-}
-export interface IInputProps {
-    /**
-     * Give output each changes in the canvas, might be moved to root props.
-     * @param value Output value
-     */
-    onChange(value: Array<IOutputData>): void;
-}
-export interface IReactMultiCropProps {
-    activeObject?: string;
-    disableZoom?: boolean;
-    id?: string;
-    image?: string;
-    includeDataUrl?: boolean;
-    includeHtmlCanvas?: boolean;
-    input?: IInputProps;
-    onHover?(value: IOutputData | null): void;
-    onSelect?(value: IOutputData | null): void;
-    readonly?: boolean;
-    record?: IRecordProps;
-    height?: number;
-    width?: number;
-    tabIndex?: number;
-    zoomChanged?(value: number): void;
-    zoomLevel?: number;
-    /** @deprecated use borderColor in record */
-    borderColor?: string;
-    /** @deprecated use cornerColor in record */
-    cornerColor?: string;
-    /** @deprecated use cornerSize in record */
-    cornerSize?: number;
-    /** @deprecated use cropBackgroundColor in record */
-    cropBackgroundColor?: string;
-    /** @deprecated use cropBackgroundOpacity in record */
-    cropBackgroundOpacity?: number;
-    /** @deprecated use transparentCorners in record */
-    transparentCorners?: boolean;
-    /** @deprecated avoid to use this props */
-    style?: React.CSSProperties;
-}
-export interface IReactMultiCropStates {
-    canvas: Canvas | null;
-    initial: boolean;
-}
-export interface IAttribute {
-    left?: number;
-    top?: number;
-    height?: number;
-    width?: number;
-    borderColor?: string;
-    cornerColor?: string;
-    cornerSize?: number;
-    transparentCorners?: boolean;
-    cropBackgroundColor?: string;
-    cropBackgroundOpacity?: number;
-}

package/dist/types/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ReactMultiCrop } from './ReactMultiCrop';
-export { IRecordProps, IOutputData, IInputProps, IReactMultiCropProps, IReactMultiCropStates, IRectCoord, ICoord, IAttribute, } from './ReactMultiCrop/interfaces';