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( const editor = useFlowEditor(); const nodesInitialized = useNodesInitialized(); + const firstRender = useRef(false); const flowInit = useMemo(() => { if (nodesInitialized) { @@ -155,6 +156,10 @@ const FlowEditor = forwardRef( }); useEffect(() => { + if (firstRender.current) { + return; + } + firstRender.current = true; // 先把画布的 viewport 设置好 if (!defaultViewport) { instance.fitView(); @@ -168,69 +173,6 @@ const FlowEditor = forwardRef( } }, [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