From 720d78012e51327c21df2bb2566aab35db9c4195 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 28 Feb 2023 13:00:49 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20place=20field=20outside=20pdf,?=
 =?UTF-8?q?=20add=20field=20to=20cursor=20center?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/editable-field.tsx |  5 +++--
 apps/web/components/editor/pdf-editor.tsx     | 13 +++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/editor/editable-field.tsx b/apps/web/components/editor/editable-field.tsx
index d7c87a16c..0135edfbd 100644
--- a/apps/web/components/editor/editable-field.tsx
+++ b/apps/web/components/editor/editable-field.tsx
@@ -56,7 +56,7 @@ export default function EditableField(props: FieldPropsType) {
       <div
         hidden={props.hidden}
         ref={nodeRef}
-        className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none"
+        className="cursor-move opacity-80 p-2 m-auto w-48 h-24 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none"
         style={{
           background: stc(props.field.Recipient.email),
         }}
@@ -64,7 +64,8 @@ export default function EditableField(props: FieldPropsType) {
         <div className="mb-2 pointer-events-none">
           <Logo className="w-16 mx-auto"></Logo>
         </div>
-        <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
+        {/* width: 192 height 96 */}
+        <div className="m-auto overflow-hidden flex-row-reverse text-lg font-bold text-center">
           {field.type}
           {field.type === "SIGNATURE" ? (
             <div className="text-xs text-center">
diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index d3ab28bac..380bc1049 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -223,8 +223,17 @@ export default function PDFEditor(props: any) {
 
   function addField(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 fieldSize = { width: 192, height: 96 };
+    var newFieldX = e.clientX - rect.left - fieldSize.width / 2; //x position within the element.
+    var newFieldY = e.clientY - rect.top - fieldSize.height / 2; //y position within the element.
+    if (newFieldX < 0) newFieldX = 0;
+    if (newFieldY < 0) newFieldY = 0;
+
+    if (newFieldX + fieldSize.width > rect.width)
+      newFieldX = rect.width - fieldSize.width;
+    if (newFieldY + fieldSize.height > rect.height)
+      newFieldY = rect.height - fieldSize.height;
+
     const signatureField = {
       id: -1,
       page: page,