perf: 优化详情展示

apps/designer/src/utils/hander.tsx

@@ -1,6 +1,6 @@
 import { ContextMenuTool, edgeMenu } from "./contentMenu";
 import Text from "@/components/basic/text";
-import baseNode from "@/components/Base";
+import baseNode from "@/components/base";
 import { Cell, Edge, Graph, Node } from "@antv/x6";
 import { nodeMenu } from "./contentMenu";
 import { exportImage } from "@/components/ExportImage";

apps/er-designer/src/models/erModel.tsx

@@ -72,13 +72,19 @@ export default function erModel() {
   const timer = useRef<any>();
   const saveData = (info: ProjectInfo) => {
     // 提交服务器
-    // 清除定时器
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => {
-      SaveDataModel(info);
-      // 格式化当前时间
-      setSaveTime(dayjs().format("YYYY-MM-DD HH:mm:ss"));
-    }, 500);
+    setPlayModeEnable(state => {
+      if(!state) {
+        // 清除定时器
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+          SaveDataModel(info);
+          // 格式化当前时间
+          setSaveTime(dayjs().format("YYYY-MM-DD HH:mm:ss"));
+        }, 500);
+      }
+
+      return !!state;
+    });
   };
 
   /**
@@ -150,7 +156,8 @@ export default function erModel() {
   const initGraph = (
     container: HTMLElement,
     width?: number,
-    height?: number
+    height?: number,
+    preview?: boolean
   ) => {
     graphRef.current?.dispose?.();
     const instance = new Graph({
@@ -229,7 +236,7 @@ export default function erModel() {
       new Transform({
         resizing: {
           enabled: (node) => {
-            return node.shape !== "table-node";
+            return node.shape !== "table-node" && !preview;
           },
         },
       })
@@ -273,46 +280,43 @@ export default function erModel() {
       }
     );
 
-    instance.on(
-      "node:moved",
-      (args) => {
-        const position = args.node.position();
-        const data = args.node.data;
-        if (data.isTable) {
-          updateTable({
-            ...data,
-            table: {
-              ...data.table,
-              style: {
-                ...data.table.style,
-                x: position.x,
-                y: position.y,
-              },
-            },
-          });
-        }
-        if (data.isTopicArea) {
-          updateTopicArea({
-            ...data,
-            style: {
-              ...data.style,
-              x: position.x,
-              y: position.y,
-            },
-          });
-        }
-        if (data.isRemark) {
-          updateRemark({
-            ...data,
+    instance.on("node:moved", (args) => {
+      const position = args.node.position();
+      const data = args.node.data;
+      if (data.isTable) {
+        updateTable({
+          ...data,
+          table: {
+            ...data.table,
             style: {
-              ...data.style,
+              ...data.table.style,
               x: position.x,
               y: position.y,
             },
-          });
-        }
+          },
+        });
       }
-    );
+      if (data.isTopicArea) {
+        updateTopicArea({
+          ...data,
+          style: {
+            ...data.style,
+            x: position.x,
+            y: position.y,
+          },
+        });
+      }
+      if (data.isRemark) {
+        updateRemark({
+          ...data,
+          style: {
+            ...data.style,
+            x: position.x,
+            y: position.y,
+          },
+        });
+      }
+    });
 
     instance.on("node:resized", (args) => {
       console.log("node:resized", args);
@@ -338,7 +342,7 @@ export default function erModel() {
           },
         });
       }
-    })
+    });
 
     instance.bindKey("ctrl+z", onUndo);
     instance.bindKey("ctrl+y", onRedo);
@@ -639,7 +643,10 @@ export default function erModel() {
       },
     };
     setProject((state) => {
-      const obj = getRelations(state, {...newRelation, dataModelId: state.id});
+      const obj = getRelations(state, {
+        ...newRelation,
+        dataModelId: state.id,
+      });
       if (obj.canAdd) {
         return {
           ...state,
@@ -878,6 +885,7 @@ export default function erModel() {
    */
   const exitPlayMode = () => {
     exitFullscreen();
+    graphRef.current?.enableKeyboard();
     setPlayModeEnable(false);
   };
 
