IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alexey Kostenko 2020-10-08 09:55:20 +03:00
parent 98fef4e364
commit f5592333c8
3 changed files with 129 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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(() => this.props.fetchProfile(profile.id));
.then(() => {
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 = {
_this.setState({ isLoading: false });
if (fileData) {
fileData.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.existImage) {
_this.onSaveAvatar(fileData.existImage) // saving empty avatar
} else{
_this.onSaveAvatar(fileData.existImage, fileData.position, fileData.avatar)
}
}
};
img.src = response.data;
})

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

@ -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.saveAvatar();
};
this.avatarEditorBodyRef.current.onSaveImage();
//this.saveAvatar();
};;
onCancelButtonClick = () => {
this.props.onCancel();
}
};
saveAvatar = () => {
if (!this.state.existImage) {
@ -128,8 +139,8 @@ class AvatarEditor extends React.Component {
cancelButtonLabel
} = this.props;
return (
useModalDialog ?
return useModalDialog ? (
<ModalDialog
visible={this.state.visible}
displayType={displayType}
@ -174,7 +185,7 @@ class AvatarEditor extends React.Component {
/>
</ModalDialog.Footer>
</ModalDialog>
:
) : (
<>
<AvatarEditorBody
ref={this.avatarEditorBodyRef}
@ -213,7 +224,6 @@ class AvatarEditor extends React.Component {
onClick={this.onCancelButtonClick}
/>
</StyledButtonsWrapper>
</>
);
}

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

@ -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);
//callback(file);
_this.props.onLoadFile(file, true);
});
};
}