@berviantoleo/react-multi-crop 0.20.28 → 0.20.32

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.20.32](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.20.31...@berviantoleo/react-multi-crop@0.20.32) (2021-09-18)
+
+**Note:** Version bump only for package @berviantoleo/react-multi-crop
+
+
+
+
+
+## [0.20.31](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.20.30...@berviantoleo/react-multi-crop@0.20.31) (2021-09-07)
+
+**Note:** Version bump only for package @berviantoleo/react-multi-crop
+
+
+
+
+
+## [0.20.30](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.20.29...@berviantoleo/react-multi-crop@0.20.30) (2021-09-06)
+
+**Note:** Version bump only for package @berviantoleo/react-multi-crop
+
+
+
+
+
+## [0.20.29](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.20.28...@berviantoleo/react-multi-crop@0.20.29) (2021-09-04)
+
+**Note:** Version bump only for package @berviantoleo/react-multi-crop
+
+
+
+
+
 ## [0.20.28](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.20.27...@berviantoleo/react-multi-crop@0.20.28) (2021-08-28)
 
 

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("fabric"),r=require("@material-ui/core/Button"),o=require("@material-ui/core/Grid"),i=require("uuid");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=n(t),s=n(r),c=n(o);function l(t){return(l="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})(t)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("fabric"),r=require("@material-ui/core/Button"),o=require("@material-ui/core/Grid"),i=require("uuid");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=n(t),s=n(r),c=n(o);function l(t){return l="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},l(t)}
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -12,4 +12,4 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */var d=function(t,e){return(d=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])})(t,e)};function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function r(){this.constructor=t}d(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var h=function(t){function e(e){var r=t.call(this,e)||this;return r.id=null,r.objectId="",e&&(r.id=e.id,r.objectId=e.objectId),r}return u(e,t),e}(e.fabric.Rect),p=function(t){function r(e){var r=t.call(this,e)||this;return r.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,r.state={canvas:null,initial:!0},r.color=e.cropBackgroundColor||"yellow",r.opacity=e.cropBackgroundOpacity||.5,r.keyboardHandler=r.keyboardHandler.bind(r),r.addNew=r.addNew.bind(r),r.deleteShapes=r.deleteShapes.bind(r),r.multiSelect=r.multiSelect.bind(r),r.discardActiveObject=r.discardActiveObject.bind(r),r}return u(r,t),r.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},r.prototype.componentDidUpdate=function(t){var e=this.state.canvas;if(e){var r=this.props,o=r.zoomLevel,i=r.activeObject;if(t.zoomLevel!==o&&o&&o>0&&(e.setZoom(o),e.renderAll()),t.activeObject!==i&&i){var n=e.getObjects().filter((function(t){return t.objectId===i}));e.discardActiveObject();for(var a=0,s=n;a<s.length;a++){var c=s[a];e.setActiveObject(c)}e.requestRenderAll()}}},r.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},r.prototype.loadImage=function(t){var e=this.state,r=e.initial,o=e.canvas;if(o&&o.width&&o.height&&t.height&&t.width){var i=this.props.zoomLevel,n=t.height/t.width,a=o.width*n;o.setHeight(a),i?o.setZoom(i):o.setZoom(o.width/t.width),o.setBackgroundImage(t,o.renderAll.bind(o)),r&&this.setState({initial:!1},this.initialObjects.bind(this))}},r.prototype.isCrossOriginURL=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)},r.prototype.initialImage=function(){var t=this.props,r=t.record,o=t.image,i=this.loadImage.bind(this);if("object"===l(r)&&r.image){var n={};this.isCrossOriginURL(r.image)&&(n.crossOrigin="Anonymous"),e.fabric.Image.fromURL(r.image,i,n)}else if("string"==typeof o){n={};this.isCrossOriginURL(o)&&(n.crossOrigin="Anonymous"),e.fabric.Image.fromURL(o,i,n)}},r.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var e=this.props,r=e.record,o=e.readonly,i=e.borderColor,n=e.cornerColor,a=e.cornerSize,s=e.transparentCorners;if(r){var c=r.clippings;if(Array.isArray(c)&&c.length>0&&"object"===l(c[0])){for(var d={borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},u=0,h=0,p=c;h<p.length;h++){var f=p[h],v=this.createObject(t,f,d,o||!1);v&&(t.add(v),u+=1)}u>0&&this.setOutput()}}else console.log("Not have any record. Skipped.")}},r.prototype.zoom=function(t){var e=this.state.canvas;if(e){var r=t.e.deltaY,o=e.getZoom();(o*=Math.pow(.999,r))>20&&(o=20),o<.01&&(o=.01),e.setZoom(o),t.e.preventDefault(),t.e.stopPropagation();var i=this.props.zoomChanged;i&&i(o)}},r.prototype.mouseHover=function(t){var e=this.props.onHover,r=this.shapetoStructureData.bind(this),o=t.target;o&&"rect"===o.type&&e&&e(r(o))},r.prototype.mouseOut=function(t){var e=this.props.onHover,r=t.target;r&&"rect"===r.type&&e&&e(null)},r.prototype.selectionHandler=function(t){var e=this.props.onSelect,r=this.shapetoStructureData.bind(this),o=t.target;o&&"rect"===o.type&&e&&e(r(o))},r.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},r.prototype.initialCanvas=function(){var t=this.props,r=t.id,o=t.width,i=t.height,n=t.readonly,a=new e.fabric.Canvas(r||"canvas",{width:o,height:i});if(n){a.selectionKey=void 0;var s=this.mouseHover.bind(this),c=this.mouseOut.bind(this);a.on("mouse:over",s),a.on("mouse:out",c)}else{var l=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",l),a.on("object:modified",d)}var u=this.zoom.bind(this),h=this.selectionHandler.bind(this),p=this.selectionClearHandler.bind(this);a.on("selection:created",h),a.on("selection:updated",h),a.on("selection:cleared",p),a.on("mouse:wheel",u),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))},r.prototype.addNew=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},o=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},r,!1);o&&(t.add(o),this.setOutput())}},r.prototype.doubleClickEvent=function(t){var e=this.state.canvas;if(e){var r=this.props,o=r.readonly,i=r.borderColor,n=r.cornerColor,a=r.cornerSize,s=r.transparentCorners;if(t&&t.target){var c=t.target.left,l=t.target.top,d=t.target.width,u=t.target.height,h={left:c+50,top:l+50,width:d*t.target.scaleX,height:u*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},p=this.createObjectByAttribute(null,h,o||!1);e.add(p),e.discardActiveObject(),e.setActiveObject(p),e.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){h={left:c=t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},p=this.createObjectByAttribute(null,h,o||!1);e.add(p),e.discardActiveObject(),e.setActiveObject(p),e.requestRenderAll(),this.setOutput()}}},r.prototype.createObjectByAttribute=function(t,e,r){return new h({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:this.color,opacity:this.opacity,id:t,strokeWidth:0,strokeUniform:!0,lockRotation:!0,lockMovementX:r,lockMovementY:r,lockScalingX:r,lockScalingY:r,objectId:i.v4()})},r.prototype.shapetoStructureData=function(t){var r=this.state.canvas;if(!r||!r.backgroundImage)return null;var o=r.backgroundImage;if(!(o instanceof e.fabric.Image))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 i=this.props,n=i.includeDataUrl,a=i.includeHtmlCanvas,s=t.left/o.width,c=t.top/o.height,l=(t.left+t.width*t.scaleX)/o.width,d=(t.top+t.height*t.scaleY)/o.height,u={x1:s,y1:c,x2:l,y2:d},h={id:t.id,objectId:t.objectId,rect:JSON.stringify(u)};if(n){var p=null;try{p=o.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top,format:"jpeg"})}catch(t){console.error(t)}h.dataUrl=p}if(a){var f=null;try{f=o.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top})}catch(t){console.error(t)}h.canvasElement=f}var v=o.width,b=o.height,g=s*v,m=l*v,y=c*b,C=d*b,w={x:g,y:y,x2:m,y2:C,w:m-g,h:C-y,boundX:v,boundY:b};return h.crop=JSON.stringify(w),h.deletedAt="-1",h},r.prototype.deleteShapes=function(){var t=this.props.readonly,e=this.state.canvas;e&&!t&&(e.getActiveObjects().forEach((function(t){e.remove(t)})),this.setOutput())},r.prototype.setOutput=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)}},r.prototype.createObject=function(t,r,o,i){if(!t||!t.backgroundImage)return null;var n,a=t.backgroundImage;if(!(a instanceof e.fabric.Image))return null;if(!a.width||!a.height)return null;n="string"==typeof r.rect?JSON.parse(r.rect):r.rect;var s=a.width*n.x1,c=a.height*n.y1,l={left:s,top:c,width:a.width*n.x2-s,height:a.height*n.y2-c,borderColor:o.borderColor,cornerColor:o.cornerColor,cornerSize:o.cornerSize,transparentCorners:o.transparentCorners};return this.createObjectByAttribute(r.id,l,i)},r.prototype.multiSelect=function(){var t=this.props.readonly,r=this.state.canvas;if(r&&!t){r.discardActiveObject();var o=new e.fabric.ActiveSelection(r.getObjects(),{canvas:r});r.setActiveObject(o),r.requestRenderAll()}else console.log("Canvas not defined")},r.prototype.discardActiveObject=function(){var t=this.state.canvas;t?(t.discardActiveObject(),t.requestRenderAll()):console.log("Canvas not defined")},r.prototype.keyboardHandler=function(t){if(!t.defaultPrevented){var e=!1,r=t.key||t.keyCode;"Delete"===r||46===r?(this.deleteShapes(),e=!0):!t.ctrlKey||65!==r&&"a"!==r||(this.multiSelect(),e=!0),e&&t.preventDefault()}},r.prototype.render=function(){var t,e=this.props,r=e.input,o=e.source,i=e.showLabel,n=e.showButton,l=e.id,d=e.width,u=e.height,h=e.readonly,p=!!r,f=o;r&&(t=r.value,f=r.name);return a.default.createElement("div",{id:"canvas-wrapper"},i&&a.default.createElement("div",{className:"label"},f),a.default.createElement(c.default,{container:!0,direction:"row",justify:"flex-start",alignItems:"flex-start"},a.default.createElement(c.default,{item:!0,xs:!0,onKeyDown:h?void 0:this.keyboardHandler,tabIndex:0},a.default.createElement("canvas",{id:l,width:d,height:u,style:{border:"0px solid #aaa"}})),n&&!h&&a.default.createElement(c.default,{container:!0,item:!0,xs:!0,direction:"column",justify:"flex-start",alignItems:"flex-start"},a.default.createElement(c.default,{item:!0,xs:!0},a.default.createElement(s.default,{variant:"contained",id:"addmore",color:"primary",onClick:this.addNew},"Add More Shapes")),a.default.createElement(c.default,{item:!0,xs:!0},a.default.createElement(s.default,{variant:"contained",id:"deleteselected",color:"primary",onClick:this.deleteShapes},"Delete Selected Object")),a.default.createElement(c.default,{item:!0,xs:!0},a.default.createElement(s.default,{variant:"contained",id:"multiselect",color:"primary",onClick:this.multiSelect},"Select All")),a.default.createElement(c.default,{item:!0,xs:!0},a.default.createElement(s.default,{variant:"contained",id:"discard",color:"primary",onClick:this.discardActiveObject},"Discard Selection"))),p&&a.default.createElement("input",{type:"hidden",value:t})))},r.defaultProps={id:"canvas",width:800,height:800,input:void 0,source:"react-crop-form",record:{image:void 0,clippings:[]},image:void 0,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,readonly:!1,borderColor:"black",cornerColor:"black",cornerSize:13,transparentCorners:!0,showLabel:!1,showButton:!1,includeDataUrl:!1,includeHtmlCanvas:!1,zoomChanged:void 0},r}(t.Component);exports.ReactMultiCrop=p;
+***************************************************************************** */var d=function(t,e){return d=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])},d(t,e)};function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function r(){this.constructor=t}d(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var h=function(t){function e(e){var r=t.call(this,e)||this;return r.id=null,r.objectId="",e&&(r.id=e.id,r.objectId=e.objectId),r}return u(e,t),e}(e.fabric.Rect),p=function(t){function r(e){var r=t.call(this,e)||this;return r.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,r.state={canvas:null,initial:!0},r.color=e.cropBackgroundColor||"yellow",r.opacity=e.cropBackgroundOpacity||.5,r.keyboardHandler=r.keyboardHandler.bind(r),r.addNew=r.addNew.bind(r),r.deleteShapes=r.deleteShapes.bind(r),r.multiSelect=r.multiSelect.bind(r),r.discardActiveObject=r.discardActiveObject.bind(r),r}return u(r,t),r.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},r.prototype.componentDidUpdate=function(t){var e=this.state.canvas;if(e){var r=this.props,o=r.zoomLevel,i=r.activeObject;if(t.zoomLevel!==o&&o&&o>0&&(e.setZoom(o),e.renderAll()),t.activeObject!==i&&i){var n=e.getObjects().filter((function(t){return t.objectId===i}));e.discardActiveObject();for(var a=0,s=n;a<s.length;a++){var c=s[a];e.setActiveObject(c)}e.requestRenderAll()}}},r.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},r.prototype.loadImage=function(t){var e=this.state,r=e.initial,o=e.canvas;if(o&&o.width&&o.height&&t.height&&t.width){var i=this.props.zoomLevel,n=t.height/t.width,a=o.width*n;o.setHeight(a),i?o.setZoom(i):o.setZoom(o.width/t.width),o.setBackgroundImage(t,o.renderAll.bind(o)),r&&this.setState({initial:!1},this.initialObjects.bind(this))}},r.prototype.isCrossOriginURL=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)},r.prototype.initialImage=function(){var t=this.props,r=t.record,o=t.image,i=this.loadImage.bind(this);if("object"===l(r)&&r.image){var n={};this.isCrossOriginURL(r.image)&&(n.crossOrigin="Anonymous"),e.fabric.Image.fromURL(r.image,i,n)}else if("string"==typeof o){n={};this.isCrossOriginURL(o)&&(n.crossOrigin="Anonymous"),e.fabric.Image.fromURL(o,i,n)}},r.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var e=this.props,r=e.record,o=e.readonly,i=e.borderColor,n=e.cornerColor,a=e.cornerSize,s=e.transparentCorners;if(r){var c=r.clippings;if(Array.isArray(c)&&c.length>0&&"object"===l(c[0])){for(var d={borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},u=0,h=0,p=c;h<p.length;h++){var f=p[h],v=this.createObject(t,f,d,o||!1);v&&(t.add(v),u+=1)}u>0&&this.setOutput()}}else console.log("Not have any record. Skipped.")}},r.prototype.zoom=function(t){var e=this.state.canvas;if(e){var r=t.e.deltaY,o=e.getZoom();(o*=Math.pow(.999,r))>20&&(o=20),o<.01&&(o=.01),e.setZoom(o),t.e.preventDefault(),t.e.stopPropagation();var i=this.props.zoomChanged;i&&i(o)}},r.prototype.mouseHover=function(t){var e=this.props.onHover,r=this.shapetoStructureData.bind(this),o=t.target;o&&"rect"===o.type&&e&&e(r(o))},r.prototype.mouseOut=function(t){var e=this.props.onHover,r=t.target;r&&"rect"===r.type&&e&&e(null)},r.prototype.selectionHandler=function(t){var e=this.props.onSelect,r=this.shapetoStructureData.bind(this),o=t.target;o&&"rect"===o.type&&e&&e(r(o))},r.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},r.prototype.initialCanvas=function(){var t=this.props,r=t.id,o=t.width,i=t.height,n=t.readonly,a=new e.fabric.Canvas(r||"canvas",{width:o,height:i});if(n){a.selectionKey=void 0;var s=this.mouseHover.bind(this),c=this.mouseOut.bind(this);a.on("mouse:over",s),a.on("mouse:out",c)}else{var l=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",l),a.on("object:modified",d)}var u=this.zoom.bind(this),h=this.selectionHandler.bind(this),p=this.selectionClearHandler.bind(this);a.on("selection:created",h),a.on("selection:updated",h),a.on("selection:cleared",p),a.on("mouse:wheel",u),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))},r.prototype.addNew=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},o=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},r,!1);o&&(t.add(o),this.setOutput())}},r.prototype.doubleClickEvent=function(t){var e=this.state.canvas;if(e){var r=this.props,o=r.readonly,i=r.borderColor,n=r.cornerColor,a=r.cornerSize,s=r.transparentCorners;if(t&&t.target){var c=t.target.left,l=t.target.top,d=t.target.width,u=t.target.height,h={left:c+50,top:l+50,width:d*t.target.scaleX,height:u*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},p=this.createObjectByAttribute(null,h,o||!1);e.add(p),e.discardActiveObject(),e.setActiveObject(p),e.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){h={left:c=t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},p=this.createObjectByAttribute(null,h,o||!1);e.add(p),e.discardActiveObject(),e.setActiveObject(p),e.requestRenderAll(),this.setOutput()}}},r.prototype.createObjectByAttribute=function(t,e,r){return new h({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:this.color,opacity:this.opacity,id:t,strokeWidth:0,strokeUniform:!0,lockRotation:!0,lockMovementX:r,lockMovementY:r,lockScalingX:r,lockScalingY:r,objectId:i.v4()})},r.prototype.shapetoStructureData=function(t){var r=this.state.canvas;if(!r||!r.backgroundImage)return null;var o=r.backgroundImage;if(!(o instanceof e.fabric.Image))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 i=this.props,n=i.includeDataUrl,a=i.includeHtmlCanvas,s=t.left/o.width,c=t.top/o.height,l=(t.left+t.width*t.scaleX)/o.width,d=(t.top+t.height*t.scaleY)/o.height,u={x1:s,y1:c,x2:l,y2:d},h={id:t.id,objectId:t.objectId,rect:JSON.stringify(u)};if(n){var p=null;try{p=o.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top,format:"jpeg"})}catch(t){console.error(t)}h.dataUrl=p}if(a){var f=null;try{f=o.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top})}catch(t){console.error(t)}h.canvasElement=f}var v=o.width,b=o.height,g=s*v,m=l*v,y=c*b,C=d*b,w={x:g,y:y,x2:m,y2:C,w:m-g,h:C-y,boundX:v,boundY:b};return h.crop=JSON.stringify(w),h.deletedAt="-1",h},r.prototype.deleteShapes=function(){var t=this.props.readonly,e=this.state.canvas;e&&!t&&(e.getActiveObjects().forEach((function(t){e.remove(t)})),this.setOutput())},r.prototype.setOutput=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)}},r.prototype.createObject=function(t,r,o,i){if(!t||!t.backgroundImage)return null;var n,a=t.backgroundImage;if(!(a instanceof e.fabric.Image))return null;if(!a.width||!a.height)return null;n="string"==typeof r.rect?JSON.parse(r.rect):r.rect;var s=a.width*n.x1,c=a.height*n.y1,l={left:s,top:c,width:a.width*n.x2-s,height:a.height*n.y2-c,borderColor:o.borderColor,cornerColor:o.cornerColor,cornerSize:o.cornerSize,transparentCorners:o.transparentCorners};return this.createObjectByAttribute(r.id,l,i)},r.prototype.multiSelect=function(){var t=this.props.readonly,r=this.state.canvas;if(r&&!t){r.discardActiveObject();var o=new e.fabric.ActiveSelection(r.getObjects(),{canvas:r});r.setActiveObject(o),r.requestRenderAll()}else console.log("Canvas not defined")},r.prototype.discardActiveObject=function(){var t=this.state.canvas;t?(t.discardActiveObject(),t.requestRenderAll()):console.log("Canvas not defined")},r.prototype.keyboardHandler=function(t){if(!t.defaultPrevented){var e=!1,r=t.key||t.keyCode;"Delete"===r||46===r?(this.deleteShapes(),e=!0):!t.ctrlKey||65!==r&&"a"!==r||(this.multiSelect(),e=!0),e&&t.preventDefault()}},r.prototype.render=function(){var t,e=this.props,r=e.input,o=e.source,i=e.showLabel,n=e.showButton,l=e.id,d=e.width,u=e.height,h=e.readonly,p=!!r,f=o;r&&(t=r.value,f=r.name);return a.default.createElement("div",{id:"canvas-wrapper"},i&&a.default.createElement("div",{className:"label"},f),a.default.createElement(c.default,{container:!0,direction:"row",justifyContent:"flex-start",alignItems:"flex-start"},a.default.createElement(c.default,{item:!0,xs:!0,onKeyDown:h?void 0:this.keyboardHandler,tabIndex:0},a.default.createElement("canvas",{id:l,width:d,height:u,style:{border:"0px solid #aaa"}})),n&&!h&&a.default.createElement(c.default,{container:!0,item:!0,xs:!0,direction:"column",justifyContent:"flex-start",alignItems:"flex-start"},a.default.createElement(c.default,{item:!0,xs:!0},a.default.createElement(s.default,{variant:"contained",id:"addmore",color:"primary",onClick:this.addNew},"Add More Shapes")),a.default.createElement(c.default,{item:!0,xs:!0},a.default.createElement(s.default,{variant:"contained",id:"deleteselected",color:"primary",onClick:this.deleteShapes},"Delete Selected Object")),a.default.createElement(c.default,{item:!0,xs:!0},a.default.createElement(s.default,{variant:"contained",id:"multiselect",color:"primary",onClick:this.multiSelect},"Select All")),a.default.createElement(c.default,{item:!0,xs:!0},a.default.createElement(s.default,{variant:"contained",id:"discard",color:"primary",onClick:this.discardActiveObject},"Discard Selection"))),p&&a.default.createElement("input",{type:"hidden",value:t})))},r.defaultProps={id:"canvas",width:800,height:800,input:void 0,source:"react-crop-form",record:{image:void 0,clippings:[]},image:void 0,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,readonly:!1,borderColor:"black",cornerColor:"black",cornerSize:13,transparentCorners:!0,showLabel:!1,showButton:!1,includeDataUrl:!1,includeHtmlCanvas:!1,zoomChanged:void 0},r}(t.Component);exports.CustomFabricRect=h,exports.ReactMultiCrop=p;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import t,{Component as e}from"react";import{fabric as r}from"fabric";import o from"@material-ui/core/Button";import i from"@material-ui/core/Grid";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})(t)}
+import t,{Component as e}from"react";import{fabric as r}from"fabric";import o from"@material-ui/core/Button";import i from"@material-ui/core/Grid";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)}
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -12,4 +12,4 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */var s=function(t,e){return(s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])})(t,e)};function c(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function r(){this.constructor=t}s(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var l=function(t){function e(e){var r=t.call(this,e)||this;return r.id=null,r.objectId="",e&&(r.id=e.id,r.objectId=e.objectId),r}return c(e,t),e}(r.Rect),d=function(e){function s(t){var r=e.call(this,t)||this;return r.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,r.state={canvas:null,initial:!0},r.color=t.cropBackgroundColor||"yellow",r.opacity=t.cropBackgroundOpacity||.5,r.keyboardHandler=r.keyboardHandler.bind(r),r.addNew=r.addNew.bind(r),r.deleteShapes=r.deleteShapes.bind(r),r.multiSelect=r.multiSelect.bind(r),r.discardActiveObject=r.discardActiveObject.bind(r),r}return c(s,e),s.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},s.prototype.componentDidUpdate=function(t){var e=this.state.canvas;if(e){var r=this.props,o=r.zoomLevel,i=r.activeObject;if(t.zoomLevel!==o&&o&&o>0&&(e.setZoom(o),e.renderAll()),t.activeObject!==i&&i){var n=e.getObjects().filter((function(t){return t.objectId===i}));e.discardActiveObject();for(var a=0,s=n;a<s.length;a++){var c=s[a];e.setActiveObject(c)}e.requestRenderAll()}}},s.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},s.prototype.loadImage=function(t){var e=this.state,r=e.initial,o=e.canvas;if(o&&o.width&&o.height&&t.height&&t.width){var i=this.props.zoomLevel,n=t.height/t.width,a=o.width*n;o.setHeight(a),i?o.setZoom(i):o.setZoom(o.width/t.width),o.setBackgroundImage(t,o.renderAll.bind(o)),r&&this.setState({initial:!1},this.initialObjects.bind(this))}},s.prototype.isCrossOriginURL=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)},s.prototype.initialImage=function(){var t=this.props,e=t.record,o=t.image,i=this.loadImage.bind(this);if("object"===a(e)&&e.image){var n={};this.isCrossOriginURL(e.image)&&(n.crossOrigin="Anonymous"),r.Image.fromURL(e.image,i,n)}else if("string"==typeof o){n={};this.isCrossOriginURL(o)&&(n.crossOrigin="Anonymous"),r.Image.fromURL(o,i,n)}},s.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var e=this.props,r=e.record,o=e.readonly,i=e.borderColor,n=e.cornerColor,s=e.cornerSize,c=e.transparentCorners;if(r){var l=r.clippings;if(Array.isArray(l)&&l.length>0&&"object"===a(l[0])){for(var d={borderColor:i,cornerColor:n,cornerSize:s,transparentCorners:c},h=0,p=0,u=l;p<u.length;p++){var v=u[p],f=this.createObject(t,v,d,o||!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 e=this.state.canvas;if(e){var r=t.e.deltaY,o=e.getZoom();(o*=Math.pow(.999,r))>20&&(o=20),o<.01&&(o=.01),e.setZoom(o),t.e.preventDefault(),t.e.stopPropagation();var i=this.props.zoomChanged;i&&i(o)}},s.prototype.mouseHover=function(t){var e=this.props.onHover,r=this.shapetoStructureData.bind(this),o=t.target;o&&"rect"===o.type&&e&&e(r(o))},s.prototype.mouseOut=function(t){var e=this.props.onHover,r=t.target;r&&"rect"===r.type&&e&&e(null)},s.prototype.selectionHandler=function(t){var e=this.props.onSelect,r=this.shapetoStructureData.bind(this),o=t.target;o&&"rect"===o.type&&e&&e(r(o))},s.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},s.prototype.initialCanvas=function(){var t=this.props,e=t.id,o=t.width,i=t.height,n=t.readonly,a=new r.Canvas(e||"canvas",{width:o,height:i});if(n){a.selectionKey=void 0;var s=this.mouseHover.bind(this),c=this.mouseOut.bind(this);a.on("mouse:over",s),a.on("mouse:out",c)}else{var l=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",l),a.on("object:modified",d)}var h=this.zoom.bind(this),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:wheel",h),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))},s.prototype.addNew=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},o=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},r,!1);o&&(t.add(o),this.setOutput())}},s.prototype.doubleClickEvent=function(t){var e=this.state.canvas;if(e){var r=this.props,o=r.readonly,i=r.borderColor,n=r.cornerColor,a=r.cornerSize,s=r.transparentCorners;if(t&&t.target){var c=t.target.left,l=t.target.top,d=t.target.width,h=t.target.height,p={left:c+50,top:l+50,width:d*t.target.scaleX,height:h*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},u=this.createObjectByAttribute(null,p,o||!1);e.add(u),e.discardActiveObject(),e.setActiveObject(u),e.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){p={left:c=t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},u=this.createObjectByAttribute(null,p,o||!1);e.add(u),e.discardActiveObject(),e.setActiveObject(u),e.requestRenderAll(),this.setOutput()}}},s.prototype.createObjectByAttribute=function(t,e,r){return new l({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:this.color,opacity:this.opacity,id:t,strokeWidth:0,strokeUniform:!0,lockRotation:!0,lockMovementX:r,lockMovementY:r,lockScalingX:r,lockScalingY:r,objectId:n()})},s.prototype.shapetoStructureData=function(t){var e=this.state.canvas;if(!e||!e.backgroundImage)return null;var o=e.backgroundImage;if(!(o instanceof r.Image))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 i=this.props,n=i.includeDataUrl,a=i.includeHtmlCanvas,s=t.left/o.width,c=t.top/o.height,l=(t.left+t.width*t.scaleX)/o.width,d=(t.top+t.height*t.scaleY)/o.height,h={x1:s,y1:c,x2:l,y2:d},p={id:t.id,objectId:t.objectId,rect:JSON.stringify(h)};if(n){var u=null;try{u=o.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top,format:"jpeg"})}catch(t){console.error(t)}p.dataUrl=u}if(a){var v=null;try{v=o.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top})}catch(t){console.error(t)}p.canvasElement=v}var f=o.width,m=o.height,g=s*f,b=l*f,y=c*m,w=d*m,C={x:g,y:y,x2:b,y2:w,w:b-g,h:w-y,boundX:f,boundY:m};return p.crop=JSON.stringify(C),p.deletedAt="-1",p},s.prototype.deleteShapes=function(){var t=this.props.readonly,e=this.state.canvas;e&&!t&&(e.getActiveObjects().forEach((function(t){e.remove(t)})),this.setOutput())},s.prototype.setOutput=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)}},s.prototype.createObject=function(t,e,o,i){if(!t||!t.backgroundImage)return null;var n,a=t.backgroundImage;if(!(a instanceof r.Image))return null;if(!a.width||!a.height)return null;n="string"==typeof e.rect?JSON.parse(e.rect):e.rect;var s=a.width*n.x1,c=a.height*n.y1,l={left:s,top:c,width:a.width*n.x2-s,height:a.height*n.y2-c,borderColor:o.borderColor,cornerColor:o.cornerColor,cornerSize:o.cornerSize,transparentCorners:o.transparentCorners};return this.createObjectByAttribute(e.id,l,i)},s.prototype.multiSelect=function(){var t=this.props.readonly,e=this.state.canvas;if(e&&!t){e.discardActiveObject();var o=new r.ActiveSelection(e.getObjects(),{canvas:e});e.setActiveObject(o),e.requestRenderAll()}else console.log("Canvas not defined")},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 e=!1,r=t.key||t.keyCode;"Delete"===r||46===r?(this.deleteShapes(),e=!0):!t.ctrlKey||65!==r&&"a"!==r||(this.multiSelect(),e=!0),e&&t.preventDefault()}},s.prototype.render=function(){var e,r=this.props,n=r.input,a=r.source,s=r.showLabel,c=r.showButton,l=r.id,d=r.width,h=r.height,p=r.readonly,u=!!n,v=a;n&&(e=n.value,v=n.name);return t.createElement("div",{id:"canvas-wrapper"},s&&t.createElement("div",{className:"label"},v),t.createElement(i,{container:!0,direction:"row",justify:"flex-start",alignItems:"flex-start"},t.createElement(i,{item:!0,xs:!0,onKeyDown:p?void 0:this.keyboardHandler,tabIndex:0},t.createElement("canvas",{id:l,width:d,height:h,style:{border:"0px solid #aaa"}})),c&&!p&&t.createElement(i,{container:!0,item:!0,xs:!0,direction:"column",justify:"flex-start",alignItems:"flex-start"},t.createElement(i,{item:!0,xs:!0},t.createElement(o,{variant:"contained",id:"addmore",color:"primary",onClick:this.addNew},"Add More Shapes")),t.createElement(i,{item:!0,xs:!0},t.createElement(o,{variant:"contained",id:"deleteselected",color:"primary",onClick:this.deleteShapes},"Delete Selected Object")),t.createElement(i,{item:!0,xs:!0},t.createElement(o,{variant:"contained",id:"multiselect",color:"primary",onClick:this.multiSelect},"Select All")),t.createElement(i,{item:!0,xs:!0},t.createElement(o,{variant:"contained",id:"discard",color:"primary",onClick:this.discardActiveObject},"Discard Selection"))),u&&t.createElement("input",{type:"hidden",value:e})))},s.defaultProps={id:"canvas",width:800,height:800,input:void 0,source:"react-crop-form",record:{image:void 0,clippings:[]},image:void 0,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,readonly:!1,borderColor:"black",cornerColor:"black",cornerSize:13,transparentCorners:!0,showLabel:!1,showButton:!1,includeDataUrl:!1,includeHtmlCanvas:!1,zoomChanged:void 0},s}(e);export{d as ReactMultiCrop};
+***************************************************************************** */var s=function(t,e){return s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])},s(t,e)};function c(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function r(){this.constructor=t}s(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var l=function(t){function e(e){var r=t.call(this,e)||this;return r.id=null,r.objectId="",e&&(r.id=e.id,r.objectId=e.objectId),r}return c(e,t),e}(r.Rect),d=function(e){function s(t){var r=e.call(this,t)||this;return r.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,r.state={canvas:null,initial:!0},r.color=t.cropBackgroundColor||"yellow",r.opacity=t.cropBackgroundOpacity||.5,r.keyboardHandler=r.keyboardHandler.bind(r),r.addNew=r.addNew.bind(r),r.deleteShapes=r.deleteShapes.bind(r),r.multiSelect=r.multiSelect.bind(r),r.discardActiveObject=r.discardActiveObject.bind(r),r}return c(s,e),s.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},s.prototype.componentDidUpdate=function(t){var e=this.state.canvas;if(e){var r=this.props,o=r.zoomLevel,i=r.activeObject;if(t.zoomLevel!==o&&o&&o>0&&(e.setZoom(o),e.renderAll()),t.activeObject!==i&&i){var n=e.getObjects().filter((function(t){return t.objectId===i}));e.discardActiveObject();for(var a=0,s=n;a<s.length;a++){var c=s[a];e.setActiveObject(c)}e.requestRenderAll()}}},s.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},s.prototype.loadImage=function(t){var e=this.state,r=e.initial,o=e.canvas;if(o&&o.width&&o.height&&t.height&&t.width){var i=this.props.zoomLevel,n=t.height/t.width,a=o.width*n;o.setHeight(a),i?o.setZoom(i):o.setZoom(o.width/t.width),o.setBackgroundImage(t,o.renderAll.bind(o)),r&&this.setState({initial:!1},this.initialObjects.bind(this))}},s.prototype.isCrossOriginURL=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)},s.prototype.initialImage=function(){var t=this.props,e=t.record,o=t.image,i=this.loadImage.bind(this);if("object"===a(e)&&e.image){var n={};this.isCrossOriginURL(e.image)&&(n.crossOrigin="Anonymous"),r.Image.fromURL(e.image,i,n)}else if("string"==typeof o){n={};this.isCrossOriginURL(o)&&(n.crossOrigin="Anonymous"),r.Image.fromURL(o,i,n)}},s.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var e=this.props,r=e.record,o=e.readonly,i=e.borderColor,n=e.cornerColor,s=e.cornerSize,c=e.transparentCorners;if(r){var l=r.clippings;if(Array.isArray(l)&&l.length>0&&"object"===a(l[0])){for(var d={borderColor:i,cornerColor:n,cornerSize:s,transparentCorners:c},h=0,p=0,u=l;p<u.length;p++){var v=u[p],f=this.createObject(t,v,d,o||!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 e=this.state.canvas;if(e){var r=t.e.deltaY,o=e.getZoom();(o*=Math.pow(.999,r))>20&&(o=20),o<.01&&(o=.01),e.setZoom(o),t.e.preventDefault(),t.e.stopPropagation();var i=this.props.zoomChanged;i&&i(o)}},s.prototype.mouseHover=function(t){var e=this.props.onHover,r=this.shapetoStructureData.bind(this),o=t.target;o&&"rect"===o.type&&e&&e(r(o))},s.prototype.mouseOut=function(t){var e=this.props.onHover,r=t.target;r&&"rect"===r.type&&e&&e(null)},s.prototype.selectionHandler=function(t){var e=this.props.onSelect,r=this.shapetoStructureData.bind(this),o=t.target;o&&"rect"===o.type&&e&&e(r(o))},s.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},s.prototype.initialCanvas=function(){var t=this.props,e=t.id,o=t.width,i=t.height,n=t.readonly,a=new r.Canvas(e||"canvas",{width:o,height:i});if(n){a.selectionKey=void 0;var s=this.mouseHover.bind(this),c=this.mouseOut.bind(this);a.on("mouse:over",s),a.on("mouse:out",c)}else{var l=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",l),a.on("object:modified",d)}var h=this.zoom.bind(this),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:wheel",h),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))},s.prototype.addNew=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},o=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},r,!1);o&&(t.add(o),this.setOutput())}},s.prototype.doubleClickEvent=function(t){var e=this.state.canvas;if(e){var r=this.props,o=r.readonly,i=r.borderColor,n=r.cornerColor,a=r.cornerSize,s=r.transparentCorners;if(t&&t.target){var c=t.target.left,l=t.target.top,d=t.target.width,h=t.target.height,p={left:c+50,top:l+50,width:d*t.target.scaleX,height:h*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},u=this.createObjectByAttribute(null,p,o||!1);e.add(u),e.discardActiveObject(),e.setActiveObject(u),e.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){p={left:c=t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},u=this.createObjectByAttribute(null,p,o||!1);e.add(u),e.discardActiveObject(),e.setActiveObject(u),e.requestRenderAll(),this.setOutput()}}},s.prototype.createObjectByAttribute=function(t,e,r){return new l({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:this.color,opacity:this.opacity,id:t,strokeWidth:0,strokeUniform:!0,lockRotation:!0,lockMovementX:r,lockMovementY:r,lockScalingX:r,lockScalingY:r,objectId:n()})},s.prototype.shapetoStructureData=function(t){var e=this.state.canvas;if(!e||!e.backgroundImage)return null;var o=e.backgroundImage;if(!(o instanceof r.Image))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 i=this.props,n=i.includeDataUrl,a=i.includeHtmlCanvas,s=t.left/o.width,c=t.top/o.height,l=(t.left+t.width*t.scaleX)/o.width,d=(t.top+t.height*t.scaleY)/o.height,h={x1:s,y1:c,x2:l,y2:d},p={id:t.id,objectId:t.objectId,rect:JSON.stringify(h)};if(n){var u=null;try{u=o.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top,format:"jpeg"})}catch(t){console.error(t)}p.dataUrl=u}if(a){var v=null;try{v=o.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top})}catch(t){console.error(t)}p.canvasElement=v}var f=o.width,m=o.height,g=s*f,b=l*f,y=c*m,C=d*m,w={x:g,y:y,x2:b,y2:C,w:b-g,h:C-y,boundX:f,boundY:m};return p.crop=JSON.stringify(w),p.deletedAt="-1",p},s.prototype.deleteShapes=function(){var t=this.props.readonly,e=this.state.canvas;e&&!t&&(e.getActiveObjects().forEach((function(t){e.remove(t)})),this.setOutput())},s.prototype.setOutput=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)}},s.prototype.createObject=function(t,e,o,i){if(!t||!t.backgroundImage)return null;var n,a=t.backgroundImage;if(!(a instanceof r.Image))return null;if(!a.width||!a.height)return null;n="string"==typeof e.rect?JSON.parse(e.rect):e.rect;var s=a.width*n.x1,c=a.height*n.y1,l={left:s,top:c,width:a.width*n.x2-s,height:a.height*n.y2-c,borderColor:o.borderColor,cornerColor:o.cornerColor,cornerSize:o.cornerSize,transparentCorners:o.transparentCorners};return this.createObjectByAttribute(e.id,l,i)},s.prototype.multiSelect=function(){var t=this.props.readonly,e=this.state.canvas;if(e&&!t){e.discardActiveObject();var o=new r.ActiveSelection(e.getObjects(),{canvas:e});e.setActiveObject(o),e.requestRenderAll()}else console.log("Canvas not defined")},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 e=!1,r=t.key||t.keyCode;"Delete"===r||46===r?(this.deleteShapes(),e=!0):!t.ctrlKey||65!==r&&"a"!==r||(this.multiSelect(),e=!0),e&&t.preventDefault()}},s.prototype.render=function(){var e,r=this.props,n=r.input,a=r.source,s=r.showLabel,c=r.showButton,l=r.id,d=r.width,h=r.height,p=r.readonly,u=!!n,v=a;n&&(e=n.value,v=n.name);return t.createElement("div",{id:"canvas-wrapper"},s&&t.createElement("div",{className:"label"},v),t.createElement(i,{container:!0,direction:"row",justifyContent:"flex-start",alignItems:"flex-start"},t.createElement(i,{item:!0,xs:!0,onKeyDown:p?void 0:this.keyboardHandler,tabIndex:0},t.createElement("canvas",{id:l,width:d,height:h,style:{border:"0px solid #aaa"}})),c&&!p&&t.createElement(i,{container:!0,item:!0,xs:!0,direction:"column",justifyContent:"flex-start",alignItems:"flex-start"},t.createElement(i,{item:!0,xs:!0},t.createElement(o,{variant:"contained",id:"addmore",color:"primary",onClick:this.addNew},"Add More Shapes")),t.createElement(i,{item:!0,xs:!0},t.createElement(o,{variant:"contained",id:"deleteselected",color:"primary",onClick:this.deleteShapes},"Delete Selected Object")),t.createElement(i,{item:!0,xs:!0},t.createElement(o,{variant:"contained",id:"multiselect",color:"primary",onClick:this.multiSelect},"Select All")),t.createElement(i,{item:!0,xs:!0},t.createElement(o,{variant:"contained",id:"discard",color:"primary",onClick:this.discardActiveObject},"Discard Selection"))),u&&t.createElement("input",{type:"hidden",value:e})))},s.defaultProps={id:"canvas",width:800,height:800,input:void 0,source:"react-crop-form",record:{image:void 0,clippings:[]},image:void 0,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,readonly:!1,borderColor:"black",cornerColor:"black",cornerSize:13,transparentCorners:!0,showLabel:!1,showButton:!1,includeDataUrl:!1,includeHtmlCanvas:!1,zoomChanged:void 0},s}(e);export{l as CustomFabricRect,d as ReactMultiCrop};

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

