fix: StarportCraft margin caused errors in the coordinates (#57)

antfu · Sep 7, 2023 · 2e713dc · 2e713dc
1 parent 79ca814
commit 2e713dc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/StarportCraft.ts b/src/components/StarportCraft.ts
@@ -39,7 +39,7 @@ export const StarportCraft = defineComponent({
         height: `${rect.height}px`,
         margin: rect.margin,
         padding: rect.padding,
-        transform: `translate3d(${rect.left}px,${rect.top}px,0px)`,
+        transform: `translate3d(calc(${rect.left}px - ${rect.marginLeft}),calc(${rect.top}px - ${rect.marginTop}),0px)`,
       }
       if (!sp.value.isVisible || !sp.value.el) {
         return {

diff --git a/src/composables.ts b/src/composables.ts
@@ -14,6 +14,8 @@ export function useElementBounding(
     update,
     listen,
     pause,
+    marginTop: '0px',
+    marginLeft: '0px',
     margin: '0px',
     padding: '0px',
   })
@@ -29,9 +31,11 @@ export function useElementBounding(
       return
     const { height, width, left, top } = el.getBoundingClientRect()
     const domStyle = window.getComputedStyle(el)
+    const marginTop = domStyle.marginTop
+    const marginLeft = domStyle.marginLeft
     const margin = domStyle.margin
     const padding = domStyle.padding
-    Object.assign(rect, { height, width, left, top: root!.scrollTop + top, margin, padding })
+    Object.assign(rect, { height, width, left, top: root!.scrollTop + top, marginTop, marginLeft, margin, padding })
   }
   const raf = useRafFn(update, { immediate: false })