@berviantoleo/react-multi-crop 0.21.2 → 0.22.1

package/CHANGELOG.md

@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.22.1](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.22.0...@berviantoleo/react-multi-crop@0.22.1) (2021-12-31)
+
+
+### Bug Fixes
+
+* fix grouping have different left/top ([#922](https://github.com/berviantoleo/react-multi-crop/issues/922)) ([#923](https://github.com/berviantoleo/react-multi-crop/issues/923)) ([dac9e0f](https://github.com/berviantoleo/react-multi-crop/commit/dac9e0f5d7c89c17a23bd11abf6c3fa77098138b))
+
+
+
+
+
+# [0.22.0](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.21.6...@berviantoleo/react-multi-crop@0.22.0) (2021-12-25)
+
+
+### Features
+
+* update deps ([d02a8d1](https://github.com/berviantoleo/react-multi-crop/commit/d02a8d1de0b096ae87d1b93033df3200249e7257))
+
+
+
+
+
+## [0.21.6](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.21.5...@berviantoleo/react-multi-crop@0.21.6) (2021-12-18)
+
+
+### Bug Fixes
+
+* update deps ([#910](https://github.com/berviantoleo/react-multi-crop/issues/910)) ([ecd4285](https://github.com/berviantoleo/react-multi-crop/commit/ecd428552e77b0b5e9ca95879e67137cf82fbc8a))
+
+
+
+
+
+## [0.21.5](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.21.4...@berviantoleo/react-multi-crop@0.21.5) (2021-12-04)
+
+**Note:** Version bump only for package @berviantoleo/react-multi-crop
+
+
+
+
+
+## [0.21.4](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.21.3...@berviantoleo/react-multi-crop@0.21.4) (2021-12-04)
+
+
+### Reverts
+
+* Revert "chore(release): publish" ([c79846d](https://github.com/berviantoleo/react-multi-crop/commit/c79846df09054fcee3f56dd19d6c103c7512b03d))
+* Revert "chore(release): publish" ([5951c62](https://github.com/berviantoleo/react-multi-crop/commit/5951c62834ceac0a6b8df78256d3f21427970417))
+
+
+
+
+
+## [0.21.3](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.21.2...@berviantoleo/react-multi-crop@0.21.3) (2021-12-04)
+
+
+### Bug Fixes
+
+* Update dependencies ([#866](https://github.com/berviantoleo/react-multi-crop/issues/866)) ([14d7ee2](https://github.com/berviantoleo/react-multi-crop/commit/14d7ee2ccd7f7f7c20b06fa580a5d7f01c9b5d6b))
+
+
+
+
+
 ## [0.21.2](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.21.1...@berviantoleo/react-multi-crop@0.21.2) (2021-11-27)
 
 

package/README.md

@@ -2,7 +2,11 @@
 
 # React Multi Crop (ReactMultiCrop)
 
-Easy and extensible react component to crop as multiple image
+Easy and extensible react component to crop as multiple image.
+
+## Announcement
+
+Version `0.22` and newer will be hosted at [npmjs](https://www.npmjs.com/package/@berviantoleo/react-multi-crop) only.
 
 ## Build Status
 

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("uuid");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=o(t);function n(t){return n="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},n(t)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("fabric"),o=require("uuid");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=r(t);function n(t){return n="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},n(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 a=function(t,e){return a=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])},a(t,e)};function s(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}a(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var c=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 s(e,t),e}(e.fabric.Rect);function l(t){var e=t.children,r=t.row,o=void 0!==r&&r;return i.default.createElement("div",{style:{display:"flex",flexDirection:o?"row":"column",gap:"10px"}},e)}function d(t){var e=t.addButton,r=t.addNew,o=t.deleteButton,n=t.deleteShapes,a=t.discardActiveObject,s=t.discardButton,c=t.multiSelect,d=t.multiSelectButton;return i.default.createElement(l,null,i.default.createElement("div",null,e&&i.default.cloneElement(e,{onClick:r})),i.default.createElement("div",null,o&&i.default.cloneElement(o,{onClick:n})),i.default.createElement("div",null,d&&i.default.cloneElement(d,{onClick:c})),i.default.createElement("div",null,s&&i.default.cloneElement(s,{onClick:a})))}var u=function(t){function o(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 s(o,t),o.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},o.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()}}},o.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},o.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))}},o.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)},o.prototype.initialImage=function(){var t=this.props,r=t.record,o=t.image,i=this.loadImage.bind(this);if("string"==typeof o){var a={};this.isCrossOriginURL(o)&&(a.crossOrigin="Anonymous"),e.fabric.Image.fromURL(o,i,a)}else if("object"===n(r)&&r.image){a={};this.isCrossOriginURL(r.image)&&(a.crossOrigin="Anonymous"),e.fabric.Image.fromURL(r.image,i,a)}},o.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var e=this.props,r=e.record,o=e.readonly,i=e.borderColor,a=e.cornerColor,s=e.cornerSize,c=e.transparentCorners;if(r){var l=r.clippings;if(Array.isArray(l)&&l.length>0&&"object"===n(l[0])){for(var d={borderColor:i,cornerColor:a,cornerSize:s,transparentCorners:c},u=0,h=0,p=l;h<p.length;h++){var v=p[h],f=this.createObject(t,v,d,o||!1);f&&(t.add(f),u+=1)}u>0&&this.setOutput()}}else console.log("Not have any record. Skipped.")}},o.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)}},o.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))},o.prototype.mouseOut=function(t){var e=this.props.onHover,r=t.target;r&&"rect"===r.type&&e&&e(null)},o.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))},o.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},o.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))},o.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())}},o.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()}}},o.prototype.createObjectByAttribute=function(t,e,o){return new c({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:o,lockMovementY:o,lockScalingX:o,lockScalingY:o,objectId:r.v4()})},o.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 v=null;try{v=o.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top})}catch(t){console.error(t)}h.canvasElement=v}var f=o.width,b=o.height,g=s*f,y=l*f,m=c*b,w=d*b,C={x:g,y:m,x2:y,y2:w,w:y-g,h:w-m,boundX:f,boundY:b};return h.crop=JSON.stringify(C),h.deletedAt="-1",h},o.prototype.deleteShapes=function(){var t=this.props.readonly,e=this.state.canvas;e&&!t&&(e.getActiveObjects().forEach((function(t){e.remove(t)})),this.setOutput())},o.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)}},o.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)},o.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")},o.prototype.discardActiveObject=function(){var t=this.state.canvas;t?(t.discardActiveObject(),t.requestRenderAll()):console.log("Canvas not defined")},o.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()}},o.prototype.render=function(){var t=this.props,e=t.addButton,r=t.deleteButton,o=t.discardButton,n=t.height,a=t.id,s=t.multiSelectButton,c=t.readonly,u=t.showButton,h=t.style,p=t.width;return i.default.createElement("div",{id:"canvas-wrapper",style:h},i.default.createElement(l,{row:!0},i.default.createElement("div",{onKeyDown:c?void 0:this.keyboardHandler,tabIndex:0},i.default.createElement("canvas",{id:a,height:n,style:{border:"0px solid #aaa"},width:p})),u&&!c&&i.default.createElement(d,{addButton:e,addNew:this.addNew,deleteButton:r,deleteShapes:this.deleteShapes,discardActiveObject:this.discardActiveObject,discardButton:o,multiSelect:this.multiSelect,multiSelectButton:s})))},o.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},o}(t.Component);exports.CustomFabricRect=c,exports.ReactMultiCrop=u;
+***************************************************************************** */}var a=function(t,e){return a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])},a(t,e)};function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function o(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}var c=function(t){function e(e){var o=t.call(this,e)||this;return o.id=null,o.objectId="",e&&(o.id=e.id,o.objectId=e.objectId),o}return s(e,t),e}(e.fabric.Rect);function l(t){var e=t.children,o=t.row,r=void 0!==o&&o;return i.default.createElement("div",{style:{display:"flex",flexDirection:r?"row":"column",gap:"10px"}},e)}function d(t){var e=t.addButton,o=t.addNew,r=t.deleteButton,n=t.deleteShapes,a=t.discardActiveObject,s=t.discardButton;return i.default.createElement(l,null,i.default.createElement("div",null,e&&i.default.cloneElement(e,{onClick:o})),i.default.createElement("div",null,r&&i.default.cloneElement(r,{onClick:n})),i.default.createElement("div",null,s&&i.default.cloneElement(s,{onClick:a})))}var u=function(t){function r(e){var o=t.call(this,e)||this;return o.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,o.state={canvas:null,initial:!0},o.color=e.cropBackgroundColor||"yellow",o.opacity=e.cropBackgroundOpacity||.5,o.keyboardHandler=o.keyboardHandler.bind(o),o.addNew=o.addNew.bind(o),o.deleteShapes=o.deleteShapes.bind(o),o.discardActiveObject=o.discardActiveObject.bind(o),o}return s(r,t),r.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},r.prototype.componentDidUpdate=function(t){var e=this.state.canvas;if(e){var o=this.props,r=o.zoomLevel,i=o.activeObject;if(t.zoomLevel!==r&&r&&r>0&&(e.setZoom(r),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,o=e.initial,r=e.canvas;if(r&&r.width&&r.height&&t.height&&t.width){var i=this.props.zoomLevel,n=t.height/t.width,a=r.width*n;r.setHeight(a),i?r.setZoom(i):r.setZoom(r.width/t.width),r.setBackgroundImage(t,r.renderAll.bind(r)),o&&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.image,o=this.loadImage.bind(this);if("string"==typeof t){var r={};this.isCrossOriginURL(t)&&(r.crossOrigin="Anonymous"),e.fabric.Image.fromURL(t,o,r)}},r.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var e=this.props,o=e.record,r=e.readonly,i=e.borderColor,a=e.cornerColor,s=e.cornerSize,c=e.transparentCorners;if(o){var l=o.clippings;if(Array.isArray(l)&&l.length>0&&"object"===n(l[0])){for(var d={borderColor:i,cornerColor:a,cornerSize:s,transparentCorners:c},u=0,h=0,p=l;h<p.length;h++){var v=p[h],f=this.createObject(t,v,d,r||!1);f&&(t.add(f),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 o=t.e.deltaY,r=e.getZoom();(r*=Math.pow(.999,o))>20&&(r=20),r<.01&&(r=.01),e.setZoom(r),t.e.preventDefault(),t.e.stopPropagation();var i=this.props.zoomChanged;i&&i(r)}},r.prototype.mouseHover=function(t){var e=this.props.onHover,o=this.shapetoStructureData.bind(this),r=t.target;r&&"rect"===r.type&&e&&e(o(r))},r.prototype.mouseOut=function(t){var e=this.props.onHover,o=t.target;o&&"rect"===o.type&&e&&e(null)},r.prototype.selectionHandler=function(t){var e=this.props.onSelect,o=this.shapetoStructureData.bind(this),r=t.target;r&&"rect"===r.type&&e&&e(o(r))},r.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},r.prototype.initialCanvas=function(){var t=this.props,o=t.id,r=t.width,i=t.height,n=t.readonly,a=new e.fabric.Canvas(o||"canvas",{width:r,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,o=this.viewportTransform;o[4]+=e.clientX-this.lastPosX,o[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,o={borderColor:e.borderColor,cornerColor:e.cornerColor,cornerSize:e.cornerSize,transparentCorners:e.transparentCorners},r=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},o,!1);r&&(t.add(r),this.setOutput())}},r.prototype.doubleClickEvent=function(t){var e=this.state.canvas;if(e){var o=this.props,r=o.readonly,i=o.borderColor,n=o.cornerColor,a=o.cornerSize,s=o.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,r||!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,r||!1);e.add(p),e.discardActiveObject(),e.setActiveObject(p),e.requestRenderAll(),this.setOutput()}}},r.prototype.createObjectByAttribute=function(t,e,r){return new c({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:o.v4()})},r.prototype.convertLeftTop=function(t){var e,o,r,i;return void 0===t.left||void 0===t.top||void 0===(null===(e=t.group)||void 0===e?void 0:e.left)||void 0===(null===(o=t.group)||void 0===o?void 0:o.top)||void 0===(null===(r=t.group)||void 0===r?void 0:r.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}},r.prototype.shapetoStructureData=function(t){var o=this.state.canvas;if(!o||!o.backgroundImage)return null;var r=o.backgroundImage;if(!(r 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===r.width||void 0===r.height)return null;var i=this.props,n=i.includeDataUrl,a=i.includeHtmlCanvas,s=t.group?this.convertLeftTop(t):{left:t.left,top:t.top},c=s.left/r.width,l=s.top/r.height,d=(s.left+t.width*t.scaleX)/r.width,u=(s.top+t.height*t.scaleY)/r.height,h={x1:c,y1:l,x2:d,y2:u},p={id:t.id,objectId:t.objectId,rect:JSON.stringify(h)};if(n){var v=null;try{v=r.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:s.left,top:s.top,format:"jpeg"})}catch(t){console.error(t)}p.dataUrl=v}if(a){var f=null;try{f=r.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:s.left,top:s.top})}catch(t){console.error(t)}p.canvasElement=f}var g=r.width,b=r.height,y=c*g,m=d*g,w=l*b,C=u*b,O={x:y,y:w,x2:m,y2:C,w:m-y,h:C-w,boundX:g,boundY:b};return p.crop=JSON.stringify(O),p.deletedAt="-1",p},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),o=[];t.getObjects("rect").forEach((function(t){var r=e(t);r&&o.push(r)}));var r=this.props.input;r&&r.onChange(o)}},r.prototype.createObject=function(t,o,r,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 o.rect?JSON.parse(o.rect):o.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:r.borderColor,cornerColor:r.cornerColor,cornerSize:r.cornerSize,transparentCorners:r.transparentCorners};return this.createObjectByAttribute(o.id,l,i)},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,o=t.key||t.keyCode;"Delete"!==o&&46!==o||(this.deleteShapes(),e=!0),e&&t.preventDefault()}},r.prototype.render=function(){var t=this.props,e=t.addButton,o=t.deleteButton,r=t.discardButton,n=t.height,a=t.id,s=t.readonly,c=t.showButton,u=t.style,h=t.width;return i.default.createElement("div",{id:"canvas-wrapper",style:u},i.default.createElement(l,{row:!0},i.default.createElement("div",{onKeyDown:s?void 0:this.keyboardHandler,tabIndex:0},i.default.createElement("canvas",{id:a,height:n,style:{border:"0px solid #aaa"},width:h})),c&&!s&&i.default.createElement(d,{addButton:e,addNew:this.addNew,deleteButton:o,deleteShapes:this.deleteShapes,discardActiveObject:this.discardActiveObject,discardButton:r})))},r.defaultProps={borderColor:"black",cornerColor:"black",cornerSize:13,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,height:800,id:"canvas",image:void 0,includeDataUrl:!1,includeHtmlCanvas:!1,input:void 0,readonly:!1,record:{clippings:[]},showButton:!1,transparentCorners:!0,width:800,zoomChanged:void 0},r}(t.Component);exports.CustomFabricRect=c,exports.ReactMultiCrop=u;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import t,{Component as e}from"react";import{fabric as o}from"fabric";import{v4 as r}from"uuid";function i(t){return i="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},i(t)}
+import t,{Component as e}from"react";import{fabric as o}from"fabric";import{v4 as r}from"uuid";function i(t){return i="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},i(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 n=function(t,e){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])},n(t,e)};function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function o(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}var s=function(t){function e(e){var o=t.call(this,e)||this;return o.id=null,o.objectId="",e&&(o.id=e.id,o.objectId=e.objectId),o}return a(e,t),e}(o.Rect);function c(e){var o=e.children,r=e.row,i=void 0!==r&&r;return t.createElement("div",{style:{display:"flex",flexDirection:i?"row":"column",gap:"10px"}},o)}function l(e){var o=e.addButton,r=e.addNew,i=e.deleteButton,n=e.deleteShapes,a=e.discardActiveObject,s=e.discardButton,l=e.multiSelect,d=e.multiSelectButton;return t.createElement(c,null,t.createElement("div",null,o&&t.cloneElement(o,{onClick:r})),t.createElement("div",null,i&&t.cloneElement(i,{onClick:n})),t.createElement("div",null,d&&t.cloneElement(d,{onClick:l})),t.createElement("div",null,s&&t.cloneElement(s,{onClick:a})))}var d=function(e){function n(t){var o=e.call(this,t)||this;return o.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,o.state={canvas:null,initial:!0},o.color=t.cropBackgroundColor||"yellow",o.opacity=t.cropBackgroundOpacity||.5,o.keyboardHandler=o.keyboardHandler.bind(o),o.addNew=o.addNew.bind(o),o.deleteShapes=o.deleteShapes.bind(o),o.multiSelect=o.multiSelect.bind(o),o.discardActiveObject=o.discardActiveObject.bind(o),o}return a(n,e),n.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},n.prototype.componentDidUpdate=function(t){var e=this.state.canvas;if(e){var o=this.props,r=o.zoomLevel,i=o.activeObject;if(t.zoomLevel!==r&&r&&r>0&&(e.setZoom(r),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()}}},n.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},n.prototype.loadImage=function(t){var e=this.state,o=e.initial,r=e.canvas;if(r&&r.width&&r.height&&t.height&&t.width){var i=this.props.zoomLevel,n=t.height/t.width,a=r.width*n;r.setHeight(a),i?r.setZoom(i):r.setZoom(r.width/t.width),r.setBackgroundImage(t,r.renderAll.bind(r)),o&&this.setState({initial:!1},this.initialObjects.bind(this))}},n.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)},n.prototype.initialImage=function(){var t=this.props,e=t.record,r=t.image,n=this.loadImage.bind(this);if("string"==typeof r){var a={};this.isCrossOriginURL(r)&&(a.crossOrigin="Anonymous"),o.Image.fromURL(r,n,a)}else if("object"===i(e)&&e.image){a={};this.isCrossOriginURL(e.image)&&(a.crossOrigin="Anonymous"),o.Image.fromURL(e.image,n,a)}},n.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var e=this.props,o=e.record,r=e.readonly,n=e.borderColor,a=e.cornerColor,s=e.cornerSize,c=e.transparentCorners;if(o){var l=o.clippings;if(Array.isArray(l)&&l.length>0&&"object"===i(l[0])){for(var d={borderColor:n,cornerColor:a,cornerSize:s,transparentCorners:c},h=0,u=0,p=l;u<p.length;u++){var v=p[u],f=this.createObject(t,v,d,r||!1);f&&(t.add(f),h+=1)}h>0&&this.setOutput()}}else console.log("Not have any record. Skipped.")}},n.prototype.zoom=function(t){var e=this.state.canvas;if(e){var o=t.e.deltaY,r=e.getZoom();(r*=Math.pow(.999,o))>20&&(r=20),r<.01&&(r=.01),e.setZoom(r),t.e.preventDefault(),t.e.stopPropagation();var i=this.props.zoomChanged;i&&i(r)}},n.prototype.mouseHover=function(t){var e=this.props.onHover,o=this.shapetoStructureData.bind(this),r=t.target;r&&"rect"===r.type&&e&&e(o(r))},n.prototype.mouseOut=function(t){var e=this.props.onHover,o=t.target;o&&"rect"===o.type&&e&&e(null)},n.prototype.selectionHandler=function(t){var e=this.props.onSelect,o=this.shapetoStructureData.bind(this),r=t.target;r&&"rect"===r.type&&e&&e(o(r))},n.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},n.prototype.initialCanvas=function(){var t=this.props,e=t.id,r=t.width,i=t.height,n=t.readonly,a=new o.Canvas(e||"canvas",{width:r,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),u=this.selectionHandler.bind(this),p=this.selectionClearHandler.bind(this);a.on("selection:created",u),a.on("selection:updated",u),a.on("selection:cleared",p),a.on("mouse: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,o=this.viewportTransform;o[4]+=e.clientX-this.lastPosX,o[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))},n.prototype.addNew=function(){var t=this.state.canvas;if(t){var e=this.props,o={borderColor:e.borderColor,cornerColor:e.cornerColor,cornerSize:e.cornerSize,transparentCorners:e.transparentCorners},r=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},o,!1);r&&(t.add(r),this.setOutput())}},n.prototype.doubleClickEvent=function(t){var e=this.state.canvas;if(e){var o=this.props,r=o.readonly,i=o.borderColor,n=o.cornerColor,a=o.cornerSize,s=o.transparentCorners;if(t&&t.target){var c=t.target.left,l=t.target.top,d=t.target.width,h=t.target.height,u={left:c+50,top:l+50,width:d*t.target.scaleX,height:h*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:s},p=this.createObjectByAttribute(null,u,r||!1);e.add(p),e.discardActiveObject(),e.setActiveObject(p),e.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){u={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,u,r||!1);e.add(p),e.discardActiveObject(),e.setActiveObject(p),e.requestRenderAll(),this.setOutput()}}},n.prototype.createObjectByAttribute=function(t,e,o){return new s({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:o,lockMovementY:o,lockScalingX:o,lockScalingY:o,objectId:r()})},n.prototype.shapetoStructureData=function(t){var e=this.state.canvas;if(!e||!e.backgroundImage)return null;var r=e.backgroundImage;if(!(r instanceof o.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===r.width||void 0===r.height)return null;var i=this.props,n=i.includeDataUrl,a=i.includeHtmlCanvas,s=t.left/r.width,c=t.top/r.height,l=(t.left+t.width*t.scaleX)/r.width,d=(t.top+t.height*t.scaleY)/r.height,h={x1:s,y1:c,x2:l,y2:d},u={id:t.id,objectId:t.objectId,rect:JSON.stringify(h)};if(n){var p=null;try{p=r.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top,format:"jpeg"})}catch(t){console.error(t)}u.dataUrl=p}if(a){var v=null;try{v=r.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:t.left,top:t.top})}catch(t){console.error(t)}u.canvasElement=v}var f=r.width,g=r.height,b=s*f,m=l*f,y=c*g,w=d*g,C={x:b,y:y,x2:m,y2:w,w:m-b,h:w-y,boundX:f,boundY:g};return u.crop=JSON.stringify(C),u.deletedAt="-1",u},n.prototype.deleteShapes=function(){var t=this.props.readonly,e=this.state.canvas;e&&!t&&(e.getActiveObjects().forEach((function(t){e.remove(t)})),this.setOutput())},n.prototype.setOutput=function(){var t=this.state.canvas;if(t){var e=this.shapetoStructureData.bind(this),o=[];t.getObjects("rect").forEach((function(t){var r=e(t);r&&o.push(r)}));var r=this.props.input;r&&r.onChange(o)}},n.prototype.createObject=function(t,e,r,i){if(!t||!t.backgroundImage)return null;var n,a=t.backgroundImage;if(!(a instanceof o.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:r.borderColor,cornerColor:r.cornerColor,cornerSize:r.cornerSize,transparentCorners:r.transparentCorners};return this.createObjectByAttribute(e.id,l,i)},n.prototype.multiSelect=function(){var t=this.props.readonly,e=this.state.canvas;if(e&&!t){e.discardActiveObject();var r=new o.ActiveSelection(e.getObjects(),{canvas:e});e.setActiveObject(r),e.requestRenderAll()}else console.log("Canvas not defined")},n.prototype.discardActiveObject=function(){var t=this.state.canvas;t?(t.discardActiveObject(),t.requestRenderAll()):console.log("Canvas not defined")},n.prototype.keyboardHandler=function(t){if(!t.defaultPrevented){var e=!1,o=t.key||t.keyCode;"Delete"===o||46===o?(this.deleteShapes(),e=!0):!t.ctrlKey||65!==o&&"a"!==o||(this.multiSelect(),e=!0),e&&t.preventDefault()}},n.prototype.render=function(){var e=this.props,o=e.addButton,r=e.deleteButton,i=e.discardButton,n=e.height,a=e.id,s=e.multiSelectButton,d=e.readonly,h=e.showButton,u=e.style,p=e.width;return t.createElement("div",{id:"canvas-wrapper",style:u},t.createElement(c,{row:!0},t.createElement("div",{onKeyDown:d?void 0:this.keyboardHandler,tabIndex:0},t.createElement("canvas",{id:a,height:n,style:{border:"0px solid #aaa"},width:p})),h&&!d&&t.createElement(l,{addButton:o,addNew:this.addNew,deleteButton:r,deleteShapes:this.deleteShapes,discardActiveObject:this.discardActiveObject,discardButton:i,multiSelect:this.multiSelect,multiSelectButton:s})))},n.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},n}(e);export{s as CustomFabricRect,d as ReactMultiCrop};
+***************************************************************************** */}var n=function(t,e){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])},n(t,e)};function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function o(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}var s=function(t){function e(e){var o=t.call(this,e)||this;return o.id=null,o.objectId="",e&&(o.id=e.id,o.objectId=e.objectId),o}return a(e,t),e}(o.Rect);function c(e){var o=e.children,r=e.row,i=void 0!==r&&r;return t.createElement("div",{style:{display:"flex",flexDirection:i?"row":"column",gap:"10px"}},o)}function l(e){var o=e.addButton,r=e.addNew,i=e.deleteButton,n=e.deleteShapes,a=e.discardActiveObject,s=e.discardButton;return t.createElement(c,null,t.createElement("div",null,o&&t.cloneElement(o,{onClick:r})),t.createElement("div",null,i&&t.cloneElement(i,{onClick:n})),t.createElement("div",null,s&&t.cloneElement(s,{onClick:a})))}var d=function(e){function n(t){var o=e.call(this,t)||this;return o.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,o.state={canvas:null,initial:!0},o.color=t.cropBackgroundColor||"yellow",o.opacity=t.cropBackgroundOpacity||.5,o.keyboardHandler=o.keyboardHandler.bind(o),o.addNew=o.addNew.bind(o),o.deleteShapes=o.deleteShapes.bind(o),o.discardActiveObject=o.discardActiveObject.bind(o),o}return a(n,e),n.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},n.prototype.componentDidUpdate=function(t){var e=this.state.canvas;if(e){var o=this.props,r=o.zoomLevel,i=o.activeObject;if(t.zoomLevel!==r&&r&&r>0&&(e.setZoom(r),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()}}},n.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},n.prototype.loadImage=function(t){var e=this.state,o=e.initial,r=e.canvas;if(r&&r.width&&r.height&&t.height&&t.width){var i=this.props.zoomLevel,n=t.height/t.width,a=r.width*n;r.setHeight(a),i?r.setZoom(i):r.setZoom(r.width/t.width),r.setBackgroundImage(t,r.renderAll.bind(r)),o&&this.setState({initial:!1},this.initialObjects.bind(this))}},n.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)},n.prototype.initialImage=function(){var t=this.props.image,e=this.loadImage.bind(this);if("string"==typeof t){var r={};this.isCrossOriginURL(t)&&(r.crossOrigin="Anonymous"),o.Image.fromURL(t,e,r)}},n.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var e=this.props,o=e.record,r=e.readonly,n=e.borderColor,a=e.cornerColor,s=e.cornerSize,c=e.transparentCorners;if(o){var l=o.clippings;if(Array.isArray(l)&&l.length>0&&"object"===i(l[0])){for(var d={borderColor:n,cornerColor:a,cornerSize:s,transparentCorners:c},h=0,p=0,u=l;p<u.length;p++){var v=u[p],f=this.createObject(t,v,d,r||!1);f&&(t.add(f),h+=1)}h>0&&this.setOutput()}}else console.log("Not have any record. Skipped.")}},n.prototype.zoom=function(t){var e=this.state.canvas;if(e){var o=t.e.deltaY,r=e.getZoom();(r*=Math.pow(.999,o))>20&&(r=20),r<.01&&(r=.01),e.setZoom(r),t.e.preventDefault(),t.e.stopPropagation();var i=this.props.zoomChanged;i&&i(r)}},n.prototype.mouseHover=function(t){var e=this.props.onHover,o=this.shapetoStructureData.bind(this),r=t.target;r&&"rect"===r.type&&e&&e(o(r))},n.prototype.mouseOut=function(t){var e=this.props.onHover,o=t.target;o&&"rect"===o.type&&e&&e(null)},n.prototype.selectionHandler=function(t){var e=this.props.onSelect,o=this.shapetoStructureData.bind(this),r=t.target;r&&"rect"===r.type&&e&&e(o(r))},n.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},n.prototype.initialCanvas=function(){var t=this.props,e=t.id,r=t.width,i=t.height,n=t.readonly,a=new o.Canvas(e||"canvas",{width:r,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,o=this.viewportTransform;o[4]+=e.clientX-this.lastPosX,o[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))},n.prototype.addNew=function(){var t=this.state.canvas;if(t){var e=this.props,o={borderColor:e.borderColor,cornerColor:e.cornerColor,cornerSize:e.cornerSize,transparentCorners:e.transparentCorners},r=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},o,!1);r&&(t.add(r),this.setOutput())}},n.prototype.doubleClickEvent=function(t){var e=this.state.canvas;if(e){var o=this.props,r=o.readonly,i=o.borderColor,n=o.cornerColor,a=o.cornerSize,s=o.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,r||!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,r||!1);e.add(u),e.discardActiveObject(),e.setActiveObject(u),e.requestRenderAll(),this.setOutput()}}},n.prototype.createObjectByAttribute=function(t,e,o){return new s({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:o,lockMovementY:o,lockScalingX:o,lockScalingY:o,objectId:r()})},n.prototype.convertLeftTop=function(t){var e,o,r,i;return void 0===t.left||void 0===t.top||void 0===(null===(e=t.group)||void 0===e?void 0:e.left)||void 0===(null===(o=t.group)||void 0===o?void 0:o.top)||void 0===(null===(r=t.group)||void 0===r?void 0:r.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}},n.prototype.shapetoStructureData=function(t){var e=this.state.canvas;if(!e||!e.backgroundImage)return null;var r=e.backgroundImage;if(!(r instanceof o.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===r.width||void 0===r.height)return null;var i=this.props,n=i.includeDataUrl,a=i.includeHtmlCanvas,s=t.group?this.convertLeftTop(t):{left:t.left,top:t.top},c=s.left/r.width,l=s.top/r.height,d=(s.left+t.width*t.scaleX)/r.width,h=(s.top+t.height*t.scaleY)/r.height,p={x1:c,y1:l,x2:d,y2:h},u={id:t.id,objectId:t.objectId,rect:JSON.stringify(p)};if(n){var v=null;try{v=r.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:s.left,top:s.top,format:"jpeg"})}catch(t){console.error(t)}u.dataUrl=v}if(a){var f=null;try{f=r.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:s.left,top:s.top})}catch(t){console.error(t)}u.canvasElement=f}var g=r.width,b=r.height,y=c*g,m=d*g,w=l*b,C=h*b,O={x:y,y:w,x2:m,y2:C,w:m-y,h:C-w,boundX:g,boundY:b};return u.crop=JSON.stringify(O),u.deletedAt="-1",u},n.prototype.deleteShapes=function(){var t=this.props.readonly,e=this.state.canvas;e&&!t&&(e.getActiveObjects().forEach((function(t){e.remove(t)})),this.setOutput())},n.prototype.setOutput=function(){var t=this.state.canvas;if(t){var e=this.shapetoStructureData.bind(this),o=[];t.getObjects("rect").forEach((function(t){var r=e(t);r&&o.push(r)}));var r=this.props.input;r&&r.onChange(o)}},n.prototype.createObject=function(t,e,r,i){if(!t||!t.backgroundImage)return null;var n,a=t.backgroundImage;if(!(a instanceof o.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:r.borderColor,cornerColor:r.cornerColor,cornerSize:r.cornerSize,transparentCorners:r.transparentCorners};return this.createObjectByAttribute(e.id,l,i)},n.prototype.discardActiveObject=function(){var t=this.state.canvas;t?(t.discardActiveObject(),t.requestRenderAll()):console.log("Canvas not defined")},n.prototype.keyboardHandler=function(t){if(!t.defaultPrevented){var e=!1,o=t.key||t.keyCode;"Delete"!==o&&46!==o||(this.deleteShapes(),e=!0),e&&t.preventDefault()}},n.prototype.render=function(){var e=this.props,o=e.addButton,r=e.deleteButton,i=e.discardButton,n=e.height,a=e.id,s=e.readonly,d=e.showButton,h=e.style,p=e.width;return t.createElement("div",{id:"canvas-wrapper",style:h},t.createElement(c,{row:!0},t.createElement("div",{onKeyDown:s?void 0:this.keyboardHandler,tabIndex:0},t.createElement("canvas",{id:a,height:n,style:{border:"0px solid #aaa"},width:p})),d&&!s&&t.createElement(l,{addButton:o,addNew:this.addNew,deleteButton:r,deleteShapes:this.deleteShapes,discardActiveObject:this.discardActiveObject,discardButton:i})))},n.defaultProps={borderColor:"black",cornerColor:"black",cornerSize:13,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,height:800,id:"canvas",image:void 0,includeDataUrl:!1,includeHtmlCanvas:!1,input:void 0,readonly:!1,record:{clippings:[]},showButton:!1,transparentCorners:!0,width:800,zoomChanged:void 0},n}(e);export{s as CustomFabricRect,d as ReactMultiCrop};

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

