Web: People/Client: Fix rotation bug, fixed Wheel empty image bug, fixed twitching of the picture when saving, refactoring (remove callback using)

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/avatarEditorPage.js

@@ -77,20 +77,20 @@ class AvatarEditorPage extends React.PureComponent {
     toggleAvatarEditor(false);
   };
 
-  onSaveAvatar = (isUpdate, result) => {
+  onSaveAvatar = (isUpdate, result, avatar) => {
     this.setState({ isLoading: true });
     const { profile } = this.props;
     if (isUpdate) {
       createThumbnailsAvatar(profile.id, {
         x: Math.round(
-          result.x * this.state.avatar.defaultWidth - result.width / 2
+          result.x * avatar.defaultWidth - result.width / 2
         ),
         y: Math.round(
-          result.y * this.state.avatar.defaultHeight - result.height / 2
+          result.y * avatar.defaultHeight - result.height / 2
         ),
         width: result.width,
         height: result.height,
-        tmpFile: this.state.avatar.tmpFile,
+        tmpFile: avatar.tmpFile,
       })
         .then(() => {
           toastr.success(this.props.t("ChangesSavedSuccessfully"));
@@ -100,8 +100,12 @@ class AvatarEditorPage extends React.PureComponent {
           toastr.error(error);
           this.setState({ isLoading: false });
         })
-        .then(() => this.props.updateProfile(this.props.profile))
+        .then(() => {
-        .then(() => this.props.fetchProfile(profile.id));
+          this.props.updateProfile(this.props.profile);
+        })
+        .then(() => {
+          this.props.fetchProfile(profile.id);
+        });
     } else {
       deleteAvatar(profile.id)
         .then(() => {
@@ -114,28 +118,39 @@ class AvatarEditorPage extends React.PureComponent {
     }
   };
 
-  onLoadFileAvatar = (file, callback) => {
+  onLoadFileAvatar = (file, fileData) => {
     const { profile } = this.props;
 
     this.setState({ isLoading: true });
     let data = new FormData();
     let _this = this;
+ 
+    if(!file) {
+      _this.onSaveAvatar(false)
+      return;
+    }
+    
     data.append("file", file);
     data.append("Autosave", false);
     loadAvatar(profile.id, data)
       .then((response) => {
         var img = new Image();
         img.onload = function () {
-          var stateCopy = Object.assign({}, _this.state);
+          
-          stateCopy.avatar = {
-            tmpFile: response.data,
-            image: response.data,
-            defaultWidth: img.width,
-            defaultHeight: img.height,
-          };
-          _this.setState(stateCopy);
           _this.setState({ isLoading: false });
-          if (typeof callback === "function") callback();
+          if (fileData) {
+            fileData.avatar = {
+              tmpFile: response.data,
+              image: response.data,
+              defaultWidth: img.width,
+              defaultHeight: img.height,
+            }
+            if(!fileData.existImage) {
+              _this.onSaveAvatar(fileData.existImage)  // saving empty avatar
+            } else{
+              _this.onSaveAvatar(fileData.existImage, fileData.position, fileData.avatar)
+            }
+          }
         };
         img.src = response.data;
       })

web/ASC.Web.Components/src/components/avatar-editor/index.js

@@ -6,12 +6,12 @@ import AvatarEditorBody from "./sub-components/avatar-editor-body";
 import styled from "styled-components";
 
 const StyledButtonsWrapper = styled.div`
-    display: grid;
+  display: grid;
-    grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
-    grid-gap: 8px;
+  grid-gap: 8px;
-    min-width: 208px;
+  min-width: 208px;
-    max-width: 300px;
+  max-width: 300px;
-    width: max-content;
+  width: max-content;
 `;
 
 class AvatarEditor extends React.Component {
@@ -59,21 +59,32 @@ class AvatarEditor extends React.Component {
       this.props.onLoadFileError(error);
   };
 
-  onLoadFile = (file, callback) => {
+  onLoadFile = (file, needSave) => {
     if (typeof this.props.onLoadFile === "function")
-      this.props.onLoadFile(file, callback);
+    var fileData = {
+      existImage: this.state.existImage,
+      position: {
+        x: this.state.x,
+        y: this.state.y,
+        width: this.state.width,
+        height: this.state.height
+      },
+      croppedImage: this.state.croppedImage
+    }
+
+    needSave ? this.props.onLoadFile(file, fileData) : this.props.onLoadFile(file); 
 
     if (!this.state.existImage) this.setState({ existImage: true });
   };
 
   onSaveButtonClick = () => {
-    //this.avatarEditorBodyRef.current.onSaveImage(this.saveAvatar);
+    this.avatarEditorBodyRef.current.onSaveImage();
-    this.saveAvatar();
+    //this.saveAvatar();
-  };
+  };;
 
   onCancelButtonClick = () => {
     this.props.onCancel();
-  }
+  };
 
   saveAvatar = () => {
     if (!this.state.existImage) {
@@ -128,54 +139,21 @@ class AvatarEditor extends React.Component {
       cancelButtonLabel
     } = this.props;
 
-    return (
+
-      useModalDialog ?
+    return useModalDialog ? (
-        <ModalDialog
+      <ModalDialog
-          visible={this.state.visible}
+        visible={this.state.visible}
-          displayType={displayType}
+        displayType={displayType}
-          scale={false}
+        scale={false}
-          contentHeight="initial"
+        contentHeight="initial"
-          contentWidth="initial"
+        contentWidth="initial"
-          onClose={this.onClose}
+        onClose={this.onClose}
-          className={className}
+        className={className}
-          id={id}
+        id={id}
-          style={style}
+        style={style}
-        >
+      >
-          <ModalDialog.Header>{headerLabel}</ModalDialog.Header>
+        <ModalDialog.Header>{headerLabel}</ModalDialog.Header>
-          <ModalDialog.Body>
+        <ModalDialog.Body>
-            <AvatarEditorBody
-              ref={this.avatarEditorBodyRef}
-              visible={this.state.visible}
-              onImageChange={this.onImageChange}
-              onPositionChange={this.onPositionChange}
-              onSizeChange={this.onSizeChange}
-              onLoadFileError={this.onLoadFileError}
-              onLoadFile={this.onLoadFile}
-              deleteImage={this.onDeleteImage}
-              saveAvatar={this.saveAvatar}
-              maxSize={maxSize * 1000000} // megabytes to bytes
-              accept={accept}
-              image={image}
-              selectNewPhotoLabel={selectNewPhotoLabel}
-              orDropFileHereLabel={orDropFileHereLabel}
-              unknownTypeError={unknownTypeError}
-              maxSizeFileError={maxSizeFileError}
-              unknownError={unknownError}
-            />
-          </ModalDialog.Body>
-          <ModalDialog.Footer>
-            <Button
-              key="SaveBtn"
-              label={saveButtonLabel}
-              isLoading={saveButtonLoading}
-              primary={true}
-              size="big"
-              onClick={this.onSaveButtonClick}
-            />
-          </ModalDialog.Footer>
-        </ModalDialog>
-      :
-        <>
           <AvatarEditorBody
             ref={this.avatarEditorBodyRef}
             visible={this.state.visible}
@@ -194,27 +172,59 @@ class AvatarEditor extends React.Component {
             unknownTypeError={unknownTypeError}
             maxSizeFileError={maxSizeFileError}
             unknownError={unknownError}
-            useModalDialog={false}
           />
-          <StyledButtonsWrapper>
+        </ModalDialog.Body>
-            <Button
+        <ModalDialog.Footer>
-              key="SaveBtn"
+          <Button
-              label={saveButtonLabel}
+            key="SaveBtn"
-              isLoading={saveButtonLoading}
+            label={saveButtonLabel}
-              primary={true}
+            isLoading={saveButtonLoading}
-              size="big"
+            primary={true}
-              onClick={this.onSaveButtonClick}
+            size="big"
-            />
+            onClick={this.onSaveButtonClick}
-            <Button
+          />
-              key="CancelBtn"
+        </ModalDialog.Footer>
-              label={cancelButtonLabel}
+      </ModalDialog>
-              primary={false}
+    ) : (
-              size="big"
+      <>
-              onClick={this.onCancelButtonClick}
+        <AvatarEditorBody
-            />
+          ref={this.avatarEditorBodyRef}
-          </StyledButtonsWrapper>
+          visible={this.state.visible}
-          
+          onImageChange={this.onImageChange}
-        </>
+          onPositionChange={this.onPositionChange}
+          onSizeChange={this.onSizeChange}
+          onLoadFileError={this.onLoadFileError}
+          onLoadFile={this.onLoadFile}
+          deleteImage={this.onDeleteImage}
+          saveAvatar={this.saveAvatar}
+          maxSize={maxSize * 1000000} // megabytes to bytes
+          accept={accept}
+          image={image}
+          selectNewPhotoLabel={selectNewPhotoLabel}
+          orDropFileHereLabel={orDropFileHereLabel}
+          unknownTypeError={unknownTypeError}
+          maxSizeFileError={maxSizeFileError}
+          unknownError={unknownError}
+          useModalDialog={false}
+        />
+        <StyledButtonsWrapper>
+          <Button
+            key="SaveBtn"
+            label={saveButtonLabel}
+            isLoading={saveButtonLoading}
+            primary={true}
+            size="big"
+            onClick={this.onSaveButtonClick}
+          />
+          <Button
+            key="CancelBtn"
+            label={cancelButtonLabel}
+            primary={false}
+            size="big"
+            onClick={this.onCancelButtonClick}
+          />
+        </StyledButtonsWrapper>
+      </>
     );
   }
 }

web/ASC.Web.Components/src/components/avatar-editor/sub-components/avatar-editor-body.js

@@ -349,7 +349,9 @@ class AvatarEditorBody extends React.Component {
         fetch(data)
           .then(res => res.blob())
           .then(blob => {
-            const file = new File([blob], "File name", { type: "image/jpg" });
+            const file = new File([blob], "File name", {
+              type: "image/jpg"
+            });
             _this.props.onLoadFile(file);
           });
       };
@@ -440,6 +442,7 @@ class AvatarEditorBody extends React.Component {
   };
 
   onWheel = e => {
+    if  (!this.setEditorRef.current) return;
     e = e || window.event;
     const delta = e.deltaY || e.detail || e.wheelDelta;
     let scale =
@@ -506,10 +509,11 @@ class AvatarEditorBody extends React.Component {
     });
   };
 
-  onSaveImage(callback) {
+  onSaveImage() {
     var img = new Image();
     var _this = this;
     img.src = this.state.image;
+    if (!this.state.image) _this.props.onLoadFile(null);
     img.onload = () => {
       var canvas = document.createElement("canvas");
       canvas.setAttribute("width", img.height);
@@ -525,8 +529,7 @@ class AvatarEditorBody extends React.Component {
         .then(res => res.blob())
         .then(blob => {
           const file = new File([blob], "File name", { type: "image/jpg" });
-          _this.props.onLoadFile(file, callback);
+          _this.props.onLoadFile(file, true);
-          //callback(file);
         });
     };
   }
@@ -575,7 +578,7 @@ class AvatarEditorBody extends React.Component {
     let editorWidth = 174;
     let editorHeight = 174;
 
-    if(!useModalDialog) {
+    if (!useModalDialog) {
       editorWidth = 270;
       editorHeight = 270;
     }