实用程序类

🌐 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.