sp-image-editor
Version:
React component version of filerobot image editor (FIE).
1 lines • 5.41 kB
JavaScript
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{useEffect,useMemo,useRef,useState}from"react";import Text from"@scaleflex/icons/text";import UploadOutline from"@scaleflex/icons/upload-outline";import{SELECT_ANNOTATION,SET_ANNOTATION,SET_FEEDBACK,CLEAR_ANNOTATIONS_SELECTIONS}from"../../../actions";import ButtonWithMenu from"../../common/ButtonWithMenu";import TextControls from"../Text/TextOptions/TextControls";import ImageControls from"../Image/ImageControls";import{usePhoneScreen,useStore}from"../../../hooks";import{FEEDBACK_STATUSES,TOOLS_IDS}from"../../../utils/constants";import HiddenUploadInput from"../../common/HiddenUploadInput";import{StyledControlsWrapper,StyledWatermarkWrapper}from"./Watermark.styled";import WatermarksGallery from"./WatermarksGallery";import WatermarkPadding from"./WatermarkPadding";var WATERMARK_IMG_RATIO_FROM_ORIGINAL=.33,WATERMARK_ANNOTATION_ID="watermark",Watermark=function(){var a=useStore(),b=a.annotations,c=a.shownImageDimensions,d=a.selectionsIds,e=a.config,f=a.dispatch,g=a.t,h=a.adjustments.crop,i=void 0===h?{}:h,j=usePhoneScreen(),k=useState(!1),l=_slicedToArray(k,2),m=l[0],n=l[1],o=useRef(),p=e[TOOLS_IDS.WATERMARK],q=useMemo(function(){return b[WATERMARK_ANNOTATION_ID]},[b[WATERMARK_ANNOTATION_ID]]),r=i.width||c.width,s=i.height||c.height,t=i.x||0,u=i.y||0,v=p.textScalingRatio||WATERMARK_IMG_RATIO_FROM_ORIGINAL,w=p.imageScalingRatio||WATERMARK_IMG_RATIO_FROM_ORIGINAL,x=function(a){var b=a.naturalWidth||a.width,c=a.naturalHeight||a.height,d=s>r?s*w/c:r*w/b,g=_objectSpread(_objectSpread(_objectSpread({},e.annotationsCommon),e[TOOLS_IDS.IMAGE]),{},{scaleX:d,scaleY:d,padding:1,image:a,width:b,height:c,x:t+r/2-b*d/2,y:u+s/2-c*d/2,id:WATERMARK_ANNOTATION_ID,name:TOOLS_IDS.IMAGE,replaceCurrent:!0});f({type:SET_ANNOTATION,payload:g})},y=function(a){f({type:SET_ANNOTATION,payload:_objectSpread(_objectSpread({},"function"==typeof a?a(q):a),{},{id:WATERMARK_ANNOTATION_ID})})},z=function(a){f({type:SET_FEEDBACK,payload:{feedback:{message:a,status:FEEDBACK_STATUSES.WARNING}}})},A=function(a,b){if(a){n(!0);var c=new Image;c.onload=function(){x(c),b&&URL.revokeObjectURL(a),n(!1)},c.onerror=function(){z(g("mutualizedFailedToLoadImg")),b&&URL.revokeObjectURL(a),n(!1)},c.src=a}};useEffect(function(){q&&(f({type:CLEAR_ANNOTATIONS_SELECTIONS}),f({type:SELECT_ANNOTATION,payload:{annotationId:"watermark"}}))},[q]),useEffect(function(){q&&(0===d.length||d[0].id!==WATERMARK_ANNOTATION_ID)&&f({type:SELECT_ANNOTATION,payload:{annotationId:"watermark"}})},[d]);var B=[(!e.useCloudimage||"function"==typeof p.onUploadWatermarkImgClick)&&{key:"upload-watermark",label:g("uploadWatermark"),icon:UploadOutline,onClick:function(){if("function"==typeof p.onUploadWatermarkImgClick){var a=p.onUploadWatermarkImgClick(A);return void(a instanceof Promise&&a.then(function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},b=a.url,c=a.revokeObjectUrl;return A(b,void 0!==c&&c)}))}o.current&&o.current.click()}},!p.hideTextWatermark&&{key:"add-text-watermark",label:g("addWatermarkAsText"),icon:Text,onClick:function(){var a={height:s*v,width:r*v},b=_objectSpread(_objectSpread(_objectSpread(_objectSpread({},e.annotationsCommon),e[TOOLS_IDS.TEXT]),a),{},{padding:1,x:t+r/2-a.width/2,y:u+s/2-a.height/2,fill:"#000000",id:WATERMARK_ANNOTATION_ID,name:TOOLS_IDS.TEXT,replaceCurrent:!0});f({type:SET_ANNOTATION,payload:b})}}],C=function(){return React.createElement(WatermarkPadding,{watermark:q,saveWatermark:y,t:g})};return React.createElement("div",{className:"FIE_watermark-tool-wrapper"},(null===q||void 0===q?void 0:q.name)===TOOLS_IDS.TEXT&&React.createElement(StyledControlsWrapper,{className:"FIE_watermark-options-wrapper"},React.createElement(TextControls,{text:q,saveText:y,t:g},C())),(null===q||void 0===q?void 0:q.name)===TOOLS_IDS.IMAGE&&React.createElement(StyledControlsWrapper,{className:"FIE_watermark-options-wrapper"},React.createElement(ImageControls,{image:q,saveImage:y,t:g},C())),React.createElement(StyledWatermarkWrapper,{className:"FIE_watermark-add-wrapper",noWrap:!0},React.createElement(ButtonWithMenu,{className:"FIE_watermark-add",color:"secondary",label:function(){return j?g("plus"):B[0]?g("addWatermark"):g("addTextWatermark")}(),title:g("addWatermarkTitle"),menuPosition:"top",menuItems:B,menuFromBtn:!0,noMargin:!0}),React.createElement(WatermarksGallery,{loadAndSetWatermarkImg:A,addImgWatermark:x,style:j&&!(!(null!==q&&void 0!==q)||!q.name)?{width:"55%"}:void 0}),React.createElement(HiddenUploadInput,{onChange:m?void 0:function(a){if(a.target.files){var b=a.target.files[0];b.type.startsWith("image/")&&A(URL.createObjectURL(b),!0)}a.target.value=""},disabled:m,ref:o})))};export default Watermark;