fix(elementsSelectable): still draggable if not selectable

example/src/Subflow/index.tsx

@@ -15,7 +15,7 @@ import ReactFlow, {
 } from 'react-flow-renderer';
 import DebugNode from './DebugNode';
 
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
@@ -105,15 +105,12 @@ const nodeTypes = {
   default: DebugNode,
 };
 
-const BasicFlow = () => {
+const Subflow = () => {
   const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = useCallback((connection: Connection) => {
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
-    setEdges((eds) => addEdge(connection, eds));
-  }, []);
-
   const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
 
   const updatePos = () => {
@@ -194,4 +191,4 @@ const BasicFlow = () => {
   );
 };
 
-export default BasicFlow;
+export default Subflow;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "react-flow-renderer",
-  "version": "10.2.3",
+  "version": "10.2.4-next.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-flow-renderer",
-      "version": "10.2.3",
+      "version": "10.2.4-next.0",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.17.9",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-renderer",
-  "version": "10.2.3",
+  "version": "10.2.4-next.0",
   "engines": {
     "node": ">=14"
   },

src/hooks/useDrag/index.ts

@@ -101,7 +101,7 @@ function useDrag({
             }
 
             const mousePos = getMousePosition(event);
-            dragItems.current = getDragItems(nodeInternals, mousePos);
+            dragItems.current = getDragItems(nodeInternals, mousePos, nodeId);
 
             if (onStart && dragItems.current) {
               const [currentNode, nodes] = getEventHandlerParams({

src/hooks/useDrag/utils.ts

@@ -44,9 +44,9 @@ export function selectorExistsTargetToNode(target: Element, selector: string, no
 }
 
 // looks for all selected nodes and created a NodeDragItem for each of them
-export function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition): NodeDragItem[] {
+export function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition, nodeId?: string): NodeDragItem[] {
   return Array.from(nodeInternals.values())
-    .filter((n) => n.selected && (!n.parentNode || !isParentSelected(n, nodeInternals)))
+    .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, nodeInternals)))
     .map((n) => ({
       id: n.id,
       position: n.position,