feat: Extract the code for building categorize operator coordinates to hooks.ts #1739 (#2005)

### What problem does this PR solve?

feat: Extract the code for building categorize operator coordinates to
hooks.ts #1739

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/canvas/node/hooks.ts

@@ -0,0 +1,77 @@
+import get from 'lodash/get';
+import intersectionWith from 'lodash/intersectionWith';
+import isEqual from 'lodash/isEqual';
+import pick from 'lodash/pick';
+import { useEffect, useMemo, useState } from 'react';
+import { useUpdateNodeInternals } from 'reactflow';
+import { IPosition, NodeData } from '../../interface';
+import { buildNewPositionMap } from '../../utils';
+
+export const useBuildCategorizeHandlePositions = ({
+  data,
+  id,
+}: {
+  id: string;
+  data: NodeData;
+}) => {
+  const updateNodeInternals = useUpdateNodeInternals();
+  const [positionMap, setPositionMap] = useState<Record<string, IPosition>>({});
+  const categoryData = useMemo(
+    () => get(data, 'form.category_description') ?? {},
+    [data],
+  );
+
+  const positions = useMemo(() => {
+    return Object.keys(categoryData)
+      .map((x) => {
+        const position = positionMap[x];
+        return { text: x, ...position };
+      })
+      .filter((x) => typeof x?.right === 'number');
+  }, [categoryData, positionMap]);
+
+  useEffect(() => {
+    // Cache used coordinates
+    setPositionMap((state) => {
+      // index in use
+      const indexesInUse = Object.values(state).map((x) => x.idx);
+      const categoryDataKeys = Object.keys(categoryData);
+      const stateKeys = Object.keys(state);
+      if (!isEqual(categoryDataKeys.sort(), stateKeys.sort())) {
+        const intersectionKeys = intersectionWith(
+          stateKeys,
+          categoryDataKeys,
+          (categoryDataKey, postionMapKey) => categoryDataKey === postionMapKey,
+        );
+        const newPositionMap = buildNewPositionMap(
+          categoryDataKeys.filter(
+            (x) => !intersectionKeys.some((y) => y === x),
+          ),
+          indexesInUse,
+        );
+
+        const nextPositionMap = {
+          ...pick(state, intersectionKeys),
+          ...newPositionMap,
+        };
+
+        return nextPositionMap;
+      }
+      return state;
+    });
+  }, [categoryData]);
+
+  useEffect(() => {
+    updateNodeInternals(id);
+  }, [id, updateNodeInternals, positionMap]);
+
+  return { positions };
+};
+
+export const useBuildSwitchHandlePositions = ({
+  data,
+  id,
+}: {
+  id: string;
+  data: NodeData;
+}) => {};