@@ -23,15 +23,11 @@ declare class ReactMultiCrop extends Component<IReactMultiCropProps, IReactMulti
     addNew(): void;
     doubleClickEvent(options: any): void;
     createObjectByAttribute(existingId: string | null, attribute: IAttribute, readonly: boolean): CustomFabricRect;
+    private convertLeftTop;
     shapetoStructureData(element: CustomFabricRect): IOutputData | null;
     deleteShapes(): void;
     setOutput(): void;
     createObject(canvas: fabric.Canvas | null, coor: ICoord, attribute: IAttribute, readonly: boolean): CustomFabricRect | null;
-    /**
-     * @deprecated Will be removed from next major/breaking version.
-     * No need this.
-     */
-    multiSelect(): void;
     discardActiveObject(): void;
     keyboardHandler(event: React.KeyboardEvent<HTMLDivElement>): void;
     render(): JSX.Element;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { IActionComponentProps } from '../interfaces';
-export declare function ActionsComponent({ addButton, addNew, deleteButton, deleteShapes, discardActiveObject, discardButton, multiSelect, multiSelectButton, }: IActionComponentProps): JSX.Element;
+export declare function ActionsComponent({ addButton, addNew, deleteButton, deleteShapes, discardActiveObject, discardButton, }: IActionComponentProps): JSX.Element;

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

