Browse Source

fix: 修复快捷键,复制剪切

liaojiaxing 1 week ago
parent
commit
9a1e0494ad

+ 16 - 3
apps/designer/src/pages/mindmap/fastKey.tsx

@@ -105,9 +105,22 @@ export const bindMindmapKeys = (
   });
 
   // Ctrl+x 剪切
-  // graph.bindKey("ctrl+x", (e: KeyboardEvent) => {
-  //   graph.cut(graph.getSelectedCells());
-  // });
+  graph.bindKey("ctrl+x", (e: KeyboardEvent) => {
+    const cells = graph.getSelectedCells();
+    localStorage.setItem(
+      "mindmap-copy-data",
+      JSON.stringify(cells)
+    );
+    navigator.clipboard.writeText("  ");
+    // 剪切后删除节点
+    const topicIds = graph
+      .getSelectedCells()
+      .filter((cell) => {
+        return cell.isNode() && !(cell.data?.ignoreDrag || cell.data?.lock )
+      })
+      .map((cell) => cell.id);
+    deleteTopics(topicIds, graph, setMindProjectInfo);
+  });
 
   // Ctrl+v 粘贴
   graph.bindKey("ctrl+v", (e: KeyboardEvent) => {

+ 33 - 73
apps/designer/src/pages/mindmap/mindMapEvent.ts

@@ -54,6 +54,10 @@ export const bindMindMapEvents = (
 
   /*********************************** 拖拽开始 *********************************/
   graph.on("node:mousedown", (args) => {
+    const { node } = args;
+    const data = node.getData();
+    if (data.ignoreDrag) return;
+
     moveStart = {
       x: args.x,
       y: args.y,
@@ -197,68 +201,8 @@ export const bindMindMapEvents = (
     }
   });
 
-  /**
-   * 节点数据更改
-   */
   graph.on("node:change:data", (args) => {
     const { current, previous } = args;
-    if (current?.ingoreDrag && current?.ignoreDrag) {
-      // 忽略拖拽
-      return;
-    }
-    // 收折子项 setMindProjectInfo更新会重新渲染
-    if (current.collapsed !== previous.collapsed) {
-      setMindProjectInfo &&
-        updateTopic(
-          args.cell.id,
-          { collapsed: current.collapsed },
-          setMindProjectInfo
-        );
-      return;
-    }
-    if (current?.links && current.links.length !== previous?.links?.length) {
-      setMindProjectInfo &&
-        updateTopic(args.cell.id, { links: current.links }, setMindProjectInfo);
-    }
-    // 宽度和高度有变化
-    if (
-      current?.width !== previous?.width ||
-      current?.height !== previous?.height
-    ) {
-      setMindProjectInfo &&
-        updateTopic(
-          args.cell.id,
-          { width: current.width, height: current.height },
-          setMindProjectInfo
-        );
-    }
-    // 边框有变化
-    if (current?.border !== previous?.border) {
-      setMindProjectInfo &&
-        updateTopic(
-          args.cell.id,
-          { border: current.border },
-          setMindProjectInfo
-        );
-    }
-    // 概要有变化
-    if (current?.summary !== previous?.summary) {
-      setMindProjectInfo &&
-        updateTopic(
-          args.cell.id,
-          { summary: current.summary },
-          setMindProjectInfo
-        );
-    }
-    // 扩展模块
-    if (current?.extraModules !== previous?.extraModules) {
-      setMindProjectInfo &&
-        updateTopic(
-          args.cell.id,
-          { extraModules: current?.extraModules },
-          setMindProjectInfo
-        );
-    }
     // 改线段
     if (current?.edge && !isEqual(current.edge, previous?.edge)) {
       setMindProjectInfo &&
@@ -272,29 +216,45 @@ export const bindMindMapEvents = (
       });
     }
 
-    // 内容修改
-    if (current?.label !== previous?.label) {
-      setMindProjectInfo &&
-        updateTopic(args.cell.id, { label: current.label }, (info) =>
-          setMindProjectInfo?.({ ...info, ignoreRender: true })
-        );
-    }
+    // TODO 其余数据变化未处理的
+  });
 
-    // TODO 其余未处理的
+  /**
+   * 节点数据更改
+   * 自定义更新节点数据事件
+   * 示例:
+   * node.prop('changeNodeData', {
+   *   cellId: parentNode.id, // 元素id
+   *   data: { border: undefined }, // 更新数据
+   *   ignoreRender: false, // 忽略渲染
+   * })
+   */
+  graph.on("node:change:changeNodeData", (args: any) => {
+    const { current } = args;
+    console.log("修改数据: ", args);
+    setMindProjectInfo &&
+      updateTopic(current.cellId, current.data, (info) =>
+        setMindProjectInfo({ ...info, ignoreRender: !!current.ignoreRender })
+      );
   });
 
   graph.on("node:resized", (args) => {
-    args.node.setData({
-      fixedWidth: true,
-      width: args.node.size().width,
-      height: args.node.size().height,
-    });
+    console.log("resized:", args);
+    const size = args.node.size();
+    const position = args.node.position();
+    setMindProjectInfo &&
+      updateTopic(
+        args.cell.id,
+        { fixedWidth: true, ...size, ...position },
+        setMindProjectInfo
+      );
   });
 
   // 修改自由节点位置
   graph.on(
     "node:moved",
     debounce((args) => {
+      console.log("moved:", args);
       const { x, y } = args.node.position();
       if (
         args.cell.isNode() &&

+ 5 - 2
apps/designer/src/pages/mindmap/mindmapHander.tsx

@@ -265,7 +265,7 @@ export const handleMindmapPaste = (
                     setMindProjectInfo,
                     graph,
                     currentNode,
-                    { ...data }
+                    { label: data.label, children: data.children, }
                   );
                 });
               }
@@ -609,7 +609,10 @@ export const mindmapMenuHander = {
     navigator.clipboard.writeText("  ");
   },
   cut(tool: ContextMenuTool) {
-    tool.graph.cut([tool.cell]);
+    // tool.graph.cut([tool.cell]);
+    localStorage.setItem("mindmap-copy-data", JSON.stringify([tool.cell]));
+    deleteTopics([tool.cell.id], tool.graph, tool.cell.data.setMindProjectInfo);
+    navigator.clipboard.writeText("  ");
   },
   paste(tool: ContextMenuTool) {
     handleMindmapPaste(tool.graph, tool.cell.data.setMindProjectInfo);

+ 1 - 1
apps/designer/src/pages/mindmap/render/index.tsx

@@ -365,7 +365,7 @@ export const addTopic = (
       if (newTopicNode) {
         newTopicNode.prop("customEdit", true);
       }
-    }, 100);
+    }, 50);
   }
   return topic;
 };