From 01e717c00555d6dd26198b2fe51d5d8f08632fff Mon Sep 17 00:00:00 2001
From: Kiet <31864905+Kitenite@users.noreply.github.com>
Date: Thu, 26 Sep 2024 16:19:01 -0400
Subject: [PATCH] Fix drag position (#410)

---
 app/common/constants.ts                       |  1 +
 .../preload/webview/elements/move/drag.ts     | 22 ++++++++++++++++++-
 demos/remix/app/routes/_index.tsx             | 12 +++++-----
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/common/constants.ts b/app/common/constants.ts
index 930bfcb69..d0d5d091a 100644
--- a/app/common/constants.ts
+++ b/app/common/constants.ts
@@ -14,6 +14,7 @@ export enum EditorAttributes {
     DATA_ONLOOK_ORIGINAL_INDEX = 'data-onlook-original-index',
     DATA_ONLOOK_DRAGGING = 'data-onlook-dragging',
     DATA_ONLOOK_DRAG_DIRECTION = 'data-onlook-drag-direction',
+    DATA_ONLOOK_DRAG_START_POSITION = 'data-onlook-drag-start-position',
     DATA_ONLOOK_NEW_INDEX = 'data-onlook-new-index',
     DATA_ONLOOK_UNIQUE_ID = 'data-onlook-unique-id',
     DATA_ONLOOK_EDITING_TEXT = 'data-onlook-editing-text',
diff --git a/app/electron/preload/webview/elements/move/drag.ts b/app/electron/preload/webview/elements/move/drag.ts
index 32750c68f..1bd91fe5c 100644
--- a/app/electron/preload/webview/elements/move/drag.ts
+++ b/app/electron/preload/webview/elements/move/drag.ts
@@ -20,6 +20,8 @@ export function startDrag(selector: string): number {
     const originalIndex = htmlChildren.indexOf(el);
     prepareElementForDragging(el, originalIndex);
     createStub(el);
+    const pos = getAbsolutePosition(el);
+    el.setAttribute(EditorAttributes.DATA_ONLOOK_DRAG_START_POSITION, JSON.stringify(pos));
     return originalIndex;
 }
 
@@ -33,7 +35,14 @@ export function drag(dx: number, dy: number, x: number, y: number) {
     el.style.width = styles.width;
     el.style.height = styles.height;
     el.style.position = 'fixed';
-    el.style.transform = `translate(${dx}px, ${dy}px)`;
+
+    const pos = JSON.parse(
+        el.getAttribute(EditorAttributes.DATA_ONLOOK_DRAG_START_POSITION) || '{}',
+    );
+    const left = pos.left + dx;
+    const top = pos.top + dy;
+    el.style.left = `${left}px`;
+    el.style.top = `${top}px`;
     moveStub(el, x, y);
 }
 
@@ -81,6 +90,8 @@ function prepareElementForDragging(el: HTMLElement, originalIndex: number) {
         transform: el.style.transform,
         width: el.style.width,
         height: el.style.height,
+        left: el.style.left,
+        top: el.style.top,
     };
 
     el.setAttribute(EditorAttributes.DATA_ONLOOK_SAVED_STYLE, JSON.stringify(style));
@@ -121,6 +132,7 @@ function removeDragAttributes(el: HTMLElement) {
     el.removeAttribute(EditorAttributes.DATA_ONLOOK_SAVED_STYLE);
     el.removeAttribute(EditorAttributes.DATA_ONLOOK_DRAGGING);
     el.removeAttribute(EditorAttributes.DATA_ONLOOK_DRAG_DIRECTION);
+    el.removeAttribute(EditorAttributes.DATA_ONLOOK_DRAG_START_POSITION);
 }
 
 function saveElementIndex(el: HTMLElement, newIndex: number) {
@@ -135,3 +147,11 @@ function saveElementIndex(el: HTMLElement, newIndex: number) {
         el.removeAttribute(EditorAttributes.DATA_ONLOOK_NEW_INDEX);
     }
 }
+
+function getAbsolutePosition(element: HTMLElement) {
+    const rect = element.getBoundingClientRect();
+    return {
+        left: rect.left + window.scrollX,
+        top: rect.top + window.scrollY,
+    };
+}
diff --git a/demos/remix/app/routes/_index.tsx b/demos/remix/app/routes/_index.tsx
index b7a1817f4..e6d8f0177 100644
--- a/demos/remix/app/routes/_index.tsx
+++ b/demos/remix/app/routes/_index.tsx
@@ -23,30 +23,30 @@ export default function Index() {
                     <a
                         className="text-blue-700 underline visited:text-purple-900"
                         target="_blank"
-                        href="https://remix.run/start/quickstart"
+                        href="https://remix.run/docs"
                         rel="noreferrer"
                     >
-                        5m Quick Start
+                        Remix Docs
                     </a>
                 </li>
                 <li>
                     <a
                         className="text-blue-700 underline visited:text-purple-900"
                         target="_blank"
-                        href="https://remix.run/start/tutorial"
+                        href="https://remix.run/start/quickstart"
                         rel="noreferrer"
                     >
-                        30m Tutorial
+                        5m Quick Start
                     </a>
                 </li>
                 <li>
                     <a
                         className="text-blue-700 underline visited:text-purple-900"
                         target="_blank"
-                        href="https://remix.run/docs"
+                        href="https://remix.run/start/tutorial"
                         rel="noreferrer"
                     >
-                        Remix Docs
+                        30m Tutorial
                     </a>
                 </li>
             </ul>