Reaflow panning功能异常，结合react-zoom-pan-pinch出现视口偏移问题

一、修复Reaflow自带平移功能 #

Reaflow的Canvas组件默认支持平移，但点击画布任意位置拖动无效，可通过以下方式修复：

• 显式设置pannable={true}开启平移（虽默认开启，显式声明更稳妥）
• 确保画布占满容器，避免事件触发区域不足
• 移除可能拦截鼠标事件的外层元素样式

修改后的基础示例：

import React from 'react';
import { Canvas } from 'reaflow';

export function App(props) {
  return (
    <div className='App' style={{ height: 400, width: 700, position: 'relative', background: '#f5f5f5' }}>
      <Canvas
        pannable={true}
        nodes={[
          { id: '1', text: '1' },
          { id: '2', text: '2' },
          { id: '3', text: '3' },
          { id: '4', text: '4' }
        ]}
        edges={[
          { id: '1-2', from: '1', to: '2' },
          { id: '1-3', from: '1', to: '3' },
          { id: '2-3', from: '2', to: '3' },
          { id: '3-4', from: '3', to: '4' }
        ]}
        style={{ width: '100%', height: '100%' }}
      />
    </div>
  );
}

二、解决react-zoom-pan-pinch视口溢出问题 #

使用react-zoom-pan-pinch时流程图移出视口，需通过配置限制内容边界，并避免与Reaflow自带平移冲突：

1. 给TransformWrapper添加limitToBounds={true}，限制内容不超出容器
2. 禁用Reaflow的pannable，防止事件冲突
3. 外层容器设置overflow: hidden，隐藏溢出内容

调整后的代码：

import React from 'react';
import { Canvas } from 'reaflow';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'

export function App(props) {
  return (
    <div className='App' style={{ height: 400, width: 700, position: 'relative', background: 'white', overflow: 'hidden' }}>
      <TransformWrapper
        limitToBounds={true}
        initialScale={1}
        minScale={1}
        maxScale={3}
      >
        <TransformComponent>
          <Canvas
            pannable={false}
            nodes={[
              { id: '1', text: '1' },
              { id: '2', text: '2' },
              { id: '3', text: '3' },
              { id: '4', text: '4' }
            ]}
            edges={[
              { id: '1-2', from: '1', to: '2' },
              { id: '1-3', from: '1', to: '3' },
              { id: '2-3', from: '2', to: '3' },
              { id: '3-4', from: '3', to: '4' }
            ]}
            style={{ width: '100%', height: '100%' }}
          />
        </TransformComponent>
      </TransformWrapper>
    </div>
  );
}

核心注意事项 #

• 禁止同时启用Reaflow自带平移和react-zoom-pan-pinch的平移，会导致鼠标事件冲突
• 确保画布尺寸与容器匹配，避免触发区域异常
• 若需自定义平移边界，可通过react-zoom-pan-pinch的boundsPadding参数调整留白

内容的提问来源于stack exchange，提问作者Himanshu Arora