Refactoring.
This commit is contained in:
parent
6fb0edff91
commit
b73a9526d2
@ -58,9 +58,8 @@ import { inject, observer } from "mobx-react";
|
||||
import { StyledWatermark } from "./StyledComponent";
|
||||
|
||||
import { DropDownItem } from "@docspace/shared/components/drop-down-item";
|
||||
|
||||
import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
|
||||
import { FilesSelectorFilterTypes } from "@docspace/shared/enums";
|
||||
import { FileInput } from "@docspace/shared/components/file-input";
|
||||
import { imageProcessing } from "@docspace/shared/utils/common";
|
||||
|
||||
const scaleOptions = [
|
||||
{ key: 100, label: "100" },
|
||||
@ -108,49 +107,42 @@ const ImageWatermark = ({
|
||||
initialInfo.current = {
|
||||
rotate: getInitialRotate(initialWatermarksSettings?.rotate, isEdit),
|
||||
scale: getInitialScale(initialWatermarksSettings?.imageScale, isEdit),
|
||||
url: initialWatermarksSettings?.imageUrl ?? "",
|
||||
};
|
||||
}
|
||||
|
||||
const initialInfoRef = initialInfo.current;
|
||||
|
||||
useEffect(() => {
|
||||
setWatermarks(
|
||||
{
|
||||
rotate: initialInfoRef.rotate.key,
|
||||
additions: 0,
|
||||
isImage: true,
|
||||
enabled: true,
|
||||
...(initialWatermarksSettings && {
|
||||
imageHeight: initialWatermarksSettings.imageHeight,
|
||||
imageScale: initialWatermarksSettings.imageScale,
|
||||
imageWidth: initialWatermarksSettings.imageWidth,
|
||||
imageUrl: initialWatermarksSettings.imageUrl,
|
||||
}),
|
||||
},
|
||||
true,
|
||||
);
|
||||
if (!isEdit) return;
|
||||
|
||||
setWatermarks({
|
||||
rotate: initialInfoRef.rotate.key,
|
||||
additions: 0,
|
||||
isImage: true,
|
||||
enabled: true,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const [selectedRotate, setRotate] = useState(initialInfoRef.rotate);
|
||||
const [selectedScale, setScale] = useState(initialInfoRef.scale);
|
||||
|
||||
// const onInput = (file) => {
|
||||
// console.log("onInput", file);
|
||||
const onInput = (file) => {
|
||||
console.log("onInput", file);
|
||||
|
||||
imageProcessing(file)
|
||||
.then((f) => {
|
||||
if (f instanceof File) setWatermarks({ image: f });
|
||||
})
|
||||
.catch((error) => {
|
||||
if (
|
||||
error instanceof Error &&
|
||||
error.message === "recursion depth exceeded"
|
||||
) {
|
||||
toastr.error(t("Common:SizeImageLarge"));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// imageProcessing(file)
|
||||
// .then((f) => {
|
||||
// if (f instanceof File) setWatermarks({ image: f });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// if (
|
||||
// error instanceof Error &&
|
||||
// error.message === "recursion depth exceeded"
|
||||
// ) {
|
||||
// toastr.error(t("Common:SizeImageLarge"));
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
const onScaleChange = (item) => {
|
||||
setScale(item);
|
||||
|
||||
@ -197,19 +189,20 @@ const ImageWatermark = ({
|
||||
return <div style={{ display: "contents" }}>{items}</div>;
|
||||
};
|
||||
|
||||
const onSelectFile = (fileInfo) => {
|
||||
setWatermarks({ image: fileInfo });
|
||||
};
|
||||
// const onSelectFile = (fileInfo) => {
|
||||
// setWatermarks({ image: fileInfo });
|
||||
// };
|
||||
|
||||
return (
|
||||
<StyledWatermark>
|
||||
{/* <FileInput accept={["image/png", "image/jpeg"]} onInput={onInput} scale /> */}
|
||||
<FilesSelectorInput
|
||||
<FileInput accept={["image/png", "image/jpeg"]} onInput={onInput} scale />
|
||||
|
||||
{/* <FilesSelectorInput
|
||||
onSelectFile={onSelectFile}
|
||||
filterParam={FilesSelectorFilterTypes.IMG}
|
||||
isSelect
|
||||
scale
|
||||
/>
|
||||
/> */}
|
||||
<div className="options-wrapper">
|
||||
<div>
|
||||
<Text className="watermark-title" fontWeight={600} lineHeight="20px">
|
||||
@ -251,6 +244,7 @@ const ImageWatermark = ({
|
||||
|
||||
export default inject(({ createEditRoomStore }) => {
|
||||
const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
|
||||
|
||||
return {
|
||||
setWatermarks,
|
||||
initialWatermarksSettings,
|
||||
|
@ -136,20 +136,18 @@ const ViewerInfoWatermark = ({
|
||||
const initialInfoRef = initialInfo.current;
|
||||
|
||||
useEffect(() => {
|
||||
setWatermarks(
|
||||
{
|
||||
rotate: initialInfoRef.rotate.key,
|
||||
text: initialInfoRef.text,
|
||||
additions:
|
||||
initialWatermarksSettings?.additions || WatermarkAdditions.UserName,
|
||||
isImage: false,
|
||||
enabled: true,
|
||||
imageWidth: 0,
|
||||
imageHeight: 0,
|
||||
imageScale: 0,
|
||||
},
|
||||
true,
|
||||
);
|
||||
if (!isEdit) return;
|
||||
|
||||
setWatermarks({
|
||||
rotate: initialInfoRef.rotate.key,
|
||||
additions: WatermarkAdditions.UserName,
|
||||
isImage: false,
|
||||
enabled: true,
|
||||
image: "",
|
||||
imageWidth: 0,
|
||||
imageHeight: 0,
|
||||
imageScale: 0,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const [selectedPosition, setSelectedPosition] = useState(
|
||||
@ -227,9 +225,9 @@ const ViewerInfoWatermark = ({
|
||||
|
||||
export default inject(({ createEditRoomStore }) => {
|
||||
const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
|
||||
|
||||
return {
|
||||
setWatermarks,
|
||||
|
||||
initialWatermarksSettings,
|
||||
};
|
||||
})(observer(ViewerInfoWatermark));
|
||||
|
@ -60,14 +60,11 @@ const WatermarkBlock = ({
|
||||
setWatermarks,
|
||||
isEdit = false,
|
||||
isWatermarks = false,
|
||||
initialWatermarksSettings,
|
||||
resetWatermarks,
|
||||
t,
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
setWatermarks(
|
||||
isEdit ? initialWatermarksSettings : { enabled: watermarksChecked },
|
||||
true,
|
||||
);
|
||||
return () => resetWatermarks();
|
||||
}, []);
|
||||
|
||||
const [watermarksChecked, setWatermarksChecked] = useState(
|
||||
@ -94,10 +91,12 @@ const WatermarkBlock = ({
|
||||
};
|
||||
|
||||
export default inject(({ createEditRoomStore }) => {
|
||||
const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
|
||||
const { setWatermarks, initialWatermarksSettings, resetWatermarks } =
|
||||
createEditRoomStore;
|
||||
|
||||
return {
|
||||
setWatermarks,
|
||||
isWatermarks: initialWatermarksSettings?.enabled,
|
||||
initialWatermarksSettings,
|
||||
resetWatermarks,
|
||||
};
|
||||
})(observer(WatermarkBlock));
|
||||
|
@ -24,7 +24,7 @@
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
@ -61,10 +61,6 @@ const Watermarks = ({ isEdit, setWatermarks, initialWatermarksSettings }) => {
|
||||
getOptionType(initialWatermarksSettings?.additions, isEdit),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
!isEdit && setWatermarks({ isImage: type === imageWatermark });
|
||||
}, []);
|
||||
|
||||
const onSelectType = (e) => {
|
||||
const { value } = e.target;
|
||||
|
||||
|
@ -49,7 +49,8 @@ class CreateEditRoomStore {
|
||||
settingsStore = null;
|
||||
infoPanelStore = null;
|
||||
currentQuotaStore = null;
|
||||
watermarksSettings = null;
|
||||
watermarksSettings = {};
|
||||
initialWatermarksSettings = null;
|
||||
isImageType = false;
|
||||
|
||||
constructor(
|
||||
@ -97,26 +98,24 @@ class CreateEditRoomStore {
|
||||
};
|
||||
|
||||
setInitialWatermarks = (watermarksSettings) => {
|
||||
if (!watermarksSettings) {
|
||||
this.initialWatermarksSettings = { enabled: false };
|
||||
this.initialWatermarksSettings = !watermarksSettings
|
||||
? { enabled: false }
|
||||
: watermarksSettings;
|
||||
|
||||
return;
|
||||
}
|
||||
this.initialWatermarksSettings.isImage =
|
||||
!!this.initialWatermarksSettings.imageUrl;
|
||||
|
||||
this.initialWatermarksSettings = watermarksSettings;
|
||||
this.initialWatermarksSettings.isImage = !!watermarksSettings.imageUrl;
|
||||
this.setWatermarks(this.initialWatermarksSettings);
|
||||
};
|
||||
|
||||
setWatermarks = (watermarksSettings, isReplacing) => {
|
||||
if (isReplacing) {
|
||||
this.watermarksSettings = watermarksSettings;
|
||||
return;
|
||||
setWatermarks = (object) => {
|
||||
for (const [key, value] of Object.entries(object)) {
|
||||
this.watermarksSettings[key] = value;
|
||||
}
|
||||
};
|
||||
|
||||
this.watermarksSettings = {
|
||||
...this.watermarksSettings,
|
||||
...watermarksSettings,
|
||||
};
|
||||
resetWatermarks = () => {
|
||||
this.watermarksSettings = {};
|
||||
};
|
||||
|
||||
isEqualWatermarkChanges = () => {
|
||||
@ -146,31 +145,40 @@ class CreateEditRoomStore {
|
||||
});
|
||||
}
|
||||
|
||||
const watermarkImage = this.watermarksSettings.image;
|
||||
const getMeta = (url, onSetInfo) => {
|
||||
//url for this.watermarksSettings.image.viewUrl
|
||||
const img = new Image();
|
||||
const imgUrl = url ?? URL.createObjectURL(watermarkImage);
|
||||
img.src = imgUrl;
|
||||
|
||||
img.onload = () => {
|
||||
URL.revokeObjectURL(imgUrl);
|
||||
onSetInfo(null, img);
|
||||
};
|
||||
|
||||
img.onload = () => onSetInfo(null, img);
|
||||
img.onerror = (err) => onSetInfo(err);
|
||||
img.src = url;
|
||||
};
|
||||
|
||||
//TODO: Return the decision when it will be possible to upload images.
|
||||
//const { uploadRoomLogo } = this.filesStore;
|
||||
// const watermarkImage = this.watermarksSettings.image;
|
||||
// const uploadWatermarkData = new FormData();
|
||||
// uploadWatermarkData.append(0, watermarkImage);
|
||||
// const response = await uploadRoomLogo(uploadWatermarkData);
|
||||
const { uploadRoomLogo } = this.filesStore;
|
||||
|
||||
const imageInfo = this.watermarksSettings.image;
|
||||
const uploadWatermarkData = new FormData();
|
||||
uploadWatermarkData.append(0, watermarkImage);
|
||||
|
||||
getMeta(imageInfo.viewUrl, (err, img) => {
|
||||
if (err) return;
|
||||
const response = await uploadRoomLogo(uploadWatermarkData);
|
||||
|
||||
setWatermarkSettings(room.id, {
|
||||
getMeta(null, (err, img) => {
|
||||
if (err) {
|
||||
toastr.error(err);
|
||||
return;
|
||||
}
|
||||
|
||||
return setWatermarkSettings(room.id, {
|
||||
enabled: this.watermarksSettings.enabled,
|
||||
imageScale: this.watermarksSettings.imageScale,
|
||||
rotate: this.watermarksSettings.rotate,
|
||||
imageId: imageInfo.id,
|
||||
imageUrl: response.data,
|
||||
// imageId: this.watermarksSettings.image.id,
|
||||
imageWidth: img.naturalWidth,
|
||||
imageHeight: img.naturalHeight,
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user