fix(ui): calculate click position

Author: xiejay97

packages/ui/src/components/modal/Modal.tsx

@@ -136,7 +136,7 @@ export const DModal: {
           } else if (modalContentRef.current) {
             const left = `${(ROOT_DATA.pageSize.width - modalContentRef.current.offsetWidth) / 2}px`;
             const top = dTop === 'center' ? `${(ROOT_DATA.pageSize.height - modalContentRef.current.offsetHeight) / 2}px` : topStyle;
-            dataRef.current.transformOrigin = `calc(${ROOT_DATA.clickEvent.e.clientX}px - ${left}) calc(${ROOT_DATA.clickEvent.e.clientY}px - ${top})`;
+            dataRef.current.transformOrigin = `calc(${ROOT_DATA.clickEvent.x}px - ${left}) calc(${ROOT_DATA.clickEvent.y}px - ${top})`;
           }
         }}
         afterEnter={() => {

packages/ui/src/components/root/Root.tsx

@@ -29,7 +29,8 @@ const ROOT = new DConfigContextManager({
 export const ROOT_DATA: {
   clickEvent?: {
     time: number;
-    e: MouseEvent;
+    x: number;
+    y: number;
   };
   pageSize: { width: number; height: number };
 } = {
@@ -96,10 +97,14 @@ export function DRoot(props: DRootProps): JSX.Element | null {
     (e) => {
       // Check if click by keydown.
       if (!(e.clientX === 0 && e.clientY === 0)) {
-        ROOT_DATA.clickEvent = {
-          time: performance.now(),
-          e,
-        };
+        const rect = e.target instanceof Element ? e.target.getBoundingClientRect() : null;
+        if (rect) {
+          ROOT_DATA.clickEvent = {
+            time: performance.now(),
+            x: e.offsetX + rect.x,
+            y: e.offsetX + rect.y,
+          };
+        }
       }
     },
     { capture: true }