Drag and click nodes

Hello dear react flow team, we are currently working on the interaction to move the diagram for our users. There are multiple ways to move the position of the diagram and we are trying to find the most native implementation possible. Therefor our users can interact with our diagram on mobile as well as on desktop devices. To move the diagram around it is possible to drag the pane and move the diagram where desired. The only thing that we cannot yet achieve, is the dragging of the diagram if you touch a node instead of the pane. For example, if a user interacts on a mobile phone, it is common that you can drag everywhere on a draggle area. By now our users need to avoid, trying moving the diagram by accidentally selecting a node and can instead only touch in between nodes. I am aware that there is an option called elementsSelectable that we can set to false. This would be the perfect behaviour if we only had representational nodes. In fact our interaction on click of the nodes is essential to our application. We show the data of this node to view and change it accordingly. Is there somehow a way that it would be possible to track down an onClick as well as an onDragStart event for nodes to get the desired effect? Thanks in advance

[Holybasil]

In fact, NoPanClassName is added to node by default so panning does not allowed on nodes.

// src/components/Nodes/wrapNode.tsx
const nodeClasses = cc([
      'react-flow__node',
      `react-flow__node-${type}`,
      noPanClassName,     // here
      className,
      {
        selected,
        selectable: isSelectable,
        parent: isParent,
      },
]);

// src/containers/ZoomPane/index.tsx
// event.type === "mousedown"
if (isWrappedWithClass(event, noPanClassName) && event.type !== 'wheel') {
        return false;
}

Is it possible to optionally add class names to Node or Edge. This allows to pan on the node when panOnDrag is set to true while nodesDraggable and elementsSelectable are both false .

Here is a possible use case.

const [mode, setMode] = useState(1)
<ReactFlow 
    nodesDraggable={mode === 1}
    elementsSelectable={mode === 1}
    panOnDrag={mode === 2}
    possibleAttribute={mode === 2}
    >
</ReactFlow>

[TheColorman]

I am now running into a similar problem. I want the user to be able to drag to pan anywhere on the screen, including on nodes, but I still want nodes to be selectable and register hover. So, if you start dragging over a node, it’ll pan, but if you click the node it will become selected, and hovering also works. This behavior seems relatively complex, but would it be doable?