From 0e81a0f43c57e19345c4cf7c0583b7afcd332f82 Mon Sep 17 00:00:00 2001
From: hht <614124284@qq.com>
Date: Fri, 22 Nov 2024 01:17:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20issue=20#67:=E6=B7=BB=E5=8A=A0=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E7=94=BB=E5=B8=83=E6=8B=96=E6=8B=BD=E8=83=BD?=
 =?UTF-8?q?=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/packages/Page/Page.tsx | 59 +++++++++++++++++++++-
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/packages/Page/Page.tsx b/packages/editor/src/packages/Page/Page.tsx
index 9ad15c03..ad58a678 100644
--- a/packages/editor/src/packages/Page/Page.tsx
+++ b/packages/editor/src/packages/Page/Page.tsx
@@ -1,5 +1,6 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useRafState } from 'ahooks';
 import MarsRender from '@/packages/MarsRender/MarsRender';
-import React, { useEffect } from 'react';
 import { usePageStore } from '@/stores/pageStore';
 import { handleActionFlow } from '@/packages/utils/action';
 
@@ -9,6 +10,10 @@ import { handleActionFlow } from '@/packages/utils/action';
  * @returns
  */
 const Page: React.FC = () => {
+  const [position, setPosition] = useRafState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const cache = useRef({ offset: { x: 0, y: 0 }, isDragging: false });
+
   // 页面组件
   const { config, elements } = usePageStore((state) => {
     return {
@@ -17,6 +22,48 @@ const Page: React.FC = () => {
     };
   });
 
+  const handleMouseMove = (e: MouseEvent) => {
+    if (isDragging) {
+      setPosition({
+        x: e.clientX - cache.current.offset.x,
+        y: e.clientY - cache.current.offset.y,
+      });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    cache.current.offset = {
+      x: e.clientX - position.x,
+      y: e.clientY - position.y,
+    };
+    setIsDragging(true);
+  };
+
+  React.useEffect(() => {
+    const addEventListener = () => {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    };
+    const removeEventListener = () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    if (isDragging) {
+      addEventListener();
+    } else {
+      removeEventListener();
+    }
+
+    return () => {
+      removeEventListener();
+    };
+  }, [isDragging]);
+
   useEffect(() => {
     config.events?.forEach((event) => {
       if (event.actions?.length > 0) {
@@ -25,7 +72,15 @@ const Page: React.FC = () => {
     });
   }, [config.events]);
   return (
-    <div style={config.style} id="page">
+    <div
+      style={{
+        ...config.style,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        cursor: isDragging ? 'move' : 'default',
+      }}
+      id="page"
+      onMouseDown={handleMouseDown}
+    >
       {<MarsRender elements={elements || []} />}
     </div>
   );