feat: Add hint for operators, round to square, input variable, readable operator ID. #3056 (#3057)

### What problem does this PR solve?

feat: Add hint for operators, round to square, input variable, readable
operator ID. #3056

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/pages/flow/canvas/node/note-node.tsx

@@ -1,20 +1,33 @@
-import { Flex, Form, Input, Space } from 'antd';
-import { NodeProps } from 'reactflow';
+import { Flex, Form, Input } from 'antd';
+import classNames from 'classnames';
+import { NodeProps, NodeResizeControl } from 'reactflow';
 import { NodeData } from '../../interface';
 import NodeDropdown from './dropdown';
 
 import SvgIcon from '@/components/svg-icon';
-import { useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHandleFormValuesChange } from '../../hooks';
+import {
+  useHandleFormValuesChange,
+  useHandleNodeNameChange,
+} from '../../hooks';
 import styles from './index.less';
 
 const { TextArea } = Input;
 
+const controlStyle = {
+  background: 'transparent',
+  border: 'none',
+};
+
 function NoteNode({ data, id }: NodeProps<NodeData>) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
 
+  const { name, handleNameBlur, handleNameChange } = useHandleNodeNameChange({
+    id,
+    data,
+  });
   const { handleValuesChange } = useHandleFormValuesChange(id);
 
   useEffect(() => {
@@ -22,25 +35,51 @@ function NoteNode({ data, id }: NodeProps<NodeData>) {
   }, [form, data?.form]);
 
   return (
-    <section className={styles.noteNode}>
-      <Flex justify={'space-between'}>
-        <Space size={'small'}>
+    <>
+      <NodeResizeControl style={controlStyle} minWidth={190} minHeight={128}>
+        <SvgIcon
+          name="resize"
+          width={12}
+          style={{
+            position: 'absolute',
+            right: 5,
+            bottom: 5,
+            cursor: 'nwse-resize',
+          }}
+        ></SvgIcon>
+      </NodeResizeControl>
+      <section className={styles.noteNode}>
+        <Flex
+          justify={'space-between'}
+          className={classNames(styles.noteTitle, 'note-drag-handle')}
+          align="center"
+          gap={6}
+        >
           <SvgIcon name="note" width={14}></SvgIcon>
-          <span className={styles.noteTitle}>{t('flow.note')}</span>
-        </Space>
-        <NodeDropdown id={id}></NodeDropdown>
-      </Flex>
-      <Form
-        onValuesChange={handleValuesChange}
-        form={form}
-        className={styles.noteForm}
-      >
-        <Form.Item name="text" noStyle>
-          <TextArea rows={3} placeholder={t('flow.notePlaceholder')} />
-        </Form.Item>
-      </Form>
-    </section>
+          <Input
+            value={name ?? t('flow.note')}
+            onBlur={handleNameBlur}
+            onChange={handleNameChange}
+            className={styles.noteName}
+          ></Input>
+          <NodeDropdown id={id}></NodeDropdown>
+        </Flex>
+        <Form
+          onValuesChange={handleValuesChange}
+          form={form}
+          className={styles.noteForm}
+        >
+          <Form.Item name="text" noStyle>
+            <TextArea
+              rows={3}
+              placeholder={t('flow.notePlaceholder')}
+              className={styles.noteTextarea}
+            />
+          </Form.Item>
+        </Form>
+      </section>
+    </>
   );
 }
 
-export default NoteNode;
+export default memo(NoteNode);