@berviantoleo/react-multi-crop 0.31.2 → 0.31.3

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.31.3](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.31.2...@berviantoleo/react-multi-crop@0.31.3) (2023-05-06)
+
+**Note:** Version bump only for package @berviantoleo/react-multi-crop
+
 ## [0.31.2](https://github.com/berviantoleo/react-multi-crop/compare/@berviantoleo/react-multi-crop@0.31.1...@berviantoleo/react-multi-crop@0.31.2) (2023-05-04)
 
 ### Bug Fixes

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var t=require("react"),e=require("fabric"),o=require("uuid");function r(t){return r="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},r(t)}var i=function(t,e){return i=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])},i(t,e)};function n(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}i(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}var a=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 n(e,t),e}(e.fabric.Rect);function c(e){var o=e.children,r=e.height,i=e.width,n=e.row,a=void 0!==n&&n;return t.createElement("div",{style:{display:"flex",flexDirection:a?"row":"column",gap:"10px",height:r,width:i}},o)}function s(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 l=function(i){function l(t){var e=i.call(this,t)||this;return e.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,e.state={canvas:null,initial:!0},e.keyboardHandler=e.keyboardHandler.bind(e),e.addNew=e.addNew.bind(e),e.deleteShapes=e.deleteShapes.bind(e),e.discardActiveObject=e.discardActiveObject.bind(e),e}return n(l,i),l.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},l.prototype.componentDidUpdate=function(t){var e=this.state.canvas;if(e){var o=this.props,r=o.zoomLevel,i=o.activeObject,n=o.height,a=o.width,c=o.borderColor,s=o.cornerColor,l=o.cornerSize,d=o.transparentCorners,p=o.cropBackgroundColor,h=o.cropBackgroundOpacity,u=o.disableZoom,v=void 0!==u&&u,g=t.zoomLevel,f=t.activeObject,b=t.height,y=t.width,C=t.borderColor,m=t.cornerColor,w=t.cornerSize,O=t.transparentCorners,k=t.cropBackgroundColor,S=t.cropBackgroundOpacity,B=!1;if(g!==r&&r&&r>0&&(e.setZoom(r),B=!0),f!==i&&i){var j=e.getObjects().filter((function(t){return t.objectId===i}));e.discardActiveObject();for(var A=0,I=j;A<I.length;A++){var E=I[A];e.setActiveObject(E)}B=!0}if(e.off("mouse:wheel"),!v){var z=this.zoom.bind(this);e.on("mouse:wheel",z)}if(n&&n!==b&&(e.setHeight(n),B=!0),a&&a!==y&&(e.setWidth(a),B=!0),c!==C||s!==m||l!==w||d!==O||p!==k||h!==S){var H={borderColor:c,cornerColor:s,cornerSize:l,transparentCorners:d,cropBackgroundColor:p,cropBackgroundOpacity:h};this.updateCropAttributes(e,H),B=!0}B&&e.requestRenderAll()}},l.prototype.updateCropAttributes=function(t,e){var o=t.getObjects("rect");Array.isArray(o)&&o.length>0&&o.forEach((function(t){t.borderColor=e.borderColor,t.cornerColor=e.cornerColor,t.cornerSize=e.cornerSize,t.transparentCorners=e.transparentCorners,t.opacity=e.cropBackgroundOpacity,t.set("fill",e.cropBackgroundColor)}))},l.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},l.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))}},l.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)},l.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)}},l.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var e=this.props,o=e.record,i=e.readonly,n=e.borderColor,a=e.cornerColor,c=e.cornerSize,s=e.transparentCorners,l=e.cropBackgroundColor,d=e.cropBackgroundOpacity;if(o){var p=o.clippings;if(Array.isArray(p)&&p.length>0&&"object"===r(p[0])){for(var h={borderColor:n,cornerColor:a,cornerSize:c,transparentCorners:s,cropBackgroundColor:l,cropBackgroundOpacity:d},u=0,v=0,g=p;v<g.length;v++){var f=g[v],b=this.createObject(t,f,h,i||!1);b&&(t.add(b),u+=1)}u>0&&this.setOutput()}}else console.log("Not have any record. Skipped.")}},l.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)}},l.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))},l.prototype.mouseOut=function(t){var e=this.props.onHover,o=t.target;o&&"rect"===o.type&&e&&e(null)},l.prototype.selectionHandler=function(t){var e=this.props.onSelect,o=this.shapetoStructureData.bind(this),r=t.selected;if(Array.isArray(r)&&0!=r.length){var i=r[0];if(i&&"rect"===i.type&&e)e(o(i))}},l.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},l.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 c=this.mouseHover.bind(this),s=this.mouseOut.bind(this);a.on("mouse:over",c),a.on("mouse:out",s)}else{var l=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",l),a.on("object:modified",d)}var p=this.selectionHandler.bind(this),h=this.selectionClearHandler.bind(this);a.on("selection:created",p),a.on("selection:updated",p),a.on("selection:cleared",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))},l.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,cropBackgroundColor:e.cropBackgroundColor,cropBackgroundOpacity:e.cropBackgroundOpacity},r=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},o,!1);r&&(t.add(r),this.setOutput())}},l.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,c=o.transparentCorners,s=o.cropBackgroundColor,l=o.cropBackgroundOpacity;if(t&&t.target){var d=t.target.left,p=t.target.top,h=t.target.width,u=t.target.height,v={left:d+50,top:p+50,width:h*t.target.scaleX,height:u*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:s,cropBackgroundOpacity:l},g=this.createObjectByAttribute(null,v,r||!1);e.add(g),e.discardActiveObject(),e.setActiveObject(g),e.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){v={left:d=t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:s,cropBackgroundOpacity:l},g=this.createObjectByAttribute(null,v,r||!1);e.add(g),e.discardActiveObject(),e.setActiveObject(g),e.requestRenderAll(),this.setOutput()}}},l.prototype.createObjectByAttribute=function(t,e,r){return new a({left:e.left,top:e.top,width:e.width,height:e.height,borderColor:e.borderColor,cornerColor:e.cornerColor,cornerSize:e.cornerSize,transparentCorners:e.transparentCorners,fill:e.cropBackgroundColor,opacity:e.cropBackgroundOpacity,id:t,strokeWidth:0,strokeUniform:!0,lockRotation:!0,lockMovementX:r,lockMovementY:r,lockScalingX:r,lockScalingY:r,objectId:o.v4()})},l.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}},l.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,c=t.group?this.convertLeftTop(t):{left:t.left,top:t.top},s=c.left/r.width,l=c.top/r.height,d=(c.left+t.width*t.scaleX)/r.width,p=(c.top+t.height*t.scaleY)/r.height,h={x1:s,y1:l,x2:d,y2:p},u={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:c.left,top:c.top,format:"jpeg"})}catch(t){console.error(t)}u.dataUrl=v}if(a){var g=null;try{g=r.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top})}catch(t){console.error(t)}u.canvasElement=g}var f=r.width,b=r.height,y=s*f,C=d*f,m=l*b,w=p*b,O={x:y,y:m,x2:C,y2:w,w:C-y,h:w-m,boundX:f,boundY:b};return u.crop=JSON.stringify(O),u.deletedAt="-1",u},l.prototype.deleteShapes=function(){var t=this.props.readonly,e=this.state.canvas;e&&!t&&(e.getActiveObjects().forEach((function(t){e.remove(t)})),this.setOutput())},l.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)}},l.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 c=a.width*n.x1,s=a.height*n.y1,l={left:c,top:s,width:a.width*n.x2-c,height:a.height*n.y2-s,borderColor:r.borderColor,cornerColor:r.cornerColor,cornerSize:r.cornerSize,transparentCorners:r.transparentCorners,cropBackgroundColor:r.cropBackgroundColor,cropBackgroundOpacity:r.cropBackgroundOpacity};return this.createObjectByAttribute(o.id,l,i)},l.prototype.discardActiveObject=function(){var t=this.state.canvas;t?(t.discardActiveObject(),t.requestRenderAll()):console.log("Canvas not defined")},l.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()}},l.prototype.render=function(){var e=this.props,o=e.addButton,r=e.deleteButton,i=e.discardButton,n=e.height,a=e.id,l=e.readonly,d=e.showButton,p=e.style,h=e.width;return t.createElement("div",{id:"canvas-wrapper",style:p},t.createElement(c,{row:!0,width:h,height:n},t.createElement("div",{onKeyDown:l?void 0:this.keyboardHandler,tabIndex:0},t.createElement("canvas",{id:a,height:n,style:{border:"0px solid #aaa"},width:h})),d&&!l&&t.createElement(s,{addButton:o,addNew:this.addNew,deleteButton:r,deleteShapes:this.deleteShapes,discardActiveObject:this.discardActiveObject,discardButton:i})))},l.defaultProps={borderColor:"black",cornerColor:"black",cornerSize:13,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,disableZoom:!1,height:800,id:"canvas",image:void 0,includeDataUrl:!1,includeHtmlCanvas:!1,input:void 0,readonly:!1,record:{clippings:[]},showButton:!1,transparentCorners:!0,width:800,zoomChanged:void 0},l}(t.Component);exports.CustomFabricRect=a,exports.ReactMultiCrop=l;
+"use strict";var t=require("react"),e=require("fabric"),o=require("uuid");function r(t){return r="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},r(t)}var i=function(t,e){return i=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])},i(t,e)};function n(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}i(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}var a=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 n(e,t),e}(e.fabric.Rect);function c(e){var o=e.children,r=e.height,i=e.width,n=e.row,a=void 0!==n&&n;return t.createElement("div",{style:{display:"flex",flexDirection:a?"row":"column",gap:"10px",height:r,width:i}},o)}function l(e){var o=e.addButton,r=e.addNew,i=e.deleteButton,n=e.deleteShapes,a=e.discardActiveObject,l=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,l&&t.cloneElement(l,{onClick:a})))}var s=function(i){function s(t){var e=i.call(this,t)||this;return e.REGEXP_ORIGINS=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i,e.state={canvas:null,initial:!0},e.keyboardHandler=e.keyboardHandler.bind(e),e.addNew=e.addNew.bind(e),e.deleteShapes=e.deleteShapes.bind(e),e.discardActiveObject=e.discardActiveObject.bind(e),e}return n(s,i),s.prototype.componentDidMount=function(){this.state.canvas||this.initialCanvas()},s.prototype.componentDidUpdate=function(t){var e=this.state.canvas;if(e){var o=this.props,r=o.zoomLevel,i=o.activeObject,n=o.height,a=o.width,c=o.borderColor,l=o.cornerColor,s=o.cornerSize,d=o.transparentCorners,p=o.cropBackgroundColor,u=o.cropBackgroundOpacity,h=o.record,v=o.disableZoom,g=void 0!==v&&v,f=t.zoomLevel,y=t.activeObject,b=t.height,C=t.width,m=t.borderColor,w=t.cornerColor,O=t.cornerSize,k=t.transparentCorners,S=t.cropBackgroundColor,B=t.cropBackgroundOpacity,j=t.record,A=!1;if(f!==r&&r&&r>0&&(e.setZoom(r),A=!0),y!==i&&i){var I=e.getObjects().filter((function(t){return t.objectId===i}));e.discardActiveObject();for(var z=0,E=I;z<E.length;z++){var H=E[z];e.setActiveObject(H)}A=!0}if(e.off("mouse:wheel"),!g){var x=this.zoom.bind(this);e.on("mouse:wheel",x)}if(n&&n!==b&&(e.setHeight(n),A=!0),a&&a!==C&&(e.setWidth(a),A=!0),c!==m||l!==w||s!==O||d!==k||p!==S||u!==B){var D={borderColor:c,cornerColor:l,cornerSize:s,transparentCorners:d,cropBackgroundColor:p,cropBackgroundOpacity:u};this.updateCropAttributes(e,D),A=!0}var R=j;if(Array.isArray(R.clippings)&&h&&Array.isArray(null==h?void 0:h.clippings)){var P=h.clippings.filter((function(t){var e,o,r,i,n,a,c,l,s,d,p,u,h=R.clippings.find((function(e){return e.id===t.id||e.objectId&&e.objectId===t.objectId}));return!!h&&((null===(e=t.style)||void 0===e?void 0:e.borderColor)!==(null===(o=h.style)||void 0===o?void 0:o.borderColor)||(null===(r=t.style)||void 0===r?void 0:r.cornerColor)!==(null===(i=h.style)||void 0===i?void 0:i.cornerColor)||(null===(n=t.style)||void 0===n?void 0:n.cornerSize)!==(null===(a=h.style)||void 0===a?void 0:a.cornerSize)||(null===(c=t.style)||void 0===c?void 0:c.transparentCorners)!==(null===(l=h.style)||void 0===l?void 0:l.transparentCorners)||(null===(s=t.style)||void 0===s?void 0:s.cropBackgroundColor)!==(null===(d=h.style)||void 0===d?void 0:d.cropBackgroundColor)||(null===(p=t.style)||void 0===p?void 0:p.cropBackgroundOpacity)!==(null===(u=h.style)||void 0===u?void 0:u.cropBackgroundOpacity))})),X=e.getObjects("rect");if(Array.isArray(X)&&X.length>0){var Y=0;P.forEach((function(t){var e,o,r,i,n,a,c=X.find((function(e){var o=e;return o.id===t.id||o.objectId===t.objectId}));c&&(c.borderColor=null===(e=t.style)||void 0===e?void 0:e.borderColor,c.cornerColor=null===(o=t.style)||void 0===o?void 0:o.cornerColor,c.cornerSize=null===(r=t.style)||void 0===r?void 0:r.cornerSize,c.transparentCorners=null===(i=t.style)||void 0===i?void 0:i.transparentCorners,c.opacity=null===(n=t.style)||void 0===n?void 0:n.cropBackgroundOpacity,c.set("fill",null===(a=t.style)||void 0===a?void 0:a.cropBackgroundColor),Y+=1)})),Y>0&&(A=!0)}}A&&e.requestRenderAll()}},s.prototype.updateCropAttributes=function(t,e){var o=t.getObjects("rect");Array.isArray(o)&&o.length>0&&o.forEach((function(t){t.borderColor=e.borderColor,t.cornerColor=e.cornerColor,t.cornerSize=e.cornerSize,t.transparentCorners=e.transparentCorners,t.opacity=e.cropBackgroundOpacity,t.set("fill",e.cropBackgroundColor)}))},s.prototype.changeImage=function(){var t=this.state.canvas;t&&(t.backgroundImage||this.initialImage())},s.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))}},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.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)}},s.prototype.initialObjects=function(){var t=this.state.canvas;if(t){var e=this.props,o=e.record,i=e.readonly,n=e.borderColor,a=e.cornerColor,c=e.cornerSize,l=e.transparentCorners,s=e.cropBackgroundColor,d=e.cropBackgroundOpacity;if(o){var p=o.clippings;if(Array.isArray(p)&&p.length>0&&"object"===r(p[0])){for(var u={borderColor:n,cornerColor:a,cornerSize:c,transparentCorners:l,cropBackgroundColor:s,cropBackgroundOpacity:d},h=0,v=0,g=p;v<g.length;v++){var f=g[v],y=this.createObject(t,f,u,i||!1);y&&(t.add(y),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 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)}},s.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))},s.prototype.mouseOut=function(t){var e=this.props.onHover,o=t.target;o&&"rect"===o.type&&e&&e(null)},s.prototype.selectionHandler=function(t){var e=this.props.onSelect,o=this.shapetoStructureData.bind(this),r=t.selected;if(Array.isArray(r)&&0!=r.length){var i=r[0];if(i&&"rect"===i.type&&e)e(o(i))}},s.prototype.selectionClearHandler=function(){var t=this.props.onSelect;t&&t(null)},s.prototype.initialCanvas=function(){var t=this.props,o=t.id,r=t.width,i=t.height,n=t.readonly,a=new e.fabric.Canvas(o||"canvas",{width:r,height:i});if(n){a.selectionKey=void 0;var c=this.mouseHover.bind(this),l=this.mouseOut.bind(this);a.on("mouse:over",c),a.on("mouse:out",l)}else{var s=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",s),a.on("object:modified",d)}var p=this.selectionHandler.bind(this),u=this.selectionClearHandler.bind(this);a.on("selection:created",p),a.on("selection:updated",p),a.on("selection:cleared",u),a.on("mouse:down",(function(t){var 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))},s.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,cropBackgroundColor:e.cropBackgroundColor,cropBackgroundOpacity:e.cropBackgroundOpacity},r=this.createObject(t,{id:null,rect:{x1:0,y1:0,x2:.2,y2:.2}},o,!1);r&&(t.add(r),this.setOutput())}},s.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,c=o.transparentCorners,l=o.cropBackgroundColor,s=o.cropBackgroundOpacity;if(t&&t.target){var d=t.target.left,p=t.target.top,u=t.target.width,h=t.target.height,v={left:d+50,top:p+50,width:u*t.target.scaleX,height:h*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:s},g=this.createObjectByAttribute(null,v,r||!1);e.add(g),e.discardActiveObject(),e.setActiveObject(g),e.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){v={left:d=t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:s},g=this.createObjectByAttribute(null,v,r||!1);e.add(g),e.discardActiveObject(),e.setActiveObject(g),e.requestRenderAll(),this.setOutput()}}},s.prototype.createObjectByAttribute=function(t,e,r){return new a({left:e.left,top:e.top,width:e.width,height:e.height,borderColor:e.borderColor,cornerColor:e.cornerColor,cornerSize:e.cornerSize,transparentCorners:e.transparentCorners,fill:e.cropBackgroundColor,opacity:e.cropBackgroundOpacity,id:t,strokeWidth:0,strokeUniform:!0,lockRotation:!0,lockMovementX:r,lockMovementY:r,lockScalingX:r,lockScalingY:r,objectId:o.v4()})},s.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}},s.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,c=t.group?this.convertLeftTop(t):{left:t.left,top:t.top},l=c.left/r.width,s=c.top/r.height,d=(c.left+t.width*t.scaleX)/r.width,p=(c.top+t.height*t.scaleY)/r.height,u={x1:l,y1:s,x2:d,y2:p},h={id:t.id,objectId:t.objectId,rect:JSON.stringify(u)};if(n){var v=null;try{v=r.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top,format:"jpeg"})}catch(t){console.error(t)}h.dataUrl=v}if(a){var g=null;try{g=r.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top})}catch(t){console.error(t)}h.canvasElement=g}var f=r.width,y=r.height,b=l*f,C=d*f,m=s*y,w=p*y,O={x:b,y:m,x2:C,y2:w,w:C-b,h:w-m,boundX:f,boundY:y};return h.crop=JSON.stringify(O),h.deletedAt="-1",h},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),o=[];t.getObjects("rect").forEach((function(t){var r=e(t);r&&o.push(r)}));var r=this.props.input;r&&r.onChange(o)}},s.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 c=a.width*n.x1,l=a.height*n.y1,s={left:c,top:l,width:a.width*n.x2-c,height:a.height*n.y2-l,borderColor:r.borderColor,cornerColor:r.cornerColor,cornerSize:r.cornerSize,transparentCorners:r.transparentCorners,cropBackgroundColor:r.cropBackgroundColor,cropBackgroundOpacity:r.cropBackgroundOpacity};return this.createObjectByAttribute(o.id,s,i)},s.prototype.discardActiveObject=function(){var t=this.state.canvas;t?(t.discardActiveObject(),t.requestRenderAll()):console.log("Canvas not defined")},s.prototype.keyboardHandler=function(t){if(!t.defaultPrevented){var e=!1,o=t.key||t.keyCode;"Delete"!==o&&46!==o||(this.deleteShapes(),e=!0),e&&t.preventDefault()}},s.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,p=e.style,u=e.width;return t.createElement("div",{id:"canvas-wrapper",style:p},t.createElement(c,{row:!0,width:u,height:n},t.createElement("div",{onKeyDown:s?void 0:this.keyboardHandler,tabIndex:0},t.createElement("canvas",{id:a,height:n,style:{border:"0px solid #aaa"},width:u})),d&&!s&&t.createElement(l,{addButton:o,addNew:this.addNew,deleteButton:r,deleteShapes:this.deleteShapes,discardActiveObject:this.discardActiveObject,discardButton:i})))},s.defaultProps={borderColor:"black",cornerColor:"black",cornerSize:13,cropBackgroundColor:"yellow",cropBackgroundOpacity:.5,disableZoom:!1,height:800,id:"canvas",image:void 0,includeDataUrl:!1,includeHtmlCanvas:!1,input:void 0,readonly:!1,record:{clippings:[]},showButton:!1,transparentCorners:!0,width:800,zoomChanged:void 0},s}(t.Component);exports.CustomFabricRect=a,exports.ReactMultiCrop=s;

