Skip to content

Commit

Permalink
✨ feat: nodes and edges life cycle (#87)
Browse files Browse the repository at this point in the history 
* 🐛 fix: flow view docs

* ✨ feat: add nodes onchange

* ✨ feat: flow editor nodesChange cb done

* ✨ feat: flow editor edge change

* ✨ feat: basic node render

* 🐛 fix: demo refix

* ✨ feat: on node change

* 🐛 feat: new nodes change life cycle

* 🐛 feat: ci

* 🐛 fix: some thing

* 🐛 fix: flow provider ci

* 🐛 fix: rm repeat call

---------

Co-authored-by: jiangchu <[email protected]>
  • Loading branch information
@ModestFun
ModestFun and jiangchu authored Feb 29, 2024
1 parent 6af4eeb commit 49c0349
Show file tree
Hide file tree
Showing 14 changed files with 388 additions and 140 deletions.
8 changes: 5 additions & 3 deletions src/BasicGroupNode/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,13 @@ const BasicNodeGroup: React.FC<{
style={{
position: 'absolute',
zIndex: 10,
top: `-${zoomNum(24, zoom, true)}px`,
padding: `${2 / zoom}px ${1 / zoom}px ${2 / zoom}px 0`,
transform: `translate(0, -${zoomNum(20, zoom, true)}px) scale(${1 / zoom})`,
// top: `-${zoomNum(24, zoom, true)}px`,
// padding: `${2 / zoom}px ${1 / zoom}px ${2 / zoom}px 0`,
color: `rgba(0, 0, 0, 0.45)`,
borderRadius: `4px`,
fontSize: `${14 / zoom}px`,
// fontSize: `${14 / zoom}px`,
fontSize: `${14}px`,
whiteSpace: `nowrap`,
}}
>
Expand Down
8 changes: 5 additions & 3 deletions src/BasicNode/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,13 @@ const BasicNode: React.FC<{
style={{
position: 'absolute',
zIndex: 10,
top: `-${zoomNum(24, zoom, true)}px`,
padding: `${2 / zoom}px ${1 / zoom}px ${2 / zoom}px 0`,
transform: `translate(0, -${zoomNum(20, zoom, true)}px) scale(${1 / zoom})`,
// top: `-${zoomNum(24, zoom, true)}px`,
// padding: `${2 / zoom}px ${1 / zoom}px ${2 / zoom}px 0`,
color: `rgba(0, 0, 0, 0.45)`,
borderRadius: `4px`,
fontSize: `${14 / zoom}px`,
// fontSize: `${14 / zoom}px`,
fontSize: `${14}px`,
whiteSpace: `nowrap`,
}}
>
Expand Down
192 changes: 87 additions & 105 deletions src/FlowEditor/container/FlowEditor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import { createStyles, cx } from 'antd-style';
import isEqual from 'fast-deep-equal';
import { debounce, throttle } from 'lodash-es';
import { debounce } from 'lodash-es';
import { JSXElementConstructor, forwardRef, useCallback, useEffect, useMemo } from 'react';
import { Flexbox } from 'react-layout-kit';
import ReactFlow, {
Background,
BackgroundVariant,
Connection,
Edge,
EdgeChange,
Node,
NodeChange,
NodeTypes,
SelectionMode,
Viewport,
Expand Down Expand Up @@ -72,13 +70,13 @@ export interface FlowEditorAppProps {
onNodesInitChange?: (init: boolean) => void;

// nodes 事件
beforeNodesChange?: (changes: NodeChange[]) => boolean;
onNodesChange?: (changes: NodeChange[]) => void;
afterNodesChange?: (changes: NodeChange[]) => void;
// beforeNodesChange?: (changes: NodeChange[]) => boolean;
// onNodesChange?: (changes: NodeChange[]) => void;
// afterNodesChange?: (changes: NodeChange[]) => void;
// edges 事件
beforeEdgesChange?: (changes: EdgeChange[]) => boolean;
onEdgesChange?: (changes: EdgeChange[]) => void;
afterEdgeChange?: (changes: EdgeChange[]) => void;
// beforeEdgesChange?: (changes: EdgeChange[]) => boolean;
// onEdgesChange?: (changes: EdgeChange[]) => void;
// afterEdgeChange?: (changes: EdgeChange[]) => void;
// connection 事件
beforeConnect?: (connection: Connection) => boolean;
onConnect?: (connection: Connection) => void;
Expand All @@ -105,17 +103,10 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
background = true,
miniMap = true,
onNodesInit,
beforeNodesChange = () => true,
onNodesChange = () => {},
afterNodesChange = () => {},

beforeConnect = () => true,
onConnect = () => {},
afterConnect = () => {},

beforeEdgesChange = () => true,
onEdgesChange,
afterEdgeChange = () => {},
},
ref,
) => {
Expand All @@ -140,23 +131,17 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
}, [nodes, nodesInitialized]);

const [
// onNodesChange,
handleNodesChange,
handleEdgesChange,
updateEdgesOnConnection,
updateEdgesOnEdgeChange,
onViewPortChange,
onElementSelectChange,
// onEdgesChange,
dispatchNodes,
deselectElement,
] = useStore((s) => [
// s.onNodesChange,
s.handleNodesChange,
s.handleEdgesChange,
s.updateEdgesOnConnection,
s.updateEdgesOnEdgeChange,
s.onViewPortChange,
s.onElementSelectChange,
// s.onEdgesChange,
s.dispatchNodes,
s.deselectElement,
]);

const instance = useReactFlow();
Expand All @@ -183,90 +168,87 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
}
}, [nodesInitialized]);