@@ -2,10 +2,6 @@
 import { fabric } from 'fabric';
 import CSS from 'csstype';
 export interface IRecordProps {
-    /**
-     * @deprecated Will use image prop at root instead.
-     */
-    image?: string;
     clippings: Array<any>;
 }
 export interface IOutputData extends ICoord {
@@ -16,14 +12,6 @@ export interface IOutputData extends ICoord {
     objectId: string;
 }
 export interface IInputProps {
-    /**
-     * @deprecated will not support this again to remove input. Will seperate "form/input" if needed.
-     */
-    value?: string | any;
-    /**
-     * @deprecated will not support this again to remove input. Will seperate "form/input" if needed.
-     */
-    name?: string;
     /**
      * Give output each changes in the canvas, might be moved to root props.
      * @param value Output value
@@ -46,24 +34,12 @@ export interface IReactMultiCropProps {
     includeDataUrl?: boolean;
     includeHtmlCanvas?: boolean;
     input?: IInputProps;
-    /**
-     * @deprecated Will be removed when next major version
-     */
-    multiSelectButton?: JSX.Element;
     onHover?(value: IOutputData | null): void;
     onSelect?(value: IOutputData | null): void;
     readonly?: boolean;
     record?: IRecordProps;
-    /**
-     * @deprecated Not used anymore, please not use this.
-     */
-    showLabel?: boolean;
     showButton?: boolean;
     style?: CSS.Properties;
-    /**
-     * @deprecated Not used anymore, please not use this.
-     */
-    source?: string;
     transparentCorners?: boolean;
     width?: number;
     zoomChanged?(value: number): void;
@@ -109,12 +85,4 @@ export interface IActionComponentProps {
     deleteShapes(): void;
     discardActiveObject(): void;
     discardButton?: JSX.Element;
-    /**
-     * @deprecated Will be removed when next major version
-     */
-    multiSelect(): void;
-    /**
-     * @deprecated Will be removed when next major version
-     */
-    multiSelectButton?: JSX.Element;
 }

package/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+};

package/package.json

@@ -26,38 +26,38 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.16.4",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
-    "@babel/runtime": "^7.16.3",
+    "@babel/core": "^7.16.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
+    "@babel/plugin-transform-runtime": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
+    "@babel/runtime": "^7.16.5",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@storybook/addon-essentials": "^6.4.0",
-    "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-links": "^6.4.0",
-    "@storybook/addon-storysource": "^6.4.0",
-    "@storybook/addons": "^6.4.0",
-    "@storybook/react": "^6.4.0",
-    "@storybook/source-loader": "^6.4.0",
-    "@testing-library/jest-dom": "^5.15.1",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/addon-storysource": "^6.4.9",
+    "@storybook/addons": "^6.4.9",
+    "@storybook/react": "^6.4.9",
+    "@storybook/source-loader": "^6.4.9",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/fabric": "^4.5.5",
+    "@types/fabric": "^4.5.6",
     "@types/jest": "^27.0.3",
     "@types/uuid": "^8.3.3",
-    "babel-jest": "^27.3.1",
+    "babel-jest": "^27.4.5",
     "clsx": "^1.1.1",
-    "node-sass": "^6.0.1",
+    "node-sass": "^7.0.0",
     "react-test-renderer": "^17.0.2",
-    "rollup": "^2.60.1",
+    "rollup": "^2.61.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sizes": "^1.0.4",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.1",
-    "ts-jest": "^27.0.7"
+    "ts-jest": "^27.1.2"
   },
   "peerDependencies": {
     "fabric": ">=4.4.0 <5",
@@ -72,5 +72,6 @@
     "uuid": "^8.3.2"
   },
   "license": "MIT",
-  "version": "0.21.2"
+  "version": "0.22.1",
+  "gitHead": "25d0798c7c60faa779e696ee5d7ed02cd35a800f"
 }