🐛 fix: add node will reset viewport

ant-design · Mar 7, 2024 · fa60abc · fa60abc
1 parent c291e42
commit fa60abc
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 71 deletions.
diff --git a/docs/guide/demos/flowViewIntro/autoFlow.tsx b/docs/guide/demos/flowViewIntro/autoFlow.tsx
@@ -14,6 +14,12 @@ function App() {
       <FlowView
         nodes={nodes}
         edges={edges}
+        layoutOptions={{
+          rankdir: 'BT',
+          align: 'DL',
+          nodesep: 1000,
+          ranksep: 500,
+        }}
         onEdgeClick={(e, edge) => {
           console.log(edge);
         }}

diff --git 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
@@ -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
@@ -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