@berviantoleo/react-multi-crop 0.42.10 → 0.42.12

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.42.12](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.42.11...@berviantoleo/react-multi-crop@0.42.12) (2025-06-30)
+
+**Note:** Version bump only for package @berviantoleo/react-multi-crop
+
+## [0.42.11](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.42.10...@berviantoleo/react-multi-crop@0.42.11) (2025-06-05)
+
+**Note:** Version bump only for package @berviantoleo/react-multi-crop
+
 ## [0.42.10](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.42.9...@berviantoleo/react-multi-crop@0.42.10) (2025-06-05)
 
 ### Bug Fixes

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 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;

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 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};

package/package.json

@@ -35,15 +35,11 @@
     "@babel/runtime": "^7.26.7",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^16.0.0",
-    "@storybook/addon-a11y": "^8.6.9",
-    "@storybook/addon-essentials": "^8.6.9",
-    "@storybook/addon-links": "^8.6.9",
-    "@storybook/addon-storysource": "^8.6.9",
+    "@storybook/addon-a11y": "^9.0.4",
+    "@storybook/addon-links": "^9.0.4",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/react": "^8.6.9",
-    "@storybook/react-webpack5": "8.6.14",
-    "@storybook/source-loader": "^8.6.9",
-    "@storybook/test": "^8.6.9",
+    "@storybook/react": "^9.0.4",
+    "@storybook/react-webpack5": "9.0.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -62,22 +58,24 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.89.1",
-    "storybook": "8.6.14",
+    "storybook": "9.0.4",
     "ts-jest": "^29.2.5"
   },
   "peerDependencies": {
+    "canvas": "^3.1.2",
     "fabric": "^6.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "uuid": "^11.0.0"
   },
   "dependencies": {
+    "canvas": "^3.1.2",
     "fabric": "^6.6.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "uuid": "^11.0.3"
   },
   "license": "MIT",
-  "version": "0.42.10",
-  "gitHead": "27a1c45ab7c5546bc83148c72ae40fd356439293"
+  "version": "0.42.12",
+  "gitHead": "143bb8389c8711a524b412475b14873998adb980"
 }