🚧 add fields via click

apps/web/components/editor/editable-field.tsx

@@ -48,6 +48,10 @@ export default function EditableField(props: FieldPropsType) {
       onStop={onDragStop}
       defaultPosition={{ x: 0, y: 0 }}
       cancel="strong"
+      onMouseDown={(e: any) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
     >
       <div
         hidden={props.hidden}

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

@@ -9,6 +9,7 @@ import { FieldType } from "@prisma/client";
 import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
 import { classNames } from "@documenso/lib";
+import Draggable from "react-draggable";
 const stc = require("string-to-color");
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
@@ -56,6 +57,23 @@ export default function PDFEditor(props: any) {
         onPositionChanged={onPositionChangedHandler}
         onDelete={onDeleteHandler}
         pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
+        onMouseDown={(e: any, page: number) => {
+          var rect = e.target.getBoundingClientRect();
+          var newFieldX = e.clientX - rect.left; //x position within the element.
+          var newFieldY = e.clientY - rect.top; //y position within the element.
+          const signatureField = {
+            id: -1,
+            page: page,
+            type: FieldType.SIGNATURE,
+            positionX: newFieldX.toFixed(0),
+            positionY: newFieldY.toFixed(0),
+            Recipient: selectedRecipient,
+          };
+
+          upsertField(props?.document, signatureField).then((res) => {
+            setFields(fields.concat(res));
+          });
+        }}
       ></PDFViewer>
       <div hidden={noRecipients} className="fixed left-0 top-1/3 max-w-xs">
         <Listbox value={selectedRecipient} onChange={setSelectedRecipient}>
@@ -139,24 +157,11 @@ export default function PDFEditor(props: any) {
             </div>
           )}
         </Listbox>
-        <Button
+        <div>
-          className="ml-1"
+          <Draggable>
+            <div
+              className="ml-1 cursor-move p-3 border-2 border-slate-200 my-2 rounded-md"
               color="secondary"
-          onClick={() => {
-            console.log(selectedRecipient);
-            const signatureField = {
-              id: -1,
-              page: 0,
-              type: FieldType.SIGNATURE,
-              positionX: 0,
-              positionY: 0,
-              Recipient: selectedRecipient,
-            };
-
-            upsertField(props?.document, signatureField).then((res) => {
-              setFields(fields.concat(res));
-            });
-          }}
             >
               <span
                 className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
@@ -165,8 +170,9 @@ export default function PDFEditor(props: any) {
                 }}
               />
               Add Signature Field
-        </Button>
+            </div>
-        <Button color="secondary" className="m-1" disabled>
+          </Draggable>
+          <div color="secondary" className="ml-1 ">
             <span
               className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
               style={{
@@ -174,8 +180,8 @@ export default function PDFEditor(props: any) {
               }}
             />
             Add Date Field
-        </Button>
+          </div>
-        <Button color="secondary" className="m-1" disabled>
+          <div color="secondary" className="ml-1 cursor-move">
             <span
               className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
               style={{
@@ -183,7 +189,8 @@ export default function PDFEditor(props: any) {
               }}
             />
             Add Text Field
-        </Button>
+          </div>
+        </div>
       </div>
     </>
   );

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

@@ -39,14 +39,19 @@ export default function PDFViewer(props) {
           file={props.pdfUrl}
           onLoadSuccess={onDocumentLoadSuccess}
           options={options}
+          renderMode="canvas"
         >
           {Array.from({ length: numPages }, (_, index) => (
             <Fragment key={short.generate().toString()}>
               <div
+                onMouseDown={(e) => {
+                  props.onMouseDown(e, index);
+                }}
                 key={short.generate().toString()}
                 style={{
                   position: "relative",
                   background: "green",
+                  cursor: 'url("https://place-hold.it/110x64"), auto',
                 }}
                 className="mx-auto w-fit"
               >