[Bug]: After scroll-canvas is enabled, the cursor cannot trigger scrolling on the React custom node #6846

感谢您报告这个问题。您提到在使用 G6 的 React 自定义节点示例时，移除 zoom-canvas 并添加 scroll-canvas 后，无法在节点上滚动画布。

这个问题可能与事件处理有关，因为 React 自定义节点可能会阻止滚动事件冒泡到画布层。为了进一步调查和解决这个问题，我建议您检查以下几点：

1. 事件冒泡：确保滚动事件没有被 React 组件阻止。您可以尝试在 React 组件中添加事件监听器，并调用 event.stopPropagation() 来查看是否有影响。

2. G6 配置：检查 G6 的配置，确保 scroll-canvas 插件正确初始化并启用。

3. 浏览器控制台：查看浏览器控制台是否有任何错误信息，这可能提供更多的调试信息。

如果这些方法没有解决问题，您可以考虑在 G6 的 GitHub 仓库中查看是否有类似的问题被报告，或者创建一个新的 issue 以便开发团队能够进一步调查。

如果您需要进一步的帮助，请随时告诉我！

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

目前临时方法： 监听节点（开发自定义节点的父级）的wheel事件，阻止默认行为（防止触发页面滚动），然后将节点pointer-events设为none；为防止点击等其他事件不触发，设置100ms定时后放开pointer-events

@zhaoyouxin zoom canvas 也可以用这个方案

/**
 * Automatically disable pointer events so that
 * - wheel event:  zoom-canvas/scroll-canvas can work well
 * - shift key event: brush-select can work well
 * */
export function useDisablePointerEvents(graphContainerRef: React.RefObject<HTMLElement>) {
  const wheelTimerRef = useRef<number | null>(null);
  const container = graphContainerRef.current;
  const shiftKeyActiveRef = useRef(false);

  const handleWheel = (event: WheelEvent) => {
    const temporaryClassName = styles.disable_pointer_events;
    event.preventDefault();

    const cameraElement = container?.querySelector('#g-canvas-camera');
    if (!cameraElement) return;

    if (cameraElement && temporaryClassName) {
      cameraElement.classList.add(temporaryClassName);
      wheelTimerRef.current && clearTimeout(wheelTimerRef.current);
      wheelTimerRef.current = window.setTimeout(() => {
        cameraElement.classList.remove(temporaryClassName);
      }, 100);
    }
  };

  const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === 'Shift' && !shiftKeyActiveRef.current) {
      shiftKeyActiveRef.current = true;

      const cameraElement = container?.querySelector('#g-canvas-camera');
      if (!cameraElement) return;

      const temporaryClassName = styles.disable_pointer_events;
      temporaryClassName && cameraElement.classList.add(temporaryClassName);
    }
  };

  const handleKeyUp = (event: KeyboardEvent) => {
    if (event.key === 'Shift' && shiftKeyActiveRef.current) {
      shiftKeyActiveRef.current = false;

      const cameraElement = container?.querySelector('#g-canvas-camera');
      if (!cameraElement) return;

      const temporaryClassName = styles.disable_pointer_events;
      temporaryClassName && cameraElement.classList.remove(temporaryClassName);
    }
  };

  useEffect(() => {
    container?.addEventListener('wheel', handleWheel);
    container?.addEventListener('keydown', handleKeyDown);
    container?.addEventListener('keyup', handleKeyUp);

    return () => {
      container?.removeEventListener('wheel', handleWheel);
      container?.removeEventListener('keydown', handleKeyDown);
      container?.removeEventListener('keyup', handleKeyUp);
      if (wheelTimerRef.current) {
        clearTimeout(wheelTimerRef.current);
      }
    };
  }, [container]);
}

the style:

.disable_pointer_events,
.disable_pointer_events > div {
  pointer-events: none !important;
}

a better choice is if we can get a behavior state (enable or not), listening to mouse/keyboard event have no robustness