impr: 编辑页面画布优化

JackySoft · Oct 10, 2024 · 65f1a8b · 65f1a8b
1 parent 554497e
commit 65f1a8b
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 107 deletions.
diff --git a/packages/editor/src/layout/EditLayout.tsx b/packages/editor/src/layout/EditLayout.tsx
@@ -21,21 +21,19 @@ const EditLayout = () => {
           theme={{
             components: {
               Splitter: {
-                splitBarSize: 3,
                 controlItemBgActiveHover: '#7d33ff',
-                controlItemBgHover: '#e8e9eb',
               },
             },
           }}
         >
           <Splitter>
-            <Splitter.Panel size={mode === 'preview' ? 0 : 300} defaultSize={300}>
+            <Splitter.Panel collapsible size={mode === 'preview' ? 0 : undefined} defaultSize={300} min={300} max={800}>
               <Menu />
             </Splitter.Panel>
-            <Splitter.Panel size={mode === 'preview' ? '100%' : ''}>
+            <Splitter.Panel size={mode === 'preview' ? '100%' : ''} defaultSize={'100%'}>
               <Outlet></Outlet>
             </Splitter.Panel>
-            <Splitter.Panel size={mode === 'preview' ? 0 : 300} defaultSize={300}>
+            <Splitter.Panel collapsible size={mode === 'preview' ? 0 : undefined} defaultSize={300} min={300} max={800}>
               <ConfigPanel />
             </Splitter.Panel>
           </Splitter>

diff --git a/packages/editor/src/pages/editor/editor.tsx b/packages/editor/src/pages/editor/editor.tsx
@@ -1,6 +1,6 @@
-import React, { MouseEvent, useState, useEffect } from 'react';
+import React, { MouseEvent, useState, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
-import { ConfigProvider, InputNumber, Tooltip } from 'antd';
+import { ConfigProvider } from 'antd';
 import { useDrop } from 'react-dnd';
 import { useDebounceFn, useKeyPress } from 'ahooks';
 import * as Components from '@/packages/index';
@@ -15,7 +15,6 @@ import { usePageStore } from '@/stores/pageStore';
 import { PageConfig } from '@/packages/Page';
 import InfiniteViewer from 'react-infinite-viewer';
 import './index.less';
-import { QuestionCircleOutlined } from '@ant-design/icons';
 
 /**
  * 画布
@@ -26,8 +25,6 @@ const Editor = () => {
   // 页面组件
   const {
     mode,
-    canvasWidth,
-    setCanvasWidth,
     selectedElement,
     theme,
     elements,
@@ -41,8 +38,6 @@ const Editor = () => {
   } = usePageStore((state) => {
     return {
       mode: state.mode,
-      canvasWidth: state.page.canvasWidth,
-      setCanvasWidth: state.setCanvasWidth,
       selectedElement: state.selectedElement,
       theme: state.page.config.props.theme,
       pageStyle: state.page.config.style,
@@ -60,6 +55,7 @@ const Editor = () => {
   const [hoverTarget, setHoverTarget] = useState<HTMLElement | null>(null);
   const [loaded, setLoaded] = useState(false);
   const { id } = useParams();
+  const viewerRef = useRef<InfiniteViewer>(null);
   useEffect(() => {
     if (!id) return;
     setLoaded(false);
@@ -91,8 +87,14 @@ const Editor = () => {
         user_id: res.user_id,
       });
       setLoaded(true);
-      // 初始化画布宽度
-      setCanvasWidth(Math.max(1440, pageData.canvasWidth || 0));
+      // 设置初始化缩放比例，由于屏幕尺寸是动态的，我们需要动态计算一个最佳的初始化缩放比例值
+      const container = document.querySelector('.mars-editor') as HTMLDivElement;
+      const scale = (container.clientWidth - 50) / 1440;
+      viewerRef.current?.setZoom(scale);
+      // 滚动到画布中心
+      requestAnimationFrame(() => {
+        viewerRef.current?.scrollCenter();
+      });
     });
     return () => {
       clearPageInfo();
@@ -261,6 +263,7 @@ const Editor = () => {
       removeElements(selectedElement.id);
     }
   };
+
   return (
     <ConfigProvider
       theme={{
@@ -273,58 +276,38 @@ const Editor = () => {
         },
       }}
     >
-      {/* 设置画布宽度 */}
-      {mode === 'edit' && (
-        <div
-          className="canvas-size"
-          onClick={() => {
-            setSelectedElement(undefined);
-          }}
-        >
-          <Tooltip title="画布支持缩放和拖拽；当页面内容较多时，可以尝试修改画布尺寸；">
-            <QuestionCircleOutlined />
-          </Tooltip>
-          <InputNumber
-            addonBefore="画布宽度:"
-            variant="borderless"
-            value={canvasWidth}
-            onChange={(val) => val && setCanvasWidth(val)}
-            controls={false}
-          />
-        </div>
-      )}
-      {mode === 'edit' ? (
-        <InfiniteViewer
-          className="node-viewer dot"
-          displayHorizontalScroll={false}
-          displayVerticalScroll={false}
-          useMouseDrag={true}
-          useWheelScroll={true}
-          useAutoZoom={true}
-          zoomRange={[0.5, 3]}
-          margin={100}
-        >
-          {/* 编辑器 */}
-          <div ref={drop} className={mode === 'edit' ? 'mars-editor' : 'mars-preview'}>
+      {/* 编辑器 */}
+      <div ref={drop} className={mode === 'edit' ? 'mars-editor' : 'mars-preview'}>
+        {mode === 'edit' ? (
+          <InfiniteViewer
+            className="canvas-viewer dot"
+            displayHorizontalScroll={false}
+            displayVerticalScroll={false}
+            useMouseDrag={true}
+            useWheelScroll={false}
+            useAutoZoom={true}
+            zoomRange={[0.5, 2]}
+            onDragStart={(e) => {
+              const target = e.inputEvent.target;
+              if (target.nodeName === 'A') {
+                e.stop();
+              }
+            }}
+            ref={viewerRef}
+          >
             {/* 页面渲染 */}
-            <div
-              id="editor"
-              className="pageWrapper"
-              style={{ minWidth: 1440, width: canvasWidth || 'auto', height: '100%' }}
-              onClick={handleClick}
-              onMouseOver={run}
-            >
+            <div id="editor" className="pageWrapper" style={{ width: 1440 }} onClick={handleClick} onMouseOver={run}>
               {/* 根据选中目标的相对位置，设置工具条 */}
               {mode === 'edit' && <Toolbar copyElement={copyElement} pastElement={pastElement} delElement={delElement} hoverTarget={hoverTarget} />}
               <React.Suspense fallback={<div>Loading...</div>}>{loaded && <Page />}</React.Suspense>
             </div>
+          </InfiniteViewer>
+        ) : (
+          <div id="editor" className="pageWrapper" style={{ height: 'calc(100vh - 64px)', overflow: 'auto' }}>
+            <React.Suspense fallback={<div>Loading...</div>}>{loaded && <Page />}</React.Suspense>
           </div>
-        </InfiniteViewer>
-      ) : (
-        <div id="editor" className="pageWrapper" style={{ height: 'calc(100vh - 64px)', overflow: 'auto' }}>
-          <React.Suspense fallback={<div>Loading...</div>}>{loaded && <Page />}</React.Suspense>
-        </div>
-      )}
+        )}
+      </div>
     </ConfigProvider>
   );
 };

