docs: react节点添加一个组合scroll-canvas的FAQ

packages/site/docs/manual/element/node/react-node.en.md

@@ -243,6 +243,87 @@ const graph = new Graph({
 });
 ```
 
+## FAQ
+
+### 1. With scroll-canvas enabled, scrolling is not triggered when the cursor is on a custom React node.
+
+Simply add an `onWheel` event to your React custom node and forward it to the canvas DOM element.
+
+```js | ob { inject: true }
+import { DatabaseFilled } from '@ant-design/icons';
+import { ExtensionCategory, Graph, register } from '@antv/g6';
+import { ReactNode } from '@antv/g6-extension-react';
+import { Badge, Flex, Input, Tag, Typography } from 'antd';
+import { useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+
+const { Text } = Typography;
+register(ExtensionCategory.NODE, 'react', ReactNode);
+
+const Node = ({ data, onChange, graph }) => {
+  const { status, type } = data.data;
+  const ref = useRef();
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.parentNode.addEventListener('wheel', (e) => e.preventDefault());
+    }
+  }, []);
+
+  return (
+    <Flex
+      ref={ref}
+      onWheel={(e) => {
+        // Forward the event to the canvas DOM element
+        const canvas = graph.context.graph.getCanvas().getContextService().getDomElement();
+        const evt = new WheelEvent('wheel', e.nativeEvent);
+        canvas.dispatchEvent(evt);
+      }}
+      style={{ background: '#fff', padding: 10, borderRadius: 5, border: '1px solid gray' }}
+      vertical
+    >
+      <Flex align="center" justify="space-between">
+        <Text>
+          <DatabaseFilled />
+          Server
+          <Tag>{type}</Tag>
+        </Text>
+        <Badge status={status} />
+      </Flex>
+      <Text type="secondary">{data.id}</Text>
+    </Flex>
+  );
+};
+
+export const ReactNodeDemo = () => {
+  const containerRef = useRef();
+
+  useEffect(() => {
+    const graph = new Graph({
+      container: containerRef.current,
+      data: {
+        nodes: [{ id: 'remote-server-1', data: { status: 'warning', type: 'remote' }, style: { x: 150, y: 50 } }],
+      },
+      node: {
+        type: 'react',
+        style: {
+          size: [240, 75],
+          component: function (data) {
+            return <Node data={data} graph={this} />;
+          },
+        },
+      },
+      behaviors: ['drag-element', 'scroll-canvas', 'drag-canvas'],
+    });
+    graph.render();
+  }, []);
+
+  return <div style={{ width: '100%', height: 200 }} ref={containerRef}></div>;
+};
+
+const root = createRoot(document.getElementById('container'));
+root.render(<ReactNodeDemo />);
+```
+
 ## Real Cases
 
 ```js | ob { inject: true }

packages/site/docs/manual/element/node/react-node.zh.md

@@ -243,6 +243,87 @@ const graph = new Graph({
 });
 ```
 
+## 常见问题
+
+### 1. 开启 scroll-canvas, 光标在React自定义节点上无法触发滚动
+
+给React自定义节点添加`onWheel`事件，并转发到画布DOM元素上即可。
+
+```js | ob { inject: true }
+import { DatabaseFilled } from '@ant-design/icons';
+import { ExtensionCategory, Graph, register } from '@antv/g6';
+import { ReactNode } from '@antv/g6-extension-react';
+import { Badge, Flex, Input, Tag, Typography } from 'antd';
+import { useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+
+const { Text } = Typography;
+register(ExtensionCategory.NODE, 'react', ReactNode);
+
+const Node = ({ data, onChange, graph }) => {
+  const { status, type } = data.data;
+  const ref = useRef();
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.parentNode.addEventListener('wheel', (e) => e.preventDefault());
+    }
+  }, []);
+
+  return (
+    <Flex
+      ref={ref}
+      onWheel={(e) => {
+        // 转发事件到画布Dom元素上
+        const canvas = graph.context.graph.getCanvas().getContextService().getDomElement();
+        const evt = new WheelEvent('wheel', e.nativeEvent);
+        canvas.dispatchEvent(evt);
+      }}
+      style={{ background: '#fff', padding: 10, borderRadius: 5, border: '1px solid gray' }}
+      vertical
+    >
+      <Flex align="center" justify="space-between">
+        <Text>
+          <DatabaseFilled />
+          Server
+          <Tag>{type}</Tag>
+        </Text>
+        <Badge status={status} />
+      </Flex>
+      <Text type="secondary">{data.id}</Text>
+    </Flex>
+  );
+};
+
+export const ReactNodeDemo = () => {
+  const containerRef = useRef();
+
+  useEffect(() => {
+    const graph = new Graph({
+      container: containerRef.current,
+      data: {
+        nodes: [{ id: 'remote-server-1', data: { status: 'warning', type: 'remote' }, style: { x: 150, y: 50 } }],
+      },
+      node: {
+        type: 'react',
+        style: {
+          size: [240, 75],
+          component: function (data) {
+            return <Node data={data} graph={this} />;
+          },
+        },
+      },
+      behaviors: ['drag-element', 'scroll-canvas', 'drag-canvas'],
+    });
+    graph.render();
+  }, []);
+
+  return <div style={{ width: '100%', height: 200 }} ref={containerRef}></div>;
+};
+
+const root = createRoot(document.getElementById('container'));
+root.render(<ReactNodeDemo />);
+```
+
 ## 实际案例
 
 ```js | ob { inject: true }

packages/site/examples/element/custom-node/demo/react-node.jsx

@@ -9,11 +9,26 @@ const { Text } = Typography;
 
 register(ExtensionCategory.NODE, 'react', ReactNode);
 
-const Node = ({ data, onChange }) => {
+const Node = ({ data, onChange, graph }) => {
   const { status, type } = data.data;
+  const ref = useRef();
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.parentNode.addEventListener('wheel', (e) => {
+        e.preventDefault();
+      });
+    }
+  }, []);
 
   return (
     <Flex
+      ref={ref}
+      onWheel={(e) => {
+        // 转发事件到画布Dom元素上
+        const canvas = graph.context.graph.getCanvas().getContextService().getDomElement();
+        const evt = new WheelEvent('wheel', e.nativeEvent);
+        canvas.dispatchEvent(evt);
+      }}
       style={{
         width: '100%',
         height: '100%',
@@ -76,10 +91,12 @@ export const ReactNodeDemo = () => {
         type: 'react',
         style: {
           size: [240, 100],
-          component: (data) => <Node data={data} />,
+          component: function (data) {
+            return <Node data={data} graph={this} />;
+          },
         },
       },
-      behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
+      behaviors: ['drag-element', 'scroll-canvas', 'drag-canvas'],
     });
 
     graph.render();