fix: monitor changes in the data.form field of the categorize and relevant operators and then synchronize them to the edge #918 (#1469)

### What problem does this PR solve?
feat: monitor changes in the table of relevant operators and synchronize
them to the edge #918
feat: fixed the issue of repeated requests when opening the graph page
#918
feat: cache node anchor coordinate information #918
feat: monitor changes in the data.form field of the categorize and
relevant operators and then synchronize them to the edge #918
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/flow/categorize-form/hooks.ts

@@ -1,12 +1,10 @@
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { useCallback, useEffect } from 'react';
-import { Edge, Node } from 'reactflow';
 import {
   ICategorizeItem,
   ICategorizeItemResult,
   IOperatorForm,
-  NodeData,
 } from '../interface';
 import useGraphStore from '../store';
 
@@ -23,18 +21,14 @@ import useGraphStore from '../store';
 */
 const buildCategorizeListFromObject = (
   categorizeItem: ICategorizeItemResult,
-  edges: Edge[],
-  node?: Node<NodeData>,
 ) => {
   // Categorize's to field has two data sources, with edges as the data source.
   // Changes in the edge or to field need to be synchronized to the form field.
   return Object.keys(categorizeItem).reduce<Array<ICategorizeItem>>(
     (pre, cur) => {
       // synchronize edge data to the to field
-      const edge = edges.find(
-        (x) => x.source === node?.id && x.sourceHandle === cur,
-      );
-      pre.push({ name: cur, ...categorizeItem[cur], to: edge?.target });
+
+      pre.push({ name: cur, ...categorizeItem[cur] });
       return pre;
     },
     [],
@@ -68,7 +62,6 @@ export const useHandleFormValuesChange = ({
   form,
   nodeId,
 }: IOperatorForm) => {
-  const edges = useGraphStore((state) => state.edges);
   const getNode = useGraphStore((state) => state.getNode);
   const node = getNode(nodeId);
 
@@ -86,13 +79,12 @@ export const useHandleFormValuesChange = ({
   useEffect(() => {
     const items = buildCategorizeListFromObject(
       get(node, 'data.form.category_description', {}),
-      edges,
-      node,
     );
+    console.info('effect:', items);
     form?.setFieldsValue({
       items,
     });
-  }, [form, node, edges]);
+  }, [form, node]);
 
   return { handleValuesChange };
 };