From 5a0ad9dd43e0bb40c4f89bb55137ea4756a0127e Mon Sep 17 00:00:00 2001
From: snuziale <6452957+snuziale@users.noreply.github.com>
Date: Thu, 26 Feb 2026 22:00:40 -0800
Subject: [PATCH] fix(apollo-react): stabilize panOnDrag array reference to
 prevent unnecessary re-renders

---
 .../src/canvas/components/BaseCanvas/BaseCanvas.constants.ts  | 3 +++
 .../src/canvas/components/BaseCanvas/BaseCanvas.tsx           | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.constants.ts b/packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.constants.ts
index 7c6b40837..2d2cec03a 100644
--- a/packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.constants.ts
+++ b/packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.constants.ts
@@ -47,6 +47,9 @@ export const BASE_CANVAS_DEFAULTS = {
   organizeAnimationDuration: 500,
 } as const;
 
+/** Stable reference: restrict panning to middle-mouse-button only so left-click stays free for node interaction */
+export const PAN_ON_DRAG: [number] = [1];
+
 // Timing constants
 export const FIT_VIEW_DELAY_MS = 50;
 export const CANVAS_READY_DELAY_MS = 50;
diff --git a/packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.tsx b/packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.tsx
index d237546d2..540208392 100644
--- a/packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.tsx
+++ b/packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.tsx
@@ -11,7 +11,7 @@ import {
   useState,
 } from 'react';
 import { useToolbarActionStore } from '../../hooks/ToolbarActionContext';
-import { BASE_CANVAS_DEFAULTS } from './BaseCanvas.constants';
+import { BASE_CANVAS_DEFAULTS, PAN_ON_DRAG } from './BaseCanvas.constants';
 import { useAutoLayout, useEnsureNodesInView, useMaintainNodesInView } from './BaseCanvas.hooks';
 import type { BaseCanvasProps, BaseCanvasRef } from './BaseCanvas.types';
 import { CanvasBackground } from './CanvasBackground';
@@ -175,7 +175,7 @@ const BaseCanvasInnerComponent = <NodeType extends Node = Node, EdgeType extends
         panOnScroll={isInteractive}
         zoomOnScroll={isInteractive}
         zoomOnDoubleClick={isInteractive && zoomOnDoubleClick}
-        panOnDrag={isInteractive ? [1] : false}
+        panOnDrag={isInteractive ? PAN_ON_DRAG : false}
         onInit={handleInit}
         onNodesChange={isInteractive ? onNodesChange : undefined}
         onEdgesChange={isInteractive ? onEdgesChange : undefined}