@@ -1,79 +1,6 @@
 import React, { Component } from 'react';
 import { fabric } from 'fabric';
-export interface IRecordProps {
-    image?: string;
-    clippings: Array<any>;
-}
-export interface IOutputData extends ICoord {
-    crop?: string;
-    deletedAt?: string;
-    dataUrl?: string | null;
-    canvasElement?: HTMLCanvasElement | null;
-    objectId: string;
-}
-export interface IInputProps {
-    value?: string | any;
-    name?: string;
-    onChange(value: Array<IOutputData>): void;
-}
-export interface IReactMultiCropProps {
-    id?: string;
-    width?: number;
-    height?: number;
-    source?: string;
-    input?: IInputProps;
-    record?: IRecordProps;
-    image?: string;
-    cropBackgroundColor?: string;
-    cropBackgroundOpacity?: number;
-    showLabel?: boolean;
-    showButton?: boolean;
-    zoomLevel?: number;
-    includeDataUrl?: boolean;
-    includeHtmlCanvas?: boolean;
-    readonly?: boolean;
-    borderColor?: string;
-    cornerColor?: string;
-    cornerSize?: number;
-    transparentCorners?: boolean;
-    activeObject?: string;
-    onHover?(value: IOutputData | null): void;
-    onSelect?(value: IOutputData | null): void;
-    zoomChanged?(value: number): void;
-}
-export interface IReactMultiCropStates {
-    canvas: fabric.Canvas | null;
-    initial: boolean;
-}
-export interface IRectCoord {
-    x1: number;
-    x2: number;
-    y1: number;
-    y2: number;
-}
-export interface ICoord {
-    id: string | null;
-    rect: IRectCoord | string;
-}
-export interface IAttribute {
-    left?: number;
-    top?: number;
-    height?: number;
-    width?: number;
-    borderColor?: string;
-    cornerColor?: string;
-    cornerSize?: number;
-    transparentCorners?: boolean;
-}
-export interface ICustomFabricRect extends fabric.IRectOptions {
-    id: string | null;
-    objectId: string;
-}
-export declare class CustomFabricRect extends fabric.Rect {
-    id: string | null;
-    objectId: string;
-    constructor(options?: ICustomFabricRect);
-}
+import { CustomFabricRect, IAttribute, ICoord, IOutputData, IReactMultiCropProps, IReactMultiCropStates } from './interfaces';
 declare class ReactMultiCrop extends Component<IReactMultiCropProps, IReactMultiCropStates> {
     static defaultProps: IReactMultiCropProps;
     private readonly color;

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

@@ -0,0 +1,7 @@
+import { Meta, Story } from '@storybook/react';
+import { IReactMultiCropProps } from './interfaces';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const DefaultEditable: Story<IReactMultiCropProps>;
+export declare const DefaultReadOnly: Story<IReactMultiCropProps>;
+export declare const ShowButton: Story<IReactMultiCropProps>;

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

@@ -0,0 +1,75 @@
+import { fabric } from 'fabric';
+export interface IRecordProps {
+    image?: string;
+    clippings: Array<any>;
+}
+export interface IOutputData extends ICoord {
+    crop?: string;
+    deletedAt?: string;
+    dataUrl?: string | null;
+    canvasElement?: HTMLCanvasElement | null;
+    objectId: string;
+}
+export interface IInputProps {
+    value?: string | any;
+    name?: string;
+    onChange(value: Array<IOutputData>): void;
+}
+export interface IReactMultiCropProps {
+    id?: string;
+    width?: number;
+    height?: number;
+    source?: string;
+    input?: IInputProps;
+    record?: IRecordProps;
+    image?: string;
+    cropBackgroundColor?: string;
+    cropBackgroundOpacity?: number;
+    showLabel?: boolean;
+    showButton?: boolean;
+    zoomLevel?: number;
+    includeDataUrl?: boolean;
+    includeHtmlCanvas?: boolean;
+    readonly?: boolean;
+    borderColor?: string;
+    cornerColor?: string;
+    cornerSize?: number;
+    transparentCorners?: boolean;
+    activeObject?: string;
+    onHover?(value: IOutputData | null): void;
+    onSelect?(value: IOutputData | null): void;
+    zoomChanged?(value: number): void;
+}
+export interface IReactMultiCropStates {
+    canvas: fabric.Canvas | null;
+    initial: boolean;
+}
+export interface IRectCoord {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}
+export interface ICoord {
+    id: string | null;
+    rect: IRectCoord | string;
+}
+export interface IAttribute {
+    left?: number;
+    top?: number;
+    height?: number;
+    width?: number;
+    borderColor?: string;
+    cornerColor?: string;
+    cornerSize?: number;
+    transparentCorners?: boolean;
+}
+export interface ICustomFabricRect extends fabric.IRectOptions {
+    id: string | null;
+    objectId: string;
+}
+export declare class CustomFabricRect extends fabric.Rect {
+    id: string | null;
+    objectId: string;
+    constructor(options?: ICustomFabricRect);
+}

package/dist/types/index.d.ts

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

package/package.json

@@ -25,39 +25,39 @@
     "url": "https://github.com/berviantoleo"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.5",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
-    "@babel/runtime": "^7.15.3",
+    "@babel/runtime": "^7.15.4",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
-    "@storybook/addon-essentials": "^6.3.7",
-    "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-links": "^6.3.7",
-    "@storybook/addon-storysource": "^6.3.7",
-    "@storybook/addons": "^6.3.7",
-    "@storybook/react": "^6.3.7",
-    "@storybook/source-loader": "^6.3.7",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/addon-storysource": "^6.3.8",
+    "@storybook/addons": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@storybook/source-loader": "^6.3.8",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@types/fabric": "^4.5.2",
+    "@testing-library/react": "^12.1.0",
+    "@types/fabric": "^4.5.3",
     "@types/jest": "^27.0.1",
     "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.3",
-    "babel-jest": "^27.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "babel-jest": "^27.2.0",
     "clsx": "^1.1.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "node-sass": "^6.0.1",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.1",
     "react-test-renderer": "^17.0.2",
     "rollup": "^2.56.3",
     "rollup-plugin-delete": "^2.0.0",
@@ -82,5 +82,5 @@
     "uuid": "^8.3.2"
   },
   "license": "MIT",
-  "version": "0.20.28"
+  "version": "0.20.32"
 }