editor component, viewer component

apps/web/components/editor/field.tsx

@@ -13,7 +13,7 @@ type FieldPropsType = {
     id: string;
     recipient: string;
   };
-  onPositionChangedHandler: any;
+  onPositionChanged: any;
 };
 
 export default function Field(props: FieldPropsType) {
@@ -31,7 +31,7 @@ export default function Field(props: FieldPropsType) {
     if (!position) return;
     const { x, y } = position;
 
-    props.onPositionChangedHandler({ x, y }, props.field.id);
+    props.onPositionChanged({ x, y }, props.field.id);
   };
 
   return (

apps/web/components/editor/pdf-editor.tsx

@@ -1,19 +1,78 @@
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
-import React from "react";
+import React, { useState } from "react";
+import { Button } from "@documenso/ui";
+import short from "short-uuid";
+const stc = require("string-to-color");
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
   ssr: false,
 });
 
 export default function PDFEditor(props: any) {
+  const [selectedValue, setSelectedValue] = useState("");
+  const [fields, setFields] = useState<any[]>([]);
   const router = useRouter();
 
+  function onPositionChangedHandler(position: any, id: any) {
+    if (!position) return;
+    const newFields = [...fields];
+    fields.find((e) => e.id == id).position = position;
+
+    // no instant redraw neccessary, postion information for saving or later rerender is enough
+    // setFields(newFields);
+  }
+
   return (
-    <PDFViewer
-      document={props.document}
-      pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
-    />
+    <>
+      <select
+        className="mb-3 inline mt-1 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+        style={{ background: stc(selectedValue) }}
+        value={selectedValue}
+        onChange={(e) => setSelectedValue(e.target.value)}
+      >
+        {props?.document?.Recipient?.map((item: any) => (
+          <option
+            key={item.email + short.generate().toString()}
+            style={{
+              background: stc(
+                item.name ? `${item.name} <${item.email}>` : item.email
+              ),
+            }}
+          >
+            {item.name ? `${item.name} <${item.email}>` : item.email}
+          </option>
+        ))}
+      </select>
+      <Button
+        className="inline ml-1"
+        onClick={() => {
+          setFields(
+            fields.concat({
+              id: short.generate().toString(),
+              page: 0,
+              type: "signature",
+              position: { x: 0, y: -842 },
+              recipient: selectedValue,
+            })
+          );
+        }}
+      >
+        Add Signature Field
+      </Button>
+      <Button color="secondary" className="inline ml-1">
+        Add Date Field
+      </Button>
+      <Button color="secondary" className="inline ml-1">
+        Add Text Field
+      </Button>
+      <PDFViewer
+        document={props.document}
+        fields={fields}
+        onPositionChanged={onPositionChangedHandler}
+        pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
+      />
+    </>
   );
 }

apps/web/components/editor/pdf-viewer.jsx

@@ -2,21 +2,14 @@ import { Fragment, useState } from "react";
 import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
 import Field from "./field";
 import short from "short-uuid";
-import { Button } from "@documenso/ui";
-const stc = require("string-to-color");
 
 export default function PDFViewer(props) {
   const [file, setFile] = useState("");
-  const [selectedValue, setSelectedValue] = useState("");
   const [numPages, setNumPages] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [fields, setFields] = useState([]);
 
   function onPositionChangedHandler(position, id) {
-    if (!position) return;
-    const newFields = [...fields];
-    fields.find((e) => e.id == id).position = position;
-    // setFields(newFields);
+    props.onPositionChanged(position, id);
   }
 
   function onFileChange(event) {
@@ -36,50 +29,7 @@ export default function PDFViewer(props) {
   return (
     <>
       <div hidden={loading}>
-        <div className="max-w-xs mt-6">
-          <select
-            className="mb-3 inline mt-1 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
-            style={{ background: stc(selectedValue) }}
-            defaultValue={props?.document?.Recipient[0]}
-            value={selectedValue}
-            selectedIndex={0}
-            onChange={(e) => setSelectedValue(e.target.value)}
-          >
-            {props?.document?.Recipient?.map((item) => (
-              <option
-                key={item.email + short.generate().toString()}
-                style={{
-                  background: stc(
-                    item.name ? `${item.name} <${item.email}>` : item.email
-                  ),
-                }}
-              >
-                {item.name ? `${item.name} <${item.email}>` : item.email}
-              </option>
-            ))}
-          </select>
-        </div>
-        <Button
-          className="inline ml-1"
-          onClick={() => {
-            setFields(
-              fields.concat({
-                id: short.generate().toString(),
-                type: "signature",
-                position: { x: 0, y: -842 },
-                recipient: selectedValue,
-              })
-            );
-          }}
-        >
-          Add Signature Field
-        </Button>
-        <Button color="secondary" className="inline ml-1">
-          Add Date Field
-        </Button>
-        <Button color="secondary" className="inline ml-1">
-          Add Text Field
-        </Button>
+        <div className="max-w-xs mt-6"></div>
         <Document
           file={props.pdfUrl}
           onLoadSuccess={onDocumentLoadSuccess}
@@ -109,14 +59,16 @@ export default function PDFViewer(props) {
                     onLoadSuccess={() => setLoading(false)}
                     onRenderError={() => setLoading(false)}
                   ></Page>
-                  {fields.map((item) => (
-                    <Field
-                      key={item.id}
-                      field={item}
-                      className="absolute"
-                      onPositionChangedHandler={onPositionChangedHandler}
-                    ></Field>
-                  ))}
+                  {props?.fields
+                    .filter((item) => item.page === index)
+                    .map((item) => (
+                      <Field
+                        key={item.id}
+                        field={item}
+                        className="absolute"
+                        onPositionChanged={onPositionChangedHandler}
+                      ></Field>
+                    ))}
                 </div>
               </div>
             </Fragment>