From df0ddb1d04449bb62bfa95adfc3d3066758ba5df Mon Sep 17 00:00:00 2001
From: ModestFun <61576426+ModestFun@users.noreply.github.com>
Date: Thu, 7 Mar 2024 23:02:29 +0800
Subject: [PATCH] :bug: fix: add node will reset viewport (#91)

* :bug: fix: add node will reset viewport

* :bug: fix: recode demo

---------

Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
---
 src/FlowEditor/container/FlowEditor.tsx | 70 +++----------------------
 src/FlowEditor/store/reducers/edge.ts   |  2 +-
 src/FlowView/index.zh-CN.md             | 12 ++---
 3 files changed, 13 insertions(+), 71 deletions(-)

diff --git a/src/FlowEditor/container/FlowEditor.tsx b/src/FlowEditor/container/FlowEditor.tsx
index ed8ea98..a89b4c5 100644
--- a/src/FlowEditor/container/FlowEditor.tsx
+++ b/src/FlowEditor/container/FlowEditor.tsx
@@ -1,7 +1,7 @@
 import { createStyles, cx } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
-import { JSXElementConstructor, forwardRef, useCallback, useEffect, useMemo } from 'react';
+import { JSXElementConstructor, forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import ReactFlow, {
   Background,
@@ -117,6 +117,7 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
     const editor = useFlowEditor();
 
     const nodesInitialized = useNodesInitialized();
+    const firstRender = useRef(false);
 
     const flowInit = useMemo(() => {
       if (nodesInitialized) {
@@ -155,6 +156,10 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
     });
 
     useEffect(() => {
+      if (firstRender.current) {
+        return;
+      }
+      firstRender.current = true;
       // 先把画布的 viewport 设置好
       if (!defaultViewport) {
         instance.fitView();
@@ -168,69 +173,6 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
       }
     }, [nodesInitialized]);
 
-    // const handleNodesChange = useCallback(
-    //   (changes: NodeChange[]) => {
-    //     if (!get().beforeNodesChange(changes)) {
-    //       return;
-    //     }
-    //     // 选择逻辑 nodes 和 edges 一致
-    //     changes.forEach((c) => {
-    //       switch (c.type) {
-    //         case 'add':
-    //           dispatchNodes({ type: 'addNode', node: c.item });
-    //           break;
-    //         case 'position':
-    //           // 结束拖拽时，会触发一次 position，此时 dragging 为 false
-    //           if (!c.dragging) break;
-
-    //           dispatchNodes({ type: 'updateNodePosition', position: c.position, id: c.id });
-
-    //           break;
-    //         case 'remove':
-    //           deselectElement(c.id);
-    //           dispatchNodes({ type: 'deleteNode', id: c.id });
-    //           break;
-    //         case 'select':
-    //           onElementSelectChange(c.id, c.selected);
-    //       }
-    //     });
-
-    //     if (onNodesChange) {
-    //       throttle(onNodesChange, 50)(changes);
-    //     }
-
-    //     if (afterNodesChange) {
-    //       afterNodesChange(changes);
-    //     }
-    //   },
-    //   [onNodesChange],
-    // );
-
-    // const handleEdgesChange = useCallback((changes: EdgeChange[]) => {
-    //   if (!beforeEdgesChange(changes)) {
-    //     return;
-    //   }
-
-    //   // reactflow 的 edges change 事件，只有 select 和 remove
-    //   updateEdgesOnEdgeChange(changes);
-
-    //   // 选择逻辑 nodes 和 edges 一致
-    //   changes.forEach((c) => {
-    //     switch (c.type) {
-    //       case 'select':
-    //         onElementSelectChange(c.id, c.selected);
-    //     }
-    //   });
-
-    //   if (onEdgesChange) {
-    //     onEdgesChange(changes);
-    //   }
-
-    //   if (afterEdgeChange) {
-    //     afterEdgeChange(changes);
-    //   }
-    // }, []);
-
     const handleConnect = useCallback(
       (connection: Connection) => {
         if (!beforeConnect(connection)) {
diff --git a/src/FlowEditor/store/reducers/edge.ts b/src/FlowEditor/store/reducers/edge.ts
index 7d6367e..1660368 100644
--- a/src/FlowEditor/store/reducers/edge.ts
+++ b/src/FlowEditor/store/reducers/edge.ts
@@ -68,7 +68,7 @@ export const edgesReducer = (state: EdgesState, payload: EdgeDispatch): EdgesSta
     case 'updateEdge':
       return produce(state, (draftState) => {
         const { id, edge } = payload;
-        console.log(draftState[id]);
+
         draftState[id] = { ...draftState[id], ...edge };
       });
 
diff --git a/src/FlowView/index.zh-CN.md b/src/FlowView/index.zh-CN.md
index 3e1a22a..d092ab7 100644
--- a/src/FlowView/index.zh-CN.md
+++ b/src/FlowView/index.zh-CN.md
@@ -40,12 +40,12 @@ description: 基础画布容器
 
 #### LayoutOptions
 
-| 属性名  | 类型                           | 描述         | 默认值 | 必选 |
-| ------- | ------------------------------ | ------------ | ------ | ---- |
-| rankdir | `'TB' \| 'BT' \| 'LR' \| 'RL'` | 无级缩放监听 | -      | -    |
-| align   | `'UL' \| 'DL' \| 'UR' \| 'DR'` | 无级缩放监听 | -      | -    |
-| nodesep | `number`                       | 自动布局参数 | -      | -    |
-| ranksep | `number`                       | 自动布局参数 | -      | -    |
+| 属性名  | 类型                           | 描述     | 默认值 | 必选 |
+| ------- | ------------------------------ | -------- | ------ | ---- |
+| rankdir | `'TB' \| 'BT' \| 'LR' \| 'RL'` | 布局样式 | -      | -    |
+| align   | `'UL' \| 'DL' \| 'UR' \| 'DR'` | 左右对齐 | -      | -    |
+| nodesep | `number`                       | 列间距   | -      | -    |
+| ranksep | `number`                       | 行间距   | -      | -    |
 
 ### FlowViewNode