Feat: Modify the anchor point positioning of the classification operator node #3221 (#8299)

### What problem does this PR solve?

Feat: Modify the anchor point positioning of the classification operator
node #3221

### Type of change


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

web/src/pages/agent/form/switch-form/index.tsx

@@ -27,9 +27,9 @@ import {
 } from '../../constant';
 import { useBuildFormSelectOptions } from '../../form-hooks';
 import { useBuildComponentIdAndBeginOptions } from '../../hooks/use-get-begin-query';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
 import { IOperatorForm } from '../../interface';
 import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
 
 const ConditionKey = 'conditions';
 const ItemKey = 'items';

web/src/pages/agent/form/switch-form/use-watch-change.ts

@@ -0,0 +1,23 @@
+import { ISwitchCondition } from '@/interfaces/database/agent';
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import useGraphStore from '../../store';
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id && form?.formState.isDirty) {
+      values = form?.getValues();
+      let nextValues: any = {
+        ...values,
+        conditions:
+          values?.conditions?.map((x: ISwitchCondition) => ({ ...x })) ?? [], // Changing the form value with useFieldArray does not change the array reference
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}