@@ -885,28 +893,44 @@ export default function erModel() {
    * 保存项目
    */
   const onSave = async () => {
-    const msg = message.loading('保存中...', 0);
-    console.log(msg, project);
-    // todo 获取新数据
-    graph?.toPNG(async (dataUri) => {
-      const file = base64ToFile(dataUri, project?.id || '封面图', "image/png");
-
-      const formData = new FormData();
-      formData.append("file", file);
-      const res = await UploadFile(formData);
-
-      await SaveDataModel({...project, coverImage: res?.result?.[0]?.id}).finally(() => {
-        message.destroy();
-      });
-      setSaveTime(dayjs().format("YYYY-MM-DD HH:mm:ss"));
-      message.success("保存成功");
-    }, {
-      width: 300,
-      height: 150,
-      quality: 0.2,
-      copyStyles: true
+    setProjectInfo((state) => {
+      message.loading("保存中...", 0);
+      graph?.toPNG(
+        async (dataUri) => {
+          const file = base64ToFile(
+            dataUri,
+            project?.id || "封面图",
+            "image/png"
+          );
+
+          const formData = new FormData();
+          formData.append("file", file);
+          const res = await UploadFile(formData);
+
+          await SaveDataModel({
+            ...state,
+            coverImage: res?.result?.[0]?.id,
+          }).finally(() => {
+            message.destroy();
+          });
+          setProjectInfo({
+            ...state,
+            coverImage: res?.result?.[0]?.id,
+          })
+          setSaveTime(dayjs().format("YYYY-MM-DD HH:mm:ss"));
+          message.success("保存成功");
+        },
+        {
+          width: 300,
+          height: 150,
+          quality: 0.2,
+          copyStyles: true,
+        }
+      );
+
+      return state;
     });
-  }
+  };
 
   return {
     initGraph,

apps/er-designer/src/pages/detail/components/ER.tsx

@@ -19,7 +19,8 @@ export default function ER(props: {
     initGraph(
       contianerRef.current!,
       contianerRef.current?.clientWidth!,
-      contianerRef.current?.clientHeight!
+      contianerRef.current?.clientHeight!,
+      true
     );
   }, []);
   return (

apps/er-designer/src/pages/detail/index.tsx

@@ -32,8 +32,14 @@ export default function index() {
   const [active, setActive] = useState(0);
   const [showNavigator, setShowNavigator] = useState(true);
   const addTableRef = useRef<{ open: () => void }>();
-  const { project, setProject, setPlayModeEnable, exitPlayMode, updateTable } =
-    useModel("erModel");
+  const {
+    project,
+    setProject,
+    setPlayModeEnable,
+    exitPlayMode,
+    updateTable,
+    graph,
+  } = useModel("erModel");
   const [searchKeyword, setSearchKeyword] = useState("");
   const [selectKey, setSelectKey] = useState<string>(
     project.tables?.[0]?.table?.id || ""
@@ -55,7 +61,8 @@ export default function index() {
 
   useEffect(() => {
     setPlayModeEnable(true);
-  }, [project]);
+    graph?.disableKeyboard();
+  }, [project, graph]);
 
   const params = useParams();
 
@@ -186,6 +193,12 @@ export default function index() {
     exitFullscreen();
   };
 
+  const handleSelectTable = (key: string) => {
+    graph?.resetSelection(key);
+    graph?.centerCell(graph.getCellById(key));
+    setSelectKey(key);
+  };
+
   const handleEnterEdit = () => {
     exitPlayMode();
     const enterpriseCode = sessionStorage.getItem("enterpriseCode");
@@ -202,8 +215,8 @@ export default function index() {
   };
 
   // 同步数据表
-  const handleSync = () => { 
-    syncModalRef.current?.open()
+  const handleSync = () => {
+    syncModalRef.current?.open();
   };
 
   const extra = (
@@ -313,7 +326,7 @@ export default function index() {
               mode="inline"
               items={tableData}
               selectedKeys={[selectKey]}
-              onSelect={({ key }) => setSelectKey(key)}
+              onSelect={({ key }) => handleSelectTable(key)}
             />
             {!tableData.length && (
               <Empty image={NoData} description="点击+添加数据表！" />

apps/er-designer/src/pages/er/components/Menu.tsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Button, Dropdown, Input, Modal, Switch, InputNumber } from "antd";
 import type { DropDownProps, MenuProps } from "antd";
 import { useModel } from "umi";
 import { useFullscreen } from "ahooks";
+import AddModel from "@/components/AddModel";
+import { TableType } from "@/enum";
 export default function Menu() {
   const {
     project,
@@ -26,6 +28,7 @@ export default function Menu() {
   const [openKey, setOpenKey] = useState("");
   const [open, setOpen] = useState(false);
   const [name, setName] = useState(project?.name);
+  const addModelRef = useRef<{ open: (type: TableType, folder: string) => void }>();
 
   useEffect(() => {
     setName(project.name);
@@ -80,8 +83,11 @@ export default function Menu() {
               <span className="color-#666">ctrl+n</span>
             </span>
           ),
+          onClick: () => {
+            addModelRef.current?.open(project.type, project.directory);
+          },
         },
-        { key: "1-2", label: "新标签页打开" },
+        // { key: "1-2", label: "新标签页打开" },
         {
           key: "1-3",
           label: (
@@ -399,6 +405,7 @@ export default function Menu() {
           onChange={(value) => handleChangeSetting("tableWidth", value)}
         />
       </Modal>
+      <AddModel ref={addModelRef}/>
     </>
   );
 }

apps/er-designer/src/pages/er/index.tsx

@@ -80,6 +80,38 @@ const App: React.FC = () => {
     },
   ];
 
+  useEffect(() => {
+    document.addEventListener(
+      "mousewheel",
+      function (e: any) {
+        // 判断是否按下ctrl
+        if (e.ctrlKey) {
+          // 阻止默认事件
+          e.preventDefault();
+        }
+      },
+      { capture: false, passive: false }
+    );
+    document.addEventListener(
+      "keydown",
+      function (event) {
+        if (
+          (event.ctrlKey === true || event.metaKey === true) &&
+          (event.keyCode === 61 ||
+            event.keyCode === 107 ||
+            event.keyCode === 173 ||
+            event.keyCode === 109 ||
+            event.keyCode === 187 ||
+            event.keyCode === 189 ||
+            event.keyCode === 80)
+        ) {
+          event.preventDefault();
+        }
+      },
+      false
+    );
+  }, []);
+
   return (
     <Spin spinning={loading}>
       <Layout className="h-100vh">