From 8784052ccfb6d72a40307556bf1f40fc621f68b6 Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Thu, 18 Jan 2024 20:05:15 -0700
Subject: [PATCH] Canvas: Pan zoom minor refactor (#80337)

* enable context menu for canvas while in panel edit mode

* Disable context menu when editing is not enabled in canvas

* follow up minor refactor
---
 .../canvas/runtime/SceneTransformWrapper.tsx  | 20 +++++++++++++++-
 public/app/features/canvas/runtime/scene.tsx  | 24 +------------------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/public/app/features/canvas/runtime/SceneTransformWrapper.tsx b/public/app/features/canvas/runtime/SceneTransformWrapper.tsx
index eaa8cdad860..005f23bc4ac 100644
--- a/public/app/features/canvas/runtime/SceneTransformWrapper.tsx
+++ b/public/app/features/canvas/runtime/SceneTransformWrapper.tsx
@@ -19,6 +19,20 @@ export const SceneTransformWrapper = ({ scene, children: sceneDiv }: SceneTransf
     scene.scale = scale;
   };
 
+  const onSceneContainerMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    // If pan and zoom is disabled or context menu is visible, don't pan
+    if ((!scene.shouldPanZoom || scene.contextMenuVisible) && (e.button === 1 || (e.button === 2 && e.ctrlKey))) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    // If context menu is hidden, ignore left mouse or non-ctrl right mouse for pan
+    if (!scene.contextMenuVisible && !scene.isPanelEditing && e.button === 2 && !e.ctrlKey) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
   return (
     <TransformWrapper
       doubleClick={{ mode: 'reset' }}
@@ -31,7 +45,11 @@ export const SceneTransformWrapper = ({ scene, children: sceneDiv }: SceneTransf
       disabled={!config.featureToggles.canvasPanelPanZoom || !scene.shouldPanZoom}
       panning={{ allowLeftClickPan: false }}
     >
-      <TransformComponent>{sceneDiv}</TransformComponent>
+      <TransformComponent>
+        {/* The <div> element has child elements that allow for mouse events, so we need to disable the linter rule */}
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div onMouseDown={onSceneContainerMouseDown}>{sceneDiv}</div>
+      </TransformComponent>
     </TransformWrapper>
   );
 };
diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx
index 7816c09e62f..4031523ece0 100644
--- a/public/app/features/canvas/runtime/scene.tsx
+++ b/public/app/features/canvas/runtime/scene.tsx
@@ -668,30 +668,8 @@ export class Scene {
     const isTooltipValid = (this.tooltip?.element?.data?.links?.length ?? 0) > 0;
     const canShowElementTooltip = !this.isEditingEnabled && isTooltipValid;
 
-    const onSceneContainerMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      // If pan and zoom is disabled or context menu is visible, don't pan
-      if ((!this.shouldPanZoom || this.contextMenuVisible) && (e.button === 1 || (e.button === 2 && e.ctrlKey))) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-
-      // If context menu is hidden, ignore left mouse or non-ctrl right mouse for pan
-      if (!this.contextMenuVisible && !this.isPanelEditing && e.button === 2 && !e.ctrlKey) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-
     const sceneDiv = (
-      // The <div> element has child elements that allow for mouse events, so we need to disable the linter rule
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      <div
-        key={this.revId}
-        className={this.styles.wrap}
-        style={this.style}
-        ref={this.setRef}
-        onMouseDown={onSceneContainerMouseDown}
-      >
+      <div key={this.revId} className={this.styles.wrap} style={this.style} ref={this.setRef}>
         {this.connections.render()}
         {this.root.render()}
         {this.isEditingEnabled && (