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);

packages/core/src/container/ReactFlow/index.tsx

@@ -261,6 +261,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onSelectionDrag={onSelectionDrag}
             onSelectionDragStart={onSelectionDragStart}
             onSelectionDragStop={onSelectionDragStop}
+            noPanClassName={noPanClassName}
           />
           {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
           {children}

packages/core/src/store/initialState.ts

@@ -31,6 +31,7 @@ const initialState: ReactFlowStore = {
   connectionMode: ConnectionMode.Strict,
   domNode: null,
   paneDragging: false,
+  noPanClassName: 'nopan',
 
   snapGrid: [15, 15],
   snapToGrid: false,

packages/core/src/types/general.ts

@@ -140,6 +140,7 @@ export type ReactFlowStore = {
   hasDefaultEdges: boolean;
   domNode: HTMLDivElement | null;
   paneDragging: boolean;
+  noPanClassName: string;
 
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;