package/dist/index.esm.js

@@ -1 +1 @@
-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)}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 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 a(e,t),e}(o.Rect);function s(e){var o=e.children,r=e.height,i=e.width,n=e.row,a=void 0!==n&&n;return t.createElement("div",{style:{display:"flex",flexDirection:a?"row":"column",gap:"10px",height:r,width:i}},o)}function l(e){var o=e.addButton,r=e.addNew,i=e.deleteButton,n=e.deleteShapes,a=e.discardActiveObject,c=e.discardButton;return t.createElement(s,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,c&&t.cloneElement(c,{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.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,n=o.height,a=o.width,c=o.borderColor,s=o.cornerColor,l=o.cornerSize,d=o.transparentCorners,p=o.cropBackgroundColor,h=o.cropBackgroundOpacity,u=o.disableZoom,v=void 0!==u&&u,g=t.zoomLevel,f=t.activeObject,y=t.height,b=t.width,m=t.borderColor,C=t.cornerColor,w=t.cornerSize,O=t.transparentCorners,k=t.cropBackgroundColor,S=t.cropBackgroundOpacity,B=!1;if(g!==r&&r&&r>0&&(e.setZoom(r),B=!0),f!==i&&i){var j=e.getObjects().filter((function(t){return t.objectId===i}));e.discardActiveObject();for(var A=0,I=j;A<I.length;A++){var E=I[A];e.setActiveObject(E)}B=!0}if(e.off("mouse:wheel"),!v){var z=this.zoom.bind(this);e.on("mouse:wheel",z)}if(n&&n!==y&&(e.setHeight(n),B=!0),a&&a!==b&&(e.setWidth(a),B=!0),c!==m||s!==C||l!==w||d!==O||p!==k||h!==S){var H={borderColor:c,cornerColor:s,cornerSize:l,transparentCorners:d,cropBackgroundColor:p,cropBackgroundOpacity:h};this.updateCropAttributes(e,H),B=!0}B&&e.requestRenderAll()}},n.prototype.updateCropAttributes=function(t,e){var o=t.getObjects("rect");Array.isArray(o)&&o.length>0&&o.forEach((function(t){t.borderColor=e.borderColor,t.cornerColor=e.cornerColor,t.cornerSize=e.cornerSize,t.transparentCorners=e.transparentCorners,t.opacity=e.cropBackgroundOpacity,t.set("fill",e.cropBackgroundColor)}))},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,c=e.cornerSize,s=e.transparentCorners,l=e.cropBackgroundColor,d=e.cropBackgroundOpacity;if(o){var p=o.clippings;if(Array.isArray(p)&&p.length>0&&"object"===i(p[0])){for(var h={borderColor:n,cornerColor:a,cornerSize:c,transparentCorners:s,cropBackgroundColor:l,cropBackgroundOpacity:d},u=0,v=0,g=p;v<g.length;v++){var f=g[v],y=this.createObject(t,f,h,r||!1);y&&(t.add(y),u+=1)}u>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.selected;if(Array.isArray(r)&&0!=r.length){var i=r[0];if(i&&"rect"===i.type&&e)e(o(i))}},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 c=this.mouseHover.bind(this),s=this.mouseOut.bind(this);a.on("mouse:over",c),a.on("mouse:out",s)}else{var l=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",l),a.on("object:modified",d)}var p=this.selectionHandler.bind(this),h=this.selectionClearHandler.bind(this);a.on("selection:created",p),a.on("selection:updated",p),a.on("selection:cleared",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,cropBackgroundColor:e.cropBackgroundColor,cropBackgroundOpacity:e.cropBackgroundOpacity},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,c=o.transparentCorners,s=o.cropBackgroundColor,l=o.cropBackgroundOpacity;if(t&&t.target){var d=t.target.left,p=t.target.top,h=t.target.width,u=t.target.height,v={left:d+50,top:p+50,width:h*t.target.scaleX,height:u*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:s,cropBackgroundOpacity:l},g=this.createObjectByAttribute(null,v,r||!1);e.add(g),e.discardActiveObject(),e.setActiveObject(g),e.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){v={left:d=t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:s,cropBackgroundOpacity:l},g=this.createObjectByAttribute(null,v,r||!1);e.add(g),e.discardActiveObject(),e.setActiveObject(g),e.requestRenderAll(),this.setOutput()}}},n.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:e.cropBackgroundColor,opacity:e.cropBackgroundOpacity,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,c=t.group?this.convertLeftTop(t):{left:t.left,top:t.top},s=c.left/r.width,l=c.top/r.height,d=(c.left+t.width*t.scaleX)/r.width,p=(c.top+t.height*t.scaleY)/r.height,h={x1:s,y1:l,x2:d,y2:p},u={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:c.left,top:c.top,format:"jpeg"})}catch(t){console.error(t)}u.dataUrl=v}if(a){var g=null;try{g=r.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top})}catch(t){console.error(t)}u.canvasElement=g}var f=r.width,y=r.height,b=s*f,m=d*f,C=l*y,w=p*y,O={x:b,y:C,x2:m,y2:w,w:m-b,h:w-C,boundX:f,boundY:y};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 c=a.width*n.x1,s=a.height*n.y1,l={left:c,top:s,width:a.width*n.x2-c,height:a.height*n.y2-s,borderColor:r.borderColor,cornerColor:r.cornerColor,cornerSize:r.cornerSize,transparentCorners:r.transparentCorners,cropBackgroundColor:r.cropBackgroundColor,cropBackgroundOpacity:r.cropBackgroundOpacity};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,c=e.readonly,d=e.showButton,p=e.style,h=e.width;return t.createElement("div",{id:"canvas-wrapper",style:p},t.createElement(s,{row:!0,width:h,height:n},t.createElement("div",{onKeyDown:c?void 0:this.keyboardHandler,tabIndex:0},t.createElement("canvas",{id:a,height:n,style:{border:"0px solid #aaa"},width:h})),d&&!c&&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,disableZoom:!1,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{c as CustomFabricRect,d as ReactMultiCrop};
+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)}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 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 a(e,t),e}(o.Rect);function l(e){var o=e.children,r=e.height,i=e.width,n=e.row,a=void 0!==n&&n;return t.createElement("div",{style:{display:"flex",flexDirection:a?"row":"column",gap:"10px",height:r,width:i}},o)}function s(e){var o=e.addButton,r=e.addNew,i=e.deleteButton,n=e.deleteShapes,a=e.discardActiveObject,c=e.discardButton;return t.createElement(l,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,c&&t.cloneElement(c,{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.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,n=o.height,a=o.width,c=o.borderColor,l=o.cornerColor,s=o.cornerSize,d=o.transparentCorners,p=o.cropBackgroundColor,u=o.cropBackgroundOpacity,h=o.record,v=o.disableZoom,g=void 0!==v&&v,f=t.zoomLevel,y=t.activeObject,b=t.height,C=t.width,m=t.borderColor,w=t.cornerColor,O=t.cornerSize,k=t.transparentCorners,S=t.cropBackgroundColor,B=t.cropBackgroundOpacity,j=t.record,A=!1;if(f!==r&&r&&r>0&&(e.setZoom(r),A=!0),y!==i&&i){var I=e.getObjects().filter((function(t){return t.objectId===i}));e.discardActiveObject();for(var z=0,E=I;z<E.length;z++){var H=E[z];e.setActiveObject(H)}A=!0}if(e.off("mouse:wheel"),!g){var D=this.zoom.bind(this);e.on("mouse:wheel",D)}if(n&&n!==b&&(e.setHeight(n),A=!0),a&&a!==C&&(e.setWidth(a),A=!0),c!==m||l!==w||s!==O||d!==k||p!==S||u!==B){var x={borderColor:c,cornerColor:l,cornerSize:s,transparentCorners:d,cropBackgroundColor:p,cropBackgroundOpacity:u};this.updateCropAttributes(e,x),A=!0}var P=j;if(Array.isArray(P.clippings)&&h&&Array.isArray(null==h?void 0:h.clippings)){var R=h.clippings.filter((function(t){var e,o,r,i,n,a,c,l,s,d,p,u,h=P.clippings.find((function(e){return e.id===t.id||e.objectId&&e.objectId===t.objectId}));return!!h&&((null===(e=t.style)||void 0===e?void 0:e.borderColor)!==(null===(o=h.style)||void 0===o?void 0:o.borderColor)||(null===(r=t.style)||void 0===r?void 0:r.cornerColor)!==(null===(i=h.style)||void 0===i?void 0:i.cornerColor)||(null===(n=t.style)||void 0===n?void 0:n.cornerSize)!==(null===(a=h.style)||void 0===a?void 0:a.cornerSize)||(null===(c=t.style)||void 0===c?void 0:c.transparentCorners)!==(null===(l=h.style)||void 0===l?void 0:l.transparentCorners)||(null===(s=t.style)||void 0===s?void 0:s.cropBackgroundColor)!==(null===(d=h.style)||void 0===d?void 0:d.cropBackgroundColor)||(null===(p=t.style)||void 0===p?void 0:p.cropBackgroundOpacity)!==(null===(u=h.style)||void 0===u?void 0:u.cropBackgroundOpacity))})),X=e.getObjects("rect");if(Array.isArray(X)&&X.length>0){var Y=0;R.forEach((function(t){var e,o,r,i,n,a,c=X.find((function(e){var o=e;return o.id===t.id||o.objectId===t.objectId}));c&&(c.borderColor=null===(e=t.style)||void 0===e?void 0:e.borderColor,c.cornerColor=null===(o=t.style)||void 0===o?void 0:o.cornerColor,c.cornerSize=null===(r=t.style)||void 0===r?void 0:r.cornerSize,c.transparentCorners=null===(i=t.style)||void 0===i?void 0:i.transparentCorners,c.opacity=null===(n=t.style)||void 0===n?void 0:n.cropBackgroundOpacity,c.set("fill",null===(a=t.style)||void 0===a?void 0:a.cropBackgroundColor),Y+=1)})),Y>0&&(A=!0)}}A&&e.requestRenderAll()}},n.prototype.updateCropAttributes=function(t,e){var o=t.getObjects("rect");Array.isArray(o)&&o.length>0&&o.forEach((function(t){t.borderColor=e.borderColor,t.cornerColor=e.cornerColor,t.cornerSize=e.cornerSize,t.transparentCorners=e.transparentCorners,t.opacity=e.cropBackgroundOpacity,t.set("fill",e.cropBackgroundColor)}))},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,c=e.cornerSize,l=e.transparentCorners,s=e.cropBackgroundColor,d=e.cropBackgroundOpacity;if(o){var p=o.clippings;if(Array.isArray(p)&&p.length>0&&"object"===i(p[0])){for(var u={borderColor:n,cornerColor:a,cornerSize:c,transparentCorners:l,cropBackgroundColor:s,cropBackgroundOpacity:d},h=0,v=0,g=p;v<g.length;v++){var f=g[v],y=this.createObject(t,f,u,r||!1);y&&(t.add(y),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.selected;if(Array.isArray(r)&&0!=r.length){var i=r[0];if(i&&"rect"===i.type&&e)e(o(i))}},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 c=this.mouseHover.bind(this),l=this.mouseOut.bind(this);a.on("mouse:over",c),a.on("mouse:out",l)}else{var s=this.doubleClickEvent.bind(this),d=this.setOutput.bind(this);a.on("mouse:dblclick",s),a.on("object:modified",d)}var p=this.selectionHandler.bind(this),u=this.selectionClearHandler.bind(this);a.on("selection:created",p),a.on("selection:updated",p),a.on("selection:cleared",u),a.on("mouse:down",(function(t){var 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,cropBackgroundColor:e.cropBackgroundColor,cropBackgroundOpacity:e.cropBackgroundOpacity},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,c=o.transparentCorners,l=o.cropBackgroundColor,s=o.cropBackgroundOpacity;if(t&&t.target){var d=t.target.left,p=t.target.top,u=t.target.width,h=t.target.height,v={left:d+50,top:p+50,width:u*t.target.scaleX,height:h*t.target.scaleY,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:s},g=this.createObjectByAttribute(null,v,r||!1);e.add(g),e.discardActiveObject(),e.setActiveObject(g),e.requestRenderAll(),this.setOutput()}else if(t&&t.pointer){v={left:d=t.absolutePointer.x,top:t.absolutePointer.y,width:100,height:100,borderColor:i,cornerColor:n,cornerSize:a,transparentCorners:c,cropBackgroundColor:l,cropBackgroundOpacity:s},g=this.createObjectByAttribute(null,v,r||!1);e.add(g),e.discardActiveObject(),e.setActiveObject(g),e.requestRenderAll(),this.setOutput()}}},n.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:e.cropBackgroundColor,opacity:e.cropBackgroundOpacity,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,c=t.group?this.convertLeftTop(t):{left:t.left,top:t.top},l=c.left/r.width,s=c.top/r.height,d=(c.left+t.width*t.scaleX)/r.width,p=(c.top+t.height*t.scaleY)/r.height,u={x1:l,y1:s,x2:d,y2:p},h={id:t.id,objectId:t.objectId,rect:JSON.stringify(u)};if(n){var v=null;try{v=r.toDataURL({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top,format:"jpeg"})}catch(t){console.error(t)}h.dataUrl=v}if(a){var g=null;try{g=r.toCanvasElement({height:t.getScaledHeight(),width:t.getScaledWidth(),left:c.left,top:c.top})}catch(t){console.error(t)}h.canvasElement=g}var f=r.width,y=r.height,b=l*f,C=d*f,m=s*y,w=p*y,O={x:b,y:m,x2:C,y2:w,w:C-b,h:w-m,boundX:f,boundY:y};return h.crop=JSON.stringify(O),h.deletedAt="-1",h},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 c=a.width*n.x1,l=a.height*n.y1,s={left:c,top:l,width:a.width*n.x2-c,height:a.height*n.y2-l,borderColor:r.borderColor,cornerColor:r.cornerColor,cornerSize:r.cornerSize,transparentCorners:r.transparentCorners,cropBackgroundColor:r.cropBackgroundColor,cropBackgroundOpacity:r.cropBackgroundOpacity};return this.createObjectByAttribute(e.id,s,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,c=e.readonly,d=e.showButton,p=e.style,u=e.width;return t.createElement("div",{id:"canvas-wrapper",style:p},t.createElement(l,{row:!0,width:u,height:n},t.createElement("div",{onKeyDown:c?void 0:this.keyboardHandler,tabIndex:0},t.createElement("canvas",{id:a,height:n,style:{border:"0px solid #aaa"},width:u})),d&&!c&&t.createElement(s,{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,disableZoom:!1,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{c as CustomFabricRect,d as ReactMultiCrop};

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

@@ -1,7 +1,30 @@
 import { fabric } from 'fabric';
 import CSS from 'csstype';
+export interface ICropStyle {
+    borderColor?: string;
+    cornerColor?: string;
+    cornerSize?: number;
+    cropBackgroundColor?: string;
+    cropBackgroundOpacity?: number;
+    transparentCorners?: boolean;
+}
+export interface IRectCoord {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}
+export interface ICoord {
+    id: string | null;
+    rect: IRectCoord | string;
+    objectId?: string;
+}
+export interface ICropProps extends ICoord {
+    rectPx?: IRectCoord | string | object;
+    style?: ICropStyle;
+}
 export interface IRecordProps {
-    clippings: Array<any>;
+    clippings: Array<ICropProps>;
 }
 export interface IOutputData extends ICoord {
     crop?: string;
@@ -18,17 +41,8 @@ export interface IInputProps {
     onChange(value: Array<IOutputData>): void;
 }
 export interface IReactMultiCropProps {
-    addButton?: JSX.Element;
     activeObject?: string;
-    borderColor?: string;
-    cornerColor?: string;
-    cornerSize?: number;
-    cropBackgroundColor?: string;
-    cropBackgroundOpacity?: number;
-    deleteButton?: JSX.Element;
     disableZoom?: boolean;
-    discardButton?: JSX.Element;
-    height?: number;
     id?: string;
     image?: string;
     includeDataUrl?: boolean;
@@ -38,27 +52,37 @@ export interface IReactMultiCropProps {
     onSelect?(value: IOutputData | null): void;
     readonly?: boolean;
     record?: IRecordProps;
-    showButton?: boolean;
-    style?: CSS.Properties;
-    transparentCorners?: boolean;
+    height?: number;
     width?: number;
     zoomChanged?(value: number): void;
     zoomLevel?: number;
+    /** @deprecated use borderColor in record */
+    borderColor?: string;
+    /** @deprecated use cornerColor in record */
+    cornerColor?: string;
+    /** @deprecated use cornerSize in record */
+    cornerSize?: number;
+    /** @deprecated use cropBackgroundColor in record */
+    cropBackgroundColor?: string;
+    /** @deprecated use cropBackgroundOpacity in record */
+    cropBackgroundOpacity?: number;
+    /** @deprecated use transparentCorners in record */
+    transparentCorners?: boolean;
+    /** @deprecated will completely remove the buttons */
+    addButton?: JSX.Element;
+    /** @deprecated will completely remove the buttons */
+    deleteButton?: JSX.Element;
+    /** @deprecated will completely remove the buttons */
+    discardButton?: JSX.Element;
+    /** @deprecated will completely remove the buttons */
+    showButton?: boolean;
+    /** @deprecated avoid to use this props */
+    style?: CSS.Properties;
 }
 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;
@@ -80,6 +104,7 @@ export declare class CustomFabricRect extends fabric.Rect {
     objectId: string;
     constructor(options?: ICustomFabricRect);
 }
+/** @deprecated will completely remove the buttons */
 export interface IActionComponentProps {
     addButton?: JSX.Element;
     addNew(): void;

package/package.json

@@ -76,6 +76,6 @@
     "uuid": "^9.0.0"
   },
   "license": "MIT",
-  "version": "0.31.2",
-  "gitHead": "a73e794689e7b5e5afd96cd3a6221791f59cdc0c"
+  "version": "0.31.3",
+  "gitHead": "ac9bf5bdde0b45c36f39d1634ce89acd0b24615c"
 }