feat: handle modify ttd on mobile

chowjustin · Dec 15, 2024 · 853ac70 · 853ac70
1 parent 16c057d
commit 853ac70
Showing 1 changed file with 32 additions and 11 deletions.
diff --git a/src/app/dashboard/[id]/modal/editModal.tsx b/src/app/dashboard/[id]/modal/editModal.tsx
@@ -81,6 +81,14 @@ export function EditModal({
   });
   const pageContainerRef = useRef<HTMLDivElement>(null);
 
+  const handlePageClick = (e: React.MouseEvent, page: HTMLElement) => {
+    const rect = page.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    setSelection({ x, y, w: width, height: height });
+  };
+
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   const renderPage = (props: any) => (
     <div
@@ -97,10 +105,13 @@ export function EditModal({
         cursor: "default",
         zIndex: 100,
       }}
+      onClick={
+        !isMdScreen ? (e) => handlePageClick(e, e.currentTarget) : undefined
+      }
     >
       {props.canvasLayer.children}
 
-      {user?.ttd && (
+      {isMdScreen && user?.ttd && (
         <DraggableOverlay
           src={user.ttd}
           initialPosition={{
@@ -143,6 +154,26 @@ export function EditModal({
           }}
         />
       )}
+
+      {!isMdScreen && selection && user?.ttd && (
+        <div
+          style={{
+            position: "absolute",
+            left: selection.x,
+            top: selection.y,
+            width: selection.w,
+            pointerEvents: "none",
+          }}
+        >
+          <img
+            src={user.ttd}
+            alt="ttd"
+            style={{
+              width: "100%",
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 
@@ -215,16 +246,6 @@ export function EditModal({
                       className="px-2 py-1"
                     />
                   </div>
-                  <div className="flex items-center gap-1 w-[50%]">
-                    Height:
-                    <Input
-                      id="height"
-                      type="number"
-                      value={height}
-                      onChange={(e) => setHeight(parseInt(e.target.value))}
-                      className="px-2 py-1"
-                    />
-                  </div>
                 </div>
                 <span className="max-md:hidden">on the Preview</span>
               </LabelText>