实用程序类

¥Utility Classes

React Flow 提供了几个内置的实用 CSS 类，可帮助你微调自定义元素中的交互方式。

¥React Flow provides several built-in utility CSS classes to help you fine-tune how interactions work within your custom elements.

nodrag

将 nodrag 类添加到元素可确保与其交互不会触发拖动。这对于按钮或输入框等在点击时不应触发拖动操作的元素尤其有用。

¥Adding the class nodrag to an element ensures that interacting with it doesn’t trigger a drag. This is particularly useful for elements like buttons or inputs that should not initiate a drag operation when clicked.

默认情况下，节点具有 drag 类名。但是，这个类名会影响自定义节点内事件监听器的行为。为了防止意外行为，请向具有事件监听器的元素添加 nodrag 类名。当单击具有此类的元素时，这会阻止默认拖动行为以及默认节点选择行为。

¥Nodes have a drag class name in place by default. However, this class name can affect the behaviour of the event listeners inside your custom nodes. To prevent unexpected behaviours, add a nodrag class name to elements with an event listener. This prevents the default drag behavior as well as the default node selection behavior when elements with this class are clicked.

export default function CustomNode(props: NodeProps) {
  return (
    <div>
      <input className="nodrag" type="range" min={0} max={100} />
    </div>
  );
}

nopan

如果画布中的某个元素不阻止鼠标事件传播，则点击并拖动该元素将平移视口。添加 “nopan” 类可以阻止此行为，此属性允许你更改该类的名称。

¥If an element in the canvas does not stop mouse events from propagating, clicking and dragging that element will pan the viewport. Adding the “nopan” class prevents this behavior and this prop allows you to change the name of that class.

export default function CustomNode(props: NodeProps) {
  return (
    <div className="nopan">
      <p>fixed content...</p>
    </div>
  );
}

nowheel

如果你的自定义元素包含可滚动内容，则可以应用 nowheel 类。当你在自定义节点内滚动时，这会禁用画布的默认平移行为，确保只有内容滚动而不是移动整个画布。

¥If your custom element contains scrollable content, you can apply the nowheel class. This disables the canvas’ default pan behavior when you scroll inside your custom node, ensuring that only the content scrolls instead of moving the entire canvas.

export default function CustomNode(props: NodeProps) {
  return (
    <div className="nowheel" style={{ overflow: 'auto' }}>
      <p>Scrollable content...</p>
    </div>
  );
}

应用这些实用程序类可帮助你在粒度级别上控制交互。你可以在 React Flow 的 样式属性 中自定义这些类名。

¥Applying these utility classes helps you control interaction on a granular level. You can customize these class names inside React Flow’s style props.