const handleNodesChange = useCallback((changes: NodeChange[]) => {
if (!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);
// 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)) {
return;
}
});

if (onNodesChange) {
throttle(onNodesChange, 50)(changes);
}

if (afterNodesChange) {
afterNodesChange(changes);
}
}, []);

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 (onConnect) {
onConnect(connection);
}
});

if (onEdgesChange) {
onEdgesChange(changes);
}
const edge = updateEdgesOnConnection(connection);

if (afterEdgeChange) {
afterEdgeChange(changes);
}
}, []);

const handleConnect = useCallback((connection: Connection) => {
if (!beforeConnect(connection)) {
return;
}

if (onConnect) {
onConnect(connection);
}

const edge = updateEdgesOnConnection(connection);

if (afterConnect && edge) {
// 触发 edges change 事件
handleEdgesChange([
{
item: edge,
type: 'add',
},
]);

afterConnect(edge);
}
}, []);
if (afterConnect && edge) {
afterConnect(edge);
}
},
[onConnect, beforeConnect, afterConnect],
);

return (
<Flexbox height={'100%'} width={'100%'} style={{ position: 'relative' }}>
Expand Down
14 changes: 14 additions & 0 deletions src/FlowEditor/container/StoreUpdater/Common.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,13 @@ export interface CommonUpdaterProps
FlowEditorStore,
| 'flattenEdges'
| 'onEdgesChange'
| 'beforeEdgesChange'
| 'afterEdgesChange'
| 'flattenNodes'
| 'onFlattenNodesChange'
| 'onNodesChange'
| 'beforeNodesChange'
| 'afterNodesChange'
| 'onFlattenEdgesChange'
| 'onNodesTreeChange'
>
Expand All @@ -27,7 +31,11 @@ export interface CommonUpdaterProps
const CommonStoreUpdater: FC<CommonUpdaterProps> = ({
onFlattenNodesChange,
onNodesChange,
beforeNodesChange,
afterNodesChange,
onEdgesChange,
beforeEdgesChange,
afterEdgesChange,
onFlattenEdgesChange,
onNodesTreeChange,
editorRef,
Expand All @@ -46,7 +54,13 @@ const CommonStoreUpdater: FC<CommonUpdaterProps> = ({
useStoreUpdater('onFlattenEdgesChange', onFlattenEdgesChange);

useStoreUpdater('onNodesChange', onNodesChange);
useStoreUpdater('beforeNodesChange', beforeNodesChange);
useStoreUpdater('afterNodesChange', afterNodesChange);

useStoreUpdater('onEdgesChange', onEdgesChange);
useStoreUpdater('beforeEdgesChange', beforeEdgesChange);
useStoreUpdater('afterEdgesChange', afterEdgesChange);

useStoreUpdater('onNodesTreeChange', onNodesTreeChange);

// 将 store 传递到外部
Expand Down
8 changes: 8 additions & 0 deletions src/FlowEditor/container/StoreUpdater/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,12 @@ const StoreUpdater: FC<StoreUpdaterProps> = ({
flattenNodes,
onFlattenNodesChange,
onNodesChange,
beforeNodesChange,
afterNodesChange,
flattenEdges,
onEdgesChange,
beforeEdgesChange,
afterEdgesChange,
onFlattenEdgesChange,
onNodesTreeChange,
onViewPortChange,
Expand Down Expand Up @@ -55,6 +59,10 @@ const StoreUpdater: FC<StoreUpdaterProps> = ({
editorRef={editorRef}
onEdgesChange={onEdgesChange}
onNodesChange={onNodesChange}
beforeNodesChange={beforeNodesChange}
beforeEdgesChange={beforeEdgesChange}
afterEdgesChange={afterEdgesChange}
afterNodesChange={afterNodesChange}
onNodesTreeChange={onNodesTreeChange}
onFlattenEdgesChange={onFlattenEdgesChange}
onFlattenNodesChange={onFlattenNodesChange}
Expand Down
24 changes: 12 additions & 12 deletions src/FlowEditor/container/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ const FlowEditor = forwardRef<any, FlowEditorProps>(
onNodesInit,

// edge change
beforeEdgesChange,
onEdgesChange,
afterEdgeChange,
// beforeEdgesChange,
// onEdgesChange,
// afterEdgeChange,

// node change
beforeNodesChange,
onNodesChange,
afterNodesChange,
// beforeNodesChange,
// onNodesChange,
// afterNodesChange,

// Connect
beforeConnect,
Expand All @@ -50,13 +50,13 @@ const FlowEditor = forwardRef<any, FlowEditorProps>(
miniMap={miniMap}
background={background}
onNodesInit={onNodesInit}
beforeNodesChange={beforeNodesChange}
beforeEdgesChange={beforeEdgesChange}
// beforeNodesChange={beforeNodesChange}
// beforeEdgesChange={beforeEdgesChange}
beforeConnect={beforeConnect}
onEdgesChange={onEdgesChange}
afterEdgeChange={afterEdgeChange}
onNodesChange={onNodesChange}
afterNodesChange={afterNodesChange}
// onEdgesChange={onEdgesChange}
// afterEdgeChange={afterEdgeChange}
// onNodesChange={onNodesChange}
// afterNodesChange={afterNodesChange}
onConnect={onConnect}
afterConnect={afterConnect}
contextMenuEnabled={contextMenuEnabled}
Expand Down
Loading

0 comments on commit 49c0349

Please sign in to comment.