diff --git a/packages/editor/src/pages/editor/index.less b/packages/editor/src/pages/editor/index.less
@@ -7,16 +7,22 @@
     background-color: #fff;
     min-height: 100%;
     position: relative;
+    box-shadow: 0 0 8px 3px #cccccc;
   }
 }
-.canvas-size {
-  position: absolute;
-  left: 50%;
-  width: 200px;
-  margin-left: -100px;
-  background-color: #fff;
-  padding-inline: 20px;
-  border-radius: 20px;
-  z-index: 100;
-  display: flex;
+.canvas-viewer {
+  width: auto;
+  height: calc(100vh - 64px);
+  background-color: #f0f2f3;
+  cursor: grab;
+  box-shadow: inset 1px 1px 6px 0px #cccccc;
+  &.dot {
+    /* 设置背景图像为重复的径向渐变，每个渐变代表一个点 */
+    background-image: radial-gradient(circle, rgba(185, 185, 185, 0.5) 1px, transparent 1px),
+      radial-gradient(circle, rgba(0, 0, 0, 0.5) 1px, transparent 1px);
+    /* 设置背景大小，确保点之间有足够的间距 */
+    background-size: 20px 20px; /* 根据需要调整间距 */
+    /* 让背景图像在水平和垂直方向上重复 */
+    background-repeat: repeat;
+  }
 }
diff --git a/packages/editor/src/stores/pageStore.ts b/packages/editor/src/stores/pageStore.ts
@@ -27,7 +27,6 @@ export interface PageState {
     stg_publish_id: number;
     pre_publish_id: number;
     prd_publish_id: number;
-    canvasWidth: number;
     preview_img: string;
     user_id: string;
     // 页面配置数据
@@ -70,7 +69,6 @@ export interface PageState {
 export interface PageAction {
   saveUserInfo: (userInfo: UserInfoStore) => void;
   savePageInfo: (pageInfo: any) => void;
-  setCanvasWidth: (width: number) => void;
   updatePageState: (payload: any) => void;
   addApi: (api: ApiType) => void;
   updateApi: (api: ApiType) => void;
@@ -113,7 +111,6 @@ export const usePageStore = create<PageState & PageAction>((set) => ({
     stg_publish_id: 0,
     pre_publish_id: 0,
     prd_publish_id: 0,
-    canvasWidth: 0,
     preview_img: '',
     user_id: '',
     config: {
@@ -173,12 +170,6 @@ export const usePageStore = create<PageState & PageAction>((set) => ({
         }
       }),
     ),
-  setCanvasWidth: (width: any) =>
-    set(
-      produce((state) => {
-        state.page.canvasWidth = width;
-      }),
-    ),
   updatePageState: ({ env, pageState }) => {
     set(
       produce((state) => {

diff --git a/packages/editor/src/utils/util.ts b/packages/editor/src/utils/util.ts
@@ -109,7 +109,7 @@ export function getBoundingClientRect(element: any) {
 // 获取当前画布缩放比例，用来计算选中元素的实际尺寸。
 function getScale() {
   // 获取元素的最终计算样式
-  const style = window.getComputedStyle(document.querySelector('.mars-editor') as HTMLElement);
+  const style = window.getComputedStyle(document.querySelector('#editor') as HTMLElement);
   // 获取transform属性的值
   const transform = style.transform;