Added icon preview for watermark.

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ImageWatermark.js

@@ -52,14 +52,19 @@
 
 import { useState, useRef, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { ReactSVG } from "react-svg";
+
 import { Text } from "@docspace/shared/components/text";
 import { ComboBox } from "@docspace/shared/components/combobox";
 import { inject, observer } from "mobx-react";
 import { StyledWatermark } from "./StyledComponent";
-
 import { DropDownItem } from "@docspace/shared/components/drop-down-item";
 import { FileInput } from "@docspace/shared/components/file-input";
 import { imageProcessing } from "@docspace/shared/utils/common";
+import { Button } from "@docspace/shared/components/button";
+
+import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg";
+import { ButtonDelete } from "@docspace/shared/components/image-editor";
 
 const scaleOptions = [
   { key: 100, label: "100" },
@@ -98,10 +103,12 @@ const ImageWatermark = ({
   isEdit,
   setWatermarks,
   initialWatermarksSettings,
+  imageUrl,
 }) => {
   const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
 
   const initialInfo = useRef(null);
+  const previewRef = useRef(null);
 
   if (initialInfo.current === null) {
     initialInfo.current = {
@@ -113,25 +120,42 @@ const ImageWatermark = ({
   const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    if (!isEdit) return;
+    if (isEdit) return;
 
     setWatermarks({
       rotate: initialInfoRef.rotate.key,
+      scale: initialInfoRef.scale.key,
       additions: 0,
       isImage: true,
       enabled: true,
     });
   }, []);
+  useEffect(() => {
+    return () => {
+      URL.revokeObjectURL(previewRef.current);
+      previewRef.current = null;
+    };
+  }, []);
 
   const [selectedRotate, setRotate] = useState(initialInfoRef.rotate);
   const [selectedScale, setScale] = useState(initialInfoRef.scale);
+  const [selectedImageUrl, setImageUrl] = useState(imageUrl);
 
   const onInput = (file) => {
-    console.log("onInput", file);
-
     imageProcessing(file)
       .then((f) => {
-        if (f instanceof File) setWatermarks({ image: f });
+        if (f instanceof File) {
+          setWatermarks({ image: f });
+
+          const img = new Image();
+
+          previewRef.current = URL.createObjectURL(f);
+          img.src = previewRef.current;
+
+          img.onload = () => {
+            setImageUrl(previewRef.current);
+          };
+        }
       })
       .catch((error) => {
         if (
@@ -155,6 +179,16 @@ const ImageWatermark = ({
     setWatermarks({ rotate: item.key });
   };
 
+  const onButtonClick = () => {
+    if (previewRef.current) {
+      URL.revokeObjectURL(previewRef.current);
+      previewRef.current = null;
+    }
+
+    setWatermarks({ image: null });
+    setImageUrl("");
+  };
+
   const rotateItems = () => {
     const items = rotateOptions.map((item) => {
       return (
@@ -194,8 +228,18 @@ const ImageWatermark = ({
   // };
 
   return (
-    <StyledWatermark>
+    <StyledWatermark
-      <FileInput accept={["image/png", "image/jpeg"]} onInput={onInput} scale />
+      rotate={selectedRotate.key}
+      scale={selectedScale.key / 100}
+      mainHeight={50}
+    >
+      {!selectedImageUrl && (
+        <FileInput
+          accept={["image/png", "image/jpeg"]}
+          onInput={onInput}
+          scale
+        />
+      )}
 
       {/* <FilesSelectorInput
         onSelectFile={onSelectFile}
@@ -203,50 +247,70 @@ const ImageWatermark = ({
         isSelect
         scale
       /> */}
-      <div className="options-wrapper">
-        <div>
-          <Text className="watermark-title" fontWeight={600} lineHeight="20px">
-            {t("Scale")}
-          </Text>
-          <ComboBox
-            onSelect={onScaleChange}
-            scaled
-            scaledOptions
-            advancedOptions={scaleItems()}
-            options={[]}
-            selectedOption={{}}
-          >
-            <div>{selectedScale.label}&#37;</div>
-          </ComboBox>
-        </div>
-        <div>
-          <Text className="watermark-title" fontWeight={600} lineHeight="20px">
-            {t("Rotate")}
-          </Text>
 
-          <ComboBox
+      {selectedImageUrl && (
-            onSelect={onRotateChange}
+        <div className="image-wrapper">
-            scaled
+          <div className="HELLO-2">
-            scaledOptions
+            <div className="HELLO">
-            advancedOptions={rotateItems()}
+              <img
-            options={[]}
+                alt="logo"
-            selectedOption={{}}
+                src={selectedImageUrl}
-            advancedOptionsCount={rotateOptions.length}
+                className="header-logo-icon"
-            fillIcon={false}
+              />
-          >
+            </div>
-            <div>{selectedRotate.label}&deg;</div>
+            <ButtonDelete t={t} onClick={onButtonClick} />
-          </ComboBox>
+          </div>
+
+          <div className="options-wrapper">
+            <div>
+              <Text fontWeight={600} lineHeight="20px">
+                {t("Scale")}
+              </Text>
+              <ComboBox
+                onSelect={onScaleChange}
+                scaled
+                scaledOptions
+                advancedOptions={scaleItems()}
+                options={[]}
+                selectedOption={{}}
+              >
+                <div>{selectedScale.label}&#37;</div>
+              </ComboBox>
+            </div>
+            <div>
+              <Text fontWeight={600} lineHeight="20px">
+                {t("Rotate")}
+              </Text>
+
+              <ComboBox
+                onSelect={onRotateChange}
+                scaled
+                scaledOptions
+                advancedOptions={rotateItems()}
+                options={[]}
+                selectedOption={{}}
+                advancedOptionsCount={rotateOptions.length}
+                fillIcon={false}
+              >
+                <div>{selectedRotate.label}&deg;</div>
+              </ComboBox>
+            </div>
+          </div>
         </div>
-      </div>
+      )}
     </StyledWatermark>
   );
 };
 
 export default inject(({ createEditRoomStore }) => {
-  const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
+  const { setWatermarks, initialWatermarksSettings, watermarksSettings } =
+    createEditRoomStore;
 
+  const { imageUrl } = watermarksSettings;
+  console.log("watermarksSettings", watermarksSettings);
   return {
     setWatermarks,
     initialWatermarksSettings,
+    imageUrl,
   };
 })(observer(ImageWatermark));

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/StyledComponent.js

@@ -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 styled from "styled-components";
+import styled, { css } from "styled-components";
 
 const StyledWatermark = styled.div`
   margin-top: 16px;
@@ -41,9 +41,36 @@ const StyledWatermark = styled.div`
 
   .options-wrapper {
     display: grid;
-    grid-template-columns: minmax(216px, 1fr) minmax(216px, 1fr);
+    grid-template-rows: 56px 56px;
     gap: 16px;
   }
+
+  .image-wrapper {
+    display: grid;
+    grid-template-columns: 216px auto;
+    gap: 16px;
+
+    .HELLO {
+      width: 216px;
+      height: 216px;
+      border: 1px solid #eceef1;
+
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        width: 88%;
+        height: 88%;
+        transform: ${(props) =>
+          `rotate(${props.rotate}deg) scale(${props.scale})`};
+
+        opacity: 0.4;
+        margin: auto;
+      }
+    }
+  }
 `;
 const StyledBody = styled.div`
   .types-content {

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js

@@ -136,7 +136,7 @@ const ViewerInfoWatermark = ({
   const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    if (!isEdit) return;
+    if (isEdit) return;
 
     setWatermarks({
       rotate: initialInfoRef.rotate.key,

packages/client/src/store/CreateEditRoomStore.js

@@ -146,6 +146,8 @@ class CreateEditRoomStore {
     }
 
     const watermarkImage = this.watermarksSettings.image;
+    const watermarksSettings = this.watermarksSettings;
+
     const getMeta = (url, onSetInfo) => {
       //url for this.watermarksSettings.image.viewUrl
       const img = new Image();
@@ -174,11 +176,11 @@ class CreateEditRoomStore {
       }
 
       return setWatermarkSettings(room.id, {
-        enabled: this.watermarksSettings.enabled,
+        enabled: watermarksSettings.enabled,
-        imageScale: this.watermarksSettings.imageScale,
+        imageScale: watermarksSettings.imageScale,
-        rotate: this.watermarksSettings.rotate,
+        rotate: watermarksSettings.rotate,
         imageUrl: response.data,
-        // imageId: this.watermarksSettings.image.id,
+        // imageId: watermarksSettings.image.id,
         imageWidth: img.naturalWidth,
         imageHeight: img.naturalHeight,
       });

packages/shared/components/image-editor/ButtonDelete/index.tsx

@@ -0,0 +1,123 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// 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
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// 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 { ReactSVG } from "react-svg";
+import styled from "styled-components";
+
+import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
+import { TTranslation } from "../../../types";
+
+const StyledButton = styled.div`
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 0;
+  background: ${(props) =>
+    props.theme.createEditRoomDialog.iconCropper.deleteButton.background};
+  border: 1px solid
+    ${(props) =>
+      props.theme.createEditRoomDialog.iconCropper.deleteButton.borderColor};
+  border-radius: 3px;
+  margin-bottom: 12px;
+
+  transition: all 0.2s ease;
+  &:hover {
+    background: ${(props) =>
+      props.theme.createEditRoomDialog.iconCropper.deleteButton
+        .hoverBackground};
+    border: 1px solid
+      ${(props) =>
+        props.theme.createEditRoomDialog.iconCropper.deleteButton
+          .hoverBorderColor};
+  }
+
+  &-text {
+    user-select: none;
+    font-weight: 600;
+    line-height: 20px;
+    color: ${(props) =>
+      props.theme.createEditRoomDialog.iconCropper.deleteButton.color};
+  }
+
+  svg {
+    path {
+      fill: ${(props) =>
+        props.theme.createEditRoomDialog.iconCropper.deleteButton.iconColor};
+    }
+  }
+`;
+
+const ButtonDelete = ({
+  onClick,
+  t,
+}: {
+  onClick: (e: React.MouseEvent) => void;
+  t: TTranslation;
+}) => {
+  return (
+    <StyledButton
+      className="icon_cropper-delete_button"
+      onClick={onClick}
+      title={t("Common:Delete")}
+    >
+      <ReactSVG src={TrashReactSvgUrl} />
+      <div className="icon_cropper-delete_button-text">
+        {t("Common:Delete")}
+      </div>
+    </StyledButton>
+  );
+};
+
+export default ButtonDelete;

packages/shared/components/image-editor/ImageCropper/index.tsx

@@ -32,12 +32,12 @@ import AvatarEditor, { Position } from "react-avatar-editor";
 import ZoomMinusReactSvgUrl from "PUBLIC_DIR/images/zoom-minus.react.svg?url";
 import ZoomPlusReactSvgUrl from "PUBLIC_DIR/images/zoom-plus.react.svg?url";
 import IconCropperGridSvgUrl from "PUBLIC_DIR/images/icon-cropper-grid.svg?url";
-import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
 
 import { Slider } from "../../slider";
 import { IconButton } from "../../icon-button";
 import { StyledImageCropper } from "../ImageEditor.styled";
 import { ImageCropperProps } from "../ImageEditor.types";
+import ButtonDelete from "../ButtonDelete";
 
 const ImageCropper = ({
   t,
@@ -132,16 +132,8 @@ const ImageCropper = ({
           crossOrigin="anonymous"
         />
       </div>
-      <div
+
-        className="icon_cropper-delete_button"
+      <ButtonDelete onClick={handleDeleteImage} t={t} />
-        onClick={handleDeleteImage}
-        title={t("Common:Delete")}
-      >
-        <ReactSVG src={TrashReactSvgUrl} />
-        <div className="icon_cropper-delete_button-text">
-          {t("Common:Delete")}
-        </div>
-      </div>
 
       {typeof uploadedFile !== "string" &&
         uploadedFile?.name &&

packages/shared/components/image-editor/ImageEditor.styled.ts

@@ -63,50 +63,6 @@ const StyledImageCropper = styled.div<{ disableImageRescaling?: boolean }>`
       `};
   }
 
-  .icon_cropper-delete_button {
-    cursor: pointer;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    width: 100%;
-    padding: 6px 0;
-    background: ${(props) =>
-      props.theme.createEditRoomDialog.iconCropper.deleteButton.background};
-    border: 1px solid
-      ${(props) =>
-        props.theme.createEditRoomDialog.iconCropper.deleteButton.borderColor};
-    border-radius: 3px;
-    margin-bottom: 12px;
-
-    transition: all 0.2s ease;
-    &:hover {
-      background: ${(props) =>
-        props.theme.createEditRoomDialog.iconCropper.deleteButton
-          .hoverBackground};
-      border: 1px solid
-        ${(props) =>
-          props.theme.createEditRoomDialog.iconCropper.deleteButton
-            .hoverBorderColor};
-    }
-
-    &-text {
-      user-select: none;
-      font-weight: 600;
-      line-height: 20px;
-      color: ${(props) =>
-        props.theme.createEditRoomDialog.iconCropper.deleteButton.color};
-    }
-
-    svg {
-      path {
-        fill: ${(props) =>
-          props.theme.createEditRoomDialog.iconCropper.deleteButton.iconColor};
-      }
-    }
-  }
-
   .icon_cropper-zoom-container {
     display: flex;
     flex-direction: row;

packages/shared/components/image-editor/index.tsx

@@ -27,6 +27,7 @@
 import React from "react";
 import Dropzone from "./Dropzone";
 import ImageCropper from "./ImageCropper";
+import ButtonDelete from "./ButtonDelete";
 import { ImageEditorProps } from "./ImageEditor.types";
 import AvatarPreview from "./AvatarPreview";
 
@@ -75,4 +76,4 @@ const ImageEditor = ({
   );
 };
 
-export { ImageEditor, AvatarPreview, Dropzone };
+export { ImageEditor, AvatarPreview, Dropzone, ButtonDelete };