Web: Deleted document preview.

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

@@ -2,9 +2,9 @@ import styled from "styled-components";
 
 const StyledWatermark = styled.div`
   margin-top: 16px;
-  display: grid;
-  grid-gap: 24px;
-  grid-template-columns: minmax(214px, 324px) 1fr;
+  // display: grid;
+  // grid-gap: 24px;
+  //grid-template-columns: minmax(214px, 324px) 1fr;
 
   .watermark-title {
     margin: 16px 0 4px 0;

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

@@ -5,8 +5,6 @@ import TextInput from "@docspace/components/text-input";
 import ComboBox from "@docspace/components/combobox";
 import Text from "@docspace/components/text";
 import Checkbox from "@docspace/components/checkbox";
-import WMReactSvgUrl from "PUBLIC_DIR/images/WM.react.svg?url";
-import Watermark from "@docspace/common/components/Watermarks";
 import { StyledWatermark } from "./StyledComponent";
 
 const options = (t) => [
@@ -33,7 +31,7 @@ const TextWatermark = () => {
   const onCheckboxChange = () => {
     setIsChecked(!isChecked);
   };
-  const isHorizontal = selectedOption.key === "horizontal";
+
   return (
     <StyledWatermark>
       <div>
@@ -60,12 +58,6 @@ const TextWatermark = () => {
           isChecked={isChecked}
         />
       </div>
-      <Watermark
-        text={value}
-        image={WMReactSvgUrl}
-        rotate={isHorizontal ? 0 : -45}
-        isSemitransparent={isChecked}
-      />
     </StyledWatermark>
   );
 };

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

@@ -61,8 +61,9 @@ const ViewerInfoWatermark = () => {
         <TabContainer
           elements={dataTabs}
           onSelect={onSelect}
-          multiple
           withBodyScroll={false}
+          multiple
+          withBorder
         />
         <Text className="watermark-title" fontWeight={600} lineHeight="20px">
           {t("Position")}
@@ -75,7 +76,6 @@ const ViewerInfoWatermark = () => {
           isChecked={isChecked}
         />
       </div>
-      <div style={{ width: "100px", height: "140px" }}></div>
     </StyledWatermark>
   );
 };

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

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import RadioButtonGroup from "@docspace/components/radio-button-group";
 
 import TextWatermark from "./Text";
+import ViewerInfoWatermark from "./ViewerInfo";
 import { StyledBody } from "./StyledComponent";
 
 const textWatermark = "text",
@@ -49,6 +50,7 @@ const Watermarks = () => {
       />
 
       {type === textWatermark && <TextWatermark />}
+      {type === viewerInfoWatermark && <ViewerInfoWatermark />}
     </StyledBody>
   );
 };

packages/common/components/Watermarks/index.js

@@ -1,117 +0,0 @@
-import { useEffect } from "react";
-
-const Watermark = ({
-  text,
-  rotate,
-  image,
-  color,
-
-  isSemitransparent,
-
-  children,
-}) => {
-  const setCtxText = (ctx) => {
-    const getColor = () => {
-      if (color)
-        return Array.isArray(color)
-          ? `rgb(${color[0]}, ${color[1]}, ${color[2]}, 1)`
-          : color;
-
-      if (isSemitransparent) return "rgba(223, 226, 227, 1)";
-
-      return "rgba(208, 213, 218, 1)";
-    };
-
-    ctx.fillStyle = getColor();
-    ctx.textAlign = "center";
-    ctx.font = `${13}px Arial`;
-  };
-
-  const setCtxCenteredText = (imgContent, ctx) => {
-    ctx.translate(imgContent.width / 2, imgContent.height / 2);
-  };
-
-  const setCtxRotate = (ctx) => {
-    const angle = (Math.PI / 180) * Number(rotate);
-    ctx.rotate(angle);
-  };
-
-  const setCtxTextWrap = (ctx, canvas) => {
-    let line = "",
-      marginTop = 0,
-      marginLeft = 0,
-      lineHeight = 15;
-
-    for (var n = 0; n < text.length; n++) {
-      let testLine = line + text[n];
-      let testWidth = ctx.measureText(testLine).width;
-
-      const percentWidth = ((canvas.width - testWidth) * 100) / canvas.width;
-
-      if (
-        (percentWidth < 32 && text[n] === " ") ||
-        testWidth > canvas.width - 4
-      ) {
-        ctx.fillText(line, marginLeft, marginTop);
-        line = text[n];
-        marginTop += lineHeight;
-      } else {
-        line = testLine;
-      }
-    }
-
-    ctx.fillText(line, marginLeft, marginTop);
-  };
-
-  const getContent = (canvas, ctx, imgContent, imgWidth, imgHeight) => {
-    setCtxText(ctx);
-
-    ctx.drawImage(imgContent, 0, 0, imgWidth, imgHeight);
-
-    setCtxCenteredText(imgContent, ctx);
-    setCtxRotate(ctx);
-    setCtxTextWrap(ctx, canvas);
-  };
-
-  const drawCanvas = (drawContent, ctx, canvas) => {
-    canvas.width = drawContent.naturalWidth;
-    canvas.height = drawContent.naturalHeight;
-
-    getContent(
-      canvas,
-      ctx,
-      drawContent || "",
-      drawContent.naturalWidth,
-      drawContent.naturalHeight
-    );
-  };
-
-  const renderWatermark = () => {
-    const canvas = document.querySelector("canvas");
-    const ctx = canvas.getContext("2d");
-
-    const img = new Image();
-
-    img.onload = () => {
-      drawCanvas(img, ctx, canvas);
-    };
-    img.onerror = () => {
-      drawCanvas(text);
-    };
-    img.crossOrigin = "anonymous";
-    img.referrerPolicy = "no-referrer";
-
-    img.src = image;
-  };
-
-  useEffect(() => {
-    renderWatermark();
-  }, [text, rotate, isSemitransparent]);
-
-  return (
-    <canvas>
-      <div>{children}</div>
-    </canvas>
-  );
-};
-export default Watermark;