refactor(panning): enable panning when nodesDraggable is false #1457

packages/core/src/components/Handle/index.tsx

@@ -16,6 +16,7 @@ export type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElem
 const selector = (s: ReactFlowState) => ({
   connectionStartHandle: s.connectionStartHandle,
   connectOnClick: s.connectOnClick,
+  noPanClassName: s.noPanClassName,
 });
 
 const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
@@ -36,7 +37,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
   ) => {
     const store = useStoreApi();
     const nodeId = useContext(NodeIdContext) as string;
-    const { connectionStartHandle, connectOnClick } = useStore(selector, shallow);
+    const { connectionStartHandle, connectOnClick, noPanClassName } = useStore(selector, shallow);
 
     const handleId = id || null;
     const isTarget = type === 'target';
@@ -110,6 +111,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
           'react-flow__handle',
           `react-flow__handle-${position}`,
           'nodrag',
+          noPanClassName,
           className,
           {
             source: !isTarget,

packages/core/src/components/Nodes/wrapNode.tsx

@@ -151,7 +151,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
         className={cc([
           'react-flow__node',
           `react-flow__node-${type}`,
-          noPanClassName,
           className,
           {
             selected,

packages/core/src/components/StoreUpdater/index.tsx

@@ -40,6 +40,7 @@ type StoreUpdaterProps = Pick<
   | 'onSelectionDragStart'
   | 'onSelectionDrag'
   | 'onSelectionDragStop'
+  | 'noPanClassName'
 >;
 
 const selector = (s: ReactFlowState) => ({
@@ -108,6 +109,7 @@ const StoreUpdater = ({
   onSelectionDrag,
   onSelectionDragStart,
   onSelectionDragStop,
+  noPanClassName,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -154,6 +156,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('onSelectionDrag', onSelectionDrag, store.setState);
   useDirectStoreUpdater('onSelectionDragStart', onSelectionDragStart, store.setState);
   useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState);
+  useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);