Web: People/Client: Fix rotation bug, fixed Wheel empty image bug, fixed twitching of the picture when saving, refactoring (remove callback using)
This commit is contained in:
parent
98fef4e364
commit
f5592333c8
@ -77,20 +77,20 @@ class AvatarEditorPage extends React.PureComponent {
|
|||||||
toggleAvatarEditor(false);
|
toggleAvatarEditor(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
onSaveAvatar = (isUpdate, result) => {
|
onSaveAvatar = (isUpdate, result, avatar) => {
|
||||||
this.setState({ isLoading: true });
|
this.setState({ isLoading: true });
|
||||||
const { profile } = this.props;
|
const { profile } = this.props;
|
||||||
if (isUpdate) {
|
if (isUpdate) {
|
||||||
createThumbnailsAvatar(profile.id, {
|
createThumbnailsAvatar(profile.id, {
|
||||||
x: Math.round(
|
x: Math.round(
|
||||||
result.x * this.state.avatar.defaultWidth - result.width / 2
|
result.x * avatar.defaultWidth - result.width / 2
|
||||||
),
|
),
|
||||||
y: Math.round(
|
y: Math.round(
|
||||||
result.y * this.state.avatar.defaultHeight - result.height / 2
|
result.y * avatar.defaultHeight - result.height / 2
|
||||||
),
|
),
|
||||||
width: result.width,
|
width: result.width,
|
||||||
height: result.height,
|
height: result.height,
|
||||||
tmpFile: this.state.avatar.tmpFile,
|
tmpFile: avatar.tmpFile,
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
toastr.success(this.props.t("ChangesSavedSuccessfully"));
|
toastr.success(this.props.t("ChangesSavedSuccessfully"));
|
||||||
@ -100,8 +100,12 @@ class AvatarEditorPage extends React.PureComponent {
|
|||||||
toastr.error(error);
|
toastr.error(error);
|
||||||
this.setState({ isLoading: false });
|
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 {
|
} else {
|
||||||
deleteAvatar(profile.id)
|
deleteAvatar(profile.id)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
@ -114,28 +118,39 @@ class AvatarEditorPage extends React.PureComponent {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
onLoadFileAvatar = (file, callback) => {
|
onLoadFileAvatar = (file, fileData) => {
|
||||||
const { profile } = this.props;
|
const { profile } = this.props;
|
||||||
|
|
||||||
this.setState({ isLoading: true });
|
this.setState({ isLoading: true });
|
||||||
let data = new FormData();
|
let data = new FormData();
|
||||||
let _this = this;
|
let _this = this;
|
||||||
|
|
||||||
|
if(!file) {
|
||||||
|
_this.onSaveAvatar(false)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
data.append("file", file);
|
data.append("file", file);
|
||||||
data.append("Autosave", false);
|
data.append("Autosave", false);
|
||||||
loadAvatar(profile.id, data)
|
loadAvatar(profile.id, data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
img.onload = function () {
|
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 });
|
_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;
|
img.src = response.data;
|
||||||
})
|
})
|
||||||
|
@ -6,12 +6,12 @@ import AvatarEditorBody from "./sub-components/avatar-editor-body";
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
|
||||||
const StyledButtonsWrapper = styled.div`
|
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 {
|
class AvatarEditor extends React.Component {
|
||||||
@ -59,21 +59,32 @@ class AvatarEditor extends React.Component {
|
|||||||
this.props.onLoadFileError(error);
|
this.props.onLoadFileError(error);
|
||||||
};
|
};
|
||||||
|
|
||||||
onLoadFile = (file, callback) => {
|
onLoadFile = (file, needSave) => {
|
||||||
if (typeof this.props.onLoadFile === "function")
|
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 });
|
if (!this.state.existImage) this.setState({ existImage: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
onSaveButtonClick = () => {
|
onSaveButtonClick = () => {
|
||||||
//this.avatarEditorBodyRef.current.onSaveImage(this.saveAvatar);
|
this.avatarEditorBodyRef.current.onSaveImage();
|
||||||
this.saveAvatar();
|
//this.saveAvatar();
|
||||||
};
|
};;
|
||||||
|
|
||||||
onCancelButtonClick = () => {
|
onCancelButtonClick = () => {
|
||||||
this.props.onCancel();
|
this.props.onCancel();
|
||||||
}
|
};
|
||||||
|
|
||||||
saveAvatar = () => {
|
saveAvatar = () => {
|
||||||
if (!this.state.existImage) {
|
if (!this.state.existImage) {
|
||||||
@ -128,54 +139,21 @@ class AvatarEditor extends React.Component {
|
|||||||
cancelButtonLabel
|
cancelButtonLabel
|
||||||
} = this.props;
|
} = 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
|
<AvatarEditorBody
|
||||||
ref={this.avatarEditorBodyRef}
|
ref={this.avatarEditorBodyRef}
|
||||||
visible={this.state.visible}
|
visible={this.state.visible}
|
||||||
@ -194,27 +172,59 @@ class AvatarEditor extends React.Component {
|
|||||||
unknownTypeError={unknownTypeError}
|
unknownTypeError={unknownTypeError}
|
||||||
maxSizeFileError={maxSizeFileError}
|
maxSizeFileError={maxSizeFileError}
|
||||||
unknownError={unknownError}
|
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>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -349,7 +349,9 @@ class AvatarEditorBody extends React.Component {
|
|||||||
fetch(data)
|
fetch(data)
|
||||||
.then(res => res.blob())
|
.then(res => res.blob())
|
||||||
.then(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);
|
_this.props.onLoadFile(file);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -440,6 +442,7 @@ class AvatarEditorBody extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onWheel = e => {
|
onWheel = e => {
|
||||||
|
if (!this.setEditorRef.current) return;
|
||||||
e = e || window.event;
|
e = e || window.event;
|
||||||
const delta = e.deltaY || e.detail || e.wheelDelta;
|
const delta = e.deltaY || e.detail || e.wheelDelta;
|
||||||
let scale =
|
let scale =
|
||||||
@ -506,10 +509,11 @@ class AvatarEditorBody extends React.Component {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
onSaveImage(callback) {
|
onSaveImage() {
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
var _this = this;
|
var _this = this;
|
||||||
img.src = this.state.image;
|
img.src = this.state.image;
|
||||||
|
if (!this.state.image) _this.props.onLoadFile(null);
|
||||||
img.onload = () => {
|
img.onload = () => {
|
||||||
var canvas = document.createElement("canvas");
|
var canvas = document.createElement("canvas");
|
||||||
canvas.setAttribute("width", img.height);
|
canvas.setAttribute("width", img.height);
|
||||||
@ -525,8 +529,7 @@ class AvatarEditorBody extends React.Component {
|
|||||||
.then(res => res.blob())
|
.then(res => res.blob())
|
||||||
.then(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, callback);
|
_this.props.onLoadFile(file, true);
|
||||||
//callback(file);
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -575,7 +578,7 @@ class AvatarEditorBody extends React.Component {
|
|||||||
let editorWidth = 174;
|
let editorWidth = 174;
|
||||||
let editorHeight = 174;
|
let editorHeight = 174;
|
||||||
|
|
||||||
if(!useModalDialog) {
|
if (!useModalDialog) {
|
||||||
editorWidth = 270;
|
editorWidth = 270;
|
||||||
editorHeight = 270;
|
editorHeight = 270;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user